hxgksystemapp/.history/src/views/knowledge/ask/dialog_20230828142640.vue

<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<el-dialog :model-value="true" :title="title" @close="handleClose">
	  <el-form
		ref="ruleFormRef"
		:model="formData"
		label-width="120px"
		class="demo-ruleForm"
	  >
		<el-form-item label="文章标题:" prop="name" :rules="nameRules">
		  <el-input v-model="formData.name" placeholder="请输入标题"></el-input>
		</el-form-item>
		<el-form-item label="所属栏目：" prop="sex">
		  <el-select v-model="formData.sex">
			<el-option label="工艺技术" value="工艺技术" />
			<el-option label="流程制度" value="流程制度" />
			<el-option label="设备管理" value="设备管理" />
			<el-option label="仪控仪表" value="仪控仪表" />
			<el-option label="机电维修" value="机电维修" />
			<el-option label="安全生产" value="安全生产" />
			<el-option label="质量管理" value="质量管理" />
			<el-option label="财务管理" value="财务管理" />
			<el-option label="人力资源" value="人力资源" />
			<el-option label="仓储物流" value="仓储物流" />
		  </el-select>
		</el-form-item>
		<el-form-item label="文档来源">
		  <el-radio-group v-model="formData.iop">
			<el-radio label="1" size="large" border>原创</el-radio>
			<el-radio label="2" size="large" border>转贴</el-radio>
		  </el-radio-group>
		</el-form-item>
		<el-form-item label="上传封面">
				  <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-success="handleAvatar">
	  <el-icon><Plus /></el-icon>
	  <template #file="{ file }">
		<div>
		  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
		  <span class="el-upload-list__item-actions">
			<span
			  class="el-upload-list__item-preview"
			  @click="handlePictureCardPreview(file)"
			>
			  <el-icon><zoom-in /></el-icon>
			</span>
			<span
			  v-if="!disabled"
			  class="el-upload-list__item-delete"
			  @click="handleDownload(file)"
			>
			  <el-icon><Download /></el-icon>
			</span>
			<span
			  v-if="!disabled"
			  class="el-upload-list__item-delete"
			  @click="handleRemove(file)"
			>
			  <el-icon><Delete /></el-icon>
			</span>
		  </span>
		</div>
	  </template>
	</el-upload>
	<el-dialog v-model="dialogVis">
	  <img w-full :src="dialogImageUrl" alt="Preview Image" />
	</el-dialog>
		</el-form-item>
		<el-form-item label="文档标签：">
		  <el-input
			v-model="formData.ccc"
			placeholder="请输入文本文档，每个标签请用，隔开！"
		  />
		</el-form-item>
		<el-form-item label="文档描述：">
		  <el-input
			v-model="formData.ade"
			:autosize="{ minRows: 2, maxRows: 4 }"
			type="textarea"
			placeholder="对于本次检查发现的问题，望相关责任单位安排专人严格按照时间节点及要求进行整改，整改后及时回复。企管部、综合办进行复查。"
		  />
		</el-form-item>
		<el-form-item label="附件下载：">
		  <el-switch v-model="childBorder" />
		</el-form-item>
		  <el-form-item label="文档正文：">
			  <Editor v-model="editContvalue" style="height: calc(100vh - 124px)"/>
	  </el-form-item>  
			  <el-form-item label="排序：">
		  <el-input
			v-model="formData.ddd"
			style="width: 200px"
			placeholder="请输入文档序号"
		  />
		</el-form-item>
		<el-form-item label="评论设置：">
		  <el-switch v-model="parentBorder" placeholder="启用" />
		</el-form-item>
		<el-form-item label="访问权限：" prop="age">
		  <el-radio-group v-model="formData.age">
			<el-radio :label="'公开'">公开</el-radio>
			<el-radio :label="'分厂'">分厂</el-radio>
			<el-radio :label="'工段'">工段</el-radio>
			<el-radio :label="'自定义'">自定义</el-radio>
		  </el-radio-group>
		</el-form-item>
		<el-form-item>
		  <el-button type="primary" @click="submitForm()">确定</el-button>
		  <el-button @click="resetForm()">重置</el-button>
		</el-form-item>
	  </el-form>
	</el-dialog>
  </template>
  <script lang="ts">
  import { reactive, toRefs, ref, onMounted} from "vue";
  import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
  import { ElMessage,UploadProps} from "element-plus";
  
  import type { UploadFile } from 'element-plus'
  interface FormInfo {
	id: string;
	age: string;
	name: string;
	sex: string;
	ccc: string;
	ade: string;
	iop: string;
	ddd: string;
	  dialogVis: boolean;
	dialogImageUrl: string;
  }
  const childBorder = ref(false);
  const parentBorder = ref(false);
  const editContvalue = ref("");
  const dialogImageUrl = ref("");
  const dialogVis = ref(false);
  const disabled = ref(false);
  const imageUrl = ref("");
  const handleRemove = (file: UploadFile) => {
	console.log(file);
  };
  const handlePictureCardPreview = (file: UploadFile) => {
	dialogImageUrl.value = file.url!;
	dialogVis.value = true;
  };
  const handleDownload = (file: UploadFile) => {
	console.log(file);
  };
  const nameRules = [
	{ required: true, message: "文章标题不能为空", trigger: "blur" },
	// 名称字段的其他验证规则
  ];
  const handleAvatarSuccess: UploadProps["onSuccess"] = (
	response,
	uploadFile
  ) => {
	imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  };
  export default {
	  components: {
	  Editor
	},
	props: {
	  title: {
		type: String,
		default: "",
	  },
	  dialogShow: {
		type: Boolean,
		default: false,
	  },
	  rowInfo: {
		type: Object as () => FormInfo,
		default() {
		  return {};
		},
	  },
	  arrayNum: {
		type: Number,
		default: 0,
	  },
	},
	setup(props, { emit }) {
	  const data = reactive({
		dialogFlag: false,
			  dialogVis: false, 
			  dialogImageUrl: "",
		formData: {
		  id: props.arrayNum.toString(),
		  age: "'公开'",
		  name: "",
		  sex: "",
		  ccc: "",
		  ade: "",
		  iop: "1",
		  ddd: "",
				  dialogVis: false, // 初始化为 false
		  dialogImageUrl: "", // 初始化为空字符串
		},
	  });
		  const handleAvatar = (response:any, uploadFile: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);
		  }
			  
			  }
	});
		  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: UploadFile) => {};
	  const handleDownload = (file: UploadFile) => {};
	  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>