From 3936af6394a009ec170c7a3bb285d633b9ccdc8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Wed, 10 Jul 2024 10:17:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E9=97=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                           |   2 +-
 src/api/system/dept.ts                    |  14 +-
 src/api/system/level.ts                   |  12 +-
 src/api/system/position.ts                |  12 +-
 src/api/system/role.ts                    |  12 +-
 src/api/system/user.ts                    |   7 +-
 src/components/Upload/src/BasicUpload.vue |   4 +-
 src/views/system/dept/edit.vue            | 197 ++++++++++++++++++++++
 src/views/system/dept/index.vue           | 146 ++++++++++++++++
 src/views/system/menu/index.vue           |   2 +-
 src/views/system/user/edit.vue            |  40 ++---
 src/views/system/user/index.vue           |  10 +-
 12 files changed, 404 insertions(+), 54 deletions(-)
 create mode 100644 src/views/system/dept/edit.vue
 create mode 100644 src/views/system/dept/index.vue

diff --git a/.env.production b/.env.production
index f85be61..68a2f06 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 是否开启mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # 网站根目录
 VITE_PUBLIC_PATH = /
diff --git a/src/api/system/dept.ts b/src/api/system/dept.ts
index e825628..54ac5e5 100644
--- a/src/api/system/dept.ts
+++ b/src/api/system/dept.ts
@@ -13,9 +13,9 @@ export function getDeptList(params?) {
 /**
  * @description: 根据ID获取详情
  */
-export function getDeptDetail(userId) {
+export function getDeptDetail(deptId) {
   return http.request({
-    url: '/dept/detail/'+userId,
+    url: '/dept/detail/'+deptId,
     method: 'get',
   });
 }
@@ -32,7 +32,7 @@ export function deptAdd(data:any) {
 /**
  * @description: 更新部门
  */
-export function deptpdate(data:any) {
+export function deptUpdate(data:any) {
   return http.request({
     url: '/dept/update',
     method: 'PUT',
@@ -42,18 +42,18 @@ export function deptpdate(data:any) {
 /**
  * @description: 删除部门
  */
-export function deptDelete(userId) {
+export function deptDelete(deptId) {
   return http.request({
-    url: '/dept/delete/'+userId,
+    url: '/dept/delete/'+deptId,
     method: 'DELETE',
   });
 }
 /**
  * @description: 批量删除部门
  */
-export function deptBatchDelete(userId) {
+export function deptBatchDelete(deptId) {
   return http.request({
-    url: '/dept/batchDelete/'+userId,
+    url: '/dept/batchDelete/'+deptId,
     method: 'DELETE',
   });
 }
\ No newline at end of file
diff --git a/src/api/system/level.ts b/src/api/system/level.ts
index b46ff50..4c7db54 100644
--- a/src/api/system/level.ts
+++ b/src/api/system/level.ts
@@ -20,9 +20,9 @@ export function getLevelAllList(params?) {
 /**
  * @description: 根据ID获取详情
  */
-export function getLevelDetail(userId) {
+export function getLevelDetail(levelId) {
   return http.request({
-    url: '/level/detail/'+userId,
+    url: '/level/detail/'+levelId,
     method: 'get',
   });
 }
@@ -49,18 +49,18 @@ export function levelUpdate(data:any) {
 /**
  * @description: 删除职级
  */
-export function levelDelete(userId) {
+export function levelDelete(levelId) {
   return http.request({
-    url: '/level/delete/'+userId,
+    url: '/level/delete/'+levelId,
     method: 'DELETE',
   });
 }
 /**
  * @description: 批量删除职级
  */
-export function levelBatchDelete(userId) {
+export function levelBatchDelete(levelId) {
   return http.request({
-    url: '/level/batchDelete/'+userId,
+    url: '/level/batchDelete/'+levelId,
     method: 'DELETE',
   });
 }
\ No newline at end of file
diff --git a/src/api/system/position.ts b/src/api/system/position.ts
index f064285..678ea05 100644
--- a/src/api/system/position.ts
+++ b/src/api/system/position.ts
@@ -20,9 +20,9 @@ export function getPositionAllList(params?) {
 /**
  * @description: 根据ID获取详情
  */
-export function getPositionDetail(userId) {
+export function getPositionDetail(positionId) {
   return http.request({
-    url: '/position/detail/'+userId,
+    url: '/position/detail/'+positionId,
     method: 'get',
   });
 }
@@ -49,18 +49,18 @@ export function positionUpdate(data:any) {
 /**
  * @description: 删除岗位
  */
-export function positionDelete(userId) {
+export function positionDelete(positionId) {
   return http.request({
-    url: '/position/delete/'+userId,
+    url: '/position/delete/'+positionId,
     method: 'DELETE',
   });
 }
 /**
  * @description: 批量删除岗位
  */
-export function positionBatchDelete(userId) {
+export function positionBatchDelete(positionId) {
   return http.request({
-    url: '/role/batchDelete/'+userId,
+    url: '/role/batchDelete/'+positionId,
     method: 'DELETE',
   });
 }
\ No newline at end of file
diff --git a/src/api/system/role.ts b/src/api/system/role.ts
index 378a04e..197a718 100644
--- a/src/api/system/role.ts
+++ b/src/api/system/role.ts
@@ -20,9 +20,9 @@ export function getRoleAllList(params?) {
 /**
  * @description: 根据ID获取详情
  */
-export function getRoleDetail(userId) {
+export function getRoleDetail(roleId) {
   return http.request({
-    url: '/role/detail/'+userId,
+    url: '/role/detail/'+roleId,
     method: 'get',
   });
 }
@@ -49,18 +49,18 @@ export function roleUpdate(data:any) {
 /**
  * @description: 删除角色
  */
-export function roleDelete(userId) {
+export function roleDelete(roleId) {
   return http.request({
-    url: '/role/delete/'+userId,
+    url: '/role/delete/'+roleId,
     method: 'DELETE',
   });
 }
 /**
  * @description: 批量删除角色
  */
-export function roleBatchDelete(userId) {
+export function roleBatchDelete(roleId) {
   return http.request({
-    url: '/role/batchDelete/'+userId,
+    url: '/role/batchDelete/'+roleId,
     method: 'DELETE',
   });
 }
\ No newline at end of file
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 179cc70..6d5e737 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -138,10 +138,13 @@ export function userDelete(userId) {
 /**
  * @description: 批量删除用户
  */
-export function userBatchDelete(userId) {
+export function userBatchDelete(params:any) {
   return http.request({
-    url: '/user/batchDelete/'+userId,
+    url: '/user/batchDelete',
     method: 'DELETE',
+    params:{
+      ...params
+    }
   });
 }
 /**
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
index bbd6261..65d48cf 100644
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -70,7 +70,9 @@
 
   const showModal = ref(false);
   const previewUrl = ref('');
-  const fileList = ref<Ifiles[]>([]);
+  const fileList =  computed(() => {
+    return props.list;
+  });
 
   const hideUpload = computed(() => {
     if (!props.limit) return false;
diff --git a/src/views/system/dept/edit.vue b/src/views/system/dept/edit.vue
new file mode 100644
index 0000000..62574d3
--- /dev/null
+++ b/src/views/system/dept/edit.vue
@@ -0,0 +1,197 @@
+<template>
+  <el-dialog
+      v-model="props.visible"
+      :title="props.deptId?'编辑':'新增'"
+      width="600"
+      :close-on-click-modal="false"
+      :before-close="dialogClose"
+  >
+    <el-form
+        ref="formRef"
+        :model="formData"
+        label-width="80px"
+    >
+      <el-form-item label="部门类型" prop="type">
+          <el-select v-model="formData.type" class="flex-1" clearable placeholder="请选择部门类型">
+            <el-option v-for="(item, index) in optionData.deptTypeList" :key="index" :label="item.name" :value="item.id" />
+          </el-select>
+      </el-form-item>
+      <el-form-item
+          label="父级部门"
+          prop="parentId"
+          :rules="{ required: true, message: '请选择父级部门', trigger: 'change' }"
+      >
+        <el-tree-select
+            class="flex-1"
+            v-model="formData.parentId"
+            :data="deptOptions"
+            clearable
+            node-key="id"
+            :props="{
+              label: 'name',
+            }"
+            :default-expand-all="true"
+            placeholder="请选择父级菜单"
+            check-strictly
+        />
+      </el-form-item>
+      <el-form-item
+          label="部门名称"
+          prop="name"
+          :rules="{ required: true, message: '请输入部门名称', trigger: 'blur' }"
+      >
+        <el-input
+            v-model="formData.name"
+            placeholder="请输入部门名称"
+            clearable
+        />
+      </el-form-item>
+      <el-form-item label="部门排序" prop="sort"  class="flex-1">
+        <div>
+          <el-input-number v-model="formData.sort" :max="9999"/>
+          <div class="form-tips">数值越小越排前</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="部门备注" prop="note">
+          <el-input
+            class="flex-1"
+            v-model="formData.note"
+            type="textarea"
+            placeholder="请输入部门名称"
+            clearable
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogClose">取消</el-button>
+        <el-button :loading="subLoading" type="primary" @click="submit">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import type {FormInstance} from "element-plus";
+import { deptAdd,deptUpdate,getDeptList,getDeptDetail } from '@/api/system/dept';
+import {onMounted, reactive, readonly, ref, shallowRef} from "vue";
+import {getModulesKey} from "@/router";
+import {arrayToTree, treeToArray,message,buildTree} from "@/utils/auth";
+import {useLockFn} from "@/utils/useLockFn";
+import IconPicker from "@/components/icon/picker.vue";
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  deptId: {
+    type: Number,
+    required: true,
+    default: 0
+  },
+  pid: {
+    type: Number,
+    default: 0
+  }
+});
+const optionData = reactive({
+  deptTypeList: [{
+    id:1,
+    name:'公司'
+  },
+  {
+    id:2,
+    name:'子公司'
+  },
+  {
+    id:3,
+    name:'部门'
+  },
+  {
+    id:4,
+    name:'小组'
+  }],
+});
+const emit = defineEmits(["success","update:visible"]);
+const formRef = shallowRef<FormInstance>();
+
+const componentsOptions = ref(getModulesKey());
+const querySearch = (queryString: string, cb: any) => {
+  const results = queryString
+      ? componentsOptions.value.filter((item) =>
+          item.toLowerCase().includes(queryString.toLowerCase())
+      )
+      : componentsOptions.value;
+  cb(results.map((item) => ({value: item})));
+};
+
+const formData = reactive({
+  id: "",
+  //父级id
+  parentId: 0,
+  //类型
+  type: 1,
+  //名称
+  name: "",
+  //排序
+  sort: 0,
+  note:''
+});
+
+const dialogClose = () => {
+  emit("update:visible", false);
+};
+
+const deptOptions = ref<any[]>([]);
+
+const getMenu = async () => {
+  const data: any = await getDeptList();
+  const menu: any = [{id: 0, name: "顶级", children: []}];
+  const lists = buildTree(data)
+  menu[0].children.push(...lists)
+  deptOptions.value = menu
+};
+
+const handleSubmit = async () => {
+    await formRef.value?.validate();
+    props.deptId ? await deptUpdate(formData) : await deptAdd(formData);
+    message("操作成功");
+    emit("update:visible", false);
+    emit("success");
+};
+
+const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
+
+
+const setFormData = (data: Record<any, any>) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      formData[key] = data[key];
+    }
+  }
+};
+
+const getDetail = async () => {
+  const data = await getDeptDetail(
+    props.deptId
+  );
+  setFormData(data);
+};
+
+const handleClose = () => {
+  emit("close");
+};
+
+
+
+onMounted(() => {
+  getMenu()
+  if (props.deptId) {
+    getDetail()
+  }else{
+    formData.parentId=props.pid
+  }
+});
+</script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
new file mode 100644
index 0000000..91581fb
--- /dev/null
+++ b/src/views/system/dept/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="menu-index">
+    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+      <div>
+        <el-button  type="primary" @click="handleAdd()">
+          <template #icon>
+            <el-icon>
+              <plus />
+            </el-icon>
+          </template>
+          新增
+        </el-button>
+        <el-button @click="handleExpand"> 展开/折叠</el-button>
+      </div>
+      </el-card>
+      <el-card :bordered="false" class="pt-3 mb-3 proCard">
+      <el-table border v-loading="loading" ref="tableRef" :data="lists" row-key="id"
+                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+        <el-table-column label="部门名称" prop="name" min-width="150" show-overflow-tooltip/>
+        <el-table-column align="center" label="部门类型" prop="type" min-width="80">
+          <template #default="{ row }">
+            <div v-if="row.type ==1">公司</div>
+            <div v-else-if="row.type == 2">子公司</div>
+            <div v-else-if="row.type == 3">部门</div>
+            <div v-else-if="row.type == 4">小组</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="部门排序" prop="sort" min-width="100"/>
+        <el-table-column align="center" label="部门备注" prop="note" min-width="100"/>
+        <el-table-column align="center" label="创建人" prop="createUser" min-width="180"></el-table-column>
+        <el-table-column align="center" label="创建时间" prop="createTime" min-width="180"></el-table-column>
+        <el-table-column align="center" label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link
+                       @click="handleAdd(row.id)">
+              新增
+            </el-button>
+            <el-button type="primary" link @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button  type="danger" link @click="handleDelete(row.id)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <editDialog
+        ref="editRef"
+        v-if="editVisible"
+        :deptId="deptId"
+        :pid="pid"
+        v-model:visible="editVisible"
+        @success="getLists"
+    >
+    </editDialog>
+  </div>
+</template>
+
+<script lang="ts" setup name="menu">
+import {defineAsyncComponent, nextTick, onMounted, readonly, ref, shallowRef,onActivated} from "vue";
+import {getDeptList,deptDelete} from "@/api/system/dept";
+import type {ElTable} from "element-plus";
+import icon from "@/components/icon/index.vue";
+const tableRef = shallowRef<InstanceType<typeof ElTable>>();
+import {confirm, message,buildTree} from "@/utils/auth";
+
+const editDialog = defineAsyncComponent(() =>
+    import('./edit.vue')
+)
+
+const isExpand = ref(false);
+const loading = ref(false);
+const editVisible=ref(false);
+const deptId=ref(0);
+const pid=ref(0)
+const lists = ref([]);
+
+const getLists = async () => {
+  loading.value = true;
+  try {
+    const data = await getDeptList();
+    lists.value = buildTree(data);
+    loading.value = false;
+  } catch (error) {
+    loading.value = false;
+  }
+};
+
+const handleAdd = async (parentId:any) => {
+  deptId.value=0
+  pid.value=parentId?parentId:0
+  await nextTick();
+  editVisible.value=true
+};
+
+const handleEdit = async (data: any) => {
+  deptId.value=data.id
+  await nextTick();
+  editVisible.value=true
+};
+
+const handleDelete = async (deptId: number) => {
+  await confirm("确定要删除？");
+  try {
+    loading.value = true;
+    await deptDelete(deptId);
+    message("删除成功");
+    getLists();
+  } catch (e) {
+    loading.value = false;
+  }
+};
+
+const handleExpand = () => {
+  isExpand.value = !isExpand.value;
+  toggleExpand(lists.value, isExpand.value);
+};
+
+const toggleExpand = (children: any[], unfold = true) => {
+  for (const key in children) {
+    tableRef.value?.toggleRowExpansion(children[key], unfold);
+    if (children[key].children) {
+      toggleExpand(children[key].children!, unfold);
+    }
+  }
+};
+
+const getAll=()=>{
+  getLists();
+}
+
+
+onMounted(() => {
+  getAll()
+});
+
+// onActivated(() => {
+//   getAll()
+// });
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 354b98d..883f3e4 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -10,7 +10,7 @@
           </template>
           新增
         </el-button>
-        <el-button @click="handleExpand" v-perm="['sys:user:add']"> 展开/折叠</el-button>
+        <el-button @click="handleExpand"> 展开/折叠</el-button>
       </div>
       </el-card>
       <el-card :bordered="false" class="pt-3 mb-3 proCard">
diff --git a/src/views/system/user/edit.vue b/src/views/system/user/edit.vue
index 68e4754..cc26d51 100644
--- a/src/views/system/user/edit.vue
+++ b/src/views/system/user/edit.vue
@@ -5,7 +5,7 @@
       <div class="flex">
         <el-form-item label="账号" prop="username" class="flex-1"
           :rules="{ required: true, message: '请输入账号', trigger: 'blur' }">
-          <el-input :disabled="isRoot" v-model="formData.username" placeholder="请输入账号" clearable />
+          <el-input :disabled="props.userId" v-model="formData.username" placeholder="请输入账号" clearable />
         </el-form-item>
         <el-form-item label="密码" prop="password" class="flex-1"
           :rules="{ required: props.userId ? false : true, message: '请输入密码', trigger: 'blur' }">
@@ -30,20 +30,17 @@
       <div class="flex">
         <el-form-item label="角色" prop="roles" class="flex-1"
           :rules="{ required: true, message: '请选择角色', trigger: 'change' }">
-          <el-select v-model="formData.roles" :disabled="isRoot" multiple class="flex-1" clearable placeholder="请选择角色">
-            <el-option v-if="isRoot" label="系统管理员" value="0" />
+          <el-select v-model="formData.roles" multiple class="flex-1" clearable placeholder="请选择角色">
             <el-option v-for="(item, index) in optionData.roleList" :key="index" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
         <el-form-item label="部门" prop="deptId" class="flex-1">
-          <!-- <el-tree-select
-        v-model="formData.deptId"
-        :data="optionData.deptList"
-        :render-after-expand="false"
-      /> -->
-          <el-select v-model="formData.deptId" class="flex-1" clearable placeholder="请选择部门">
-            <el-option v-for="(item, index) in optionData.deptList" :key="index" :label="item.name" :value="item.id" />
-          </el-select>
+          <el-tree-select
+            v-model="formData.deptId"
+            :data="optionData.deptList"
+            :render-after-expand="false"
+            :props="{ value: 'id',label: 'name'}"
+          />
         </el-form-item>
       </div>
       <div class="flex">
@@ -100,8 +97,8 @@
 
       </div>
       <el-form-item label="头像" prop="images">
-        <BasicUpload :action="`${uploadUrl}/api/upload/uploadFile`" :list="formData.avatar?[{name:'avatar',url:formData.avatar}]:[]" :headers="uploadHeaders"
-          :data="{ name: 'avatar' }" :limit="1" @upload-change="uploadChange" />
+        <BasicUpload :action="`${uploadUrl}/api/upload/uploadFile`" :list="formData.avatar?[{name:formData.avatarName,url:formData.avatar}]:[]" :headers="uploadHeaders"
+          :data="{ name: 'user' }" :limit="1" @upload-change="uploadChange" @delete="handleDelete"/>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -124,7 +121,7 @@ import { getRoleAllList } from '@/api/system/role';
 import { getDeptList } from '@/api/system/dept';
 import { getLevelAllList } from '@/api/system/level';
 import { getPositionAllList } from '@/api/system/position';
-import { message } from "@/utils/auth";
+import {buildTree, message } from "@/utils/auth";
 import { FormInstance } from "element-plus";
 
 const formRef = shallowRef<FormInstance>();
@@ -152,6 +149,7 @@ const uploadHeaders = reactive({
 });
 const formData = reactive({
   id: 0,
+  avatarName:'',
   email: '',
   username: "",
   realname: "",
@@ -169,10 +167,8 @@ const formData = reactive({
   city: [],
   avatar: "",
   password: "",
-  passwordConfirm: "",
-  userStatus: 'enable'
+  passwordConfirm: ""
 });
-const fileList = ref([]);
 const passwordConfirmValidator = (
   rule: object,
   value: string,
@@ -185,10 +181,6 @@ const passwordConfirmValidator = (
   callback();
 };
 
-const isRoot = computed(() => {
-  return formData.userId == 1;
-});
-
 const dialogClose = () => {
   emit("update:visible", false);
 };
@@ -228,13 +220,17 @@ const optionData = reactive({
 
 function uploadChange(data: string[]) {
   formData.avatar = data.fileUrl;
+  formData.avatarName =data.fileName
+}
+const handleDelete =async(file)=>{
+  console.log(file)
 }
 
 const getAllDict = async () => {
   let list = await getRoleAllList();
   optionData.roleList = list ? list : [];
   list = await getDeptList();
-  optionData.deptList = list ? list : [];
+  optionData.deptList = list ? buildTree(list) : [];
   list = await getLevelAllList();
   optionData.levelList = list ? list : [];
   list = await getPositionAllList();
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ee91510..8e9b2fe 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -29,7 +29,7 @@
               新建
             </el-button>
 
-            <el-button type="danger" @click="handleDelete" :disabled="!selectionData.length">
+            <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
               <template #icon>
                 <el-icon class="el-input__icon">
                   <Delete />
@@ -180,8 +180,13 @@ const uploadHeaders = reactive({
   
 
   async function handleDelete(record: Recordable) {
+    let ids = ''
+    if(!record){
+      ids = selectionData.value.map(({id}) => id);
+      console.log(ids)
+    }
     await confirm('确定要删除？');
-    selectionData.value.length>0? await userBatchDelete(selectionData.value.join()):await userDelete(record.row.id);
+    record? await userDelete(record.row.id):await userBatchDelete({integers:ids});
     message("删除成功");
     reloadTable()
   }
@@ -248,6 +253,7 @@ const handleExport = async()=>{
   exportLoading.value=true
   const data=await userExport()
   downloadByData(data, '用户信息.xlsx');
+  exportLoading.value=false
   message("导出成功");
 }