|
@@ -0,0 +1,84 @@
|
|
|
+<template>
|
|
|
+ <t-select
|
|
|
+ v-model="selected"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ v-bind="attrs"
|
|
|
+ @change="onChange"
|
|
|
+ >
|
|
|
+ <t-option
|
|
|
+ v-for="item in optionList"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.realName"
|
|
|
+ />
|
|
|
+ </t-select>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="SelectUrlUser">
|
|
|
+import { onMounted, ref, useAttrs, watch, computed } from 'vue';
|
|
|
+import {request} from "@/utils/request";
|
|
|
+import {isEqual} from "@/utils/tool";
|
|
|
+
|
|
|
+let optionList = ref([]);
|
|
|
+let selected = ref('');
|
|
|
+
|
|
|
+const attrs = useAttrs();
|
|
|
+
|
|
|
+const emit = defineEmits(['update:modelValue', 'change']);
|
|
|
+const props = defineProps({
|
|
|
+ modelValue: { type: [Number, String, Array], default: '' },
|
|
|
+ url: { type: String, default: '' },
|
|
|
+ params: { type: Object, default: {} },
|
|
|
+});
|
|
|
+const isMultiple = computed(() => {
|
|
|
+ const multiple = attrs.multiple;
|
|
|
+ return multiple === '' || multiple;
|
|
|
+});
|
|
|
+
|
|
|
+const search = async () => {
|
|
|
+ if (!props.url) return;
|
|
|
+ optionList.value = [];
|
|
|
+
|
|
|
+ const res = await request({ url: props.url, params: props.params }).catch(() => {});
|
|
|
+ // const res = await getRoleUserList(props.type).catch(() => {});
|
|
|
+ if (!res) return;
|
|
|
+
|
|
|
+ optionList.value = res;
|
|
|
+};
|
|
|
+
|
|
|
+const onChange = () => {
|
|
|
+ const selectedData = isMultiple.value
|
|
|
+ ? optionList.value.filter(
|
|
|
+ (item) => selected.value && selected.value.includes(item.id)
|
|
|
+ )
|
|
|
+ : optionList.value.filter((item) => selected.value === item.id);
|
|
|
+ emit('update:modelValue', selected.value);
|
|
|
+ emit('change', isMultiple.value ? selectedData : selectedData[0]);
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ search();
|
|
|
+});
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ (val) => {
|
|
|
+ selected.value = val;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+);
|
|
|
+watch(
|
|
|
+ () => props.params,
|
|
|
+ (val, oldval) => {
|
|
|
+ if (!isEqual(val ,oldval)) {
|
|
|
+ search();
|
|
|
+ emit('update:modelValue', null);
|
|
|
+ emit('change', isMultiple.value ? [] : null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+</script>
|