decorate/src/views/project/edit.vue

<template>
  <a-modal
    v-model:visible="visible"
    :title="`${project.projectId ? '修改' : '新建'}项目`"
    width="660px"
    :after-close="onCancel"
    @ok="saveHandler"
  >
    <template #footer>
      <a-button class="action-bottom" size="middle" @click="visible = false">
        取消
      </a-button>
      <a-button
        class="action-bottom"
        type="primary"
        size="middle"
        @click="saveHandler"
      >
        {{ project.projectId ? '修改' : '添加' }}
      </a-button>
    </template>

    <a-form
      ref="fromRef"
      :model="project"
      class="form"
      label-align="right"
      :label-col="{ span: 4 }"
    >
      <a-form-item
        name="projectName"
        label="项目名称"
        :rules="[rules.projectName]"
      >
        <a-input
          v-model:value="project.projectName"
          :placeholder="rules.projectName.message"
        />
      </a-form-item>
      <a-form-item
        name="projectMsg"
        label="项目描述"
        :rules="[rules.projectMsg]"
      >
        <a-textarea
          v-model:value="project.projectMsg"
          :resize="false"
          style="height: 104px; resize: none"
          :placeholder="rules.projectMsg.message"
        />
      </a-form-item>
      <a-form-item name="projectImg" label="项目封面">
        <Upload
          v-model:file="project.projectImg"
          :max-size="10"
          :extnames="['png', 'jpg', 'gif']"
          :tips="['推荐大小：500 * 500 像素']"
        />
      </a-form-item>
      <a-form-item v-if="!project.projectId" name="projectImg" label="BIM文件">
        <Upload
          v-model:file="project.bimFile"
          :max-size="3 * 1024"
          :extnames="['dwg', 'dxf', 'dwf', 'ifc']"
        />
      </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'

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

defineOptions<{ name: 'insert-project' }>()

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: '请输入名称最多40字'
  },
  projectMsg: {
    required: true,
    max: 40,
    min: 1,
    message: '请输入项目描述最多200字'
  }
}
const fromRef = ref<FormInstance>()
const visible = ref(true)

const saveHandler = async () => {
  await fromRef.value?.validate()
  await props.onSave(toRaw(project.value))
  visible.value = 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>