xianmen-antd/src/views/repair/application-form/modules/BaseForm.vue

<template>
  <a-modal :title="modalTitle" :width="900" :visible="visible" :confirmLoading="confirmLoading" class="ant-modal2"
    @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-input v-decorator="['deptId', { initialValue: userInfo.deptId }]" type="hidden" />
      </a-form-item>

      <row-list :col="2">
        <row-item>
          <a-form-item label="设备名称" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-input style="width: 70%" disabled
              v-decorator="['sbName', { rules: [{ required: true, message: '设备名称不能为空' }] }]" />
            <a-button style="width: 30%" type="primary" @click="handleSbSelect">选择</a-button>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="使用位置" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <!-- <a-input v-decorator="['sbCph', { rules: [{ required: true, message: '设备使用位置不能为空' }] }]" /> -->
            <a-tree-select style="width: 100%" :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
              :treeData="sbPositionData" :replaceFields="{
                value: 'title', title: 'title', key: 'id'
              }" :treeNodeFilterProp="'title'" :showSearch="true"
              v-decorator="['sbCph', { rules: [{ required: true, message: '设备使用位置不能为空' }] }]" placeholder="请选择">
            </a-tree-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="工单类别" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-select @change="changePlanFlag"
              v-decorator="['category', { rules: [{ required: true, message: '计划性维修不能为空' }] }]" placeholder="请选择">
              <a-select-option v-for="(label, value) in categoryMap" :key="value" :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="是否停机" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-select v-decorator="['needStop', { rules: [{ required: true, message: '是否停机不能为空' }] }]"
              placeholder="请选择">
              <a-select-option v-for="(label, value) in needStopMap" :key="value" :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-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="['limitDate']" />
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="要求时间" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-input style="width: 100%" suffix="小时" v-decorator="['limitHours']" />
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="报修单号" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-input disabled v-decorator="['no', { rules: [{ required: false, message: '报修单号不能为空' }] }]" />
          </a-form-item>
        </row-item>
        <!--        <row-item>
          <a-form-item
            label="报修来源"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['source', {initialValue: DictCache.VALUE.REPAIR_APPLICATION_FORM_SOURCE.SCENE,rules: [{required: true, message: '报修来源不能为空'}]}]" placeholder="请选择">
              <a-select-option
                v-for="(label,value) in sourceMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>-->
        <row-item>
          <a-form-item label="报修人" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <!-- 报修人账号下拉带搜索，提交 userId，避免手输同名歧义 -->
            <a-select
              showSearch
              :filterOption="(input, option) => option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0"
              v-decorator="['userId', { initialValue: userInfo.userId, rules: [{ required: true, message: '报修人不能为空' }] }]"
              placeholder="请选择报修人"
            >
              <a-select-option v-for="user in userList" :key="user.userId" :value="user.userId" :label="user.realName">
                {{ user.realName }}<template v-if="user.username">（{{ user.username }}）</template>
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="紧急程度" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-select v-decorator="['level', { rules: [{ required: true, message: '紧急程度不能为空' }] }]" placeholder="请选择">
              <a-select-option v-for="(label, value) in levelMap" :key="value" :label="label"
                :value="parseInt(value)">{{
                  label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="故障类型" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-select style="width: 100%"
              v-decorator="['repairErrorTypeId', { rules: [{ required: true, message: '故障类型不能为空' }] }]"
              placeholder="请选择" allowClear>
              <a-select-option v-for="(label, value) in faultTypeMap" :key="value" :label="label" :value="value">{{
                label
              }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="通知班长" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-select mode="multiple" allowClear :maxTagCount="1" placeholder="请选择通知班长（可多选，非必填）"
              v-decorator="['notifyTeamLeaders']">
              <a-select-option v-for="leader in teamLeaderList" :key="leader.userId" :value="leader.userId"
                :label="leader.realName">{{ leader.realName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="报修图片" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-upload :action="uploadUrl" :multiple="true" list-type="picture"
              :file-list="this.defaultApplicationFileList" @change="handleApplicationFileChange" accept="image/*"
              :headers="headers">
              <a-button> <a-icon type="upload" /> 上传图片 </a-button>
            </a-upload>
          </a-form-item>
        </row-item>
      </row-list>

      <row-list :col="1">
        <row-item v-if="false">
          <a-form-item label="报修状态" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-select disabled
              v-decorator="['status', { initialValue: DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.NOT_ALLOCATED, rules: [{ required: true, message: '报修状态不能为空' }] }]"
              placeholder="请选择">
              <a-select-option v-for="(label, value) in statusMap" :key="value" :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>

        <!--        <row-item>
          <a-form-item
            label="故障描述"
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol2"
          >
            <a-select v-decorator="['content']" placeholder="请选择">
              <a-select-option
                v-for="(label,value) in questionMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>-->
        <row-item>
          <a-form-item label="故障描述" :labelCol="BaseTool.Constant.labelCol2" :wrapperCol="BaseTool.Constant.wrapperCol2">
            <a-textarea :rows="4" v-decorator="['content', { rules: [{ required: true, message: '故障描述不能为空' }] }]" />
          </a-form-item>
        </row-item>
      </row-list>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
    <sb-info-select-modal ref="sbInfoSelectModal" @selected="handleSbSelectd" />
    <part-info-select-modal ref="partInfoSelectModal" @selected="handlePartSelected" />
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import BaseTool from '../../../../utils/tool'
import { addRepairApplicationForm, updateRepairApplicationForm, queryUncompletedRepairs } from '@/api/repair/application-form'
import PartInfoSelectModal from '@/views/part/info/modules/PartInfoSelectModal'
import SbInfoSelectModal from '@/views/sb/info/modules/SbInfoSelectModal'
import { queryUser, queryRepairTeamLeaders } from '@/api/upms/user'
import { uploadUrl } from '@/api/upms/file'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getSbPositionTree } from '@/api/sb/position'

export default {
  name: 'BaseRepairApplicationForm',
  data() {
    return {
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      // 下拉框map
      sourceMap: {},
      levelMap: {},
      questionMap: {},
      needStop: null,
      sbPositionData: [],
      needStopMap: {},
      faultTypeMap: {},
      category: 0,
      categoryMap: {},
      statusMap: {},
      userInfo: this.$store.getters.userInfo,
      userList: [],
      // 通知班长下拉：全部班长候选人 + 当前用户班组下的班长（默认勾选）
      teamLeaderList: [],
      defaultLeaderIds: [],
      uploadUrl: uploadUrl,
      defaultRepairFileList: [],
      defaultApplicationFileList: [],
      defaultCheckFileList: [],
      applicationFileList: [], // 报修图片
      checkFileList: [], // 审核图片
      repairFileList: [], // 维修图片,
      headers: {
        Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN),
      },
    }
  },
  components: {
    SbInfoSelectModal,
    PartInfoSelectModal,
  },
  props: {},
  created() {
    // 下拉框map
    this.sourceMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_SOURCE)
    this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_LEVEL)
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS)
    this.questionMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_QUESTION)
    this.faultTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_ERROR_TYPE)
    this.needStopMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YES_NO)
    this.categoryMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_CATEGORY)
    this.getUsers()
    this.getTeamLeaders()
  },
  methods: {
    base(record) {
      this.visible = true
      getSbPositionTree().then(res => {
        this.sbPositionData = res.data
      })
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.modalTitle = '添加'
        this.setDefaultTeamLeaders()
        if (!this.BaseTool.Object.isBlank(record) && !this.BaseTool.Object.isBlank(record.sbId)) {
          const {
            form: { setFieldsValue },
          } = this
          this.$nextTick(() => {
            setFieldsValue(Object.assign(pick(record, ['sbId', 'sbName'])))
          })
        }
        return
      }
      if (this.BaseTool.Object.isBlank(record.id)) {
        this.modalTitle = '添加'
        this.setDefaultTeamLeaders()
        if (!this.BaseTool.Object.isBlank(record.sbId)) {
          const {
            form: { setFieldsValue },
          } = this
          this.$nextTick(() => {
            setFieldsValue(Object.assign(pick(record, ['sbId', 'sbName', 'sbCph'])))
          })
        }
        return
      }
      this.modalTitle = '编辑'
      // 通知班长回显：逗号分隔字符串转数组
      record.notifyTeamLeaders = this.BaseTool.Object.isBlank(record.notifyTeamLeaders)
        ? []
        : record.notifyTeamLeaders.split(',')
      this.applicationFileList = record.applicationFileList
      this.repairFileList = record.repairFileList
      this.checkFileList = record.checkFileList
      this.defaultApplicationFileList = this.BaseTool.UPLOAD.transImg(this.applicationFileList)
      this.defaultRepairFileList = this.BaseTool.UPLOAD.transImg(this.repairFileList)
      this.defaultCheckFileList = this.BaseTool.UPLOAD.transImg(this.checkFileList)
      const {
        form: { setFieldsValue },
      } = this
      // 日期处理
      record.applyTime = this.BaseTool.Moment(record.applyTime, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
      if (record.limitDate != null) {
        record.limitDate = this.BaseTool.Moment(record.limitDate, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)
        this.$nextTick(() => {
          setFieldsValue(Object.assign(pick(record, ['limitDate'])))
        })
      }
      this.$nextTick(() => {
        setFieldsValue(
          Object.assign(
            pick(record, [
              'id',
              'sbId',
              'sbCph',
              'partId',
              'repairUserId',
              'no',
              'category',
              'limitDate',
              'limitHours',
              'source',
              'level',
              'content',
              'status',
              'sbName',
              'needStop',
              'category',
              'partName',
              'remark',
              'repairErrorTypeId',
              'notifyTeamLeaders',
              'userId',
              'actualUser',
              'deptId'
            ])
          )
        )
      })
    },
    getUsers() {
      queryUser({ status: 1 }).then((res) => {
        this.userList = res.data
      })
    },
    getTeamLeaders() {
      queryRepairTeamLeaders().then((res) => {
        const data = res.data || {}
        this.teamLeaderList = data.leaders || []
        this.defaultLeaderIds = data.defaultIds || []
      })
    },
    // 默认带出当前用户班组下的班长，找不到则空着
    setDefaultTeamLeaders() {
      this.$nextTick(() => {
        this.form.setFieldsValue({ notifyTeamLeaders: this.defaultLeaderIds })
      })
    },
    save() {
      const {
        form: { validateFieldsAndScroll },
      } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        // 日期处理
        values.applyTime = this.BaseTool.Date.formatter(
          values.applyTime,
          this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN
        )
        values.limitDate = BaseTool.Date.formatter(values.limitDate, BaseTool.Date.PICKER_NORM_DATE_PATTERN)
        // 上传文件
        values.repairFileList = this.repairFileList
        values.applicationFileList = this.applicationFileList
        values.checkFileList = this.checkFileList
        // 通知班长：多选数组转逗号分隔字符串
        values.notifyTeamLeaders = (values.notifyTeamLeaders || []).join(',')
        // 报修人：根据下拉选中的 userId 同步姓名，后端以 userId 为准
        const chosenUser = this.userList.find((user) => user.userId === values.userId)
        values.actualUser = chosenUser ? chosenUser.realName : this.userInfo.realName
        if (this.BaseTool.String.isBlank(values.id)) {
          // 重复报修检查：该设备存在未完结报修单时需先确认再提交（允许一台设备多个报修单）
          this.confirmDuplicateAdd(values)
        } else {
          updateRepairApplicationForm(values)
            .then(() => {
              this.handleCancel(values)
            })
            .catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    // 提交前检查该设备是否存在未完结报修单，存在则弹确认框，确认后仍允许提交
    confirmDuplicateAdd(values) {
      queryUncompletedRepairs({ sbId: values.sbId })
        .then((res) => {
          const list = res.data || []
          if (list.length === 0) {
            this.doAddRepair(values)
            return
          }
          this.confirmLoading = false
          const [first] = list
          const h = this.$createElement
          // 展示最新一笔未完结报修单的状态与报修内容，内容过长截断
          const desc = (first.content || '').length > 30 ? `${first.content.slice(0, 30)}…` : first.content || ''
          const detail = `${first.no} ${first.statusLabel || ''}${desc ? '，内容：' + desc : ''}`
          const content = values.sbName
            ? `【${values.sbName}】已有 ${list.length} 个未完结报修单（最新：${detail}），是否继续提交新报修单？`
            : `该设备已有 ${list.length} 个未完结报修单（最新：${detail}），是否继续提交新报修单？`
          this.$confirm({
            title: '重复报修提醒',
            content: h('div', content),
            okText: '继续提交',
            cancelText: '取消',
            onOk: () => {
              this.confirmLoading = true
              this.doAddRepair(values)
            },
          })
        })
        .catch(() => {
          this.confirmLoading = false
        })
    },
    doAddRepair(values) {
      this.confirmLoading = true
      addRepairApplicationForm(values)
        .then(() => {
          this.handleCancel(values)
        })
        .catch(() => {
          this.confirmLoading = false
        })
    },
    changePlanFlag(value) {
      // 选择工单类别不再自动联动“是否停机”：停机与否必须由报修人在“是否停机”处显式选择
      this.category = value
    },
    handleCancel(values) {
      this.visible = false
      this.confirmLoading = false
      this.applicationFileList = []
      this.defaultApplicationFileList = []
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      }
    },
    handleSbSelect() {
      this.$refs.sbInfoSelectModal.base({}, {})
    },
    handleSbSelectd(keys, rows) {
      const [key] = keys
      const [row] = rows
      const {
        form: { setFieldsValue },
      } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(
          Object.assign({
            sbId: key,
            sbName: row.name,
            sbCph: row.positionName,
          })
        )
      })
    },
    handlePartSelect() {
      const sbId = this.form.getFieldValue('sbId')
      this.$refs.partInfoSelectModal.base({ sbId })
    },
    handlePartSelected(keys, rows) {
      const [key] = keys
      const [row] = rows
      const {
        form: { setFieldsValue },
      } = this
      this.$nextTick(() => {
        setFieldsValue(
          Object.assign({
            partId: key,
            partName: row.name,
          })
        )
      })
    },
    handleApplicationFileChange(info) {
      this.defaultApplicationFileList = info.fileList
      this.applicationFileList = this.setFileList(info, 11)
    },
    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 []
      }
    },
  },
}
</script>