zyp

src/views/qw/qwAccounts/index.vue

@@ -2,15 +2,19 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="公司名" prop="companyId">
-          <el-select filterable style="width: 220px" v-model="queryParams.companyId" placeholder="请选择公司名" clearable size="small">
-                <el-option
-                  v-for="item in companys"
-                  :key="item.companyId"
-                  :label="item.companyName"
-                  :value="item.companyId"
-                />
-          </el-select>
-        </el-form-item>          
+          <el-select filterable  v-model="queryParams.companyId" placeholder="请选择公司名"  @change="companyChange" clearable size="small">
+              <el-option
+                v-for="item in companys"
+                :key="item.companyId"
+                :label="item.companyName"
+                :value="item.companyId"
+              />
+        </el-select>
+      </el-form-item>
+
+     <el-form-item >
+          <treeselect style="width: 220px" :clearable="false"  v-model="queryParams.deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+     </el-form-item> 
       <el-form-item label="企微账号" prop="account">
         <el-input
           v-model="queryParams.account"
@@ -20,6 +24,35 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="员工姓名" prop="companyUserName">
+        <el-input
+          v-model="queryParams.companyUserName"
+          placeholder="请输入员工姓名"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="在线状态" prop="authCheck">
+          <el-select filterable  v-model="queryParams.authCheck" placeholder="请选择" clearable size="small">
+              <el-option
+                v-for="item in authCheckOptions"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="下线类型" prop="offlineType" >
+          <el-select filterable  v-model="queryParams.offlineType" placeholder="请选择" clearable size="small">
+              <el-option
+                v-for="item in offlineTypeOptions"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              />
+        </el-select>
+      </el-form-item>
 
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -37,6 +70,15 @@
           v-hasPermi="['qw:account:remove']"
         >删除</el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+            type="warning"
+          icon="el-icon-download"
+          size="mini"
+            @click="handleExport"
+          v-hasPermi="['qw:account:export']"
+        >导出</el-button>
+      </el-col>
     </el-row>
     <el-tabs type="card" v-model="queryParams.isAudit" @tab-click="handleClick">
       <el-tab-pane label="已通过" name="1"></el-tab-pane>
@@ -69,7 +111,13 @@
               <el-tag prop="authCheck" v-for="(item, index) in authCheckOptions"  :type="scope.row.authCheck==0?'danger':'success'"  v-if="scope.row.authCheck==item.dictValue">{{item.dictLabel}}</el-tag>
           </template>
       </el-table-column>
-      <el-table-column width="300" label="关联设备id" align="center" prop="deviceId"  v-if="queryParams.isAudit == 1"/>
+      <el-table-column label="最近一次上线时间" align="center" prop="onlineTime" />
+      <el-table-column label="最近一次下线时间" align="center" prop="offlineTime" />
+      <el-table-column label="最后一次下线类型" align="center" prop="offlineType" >
+          <template slot-scope="scope" >
+              <el-tag prop="authCheck" v-for="(item, index) in offlineTypeOptions"  :type="scope.row.offlineType==0?'danger':'success'"  v-if="scope.row.offlineType==item.dictValue">{{item.dictLabel}}</el-tag>
+          </template>
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -130,9 +178,17 @@
 <script>
 import { listAccount, getAccount, delAccount, addAccount, auditAccount, exportAccount } from "@/api/qw/account";
 import { getCompanyList } from "@/api/company/company";
+import { treeselect } from "@/api/company/companyDept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Account",
+  watch: {
+    // 监听deptId
+    'deptId': 'currDeptChange'
+  },
+  components: { Treeselect },
   data() {
     return {
       // 遮罩层
@@ -140,6 +196,9 @@ export default {
       // 选中数组
       ids: [],
       companys:[],
+      deptOptions:[],
+      companyId:undefined,
+      deptId:undefined,
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -148,11 +207,11 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      activeName:"1",
       // 企微功能账号管理表格数据
       accountList: [],
       isAuditOptions:[],
       authCheckOptions:[],
+      offlineTypeOptions:[],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -168,11 +227,10 @@ export default {
         status: null,
         realName: null,
         nickName: null,
-        companyId: null,
         deviceId: null,
         deptId: null,
-        companyUserId: null,
-        isAudit: 1,
+        companyUserName: null,
+        isAudit: "1",
       },
       // 表单参数
       form: {},
@@ -193,9 +251,12 @@ export default {
     };
   },
   created() {
-    this.getList();
     getCompanyList().then(response => {
       this.companys = response.data;
+         if(this.companys!=null&&this.companys.length>0){
+          this.companyId=this.companys[0].companyId;
+          this.getTreeselect();
+        }
     });
     this.getDicts("common_audit").then((response) => {
       this.isAuditOptions = response.data;
@@ -203,6 +264,10 @@ export default {
     this.getDicts("qw_login_status").then((response) => {
       this.authCheckOptions = response.data;
     });
+    this.getDicts("qw_offline_type").then((response) => {
+      this.offlineTypeOptions = response.data;
+    });
+    this.getList();
   },
   methods: {
     /** 查询企微功能账号管理列表 */
@@ -232,7 +297,6 @@ export default {
         remark: null,
         realName: null,
         nickName: null,
-        companyId: null,
         deviceId: null,
         deptId: null,
         companyUserId: null,
@@ -320,7 +384,28 @@ export default {
         }).then(response => {
           this.download(response.msg);
         }).catch(function() {});
-    }
+    },
+    getTreeselect() {
+        var that=this;
+        var param={companyId:this.companyId}
+        treeselect(param).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;
+          }
+        });
+    },
+    companyChange(val){
+      console.log(val);
+      this.companyId=val;
+      this.getTreeselect();
+    },
+     currDeptChange(val){
+          console.log(val)
+          this.queryParams.deptId=val;
+          this.getList();
+    },
   }
 };
 </script>