Просмотр исходного кода

fix: 批次管理改为弹窗方式,不依赖独立路由

alphah 2 недель назад
Родитель
Сommit
924f390a20

BIN
frontend/dist.zip


+ 123 - 15
frontend/src/views/module_payment/institution/components/QuotaList.vue

@@ -4,7 +4,7 @@
       <el-button type="success" size="small" @click="showBatchDialog = true">
         手工发放
       </el-button>
-      <el-button type="primary" size="small" @click="goToBatchManagement">
+      <el-button type="primary" size="small" @click="showBatchListDialog = true; loadBatchList()">
         发放批次管理
       </el-button>
     </div>
@@ -77,6 +77,71 @@
         <el-button @click="showBatchDialog = false">取消</el-button>
       </template>
     </el-dialog>
+
+    <!-- 发放批次管理弹窗 -->
+    <el-dialog v-model="showBatchListDialog" title="发放批次管理" width="1000px" destroy-on-close>
+      <div>
+        <div style="margin-bottom: 12px;">
+          <el-button type="primary" size="small" @click="showBatchDialog = true; showBatchListDialog = false">
+            + 新建发放
+          </el-button>
+        </div>
+        <el-table :data="batchList" border max-height="400">
+          <template #empty>
+            <el-empty :image-size="60" description="暂无发放批次" />
+          </template>
+          <el-table-column type="index" label="序号" width="50" />
+          <el-table-column prop="issue_batch_id" label="批次ID" min-width="160" show-overflow-tooltip />
+          <el-table-column prop="batch_no" label="批次号" min-width="120" />
+          <el-table-column prop="issue_name" label="发放名称" width="100" />
+          <el-table-column prop="total_count" label="人数" width="60" align="center" />
+          <el-table-column prop="total_amount" label="总金额" width="100" align="right">
+            <template #default="scope">
+              {{ scope.row.total_amount ? `¥${Number(scope.row.total_amount).toFixed(2)}` : "-" }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="70" align="center">
+            <template #default="scope">
+              <el-tag :type="ISSUE_BATCH_STATUS_TAG[scope.row.status] || 'info'" size="small">
+                {{ ISSUE_BATCH_STATUS_LABEL[scope.row.status] || scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_time" label="创建时间" width="140" />
+          <el-table-column label="操作" width="160" align="center" fixed="right">
+            <template #default="scope">
+              <el-button type="primary" size="small" link @click="handleViewRecords(scope.row)">
+                明细
+              </el-button>
+              <el-button
+                v-if="scope.row.status === 'ACTIVE'"
+                type="danger"
+                size="small"
+                link
+                @click="handleCancelBatch(scope.row)"
+              >
+                作废
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <el-button @click="showBatchListDialog = false">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 发放记录弹窗 -->
+    <el-dialog v-model="recordsDialogVisible" title="发放明细" width="800px" destroy-on-close>
+      <IssueBatchDetail
+        :issue-batch-id="currentBatchId"
+        :institution-id="props.institutionId"
+        :batch-info="currentBatchInfo"
+      />
+      <template #footer>
+        <el-button type="primary" @click="recordsDialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -85,11 +150,13 @@ import QuotaAPI, {
   STATUS_TAG_TYPE,
   STATUS_LABEL,
   QUOTA_TYPE_OPTIONS,
+  ISSUE_BATCH_STATUS_TAG,
+  ISSUE_BATCH_STATUS_LABEL,
 } from "@/api/module_payment/quota";
 import QuotaDetailDialog from "./QuotaDetailDialog.vue";
 import IssueBatchForm from "@/views/module_payment/quota/components/IssueBatchForm.vue";
-import { ElMessage } from "element-plus";
-import { useRouter } from "vue-router";
+import IssueBatchDetail from "@/views/module_payment/quota/components/IssueBatchDetail.vue";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { onMounted, ref } from "vue";
 import { useEnterpriseStore } from "@/store/modules/enterprise.store";
 
@@ -111,20 +178,16 @@ const loading = ref(false);
 const detailVisible = ref(false);
 const currentQuotaId = ref("");
 
+// 手工发放
 const showBatchDialog = ref(false);
 const batchFormRef = ref();
-const router = useRouter();
-
-function goToBatchManagement() {
-  const win = window.open(
-    `/#/payment/quota?tab=batch&institution_id=${props.institutionId}`,
-    "_blank"
-  );
-  // 如果没有弹出新窗口则用router
-  if (!win || win.closed) {
-    router.push({ path: "/payment/quota", query: { tab: "batch", institution_id: props.institutionId } });
-  }
-}
+
+// 批次管理
+const showBatchListDialog = ref(false);
+const batchList = ref<any[]>([]);
+const recordsDialogVisible = ref(false);
+const currentBatchId = ref("");
+const currentBatchInfo = ref<any>({});
 
 async function fetchList() {
   if (!props.institutionId) return;
@@ -174,6 +237,51 @@ async function handleBatchSubmit() {
   }
 }
 
+// ==== 批次管理 ====
+async function loadBatchList() {
+  try {
+    const res = await QuotaAPI.issueBatchList({ page_no: 1, page_size: 200, institution_id: props.institutionId });
+    batchList.value = res?.data?.data?.items || [];
+  } catch (e) {
+    console.error("加载批次列表失败", e);
+  }
+}
+
+function handleViewRecords(row: any) {
+  currentBatchId.value = row.issue_batch_id;
+  currentBatchInfo.value = {
+    issue_batch_id: row.issue_batch_id,
+    batch_no: row.batch_no,
+    issue_name: row.issue_name,
+    institution_id: row.institution_id,
+  };
+  recordsDialogVisible.value = true;
+}
+
+function handleCancelBatch(row: any) {
+  const store = useEnterpriseStore();
+  const eid = store.getCurrentEnterprise?.enterprise_id;
+  if (!eid) { ElMessage.error("企业ID不存在"); return; }
+
+  ElMessageBox.confirm(`确认作废发放批次 "${row.issue_name}"?`, "警告", {
+    confirmButtonText: "确认作废",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    try {
+      await QuotaAPI.issueBatchCancel({
+        enterprise_id: eid,
+        institution_id: row.institution_id,
+        issue_batch_id: row.issue_batch_id,
+      });
+      ElMessage.success("作废成功");
+      loadBatchList();
+    } catch (e) {
+      console.error("作废失败", e);
+    }
+  }).catch(() => {});
+}
+
 onMounted(() => {
   fetchList();
 });