减少货商和经办人下拉选择一次性加载数据的数量防止页面卡住时间过长
This commit is contained in:
weiwei committed
1 parent
9031f92404
commit
b84f5e4392
12 files changed
+221
-187
No files matched your search
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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)
|
||||
|
||||
Reference in new issue
Block a user