fuse-code/src/layout/edit/scene-select.vue

<template>
  <Modal 
    width="800px"
    title="添加场景" 
    :visible="visible"
    @ok="okHandler"
    @cancel="visible = false"
    okText="确定"
    cancelText="取消"
    class="model-table"
  >
    <div>
      <div className='model-header'>
        <Search
          className='content-header-search'
          placeholder="输入名称搜索" 
          style="width: 264px"
          @search="val => keyword = val"
        />
      </div>
      <Table 
        :row-key="record => record.modelId"
        :columns="cloumns"
        :rowSelection="rowSelection"
        :data-source="filterScenes"
        :pagination="false"
      />
    </div>
  </Modal>

  <div @click="visible = true">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { Modal, Input, Table } from 'ant-design-vue'
import { computed, nextTick, ref, watch, watchEffect } from 'vue';
import { scenes, save, SceneTypeDesc } from '@/store'
import { createLoadPack } from '@/utils'
import { fuseModels, createFuseModels, addFuseModel, fuseModelsLoaded, initialScenes } from '@/store'

import type { Scene } from '@/api'
import { useViewStack } from '@/hook';

type Key = Scene['modelId']

const Search = Input.Search

const selectIds = computed(() => fuseModels.value.map(item => item.modelId))
const visible = ref(false)
const keyword = ref('')
const filterScenes = computed(
  () => scenes.value
    .filter(item => item.name && item.modelId && item.name.includes(keyword.value))
    .map(scene => ({
      ...scene,
      type: SceneTypeDesc[scene.type]
    }))
)
const selects = ref<Key[]>(selectIds.value)
const rowSelection: any = ref({
  selectedRowKeys: selects,
  onChange: (ids: number[]) => {
    selects.value = Array.from(new Set(ids.concat(selectIds.value)))
  },
  getCheckboxProps: (record: Scene) => ({
    disabled: selectIds.value.includes(record.modelId)
  })
})
const cloumns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '拍摄/创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  }
]

const okHandler = createLoadPack(async () => {
  const addPromises = selects.value
    .filter(modelId => !fuseModels.value.some(model => model.modelId === modelId))
    .map(modelId => createFuseModels({ modelId }))
    .map(addFuseModel)

  await Promise.all(addPromises)

  await new Promise<void>((resolve) => {
    nextTick(() => {
      const stop = watchEffect(() => {
        if (fuseModelsLoaded.value) {
          nextTick(() => stop())
          resolve()
        }
      })
    })
  })
  await save()
  visible.value = false
})

watch(visible, (visible, oldvisible) => {
  if (visible !== oldvisible) {
    keyword.value = ''
    selects.value = selectIds.value
    console.log(selects.value)
  }
})

useViewStack(() => {
  initialScenes()
})
</script>

<style lang="less" scoped>
.model-header {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 24px;
}
</style>

<style lang="less">
.ant-modal-root {
  @import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
  @primary-color: #26559B;
  @menu-item-active-bg: #E6F7FF;
  @table-selected-row-bg: #E6F7FF;
  // .ant-table-tbody > tr.ant-table-row-selected > td {
  //   background: none;
  // }
}
</style>