项目信息界面优化

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

@@ -13,8 +13,8 @@
         <tr>
           <td>项目状态</td>
           <td>
-            <span :class="['status-badge', 'status-' + nodeInfo.status]">
-              {{ nodeInfo.status }}
+            <span :class="['status-badge', 'status-' + nodeInfo.exeStatus]">
+              {{ PROJECT_EXE_STATUS.O[nodeInfo.exeStatus] }}
             </span>
           </td>
         </tr>
@@ -73,6 +73,7 @@
 <script lang="ts" setup>
 import { getNodeDetailApi } from '@/api/project/node';
 import { onMounted, reactive, watch } from 'vue';
+import { useDict } from '@/utils/useDict';
 
 const props = defineProps(
   {
@@ -83,11 +84,14 @@ const props = defineProps(
   }
 );
 
+const { PROJECT_EXE_STATUS } = useDict('PROJECT_EXE_STATUS');
+
 const emits = defineEmits(['update:projectInfo']);
 const nodeInfo = reactive<any>({
   nodeName: '',
   creator: '',
-  status: '',
+  exeStatusName: '',
+  exeStatus: '',
   nodeCode: '',
   createTime: '',
   description: '',
@@ -102,7 +106,12 @@ const getNodeDetailFun = async() => {
   const res:any = await getNodeDetailApi({ projectNodeId: props.nodeId });
   if (res.code === 200) {
     for (const key in nodeInfo) {
+      // if (key === 'exeStatus') {
+      //   nodeInfo[key] = res.data[key];
+      //   nodeInfo.exeStatusName = res.data[key];
+      // } else {
       nodeInfo[key] = res.data[key];
+      // }
     }
     if (Array.isArray(res.data.memberList)) {
       nodeInfo.pMemberNames = res.data.memberList.map((item:any) => {
@@ -194,25 +203,29 @@ watch(
             font-weight: 500;
         }
 
-        .status-active {
+        .status-3 {
             background-color: rgba(76, 201, 240, 0.1);
             color: #4cc9f0;
         }
 
-        .status-planning {
+        .status-1 {
             background-color: rgba(67, 97, 238, 0.1);
             color: #4361ee;
         }
 
-        .status-delayed {
+        .status-5 {
             background-color: rgba(248, 37, 133, 0.1);
             color: #f72585;
         }
 
-        .status-completed {
+        .status-2 {
             background-color: rgba(248, 150, 30, 0.1);
             color: #f8961e;
         }
+        .status-0 {
+            background-color: rgba(248, 150, 30, 0.1);
+            color: #8d99ae;
+        }
 
         .empty-value {
             color: #8d99ae !important;

src/views/task/projectDetail/index.vue

@@ -58,9 +58,11 @@
     </el-tabs>
   </div>
   <projectInfoDialog
+    :exeStatus="currentProjectInfo.exeStatus"
+    :currentRow="currentProjectInfo"
     ref="basePageFormRef"
     v-if="showProjectInfoDialog"
-    v-model:showProjectInfoDialog="showProjectInfoDialog"
+    v-model="showProjectInfoDialog"
     dialogType="edit"
     :nodeLevel1List="nodeLevel1List"
     @update:currentProjectBaseInfo="updateCurrentProjectBaseInfo"
@@ -154,16 +156,16 @@ const showProjectInfoDialog = ref(false);
 
 const openEditBasicDialogFun = () => {
   showProjectInfoDialog.value = true;
-  setTimeout(() => {
-    nextTick(
-      () => {
-        console.log('currentProjectInfo', currentProjectInfo);
-        basePageFormRef.value.setEditForm({ ...currentProjectInfo });
-        const statusList = getProjectExeStatus(currentProjectInfo.exeStatus as PROJECT_EXE_STATUS_CODE);
-        basePageFormRef.value.setOptionsFun('exeStatus', statusList);
-      }
-    );
-  }, 500);
+  // setTimeout(() => {
+  //   nextTick(
+  //     () => {
+  //       console.log('currentProjectInfo', currentProjectInfo);
+  //       basePageFormRef.value.setEditForm({ ...currentProjectInfo });
+  //       const statusList = getProjectExeStatus(currentProjectInfo.exeStatus as PROJECT_EXE_STATUS_CODE);
+  //       basePageFormRef.value.setOptionsFun('exeStatus', statusList);
+  //     }
+  //   );
+  // }, 500);
 };
 
 const showNodeInfoDialog = ref(false);