描述:设备

This commit is contained in:
SelfRidicule 2024-03-22 11:24:46 +08:00
parent c2e42c7c6e
commit 5a52bd73bf
2 changed files with 149 additions and 42 deletions

View File

@ -28,11 +28,11 @@ export function recordByDeviceId (id) {
}) })
} }
export function getUserList(){ export function getUserList(params){
return axios({ return axios({
url: api.equipment + '/getUserList', url: api.equipment + '/getUserList',
method: 'get', method: 'get',
params: {} params: params
}) })
} }

View File

@ -42,16 +42,16 @@
:data='loadData' :data='loadData'
> >
<span slot='type' slot-scope='text,record'> <span slot='type' slot-scope='text,record'>
<span v-if="text == 0"><a-tag color="green">门禁</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 v-else><a-tag color='cyan'>开门控制器</a-tag></span>
</span> </span>
<span slot='roomName' slot-scope='text,record'> <span slot='roomName' slot-scope='text,record'>
<span >{{record.buildName}}{{record.roomName}}</span> <span>{{ record.buildName }}{{ record.roomName }}</span>
</span> </span>
<span slot='status' slot-scope='text,record'> <span slot='status' slot-scope='text,record'>
<span v-if="text == 0"><a-tag color="green">启用</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 == 1'><a-tag color='warn'>损坏</a-tag></span>
<span v-if='text == 2'><a-tag color="danger">离线</a-tag></span> <span v-if='text == 2'><a-tag color='danger'>离线</a-tag></span>
</span> </span>
<span slot='persons' slot-scope='text,record'> <span slot='persons' slot-scope='text,record'>
<a @click='handlePersonList(record)'>{{ 1 }}</a> <a @click='handlePersonList(record)'>{{ 1 }}</a>
@ -64,20 +64,27 @@
</s-table> </s-table>
<equipment-modal ref='modal' @ok='handleOk' /> <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'> <div class='table-page-search-wrapper'>
<a-form layout='inline'> <a-form layout='inline'>
<a-row :gutter='48'> <a-row :gutter='48'>
<a-col :md='8' :sm='15'> <a-col :md='8' :sm='15'>
<a-form-item label='关键词'> <a-form-item label='关键词'>
<a-input placeholder='请输入关键词' v-model='personQueryParam.itemName' /> <a-input placeholder='请输入关键词' v-model='personQueryParam.username' />
</a-form-item> </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'> <a-col :md='8' :sm='24'>
<span class='table-page-search-submitButtons'> <span class='table-page-search-submitButtons'>
<!-- 查询有问题--> <a-button type='primary' @click='searchEnterprisePerson'>查询</a-button>
<a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
<a-button style='margin-left: 8px' @click='() => (personQueryParam = {})'>重置</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
@ -85,15 +92,31 @@
</div> </div>
<div class='table-operator'> <div class='table-operator'>
</div> </div>
<a-table <div class='personModalView'>
size='default' <div class='leftTableView'>
ref='table' <a-table
rowKey='id' size='default'
:rowSelection='{ selectedRowKeys: selectedPersonRowKeys, onChange: onPersonSelectChange }' ref='table'
:columns='personColumns' rowKey='id'
:data-source='personLoadData' :rowSelection='{ selectedRowKeys: selectedPersonRowKeys, onChange: onPersonSelectChange }'
> :columns='personColumns'
</a-table> :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-modal>
</a-card> </a-card>
</template> </template>
@ -101,11 +124,11 @@
<script> <script>
import { STable } from '@/components' 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 EquipmentModal from './modules/EquipmentModal.vue'
import { checkPermission } from '@/utils/permissions' import { checkPermission } from '@/utils/permissions'
import difference from 'lodash/difference'; import difference from 'lodash/difference'
export default { export default {
@ -118,7 +141,7 @@ export default {
return { return {
disabled: false, disabled: false,
showSearch: false, showSearch: false,
personLoadData:[], personLoadData: [],
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 5 } sm: { span: 5 }
@ -127,21 +150,27 @@ export default {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 16 } sm: { span: 16 }
}, },
selectedItemRowKeys:[], selectedItemRowKeys: [],
onItemSelectChange:[], onItemSelectChange: [],
form: this.$form.createForm(this), form: this.$form.createForm(this),
mdl: {}, mdl: {},
visible:false, visible: false,
// / // /
advanced: false, advanced: false,
// //
queryParam: {}, queryParam: {},
selectedPersonRowKeys:[], selectedPersonRowKeys: [],
selectedPersonRows: [], selectedPersonRows: [],
deviceId:'', deviceId: '',
personQueryParam:{ personQueryParam: {
icsCustomerId: null,
username: null
}, },
personColumns: [ personColumns: [
{
title: '手机号',
dataIndex: 'mobile'
},
{ {
title: '人员名称', title: '人员名称',
dataIndex: 'username' dataIndex: 'username'
@ -149,7 +178,7 @@ export default {
{ {
title: '公司名称', title: '公司名称',
dataIndex: 'customerName' dataIndex: 'customerName'
}, }
], ],
// //
@ -203,34 +232,58 @@ export default {
selectedRows: [], selectedRows: [],
addEnable: checkPermission('meeting:equipment:add'), addEnable: checkPermission('meeting:equipment:add'),
editEnabel: checkPermission('meeting:equipment:edit'), editEnabel: checkPermission('meeting:equipment:edit'),
removeEnable: checkPermission('meeting:equipment:remove') removeEnable: checkPermission('meeting:equipment:remove'),
enterpriseList: []
} }
}, },
filters: {}, filters: {},
created() { created() {
//
getTicketByCompany().then(res => {
console.log('getTicketByCompany' , res)
this.enterpriseList = res.rows
})
}, },
methods: { methods: {
handlePersonList(record){ handlePersonList(record) {
this.visible = true this.visible = true
getUserList().then(res =>{ this.deviceId = record.id
this.personLoadData =res.data 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.deviceId)
console.log(this.selectedPersonRowKeys) console.log(this.selectedPersonRowKeys)
// //
}, },
onPersonSelectChange(selectedRowKeys, selectedRows){ onPersonSelectChange(selectedRowKeys, selectedRows) {
this.selectedPersonRowKeys = selectedRowKeys this.selectedPersonRowKeys = selectedRowKeys
this.selectedPersonRows = selectedRows this.selectedPersonRows = selectedRows
console.log('this.selectedPersonRowKeys', this.selectedPersonRowKeys)
console.log('this.selectedPersonRows', this.selectedPersonRows)
}, },
onSelectChange(selectedRowKeys, selectedRows) { onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows 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() { handleAdd() {
this.$refs.modal.add() this.$refs.modal.add()
}, },
@ -252,6 +305,7 @@ export default {
this.selectedRowKeys = [] this.selectedRowKeys = []
}) })
} }
//
}, },
watch: { watch: {
/* /*
@ -269,3 +323,56 @@ export default {
} }
} }
</script> </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>