减少货商和经办人下拉选择一次性加载数据的数量防止页面卡住时间过长

src/components/Select/SelectCanteenSupplier.vue

@@ -1,85 +1,96 @@
 <template>
 	<el-select
-		style="width: 100%"
-		v-model="state.selectId"
-		:placeholder="props.placeholder"
+		v-model="selectedId"
+		:placeholder="placeholder"
 		clearable
 		remote-show-suffix
 		filterable
 		remote
-		:remote-method="remoteSearch"
+		:remote-method="handleSearch"
 		:loading="state.loading"
-		@visible-change="(e: boolean) => e && getOptions()"
-		@change="change"
+		@visible-change="handleVisibleChange"
+		@change="handleChange"
 	>
-		<el-option v-for="v in state.options" :key="v.supplierId" :label="v.supplierName" :value="v.supplierId" />
+		<el-option v-for="item in state.optionList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
 	</el-select>
 </template>
 
 <script setup lang="ts">
-import { reactive } from "vue"
+import { reactive, watch } from "vue"
 import { fetchList } from "/@/api/canteen/canteenSupplier"
-const emit = defineEmits(["change"])
 
-const selectId = defineModel()
+interface Supplier {
+	supplierId: string | number
+	supplierName: string
+}
 
-export type Props = {
+interface Props {
 	placeholder?: string
 }
+
 const props = withDefaults(defineProps<Props>(), {
-	placeholder: "请输入货商",
+	placeholder: "请输入",
 })
 
-const queryForm = reactive<any>({
-	supplierName: "",
-	current: 1,
-	size: 10,
-})
-
-const state = reactive<any>({
-	loading: true,
-	selectId: selectId,
-	options: [],
+const emit = defineEmits<{
+	(e: "change", supplier: Supplier | undefined): void
+}>()
+
+const selectedId = defineModel<string | number>()
+
+const state = reactive({
+	loading: false,
+	optionList: [] as Supplier[],
+	searchParams: {
+		supplierName: "",
+		current: 1,
+		size: 10,
+	},
 })
 
+// 监听选中值变化
 watch(
-	selectId,
-	(newVal, oldValue) => {
-		if (newVal == oldValue) return
-		state.selectId = newVal
-		getOptions()
+	selectedId,
+	(newVal) => {
+		if (newVal !== undefined) {
+			fetchoptionList()
+		}
 	},
 	{ immediate: true },
 )
 
-async function getOptions() {
+async function fetchoptionList() {
 	try {
 		state.loading = true
-		const _pa = {
-			supplierId: selectId.value,
-			...queryForm,
+		const params = {
+			supplierId: selectedId.value,
+			...state.searchParams,
 		}
-		const { data } = await fetchList(_pa)
-		state.options = data.records ?? []
+		const { data } = await fetchList(params)
+		state.optionList = data.records ?? []
 	} finally {
-		setTimeout(() => (state.loading = false), 500)
+		state.loading = false
 	}
 }
 
-function remoteSearch(params: string) {
-	if (params != queryForm.supplierName) {
-		queryForm.supplierName = params
-		getOptions()
+// 搜索处理
+function handleSearch(keyword: string) {
+	if (keyword !== state.searchParams.supplierName) {
+		state.searchParams.supplierName = keyword
+		fetchoptionList()
 	}
 }
 
-function clear() {
-	state.selectId = null
-	getOptions()
+// 下拉框显示状态变化
+function handleVisibleChange(visible: boolean) {
+	if (visible) {
+		fetchoptionList()
+	}
 }
 
-function change(v: any) {
-	const targetUser = state.options.find((i: any) => i.userId == v)
-	emit("change", targetUser)
+// 选择变化处理
+function handleChange(supplierId: string) {
+	const selectedOption = state.optionList.find((option) => option.supplierId === supplierId)
+	emit("change", selectedOption)
 }
 </script>

src/components/Select/SelectHandlerUser.vue

@@ -1,90 +1,102 @@
 <template>
 	<el-select
-		style="width: 100%"
-		v-model="state.selectId"
-		:placeholder="props.placeholder"
+		v-model="selectedId"
+		:placeholder="placeholder"
 		clearable
 		remote-show-suffix
 		filterable
 		remote
-		:remote-method="remoteSearch"
+		:remote-method="handleSearch"
 		:loading="state.loading"
-		@visible-change="(e: boolean) => e && getOptions()"
-		@change="change"
+		@visible-change="handleVisibleChange"
+		@change="handleChange"
 	>
-		<el-option v-for="v in state.options" :key="v.userId" :label="`${v.name}-${v.phone}`" :value="v.userId">
+		<el-option v-for="item in state.optionList" :key="item.userId" :label="`${item.name}-${item.phone}`" :value="item.userId">
 			<div class="flex items-center">
-				<div class="color-primary">{{ v.name }}</div>
-				<div class="pl5 color-success">{{ v.phone }}</div>
+				<div class="color-primary">{{ item.name }}</div>
+				<div class="pl5 color-success">{{ item.phone }}</div>
 			</div>
 		</el-option>
 	</el-select>
 </template>
 
-<script setup lang="ts" name="select-user">
-import { reactive } from "vue"
+<script setup lang="ts">
+import { reactive, watch } from "vue"
 import * as userApi from "/@/api/admin/user"
-const emit = defineEmits(["change"])
 
-const selectId = defineModel()
+interface User {
+	userId: string
+	name: string
+	phone: string
+}
 
-export type Props = {
+interface Props {
 	placeholder?: string
 }
+
 const props = withDefaults(defineProps<Props>(), {
-	placeholder: "输入姓名、手机号",
+	placeholder: "请输入",
 })
 
-const queryForm = reactive<any>({
-	nameOrPhone: "",
-	current: 1,
-	size: 10,
-})
-
-const state = reactive<any>({
-	loading: true,
-	selectId: selectId,
-	options: [],
+const emit = defineEmits<{
+	(e: "change", user: User | undefined): void
+}>()
+
+const selectedId = defineModel<string | number>()
+
+const state = reactive({
+	loading: false,
+	optionList: [] as User[],
+	searchParams: {
+		nameOrPhone: "",
+		current: 1,
+		size: 10,
+	},
 })
 
+// 监听选中值变化
 watch(
-	selectId,
-	(newVal, oldValue) => {
-		if (newVal == oldValue) return
-		state.selectId = newVal
-		getOptions()
+	selectedId,
+	(newVal) => {
+		if (newVal !== undefined) {
+			fetchoptionList()
+		}
 	},
 	{ immediate: true },
 )
 
-async function getOptions() {
+async function fetchoptionList() {
 	try {
 		state.loading = true
-		const _pa = {
-			userId: selectId.value,
-			...queryForm,
+		const params = {
+			userId: selectedId.value,
+			...state.searchParams,
 		}
-		const { data } = await userApi.pageList(_pa)
-		state.options = data.records ?? []
+		const { data } = await userApi.pageList(params)
+		state.optionList = data.records ?? []
 	} finally {
-		setTimeout(() => (state.loading = false), 500)
+		state.loading = false
 	}
 }
 
-function remoteSearch(params: string) {
-	if (params != queryForm.nameOrPhone) {
-		queryForm.nameOrPhone = params
-		getOptions()
+// 搜索处理
+function handleSearch(keyword: string) {
+	if (keyword !== state.searchParams.nameOrPhone) {
+		state.searchParams.nameOrPhone = keyword
+		fetchoptionList()
 	}
 }
 
-function clear() {
-	state.selectId = null
-	getOptions()
+// 下拉框显示状态变化
+function handleVisibleChange(visible: boolean) {
+	if (visible) {
+		fetchoptionList()
+	}
 }
 
-function change(v: any) {
-	const targetUser = state.options.find((i: any) => i.userId == v)
-	emit("change", targetUser)
+// 选择变化处理
+function handleChange(userId: string) {
+	const selectedOption = state.optionList.find((option) => option.userId === userId)
+	emit("change", selectedOption)
 }
 </script>

src/components/Select/SelectSupermarketSupplier.vue

@@ -0,0 +1,96 @@
+<template>
+	<el-select
+		v-model="selectedId"
+		:placeholder="placeholder"
+		clearable
+		remote-show-suffix
+		filterable
+		remote
+		:remote-method="handleSearch"
+		:loading="state.loading"
+		@visible-change="handleVisibleChange"
+		@change="handleChange"
+	>
+		<el-option v-for="item in state.optionList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
+	</el-select>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from "vue"
+import { fetchList } from "/@/api/canteen/canteenSupplier"
+
+interface Supplier {
+	supplierId: string | number
+	supplierName: string
+}
+
+interface Props {
+	placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	placeholder: "请输入",
+})
+
+const emit = defineEmits<{
+	(e: "change", supplier: Supplier | undefined): void
+}>()
+
+const selectedId = defineModel<string | number>()
+
+const state = reactive({
+	loading: false,
+	optionList: [] as Supplier[],
+	searchParams: {
+		supplierName: "",
+		current: 1,
+		size: 10,
+	},
+})
+
+// 监听选中值变化
+watch(
+	selectedId,
+	(newVal) => {
+		if (newVal !== undefined) {
+			fetchoptionList()
+		}
+	},
+	{ immediate: true },
+)
+
+async function fetchoptionList() {
+	try {
+		state.loading = true
+		const params = {
+			supplierId: selectedId.value,
+			...state.searchParams,
+		}
+		const { data } = await fetchList(params)
+		state.optionList = data.records ?? []
+	} finally {
+		state.loading = false
+	}
+}
+
+// 搜索处理
+function handleSearch(keyword: string) {
+	if (keyword !== state.searchParams.supplierName) {
+		state.searchParams.supplierName = keyword
+		fetchoptionList()
+	}
+}
+
+// 下拉框显示状态变化
+function handleVisibleChange(visible: boolean) {
+	if (visible) {
+		fetchoptionList()
+	}
+}
+
+// 选择变化处理
+function handleChange(supplierId: string) {
+	const selectedOption = state.optionList.find((option) => option.supplierId === supplierId)
+	emit("change", selectedOption)
+}
+</script>

src/components/Select/SelectSupplier.vue

@@ -1,85 +0,0 @@
-<template>
-	<el-select
-		style="width: 100%"
-		v-model="state.selectId"
-		:placeholder="props.placeholder"
-		clearable
-		remote-show-suffix
-		filterable
-		remote
-		:remote-method="remoteSearch"
-		:loading="state.loading"
-		@visible-change="(e: boolean) => e && getOptions()"
-		@change="change"
-	>
-		<el-option v-for="v in state.options" :key="v.supplierId" :label="v.supplierName" :value="v.supplierId" />
-	</el-select>
-</template>
-
-<script setup lang="ts">
-import { reactive } from "vue"
-import { fetchList } from "/@/api/supermarketerp/smErpSupplier"
-const emit = defineEmits(["change"])
-
-const selectId = defineModel()
-
-export type Props = {
-	placeholder?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-	placeholder: "请输入货商",
-})
-
-const queryForm = reactive<any>({
-	supplierName: "",
-	current: 1,
-	size: 10,
-})
-
-const state = reactive<any>({
-	loading: true,
-	selectId: selectId,
-	options: [],
-})
-
-watch(
-	selectId,
-	(newVal, oldValue) => {
-		if (newVal == oldValue) return
-		state.selectId = newVal
-		getOptions()
-	},
-	{ immediate: true },
-)
-
-async function getOptions() {
-	try {
-		state.loading = true
-		const _pa = {
-			supplierId: selectId.value,
-			...queryForm,
-		}
-		const { data } = await fetchList(_pa)
-		state.options = data.records ?? []
-	} finally {
-		setTimeout(() => (state.loading = false), 500)
-	}
-}
-
-function remoteSearch(params: string) {
-	if (params != queryForm.supplierName) {
-		queryForm.supplierName = params
-		getOptions()
-	}
-}
-
-function clear() {
-	state.selectId = null
-	getOptions()
-}
-
-function change(v: any) {
-	const targetUser = state.options.find((i: any) => i.userId == v)
-	emit("change", targetUser)
-}
-</script>

src/components/index.ts

@@ -25,7 +25,7 @@ import SelectDept from "/@/components/Select/SelectDept.vue"
 import SelectCtcg from "/@/components/Select/SelectCtcg.vue"
 import SelectCtcgol from "/@/components/Select/SelectCtcgol.vue"
 import SelectHandlerUser from "/@/components/Select/SelectHandlerUser.vue"
-import SelectSupplier from "/@/components/Select/SelectSupplier.vue"
+import SelectSupermarketSupplier from "/@/components/Select/SelectSupermarketSupplier.vue"
 import SelectMchRule from "/@/components/Select/SelectMchRule.vue"
 import SelectHardSpuCategory from "/@/components/Select/SelectHardSpuCategory.vue"
 import SelectHard from "/@/components/Select/SelectHard.vue"
@@ -86,7 +86,7 @@ export default {
 		app.component("SelectCtcgol", SelectCtcgol)
 		app.component("SelectHardGroup", SelectHardGroup)
 		app.component("SelectHandlerUser", SelectHandlerUser)
-		app.component("SelectSupplier", SelectSupplier)
+		app.component("SelectSupermarketSupplier", SelectSupermarketSupplier)
 		app.component("SelectMchRule", SelectMchRule)
 		app.component("SelectRole", SelectRole)
 		app.component("SelectCabinet", SelectCabinet)

src/views/canteen/canteenErpMaterial/index.vue

@@ -46,7 +46,7 @@
 				<el-table-column prop="name" label="食材名称" show-overflow-tooltip />
 				<el-table-column prop="categoryName" label="食材分类" show-overflow-tooltip>
 					<template #default="{ row }">
-						{{ canteenErpCategoryOptions.find((item: any) => item.id == row.categoryId)?.name }}
+						<el-tag>{{ canteenErpCategoryOptions.find((item: any) => item.id == row.categoryId)?.name }}</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column prop="unit" label="食材单位" show-overflow-tooltip />

src/views/supermarketerp/purchaseManagement/smErpCgBack/form.vue

@@ -57,7 +57,7 @@
 						/>
 					</el-form-item>
 					<el-form-item label="货商" prop="supplierId">
-						<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
+						<SelectSupermarketSupplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
 					</el-form-item>
 					<el-form-item label="备注" prop="remark">
 						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" :disabled="disabled" />

src/views/supermarketerp/purchaseManagement/smErpCgDd/form.vue

@@ -26,7 +26,7 @@
 					</div>
 					<div style="width: 33.33%; height: 28px; line-height: 28px">
 						<span class="font-bold">货商：</span>
-						<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" :isDisplayName="true" />
+						<SelectSupermarketSupplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" :isDisplayName="true" />
 					</div>
 					<div style="width: 33.33%; height: 28px; line-height: 28px">
 						<span class="font-bold">备注：</span>
@@ -62,7 +62,7 @@
 						/>
 					</el-form-item>
 					<el-form-item label="货商" prop="supplierId">
-						<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
+						<SelectSupermarketSupplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
 					</el-form-item>
 					<el-form-item label="备注" prop="remark">
 						<el-input v-model="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" :disabled="disabled" />

src/views/supermarketerp/purchaseManagement/smErpCgInventory/form.vue

@@ -26,7 +26,7 @@
 					</div>
 					<div style="width: 33.33%; height: 28px; line-height: 28px">
 						<span class="font-bold">货商：</span>
-						<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" :isDisplayName="true" />
+						<SelectSupermarketSupplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" :isDisplayName="true" />
 					</div>
 					<div style="width: 33.33%; height: 28px; line-height: 28px">
 						<span class="font-bold">备注：</span>
@@ -62,7 +62,7 @@
 						/>
 					</el-form-item>
 					<el-form-item label="货商" prop="supplierId">
-						<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
+						<SelectSupermarketSupplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
 					</el-form-item>
 					<el-form-item label="备注" prop="remark">
 						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" :disabled="disabled" />

src/views/supermarketerp/retailManagement/smErpRetailBack/form.vue

@@ -65,7 +65,7 @@
 						/>
 					</el-form-item>
 					<el-form-item label="货商" prop="supplierId">
-						<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
+						<SelectSupermarketSupplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
 					</el-form-item>
 					<el-form-item label="备注" prop="remark">
 						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" :disabled="disabled" />

src/views/supermarketerp/retailManagement/smErpRetailDelivery/form.vue

@@ -57,7 +57,7 @@
 						/>
 					</el-form-item>
 					<el-form-item label="货商" prop="supplierId">
-						<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
+						<SelectSupermarketSupplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
 					</el-form-item>
 					<el-form-item label="备注" prop="remark">
 						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" :disabled="disabled" />

src/views/supermarketerp/supermarketSpu/components/base-info.vue

@@ -12,7 +12,7 @@
 		</el-col>
 		<el-col :span="12" class="mb20">
 			<el-form-item label="货商" prop="supplierId">
-				<select-supplier v-model="form.supplierId" />
+				<SelectSupermarketSupplier v-model="form.supplierId" />
 			</el-form-item>
 		</el-col>
 		<el-col :span="12" class="mb20">