zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Step UX-1：通用选择器

Browse Source
This commit is contained in:
Cheng Zhou
2025-12-17 14:37:57 +08:00
parent 580d64602f
commit dd51f56707
13 changed files with 334 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/sites.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { apiGet } from "./axios";
import type { ApiListResponse } from "../types/api";
export const fetchSites = (studyId: string) =>
apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/sites/`);
export const fetchSites = (studyId: string, params?: Record<string, any>) =>
apiGet<ApiListResponse<any>>(`/api/v1/studies/${studyId}/sites/`, { params });
frontend/src/api/users.ts
+5
View File
@@ -0,0 +1,5 @@
import { apiGet } from "./axios";
import type { ApiListResponse } from "../types/api";
export const fetchUsers = (params?: Record<string, any>) =>
apiGet<ApiListResponse<any>>("/api/v1/users", { params });
frontend/src/components/AeForm.vue
+4 -17
View File
@@ -2,14 +2,7 @@
<el-dialog :title="isEdit ? '编辑 AE' : '新增 AE'" v-model="visible" width="600px" @close="onClose">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="受试者" prop="subject_id">
<el-select v-model="form.subject_id" placeholder="可留空" clearable filterable>
<el-option
v-for="s in subjects || []"
:key="s.id"
:label="s.subject_no || s.id"
:value="s.id"
/>
</el-select>
<SubjectSelect v-model="form.subject_id" :study-id="study.currentStudy?.id || null" placeholder="可留空" />
</el-form-item>
<el-form-item label="事件描述" prop="term">
<el-input v-model="form.term" />
@@ -45,14 +38,13 @@ import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { createAe, updateAe } from "../api/aes";
import { useStudyStore } from "../store/study";
import SubjectSelect from "./selectors/SubjectSelect.vue";
interface Props {
const props = defineProps<{
modelValue: boolean;
ae?: Record<string, any>;
subjects?: any[];
}
const props = defineProps<Props>();
}>();
const emit = defineEmits(["update:modelValue", "success"]);
const visible = computed({
@@ -125,16 +117,11 @@ const onSubmit = async () => {
submitting.value = true;
try {
const payload: Record<string, any> = {};
const uuidLike = /^[0-9a-fA-F-]{36}$/;
Object.entries(form).forEach(([k, v]) => {
if (v !== "" && v !== null && v !== undefined) {
payload[k] = v;
}
});
if (payload.subject_id && !uuidLike.test(String(payload.subject_id))) {
ElMessage.warning("受试者ID格式不正确，已忽略");
delete payload.subject_id;
}
if (isEdit.value && props.ae) {
await updateAe(study.currentStudy.id, props.ae.id, payload);
} else {
frontend/src/components/DataQueryForm.vue
+6 -9
View File
@@ -5,9 +5,7 @@
<el-input v-model="form.title" />
</el-form-item>
<el-form-item label="受试者" prop="subject_id">
<el-select v-model="form.subject_id" placeholder="可留空" clearable filterable>
<el-option v-for="s in subjects || []" :key="s.id" :label="s.subject_no || s.id" :value="s.id" />
</el-select>
<SubjectSelect v-model="form.subject_id" :study-id="study.currentStudy?.id || null" placeholder="可选" />
</el-form-item>
<el-form-item label="类别" prop="category">
<el-select v-model="form.category" placeholder="请选择">
@@ -25,7 +23,7 @@
</el-select>
</el-form-item>
<el-form-item label="指派给" prop="assigned_to">
<el-input v-model="form.assigned_to" placeholder="用户ID，可留空" />
<UserSelect v-model="form.assigned_to" placeholder="可选" />
</el-form-item>
<el-form-item label="截止日期" prop="due_date">
<el-date-picker v-model="form.due_date" type="date" value-format="YYYY-MM-DD" />
@@ -47,14 +45,13 @@ import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { createDataQuery, updateDataQuery } from "../api/dataQueries";
import { useStudyStore } from "../store/study";
import SubjectSelect from "./selectors/SubjectSelect.vue";
import UserSelect from "./selectors/UserSelect.vue";
interface Props {
const props = defineProps<{
modelValue: boolean;
query?: Record<string, any>;
subjects?: any[];
}
const props = defineProps<Props>();
}>();
const emit = defineEmits(["update:modelValue", "success"]);
const visible = computed({
frontend/src/components/FinanceForm.vue
+6 -4
View File
@@ -21,11 +21,11 @@
<el-form-item label="发生日期" prop="occur_date">
<el-date-picker v-model="form.occur_date" type="date" value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item label="中心ID">
<el-input v-model="form.site_id" placeholder="可选" />
<el-form-item label="中心">
<SiteSelect v-model="form.site_id" :study-id="study.currentStudy?.id || null" placeholder="可选" />
</el-form-item>
<el-form-item label="受试者ID">
<el-input v-model="form.subject_id" placeholder="可选" />
<el-form-item label="受试者">
<SubjectSelect v-model="form.subject_id" :study-id="study.currentStudy?.id || null" placeholder="可选" />
</el-form-item>
</el-form>
<template #footer>
@@ -40,6 +40,8 @@ import { computed, reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import { useStudyStore } from "../store/study";
import { createFinanceItem, updateFinanceItem } from "../api/finance";
import SiteSelect from "./selectors/SiteSelect.vue";
import SubjectSelect from "./selectors/SubjectSelect.vue";
const props = defineProps<{ modelValue: boolean; item?: any }>();
const emit = defineEmits(["update:modelValue", "success"]);
frontend/src/components/ImpTransactionForm.vue
+15 -4
View File
@@ -2,7 +2,7 @@
<el-dialog :model-value="modelValue" title="新增交易" width="560px" @close="close">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="中心" prop="site_id">
<el-input v-model="form.site_id" placeholder="Site ID" />
<SiteSelect v-model="form.site_id" :study-id="study.currentStudy?.id || null" />
</el-form-item>
<el-form-item label="批次" prop="batch_id">
<el-select v-model="form.batch_id" placeholder="请选择批次">
@@ -17,8 +17,12 @@
<el-form-item label="数量" prop="quantity">
<el-input-number v-model="form.quantity" :min="1" :step="1" />
</el-form-item>
<el-form-item label="受试者ID" :required="form.tx_type === 'DISPENSE'">
<el-input v-model="form.subject_id" placeholder="DISPENSE 时必填" />
<el-form-item label="受试者" :required="form.tx_type === 'DISPENSE'">
<SubjectSelect
v-model="form.subject_id"
:study-id="study.currentStudy?.id || null"
placeholder="DISPENSE 时必填"
/>
</el-form-item>
<el-form-item label="日期" prop="tx_date">
<el-date-picker v-model="form.tx_date" type="date" value-format="YYYY-MM-DD" />
@@ -42,6 +46,8 @@ import { computed, reactive, ref, watch } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useStudyStore } from "../store/study";
import { createImpTransaction } from "../api/impTransactions";
import SiteSelect from "./selectors/SiteSelect.vue";
import SubjectSelect from "./selectors/SubjectSelect.vue";
const props = defineProps<{ modelValue: boolean; batches: any[] }>();
const emit = defineEmits(["update:modelValue", "success"]);
@@ -91,7 +97,12 @@ const onSubmit = async () => {
}
submitting.value = true;
try {
await createImpTransaction(study.currentStudy.id, form);
const payload = {
...form,
site_id: form.site_id || null,
subject_id: form.subject_id || null,
};
await createImpTransaction(study.currentStudy.id, payload);
ElMessage.success("创建成功");
emit("success");
close();
frontend/src/components/IssueForm.vue
+7
View File
@@ -4,6 +4,9 @@
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" />
</el-form-item>
<el-form-item label="受试者">
<SubjectSelect v-model="form.subject_id" :study-id="study.currentStudy?.id || null" placeholder="可选" />
</el-form-item>
<el-form-item label="类别" prop="category">
<el-select v-model="form.category" placeholder="请选择">
<el-option v-for="c in categories" :key="c" :label="c" :value="c" />
@@ -34,6 +37,7 @@ import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { createIssue, updateIssue } from "../api/issues";
import { useStudyStore } from "../store/study";
import SubjectSelect from "./selectors/SubjectSelect.vue";
interface Props {
modelValue: boolean;
@@ -57,6 +61,7 @@ const levels = ["LOW", "MEDIUM", "HIGH", "CRITICAL"];
const form = reactive({
title: "",
subject_id: "",
category: "ISSUE",
level: "MEDIUM",
due_date: "",
@@ -77,6 +82,7 @@ watch(
if (val) {
Object.assign(form, {
title: val.title || "",
subject_id: val.subject_id || "",
category: val.category || "ISSUE",
level: val.level || "MEDIUM",
due_date: val.due_date || "",
@@ -85,6 +91,7 @@ watch(
} else {
Object.assign(form, {
title: "",
subject_id: "",
category: "ISSUE",
level: "MEDIUM",
due_date: "",
frontend/src/components/TaskForm.vue
+2 -10
View File
@@ -13,7 +13,7 @@
</el-select>
</el-form-item>
<el-form-item label="负责人" prop="assignee_id">
<el-input v-model="form.assignee_id" placeholder="用户ID" />
<UserSelect v-model="form.assignee_id" placeholder="选择负责人" />
</el-form-item>
<el-form-item label="优先级" prop="priority">
<el-select v-model="form.priority" placeholder="请选择">
@@ -42,6 +42,7 @@ import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { createTask, updateTask } from "../api/tasks";
import { useStudyStore } from "../store/study";
import UserSelect from "./selectors/UserSelect.vue";
interface Props {
modelValue: boolean;
@@ -120,20 +121,11 @@ const onSubmit = async () => {
submitting.value = true;
try {
const payload: Record<string, any> = {};
const uuidLike = /^[0-9a-fA-F-]{36}$/;
Object.entries(form).forEach(([k, v]) => {
if (v !== "" && v !== null && v !== undefined) {
payload[k] = v;
}
});
if (payload.assignee_id && !uuidLike.test(String(payload.assignee_id))) {
ElMessage.warning("负责人ID 需为有效用户ID，已忽略该字段");
delete payload.assignee_id;
}
if (payload.milestone_id && !uuidLike.test(String(payload.milestone_id))) {
ElMessage.warning("里程碑无效，已忽略该字段");
delete payload.milestone_id;
}
if (isEdit.value && props.task) {
await updateTask(study.currentStudy.id, props.task.id, payload);
} else {
frontend/src/components/selectors/SiteSelect.vue
+90
View File
@@ -0,0 +1,90 @@
<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>
frontend/src/components/selectors/SubjectSelect.vue
+98
View File
@@ -0,0 +1,98 @@
<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>
frontend/src/components/selectors/UserSelect.vue
+81
View File
@@ -0,0 +1,81 @@
<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>
frontend/src/views/Verification.vue
+18 -6
View File
@@ -6,7 +6,13 @@
<el-option label="SDV" value="SDV" />
<el-option label="SDR" value="SDR" />
</el-select>
<el-input v-model="filters.site_id" placeholder="中心ID" style="width: 180px" @change="load" />
<SiteSelect
v-model="filters.site_id"
:study-id="study.currentStudy?.id || null"
placeholder="中心"
style="width: 220px"
@change="load"
/>
<div class="spacer" />
<el-button v-if="canEdit" type="primary" @click="openCreate">新增进度</el-button>
</div>
@@ -16,11 +22,15 @@
<el-dialog :title="editForm.id ? '更新进度' : '新增进度'" v-model="showEdit" width="520px">
<el-form :model="editForm" label-width="120px">
<el-form-item label="受试者ID">
<el-input v-model="editForm.subject_id" :disabled="!!editForm.id" />
<el-form-item label="受试者">
<SubjectSelect
v-model="editForm.subject_id"
:study-id="study.currentStudy?.id || null"
:disabled="!!editForm.id"
/>
</el-form-item>
<el-form-item label="中心ID">
<el-input v-model="editForm.site_id" />
<el-form-item label="中心">
<SiteSelect v-model="editForm.site_id" :study-id="study.currentStudy?.id || null" />
</el-form-item>
<el-form-item label="类型">
<el-select v-model="editForm.level" placeholder="请选择">
@@ -53,6 +63,8 @@ import { fetchVerifications, upsertVerification } from "../api/verifications";
import { useStudyStore } from "../store/study";
import { useAuthStore } from "../store/auth";
import VerificationTable from "../components/VerificationTable.vue";
import SiteSelect from "../components/selectors/SiteSelect.vue";
import SubjectSelect from "../components/selectors/SubjectSelect.vue";
const study = useStudyStore();
const auth = useAuthStore();
@@ -115,7 +127,7 @@ const submitEdit = async () => {
try {
await upsertVerification(study.currentStudy.id, {
subject_id: editForm.value.subject_id,
site_id: editForm.value.site_id,
site_id: editForm.value.site_id || null,
level: editForm.value.level,
percent: editForm.value.percent,
last_verified_at: editForm.value.last_verified_at,