|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
- <Modal
|
|
|
+ <Modal
|
|
|
width="800px"
|
|
|
- title="添加场景"
|
|
|
+ title="添加场景"
|
|
|
:visible="visible"
|
|
|
@ok="okHandler"
|
|
|
@cancel="visible = false"
|
|
@@ -10,30 +10,32 @@
|
|
|
class="model-table"
|
|
|
>
|
|
|
<div>
|
|
|
- <div className='model-header'>
|
|
|
- <p class="header-desc">已选择数据<span>( {{ rowSelection.selectedRowKeys.length }} )</span></p>
|
|
|
+ <div className="model-header">
|
|
|
+ <p class="header-desc">
|
|
|
+ 已选择数据<span>( {{ rowSelection.selectedRowKeys.length }} )</span>
|
|
|
+ </p>
|
|
|
<Search
|
|
|
- className='content-header-search'
|
|
|
- placeholder="输入名称搜索"
|
|
|
+ className="content-header-search"
|
|
|
+ placeholder="输入名称搜索"
|
|
|
v-model:value="keyword"
|
|
|
allow-clear
|
|
|
style="width: 264px"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="table-layout" v-if="filterScenes.length">
|
|
|
- <Table
|
|
|
- :row-key="record => record.modelId"
|
|
|
+ <Table
|
|
|
+ :row-key="(record) => record.modelId"
|
|
|
:columns="cloumns"
|
|
|
:rowSelection="rowSelection"
|
|
|
:data-source="filterScenes"
|
|
|
:pagination="false"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div style="padding: 1px;" v-else>
|
|
|
- <Empty
|
|
|
- :description="keyword.length ? '暂无搜索结果': '暂无结果'"
|
|
|
+ <div style="padding: 1px" v-else>
|
|
|
+ <Empty
|
|
|
+ :description="keyword.length ? '暂无搜索结果' : '暂无结果'"
|
|
|
:image="Empty.PRESENTED_IMAGE_SIMPLE"
|
|
|
- className="ant-empty ant-empty-normal"
|
|
|
+ className="ant-empty ant-empty-normal"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -45,91 +47,103 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { Modal, Input, Table, Empty } 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 { Modal, Input, Table, Empty } from "ant-design-vue";
|
|
|
+import { computed, nextTick, ref, watch, watchEffect } from "vue";
|
|
|
+import { scenes, save, SceneTypeDesc } from "@/store";
|
|
|
+import { asyncTimeout, createLoadPack } from "@/utils";
|
|
|
+import {
|
|
|
+ fuseModels,
|
|
|
+ createFuseModels,
|
|
|
+ addFuseModel,
|
|
|
+ fuseModelsLoaded,
|
|
|
+ initialScenes,
|
|
|
+} from "@/store";
|
|
|
|
|
|
-import type { Scene } from '@/api'
|
|
|
+import type { Scene } from "@/api";
|
|
|
+import { getSceneModel } from "@/sdk";
|
|
|
|
|
|
-type Key = Scene['modelId']
|
|
|
+type Key = Scene["modelId"];
|
|
|
|
|
|
-const Search = Input.Search
|
|
|
+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 => ({
|
|
|
+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,
|
|
|
createTime: scene.createTime.substr(0, 16),
|
|
|
- type: SceneTypeDesc[scene.type]
|
|
|
+ type: SceneTypeDesc[scene.type],
|
|
|
}))
|
|
|
-)
|
|
|
-const selects = ref<Key[]>(selectIds.value)
|
|
|
+);
|
|
|
+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)))
|
|
|
+ selects.value = Array.from(new Set(ids.concat(selectIds.value)));
|
|
|
},
|
|
|
getCheckboxProps: (record: Scene) => ({
|
|
|
- disabled: selectIds.value.includes(record.modelId)
|
|
|
- })
|
|
|
-})
|
|
|
+ disabled: selectIds.value.includes(record.modelId),
|
|
|
+ }),
|
|
|
+});
|
|
|
const cloumns = [
|
|
|
{
|
|
|
width: "400px",
|
|
|
- title: '名称',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name',
|
|
|
+ title: "名称",
|
|
|
+ dataIndex: "name",
|
|
|
+ key: "name",
|
|
|
},
|
|
|
{
|
|
|
- title: '类型',
|
|
|
- dataIndex: 'type',
|
|
|
- key: 'type',
|
|
|
+ title: "类型",
|
|
|
+ dataIndex: "type",
|
|
|
+ key: "type",
|
|
|
},
|
|
|
{
|
|
|
- title: '拍摄/创建时间',
|
|
|
- dataIndex: 'createTime',
|
|
|
- key: 'createTime',
|
|
|
- }
|
|
|
-]
|
|
|
+ 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)
|
|
|
+ const models = selects.value
|
|
|
+ .filter((modelId) => !fuseModels.value.some((model) => model.modelId === modelId))
|
|
|
+ .map((modelId) => createFuseModels({ modelId }));
|
|
|
+ const addPromises = models.map(addFuseModel);
|
|
|
|
|
|
- await Promise.all(addPromises)
|
|
|
+ await Promise.all(addPromises);
|
|
|
await new Promise<void>((resolve) => {
|
|
|
nextTick(() => {
|
|
|
const stop = watchEffect(() => {
|
|
|
if (fuseModelsLoaded.value) {
|
|
|
nextTick(() => {
|
|
|
- stop()
|
|
|
- resolve()
|
|
|
- })
|
|
|
+ stop();
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
}
|
|
|
-
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- await save()
|
|
|
- visible.value = false
|
|
|
-})
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ models.forEach((model) => {
|
|
|
+ if (getSceneModel(model)) {
|
|
|
+ model.rotation = getSceneModel(model)!.getDefaultRotation();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ await asyncTimeout(100);
|
|
|
+ await save();
|
|
|
+ visible.value = false;
|
|
|
+});
|
|
|
|
|
|
watch(visible, (visible, oldvisible) => {
|
|
|
if (visible !== oldvisible) {
|
|
|
- keyword.value = ''
|
|
|
- selects.value = selectIds.value
|
|
|
+ keyword.value = "";
|
|
|
+ selects.value = selectIds.value;
|
|
|
|
|
|
- visible && initialScenes()
|
|
|
+ visible && initialScenes();
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
@@ -153,4 +167,4 @@ watch(visible, (visible, oldvisible) => {
|
|
|
.ant-modal-root .ant-table-tbody > tr > td {
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|