代码整理

src/views/systemManage/menuManage.vue

@@ -59,10 +59,7 @@
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Plus, Edit, Delete } from "@element-plus/icons-vue";
-import commonForm from "@/components/common/commonForm.vue";
 import CommonTable from "@/components/common/commonTable.vue";
-import { da } from "element-plus/es/locales.mjs";
 
 const { proxy } = getCurrentInstance();
 const loading = ref(false);

src/views/systemManage/roleManage.vue

@@ -51,9 +51,33 @@
       v-model="dialogVisible"
       :title="dialogTitle"
       width="400px"
-      @close="handleDialogClose"
+      @close="cancelRoleForm"
     >
-      <commonForm
+      <el-form :model="roleFormData" ref="roleForm" :rules="roleRules" label-width="100">
+        <el-form-item label="角色名称" prop="name">
+            <el-input v-model="roleFormData.name" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="角色标识" prop="key">
+            <el-input v-model="roleFormData.key" placeholder="请输入角色标识" />
+        </el-form-item>
+        <el-form-item label="菜单配置">
+          <el-tree ref="treeRef"
+              v-model="roleFormData.menus"
+              :data="treeData"
+              node-key="id"
+              :props="{label: 'name'}"
+              showCheckbox
+              @check="selectMenus"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+          <div class="dialog-footer">
+              <el-button @click="cancelRoleForm">取消</el-button>
+              <el-button type="primary" @click="saveRoleForm">保存</el-button>
+          </div>
+      </template>
+      <!-- <commonForm
         v-model="roleForm"
         :config="formConfig"
         :items="formItems"
@@ -74,7 +98,7 @@
             ref="treeRef"
           />
         </template>
-      </commonForm>
+      </commonForm> -->
     </el-dialog>
     <!-- <el-dialog v-model="menuVisible" title="菜单配置">
       <el-tree
@@ -98,7 +122,6 @@
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance, computed, nextTick } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import commonForm from "@/components/common/commonForm.vue";
 import CommonTable from "@/components/common/commonTable.vue";
 
 const { proxy } = getCurrentInstance();
@@ -107,10 +130,7 @@ const treeData = ref([]);
 const treeRef = ref(null);
 
 // 查询表单数据
-const searchForm = ref({
-  name: "",
-  mobile: "",
-});
+const searchForm = ref({});
 
 // 表格数据
 const tableData = ref([]);
@@ -153,56 +173,18 @@ const tableColumns = [
 // 对话框相关
 const dialogVisible = ref(false);
 const dialogTitle = ref("新增角色");
-const isEdit = ref(false);
-const editIndex = ref(-1);
 
 // 用户表单数据
-const roleForm = ref({
-  name: "",
-  key: "",
-  menus: [],
-});
-
-// 用户表单配置
-const formConfig = {
-  labelWidth: "100px",
-  showButtons: true,
-  submitText: "保存",
-  resetText: "取消",
+const roleForm = ref();
+const roleFormData = ref({});
+const roleRules = {
+  name: [
+    { required: true, message: "请输入角色名称", trigger: "blur" }
+  ],
+  key: [
+    { required: true, message: "请输入角色标识", trigger: "blur" }
+  ]
 };
-
-// 用户表单项配置
-const formItems = computed(() => [
-  {
-    type: "input",
-    prop: "name",
-    label: "角色名称",
-    placeholder: "请输入角色名称",
-    span: 24,
-    required: true,
-    rules: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-  },
-  {
-    type: "input",
-    prop: "key",
-    label: "角色标识",
-    placeholder: "请输入角色标识",
-    span: 24,
-    required: true,
-    rules: [{ required: true, message: "请输入角色标识", trigger: "blur" }],
-  },
-  {
-    type: "slot",
-    prop: "menus",
-    slotName: "menus",
-    label: "菜单配置",
-    span: 24,
-  },
-]);
-
-// 表单验证规则
-const formRules = {};
-
 // 事件处理函数
 const handleSearch = (formData) => {
   currentPage.value = 1;
@@ -221,42 +203,19 @@ const handleCurrentPageChange = (page) => {
 
 // 新增角色
 const handleAdd = () => {
-  isEdit.value = false;
   dialogTitle.value = "新增角色";
-  roleForm.value = {
-    name: "",
-    key: "",
-    menus: [],
-  };
-  // 清空树的已选项
-  if (treeRef.value && treeRef.value.setCheckedKeys) {
-    treeRef.value.setCheckedKeys([]);
-  }
   dialogVisible.value = true;
 };
-let currentID = ref();
-let currentRow = ref();
 // 编辑
 const handleEdit = (row, index) => {
-  isEdit.value = true;
   dialogTitle.value = "编辑角色";
-  editIndex.value = index;
-  currentRow.value = row;
   proxy.$post({
     url: "/api/user/role/getRole",
     data: { id: row.id },
     callback: (data) => {
-      roleForm.value = { ...data };
-      currentID.value = data.id;
-      // 如果返回了已选菜单，延后到下一个 DOM 更新周期再设置树的选中项（确保 tree 已渲染）
-      if (data.menus && treeRef.value && treeRef.value.setCheckedKeys) {
-        nextTick(() => {
-          try {
-            treeRef.value.setCheckedKeys(data.menus);
-          } catch (e) {
-            console.warn('setCheckedKeys failed:', e);
-          }
-        });
+      roleFormData.value = { ...data };
+      if (data.menus && data.menus.length) {
+        treeRef.value.setCheckedKeys(data.menus);
       }
     },
     error: (err) => {
@@ -268,79 +227,51 @@ const handleEdit = (row, index) => {
 
 // 删除
 const handleDelete = async (row, index) => {
-  try {
-    await ElMessageBox.confirm(`确定要删除角色"${row.name}"吗？`, "提示", {
+    ElMessageBox.confirm(`确定要删除角色"${row.name}"吗？`, "提示", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       type: "warning",
+    }).then(() => {
+      proxy.$post({
+        url: "/api/user/role/deleteRole",
+        data: { id: row.id },
+        callback: (data) => {
+          ElMessage.success("删除成功");
+          loadTableData();
+        },
+        error: (err) => {
+          ElMessage.error("删除失败:", err);
+        },
+      });
     });
-    proxy.$post({
-      url: "/api/user/role/deleteRole",
-      data: { id: row.id },
-      callback: (data) => {
-        dialogVisible.value = false;
-        loadTableData();
-        ElMessage.success("删除成功");
-      },
-      error: (err) => {
-        ElMessage.error("删除失败:", err);
-      },
-    });
-    loadTableData();
-  } catch {}
 };
 
-const handleFormSubmit = (formData) => {
-  // 在提交前确保同步树的选中项到 roleForm
-  hanldeSubmit();
-
-  if (isEdit.value) {
-    // 编辑用户 - 以 roleForm.value 为准，附带 id
-    const updateUser = {
-      ...roleForm.value,
-      id: currentID.value,
-    };
-    proxy.$post({
-      url: "/api/user/role/updateRole",
-      data: updateUser,
-      callback: (data) => {
-        dialogVisible.value = false;
-        loadTableData();
-        ElMessage.success("更新成功");
-      },
-      error: (err) => {
-        ElMessage.error("更新失败:", err);
-      },
-    });
-  } else {
-    // 新增角色 - 以 roleForm.value 为准，包含 menus
-    const newUser = {
-      ...roleForm.value,
-    };
-    proxy.$post({
-      url: "/api/user/role/createRole",
-      data: newUser,
-      callback: (data) => {
-        dialogVisible.value = false;
-        loadTableData();
-        ElMessage.success("角色添加成功");
-      },
-      error: (err) => {
-        ElMessage.error("角色添加失败:", err);
-      },
-    });
-  }
-};
-
-const handleFormReset = () => {
-  dialogVisible.value = false;
+const saveRoleForm = () => {
+  roleForm.value.validate(valid => {
+    if (valid) {
+      let url = roleFormData.value.id ? "updateRole" : "createRole";
+      proxy.$post({
+        url: "/api/user/role/" + url,
+        data: roleFormData.value,
+        callback: (data) => {
+          ElMessage.success(dialogTitle.value + "成功");
+          cancelRoleForm();
+          loadTableData();
+        },
+        error: (err) => {
+          ElMessage.error(dialogTitle.value + "失败:", err);
+        },
+      });
+    }
+  })
 };
-
-const handleDialogClose = () => {
+const cancelRoleForm = () => {
+  roleFormData.value = {};
+  roleForm.value.resetFields();
+  treeRef.value.setCheckedKeys([]);
   dialogVisible.value = false;
-};
-
-const hanldeSubmit = () => {
+}
+const selectMenus = () => {
   // 使用 treeRef 获取当前勾选节点
   const treeInst = treeRef.value;
   if (!treeInst) return;
@@ -358,7 +289,7 @@ const hanldeSubmit = () => {
   const allSelectedIds = Array.from(new Set([...checkedIds, ...halfCheckedIds]));
 
   // 把选中的菜单 id 写回表单数据，供提交使用
-  roleForm.value.menus = allSelectedIds;
+  roleFormData.value.menus = allSelectedIds;
   return allSelectedIds;
 };
 // 表格数据

src/views/systemManage/userManage.vue

@@ -33,6 +33,15 @@
         @size-change="handleSizeChange"
         @current-page-change="handleCurrentPageChange"
       >
+        <template #departs="{ row }">
+          <div>{{ row.departs?.map(item => item.name).join(",") }}</div>
+        </template>
+        <template #positions="{ row }">
+          <div>{{ row.positions?.map(item => item.name).join(",") }}</div>
+        </template>
+        <template #roles="{ row }">
+          <div>{{ row.roles?.map(item => item.name).join(",") }}</div>
+        </template>
         <template #enable="{ row }">
           <el-switch
             :model-value="row.enable === 0 ? true : false"
@@ -57,16 +66,59 @@
       v-model="dialogVisible"
       :title="dialogTitle"
       width="600px"
-      @close="handleDialogClose"
+      @close="cancelUserForm"
     >
-      <commonForm
-        v-model="userForm"
-        :config="formConfig"
-        :items="formItems"
-        :rules="formRules"
-        @submit="handleFormSubmit"
-        @reset="handleFormReset"
-      />
+      <el-form :model="userFormData" ref="userForm" :rules="userRules" label-width="100">
+        <el-form-item label="用户姓名" prop="name">
+            <el-input v-model="userFormData.name" placeholder="请输入用户姓名" />
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile">
+            <el-input v-model="userFormData.mobile" placeholder="请输入手机号码" />
+        </el-form-item>
+        <el-form-item label="所属部门">
+          <el-tree-select
+              v-model="userFormData.departs"
+              :data="departmentData"
+              node-key="id"
+              :props="{label: 'name'}"
+              placeholder="请选择所属部门"
+              multiple showCheckbox
+              :render-after-expand="false"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="岗位">
+            <el-select v-model="userFormData.positions"
+              multiple
+              placeholder="请选择岗位" no-data-text="暂无数据"
+            >
+                <el-option v-for="item in positionsData" :key="item.id"
+                    :label="item.name" :value="item.id"
+                ></el-option>
+            </el-select>
+        </el-form-item> -->
+        <el-form-item label="角色">
+            <el-select v-model="userFormData.roles"
+              multiple
+              placeholder="请选择角色" no-data-text="暂无数据"
+            >
+                <el-option v-for="item in rolesData" :key="item.id"
+                    :label="item.name" :value="item.id"
+                ></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+            <el-radio-group v-model="userFormData.enable">
+                <el-radio :value="0">启用</el-radio>
+                <el-radio :value="1">停用</el-radio>
+            </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+          <div class="dialog-footer">
+              <el-button @click="cancelUserForm">取消</el-button>
+              <el-button type="primary" @click="saveUserForm">保存</el-button>
+          </div>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -74,17 +126,13 @@
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import commonForm from "@/components/common/commonForm.vue";
 import CommonTable from "@/components/common/commonTable.vue";
 
 const { proxy } = getCurrentInstance();
 const loading = ref(false);
 
 // 查询表单数据
-const searchForm = ref({
-  name: "",
-  mobile: "",
-});
+const searchForm = ref({});
 // 表格数据
 const tableData = ref([]);
 const total = ref(0);
@@ -108,18 +156,21 @@ const tableColumns = [
     prop: "departs",
     label: "所属部门",
     minWidth: 120,
+    slot: "departs",
     showOverflowTooltip: true,
   },
-  {
-    prop: "positions",
-    label: "岗位",
-    minWidth: 100,
-    showOverflowTooltip: true,
-  },
+  // {
+  //   prop: "positions",
+  //   label: "岗位",
+  //   minWidth: 100,
+  //   slot: "positions",
+  //   showOverflowTooltip: true,
+  // },
   {
     prop: "roles",
     label: "角色",
     minWidth: 100,
+    slot: "roles",
     showOverflowTooltip: true,
   },
   // {
@@ -151,21 +202,8 @@ const isEdit = ref(false);
 const editIndex = ref(-1);
 
 // 用户表单数据
-const userForm = ref({
-  name: "",
-  departs: [],
-  positions: [],
-  roles: [],
-  enable: "0",
-});
-
-// 用户表单配置
-const formConfig = {
-  labelWidth: "100px",
-  showButtons: true,
-  submitText: "保存",
-  resetText: "取消",
-};
+const userForm = ref();
+const userFormData = ref({});
 const departmentData = ref([]);
 const positionsData = ref([]);
 const rolesData = ref([]);
@@ -175,7 +213,6 @@ const loadDepartmentData = () => {
     url: "/api/user/depart/treeDepart",
     data: {},
     callback: (data) => {
-      // departmentData.value = convertToTreeData(data);
       departmentData.value = data;
     },
     error: (err) => {},
@@ -208,87 +245,15 @@ const loadRolesData = () => {
     error: (err) => {},
   });
 };
-
-// 用户表单项配置
-const formItems = computed(() => [
-  {
-    type: "input",
-    prop: "name",
-    label: "用户姓名",
-    placeholder: "请输入用户姓名",
-    // required: true,
-    span: 24,
-    // rules: [{ required: true, message: "请输入用户姓名", trigger: "blur" }],
-  },
-  {
-    type: "tree",
-    prop: "departs",
-    label: "所属部门",
-    placeholder: "请选择部门",
-    data: departmentData.value,
-    clearable: true,
-    filterable: true,
-    checkStrictly: true,
-    renderAfterExpand: true,
-    showCheckbox: false,
-    multiple: true,
-    collapseTags: true,
-    maxCollapseTags: 2,
-    span: 24,
-  },
-  {
-    type: "tree",
-    prop: "positions",
-    label: "岗位",
-    placeholder: "请选择岗位",
-    data: positionsData.value,
-    clearable: true,
-    filterable: true,
-    checkStrictly: true,
-    renderAfterExpand: false,
-    showCheckbox: false,
-    multiple: true,
-    collapseTags: true,
-    maxCollapseTags: 2,
-    span: 24,
-  },
-  {
-    type: "tree",
-    prop: "roles",
-    label: "角色",
-    placeholder: "请选择角色",
-    data: rolesData.value,
-    clearable: true,
-    filterable: true,
-    checkStrictly: true,
-    renderAfterExpand: false,
-    showCheckbox: false,
-    multiple: true,
-    collapseTags: true,
-    maxCollapseTags: 2,
-    span: 24,
-  },
-  {
-    type: "input",
-    prop: "mobile",
-    label: "手机号码",
-    placeholder: "请输入手机号码",
-    span: 24,
-  },
-  {
-    type: "radio",
-    prop: "enable",
-    label: "状态",
-    span: 24,
-    options: [
-      { label: "启用", value: 0 },
-      { label: "停用", value: 1 },
-    ],
-  },
-]);
-
 // 表单验证规则
-const formRules = {};
+const userRules = {
+  name: [
+    { required: true, message: "请输入用户姓名", trigger: "blur" }
+  ],
+  mobile: [
+    { required: true, message: "请输入手机号码", trigger: "blur" }
+  ]
+};
 
 // 事件处理函数
 const handleSearch = (formData) => {
@@ -311,13 +276,8 @@ const handleCurrentPageChange = (page) => {
 const handleAdd = () => {
   isEdit.value = false;
   dialogTitle.value = "新增用户";
-  userForm.value = {};
-  loadDepartmentData();
-  loadPositionsData();
-  loadRolesData();
   dialogVisible.value = true;
 };
-let currentID = ref();
 // 编辑
 const handleEdit = (row, index) => {
   isEdit.value = true;
@@ -327,8 +287,9 @@ const handleEdit = (row, index) => {
     url: "/api/user/manage/getUserInfo",
     data: { id: row.id },
     callback: (data) => {
-      userForm.value = { ...data };
-      currentID.value = data.id;
+      userFormData.value = { ...data };
+      userFormData.value.departs = data.departs.map(item => item.id)
+      userFormData.value.roles = data.roles.map(item => item.id)
     },
     error: (err) => {
       ElMessage.error("编辑失败:", err);
@@ -349,7 +310,6 @@ const handleDelete = async (row, index) => {
       url: "/api/user/manage/deleteUser",
       data: { id: row.id },
       callback: (data) => {
-        dialogVisible.value = false;
         loadTableData();
         ElMessage.success("删除成功");
       },
@@ -357,60 +317,31 @@ const handleDelete = async (row, index) => {
         ElMessage.error("删除失败:", err);
       },
     });
-    loadTableData();
   } catch {}
 };
 
-const handleFormSubmit = (formData) => {
-  if (isEdit.value) {
-    // 编辑用户
-    const updateUser = {
-      ...formData,
-      departs: Array.isArray(formData.departs) ? formData.departs : [],
-      positions: Array.isArray(formData.positions) ? formData.positions : [],
-      roles: Array.isArray(formData.roles) ? formData.roles : [],
-      id: currentID.value,
-    };
-    proxy.$post({
-      url: "/api/user/manage/updateUser",
-      data: updateUser,
-      callback: (data) => {
-        dialogVisible.value = false;
-        loadTableData();
-        ElMessage.success("用户信息更新成功");
-      },
-      error: (err) => {
-        ElMessage.error("用户信息更新失败:", err);
-      },
-    });
-  } else {
-    // 新增用户
-    const newUser = {
-      ...formData,
-      departs: Array.isArray(formData.departs) ? formData.departs : [],
-      positions: Array.isArray(formData.positions) ? formData.positions : [],
-      roles: Array.isArray(formData.roles) ? formData.roles : [],
-    };
-    proxy.$post({
-      url: "/api/user/manage/createUser",
-      data: newUser,
-      callback: (data) => {
-        dialogVisible.value = false;
-        loadTableData();
-        ElMessage.success("用户添加成功");
-      },
-      error: (err) => {
-        ElMessage.error("用户添加失败:", err);
-      },
-    });
-  }
-};
-
-const handleFormReset = () => {
-  dialogVisible.value = false;
+const saveUserForm = () => {
+  userForm.value.validate(valid => {
+    if (valid) {
+      let url = userFormData.value.id ? "updateUser" : "createUser";
+      proxy.$post({
+        url: "/api/user/manage/" + url,
+        data: userFormData.value,
+        callback: (data) => {
+          dialogVisible.value = false;
+          loadTableData();
+          ElMessage.success(dialogTitle.value + "成功");
+        },
+        error: (err) => {
+          ElMessage.error(dialogTitle.value + "失败:", err);
+        },
+      });
+    }
+  })
 };
-
-const handleDialogClose = () => {
+const cancelUserForm = () => {
+  userFormData.value = {};
+  userForm.value.resetFields();
   dialogVisible.value = false;
 };
 
@@ -425,7 +356,6 @@ const handleStatusChange = (newValue, row) => {
       enable: newEnableValue,
     },
     callback: (data) => {
-      row.enable = newEnableValue;
       loadTableData();
       ElMessage.success(
         `用户状态已${newEnableValue === "0" ? "启用" : "停用"}`
@@ -448,12 +378,7 @@ const loadTableData = () => {
       pageSize: pageSize.value,
     },
     callback: (data) => {
-      tableData.value = data.rows.map((item) => {
-        item.departs = item.departs.map((item) => item.name).join(",");
-        item.positions = item.positions.map((item) => item.name).join(",");
-        item.roles = item.roles.map((item) => item.name).join(",");
-        return item;
-      });
+      tableData.value = data.rows;
       total.value = data.count;
       loading.value = false;
     },
@@ -467,7 +392,7 @@ const loadTableData = () => {
 onMounted(() => {
   loadTableData();
   loadDepartmentData();
-  loadPositionsData();
+  // loadPositionsData();
   loadRolesData();
 });
 </script>