smsb-web-develop/src/views/external/gateway/PLC.vue

<template>
  <schema-table
    ref="table"
    :schema="schema"
  >
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      :append-to-body="true"
      @confirm="onConfirm"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label required">名称：</span>
        <el-input
          v-model.trim="plc.name"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label required">地址：</span>
        <el-input
          v-model.trim="plc.identifier"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label">备注：</span>
        <el-input
          v-model.trim="plc.remark"
          type="textarea"
          maxlength="100"
          :rows="3"
          show-word-limit
        />
      </div>
    </confirm-dialog>
  </schema-table>
</template>

<script>
import {
  getPLCs,
  addPLC,
  updatePLC,
  deletePLC
} from '@/api/external'

export default {
  name: 'PLCList',
  props: {
    gateway: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      plc: {},
      schema: {
        list: this.getPLCs,
        buttons: [
          { type: 'add', on: this.onAdd }
        ],
        cols: [
          { prop: 'name', label: '名称' },
          { prop: 'identifier', label: '地址' },
          { prop: 'remark', label: '备注' },
          { type: 'invoke', render: [
            { label: '编辑', on: this.onEdit },
            { label: '删除', on: this.onDel }
          ] }
        ]
      }
    }
  },
  computed: {
    dialogTitle () {
      return this.plc.id ? '编辑PLC' : '新增PLC'
    }
  },
  methods: {
    getPLCs (params) {
      return getPLCs({
        gatewayId: this.gateway.id,
        ...params
      })
    },
    onAdd () {
      this.plc = {
        name: '',
        identifier: '',
        remark: ''
      }
      this.$refs.editDialog.show()
    },
    onEdit ({ id, name, identifier, remark }) {
      this.plc = { id, name, identifier, remark }
      this.$refs.editDialog.show()
    },
    onConfirm (done) {
      if (!this.plc.name) {
        this.$message({
          type: 'warning',
          message: '请填写PLC名称'
        })
        return
      }
      if (!this.plc.identifier) {
        this.$message({
          type: 'warning',
          message: '请填写PLC标识'
        })
        return
      }
      if (this.plc.id) {
        this.onConfirmEdit(this.plc, done)
      } else {
        this.onConfirmAdd(this.plc, done)
      }
    },
    onConfirmAdd (plc, done) {
      addPLC({
        gatewayId: this.gateway.id,
        ...plc
      }).then(() => {
        done()
        this.$refs.table.resetCondition()
      })
    },
    onConfirmEdit (plc, done) {
      updatePLC(plc).then(() => {
        done()
        this.$refs.table.pageTo()
      })
    },
    onDel (plc) {
      deletePLC(plc).then(() => {
        this.$refs.table.decrease(1)
      })
    }
  }
}
</script>