项目参数配置

src/features/projectParamsManagement/ProjectCourseLineSet.vue

@@ -0,0 +1,159 @@
+<template>
+  <a-modal v-model:open="visible" title="编辑分数线" :width="500">
+    <a-form
+      ref="formRef"
+      :labelCol="{ style: { width: '90px' } }"
+      :model="formData"
+      :rules="rules"
+    >
+      <a-form-item label="项目名称">
+        <a-input v-model:value="formData.projectName" disabled></a-input>
+      </a-form-item>
+      <a-form-item label="科目名称">
+        <a-input
+          :value="formData.courseName + '(' + formData.courseCode + ')'"
+          disabled
+        ></a-input>
+      </a-form-item>
+      <a-form-item label="科目类型">
+        <CourseTypeSelect :value="formData.courseType" disabled />
+      </a-form-item>
+      <a-form-item label="学院" name="college">
+        <a-input v-model:value="formData.college"></a-input>
+      </a-form-item>
+
+      <a-form-item label="起始计算分" name="startScore">
+        <a-input-number
+          v-model:value="formData.startScore"
+          :min="0"
+          :max="1000"
+        />
+      </a-form-item>
+      <a-form-item label="国家单科线" name="nationalScore">
+        <a-input-number
+          v-model:value="formData.nationalScore"
+          :min="0"
+          :max="1000"
+        ></a-input-number>
+      </a-form-item>
+      <a-form-item label="复试科目线" name="retestScore">
+        <a-input-number
+          v-model:value="formData.retestScore"
+          :min="0"
+          :max="1000"
+        ></a-input-number>
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-button type="primary" :disabled="loading" @click="confirm"
+        >确认</a-button
+      >
+      <a-button @click="close">取消</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import useModal from "@/hooks/modal";
+import { nextTick, reactive, ref, watch } from "vue";
+import type { Rule, FormInstance } from "ant-design-vue/es/form";
+import useLoading from "@/hooks/loading";
+import { updateProjectCourse } from "@/api/projectParamsManagementPage";
+import { message } from "ant-design-vue";
+import { objAssign, objModifyAssign } from "@/utils/utils";
+import { ProjectCourse } from "@/types";
+
+/* modal */
+const { visible, open, close } = useModal();
+defineExpose({ open, close });
+
+const props = defineProps<{
+  rowData: ProjectCourse;
+}>();
+const emit = defineEmits(["modified"]);
+
+const defaultFormData = {
+  id: 0,
+  nationalScore: 0,
+  nationalTotalScore: 0,
+  startScore: 0,
+  retestScore: 0,
+  retestTotalScore: 0,
+  totalScoreLine: 0,
+  projectName: "",
+  courseName: "",
+  courseCode: "",
+  college: "",
+  courseType: undefined,
+};
+type FormDataType = typeof defaultFormData;
+
+const formRef = ref<FormInstance>();
+const formData = reactive<FormDataType>({ ...defaultFormData });
+const rules: Record<string, Rule[]> = {
+  college: [
+    {
+      max: 30,
+      message: "最多30个字符",
+    },
+  ],
+  startScore: [
+    {
+      required: true,
+      message: "请输入起始计算分",
+    },
+  ],
+  nationalScore: [
+    {
+      required: true,
+      message: "请输入国家单科线",
+    },
+  ],
+  retestScore: [
+    {
+      required: true,
+      message: "请输入复试科目线",
+    },
+  ],
+};
+
+/* confirm */
+const { loading, setLoading } = useLoading();
+async function confirm() {
+  const valid = await formRef.value?.validate().catch(() => {});
+  if (!valid) return;
+
+  setLoading(true);
+  const datas = objAssign(formData, {});
+  const res = await updateProjectCourse(datas as any).catch(() => false);
+  setLoading(false);
+  if (!res) return;
+  message.success("修改成功！");
+  emit("modified", datas);
+  close();
+}
+
+// init modal
+watch(
+  () => visible.value,
+  (val) => {
+    if (!val) {
+      formRef.value?.clearValidate();
+      return;
+    }
+    nextTick(() => {
+      modalBeforeOpen();
+    });
+  },
+  { immediate: true }
+);
+
+function modalBeforeOpen() {
+  if (props.rowData.id) {
+    objModifyAssign(formData, props.rowData);
+  } else {
+    objModifyAssign(formData, defaultFormData);
+  }
+}
+</script>

src/features/projectParamsManagement/ProjectParamsManagement.vue

@@ -51,68 +51,13 @@
           </template>
           <template v-if="column.dataIndex === 'action'">
             <div class="action-cell">
-              <a-button type="text" @click="showModal(record)">编辑</a-button>
+              <a-button type="text" @click="toEdit(record)">编辑</a-button>
             </div>
           </template>
         </template>
       </a-table>
     </div>
 
-    <a-modal
-      v-model:open="visible"
-      title="单科线设置页"
-      okText="确定"
-      cancelText="取消"
-      @ok="handleOk"
-    >
-      <a-form :labelCol="{ span: 5 }">
-        <a-form-item label="项目名称">
-          <a-input v-model:value="projectObj.projectName" disabled></a-input>
-        </a-form-item>
-        <a-form-item label="科目名称">
-          <a-input
-            disabled
-            :value="projectObj.courseName + '(' + projectObj.courseCode + ')'"
-          ></a-input>
-        </a-form-item>
-        <a-form-item label="科目类型">
-          <CourseTypeSelect :value="projectObj.courseType" disabled />
-        </a-form-item>
-        <a-form-item label="学院">
-          <!-- <a-input v-model:value="projectObj.college"></a-input> -->
-        </a-form-item>
-
-        <a-form-item label="起始计算分">
-          <a-input-number
-            v-model:value="projectObj.startScore"
-            :min="0"
-            :max="1000"
-          />
-        </a-form-item>
-        <a-form-item label="国家单科线" :min="0" :max="1000">
-          <a-input-number
-            v-model:value="projectObj.nationalScore"
-          ></a-input-number>
-        </a-form-item>
-        <a-form-item label="复试科目线">
-          <a-input-number
-            v-model:value="projectObj.retestScore"
-            :min="0"
-            :max="1000"
-          ></a-input-number>
-        </a-form-item>
-        <!-- <a-form-item label="国家总分线">
-          <a-input v-model:value="projectObj.nationalTotalScore"></a-input>
-        </a-form-item>
-        <a-form-item label="复试总分线">
-          <a-input v-model:value="projectObj.retestTotalScore"></a-input>
-        </a-form-item> -->
-        <!-- <a-form-item label="总分满分线">
-          <a-input v-model:value="projectObj.totalScoreLine"></a-input>
-        </a-form-item> -->
-      </a-form>
-    </a-modal>
-
     <ImportScoreLine
       ref="importScoreLineRef"
       :project-id="projectId"
@@ -123,22 +68,24 @@
       :project-id="projectId"
       @modified="search"
     />
+    <ProjectCourseLineSet
+      ref="projectCourseLineSetRef"
+      :row-data="curRow"
+      @modified="search"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  getProjectCourseList,
-  updateProjectCourse,
-} from "@/api/projectParamsManagementPage";
+import { getProjectCourseList } from "@/api/projectParamsManagementPage";
 import { useMainStore } from "@/store";
 import { ProjectCourse } from "@/types";
 import { goBack } from "@/utils/utils";
-import { message } from "ant-design-vue";
-import { watch, onMounted, ref, reactive, toRaw } from "vue";
+import { watch, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import ImportScoreLine from "./ImportScoreLine.vue";
 import ImportCollege from "./ImportCollege.vue";
+import ProjectCourseLineSet from "./ProjectCourseLineSet.vue";
 
 const store = useMainStore();
 store.currentLocation = "项目列表 / 参数配置";
@@ -210,35 +157,13 @@ onMounted(async () => {
   await search();
 });
 
-const visible = ref<boolean>(false);
-
-const showModal = (record: ProjectCourse) => {
-  Object.assign(projectObj, record);
-  visible.value = true;
+const curRow = ref();
+const projectCourseLineSetRef = ref();
+const toEdit = (record: ProjectCourse) => {
+  curRow.value = record;
+  projectCourseLineSetRef.value?.open();
 };
 
-const handleOk = async () => {
-  await updateProjectCourse(toRaw(projectObj));
-  visible.value = false;
-  await search();
-  void message.success({ content: "操作成功" });
-};
-
-const initProject = <ProjectCourse>(<unknown>{
-  id: 0,
-  nationalScore: 0,
-  nationalTotalScore: 0,
-  startScore: 0,
-  retestScore: 0,
-  retestTotalScore: 0,
-  totalScoreLine: 0,
-  projectName: "",
-  courseName: "",
-  courseCode: "",
-  courseType: undefined,
-});
-const projectObj = reactive({ ...initProject });
-
 /** <handleImport> */
 const importScoreLineRef = ref();
 function toImportScoreLine() {

src/types/index.ts

@@ -68,6 +68,7 @@ export interface ProjectCourse {
   retestScore: number;
   retestTotalScore: number;
   totalScoreLine: number;
+  college: string;
 }
 
 // 科目成绩（总分）频率分布-科目成绩占初试总分权重