EdgeManager/src/views/scada/scadaConfigure/index.vue

<template>
  <d2-container>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      :rowHandle="rowHandle"
      add-title="新增节点"
      edit-title="修改节点信息"
      :add-template="addTemplate"
      :edit-template="editTemplate"
      :form-options="formOptions"
      :add-rules="addRules"
      @row-add="handleRowAdd"
      @row-edit="handleRowEdit"
      @row-remove="handleRowRemove"
      @dialog-cancel="handleDialogCancel">
      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
    </d2-crud>
  </d2-container>
</template>

<script>
import { assign, each, pick, pickBy, startsWith } from 'lodash'

export default {
  data () {
    return {
      columns: [
        {
          title: '序号',
          key: 'id'
        },
        {
          title: '节点编码',
          key: 'code'
        },
        {
          title: '节点名称',
          key: 'name'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '流程',
          key: 'flow_code'
        },
        {
          title: '工序单元',
          key: 'working_subclass'
        },
        {
          title: '工作站',
          key: 'workstation'
        },
        {
          title: '创建时间',
          key: 'create_date'
        },
        {
          title: '备注',
          key: 'note'
        }
      ],
      data: [],
      rowHandle: {
        minWidth: '200',
        edit: {
          icon: 'el-icon-edit',
          text: '编辑',
          size: 'small',
          show (index, row) {
            if (row.showEditButton) {
              return true
            }
            return false
          }
        },
        remove: {
          icon: 'el-icon-delete',
          size: 'small',
          fixed: 'right',
          confirm: true,
          show (index, row) {
            if (row.showRemoveButton) {
              return true
            }
            return false
          }
        }
      },
      addTemplate: {
        code: {
          title: '节点编码'
        },
        name: {
          title: '节点名称'
        },
        type: {
          title: '类型',
          value: '',
          component: {
            name: 'el-select',
            options: [
              {
                value: 'string',
                label: 'string (字符串)'
              },
              {
                value: 'int',
                label: 'int (整数)'
              },
              {
                value: 'float',
                label: 'float (浮点数)'
              },
              {
                value: 'bool',
                label: 'bool (逻辑值)'
              }
            ],
            span: 12
          }
        },
        flow_code: {
          title: '流程'
        },
        working_subclass: {
          title: '工序单元'
        },
        workstation: {
          title: '工作站'
        },
        note: {
          title: '备注'
        }
      },
      editTemplate: {
        name: {
          title: '节点名称'
        },
        flow_code: {
          title: '流程'
        },
        workstation: {
          title: '工作站'
        },
        note: {
          title: '备注'
        }
      },
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      },
      addRules: {
        code: [{ required: true, type: 'string', message: '节点编码必须填写', trigger: 'blur' }],
        name: [{ required: true, type: 'string', message: '节点名称必须填写', trigger: 'blur' }],
        type: [{ required: true, message: '必须指定节点类型', trigger: 'blur' }],
        working_subclass: [{
          required: true,
          type: 'string',
          message: '工序单元必须填写',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    async getNodes () {
      try {
        const res = await this.$api.QUERY_NODE()
        this.data = each(res, (o) => (
          assign(o, {
            showEditButton: true,
            showRemoveButton: true
          })
        ))
      } catch (e) {
        console.log(e)
      }
    },
    // 普通的新增
    addRow () {
      this.$refs.d2Crud.showDialog({
        mode: 'add'
      })
    },
    async handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      try {
        await this.$api.ADD_NODE(assign(row, { action: 'add_node' }))
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      } catch (e) {
        console.log(e)
      }
      this.getNodes()
      done()
      this.formOptions.saveLoading = false
    },
    async handleRowEdit ({ index, row }, done) {
      this.formOptions.saveLoading = true
      await this.$api.UPDATE_NODE(assign(pickBy(row, (v, k) => (!startsWith(k, 'show'))), { action: 'update_node' }))
      this.$message({
        message: '编辑成功',
        type: 'success'
      })
      done()
      this.formOptions.saveLoading = false
    },
    async handleRowRemove ({ index, row }, done) {
      await this.$api.REMOVE_NODE(assign(pick(row, ['code', 'working_subclass']), { action: 'remove_node' }))
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      done()
    },
    handleDialogCancel (done) {
      this.$message({
        message: '用户放弃改动',
        type: 'warning'
      })
      done()
    }
  },
  mounted () {
    this.getNodes()
  }
}
</script>