hitch-sb-antd/src/views/repair/fee/modules/BaseForm.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">

      <a-form-item v-show="false" >
        <a-input v-decorator="['id']" type="hidden"/>
        <a-input v-decorator="['sbId']" type="hidden"/>
      </a-form-item>

      <a-form-item
        label="维修单id"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
        v-show="false"
      >
        <a-input
          v-decorator="['repairId']" />
      </a-form-item>
      <a-form-item
        label="维修单号"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-input
          disabled
          style="width:70%"
          v-decorator="['repairNo']" />
        <a-button style="width: 30%;" type="primary" @click="handleAppNoSelect">选择</a-button>
      </a-form-item>
      <a-form-item
        label="委外单号"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-input
          v-decorator="['no']" />
      </a-form-item>
      <a-form-item
        label="费用金额"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-input-number
          style="width: 100%"
          :min="0"
          :step="0.01"
          :formatter="BaseTool.Amount.formatter"
          :parser="BaseTool.Amount.parser"
          v-decorator="['fee', {rules: [{required: true, message: '费用金额不能为空'}]}]" />
      </a-form-item>
      <a-form-item
        label="货币单位"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-select v-decorator="['moneyType', {rules: [{required: true, message: '货币单位不能为空'}]}]" placeholder="请选择">
          <a-select-option
            v-for="(label,value) in moneyTypeMap"
            :key="value"
            :label="label"
            :value="value">{{ label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="费用类别"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-select v-decorator="['type', {rules: [{required: true, message: '费用类别不能为空'}]}]" placeholder="请选择">
          <a-select-option
            v-for="(label,value) in typeMap"
            :key="value"
            :label="label"
            :value="parseInt(value)">{{ label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="费用日期"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-date-picker
          style="width: 100%"
          :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
          v-decorator="['feeDate']" />
      </a-form-item>
      <a-form-item
        label="费用原因"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-textarea
          v-decorator="['reason']" />
      </a-form-item>
      <a-form-item
        label="费用描述"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-textarea
          v-decorator="['descripition']" />
      </a-form-item>
      <a-form-item
        label="备注"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-textarea
          v-decorator="['remark']" />
      </a-form-item>
      <a-form-item
        label="图片"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-upload
          :action="uploadUrl"
          :multiple="true"
          list-type="picture"
          :file-list="defaultImageList"
          @change="handleImageFileChange"
          accept="image/*"
          :headers="headers"
        >
          <a-button> <a-icon type="upload" /> 上传图片 </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item
        label="附件"
        :labelCol="BaseTool.Constant.labelCol"
        :wrapperCol="BaseTool.Constant.wrapperCol"
      >
        <a-upload
          :action="uploadUrl"
          :multiple="true"
          :file-list="defaultFileList"
          @change="handleFileChange"
          :headers="headers"
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
    <repair-application-form-select-modal ref="rafSelectModal" @selected="handleAppNoSelected"/>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addRepairFee, updateRepairFee } from '@/api/repair/fee'
import { uploadUrl } from '@/api/upms/file'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import RepairApplicationFormSelectModal from '@/views/repair/application-form/modules/RepairApplicationFormSelectModal'

export default {
  name: 'BaseRepairFee',
  data () {
    return {
      sbId: null,
      confirmLoading: false,
      modalTitle: null,
      defaultImageList: [],
      imageList: [],
      moneyTypeMap: {},
      defaultFileList: [],
      fileList: [],
      uploadUrl: uploadUrl,
      headers: {
        Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
      },
      form: this.$form.createForm(this),
      visible: false,
      // 下拉框map
      typeMap: {}
    }
  },
  components: {
    RepairApplicationFormSelectModal
  },
  props: {
  },
  created () {
    // 下拉框map
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_FEE_TYPE)
    this.moneyTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.MONEY_TYPE)
  },
  methods: {
    base (record, repairForm = {}) {
      this.visible = true
      // 如果是空标识添加
      const { form: { setFieldsValue } } = this
      if (this.BaseTool.Object.isBlank(record)) {
        if (repairForm != null) {
          this.sbId = repairForm.sbId
          this.$nextTick(() => {
            setFieldsValue({
              'sbId': repairForm.sbId,
              'repairId': repairForm.id,
              'repairNo': repairForm.no
            })
          })
        }
        this.imageList = []
        this.fileList = []
        this.defaultImageList = []
        this.defaultFileList = []
        this.modalTitle = '添加'
        return
      }
      this.imageList = record.imageList
      this.fileList = record.fileList
      this.defaultImageList = this.BaseTool.UPLOAD.transImg(this.imageList)
      this.defaultFileList = this.BaseTool.UPLOAD.transImg(this.fileList)
      this.modalTitle = '编辑'
      if (record.feeDate != null) {
        record.feeDate = this.BaseTool.Moment(record.feeDate, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
        this.$nextTick(() => {
          setFieldsValue(Object.assign(pick(record, [
            'feeDate'
          ])))
        })
      }
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'repairId',
          'sbId',
          'no',
          'repairNo',
          'fee',
          'moneyType',
          'type',
          'reason',
          'descripition',
          'remark'
        ])))
      })
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        values.feeDate = this.BaseTool.Date.formatter(values.feeDate, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)

        // 上传文件
        values.imageList = this.imageList
        values.fileList = this.fileList
        // 日期处理
        if (this.BaseTool.String.isBlank(values.id)) {
          addRepairFee(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          updateRepairFee(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleImageFileChange (info) {
      this.defaultImageList = info.fileList
      this.imageList = this.setFileList(info, 18)
    },
    handleFileChange (info) {
      this.defaultFileList = info.fileList
      this.fileList = this.setFileList(info, 19)
    },
    setFileList (info, type) {
      const file = info.file
      const fileList = info.fileList
      if (file.status === 'done') {
        return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
      } else if (file.status === 'removed') {
        return this.BaseTool.UPLOAD.getUploadFileDTO(fileList, type)
      } else if (file.status === 'error') {
        this.$message.error('上传失败')
        return []
      }
    },
    handleAppNoSelect () {
      this.$refs.rafSelectModal.base(null, { sbId: this.sbId })
    },
    handleAppNoSelected (record, keys, rows) {
      console.log(keys, rows)
      const [ key ] = keys
      const [ row ] = rows
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'repairId': key,
          'repairNo': row.no
        }))
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      }
    }

  }
}
</script>