zdqy_firm_former/src/views/component/environmentRange.vue

<template>
  <div class="maintenanceCycle">
    <el-row>
      <el-col>
        <el-form-item label="温度范围限值">
          <el-input-number
            v-model="environmentInfo.temperatureMin"
            :min="environmentInfo.minTemperature"
            :max="environmentInfo.temperatureMax"
            controls-position="right"
            :precision="0"
            :step="1"
          ></el-input-number>
          <span> 至 </span>
          <el-input-number
            v-model="environmentInfo.temperatureMax"
            :min="environmentInfo.temperatureMin"
            :max="environmentInfo.maxTemperature"
            controls-position="right"
            :precision="0"
            :step="1"
          ></el-input-number>
          <span> (℃)</span>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="湿度范围限值">
          <el-input-number
            v-model="environmentInfo.humidityMin"
            :min="environmentInfo.minHumidity"
            :max="environmentInfo.humidityMax"
            controls-position="right"
            :precision="0"
            :step="1"
          ></el-input-number>
          <span> 至 </span>
          <el-input-number
            v-model="environmentInfo.humidityMax"
            :min="environmentInfo.humidityMin"
            :max="environmentInfo.maxHumidity"
            controls-position="right"
            :precision="0"
            :step="1"
          ></el-input-number>
          <span> (%)</span>
        </el-form-item></el-col
      >
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    customClass: {
      type: String
    },
    width: {
      type: String,
      default: '80%'
    },
    top: {
      type: String,
      default: '10%'
    },
    editFromType: {
      type: String,
      default: 'add'
    },
    dynamicParams: {
      type: Object
    },
    templateKey: {
      type: String,
      default: ''
    },
    // 所有字段数据,(包含主主子表)
    formData: [Object, Array],
    field: {
      type: Object,
      required: true
    },
    // 子表行数
    // row: [String, Number],
    params: {
      type: Object
    }
  },
  data() {
    return {
      environmentInfo: {
        // 温度默认大小值
        temperatureMin: 0,
        temperatureMax: 0,
        // 温度范围大小值
        minTemperature: -100,
        maxTemperature: 100,
        // 湿度默认大小值
        humidityMin: 0,
        humidityMax: 0,
        // 湿度范围大小值
        minHumidity: 0,
        maxHumidity: 100
      },
      dialogVisible: true, //this.visible,
      // qmonthDateOptions: monthLunarGeneration(4), // 貌似是监听函数变化
      toolbars: [{ key: 'confirm', label: '确定' }, { key: 'cancel' }],
      toolbarsConsult: [{ key: 'cancel' }],
      judgeShow: 0
    }
  },
  watch: {
    visible: {
      handler: function (val, oldVal) {
        this.dialogVisible = this.visible
      },
      immediate: true
    },
    environmentInfo: {
      deep: true,
      handler() {
        this.process()
      }
    }
  },
  created() {
    this.loadFormData()
  },
  methods: {
    clickBtn() {
      this.dialogVisible = true
    },
    process() {
      const result = this.packageObj()
      this.$emit('change-data', 'environmentRange', result)
    },
    handleActionEvent({ key }) {
      switch (key) {
        case 'confirm':
          this.handleConfirm()
          break
        case 'cancel':
          this.closeDialog()
          break
        default:
          break
      }
    },
    packageObj() {
      const obj = {
        temperature: {
          min: this.environmentInfo.temperatureMin, // || this.environmentInfo.minTemperature,
          max: this.environmentInfo.temperatureMax // || this.environmentInfo.maxTemperature,
        },
        humidity: {
          min: this.environmentInfo.humidityMin, // || this.environmentInfo.minHumidity,
          max: this.environmentInfo.humidityMax // || this.environmentInfo.maxHumidity,
        }
      }
      return JSON.stringify(obj)
    },
    resolveObj(jsonString = '') {
      const data = jsonString.trim() !== '' && JSON.parse(jsonString)
      this.environmentInfo.temperatureMin = data?.temperature?.min // || this.environmentInfo.temperatureMin;
      this.environmentInfo.temperatureMax = data?.temperature?.max // || this.environmentInfo.temperatureMax;
      this.environmentInfo.humidityMin = data?.humidity?.min // || this.environmentInfo.humidityMin;
      this.environmentInfo.humidityMax = data?.humidity?.max // || this.environmentInfo.humidityMax;
    },
    // 关闭当前窗口
    closeDialog() {
      this.$emit('close', false)
    },
    loadFormData() {
      setTimeout(() => {
        const environmentRange = this.formData.environmentRange
        this.resolveObj(environmentRange)
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.maintenanceCycle {
  display: flex;
  align-items: center;
  // margin: 2%;
  margin-left: -120px;
}
</style>