zenglf
2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54
src/views/eam/modules/inspectionProject/InspectionProjectModel.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,550 @@
<template>
  <a-modal
    :title="title"
    :width="1050"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="点检项目分类"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="true"
                :placeholder="disableSubmit?'':'请输入上级故障原因编号'"
                v-decorator="['inspectionProjectCategoryNumName', validatorRules.inspectionProjectCategoryNumName ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="点检项目编号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="codeDisable"
                :placeholder="disableSubmit?'':'请输入点检项目编号'"
                v-decorator="['num', validatorRules.num ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="点检项目名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入点检项目名称'"
                v-decorator="['name', validatorRules.name ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="计量单位"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择计量单位'"
                :triggerChange="true"
                dictCode="mom_base_unit,name,id,status!='0' and del_flag!='1'"
                v-decorator="['unitId', validatorRules.unitId]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="检验值类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择检验值类型'"
                :triggerChange="true"
                dictCode="test_value_type"
                v-decorator="['testValueType', validatorRules.testValueType]"
                @change="(e)=>handleChange(e)"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- <a-col :span="12">
            <a-form-item
              label="分析方法"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择分析方法'"
                :triggerChange="true"
                dictCode="analysis_method"
                @change="(e)=>handleChange(e)"
                v-decorator="['analysisMethod', validatorRules.analysisMethod]"
              />
            </a-form-item>
          </a-col> -->
          <a-col
            v-if="testValueType == '2'"
            :span="12"
          >
            <a-form-item
              label="检测标准"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入检测标准'"
                v-decorator="['detectionStandard', validatorRules.detectionStandard ]"
              />
            </a-form-item>
          </a-col>
          <a-col
            v-if="testValueType == '1'"
            :span="12"
          >
            <a-form-item
              label="名义值"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number
                style="width: 100%"
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入名义值'"
                v-decorator="['surfaceValue', validatorRules.surfaceValue ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row
          v-if="testValueType == '1'"
          :gutter="24"
        >
          <a-col :span="12">
            <a-form-item
              label="上偏差"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number
                style="width: 100%"
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入上偏差'"
                v-decorator="['upValue', validatorRules.upValue ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="下偏差"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input-number
                style="width: 100%"
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入下偏差'"
                v-decorator="['downValue', validatorRules.downValue ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="点检方法"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选择点检方法'"
                :triggerChange="true"
                dictCode="inspection_method"
                v-decorator="['inspectionMethod', validatorRules.inspectionMethod]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="点检工具"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入点检工具'"
                v-decorator="['inspectionTool', validatorRules.inspectionTool ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:3}"
              :wrapperCol="{span:21}"
              label="备注"
            >
              <a-textarea
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请输入备注'"
                v-decorator="['remark', validatorRules.remark]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <template slot="footer">
      <a-button
        :style="{marginRight: '8px'}"
        @click="handleCancel"
      >
        å…³é—­
      </a-button>
      <a-button
        v-if="!this.model.id"
        :disabled="disableSubmit || confirmLoading"
        :loading="confirmLoading"
        @click="handleOkAndAdd"
        type="primary"
      >保存并继续新增</a-button>
      <a-button
        :disabled="disableSubmit || confirmLoading"
        :loading="confirmLoading"
        @click="handleOk"
        type="primary"
      >确定</a-button>
      <!-- icon="save" -->
    </template>
  </a-modal>
</template>
<script>
import pick from 'lodash.pick'
import { postAction, requestPut } from '@/api/manage'
import { duplicateCheck } from '@/api/api'
export default {
  name: 'InspectionProjectModel',
  data() {
    return {
      title: "操作",
      visible: false,
      codeDisable: true,
      disableSubmit: false,
      inspectionProjectCategoryId: '',
      testValueType: null,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入点检项目编号!' },
            { min: 2, max: 30, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateNum },
          ]
        },
        name: {
          rules: [
            { required: true, message: '请输入点检项目编号!' },
            { min: 2, max: 30, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateName },
          ]
        },
        // analysisMethod: {
        //   rules: [
        //     { required: true, message: '请选择分析方法!' },
        //   ]
        // },
        detectionStandard: {
          rules: [
            { required: true, message: '请输入检测标准!' },
            // { validator: this.validateSurfaceValue },
          ]
        },
        surfaceValue: {
          rules: [
            { required: true, message: '请输入名义值!' },
            // { validator: this.validateSurfaceValue },
          ]
        },
        upValue: {
          rules: [
            { required: true, message: '请输入上偏差值!' },
          ]
        },
        downValue: {
          rules: [
            { required: true, message: '请输入下偏差值!' },
            // { validator: this.validateDownValue },
          ]
        },
        remark: {
          rules: [
            { min: 0, max: 100, message: '长度不超过 100 ä¸ªå­—符', trigger: 'blur' },
          ]
        }
      },
      url: {
        add: "/eam/inspectionProject/add",
        edit: "/eam/inspectionProject/edit"
      },
      //新增、编辑、删除、批量删除操作改变数据后刷新关联的组件的监听属性
      alterFlag: ""
    }
  },
  created() {
  },
  methods: {
    add(record) {
      this.edit(record);
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.disableSubmit = false;
      this.testValueType = record.testValueType
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'inspectionProjectCategoryNumName',
          'num', 'name', 'unitId', 'detectionStandard', 'testValueType', 'inspectionMethod', 'inspectionTool', 'remark'))
      });
      if (record.testValueType == '1') {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'surfaceValue', 'upValue', 'downValue'))
        });
      }
      if (record.id) {
        this.codeDisable = true;
      } else {
        this.codeDisable = false;
      }
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    //保存并新增按钮触发
    handleOkAndAdd() {
      const that = this
      // è§¦å‘表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          formData.inspectionProjectCategoryId = this.inspectionProjectCategoryId
          postAction(this.url.add, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
              that.alterFlag = new Date();
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            this.confirmLoading = false
            this.form.setFieldsValue(pick(this.model, 'inspectionProjectCategoryNumName'))
            this.form.setFieldsValue({ "inspectionContent": null, "inspectionRequire": null, "inspectionMethod": null, "inspectionTool": null, "num": null, "name": null, "remark": null })
          })
        } else {
          return false
        }
      })
    },
    handleOk() {
      const that = this;
      // è§¦å‘表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          let obj;
          if (!this.model.id) {
            formData.inspectionProjectCategoryId = this.inspectionProjectCategoryId
            obj = postAction(this.url.add, formData);
          } else {
            obj = requestPut(this.url.edit, formData, { id: this.model.id });
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
              that.alterFlag = new Date();
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    handleChange(val) {
      this.testValueType = val
    },
    validateDownValue(rule, value, callback) {
      let data = this.form.getFieldsValue(['surfaceValue']);
      if (data.surfaceValue == null || data.surfaceValue == "") {
        callback('名义值不能为空!')
      } else {
        if (value > data.surfaceValue) {
          callback('下偏差值不能大于名义值!')
        } else {
          callback()
        }
      }
    },
    validateSurfaceValue(rule, value, callback) {
      this.form.setFieldsValue({ "upValue": null, "downValue": null })
      // let data = this.form.getFieldsValue(['surfaceValue']);
      // if (value > data.surfaceValue) {
      //   callback('不合格数量应小于检验数量!')
      // } else {
      //   callback()
      // }
    },
    validateAnalysisMethod(rule, value, callback) {
      let data = this.form.getFieldsValue(['surfaceValue']);
      if (value > data.surfaceValue) {
        callback('不合格数量应小于检验数量!')
      } else {
        callback()
      }
    },
    //验证 ç¼–号
    validateNum(rule, value, callback) {
      var params = {
        tableName: 'mom_eam_inspection_project',
        fieldName: 'num',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略,真删除:false å‡åˆ é™¤ï¼štrue
        delFlag: '0',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("编号已存在!");
        }
      })
    },
    //验证 åç§°
    validateName(rule, value, callback) {
      var params = {
        tableName: 'mom_eam_inspection_project',
        fieldName: 'name',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略,真删除:false å‡åˆ é™¤ï¼štrue
        delFlag: '0',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("名称已存在!");
        }
      })
    },
  },
  watch: {
    alterFlag() {
      this.$bus.$emit('queryTreeData');
    },
  }
}
</script>
<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}
.ant-form-item-control {
  line-height: 0px;
}
/** ä¸»è¡¨å•行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}
/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>