kd-aiot-frontend/src/views/technology/parameter/components/user-edit.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal width="960px" :visible="visible" :append-to-body="true" :close-on-click-modal="true"
    custom-class="ele-dialog-form" :title="isUpdate ? '修改参数' : '添加参数'" @update:visible="updateVisible">
    <header-title title="基本信息"></header-title>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="参数编码:" prop="code">
            <el-input clearable disabled v-model="form.code" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="参数名称:" prop="name">
            <el-input v-model="form.name" clearable placeholder="请输入" />
          </el-form-item>
        </el-col>


        <el-col :span="10">
          <el-form-item label="参数类型:" prop="textType">
            <el-select v-model="form.textType" placeholder="请选择" class="ele-block">
              <el-option label="数值" :value="'1'" />
              <el-option label="选择" :value="'2'" />
              <el-option label="产品参数" :value="'3'" />
              <el-option label="规格" :value="'4'" />
              <el-option label="时间" :value="'5'" />
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="10" v-if="form.textType == 1  || form.textType == 3  || form.textType == 4 || form.textType == 5" >
          <el-form-item label="默认值:">
            <!-- oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3').replace(/^\./g, '').replace(/^0+(?!\.|$)/g, ''),value = Number(value) >= 999999.99 ? 999999.99 : value" -->
            <el-input
              v-model="form.defaultValue" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="10" v-if="form.textType == 2">
          <el-form-item label="默认值:" prop="defaultValue">
            <el-select v-model="form.defaultValue" placeholder="请选择" class="ele-block">
              <el-option label="TRUE" :value="'TRUE'" />
              <el-option label="FALSE" :value="'FALSE'" />
            </el-select>
          </el-form-item>
        </el-col>




        <el-col :span="10" v-if="form.textType == 3">
          <el-form-item label="参数上限:">
            <el-input placeholder="请输入" v-model="form.maxValue" />
            <!-- <el-input
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3').replace(/^\./g, '').replace(/^0+(?!\.|$)/g, ''),value = Number(value) >= 999999.99 ? 999999.99 : value"
              v-model="form.maxValue" placeholder="请输入"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="10" v-if="form.textType == 3">
          <el-form-item label="参数下限:">
            <el-input placeholder="请输入" v-model="form.minValue" />
            <!-- <el-input
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3').replace(/^\./g, '').replace(/^0+(?!\.|$)/g, ''),value = Number(value) >= 999999.99 ? 999999.99 : value"
              v-model="form.minValue" placeholder="请输入"></el-input> -->
          </el-form-item>
        </el-col>

        <el-col :span="10" v-if="form.textType != 2 &&  form.textType != 5">
          <el-form-item label="参数单位:" prop="unitName">
            <DictSelection dictName="工艺参数单位" clearable filterable v-model="form.unitName">
            </DictSelection>

          </el-form-item>
        </el-col>

        <el-col :span="10" v-if="form.textType == 5">
          <el-form-item label="参数单位:" prop="unitName">
            h(小时)
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item label="文字描述:">
            <el-input placeholder="请输入" v-model="form.description" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <header-title title="其他信息"></header-title>
    <el-form ref="form1" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="参数类别:" prop="categoryType">
            <el-select v-model="form.categoryType" filterable placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="是否必填:" prop="notNull">
            <el-select v-model="form.notNull" filterable placeholder="请选择">
              <el-option v-for="item in timeType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="备注:">
            <el-input placeholder="请输入" v-model="form.remark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import parameter from '@/api/technology/parameter';

export default {
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    const defaultForm = {
      id: null,
      code: '',
      name: '',
      textType: '1',
      categoryType: '',
      defaultValue: '',
      description: '',
      maxValue: '',
      minValue: '',
      unitName: '',
      remark: '',
      notNull: 0
    };
    return {
      defaultForm,
      // 表单数据
      form: { ...defaultForm },
      timeType: [
        { value: 1, label: '是' },
        { value: 0, label: '否' }
      ],
      statusList: [
        { label: '工艺', value: 0 },
        { label: '工序', value: 1 },
        { label: '产品', value: 2 },
        { label: '原料', value: 3 },
        { label: '设备', value: 4 },
        { label: '其他', value: 5 }
      ],
      tacticsType: [
        { code: 1, label: '标准时间' },
        { code: 2, label: '最短时间' }
      ],

      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入工序名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入工序编码', trigger: 'blur' }
        ],

        unitName: [
          { required: true, message: '请选择参数单位', trigger: 'change' }
        ],
        textType: [
        { required: true, message: '请选择参数类型', trigger: 'blur' }
        ],
        categoryType: [
          { required: true, message: '请选择参数类别', trigger: 'blur' }
        ],
        notNull: [
          { required: true, message: '请选择是否必填', trigger: 'blur' }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        this.$refs.form1.validate((va) => {
          if (!valid || !va) {
            return false;
          }
          this.loading = true;
          if (!this.isUpdate) {
            delete this.form.id;
          }
          const saveOrUpdate = this.isUpdate
            ? parameter.update
            : parameter.save;

          const defaultValue = Number(this.form.defaultValue)
          const maxValue = Number(this.form.maxValue)
          const minValue = Number(this.form.minValue)
          if (defaultValue != '' & maxValue != '') {
            if (defaultValue > maxValue || defaultValue == maxValue) {
              this.loading = false;
              return this.$message.warning('默认值应小于参数上限')
            }
          }
          if (defaultValue != '' & minValue != '') {
            if (defaultValue < minValue || defaultValue == minValue) {
              this.loading = false;
              return this.$message.warning('默认值应大于参数下限')
            }
          }
          if (maxValue != '' & minValue != '') {
            if (maxValue < minValue || maxValue == minValue) {
              this.loading = false;
              return this.$message.warning('参数上限应大于参数下限')
            }
          }
          if(this.form.textType == 5){
            this.form.unitName = 'h'
          }
          saveOrUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              this.form = {};
              const info = this.isUpdate ? '修改成功' : '新增成功'
              this.$message.success(info);
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              // this.$message.error(e.message);
            });
        });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  },

  watch: {
    async visible(visible) {
      if (visible) {
        if (this.data) {
          const res = await parameter.getById(this.data.id);

          this.$util.assignObject(this.form, {
            ...res
          });
          this.isUpdate = true;
        } else {
          const res = await parameter.getCode();
          this.form.code = res;
          this.isUpdate = false;
        }
      } else {
        this.$refs.form.clearValidate();
        this.$refs.form1.clearValidate();
        this.form = { ...this.defaultForm };
      }
    }
  }
};
</script>