abb-antd/src/views/repair/repair-reason/modules/BaseForm.vue

<template>
  <a-card :bordered="false" :title="modalTitle" v-show="visible">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right" >
          <a-button style="margin-left: 8px" type="primary" @click="save()">保存</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>
    <title-divider title="基本信息" width="90px"></title-divider>
    <a-form :form="form">
      <a-form-item v-show="false" >
        <a-input v-decorator="['id']" type="hidden"/>
        <a-input v-decorator="['repairId']" type="hidden"/>
      </a-form-item>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="编号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-input
              disabled="disabled"
              v-decorator="['no']"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="分析时间"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-date-picker
              style="width: 100%"
              v-decorator="['analyzeTime', {rules: [{required: true, message: '分析时间不能为空'}]}]"
              :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item
            label="故障现象"
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol2">
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['problemDesc', {rules: [{required: true, message: '分析时间不能为空'}]}]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol2"
            label="检查处理过程"
          >
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['checkProcess', {rules: [{required: true, message: '检查处理过程不能为空'}]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol2"
            label="原因分析">
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['reasonAnalysis', {rules: [{required: true, message: '原因分析不能为空'}]}]" />
          </a-form-item>
        </a-col>
      </a-row>
      <title-divider title="改进措施" width="90px"></title-divider>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="更新维修计划"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-checkbox :checked="changeRepairPlan" v-model="changeRepairPlan"></a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="内容"
            v-show="changeRepairPlan"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['changeRepairPlanContent']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="更新备件计划"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-checkbox :checked="changeSparePlan" v-model="changeSparePlan"></a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="内容"
            v-show="changeSparePlan"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['changeSparePlanContent']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="人员培训"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-checkbox :checked="userTeach" v-model="userTeach"></a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="内容"
            v-show="userTeach"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['userTeachContent']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="设备改造升级"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-checkbox :checked="sbChange" v-model="sbChange"></a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="内容"
            v-show="sbChange"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['sbChangeContent']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="BaseTool.Constant.row.gutter">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="其他"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-checkbox :checked="otherChange" v-model="otherChange"></a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="内容"
            v-show="otherChange"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-textarea
              :auto-size="{ minRows: 5 }"
              v-decorator="['otherChangeContent']" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
import { addRepairReason, updateRepairReason } from '@/api/repair/repair-reason'
import pick from 'lodash.pick'

export default {
  name: 'BaseRepairReason',
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      currentTab: 0,
      changeRepairPlan: false,
      changeSparePlan: false,
      userTeach: false,
      sbChange: false,
      otherChange: false,
      addFlag: false,
      form: this.$form.createForm(this),
      visible: false
      // 下拉框map
    }
  },
  props: {},
  created () {
    // 下拉框map
  },
  methods: {
    base (record, repairForm = {}) {
      this.visible = true
      this.currentTab = 0
      const { form: { setFieldsValue } } = this
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.addFlag = true
        this.modalTitle = '添加'
        repairForm.repairId = repairForm.id
        this.$nextTick(() => {
          setFieldsValue(Object.assign(pick(repairForm, [
            'repairId',
            'no'
          ])))
        })
        return
      }
      this.addFlag = false
      record.analyzeTime = this.BaseTool.Moment(record.analyzeTime, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
      this.changeRepairPlan = record.changeRepairPlan
      this.changeSparePlan = record.changeSparePlan
      this.userTeach = record.userTeach
      this.sbChange = record.sbChange
      this.otherChange = record.otherChange
      this.modalTitle = '编辑'
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'repairId',
          'no',
          'analyzeTime',
          'problemDesc',
          'checkProcess',
          'reasonAnalysis',
          'improveMeasure',
          'changeRepairPlan: null',
          'changeRepairPlanContent',
          'changeSparePlan',
          'changeSparePlanContent',
          'userTeach',
          'userTeachContent',
          'sbChange',
          'sbChangeContent',
          'otherChange',
          'otherChangeContent'
        ])))
      })
    },
    next () {
      this.currentTab += 1
    },
    prev () {
      this.currentTab -= 1
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        // 日期处理
        values.changeRepairPlan = this.changeRepairPlan
        values.changeSparePlan = this.changeSparePlan
        values.userTeach = this.userTeach
        values.sbChange = this.sbChange
        values.otherChange = this.otherChange
        values.analyzeTime = this.BaseTool.Date.formatter(values.analyzeTime, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
        if (this.addFlag) {
          addRepairReason(values)
            .then((res) => {
              this.confirmLoading = false
              this.handleCancel()
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          updateRepairReason(values)
            .then(() => {
              this.handleCancel()
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      this.$emit('ok', values)
    }

  }
}
</script>
<style>
  .ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon {
    color: #fff !important;
  }
</style>