dbd-meeting-html/src/views/admin/meeting/EquipmentList.vue

<template>
  <a-card :bordered='false'>
    <div class='table-page-search-wrapper'>
      <a-form layout='inline'>
        <a-row :gutter='48'>
          <a-col :md='5' :sm='15'>
            <a-form-item label='设备名称'>
              <a-input placeholder='请输入设备名称' v-model='queryParam.equipmentName' />
            </a-form-item>
          </a-col>
          <a-col :md='5' :sm='15'>
            <a-form-item label='设备编号'>
              <a-input placeholder='请输入设备编号' v-model='queryParam.equipmentNum' />
            </a-form-item>
          </a-col>
          <a-col :md='5' :sm='15'>
            <a-form-item label='设备类型'>
              <a-input placeholder='请输入设备类型' v-model='queryParam.type' />
            </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='() => queryParam = {}'>重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class='table-operator'>
      <a-button v-if='addEnable' type='primary' icon='plus' @click='$refs.modal.add()'>新建</a-button>
      <a-dropdown v-if='removeEnable&&selectedRowKeys.length > 0'>
        <a-button type='danger' icon='delete' @click='delByIds(selectedRowKeys)'>删除</a-button>
      </a-dropdown>
    </div>
    <s-table
      size='default'
      ref='table'
      rowKey='id'
      :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
      :columns='columns'
      :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>
      <span slot='roomName' slot-scope='text,record'>
        <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>
      <span slot='persons' slot-scope='text,record'>
        <a @click='handlePersonList(record)'>{{ 1 }}</a>
      </span>
      <span slot='action' slot-scope='text, record'>
        <a v-if='editEnabel' @click='handleEdit(record)'>编辑</a>
        <a-divider type='vertical' />
        <a v-if='removeEnable' @click='delByIds([record.id])'>删除</a>
      </span>
    </s-table>
    <equipment-modal ref='modal' @ok='handleOk' />

    <!--  授权  -->
    <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.username' />
              </a-form-item>
            </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='searchEnterprisePerson'>查询</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class='table-operator'>
      </div>
      <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>

<script>
import { STable } from '@/components'

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'


export default {
  name: 'TableList',
  components: {
    STable,
    EquipmentModal
  },
  data() {
    return {
      disabled: false,
      showSearch: false,
      personLoadData: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      selectedItemRowKeys: [],
      onItemSelectChange: [],
      form: this.$form.createForm(this),
      mdl: {},
      visible: false,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      selectedPersonRowKeys: [],
      selectedPersonRows: [],
      deviceId: '',
      personQueryParam: {
        icsCustomerId: null,
        username: null
      },
      personColumns: [
        {
          title: '手机号',
          dataIndex: 'mobile'
        },
        {
          title: '人员名称',
          dataIndex: 'username'
        },
        {
          title: '公司名称',
          dataIndex: 'customerName'
        }
      ],

      // 表头
      columns: [
        {
          title: '设备编码',
          dataIndex: 'equipmentNum'
        },
        {
          title: '设备名称',
          dataIndex: 'equipmentName'
        },
        {
          title: '设备类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '授权人员',
          dataIndex: 'persons',
          scopedSlots: { customRender: 'persons' }
        },
        {
          title: '设备ip',
          dataIndex: 'ip'
        },
        {
          title: '存放地点',
          dataIndex: 'roomName',
          scopedSlots: { customRender: 'roomName' }
        },
        {
          title: '设备状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },

        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getEquipmentList(Object.assign(parameter, this.queryParam))
      },

      selectedRowKeys: [],
      selectedRows: [],
      addEnable: checkPermission('meeting:equipment:add'),
      editEnabel: checkPermission('meeting:equipment:edit'),
      removeEnable: checkPermission('meeting:equipment:remove'),
      enterpriseList: []
    }
  },
  filters: {},
  created() {
    // 查询企业
    getTicketByCompany().then(res => {
      console.log('getTicketByCompany' , res)
      this.enterpriseList = res.rows
    })

  },
  methods: {
    handlePersonList(record) {
      this.visible = true
      this.deviceId = record.id
      getUserList().then(res => {
        this.personLoadData = res.data
      })
    },
    // 查询企业下的员工
    searchEnterprisePerson(){
      getUserList(this.personQueryParam).then(res => {
        this.personLoadData = res.data
      })
    },
    personHandleOk() {
      console.log(this.deviceId)
      console.log(this.selectedPersonRowKeys)
      //新增用户设备
    },
    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()
    },
    handleEdit(record) {
      this.$refs.modal.edit(record)
    },
    handleOk() {
      this.$refs.table.refresh(true)
      console.log('handleSaveOk')
    },
    delByIds(ids) {
      delEquipment({ ids: ids.join(',') }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.handleOk()
        } else {
          this.$message.error(res.msg)
        }
        this.selectedRowKeys = []
      })
    }
    //
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</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>