🎨 电脑管理：添加店铺筛选框

src/views/computer-information/api.ts

@@ -53,6 +53,14 @@ export function getUserList(query: any) {
   });
 }
 
+export function getShopFilterList(query: any) {
+  return request({
+    url: '/api/assets/shop/filter/box/',
+    method: 'GET',
+    params: query,
+  });
+}
+
 // 创建接口
 export function createComputer(body: any) {
   return request({

src/views/computer-information/components/InfoCard.vue

@@ -15,6 +15,7 @@ import { useTableData } from '/@/utils/useTableData';
 import EditComputerInfo from '/@/views/computer-information/components/EditComputerInfo.vue';
 import { useResponse } from '/@/utils/useResponse';
 import CreateComputer from '/@/views/computer-information/components/CreateComputer.vue';
+import { getShopFilterList } from '/@/views/computer-information/api';
 
 const router = useRouter();
 const loading = ref();
@@ -23,10 +24,12 @@ const showDialog = ref(false);
 // const isDrawerVisible = ref(false);
 
 const searchComputer = ref('');
+const searchNumber = ref<string[]>([]);
 
 const computerInfo = ref([]);
 const shopOptions = ref([]);
 const userOptions = ref([]);
+const numberOptions = ref([]);
 
 const { tableOptions, handlePageChange } = usePagination(fetchCardData);
 tableOptions.value.limit = 12;
@@ -36,7 +39,9 @@ async function fetchCardData() {
 		page: tableOptions.value.page,
 		limit: tableOptions.value.limit,
     computerNumber: searchComputer.value,
-	};
+    shop: searchNumber.value.join(','),
+  };
+  console.log(query);
 	await useTableData(api.getCardData, query, tableOptions);
 }
 
@@ -91,10 +96,21 @@ async function fetchUserOptions() {
 	}
 }
 
+async function fetchShopFilterOptions() {
+	try {
+		const resp = await useResponse(null, api.getShopFilterList);
+    numberOptions.value = resp.data.platformNumber
+	} catch (e) {
+		console.log('error', e);
+	}
+}
+
+
 onMounted(() => {
 	fetchCardData();
 	fetchShopOptions();
 	fetchUserOptions();
+  fetchShopFilterOptions();
 });
 </script>
 
@@ -105,7 +121,20 @@ onMounted(() => {
 			<div>
 				<span class="font-bold text-xl">电脑信息概览</span>
 				<el-divider class="text-3xl" direction="vertical" />
-        <el-input v-model="searchComputer" clearable placeholder="电脑编号" style="width: 200px" @change="fetchCardData"></el-input>
+        <el-input v-model="searchComputer" clearable placeholder="电脑编号" style="width: 200px;padding-right: 10px;" @change="fetchCardData"></el-input>
+        <el-select
+            v-model="searchNumber"
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            filterable
+            multiple
+            placeholder="店铺编号"
+            style="width: 200px"
+            @change="fetchCardData"
+        >
+          <el-option v-for="item in numberOptions" :key="item" :label="item" :value="item" />
+        </el-select>
 			</div>
 			<span>
 				<el-button :icon="Plus" bg text type="primary" @click="addComputer">添 加</el-button>