ocr-web/src/views/home/content/modal/PackageSettingsModal.vue

<script lang="ts" setup>
import type { FormInst, FormRules } from 'naive-ui';
import { useMessage } from 'naive-ui';
import { ref } from 'vue';

const emit = defineEmits<{
  (e: 'commit', value: any)
}>()

const show = ref(false)

const cardStyle = {
  'width': '600px',
  '--n-padding-bottom': '10px',
  '--n-padding-left': '10px',
}

function showModal() {
  show.value = true
}

function closeModal() {
  show.value = false
}

defineExpose({
  showModal,
})

const message = useMessage()
const formRef = ref<FormInst | null>(null)

const rules: FormRules = {
  packagename: [
    {
      required: true,
      trigger: ['blur'],
      message: '请输入任务包名称',
    },
  ],
}

const model = ref({
  packagename: '',
  // comparehistory: false,
  mark: false,
})

function handleSumbit(e: MouseEvent) {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      emit('commit', model.value)
      closeModal()
    }
    else {
      message.error('请输入任务包名称')
    }
  })
}

const formItemStyle = {
  '--n-label-height': '0px',
  '--n-feedback-height': '8px',
}

function afterLeave() {
  model.value.packagename = ''
  model.value.mark = false
}
</script>

<template>
  <n-modal v-model:show="show" transform-origin="center" @after-leave="afterLeave">
    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <div class="wrapper">
        <span class="wrapper-title">生成任务包设置</span>
        <div class="wrapper-bar">
          <div class="wrapper-info">
            <span :style="{ 'margin-left': '18px' }">基本信息</span>
          </div>
        </div>
        <n-form ref="formRef" :model="model" require-mark-placement="left" style="margin-top: 8px;" :rules="rules">
          <n-form-item class="wrapper-task-package-name" path="packagename" label="任务包名称">
            <n-input v-model:value="model.packagename" maxlength="12" @keydown.enter.prevent />
          </n-form-item>
          <!-- <n-form-item path="mark" :style="formItemStyle">
            <n-checkbox v-model:checked="model.mark" >
              是否给重复图片增加重复标识
            </n-checkbox>
          </n-form-item> -->
        </n-form>
      </div>
      <template #footer>
        <div class="wrapper-footer">
          <n-button style="background-color: #507AFD !important;" type="info" @click="handleSumbit">
            生成任务包
          </n-button>
          <n-button secondary style="margin-left:15px;color: #333;background-color: #fff;border: 1px solid #CAD2DD;" @click="closeModal">
            取消
          </n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;

  &-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
  }

  &-bar {
    background-color: #f8f8f8;
    width: 100%;
    margin-top: 20px;
    span {
      color: #333;
    }
  }

  &-form {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  &-task-package-name {
    ::v-deep(.n-form-item-label) {
      color: #666;
    }
  }

  &-new {
    display: flex;
    width: 110px;
    color: #507afd;
    line-height: 22px;
    cursor: pointer;

    &:hover {
      color: #507aac;
    }
  }

  &-table {
    margin-top: 20px;
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
  }

  &-info {
    font-weight: bold;
    position: relative;

    &:before {
      background-color: #1980FF;
      content: "";
      width: 5px;
      border-radius: 2px;
      top: 0;
      bottom: 0;
      position: absolute;
    }
  }
}
</style>