decorate/src/views/project/edit.vue

<template>
  <a-modal
    v-model:visible="visible"
    :title="`${project.projectId ? $t('sys.update') : $t('sys.add')} ${$t(
      'project.name'
    )}`"
    width="660px"
    :after-close="onCancel"
    @ok="saveHandler"
  >
    <template #footer>
      <a-button class="action-bottom" size="middle" @click="visible = false">
        {{ $t('sys.cancel') }}
      </a-button>
      <a-button
        class="action-bottom"
        type="primary"
        size="middle"
        @click="saveHandler"
      >
        {{ project.projectId ? $t('sys.update') : $t('sys.add') }}
      </a-button>
    </template>

    <a-form
      ref="fromRef"
      :model="project"
      class="form"
      label-align="right"
      :label-col="{ span: 4 }"
    >
      <a-form-item
        name="projectName"
        :label="$t('project.projectNameLabel')"
        :rules="[rules.projectName]"
      >
        <a-input
          v-model:value.trim="project.projectName"
          :maxlength="rules.projectName.max"
          :placeholder="rules.projectName.message"
        />
      </a-form-item>
      <a-form-item
        name="projectMsg"
        :label="$t('project.projectMsgLabel')"
        :rules="[rules.projectMsg]"
      >
        <a-textarea
          v-model:value.trim="project.projectMsg"
          :maxlength="rules.projectMsg.max"
          :resize="false"
          style="height: 104px; resize: none"
          :placeholder="rules.projectMsg.message"
        />
      </a-form-item>
      <a-form-item name="projectImg" :label="$t('project.projectImgLabel')">
        <Upload
          v-model:file="project.projectImg"
          :max-size="10"
          :extnames="['png', 'jpg', 'gif']"
          :tips="[$t('project.projectImgTip')]"
        />
      </a-form-item>
      <a-form-item
        v-if="!project.projectId"
        name="projectImg"
        :label="$t('project.projectBimLabel')"
      >
        <Upload
          v-model:file="project.bimFile"
          :max-size="5 * 1024"
          :extnames="['ifc', 'fbx']"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRaw } from 'vue'
import Upload from '@/components/upload/index.vue'

import type { InsertProjectData, Project } from '@/api'
import type { FormInstance } from 'ant-design-vue'
import { ui18n } from '@/lang'

export type IProject = Omit<InsertProjectData, 'projectImg'> & {
  projectId?: Project['projectId']
  bimFile?: File
  projectImg?: string | File
}

defineOptions({ name: 'InsertProject' })

const props = defineProps<{
  project?: IProject
  onSave: (data: IProject) => void
  onCancel: () => void
}>()

const project = ref<IProject>(
  props.project
    ? { ...props.project }
    : {
        projectName: '',
        projectMsg: '',
        bimFile: undefined,
        projectImg: undefined
      }
)
const rules = {
  projectName: {
    required: true,
    max: 40,
    min: 1,
    message: ui18n.t('project.projectNameRule', { max: 40 })
  },
  projectMsg: {
    required: true,
    max: 200,
    min: 1,
    message: ui18n.t('project.projectMsgRule', { max: 200 })
  }
}
const fromRef = ref<FormInstance>()
const visible = ref(true)

let enter = false
const saveHandler = async () => {
  if (enter) return
  enter = true
  try {
    await fromRef.value?.validate()
    await props.onSave(toRaw(project.value))
    visible.value = false
  } catch (e) {
    throw e
  } finally {
    enter = false
  }
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    margin-bottom: 0;
    color: #646566;
    font-size: 14px;
  }
}
</style>