smsb-web-develop/src/views/external/box/components/Device.vue

<template>
  <schema-table
    ref="table"
    row-key="id"
    :schema="schema"
  >
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onSave"
    >
      <template #default>
        <div class="c-grid-form u-align-self--center">
          <span class="c-grid-form__label u-required">名称</span>
          <el-input
            v-model.trim="currObj.name"
            placeholder="最多30个字符"
            maxlength="30"
            clearable
          />
          <span class="c-grid-form__label u-required">配置</span>
          <schema-select
            v-model="currObj.productId"
            class="u-width"
            :schema="productSelectSchema"
            placeholder="请选择配置"
          />
          <span class="c-grid-form__label u-required">型号</span>
          <el-autocomplete
            v-model="currObj.remark"
            class="u-width"
            :fetch-suggestions="querySearch"
            placeholder="播控器的系列或型号"
          />
          <span class="c-grid-form__label u-required">序列号</span>
          <el-input
            v-model.trim="currObj.serialNumber"
            placeholder="最多50个字符"
            maxlength="50"
            clearable
          />
          <span class="c-grid-form__label u-required">MAC</span>
          <el-input
            v-model.trim="currObj.mac"
            class="u-width"
            placeholder="ff:ff:ff:ff:ff:ff"
            maxlength="17"
            clearable
          />
          <div class="c-grid-form__label u-required">开关机时间</div>
          <el-time-picker
            v-model="currObj.range"
            class="u-width u-pointer"
            is-range
            value-format="HH:mm:ss"
            :clearable="false"
          />
          <span class="c-grid-form__label u-required">地址</span>
          <el-input
            v-model.trim="currObj.address"
            type="textarea"
            placeholder="最多100个字符"
            maxlength="100"
            :rows="2"
            show-word-limit
          />
          <span class="c-grid-form__label">坐标</span>
          <div class="l-flex--row c-grid-form__option">
            <span class="c-sibling-item">{{ currObj.longitude }},{{ currObj.latitude }}</span>
            <i
              class="c-sibling-item el-icon-edit u-color--blue has-active"
              @click="onEditCoordinate"
            />
          </div>
        </div>
      </template>
    </confirm-dialog>
    <coordinate-dialog
      ref="coordinateDialog"
      @confirm="onChangeCoordinate"
    />
    <mesh-dialog ref="meshDialog" />
    <confirm-dialog
      ref="replaceDialog"
      title="设备替换"
      @confirm="onConfirmReplace"
    >
      <template #default>
        <div class="c-grid-form u-align-self--center">
          <span class="c-grid-form__label u-required">序列号</span>
          <el-input
            v-model.trim="currObj.serialNumber"
            placeholder="最多50个字符"
            maxlength="50"
            clearable
          />
          <span class="c-grid-form__label u-required">MAC</span>
          <el-input
            v-model.trim="currObj.mac"
            class="u-width"
            placeholder="ff:ff:ff:ff:ff:ff"
            maxlength="17"
            clearable
          />
          <span class="c-grid-form__label">配置</span>
          <schema-select
            ref="productSelect"
            v-model="currObj.productId"
            class="u-width"
            :schema="replaceProductSelectSchema"
          />
        </div>
      </template>
    </confirm-dialog>
  </schema-table>
</template>

<script>
import { BoxModels } from '@/constant'
import {
  validMAC,
  validLongitude,
  validLatitude
} from '@/utils/validate'
import {
  getDevicesByTenant,
  addDevice,
  deleteDevice,
  getSubDevices,
  addSubDevice,
  activateDevice,
  deactivateDevice,
  getProducts,
  updateDevice,
  replaceDevice
} from '@/api/device'
import MeshDialog from '../../components/MeshDialog.vue'

export default {
  name: 'Device',
  components: {
    MeshDialog
  },
  props: {
    tenant: {
      type: String,
      required: true
    }
  },
  data () {
    const productSelectSchema = {
      remote: this.getProducts,
      pagination: true,
      value: 'id',
      label: 'name'
    }

    return {
      currObj: {},
      isSub: false,
      productSelectSchema,
      replaceProductSelectSchema: {
        ...productSelectSchema,
        placeholder: '不选择时使用原配置'
      },
      schema: {
        keepalive: true,
        props: {
          size: 'small'
        },
        // listeners: {
        //   'row-click': __SUB_DEVICE__ ? this.onRowClick : null
        // },
        list: this.getDevicesByTenant,
        transform: this.transform,
        // transformData: __SUB_DEVICE__ && this.transformTableData,
        buttons: [
          { type: 'add', on: this.onAddDevice }
        ],
        filters: [
          { key: 'productId', type: 'select', placeholder: '配置', ...productSelectSchema },
          { key: 'boundFlag', type: 'select', placeholder: '使用情况', options: [
            { value: 1, label: '已使用' },
            { value: 0, label: '未使用' }
          ] },
          { key: 'serialNumber', type: 'search', placeholder: '序列号' },
          { key: 'mac', type: 'search', placeholder: 'MAC' },
          { key: 'name', type: 'search', placeholder: '设备名称' },
          { type: 'refresh' }
        ],
        cols: [
          // { type: 'refresh', render: __SUB_DEVICE__
          //   ? (data, h) => data.isMaster
          //     ? h('i', {
          //       staticClass: `o-expand-icon u-pointer ${data.loading ? 'el-icon-loading' : 'el-icon-arrow-right'}`,
          //       class: { expand: data.expand }
          //     })
          //     : null
          //   : null },
          // __SUB_DEVICE__
          //   ? { label: '设备名称', render: (data, h) => data.empty ? h('span', { staticClass: 'u-color--info' }, '暂无备份设备') : data.name, 'min-width': 120 }
          //   : { prop: 'name', label: '设备名称', 'min-width': 120 },
          { type: 'refresh' },
          { prop: 'name', label: '设备名称', 'min-width': 120 },
          { label: '型号', render: (data, h) => data.empty
            ? ''
            : h('edit-input', {
              props: {
                value: data.remark,
                placeholder: '-'
              },
              on: { edit: val => this.onEditRemark(data, val) }
            }), 'class-name': 'c-edit-column' },
          { prop: 'productName', label: '配置' },
          { prop: 'serialNumber', label: '序列号', 'min-width': 160 },
          { prop: 'mac', label: 'MAC', 'min-width': 120 },
          { type: 'tag', render: ({ empty, activate, onlineStatus }) => empty
            ? null
            : activate
              ? onlineStatus === 0
                ? { type: 'primary', label: '待接入' }
                : onlineStatus === 1
                  ? { type: 'success', label: '在线' }
                  : { type: 'danger', label: '离线' }
              : { type: 'warning', label: '未激活' },
            'size': 'sm', width: 80, on: this.onTagClick },
          { label: '使用情况', type: 'tag', render: ({ empty, isMaster, bound }) => empty || !isMaster
            ? null
            : bound
              ? { type: 'success', label: '已使用' }
              : { type: 'primary', label: '未使用', ignore: true }, 'size': 'sm', width: 80, on: this.onViewMesh },
          { type: 'invoke', render: [
            { label: '配置', render: ({ isMaster }) => isMaster, on: this.onSettingDevice },
            { label: '替换', render: ({ isMaster }) => isMaster, on: this.onReplace },
            // __SUB_DEVICE__ && { label: '备机', render: ({ isMaster }) => isMaster, on: this.onAddSubDevice },
            { label: '删除', render: ({ empty }) => !empty, on: this.onDelDevice }
          ], width: 140 }
        ]
      }
    }
  },
  computed: {
    dialogTitle () {
      return this.isSub ? '新增备份设备' : '新增设备'
    }
  },
  methods: {
    querySearch (val, cb) {
      cb(val ? [] : [...BoxModels])
    },
    getProducts (params) {
      return getProducts({
        tenant: this.tenant,
        ...params
      })
    },
    getDevicesByTenant (params) {
      return getDevicesByTenant(this.tenant, params)
    },
    transform (data) {
      return {
        ...data,
        loaded: false,
        loading: false,
        expand: false,
        subs: [],
        isMaster: true
      }
    },
    transformTableData (data) {
      const arr = []
      data.forEach(item => {
        arr.push(item)
        if (item.loaded && item.expand) {
          arr.push(...item.subs)
        }
      })
      return arr
    },
    onAddDevice () {
      this.isSub = false
      this.$master = null
      this.productSelectSchema.option = null
      this.onAdd()
    },
    onAddSubDevice (item) {
      this.isSub = true
      this.$master = item
      this.productSelectSchema.option = { value: item.productId, label: item.productName }
      this.onAdd()
    },
    onAdd () {
      if (this.isSub) {
        const { productId, openTime, closeTime, address, longitude, latitude } = this.$master
        this.currObj = {
          name: '',
          remark: '',
          productId,
          serialNumber: '',
          mac: '',
          range: [openTime, closeTime],
          address,
          longitude,
          latitude,
          tenant: this.tenant
        }
      } else {
        this.currObj = {
          name: '',
          remark: '',
          productId: '',
          serialNumber: '',
          mac: '',
          range: ['08:00:00', '22:00:00'],
          address: '',
          longitude: '',
          latitude: '',
          tenant: this.tenant
        }
      }
      this.$refs.editDialog.show()
    },
    onEditCoordinate () {
      const { longitude, latitude, address } = this.currObj
      this.$refs.coordinateDialog.show({
        longitude,
        latitude,
        address
      })
    },
    onChangeCoordinate ({ value: { longitude, latitude, address }, done }) {
      this.currObj.longitude = longitude
      this.currObj.latitude = latitude
      this.currObj.address = address
      done()
    },
    onSave (done) {
      if (this.check(this.currObj)) {
        const { mac, range, ...data } = this.currObj
        if (this.isSub) {
          addSubDevice(this.$master, {
            openTime: range[0],
            closeTime: range[1],
            mac: mac.toLowerCase(),
            ...data
          }).then(() => {
            done()
            this.reloadSubDevices(this.$master)
          })
        } else {
          addDevice({
            openTime: range[0],
            closeTime: range[1],
            mac: mac.toLowerCase(),
            ...data
          }).then(() => {
            done()
            this.$refs.table.resetCondition({
              boundFlag: 0,
              name: this.currObj.name,
              productId: this.currObj.productId,
              serialNumber: this.currObj.serialNumber,
              mac: mac.toLowerCase()
            })
          })
        }
      }
    },
    check (item) {
      if (!item.name) {
        this.$message({
          type: 'warning',
          message: '名称不能为空'
        })
        return false
      }
      if (!item.productId) {
        this.$message({
          type: 'warning',
          message: '请选择配置'
        })
        return false
      }
      if (!item.serialNumber) {
        this.$message({
          type: 'warning',
          message: '序列号不能为空'
        })
        return false
      }
      if (!item.mac) {
        this.$message({
          type: 'warning',
          message: 'MAC不能为空'
        })
        return false
      }
      if (!validMAC(item.mac)) {
        this.$message({
          type: 'warning',
          message: 'MAC格式不正确，例 ff:ff:ff:ff:ff:ff'
        })
        return false
      }
      if (!item.range || !item.range[0] || !item.range[1]) {
        this.$message({
          type: 'warning',
          message: '请选择开关机时间'
        })
        return false
      }
      if (item.range[0] >= item.range[1]) {
        this.$message({
          type: 'warning',
          message: '开机时间必须小于关机时间'
        })
        return false
      }
      if (!item.address) {
        this.$message({
          type: 'warning',
          message: '地址不能为空'
        })
        return false
      }
      if (item.longitude && !validLongitude(item.longitude)) {
        this.$message({
          type: 'warning',
          message: '经度格式错误，-180 ~ +180'
        })
        return false
      }
      if (item.latitude && !validLatitude(item.latitude)) {
        this.$message({
          type: 'warning',
          message: '纬度格式错误，-90 ~ +90'
        })
        return false
      }
      return true
    },
    onViewDevice (item) {
      this.$router.push({
        name: 'device-management-detail',
        params: {
          id: item.id
        }
      })
    },
    onDelDevice (item) {
      deleteDevice(item).then(() => {
        if (item.isMaster) {
          this.$refs.table.decrease(1)
        } else {
          this.reloadSubDevices(item.parent)
        }
      })
    },
    reloadSubDevices (item) {
      item.loaded = false
      item.children = []
      this.getSubDevices(item)
    },
    getSubDevices (item, pageSize = 999) {
      item.loading = true
      getSubDevices({
        id: item.id,
        pageNum: 1,
        pageSize
      }).then(({ data, totalCount }) => {
        if (totalCount > pageSize) {
          this.getSubDevices(item, totalCount)
        } else {
          item.loading = false
          item.loaded = true
          item.expand = true
          if (data.length === 0) {
            item.subs = [{ id: `${Math.random()}`, empty: true }]
          } else {
            item.subs = data.map(device => {
              return {
                ...device,
                isMaster: false,
                empty: false,
                parent: item
              }
            })
          }
        }
      }, () => {
        item.loading = false
      })
    },
    onRowClick (data) {
      if (__SUB_DEVICE__ && data.isMaster) {
        if (data.loaded) {
          data.expand = !data.expand
        } else if (!data.loading) {
          this.getSubDevices(data)
        }
      }
    },
    onTagClick (data) {
      (data.activate ? deactivateDevice : activateDevice)(data).then(() => {
        if (data.isMaster) {
          this.$refs.table.pageTo()
        } else {
          this.reloadSubDevices(data.parent)
        }
      })
    },
    onSettingDevice ({ id }) {
      this.$router.push({
        name: 'box-settings',
        params: { id }
      })
    },
    onViewMesh ({ id, bound }) {
      if (bound) {
        this.$refs.meshDialog.show(id)
      }
    },
    onEditRemark (device, { newVal, oldVal }) {
      if (newVal === oldVal) {
        return
      }
      device.remark = newVal
      updateDevice({
        id: device.id,
        remark: newVal
      }).catch(() => {
        device.remark = oldVal
      })
    },
    onReplace (device) {
      this.$device = device
      this.currObj = {
        serialNumber: '',
        mac: '',
        productId: ''
      }
      this.$refs.replaceDialog.show()
    },
    onConfirmReplace (done) {
      const { serialNumber, mac, productId } = this.currObj
      if (!serialNumber) {
        this.$message({
          type: 'warning',
          message: '序列号不能为空'
        })
        return
      }
      if (!mac) {
        this.$message({
          type: 'warning',
          message: 'MAC不能为空'
        })
        return
      }
      if (!validMAC(mac)) {
        this.$message({
          type: 'warning',
          message: 'MAC格式不正确，例 ff:ff:ff:ff:ff:ff'
        })
        return
      }
      const realMac = mac.toLowerCase()
      if (serialNumber === this.$device.serialNumber && realMac === this.$device.mac) {
        this.$message({
          type: 'warning',
          message: '序列号与MAC不能均与原数据一致'
        })
        return
      }
      const productName = productId ? this.$refs.productSelect.getOptions().find(({ value }) => value === productId).label : ''
      replaceDevice(this.$device.id, { serialNumber, mac: realMac, productId }).then(() => {
        this.$device.serialNumber = serialNumber
        this.$device.mac = realMac
        if (productId) {
          this.$device.productId = productId
          this.$device.productName = productName
        }
        this.$device = null
        done()
      })
    }
  }
}
</script>