重构组合式api

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

@@ -1,268 +1,319 @@
 <template>
-  <div class="system-edit-role-container">
-    <el-dialog :title="(formData.id === 0 ? '添加' : '修改') + '角色'" v-model="isShowDialog" width="769px">
-      <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="客服id" prop="name">
-              <el-input placeholder="987698789" clearable></el-input>
-            </el-form-item>
-          </el-col>
-          <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-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="角色描述">
-              <el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
-            </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>
-        </span>
-      </template>
-    </el-dialog>
+	<div class="system-edit-role-container">
+		<el-dialog :title="(formData.id === 0 ? '添加' : '修改') + '客服账号'" v-model="isShowDialog" width="769px">
+			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
+				<el-row :gutter="35">
+					<!-- 客服ID输入框 -->
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="客服ID" prop="name">
+							<el-input v-model="formData.name" placeholder="请输入客服ID，如：987698789" clearable />
+						</el-form-item>
+					</el-col>
 
-  </div>
+					<!-- 客服平台输入框 -->
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="客服平台" prop="platform">
+							<el-input v-model="formData.platform" 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-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启用" inactive-text="禁用" />
+						</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>
+				</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, defineEmits, defineExpose } from 'vue';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { addRole, editRole, getRole } from '/@/api/system/role';
 
-
-// 定义接口来定义对象的类型
+/**
+ * 菜单数据结构接口
+ */
 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;
+	id: number;
+	pid: number;
+	title: string;
+	children?: MenuDataTree[];
 }
 
-export default defineComponent({
-  name: 'systemEditRole',
-  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 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;
-      }
-    }
+/**
+ * 表单数据接口
+ */
+interface DialogFormData {
+	id: number;
+	name: string; // 客服ID
+	platform: string; // 客服平台
+	status: number; // 状态：0-禁用，1-启用
+	listOrder: number; // 排序
+	remark: string; // 备注
+	menuIds: number[]; // 菜单ID数组
+}
 
-    /** 树权限（全选/全不选） */
-    const handleCheckedTreeNodeAll = (value: any) => {
-      menuRef.value.setCheckedNodes(value ? state.menuData : []);
-    }
+/**
+ * 组件状态接口
+ */
+interface ComponentState {
+	loading: boolean; // 提交加载状态
+	isShowDialog: boolean; // 对话框显示状态
+	formData: DialogFormData; // 表单数据
+	menuData: MenuDataTree[]; // 菜单数据
+	menuExpand: boolean; // 菜单展开状态
+	menuNodeAll: boolean; // 菜单全选状态
+	menuCheckStrictly: boolean; // 菜单严格选择模式
+}
 
-    /** 树权限（父子联动） */
-    const handleCheckedTreeConnect = (value: any) => {
-      state.menuCheckStrictly = value ? true : false;
-    }
+// 定义组件事件
+const emit = defineEmits<{
+	/**
+	 * 获取角色列表事件
+	 */
+	(e: 'getRoleList'): void;
+}>();
 
-    /** 所有菜单节点数据 */
-    function getMenuAllCheckedKeys() {
-      // 目前被选中的菜单节点
-      let checkedKeys = menuRef.value.getCheckedKeys();
-      // 半选中的菜单节点
-      let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
-    }
+// 响应式状态管理
+const state = reactive<ComponentState>({
+	loading: false,
+	isShowDialog: false,
+	formData: {
+		id: 0,
+		name: '',
+		platform: '',
+		status: 1,
+		listOrder: 0,
+		remark: '',
+		menuIds: [],
+	},
+	menuData: [],
+	menuExpand: false,
+	menuNodeAll: false,
+	menuCheckStrictly: false,
+});
 
-    // 重置菜单session
-    const resetMenuSession = () => {
-      refreshBackEndControlRoutes();
-    };
-    return {
-      openDialog,
-      closeDialog,
-      onCancel,
-      onSubmit,
-      menuRef,
-      formRef,
-      handleCheckedTreeExpand,
-      handleCheckedTreeNodeAll,
-      handleCheckedTreeConnect,
-      resetMenuSession,
-      ...toRefs(state),
-    };
-  },
+// 表单验证规则
+const rules: FormRules = {
+	name: [
+		{ required: true, message: '客服ID不能为空', trigger: 'blur' },
+		{ min: 3, max: 20, message: '客服ID长度在 3 到 20 个字符', trigger: 'blur' },
+	],
+	platform: [{ required: true, message: '客服平台不能为空', trigger: 'blur' }],
+};
+
+// 模板引用
+const formRef = ref<FormInstance>();
+
+// 解构状态数据，便于模板使用
+const { loading, isShowDialog, formData, menuData, menuExpand, menuNodeAll, menuCheckStrictly } = toRefs(state);
+
+// 菜单树配置
+const menuProps = {
+	children: 'children',
+	label: 'title',
+};
+
+/**
+ * 打开对话框
+ * @param row - 可选的编辑数据，如果传入则为编辑模式，否则为新增模式
+ */
+const openDialog = async (row?: DialogFormData) => {
+	// 重置表单状态
+	resetForm();
+
+	try {
+		if (row && row.id) {
+			// 编辑模式：获取角色详情
+			await handleEditMode(row.id);
+		}
+
+		// 显示对话框
+		state.isShowDialog = true;
+	} catch (error) {
+		console.error('打开对话框失败:', error);
+		ElMessage.error('初始化数据失败');
+	}
+};
+
+/**
+ * 处理编辑模式的数据获取
+ * @param id - 角色ID
+ */
+const handleEditMode = async (id: number) => {
+	try {
+		const res = await getRole(id);
+		if (res.data?.role) {
+			// 填充表单数据
+			state.formData = {
+				...res.data.role,
+				platform: res.data.role.platform || '',
+				menuIds: res.data.menuIds ?? [],
+			};
+		}
+	} catch (error) {
+		console.error('获取角色详情失败:', error);
+		throw new Error('获取角色详情失败');
+	}
+};
+
+/**
+ * 关闭对话框
+ */
+const closeDialog = () => {
+	state.isShowDialog = false;
+};
+
+/**
+ * 取消操作
+ */
+const onCancel = () => {
+	closeDialog();
+};
+
+/**
+ * 提交表单
+ */
+const onSubmit = async () => {
+	// 验证表单引用是否存在
+	if (!formRef.value) {
+		ElMessage.error('表单引用不存在');
+		return;
+	}
+
+	try {
+		// 表单验证
+		const valid = await formRef.value.validate();
+		if (!valid) {
+			ElMessage.warning('请完善表单信息');
+			return;
+		}
+
+		// 设置加载状态
+		state.loading = true;
+
+		// 根据ID判断是新增还是修改
+		if (state.formData.id === 0) {
+			// 新增操作
+			await handleAddRole();
+		} else {
+			// 修改操作
+			await handleEditRole();
+		}
+
+		// 关闭对话框并刷新列表
+		closeDialog();
+		emit('getRoleList');
+		ElMessage.success(state.formData.id === 0 ? '添加成功' : '修改成功');
+	} catch (error) {
+		console.error('提交失败:', error);
+		ElMessage.error(state.formData.id === 0 ? '添加失败' : '修改失败');
+	} finally {
+		// 无论成功失败，都取消加载状态
+		state.loading = false;
+	}
+};
+
+/**
+ * 处理新增角色
+ */
+const handleAddRole = async () => {
+	await addRole(state.formData);
+};
+
+/**
+ * 处理编辑角色
+ */
+const handleEditRole = async () => {
+	await editRole(state.formData);
+};
+
+/**
+ * 重置表单
+ */
+const resetForm = () => {
+	// 重置菜单选择状态
+	state.menuCheckStrictly = false;
+	state.menuExpand = false;
+	state.menuNodeAll = false;
+
+	// 重置表单数据
+	state.formData = {
+		id: 0,
+		name: '',
+		platform: '',
+		status: 1,
+		listOrder: 0,
+		remark: '',
+		menuIds: [],
+	};
+
+	// 在下一个DOM更新周期后清除表单验证
+	nextTick(() => {
+		formRef.value?.clearValidate();
+	});
+};
+
+// 暴露方法给父组件使用
+defineExpose({
+	/**
+	 * 打开对话框方法
+	 */
+	openDialog,
+
+	/**
+	 * 关闭对话框方法
+	 */
+	closeDialog,
 });
 </script>
 
 <style scoped lang="scss">
-.tree-border {
-  margin-top: 5px;
-  border: 1px solid #e5e6e7 !important;
-  border-radius: 4px;
+.system-edit-role-container {
+	// 对话框内容区域样式
+	:deep(.el-dialog__body) {
+		padding: 20px;
+	}
+
+	// 底部按钮区域样式
+	.dialog-footer {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 10px;
+	}
 }
 
-.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;
-  }
+// 间距工具类
+.mb20 {
+	margin-bottom: 20px;
+}
+
+// 树形组件边框样式
+.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>