feat : 新增需求征集组件

src/components/DetailComponent/CollectionDetail.vue

@@ -0,0 +1,170 @@
+<template>
+  <div v-loading="loading">
+    <fvForm v-if="showForm" ref="form" :schema="schame">
+    </fvForm>
+    <baseTitle title="征集说明"></baseTitle>
+    <el-card style="width: 100%">
+      <div v-html="formData.collectExplain">
+      </div>
+    </el-card>
+    <baseTitle title="附件列表"></baseTitle>
+    <fvTable style="width: 100%;max-height: 200px" v-if="processViewer" :tableConfig="tableConfig"
+             :data="formData.fileList" :isSettingCol="false" :pagination="false">
+      <template #empty>
+        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+      </template>
+    </fvTable>
+    <baseTitle title="审核意见"></baseTitle>
+    <el-form-item prop="auditOpinion">
+      <el-input
+          v-model="formData.auditOpinion"
+          :rows="3"
+          type="textarea"
+          placeholder="请输入审核意见"
+      />
+    </el-form-item>
+    <div class="approval-record">
+      <baseTitle title="审批记录"></baseTitle>
+      <div class="process">
+        <operation-render v-if="processViewer" :operation-list="data.operationList"
+                          :state="data.state"/>
+        <process-diagram-viewer v-if="processViewer"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
+import {matterTree} from '@/utils/matterTree.js';
+
+const emit = defineEmits(['getInfo'])
+const form = ref()
+const showForm = ref(true)
+const loading = ref(false)
+const showTable = ref(false)
+const companyNameArray = ref([])
+
+const props = defineProps({
+  formData: {
+    type: Array,
+    default: []
+  },
+  data: {
+    type: Array,
+    default: []
+  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
+  companyOption: {
+    type: Array,
+    default: []
+  },
+})
+const schame = computed(() => {
+  return [
+    {
+      label: '名称',
+      prop: 'requirementName',
+      colProps: {
+        span: 12
+      }
+    },
+    {
+      label: '所属公司',
+      prop: 'companyIds',
+      colProps: {
+        span: 12
+      }
+    }, {
+      label: '征集类型',
+      prop: 'collectType',
+      colProps: {
+        span: 12
+      }
+    }, {
+      label: '截止时间',
+      prop: 'deadline',
+      colProps: {
+        span: 12
+      }
+    }
+  ]
+})
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+    },
+    {
+      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 init = (newVal) => {
+  newVal.companyIds = getDataSourceOptionItem(newVal.companyIds)
+  form.value.setValues(newVal)
+}
+const getInfo = () => {
+  emit('getInfo')
+}
+const getDataSourceOptionItem = (val) => {
+  if (val instanceof Array) {
+    val.forEach(item => {
+      matterTree(companyNameArray.value,props.companyOption, item)
+    })
+  }
+  return companyNameArray.value.join('，');
+}
+watch(() => props.companyOption, (newVal) => {
+  props.companyOption=newVal
+}, {deep: true})
+watch(() => props.formData, (newVal) => {
+  if (newVal) {
+    init(newVal)
+  }
+}, {deep: true})
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
+onMounted(() => {
+  loading.value = true
+  getInfo()
+  loading.value = false
+})
+</script>
+
+<style scoped>
+
+</style>