From 5a52bd73bf441f9045eb70b203cf3588634152d8 Mon Sep 17 00:00:00 2001
From: SelfRidicule <selfridicule@gmail.com>
Date: Fri, 22 Mar 2024 11:24:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=8F=E8=BF=B0=EF=BC=9A=E8=AE=BE=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/meeting/equipment.js        |   4 +-
 src/views/admin/meeting/EquipmentList.vue | 187 +++++++++++++++++-----
 2 files changed, 149 insertions(+), 42 deletions(-)

diff --git a/src/api/admin/meeting/equipment.js b/src/api/admin/meeting/equipment.js
index 697c233..fc688b9 100644
--- a/src/api/admin/meeting/equipment.js
+++ b/src/api/admin/meeting/equipment.js
@@ -28,11 +28,11 @@ export function recordByDeviceId (id) {
   })
 }
 
-export function getUserList(){
+export function getUserList(params){
   return axios({
     url: api.equipment + '/getUserList',
     method: 'get',
-    params: {}
+    params: params
   })
 }
 
diff --git a/src/views/admin/meeting/EquipmentList.vue b/src/views/admin/meeting/EquipmentList.vue
index c6fc766..e788034 100644
--- a/src/views/admin/meeting/EquipmentList.vue
+++ b/src/views/admin/meeting/EquipmentList.vue
@@ -42,16 +42,16 @@
       :data='loadData'
     >
       <span slot='type' slot-scope='text,record'>
-        <span v-if="text == 0"><a-tag color="green">门禁</a-tag></span>
-	      <span v-else><a-tag color="cyan">开门控制器</a-tag></span>
+        <span v-if='text == 0'><a-tag color='green'>门禁</a-tag></span>
+	      <span v-else><a-tag color='cyan'>开门控制器</a-tag></span>
       </span>
       <span slot='roomName' slot-scope='text,record'>
-        <span >{{record.buildName}}{{record.roomName}}</span>
+        <span>{{ record.buildName }}{{ record.roomName }}</span>
       </span>
       <span slot='status' slot-scope='text,record'>
-        <span v-if="text == 0"><a-tag color="green">启用</a-tag></span>
-	      <span v-if='text == 1'><a-tag color="warn">损坏</a-tag></span>
-	      <span v-if='text == 2'><a-tag color="danger">离线</a-tag></span>
+        <span v-if='text == 0'><a-tag color='green'>启用</a-tag></span>
+	      <span v-if='text == 1'><a-tag color='warn'>损坏</a-tag></span>
+	      <span v-if='text == 2'><a-tag color='danger'>离线</a-tag></span>
       </span>
       <span slot='persons' slot-scope='text,record'>
         <a @click='handlePersonList(record)'>{{ 1 }}</a>
@@ -64,20 +64,27 @@
     </s-table>
     <equipment-modal ref='modal' @ok='handleOk' />
 
-    <a-modal v-model='visible' title='会议设备' width='1000px' @ok='personHandleOk()'>
+    <!--  授权  -->
+    <a-modal v-model='visible' title='会议设备' width='1300px' @ok='personHandleOk()'>
       <div class='table-page-search-wrapper'>
         <a-form layout='inline'>
           <a-row :gutter='48'>
             <a-col :md='8' :sm='15'>
-             <a-form-item label='关键词'>
-                <a-input placeholder='请输入关键词' v-model='personQueryParam.itemName' />
+              <a-form-item label='关键词'>
+                <a-input placeholder='请输入关键词' v-model='personQueryParam.username' />
               </a-form-item>
-             </a-col>
+            </a-col>
+            <a-col :md='8' :sm='15'>
+              <a-form-item label='公司名称'>
+                <a-select placeholder='请选择公司名称' v-model='personQueryParam.icsCustomerId'>
+                  <a-select-option :value="null">全部</a-select-option>
+                  <a-select-option :value="item.id" v-for='item in enterpriseList'>{{item.name}}</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
             <a-col :md='8' :sm='24'>
             <span class='table-page-search-submitButtons'>
-<!--              查询有问题-->
-              <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
-              <a-button style='margin-left: 8px' @click='() => (personQueryParam = {})'>重置</a-button>
+              <a-button type='primary' @click='searchEnterprisePerson'>查询</a-button>
             </span>
             </a-col>
           </a-row>
@@ -85,15 +92,31 @@
       </div>
       <div class='table-operator'>
       </div>
-      <a-table
-        size='default'
-        ref='table'
-        rowKey='id'
-        :rowSelection='{ selectedRowKeys: selectedPersonRowKeys, onChange: onPersonSelectChange }'
-        :columns='personColumns'
-        :data-source='personLoadData'
-      >
-      </a-table>
+      <div class='personModalView'>
+        <div class='leftTableView'>
+          <a-table
+            size='default'
+            ref='table'
+            rowKey='id'
+            :rowSelection='{ selectedRowKeys: selectedPersonRowKeys, onChange: onPersonSelectChange }'
+            :columns='personColumns'
+            :data-source='personLoadData'
+          >
+          </a-table>
+        </div>
+        <div class='rightPersonView'>
+          <div class='head'>
+            <div class='label'>已选：<span class='count'>{{ selectedPersonRows.length }}</span></div>
+            <a-button @click='clearAllPerson'>清空</a-button>
+          </div>
+          <div class='personListView'>
+            <div class='item' v-for='item in selectedPersonRows'>
+              <div class='name'>手机号:{{ item.mobile }} - 姓名:{{ item.username }}</div>
+              <a-icon class='closeImg' type='close-circle' @click='closePerson(item.id)' />
+            </div>
+          </div>
+        </div>
+      </div>
     </a-modal>
   </a-card>
 </template>
@@ -101,11 +124,11 @@
 <script>
 import { STable } from '@/components'
 
-import { delEquipment, getEquipmentList,getUserList } from '@/api/admin/meeting/equipment'
+import { delEquipment, getEquipmentList, getUserList } from '@/api/admin/meeting/equipment'
+import { getTicketByCompany } from '@/api/admin/meeting/ticket'
 import EquipmentModal from './modules/EquipmentModal.vue'
 import { checkPermission } from '@/utils/permissions'
-import difference from 'lodash/difference';
-
+import difference from 'lodash/difference'
 
 
 export default {
@@ -118,7 +141,7 @@ export default {
     return {
       disabled: false,
       showSearch: false,
-      personLoadData:[],
+      personLoadData: [],
       labelCol: {
         xs: { span: 24 },
         sm: { span: 5 }
@@ -127,21 +150,27 @@ export default {
         xs: { span: 24 },
         sm: { span: 16 }
       },
-      selectedItemRowKeys:[],
-      onItemSelectChange:[],
+      selectedItemRowKeys: [],
+      onItemSelectChange: [],
       form: this.$form.createForm(this),
       mdl: {},
-      visible:false,
+      visible: false,
       // 高级搜索 展开/关闭
       advanced: false,
       // 查询参数
       queryParam: {},
-      selectedPersonRowKeys:[],
+      selectedPersonRowKeys: [],
       selectedPersonRows: [],
-      deviceId:'',
-      personQueryParam:{
+      deviceId: '',
+      personQueryParam: {
+        icsCustomerId: null,
+        username: null
       },
       personColumns: [
+        {
+          title: '手机号',
+          dataIndex: 'mobile'
+        },
         {
           title: '人员名称',
           dataIndex: 'username'
@@ -149,7 +178,7 @@ export default {
         {
           title: '公司名称',
           dataIndex: 'customerName'
-        },
+        }
       ],
 
       // 表头
@@ -203,34 +232,58 @@ export default {
       selectedRows: [],
       addEnable: checkPermission('meeting:equipment:add'),
       editEnabel: checkPermission('meeting:equipment:edit'),
-      removeEnable: checkPermission('meeting:equipment:remove')
+      removeEnable: checkPermission('meeting:equipment:remove'),
+      enterpriseList: []
     }
   },
   filters: {},
   created() {
+    // 查询企业
+    getTicketByCompany().then(res => {
+      console.log('getTicketByCompany' , res)
+      this.enterpriseList = res.rows
+    })
+
   },
   methods: {
-    handlePersonList(record){
+    handlePersonList(record) {
       this.visible = true
-      getUserList().then(res =>{
-        this.personLoadData =res.data
+      this.deviceId = record.id
+      getUserList().then(res => {
+        this.personLoadData = res.data
       })
-      this.deviceId =record.id
     },
-    personHandleOk(){
+    // 查询企业下的员工
+    searchEnterprisePerson(){
+      getUserList(this.personQueryParam).then(res => {
+        this.personLoadData = res.data
+      })
+    },
+    personHandleOk() {
       console.log(this.deviceId)
       console.log(this.selectedPersonRowKeys)
       //新增用户设备
     },
-    onPersonSelectChange(selectedRowKeys, selectedRows){
+    onPersonSelectChange(selectedRowKeys, selectedRows) {
       this.selectedPersonRowKeys = selectedRowKeys
       this.selectedPersonRows = selectedRows
+      console.log('this.selectedPersonRowKeys', this.selectedPersonRowKeys)
+      console.log('this.selectedPersonRows', this.selectedPersonRows)
     },
 
     onSelectChange(selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
     },
+    closePerson(id) {
+      console.log('closePerson', id)
+      this.selectedPersonRowKeys = this.selectedPersonRowKeys.filter(item => item != id)
+      this.selectedPersonRows = this.selectedPersonRows.filter(item => item.id != id)
+    },
+    clearAllPerson() {
+      this.selectedPersonRowKeys = []
+      this.selectedPersonRows = []
+    },
     handleAdd() {
       this.$refs.modal.add()
     },
@@ -252,6 +305,7 @@ export default {
         this.selectedRowKeys = []
       })
     }
+    //
   },
   watch: {
     /*
@@ -269,3 +323,56 @@ export default {
   }
 }
 </script>
+<style scoped>
+
+.personModalView {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.personModalView .leftTableView {
+  width: 60%;
+  height: 650px;
+}
+
+.personModalView .rightPersonView {
+  padding: 20px;
+  flex: 1;
+  background: #f2f2f2;
+}
+
+.personModalView .rightPersonView .head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.personModalView .rightPersonView .head .label {
+  color: gray;
+}
+
+.personModalView .rightPersonView .head .label .count {
+  color: #3f92f7;
+}
+
+.personModalView .rightPersonView .personListView {
+  margin-top: 10px;
+  overflow-x: auto;
+  height: 500px;
+}
+
+.personModalView .rightPersonView .personListView .item {
+  border-bottom: 1px solid #e0e0e0;
+  padding: 10px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.personModalView .rightPersonView .personListView .item .closeImg {
+  cursor: pointer;
+}
+
+
+</style>
\ No newline at end of file