hitch-sb-antd/src/views/remote/opc/modules/BaseForm.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="ant-modal2"
    @cancel="handleCancel"
  >
    <a-row :gutter="48" slot="footer">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button style="margin-right: 8px" type="default" @click="handleCancel()">返回</a-button>
          <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
        </span>
      </a-col>
    </a-row>
    <a-form :form="form">

      <a-form-item v-show="false">
        <a-input v-decorator="['id']" type="hidden"/>
        <a-input v-decorator="['sbId']" type="hidden"/>
        <a-input v-decorator="['warnFirstColor']" type="hidden"/>
        <a-input v-decorator="['warnSecondColor']" type="hidden"/>
        <a-input v-decorator="['warnThirdColor']" type="hidden"/>
        <a-input v-decorator="['warnFourColor']" type="hidden"/>
      </a-form-item>

      <row-list :col="2">
        <row-item>
          <a-form-item
            label="车间位置"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-tree-select
              style="width: 100%"
              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
              :treeData="treeData"
              :treeNodeFilterProp="'title'"
              :showSearch="true"
              v-decorator="['line', {rules: [{required: false, message: '车间位置不能为空'}]}]"
              placeholder="请选择"
            >
            </a-tree-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="点位名称"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['sbName', {rules: [{required: true, message: '点位名称不能为空'}]}]" />
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="点位"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
            :help="isExisting?'该点位已存在':''"
          >
            <a-input
              @blur="checkPoint"
              v-decorator="['description', {rules: [{required: true, message: '描述不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="OPC实际点位"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              style="width: 60%"
              v-decorator="['positionNum', {rules: [{required: false, message: '点位不能为空'}]}]"/>
            <a-button type="primary" style="width: 20%" @click="handleAddGroup">采集</a-button>
            <a-button type="default" style="width: 20%" @click="handleDelGroup">终止</a-button>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="类型"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['type', {initialValue:1, rules: [{required: true, message: '类型不能为空'}]}]" placeholder="请选择" @change="changeType">
              <a-select-option
                v-for="(label,value) in map"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="是否模拟量"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['avFlag', {initialValue:1, rules: [{required: true, message: '是否模拟量不能为空'}]}]" placeholder="请选择">
              <a-select-option
                v-for="(label,value) in yesNoMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="opc服务器上是否已经创建"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['createdFlag', {initialValue:1, rules: [{required: true, message: 'opc服务器上是否已经创建不能为空'}]}]" placeholder="请选择">
              <a-select-option
                v-for="(label,value) in yesNoMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="opc页面是否已经配置位置"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['positionFlag', {initialValue:1, rules: [{required: true, message: 'opc页面是否已经配置位置不能为空'}]}]" placeholder="请选择">
              <a-select-option
                v-for="(label,value) in yesNoMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="是否重要点位"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['portFlag', {initialValue:0, rules: [{required: true, message: '是否重要点位不能为空'}]}]" placeholder="请选择">
              <a-select-option
                v-for="(label,value) in yesNoMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="x轴位置"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['xposition', {initialValue:50, rules: [{required: true, message: 'x轴位置不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="y轴位置"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['yposition', {initialValue:50, rules: [{required: true, message: 'y轴位置不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="位置宽度"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['width', {initialValue:60, rules: [{required: true, message: '位置宽度不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="位置高度"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['height', {initialValue:20, rules: [{ required: true, message: '位置高度不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <!--        <row-item>

          <a-form-item
            label="实时数值"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['result', {rules: [{required: false, message: '实时数值不能为空'}]}]"/>
          </a-form-item>
        </row-item>-->
        <row-item v-if="type!==1">

          <a-form-item
            label="图片x轴位置"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['imgXPosition', {initialValue:50, rules: [{required: true, message: '图片x轴位置不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item v-if="type!==1">

          <a-form-item
            label="图片y轴位置"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['imgYPosition', {initialValue:100, rules: [{required: true, message: '图片y轴位置不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="最低阈值"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 73%"
              :min="0.01"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['warnFirst', {rules: [{required: false, message: '最低阈值不能为空'}]}]"/>
            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnFirstColor" @click="handleSelectColor('warnFirstColor')">
              选择颜色
            </a-tag>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="低阈值"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 73%"
              :min="0.01"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['warnSecond', {rules: [{required: false, message: '低阈值不能为空'}]}]"/>
            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnSecondColor" @click="handleSelectColor('warnSecondColor')">
              选择颜色
            </a-tag>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="高阈值"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 73%"
              :min="0.01"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['warnThird', {rules: [{required: false, message: '高阈值不能为空'}]}]"/>
            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnThirdColor" @click="handleSelectColor('warnThirdColor')">
              选择颜色
            </a-tag>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="最高阈值"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 73%"
              :min="0.01"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['warnFour', {rules: [{required: false, message: '最高阈值不能为空'}]}]"/>
            <a-tag style="line-height:30px;margin-left: 10px;" :color="colors.warnFourColor" @click="handleSelectColor('warnFourColor')">
              选择颜色
            </a-tag>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="量程上限"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 100%"
              :min="0"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['high', {initialValue:100,rules: [{required: false, message: '量程上限不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="量程下限"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 100%"
              :min="0"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['low', {initialValue:0,rules: [{required: false, message: '量程下限不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="系数"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input-number
              style="width: 100%"
              :min="0"
              :formatter="BaseTool.Amount.formatter"
              :parser="BaseTool.Amount.parser"
              v-decorator="['ratio', {rules: [{required: false, message: '系数不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="单位"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['unit', {initialValue:'kPaT',rules: [{required: true, message: '单位不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="备注"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['remark', {rules: [{required: false, message: '备注不能为空'}]}]"/>
          </a-form-item>
        </row-item>
      </row-list>
    </a-form>
    <sb-info-select-modal ref="sbInfoSelectModal" @selected="handleSbSelectd"/>
    <ColorModal ref="colorModal" @selected="handleColor"/>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import {
  addRemoteOpc,
  addRemoteOpcGroup,
  delRemoteOpcGroup,
  updateRemoteOpc,
  fetchRemoteOpcByPositionNumAndLine,
  fetchRemoteOpc
} from '@/api/remote/opc'
import SbInfoSelectModal from '@/views/sb/info/modules/SbInfoSelectModal'
import { getSbPositionTree } from '@/api/sb/position'
import ColorModal from './ColorModal'
export default {
  name: 'BaseRemoteOpc',
  components: {
    SbInfoSelectModal,
    ColorModal
  },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      map: {},
      treeData: [],
      yesNoMap: {},
      form: this.$form.createForm(this),
      visible: false,
      type: 1,
      isExisting: false,
      position: {},
      color: '',
      colors: {
        warnFourColor: '#B71C1C',
        warnThirdColor: '#F57F17',
        warnSecondColor: '#F57F17',
        warnFirstColor: '#B71C1C'
      }
    }
  },
  props: {},
  created () {
    // 下拉框map
    this.map = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REMOTE_OPC)
    this.yesNoMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YES_NO)
    getSbPositionTree({ opcFlag: 1 }).then(res => {
      this.treeData = res.data
    })
  },
  methods: {
    base (record, position) {
      this.visible = true
      const { form: { setFieldsValue } } = this
      this.position = position
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record.id)) {
        this.modalTitle = '添加'
        this.$nextTick(() => {
          setFieldsValue(Object.assign(pick(record, [
            'line'
          ]),
          pick(position, [
            'xposition',
            'yposition',
            'imgXPosition',
            'imgYPosition'
          ])
          ))
        })
        return
      }
      this.modalTitle = '编辑'
      this.type = record.type
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'sbId',
          'sbName',
          'positionNum',
          'type',
          'line',
          'description',
          'result',
          'ratio',
          'low',
          'high',
          'warnFirst',
          'warnSecond',
          'warnThird',
          'warnFour',
          'warnFirstColor',
          'warnSecondColor',
          'warnThirdColor',
          'warnFourColor',
          'xposition',
          'yposition',
          'imgXPosition',
          'imgYPosition',
          'width',
          'height',
          'unit',
          'avFlag',
          'portFlag',
          'createdFlag',
          'positionFlag',
          'remark'
        ])))
      })
    },
    handleAddGroup () {
      const { form: { getFieldValue } } = this
      const id = getFieldValue('id')
      if (id == null || id === '') {
        this.$message.error('请先保存点位信息')
        return
      }
      fetchRemoteOpc({ id: id }).then(res => {
        if (res.data.positionNum == null || res.data.positionNum === '') {
          this.$message.error('请设置点位')
          return
        }
        addRemoteOpcGroup(res.data.positionNum)
          .then((res) => {
            this.$message.info(res.data)
          }).catch(() => {
            this.confirmLoading = false
          })
      })
    },
    handleDelGroup () {
      const { form: { getFieldValue } } = this
      const id = getFieldValue('id')
      if (id == null || id === '') {
        this.$message.error('请先保存点位信息')
        return
      }
      fetchRemoteOpc({ id: id }).then(res => {
        if (res.data.positionNum == null || res.data.positionNum === '') {
          this.$message.error('请设置点位')
          return
        }
        delRemoteOpcGroup(res.data.positionNum)
          .then((res) => {
            this.$message.info(res.data)
          }).catch(() => {
            this.confirmLoading = false
          })
      })
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        // 日期处理
        const params = {
          ...values,
          ...this.colors
        }
        if (this.BaseTool.String.isBlank(params.id)) {
          addRemoteOpc(params)
            .then(() => {
              this.handleCancel(params)
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          console.log('..........................')
          updateRemoteOpc(params)
            .then(() => {
              this.handleCancel(params)
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleSbSelect () {
      this.$refs.sbInfoSelectModal.base()
    },
    changeType (val) {
      this.type = val
    },
    handleSbSelectd (keys, rows) {
      const [ key ] = keys
      const [ row ] = rows
      const { form: { setFieldsValue } } = this
      this.sbId = key
      // 日期处理
      console.log(keys, rows)
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'sbId': key,
          'sbName': row.name
        }))
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.isExisting = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      } else {
        this.$emit('ok')
      }
    },
    handleSelectColor (type) {
      this.color = type
      this.$refs.colorModal.base(this.colors[this.color])
    },
    handleColor (value) {
      console.log(value)
      this.colors[this.color] = value
    },
    checkPoint (e) {
      const { form: { setFieldsValue, getFieldValue } } = this
      fetchRemoteOpcByPositionNumAndLine({
        positionNum: e.target.value,
        line: getFieldValue('line')
      }).then(res => {
        if (res.data === null) {
          this.isExisting = false
          this.modalTitle = '添加'
          // this.form.resetFields()
          return
        }
        this.modalTitle = '编辑'
        // 日期处理
        this.isExisting = true
        this.$nextTick(() => {
          setFieldsValue(Object.assign(pick(res.data, [
            'id',
            'sbId',
            'sbName',
            'positionNum',
            'type',
            'line',
            'description',
            'result',
            'ratio',
            'low',
            'high',
            'width',
            'height',
            'unit',
            'avFlag',
            'portFlag',
            'createdFlag',
            'positionFlag',
            'remark'
          ])))
        })
      })
    }
  }
}
</script>