系统管理内部页面优化

src/api/index.ts

@@ -163,11 +163,11 @@ request.interceptors.response.use(
         return;
       }
     }
-    ElMessage({
-      message: message,
-      type: "error",
-      duration: 5 * 1000
-    });
+    // ElMessage({
+    //   message: message,
+    //   type: "error",
+    //   duration: 5 * 1000
+    // });
     return Promise.reject(error);
   }
 );

src/utils/util.ts

@@ -183,3 +183,16 @@ export function getValueListLabel(arr: any, value: string[], valueName?: string,
   });
   return result.join("、");
 }
+
+// 级联字典获取对应value的label
+export function getLabelFromMutDict(arr: any, val: string, valueName?: string, labelName?: string): any {
+  const value = valueName ?? "value";
+  const label = labelName ?? "label";
+  for (const item of arr) {
+    if (item[value] === val) {
+      return item[label];
+    } else if (item.children?.length > 0) {
+      return getLabelFromMutDict(item.children, val, value, label);
+    }
+  }
+}

src/views/admin/dept/index.vue

@@ -74,11 +74,16 @@
             </el-col>
           </el-row>
           <el-row>
-            <el-col :span="24">
+            <el-col :span="12">
               <el-form-item label="部门名称" prop="name">
                 <el-input v-model="form.name" placeholder="请输入部门名称" clearable />
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="部门简称" prop="abbreviationName">
+                <el-input v-model="form.abbreviationName" placeholder="请输入部门简称" clearable />
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
@@ -189,6 +194,7 @@ const title = ref(""); // 新增/修改/查看 弹窗标题
 const form = ref<any>({
   parentId: "",
   name: "",
+  abbreviationName: "",
   sortOrder: "",
   deptType: "",
   longitude: "",

src/views/admin/user/index.vue

@@ -12,7 +12,17 @@
             default-expand-all
             :expand-on-click-node="false"
             @node-click="handleNodeClick"
-          />
+          >
+            <template #default="{ node, data }">
+              <el-tooltip v-if="!data.isLock" class="item" effect="dark" content="无数据权限" placement="right-start">
+                <span>
+                  {{ data.name }}
+                  <el-icon><Lock /> </el-icon>
+                </span>
+              </el-tooltip>
+              <span v-else>{{ data.name }}</span>
+            </template>
+          </el-tree>
         </div>
       </div>
       <div class="user__main">
@@ -57,9 +67,17 @@
         <el-table v-loading="tableLoading" border :data="tableData" row-key="id">
           <el-table-column type="index" label="排序" width="60" align="center" />
           <el-table-column prop="username" label="用户名称" align="center" />
-          <el-table-column prop="deptId" label="部门" align="center" />
+          <el-table-column prop="deptId" label="部门" align="center">
+            <template #default="{ row }">
+              {{ getLabelFromMutDict(deptData, row.deptId, "id", "name") }}
+            </template>
+          </el-table-column>
           <el-table-column prop="phone" label="手机号码" align="center" />
-          <el-table-column prop="lockFlag" label="状态" align="center" />
+          <el-table-column prop="lockFlag" label="状态" align="center">
+            <template #default="{ row }">
+              {{ getValueLabel(del_type, row.lockFlag) }}
+            </template>
+          </el-table-column>
           <el-table-column prop="createTime" label="创建时间" align="center" />
           <el-table-column label="操作" width="220" align="center" class-name="small-padding fixed-width">
             <template #default="{ row }">
@@ -126,12 +144,13 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="岗位">
+            <el-form-item label="岗位" prop="deptId">
               <el-tree-select
                 placeholder="请选择岗位"
                 v-model="dialogForm.deptId"
                 :data="deptOptions"
                 check-strictly
+                clearable
                 :render-after-expand="false"
               />
             </el-form-item>
@@ -178,10 +197,11 @@
 import { ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import type { FormInstance, FormRules } from "element-plus";
-import { Search, Refresh, Plus } from "@element-plus/icons-vue";
+import { Search, Refresh, Plus, Lock } from "@element-plus/icons-vue";
 
 import { ITablePage } from "@/const/interface_type";
-import { deepClone } from "@/utils/util";
+import { useDict } from "@/hooks/dict";
+import { deepClone, getValueLabel, getLabelFromMutDict } from "@/utils/util";
 import { getDeptList, getUserList, getDetails, getRoleList, addUserObj, putUserObj, delUserObj } from "@/api/admin";
 
 const validateUsername = (rule: any, value: any, callback: any) => {
@@ -227,6 +247,7 @@ const tablePage = ref<ITablePage>({
   total: 0
 });
 
+const { del_type } = useDict("del_type");
 const dialogVisible = ref(false); // 弹窗显隐
 const title = ref(""); // 弹窗标题
 const dialogForm = ref<any>({
@@ -241,40 +262,15 @@ const dialogForm = ref<any>({
 });
 const dialogFormRef = ref<FormInstance>();
 const dialogFormRules = ref<FormRules>({
-  username: [],
-  name: [
-    {
-      min: 2,
-      max: 64,
-      required: true,
-      message: "请输入姓名",
-      trigger: "blur"
-    }
-  ],
+  username: [{ min: 2, max: 64, required: true, message: "请输入用户昵称", trigger: "blur" }],
+  name: [{ min: 2, max: 64, required: true, message: "请输入姓名", trigger: "blur" }],
   password: [
-    {
-      min: 6,
-      max: 20,
-      required: true,
-      message: "长度在 6 到 20 个字符",
-      trigger: "blur"
-    }
-    // { required: true, validator: validatePass1, trigger: "blur" }
+    { min: 6, max: 20, required: true, message: "长度在 6 到 20 个字符", trigger: "blur" },
+    { required: true, validator: validatePass1, trigger: "blur" }
   ],
-  lockFlag: [
-    {
-      required: true,
-      message: "请选择状态",
-      trigger: "change"
-    }
-  ],
-  role: [
-    {
-      required: true,
-      message: "请选择角色",
-      trigger: "change"
-    }
-  ]
+  deptId: [{ required: true, message: "请选择岗位", trigger: "change" }],
+  lockFlag: [{ required: true, message: "请选择状态", trigger: "change" }],
+  role: [{ required: true, message: "请选择角色", trigger: "change" }]
 });
 const deptOptions = ref<any>([]); // 部门数据
 const roleList = ref<any>([]);
@@ -286,7 +282,12 @@ getRoleList().then((res: any) => {
 });
 
 const handleNodeClick = (data: any) => {
+  if (!data.isLock) {
+    ElMessage.warning("暂无权限查看该数据");
+    return;
+  }
   searchForm.value.deptId = data.id;
+  dialogForm.value.deptId = data.id;
   getList();
 };
 

src/views/orderType/administration/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <basic-container class="mti-container">
+    <div class="mti-flex">
+      <div class="mti-tree">
+        <el-tree
+          :data="treeData"
+          node-key="id"
+          highlight-current
+          :props="{ children: 'children', label: 'name' }"
+          :filter-node-method="filterNode"
+          :render-after-expand="true"
+          @node-click="getNodeData"
+        />
+      </div>
+      <div class="mti-form">
+        <div class="filter-container">
+          <el-button size="mini" :icon="Plus" type="primary" round @click="handlerAdd">添加</el-button>
+          <el-button size="mini" :icon="Edit" round @click="handlerEdit">编辑</el-button>
+          <el-button size="mini" :icon="Delete" round @click="handleDelete">删除</el-button>
+        </div>
+        <div class="box-card">
+          <el-form
+            ref="form"
+            label-position="right"
+            label-width="100px"
+            :rules="formRules"
+            :model="formData"
+            :disabled="formEdit"
+            size="small"
+          >
+            <el-form-item label="父级节点" prop="parentId">
+              <el-input v-model="formData.parentId" disabled />
+            </el-form-item>
+            <el-form-item label="分类名称" prop="name">
+              <el-input v-model="formData.name" placeholder="请输入分类名称" />
+            </el-form-item>
+            <el-form-item label="节点内容" prop="content">
+              <el-input v-model="formData.content" placeholder="请输入节点内容" />
+            </el-form-item>
+            <el-form-item label="是否有效" prop="delFlag">
+              <el-select v-model="formData.delFlag" clearable>
+                <el-option v-for="item in del_type" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <!-- <el-form-item label="物资类型" prop="difference">
+              <el-select v-model="formData.difference" clearable>
+                <el-option v-for="item in material_type" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item> -->
+            <el-form-item label="父级行政编码" prop="parentCode">
+              <el-input v-model="formData.parentCode" disabled />
+            </el-form-item>
+            <el-form-item label="行政编码" prop="code">
+              <el-input v-model="formData.code" placeholder="请输入行政编码" />
+            </el-form-item>
+            <el-form-item label="排序" prop="sort">
+              <el-input v-model="formData.sort" type="number" placeholder="请输入排序" />
+            </el-form-item>
+            <el-form-item v-if="formStatus == 'update'">
+              <el-button type="primary" round size="mini" @click="update">更新</el-button>
+              <el-button size="mini" class="mti-cancle-btn" round @click="onCancel('update')">取消</el-button>
+            </el-form-item>
+            <el-form-item v-if="formStatus == 'create'" size="mini">
+              <el-button type="primary" round @click="create">保存</el-button>
+              <el-button size="mini" class="mti-cancle-btn" round @click="onCancel('create')">取消</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </basic-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
+import { Plus, Edit, Delete } from "@element-plus/icons-vue";
+
+import { deepClone } from "@/utils/util";
+import { useDict } from "@/hooks/dict";
+import { dictTree, getObj, delObj, putDict, addDict } from "@/api/orderType";
+
+interface IFormData {
+  type?: number;
+  parentId?: number;
+  delFlag?: string;
+  id?: string;
+  name?: string;
+  content?: string;
+  sort?: number;
+  difference?: string;
+  parentCode?: string | number;
+  code?: string;
+}
+
+const treeData = ref([]);
+const form = ref<FormInstance>();
+const formRules = ref<FormRules>({
+  id: [{ required: true, message: "请输入节点编号", trigger: "blur" }],
+  name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
+  delFlag: [{ required: true, message: "请选择是否有效", trigger: "change" }],
+  sort: [
+    { required: true, message: "请输入排序字段", trigger: "blur" },
+    { max: 5, message: "长度在 0 到 5 个数字", trigger: "blur" }
+  ]
+});
+const formData = ref<IFormData>({});
+const tmpForm = ref<IFormData>({
+  type: 2
+});
+const currentItem = ref({
+  id: 0,
+  code: 0
+});
+const formEdit = ref(true);
+const formStatus = ref("");
+
+const { del_type } = useDict("del_type");
+
+const getList = () => {
+  dictTree(2).then((res: any) => {
+    treeData.value = res.data == null ? [] : res.data;
+  });
+};
+
+getList();
+
+const filterNode = (value: any, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+
+// 点击时获取对应节点数据
+const getNodeData = (data: any) => {
+  form.value?.clearValidate();
+  formEdit.value = true;
+  getObj(data.id).then((res: any) => {
+    formData.value = res.data;
+    tmpForm.value = deepClone(res.data);
+    currentItem.value.id = data.id;
+    currentItem.value.code = data.code;
+  });
+};
+
+// 添加节点
+const handlerAdd = () => {
+  resetForm();
+  formEdit.value = false;
+  formStatus.value = "create";
+};
+
+// 编辑节点
+const handlerEdit = () => {
+  form.value?.clearValidate();
+  formEdit.value = false;
+  formStatus.value = "update";
+};
+
+// 删除节点
+const handleDelete = () => {
+  if (currentItem.value.id !== 0) {
+    ElMessageBox.confirm(`此操作将永久删除改父节点及其下的所有子节点, 是否继续?`, "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    }).then(() => {
+      delObj(currentItem.value.id).then((res: any) => {
+        currentItem.value.id = 0;
+        onCancel();
+        getList();
+        if (res.code === 0) {
+          ElMessage.success(`删除成功`);
+        } else {
+          ElMessage.error(`失败`);
+        }
+      });
+    });
+  } else {
+    ElMessage.warning(`请选择需要删除的数据`);
+  }
+};
+
+// 更新节点
+const update = () => {
+  form.value?.validate((valid: boolean) => {
+    if (!valid) return;
+    putDict({ ...formData.value }).then(() => {
+      ElMessage.success(`更新成功`);
+      formEdit.value = true;
+    });
+  });
+};
+
+// 创建节点
+const create = () => {
+  form.value?.validate((valid: boolean) => {
+    if (!valid) return;
+    addDict({ ...formData.value }).then(() => {
+      getList();
+      onCancel();
+      formStatus.value = "";
+      ElMessage.success(`创建成功`);
+    });
+  });
+};
+
+// 编辑时初始化表单
+const resetForm = () => {
+  formData.value = {
+    parentId: currentItem.value.id,
+    parentCode: currentItem.value.code,
+    difference: "",
+    type: 2,
+    id: "",
+    code: "",
+    delFlag: "0",
+    name: "",
+    content: "",
+    sort: 1
+  };
+};
+
+// 取消修改时处理数据
+const onCancel = (val?: string) => {
+  form.value?.clearValidate();
+  if (val === "update") {
+    formData.value = JSON.parse(JSON.stringify(tmpForm.value));
+  } else {
+    formData.value = {};
+  }
+  formEdit.value = true;
+  formStatus.value = "";
+};
+</script>
+
+<style lang="scss" scoped>
+.mti-container {
+  .mti-flex {
+    display: flex;
+    .mti-tree {
+      width: 250px;
+      overflow-y: auto;
+      margin-bottom: 0;
+      .el-tree {
+        padding: 10px;
+        background-color: #e2f1fe !important;
+        color: #606266;
+        border: 1px solid #d9ebf8;
+        &.el-tree--highlight-current {
+          .el-tree-node.is-current {
+            > .el-tree-node__content {
+              background-color: #ffffff;
+            }
+          }
+        }
+        .el-tree-node__content {
+          height: 30px;
+          &:hover {
+            background-color: #fff;
+          }
+        }
+      }
+      .filter-tree.avue-tree {
+        .el-tree-node {
+          &:focus {
+            > .el-tree-node__content {
+              background-color: #ffffff !important;
+            }
+          }
+        }
+        position: relative;
+        padding-top: 10px;
+        background-color: #e2f1fe;
+        color: #606266;
+        border: 1px solid #d9ebf8;
+        height: 100%;
+        .avue-tree__filter {
+          margin-bottom: 5px;
+          padding: 0 12px;
+        }
+        .el-tree {
+          padding-top: 0;
+          border-style: none;
+        }
+      }
+    }
+    .mti-form {
+      flex-grow: 1;
+      position: relative;
+      padding: 10px 20px;
+
+      .filter-container {
+        margin-bottom: 20px;
+      }
+      .box-card {
+        border: 1px solid #d9ebf8;
+        padding: 30px 32px;
+
+        .el-button.mti-cancle-btn {
+          background-color: #fd5f43;
+          color: #fff;
+
+          &:hover {
+            background-color: #e26f5a;
+          }
+        }
+      }
+    }
+  }
+}
+</style>