完善请求

src/views/customerService/script/component/editRole.vue

@@ -1,17 +1,17 @@
 <template>
 	<div class="system-edit-role-container">
-		<el-dialog title="" v-model="isShowDialog" width="769px">
-			<el-form ref="formRef" :model="state.formData" :rules="rules" size="default" label-width="90px">
+		<el-dialog title="" v-model="isShowDialog" width="769px" @close="onDialogClose">
+			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="标签" prop="name">
-							<el-input v-model="formData.tag" :placeholder="formData.tag" clearable />
+						<el-form-item label="标签" prop="tag">
+							<el-input v-model="formData.tag" placeholder="请输入标签" clearable />
 						</el-form-item>
 					</el-col>
 					<!-- 富文本编辑器 -->
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="产品详情" prop="content">
-							<Editor v-model="formData.content" height="400px" :placeholder="formData.content" />
+							<Editor v-model="formData.content" height="400px" :key="editorKey" placeholder="请输入产品详情" />
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -33,22 +33,14 @@ import { ref, reactive, toRefs, nextTick } from 'vue';
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
 import Editor from '/@/components/editor/index.vue';
 import { getscriptAdd, updatescript } from '/@/api/customerService/script';
-// console.log(Session.get('userInfo').userNickname, 'user');
 
 // 定义类型接口
-interface MenuDataTree {
-	id: number;
-	pid: number;
-	title: string;
-	children?: MenuDataTree[];
-}
-
 interface DialogRow {
 	id: number;
 	tag: string;
 	creator: string;
 	content: string;
-	modifier: '';
+	modifier: string;
 }
 
 // 定义事件
@@ -60,17 +52,14 @@ const emit = defineEmits<{
 const state = reactive({
 	loading: false,
 	isShowDialog: false,
+	editorKey: 0, // 用于强制重新渲染编辑器
 	formData: {
 		id: 0,
 		tag: '',
 		content: '',
 		creator: '',
 		modifier: '',
-	},
-	menuData: [] as MenuDataTree[],
-	menuExpand: false,
-	menuNodeAll: false,
-	menuCheckStrictly: false,
+	} as DialogRow,
 });
 
 // 表单验证规则
@@ -81,16 +70,9 @@ const rules: FormRules = {
 
 // 模板引用
 const formRef = ref<FormInstance>();
-const menuRef = ref();
 
 // 解构状态数据
-const { loading, isShowDialog, formData, menuData, menuExpand, menuNodeAll, menuCheckStrictly } = toRefs(state);
-
-// 菜单配置
-const menuProps = {
-	children: 'children',
-	label: 'title',
-};
+const { loading, isShowDialog, formData, editorKey } = toRefs(state);
 
 /**
  * 打开对话框
@@ -98,26 +80,46 @@ const menuProps = {
  */
 const openDialog = (row?: DialogRow) => {
 	resetForm();
-	console.log(row, 'row');
+
 	if (row) {
-		state.formData = row;
+		// 深拷贝数据，避免引用问题
+		state.formData = { ...row };
+	} else {
+		// 新增模式，确保清空数据
+		state.formData = {
+			id: 0,
+			tag: '',
+			content: '',
+			creator: '',
+			modifier: '',
+		};
 	}
 
+	// 更新编辑器 key 强制重新渲染
+	state.editorKey++;
+
 	state.isShowDialog = true;
+
+	// 确保 DOM 更新后处理
+	nextTick(() => {
+		if (formRef.value) {
+			formRef.value.clearValidate();
+		}
+	});
 };
 
 /**
- * 关闭对话框
+ * 对话框关闭时的处理
  */
-const closeDialog = () => {
-	state.isShowDialog = false;
+const onDialogClose = () => {
+	resetForm();
 };
 
 /**
  * 取消操作
  */
 const onCancel = () => {
-	closeDialog();
+	state.isShowDialog = false;
 };
 
 /**
@@ -136,7 +138,6 @@ const onSubmit = async () => {
 		if (state.formData.id === 0) {
 			// 新增模式
 			await getscriptAdd(state.formData);
-			console.log(state.formData);
 			ElMessage.success('添加成功');
 		} else {
 			// 编辑模式
@@ -145,7 +146,7 @@ const onSubmit = async () => {
 		}
 
 		// 关闭对话框并刷新列表
-		closeDialog();
+		state.isShowDialog = false;
 		emit('success');
 	} catch (error) {
 		console.error('提交失败:', error);
@@ -159,9 +160,6 @@ const onSubmit = async () => {
  * 重置表单
  */
 const resetForm = () => {
-	state.menuCheckStrictly = false;
-	state.menuExpand = false;
-	state.menuNodeAll = false;
 	state.formData = {
 		id: 0,
 		tag: '',
@@ -172,43 +170,14 @@ const resetForm = () => {
 
 	// 重置表单验证状态
 	nextTick(() => {
-		formRef.value?.clearValidate();
+		if (formRef.value) {
+			formRef.value.clearValidate();
+		}
 	});
 };
 
 // 暴露方法给父组件使用
 defineExpose({
 	openDialog,
-	closeDialog,
 });
 </script>
-
-<style scoped lang="scss">
-.system-edit-role-container {
-	:deep(.el-dialog__body) {
-		padding: 20px;
-	}
-
-	.mb20 {
-		margin-bottom: 20px;
-	}
-
-	.dialog-footer {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-	}
-}
-
-.tree-border {
-	margin-top: 5px;
-	border: 1px solid #e5e6e7;
-	border-radius: 4px;
-}
-
-.menu-data-tree {
-	border: var(--el-input-border, var(--el-border-base));
-	border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
-	padding: 5px;
-}
-</style>