企微员工 添加部门查询

src/api/qw/qwDept.js

@@ -59,3 +59,11 @@ export function exportQwDept(query) {
     params: query
   })
 }
+
+export function treeselect(query) {
+  return request({
+    url: '/qw/qwDept/treeselect',
+    method: 'get',
+    params: query
+  })
+}

src/views/qw/user/index.vue

@@ -12,6 +12,9 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="企微部门">
+        <treeselect :clearable="false"  v-model="queryParams.deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>
+      </el-form-item>
       <el-form-item label="企微账号" prop="qwUserId">
         <el-input
           v-model="queryParams.qwUserId"
@@ -89,6 +92,8 @@
       <el-table-column label="企微账号" align="center" prop="qwUserId" />
       <el-table-column label="企微昵称" align="center" prop="qwUserName" />
       <el-table-column label="员工称呼" align="center" prop="welcomeText" />
+      // 部门
+      <el-table-column label="部门" align="center" prop="departmentName" />
       <el-table-column label="员工状态" align="center" prop="isDel">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.isDel == 0" type="success">正常</el-tag>
@@ -555,12 +560,16 @@ import {
   qwBindCloudHost, qwUnbindCloudHost, handleAuthAppKey, handleInputAuthAppKey, selectCloudAP, staffListUser, exportStaff
 } from '../../../api/qw/user'
 import fastGptRole from "@/views/fastGpt/fastGptRole/fastGptRole";
+import { treeselect } from "@/api/qw/qwDept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "cuDeptIdIndex",
-  components: { fastGptRole},
+  components: { fastGptRole,Treeselect},
   data() {
     return {
+      deptOptions:[], // 企微部门
       isAutoOptions:[],
       updateIp:{
         open:false,
@@ -670,6 +679,7 @@ export default {
         qwUserId: null,
         corpId: null,
         qwUserName: null,
+        deptId:null,
       },
       qwUserId:null,
       companyUserList:[],
@@ -698,13 +708,14 @@ export default {
     });
     getMyQwCompanyList().then(response => {
       this.myQwCompanyList = response.data;
-      if(this.myQwCompanyList!=null){
+      if(this.myQwCompanyList && this.myQwCompanyList.length>0){
         this.queryParams.corpId=this.myQwCompanyList[0].dictValue;
+        // 查询部门下拉树结构
+        this.getTreeselect()
         this.getList();
       }
     });
-
-
+    this.loading = false;
   },
   watch: {
     // 监听弹窗的可见性变化
@@ -717,6 +728,25 @@ export default {
     },
   },
   methods: {
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      var that=this;
+      let query = {
+        corpId: this.queryParams.corpId
+      }
+      // 企微主体不能为空
+      if(!query.corpId){
+        this.$message.error("请选择企微主体");
+        return;
+      }
+      treeselect(query).then((response) => {
+        this.deptOptions = response.data;
+        console.log(this.deptOptions)
+        if(response.data!=null&&response.data.length>0){
+          this.queryParams.deptId=response.data[0].id;
+        }
+      });
+    },
     getList() {
       this.loading = true;
       staffListUser(this.queryParams).then(response => {
@@ -728,6 +758,7 @@ export default {
     },
     updateCorpId() {
       this.reset();
+      this.getTreeselect();
       this.getList();
     },
     changeVideoStatus(val){
@@ -1262,4 +1293,11 @@ export default {
   width: 80%;
 }
 
+.vue-treeselect{
+  width: 217px;
+  height: 36px;
+}
+
 </style>
+
+