From fe631515b71782a10a750874f6d4582fe027cd22 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 03 十一月 2025 09:32:49 +0800
Subject: [PATCH] 公司-所有的表格添加斑马纹

---
 src/views/system/role/index.vue |  283 ++++++++++++++++++++++++++++----------------------------
 1 files changed, 143 insertions(+), 140 deletions(-)

diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 22a5fa4..a32ab4a 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -92,7 +92,7 @@
       </el-row>
 
       <!-- 琛ㄦ牸鏁版嵁 -->
-      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange" stripe>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="瑙掕壊缂栧彿" prop="roleId" width="120" />
          <el-table-column label="瑙掕壊鍚嶇О" prop="roleName" :show-overflow-tooltip="true" width="150" />
@@ -164,7 +164,7 @@
                   <el-radio
                      v-for="dict in sys_normal_disable"
                      :key="dict.value"
-                     :label="dict.value"
+                     :value="dict.value"
                   >{{ dict.label }}</el-radio>
                </el-radio-group>
             </el-form-item>
@@ -242,32 +242,33 @@
 </template>
 
 <script setup name="Role">
-import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
-import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
+import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role"
+import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"
+import {onMounted} from "vue";
 
-const router = useRouter();
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
 
-const roleList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const dateRange = ref([]);
-const menuOptions = ref([]);
-const menuExpand = ref(false);
-const menuNodeAll = ref(false);
-const deptExpand = ref(true);
-const deptNodeAll = ref(false);
-const deptOptions = ref([]);
-const openDataScope = ref(false);
-const menuRef = ref(null);
-const deptRef = ref(null);
+const roleList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+const dateRange = ref([])
+const menuOptions = ref([])
+const menuExpand = ref(false)
+const menuNodeAll = ref(false)
+const deptExpand = ref(true)
+const deptNodeAll = ref(false)
+const deptOptions = ref([])
+const openDataScope = ref(false)
+const menuRef = ref(null)
+const deptRef = ref(null)
 
 /** 鏁版嵁鑼冨洿閫夐」*/
 const dataScopeOptions = ref([
@@ -276,7 +277,7 @@
   { value: "3", label: "鏈儴闂ㄦ暟鎹潈闄�" },
   { value: "4", label: "鏈儴闂ㄥ強浠ヤ笅鏁版嵁鏉冮檺" },
   { value: "5", label: "浠呮湰浜烘暟鎹潈闄�" }
-]);
+])
 
 const data = reactive({
   form: {},
@@ -292,115 +293,115 @@
     roleKey: [{ required: true, message: "鏉冮檺瀛楃涓嶈兘涓虹┖", trigger: "blur" }],
     roleSort: [{ required: true, message: "瑙掕壊椤哄簭涓嶈兘涓虹┖", trigger: "blur" }]
   },
-});
+})
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
 /** 鏌ヨ瑙掕壊鍒楄〃 */
 function getList() {
-  loading.value = true;
+  loading.value = true
   listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    roleList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+    roleList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
 }
 
 /** 鎼滅储鎸夐挳鎿嶄綔 */
 function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+  queryParams.value.pageNum = 1
+  getList()
 }
 
 /** 閲嶇疆鎸夐挳鎿嶄綔 */
 function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  handleQuery();
+  dateRange.value = []
+  proxy.resetForm("queryRef")
+  handleQuery()
 }
 
 /** 鍒犻櫎鎸夐挳鎿嶄綔 */
 function handleDelete(row) {
-  const roleIds = row.roleId || ids.value;
+  const roleIds = row.roleId || ids.value
   proxy.$modal.confirm('鏄惁纭鍒犻櫎瑙掕壊缂栧彿涓�"' + roleIds + '"鐨勬暟鎹」?').then(function () {
-    return delRole(roleIds);
+    return delRole(roleIds)
   }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-  }).catch(() => {});
+    getList()
+    proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
+  }).catch(() => {})
 }
 
 /** 瀵煎嚭鎸夐挳鎿嶄綔 */
 function handleExport() {
   proxy.download("system/role/export", {
     ...queryParams.value,
-  }, `role_${new Date().getTime()}.xlsx`);
+  }, `role_${new Date().getTime()}.xlsx`)
 }
 
 /** 澶氶�夋閫変腑鏁版嵁 */
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.roleId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
+  ids.value = selection.map(item => item.roleId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
 }
 
 /** 瑙掕壊鐘舵�佷慨鏀� */
 function handleStatusChange(row) {
-  let text = row.status === "0" ? "鍚敤" : "鍋滅敤";
+  let text = row.status === "0" ? "鍚敤" : "鍋滅敤"
   proxy.$modal.confirm('纭瑕�"' + text + '""' + row.roleName + '"瑙掕壊鍚�?').then(function () {
-    return changeRoleStatus(row.roleId, row.status);
+    return changeRoleStatus(row.roleId, row.status)
   }).then(() => {
-    proxy.$modal.msgSuccess(text + "鎴愬姛");
+    proxy.$modal.msgSuccess(text + "鎴愬姛")
   }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0";
-  });
+    row.status = row.status === "0" ? "1" : "0"
+  })
 }
 
 /** 鏇村鎿嶄綔 */
 function handleCommand(command, row) {
   switch (command) {
     case "handleDataScope":
-      handleDataScope(row);
-      break;
+      handleDataScope(row)
+      break
     case "handleAuthUser":
-      handleAuthUser(row);
-      break;
+      handleAuthUser(row)
+      break
     default:
-      break;
+      break
   }
 }
 
 /** 鍒嗛厤鐢ㄦ埛 */
 function handleAuthUser(row) {
-  router.push("/system/role-auth/user/" + row.roleId);
+  router.push("/system/role-auth/user/" + row.roleId)
 }
 
 /** 鏌ヨ鑿滃崟鏍戠粨鏋� */
 function getMenuTreeselect() {
   menuTreeselect().then(response => {
-    menuOptions.value = response.data;
-  });
+    menuOptions.value = response.data
+  })
 }
 
 /** 鎵�鏈夐儴闂ㄨ妭鐐规暟鎹� */
 function getDeptAllCheckedKeys() {
   // 鐩墠琚�変腑鐨勯儴闂ㄨ妭鐐�
-  let checkedKeys = deptRef.value.getCheckedKeys();
+  let checkedKeys = deptRef.value.getCheckedKeys()
   // 鍗婇�変腑鐨勯儴闂ㄨ妭鐐�
-  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-  return checkedKeys;
+  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
 }
 
 /** 閲嶇疆鏂板鐨勮〃鍗曚互鍙婂叾浠栨暟鎹�  */
 function reset() {
   if (menuRef.value != undefined) {
-    menuRef.value.setCheckedKeys([]);
+    menuRef.value.setCheckedKeys([])
   }
-  menuExpand.value = false;
-  menuNodeAll.value = false;
-  deptExpand.value = true;
-  deptNodeAll.value = false;
+  menuExpand.value = false
+  menuNodeAll.value = false
+  deptExpand.value = true
+  deptNodeAll.value = false
   form.value = {
     roleId: undefined,
     roleName: undefined,
@@ -412,68 +413,68 @@
     menuCheckStrictly: true,
     deptCheckStrictly: true,
     remark: undefined
-  };
-  proxy.resetForm("roleRef");
+  }
+  proxy.resetForm("roleRef")
 }
 
 /** 娣诲姞瑙掕壊 */
 function handleAdd() {
-  reset();
-  getMenuTreeselect();
-  open.value = true;
-  title.value = "娣诲姞瑙掕壊";
+  reset()
+  getMenuTreeselect()
+  open.value = true
+  title.value = "娣诲姞瑙掕壊"
 }
 
 /** 淇敼瑙掕壊 */
 function handleUpdate(row) {
-  reset();
-  const roleId = row.roleId || ids.value;
-  const roleMenu = getRoleMenuTreeselect(roleId);
+  reset()
+  const roleId = row.roleId || ids.value
+  const roleMenu = getRoleMenuTreeselect(roleId)
   getRole(roleId).then(response => {
-    form.value = response.data;
-    form.value.roleSort = Number(form.value.roleSort);
-    open.value = true;
+    form.value = response.data
+    form.value.roleSort = Number(form.value.roleSort)
+    open.value = true
     nextTick(() => {
       roleMenu.then((res) => {
-        let checkedKeys = res.checkedKeys;
+        let checkedKeys = res.checkedKeys
         checkedKeys.forEach((v) => {
           nextTick(() => {
-            menuRef.value.setChecked(v, true, false);
-          });
-        });
-      });
-    });
-    title.value = "淇敼瑙掕壊";
-  });
+            menuRef.value.setChecked(v, true, false)
+          })
+        })
+      })
+    })
+  })
+  title.value = "淇敼瑙掕壊"
 }
 
 /** 鏍规嵁瑙掕壊ID鏌ヨ鑿滃崟鏍戠粨鏋� */
 function getRoleMenuTreeselect(roleId) {
   return roleMenuTreeselect(roleId).then(response => {
-    menuOptions.value = response.menus;
-    return response;
-  });
+    menuOptions.value = response.menus
+    return response
+  })
 }
 
 /** 鏍规嵁瑙掕壊ID鏌ヨ閮ㄩ棬鏍戠粨鏋� */
 function getDeptTree(roleId) {
   return deptTreeSelect(roleId).then(response => {
-    deptOptions.value = response.depts;
-    return response;
-  });
+    deptOptions.value = response.depts
+    return response
+  })
 }
 
 /** 鏍戞潈闄愶紙灞曞紑/鎶樺彔锛�*/
 function handleCheckedTreeExpand(value, type) {
   if (type == "menu") {
-    let treeList = menuOptions.value;
+    let treeList = menuOptions.value
     for (let i = 0; i < treeList.length; i++) {
-      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+      menuRef.value.store.nodesMap[treeList[i].id].expanded = value
     }
   } else if (type == "dept") {
-    let treeList = deptOptions.value;
+    let treeList = deptOptions.value
     for (let i = 0; i < treeList.length; i++) {
-      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
+      deptRef.value.store.nodesMap[treeList[i].id].expanded = value
     }
   }
 }
@@ -481,29 +482,29 @@
 /** 鏍戞潈闄愶紙鍏ㄩ��/鍏ㄤ笉閫夛級 */
 function handleCheckedTreeNodeAll(value, type) {
   if (type == "menu") {
-    menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
+    menuRef.value.setCheckedNodes(value ? menuOptions.value : [])
   } else if (type == "dept") {
-    deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
+    deptRef.value.setCheckedNodes(value ? deptOptions.value : [])
   }
 }
 
 /** 鏍戞潈闄愶紙鐖跺瓙鑱斿姩锛� */
 function handleCheckedTreeConnect(value, type) {
   if (type == "menu") {
-    form.value.menuCheckStrictly = value ? true : false;
+    form.value.menuCheckStrictly = value ? true : false
   } else if (type == "dept") {
-    form.value.deptCheckStrictly = value ? true : false;
+    form.value.deptCheckStrictly = value ? true : false
   }
 }
 
 /** 鎵�鏈夎彍鍗曡妭鐐规暟鎹� */
 function getMenuAllCheckedKeys() {
   // 鐩墠琚�変腑鐨勮彍鍗曡妭鐐�
-  let checkedKeys = menuRef.value.getCheckedKeys();
+  let checkedKeys = menuRef.value.getCheckedKeys()
   // 鍗婇�変腑鐨勮彍鍗曡妭鐐�
-  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-  return checkedKeys;
+  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
 }
 
 /** 鎻愪氦鎸夐挳 */
@@ -511,74 +512,76 @@
   proxy.$refs["roleRef"].validate(valid => {
     if (valid) {
       if (form.value.roleId != undefined) {
-        form.value.menuIds = getMenuAllCheckedKeys();
+        form.value.menuIds = getMenuAllCheckedKeys()
         updateRole(form.value).then(response => {
-          proxy.$modal.msgSuccess("淇敼鎴愬姛");
-          open.value = false;
-          getList();
-        });
+          proxy.$modal.msgSuccess("淇敼鎴愬姛")
+          open.value = false
+          getList()
+        })
       } else {
-        form.value.menuIds = getMenuAllCheckedKeys();
+        form.value.menuIds = getMenuAllCheckedKeys()
         addRole(form.value).then(response => {
-          proxy.$modal.msgSuccess("鏂板鎴愬姛");
-          open.value = false;
-          getList();
-        });
+          proxy.$modal.msgSuccess("鏂板鎴愬姛")
+          open.value = false
+          getList()
+        })
       }
     }
-  });
+  })
 }
 
 /** 鍙栨秷鎸夐挳 */
 function cancel() {
-  open.value = false;
-  reset();
+  open.value = false
+  reset()
 }
 
 /** 閫夋嫨瑙掕壊鏉冮檺鑼冨洿瑙﹀彂 */
 function dataScopeSelectChange(value) {
   if (value !== "2") {
-    deptRef.value.setCheckedKeys([]);
+    deptRef.value.setCheckedKeys([])
   }
 }
 
 /** 鍒嗛厤鏁版嵁鏉冮檺鎿嶄綔 */
 function handleDataScope(row) {
-  reset();
-  const deptTreeSelect = getDeptTree(row.roleId);
+  reset()
+  const deptTreeSelect = getDeptTree(row.roleId)
   getRole(row.roleId).then(response => {
-    form.value = response.data;
-    openDataScope.value = true;
+    form.value = response.data
+    openDataScope.value = true
     nextTick(() => {
       deptTreeSelect.then(res => {
         nextTick(() => {
           if (deptRef.value) {
-            deptRef.value.setCheckedKeys(res.checkedKeys);
+            deptRef.value.setCheckedKeys(res.checkedKeys)
           }
-        });
-      });
-    });
-    title.value = "鍒嗛厤鏁版嵁鏉冮檺";
-  });
+        })
+      })
+    })
+  })
+  title.value = "鍒嗛厤鏁版嵁鏉冮檺"
 }
 
 /** 鎻愪氦鎸夐挳锛堟暟鎹潈闄愶級 */
 function submitDataScope() {
   if (form.value.roleId != undefined) {
-    form.value.deptIds = getDeptAllCheckedKeys();
+    form.value.deptIds = getDeptAllCheckedKeys()
     dataScope(form.value).then(response => {
-      proxy.$modal.msgSuccess("淇敼鎴愬姛");
-      openDataScope.value = false;
-      getList();
-    });
+      proxy.$modal.msgSuccess("淇敼鎴愬姛")
+      openDataScope.value = false
+      getList()
+    })
   }
 }
 
 /** 鍙栨秷鎸夐挳锛堟暟鎹潈闄愶級*/
 function cancelDataScope() {
-  openDataScope.value = false;
-  reset();
+  openDataScope.value = false
+  reset()
 }
 
-getList();
+onMounted(() => {
+	getList();
+});
 </script>

--
Gitblit v1.9.3