feat: 设置扫描点代码

src/render/views/ResultExport/DbfExport.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="m-b-16px">
-    <qm-button type="primary" :icon="h(SettingOutlined)"
+    <qm-button type="primary" :icon="h(SettingOutlined)" @click="onSetSiteCode"
       >设置扫描点代码</qm-button
     >
-    <a-tag v-if="scanSiteCode" class="m-l-12px" color="blue"
-      >扫描点代码：{{ scanSiteCode }}</a-tag
+    <a-tag v-if="siteCodeData.scanSite" class="m-l-12px" color="blue"
+      >扫描点代码：{{ siteCodeData.scanSite }}</a-tag
     >
   </div>
   <a-table
@@ -26,6 +26,13 @@
       </template>
     </template>
   </a-table>
+
+  <!-- ModifySiteCode -->
+  <ModifySiteCode
+    ref="modifySiteCodeRef"
+    :row-data="siteCodeData"
+    @modified="siteCodeModified"
+  />
 </template>
 
 <script setup lang="ts">
@@ -36,6 +43,9 @@ import { SubjectItem } from "@/ap/types/base";
 
 import { subjectList } from "@/ap/base";
 import { markSiteCodeInfo } from "@/ap/resultExport";
+import { markSiteSetParams } from "@/ap/types/resultExport";
+
+import ModifySiteCode from "./ModifySiteCode.vue";
 
 defineOptions({
   name: "DbfExport",
@@ -60,10 +70,18 @@ const columns: TableProps["columns"] = [
   },
 ];
 
-const scanSiteCode = ref("");
+const siteCodeData = ref({} as markSiteSetParams);
 async function getScanSiteCode() {
   const res = await markSiteCodeInfo({ examId: "" });
-  scanSiteCode.value = res.scanSite;
+  siteCodeData.value = { scanSite: res.scanSite, examId: "" };
+}
+
+const modifySiteCodeRef = ref();
+function onSetSiteCode() {
+  modifySiteCodeRef.value?.open();
+}
+function siteCodeModified(data: markSiteSetParams) {
+  siteCodeData.value = data;
 }
 
 async function getData() {

src/render/views/ResultExport/ModifyMarkSite.vue

@@ -104,7 +104,7 @@ const rules: FormRules<keyof MarkSiteSaveParams> = {
     },
     {
       max: 30,
-      message: "不能超过30",
+      message: "不能超过30字符",
       trigger: "change",
     },
   ],

src/render/views/ResultExport/ModifySiteCode.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :width="450"
+    style="top: 10vh"
+    :confirm-loading="loading"
+    @ok="confirm"
+  >
+    <template #title> 设置扫描点代码 </template>
+
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ style: { width: '110px' } }"
+    >
+      <a-form-item name="scanSite" label="扫描点代码">
+        <a-input
+          v-model:value="formData.scanSite"
+          placeholder="请输入"
+        ></a-input>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import type { UnwrapRef } from "vue";
+import { message } from "ant-design-vue";
+import { markSiteCodeSet } from "@/ap/resultExport";
+
+import useLoading from "@/hooks/useLoading";
+import useModal from "@/hooks/useModal";
+import { objAssign, objModifyAssign } from "@/utils/tool";
+import { markSiteSetParams } from "@/ap/types/resultExport";
+
+defineOptions({
+  name: "ModifyMarkSite",
+});
+
+/* modal */
+const { visible, open, close } = useModal();
+defineExpose({ open, close });
+
+const defaultFormData = {
+  examId: "",
+  scanSite: "",
+};
+
+const props = defineProps<{
+  rowData: markSiteSetParams;
+}>();
+const emit = defineEmits(["modified"]);
+
+const formRef = ref();
+const formData: UnwrapRef<markSiteSetParams> = reactive({
+  ...defaultFormData,
+});
+const rules: FormRules<keyof markSiteSetParams> = {
+  scanSite: [
+    {
+      required: true,
+      message: "请输入",
+      trigger: "change",
+    },
+    {
+      max: 30,
+      message: "不能超过30字符",
+      trigger: "change",
+    },
+  ],
+};
+
+/* confirm */
+const { loading, setLoading } = useLoading();
+async function confirm() {
+  const valid = await formRef.value?.validate().catch(() => false);
+  if (!valid) return;
+
+  setLoading(true);
+  const datas = objAssign(formData, {});
+  const res = await markSiteCodeSet(datas).catch(() => false);
+  setLoading(false);
+  if (!res) return;
+  message.success("保存成功！");
+  emit("modified", datas);
+  close();
+}
+
+watch(
+  () => visible.value,
+  (val) => {
+    if (val) {
+      modalOpenHandle();
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+/* init modal */
+function modalOpenHandle() {
+  if (props.rowData.id) {
+    objModifyAssign(formData, props.rowData);
+  } else {
+    objModifyAssign(formData, defaultFormData);
+  }
+}
+</script>