zhaowei
2 天以前 19aff1ac87030b21d2b01cdca5d5604c840ba7c0
src/views/eam/repair/modules/EamReportRepairList/EamReportRepairModal.vue
@@ -1,86 +1,173 @@
<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="close"
    :mask-closable="false"
    cancelText="关闭">
  <j-modal :title="title" fullscreen :visible="visible" :confirmLoading="confirmLoading"
           :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @ok="handleOk" @cancel="handleCancel"
           cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="equipmentId" label="设备编号">
              <lx-search-equipment-select placeholder="请输入设备编号或名称搜索" v-model="model.equipmentId"/>
            </a-form-model-item>
          </a-col>
      <j-form-container :disabled="disableSubmit">
        <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol"
                      :wrapperCol="wrapperCol" slot="detail">
          <a-row>
            <a-col :span="customSpan">
              <a-form-model-item prop="equipmentId" label="统一编码">
                <lx-search-equipment-select placeholder="请输入统一编码或名称搜索" v-model="model.equipmentId" :allowClear="false"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-col :span="12">
            <a-form-model-item prop="faultName" label="故障简称">
              <a-select placeholder="请选择故障简称" v-model="model.faultName" @change="handleFaultNameChange">
                <a-select-option v-for="item in faultReasonList" :key="item.faultName">
                  {{ item.faultName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
          <a-row>
            <a-col :span="customSpan">
              <a-form-model-item label="是否停机">
                <j-dict-select-tag type="radio" dict-code="yn" placeholder="请选择是否停机" v-model="model.breakdownFlag"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="故障开始时间" prop="faultStartTime">
                <a-date-picker v-model="model.faultStartTime" :allowClear="false" value-format="YYYY-MM-DD"
                               style="width:100%"/>
              </a-form-model-item>
            </a-col>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="故障分类">
              <a-input placeholder="请输入故障分类" v-model="model.faultType_dictText" readOnly/>
            </a-form-model-item>
          </a-col>
        </a-row>
            <a-col :span="12">
              <a-form-model-item label="故障现象" prop="faultDescription" :labelCol="labelColLong"
                                 :wrapperCol="wrapperColLong">
                <a-textarea placeholder="请输入故障现象" v-model="model.faultDescription"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="故障描述" prop="faultDescription" :labelCol="labelColLong"
                               :wrapperCol="wrapperColLong">
              <a-textarea placeholder="请输入故障描述" v-model="model.faultDescription"/>
            </a-form-model-item>
          </a-col>
        </a-row>
          <a-row>
            <a-col :span="customSpan">
              <a-form-model-item label="是否加工">
                <j-dict-select-tag dict-code="yn" type="radio" v-model="model.isProcessed"
                                   @change="handleRadioChange($event,'batchNumber,processingPart,quantity')"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="批次号" prop="batchNumber">
                <a-input :disabled="!Boolean(+model.isProcessed)" placeholder="请输入批次号" v-model="model.batchNumber"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="加工零件号" prop="processingPart">
                <a-input :disabled="!Boolean(+model.isProcessed)" placeholder="请输入加工零件号"
                         v-model="model.processingPart"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="件数" prop="quantity">
                <a-input-number :disabled="!Boolean(+model.isProcessed)" placeholder="请输入件数" v-model="model.quantity"
                                :min="0" style="width: 100%"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="faultStartTime" label="故障开始时间">
              <a-date-picker showTime placeholder="请选择故障开始时间" v-model="model.faultStartTime"
                             :allow-clear="false" value-format="YYYY-MM-DD HH:mm:ss" :disabledDate="disabledDate"
                             :disabledTime="disabledTime"/>
            </a-form-model-item>
          </a-col>
          <a-row>
            <a-col :span="customSpan">
              <a-form-model-item label="设备事故">
                <j-dict-select-tag dict-code="yn" type="radio" placeholder="请选择设备事故"
                                   v-model="model.isAccidentsRegister" @change="handleRadioChange($event,'scrapPartNumber,scrapPartQuantity,' +
                                    'scrapPartValue,operationCertificate,powerOffRestart,batchFirstPiece,variableFactors,variableFactorsValue,'+
                                    'executeNc,accidentPhenomenon,measure,causingResults')"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="废品件号" prop="scrapPartNumber">
                <a-input placeholder="请输入废品件号" :disabled="!Boolean(+model.isAccidentsRegister)"
                         v-model="model.scrapPartNumber"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="废品件数" prop="scrapPartQuantity">
                <a-input-number placeholder="请输入废品件数" :disabled="!Boolean(+model.isAccidentsRegister)"
                                v-model="model.scrapPartQuantity" :min="0" style="width: 100%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="废品价值" prop="scrapPartValue">
                <a-input-number placeholder="请输入废品价值" :disabled="!Boolean(+model.isAccidentsRegister)"
                                v-model="model.scrapPartValue" style="width: 100%"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-col :span="12">
            <a-form-model-item prop="breakdownFlag" label="是否停机">
              <a-radio-group v-model="model.breakdownFlag">
                <a-radio v-for="item in breakdownFlagList" :value="item.value">{{ item.label }}</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
          <a-row>
            <a-col :span="customSpan">
              <a-form-model-item label="是否有设备操作证">
                <j-dict-select-tag dict-code="yn" type="radio" :disabled="!Boolean(+model.isAccidentsRegister)"
                                   placeholder="请选择是否有设备操作证"
                                   v-model="model.operationCertificate"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="是否断电重启">
                <j-dict-select-tag dict-code="yn" type="radio" :disabled="!Boolean(+model.isAccidentsRegister)"
                                   placeholder="请选择是否断电重启" v-model="model.powerOffRestart"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="是否为批次首件">
                <j-dict-select-tag dict-code="yn" type="radio" :disabled="!Boolean(+model.isAccidentsRegister)"
                                   placeholder="请选择是否为批次首件"
                                   v-model="model.batchFirstPiece"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="变动因素" prop="variableFactors">
                <j-dict-select-tag type="radio" dict-code="yn" :disabled="!Boolean(+model.isAccidentsRegister)"
                                   placeholder="请选择变动因素" v-model="model.variableFactors"
                                   @change="handleRadioChange($event,'variableFactorsValue')"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item prop="imageFiles" label="报修图片" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
              <lx-upload :returnUrl="false" :isMultiple="true" file-type="image" :number="3"
                         v-model="model.imageFilesResult"/>
            </a-form-model-item>
          </a-col>
        </a-row>
          <a-row>
            <a-col :span="customSpan">
              <a-form-model-item label="变动因素内容" prop="variableFactorsValue">
                <j-dict-select-tag dict-code="variable_factors_value" :disabled="!Boolean(+model.variableFactors)"
                                   placeholder="请选择变动因素内容"
                                   v-model="model.variableFactorsValue"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="customSpan">
              <a-form-model-item label="执行程序">
                <a-input placeholder="请输入执行程序" v-model="model.executeNc"
                         :disabled="!Boolean(+model.isAccidentsRegister)"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="事故现象" prop="accidentPhenomenon" :labelCol="labelColLong"
                                 :wrapperCol="wrapperColLong">
                <a-textarea placeholder="请输入事故现象" v-model="model.accidentPhenomenon"
                            :disabled="!Boolean(+model.isAccidentsRegister)"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item prop="remark" label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
              <a-textarea placeholder="请输入备注" v-model="model.remark"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="采取措施" prop="measure" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
                <a-textarea placeholder="请输入采取措施" v-model="model.measure"
                            :disabled="!Boolean(+model.isAccidentsRegister)"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="造成结果" prop="causingResults" :labelCol="labelColLong"
                                 :wrapperCol="wrapperColLong">
                <a-textarea placeholder="请输入造成结果" v-model="model.causingResults"
                            :disabled="!Boolean(+model.isAccidentsRegister)"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="备注" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
                <a-textarea placeholder="请输入备注" v-model="model.remark"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>
@@ -88,24 +175,18 @@
<script>
  import { httpAction } from '@/api/manage'
  import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect.vue'
  import moment from 'moment'
  export default {
    name: 'EamReportRepairModal',
    components: { LxSearchEquipmentSelect },
    props: {
      breakdownFlagList: {
        type: Array
      },
      faultReasonList: {
        type: Array
      }
    },
    data() {
      return {
        title: '操作',
        visible: false,
        //详情控制
        disableSubmit: false,
        model: {},
        customSpan: 6,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
@@ -124,21 +205,60 @@
        },
        confirmLoading: false,
        validatorRules: {
          faultStartTime: [
            { required: true, message: '请选择故障开始时间' }
          ],
          breakdownFlag: [
            { required: true, message: '请选择是否停机' }
          ],
          equipmentId: [
            { required: true, message: '请输入设备编号或名称搜索' }
          ],
          faultName: [
            { required: true, message: '请选择故障简称' }
          ],
          faultDescription: [
            { required: true, message: '请输入故障描述' }
          ]
          equipmentId: [{ required: true, message: '请输入统一编码或名称搜索', trigger: 'change' }],
          faultStartTime: [{ required: true, message: '请选择故障开始时间', trigger: 'change' }],
          faultDescription: [{ required: true, message: '请输入故障现象', trigger: 'change' }],
          batchNumber: [{
            validator: this.isProcessedRelatedValidator,
            message: '请输入批次号',
            trigger: 'change'
          }],
          processingPart: [{
            validator: this.isProcessedRelatedValidator,
            message: '请输入加工零件号',
            trigger: 'change'
          }],
          quantity: [{
            validator: this.isProcessedRelatedValidator,
            message: '请输入件数',
            trigger: 'change'
          }],
          scrapPartNumber: [{
            validator: this.isAccidentsRegisterRelatedValidator,
            message: '请输入废品件号',
            trigger: 'change'
          }],
          scrapPartQuantity: [{
            validator: this.isAccidentsRegisterRelatedValidator,
            message: '请输入废品件数',
            trigger: 'change'
          }],
          scrapPartValue: [{
            validator: this.isAccidentsRegisterRelatedValidator,
            message: '请输入废品价值',
            trigger: 'change'
          }],
          variableFactors: [{
            validator: this.isAccidentsRegisterRelatedValidator,
            message: '请选择变动因素',
            trigger: 'change'
          }],
          variableFactorsValue: [{
            validator: this.variableFactorsValueValidator,
            message: '请选择变动因素内容',
            trigger: 'change'
          }],
          accidentPhenomenon: [{
            validator: this.isAccidentsRegisterRelatedValidator,
            message: '请输入事故现象',
            trigger: 'change'
          }],
          measure: [{ validator: this.isAccidentsRegisterRelatedValidator, message: '请输入采取措施', trigger: 'change' }],
          causingResults: [{
            validator: this.isAccidentsRegisterRelatedValidator,
            message: '请输入造成结果',
            trigger: 'change'
          }]
        },
        url: {
          add: '/eam/eamReportRepair/add',
@@ -148,23 +268,19 @@
    },
    methods: {
      add() {
        this.editable = true
        //初始化默认值
        this.edit({
          faultDescription: '',
          breakdownFlag: this.breakdownFlagList.find(item => item.label === '否').value
        })
      },
      edit(record) {
        this.model = Object.assign({}, record, { imageFilesResult: record.imageFiles && this.isJSON(record.imageFiles) ? JSON.parse(record.imageFiles) : null })
        this.model = {
          breakdownFlag: '1',
          isProcessed: '0',
          isAccidentsRegister: '0'
        }
        this.visible = true
      },
      handleFaultNameChange(value) {
        const faultReasonItem = this.faultReasonList.find(item => item.faultName === value)
        this.model.faultType = faultReasonItem.faultCategory
        this.model.faultType_dictText = faultReasonItem.faultCategory_dictText
        this.model.faultDescription = faultReasonItem.faultDescription
      edit(record) {
        this.model = Object.assign({}, record)
        this.visible = true
      },
      handleOk() {
@@ -183,59 +299,101 @@
              httpUrl += this.url.edit
              method = 'put'
            }
            httpAction(httpUrl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
            httpAction(httpUrl, this.model, method)
              .then((res) => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.$emit('ok')
                  that.close()
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.confirmLoading = false
              })
          } else {
            return false
          }
        })
      },
      // 判断是不是JSON字符串
      isJSON(str) {
        try {
          JSON.parse(str)
          return true // 如果这里没有抛出异常,说明是JSON格式的字符串
        } catch (e) {
          return false // 如果抛出异常,说明不是JSON格式的字符串
      /**\
       * 单选框值发生改变时触发
       * @param value 单选框值
       * @param key 单选框关联字段
       */
      handleRadioChange(value, key) {
        //key包含,说明是多选框
        if (key.includes(',')) {
          const keys = key.split(',')
          keys.forEach(key => {
            if (value != '1') delete this.model[key]
            this.$refs.form.clearValidate(key)
          })
        } else {
          if (value != '1') delete this.model[key]
          this.$refs.form.clearValidate(key)
        }
      },
      /**
       * 禁用日期
       * @params current 被禁用的时间
       * 根据是否加工字段校验相关字段
       * @param rule
       * @param value 相关字段值
       * @param callback 结果回调函数
       */
      disabledDate(current) {
        // Can not select days after today
        return current > moment().endOf('day')
      },
      /**
       * 禁用日期中的时间
       * @returns {{disabledHours: (function(): Array), disabledMinutes: (function(): Array)}}
       */
      disabledTime() {
        function range(start, end) {
          const result = []
          for (let i = start; i < end; i++) {
            result.push(i)
      isProcessedRelatedValidator(rule, value, callback) {
        if (this.model.isProcessed == '1') {
          if (!value) {
            callback(new Error())
          } else {
            callback()
          }
          return result
        } else {
          callback()
        }
      },
        return {
          disabledHours: () => range(moment().hour() + 1, 24),
          disabledMinutes: () => range(moment().minute() + 1, 60),
          disabledSeconds: () => range(moment().second() + 1, 60)
      /**
       * 根据设备事故字段校验相关字段
       * @param rule
       * @param value 相关字段值
       * @param callback 结果回调函数
       */
      isAccidentsRegisterRelatedValidator(rule, value, callback) {
        if (this.model.isAccidentsRegister == '1') {
          if (!value) {
            callback(new Error())
          } else {
            callback()
          }
        } else {
          callback()
        }
      },
      /**
       * 变动因素内容校验
       * @param rule
       * @param value 变动因素内容字段值
       * @param callback 结果回调函数
       */
      variableFactorsValueValidator(rule, value, callback) {
        if (this.model.variableFactors == '1') {
          if (!value) {
            callback(new Error())
          } else {
            callback()
          }
        } else {
          callback()
        }
      },
@@ -243,6 +401,9 @@
        this.$emit('close')
        this.visible = false
        if (this.$refs.form) this.$refs.form.clearValidate()
      },
      handleCancel() {
        this.close()
      }
    }
  }