信息架构/菜单框架大重构-20260109
This commit is contained in:
Cheng Zhou
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<el-select
|
||||
:model-value="modelValue"
|
||||
filterable
|
||||
remote
|
||||
clearable
|
||||
:remote-method="onSearch"
|
||||
:loading="loading"
|
||||
:placeholder="placeholder || '请选择中心'"
|
||||
style="width: 100%"
|
||||
:disabled="disabled || !studyId"
|
||||
@update:model-value="(val) => emit('update:modelValue', val)"
|
||||
>
|
||||
<el-option v-for="s in options" :key="s.id" :label="formatSite(s)" :value="s.id" />
|
||||
<template #empty>
|
||||
<div class="empty">{{ loading ? "加载中..." : "无匹配结果" }}</div>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { fetchSites } from "../../api/sites";
|
||||
|
||||
interface Props {
|
||||
modelValue: string | null;
|
||||
studyId: string | null;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const options = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
let timer: number | undefined;
|
||||
const disabled = computed(() => props.disabled ?? false);
|
||||
|
||||
const formatSite = (s: any) => {
|
||||
if (!s) return "";
|
||||
return s.city ? `${s.name} (${s.city})` : s.name;
|
||||
};
|
||||
|
||||
const load = async (keyword = "") => {
|
||||
if (!props.studyId) {
|
||||
options.value = [];
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await fetchSites(props.studyId, { keyword, limit: 20 });
|
||||
options.value = data.items || data || [];
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "中心加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onSearch = (keyword: string) => {
|
||||
if (timer) window.clearTimeout(timer);
|
||||
timer = window.setTimeout(() => load(keyword), 300);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.studyId,
|
||||
() => {
|
||||
load("");
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val && options.value.length === 0) {
|
||||
load("");
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty {
|
||||
padding: 8px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<el-select
|
||||
:model-value="modelValue"
|
||||
filterable
|
||||
remote
|
||||
clearable
|
||||
:remote-method="onSearch"
|
||||
:loading="loading"
|
||||
:placeholder="placeholder || '请选择受试者'"
|
||||
style="width: 100%"
|
||||
:disabled="disabled || !studyId"
|
||||
@update:model-value="(val) => emit('update:modelValue', val)"
|
||||
>
|
||||
<el-option
|
||||
v-for="s in options"
|
||||
:key="s.id"
|
||||
:label="formatSubject(s)"
|
||||
:value="s.id"
|
||||
/>
|
||||
<template #empty>
|
||||
<div class="empty">{{ loading ? "加载中..." : "无匹配结果" }}</div>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { fetchSubjects } from "../../api/subjects";
|
||||
|
||||
interface Props {
|
||||
modelValue: string | null;
|
||||
studyId: string | null;
|
||||
placeholder?: string;
|
||||
status?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const options = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
let timer: number | undefined;
|
||||
const disabled = computed(() => props.disabled ?? false);
|
||||
|
||||
const formatSubject = (s: any) => {
|
||||
if (!s) return "";
|
||||
return s.status ? `${s.subject_no || s.id} (${s.status})` : s.subject_no || s.id;
|
||||
};
|
||||
|
||||
const load = async (keyword = "") => {
|
||||
if (!props.studyId) {
|
||||
options.value = [];
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = { keyword, limit: 20 };
|
||||
if (props.status) params.status = props.status;
|
||||
const { data } = await fetchSubjects(props.studyId, params);
|
||||
options.value = data.items || data || [];
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "受试者加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onSearch = (keyword: string) => {
|
||||
if (timer) window.clearTimeout(timer);
|
||||
timer = window.setTimeout(() => load(keyword), 300);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.studyId,
|
||||
() => {
|
||||
load("");
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val && options.value.length === 0) {
|
||||
load("");
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty {
|
||||
padding: 8px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<el-select
|
||||
:model-value="modelValue"
|
||||
:multiple="multiple"
|
||||
filterable
|
||||
remote
|
||||
clearable
|
||||
:remote-method="onSearch"
|
||||
:loading="loading"
|
||||
:placeholder="placeholder || '请选择用户'"
|
||||
:disabled="disabled"
|
||||
style="width: 100%"
|
||||
@update:model-value="(val) => emit('update:modelValue', val)"
|
||||
>
|
||||
<el-option
|
||||
v-for="u in options"
|
||||
:key="u.id"
|
||||
:label="`${u.username}${u.role ? ' (' + u.role + ')' : ''}`"
|
||||
:value="u.id"
|
||||
/>
|
||||
<template #empty>
|
||||
<div class="empty">{{ loading ? "加载中..." : "无匹配结果" }}</div>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { fetchUsers } from "../../api/users";
|
||||
|
||||
interface Props {
|
||||
modelValue: string | string[] | null;
|
||||
placeholder?: string;
|
||||
multiple?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const options = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
let timer: number | undefined;
|
||||
const disabled = computed(() => props.disabled ?? false);
|
||||
|
||||
const load = async (keyword = "") => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await fetchUsers({ keyword, limit: 20 });
|
||||
options.value = data.items || data || [];
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "用户加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onSearch = (keyword: string) => {
|
||||
if (timer) window.clearTimeout(timer);
|
||||
timer = window.setTimeout(() => load(keyword), 300);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
// 初次渲染时拉一版数据，确保已选项有 label
|
||||
if (val && options.value.length === 0) {
|
||||
load("");
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty {
|
||||
padding: 8px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user