hxgksystemapp/.history/src/views/knowledge/exam/dialog_20230829134401.vue

<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<el-dialog :model-value="true" :title="title" @close="handleClose">
	<el-button class="new_btn" type="primary" @click="handleNew"
		>新增</el-button>
	<el-table
      ref="multipleTableRef"
      :data="studentInfoac"
      border
      style="width: 100%"
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="文章标题" />
      <el-table-column prop="sex" label="所属栏目" />
      <el-table-column prop="age" label="可见范围" />
      <el-table-column prop="num" label="访问数据" width="440" />
	  </el-table>
	</el-dialog>
	<Diaacg       
	  v-if="diaacdShow"
      v-model:diaacdShow="diaacdShow"
      :row-info="aceInfo"
      :title="title"
	  :array-num="studentInfoac.length"
      />
  </template>
  <script>
  import { reactive, toRefs, ref, onMounted} from "vue";
  import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
  import { ElMessage,UploadProps} from "element-plus";
  
  import { UploadFile } from 'element-plus'
  import Diaacd from "./diaacd.vue";
  interface FormInfo {
	id: string;
	age: string;
	name: string;
	sex: string;
	ccc: string;
	ade: string;
	num: string,
	abc: string,
	acc: string,
	ace: string,
	acf: string,
	acg: string,
	acd: string,
	abg: string,
  }
  const childBorder = ref(false);
  const parentBorder = ref(false);
  const editContvalue = ref("");
  const imageUrl = ref("");
  const nameRules = [
	{ required: true, message: "文章标题不能为空", trigger: "blur" },
	// 名称字段的其他验证规则
  ];
  const handleAvatarSuccess: UploadProps["onSuccess"] = (
	response,
	uploadFile
  ) => {
	imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  };
  export default {
	  // eslint-disable-next-line vue/no-unused-components
	  components: { Diaacd },
	props: {
	  title: {
		type: String,
		default: "",
	  },
	  dialogShow: {
		type: Boolean,
		default: false,
	  },
	  rowInfo: {
		type: Object as () => FormInfo,
		default() {
		  return {};
		},
	  },
	  arrayNum: {
		type: Number,
		default: 0,
	  },
	},
emits: ['image-uploaded', 'update:dialogShow', 'editRow', 'addRow'],
	setup(props, { emit }) {
	  const data = reactive({
		diaacdShow:false,
		dialogFlag: false,
		dialogVis: false, 
		dialogImageUrl: "",
		aceInfo:{},
		title:"",
		formData: {
		  id: props.arrayNum.toString(),
		  age: "'公开'",
		  name: "",
		  sex: "",
		  ccc: "",
		  ade: "",
		  num: "",
		  abc: "",
		  acd: "",
		  acc: "",
		  ace: "",
		  acf: "",
		  acg: "",
		  abg:"",
		},
		studentInfoac:[
			
		],
	  });
		const handleAvatar = (response, uploadFile) => {
			  if (uploadFile.raw) {
		const imageUrl = URL.createObjectURL(uploadFile.raw);
		// 触发自定义事件，传递图片URL给父组件
		emit('image-uploaded', imageUrl);
			  }
	  };
	  const method = reactive({
		// 关闭弹窗
		handleClose() {
		  emit("update:dialogShow", false);
		},
		// 重置
		resetForm() {
		  data.formData = Object.assign({}, props.rowInfo);
		},
		// 提交表单内容
		submitForm() {
		  method.handleClose();
		  if (props.rowInfo.name) {
			// 修改
			const id = props.rowInfo;
			emit("editRow", data.formData);
		  } else {
			// 新增
			data.formData["id"] = (props.arrayNum + 1).toString();
			emit("addRow", data.formData);
		  }
		},
		handleNew() {
		  data.title = "新增";
		  data.aceInfo = {};
		  data.diaacdShow = true;
		},
		handleEdit(val) {
		  data.title = "修改";
		  data.diaacdShow = true;
		  data.aceInfo = val;
		},
		handleDel(val) {
		  ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
			confirmButtonText: "确认",
			cancelButtonText: "取消",
			type: "warning",
		  })
			.then(() => {
			  method.handleSure(val);
			})
			.catch(() => {
			  // 捕获错误
			});
		},
		handleSure(val) {
		  this.dialogVisible = false;
		  const index = data.studentInfoac.findIndex((item) => item.id === val.id);
		  data.studentInfoac.splice(index, 1);
		},
		// 添加行
		addRow(val) {
		  data.studentInfoac.push(val);
		},
		// 编辑行
		editRow(val) {
		  let index = data.studentInfoac.findIndex(
			(item, index) => item.id === val.id
		  );
		  data.studentInfo.splice(index, 1, val);
		},
		// 关闭详情弹窗
		handleSelectionChange(val) {
		  multipleSelection.value = val;
		},
		handleBatchDelete() {
		  if (multipleSelection.value.length === 0) {
			ElMessageBox.alert("请选择要删除的数据", "提示", {
			  confirmButtonText: "确定",
			});
			return;
		  }
  
		  ElMessageBox.confirm("确定要批量删除所选数据吗？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		  })
			.then(() => {
			  data.studentInfo = data.studentInfo.filter(
				(item) => !multipleSelection.value.includes(item)
			  );
			  multipleSelection.value = []; // 清除选择
			})
			.catch(() => {
			  // 用户取消删除
			});
		},
		handleSave(formData) {
		  formData.id = this.studentInfoac.length + 1; //生成唯一ID
		  data.studentInfoac.push(formData); // 将新数据添加到阵列
		},
	});
		  const editorInstance = ref(null);
	  onMounted(() => {
		data.formData = Object.assign({}, props.rowInfo);
	  });
		  const imageUrl = ref("");
	  const handlePictureCardPreview = (file: UploadFile) => {};
	  const disabled = ref(false);
	  const handleRemove = (file) => {};
	  const handleDownload = (file) => {};
	  return {
		...toRefs(data),
		...method,
		disabled,
		handleRemove,
		handlePictureCardPreview,
		handleDownload,
		editContvalue,
		nameRules,
		parentBorder,
		childBorder,
		imageUrl,
		handleAvatarSuccess,
		editorInstance,
		handleAvatar,

	  };
	},
  };
  </script>
  
  <style scoped>
  
  
  .avatar-uploader .avatar {
	display: block;
	width: 178px;
	height: 178px;
  }
  </style>
  
  <style lang="scss">
  .avatar-uploader .el-upload {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
	width: 178px;
	height: 178px;
	font-size: 28px;
	color: #8c939d;
	text-align: center;
  }
  .el-dialog{
	  width:1200px;
  }
  </style>