重构组合式api

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

@@ -1,244 +1,251 @@
 <template>
-  <div class="system-edit-role-container">
-    <el-dialog title="" v-model="isShowDialog" width="1000px">
-      <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 placeholder="xxx" clearable></el-input>
-            </el-form-item>
-          </el-col>
+	<div class="system-edit-role-container">
+		<el-dialog :title="(formData.id === 0 ? '添加' : '修改') + '产品'" v-model="isShowDialog" width="1000px">
+			<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.name" 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 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="产品详情" prop="content">
+							<Editor v-model="formData.content" height="400px" placeholder="请输入产品详细描述..." />
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
 
-
-        </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 #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 } from 'vue';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { addRole, editRole, getRole } from '/@/api/system/role';
 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;
+/**
+ * 产品表单数据接口
+ */
+interface ProductFormData {
+	id: number; // 产品ID
+	name: string; // 产品名称
+	status: number; // 状态：1-启用，0-禁用
+	listOrder: number; // 排序
+	remark: string; // 备注
+	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 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 ComponentState {
+	loading: boolean; // 提交加载状态
+	isShowDialog: boolean; // 对话框显示状态
+	formData: ProductFormData; // 表单数据
+}
 
-    /** 树权限（全选/全不选） */
-    const handleCheckedTreeNodeAll = (value: any) => {
-      menuRef.value.setCheckedNodes(value ? state.menuData : []);
-    }
+// 定义组件事件
+const emit = defineEmits<{
+	/**
+	 * 获取产品列表事件 - 用于刷新父组件列表
+	 */
+	(e: 'getRoleList'): void;
+}>();
 
-    /** 树权限（父子联动） */
-    const handleCheckedTreeConnect = (value: any) => {
-      state.menuCheckStrictly = value ? true : false;
-    }
+// 响应式状态
+const state = reactive<ComponentState>({
+	loading: false,
+	isShowDialog: false,
+	formData: {
+		id: 0,
+		name: '',
+		status: 1,
+		listOrder: 0,
+		remark: '',
+		content: '',
+	},
+});
 
-    /** 所有菜单节点数据 */
-    function getMenuAllCheckedKeys() {
-      // 目前被选中的菜单节点
-      let checkedKeys = menuRef.value.getCheckedKeys();
-      // 半选中的菜单节点
-      let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
-    }
+// 表单验证规则
+const rules: FormRules = {
+	name: [
+		{ required: true, message: '产品名称不能为空', trigger: 'blur' },
+		{ min: 2, max: 50, message: '产品名称长度在 2 到 50 个字符', trigger: 'blur' },
+	],
+	content: [{ required: true, message: '产品详情不能为空', trigger: 'blur' }],
+};
 
-    // 重置菜单session
-    const resetMenuSession = () => {
-      refreshBackEndControlRoutes();
-    };
-    return {
-      openDialog,
-      closeDialog,
-      onCancel,
-      onSubmit,
-      menuRef,
-      formRef,
-      handleCheckedTreeExpand,
-      handleCheckedTreeNodeAll,
-      handleCheckedTreeConnect,
-      resetMenuSession,
-      ...toRefs(state),
-    };
-  },
+// 模板引用
+const formRef = ref<FormInstance>();
+
+// 解构状态数据，便于模板使用
+const { loading, isShowDialog, formData } = toRefs(state);
+
+/**
+ * 打开对话框
+ * @param row - 可选的编辑数据，如果传入则为编辑模式，否则为新增模式
+ */
+const openDialog = async (row?: ProductFormData) => {
+	// 重置表单
+	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,
+				content: res.data.role.content || '',
+			};
+		}
+	} 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 addRole(state.formData);
+			ElMessage.success('产品添加成功');
+		} else {
+			// 修改产品
+			await editRole(state.formData);
+			ElMessage.success('产品修改成功');
+		}
+
+		// 关闭对话框并刷新列表
+		closeDialog();
+		emit('getRoleList');
+	} catch (error) {
+		console.error('提交失败:', error);
+		ElMessage.error(state.formData.id === 0 ? '添加失败' : '修改失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+/**
+ * 重置表单
+ */
+const resetForm = () => {
+	// 重置表单数据
+	state.formData = {
+		id: 0,
+		name: '',
+		status: 1,
+		listOrder: 0,
+		remark: '',
+		content: '',
+	};
+
+	// 在下一个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;
 }
 </style>