增加admin管理帐号和项目的界面--初步实现

2025-12-17 20:12:49 +08:00
parent 4f50237f56
commit c074c2b5bc
18933 changed files with 2088454 additions and 63 deletions
@@ -0,0 +1,118 @@
+<template>
+  <el-dialog :title="site ? '编辑中心' : '新建中心'" width="520px" v-model="visibleProxy" :close-on-click-modal="false">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="中心名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入中心名称" />
+      </el-form-item>
+      <el-form-item label="城市" prop="city">
+        <el-input v-model="form.city" placeholder="所在城市（可选）" />
+      </el-form-item>
+      <el-form-item label="PI" prop="pi_name">
+        <el-input v-model="form.pi_name" placeholder="PI（可选）" />
+      </el-form-item>
+      <el-form-item label="CRA 联系人" prop="contact">
+        <el-input v-model="form.contact" placeholder="多个联系人用逗号分隔" />
+      </el-form-item>
+      <el-form-item v-if="site" label="状态" prop="is_active">
+        <el-switch v-model="form.is_active" active-text="启用" inactive-text="停用" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="visibleProxy = false">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="onSubmit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import { createSite, updateSite } from "../../api/sites";
+import type { Site } from "../../types/api";
+
+const props = defineProps<{
+  visible: boolean;
+  studyId: string;
+  site?: Site | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:visible", value: boolean): void;
+  (e: "saved"): void;
+}>();
+
+const visibleProxy = computed({
+  get: () => props.visible,
+  set: (val: boolean) => emit("update:visible", val),
+});
+
+const formRef = ref<FormInstance>();
+const submitting = ref(false);
+const form = reactive({
+  name: "",
+  city: "",
+  pi_name: "",
+  contact: "",
+  is_active: true,
+});
+
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: "请输入中心名称", trigger: "blur" }],
+});
+
+const resetForm = () => {
+  form.name = "";
+  form.city = "";
+  form.pi_name = "";
+  form.contact = "";
+  form.is_active = true;
+};
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      resetForm();
+      if (props.site) {
+        form.name = props.site.name;
+        form.city = props.site.city || "";
+        form.pi_name = props.site.pi_name || "";
+        form.contact = props.site.contact || "";
+        form.is_active = props.site.is_active;
+      }
+    }
+  }
+);
+
+const onSubmit = async () => {
+  if (!formRef.value) return;
+  await formRef.value.validate();
+  submitting.value = true;
+  try {
+    if (props.site) {
+      await updateSite(props.studyId, props.site.id, {
+        name: form.name,
+        city: form.city,
+        pi_name: form.pi_name,
+        contact: form.contact,
+        is_active: form.is_active,
+      });
+      ElMessage.success("中心已更新");
+    } else {
+      await createSite(props.studyId, {
+        name: form.name,
+        city: form.city,
+        pi_name: form.pi_name,
+        contact: form.contact,
+      });
+      ElMessage.success("中心已创建");
+    }
+    emit("saved");
+    visibleProxy.value = false;
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "保存失败");
+  } finally {
+    submitting.value = false;
+  }
+};
+</script>