Compare commits

...

2 Commits

Author SHA1 Message Date
lhj
b3ca5e2a25 fix:更新.gitignore文件 2024-11-06 00:46:00 +08:00
lhj
bc31e312fb fix:更新拖拽数据源 2024-11-06 00:44:08 +08:00
3 changed files with 54 additions and 45 deletions

3
.gitignore vendored
View File

@ -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

View File

@ -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;

View File

@ -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}
}) })