smsb-web-develop/src/views/device/group/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <c-table
      :options="options"
      @pagination="getList"
    >
      <template #header>
        <div class="l-flex__auto c-sibling-item">
          <button
            class="o-button"
            @click="onAdd"
          >
            <i class="o-button__icon el-icon-circle-plus-outline" />
            新增
          </button>
        </div>
        <search-input
          v-model.trim="options.params.name"
          class="l-flex__none c-sibling-item"
          placeholder="分组名称"
          @search="search"
        />
        <button
          class="l-flex__none c-sibling-item o-button"
          @click="search"
        >
          搜索
        </button>
      </template>
      <el-table-column
        prop="name"
        label="分类名称"
        align="center"
      />
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        align="center"
        width="240"
      >
        <template v-slot="scope">
          <div
            class="c-table__btn u-pointer"
            @click="onEdit(scope.row)"
          >
            编辑
          </div>
          <div
            class="c-table__btn u-pointer"
            @click="onViewDevices(scope.row)"
          >
            设备
          </div>
          <div
            class="c-table__btn u-pointer"
            @click="onDel(scope.row)"
          >
            删除
          </div>
        </template>
      </el-table-column>
    </c-table>
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onSave"
    >
      <div class="c-form">
        <div class="c-form__section required">
          <span class="c-form__label required">名称：</span>
          <el-input
            v-model.trim="currObj.name"
            class="c-form__item"
            maxlength="50"
          />
        </div>
        <div class="c-form__section">
          <span class="c-form__label">备注：</span>
          <el-input
            v-model="currObj.remark"
            class="c-form__item"
            type="textarea"
            maxlength="100"
          />
        </div>
      </div>
    </confirm-dialog>
    <el-dialog
      title="设备"
      :visible.sync="showGroupDevices"
      custom-class="c-dialog large"
    >
      <c-table
        :options="groupOptions"
        @pagination="getDevicesByGroup"
      >
        <template #header>
          <button
            class="o-button"
            @click="onDevice"
          >
            <i class="o-button__icon el-icon-circle-plus-outline" />
            添加设备
          </button>
        </template>
        <el-table-column
          prop="name"
          label="设备名称"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="productName"
          label="产品"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="serialNumber"
          label="序列号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mac"
          label="MAC"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="resolutionRatio"
          label="分辨率"
          align="center"
          width="120"
        />
        <el-table-column
          label="操作"
          align="center"
          width="80"
        >
          <template v-slot="scope">
            <div
              class="c-table__btn u-pointer"
              @click="delDeviceFromGroup(scope.row, scope.$index)"
            >
              移除
            </div>
          </template>
        </el-table-column>
      </c-table>
    </el-dialog>
    <el-dialog
      title="添加设备"
      :visible.sync="showDevices"
      custom-class="c-dialog large"
      append-to-body
    >
      <c-table
        :options="deviceOptions"
        @pagination="getDevices"
        @row-dblclick="chooseDevice"
      >
        <template #header>
          <div class="l-flex__auto" />
          <search-input
            v-model.trim="deviceOptions.params.name"
            class="l-flex__none c-sibling-item"
            placeholder="设备名称"
            @search="searchDevices"
          />
          <button
            class="l-flex__none c-sibling-item o-button"
            @click="searchDevices"
          >
            搜索
          </button>
        </template>
        <el-table-column
          prop="name"
          label="设备名称"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="productName"
          label="产品"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="serialNumber"
          label="序列号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mac"
          label="MAC"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="resolutionRatio"
          label="分辨率"
          align="center"
          width="120"
        />
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          show-overflow-tooltip
        />
      </c-table>
    </el-dialog>
  </wrapper>
</template>

<script>
import {
  getDeviceGroups,
  addDeviceGroup,
  updateDeviceGroup,
  deleteDeviceGroup,
  getDevicesByGroup,
  getDevices,
  addDeviceToGroup,
  deleteDeviceFromGroup
} from '@/api/device'
import { createListOptions } from '@/utils'
import mixin from '../mixins'

export default {
  name: 'DeviceGroup',
  mixins: [mixin],
  data () {
    return {
      type: '分组',
      proxy: {
        list: getDeviceGroups,
        add: addDeviceGroup,
        update: updateDeviceGroup,
        del: deleteDeviceGroup
      },
      options: createListOptions({ name: '' }),
      showGroupDevices: false,
      groupOptions: {
        list: [],
        loading: false,
        error: false
      },
      showDevices: false,
      deviceOptions: createListOptions()
    }
  },
  created () {
    this.getList()
  },
  methods: {
    onSave (done) {
      if (!this.currObj.name) {
        this.$message({
          type: 'warning',
          message: '名称不能为空'
        })
        return false
      }
      this.save(done)
    },
    afterAdd () {
      const params = this.options.params
      if (params.name && !(new RegExp(params.name).test(this.currObj.name))) {
        params.name = ''
      }
    },
    onViewDevices ({ id }) {
      this.groupOptions = {
        id,
        list: [],
        loading: false,
        error: false
      }
      this.getDevicesByGroup()
      this.showGroupDevices = true
    },
    getDevicesByGroup () {
      const options = this.groupOptions
      options.error = false
      options.loading = true
      getDevicesByGroup(options.id).then(({ data, totalCount }) => {
        options.list = data
      }, () => {
        options.error = true
        options.list = []
      }).finally(() => {
        options.loading = false
      })
    },
    delDeviceFromGroup (device, index) {
      const options = this.groupOptions
      deleteDeviceFromGroup(options.id, device).then(() => {
        options.list.splice(index, 1)
      })
    },
    onDevice () {
      this.getDevices()
      this.showDevices = true
    },
    searchDevices () {
      this.deviceOptions.list = []
      this.deviceOptions.totalCount = 0
      this.deviceOptions.params.pageNum = 1
      this.getDevices()
    },
    getDevices () {
      const options = this.deviceOptions
      options.error = false
      options.loading = true
      getDevices(options.params).then(({ data, totalCount }) => {
        options.list = data
        options.totalCount = totalCount
      }, () => {
        options.error = true
        options.list = []
      }).finally(() => {
        options.loading = false
      })
    },
    chooseDevice (item) {
      addDeviceToGroup(this.groupOptions.id, item.id).then(() => {
        this.groupOptions.list = []
        this.getDevicesByGroup()
        this.showDevices = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>