审批动态表单

<template>
  <div class="approve-template-dynamic-form">
    <div class="approve-template-dynamic-form-model">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-spin :spinning="spinning" style="height: 70px;">
          <a-page-header style="border-bottom: 1px solid rgb(235, 237, 240)" title="审批信息"/>
          <div style="display:flex;margin-bottom:50px" v-if="isShowApprovalPerson">
            <div style="margin-left:50px; margin-top:15px; font-size:16px">审批人：</div>
            <div>
              <approval-man
                v-for="item in approveProcessesList"
                :key="item.id"
                :form="approveManageProcessPersonList"
                :mainProcess="item"
                :subProcess="item.childrenApproveProcesses"
                :approveStage="item.approveStage"
                :selectOption="userListOptions"
              />
            </div>
          </div>
          <!--展示项目、日期、时间等每项的组件-->
          <approve-template-dynamic-form-item
            ref="approveTemplateDynamicFormRef"
            :manageId="baseInfo.manageId"
            :extrasInfo="extrasInfo"
            :extrasInfoExt="extrasInfoExt"
            @changeExtrasInfo="changeExtrasInfo"
            @clearValidate="clearValidate"
            :form="form"
            :key="item.fieldGroupId"
            v-for="item in templateInfoList"   // 传递每个字段的信息
            :infoItem="item"
          ></approve-template-dynamic-form-item>
          <div
            class="approval-detail-card-item-content-process-content"
            v-if="baseInfo.approveProcessDetailList"
          >
            <span style="display: block">处理流程</span>
            <ApprovalStageShow
              :approveProcessDetailList="baseInfo.approveProcessDetailList"
            />
          </div>
        </a-spin>
      </a-form-model>
    </div>
    <div class="approve-template-dynamic-form-bottom">
      <a-space>
        <a-button @click="resetFormValue" :disabled="spinning">重置</a-button>
      </a-space>
      <a-space v-if="onlyShowCommit">
        <a-button
          :disabled="spinning"
          type="primary"
          @click="saveOrCommitEvent(ApproveStatusEnum.COMMIT)"
          >提交</a-button
        >
      </a-space>
      <a-space v-else>
        <slot
          name="bottomAction"
          :handelSlotButtonEvent="handelSlotButtonEvent"
        >
          <a-space>
            <span>自动创建</span>
            <a-switch
              checked-children="开"
              un-checked-children="关"
              :disabled="true"
              :checked="isAutoCreate"
              @change="handleChangeAutoSwitch"
            />
          </a-space>
          <a-button @click="saveOrCommitEvent(ApproveStatusEnum.SAVE)"
            >保存</a-button
          >
          <a-button
            :disabled="spinning"
            type="primary"
            @click="saveOrCommitEvent(ApproveStatusEnum.COMMIT)"
            >提交</a-button
          >
        </slot>
      </a-space>
    </div>
  </div>
</template>
<script>
import {
  ApproveStatusEnum,
  ApproveAutoCreateEnum,
  CustomPropertyIndex,
  ParamsTypeStringEnum
} from './constant'
import { getApproveTemplateDetailWithoutProcess } from '@/api/module-setting/approval'
import { startApproval } from '@/api/approveManage'
import { getUsersList } from '@/api/common'
import { paramTypeColumn } from '@/common/global'
import {
  validateInteger,
  validateFloat,
  validateRequired
} from '@/common/inspectFunction'
import { ApprovalManageListTypeEnum, OperationFlagEnum } from '@/common/global'
import { isJSON } from '@/common/util'
import { handleCustomExtraValidateRequired } from './comm/util'
import ApproveTemplateDynamicFormItem from './ApproveTemplateDynamicFormItem'
import ApprovalMan from './ApprovalMan'
import ApprovalStageShow from './ApprovalStageShow'
export default {
  props: {
    successCallback: {
      type: Function,
      default: () => () => {}
    }
  },
  components: {
    ApproveTemplateDynamicFormItem,
    ApprovalMan,
    ApprovalStageShow
  },
  data() {
    return {
      ApproveStatusEnum,
      ApproveStatusEnumInfo: {
        [ApproveStatusEnum.SAVE]: '保存',
        [ApproveStatusEnum.COMMIT]: '提交'
      },
      autoCreate: ApproveAutoCreateEnum.IS_AUTO_CREATE,
      // isAutoCreate: false,
      baseInfo: {},
      templateInfoList: [],
      oldFormValue: {}, // 旧的表单值
      form: {},
      rules: {},
      extrasInfo: {}, // 额外的附加信息
      extrasInfoExt: {}, // 额外的附加信息扩展 TODO
      spinning: false,
      approveProcessesList: [],
      approveManageProcessPersonList: {},
      userListOptions: [],
      isShowApprovalPerson: true,
      onlyShowCommit: false
    }
  },
  computed: {
    isAutoCreate() {
      return this.autoCreate === ApproveAutoCreateEnum.IS_AUTO_CREATE
    }
  },
  methods: {
    /**
     * 开启/关闭自动
     */
    handleChangeAutoSwitch(checked) {
      this.autoCreate = Number(checked)
    },
    /**
     * 改变额外的附加信息
     */
    changeExtrasInfo(field, value) {
      this.$set(this.extrasInfo, field, value)
    },
    /**
     * 清空指定字段的校验
     */
    clearValidate(field) {
      this.$refs.ruleForm.clearValidate(field)
    },
    /**
     * 重置表单
     */
    resetFormValue() {
      this.$refs.ruleForm.clearValidate()
      this.form = _.cloneDeep(this.oldFormValue)
      Array.isArray(this.$refs.approveTemplateDynamicFormRef) &&
        this.$refs.approveTemplateDynamicFormRef.forEach(item => {
          item.resetData()
        })
    },
    /**
     * 获取实例表单字段和值
     */
    getBusinessInfo(businessInfo = {}, isShowApprovalPerson = true) {
      this.isShowApprovalPerson = isShowApprovalPerson
      this.templateInfoList = businessInfo.approveTemplateValueGroupBoList || []
      this.baseInfo.businessTemplateId = businessInfo.businissTemplateId
      this.baseInfo.manageId = businessInfo.id
      this.baseInfo.approveProcessDetailList =
        businessInfo.approveProcessDetailList
      this.autoCreate = businessInfo.autoCreate
        ? businessInfo.autoCreate
        : this.autoCreate
      this.handleFormAndRules()
    },
    /**
     * 获取模板字段分组详情
     */
    async getTemplateDetail(id, defaultValue = {}) {
      this.spinning = true
      if (Object.keys(defaultValue).length) {
        this.onlyShowCommit = true
      }
      this.baseInfo.jobId = defaultValue?.id
      this.baseInfo.jobType = defaultValue?.jobType
      this.baseInfo.statusId = defaultValue?.statusId
      const res = await getApproveTemplateDetailWithoutProcess({
        id,
        jobType: defaultValue?.jobType,
        jobTypeBase: defaultValue?.jobTypeBase
      }).finally(() => {
        this.approveManageProcessPersonList = {}
        this.spinning = false
      })
      const users = JSON.parse(localStorage.getItem('personList'))
      this.templateInfoList = res.data?.approveFieldTemplateGroupList || []
      this.baseInfo.businessTemplateId = res.data?.id
      this.baseInfo.manageId = ''
      this.approveProcessesList = res.data?.approveProcessesBoList
      this.autoCreate = res.data.autoCreate
        ? res.data.autoCreate
        : ApproveAutoCreateEnum.IS_AUTO_CREATE
      if (Object.keys(defaultValue).length) {
        const jobMappingConfig = JSON.parse(res.data.jobMappingConfig)
        const props = {}
        for (const bolist of res.data.approveFieldTemplateGroupList) {
          for (const field of bolist.approveTemplateValueBoList) {
            const index = jobMappingConfig.find(item => {
              return (
                item.approveFieldName === field.approveFieldTemplateBo.fieldName
              )
            })
            if (
              field.approveFieldTemplateBo.fieldType === 80 &&
              index !== undefined
            ) {
              props[
                `${field.approveFieldTemplateBo.id}--${field.approveFieldTemplateBo.fieldType}`
              ] =
                field.approveFieldTemplateBo.multipleValue === 1
                  ? users.filter(user =>
                      defaultValue[index?.dataFieldName].includes(user.userId)
                    )
                  : users.find(user =>
                      defaultValue[index?.dataFieldName].includes(user.userId)
                    )
            } else {
              props[
                `${field.approveFieldTemplateBo.id}--${field.approveFieldTemplateBo.fieldType}`
              ] = defaultValue[index?.dataFieldName] || null
            }
          }
        }
        this.handleFormAndRules(props)
      } else {
        this.handleFormAndRules()
      }
      this.userListOptions = users
    },
    /**
     * TODO
     * 返回审批表单提交信息
     */
    approveFormInfo() {
      const target = []
      Object.keys(this.form).forEach(item => {
        target.push({
          extras: this.extrasInfo[item],
          fieldTemplateId: item.split('-')[
            CustomPropertyIndex.FIELD_TEMPLATE_ID
          ],
          fieldId: item.split('-')[CustomPropertyIndex.FIELD_ID],
          fieldValue:
            typeof this.form[item].mainInfo === 'string' ||
            item.split('-')[CustomPropertyIndex.FIELD_TYPE] ===
              ParamsTypeStringEnum.TIME
              ? this.form[item].mainInfo
              : JSON.stringify(this.form[item].mainInfo),
          approveTableBody:
            item.split('-')[CustomPropertyIndex.FIELD_TYPE] ===
            ParamsTypeStringEnum.TABLE
              ? this.form[item].mainInfo
              : null,
          operationFlag: this.form[item].operationFlag,
          extensionObj: this.form[item].extensionObj
        })
      })
      return target.filter(
        item => item.operationFlag !== OperationFlagEnum.READ_ONLY
      )
    },
    /**
     * 保存/提交 审批
     */
    async saveOrCommitEvent(type) {
      let flag = true
      if (ApproveStatusEnum.COMMIT === type) {
        flag = this.isPassFormValidate()
      }
      if (flag) {
        await this.startApproval(type, this.approveFormInfo())
        this.$emit('handleCancelDrawer')
      }
    },
    /**
     * 是否通过表单验证
     */
    isPassFormValidate() {
      let flag = false
      this.$refs.ruleForm.validate(valid => {
        flag = valid
      })
      return flag
    },
    /**
     * 保存/提交插槽按钮
     */
    handelSlotButtonEvent(callback, ...args) {
      this.isPassFormValidate() &&
        _.isFunction(callback) &&
        callback(...args, this.approveFormInfo())
    },
    /**
     * 发起/保存审批 => 后端
     */
    async startApproval(type, fieldValueList) {
      const res = await startApproval({
        ...Object.assign(this.baseInfo, {
          approveStatus: type,
          autoCreate: this.autoCreate
        }),
        approveFieldTemplateValueList: fieldValueList,
        approveManageProcessPersonList: this.getProcessPersonList()
      })
      this.$message.success(`${this.ApproveStatusEnumInfo[type]}成功`)
      if (type === ApproveStatusEnum.COMMIT) {
        this.$store.commit('SET_QUEREY_APPROVE_MANAGE_LIST_REQUEST_PARAMS', {
          type: ApprovalManageListTypeEnum.STARTED
        })
      }
      if (type === ApproveStatusEnum.SAVE) {
        this.$store.commit('SET_QUEREY_APPROVE_MANAGE_LIST_REQUEST_PARAMS', {
          type: ApprovalManageListTypeEnum.UNCOMMIT
        })
      }
      this.successCallback()
    },
    /**
     * 处理 form 表单和 rules
     */
    handleFormAndRules(props = {}) {
      this.extrasInfo = {}
      ;(this.form = {}), (this.rules = {})
      this.templateInfoList.forEach(element => {
        element.approveTemplateValueBoList.forEach(item => {
          const DYNAMIC_ID = `${item.approveFieldTemplateBo.id}-${item
            .approveFieldValueBo.id || ''}-${
            item.approveFieldTemplateBo.fieldType
          }`
          this.$set(
            this.extrasInfo,
            DYNAMIC_ID,
            item.approveFieldValueBo.extras || undefined
          )
          this.$set(
            this.extrasInfoExt,
            DYNAMIC_ID,
            item.approveFieldValueBo.projectName
          )
          // 将字段值处理成JSON格式传递给后端
          let tempJSON = undefined
          if (isJSON(item.approveFieldValueBo.fieldValue)) {
            tempJSON = JSON.parse(item.approveFieldValueBo.fieldValue)
          } else {
            tempJSON = item.approveFieldValueBo.fieldValue
          }
          this.$set(
            this.form,
            DYNAMIC_ID,
            tempJSON
              ? {
                  mainInfo: tempJSON,
                  operationFlag: item.operationFlag,
                  extensionObj: item.approveFieldValueBo.extensionObj || {}
                }
              : item.approveFieldTemplateBo.multipleValue === 1
              ? {
                  mainInfo: [],
                  operationFlag: item.operationFlag,
                  extensionObj: item.approveFieldValueBo.extensionObj || {}
                }
              : {
                  mainInfo: '',
                  operationFlag: item.operationFlag,
                  extensionObj: item.approveFieldValueBo.extensionObj || {}
                }
          )
          // 必填项
          if (item.approveFieldTemplateBo.required === 1) {
            this.rules[DYNAMIC_ID] =
              this.rules[DYNAMIC_ID] || this.$set(this.rules, DYNAMIC_ID, [])
            this.rules[DYNAMIC_ID].push({
              required: true
            })
            if (item.approveFieldTemplateBo.fieldType === 100) {
              this.rules[DYNAMIC_ID].push({
                validator: (...args) =>
                  handleCustomExtraValidateRequired(
                    args[0],
                    args[1].mainInfo,
                    args[2]
                  ),
                trigger: 'blur'
              })
            } 
            else {
              this.rules[DYNAMIC_ID].push({
                validator: (...args) =>
                  validateRequired(args[0], args[1].mainInfo, args[2]),
                trigger:
                  item.approveFieldTemplateBo.fieldType === 120
                    ? 'change'
                    : 'blur'
              })
            }
          }
          // 整数
          if (
            item.approveFieldTemplateBo.fieldType === paramTypeColumn.integer
          ) {
            this.rules[DYNAMIC_ID] =
              this.rules[DYNAMIC_ID] || this.$set(this.rules, DYNAMIC_ID, [])
            this.rules[DYNAMIC_ID].push({
              validator: (...args) =>
                validateInteger(args[0], args[1].mainInfo, args[2])
            })
          }
          // 浮点数
          if (item.approveFieldTemplateBo.fieldType === paramTypeColumn.float) {
            this.rules[DYNAMIC_ID] =
              this.rules[DYNAMIC_ID] || this.$set(this.rules, DYNAMIC_ID, [])
            this.rules[DYNAMIC_ID].push({
              validator: (...args) =>
                validateFloat(args[0], args[1].mainInfo, args[2])
            })
          }
        })
      })
      this.oldFormValue = _.cloneDeep(this.form)
      for (const item in props) {
        if (props[item]) {
          this.form[item].mainInfo = props[item]
        }
      }
    },
    getProcessPersonList() {
      const keys = Object.keys(this.approveManageProcessPersonList)
      const values = Object.values(this.approveManageProcessPersonList)
      const ret = []
      for (const index in keys) {
        ret.push({
          processId: keys[index],
          approvePersonList: values[index]
        })
      }
      return ret
    },
    clearData() {
      this.baseInfo = {}
      this.templateInfoList = []
      this.oldFormValue = {}
      this.form = {}
      this.rules = {}
      this.extrasInfo = {}
      this.extrasInfoExt = {}
      this.approveProcessesList = []
      this.approveManageProcessPersonList = {}
      this.userListOptions = []
    },
    /**
     * 人员接口
     */
    async getAllUser() {
      const { data } = await getUsersList({ state: 1 })
      localStorage.setItem('personList', JSON.stringify(data))
    }
  },
  created() {
    this.getAllUser()
  }
}
</script>
<style lang="scss" scoped>
.approve-template-dynamic-form {
  height: 100%;
  padding-bottom: 20px;
  .approve-template-dynamic-form-model {
    height: calc(100% - 30px);
    overflow-y: scroll;
  }
  .approve-template-dynamic-form-bottom {
    height: 50px;
    margin: 0 16px 0 8px;
    padding: 0 8px;
    // background-color: red;
    box-shadow: 0 0 2px 0 rgb(31 31 31 / 5%), 0 4px 6px 0 rgb(31 31 31 / 20%);
    display: flex;
    justify-content: space-between;
  }
  .approval-detail-card-item-content-process-content {
    margin-left: 10px;
  }
  .approval-detail-card-item-content-process-content-person {
    cursor: pointer;
  }
}
</style>

<template>
  <div class="approve-template-dynamic-form-item" v-if="infoItem.approveTemplateValueBoList && infoItem.approveTemplateValueBoList.length > 0">
    <a-card>
      <template v-slot:title>
        {{ infoItem.fieldGroupName }}
      </template>
      <div class="approve-template-dynamic-form-item-content">
        <a-row class="form-row" :gutter="16">
          <a-col
            :span="6"
            :key="item.approveFieldTemplateBo.id"
            v-for="item in infoItem.approveTemplateValueBoList"   // 每个字段信息分别展示的组件
          >
            <component
              ref="componentRef"
              v-bind="$attrs"
              v-on="$listeners"
              :form="form"
              :item="item"
              :is="ComponentName[item.approveFieldTemplateBo.fieldType]"
              :extrasInfo="extrasInfo"
              :info="{
                id: `${item.approveFieldTemplateBo.id}-${
                  item.approveFieldValueBo.id || ''
                }-${item.approveFieldTemplateBo.fieldType}`,
                label: item.approveFieldTemplateBo.fieldName,
                isMultiple: item.approveFieldTemplateBo.multipleValue === 1,
                isRequired: item.approveFieldTemplateBo.required === 1,
                preDefinedValues: item.approveFieldTemplateBo.extras || [],
                selectType: item.approveFieldTemplateBo.extrasType || -1,
                isAll: item.approveFieldTemplateBo.isAll === 1,
                disabled: item.operationFlag === OperationFlagEnum.READ_ONLY,
                relationTypeExtras: item.approveFieldTemplateBo.relationTypeExtras || {},
                instanceTypeExtras: item.approveFieldTemplateBo.instanceTypeExtras || {}
              }"
            ></component>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>
<script>
import { paramTypeColumn, OperationFlagEnum } from '@/common/global'
import TextAreaFieldCom from './fieldTypeComponent/TextAreaFieldCom'
import RadioSelectFieldCom from './fieldTypeComponent/RadioSelectFieldCom'
import MultipleSelectFieldCom from './fieldTypeComponent/MultipleSelectFieldCom'
import TimeFieldCom from './fieldTypeComponent/TimeFieldCom'
import ProductLinkFieldCom from './fieldTypeComponent/ProductLinkFieldCom'
import RelationFieldCom from './fieldTypeComponent/RelationFieldCom'
import TextOrIntegerOrFloatFIeldCom from './fieldTypeComponent/TextOrIntegerOrFloatFIeldCom'
import TableFieldCom from './fieldTypeComponent/TableFieldCom'
import ExtraAccessoryFieldCom from './fieldTypeComponent/ExtraAccessoryFieldCom'
import UserFieldCom from './fieldTypeComponent/UserFieldCom'
import UserGroupFieldCom from './fieldTypeComponent/UserGroupFieldCom'
import IdentificationFieldCom from './fieldTypeComponent/IdentificationFieldCom'
import TaskOrNoteFieldCom from './fieldTypeComponent/TaskOrNoteFieldCom'
import ProjectSelectFieldCom from './fieldTypeComponent/ProjectSelectFieldCom'
import DateFieldCom from './fieldTypeComponent/DateFieldCom'
export default {
  inheritAttrs: false,
  components: {
    TextAreaFieldCom,
    RadioSelectFieldCom,
    MultipleSelectFieldCom,
    TimeFieldCom,
    ProductLinkFieldCom,
    RelationFieldCom,
    TextOrIntegerOrFloatFIeldCom,
    TableFieldCom,
    ExtraAccessoryFieldCom,
    UserFieldCom,
    UserGroupFieldCom,
    IdentificationFieldCom,
    TaskOrNoteFieldCom,
    ProjectSelectFieldCom,
    DateFieldCom
  },
  props: {
    infoItem: {
      type: Object,
      default: () => ({}),
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    extrasInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      OperationFlagEnum,
      ComponentName: {
        [paramTypeColumn.text]: 'TextOrIntegerOrFloatFIeldCom',
        [paramTypeColumn.textArea]: 'TextAreaFieldCom',
        [paramTypeColumn.radioSelect]: 'RadioSelectFieldCom',
        [paramTypeColumn.multiSelect]: 'MultipleSelectFieldCom',
        [paramTypeColumn.integer]: 'TextOrIntegerOrFloatFIeldCom',
        [paramTypeColumn.float]: 'TextOrIntegerOrFloatFIeldCom',
        [paramTypeColumn.time]: 'TimeFieldCom',
        [paramTypeColumn.link]: 'ProductLinkFieldCom',
        [paramTypeColumn.task_note]: 'TaskOrNoteFieldCom',
        // TODO
        60: 'RelationFieldCom',
        // TODO
        70: 'TableFieldCom',
        // TODO
        80: 'UserFieldCom',
        // TODO
        90: 'UserGroupFieldCom',
        // TODO
        100: 'ExtraAccessoryFieldCom',
        // TODO
        110: 'IdentificationFieldCom',
        160: 'ProjectSelectFieldCom',
        170: 'DateFieldCom'
      },
    }
  },
  methods: {
    resetData() {
      Array.isArray(this.$refs.componentRef) && this.$refs.componentRef.forEach(item => {
        item.resetData && item.resetData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.approve-template-dynamic-form-item {
  padding: 0 8px 8px;
}
</style>

<template>
  <a-form-model-item :label="info.label" :prop="info.id">
    <a-date-picker :disabled="info.disabled" v-model="form[info.id].mainInfo" />
  </a-form-model-item>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    form: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

项目字段，根据单值还是多值展示不同的arco组件。

<template>
  <a-form-model-item :prop="info.id" :label="info.label">
    <a-select
      v-if="info.isMultiple"
      mode="multiple"
      :filterOption="filterOption"
      :disabled="info.disabled"
      :allowClear="true"
      show-search
      placeholder="请选择"
      @change="handleChange"
      :defaultValue="form[info.id].mainInfo"
    >
      <a-select-option
        :value="element.id"
        :key="element.id"
        v-for="(element, index) in project"
        >{{ element.projectName }}</a-select-option
      >
    </a-select>
    <a-select
      v-else
      :filterOption="filterOption"
      :disabled="info.disabled"
      :allowClear="true"
      show-search
      placeholder="请选择"
      @change="handleChange"
      :defaultValue="form[info.id].mainInfo"
    >
      <a-select-option
        :value="element.id"
        :key="element.id"
        v-for="(element, index) in project"
        >{{ element.projectName }}</a-select-option
      >
    </a-select>
  </a-form-model-item>
</template>
<script>
import { filterOption } from '@/views/settings/module/comm/util'
import { getProject } from '@/api/templateManagement'
export default {
  data() {
    return {
      project: []
    }
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    form: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    filterOption,
    async getProject() {
      const res = await getProject({
        notTemplate: 0,
        teamType: 3,
        projectTemplateId: '',
        pageIndex: 1,
        pageSize: -1
      })
      if (res.code === '200') {
        this.project = res.data
      }
    },
    handleChange(value) {
      // console.log(value)
      if (typeof value == 'string') {
        value = [value]
      }
      this.form[this.info.id].mainInfo = []
      value.forEach(item => {
        let proj = this.project.find(i => {
          return i.id === item
        })
        this.form[this.info.id].mainInfo.push({
          projectId: proj.id,
          projectName: proj.projectName
        })
      })
      // console.log(this.form[this.info.id])
    }
  },
  created() {
    this.getProject()
    this.form[this.info.id].mainInfo = []
  }
}
</script>
<style lang="scss" scoped></style>

审批详情页面：

<template>
  <a-card v-if="isShowDetail">
    <template v-slot:title>
      <a-tag :color="ApprovalStatusInfoEnum[dataInfo.approveStatus].color">{{
        ApprovalStatusInfoEnum[dataInfo.approveStatus].title
      }}</a-tag>
      <b v-if="dataInfo.approveBusinissTemplateBo">{{
        dataInfo.approveBusinissTemplateBo.templateName
      }}</b>
    </template>
    <template v-slot:extra> {{ dataInfo.createTime }} </template>
    <div class="approval-detail-card-item-content">
      <div v-if="dataInfo.labNoteApproveRecords">
        <div class="item approval-key">审批实验:</div>
        <div
          class="item approval-note"
          :key="item.id"
          v-for="item in dataInfo.labNoteApproveRecords"
        >
          <div>
            <a
              @click="handleApprovalNoteClick(item)"
              :style="{ marginRight: '8px' }"
            >
              <svg-icon
                icon-class="note"
                :style="{
                  fontSize: '14px',
                  color: '#08979c'
                }"
              />
              {{ item.noteName }}</a
            >
            {{ `负责人： ${item.noteLeaderName || '未指派'}` }}
          </div>
        </div>
      </div>
      <div class="item approval-key">申请人:</div>
      <a-avatar icon="user" />
      {{ dataInfo.createMan }}
      <div class="item approval-key">审批编号:</div>
      {{ dataInfo.manageNo }}
      <div
        class="item"
        :key="item.approveFieldTemplateBo.id"
        v-for="item in dataInfo.approveTemplateValueBoList"
      >
        <span
          v-if="paramTypeColumn.table === item.approveFieldTemplateBo.fieldType"
        >
          <div class="approval-key">
            {{ item.approveFieldTemplateBo.fieldName }}:
          </div>
          <a-button
            size="small"
            @click="
              showTableParams(
                dataInfo.id,
                item.approveFieldTemplateBo.id,
                item.approveFieldTemplateBo.fieldName
              )
            "
            ><a-icon type="fullscreen" />展开表格</a-button
          >
        </span>
        <span
          v-else-if="
            paramTypeColumn.table !== item.approveFieldTemplateBo.fieldType
          "
          >
          <div class="approval-key">
            {{ item.approveFieldTemplateBo.fieldName }}:
          </div>
          <span
            v-if="
              paramTypeColumn.extra === item.approveFieldTemplateBo.fieldType
            "
          >
            <a-space>
              <template
                v-for="(item, index) in handleExtraParams(
                  item.approveFieldValueBo.fieldValue
                )"
              >
                <span
                  @click.stop="
                    customDownloadFile({
                      fileName: item.fileName,
                      relativePath: item.relativePath
                    })
                  "
                  style="color: #1890ff; cursor: pointer"
                  :key="index"
                >
                  <a-icon type="download" /> {{ item.fileName }}
                </span>
              </template>
            </a-space>
          </span>
          <a-table
            v-else-if="
              paramTypeColumn.relation === item.approveFieldTemplateBo.fieldType
            "
            :columns="realationColumns"
            :data-source="getRelationTableData(item.approveFieldValueBo)"
            :pagination="false"
          >
            <template v-slot:name="name,record">
              <span :class="{'light-height': isShowProtocolExtra(record.operationFlag)}" @click="isShowProtocolExtra(record.operationFlag) ? handleSubService(record) : () => {}">{{name}}</span>
            </template>
          </a-table>
          <a-table
            v-else-if="
              paramTypeColumn.task_note ===
                item.approveFieldTemplateBo.fieldType
            "
            :columns="taskAndNoteColumns"
            :data-source="item.approveFieldValueBo.jobBOList"
            :pagination="false"
            :expandIconAsCell="false"
            :expandIconColumnIndex="-1"
          >
            <a
              slot="name"
              slot-scope="text, item"
              @click="handleNoteClick(item)"
            >
              <svg-icon
                slot="avatar"
                :icon-class="item.jobType === 30 ? 'task' : 'note'"
                :style="{
                  fontSize: '14px',
                  color: item.jobType === 30 ? '#2F54EB' : '#08979c'
                }"
              />
              {{ text }}</a
            >
            <span slot="jobType" slot-scope="text">{{
              DiffTypeShowInfo[text]
            }}</span>
            <span slot="path" slot-scope="text">{{
              showPath(text)
            }}</span>
          </a-table>
          <span v-else>
            {{
              transformData(
                item.approveFieldValueBo.fieldValue,
                item.approveFieldTemplateBo.multipleValue === 1,
                item.approveFieldTemplateBo.fieldType,
                item
              )
            }}
            <!-- <template
              v-if="
                paramTypeColumn.relation ===
                  item.approveFieldTemplateBo.fieldType
              "
            >
              <a-space>
                <a-button
                  :disabled="
                    isDisabledSkip ||
                      !(
                        dataInfo.approveStatus ===
                        ApprovalStatusEnum.APPROVE_PASS
                      )
                  "
                  size="small"
                  @click="handleSkipProject(item.approveFieldValueBo.extras)"
                  style="color: #1890ff;"
                  >{{ item.approveFieldValueBo.projectName }}</a-button
                >
                <a-tag
                  v-if="
                    item.approveFieldValueBo.extensionObj &&
                      item.approveFieldValueBo.extensionObj.referenceName
                  "
                  >{{
                    item.approveFieldValueBo.extensionObj.referenceName
                  }}</a-tag
                >
              </a-space>
            </template> -->
          </span>
        </span>
      </div>
      <a-divider />
      <div class="approval-detail-card-item-content-process">
        <span style="display: block">处理流程</span>
        <div class="approval-detail-card-item-content-process-content">
          <ApprovalStageShow
            :approveProcessDetailList="dataInfo.approveProcessDetailList"
          />
        </div>
      </div>
    </div>
    <relation-field-com-modal ref="relationFieldComModalRef" />
    <ApprovalComment :approveManageId="dataInfo.id" />
  </a-card>
</template>
<script>
import { ApprovalStatusInfoEnum, ApprovalStatusEnum, JOB_TYPE } from '@/common/global'
import { handleDiffFieldMixins } from './mixins'
import { isShowProtocolExtra } from './comm/util'
import ApprovalStageShow from './ApprovalStageShow'
import ApprovalComment from './ApprovalComment'
import RelationFieldComModal from './fieldTypeComponent/components/RelationFieldComModal'
import action from '@/micro-store'
const realationColumns = [
  {
    title: '名称',
    dataIndex: 'referenceName',
    key: 'referenceName',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '附表类型',
    dataIndex: 'referenceTypeName',
    key: 'referenceTypeName'
  },
  {
    title: '负责人',
    dataIndex: 'leaderName',
    key: 'leaderName'
  },
  {
    title: '成员',
    dataIndex: 'membersName',
    key: 'membersName'
  },
  {
    title: '计划时间',
    dataIndex: 'plannedTime',
    key: 'plannedTime'
  },
  {
    title: '计划时长',
    dataIndex: 'plannedDuration',
    key: 'plannedDuration'
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
    key: 'projectName'
  },
  {
    title: '关联任务',
    dataIndex: 'realationTask',
    key: 'realationTask'
  }
]
const taskAndNoteColumns = [
  {
    title: '名称',
    dataIndex: 'jobName',
    key: 'jobName',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '类型',
    dataIndex: 'jobType',
    key: 'jobType',
    scopedSlots: { customRender: 'jobType' }
  },
  {
    title: '状态',
    dataIndex: 'jobStatusName',
    key: 'jobStatusName'
  },
  {
    title: '所属',
    dataIndex: 'jobPathBoList',
    key: 'jobPathBoList',
    scopedSlots: { customRender: 'path' }
  }
]
export default {
  props: {
    isDisabledSkip: {
      type: Boolean,
      default: () => false
    },
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    ApprovalStageShow,
    ApprovalComment,
    RelationFieldComModal
  },
  computed: {
    isShowDetail() {
      return !_.isEmpty(this.dataInfo)
    },
    DiffTypeShowInfo() {
      return {
        [JOB_TYPE.note]: '实验记录',
        [JOB_TYPE.task]: '任务'
      }
    }
  },
  mixins: [handleDiffFieldMixins],
  data() {
    return {
      taskAndNoteColumns,
      realationColumns,
      ApprovalStatusInfoEnum,
      ApprovalStatusEnum
    }
  },
  methods: {
    isShowProtocolExtra,
    handleApprovalNoteClick(note) {
      window.open(`/#/approval-note-preview/${note.id}/${note.noteName}`)
    },
    /**
     *
     */
    handleSubService(record) {
      const { referenceId: protocolId, fieldTemplateId } = record || {}
      action.setGlobalState({
        protocolId: protocolId,
        fieldTemplateId: fieldTemplateId,
        isOnlyShow: true,
        // 2 代表批复阶段
        approveProcessType: 2
      })
      this.$refs.relationFieldComModalRef.openModalEvent(true)
    },
    /**
     * 点击跳转
     */
    handleSkipProject(projectId) {
      this.$router.push({
        name: 'projectStatus',
        params: {
          projectId: projectId
          // type: "7",
        }
      })
    },
    getRelationTableData(props) {
      const data = JSON.parse(props.fieldValue) || []
      return data.map(item => {
        return {
          ...item,
          fieldTemplateId: props.fieldTemplateId,
          projectName: props.projectName,
          realationTask: props.extensionObj.referenceName
        }
      })
    },
    handleNoteClick(item) {
      if (item.jobType === JOB_TYPE.note) {
        window.open(`/#/preview/${item.id}/${item.jobName}`)
      }
    },
    showPath(path) {
      // console.log('path', path)
      return path
        .map(item => item.jobName)
        .slice(0, -1)
        .join('>')
    }
  },
  // created() {
  //   console.log(this.dataInfo);
  // }
}
</script>
<style lang="scss" scoped>
.approval-detail-card-item-content {
  .item {
    margin: 8px 0;
  }
  .approval-key {
    margin-top: 16px;
    color: #bfbfbf;
  }
}
.approval-detail-card-item-content-process-content {
  padding-top: 8px;
}
.approval-detail-card-item-content-process-content-person {
  cursor: pointer;
}
.light-height {
  color: #1890ff;
  cursor: pointer;
}
</style>

import { getApproveFieldTable } from '@/api/fieldTable'
import { paramTypeColumn } from '@/common/global'
import { downloadFile } from '@/common/util'
import { downloadFile as asyncDownloadFile } from '@/api/fileTransfer'
import { isJSON } from '@/common/util'
import TableParamsDrawer from '../fieldTypeComponent/components/TableParamsDrawer'
import moment from 'moment'
export const handleDiffFieldMixins = {
  components: {
    TableParamsDrawer,
  },
  data() {
    return {
      paramTypeColumn: { ...paramTypeColumn, relation: 60, table: 70, extra: 100, project: 160, date: 170 },
      handleDiffFieldType: {
        [paramTypeColumn.text]: this.handleOtherParams,
        [paramTypeColumn.textArea]: this.handleOtherParams,
        [paramTypeColumn.radioSelect]: this.handleOtherParams,
        [paramTypeColumn.multiSelect]: this.handleOtherParams,
        [paramTypeColumn.integer]: this.handleOtherParams,
        [paramTypeColumn.float]: this.handleOtherParams,
        [paramTypeColumn.time]: this.handleTimeParams,
        [paramTypeColumn.link]: this.handlePolyParams,
        [paramTypeColumn.task_note]: this.handleTaskAndNoteParams,
        60: this.handlePolyParams,
        80: this.handleUserParams,
        90: this.handleUserGroupParams,
        100: this.handleExtraParams,
        110: this.handleOtherParams,
        160: this.handleProjectParams,
        170: this.handleTimeParams2,
      },
      tableParams: {}, // 特殊 表格参数
      tableFieldInfo: {},
    }
  },
  methods: {
    customDownloadFile({ fileName, relativePath }) {
      downloadFile({ fileName, relativePath }, asyncDownloadFile)
    },
    /**
     * 根据不同类型是否多值转化后端给的数据
     */
    transformData(value, isMultiple, fieldType,item) {
      if (this.handleDiffFieldType[fieldType]) {
        return this.handleDiffFieldType[fieldType](value, isMultiple,item)
      }
    },
    /**
     * protocol/任务模板/产品
     */
    handlePolyParams(value) {
      const targetValues = JSON.parse(value) || []
      const showValues = targetValues.map(element => {
        return element.referenceName
      })
      return showValues.join('、')
    },
    /**
     * 处理附件
     */
    handleExtraParams(value) {
       const fieldValue = JSON.parse(value) || {}
       fieldValue.infoList = fieldValue.infoList || []
       return fieldValue.infoList
    },
    handleTaskAndNoteParams(value, isMultiple,item) {
      if(item){
        return item.approveFieldValueBo.jobBOList.map(item => item.jobName).join(', ')
      }
    },
    /**
     * 处理其他参数类型
     */
    handleOtherParams(value, isMultiple) {
      if (isMultiple) {
        let targetValue = JSON.parse(value) || []
        return targetValue.join('、')
      }
      return value
    },
    /**
     * 处理用户类型参数
     */
    handleUserParams(values, isMultiple) {
      if (!isJSON(values)) {
        values = JSON.stringify(values)
      }
      if (isMultiple) {
        let targetValues = JSON.parse(values) || []
        return targetValues.map(item => item.userNameCn).join('、')
      } else {
        return JSON.parse(values)?.userNameCn
      }
    },
    /**
     * 处理用户组
     */
     handleUserGroupParams(values) {
       let targetValues = JSON.parse(values) || []
       return targetValues.map(item => item.organizationalStructureName).join('、')
     },
    /**
     * 处理时间型参数
     */
    handleTimeParams(value) {
      if (value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return value
      }
    },
    /**
     * 处理时间型参数，日期格式
     */
     handleTimeParams2(value) {
      if (value) {
        return moment(value).format('YYYY-MM-DD')
      } else {
        return value
      }
    },
    /**
     * 处理项目类型参数
     */
    handleProjectParams(value, isMultiple) {
      let arr = JSON.parse(value) || []
      // console.log(arr)
      if (typeof arr !== 'object') return arr
      return arr.map(item => item.projectName).join('、')
    },
    /**
     * 展开表格参数
     */
    async showTableParams(manageId, fieldTemplateId, title) {
      this.$set(this.tableFieldInfo, 'title', title)
      await this.getApproveFieldTable(manageId, fieldTemplateId)
      this.$refs.tableParamsDrawerRef.openDrawerEvent(
        this.tableParams
      )
    },
    /**
     * 根据审批实例id 字段模板id 获取表格
     */
    async getApproveFieldTable(manageId, fieldTemplateId) {
      const res = await getApproveFieldTable({
        approveManageId: manageId,
        fieldTemplateId: fieldTemplateId,
      })
      if (res.code === '200') {
        this.tableParams = res.data
      }
    },
  },
}