Merge remote-tracking branch 'origin/master'

cuilei

5 天以前 ba77fdc6a30c9ad0941e40319f8c4f6fe6fdf9f1

 src/views/mdc/base/modules/DeviceParamThresholdManagement/ParamThresholdModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,252 @@
<template>
  <a-modal
    :title="title"
    :maskClosable="true"
    :width="modalWidth"
    @cancel="visible=false"
    :visible="visible">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules" :labelCol="labelCol"
                    :wrapperCol="wrapperCol">

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item prop="controlSystemType" label="驱动类型">
              <a-select v-model="model.controlSystemType" @change="handleDriveTypeChange"
                        placeholder="请选择驱动类型">
                <a-select-option v-for="(item,index) in driveTypeList" :key="index" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item prop="chineseName" label="参数">
              <a-select v-model="model.chineseName" placeholder="请选择参数">
                <a-select-option v-for="item in paramList" :key="item.value" :value="item.value">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">

          <a-col :span="12">
            <a-form-model-item prop="maxThreshold" label="阈值上限">
              <a-input-number v-model="model.maxThreshold" placeholder="请输入阈值上限" style="width: 100%"></a-input-number>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item prop="minThreshold" label="阈值下限">
              <a-input-number v-model="model.minThreshold" placeholder="请输入阈值下限" style="width: 100%"></a-input-number>
            </a-form-model-item>
          </a-col>

        </a-row>

      </a-form-model>
    </a-spin>


    <template slot="footer">
      <a-popconfirm title="确定放弃操作？" @confirm="visible=false" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </template>

  </a-modal>

</template>

<script>
  import pick from 'lodash.pick'
  import api from '@/api/mdc'

  export default {
    name: 'ParamThresholdModal',
    components: {},
    props: {
      driveTypeList: {
        type: Array
      }
    },
    data() {
      return {
        modalWidth: 700,
        form: this.$form.createForm(this),
        validatorRules: {
          controlSystemType: [
            {
              required: true, message: '请选择驱动类型'
            }
          ],
          chineseName: [
            {
              required: true, message: '请选择参数'
            }
          ],
          minThreshold: [
            {
              required: true, message: '请输入阈值上限'
            },
            {
              pattern: /^[0-9]+$/,
              message: '请输入阿拉伯数字'
            }
          ],
          maxThreshold: [
            {
              required: true, message: '请输入阈值下限'
            },
            {
              pattern: /^[0-9]+$/,
              message: '请输入阿拉伯数字'
            }
          ]
        },
        title: '操作',
        visible: false,
        model: {
          controlSystemType: '',
          chineseName: '',
          minThreshold: '',
          maxThreshold: ''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        confirmLoading: false,
        url: {
          userId: '/sys/user/generateUserId' // å¼•å…¥ç”Ÿæˆæ·»åŠ ç”¨æˆ·æƒ…况下的url
        },
        paramList: []
      }
    },
    created() {

    },
    methods: {
      add() {
        this.visible = true
        this.model = {
          controlSystemType: this.driveTypeList[0],
          chineseName: '',
          minThreshold: '',
          maxThreshold: ''
        }
        console.log('driveType',this.driveTypeList)
        this.handleDriveTypeChange(this.driveTypeList[0])
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'controlSystemType', 'chineseName', 'minThreshold', 'maxThreshold'))
        })
      },

      edit(record) {
        this.visible = true
        this.model = Object.assign({}, record)
        api.getParamListByDriveTypeApi(record.controlSystemType)
          .then(res => {
            if (res.success) {
              this.paramList = res.result
            }
          })
        this.model.chineseName = `${record.englishName}(${record.chineseName})`
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'controlSystemType', 'chineseName', 'minThreshold', 'maxThreshold'))
        })
      },

      handleSubmit() {
        const that = this
        // è§¦å‘表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.model.maxThreshold > this.model.minThreshold) {
              that.confirmLoading = true
              let obj
              if (this.title == '新增') {
                obj = api.addParamThresholdApi(this.model)
              } else {
                obj = api.editParamThresholdApi(this.model)
              }
              obj.then((res) => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.$emit('ok')
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              }).finally(() => {
                that.confirmLoading = false
                this.visible = false
              })
            } else {
              this.$notification.warning({
                message: '消息',
                description: '阈值上限不能小于等于阈值下限'
              })
            }

          } else {
            return false
          }
        })
      },

      /**
       * è”想输入框筛选功能
       * @param input è¾“入的内容
       * @param option é…ç½®
       * @returns {boolean} åˆ¤æ–­æ˜¯å¦ç­›é€‰
       */
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
        )
      },

      /**
       * é©±åŠ¨å‚数类型选中后渲染相应的参数列表
       * @param value é©±åŠ¨å‚数类型选中项
       */
      handleDriveTypeChange(value) {
        api.getParamListByDriveTypeApi(value)
          .then(res => {
            if (res.success) {
              this.paramList = res.result
              this.model.chineseName = res.result.length ? res.result[0].value : undefined
              if (this.model.chineseName) this.$refs.form.clearValidate('chineseName')
            }
          })
      },

      /**
       * ç¼–辑或查看详情数据时清除抽屉表单验证
       */
      removeValidate() {
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }

  }
</script>

<style scoped>

</style>