smsb-web-develop/src/views/external/multifunction-card/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <confirm-dialog
      ref="editDialog"
      title="新增多功能卡"
      @confirm="onConfirm"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label u-required">厂商</span>
        <schema-select
          ref="manufacturer"
          v-model="item.manufacturerKey"
          class="u-width"
          placeholder="请选择厂商"
          :schema="manufacturerSelectSchema"
        />
        <span class="c-grid-form__label u-required">型号</span>
        <el-input
          v-model.trim="item.model"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label">端口数</span>
        <el-input-number
          v-model="item.portCount"
          :min="0"
          :max="86400"
          step-strictly
        />
        <span class="c-grid-form__label">485接口数</span>
        <el-input-number
          v-model="item.rs485Count"
          :min="0"
          :max="86400"
          step-strictly
        />
        <span class="c-grid-form__label u-required">唯一标识</span>
        <el-input
          v-model.trim="item.identifier"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
      </div>
    </confirm-dialog>
    <mesh-dialog ref="meshDialog" />
  </wrapper>
</template>

<script>
import { ThirdPartyDevice } from '@/constant'
import {
  getManufacturersByType,
  getMultifunctionCards,
  addMultifunctionCard,
  deleteMultifunctionCard
} from '@/api/external'
import MeshDialog from '../components/MeshDialog.vue'

export default {
  name: 'MultifunctionCardList',
  components: {
    MeshDialog
  },
  data () {
    const manufacturerSelectSchema = {
      remote: this.getManufacturersByType,
      value: 'manufacturerKey',
      label: 'manufacturerName'
    }

    return {
      item: {},
      manufacturerSelectSchema,
      schema: {
        list: getMultifunctionCards,
        buttons: [
          { type: 'add', on: this.onAdd }
        ],
        filters: [
          { key: 'manufacturerKey', type: 'select', placeholder: '厂商', ...manufacturerSelectSchema },
          { key: 'boundFlag', type: 'select', placeholder: '使用情况', options: [
            { value: 0, label: '已使用' },
            { value: 1, label: '未使用' }
          ] },
          { key: 'identifier', type: 'search', placeholder: '唯一标识' }
        ],
        cols: [
          { prop: 'manufacturerName', label: '厂商' },
          { prop: 'model', label: '型号' },
          { prop: 'identifier', label: '唯一标识' },
          { prop: 'portCount', label: '端口数', align: 'center' },
          { prop: 'rs485Count', label: '485接口数', align: 'center' },
          { label: '使用情况', type: 'tag', render: ({ bound }) => bound
            ? { type: 'success', label: '已使用' }
            : { type: 'primary', label: '未使用' } },
          { type: 'invoke', render: [
            { label: '所属网点', allow: ({ bound }) => bound, on: this.onViewMesh },
            { label: '删除', allow: ({ bound }) => !bound, on: this.onDel }
          ], width: 200 }
        ]
      }
    }
  },
  methods: {
    getManufacturersByType () {
      return getManufacturersByType(ThirdPartyDevice.MULTI_FUNCTION_CARD)
    },
    onAdd () {
      this.item = {
        identifier: '',
        manufacturerKey: '',
        model: '',
        portCount: 0,
        rs485Count: 0
      }
      this.$refs.editDialog.show()
    },
    onConfirm (done) {
      if (!this.item.manufacturerKey) {
        this.$message({
          type: 'warning',
          message: '请选择厂商'
        })
        return
      }
      if (!this.item.model) {
        this.$message({
          type: 'warning',
          message: '请填写型号'
        })
        return
      }
      if (!this.item.identifier) {
        this.$message({
          type: 'warning',
          message: '请填写唯一标识'
        })
        return
      }
      const key = this.item.manufacturerKey
      addMultifunctionCard({
        manufacturerName: this.$refs.manufacturer.getOptions().find(({ value }) => value === key).label,
        ...this.item
      }).then(() => {
        done()
        this.$refs.table.resetCondition({
          manufacturerKey: key,
          identifier: this.item.identifier
        })
      })
    },
    onDel (item) {
      deleteMultifunctionCard(item).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onViewMesh ({ id }) {
      this.$refs.meshDialog.show(id)
    }
  }
}
</script>