feat 立法背景loading

src/api/bill.js

@@ -56,11 +56,12 @@ export function getBillDyqk(params) {
  * @param {id,cRelated,currentPage,pageSize} 
  * @header token
  */
-export function getBillBackground(params) {
+export function getBillBackground(params, config = {}) {
     return request({
         method: 'GET',
         url: `/api/billInfoBean/background/${params.id}`,
         params,
+        signal: config.signal
     })
 }
 // 相关事件-根据法案ID获取相关事件信息

src/views/bill/background/index.vue

@@ -8,7 +8,7 @@
 						<el-button :type="box1Btn2Type" plain @click="handleClickBox1Btn(2)">全部背景</el-button>
 					</div>
 				</template>
-				<div class="box1-main">
+				<div class="box1-main" v-loading="backgroundLoading">
 					<div class="box1-main-center">
 						<div class="box1-main-item" v-for="item in backgroundDisplayList" :key="item.id">
 							<div class="id">{{ item.displayIndex }}</div>
@@ -198,6 +198,8 @@ const handleClickBox2Btn = index => {
 const aboutUserList = ref([]);
 
 const backgroundList = ref([]);
+const backgroundLoading = ref(false);
+let backgroundAbortController = null;
 
 const eventList = ref([]);
 
@@ -244,6 +246,12 @@ const nextIconColor = computed(() => (currentIndex.value < personList.value.leng
 
 // 获取立法背景内容
 const handleGetBillBackground = async () => {
+	if (backgroundAbortController) {
+		backgroundAbortController.abort();
+	}
+	const controller = new AbortController();
+	backgroundAbortController = controller;
+
 	const cRelated = box1BtnActive.value === 1 ? "Y" : "N";
 	const params = {
 		cRelated: cRelated,
@@ -251,11 +259,21 @@ const handleGetBillBackground = async () => {
 		currentPage: currentPage.value - 1,
 		pageSize: 10
 	};
+	backgroundLoading.value = true;
 	try {
-		const res = await getBillBackground(params);
+		const res = await getBillBackground(params, { signal: controller.signal });
 		backgroundList.value = res.data.content;
 		total.value = res.data.totalElements; // 假设API返回totalElements
-	} catch (error) { }
+	} catch (error) {
+		if (error?.name !== "AbortError" && error?.code !== "ERR_CANCELED") {
+			console.error(error);
+		}
+	} finally {
+		if (backgroundAbortController === controller) {
+			backgroundLoading.value = false;
+			backgroundAbortController = null;
+		}
+	}
 };
 
 // 获取相关事件