Compare commits
2 Commits
7db26561d0
...
b3ca5e2a25
| Author | SHA1 | Date | |
|---|---|---|---|
| b3ca5e2a25 | |||
| bc31e312fb |
3
.gitignore
vendored
3
.gitignore
vendored
@ -11,7 +11,8 @@ node_modules
|
|||||||
dist
|
dist
|
||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
|
*.cjs
|
||||||
|
./src/type/*.js
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
|
|||||||
@ -19,14 +19,14 @@
|
|||||||
@start="onStart"
|
@start="onStart"
|
||||||
@end="onEnd"
|
@end="onEnd"
|
||||||
>
|
>
|
||||||
<div v-for="item in store.component" :key="item.id" class="tem_btn">
|
<div v-for="item in store.components" :key="item.id" class="tem_btn">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
</VueDraggable>
|
</VueDraggable>
|
||||||
</div>
|
</div>
|
||||||
<div ref="targetContent" class="center">
|
<div ref="targetContent" class="center">
|
||||||
<VueDraggable
|
<VueDraggable
|
||||||
v-model="store.preview"
|
v-model="store.previewScheme"
|
||||||
:group="{name: 'designer', pull: 'clone', put: false}"
|
:group="{name: 'designer', pull: 'clone', put: false}"
|
||||||
ghost-class="ghost"
|
ghost-class="ghost"
|
||||||
class="canvas"
|
class="canvas"
|
||||||
@ -49,13 +49,11 @@
|
|||||||
import {VueDraggable} from "vue-draggable-plus";
|
import {VueDraggable} from "vue-draggable-plus";
|
||||||
import {onMounted, ref, watch} from 'vue';
|
import {onMounted, ref, watch} from 'vue';
|
||||||
import {uuid} from 'lsp-uuid';
|
import {uuid} from 'lsp-uuid';
|
||||||
import {IPageComponent} from '@/type/IPageComponent.ts';
|
|
||||||
import {componentScheme} from '@/schemes/scheme';
|
import {componentScheme} from '@/schemes/scheme';
|
||||||
import {useSchemeStore} from '@/stores/useSchemeStore';
|
import {useSchemeStore} from '@/stores/useSchemeStore';
|
||||||
import {IComponent} from "@/type/IComponent";
|
import {IComponent} from "@/type/IComponent";
|
||||||
|
|
||||||
const componentsList = ref<any[]>([]);
|
let componentsList = [];
|
||||||
const list = ref<IPageComponent[]>([]);
|
|
||||||
const store = useSchemeStore();
|
const store = useSchemeStore();
|
||||||
|
|
||||||
watch(store, (n, e) => {
|
watch(store, (n, e) => {
|
||||||
@ -90,7 +88,7 @@ store.$onAction(
|
|||||||
onError, // action 抛出或拒绝的钩子
|
onError, // action 抛出或拒绝的钩子
|
||||||
}) => {
|
}) => {
|
||||||
after((result) => {
|
after((result) => {
|
||||||
scheme.value = result
|
console.log(result);
|
||||||
})
|
})
|
||||||
// 如果 action 抛出或返回一个拒绝的 promise,这将触发
|
// 如果 action 抛出或返回一个拒绝的 promise,这将触发
|
||||||
onError((error) => {
|
onError((error) => {
|
||||||
@ -102,15 +100,15 @@ store.$onAction(
|
|||||||
)
|
)
|
||||||
//初始化scheme
|
//初始化scheme
|
||||||
const initScheme = () => {
|
const initScheme = () => {
|
||||||
store.initScheme([baseScheme])
|
store.initPreviewScheme([baseScheme])
|
||||||
|
componentsList = Object.values(componentScheme);
|
||||||
|
store.initComponents(componentsList);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
componentsList.value = Object.values(componentScheme);
|
|
||||||
initScheme();
|
initScheme();
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
list.value.push(baseScheme)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const clone = function (element: IComponent) {
|
const clone = function (element: IComponent) {
|
||||||
@ -133,9 +131,9 @@ const clone = function (element: IComponent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onEnd = (obj: any) => {
|
const onEnd = (obj: any) => {
|
||||||
const {oldDraggableIndex} = obj;
|
// const {oldDraggableIndex} = obj;
|
||||||
store.previewData(store.component[oldDraggableIndex]);
|
// store.previewData(store.component[oldDraggableIndex]);
|
||||||
store.nowComponentsData(store.component[oldDraggableIndex]);
|
// store.nowComponentsData(store.component[oldDraggableIndex]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onStart = function () {
|
const onStart = function () {
|
||||||
@ -176,6 +174,7 @@ const view = () => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-top: 1px solid #dddddd;
|
border-top: 1px solid #dddddd;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { defineStore } from 'pinia'
|
import {defineStore} from 'pinia'
|
||||||
import { IPageComponent } from '../type/IPageComponent';
|
import {IPageComponent} from '../type/IPageComponent';
|
||||||
import { ref } from 'vue';
|
import {ref} from 'vue';
|
||||||
|
|
||||||
function findObjectById(obj, targetId) {
|
function findObjectById(obj, targetId) {
|
||||||
if (Array.isArray(obj)) {
|
if (Array.isArray(obj)) {
|
||||||
@ -21,20 +21,29 @@ function findObjectById(obj, targetId) {
|
|||||||
}
|
}
|
||||||
return null; // 如果没有找到,则返回null
|
return null; // 如果没有找到,则返回null
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useSchemeStore = defineStore('scheme', () => {
|
export const useSchemeStore = defineStore('scheme', () => {
|
||||||
// const componnets = ref<IPageComponent[]>()
|
const components = ref<IPageComponent[]>()
|
||||||
const previewData = ref<IPageComponent[]>()
|
const previewScheme = ref<IPageComponent[]>()
|
||||||
const nowComponentsData = ref<IPageComponent>()
|
const nowComponentsData = ref<IPageComponent>()
|
||||||
|
|
||||||
function initScheme(value) {
|
function initPreviewScheme(value) {
|
||||||
previewData.value = value
|
previewScheme.value = value
|
||||||
|
nowComponentsData.value=value[0]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function initComponents(value:IPageComponent[]) {
|
||||||
|
components.value = value
|
||||||
|
}
|
||||||
|
|
||||||
function getSchemeObj(id) {
|
function getSchemeObj(id) {
|
||||||
return findObjectById(previewData.value, id)
|
return findObjectById(previewScheme.value, id)
|
||||||
}
|
}
|
||||||
function updateScheme()
|
|
||||||
{
|
function updateScheme() {
|
||||||
|
|
||||||
}
|
}
|
||||||
return { previewData,nowComponentsData, initScheme, getSchemeObj,updateScheme }
|
|
||||||
|
return {previewScheme, components, nowComponentsData, initComponents, initPreviewScheme, getSchemeObj, updateScheme}
|
||||||
})
|
})
|
||||||
Reference in New Issue
Block a user