client-admin/src/render/views/ResultExport/ModifyMarkSite.vue

<template>
  <a-modal
    v-model:open="visible"
    :width="450"
    style="top: 10vh"
    :confirm-loading="loading"
    @ok="confirm"
  >
    <template #title> {{ title }} </template>

    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ style: { width: '160px' } }"
    >
      <a-form-item name="subjectCode" label="科目代码">
        <select-course
          v-model:value="formData.subjectCode"
          :exam-id="userStore.curExam.id"
          :disabled="isEdit"
        ></select-course>
      </a-form-item>
      <a-form-item name="paperType" label="条码值">
        <a-input
          v-model:value="formData.paperType"
          placeholder="请输入"
          :disabled="isEdit"
        ></a-input>
      </a-form-item>
      <a-form-item name="oddNumber" label="奇数考场评卷点代码">
        <a-input
          v-model:value="formData.oddNumber"
          :maxlength="6"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item name="evenNumber" label="偶数考场评卷点代码">
        <a-input
          v-model:value="formData.evenNumber"
          :maxlength="6"
          placeholder="请输入"
        />
      </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 { markSiteSave } from "@/ap/resultExport";

import useLoading from "@/hooks/useLoading";
import useModal from "@/hooks/useModal";
import { objAssign, objModifyAssign } from "@/utils/tool";
import { MarkSiteListItem, MarkSiteSaveParams } from "@/ap/types/resultExport";
import { useUserStore } from "@/store";

defineOptions({
  name: "ModifyMarkSite",
});

/* modal */
const { visible, open, close } = useModal();
defineExpose({ open, close });

const props = defineProps<{
  rowData: MarkSiteListItem;
}>();
const emit = defineEmits(["modified"]);

const userStore = useUserStore();

const defaultFormData = {
  id: undefined,
  examId: userStore.curExam.id as number,
  subjectCode: "",
  paperType: "",
  oddNumber: "",
  evenNumber: "",
};

const isEdit = computed(() => !!props.rowData.id);
const title = computed(() => `${isEdit.value ? "编辑" : "新增"}评卷点信息`);

const formRef = ref();
const formData: UnwrapRef<MarkSiteSaveParams> = reactive({
  ...defaultFormData,
});
const rules: FormRules<keyof MarkSiteSaveParams> = {
  subjectCode: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  paperType: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
    {
      max: 30,
      message: "不能超过30字符",
      trigger: "change",
    },
  ],
  oddNumber: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
    {
      pattern: /^[0-9]{1,6}$/,
      message: "只能输入最多6个数字",
      trigger: "change",
    },
  ],
  evenNumber: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
    {
      pattern: /^[0-9]{1,6}$/,
      message: "只能输入最多6个数字",
      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 markSiteSave(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>