client-admin/src/render/views/ExamNumberCheck/EditExamNumberDialog.vue

<template>
  <a-modal
    v-model:open="visible"
    :width="380"
    style="bottom: 0"
    :footer="false"
    :mask="false"
    :maskClosable="false"
    :keyboard="false"
    centered
    wrapClassName="edit-exam-number-dialog"
    title="输入准考证号"
  >
    <a-form ref="formRef" :label-col="{ style: { width: '80px' } }">
      <a-form-item label="准考证号">
        <div class="exam-number" style="margin-bottom: 10px">
          <a-input
            v-model:value="examNumber"
            placeholder="请输入"
            allow-clear
          ></a-input>
        </div>
        <a-button style="margin-right: 10px" @click="close">取消</a-button>
        <a-button type="primary" @click="confirm">保存</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { message } from "ant-design-vue";
import { getTextAreaRows } from "@/utils";
import useModal from "@/hooks/useModal";

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

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

const props = defineProps<{
  data: string;
}>();

const emit = defineEmits(["confirm"]);

const examNumber = ref("");

async function confirm() {
  if (!examNumber.value) {
    message.warning("请输入考号");
    return;
  }
  emit("confirm", examNumber.value);
  close();
}

watch(
  () => visible.value,
  (val) => {
    if (val) {
      examNumber.value = props.data || "";
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.exam-number {
  position: relative;

  .ant-input {
    padding-bottom: 30px;
    width: 100%;
  }

  .number-suffix {
    position: absolute;
    color: @text-color3;
    height: 22px;
    line-height: 22px;
    bottom: 5px;
    right: 5px;
    z-index: 8;
  }
}
</style>