重构组合式api

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

@@ -5,264 +5,228 @@
 				<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 placeholder="小红书" clearable></el-input>
+							<el-input v-model="formData.name" placeholder="请输入标签名称" clearable />
 						</el-form-item>
 					</el-col>
-					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="排序">
-              <el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序"
-                class="w100" />
-            </el-form-item>
-          </el-col> -->
-					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="客服状态">
-              <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启"
-                inactive-text="禁"></el-switch>
-            </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 height="400px" placeholder="请输入产品详细描述..." />
+							<Editor v-model="formData.content" height="400px" placeholder="请输入产品详细描述..." />
 						</el-form-item>
 					</el-col>
-					<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-            <el-form-item label="菜单权限">
-              <el-row :gutter="35">
-                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-                  <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
-                  <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
-                  <el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
-                </el-col>
-                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-                  <el-tree :data="menuData" ref="menuRef" :props="menuProps" :default-checked-keys="formData.menuIds"
-                    node-key="id" show-checkbox class="menu-data-tree tree-border"
-                    :check-strictly="!menuCheckStrictly" />
-                </el-col>
-              </el-row>
-            </el-form-item>
-          </el-col> -->
 				</el-row>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' : '修改' }}</el-button>
+					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">
+						{{ formData.id === 0 ? '新 增' : '修 改' }}
+					</el-button>
 				</span>
 			</template>
 		</el-dialog>
 	</div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref } from 'vue';
-import { addRole, editRole, getRole, getRoleParams } from '/@/api/system/role';
-import { ElMessage } from 'element-plus';
-import { refreshBackEndControlRoutes } from '/@/router/backEnd';
-// 引入富文本编辑器组件
+<script lang="ts" setup>
+import { ref, reactive, toRefs, nextTick } from 'vue';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { addRole, editRole, getRole } from '/@/api/customerService/script';
 import Editor from '/@/components/editor/index.vue';
 
-// 定义接口来定义对象的类型
+// 定义类型接口
 interface MenuDataTree {
 	id: number;
 	pid: number;
 	title: string;
 	children?: MenuDataTree[];
 }
+
 interface DialogRow {
 	id: number;
 	name: string;
 	status: number;
 	listOrder: number;
 	remark: string;
-	menuIds: Array<number>;
-}
-interface RoleState {
-	loading: boolean;
-	isShowDialog: boolean;
-	formData: DialogRow;
-	menuData: Array<MenuDataTree>;
-	menuExpand: boolean;
-	menuNodeAll: boolean;
-	menuCheckStrictly: boolean;
-	menuProps: {
-		children: string;
-		label: string;
-	};
-	rules: object;
+	menuIds: number[];
+	content?: string;
 }
 
-export default defineComponent({
-	name: 'systemEditRole',
-	components: {
-		Editor, // 注册富文本组件
-	},
-	setup(props, { emit }) {
-		const { proxy } = getCurrentInstance() as any;
-		const formRef = ref<HTMLElement | null>(null);
-		const menuRef = ref();
-		const state = reactive<RoleState>({
-			loading: false,
-			isShowDialog: false,
-			formData: {
-				id: 0,
-				name: '',
-				status: 1,
-				listOrder: 0,
-				remark: '',
-				menuIds: [],
-			},
-			// 表单校验
-			rules: {
-				name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
-			},
-			menuData: [],
-			menuExpand: false,
-			menuNodeAll: false,
-			menuCheckStrictly: false,
-			menuProps: {
-				children: 'children',
-				label: 'title',
-			},
-		});
-		// 打开弹窗
-		const openDialog = (row?: DialogRow) => {
-			resetForm();
-			getMenuData();
-			if (row) {
-				getRole(row.id).then((res: any) => {
-					if (res.data.role) {
-						state.formData = res.data.role;
-						state.formData.menuIds = res.data.menuIds ?? [];
-					}
-				});
-			}
-			state.isShowDialog = true;
-		};
-		// 关闭弹窗
-		const closeDialog = () => {
-			state.isShowDialog = false;
-		};
-		// 取消
-		const onCancel = () => {
-			closeDialog();
-		};
-		// 新增
-		const onSubmit = () => {
-			const formWrap = unref(formRef) as any;
-			if (!formWrap) return;
-			formWrap.validate((valid: boolean) => {
-				if (valid) {
-					state.loading = true;
-					state.formData.menuIds = getMenuAllCheckedKeys();
-					if (state.formData.id === 0) {
-						//添加
-						addRole(state.formData)
-							.then(() => {
-								ElMessage.success('角色添加成功');
-								closeDialog(); // 关闭弹窗
-								resetMenuSession();
-								emit('getRoleList');
-							})
-							.finally(() => {
-								state.loading = false;
-							});
-					} else {
-						//修改
-						editRole(state.formData)
-							.then(() => {
-								ElMessage.success('角色修改成功');
-								closeDialog(); // 关闭弹窗
-								resetMenuSession();
-								emit('getRoleList');
-							})
-							.finally(() => {
-								state.loading = false;
-							});
-					}
+// 定义事件
+const emit = defineEmits<{
+	(e: 'getRoleList'): void;
+}>();
+
+// 响应式数据
+const state = reactive({
+	loading: false,
+	isShowDialog: false,
+	formData: {
+		id: 0,
+		name: '',
+		status: 1,
+		listOrder: 0,
+		remark: '',
+		menuIds: [],
+		content: '',
+	} as DialogRow,
+	menuData: [] as MenuDataTree[],
+	menuExpand: false,
+	menuNodeAll: false,
+	menuCheckStrictly: false,
+});
+
+// 表单验证规则
+const rules: FormRules = {
+	name: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
+	content: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }],
+};
+
+// 模板引用
+const formRef = ref<FormInstance>();
+const menuRef = ref();
+
+// 解构状态数据
+const { loading, isShowDialog, formData, menuData, menuExpand, menuNodeAll, menuCheckStrictly } = toRefs(state);
+
+// 菜单配置
+const menuProps = {
+	children: 'children',
+	label: 'title',
+};
+
+/**
+ * 打开对话框
+ * @param row - 可选的编辑数据
+ */
+const openDialog = (row?: DialogRow) => {
+	resetForm();
+
+	if (row) {
+		// 编辑模式：获取角色详情
+		getRole(row.id)
+			.then((res: any) => {
+				if (res.data?.role) {
+					state.formData = {
+						...res.data.role,
+						content: res.data.role.content || '',
+						menuIds: res.data.menuIds ?? [],
+					};
 				}
+			})
+			.catch((error) => {
+				console.error('获取角色详情失败:', error);
+				ElMessage.error('获取角色详情失败');
 			});
-		};
-		// 获取菜单结构数据
-		const getMenuData = () => {
-			getRoleParams().then((res: any) => {
-				state.menuData = proxy.handleTree(res.data.menu, 'id', 'pid');
-			});
-		};
-		const resetForm = () => {
-			state.menuCheckStrictly = false;
-			state.menuExpand = false;
-			state.menuNodeAll = false;
-			state.formData = {
-				id: 0,
-				name: '',
-				status: 1,
-				listOrder: 0,
-				remark: '',
-				menuIds: [],
-			};
-		};
-		/** 树权限（展开/折叠）*/
-		const handleCheckedTreeExpand = (value: any) => {
-			let treeList = state.menuData;
-			for (let i = 0; i < treeList.length; i++) {
-				menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
-			}
-		};
+	}
 
-		/** 树权限（全选/全不选） */
-		const handleCheckedTreeNodeAll = (value: any) => {
-			menuRef.value.setCheckedNodes(value ? state.menuData : []);
-		};
+	state.isShowDialog = true;
+};
 
-		/** 树权限（父子联动） */
-		const handleCheckedTreeConnect = (value: any) => {
-			state.menuCheckStrictly = value ? true : false;
-		};
+/**
+ * 关闭对话框
+ */
+const closeDialog = () => {
+	state.isShowDialog = false;
+};
 
-		/** 所有菜单节点数据 */
-		function getMenuAllCheckedKeys() {
-			// 目前被选中的菜单节点
-			let checkedKeys = menuRef.value.getCheckedKeys();
-			// 半选中的菜单节点
-			let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
-			checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-			return checkedKeys;
+/**
+ * 取消操作
+ */
+const onCancel = () => {
+	closeDialog();
+};
+
+/**
+ * 提交表单
+ */
+const onSubmit = async () => {
+	if (!formRef.value) return;
+
+	try {
+		// 表单验证
+		const valid = await formRef.value.validate();
+		if (!valid) return;
+
+		state.loading = true;
+
+		if (state.formData.id === 0) {
+			// 新增模式
+			await addRole(state.formData);
+			ElMessage.success('添加成功');
+		} else {
+			// 编辑模式
+			await editRole(state.formData);
+			ElMessage.success('修改成功');
 		}
 
-		// 重置菜单session
-		const resetMenuSession = () => {
-			refreshBackEndControlRoutes();
-		};
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			menuRef,
-			formRef,
-			handleCheckedTreeExpand,
-			handleCheckedTreeNodeAll,
-			handleCheckedTreeConnect,
-			resetMenuSession,
-			...toRefs(state),
-		};
-	},
+		// 关闭对话框并刷新列表
+		closeDialog();
+		emit('getRoleList');
+	} catch (error) {
+		console.error('提交失败:', error);
+		ElMessage.error('操作失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+/**
+ * 重置表单
+ */
+const resetForm = () => {
+	state.menuCheckStrictly = false;
+	state.menuExpand = false;
+	state.menuNodeAll = false;
+	state.formData = {
+		id: 0,
+		name: '',
+		status: 1,
+		listOrder: 0,
+		remark: '',
+		menuIds: [],
+		content: '',
+	};
+
+	// 重置表单验证状态
+	nextTick(() => {
+		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 !important;
+	border: 1px solid #e5e6e7;
 	border-radius: 4px;
 }
 
-.system-edit-role-container {
-	.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;
-	}
+.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>

src/views/customerService/script/index.vue

@@ -47,7 +47,7 @@
 import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditRole from '/@/views/customerService/script/component/editRole.vue';
-import { deleteRole, getRoleList } from '/@/api/system/role';
+import { deleteRole, getRoleList } from '/@/api/customerService/script';
 // 定义接口来定义对象的类型
 interface TableData {
 	id: number;