From 2059d2e8af04313787d46a9879ae15532e949891 Mon Sep 17 00:00:00 2001
From: chuan <2256222053@qq.com>
Date: Tue, 7 Dec 2021 17:09:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=83=A8=E9=97=A8?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=92=8C=E9=83=A8=E9=97=A8=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加部门修改和部门搜索
---
 src/api/system/dept.ts              |  39 ++----
 src/components/TreeSelect/index.vue |  11 +-
 src/views/system/dept/index.vue     | 194 +++++++++-------------------
 3 files changed, 71 insertions(+), 173 deletions(-)

diff --git a/src/api/system/dept.ts b/src/api/system/dept.ts
index 0e341bb..d84b705 100644
--- a/src/api/system/dept.ts
+++ b/src/api/system/dept.ts
@@ -1,13 +1,5 @@
 import request from '@/utils/request'
 
-// export function list(queryParams:object) {
-//     return request({
-//         url: '/youlai-admin/api/v1/oauth-clients',
-//         method: 'get',
-//         params: queryParams
-//     })
-// }
-
 export const listDept = (queryParams?: object) => {
     return request({
         url: '/youlai-admin/api/v1/depts/table',
@@ -18,15 +10,11 @@ export const listDept = (queryParams?: object) => {
 
 export const getDept = (deptId: any) => {
     return request({
-        url: '/youlai-admin/api/v1/depts/select',
+        url: '/youlai-admin/api/v1/depts/'+deptId,
         method: 'get'
     })
 }
 
-// export const listDeptExcludeChild = (deptId: any) => {
-//     return https().request<RootObject<any>>(`system/dept/list/exclude/${deptId}`, Method.GET, undefined, ContentType.form)
-// }
-
 export const delDept = (deptId: any) => {
     return request({
         url: '/youlai-admin/api/v1/depts/'+deptId,
@@ -34,10 +22,7 @@ export const delDept = (deptId: any) => {
     })
 }
 
-
-
 // 新增部门
-
 export const addDept = (data: any) => {
     return request({
         url: '/youlai-admin/api/v1/depts',
@@ -47,22 +32,18 @@ export const addDept = (data: any) => {
 }
 
 // 修改部门
-
-export const updateDept = (data: any) => {
+export const updateDept = (id:string,data: any) => {
     return request({
-        url: '/youlai-admin/api/v1/depts/' + id,
+        url: '/youlai-admin/api/v1/depts/'+id,
         method: 'put',
         data: data
     })
 }
 
-// // 根据角色ID查询部门树结构
-// export const roleDeptTreeselect = (roleId: number | string) => {
-//     return https().request<any>(`system/dept/roleDeptTreeselect/${roleId}`, Method.GET, undefined, ContentType.form)
-// }
-//
-// // 查询部门下拉树结构
-//
-// export const treeselect = () => {
-//     return https().request<RootObject<any>>('system/dept/treeselect', Method.GET, undefined, ContentType.form)
-// }
+
+export const getDeptSelectList = ()=> {
+    return request({
+        url: '/youlai-admin/api/v1/depts/select',
+        method: 'get'
+    })
+}
diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
index 76289cb..21d3e59 100644
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@@ -50,7 +50,7 @@ export default defineComponent({
     // 选项列表数据(树形结构的对象数组)
     options: { type: Array, required: true },
     // 初始值
-    defalut: { type: Number, default: null },
+    defalut: { type: String, default: null },
     // 可清空选项
     clearable: { type: Boolean, default: true },
     // 自动收起
@@ -71,9 +71,6 @@ export default defineComponent({
   },
   emits: ['callBack'],
   setup(props, ctx) {
-    console.log(props.options)
-    console.log(props.treeProps)
-
     const instance = getCurrentInstance() as any
     const state = reactive({
       valueId: 0,
@@ -105,8 +102,6 @@ export default defineComponent({
 
     // 处理默认值并显示
     const defaultValue = () => {
-      console.log('xxxxxx')
-
       if (props.defalut !== null) {
         const deafaultModels = props.originOptions.filter((item: any) => {
           return item[props.treeProps.value] === props.defalut
@@ -168,9 +163,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.el-select.el-select--medium{
- width: 100%;
-}
+
 
 .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
   height: auto;
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 6f29055..1ceb07d 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -140,21 +140,17 @@
       <el-form
           ref="formDialog"
           :model="formVal"
+          :rules="rules"
           label-width="80px"
       >
-        <el-row>
-          <el-col
-              :span="24"
-              v-if="parentId !== 0"
-          >
             <el-form-item
                 label="上级部门"
                 prop="parentId"
             >
-              <Treeselect
+              <TreeSelect
                   :treeProps="props"
                   :options="deptOptions"
-                  placeholder="请选择归属部门"
+                  placeholder="选择上级部门"
                   :originOptions="originOptions"
                   :defalut="formVal.parentId"
                   :user="true"
@@ -162,80 +158,26 @@
                   :disabled="disabled"
               />
             </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-                label="部门名称"
-                prop="deptName"
-            >
-              <el-input
-                  v-model="formVal.deptName"
-                  placeholder="请输入部门名称"
-              />
+
+<!--            <el-form-item label="上级部门" prop="parentId">-->
+<!--              <tree-select-->
+<!--                  v-model="formVal.parentId"-->
+<!--                  :options="deptOptions"-->
+<!--                  placeholder="选择上级部门"-->
+<!--              />-->
+<!--            </el-form-item>-->
+            <el-form-item label="部门名称" prop="name">
+              <el-input v-model="formVal.name" placeholder="请输入部门名称"/>
             </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-                label="显示排序"
-                prop="orderNum"
-            >
-              <el-input-number
-                  :min="0"
-                  v-model="formVal.orderNum"
-                  controls-position="right"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-                label="负责人"
-                prop="leader"
-            >
-              <el-input
-                  v-model="formVal.leader"
-                  placeholder="请输入负责人"
-                  maxlength="20"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-                label="联系电话"
-                prop="phone"
-            >
-              <el-input
-                  v-model="formVal.phone"
-                  placeholder="请输入联系电话"
-                  maxlength="11"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-                label="邮箱"
-                prop="email"
-            >
-              <el-input
-                  v-model="formVal.email"
-                  placeholder="请输入邮箱"
-                  maxlength="50"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="部门状态">
-              <el-radio-group v-model="formVal.status">
-                <el-radio
-                    v-for="dict in statusOptions"
-                    :key="dict.dictValue"
-                    :label="dict.dictValue"
-                >
-                  {{ dict.dictLabel }}
-                </el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
+        <el-form-item label="显示排序" prop="sort">
+          <el-input-number v-model="formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
+        </el-form-item>
+        <el-form-item label="部门状态">
+          <el-radio-group v-model="formVal.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
       </el-form>
 
       <template #footer>
@@ -260,13 +202,13 @@
 <script lang="ts">
 import { defineComponent, onMounted, reactive, toRefs, unref, ref } from 'vue'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
-import { listDept, getDept, delDept, updateDept, addDept } from '@/api/system/dept'
-import treeselect  from '@/components/TreeSelect/Index.vue'
+import { listDept, getDept, delDept, updateDept, addDept,getDeptSelectList } from '@/api/system/dept'
+import TreeSelect  from '@/components/TreeSelect/Index.vue'
 import { ElForm, ElMessage } from 'element-plus'
 
 export default defineComponent({
   components: {
-    treeselect
+    TreeSelect
   },
   setup() {
     const queryForm = ref(ElForm)
@@ -294,7 +236,16 @@ export default defineComponent({
       // 是否显示弹出层
       open: false,
       // 状态数据字典
-      statusOptions: [],
+      statusOptions: [
+        {
+          "dictValue":0,
+          "dictLabel":"禁用"
+        },
+        {
+          "dictValue":1,
+          "dictLabel":"正常"
+        }
+      ],
       // 查询参数
       queryParams: {
         name: undefined,
@@ -303,11 +254,8 @@ export default defineComponent({
       formVal: {
         deptId: '',
         parentId: '',
-        deptName: '',
-        orderNum: 0,
-        leader: '',
-        phone: '',
-        email: '',
+        name: '',
+        sort: 0,
         status: ''
       },
 
@@ -318,25 +266,11 @@ export default defineComponent({
         parentId: [
           { required: true, message: '上级部门不能为空', trigger: 'blur' }
         ],
-        deptName: [
+        name: [
           { required: true, message: '部门名称不能为空', trigger: 'blur' }
         ],
-        orderNum: [
+        sort: [
           { required: true, message: '显示排序不能为空', trigger: 'blur' }
-        ],
-        email: [
-          {
-            type: 'email',
-            message: "'请输入正确的邮箱地址",
-            trigger: ['blur', 'change']
-          }
-        ],
-        phone: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: '请输入正确的手机号码',
-            trigger: 'blur'
-          }
         ]
       },
       test: '8347213498'
@@ -346,8 +280,6 @@ export default defineComponent({
     const getList = () => {
       dataMap.loading = true
       listDept(dataMap.queryParams).then((response: any) => {
-        console.log(response.data)
-        // dataMap.deptList = handleTree(response.data, 'deptId')
         dataMap.deptList = response.data
         dataMap.loading = false
       })
@@ -359,7 +291,7 @@ export default defineComponent({
       }
       return {
         id: node.deptId,
-        label: node.deptName,
+        label: node.name,
         children: node.children
       }
     }
@@ -379,6 +311,7 @@ export default defineComponent({
       form.resetFields()
       handleQuery()
     }
+
     const flatten = (origin: any) => {
       let result: any = []
       for (let i = 0; i < origin.length; i++) {
@@ -394,9 +327,10 @@ export default defineComponent({
     }
     /** 查询部门下拉树结构 */
     const getTreeselect = () => {
-      treeselect().then(response=> {
-        dataMap.deptOptions = response?.data
-        dataMap.originOptions = flatten(response?.data) as any
+      getDeptSelectList().then(response => {
+          dataMap.deptOptions = response.data
+          dataMap.originOptions = flatten(response?.data) as any
+
       })
     }
     const handleAdd = (row: any) => {
@@ -413,18 +347,15 @@ export default defineComponent({
     const handleUpdate = async(row: any) => {
       dataMap.disabled = true
       dataMap.isAdd = false
-      console.log(row.deptId)
-      dataMap.deptidfix = row.deptId
-
-      const result = await getDept(row.deptId) as any
-      if (result?.code === 200) {
+      dataMap.deptidfix = row.id
+      // 部门下拉数据
+      await getTreeselect()
+      const result = await getDept(row.id) as any
+      if (result?.code === "00000") {
         dataMap.formUpdata = result.data
-        dataMap.formVal.deptName = result.data.deptName
+        dataMap.formVal.name = result.data.name
         dataMap.formVal.parentId = result.data.parentId
-        dataMap.formVal.orderNum = result.data.orderNum
-        dataMap.formVal.leader = result.data.leader
-        dataMap.formVal.phone = result.data.phone
-        dataMap.formVal.email = result.data.email
+        dataMap.formVal.sort = result.data.sort
         dataMap.formVal.status = result.data.status
         dataMap.title = '修改部门'
         dataMap.open = true
@@ -434,19 +365,15 @@ export default defineComponent({
     const submitForm = () => {
       const formNode = unref(formDialog)
       formNode.validate((valid: any) => {
-        console.log(valid)
         if (valid) {
           if (!dataMap.isAdd) {
-            dataMap.formUpdata.parentId = dataMap.formVal.deptId
-            dataMap.formUpdata.deptId = dataMap.deptidfix
-            dataMap.formUpdata.deptName = dataMap.formVal.deptName
-            dataMap.formUpdata.orderNum = dataMap.formVal.orderNum
-            dataMap.formUpdata.leader = dataMap.formVal.leader
-            dataMap.formUpdata.phone = dataMap.formVal.phone
-            dataMap.formUpdata.email = dataMap.formVal.email
+            dataMap.formUpdata.parentId = dataMap.formVal.parentId
+            dataMap.formUpdata.id = dataMap.deptidfix
+            dataMap.formUpdata.name = dataMap.formVal.name
+            dataMap.formUpdata.sort = dataMap.formVal.sort
             dataMap.formUpdata.status = dataMap.formVal.status
-            updateDept(dataMap.formUpdata).then((res: any) => {
-              if (res?.code === 200) {
+            updateDept(dataMap.formUpdata.id,dataMap.formUpdata).then((res: any) => {
+              if (res?.code === "00000") {
                 ElMessage.success('修改成功')
                 dataMap.open = false
                 getList()
@@ -492,10 +419,7 @@ export default defineComponent({
     }
     onMounted(() => {
       getList()
-      // getTreeselect()
-      // getDicts('sys_normal_disable').then((response: any) => {
-      //   dataMap.statusOptions = response.data
-      // })
+      getTreeselect()
     })
 
     return { ...toRefs(dataMap),Search,Plus,Edit,Delete,Refresh,dialogshow, getDeptId, flatten, getTreeselect, formDialog, statusFormat, queryForm, getList, normalizer, handleDelete, cancel, handleQuery, resetQuery, handleAdd, handleUpdate, submitForm }