From b84f5e4392b2a181a61c338cde3cef6143298ccd Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Wed, 28 May 2025 17:27:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=8F=E5=B0=91=E8=B4=A7=E5=95=86=E5=92=8C?=
 =?UTF-8?q?=E7=BB=8F=E5=8A=9E=E4=BA=BA=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1=E6=80=A7=E5=8A=A0=E8=BD=BD=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E9=87=8F=E9=98=B2=E6=AD=A2=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=8D=A1=E4=BD=8F=E6=97=B6=E9=97=B4=E8=BF=87=E9=95=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Select/SelectCanteenSupplier.vue          |  99 ++++++++--------
 src/components/Select/SelectHandlerUser.vue   | 106 ++++++++++--------
 .../Select/SelectSupermarketSupplier.vue      |  96 ++++++++++++++++
 src/components/Select/SelectSupplier.vue      |  85 --------------
 src/components/index.ts                       |   4 +-
 .../canteen/canteenErpMaterial/index.vue      |   2 +-
 .../purchaseManagement/smErpCgBack/form.vue   |   2 +-
 .../purchaseManagement/smErpCgDd/form.vue     |   4 +-
 .../smErpCgInventory/form.vue                 |   4 +-
 .../retailManagement/smErpRetailBack/form.vue |   2 +-
 .../smErpRetailDelivery/form.vue              |   2 +-
 .../supermarketSpu/components/base-info.vue   |   2 +-
 12 files changed, 221 insertions(+), 187 deletions(-)
 create mode 100644 src/components/Select/SelectSupermarketSupplier.vue
 delete mode 100644 src/components/Select/SelectSupplier.vue

diff --git a/src/components/Select/SelectCanteenSupplier.vue b/src/components/Select/SelectCanteenSupplier.vue
index 2c4407e..faeda27 100644
--- a/src/components/Select/SelectCanteenSupplier.vue
+++ b/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>
diff --git a/src/components/Select/SelectHandlerUser.vue b/src/components/Select/SelectHandlerUser.vue
index a19896a..703a7ca 100644
--- a/src/components/Select/SelectHandlerUser.vue
+++ b/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>
diff --git a/src/components/Select/SelectSupermarketSupplier.vue b/src/components/Select/SelectSupermarketSupplier.vue
new file mode 100644
index 0000000..faeda27
--- /dev/null
+++ b/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>
diff --git a/src/components/Select/SelectSupplier.vue b/src/components/Select/SelectSupplier.vue
deleted file mode 100644
index 098843c..0000000
--- a/src/components/Select/SelectSupplier.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/index.ts b/src/components/index.ts
index 3d2282a..27ac25a 100644
--- a/src/components/index.ts
+++ b/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)
diff --git a/src/views/canteen/canteenErpMaterial/index.vue b/src/views/canteen/canteenErpMaterial/index.vue
index d6429b5..0d564df 100644
--- a/src/views/canteen/canteenErpMaterial/index.vue
+++ b/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 />
diff --git a/src/views/supermarketerp/purchaseManagement/smErpCgBack/form.vue b/src/views/supermarketerp/purchaseManagement/smErpCgBack/form.vue
index 19f3fe0..0f29de9 100644
--- a/src/views/supermarketerp/purchaseManagement/smErpCgBack/form.vue
+++ b/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" />
diff --git a/src/views/supermarketerp/purchaseManagement/smErpCgDd/form.vue b/src/views/supermarketerp/purchaseManagement/smErpCgDd/form.vue
index f473aee..d36ca4e 100644
--- a/src/views/supermarketerp/purchaseManagement/smErpCgDd/form.vue
+++ b/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" />
diff --git a/src/views/supermarketerp/purchaseManagement/smErpCgInventory/form.vue b/src/views/supermarketerp/purchaseManagement/smErpCgInventory/form.vue
index 325a250..3b1e960 100644
--- a/src/views/supermarketerp/purchaseManagement/smErpCgInventory/form.vue
+++ b/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" />
diff --git a/src/views/supermarketerp/retailManagement/smErpRetailBack/form.vue b/src/views/supermarketerp/retailManagement/smErpRetailBack/form.vue
index 0f8577c..cdf256e 100644
--- a/src/views/supermarketerp/retailManagement/smErpRetailBack/form.vue
+++ b/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" />
diff --git a/src/views/supermarketerp/retailManagement/smErpRetailDelivery/form.vue b/src/views/supermarketerp/retailManagement/smErpRetailDelivery/form.vue
index 364473f..af08a9f 100644
--- a/src/views/supermarketerp/retailManagement/smErpRetailDelivery/form.vue
+++ b/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" />
diff --git a/src/views/supermarketerp/supermarketSpu/components/base-info.vue b/src/views/supermarketerp/supermarketSpu/components/base-info.vue
index 478b31d..1a05ade 100644
--- a/src/views/supermarketerp/supermarketSpu/components/base-info.vue
+++ b/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">