decorate/src/views/scene/insert.vue

<template>
  <a-modal
    v-model:visible="visible"
    :title="`${currentType === Type.bim ? '创建' : '选择'}场景`"
    :width="`${currentType === Type.bim ? 480 : 660}px`"
    :after-close="onCancel"
    @ok="saveHandler"
  >
    <template #footer>
      <div class="footer">
        <p>
          <template v-if="currentType === Type.scene">
            已选择
            {{ Object.values(typeNums).reduce((t, c) => t + c.length, 0) }}
            个场景
          </template>
        </p>
        <div>
          <a-button
            class="action-bottom"
            size="middle"
            @click="visible = false"
          >
            取消
          </a-button>
          <a-button
            class="action-bottom"
            type="primary"
            size="middle"
            @click="saveHandler"
          >
            保存
          </a-button>
        </div>
      </div>
    </template>

    <a-form name="basic" label-align="left" autocomplete="off">
      <a-form-item label="场景类型" required>
        <a-radio-group v-model:value="currentType" name="radioGroup">
          <a-radio :value="Type.bim">{{ Type.bim }}</a-radio>
          <a-radio :value="Type.scene">{{ Type.scene }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <UploadBim v-if="currentType === Type.bim" v-model:data="bim" />
    </a-form>
    <SelectScenes
      v-if="currentType === Type.scene"
      v-model:type-nums="typeNums"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRaw } from 'vue'
import { message } from 'ant-design-vue'
import { SceneType } from '@/store'
import SelectScenes from './select-scenes.vue'
import UploadBim from './upload-bim.vue'

import type { UploadData } from './upload-bim.vue'
import type { Project, BimUploadData, SelectTypeScenes } from '@/store'

export type SaveData =
  | {
      type: 'bim'
      payload: BimUploadData
    }
  | {
      type: 'scene'
      payload: SelectTypeScenes
    }

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

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

enum Type {
  scene = '场景',
  bim = 'bim'
}
const currentType = ref(Type.bim)

const bim = ref<UploadData>({ name: '', file: undefined })
const typeNums = ref(
  props.project.sceneList.reduce(
    (t, scene) => {
      t[scene.type].push(scene.num)
      return t
    },
    {
      [SceneType.SWKJ]: [],
      [SceneType.SWKK]: [],
      [SceneType.SWSS]: []
    } as SelectTypeScenes
  )
)

const visible = ref(true)

const saveHandler = async () => {
  let data: SaveData
  if (currentType.value === Type.bim) {
    if (!bim.value.name) {
      return message.error('请输入场景名称')
    } else if (!bim.value.file) {
      return message.error('请上传BIM文件')
    }
    data = { payload: toRaw(bim.value) as BimUploadData, type: 'bim' }
  } else {
    data = { payload: toRaw(typeNums.value), type: 'scene' }
  }

  await props.onSave(data)
  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>