钉钉demo-用户列表

src/views/dd/DeptList.vue

@@ -4,17 +4,9 @@
             @keyup.enter="refreshList()" @submit.prevent>
             <!-- 搜索框-->
             <el-form-item prop="fileName" label="部门名称:">
-                <el-input style="width: 200px;" v-model="searchForm.fileName" placeholder="请输入附件名称"
-                    clearable></el-input>
-            </el-form-item>
-            <el-form-item prop="userName" label="上传人:">
-                <el-input style="width: 200px;" v-model="searchForm.userName" placeholder="请输入上传人" clearable></el-input>
-            </el-form-item>
-            <el-form-item prop="userName" label="收藏分类:">
-                <el-select v-model="searchForm.classification" clearable placeholder="请选择收藏分类">
-                    <el-option v-for="(item, index) in dictList" :key="index" :label="item.label" :value="item.value" />
-                </el-select>
+                <el-input style="width: 200px;" v-model="searchForm.name" placeholder="请输入部门名称" clearable></el-input>
             </el-form-item>
+
             <el-form-item>
                 <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
                 <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
@@ -74,6 +66,7 @@
 <script>
 import ddService from "@/api/test/dd/dd.js"
 import DeptForm from "./DeptForm.vue"
+import { ElMessage } from "element-plus";
 const treeConfig = {
     transform: true,
     rowField: 'deptId',
@@ -94,6 +87,12 @@ const fetchChildListApi = (parentRow) => {
             res.result.forEach(item => {
                 item.hasChild = true
             })
+            if (res.result.length == 0) {
+                ElMessage({
+                    message: `当前部门下暂无子部门`,
+                    type: "warning",
+                });
+            }
             resolve(res.result)
         })
     })

src/views/dd/UserList.vue

@@ -3,17 +3,10 @@
         <el-form :inline="true" class="query-form m-b-10" v-if="searchVisible" ref="searchForm" :model="searchForm"
             @keyup.enter="refreshList()" @submit.prevent>
             <!-- 搜索框-->
-            <el-form-item prop="fileName" label="部门名称:">
-                <el-input style="width: 200px;" v-model="searchForm.fileName" placeholder="请输入附件名称"
-                    clearable></el-input>
-            </el-form-item>
-            <el-form-item prop="userName" label="上传人:">
-                <el-input style="width: 200px;" v-model="searchForm.userName" placeholder="请输入上传人" clearable></el-input>
-            </el-form-item>
-            <el-form-item prop="userName" label="收藏分类:">
-                <el-select v-model="searchForm.classification" clearable placeholder="请选择收藏分类">
-                    <el-option v-for="(item, index) in dictList" :key="index" :label="item.label" :value="item.value" />
-                </el-select>
+            <el-form-item prop="deptId" label="所属部门:">
+                <el-tree-select @change="handleChange" v-model="searchForm.deptId" lazy :load="load" node-key="deptId"
+                    :props="props" :data="deptList" check-strictly :render-after-expand="false" check-on-click-node
+                    style="width: 240px" />
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
@@ -24,18 +17,14 @@
         <div class="jp-table">
             <vxe-toolbar ref="dataSetToolbar" :refresh="{ query: refreshList }" export print custom>
                 <template #buttons>
-                    <el-button v-if="hasPermission('attachment:add')" type="primary" icon="plus"
-                        @click="add()">上传附件</el-button>
+                    <el-button type="primary" icon="plus" @click="add()">新增用户</el-button>
                 </template>
                 <template #tools>
                     <vxe-button type="text" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
                         class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
                 </template>
             </vxe-toolbar>
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-                <el-tab-pane v-for="item in dataList" :key="item.deptId" :label="item.name"
-                    :name="item.deptId"></el-tab-pane>
-            </el-tabs>
+
             <div class="jp-table-body">
                 <vxe-table border="inner" auto-resize resizable height="auto" :loading="loading" size="small"
                     ref="dataSetTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
@@ -72,44 +61,32 @@
                 </vxe-pager>
             </div>
         </div>
-		<PunchCardListDia ref="punchCardListDia"></PunchCardListDia>
+        <PunchCardListDia ref="punchCardListDia"></PunchCardListDia>
     </div>
 </template>
 
 <script>
 import ddService from "@/api/test/dd/dd.js"
 import PunchCardListDia from "./PunchCardListDia";
-const getDataApi = (deptId) => {
-    return new Promise(resolve => {
-        ddService
-            .list({
-                deptId: deptId
-            }).then(res => {
-                resolve(res.result.list)
-            })
-    })
-}
+
 export default {
     components: {
-		PunchCardListDia
+        PunchCardListDia
     },
     data() {
         return {
-            cloumns: [{ type: 'seq', title: 'Sequence' },
-            { field: 'name', title: 'Name' },
-            { field: 'role', title: 'Role' },
-            { field: 'age', title: 'Age' },
-            { field: 'sex', title: 'Sex' }],
+            props: {
+                isLeaf: 'isLeaf',
+                label: 'name',
+            },
             url: "",
             showViewer: false,
-            activeName: "",
             searchVisible: true,
             searchForm: {
-                companyId: '',
-                officeId: '',
-                createById: '',
+                deptId: null
             },
             dataList: [],
+            deptList: [],
             userDataList: [],
             tablePage: {
                 total: 0,
@@ -135,16 +112,36 @@ export default {
             const $toolbar = this.$refs.dataSetToolbar;
             $table.connect($toolbar);
         });
-        this.refreshList();
+        this.loading = true
+        ddService.deptList().then(res => {
+            res.result.unshift({
+                deptId: 1,
+                name: "根部门",
+                isLeaf: true
+            })
+            this.deptList = res.result
+            this.searchForm.deptId = 1
+            this.refreshList();
+        })
     },
     methods: {
-        handleAdd(row) {
-			console.log('row',row)
-			this.$refs.punchCardListDia.init(row.userid,row.name,row.title)
+        handleChange(value) {
+            console.log(value);
+            this.searchForm.deptId = value
+            this.refreshList()
+        },
+        load(node, resolve) {
+            console.log(node);
+            ddService.deptList({
+                deptId: node.data.deptId
+            }).then(res => {
+                resolve(res.result)
+            })
+
         },
-        handleClick(tab, event) {
-            console.log(tab.props.name);
-            this.getUserList(tab.props.name)
+        handleAdd(row) {
+            console.log('row', row)
+            this.$refs.punchCardListDia.init(row.userid, row.name, row.title)
         },
         // 关闭查看器
         closeViewer() {
@@ -156,27 +153,15 @@ export default {
             this.showViewer = true
         },
         // 获取数据列表
-        getUserList(deptId) {
+        refreshList() {
             this.loading = true;
             ddService
                 .list({
-                    deptId: deptId
+                    deptId: this.searchForm.deptId
                 })
                 .then((data) => {
                     this.userDataList = data.result.list;
-                    this.loading = false;
-                });
-        },
-        // 获取数据列表
-        refreshList() {
-            this.loading = true;
-            ddService
-                .deptList()
-                .then((data) => {
-                    this.activeName = data.result[0].deptId
-                    this.dataList = data.result;
                     // this.tablePage.total = data.total;
-                    this.getUserList(data.result[0].deptId)
                     this.loading = false;
                     // 获取分类去重的数据
                 });
@@ -242,6 +227,7 @@ export default {
 
         resetSearch() {
             this.$refs.searchForm.resetFields();
+            this.searchForm.deptId = 1
             this.refreshList();
         },
     },