补充专项核查拓展查询详情弹窗

ruoyi-ui/src/views/ccdiProject/components/detail/ExtendedQuerySection.vue

@@ -79,6 +79,7 @@
           </el-form-item>
         </el-form>
       </el-tab-pane>
+
       <div class="extended-query-table">
         <el-table v-loading="currentState.loading" :data="currentState.rows" border>
           <template v-if="activeTab === 'purchase'">
@@ -104,6 +105,12 @@
             <el-table-column label="调动后部门" prop="deptNameAfter" min-width="160" />
             <el-table-column label="调动日期" prop="transferDate" width="140" />
           </template>
+
+          <el-table-column label="操作" width="120">
+            <template slot-scope="scope">
+              <el-button type="text" size="mini" @click="handleDetail(scope.row)">查看详情</el-button>
+            </template>
+          </el-table-column>
         </el-table>
 
         <pagination
@@ -115,15 +122,34 @@
         />
       </div>
     </el-tabs>
+
+    <extended-purchase-detail-dialog
+      :visible.sync="tabState.purchase.detailVisible"
+      :detail="tabState.purchase.detailData || {}"
+    />
+    <extended-recruitment-detail-dialog
+      :visible.sync="tabState.recruitment.detailVisible"
+      :detail="tabState.recruitment.detailData || {}"
+    />
+    <extended-transfer-detail-dialog
+      :visible.sync="tabState.transfer.detailVisible"
+      :detail="tabState.transfer.detailData || {}"
+    />
   </section>
 </template>
 
 <script>
 import {
+  getExtendedPurchaseDetail,
   getExtendedPurchaseList,
+  getExtendedRecruitmentDetail,
   getExtendedRecruitmentList,
+  getExtendedTransferDetail,
   getExtendedTransferList,
 } from "@/api/ccdi/projectSpecialCheck";
+import ExtendedPurchaseDetailDialog from "./ExtendedPurchaseDetailDialog";
+import ExtendedRecruitmentDetailDialog from "./ExtendedRecruitmentDetailDialog";
+import ExtendedTransferDetailDialog from "./ExtendedTransferDetailDialog";
 
 const LIST_API_MAP = {
   purchase: getExtendedPurchaseList,
@@ -131,8 +157,19 @@ const LIST_API_MAP = {
   transfer: getExtendedTransferList,
 };
 
+const DETAIL_API_MAP = {
+  purchase: getExtendedPurchaseDetail,
+  recruitment: getExtendedRecruitmentDetail,
+  transfer: getExtendedTransferDetail,
+};
+
 export default {
   name: "ExtendedQuerySection",
+  components: {
+    ExtendedPurchaseDetailDialog,
+    ExtendedRecruitmentDetailDialog,
+    ExtendedTransferDetailDialog,
+  },
   props: {
     projectId: {
       type: [String, Number],
@@ -261,6 +298,24 @@ export default {
         pageSize: query.pageSize,
       };
     },
+    buildDetailParams(tabName, row) {
+      if (tabName === "purchase") {
+        return {
+          projectId: this.projectId,
+          purchaseId: row.purchaseId,
+        };
+      }
+      if (tabName === "recruitment") {
+        return {
+          projectId: this.projectId,
+          recruitId: row.recruitId,
+        };
+      }
+      return {
+        projectId: this.projectId,
+        id: row.id,
+      };
+    },
     async loadList(tabName) {
       if (!this.projectId) {
         return;
@@ -283,6 +338,20 @@ export default {
         state.loading = false;
       }
     },
+    async handleDetail(row) {
+      const state = this.currentState;
+      state.detailLoading = true;
+      try {
+        const request = DETAIL_API_MAP[this.activeTab];
+        const response = await request(this.buildDetailParams(this.activeTab, row));
+        state.detailData = (response && response.data) || {};
+        state.detailVisible = true;
+      } catch (error) {
+        this.$message.error("详情加载失败");
+      } finally {
+        state.detailLoading = false;
+      }
+    },
   },
 };
 </script>