feat: 初始化

src/components/AttachmentUpload.vue

@@ -0,0 +1,554 @@
+<template>
+  <el-form :model="formData" ref="applyForm" :rules="rules" :label-position="labelPosition" style="margin-left: 5px">
+    <el-row>
+      <!--      <el-col :span="24">-->
+      <!--        <el-form-item :label="label" prop="attachment" >-->
+      <!--          <template v-if="preview">-->
+      <!--            <file-upload @getFile="getAttachment" :multiple="false"-->
+      <!--                         :disabled="singleFileArray?.length>0?true:false" title="如需修改需求申请书附件，请先删除文件再上传！"/>-->
+      <!--            <fvTable style="width: 100%;max-height: 80px;" height="80" v-if="singleFileArray?.length>0"-->
+      <!--                     :tableConfig="editSingleTableConfig"-->
+      <!--                     :data="singleFileArray" :isSettingCol="false" :pagination="false">-->
+      <!--            </fvTable>-->
+      <!--          </template>-->
+      <!--          <template v-else-if="!preview">-->
+      <!--            <file-upload @getFile="getAttachment" :multiple="false"-->
+      <!--                         :disabled="isSingleFile"/>-->
+      <!--            <fvTable style="width: 100%;max-height: 80px;" v-if="showSingleTable" height="80"-->
+      <!--                     :tableConfig="singleTableConfig"-->
+      <!--                     :data="_singleFileValue" :isSettingCol="false" :pagination="false">-->
+      <!--            </fvTable>-->
+      <!--          </template>-->
+      <!--        </el-form-item>-->
+      <!--      </el-col>-->
+      <el-col :span="24">
+        <el-form-item :label="label" prop="" required>
+          <file-upload @getFile="getOtherFile"/>
+          <el-button color="#DED0B2" v-if="templateDownloadBtnShow" @click="handleImportTemplateDownload"
+                     style="margin-left: 10px">模板下载
+          </el-button>
+          <fvTable style="width: 100%;max-height: 160px;" v-if="showTable" height="160" :tableConfig="tableConfig"
+                   :data="allFileList" :isSettingCol="false" :pagination="false">
+            <template #empty>
+              <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
+            </template>
+          </fvTable>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+  <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
+                :fileUrl="filePreviewParam.fileUrl"
+                :fileType="filePreviewParam.fileType"/>
+</template>
+
+<script setup lang="jsx">
+import FileUpload from '@/components/FileUpload.vue'
+import {deleteFile, downloadFile, downloadTemplate, downloadTemplateZip} from "@/api/project-demand";
+import {ElMessageBox, ElNotification} from "element-plus";
+
+
+const props = defineProps({
+  showFileList: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: '项目附件'
+  },
+  showTable: {
+    type: Boolean,
+    default: false
+  },
+  showSingleTable: {
+    type: Boolean,
+    default: false
+  },
+  preview: {
+    type: Boolean,
+    default: false
+  },
+  //是否显示模板下载按钮
+  templateDownloadBtnShow: {
+    type: Boolean,
+    default: false
+  },
+  //模板下载时的文件名
+  templateName: {
+    type: String,
+    default: ''
+  },
+  singleList: {
+    type: Array,
+    default: []
+  },
+  otherFileList: {
+    type: Array,
+    default: []
+  },
+  formData: {
+    type: Object,
+    default: {}
+  },
+  labelPosition: {
+    type: String,
+    default: ''
+  },
+  tag: {
+    type: String,
+    default: ''
+  }
+})
+const emit = defineEmits(["getAttachment", "getOtherFile", "update:singleList"])
+
+const baseTableConf = reactive(
+    [
+      {
+        prop: 'index',
+        type: 'index',
+        label: '序号',
+        align: 'center',
+        width: '80',
+      },
+      {
+        prop: 'originalFileName',
+        label: '文件名',
+        align: 'center',
+        width: 400,
+        currentRender: ({row, index}) => (
+            <div style="color: #2a99ff;cursor: pointer;"
+                 onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
+      },
+      {
+        prop: 'tag',
+        label: '标签',
+        align: 'center'
+      },
+      {
+        prop: 'size',
+        label: '文件大小',
+        align: 'center',
+        currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+      },
+    ]
+)
+const tableConfig = reactive({
+  columns: [
+    ...baseTableConf,
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile || props.preview || !props.preview ?
+                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                        // perm={['']}
+                                    onDelete={() => handleDelete(row)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
+const singleTableConfig = reactive({
+  columns: [
+    ...baseTableConf,
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile || props.preview || !props.preview ?
+                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                        // perm={['']}
+                                    onDelete={() => handleSingleDelete(row)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
+const editSingleTableConfig = reactive({
+  columns: [
+    ...baseTableConf,
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile || props.preview || !props.preview ?
+                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                        // perm={['']}
+                                    onDelete={() => deleteSingleFile(row, 1)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
+const singleFileArray = ref([])
+const rules = reactive({
+  // attachment: [{required: true, message: '请上传附件', trigger: ['blur', 'change']}],
+})
+const applyForm = ref()
+const singleFile = ref({})
+const isSingleFile = ref(false)
+const isHaveOneFile = ref(false)
+const allFileList = ref([])
+if (localStorage.getItem('singleFile')) {
+  singleFileArray.value.push(JSON.parse(localStorage.getItem('singleFile')))
+  singleFile.value = JSON.parse(localStorage.getItem('singleFile'))
+}
+
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewRef = ref()
+const filePreviewShow = ref(false)
+
+const _singleFileValue = computed({
+  get() {
+    return props.singleList;
+  },
+  set(value) {
+    emit('update:singleList', value)
+  }
+})
+const _otherFileListValue = computed({
+  get() {
+    return props.otherFileList;
+  },
+  set(value) {
+    emit('update:otherFileList', value)
+  }
+})
+if (_otherFileListValue.value && _otherFileListValue.value.length > 0) {
+  isHaveOneFile.value = true
+  _otherFileListValue.value.forEach(item => {
+    allFileList.value.push(item)
+  })
+}
+// watch(() => props.showSingleTable, (newVal) => {
+//   props.showSingleTable = newVal
+// }, {deep: true})
+watch(() => props.formData.fileList, (newVal) => {
+  if (props.preview) {
+    newVal?.forEach(item => {
+      isHaveOneFile.value = true
+      allFileList.value.push(item)
+    })
+  }
+}, {immediate: true})
+
+watch(() => props.formData.singleFile, (newVal) => {
+  props.formData.singleFile = newVal
+  if (newVal != null) {
+    singleFileArray.value.push(newVal)
+  } else {
+    singleFileArray.value = []
+  }
+  singleFile.value = newVal
+}, {immediate: true})
+
+
+// watch(() => props.otherFileList, (newVal) => {
+//   props.otherFileList=newVal
+// if (props.preview) {
+//   console.log('newotherFileList', newVal,props.preview,props.formData.fileList)
+//   if (props.formData.fileList === null || props.formData.fileList?.length === 0) {
+//     allFileList.value = newVal
+//   } else {
+//     console.log('props.otherFileList',props.otherFileList)
+//     // props.otherFileList?.forEach(item => {
+//     //   allFileList.value.push(item)
+//     // })
+//   }
+// } else {
+//   allFileList.value = newVal
+// }
+// }, {deep: true})
+watch(() => props.showTable, (newVal) => {
+  props.showTable = newVal
+}, {deep: true})
+// watch(() => props.singleList, (newVal) => {
+//   console.log('singleFile', newVal)
+//   singleFileList.value = newVal
+// }, {deep: true})
+
+watch(() => isSingleFile.value, (newVal) => {
+  isSingleFile.value = newVal
+}, {deep: true})
+watch(() => isHaveOneFile.value, (newVal) => {
+  isHaveOneFile.value = newVal
+}, {deep: true})
+// watch(() => singleFile.value, (newVal) => {
+//   singleFile.value = newVal
+// }, {deep: true})
+
+
+const handleImportTemplateDownload = async () => {
+  console.info("🚀 ~method:handleImportTemplateDownload -----", props.tag)
+  let templateType = ''
+  let templateTypeList = ''
+  let isZip = false
+  if (props.tag === '需求上报') {
+    templateType = '2'
+    isZip = false
+  } else if (props.tag === '项目立项') {
+    templateTypeList = '5,6'
+    isZip = true
+  } else if (props.tag === '项目验收') {
+    templateType = '7'
+    isZip = false
+  } else if (props.tag === '阶段变更') {
+    templateTypeList = '8,9'
+    isZip = true
+  }
+  let res = ''
+  if (isZip) {
+    res = await downloadTemplateZip(templateTypeList)
+    let fileName = props.templateName +'.zip'
+    const blob = new Blob([res.data])
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = fileName
+    a.click()
+  } else {
+    res = await downloadTemplate(templateType)
+    const blob = new Blob([res])
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = props.templateName + ".docx"
+    a.click()
+  }
+
+}
+
+
+const clickToPreview = (row) => {
+  filePreviewShow.value = false
+  console.log('clickToPreview', row, row.fileType)
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(() => {
+    filePreviewShow.value = true
+  })
+  // filePreviewRef.value.show()
+}
+
+
+const handleDelete = (row, type) => {
+  deleteFile(row.fileId).then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      if (type === 'single') {
+        _singleFileValue.value.splice(_singleFileValue.value.findIndex((item) => item.fileId === row.fileId), 1);
+        isSingleFile.value = false
+      } else {
+        allFileList.value.splice(allFileList.value.findIndex((item) => item.fileId === row.fileId), 1);
+        if (allFileList.value && allFileList.value?.length == 0) {
+          isHaveOneFile.value = false
+        } else {
+          isHaveOneFile.value = true
+        }
+        if (localStorage.getItem('collectData')) {
+          let collectData = JSON.parse(localStorage.getItem('collectData'))
+          collectData.fileList = allFileList.value
+          localStorage.setItem('collectData', JSON.stringify(collectData))
+        }
+      }
+    }
+  });
+}
+const handleSingleDelete = (row) => {
+  handleDelete(row, 'single')
+}
+const getAttachment = (val) => {
+  isSingleFile.value = true
+  emit('getAttachment', val)
+}
+const compositeParam = (item) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: true,
+    tag: props.tag
+  }
+}
+const getOtherFile = (val) => {
+  if (props.preview) {
+    allFileList.value.push(compositeParam(val))
+  } else {
+    allFileList.value = _otherFileListValue.value
+  }
+  isHaveOneFile.value = true
+  emit('getOtherFile', val)
+}
+const deleteAttachment = (val) => {
+  deleteFile(val).then(res => {
+    if (res.code === 1000) {
+      ElNotification({
+        title: '提示',
+        message: "删除成功",
+        type: 'success'
+      })
+      isSingleFile.value = false
+      singleFile.value = null
+      singleFileArray.value = []
+    }
+  });
+}
+const deleteSingleFile = (row, type) => {
+  ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的文件吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteFile(row.fileId).then(res => {
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: res.code === 1000 ? 'success' : 'error'
+      })
+      if (res.code === 1000) {
+        isSingleFile.value = false
+        if (type === 1) {
+          singleFile.value = null
+          singleFileArray.value = []
+        } else {
+          props.otherFileList.splice(props.otherFileList.findIndex((item) => item.fileId === row.fileId), 1);
+        }
+      }
+    });
+  }).catch(() => {
+    ElNotification({
+      title: '提示',
+      message: "用户取消删除! ",
+      type: 'warning'
+    })
+  })
+}
+const handleDownload = (row) => {
+  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()
+  })
+}
+defineExpose({
+  validate() {
+    return applyForm.value.validate()
+  },
+  clearValidate() {
+    return applyForm.value.clearValidate()
+  },
+  allFileList,
+  singleFile,
+  isSingleFile,
+  isHaveOneFile,
+})
+</script>
+
+<style scoped>
+:deep(.el-table--fit ) {
+  height: 300px !important;
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -22px !important;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -11px !important;
+    }
+  }
+}
+</style>

src/components/DetailComponent/AllocationSummaryDetail.vue

@@ -0,0 +1,110 @@
+<template>
+  <el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportExcelHandler">导出</el-button>
+  <el-table ref="table" :data="tableData" style="width: 100%;height: 479px" :show-summary="true" border
+            :summary-method="getSummaries" v-loading="loading" :header-cell-style="{background:'#f5f7fa'}">
+    <el-table-column type="index" label="序号" align="center" width="60"/>
+    <el-table-column prop="projectName" label="项目名称" align="center"/>
+    <el-table-column prop="projectCost" label="费用性质" align="center">
+      <template #default="scope">
+        <div v-if="scope.row.projectCost !== null">
+          <Tag dictType="project_cost" :value="scope.row.projectCost"/>
+        </div>
+        <div v-else>--</div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="researchStage" label="研发阶段" align="center">
+      <template #default="scope">
+        <div v-if="scope.row.researchStage !== null && scope.row.researchStage !== null && scope.row.researchStage !== undefined">
+          <el-tag effect="plain">{{scope.row.researchStage==1?'开发阶段':'研究阶段'}}</el-tag>
+        </div>
+        <div v-else>--</div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="afterTax" label="分摊金额" align="center">
+      <template #default="scope">
+        <div v-if="scope.row.afterTax !== null">
+          <!--          {{ toThousands(scope.row.afterTax) }}-->
+          {{ scope.row.afterTax }}
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <!--          <Tag dictType="research_stage" :value="scope.row.researchStage"/>-->
+</template>
+
+<script setup>
+import {getAllocationSummaryDetails} from "@/api/expense-manage";
+import {shareExportExcel} from "@/api/expense-manage";
+
+const props = defineProps({
+  allocationName :{
+    type: String,
+    default: ''
+  }
+})
+
+const tableData = ref()
+const loading = ref(false)
+const table = ref()
+const route = useRoute()
+const getSummaries = (param) => {
+  const {columns, data} = param
+  const sums = []
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = '小计'
+    } else if (index === 4) {
+      const values = data.map((item) => Number(item[column.property]))
+      if (!values.every((value) => Number.isNaN(value))) {
+        sums[index] = `${values.reduce((prev, curr) => {
+          const value = Number(curr)
+          if (!Number.isNaN(value)) {
+            return prev + curr
+          } else {
+            return prev
+          }
+        }, 0)}`
+        sums[index] = parseFloat(sums[index]).toFixed(2)
+        // sums[index] = toThousands(sums[index])
+      } else {
+        sums[index] = '-'
+      }
+    }
+  })
+  return sums
+}
+// const exportTable = () => {
+//   const $e = table.value.$el
+//   let $table = $e.querySelector('.el-table__fixed')
+//   if (!$table) {
+//     $table = $e
+//   }
+//   exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目费用分摊表", 2)
+// }
+const exportExcelHandler = () => {
+  shareExportExcel(route.query.id).then(res => {
+    let fileName = `科技创新项目费用分摊表-${props.allocationName}.zip`
+    const blob = new Blob([res.data])
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = fileName
+    a.click()
+  })
+}
+const init = () => {
+  loading.value = true
+  let params = {
+    allocationId: route.query.id
+  }
+  getAllocationSummaryDetails(params).then(res => {
+    tableData.value = res.data
+    loading.value = false
+  })
+}
+init()
+</script>
+
+<style scoped>
+
+</style>

src/components/DetailComponent/ApprovalDetail.vue

@@ -0,0 +1,481 @@
+<template>
+  <div v-loading="loading">
+    <baseTitle v-if="type!='phase'" :title="getTagName(type)+getTitleInfo(data.taskId)"></baseTitle>
+    <fvForm :schema="schema" @getInstance="(e)=>form = e" style="margin-left: 15px"></fvForm>
+    <el-form :model="formData" label-width="auto" style="margin-top: -15px">
+      <file-component :title="getTagName(type)+'附件'" :tag="getTagName(type)" :isOpenPrint="isOpenPrint"
+                      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" style="margin-top: -15px">
+        <baseTitle title="审批记录"></baseTitle>
+        <div class="diagram">
+          <div class="base-title">流程图</div>
+          <el-switch
+              v-model="changeDiagram"
+              style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
+          />
+        </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>
+    <file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow"
+                  :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
+import {ElLoading, ElNotification} from 'element-plus';
+import {downloadFile} from "@/api/project-demand";
+import {searchImplementationFileList} from "@/api/project-manage/attachment";
+import {getTags} from "@/api/project-manage";
+
+const changeDiagram = ref(false)
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: {}
+  },
+  data: {
+    type: Object,
+    default: {}
+  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
+  companyOption: {
+    type: Array,
+    default: []
+  },
+  basicData: {
+    type: Object,
+    default: {}
+  },
+  fileListShow: {
+    type: String,
+    default: 'READ'
+  },
+  preProcessShow: {
+    type: String,
+    default: 'READ'
+  },
+  // approval 立项, execute 实施, 归档 archivist
+  type: {
+    type: String,
+    default: 'approval'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  //是否开始打印
+  isOpenPrint: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  idName: {
+    type: String,
+    default: ''
+  }
+})
+const form = ref()
+
+const editSingleTableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 85,
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+      width: 400,
+      currentRender: ({row, index}) => (
+          <div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      width: 150,
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link>
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                                              onDelete={() => handleDelete(row)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
+let preProcess = {
+  label: '前置流程',
+  prop: 'preProcess',
+  colProps: {
+    span: 24
+  },
+  labelWidth: 'left',
+  component: () => (
+      <div>
+        {
+          props.formData.preProcess ? props.formData.preProcess.map((item, index) => {
+            return <span><a target="_blank" style={{color: '#409EFF', cursor: 'pointer'}}
+                            href={props.formData.preProcessBaseUrl + item.requestId}>{item.requestName} {index != (props.formData.preProcess.length - 1) ?
+                <span>，</span> : ''}</a></span>
+          }) : <span>{'--'}</span>
+        }
+      </div>
+  )
+}
+const schema = computed(() => {
+  let arr
+  if (props.type == 'approval') {
+    arr = [
+      {
+        label: '项目负责人',
+        prop: 'projectChargePerson',
+        colProps: {
+          span: 6
+        },
+        labelWidth: 'left',
+        component: () => (
+            <div>
+              {
+                props.formData.projectChargePerson ?
+                    <span>{props.formData.projectChargePerson.name} </span>
+                    : <span>{'--'}</span>
+              }
+            </div>
+        )
+      },
+      {
+        label: '项目成员',
+        prop: 'projectPersonList',
+        colProps: {
+          span: 6
+        },
+        labelWidth: 'left',
+        component: () => (
+            <div>
+              {
+                props.formData.projectPersonList ? props.formData.projectPersonList.map((item, index) => {
+                  return <span>{item.name}
+                    <span>{index != props.formData.projectPersonList?.length - 1 ? '，' : ''}</span></span>
+                }) : <span>{'--'}</span>
+              }
+            </div>
+        )
+      },
+      {
+        label: '部门分管领导',
+        prop: 'optionalChargeLeadership',
+        colProps: {
+          span: 6
+        },
+        labelWidth: 'left',
+        component: () => (
+            <div>
+              {
+                props.formData.optionalChargeLeadership?.length > 0 ? props.formData.optionalChargeLeadership.map(item => {
+                  return <span>{item.name} </span>
+                }) : <span>{'--'}</span>
+              }
+            </div>
+        )
+      },
+    ]
+    if (props.preProcessShow == 'EDIT') {
+      preProcess = {
+        label: '前置流程',
+        prop: 'preProcess',
+        colProps: {
+          span: 24
+        },
+        labelWidth: 'left',
+        component: () => (
+            <div>
+              {
+                <select-pre-process formData={props.formData} basicData={props.basicData}/>
+              }
+            </div>
+        )
+      }
+    }
+    arr.push(preProcess)
+    // arr.push({
+    //   label: '项目立项附件',
+    //   prop: 'singleFile',
+    //   colProps: {
+    //     span: 24
+    //   },
+    //   labelWidth: 'left',
+    //   component: () => {
+    //     let singleFileArray = [props.formData.singleFile]
+    //     return props.formData.singleFile ? <fvTable style="width: 100%;max-height: 80px;" height="80"
+    //                                                 tableConfig={editSingleTableConfig}
+    //                                                 data={singleFileArray} isSettingCol={false} pagination={false}>
+    //         </fvTable>
+    //         : <span>--</span>
+    //   }
+    // })
+  } else if (props.type == 'execute') {
+    arr = [{
+      label: '部门分管领导',
+      prop: 'optionalChargeLeadership',
+      colProps: {
+        span: 24
+      },
+      labelWidth: 'left',
+      component: () => (
+          <div>
+            {
+              props.formData.optionalChargeLeadership?.length > 0 ? props.formData.optionalChargeLeadership.map(item => {
+                return <span>{item.name} </span>
+              }) : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },]
+
+    if (props.preProcessShow == 'EDIT') {
+      preProcess = {
+        label: '前置流程',
+        prop: 'preProcess',
+        colProps: {
+          span: 24
+        },
+        labelWidth: 'left',
+        component: () => (
+            <div>
+              {
+                <select-pre-process formData={props.formData} basicData={props.basicData}/>
+              }
+            </div>
+        )
+      }
+    }
+    arr.push(preProcess)
+    // arr.push(
+    //     {
+    //       label: '项目验收附件',
+    //       prop: 'singleFile',
+    //       colProps: {
+    //         span: 24
+    //       },
+    //       labelWidth: 'left',
+    //       component: () => {
+    //         let singleFileArray = [props.formData.singleFile]
+    //         return props.formData.singleFile ? <fvTable style="width: 100%;max-height: 80px;" height="80"
+    //                                                     tableConfig={editSingleTableConfig}
+    //                                                     data={singleFileArray} isSettingCol={false} pagination={false}>
+    //             </fvTable>
+    //             : <span>--</span>
+    //       }
+    //     })
+  } else if (props.type == 'archivist') {
+    arr = [
+    //   {
+    //     label: '项目归档附件',
+    //     prop: 'singleFile',
+    //     colProps: {
+    //       span: 24
+    //     },
+    //     labelWidth: 'left',
+    //     component: () => {
+    //       let singleFileArray = [props.formData.singleFile]
+    //       return props.formData.singleFile ? <fvTable style="width: 100%;max-height: 80px;" height="80"
+    //                                                   tableConfig={editSingleTableConfig}
+    //                                                   data={singleFileArray} isSettingCol={false} pagination={false}>
+    //           </fvTable>
+    //           : <span>--</span>
+    //     }
+    //   },
+    ]
+  } else if (props.type == 'phase') {
+    arr = [
+      // {
+      //   label: '阶段变更附件',
+      //   prop: 'singleFile',
+      //   colProps: {
+      //     span: 24
+      //   },
+      //   labelWidth: 'left',
+      //   component: () => {
+      //     let singleFileArray = [props.formData.singleFile]
+      //     return props.formData.singleFile ? <fvTable style="width: 100%;max-height: 80px;" height="80"
+      //                                                 tableConfig={editSingleTableConfig}
+      //                                                 data={singleFileArray} isSettingCol={false} pagination={false}>
+      //         </fvTable>
+      //         : <span>--</span>
+      //   }
+      // },
+    ]
+  }
+  return arr
+})
+
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: ''
+})
+const filePreviewShow = ref(false)
+const route = useRoute()
+const emit = defineEmits(['update:value'])
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})
+const clickToPreview = (row) => {
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(() => {
+    filePreviewShow.value = true
+  })
+}
+
+const getTitleInfo = (taskId) => {
+  if (taskId) {
+    return '审批'
+  } else {
+    return '信息'
+  }
+}
+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">
+.execute-table {
+  .el-table__header {
+    .el-table__cell:last-child {
+      .cell {
+        margin-left: -160px !important;
+      }
+    }
+  }
+
+  .el-table__body {
+    .el-table__cell:last-child {
+      .cell {
+        margin-left: -160px !important;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: 10px !important;
+      white-space: nowrap;
+      padding: 0;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: 5px !important;
+    }
+  }
+}
+</style>

src/components/DetailComponent/CollectionDetail.vue

@@ -0,0 +1,208 @@
+<template>
+  <div v-loading="loading" :style="type==='singleDetail'?'padding: 0 30px':''">
+    <baseTitle title="需求征集信息" v-if="type!=='singleDetail'"></baseTitle>
+    <el-form :model="formData" >
+      <el-row gutter="20" style="margin-left: 5px">
+        <el-col :span="6">
+          <el-form-item label="征集名称">
+            <span>{{ formData.requirementName }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="征集类型">
+            <span>{{ formData.collectType }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="需求上报截止时间">
+            <span>{{ formData.deadline }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" v-if="formData.isSpecialFund">
+          <el-form-item label="专项资金名称">
+            <span>{{ formData.specialFund }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" v-if="type==='singleDetail'">
+          <el-form-item label="征集公司">
+            <span :class="showExpendClass(showMoreCompany,formData.companyIds)">{{
+                getCompanyName(formData.companyIds)
+              }}</span>
+            <div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
+                 @click="handleExpend">{{ showExpendText }}
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" style="margin-bottom: -15px">
+          <el-form-item label="征集说明">
+            <div v-if="formData.collectExplain" v-html="formData.collectExplain" style="white-space: pre-wrap;">
+            </div>
+            <div v-else>--</div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件文件" style="margin-bottom: 0"></baseTitle>
+          <file-component title="" tag="需求征集"
+                          v-model:value="formData.fileList" :processViewer="processViewer"
+                          :file-list-show="fileListShow"/>
+        </el-col>
+        <el-col :span="24" style="margin-top: -15px">
+          <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>
+        </el-col>
+      </el-row>
+      <div class="approval-record" style="margin-top: -15px">
+        <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:#BEA266; --el-switch-off-color:#cecdcd"
+            />
+          </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="collectionProcess"/>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
+import {downloadFile} from "@/api/project-demand";
+
+const emit = defineEmits(['update:value'])
+const showExpendText = ref('')
+const showMoreCompany = ref(false)
+const props = defineProps({
+  formData: {
+    type: Array,
+    default: []
+  },
+  data: {
+    type: Array,
+    default: []
+  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
+  companyOption: {
+    type: Array,
+    default: []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  fileListShow: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: String,
+    default: ''
+  }
+})
+const changeDiagram = ref(false)
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})
+const getCompanyName = (data) => {
+  if (data) {
+    return data.join('，')
+  }
+}
+const handleExpend = () => {
+  showMoreCompany.value = !showMoreCompany.value;
+  showExpendClass(showMoreCompany.value, props.formData.companyIds)
+}
+const showExpendClass = (showMoreCompany, data) => {
+  if (!showMoreCompany) {
+    if (data && data.length > 14) {
+      showExpendText.value = '展开'
+      return 'company-style'
+    }
+  } else {
+    showExpendText.value = '收缩'
+    return ''
+  }
+}
+
+const handleDownload = (row) => {
+  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()
+  })
+}
+
+watch(() => props.loading, (newVal) => {
+  props.loading = newVal
+}, {deep: true})
+
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-empty__description) {
+  margin-top: 0;
+}
+
+.company-style {
+  //width: 98%;
+  min-height: 30px;
+  max-height: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -53px !important;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -26px !important;
+    }
+  }
+}
+</style>

src/components/DetailComponent/CompanyPicker.vue

@@ -0,0 +1,424 @@
+<template>
+  <el-dialog custom-class="custom-dialog" class="border" :border="false"  width="1000px" style="height: 676px"
+             :title="title" :show-close="false" :visible.sync="visible" v-model="visible" append-to-body :close-on-click-modal="false" @close="closeDialog">
+    <div class="picker">
+      <div class="candidate" v-loading="loading">
+        <el-input v-model="filterText"
+                  clearable placeholder="输入公司进行搜索">
+          <template #append>
+            <el-button @click="getList()">搜索</el-button>
+          </template>
+        </el-input>
+        <fvCheckbox style="margin-left: 10px" :options="checkOptions" v-model="checkList" @change="checkBoxChange"/>
+        <!-- 人员选择 -->
+        <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
+        <el-scrollbar style="height:87%;">
+          <div class="tree">
+            <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
+                     :show-checkbox="showCheckbox" highlight-current default-expand-all
+                     :default-checked-keys="defaultChecked" :disabled="disabled"
+                     :check-strictly="!checkStrictly" @node-click="(node,check)=>handleNodeClick(node,check)"
+                     @check-change="handleCheckClick" :filter-node-method="filterNode">
+              <template #default="{ node, data }">
+                <div class="tree-node">
+                  <div style="display: flex;align-items: center;padding: 3px 0">
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+        </el-scrollbar>
+      </div>
+      <div class="selected">
+        <div class="count">
+          <span>已选 {{ selectList.length }} 项</span>
+          <span @click="clearSelected">清空</span>
+        </div>
+        <div class="org-items">
+          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
+          <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
+            {{ selectItem.label }}
+            <el-icon @click="removeSingleSelected(selectItem)" size="20" style="margin-left: 10px;cursor: pointer;">
+              <CircleClose/>
+            </el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <el-button size="mini" @click="cancelUserPicker">取 消</el-button>
+      <el-button size="mini" color="#DED0B2" @click="selectConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import {ElMessageBox} from "element-plus";
+import {getSubCompOpt} from "@/api/user/user";
+
+const checkList = ref(['1'])
+const checkStrictly = ref(false)
+const isExpand = ref('展开')
+const expandedKeys = ref(['-1']);
+const checkOptions = ref([
+  {
+    label: isExpand.value,
+    value: '1'
+  },
+  // {
+  //   label: '父子联动',
+  //   value: '2'
+  // },
+])
+const props = defineProps({
+  value: {
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  multiple: { //是否多选
+    default: true,
+    type: Boolean
+  },
+  showCheckbox: { //是否显示左侧选择框
+    default: true,
+    type: Boolean
+  }
+});
+let selectItem = reactive({
+  type: -1,
+  value: "0"
+});
+const visible = ref(false);
+const loading = ref(false);
+const title = ref("请选择");
+const selectList = ref([]);
+const filterText = ref("");
+const dataList = ref([]);
+const defaultChecked = ref([]);
+const tree = ref([]);
+const defaultProps = {
+  value: "value",
+  label: "label",
+  children: "children",
+  disabled: "disabled",
+};
+
+const isRemoveSingleSelected = ref(false);
+const emit = defineEmits(['update:modelValue'])
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+});
+
+watch(() => filterText.value, (newVal) => {
+  tree.value.filter(newVal);
+});
+const closeDialog=()=>{
+  console.log('关闭')
+  visible.value=false
+  filterText.value=''
+}
+const checkBoxChange = (val) => {
+  checkStrictly.value = val.includes('2')
+  let nodes = tree.value.store.nodesMap
+  if (val.includes('1')) {
+    for (const node in nodes) {
+      nodes[node].expanded = true;
+    }
+    isExpand.value = '折叠'
+  } else {
+    for (const node in nodes) {
+      nodes[node].expanded = false;
+    }
+    isExpand.value = '展开'
+  }
+}
+const getList = () => {
+  getSubCompOpt().then(res => {
+    dataList.value = [
+      {
+        label: "所有公司",
+        value: -1,
+      },
+      ...res.data
+    ]
+  });
+};
+
+//通过关键字过滤树节点
+const filterNode = (value, data) => {
+  //通过关键字过滤树节点
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+//用于用户选择
+const show = () => {
+  //用于弹开部门选择
+  visible.value = true;
+  selectList.value = _value.value
+  defaultChecked.value = _value.value.map(item => item.value)
+  getList()
+};
+
+const updateTreeCheck = (list, flag) => {
+  list.forEach(item => {
+    if (item.value !== -1) {
+      tree.value.setChecked(item, flag)
+      if (item.children !== undefined) {
+        updateTreeCheck(item.children, flag)
+      }
+    }
+  })
+}
+const handleCheckClick = (data, checked) => {
+  if (data.value == -1) {
+    if(checked){
+      updateTreeCheck(dataList.value, false)
+      tree.value.setChecked(data,true);
+    }
+  }
+  if(tree.value.getCheckedKeys().length>1&&tree.value.getCheckedKeys().indexOf(-1)!==-1){
+    tree.value.setChecked(-1,false);
+  }
+  // 左侧有选择框 + 多选
+  if (props.multiple) {
+    //不添加重复的数据到右边
+    for (let i = 0; i < selectList.value.length; i++) {
+      if (selectList.value[i].value === data.value) {
+        selectList.value.splice(i, 1);
+        break;
+      }
+    }
+    if (checked) {
+      // if (data.children === undefined) {
+      selectList.value.push(data);
+      // }
+    } else if (data === "1") {
+      tree.value.setCheckedKeys([]);
+      selectList.value = [];
+    }
+  } else {// 左侧有选择框 + 单选
+    //不添加重复的数据到右边
+    for (let i = 0; i < selectList.value.length; i++) {
+      if (selectList.value[i].value === data.value) {
+        selectList.value.splice(i, 1);
+        break;
+      }
+    }
+    if (checked) {
+      tree.value.setCheckedNodes([data]);
+      selectList.value = [data];
+    } else if (data === "1") {
+      selectList.value = [];
+      tree.value.setCheckedKeys([]);
+    }
+  }
+};
+const handleNodeClick = (node, check) => {
+  if (check.isLeaf !== false) {
+    if (props.multiple) {
+      //不添加重复的数据到右边
+      for (let i = 0; i < selectList.value.length; i++) {
+        if (selectList.value[i].value === node.value) {
+          selectList.value.splice(i, 1);
+          break;
+        }
+      }
+      check.checked = true;
+      selectList.value.push(node);
+    } else {
+      check.checked = true;
+      selectList.value = [node];
+    }
+  }
+  // _value.value = selectList.value
+};
+const removeSingleSelected = (selectItem) => {
+  //左侧无选择框时,右侧显示×
+  for (let i = 0; i < selectList.value.length; i++) {
+    if (selectList.value[i].value === selectItem.value) {
+      tree.value.setChecked(selectList.value[i].value, false);
+      selectList.value.splice(i, 1);
+      break;
+    }
+  }
+  if (props.showCheckbox) {
+    // 左侧有选择框 + 单选
+    if (props.multiple === false) {
+      tree.value.setCheckedKeys([]);
+    }
+  }
+  // isRemoveSingleSelected.value = true
+};
+const clearSelected = () => {
+  //清空
+  ElMessageBox.confirm("您确定要清空已选中的项?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(() => {
+    // isRemoveSingleSelected.value = true
+    if (!props.showCheckbox) {
+      selectList.value = [];
+    } else {
+      handleCheckClick("1");
+    }
+  });
+};
+const cancelUserPicker = () => {
+  if (localStorage.getItem('originallyCompanySelectedList')) {
+    selectList.value = JSON.parse(localStorage.getItem('originallyCompanySelectedList'))
+  }else{
+    selectList.value=[]
+    handleCheckClick("1");
+  }
+  emit("cancelOrClear", selectList.value);
+  visible.value = false;
+  // nextTick(()=>{
+  //   isRemoveSingleSelected.value=false
+  // })
+}
+const selectConfirm = () => {
+  //确定按钮
+  emit("ok", selectList.value);
+  dataList.value = []
+  visible.value = false;
+  localStorage.setItem('originallyCompanySelectedList', JSON.stringify(selectList.value))
+};
+defineExpose({
+  show
+});
+getList()
+</script>
+
+<style lang="scss" scoped>
+$containWidth: 480px;
+:deep(.tree) {
+  .el-tree-node__content {
+    height: 34px;
+
+    .tree-node {
+      font-size: 18px;
+    }
+  }
+
+  //.el-tree-node {
+  //  .is-leaf + .el-checkbox .el-checkbox__inner {
+  //    display: inline-block;
+  //  }
+  //
+  //  .el-checkbox .el-checkbox__inner {
+  //    display: none;
+  //  }
+  //}
+}
+
+.footer {
+  float: right;
+  margin-top: 10px;
+}
+
+.picker {
+  height: 560px;
+  position: relative;
+  text-align: left;
+
+  .candidate {
+    position: absolute;
+    display: block;
+    width: $containWidth;
+    height: 100%;
+    border: 1px solid #e8e8e8;
+
+    :deep(.el-input) {
+      height: 40px;
+
+      .el-input__inner, .el-input-group__append {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .selected {
+    right: 0;
+    top: 0;
+    position: absolute;
+    display: inline-block;
+    width: 450px;
+    height: 100%;
+    border: 1px solid #e8e8e8;
+
+    .count {
+      width: 100%;
+      padding: 10px;
+      display: inline-block;
+      border-bottom: 1px solid #e8e8e8;
+      margin-bottom: 5px;
+      font-size: 16px;
+
+      > span:nth-child(2) {
+        float: right;
+        color: #c75450;
+        cursor: pointer;
+        margin-left: 10px;
+      }
+    }
+
+    .org-items {
+      overflow-y: auto;
+      height: 90%;
+
+      .el-icon-close {
+        position: absolute;
+        right: 5px;
+        cursor: pointer;
+        font-size: larger;
+      }
+
+      .org-item {
+        margin: 0 5px;
+        border-radius: 5px;
+        position: relative;
+        padding: 7px 5px;
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+
+        &:hover {
+          background: #f1f1f1;
+        }
+
+        > span {
+          margin-left: 5px;
+        }
+      }
+    }
+
+  }
+
+}
+
+.el-scrollbar .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  float: right;
+  width: 4px;
+  height: 4px;
+  background-color: white;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 16px;
+  background-color: #efefef;
+}
+
+</style>

src/components/DetailComponent/ExpenseDetail.vue

@@ -0,0 +1,255 @@
+<template>
+  <el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
+  <el-table ref="reportTable" :data="tableData" style="width: 100%;height: 479px"
+            :span-method="objectSpanMethod" v-loading="loading">
+    <el-table-column label="四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表" align="center">
+      <el-table-column v-for="column in columnInfo" :prop="column.prop" :label="column.label" align="center"
+                       :fixed="(!column.children) ? ((column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 'right' : 'left') : false"
+                       :width="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 160:130">
+        <template #default="scope">
+          <template v-if="column.children">
+            <el-table-column v-for="childColumn in column.children"
+                             :prop="column.prop + '.'+ childColumn.prop"
+                             :label="childColumn.label"
+                             :width="childColumn.prop === 'subtotal' ? 160 : 130">
+              <template #default="columnScope">
+                <template v-if="(tableData.length -1) !== columnScope.$index">
+                  {{
+                    columnScope.row[column.prop][childColumn.prop] ? columnScope.row[column.prop][childColumn.prop] : '/'
+                  }}
+                </template>
+                <template v-else>
+                  {{ columnScope.row[column.prop][childColumn.prop] }}
+                </template>
+              </template>
+            </el-table-column>
+          </template>
+          <template v-else>
+            <!--分摊金额合计与分摊金额总计计算-->
+            <template
+                v-if="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') && (tableData.length -1) !== scope.$index">
+              {{ getTotalSeparation(scope.row, column.prop) }}
+            </template>
+            <template
+                v-else-if="(tableData.length -1) === scope.$index && (column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost')">
+              {{ getTotalSummary(scope.row, column.prop) }}
+            </template>
+            <template v-else>
+              {{ scope.row[column.prop] }}
+            </template>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+
+<script setup lang="jsx">
+import {getResearchUser, getAllocationDetails} from "@/api/expense-manage";
+import {exportExcel} from "@/utils/export-excel";
+import {ElNotification} from "element-plus";
+
+const route = useRoute()
+const tableIns = ref()
+const reportTable = ref({});
+const columnInfo = ref([])
+const monthConcat = new Map()
+const tableData = ref([])
+const loading = ref(false)
+const researchOptions = ref([])
+
+const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
+  if (columnIndex === 0) {
+    if (monthConcat.has(rowIndex)) {
+      return {
+        rowspan: monthConcat.get(rowIndex),
+        colspan: 1,
+      }
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      }
+    }
+  } else {
+    let length = Object.keys(row).length
+    // console.log(length)
+    if (length > 5) {
+      if (concatColumn(columnIndex, length, rowIndex)) {
+        if (rowIndex % 5 === 0) {
+          return {
+            rowspan: 5,
+            colspan: 1,
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0,
+          }
+        }
+      }
+    }
+  }
+}
+
+
+const getTotalSeparation = (row, prop) => {
+  let totalSeparation = 0.00
+  for (let key of Object.keys(row)) {
+    if (key.startsWith('personInfo')) {
+      let value = prop === 'totalSeparation' ? (row[key].separationAmount ? row[key].separationAmount : 0) : row[key].subtotal
+      if ("/" !== value) {
+        try {
+          totalSeparation += parseFloat(value)
+        } catch (e) {
+        }
+      }
+    }
+  }
+  if (totalSeparation !== 0) {
+    return totalSeparation.toFixed(2);
+  } else {
+    return "/"
+  }
+}
+
+
+const getTotalSummary = (row, prop) => {
+  let key;
+  if (prop === 'totalSeparation') {
+    key = 'separationAmount'
+  } else {
+    key = 'subtotal'
+  }
+  let result = 0
+  for (const rowKey of Object.keys(row)) {
+    if (rowKey.startsWith('personInfo')) {
+      let value = row[rowKey][key]
+      if (value && "/" !== value) {
+        try {
+          result += parseFloat(value)
+        } catch (e) {
+        }
+      }
+    }
+  }
+  return result.toFixed(2);
+}
+
+const concatColumn = (columnIndex, length, rowIndex) => {
+  if (rowIndex === tableData.value.length - 1) {
+    return false
+  }
+  let columnLength = 5 + (length - 5) * 5
+  if (columnIndex === 1
+      || columnIndex === columnLength - 1) {
+    return true;
+  }
+  for (let i = 0; i < length - 5; i++) {
+    if (columnIndex === 4 + (i * 5)
+        || columnIndex === 5 + (i * 5)
+        || columnIndex === 7 + (i * 5)) {
+      return true
+    }
+  }
+  return false
+}
+
+const init = () => {
+  loading.value = true
+  getAllocationDetails(route.query.id).then(res => {
+    if (res.code !== 1000) {
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+    }
+    columnInfo.value = res.data.columns
+    let tableDataLet = res.data.tableData;
+    let personInfoKey = []
+    columnInfo.value.forEach(item => {
+      if (item.prop.startsWith('personInfo')) {
+        personInfoKey.push(item.prop)
+      }
+    })
+    tableData.value = []
+    let rowIndex = 0;
+    let summary = {
+      month: "",
+      salaryType: '',
+      projectName: "合计",
+      totalSeparation: 10,
+      totalSeparationCost: 10
+    }
+    for (const key of personInfoKey) {
+      summary[key] = {
+        researchDuration: "",
+        separationAmount: 0,
+        subtotal: 0,
+        wagesPayable: "",
+        workday: "",
+      }
+    }
+    tableDataLet.forEach((tableDatum) => {
+      let rowspan = tableDatum.rows.length * 5
+      monthConcat.set(rowIndex, rowspan)
+      rowIndex += rowspan
+      for (const tableDatumElement of tableDatum.rows) {
+        tableData.value = tableData.value.concat(tableDatumElement)
+        let row = tableDatumElement[0]
+        for (const key of personInfoKey) {
+          try {
+            if (row[key].subtotal && '/' !== row[key].subtotal) {
+              summary[key].subtotal += parseFloat(row[key].subtotal)
+            }
+          } catch (e) {
+          }
+        }
+      }
+    })
+    for (const row of tableData.value) {
+      for (const key of personInfoKey) {
+        try {
+          if (row[key].separationAmount && '/' !== row[key].separationAmount) {
+            summary[key].separationAmount += parseFloat(row[key].separationAmount)
+          }
+        } catch (e) {
+        }
+      }
+    }
+    for (const key of personInfoKey) {
+      summary[key].subtotal = summary[key].subtotal.toFixed(2)
+      summary[key].separationAmount = summary[key].separationAmount.toFixed(2)
+    }
+    monthConcat.set(rowIndex, 1)
+    tableData.value.push(summary)
+    loading.value = false
+  })
+}
+
+const getResearchOptions = async () => {
+  const res = await getResearchUser()
+  researchOptions.value = res.data
+}
+const search = (val) => {
+  tableConfig.params = {
+    allocationId: route.query.id,
+    ...val
+  }
+  tableIns.value.refresh()
+}
+getResearchOptions()
+init()
+
+
+const exportTable = () => {
+  const $e = reportTable.value.$el
+  let $table = $e.querySelector('.el-table__fixed')
+  if (!$table) {
+    $table = $e
+  }
+  exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表", 2)
+}
+</script>

src/components/DetailComponent/FileComponent.vue

@@ -0,0 +1,210 @@
+<template>
+  <el-form :label-position="labelAlign">
+    <el-form-item :label="title" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign"  :style="{marginTop: '10px',marginLeft: tag!=='需求上报'?'15px':'0'}">
+      <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
+<!--      :style="{width:isOpenPrint?'610px': '100%'}"  table-layout="auto"  id="printTable"-->
+      <fvTable style="width:100%;max-height: 160px;" v-if="processViewer"  height="160" :tableConfig="tableConfig"
+              :data="_value" :isSettingCol="false" :pagination="false">
+        <template #empty>
+          <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
+        </template>
+      </fvTable>
+    </el-form-item>
+  </el-form>
+  <file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                :fileType="filePreviewParam.fileType"/>
+</template>
+
+<script setup lang="jsx">
+import {downloadFile, deleteFile} from "@/api/project-demand";
+import {ElNotification} from "element-plus";
+import FilePreview from "../filePreview/index.vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  tag: {
+    type: String,
+    default: ''
+  },
+  fileNameTableWidth: {
+    type: String,
+    default: '400'
+  },
+  fileListShow: {
+    type: String,
+    default: 'READ'
+  },
+  value: {
+    type: Array,
+    default: []
+  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
+  labelAlign: {
+    type: String,
+    default: 'right'
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
+  },
+  //是否开始打印
+  isOpenPrint: {
+    type: Boolean,
+    default: false
+  },
+})
+const emit = defineEmits(['update:value'])
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 85,
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+      width: props.fileNameTableWidth,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      width: 150,
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link>
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                                              onDelete={() => handleDelete(row)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
+const getOtherFile = (val) => {
+  props.processViewer = false
+  let fileObj = compositeParam(val)
+  _value.value.push(fileObj)
+  nextTick(() => {
+    props.processViewer = true
+  })
+}
+
+
+const compositeParam = (item, type) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: true,
+    tag: props.tag
+  }
+}
+const handleDownload = (row) => {
+  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()
+  })
+}
+const handleDelete = (row) => {
+  deleteFile(row.fileId).then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      _value.value.splice(_value.value.findIndex((item) => item.fileId === row.fileId), 1);
+    }
+  });
+}
+
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-table--fit ) {
+  height: 160px !important;
+}
+@media print {
+  //#printTable{
+  //  width: 400px!important;
+  //}
+
+}
+</style>

src/components/DetailComponent/Opinion.vue

@@ -0,0 +1,234 @@
+<template>
+  <!--  <baseTitle title="审核意见"></baseTitle>-->
+  <!--  <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>-->
+  <div class="oper-page-btn" style="display: flex">
+    <el-button type="danger" @click="handleReject">驳回</el-button>
+    <el-button color="#DED0B2" @click="handleAgree">同意</el-button>
+  </div>
+  <div class="opinion-dialog">
+    <el-dialog v-model="showBackNode" title="请选择退回节点" width="400">
+      <el-table :data="taskUserOptionList" style="width: 100%"
+                :header-cell-style="{background:'#f5f7fa'}">
+        <el-table-column width="55">
+          <template #default="scope">
+            <el-radio
+                class="radio"
+                :label="scope.row"
+                v-model="backNode"
+            >&emsp;&emsp;&emsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="nodeName"
+            label="节点名称">
+<!--          <template #default="scope">-->
+<!--            {{scope.row.nodeId==-1?'发起节点':scope.row.nodeName}}-->
+<!--          </template>-->
+        </el-table-column>
+        <el-table-column
+            prop="name"
+            label="操作者">
+          <template #default="scope">
+            <el-tag v-if="scope.row.userInfo" type="success">{{ scope.row.userInfo.name }}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="oper" style="display: flex;justify-content: flex-end;margin-top: 10px">
+        <el-button type="danger" @click="rollbackHandler">确定</el-button>
+        <el-button @click="showBackNode=false">取消</el-button>
+      </div>
+      <!--      <el-select v-if="taskUserOptionList?.length>0"  v-model="backNode" placeholder="请选择退回节点" clearable>-->
+      <!--        <el-option-->
+      <!--            v-for="item in taskUserOptionList"-->
+      <!--            :key="item.nodeId"-->
+      <!--            :label="item.nodeName + (item.userInfo ? ':' + item.userInfo.name : '')"-->
+      <!--            :value="item.nodeId">-->
+      <!--        </el-option>-->
+      <!--      </el-select>-->
+      <!--      <el-button type="danger" @click="rollbackHandler">确认</el-button>-->
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {ElNotification} from 'element-plus';
+import {agreeTask, rejectTask} from "@/api/project-demand/index.js";
+import {useTagsView} from '@/stores/tagsview.js'
+
+const tagsViewStore = useTagsView()
+const route = useRoute()
+const router = useRouter()
+const props = defineProps({
+  taskId: {
+    type: String,
+    default: ''
+  },
+  formData: {
+    type: Object,
+    default: {}
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  //退回节点选择框数据
+  taskUserOptionList: {
+    type: Array,
+    default: []
+  }
+})
+
+const form = ref()
+const backNode = ref({})
+const showBackNode = ref(false)
+const schema = computed(() => {
+  return [
+    {
+      label: '',
+      prop: 'auditOpinion',
+      component: 'el-input',
+      colProps: {
+        span: 24
+      },
+      props: {
+        placeholder: '请输入审核意见',
+        type: 'textarea',
+        rows: 3
+      }
+    }
+  ]
+})
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})
+const back = () => {
+  switch (route.name) {
+    case 'Initiation/detail':
+      router.push({name: 'Initiation'})
+      break;
+    case 'Filing/detail':
+      router.push({name: 'Filing'})
+      break;
+    case 'Implementation/detail':
+      if (route.query.source === 'home') {
+        router.push('/home')
+      } else {
+        if (route.query.step === '10') {
+          router.push({name: 'Summary'})
+        } else if (route.query.step === '20') {
+          router.push({name: 'Initiation'})
+        } else if (route.query.step === '40') {
+          router.push({name: 'Implementation'})
+        } else if (route.query.step === '50') {
+          router.push({name: 'Filing'})
+        } else if (route.query.step === '00') {
+          router.push({name: 'Requirement'})
+        }
+      }
+      break;
+    // case 'Summary/detail':
+    //   if (route.query.source === 'home') {
+    //     router.push('/home')
+    //   } else {
+    //     router.push({name: 'Summary'})
+    //   }
+    //   break;
+    case 'Requirement/detail':
+      if (route.query.source === 'home') {
+        router.push('/home')
+      } else {
+        router.push({name: 'Requirement'})
+      }
+      break;
+    case 'Fund/detail':
+      if (route.query.source === 'home') {
+        router.push('/home')
+      } else {
+        router.push({name: 'Fund'})
+      }
+      break;
+    case 'Share/detail':
+      if (route.query.source === 'home') {
+        router.push('/home')
+      } else {
+        router.push({name: 'Expense/share'})
+      }
+      break;
+    case 'Phase/detail':
+      if (route.query.source === 'home') {
+        router.push('/home')
+      } else {
+        router.push({name: 'Implementation'})
+      }
+      break;
+  }
+}
+// 驳回
+const handleReject = async () => {
+  if (!_value.value) {
+  ElNotification({
+    title: '提示',
+    message: '请填写审核意见',
+    type: 'warning'
+  })
+  return
+}
+  showBackNode.value = true
+  backNode.value = {}
+}
+//回退节点
+const rollbackHandler = async () => {
+  // const values = form.value.getValues()
+
+  const params = {
+    taskId: props.taskId,
+    // ...values
+    auditOpinion: _value.value,
+    rollBackId: backNode.value.nodeId
+  }
+  // console.log('params', params)
+  const res = await rejectTask(params)
+  ElNotification({
+    title: '提示',
+    message: res.msg,
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  if (res.code === 1000) {
+    tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+    back()
+  }
+}
+
+const handleAgree = async () => {
+  // const values = form.value.getValues()
+  const params = {
+    taskId: props.taskId,
+    formData: props.formData,
+    auditOpinion: _value.value
+  }
+  const res = await agreeTask(params)
+  ElNotification({
+    title: '提示',
+    message: res.msg,
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  if (res.code === 1000) {
+    tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+    back()
+  }
+}
+</script>
+
+<style lang="scss">
+.opinion-dialog {
+  .el-dialog__body {
+    padding: 0 !important;
+  }
+}
+</style>

src/components/DetailComponent/ProjectApply.vue

@@ -0,0 +1,708 @@
+<template>
+  <div class="apply-block">
+    <baseTitle :title="getTitleName(title)+'信息'"></baseTitle>
+    <el-form :model="localFormData" ref="formRef" label-width="auto" v-if="step!=='50'">
+      <el-row>
+        <el-col :span="6" v-if="title==='apply'">
+          <!--          label-width="106"-->
+          <el-form-item label="项目负责人" :required="true" prop="" label-width="111">
+            <el-button style="margin-right: 10px" color="#DED0B2" @click="handleShowProjectChargePersonTable">
+              {{ projectChargePersonUserList?.length !== 0 ? '更改' : '请选择' }}
+            </el-button>
+            <div v-for="item in projectChargePersonUserList" :key="item.id" style="margin-right: 5px">
+              {{ item.name }}
+            </div>
+            <user-picker :multiple="false" ref="projectChargePersonUserPicker" title="请选择项目负责人"
+                         v-model:value="projectChargePersonUserList" @ok="projectChargePersonUserPickerOk"  @cancelOrClear="projectChargePersonUserPickerCancel"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" v-if="title==='apply'">
+          <el-form-item label="项目成员" :required="true" prop="" label-width="85"
+          >
+            <el-button color="#DED0B2" style="margin-right: 10px" @click="handleShowProjectPersonTable">
+              {{ projectPersonUserList?.length !== 0 ? '更改' : getProjectPerson(projectPersonUserList) ? '更改' : '请选择' }}
+            </el-button>
+            <div v-for="(item,index) in getProjectPerson(projectPersonUserList)" :key="item.id" >
+              {{ item.name }}{{index != getProjectPerson(projectPersonUserList)?.length - 1 ? '，' : ''}}
+            </div>
+            <user-picker :multiple="true" ref="projectPersonUserPicker" title="请选择项目成员"
+                         v-model:value="projectPersonUserList" @ok="projectPersonUserPickerOk"  @cancelOrClear="projectPersonUserPickerCancel"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" v-if="title==='apply'||title==='check'">
+          <el-form-item label="部门分管领导" :label-width="title==='check'?110:115">
+            <el-button color="#DED0B2" style="margin-right: 10px" @click="handleShowOptionalChargeLeadershipPicker">
+              {{
+                optionalChargeLeadershipList?.length !== 0 ? '更改' : getOptionalChargeLeadershipList(optionalChargeLeadershipList) ? '更改' : '请选择'
+              }}
+            </el-button>
+            <div v-for="(item,index) in getOptionalChargeLeadershipList(optionalChargeLeadershipList)" :key="item.id">
+              {{ item.name }}{{index != getOptionalChargeLeadershipList(optionalChargeLeadershipList)?.length - 1 ? '，' : ''}}
+            </div>
+            <user-picker :multiple="true" ref="optionalChargeLeadershipPickerRef" title="请选择部门分管领导"
+                         v-model:value="optionalChargeLeadershipList" @ok="optionalChargeLeaderPickerOk" @cancelOrClear="optionalChargeLeaderPickerCancel"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" v-if="preProcessShow === 'EDIT'">
+          <el-form-item label="前置流程" :required="preProcessRequired" prop="preProcess" label-width="125">
+            <el-button color="#DED0B2" @click="handleShowPreTable" style="margin-right: 10px">
+              {{
+                localFormData.preProcess && localFormData.preProcess?.length > 0 ? '更改' : sessionParams.preProcess && sessionParams.preProcess?.length > 0 ? '更改' : '请选择'
+              }}
+            </el-button>
+            <div v-for="(item,index) in getRequestName(localFormData.preProcess)" :key="item.requestId">
+              <a :href="item.baseUrl" target="_blank"
+                 style="color: #2a99ff;cursor: pointer">{{ item.requestName }}<span
+                  v-if="index != localFormData.preProcess?.length -1">，</span>
+              </a>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!--    v-if="showAttachment"-->
+    <AttachmentUpload ref="attachment" :label="getTitleName(title)+'附件'" :showTable="showTable"
+                      v-model:otherFileList="otherFileList" :tag="getTitleName(props.title)"  :templateName="getTemplateName(props.title)" :templateDownloadBtnShow="props.title==='apply'?true:props.title==='check'"
+                      @getAttachment="getAttachment" v-model:singleList="singleList" :showSingleTable="showSingleTable"
+                      @getOtherFile="getOtherFile" :showFileList="true" :formData="localFormData"
+                      :preview="mode == 'resubmit'"/>
+    <div>
+      <div class="approval-record">
+        <div class="approval-title" style="margin-top: -15px">
+          <!--          <baseTitle title="审批记录" v-if="mode === 'resubmit'"></baseTitle>-->
+          <!--          <div v-else></div>-->
+          <baseTitle title="审批记录"></baseTitle>
+          <div class="diagram">
+            <div class="base-title">流程图</div>
+            <el-switch
+                v-model="changeDiagram"
+                style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
+            />
+          </div>
+        </div>
+        <el-empty :image-size="100" description="暂无审批记录" v-if="!data?.operationList&&!changeDiagram"/>
+        <div class="process">
+          <operation-render
+              v-if="mode === 'resubmit'&&processDiagramViewer&& data?.operationList && data?.operationList.length > 0&&!changeDiagram"
+              :operation-list="data.operationList"
+              :state="data.state"/>
+          <process-diagram-viewer mode="view" :idName="title" v-if="processDiagramViewer&&changeDiagram"/>
+        </div>
+      </div>
+    </div>
+    <div class="oper-page-btn">
+      <el-button color="#DED0B2" v-if="mode === 'submit'" @click="handleSubmit">提交</el-button>
+      <el-button color="#DED0B2" v-else-if="mode === 'resubmit'" @click="handleSubmit">重新提交</el-button>
+      <el-button @click="handleBack">返回</el-button>
+    </div>
+
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
+                  :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
+    <el-dialog v-if="showPreTable" title="前置流程" v-model="showPreTable" width="80%">
+      <el-form :model="preProcessForm" inline @submit.prevent="searchPreProcess">
+        <el-form-item label="请求名称">
+          <el-input v-model="preProcessForm.requestName" placeholder="请输入请求名称" clearable>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button color="#DED0B2" @click="searchPreProcess">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="preProcessList" v-loading="loading"
+                @select="handleSelect" @select-all="handleSelect" row-key="requestId" ref="preProcessTable">
+        <el-table-column type="selection" width="55" :reserve-selection="true"/>
+        <el-table-column prop="requestId" label="请求id"></el-table-column>
+        <el-table-column prop="requestName" label="请求名称"></el-table-column>
+        <el-table-column prop="lastOperatorName" label="最后操作人名称"></el-table-column>
+        <el-table-column prop="lastOperateTime" label="最后操作时间"></el-table-column>
+        <el-table-column prop="currentNodeName" label="当前节点"></el-table-column>
+        <el-table-column prop="creatorName" label="创建人"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <!--              <el-button type="primary" @click="choosePreProcess(scope.row)" link>选择</el-button>-->
+            <a :href="scope.row.baseUrl" target="_blank" style="color: #2a99ff;margin-left: 10px">查看流程</a>
+          </template>
+        </el-table-column>
+      </el-table>
+      <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
+              :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
+      <div class="oper">
+        <el-button color="#DED0B2" @click="choosePreProcess">确定</el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
+import {ElNotification} from "element-plus";
+import {
+  getApplyProcess,
+  getPreProcess,
+  getProjectCheckProcess,
+  getProjectConclusionProcess,
+  projectApply,
+  projectCheck,
+  projectConclusion,
+  resubmitApply,
+  resubmitCheck,
+  resubmitConclusion
+} from "@/api/project-manage";
+import {useProcessStore} from '@/stores/processStore.js';
+import {useTagsView} from '@/stores/tagsview.js'
+import Paging from "@/components/pagination/index.vue";
+import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
+
+const router = useRouter()
+const route = useRoute()
+const changeDiagram = ref(false)
+const showSingleTable = ref(false)
+const projectChargePersonUserList = ref([])
+const projectChargePersonUserPicker = ref()
+const projectPersonUserList = ref([])
+const projectPersonUserPicker = ref()
+const singleList = ref([])
+
+const emit = defineEmits(["getAttachment", "getOtherFile"])
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'apply'
+  },
+  showTable: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: "view"
+  },
+  data: {
+    type: Object,
+    default: {}
+  },
+  formData: {
+    type: Object,
+    default: {}
+  },
+  step: {
+    type: String,
+    default: "20"
+  },
+  preProcessShow: {
+    type: String,
+    default: "READ"
+  }
+})
+const preProcessList = ref([])
+//暂存数据
+const currentList = ref([])
+const preProcessRequired = ref(false)
+const total = ref(0)
+const preProcessForm = reactive({
+  requestName: ''
+})
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+// const rules = reactive({
+//   preProcess: [{required: true, message: '请选择前置流程', trigger: 'blur'}],
+//   projectChargePerson: [{required: true, message: '请选择项目负责人', trigger: 'blur'}],
+//   projectPerson: [{required: true, message: '请选择项目成员', trigger: 'blur'}],
+// })
+const tagsViewStore = useTagsView()
+const processStore = useProcessStore()
+const localProjectPerson = ref([])
+const otherFileList = ref([])
+const localFormData = ref({
+  projectPersonIds: [],
+  projectChargePerson: null,
+  preProcess: [
+    // {
+    //   requestId: null,
+    //   requestName: '',
+    //   baseUrl: ''
+    // }
+  ]
+})
+const attachment = ref()
+const deploymentData = ref({})
+const showPreTable = ref(false)
+const showTable = ref(true)
+const loading = ref(false)
+const processDiagramViewer = ref(false)
+const name = ref(router.currentRoute.value.name)
+const deploymentId = ref()
+const selectRows = ref([])
+const projectId = ref(route.query.projectId)
+const sessionParams = ref({})
+const optionalChargeLeadershipPickerRef = ref()
+const optionalChargeLeadershipList = ref([])
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+
+const getTemplateName=(type)=>{
+  switch (type) {
+    case 'apply':
+      return '科技创新项目立项模板'
+    case 'check':
+      return '科技创新项目验收申请表'
+  }
+}
+
+const handleShowOptionalChargeLeadershipPicker = () => {
+  optionalChargeLeadershipPickerRef.value.showUserPicker()
+}
+
+const optionalChargeLeaderPickerOk = (userList) => {
+  optionalChargeLeadershipList.value = userList
+  if(userList?.length>0){
+    localStorage.setItem('optionalChargeLeadershipList', JSON.stringify(optionalChargeLeadershipList.value))
+  }else {
+    localStorage.removeItem('optionalChargeLeadershipList')
+  }
+}
+const optionalChargeLeaderPickerCancel = (userList) => {
+  optionalChargeLeadershipList.value = userList
+}
+
+const clickToPreview = (row) => {
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(() => {
+    filePreviewShow.value = true
+  })
+}
+
+const getOptionalChargeLeadershipList = (list) => {
+  if (!list || list && list.length === 0) {
+    if (localStorage.getItem('optionalChargeLeadershipList')) {
+      let param = JSON.parse(localStorage.getItem('optionalChargeLeadershipList'))
+      optionalChargeLeadershipList.value = param
+      return optionalChargeLeadershipList.value
+    }
+  } else {
+    return list
+  }
+}
+const getProjectPerson = (list) => {
+  if (!list || list && list.length === 0) {
+    if (localStorage.getItem('projectPersonUserList')) {
+      let param = JSON.parse(localStorage.getItem('projectPersonUserList'))
+      projectPersonUserList.value = param
+      return projectPersonUserList.value
+    }
+  } else {
+    return list
+  }
+}
+const getRequestName = (list) => {
+  if (!list || (list && list.length === 0)) {
+    if (sessionParams.value.preProcess) {
+      return sessionParams.value.preProcess
+    }
+  } else {
+    return list
+  }
+}
+const getProjectChargePersonUser = () => {
+  if (projectChargePersonUserList.value.length !== 0) {
+    return projectChargePersonUserList.value.map(item => item.name).join()
+  }
+}
+const handleSelect = async (selection) => {
+  selectRows.value = selection
+}
+const handleCancel = () => {
+  showPreTable.value = false
+}
+const searchPreProcess = () => {
+  getPreProcessList()
+
+}
+const handleReset = () => {
+  preProcessForm.requestName = ''
+  getPreProcessList()
+}
+const handleShowPreTable = () => {
+  showPreTable.value = true
+  getPreProcessList()
+}
+const handleShowProjectChargePersonTable = () => {
+  projectChargePersonUserPicker.value.showUserPicker()
+}
+const projectChargePersonUserPickerOk = (userList) => {
+  projectChargePersonUserList.value = userList
+  if(userList?.length>0){
+    localStorage.setItem('projectChargePersonUserList', JSON.stringify(projectChargePersonUserList.value))
+  }else {
+    localStorage.removeItem('projectPersonUserList')
+  }
+}
+const handleShowProjectPersonTable = () => {
+  projectPersonUserPicker.value.showUserPicker()
+}
+const projectChargePersonUserPickerCancel=(userList)=>{
+  projectChargePersonUserList.value = userList
+}
+const projectPersonUserPickerCancel=(userList)=>{
+  projectPersonUserList.value = userList
+}
+
+const projectPersonUserPickerOk = (userList) => {
+  projectPersonUserList.value = userList
+  if(userList?.length>0){
+    localStorage.setItem('projectPersonUserList', JSON.stringify(userList))
+  }else {
+    localStorage.removeItem('projectPersonUserList')
+  }
+}
+const getPreProcessList = () => {
+  loading.value = true
+  getPreProcess().then(res => {
+    loading.value = false
+    let searchArray = []
+    let regexPattern = ("%" + preProcessForm.requestName + "%").replace(/%/g, '.*').replace(/_/g, '.');
+    let regex = new RegExp('^' + regexPattern + '$');
+    res.data.filter((item) => {
+      if (regex.test(item.requestName)) {
+        searchArray.push(item)
+      }
+    })
+    // res.data.forEach((item) => {
+    //   localFormData.value.preProcess.forEach((item1) => {
+    //     if (item.requestId == item1.requestId) {
+    //       preProcessTable.value.toggleRowSelection(item)
+    //     }
+    //   })
+    // })
+    total.value = searchArray.length
+    currentList.value = searchArray
+    preProcessList.value = currentList.value.slice(0, 10)
+  })
+}
+const choosePreProcess = () => {
+  let preProcessObj = {}
+  let preProcessArray = []
+  selectRows.value.forEach((item) => {
+    preProcessObj = {
+      requestId: item.requestId,
+      requestName: item.requestName,
+      baseUrl: item.baseUrl
+    }
+    preProcessArray.push(preProcessObj)
+  })
+  localFormData.value.preProcess = preProcessArray
+  showPreTable.value = false
+  localStorage.setItem('preProcess', JSON.stringify(preProcessArray))
+}
+
+//切换每页显示条数
+const handleSizeChange = (val) => {
+  pageInfo.pageSize = val;
+  preProcessList.value = currentList.value.slice((pageInfo.pageNum - 1) * val, pageInfo.pageNum * val)
+};
+
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val;
+  preProcessList.value = currentList.value.slice((val - 1) * pageInfo.pageSize, val * pageInfo.pageSize)
+};
+const getTitleName = (type) => {
+  switch (type) {
+    case 'apply':
+      return '项目立项'
+    case 'check':
+      return '项目验收'
+    case 'filing':
+      return '项目归档'
+  }
+}
+const handleBack = () => {
+  history.back()
+}
+const compositeParam = (item) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: true,
+    tag: getTitleName(props.title)
+  }
+}
+const getAttachment = (val) => {
+  // console.log('上传文件getAttachment', val)
+  showSingleTable.value = false
+  localFormData.value.singleFile = compositeParam(val)
+  singleList.value.push(compositeParam(val))
+  nextTick(() => {
+    showSingleTable.value = true
+    if (attachment.value.singleFile == null) {
+      attachment.value.validate()
+      ElNotification({
+        title: '提示',
+        message: '请上传附件',
+        type: 'error'
+      })
+      return;
+    } else {
+      attachment.value.clearValidate()
+    }
+  })
+
+  localStorage.setItem('singleFile', JSON.stringify(compositeParam(val)))
+}
+watch(() => singleList.value, (newVal) => {
+  showSingleTable.value = newVal.length !== 0;
+}, {deep: true})
+const getOtherFile = (val) => {
+  // console.log('上传文件getOtherFile', val)
+  showTable.value = false
+  let fileObj = compositeParam(val)
+  otherFileList.value.push(fileObj)
+  nextTick(() => {
+    showTable.value = true
+  })
+
+  // localFormData.value.otherFileList = otherFileList.value
+  localStorage.setItem('otherFileList', JSON.stringify(otherFileList.value))
+}
+const getFileParam = (item) => {
+  return {
+    fileId: item.fileId,
+    tag: item.tag
+  }
+}
+const handleSubmit = async () => {
+  let files = []
+  if (props.mode === 'resubmit') {
+    attachment.value.allFileList.forEach(item => {
+      files.push(getFileParam(item))
+    })
+  } else {
+    otherFileList.value.forEach(item => {
+      files.push(getFileParam(item))
+    })
+  }
+  // console.info("🚀 ~method:handleSubmit -----", files,attachment.value.isHaveOneFile)
+  if (!attachment.value.isHaveOneFile) {
+    attachment.value.validate()
+    ElNotification({
+      title: '提示',
+      message: '请上传附件',
+      type: 'error'
+    })
+    return;
+  } else {
+    attachment.value.clearValidate()
+  }
+  let projectPersonIds = []
+  for (const item of projectPersonUserList.value) {
+    projectPersonIds.push(parseInt(item.id))
+  }
+  let params = {
+    deploymentId: deploymentId.value,
+    requirementId: route.query.id,
+    fileList: files,
+    // singleFile: attachment.value.singleFile,
+    projectId: projectId.value,
+    preProcess: JSON.stringify(localFormData.value.preProcess)
+  }
+  if (sessionParams.value.preProcess && !localFormData.value.preProcess) {
+    params.preProcess = JSON.stringify(sessionParams.value.preProcess)
+  }
+  // console.log(params.preProcess)
+  let res
+  if (props.step === '20') {
+    if (projectChargePersonUserList.value && projectChargePersonUserList.value.length === 0) {
+      ElNotification({
+        title: '提示',
+        message: '请选择项目负责人!',
+        type: 'error'
+      })
+      return;
+    }
+    if (projectPersonUserList.value && projectPersonUserList.value.length === 0) {
+      ElNotification({
+        title: '提示',
+        message: '请选择项目成员!',
+        type: 'error'
+      })
+      return;
+    }
+    params.projectChargePerson = parseInt(projectChargePersonUserList.value[0].id)
+    params.projectPersonIds = projectPersonIds
+    params.optionalChargeLeadership = optionalChargeLeadershipList.value
+    if (props.mode === 'resubmit') {
+      res = await resubmitApply(params)
+    } else {
+      res = await projectApply(params)
+    }
+  } else if (props.step === '40') {
+    params.optionalChargeLeadership = optionalChargeLeadershipList.value
+    if (props.mode === 'resubmit') {
+      res = await resubmitCheck(params)
+    } else {
+      res = await projectCheck(params)
+    }
+  } else if (props.step === '50') {
+    if (props.mode === 'resubmit') {
+      res = await resubmitConclusion(params)
+    } else {
+      res = await projectConclusion(params)
+    }
+  }
+  ElNotification({
+    title: '提示',
+    message: res.msg,
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  if (res.code === 1000) {
+    tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+    if (props.step === '20') {
+      await router.push({
+        name: 'Initiation'
+      })
+    } else if (props.step === '40') {
+      await router.push({
+        name: 'Implementation'
+      })
+    } else if (props.step === '50') {
+      await router.push({
+        name: 'Filing'
+      })
+    }
+  }
+}
+const init = async () => {
+  let id = projectId.value
+  if (!id) return;
+  processDiagramViewer.value = false
+  let res
+  if (props.step === '20') {
+    res = await getApplyProcess(id)
+  } else if (props.step === '40') {
+    res = await getProjectCheckProcess(id)
+  } else if (props.step === '50') {
+    res = await getProjectConclusionProcess(id)
+  }
+  if (res.code === 1000) {
+    let data = res.data
+    deploymentId.value = data.deploymentId
+    deploymentData.value = data
+    preProcessRequired.value = data.deploymentName === '重大项目立项' || data.deploymentName === '重大项目验收';
+    processStore.setDesign(data)
+    processStore.runningList.value = data.runningList;
+    processStore.endList.value = data.endList;
+    processStore.noTakeList.value = data.noTakeList;
+    processStore.refuseList.value = data.refuseList;
+    processStore.passList.value = data.passList;
+    nextTick(() => {
+      processDiagramViewer.value = true
+    })
+  } else {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: 'error'
+    })
+  }
+}
+
+watchEffect(() => {
+  // console.info("🚀 ~method:;props.formData.projectChargePerson -----", props.formData.projectChargePerson)
+  if (props.formData.projectChargePerson == null) {
+    projectChargePersonUserList.value = []
+  } else {
+    projectChargePersonUserList.value = [props.formData.projectChargePerson]
+  }
+  if (props.formData.optionalChargeLeadership == null) {
+    optionalChargeLeadershipList.value = []
+  } else {
+    optionalChargeLeadershipList.value = props.formData.optionalChargeLeadership
+  }
+  projectPersonUserList.value = props.formData.projectPersonList ? props.formData.projectPersonList : []
+  let flag = Object.keys(props.formData).length && (localFormData.value = props.formData)
+  // if (props.formData.projectChargePerson != null) {
+  //   localFormData.value.projectChargePerson = props.formData.projectChargePerson.id
+  // }
+
+  if (localStorage.getItem('preProcess')) {
+    let param = JSON.parse(localStorage.getItem('preProcess'))
+    localFormData.value.preProcess = param
+    sessionParams.value.preProcess = param
+    localStorage.setItem('preProcess', JSON.stringify(param))
+  }
+  if (localStorage.getItem('singleFile')) {
+    let param = JSON.parse(localStorage.getItem('singleFile'))
+    localFormData.value.singleFile = param
+    singleList.value = [param]
+    localStorage.setItem('singleFile', JSON.stringify(param))
+    showSingleTable.value = false
+    nextTick(() => {
+      showSingleTable.value = true
+    })
+  }
+  if (localStorage.getItem('otherFileList')) {
+    let param = JSON.parse(localStorage.getItem('otherFileList'))
+    localFormData.value.otherFileList = param
+    otherFileList.value = param
+    localStorage.setItem('otherFileList', JSON.stringify(param))
+    showTable.value = false
+    nextTick(() => {
+      showTable.value = true
+    })
+  }
+
+  if (localStorage.getItem('projectChargePersonUserList')) {
+    let param = JSON.parse(localStorage.getItem('projectChargePersonUserList'))
+    projectChargePersonUserList.value = param
+    localStorage.setItem('projectChargePersonUserList', JSON.stringify(param))
+  }
+  if (localStorage.getItem('projectPersonUserList')) {
+    let param = JSON.parse(localStorage.getItem('projectPersonUserList'))
+    projectPersonUserList.value = param
+    localProjectPerson.value = param
+    localStorage.setItem('projectPersonUserList', JSON.stringify(param))
+  }
+  if (localStorage.getItem('optionalChargeLeadershipList')) {
+    let param = JSON.parse(localStorage.getItem('optionalChargeLeadershipList'))
+    optionalChargeLeadershipList.value = param
+    // localProjectPerson.value = param
+    localStorage.setItem('optionalChargeLeadershipList', JSON.stringify(param))
+  }
+
+  return flag
+})
+onActivated(() => {
+  init()
+})
+onMounted(async () => {
+  await init()
+})
+</script>
+
+<style scoped lang="scss">
+.oper {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+</style>

src/components/DetailComponent/ProjectAttachment.vue

@@ -0,0 +1,224 @@
+<template>
+  <el-row style="padding-bottom: 20px">
+    <el-col :span="24">
+      <baseTitle :title="'项目附件'"></baseTitle>
+    </el-col>
+    <el-form :model="attachmentParam" inline style="margin-left: 15px">
+      <el-form-item label="标签" prop="tag">
+        <el-select v-model="attachmentParam.tag" placeholder="请选择标签" clearable filterable style="width: 300px">
+          <el-option
+              v-for="item in tagsOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleSearch" color="#DED0B2">搜索</el-button>
+        <el-button v-if="uploadState&&isLineBtn" color="#DED0B2" @click="handleUpload">上传附件</el-button>
+      </el-form-item>
+    </el-form>
+    <el-col v-if="!isLineBtn" :span="24" style="margin-bottom: 8px;margin-left: 15px">
+      <el-button v-if="uploadState" color="#DED0B2" @click="handleUpload">上传附件</el-button>
+    </el-col>
+    <fvTable style="width: 100%;min-height:311px;max-height: 311px" v-if="showAttachmentTable" height="311"
+             :tableConfig="executeTableConfig" class="execute-apply-table"
+             :data="otherAttachmentList" :isSettingCol="false" :pagination="false">
+      <template #empty>
+        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+      </template>
+    </fvTable>
+  </el-row>
+  <file-preview ref="filePreviewRef" :fullscreen="false"  v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                :fileType="filePreviewParam.fileType"/>
+</template>
+
+<script setup lang="jsx">
+import {getTags} from "@/api/project-manage";
+import {ElLoading, ElNotification} from "element-plus";
+import {searchImplementationFileList} from "@/api/project-manage/attachment";
+
+const router = useRouter()
+const route = useRoute()
+const attachmentParam = reactive({
+  tag: ''
+})
+const uploadState = ref(false)
+const tagsOption = ref([])
+const showAttachmentTable = ref(true)
+
+const props = defineProps({
+  fileNameTableWidth: {
+    type: String,
+    default: '400'
+  },
+  isLineBtn: {
+    type: Boolean,
+    default: false
+  },
+})
+const executeTableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 85,
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+      width: props.fileNameTableWidth,
+      currentRender: ({row, index}) => (
+          <div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center',
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+            </div>
+        )
+      }
+    }
+  ]
+})
+const otherAttachmentList = ref([])
+
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
+const handleSearch = () => {
+  const loading = ElLoading.service({fullscreen: true})
+  let params = {
+    targetId: route.query.projectId,
+    targetState: "30"
+  }
+  if (attachmentParam.tag) {
+    tagsOption.value.forEach(item => {
+      if (item.value === attachmentParam.tag) {
+        attachmentParam.tag = item.label
+      }
+    })
+    params.tag = attachmentParam.tag
+  }
+  searchImplementationFileList(params).then(res => {
+    showAttachmentTable.value = false
+    if (res.code === 1000) {
+      otherAttachmentList.value = res.data.fileList
+      uploadState.value = res.data.upload
+      nextTick(() => {
+        showAttachmentTable.value = true
+      })
+      loading.close()
+    } else {
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+      loading.close()
+    }
+  })
+}
+const getTagsOption = () => {
+  if (!route.query.projectId) return
+  getTags(route.query.projectId).then(res => {
+    if (res.code === 1000) {
+      tagsOption.value = res.data
+    } else {
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+    }
+  })
+}
+const handleUpload = () => {
+  router.push({
+    name: 'Implementation/upload',
+    query: {
+      id: route.query.id,
+      projectId: route.query.projectId,
+      state: route.query.state,
+      step: '30'
+    }
+  })
+}
+handleSearch()
+getTagsOption()
+onActivated(()=>{
+  handleSearch()
+  getTagsOption()
+})
+</script>
+<style lang="scss">
+.execute-apply-table {
+  //.el-table__header {
+  //  .el-table__cell:last-child {
+  //    .cell {
+  //      margin-left: -108px !important;
+  //    }
+  //  }
+  //}
+
+  //.el-table__body {
+  //  .el-table__cell:last-child {
+  //    .cell {
+  //      margin-left: -108px !important;
+  //    }
+  //  }
+  //}
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -25px !important;
+    }
+  }
+
+  .el-table__body {
+    .el-table__cell:first-child {
+      .cell {
+        margin-left: -13px !important;
+      }
+    }
+  }
+}
+</style>
+<style scoped>
+:deep(.el-table--fit ) {
+  height: 311px !important;
+}
+</style>

src/components/DetailComponent/SpecialFundDetail.vue

@@ -0,0 +1,275 @@
+<template>
+  <div v-loading="loading" style="padding: 0 30px">
+    <baseTitle title="专项资金详情"></baseTitle>
+    <el-form :model="formData" ref="form" >
+      <el-row style="margin-left: 15px;margin-bottom: -18px">
+        <el-col :span="6">
+          <el-form-item label="专项名称">
+            <span>{{ formData.name }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="金额(元)">
+            <span>{{ toThousands(formData.fundAmount) }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="剩余金额(元)">
+            <span>{{ toThousands(formData.residualAmount) }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="专项资金情况说明" >
+              <div style="white-space: pre-wrap">{{formData.introduce}}
+              </div>
+          </el-form-item>
+        </el-col>
+        </el-row>
+      <el-row style="margin-bottom: -18px" class="projects">
+        <baseTitle title="关联项目" v-if="!data.taskId"></baseTitle>
+        <el-col :span="24" v-if="!data.taskId" >
+          <el-form-item >
+            <fvTable style="width: 100%;max-height:160px" height="160" v-if="showTable" :tableConfig="projectTable"
+                     :data="formData.projects" :isSettingCol="false" :pagination="false">
+              <template #empty>
+                <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
+              </template>
+            </fvTable>
+          </el-form-item>
+        </el-col>
+        <baseTitle title="附件文件"></baseTitle>
+        <el-col :span="24">
+          <el-form-item>
+            <fvTable style="width: 100%;max-height: 160px;"  height="160"  v-if="showTable" :tableConfig="fileTable"
+                     :data="formData.files" :isSettingCol="false" :pagination="false">
+              <template #empty>
+                <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
+              </template>
+            </fvTable>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" style="margin-top: -18px">
+          <div v-if="data.taskId">
+            <baseTitle title="审核意见"></baseTitle>
+            <el-form-item prop="auditOpinion">
+              <el-input
+                  v-model="formData.auditOpinion"
+                  :rows="3"
+                  type="textarea"
+                  placeholder="请输入审核意见"
+              />
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <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:#BEA266 ; --el-switch-off-color:#cecdcd"
+            />
+          </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="fundProcess"/>
+        </div>
+      </div>
+    </el-form>
+    <opinion v-if="data.taskId" :formData="data.formData" :taskId="data.taskId"
+             :taskUserOptionList="data.taskUserOptionList"
+             v-model:value="formData.auditOpinion"></opinion>
+    <file-preview ref="filePreviewRef"  v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {toThousands} from '@/utils/changePrice.js'
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
+import {downloadFile} from "@/api/project-demand";
+
+const changeDiagram = ref(false)
+const emit = defineEmits(['getInfo', "update:formData"])
+const form = ref()
+const router = useRouter()
+
+const props = defineProps({
+  formData: {
+    type: Array,
+    default: []
+  },
+  data: {
+    type: Array,
+    default: []
+  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  }, showTable: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+const projectTable = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'projectName',
+      label: '项目名称',
+      align: 'center',
+      width: 400
+    },
+    {
+      prop: 'specialFundAmount',
+      label: '项目金额',
+      align: 'center',
+      currentRender:({row})=>{
+        return <span>{toThousands(row.specialFundAmount)}</span>
+      }
+    },
+    {
+      prop: 'startTime',
+      label: '项目时间',
+      align: 'center'
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      currentRender: ({row, index}) => {
+        return (
+            <el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
+        )
+      }
+    }
+  ]
+})
+const fileTable = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+      width: 400,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      currentRender: ({row, index}) => {
+        return (
+            <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+        )
+      }
+    }
+  ]
+})
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
+const handleView=(row)=>{
+  router.push({
+    name: 'Implementation/detail',
+    query: {
+      id: row.requirementId,
+      projectId: row.projectId,
+      step: '10'
+    }
+  })
+}
+const handleDownload = (row) => {
+  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()
+  })
+}
+
+watch(() => props.loading, (newVal) => {
+  props.loading = newVal
+}, {deep: true})
+
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
+watch(() => props.showTable, (newVal) => {
+  props.showTable = newVal
+}, {deep: true})
+</script>
+
+<style scoped lang="scss">
+.projects{
+  :deep(.el-table--fit ) {
+    height: 300px !important;
+  }
+}
+
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -20px !important;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -10px !important;
+    }
+  }
+}
+</style>

src/components/DetailComponent/SummaryDetail.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="detail-block" v-loading="loading">
+    <el-form :model="localFormData" ref="summaryForm" :rules="rules">
+      <baseTitle title="预期知识产权"></baseTitle>
+      <el-row gutter="20" style="margin-bottom: -18px;margin-left: 5px">
+        <el-col :span="6">
+          <el-form-item label="预期成果形式" prop="resultForm">
+            <span>{{ filterDict(cacheStore.getDict('result_form'), localFormData.resultForm) }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="知识产权状况" prop="intellectualProperty">
+            <span>{{
+                filterDict(cacheStore.getDict('intellectual_property'), localFormData.intellectualProperty)
+              }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="发明专利(项)" prop="inventionPatent">
+            <span>{{ localFormData.inventionPatent }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="新型专利(项)" prop="newPatent">
+            <span>{{ localFormData.newPatent }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="软件著作权(项)" prop="softwareCopyright">
+            <span>{{ localFormData.softwareCopyright }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="著作权(项)" prop="copyright">
+            <span>{{ localFormData.copyright }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="其他(项)" prop="other">
+            <span>{{ localFormData.other }}</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <baseTitle title="项目描述"></baseTitle>
+      <el-row gutter="20" style="margin-left: 5px;margin-bottom: -18px;">
+        <el-col :span="24">
+          <el-form-item label="现有业务描述" prop="serviceDescription">
+            <span style="white-space: pre-wrap">{{ localFormData.serviceDescription }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="建设目标描述" prop="contentDescription">
+            <span style="white-space: pre-wrap">{{ localFormData.contentDescription }}</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <baseTitle title="需求上报申请书" style="margin-bottom: -3px;"></baseTitle>
+<!--      <el-row gutter="20" style="margin-bottom: -15px;">-->
+<!--        <el-col :span="24">-->
+<!--          <single-file-component tag="需求上报" v-model:value="localFormData.singleFile" :processViewer="processViewer"/>-->
+<!--          &lt;!&ndash;          <el-form-item>&ndash;&gt;-->
+<!--          &lt;!&ndash;            {{localFormData.singleFile}}&ndash;&gt;-->
+<!--          &lt;!&ndash;            <el-button type="primary" link @click="handleDownload(localFormData.singleFile)" style="font-size: 16px">&ndash;&gt;-->
+<!--          &lt;!&ndash;              {{ localFormData.singleFile?.originalFileName }}&ndash;&gt;-->
+<!--          &lt;!&ndash;            </el-button>&ndash;&gt;-->
+<!--          &lt;!&ndash;          </el-form-item>&ndash;&gt;-->
+<!--        </el-col>-->
+<!--      </el-row>-->
+<!--/*      <baseTitle title="附件文件" style="margin-bottom: 0"></baseTitle>*/-->
+      <el-row gutter="20" style="margin-bottom: -18px;">
+        <el-col :span="24" class="file-table-style">
+          <file-component tag="需求上报"
+                          v-model:value="localFormData.fileList" :processViewer="processViewer"
+                          :file-list-show="fileListShow"/>
+        </el-col>
+        <el-col :span="24" style="margin-top: -15px">
+          <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 v-if="data.state==='5'" style="margin-bottom: 15px">
+            <baseTitle title="前置流程" v-if="localFormData.preProcess"></baseTitle>
+            <div style="display: flex;align-items: center;flex-wrap: wrap;">
+              <div v-for="(item,index) in localFormData.preProcess" :key="item.requestId">
+                <a :href="item.baseUrl" target="_blank"
+                   style="color: #2a99ff;cursor: pointer">{{ item.requestName }}<span
+                    v-if="index != localFormData.preProcess.length -1">，</span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div v-perm="['annual:plan:approve']" v-if="data.state==='4'">
+            <baseTitle title="前置流程"></baseTitle>
+            <select-pre-process :formData="localFormData"/>
+            <baseTitle title="审核意见"></baseTitle>
+            <el-form-item prop="_value">
+              <el-input
+                  v-model="_value"
+                  :rows="3"
+                  type="textarea"
+                  placeholder="请输入审核意见"
+              />
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="approval-record">
+        <div class="approval-title" style="margin-top: -12px">
+          <baseTitle title="审批记录"></baseTitle>
+          <div class="diagram">
+            <div class="base-title">流程图</div>
+            <el-switch
+                v-model="changeDiagram"
+                style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
+            />
+          </div>
+        </div>
+        <div class="process">
+          <operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
+                            :operation-list="data.operationList"
+                            :step="'report'"
+                            :state="data.state"/>
+          <process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="summaryProcess"/>
+        </div>
+      </div>
+    </el-form>
+    <div class="oper-page-btn" v-perm="['annual:plan:approve']" v-if="data.state==='4'">
+      <el-button type="danger" @click="handleRejectPlan">驳回年度计划</el-button>
+      <el-button color="#DED0B2" @click="handleAgreePlan">通过年度计划</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {toThousands} from '@/utils/changePrice.js'
+import {downloadFile, deleteFile} from "@/api/project-demand";
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
+import {useTagsView} from '@/stores/tagsview.js'
+import {getFundOption} from "@/api/special-fund";
+import {useCacheStore} from '@/stores/cache.js'
+import {getSubCompOpt} from "@/api/user/user";
+import FileComponent from "./FileComponent.vue";
+import {ElNotification} from "element-plus";
+import {approvePlan} from "@/api/project-demand/summary";
+import SelectPreProcess from "@/components/SelectPreProcess.vue";
+
+const emit = defineEmits(['update:value'])
+const tagsViewStore = useTagsView()
+const cacheStore = useCacheStore()
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: {}
+  },
+  data: {
+    type: Object,
+    default: {
+      state: '1'
+    }
+  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
+  fileListShow: {
+    type: String,
+    default: 'READ'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String,
+    default: ''
+  }
+})
+const changeDiagram = ref(false)
+const localFormData = ref({})
+const route = useRoute()
+const router = useRouter()
+const fundOption = ref([])
+const companyOption = ref([])
+const dictName = ref({})
+const rules = reactive({
+  auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
+})
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})
+const handleRejectPlan = async () => {
+  // const values = form.value.getValues()
+  // console.log('route',route.query.projectId)
+  if (!_value.value) {
+    ElNotification({
+      title: '提示',
+      message: '请填写审核意见',
+      type: 'warning'
+    })
+    return
+  }
+  const params = {
+    auditOpinion: _value.value,
+    projectId: parseInt(route.query.projectId),
+    state: false
+  }
+  // console.log('params', params)
+  const res = await approvePlan(params)
+  ElNotification({
+    title: '提示',
+    message: res.msg,
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+  router.push({
+    name: 'Summary'
+  })
+}
+const handleAgreePlan = async () => {
+  const params = {
+    auditOpinion: _value.value,
+    projectId: parseInt(route.query.projectId),
+    preProcess: JSON.stringify(localFormData.value.preProcess),
+    state: true
+  }
+
+  const res = await approvePlan(params)
+  ElNotification({
+    title: '提示',
+    message: res.msg,
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+  router.push({
+    name: 'Summary'
+  })
+}
+const filterDict = (data, value) => {
+  if (data === undefined || value === undefined) return;
+  let label = ''
+  let result = []
+  if (value instanceof Array) {
+    value.forEach(item1 => {
+      data.find(item => {
+        if (item.value == item1) {
+          result.push(item.label)
+        }
+      })
+    })
+    label = result.map(item => item).join('，')
+  } else {
+    if (data instanceof Array) {
+      data.find(item => {
+        if (item.value == value) {
+          label = item.label
+        }
+      })
+    }
+  }
+  return label
+}
+const getFundOptions = async () => {
+  const resFund = await getFundOption()
+  fundOption.value = resFund.data
+  const res = await getSubCompOpt()
+  companyOption.value = res.data
+}
+const changeName = (option, value) => {
+  let name = ''
+  option.forEach(item => {
+    if (item.value == value) {
+      name = item.label
+    }
+  })
+  return name
+}
+const handleDownload = (row) => {
+  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()
+  })
+}
+
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
+
+watch(() => props.loading, (newVal) => {
+  props.loading = newVal
+}, {deep: true})
+
+watchEffect(() => {
+  props.formData.singleFile = [props.formData.singleFile]
+  return Object.keys(props.formData).length && (localFormData.value = props.formData)
+})
+
+getFundOptions()
+</script>
+
+<style scoped lang="scss">
+.detail-block {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-bottom: 0 !important;
+}
+.file-table-style{
+  :deep(.el-table__header) {
+    .is-leaf:first-child {
+      .cell {
+        margin-left: -25px !important;
+      }
+    }
+  }
+
+  :deep(.el-table__body) {
+    .el-table__cell:first-child {
+      .cell {
+        margin-left: -13px !important;
+      }
+    }
+  }
+}
+
+</style>

src/components/DetailComponent/singleFileComponent.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-form :label-position="labelAlign">
+    <el-form-item :label="title?'其他文件':''"  :label-position="labelAlign" :label-width="title?95:''">
+      <fvTable style="width: 100%;max-height: 80px;" v-if="processViewer"  height="80" :tableConfig="tableConfig"
+              :data="_value" :isSettingCol="false" :pagination="false">
+        <template #empty>
+          <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
+        </template>
+      </fvTable>
+    </el-form-item>
+  </el-form>
+  <file-preview ref="filePreviewRef" :fullscreen="fullscreen"  v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                :fileType="filePreviewParam.fileType"/>
+</template>
+
+<script setup lang="jsx">
+import {downloadFile, deleteFile} from "@/api/project-demand";
+import {ElNotification} from "element-plus";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  tag: {
+    type: String,
+    default: ''
+  },
+  fileNameTableWidth: {
+    type: String,
+    default: '400'
+  },
+  value: {
+    type: Array,
+    default: []
+  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
+  labelAlign: {
+    type: String,
+    default: 'right'
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:value'])
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 85,
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+      width: props.fileNameTableWidth,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      width: 150,
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link>
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                                              onDelete={() => handleDelete(row)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})
+
+const getOtherFile = (val) => {
+  props.processViewer = false
+  let fileObj = compositeParam(val)
+  _value.value.push(fileObj)
+  nextTick(() => {
+    props.processViewer = true
+  })
+}
+
+
+const compositeParam = (item, type) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: true,
+    tag: props.tag
+  }
+}
+const handleDownload = (row) => {
+  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()
+  })
+}
+const handleDelete = (row) => {
+  deleteFile(row.fileId).then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      _value.value.splice(_value.value.findIndex((item) => item.fileId === row.fileId), 1);
+    }
+  });
+}
+
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-table--fit ) {
+  height: 80px !important;
+}
+:deep(.el-table__header) {
+   .is-leaf:first-child {
+     .cell {
+       margin-left: -25px !important;
+     }
+   }
+ }
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -13px !important;
+    }
+  }
+}
+</style>

src/components/FileUpload.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-upload :file-list="_value"
+             :action="uploadFileUrl"
+             :headers="headers"
+             :limit="maxSize"
+             with-credentials
+             :multiple="multiple"
+             :data="uploadParams"
+             :show-file-list="showFileList"
+             :auto-upload="true"
+             :before-upload="beforeUpload"
+             :on-success="handleUploadSuccess"
+             :on-error="uploadError"
+             :before-remove="beforeRemove"
+             :on-remove="handleRemove"
+  >
+    <el-button color="#DED0B2" :loading="loading" :disabled="disabled">上传文件</el-button>
+  </el-upload>
+</template>
+
+<script setup>
+import { ElMessageBox, ElNotification} from "element-plus";
+import {getToken} from '@/utils/auth'
+
+const baseURL = import.meta.env.VITE_BASE_URL
+const uploadFileUrl = ref(baseURL + "/workflow/process/file/upload")
+const headers = reactive({
+  authorization: getToken()
+})
+const loading = ref(false)
+const showTable = ref(false)
+const uploadParams = ref({})
+const props = defineProps({
+  value: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  maxSize: {
+    type: Number,
+    default: 30
+  },
+  showFileList: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(["input", "getFile", "delete"])
+const fileList = ref([])
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("input", val);
+  }
+})
+const beforeRemove = (file) => {
+  return ElMessageBox.confirm(`确认删除名称为${file.name}的文件吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => true)
+}
+
+const handleRemove = (file) => {
+  emit("delete", file.response.data.id)
+}
+const beforeUpload = () => {
+  loading.value = true
+  return true
+}
+const handleUploadSuccess = (res) => {
+  ElNotification({
+    title: '提示',
+    message: res.code === 1000 ? '上传成功' : '上传失败',
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  loading.value = false
+  showTable.value = true
+  let data = res.data
+  fileList.value.push(data)
+  emit("getFile", res.data)
+}
+const uploadError = () => {
+  loading.value = false
+  ElNotification({
+    title: '提示',
+    message: "上传失败，请稍后再试！",
+    type: 'error'
+  })
+}
+defineExpose({
+  handleRemove
+})
+</script>
+
+<style lang="scss" scoped>
+a {
+  font-size: 14px;
+  color: #2a99ff;
+}
+
+:deep(.el-upload-list) {
+  width: 400px;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>

src/components/ImportExcel.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-upload :file-list="[]"
+             :limit="maxSize"
+             with-credentials
+             :multiple="multiple"
+             :http-request="httpRequestHandle"
+             :data="uploadParams"
+             :auto-upload="true"
+             :show-file-list="false"
+             :before-upload="beforeUpload"
+             :before-remove="beforeRemove"
+             :on-remove="handleRemove"
+  >
+    <el-button color="#DED0B2" style="margin-left: 10px; margin-right: 10px;" :disabled="disabled">导入</el-button>
+  </el-upload>
+</template>
+
+<script setup>
+import {ElMessageBox, ElNotification} from "element-plus";
+import {getToken} from '@/utils/auth'
+import axios from "axios";
+
+const props = defineProps({
+  value: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  maxSize: {
+    type: Number,
+    default: 30
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  projectId: {
+    type: Number,
+    default: 0
+  }
+})
+
+
+const baseURL = import.meta.env.VITE_BASE_URL
+const uploadFileUrl = ref(baseURL + "/workflow/mosr/expense/ledger/import?projectId=" + props.projectId)
+const headers = reactive({
+  authorization: getToken()
+})
+// const loading = ref(false)
+const uploadParams = ref({})
+const emit = defineEmits(["input", "getFile", "delete"])
+const beforeRemove = (file) => {
+  return ElMessageBox.confirm(`确认删除名称为${file.name}的文件吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => true)
+}
+
+const handleRemove = (file) => {
+  emit("delete", file.response.data.id)
+}
+const beforeUpload = () => {
+  // loading.value = true
+  return true
+}
+const httpRequestHandle = (param) => {
+
+  let file = param.file
+  axios.post(uploadFileUrl.value, {
+    file: file
+  }, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+      ...headers
+    }
+  }).then(res => {
+    handleUploadSuccess(res)
+  }).catch(error => {
+    uploadError(error)
+  })
+}
+const handleUploadSuccess = (res) => {
+  let data = res.data
+  ElNotification({
+    title: '提示',
+    message: data.code === 1000 ? '上传成功' : '上传失败',
+    type: data.code === 1000 ? 'success' : 'error'
+  })
+  emit("success")
+}
+const uploadError = (error) => {
+  // loading.value = false
+  ElNotification({
+    title: '提示',
+    message: "上传失败，请稍后再试！",
+    type: 'error'
+  })
+}
+defineExpose({
+  handleRemove
+})
+</script>
+
+<style lang="scss" scoped>
+a {
+  font-size: 14px;
+  color: #2a99ff;
+}
+
+</style>

src/components/NameCircle.vue

@@ -0,0 +1,133 @@
+<template>
+  <div style="display: block">
+    <slot name="pre"></slot>
+    <div class="user-audit">
+      <div class="circle-user">
+        <Tooltip v-if="userName" :content="userName" placement="bottom-start" width="45px"/>
+        <Tooltip v-else :content="user.name" placement="bottom-start" width="45px"/>
+        <!--        :style="{-->
+        <!--        backgroundColor: '#fff'-->
+        <!--        }">-->
+        <div v-if="user.icon"
+             class="el-timeline-item__node">
+          <div v-if="user.isAgent&&!showIcon">
+          </div>
+          <el-icon v-else size="15" :color="user.color" :class="user.class">
+            <component :is="user.icon"/>
+          </el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  row: {
+    type: Number,
+    default: 1
+  },
+  hoverTip: {
+    type: Boolean,
+    default: false
+  },
+  showIcon: {
+    type: Boolean,
+    default: false
+  },
+  user: {
+    type: Object,
+    default: {}
+  },
+  userName: {
+    type: String,
+    default: ''
+  },
+  mode: {
+    type: String,
+    default: 'design'
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+})
+
+const init = () => {
+  // for (let user of props.userInfo) {
+  initUser(props.user)
+  // }
+}
+
+const initUser = (user) => {
+  let state = user.state
+  //创建节点
+  if (state === 'CREATE') {
+    user["icon"] = 'CircleCheckFilled'
+    user["color"] = "#0bbd87"
+  }
+  //审批通过
+  if (state === 'AGREE' || state === 'AUTO_PASS') {
+    user["icon"] = 'CircleCheckFilled'
+    user["color"] = "#0bbd87"
+  }
+  if (props.type === "CC") {
+    user["icon"] = "Promotion"
+    user["color"] = "#3395f8"
+  }
+  //审批处理中
+  if (state === 'RUNNING') {
+    user["icon"] = 'Loading'
+    user["color"] = "#f78f5f"
+    user["class"] = 'is-loading'
+  }
+  //拒绝后评论
+  if (state === 'REFUSE' || state === 'ROLLBACK') {
+    // user["icon"] = 'Close'
+    // user["color"] = "#f56c6c"
+    user["icon"] = 'CircleCloseFilled'
+    user["color"] = "#f56c6c"
+  }
+  if (state === 'PASS') {
+    user["icon"] = 'MoreFilled'
+    user["color"] = "#c0c4cc"
+  }
+  // if (state === 'ROLLBACK') {
+  //   // user["icon"] = 'RefreshLeft'
+  //   // user["color"] = "#f78f5f"
+  //   user["icon"] = 'CircleCloseFilled'
+  //   user["color"] = "#f56c6c"
+  // }
+  return user;
+}
+
+init()
+</script>
+
+<style scoped lang="scss">
+.user-audit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .circle-user {
+    width: 46px;
+    height: 46px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid #ACACAC;
+    position: relative;
+    background-color: #8a7243;
+    color: #fff;
+
+    .el-timeline-item__node {
+      position: absolute;
+      bottom: 0;
+      right: 1px;
+    }
+  }
+}
+</style>

src/components/ParentView.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/components/PointTag.vue

@@ -0,0 +1,101 @@
+<template>
+  <div style="display: flex;justify-content: center">
+    <span class="stateIcon" :style="{backgroundColor: filterDictClass(cacheStore.getDict(dictType), value)}"></span>
+    <span>{{tagConfig.label}}</span>
+    <span> {{ filterDict(cacheStore.getDict(dictType), value) }}</span>
+  </div>
+</template>
+
+<script setup>
+import {defineProps} from "vue";
+import {useCacheStore} from "@/stores/cache.js";
+
+const cacheStore = useCacheStore();
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: ""
+  },
+  value: {
+    type: Object,
+    default: null
+  }
+});
+const tagConfig = reactive({
+  listClass: "green",
+  isType: true,
+  label: ""
+});
+
+const filterDictClass = (data, value) => {
+  if (!data|| value == null) return 'gray'
+  if (data instanceof Array) {
+    tagConfig.value = data.find(item => item.value == value)
+    if (!tagConfig.value) {
+      return '#409EFF'
+    } else {
+      if (tagConfig.value?.isType) {
+        return changeParams(tagConfig.value.listClass)
+      } else {
+        return tagConfig.value.listClass
+      }
+    }
+  }
+}
+const filterDict = (data, value) => {
+  if (!data || value == null) return '未知'
+  if (data instanceof Array) {
+    if (value == true || value == false) {
+      tagConfig.value = data.find(item => item.value == value.toString())
+    } else if (typeof value === "object") {
+      if (value !== null) {
+        tagConfig.value = data.find(item => item.value == value[0])
+      } else {
+        tagConfig.value = {}
+      }
+    } else {
+      tagConfig.value = data.find(item => item.value == value)
+    }
+  }
+  return tagConfig.value?.label || '未知'
+}
+/**
+ * 根据接口返回的listClass切换成对应的颜色
+ * @param listClass 后端返回的listClass字段
+ * @returns {string}
+ */
+const changeParams = (listClass) => {
+  switch (listClass) {
+    case 'danger':
+      return 'red'
+    case 'success':
+      return  '#67C23A'
+    case 'info':
+      return  '#909399'
+    case 'primary':
+      return '#409EFF'
+    case 'warning':
+      return  '#E6A23C'
+    default:
+      return listClass
+  }
+}
+// dictFormat()
+</script>
+
+<style scoped lang="scss">
+//.dot{
+//  width:8px;
+//  height: 20px;
+//  margin-left: -5px;
+//  background-color: green;
+//  z-index: 99999;
+//}
+:deep(.el-tag){
+  position: relative;
+  margin-top: 9px;
+  margin-right: 7px;
+  height: 8px;
+
+}
+</style>

src/components/PopoverDelete.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-popconfirm
+      confirm-button-text="确认"
+      cancel-button-text="取消"
+      icon="WarningFilled"
+      icon-color="#E6A23C"
+      :title="title"
+      @confirm="handleDelete"
+      @cancel="handleCancel"
+  >
+    <template #reference>
+      <el-button  :type="btnType" size="mini" :disabled="isDisabled" v-if="perm" v-perm="perm" :icon="btnIcon" :plain="isPlain" :link="link">
+        {{ btnText }}
+      </el-button>
+      <el-button  :type="btnType" size="mini" :disabled="isDisabled" v-else  :icon="btnIcon" :plain="isPlain" :link="link">
+        {{ btnText }}
+      </el-button>
+    </template>
+  </el-popconfirm>
+</template>
+
+<script setup>
+const props = defineProps({
+  name: {
+    type: Object,
+    default: null
+  },
+  btnType: {
+    type: String,
+    default: 'danger'
+  },
+  type: {
+    type: String,
+    default: ''
+  },
+  link: {
+    type: Boolean,
+    default: true
+  },
+  btnIcon: {
+    type: String,
+    default: ''
+  },
+  btnText: {
+    type: String,
+    default: '删除'
+  },
+  perm: {
+    type: Array,
+    default: null
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isPlain: {
+    type: Boolean,
+    default: false
+  },
+})
+const emit = defineEmits()
+const title = ref(`确认${props.btnText}名称为"${props.name}"的${props.type}吗!`)
+const visible = ref(false)
+watch(() => props.name, (newVal) => {
+  title.value = "确认" + props.btnText + "名称为" + '"' + props.name + '"' + "的" + props.type + "吗!"
+})
+const handleCancel = () => {
+  visible.value = false
+}
+const handleDelete = () => {
+  emit("delete")
+}
+</script>
+
+<style lang="scss">
+.el-popconfirm__main {
+  display: flex;
+  word-break: break-all;
+  align-items: center;
+}
+</style>

src/components/SearchFilesByTag.vue

@@ -0,0 +1,215 @@
+<template>
+  <div v-loading="_value">
+    <el-form :model="attachment" inline style="margin-left: 15px" @submit.prevent="handleSearch">
+      <el-form-item label="名称" prop="fileName">
+        <el-input v-model="attachment.fileName" placeholder="请输入文件名查询" clearable filterable style="width: 300px"/>
+      </el-form-item>
+      <el-form-item label="类型" prop="targetState" v-if="allFile">
+        <el-select v-model="attachment.targetState" placeholder="请选择类型" clearable  filterable style="width: 300px">
+          <el-option
+              v-for="item in cacheStore.getDict('archive_file_type')"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标签" prop="tag" v-if="type==='30'">
+        <el-select v-model="attachment.tag" placeholder="请选择标签" clearable  filterable style="width: 300px">
+          <el-option
+              v-for="item in tagsOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleSearch" color="#DED0B2">搜索</el-button>
+        <el-button @click="handleReset">重置</el-button>
+        <el-button v-if="uploadState&&!allFile" color="#DED0B2" @click="handleUpload">上传附件</el-button>
+      </el-form-item>
+    </el-form>
+    <el-card style="width: 100%;overflow-y: hidden">
+      <fvTable style="width: 100%;max-height: 318px" v-if="showTable" height="318"  :tableConfig="tableConfig"
+               :data="fileList" :isSettingCol="false" :pagination="false">
+        <template #empty>
+          <el-empty :image-size="99" description="暂无数据" style="padding: 0"/>
+        </template>
+      </fvTable>
+    </el-card>
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {downloadFile} from "@/api/project-demand";
+import {ElNotification} from "element-plus";
+import {getTags} from "@/api/project-manage";
+import {computed, ref} from "vue";
+
+import {useCacheStore} from '@/stores/cache.js'
+const route = useRoute()
+const router = useRouter()
+const cacheStore = useCacheStore()
+const attachment = reactive({})
+const emit = defineEmits(['search','update:modelValue'])
+const props = defineProps({
+  fileList: {
+    type: Array,
+    default: []
+  },
+  type: {
+    type: String,
+    default: '00'
+  },
+  uploadState: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  allFile: {
+    type: Boolean,
+    default: false
+  }
+})
+const tagsOption = ref([])
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width:85,
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'createTime',
+      label: '上传时间',
+      align: 'center',
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+            </div>
+        )
+      }
+    }
+  ]
+})
+const showTable = ref(true)
+const _value = computed({
+  get() {
+    return props.loading || ""
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
+const getTagsOption = () => {
+  if (!route.query.id) return
+  getTags(route.query.id).then(res => {
+    if (res.code === 1000) {
+      tagsOption.value = res.data
+    } else {
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: 'error'
+      })
+    }
+  })
+}
+const handleSearch = () => {
+  emit('search', attachment)
+}
+const handleReset=()=>{
+  attachment.fileName=''
+  attachment.targetState=''
+  attachment.tag=null
+  emit('search', {})
+}
+const handleUpload = () => {
+  emit('upload')
+}
+const handleDownload = (row) => {
+  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()
+  })
+}
+watch(() => props.type, (val) => {
+  props.type = val
+})
+watch(() => props.fileList, (val) => {
+  showTable.value = false
+  nextTick(() => {
+    showTable.value = true
+  })
+  props.fileList = val
+})
+if (props.type === '30') {
+  getTagsOption()
+}
+
+onActivated(()=>{
+  if (props.type === '30') {
+    getTagsOption()
+  }
+  handleSearch()
+})
+</script>
+
+<style scoped>
+:deep(.el-table--fit ) {
+  height: 318px !important;
+}
+</style>

src/components/SelectPreProcess.vue

@@ -0,0 +1,191 @@
+<template>
+  <div style="display: flex;align-items: center;flex-wrap: wrap;">
+    <el-button color="#DED0B2" @click="handleShowPreTable" style="margin-right: 10px">
+      {{
+        localFormData.preProcess && localFormData.preProcess.length > 0 ? '更改' : '请选择前置流程'
+      }}
+    </el-button>
+    <div v-for="(item,index) in localFormData.preProcess" :key="item.requestId">
+      <a :href="item.baseUrl" target="_blank"
+         style="color: #2a99ff;cursor: pointer">{{ item.requestName }}<span
+          v-if="index != localFormData.preProcess.length -1">，</span>
+      </a>
+    </div>
+  </div>
+  <el-dialog v-if="showPreTable" title="前置流程" v-model="showPreTable" width="80%">
+    <el-form :model="preProcessForm" inline @submit.prevent="getPreProcessList">
+      <el-form-item label="请求名称">
+        <el-input v-model="preProcessForm.requestName" placeholder="请输入请求名称" clearable>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button color="#DED0B2" @click="getPreProcessList">搜索</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-tag type="danger" style="font-size: 16px;color: red;" >特别提示：{{ getPreProcessTag(localFormData.projectImpact,basicData.projectImpact) }}</el-tag>
+      </el-form-item>
+    </el-form>
+    <el-table :data="preProcessList" v-loading="loading"
+              @select="handleSelect" @select-all="handleSelect" row-key="requestId" ref="preProcessTable">
+      <el-table-column type="selection" width="55" :reserve-selection="true"/>
+      <el-table-column prop="requestId" label="请求id"></el-table-column>
+      <el-table-column prop="requestName" label="请求名称"></el-table-column>
+      <el-table-column prop="lastOperatorName" label="最后操作人名称"></el-table-column>
+      <el-table-column prop="lastOperateTime" label="最后操作时间"></el-table-column>
+      <el-table-column prop="currentNodeName" label="当前节点"></el-table-column>
+      <el-table-column prop="creatorName" label="创建人"></el-table-column>
+      <el-table-column prop="createTime" label="创建时间"></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <a :href="scope.row.baseUrl" target="_blank" style="color: #2a99ff;margin-left: 10px">查看流程</a>
+        </template>
+      </el-table-column>
+    </el-table>
+    <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
+            :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
+    <div class="oper">
+      <el-button color="#DED0B2" @click="choosePreProcess">确定</el-button>
+      <el-button @click="handleCancel">取消</el-button>
+    </div>
+  </el-dialog>
+
+</template>
+
+<script setup>
+import {
+  getPreProcess
+} from "@/api/project-manage";
+import Paging from "@/components/pagination/index.vue";
+
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: {}
+  },
+  basicData: {
+    type: Object,
+    default: {}
+  },
+})
+const loading = ref(false)
+//暂存数据
+const currentList = ref([])
+const showPreTable = ref(false)
+const selectRows = ref([])
+const preProcessList = ref([])
+const total = ref(0)
+const localFormData = ref({
+  projectPersonIds: [],
+  projectChargePerson: null,
+  preProcess: [
+    // {
+    //   requestId: null,
+    //   requestName: '',
+    //   baseUrl: ''
+    // }
+  ]
+})
+const preProcessForm = reactive({
+  requestName: ''
+})
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+const getPreProcessTag = (impact,basicImpact) => {
+  let data=''
+  if(impact){
+    data= impact
+  }else if(basicImpact){
+    data= basicImpact
+  }
+  if (data == 1) {
+    //一般项目
+    return '一般项目20万以下要总经理审批'
+  } else if (data == 2) {
+    //重大项目
+    return '重大项目20万元到500万元之间要总办会审批'
+  } else if (data == 3) {
+    //特别重大项目
+    return '特别重大项目500万元以上要董事会审批'
+  }
+}
+const handleReset = () => {
+  preProcessForm.requestName = ''
+  getPreProcessList()
+}
+const handleSelect = async (selection) => {
+  selectRows.value = selection
+}
+const handleShowPreTable = () => {
+  showPreTable.value = true
+  getPreProcessList()
+}
+const handleCancel = () => {
+  showPreTable.value = false
+}
+
+const choosePreProcess = () => {
+  let preProcessObj = {}
+  let preProcessArray = []
+  selectRows.value.forEach((item) => {
+    preProcessObj = {
+      requestId: item.requestId,
+      requestName: item.requestName,
+      baseUrl: item.baseUrl
+    }
+    preProcessArray.push(preProcessObj)
+  })
+  localFormData.value.preProcess = preProcessArray
+  showPreTable.value = false
+  localStorage.setItem('preProcess', JSON.stringify(preProcessArray))
+}
+
+const getPreProcessList = () => {
+  loading.value = true
+  getPreProcess().then(res => {
+    loading.value = false
+    let searchArray = []
+    let regexPattern = ("%" + preProcessForm.requestName + "%").replace(/%/g, '.*').replace(/_/g, '.');
+    let regex = new RegExp('^' + regexPattern + '$');
+    res.data.filter((item) => {
+      if (regex.test(item.requestName)) {
+        searchArray.push(item)
+      }
+    })
+    // res.data.forEach((item) => {
+    //   localFormData.value.preProcess.forEach((item1) => {
+    //     if (item.requestId == item1.requestId) {
+    //       preProcessTable.value.toggleRowSelection(item)
+    //     }
+    //   })
+    // })
+    total.value = searchArray.length
+    currentList.value = searchArray
+    preProcessList.value = currentList.value.slice(0, 10)
+  })
+}
+//切换每页显示条数
+const handleSizeChange = (val) => {
+  pageInfo.pageSize = val;
+  preProcessList.value = currentList.value.slice((pageInfo.pageNum - 1) * val, pageInfo.pageNum * val)
+};
+
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val;
+  preProcessList.value = currentList.value.slice((val - 1) * pageInfo.pageSize, val * pageInfo.pageSize)
+};
+watchEffect(() => {
+  return Object.keys(props.formData).length && (localFormData.value = props.formData)
+})
+</script>
+
+<style scoped>
+.oper {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/Tag.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="tag-style">
+    <el-tag v-if="tagConfig?.isType" :type="tagConfig?.listClass" :effect="tagConfig?.theme || 'plain'">
+      {{ filterDict(cacheStore.getDict(dictType), value) }}
+    </el-tag>
+    <el-tag v-else :color="tagConfig?.listClass" :effect="tagConfig?.theme || 'plain'"
+            :class="{'null-tag':filterDict(cacheStore.getDict(dictType), value)===undefined}">
+      {{ filterDict(cacheStore.getDict(dictType), value) }}
+    </el-tag>
+  </div>
+</template>
+
+<script setup>
+import {useCacheStore} from "@/stores/cache.js";
+import {defineProps, nextTick} from "vue";
+
+const cacheStore = useCacheStore();
+
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: "",
+    required: true
+  },
+  value: {
+    type: String || Number,
+    default: null
+  }
+});
+
+const tagConfig = ref({})
+
+const filterDict = (data, value) => {
+  if (!data || value == null) return
+  if (data instanceof Array) {
+    if (value == true || value == false) {
+      tagConfig.value = data.find(item => item.value == value.toString())
+    } else if (typeof value === "object") {
+      if (value !== null) {
+        tagConfig.value = data.find(item => item.value == value[0])
+      } else {
+        tagConfig.value = {}
+      }
+    } else {
+      tagConfig.value = data.find(item => item.value == value)
+    }
+  }
+  return tagConfig.value?.label || '未知'
+}
+</script>
+
+<style scoped lang="scss">
+.tag-style {
+  :deep(.el-tag.el-tag--dark) {
+    border-color: transparent !important;
+  }
+
+  .null-tag {
+    border-color: transparent;
+    background-color: transparent;
+  }
+}
+</style>

src/components/TagAndFileUpload.vue

@@ -0,0 +1,120 @@
+<template>
+  <baseTitle title="标签名称"></baseTitle>
+  <el-form :model="formData" ref="tagForm" label-width="auto" :rules="rules">
+    <el-form-item label="标签名称" prop="tagName">
+      <el-input v-model="formData.tagName" placeholder="请输入标签名称" style="width: 300px" v-if="showInput"/>
+      <el-select v-model="formData.tagName" placeholder="请选择标签" remote clearable filterable style="width: 300px" v-else>
+        <el-option
+            v-for="item in tagsOption"
+            :key="item.label"
+            :label="item.value"
+            :value="item.label"
+        />
+      </el-select>
+    </el-form-item>
+  </el-form>
+  <baseTitle title="其他文件"></baseTitle>
+  <el-card style="width: 100%;margin: 15px 0">
+    <file-upload @getFile="getFiles"/>
+    <fvTable style="width: 100%;max-height: 160px;height: 160px"  height="160"  v-if="showTable" :tableConfig="tableConfig"
+             :data="fileList" :isSettingCol="false" :pagination="false">
+      <template #empty>
+        <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
+      </template>
+    </fvTable>
+  </el-card>
+  <div class="oper-page-btn">
+    <el-button color="#DED0B2" @click="handleSubmit(tagForm)">提交</el-button>
+  </div>
+</template>
+
+<script setup lang="jsx">
+const props = defineProps({
+  tagsOption: {
+    type: Array,
+    default: []
+  }, formData: {
+    type: Array,
+    default: []
+  }, showInput: {
+    type: Boolean,
+    default: true
+  },
+})
+const rules = reactive({
+  tagName: [{required: true, message: '请输入标签名称', trigger: ['blur', 'change']}],
+})
+const tagForm = ref()
+const showTable = ref(true)
+const emits = defineEmits(['getFile'])
+const fileList = ref([])
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'tag',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+            </div>
+        )
+      }
+    }
+  ]
+})
+const compositeParam = (item) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: true,
+    tag: formData.value.tagName,
+  }
+}
+const getFiles = (val) => {
+  showTable.value = false
+  let fileObj = compositeParam(val)
+  // emit("getFile", fileObj)
+  fileList.value.push(fileObj)
+  nextTick(() => {
+    showTable.value = true
+  })
+}
+watch(() => fileList.value, (val) => {
+  fileList.value = val
+})
+defineExpose({
+  fileList
+})
+</script>
+
+<style scoped>
+
+</style>

src/components/TheWelcome.vue

@@ -0,0 +1,86 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>

src/components/Tinymce.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="tinymce-boxz" style="width: 100%">
+    <Editor v-model="content" :init="init"/>
+  </div>
+</template>
+
+<script setup>
+import tinymce from 'tinymce'
+import Editor from "@tinymce/tinymce-vue";
+import {defineProps} from "vue";
+import {ElLoading, ElMessage, ElNotification} from "element-plus";
+import {getToken} from '@/utils/auth'
+import axios from "axios";
+
+import 'tinymce/themes/silver'
+import 'tinymce/icons/default/icons'
+import 'tinymce/plugins/preview'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/directionality'
+import 'tinymce/plugins/visualblocks'
+import 'tinymce/plugins/visualchars'
+import 'tinymce/plugins/advlist'
+import 'tinymce/plugins/fullscreen'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/media'
+import 'tinymce/plugins/template'
+import 'tinymce/plugins/code'
+import 'tinymce/plugins/codesample'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/pagebreak'
+import 'tinymce/plugins/nonbreaking'
+import 'tinymce/plugins/anchor'
+import 'tinymce/plugins/insertdatetime'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/wordcount'
+import 'tinymce/plugins/autosave'
+import '@/assets/axupimgs/plugin.js'//多图上传插件
+
+const emit = defineEmits(['update:value'])
+const props = defineProps({
+  //默认值
+  value: {
+    type: String,
+    default: "",
+  },
+  imageUrl: {
+    type: String,
+    default: "",
+  },
+  fileUrl: {
+    type: String,
+    default: "",
+  },
+  plugins: {
+    type: [String, Array],
+    default:
+    //
+        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image axupimgs link media template code codesample table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
+  },
+  toolbar: {
+    type: [String, Array],
+    default: [
+      "fullscreen undo redo | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ",
+      "styleselect formatselect fontselect fontsizeselect |  table image axupimgs media  pagebreak insertdatetime  selectall visualblocks searchreplace | code preview | indent2em lineheight formatpainter",
+    ],
+  },
+  fontFormats: {
+    type: [String, Array],
+    default: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;"
+  },
+  width:{
+    type: String,
+    default: 'auto'
+  },
+  height:{
+    type: Number,
+    default: 500
+  }
+})
+const content = ref(props.value);
+const imgUrl = ref();
+// const apiKey = reactive("v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg");
+const init = reactive({
+  language_url: '/langs/zh_CN.js', //汉化路径是自定义的
+  skin_url: '/skins/ui/oxide', //皮肤
+  content_css: '/skins/content/default/content.css',
+  language: 'zh_CN',
+  placeholder: "在这里输入文字", //textarea中的提示信息
+  min_width: 300,
+  min_height: 200,
+  width:props.width,
+  height: props.height, //注：引入autoresize插件时，此属性失效
+  resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
+  promotion: false,
+  branding: false, //tiny技术支持信息是否显示
+  statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
+  elementpath: false, //元素路径是否显示
+  font_formats: props.fontFormats,  //字体样式
+  plugins: props.plugins, //插件配置 axupimgs indent2em
+  toolbar: props.toolbar, //工具栏配置，设为false则隐藏
+  menubar: "file edit view format table tools", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
+  images_upload_url: '/workflow/process/file/upload',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
+  // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
+  paste_data_images: true, //图片是否可粘贴
+  file_picker_types: "file image", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
+  // 文件上传处理函数
+  setup: function (editor) {
+    editor.on('change', function (e) {
+      tinymce.activeEditor.save();//执行自动保存
+    });
+  },
+  //此处为图片上传处理函数
+  images_upload_handler: (blobInfo, success) => {
+    // new Promise((resolve, reject) => {
+    let formData = new FormData()
+    formData.append('file', blobInfo.blob())
+    //上传图片接口 上传成功后返回图片地址，用于显示在富文本中
+    uploadFile(formData, props.imageUrl, success)
+    // }),
+  },
+  file_picker_callback: (callback, value, meta) => {
+    // 使用案例http://tinymce.ax-z.cn/general/upload-images.php
+    // meta.filetype  //根据这个判断点击的是什么file image media
+    let filetype; //限制文件的上传类型,需要什么就添加什么的后缀
+    if (meta.filetype == "image") {
+      filetype = ".jpg, .jpeg, .png, .gif, .ico, .svg";
+    } else if (meta.filetype == "media") {
+      filetype = ".mp3, .mp4, .avi, .mov";
+    } else {
+      filetype =
+          ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg";
+    }
+    let inputElem = document.createElement("input"); //创建文件选择
+    inputElem.setAttribute("type", "file");
+    inputElem.setAttribute("accept", filetype);
+    inputElem.click();
+    inputElem.onchange = () => {
+      let file = inputElem.files[0]; //获取文件信息
+      let xhr, formData;
+      xhr = new XMLHttpRequest();
+      xhr.withCredentials = false;
+      xhr.open('POST', import.meta.env.VITE_BASE_URL+props.imageUrl);
+      xhr.setRequestHeader(
+        'Authorization',getToken()
+      )
+      let loading= ElLoading.service({
+        lock: true,
+        text: '文件上传中...',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
+      xhr.onload = function() {
+        let res;
+        // if (xhr.status != 200) {
+        //   failure('HTTP Error: ' + xhr.status);
+        //   return;
+        // }
+        res = JSON.parse(xhr.responseText);
+          ElNotification({
+            title: '提示',
+            message: res.code === 1000 ? '上传成功' : '上传失败',
+            type: res.code === 1000 ? 'success' : 'error'
+          })
+        loading.close()
+        const fileUrl = res.data.url;
+        // '?fileId='+res.data.id+
+        callback(fileUrl+'?fileName='+res.data.originalFilename, {text:file.name ,title: file.name });
+      };
+      formData = new FormData();
+      formData.append('file', file, file.name );
+      xhr.send(formData);
+      //
+      // let reader = new FileReader();
+      // reader.readAsDataURL(file);
+      // reader.onload = function () {
+      //   let formData;
+      //   let id = "blobid" + new Date().getTime();
+      //   let blobCache = tinymce.activeEditor.editorUpload.blobCache;
+      //   let base64 = reader.result.split(",")[1];
+      //   let blobInfo = blobCache.create(id, file, base64);
+      //   blobCache.add(blobInfo);
+      //   // callback(blobInfo.blobUri(), {alt: file.name});
+      //   formData = new FormData();
+      //   formData.append('file', file, file.name );
+      //   uploadFile(formData, props.imageUrl,callback)
+      // };
+    };
+  },
+});
+//内容有变化，就更新内容，将值返回给父组件
+watch(() => {
+  emit("update:value", content.value);
+});
+const uploadFile = (formData, url,success) => {
+ let loading= ElLoading.service({
+    lock: true,
+    text: '图片上传中...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+  axios.post(
+      import.meta.env.VITE_BASE_URL + url,
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: getToken()
+        }
+      }
+  ).then(res => {
+    // if (res.status !== 200) {
+    //   ElMessage.error("上传失败!")
+    // }
+    let data = res.data
+    if (data.code !== 1000) {
+      ElMessage.error(data.msg)
+      loading.close()
+    }else {
+      success(data.data.url)
+      loading.close()
+    }
+  })
+}
+</script>
+<style scoped lang="scss">
+.tox-sidebar-wrap{
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+}
+.tinymce-boxz > textarea {
+  display: none;
+
+}
+
+</style>
+<style  lang="scss">
+/* 隐藏apikey没有绑定当前域名的提示 */
+.tox-notifications-container .tox-notification--warning {
+  display: none !important;
+}
+
+.tox.tox-tinymce {
+  max-width: 100%;
+}
+</style>

src/components/Tooltip.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-tooltip
+      effect="dark"
+      :content="props.content"
+      placement="bottom-start"
+      :disabled="isShow"
+  >
+    <div :class="lines?'content-lines':textAlign=='left'?'left-content':'content'" :style="{width: props.width+'px'}" @mouseover="isShowTooltip">
+      <span ref="contentRef">
+        <slot name="content">{{ props.content }}</slot>
+      </span>
+    </div>
+  </el-tooltip>
+</template>
+<script setup>
+const props = defineProps({
+  content: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  lines: {
+    type: Boolean,
+    default: false
+  },
+  textAlign: {
+    type: String,
+    default: ''
+  },
+})
+const contentRef = ref()
+const isShow = ref(false)
+const isShowTooltip = () => {
+  isShow.value = parseInt(props.width) > contentRef.value.offsetWidth;
+}
+</script>
+<style scoped>
+.left-content{
+  width: 45px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.content {
+  width: 45px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.content-lines{
+  word-break:break-all;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+</style>

src/components/WelcomeItem.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>

src/components/baseTitle/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="base-title">
+    <span></span>
+    <span>{{ title }}</span>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.base-title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 15px 0;
+  font-weight: bold;
+  >span:first-child {
+    display: inline-block;
+    width: 10px;
+    height: 20px;
+    background: #BEA266;
+    margin-right: 5px;
+  }
+}
+</style>

src/components/codeEdit/JavaCodeEdit.vue

@@ -0,0 +1,69 @@
+<template>
+  <codemirror
+      v-model="javaCode"
+      :placeholder="editorPlaceholder"
+      :style="{ height: editorHeight+'px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tabSize="tabSize"
+      :extensions="extensions"
+      :scrollbarStyle="null"
+  />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {java, javaLanguage} from "@codemirror/lang-java";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const javaCode = ref();
+const customJavaCodeTips = (context) => {
+  let word = context.matchBefore(/\w*/)
+  if (word.from == word.to && !context.explicit) return null;
+  return {
+    from: word.from?word.from:context.pos,
+    options: [
+      {label: "function", type: "keyword",apply:"function name(params) {\n\t\n}",detail: "definition"},
+      // {label: "hello", type: "variable", info: "(World)"},
+      {label: "fori", type: "keyword",apply:"for (let i = 0; i < list.length; i++) {\n\n}", detail: "loop"},
+      {label: "for", type: "keyword",apply:"for (let name of list) {\n\n}", detail: "of loop"},
+      {label: "psf", type: "keyword",apply:"public static final ", detail: "public static final"},
+      {label: "psv", type: "keyword",apply:"public static void name(){\n\n}", detail: "public static void"},
+      {label: "psfi", type: "keyword",apply:"public static final int ", detail: "public static final int"},
+      {label: "psfs", type: "keyword",apply:"public static final String ", detail: "public static final String"},
+      {label: "psvm", type: "keyword", apply: "public static void main(String[] args){\n\t\n}", detail: "main() 方法声明"}
+    ]
+  }
+}
+
+const javaSnippets = javaLanguage.data.of({
+  autocomplete: customJavaCodeTips,
+})
+const extensions = ref([java(), javaSnippets]);
+</script>

src/components/codeEdit/JsCodeEdit.vue

@@ -0,0 +1,48 @@
+<template>
+    <codemirror
+        v-model="jsCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+    />
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {javascript} from "@codemirror/lang-javascript";
+import {defineEmits, ref, defineProps, computed} from "vue";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const jsCode = ref();
+const extensions = ref([javascript()]);
+</script>

src/components/codeEdit/SqlCodeEdit.vue

@@ -0,0 +1,83 @@
+<template>
+    <codemirror
+        v-model="sqlCode"
+        :placeholder="editorPlaceholder"
+        :style="{ height: editorHeight+'px' }"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tabSize="tabSize"
+        :extensions="extensions"
+        :scrollbarStyle="null"
+        @change="emit('change',$event)"
+    />
+<!--    <div class="sql-format">-->
+<!--      <span @click="formatSql">格式化SQL</span>-->
+<!--      <span @click="clearVal">一键清空</span>-->
+<!--    </div>-->
+</template>
+
+<script setup>
+import {Codemirror} from "vue-codemirror";
+import {sql} from '@codemirror/lang-sql';
+import {defineEmits, ref, defineProps, computed} from "vue";
+import * as sqlFormatter from "sql-formatter";
+
+const emit = defineEmits()
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  editorPlaceholder: {
+    type: String,
+    default: "请输入代码",
+  },
+  editorHeight: {
+    type: String,
+    default: "300",
+  },
+  tabSize: {
+    type: Number,
+    default: 2,
+  }
+})
+const _value = computed({
+  get() {
+    return props.value || ""
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const sqlCode = ref(_value);
+const extensions = ref([sql()]);
+//代码格式化
+const formatSql = () => {
+  sqlCode.value=sqlFormatter.format(sqlCode.value)
+}
+// 清除值
+const clearVal = () => {
+  sqlCode.value=''
+}
+</script>
+<style scoped lang="scss">
+.sql-format {
+  background-color: #f7f7f7;
+  text-align: right;
+  color: #2a99ff;
+  padding: 10px;
+
+  span:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    margin-right: 10px;
+  }
+}
+::v-deep .cm-line{
+  font-size: 16px;
+}
+</style>

src/components/filePreview/DocxPreview.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="docx-preview">
+    <div
+        ref="docxDiv"
+        class="docxDiv"
+        v-loading="loading"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {renderAsync} from "docx-preview";
+import axios from "axios";
+
+let docx = import.meta.glob("docx-preview"); // vite不支持require
+
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  }
+})
+
+const loading = ref(false);
+
+const previewFile = () => {
+  loading.value = true;
+  axios.request({
+    url: props.fileUrl,
+    method: 'get',
+    responseType: 'blob'
+  }).then((response) => {
+    let docData = response.data;
+    let docxDiv = document.getElementsByClassName("docxDiv");
+    renderAsync(docData, docxDiv[0], null, {
+      inWrapper: true, // 启用围绕文档内容渲染包装器
+      ignoreWidth: false, // 禁止页面渲染宽度
+      ignoreHeight: false, // 禁止页面渲染高度
+      ignoreFonts: false, // 禁止字体渲染
+      breakPages: true, // 在分页符上启用分页
+      ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
+      experimental: false, //启用实验性功能（制表符停止计算）
+      trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
+      debug: false,
+    }).then((res) => {
+      loading.value = false;
+    });
+  }).catch((error) => {
+  });
+};
+
+previewFile()
+
+</script>
+<style lang="scss">
+.docx-preview {
+  overflow: auto;
+  height: 650px !important;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+  .docx-wrapper > section.docx {
+    margin-bottom: 0 !important;
+  }
+
+  .docx-wrapper {
+    padding: 10px !important;
+
+    .docx {
+      width: 100% !important;
+      min-height: 100vh !important;
+      overflow: auto !important;
+      //padding: 70pt 20pt 0 20pt !important;
+
+      table {
+        width: 100% !important;
+      }
+
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      // 滚动条轨道
+      &::-webkit-scrollbar-track {
+        background: rgb(239, 239, 239);
+        border-radius: 2px;
+      }
+
+      // 小滑块
+      &::-webkit-scrollbar-thumb {
+        background: rgba(80, 81, 82, 0.29);
+        border-radius: 10px;
+      }
+    }
+  }
+}
+</style>
+

src/components/filePreview/ImagePreview.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="img-preview" >
+    <img id="previewImg" :src="fileUrl" :style="{width: fullscreen?windowWidth+'px':'100%',height: fullscreen?'auto':'650px;'}" alt="Preview"/>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:fileUrl"])
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fullscreen: {
+    type: Boolean,
+    default:false
+  }
+})
+const showImagePreview = ref(true)
+const dialogWidth = ref('')
+const dialogHeight = ref('')
+// 屏幕宽度
+const windowWidth = ref(0)
+// 屏幕高度
+const windowHeight = ref(0)
+// onMounted(() => {
+// })
+// 获取屏幕尺寸
+const getWindowResize = function () {
+  windowWidth.value = window.innerWidth-32
+  windowHeight.value = window.innerHeight
+}
+getWindowResize()
+window.addEventListener('resize', getWindowResize)
+nextTick(() => {
+  const previewImg = document.getElementById('previewImg');
+  // console.log(previewImg)
+  let offsetHeight = previewImg?.offsetHeight
+  // console.log(offsetHeight)
+  if (offsetHeight > 750){
+  //   previewImg?.offsetHeight = 750
+  }
+})
+
+// dialogWidth.value=document.getElementById('previewImg')?.offsetWidth||1500
+// dialogWidth.value=document.getElementById('previewImg')?.offsetHeight||750
+
+</script>
+
+<style lang="scss">
+.img-preview {
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+  overflow-x: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+}
+
+</style>

src/components/filePreview/PdfPreview.vue

@@ -0,0 +1,49 @@
+<template>
+  <!--  <iframe height="650px" width="100%" :src="fileUrl" frameborder="0"></iframe>-->
+  <vue-pdf-app style="height: 100vh; width: 100vw" :pdf="fileUrl" :config="pdfPreviewConfig"></vue-pdf-app>
+</template>
+
+<script setup lang="jsx">
+import VuePdfApp from "vue3-pdf-app";
+import "vue3-pdf-app/dist/icons/main.css";
+
+const pdfPreviewConfig = ref({
+  sidebar: false,//左侧目录展示
+  secondaryToolbar: false,//二级工具栏
+  toolbar: false,//工具栏显示
+  errorWrapper: false,
+})
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+#vuePdfApp {
+  width: auto !important;
+  height: 650px !important;
+}
+
+#viewerContainer {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+
+}
+</style>

src/components/filePreview/PptPreview.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="pptx" ></div>
+</template>
+
+<script setup >
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fullscreen: {
+    type: Boolean,
+    default:false
+  }
+})
+// js部分 jquery已在index.html中引入 无需另外安装
+const handlePPtx = () => {
+  $("#pptx").pptxToHtml({
+    pptxFileUrl: props.fileUrl, //pptx文件地址
+    slidesScale: "100%",
+  });
+}
+handlePPtx()
+</script>
+
+<style scoped>
+
+</style>

src/components/filePreview/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="file-preview">
+    <el-dialog id="dialog" :border="false" width="1200" :style="{height: fullscreen?'':'650px;'}" top="10vh"
+               :fullscreen="fullscreen"
+               :title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
+               :append-to-body="false"
+               :close-on-click-modal="true"
+    >
+<!--      <ppt-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'ppt'||fileType === 'pptx'"/>-->
+      <pdf-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'pdf'"/>
+      <docx-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'docx'"/>
+      <image-preview :fileUrl="fileUrl" :fullscreen="fullscreen" :fileName="fileName" v-if="checkImgType(fileType)"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {ElNotification} from "element-plus";
+
+const emit = defineEmits(["update:fileUrl"])
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fileType: {
+    type: String,
+    default: ''
+  },
+  fileName: {
+    type: String,
+    default: ''
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
+  }
+})
+const showPreview = ref(true)
+// console.info("🚀 ~method:fileType -----", props.fileType)
+
+const checkImgType=(fileType)=>{
+  return fileType == 'png' || fileType == 'jpg' || fileType == 'jpeg' || fileType == 'ico' || fileType == 'PNG' || fileType == 'JPG';
+}
+// console.info("🚀 ~method:‘checkImgType(props.fileType) -----", checkImgType(props.fileType))
+if(props.fileType!=='pdf'&&props.fileType!=='docx'&&!checkImgType(props.fileType)){
+  showPreview.value=false
+  ElNotification({
+    title: '提示',
+    message: props.fileName+' 文件不支持预览！',
+    type:  'error'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.file-preview {
+  .el-overlay-dialog {
+    left: 0 !important;
+
+  }
+
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      font-size: 30px;
+
+    }
+  }
+
+  .el-dialog__body {
+    overflow: hidden;
+
+    padding: 0 !important;
+  }
+}
+
+</style>

src/components/iconSelect/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-select v-model="iconName" placeholder="请选择菜单图标" clearable filterable @change="selectIcon" :teleported="false"
+              class="icon-select">
+    <el-option
+        v-for="item in iconList"
+        :value="item"
+        :label="item"
+    >
+      <svg-icon :name="item" :class-name="'middle-icon'"/>
+      <span class="icon-name">{{ item }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup>
+import iconArray from './requireIcons.js'
+import SvgIcon from '@/components/svgIcon/index.vue'
+const emit = defineEmits(["getSelectIcon"])
+const props = defineProps({
+  activeIcon: {
+    type: String,
+    default: ''
+  }
+})
+const iconName=ref(props.activeIcon)
+const iconList = ref(iconArray)
+watch(() => props.activeIcon, (value) => {
+  iconName.value = value
+})
+const selectIcon = (val) => {
+  emit("getSelectIcon", val)
+}
+</script>

src/components/iconSelect/requireIcons.js

@@ -0,0 +1,12 @@
+const iconArray=[]
+const files = import.meta.glob("@/assets/svg/*.svg",{eager:true})
+for (const key of Object.entries(files)) {
+  let item =key[0]
+  const lastIndex=item.lastIndexOf("\/")
+  //svg图标名(带后缀svg)
+  item=item.substring(lastIndex+1,item.length)
+  //svg图标名字,剔除后缀.svg
+  item=item.substring(0,item.lastIndexOf("\."))
+  iconArray.push(item)
+}
+export default iconArray

src/components/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

src/components/icons/IconDocumentation.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

src/components/icons/IconEcosystem.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

src/components/icons/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

src/components/organizationalStructure/CompanyDetail.vue

@@ -0,0 +1,122 @@
+<template>
+  <baseTitle title="公司详情"></baseTitle>
+  <fv-Form :schema="schema" @getInstance="(e)=>form = e"></fv-Form>
+  <UserPicker :multiple="false" ref="presidentNamePicker"  @ok="editPresident"></UserPicker>
+  <UserPicker :multiple="false" ref="generalManagerNamePicker" @ok="editGeneralManager"></UserPicker>
+</template>
+
+<script setup lang="jsx">
+import UserPicker from '@/views/workflow/process/common/UserPicker.vue';
+import Ttsup from '@/views/system/department/components/ToolToShowUserPicker.vue'
+import {getCompanyDetail,setCompanyLeader} from "@/api/subsidiary";
+const props=defineProps({
+  value:{
+    type:String,
+    default:''
+  }
+})
+const form = ref()
+const presidentName = ref()
+const presidentIds = ref()
+const generalManagerName = ref()
+const presidentNamePicker = ref()
+const generalManagerNamePicker = ref()
+const generalManagerIds = ref()
+const schema = reactive([
+  {
+    label: '公司名称：',
+    prop: 'companyName',
+  },
+  {
+    label: '公司编码：',
+    prop: 'companyCode'
+  },
+  {
+    label: '董事长：',
+    prop: 'presidentIds',
+    component: ()=><Ttsup modelValue={presidentName.value} onClick={()=>{presidentNamePicker.value.showUserPicker()} } />
+
+  },
+  {
+    label: '总经理：',
+    prop: 'generalManagerIds',
+    component: ()=><Ttsup modelValue={generalManagerName.value} onClick={()=>{generalManagerNamePicker.value.showUserPicker()} } />
+  },
+  {
+    label: '创建时间：',
+    prop: 'createTime'
+  }
+])
+const emit = defineEmits(['update:value'])
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+const editPresident = (list) => {
+  const arr = list.map(item=>item.name)
+  presidentIds.value = list.map(item=>item.id)
+  presidentName.value = arr.join(',')
+  setDeptmentInfo({
+    companyId: _value.value,
+    presidentIds: presidentIds.value,
+    generalManagerIds: generalManagerIds.value
+  })
+}
+
+const editGeneralManager = (list) => {
+  const arr = list.map(item=>item.name)
+  generalManagerIds.value = list.map(item=>item.id)
+  generalManagerName.value = arr.join(',')
+  setDeptmentInfo({
+    companyId: _value.value,
+    presidentIds: presidentIds.value,
+    generalManagerIds: generalManagerIds.value
+  })
+}
+
+const setDeptmentInfo = async ({companyId = [], presidentIds = [], generalManagerIds = [] }) => {
+  const params = {
+    presidentIds,
+    generalManagerIds,
+    companyId,
+  }
+  const res = await setCompanyLeader(params)
+  // console.log(res.data);
+}
+const getInfo = async () => {
+  const { data } = await getCompanyDetail(_value.value)
+  const params = {
+    companyName: data.companyName,
+    companyCode: data.companyCode,
+    createTime: data.createTime
+  }
+  presidentIds.value = data.presidentIds
+  generalManagerIds.value = data.generalManagerIds
+  params.presidentIds = formatIdsToNames(data.presidentIds, data.presidentInfo, 'userId', 'nickName')
+  presidentName.value = params.presidentIds
+  params.generalManagerIds = formatIdsToNames(data.generalManagerIds, data.generalManagerInfo, 'userId', 'nickName')
+  generalManagerName.value = params.generalManagerIds
+  form.value.setValues(params)
+}
+
+const formatIdsToNames = (ids, infoList, key, viewKey) => {
+  const resArr = []
+  if(!ids?.length) return
+  ids.forEach(item=>{
+    infoList.forEach(v=>{
+      item == v[key] && resArr.push(v[viewKey])
+    })
+  })
+  return resArr.join(',')
+}
+
+getInfo()
+</script>
+
+<style scoped>
+
+</style>

src/components/organizationalStructure/Department.vue

@@ -0,0 +1,172 @@
+<template>
+  <baseTitle title="公司详情"></baseTitle>
+  <fv-Form :schema="companySchema" @getInstance="(e)=>companyForm = e"></fv-Form>
+  <baseTitle title="部门详情"></baseTitle>
+  <fv-Form :schema="schema" @getInstance="(e)=>form = e"></fv-Form>
+  <UserPicker :multiple="false" ref="usrPickershipIds"  @ok="editshipIds"></UserPicker>
+  <UserPicker :multiple="false" ref="usrPickerHeadIds" @ok="editheadIds"></UserPicker>
+  <UserPicker :multiple="false" ref="usrPickerDeputyIds" @ok="editdeputyIds"></UserPicker>
+</template>
+
+<script setup lang="jsx">
+import UserPicker from '@/views/workflow/process/common/UserPicker.vue';
+import Ttsup from '@/views/system/department/components/ToolToShowUserPicker.vue'
+import {getInfoById,setDeptInfo} from '@/views/system/department/api'
+const props=defineProps({
+  value:{
+    type:String,
+    default:''
+  }
+})
+const form = ref()
+const companyForm = ref()
+const usrPickershipIds = ref()
+const usrPickerHeadIds = ref()
+const usrPickerDeputyIds = ref()
+const departmentChargeLeadershipNames = ref()
+const departmentHeadNames = ref()
+const departmentalDeputyNames = ref()
+const departmentChargeLeadershipIds = ref()
+const departmentHeadIds = ref()
+const departmentalDeputyIds = ref()
+const companySchema = reactive([
+  {
+    label: '公司名称：',
+    prop: 'companyName',
+  },
+  {
+    label: '公司编码：',
+    prop: 'companyCode'
+  },
+  {
+    label: '创建时间：',
+    prop: 'createTime'
+  }
+])
+const schema = reactive([
+  {
+    label: '部门名字：',
+    prop: 'departmentName',
+  },
+  {
+    label: '部门标志：',
+    prop: 'departmentMark'
+  },
+  {
+    label: '部门分管领导：',
+    prop: 'departmentChargeLeadershipIds',
+    component: ()=><Ttsup modelValue={departmentChargeLeadershipNames.value} onClick={()=>{usrPickershipIds.value.showUserPicker()} } />
+  },
+  {
+    label: '部门负责人：',
+    prop: 'departmentHeadIds',
+    component: ()=><Ttsup modelValue={departmentHeadNames.value} onClick={()=>{usrPickerHeadIds.value.showUserPicker()} } />
+  },
+  {
+    label: '部门副职用户：',
+    prop: 'departmentalDeputyIds',
+    component: ()=><Ttsup modelValue={departmentalDeputyNames.value} onClick={()=>{usrPickerDeputyIds.value.showUserPicker()} } />
+  },
+  {
+    label: '创建时间：',
+    prop: 'createTime'
+  }
+])
+const emit = defineEmits(['update:value'])
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(value) {
+    emit('update:value', value)
+  }
+})
+
+const getInfo = async () => {
+  const { data } = await getInfoById(_value.value)
+  companyForm.value.setValues(data.company)
+  const params = {
+    createTime: data.createTime,
+    departmentMark: data.departmentMark,
+    departmentName: data.departmentName
+  }
+  departmentChargeLeadershipIds.value = data.departmentChargeLeadershipIds
+  departmentHeadIds.value = data.departmentHeadIds
+  departmentalDeputyIds.value = data.departmentalDeputyIds
+  params.departmentChargeLeadershipIds = formatIdsToNames(data.departmentChargeLeadershipIds, data.departmentChargeLeadershipInfo, 'userId', 'nickName')
+  departmentChargeLeadershipNames.value = params.departmentChargeLeadershipIds
+  params.departmentHeadIds = formatIdsToNames(data.departmentHeadIds, data.departmentHeadInfo, 'userId', 'nickName')
+  departmentHeadNames.value = params.departmentHeadIds
+  params.departmentalDeputyIds = formatIdsToNames(data.departmentalDeputyIds, data.departmentalDeputyInfo, 'userId', 'nickName')
+  departmentalDeputyNames.value = params.departmentalDeputyIds
+  form.value.setValues(params)
+
+}
+
+getInfo()
+
+const formatIdsToNames = (ids, infoList, key, viewKey) => {
+  const resArr = []
+  if(!ids?.length) return
+  ids.forEach(item=>{
+    infoList.forEach(v=>{
+      item == v[key] && resArr.push(v[viewKey])
+    })
+  })
+  return resArr.join(',')
+}
+
+const editshipIds = (list) => {
+  // console.log("🚀 ~ editshipIds ~ list:", list)
+  const arr = list.map(item=>item.name)
+  departmentChargeLeadershipIds.value = list.map(item=>item.id)
+  departmentChargeLeadershipNames.value = arr.join(',')
+  setDeptmentInfo({
+    departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
+    departmentalDeputyIds: departmentalDeputyIds.value,
+    departmentHeadIds: departmentHeadIds.value
+  })
+}
+
+const editheadIds = (list) => {
+  // console.log("🚀 ~ editshipIds ~ list:", list)
+  const arr = list.map(item=>item.name)
+  departmentHeadIds.value = list.map(item=>item.id)
+  departmentHeadNames.value = arr.join(',')
+  setDeptmentInfo({
+    departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
+    departmentalDeputyIds: departmentalDeputyIds.value,
+    departmentHeadIds: departmentHeadIds.value
+  })
+}
+
+const editdeputyIds = (list) => {
+  // console.log("🚀 ~ editshipIds ~ list:", list)
+  const arr = list.map(item=>item.name)
+  departmentalDeputyIds.value = list.map(item=>item.id)
+  departmentalDeputyNames.value = arr.join(',')
+  setDeptmentInfo({
+    departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
+    departmentalDeputyIds: departmentalDeputyIds.value,
+    departmentHeadIds: departmentHeadIds.value
+  })
+}
+
+const setDeptmentInfo = async ({ departmentChargeLeadershipIds = [], departmentHeadIds = [], departmentalDeputyIds = []}) => {
+
+  const params = {
+    departmentChargeLeadershipIds,
+    departmentHeadIds,
+    departmentalDeputyIds,
+    departmentId: _value.value
+  }
+  const res = await setDeptInfo(params)
+  // console.log(res.data);
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/pagination/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-config-provider :locale="locale">
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="pageSizes"
+      :background="isBackground"
+      :small="small"
+      :disabled="disabled"
+      layout="->,total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+const emit = defineEmits(['goPage', 'changeSize','handleTop'])
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 0,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  pageSizes: {
+    type: Object,
+    default(rawProps) {
+      return [10, 15, 20, 30, 50]
+    },
+  },
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isBackground: {
+    type: Boolean,
+    default: false,
+  },
+})
+//中文
+const locale = zhCn
+//总条数
+const total = ref(0)
+//对应页数
+const currentPage = ref(1)
+//每页多少条
+const pageSize = ref(10)
+//默认每页多少条的数组
+const pageSizes = ref([])
+//是否使用小型分页样式
+const small = ref(false)
+//是否禁用分页
+const disabled = ref(false)
+//分页大小
+const handleSizeChange = limit => {
+  emit('changeSize', limit)
+  emit('handleTop')
+}
+//分页切换
+const handleCurrentChange = page => {
+  emit('goPage', page)
+  emit('handleTop')
+}
+watchEffect(() => {
+  total.value = props.total
+  pageSizes.value = props.pageSizes
+})
+</script>

src/components/steps/api/index.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export const getBaseInfoApi = (projectId) => {
+  return request({
+    url: '/workflow/details/info/'+projectId,
+    method: 'get',
+  })
+}
+
+export const getMapProjectStateInfo = (projectId, state) => {
+  return request({
+    url: `/workflow/details/${projectId}/${state}`,
+    method: 'get'
+  })
+}

src/components/steps/index.vue

@@ -0,0 +1,657 @@
+<template>
+  <div style="padding: 0 30px" id="printBox">
+    <div style="display: flex;justify-content: space-between">
+      <baseTitle title="项目基本信息"></baseTitle>
+      <div class="oper-page-btn" :style="{marginRight:taskId? '145px':editShow?mode=='submit'?'145px':'170px':'0'}">
+        <el-button v-print="print" color="#ded0b2" icon="Printer" @click="handlePrint(print)"> 打印</el-button>
+      </div>
+    </div>
+    <fvForm :schema="schema" @getInstance="(e)=>baseForm = e" label-position="left" label-width="left"
+            style="margin-left: 15px"></fvForm>
+    <div class="steps-box">
+      <el-steps v-if="stepsShow" :active="localActive" finish-status="success">
+        <el-step
+            v-for="(item, index) in localSteps"
+            :key="item.key"
+            :title="item.title"
+            :class="stepClass(index)"
+            @click="handleStep(item.key, index)"
+        >
+          <template #icon>
+            <el-icon style="font-size: 20px;" :class="index == localActive ? 'is-active' : 'is-end'"
+                     v-if="localStepSuccess.includes(index)">
+              <SuccessFilled/>
+            </el-icon>
+            <el-icon style="font-size: 20px; color: gray;" v-else>
+              <WarningFilled/>
+            </el-icon>
+          </template>
+        </el-step>
+      </el-steps>
+    </div>
+    <!-- 步骤内容 -->
+    <div>
+      <slot name="content" :localActive="localActive"></slot>
+      <!-- <template v-for="(item, index) in stepList" :key="item.key">
+        <component v-if="localActive == index" v-bind="item.props || {}" :is="item.component" />
+      </template> -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {ElLoading, ElNotification} from 'element-plus';
+import {getBaseInfoApi} from './api';
+
+import {useCacheStore} from '@/stores/cache.js'
+
+import {toThousands} from '@/utils/changePrice.js'
+
+const print = ref({
+  id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
+  popTitle: '配置页眉标题', // 打印配置页上方的标题
+  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+  preview: false, // 是否启动预览模式，默认是false
+  previewTitle: '预览的标题', // 打印预览的标题
+  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
+  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
+  previewBeforeOpenCallback() {
+    console.log('正在加载预览窗口！');
+  }, // 预览窗口打开之前的callback
+  previewOpenCallback() {
+    console.log('已经加载完预览窗口，预览打开了！')
+  }, // 预览窗口打开时的callback
+  beforeOpenCallback() {
+    console.log('开始打印之前！')
+  }, // 开始打印之前的callback
+  openCallback() {
+    console.log('执行打印了！')
+  }, // 调用打印时的callback
+  closeCallback() {
+    console.log('关闭了打印工具！')
+    emits('closePrint')
+  }, // 关闭打印的callback(无法区分确认or取消)
+  clickMounted() {
+    console.log('点击v-print绑定的按钮了！')
+  },
+})
+
+const props = defineProps({
+  // 步骤对应内容list
+  stepList: {
+    type: Array,
+    default: []
+  },
+  // 当前显示步骤
+  active: {
+    type: Number,
+    default: 0
+  },
+  // 已完成的工作流步骤
+  stepSuccess: {
+    type: Array,
+    default: ['00']
+  },
+  //直接上报/需求征集
+  reportType: {
+    type: String,
+    default: ''
+  },
+  //是否显示审批驳回按钮
+  taskId: {
+    type: String,
+    default: ''
+  },
+  //当项目详情是编辑模式时按钮位置
+  editShow: {
+    type: String,
+    default: ''
+  },
+  //当项目详情是提交模式还是重新提交时按钮位置
+  mode: {
+    type: String,
+    default: ''
+  }
+})
+const route = useRoute()
+const cacheStore = useCacheStore()
+const emits = defineEmits(['stepChange', 'setDetail', 'openPrint'])
+const localData = reactive({})
+const localActive = ref(0) // 当前激活步骤
+const stepsShow = ref(false)
+const localSteps = ref([
+  {
+    title: '需求征集',
+    key: 'collect',
+  },
+  {
+    title: '需求上报',
+    key: 'report',
+  },
+  {
+    title: '项目立项',
+    key: 'approve',
+  },
+  {
+    title: '项目实施',
+    key: 'implement',
+  },
+  {
+    title: '项目验收',
+    key: 'execute',
+  },
+  {
+    title: '项目归档',
+    key: 'archivist',
+  },
+  // {
+  //   title: '项目结项',
+  //   key: 'end',
+  // },
+])
+const baseForm = ref()
+const baseFormData = ref([])
+const schema = computed(() => {
+  return [
+    {
+      label: '承办单位',
+      prop: 'affiliatedCompany',
+      colProps: {
+        span: 6
+      }
+    },
+    {
+      label: '项目名称',
+      prop: 'projectName',
+      colProps: {
+        span: 6
+      }
+    },
+
+    {
+      label: '开始时间',
+      prop: 'startTime',
+      colProps: {
+        span: 6
+      }
+    },
+    {
+      label: '结束时间',
+      prop: 'endTime',
+      colProps: {
+        span: 6
+      }
+    },
+    {
+      label: '项目类型',
+      prop: 'projectType',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.projectType ?
+                  <span>{filterDict(cacheStore.getDict('project_type'), baseFormData.value?.projectType)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '研发主体',
+      prop: 'rdSubject',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.rdSubject ?
+                  <span>{filterDict(cacheStore.getDict('rd_subject'), baseFormData.value?.rdSubject)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '出资类型',
+      prop: 'investmentType',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.investmentType ?
+                  <span>{filterDict(cacheStore.getDict('invest_type'), baseFormData.value?.investmentType)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '业务板块',
+      prop: 'businessSegment',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.businessSegment ?
+                  <span>{filterDict(cacheStore.getDict('business_segment'), baseFormData.value?.businessSegment)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '标准制定',
+      prop: 'technicalStandard',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.technicalStandard ?
+                  <span>{filterDict(cacheStore.getDict('technical_standard'), baseFormData.value?.technicalStandard)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '项目影响',
+      prop: 'projectImpact',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.projectImpact ?
+                  <span>{filterDict(cacheStore.getDict('project_impact'), baseFormData.value?.projectImpact)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '经费预算(元)',
+      prop: 'economicEstimate',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.economicEstimate ?
+                  <span>{toThousands(baseFormData.value?.economicEstimate)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '产学研联合',
+      prop: 'industryUniversityResearch',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.industryUniversityResearch ?
+                  <span>{filterDict(cacheStore.getDict('industry_university'), baseFormData.value?.industryUniversityResearch)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '开展政府申报',
+      prop: 'governmentDeclaration',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.governmentDeclaration ?
+                  <span>{filterDict(cacheStore.getDict('government_declaration'), baseFormData.value?.governmentDeclaration)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '所属专项资金',
+      prop: 'specialFund',
+      colProps: {
+        span: 6
+      }
+    },
+    {
+      label: '申请总部专项资金(元)',
+      prop: 'specialFundAmount',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.specialFundAmount ?
+                  <span>{toThousands(baseFormData.value?.specialFundAmount)}</span>
+                  : <span>{'--'}</span>
+            }
+          </div>
+      )
+    },
+    {
+      label: '是否在预算内',
+      prop: 'isWithinBudget',
+      colProps: {
+        span: 6
+      },
+      component: () => (
+          <div>
+            {
+              baseFormData.value?.isWithinBudget!=null ? baseFormData.value?.isWithinBudget?
+                  <span>{'预算内'}</span>
+                  : <span>{'预算外'}</span>:'--'
+            }
+          </div>
+      )
+    },
+    {
+      label: '部门分管领导',
+      prop: 'optionalChargeLeadership',
+      colProps: {
+        span: 6
+      }
+    },
+    {
+      label: '主项目',
+      prop: 'masterProjectName',
+      colProps: {
+        span: 6
+      }
+    }
+  ]
+})
+
+const localStepSuccess = ref([])
+const handlePrint = (print) => {
+  emits('openPrint', print)
+}
+// 格式化详情步骤条
+const formatProcedure = (data) => {
+  // console.info("🚀 ~method:formatProcedure -----", data)
+  let arr = []
+  if (data instanceof Array) {
+    data.forEach(item => {
+      if (props.reportType === 'direct') {
+        switch (item) {
+          case '10':
+            arr.push(0)
+            break
+          case '20':
+            arr.push(1)
+            break
+          case '30':
+            arr.push(2)
+            break
+          case '40':
+            arr.push(3)
+            break
+          case '50':
+            arr.push(4)
+            break
+        }
+      } else {
+        switch (item) {
+          case '00':
+            arr.push(0)
+            break
+          case '10':
+            arr.push(1)
+            break
+          case '20':
+            arr.push(2)
+            break
+          case '30':
+            arr.push(3)
+            break
+          case '40':
+            arr.push(4)
+            break
+          case '50':
+            arr.push(5)
+            break
+        }
+      }
+
+    })
+  }
+  return arr
+}
+//匹配字典值,返回对应值的字典标签
+const filterDict = (data, value) => {
+  if (data === undefined || value === undefined) return;
+  let label = ''
+  let result = []
+  if (value instanceof Array) {
+    value.forEach(item1 => {
+      data.find(item => {
+        if (item.value == item1) {
+          result.push(item.label)
+        }
+      })
+    })
+    label = result.map(item => item).join('，')
+  } else {
+    if (data instanceof Array) {
+      data.find(item => {
+        if (item.value == value) {
+          label = item.label
+        }
+      })
+    }
+  }
+  return label
+}
+// 反向格式化
+const formatReProcedure = (data) => {
+  let arr = []
+  if (data instanceof Array) {
+    data.forEach(item => {
+      switch (item) {
+        case 0:
+          arr.push('00')
+          break
+        case 1:
+          arr.push('10')
+          break
+        case 2:
+          arr.push('20')
+          break
+        case 3:
+          arr.push('30')
+          break
+        case 4:
+          arr.push('40')
+          break
+        case 5:
+          arr.push('50')
+          break
+      }
+    })
+  }
+}
+
+const formatActive = (val) => {
+  let newVal
+  if (props.reportType === 'direct') {
+    newVal = val + 1
+  } else {
+    newVal = val
+  }
+  let active = ''
+  newVal == 0 && (active = '00')
+  newVal == 1 && (active = '10')
+  newVal == 2 && (active = '20')
+  newVal == 3 && (active = '30')
+  newVal == 4 && (active = '40')
+  newVal == 5 && (active = '50')
+  return active
+}
+
+const stepClass = (val) => {
+  if (localStepSuccess.value.includes(val)) {
+    return 'step-success'
+  }
+  return 'step-error'
+}
+
+const handleStep = (key, index) => {
+  if (localStepSuccess.value.includes(index)) {
+    let active = ''
+    localActive.value = index
+    if (props.reportType === 'direct') {
+      switch (index) {
+        case 0:
+          active = '10'
+          break
+        case 1:
+          active = '20'
+          break
+        case 2:
+          active = '30'
+          break
+        case 3:
+          active = '40'
+          break
+        case 4:
+          active = '50'
+          break
+      }
+    } else {
+      switch (index) {
+        case 0:
+          active = '00'
+          break
+        case 1:
+          active = '10'
+          break
+        case 2:
+          active = '20'
+          break
+        case 3:
+          active = '30'
+          break
+        case 4:
+          active = '40'
+          break
+        case 5:
+          active = '50'
+          break
+      }
+    }
+    emits('stepChange', {key, active})
+    return
+  }
+  ElNotification({
+    title: '提示',
+    message: '不能查看未完成的工作流信息',
+    type: 'warning'
+  })
+}
+
+const getBaseInfo = async () => {
+  const loading = ElLoading.service({fullscreen: true})
+  stepsShow.value = false
+  try {
+    const {code, data} = await getBaseInfoApi(route.query.projectId)
+    // console.log('data.procedure', data.procedure, route.query.step)
+    if (route.query.step === '30' || route.query.step === '40') {
+      if (data.procedure.indexOf('30') == -1) {
+        data.procedure.push('30')
+      }
+      if (data.procedure.indexOf('40') == -1) {
+        data.procedure.push('40')
+      }
+    } else if (route.query.step === '50') {
+      if (data.procedure.indexOf('50') == -1) {
+        data.procedure.push('50')
+      }
+    }
+    localStepSuccess.value = formatProcedure(data.procedure)
+    baseForm.value.setValues(data)
+    baseFormData.value = data
+    emits('getBasicData', data)
+    emits('setDetail', formatActive(localActive.value))
+    loading.close()
+    nextTick(() => {
+      stepsShow.value = true
+    })
+  } catch {
+    loading.close()
+    nextTick(() => {
+      stepsShow.value = true
+    })
+  }
+}
+
+getBaseInfo()
+
+// onActivated(() => {
+//   getBaseInfo()
+// })
+watchEffect(() => {
+  localActive.value = props.active
+})
+watchEffect(() => {
+  if (props.reportType === 'direct') {
+    let steps = []
+    for (const step of localSteps.value) {
+      if (step.key !== 'collect') {
+        steps.push(step)
+      }
+    }
+    localSteps.value = steps
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.steps-box {
+  //padding: 10px 0;
+}
+
+.step-success {
+  cursor: pointer;
+}
+
+.step-error {
+  cursor: not-allowed;
+}
+
+.is-active {
+  color: #67c23a;
+}
+
+.is-end {
+  color: #BEA266;
+}
+
+:deep(.el-step__title.is-success) {
+  color: #A8abb2;
+}
+
+:deep(.el-step__head.is-success) {
+  border-color: #A8abb2;
+}
+
+</style>

src/components/svgIcon/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <template v-if="elementIcon">
+    <template v-if="title === ''">
+      <el-icon @click="handle">
+        <component :is="name"/>
+      </el-icon>
+    </template>
+    <template v-else>
+      <span :title="title">
+        <el-icon @click="handle">
+          <component :is="name"/>
+        </el-icon>
+      </span>
+    </template>
+  </template>
+  <template v-else>
+    <template v-if="title === ''">
+      <svg :class="svgClass" aria-hidden="true" @click="handle">
+        <use :xlink:href="symbolId"/>
+      </svg>
+    </template>
+    <template v-else>
+      <span :title="title">
+        <svg :class="svgClass" aria-hidden="true" @click="handle">
+          <use :xlink:href="symbolId"/>
+        </svg>
+      </span>
+    </template>
+  </template>
+
+</template>
+
+<script setup>
+import {defineProps, computed} from 'vue'
+
+const emit = defineEmits(["handle"]);
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  className: {
+    type: String
+  }
+})
+
+const symbolId = computed(() => {
+  return `#icon-${props.name}`;
+})
+const svgClass = computed(() => {
+  if (props.className) {
+    return props.className
+  } else {
+    return 'svg-icon'
+  }
+})
+
+const elementIcon = computed(() => {
+  if (props.name === '') {
+    return false;
+  }
+  if (props.name) {
+    let initial = props.name.toString().substr(0, 1).charCodeAt()
+    return (initial >= 65 && initial <= 90);
+  }
+})
+const handle = () => {
+  emit('handle');
+}
+</script>