代码整理

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 {
+      roleFormData.value = { ...data };
+      if (data.menus && data.menus.length) {
         treeRef.value.setCheckedKeys(data.menus);
-          } catch (e) {
-            console.warn('setCheckedKeys failed:', e);
-          }
-        });
       }
     },
     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) => {
-        dialogVisible.value = false;
-        loadTableData();
           ElMessage.success("删除成功");
+          loadTableData();
         },
         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,
-    };
+const saveRoleForm = () => {
+  roleForm.value.validate(valid => {
+    if (valid) {
+      let url = roleFormData.value.id ? "updateRole" : "createRole";
       proxy.$post({
-      url: "/api/user/role/createRole",
-      data: newUser,
+        url: "/api/user/role/" + url,
+        data: roleFormData.value,
         callback: (data) => {
-        dialogVisible.value = false;
+          ElMessage.success(dialogTitle.value + "成功");
+          cancelRoleForm();
           loadTableData();
-        ElMessage.success("角色添加成功");
         },
         error: (err) => {
-        ElMessage.error("角色添加失败:", err);
+          ElMessage.error(dialogTitle.value + "失败:", err);
         },
       });
     }
+  })
 };
-
-const handleFormReset = () => {
-  dialogVisible.value = false;
-};
-
-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;
 };
 // 表格数据