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>

src/utils/matterTree.js

@@ -0,0 +1,13 @@
+export const matterTree = (array,data, id) => {
+  if (id) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].value == id) {
+        array.push(data[i].label);
+      }
+      if (data[i].children && data[i].children.length > 0) {
+        matterTree(data[i].children)
+      }
+    }
+    return array;
+  }
+}

src/views/project-demand/collection/detail.vue

@@ -80,8 +80,8 @@ import {useProcessStore} from '@/stores/processStore.js';
 import {getInfo, agreeTask, rejectTask,downloadFile} from "@/api/project-demand/index.js";
 import {getSubCompOpt} from '@/api/user/user.js'
 import {ElMessage} from "element-plus";
-import {useRouter} from "vue-router";
 import {useTagsView} from '@/stores/tagsview.js'
+import {matterTree} from '@/utils/matterTree.js';
 
 const tagsViewStore = useTagsView()
 const router = useRouter()
@@ -180,24 +180,10 @@ const getCompanyOption = async () => {
   companyOption.value = res.data
 }
 
-const matterTree = (data, id) => {
-  if (id) {
-    for (let i = 0; i < data.length; i++) {
-      if (data[i].value == id) {
-        companyNameArray.value.push(data[i].label);
-      }
-      if (data[i].children && data[i].children.length > 0) {
-        matterTree(data[i].children)
-      }
-    }
-    return companyNameArray.value;
-  }
-}
-
 const getDataSourceOptionItem = (val) => {
   if (val !== undefined) {
     val.forEach(item => {
-      matterTree(companyOption.value, item)
+      matterTree(companyNameArray.value,companyOption.value, item)
     })
   }
   return companyNameArray.value.join('，');

src/views/project-management/initiation/detail.vue

@@ -1,48 +1,92 @@
 <template>
-<div class="detail-block">
-  <el-tabs
-      v-model="activeName"
-      type="card"
-      class="demo-tabs"
-      @tab-click="handleClick"
-  >
-    <el-tab-pane label="需求征集" name="first">
-
-    </el-tab-pane>
-    <el-tab-pane label="需求上报" name="second"></el-tab-pane>
-    <el-tab-pane label="项目立项" name="third" :disabled="true"></el-tab-pane>
-  </el-tabs>
-</div>
+  <div class="detail-block">
+    <el-tabs
+        v-model="activeName"
+        type="card"
+        class="demo-tabs"
+        @tab-click="handleClick"
+    >
+      <el-tab-pane label="需求征集" name="first">
+        <CollectionDetail :formData="collectionData.formData" :data="collectionData" :processViewer="processViewer" :companyOption="companyOption" @getInfo="getDemandCollectionInfo"/>
+      </el-tab-pane>
+      <el-tab-pane label="需求上报" name="second"></el-tab-pane>
+      <el-tab-pane label="项目立项" name="third" :disabled="true"></el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script setup lang="jsx">
+import {getInfo} from "@/api/project-demand/index.js";
+import {getSubCompOpt} from '@/api/user/user.js'
+import {useProcessStore} from '@/stores/processStore.js';
+
+const route = useRoute()
 const activeName = ref('first')
+const collectionData = ref({})
+const processViewer = ref(false)
+const processStore = useProcessStore()
+const companyOption = ref([])
+
+const getCompanyOption = async () => {
+  const res = await getSubCompOpt()
+  companyOption.value = res.data
+}
+
+const getDemandCollectionInfo =async () => {
+  if (!route.query.id) return
+  await getCompanyOption()
+  getInfo(route.query.id).then(res => {
+    let data = res.data
+    collectionData.value = data;
+    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(() => {
+      processViewer.value = true
+    })
+  })
+}
 const handleClick = (tab, event) => {
   console.log(tab, event)
-  if(tab.index.value === 0){
-
+  if (tab.index.value === 0) {
+    getDemandCollectionInfo()
   }
 }
+getDemandCollectionInfo()
 </script>
 
 <style scoped lang="scss">
-.detail-block{
+.detail-block {
   padding-top: 15px;
-  :deep(.el-tabs__nav-scroll){
+
+  :deep(.el-tabs__nav-scroll) {
     width: 100%;
     display: flex;
-    .el-tabs__nav{
+
+    .el-tabs__nav {
       display: flex;
       flex: 1;
-      .el-tabs__item{
+
+      .el-tabs__item {
         flex: 1;
         font-size: 16px;
       }
-      .is-active{
+
+      .is-active {
         color: black;
         background-color: #DED0B2;
       }
     }
   }
 }
+.approval-record {
+  padding-bottom: 30px;
+
+  .process {
+    position: relative;
+  }
+}
 </style>