feat: 任务详情关联需求 tab

src/components/taskDetail/taskDemand.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="task-demand-content">
+    <TableForm
+      v-model:data="demandInfo"
+      :show-disabled="true"
+      ref="tableFormRef"
+      tableName="SIMULATION_TASK_DEMAND_CREATE"
+      :colNum="2"
+      :hideKeys="['attachments']"
+    >
+      <template #form-downAttachments>
+        <div class="attachments">
+          <div class="file" v-for="item in attachmentFiles" :key="item.id">
+            <span>{{ item.name }}</span>
+            <el-icon size="18" @click="downloadFileById(item.id)"><Download /></el-icon>
+          </div>
+        </div>
+      </template>
+      <template #form-pMemberList>
+        <el-select disabled v-model="demandInfo.pMemberList" filterable placeholder="请选择">
+          <el-option
+            v-for="item in deptOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+    </TableForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import TableForm from '@/components/common/table/tableForm.vue';
+import { getDemandDetailApi } from '@/api/project/demand';
+import { getMemberListIds } from '@/utils/task';
+import { dataQueryDirApi } from '@/api/data/data';
+import { downloadFileById } from '@/utils/file';
+import { CommonStore } from '@/stores/common';
+import { listDeptApi } from '@/api/system/departMent';
+
+const props = defineProps<{
+  demandUid: string;
+}>();
+
+const commonStore = CommonStore();
+const demandInfo = ref<any>({});
+const tableFormRef = ref();
+
+const getDemandInfoFun = async () => {
+  const res: any = await getDemandDetailApi({ demandId: props.demandUid });
+  if (res.code === 200) {
+    demandInfo.value = {
+      ...res.data,
+      planTime: [res.data.beginTime, res.data.endTime],
+      pMemberList: getMemberListIds(res.data.pMemberList),
+      aMemberList: getMemberListIds(res.data.aMemberList),
+      tMemberList: getMemberListIds(res.data.tMemberList),
+    };
+    tableFormRef.value.setOptionsFun('phaseId', [
+      { label: res.data.phaseName, value: res.data.phaseId },
+    ]);
+    const simTypeList: any = commonStore.getDictData(res.data.demandType);
+    tableFormRef.value.setOptionsFun('simType', simTypeList.A);
+  }
+};
+
+const attachmentFiles = ref<any[]>([]);
+const getAttachmentsFun = async () => {
+  const res: any = await dataQueryDirApi({ uuid: props.demandUid, current: 1, size: 99 });
+  attachmentFiles.value =
+    res.data?.data?.map((item: { originalName: any; fileSize: any; id: number }) => {
+      return {
+        name: item.originalName,
+        size: item.fileSize,
+        id: item.id,
+      };
+    }) || [];
+};
+
+const deptOptions = ref<any[]>([]);
+const getListDeptFun = async () => {
+  const res: any = await listDeptApi({ current: 1, size: 999 });
+  if (res.code === 200) {
+    deptOptions.value = res.data.data.map((item: { deptName: any; userId: any }) => {
+      return {
+        label: item.deptName,
+        value: String(item.userId),
+      };
+    });
+  }
+};
+
+watch(
+  () => props.demandUid,
+  (val) => {
+    if (val) {
+      getDemandInfoFun();
+      getAttachmentsFun();
+      getListDeptFun();
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.task-demand-content {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.attachments {
+  width: 100%;
+  height: 100px;
+  overflow-y: auto;
+
+  .file {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .el-icon {
+      color: var(--el-color-primary);
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/task/projectDetail/components/taskDetail.vue

@@ -98,6 +98,14 @@
               :current-task-info="currentTaskInfo"
             ></runVersionTree>
           </el-tab-pane>
+          <el-tab-pane label="关联需求" name="demand">
+            <div class="task-tab-content">
+              <taskDemand
+                v-if="activeTab === 'demand'"
+                :demand-uid="currentTaskInfo?.demandId"
+              ></taskDemand>
+            </div>
+          </el-tab-pane>
           <!-- <el-tab-pane label="交付物" name="deliverables">
             <div class="task-tab-content">
               <taskDeliverable
@@ -166,6 +174,7 @@ import { deliverableApproveApi } from '@/api/project/run';
 import { systemApproveQueryApproveFlowTempalteApi } from '@/api/system/systemApprove';
 import experimentResult from '@/views/task/execution/components/taskDetailPage/components/experimentResult.vue';
 import runVersionTree from '@/views/task/execution/components/runDetailPage/runPagecomponent/runVersionTree.vue';
+import taskDemand from '@/components/taskDetail/taskDemand.vue';
 import { getSimulationTaskFilesApi } from '@/api/data/dataAnalysis';
 
 const emits = defineEmits(['closeFn', 'updateFn']);