86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<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()"
|
|
>
|
|
<el-option v-for="v in state.options" :key="v.id" :label="`${v.name}`" :value="v.id">
|
|
<!-- <div class="flex items-center">
|
|
<div class="color-primary">{{ v.name }}</div>
|
|
<div class="flex items-center just ml5">
|
|
<el-tag size="small">
|
|
{{ v.deptName }}
|
|
</el-tag>
|
|
</div>
|
|
</div> -->
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="select-merchant">
|
|
import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue';
|
|
import { fetchList as getCanteenCategory } from '/@/api/canteen/canteenCategory';
|
|
|
|
const selectId = defineModel();
|
|
|
|
export type Props = {
|
|
placeholder?: string;
|
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: '请选择',
|
|
});
|
|
|
|
const queryForm = reactive<any>({
|
|
current: 1,
|
|
size: 9999,
|
|
});
|
|
|
|
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 = {
|
|
...queryForm,
|
|
};
|
|
const { data } = await getCanteenCategory(_pa);
|
|
state.options = data.records ?? [];
|
|
} finally {
|
|
setTimeout(() => (state.loading = false), 500);
|
|
}
|
|
}
|
|
|
|
function remoteSearch(params: string) {
|
|
if (params != queryForm.name) {
|
|
queryForm.name = params;
|
|
getOptions();
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
state.selectId = null;
|
|
getOptions();
|
|
}
|
|
</script>
|