mosr-web/src/components/DetailComponent/ApprovalDetail.vue

<template>
  <div v-loading="loading">
    <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
    <el-form :model="formData" label-width="auto">
      <file-component :title="getTagName(type)+'附件'" :tag="getTagName(type)"
                      v-model:value="formData.fileList" :processViewer="processViewer"
                      :file-list-show="fileListShow"/>
    </el-form>
    <div v-if="data.taskId">
      <baseTitle title="审核意见"></baseTitle>
      <el-form-item prop="_value">
        <el-input
            v-model="_value"
            :rows="3"
            type="textarea"
            placeholder="请输入审核意见"
        />
      </el-form-item>
    </div>
    <div class="approval-record">
      <div class="approval-title">
        <baseTitle title="审批记录"></baseTitle>
        <div class="diagram">
          <div class="base-title">流程图</div>
          <el-switch
              v-model="changeDiagram"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
          />
        </div>
      </div>
      <div class="process">
        <operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
                          :operation-list="data.operationList"
                          :state="data.state"/>
        <process-diagram-viewer v-if="processViewer&&changeDiagram" :id-name="idName?idName:type"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
import OperationRender from '@/views/workflow/common/OperationRender.vue'
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
import {ElLoading} from 'element-plus';
import {downloadFile} from "@/api/project-demand";

const changeDiagram = ref(false)
const props = defineProps({
  formData: {
    type: Object,
    default: {}
  },
  data: {
    type: Object,
    default: {}
  },
  processViewer: {
    type: Boolean,
    default: false
  },
  companyOption: {
    type: Array,
    default: []
  },
  fileListShow: {
    type: String,
    default: 'READ'
  },
  // approval 立项, execute 实施, 归档 archivist
  type: {
    type: String,
    default: 'approval'
  },
  loading: {
    type: Boolean,
    default: false
  },
  value: {
    type: String,
    default: ''
  },
  idName: {
    type: String,
    default: ''
  }
})
const form = ref()
const schema = computed(() => {
  let arr
  if (props.type == 'approval') {
    arr = [
      {
        label: '前置流程',
        prop: 'preProcess',
        colProps: {
          span: 24
        },
        component: () => (
            <div>
              {
                props.formData.preProcess ? props.formData.preProcess.map(item => {
                  return <span><a target="_blank" style={{color: '#409EFF', cursor: 'pointer'}}
                                  href={props.formData.preProcessBaseUrl + item.requestId}>{item.requestName}</a> </span>
                }) : <span>{'--'}</span>
              }
            </div>
        )
      },
      {
        label: '项目立项附件',
        prop: 'singleFile',
        colProps: {
          span: 24
        },
        component: () => (
            <div>
              {
                props.formData.singleFile?.originalFileName ?
                    <span
                        style={{color: '#409EFF', cursor: 'pointer'}}
                        onClick={() => handleDownload(props.formData.singleFile)}
                    >
                {props.formData.singleFile?.originalFileName}
              </span> :
                    <span>{'--'}</span>
              }
            </div>

        )
      },
    ]
  } else if (props.type == 'execute') {
    arr = [
      {
        label: '前置流程',
        prop: 'preProcess',
        colProps: {
          span: 24
        },
        component: () => (
            <div>
              {
                props.formData.preProcess ? props.formData.preProcess.map(item => {
                  return <span><a target="_blank" style={{color: '#409EFF', cursor: 'pointer'}}
                                  href={props.formData.preProcessBaseUrl + item.requestId}>{item.requestName}</a> </span>
                }) : <span>{'--'}</span>
              }
            </div>
        )
      },
      {
        label: '项目验收附件',
        prop: 'singleFile',
        colProps: {
          span: 24
        },
        component: () => (
            <div>
              {
                props.formData.singleFile?.originalFileName ?
                    <span
                        style={{color: '#409EFF', cursor: 'pointer'}}
                        onClick={() => handleDownload(props.formData.singleFile)}
                    >
                {props.formData.singleFile?.originalFileName}
              </span> :
                    <span>{'--'}</span>
              }
            </div>

        )
      },
    ]
  } else if (props.type == 'archivist') {
    arr = [
      {
        label: '项目归档附件',
        prop: 'singleFile',
        colProps: {
          span: 24
        },
        component: () => (
            <div>
              {
                props.formData.singleFile?.originalFileName ?
                    <span
                        style={{color: '#409EFF', cursor: 'pointer'}}
                        onClick={() => handleDownload(props.formData.singleFile)}
                    >
                {props.formData.singleFile?.originalFileName}
              </span> :
                    <span>{'--'}</span>
              }
            </div>

        )
      },
    ]
  } else if (props.type == 'phase') {
    arr = [
      {
        label: '阶段变更附件',
        prop: 'singleFile',
        colProps: {
          span: 24
        },
        component: () => (
            <div>
              {
                props.formData.singleFile?.originalFileName ?
                    <span
                        style={{color: '#409EFF', cursor: 'pointer'}}
                        onClick={() => handleDownload(props.formData.singleFile)}
                    >
                {props.formData.singleFile?.originalFileName}
              </span> :
                    <span>{'--'}</span>
              }
            </div>

        )
      },
    ]
  }
  return arr
})

const emit = defineEmits(['update:value'])
const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("update:value", val);
  }
})

const getTagName = (type) => {
  switch (type) {
    case 'approval':
      return '项目立项'
    case 'execute':
      return '项目实施'
    case 'archivist':
      return '项目归档'
    case 'phase':
      return '阶段变更'
  }
}
const handleDownload = (row) => {
  const loading = ElLoading.service({fullscreen: true})
  downloadFile(row.fileId).then(res => {
    const blob = new Blob([res])
    let a = document.createElement('a')
    a.href = URL.createObjectURL(blob)
    a.download = row.originalFileName
    a.click()
    loading.close()
  })
}
watchEffect(() => {
  Object.keys(props.formData).length && (form.value?.setValues(props.formData))
})

watch(() => props.loading, (newVal) => {
  props.loading = newVal
}, {deep: true})
</script>

<style lang="scss" scoped>

</style>