Commit b9bbfb22 authored by 郭志伟's avatar 郭志伟

feat(back-top): 添加tag

parent cc6b34d4
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator'; import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import DynamicForm from '@editor/component/DynamicForm/index.vue'; import DynamicForm from '@editor/component/DynamicForm/index.vue';
import DynamicPageForm from '@editor/component/DynamicPageForm/index.vue'; import DynamicPageForm from '@editor/component/DynamicPageForm/index.vue';
// import EventBus from '@service/eventBus.service'; // import EventBus from '@service/eventBus.service';
...@@ -6,6 +7,8 @@ import DynamicPageForm from '@editor/component/DynamicPageForm/index.vue'; ...@@ -6,6 +7,8 @@ import DynamicPageForm from '@editor/component/DynamicPageForm/index.vue';
@Component({ components: { DynamicPageForm, DynamicForm }, name: 'RecordModal' }) @Component({ components: { DynamicPageForm, DynamicForm }, name: 'RecordModal' })
export default class DynamicFormTabs extends Vue { export default class DynamicFormTabs extends Vue {
@Getter('curRightTabName') curRightTabName!: string | null;
@Emit('modProps') @Emit('modProps')
modProps(props, ele, type) { modProps(props, ele, type) {
// return props, ele, type; // return props, ele, type;
......
<template> <template>
<Tabs class="dynamic-form-tabs"> <Tabs class="dynamic-form-tabs" :value="curRightTabName">
<TabPane label="组件设置"> <TabPane name="组件设置" label="组件设置">
<dynamic-form @modProps="modProps" @resizedChildEvent="resizedChildEvent"></dynamic-form> <dynamic-form @modProps="modProps" @resizedChildEvent="resizedChildEvent"></dynamic-form>
</TabPane> </TabPane>
<!-- <TabPane label="事件">事件</TabPane> --> <!-- <TabPane label="事件">事件</TabPane> -->
<TabPane label="页面设置"> <TabPane name="页面设置" label="页面设置">
<dynamic-page-form @modProps="modProps" @resizedChildEvent="resizedChildEvent"></dynamic-page-form> <dynamic-page-form @modProps="modProps" @resizedChildEvent="resizedChildEvent"></dynamic-page-form>
</TabPane> </TabPane>
</Tabs> </Tabs>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="dynamic-form"> <div class="dynamic-form">
<h2>{{title}}</h2> <h2>{{title}}</h2>
<Form class="dynamic-form-component" :label-width="80" :model="propsForm" @submit.native.prevent> <Form class="dynamic-form-component" :label-width="80" :model="propsForm" @submit.native.prevent>
<h3>基础属性</h3> <h3>基础属性</h3>
<h4>标题栏</h4> <h4>标题栏</h4>
<template v-for="(item, index) in titleSchema"> <template v-for="(item, index) in titleSchema">
<FormItem class="Df-component-formitem" :label="item.name" :key="'titleSchema_' + index"> <FormItem class="Df-component-formitem" :label="item.name" :key="'titleSchema_' + index">
......
...@@ -69,6 +69,11 @@ export default class OperationPanel extends Mixins(TransformStyleMixin) { ...@@ -69,6 +69,11 @@ export default class OperationPanel extends Mixins(TransformStyleMixin) {
// //
} }
@Emit('handlePageSetClick')
handlePageSetClick() {
//
}
@Emit('show') @Emit('show')
show(event, containerIndex, childIndex) { show(event, containerIndex, childIndex) {
// //
......
<template> <template>
<div class="Dcm-container-panel_container"> <div class="Dcm-container-panel_container">
<title-preview /> <title-preview @click.native.stop="handlePageSetClick" />
<div :class="[{'Dcm-container-panel_in': isDragIn, 'Dcm-container-panel_draging': isDraging}, 'Dcm-container-panel']" @dragover.prevent @dragenter="dragenter" @dragover="dragover" <div :class="[{'Dcm-container-panel_in': isDragIn, 'Dcm-container-panel_draging': isDraging}, 'Dcm-container-panel']" @dragover.prevent @dragenter="dragenter" @dragover="dragover"
@dragleave="dragleave" @drop="drops"> @dragleave="dragleave" @drop="drops">
<grid-layout <grid-layout
...@@ -40,12 +40,13 @@ ...@@ -40,12 +40,13 @@
:i="bottomInfo.i" :i="bottomInfo.i"
:static="true" :static="true"
:key="bottomInfo.i + pageData.elements.length" :key="bottomInfo.i + pageData.elements.length"
@click.native.stop="handlePageSetClick"
> >
<page-bottom-tip /> <page-bottom-tip @click.native.stop="handlePageSetClick" />
</grid-item> </grid-item>
</grid-layout> </grid-layout>
</div> </div>
<back-top-preview /> <back-top-preview @click.native.stop="handlePageSetClick" />
</div> </div>
</template> </template>
<script lang="ts" src="./index.ts"></script> <script lang="ts" src="./index.ts"></script>
......
...@@ -27,6 +27,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin, ...@@ -27,6 +27,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
@Mutation('SET_PAGE_DATA') setPageData; @Mutation('SET_PAGE_DATA') setPageData;
@Mutation('UPDATE_PAGE_STYLE') setPageStyle; @Mutation('UPDATE_PAGE_STYLE') setPageStyle;
@Mutation('UPDATE_PAGE_PROPS') setPageProps; @Mutation('UPDATE_PAGE_PROPS') setPageProps;
@Mutation('SET_CUR_RIGHT_TAB_NAME') setRightTabName;
@Action('resetPageData') resetPageData; @Action('resetPageData') resetPageData;
@Action('savePageData') savePageData; @Action('savePageData') savePageData;
@Action('getPageDate') getPageDate; @Action('getPageDate') getPageDate;
...@@ -115,6 +116,11 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin, ...@@ -115,6 +116,11 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
this.toggle(false); this.toggle(false);
this.setCurEleIndex(curEleIndex); this.setCurEleIndex(curEleIndex);
this.setCurChildIndex(curChildIndex); this.setCurChildIndex(curChildIndex);
this.setRightTabName('组件设置');
}
handlePageSetClick() {
this.toggle(false);
this.setRightTabName('页面设置');
} }
getPageElements(ids = []) { getPageElements(ids = []) {
return ids.length === 0 ? this.pageData.elements : ids.map(item => { return ids.length === 0 ? this.pageData.elements : ids.map(item => {
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<Col class="dashboard-container-middle" span="17"> <Col class="dashboard-container-middle" span="17">
<Row class="Dc-middle-row"> <Row class="Dc-middle-row">
<Col :span="isCollapsed ? 24 : 16" class="Dc-middle-container" @click.native="toggle(true)"> <Col :span="isCollapsed ? 24 : 16" class="Dc-middle-container" @click.native="toggle(true)">
<OperationPanel :isDragIn.sync="isDragIn" :isDraging="isDraging" @dragover="dragover" @drops="drops" @handleElementClick="handleElementClick" @show="show" @resizedEvent="resizedEvent" @movedEvent="movedEvent" @toggle="toggle" /> <OperationPanel :isDragIn.sync="isDragIn" :isDraging="isDraging" @dragover="dragover" @drops="drops" @handleElementClick="handleElementClick" @show="show" @resizedEvent="resizedEvent" @movedEvent="movedEvent" @toggle="toggle" @handlePageSetClick="handlePageSetClick" />
</Col> </Col>
<Col span="8" :class="[{'Dcm-sider_none': isCollapsed}, 'Dc-middle-sider']"> <Col span="8" :class="[{'Dcm-sider_none': isCollapsed}, 'Dc-middle-sider']">
<DynamicFormTabs @modProps="modProps" @resizedChildEvent="resizedChildEvent" /> <DynamicFormTabs @modProps="modProps" @resizedChildEvent="resizedChildEvent" />
......
...@@ -15,7 +15,8 @@ import { ...@@ -15,7 +15,8 @@ import {
SET_PAGE_DATA, SET_PAGE_DATA,
UPDATE_COMMON_STYLE, UPDATE_COMMON_STYLE,
UPDATE_PAGE_STYLE, UPDATE_PAGE_STYLE,
UPDATE_PAGE_PROPS UPDATE_PAGE_PROPS,
SET_CUR_RIGHT_TAB_NAME
} from './type'; } from './type';
import RootState from '../../state'; import RootState from '../../state';
...@@ -36,6 +37,9 @@ export default class EditorModule implements Module<EditorState, RootState> { ...@@ -36,6 +37,9 @@ export default class EditorModule implements Module<EditorState, RootState> {
}, },
pageInfo(state: EditorState): PageInfo { pageInfo(state: EditorState): PageInfo {
return state.pageInfo; return state.pageInfo;
},
curRightTabName(state: EditorState): string | null {
return state.curRightTabName;
} }
}; };
...@@ -111,8 +115,11 @@ export default class EditorModule implements Module<EditorState, RootState> { ...@@ -111,8 +115,11 @@ export default class EditorModule implements Module<EditorState, RootState> {
[SET_CUR_ELE_INDEX](state, curEleIndex) { [SET_CUR_ELE_INDEX](state, curEleIndex) {
state.curEleIndex = curEleIndex; state.curEleIndex = curEleIndex;
}, },
[SET_CUR_CHILD_INDEX](state, curChildIndex) { [SET_CUR_ELE_INDEX](state, curEleIndex) {
state.curChildIndex = curChildIndex; state.curEleIndex = curEleIndex;
},
[SET_CUR_RIGHT_TAB_NAME](state, curRightTabName) {
state.curRightTabName = curRightTabName;
}, },
[SET_TEMPLATE_LIST](state, data) { [SET_TEMPLATE_LIST](state, data) {
state.templateList = data; state.templateList = data;
......
...@@ -60,6 +60,7 @@ export default interface EditorState { ...@@ -60,6 +60,7 @@ export default interface EditorState {
pageInfo: PageInfo; pageInfo: PageInfo;
curEleIndex: number | null; curEleIndex: number | null;
curChildIndex: number | null; curChildIndex: number | null;
curRightTabName: string | null;
templateList: any[]; templateList: any[];
gridLayout: GridLayout; gridLayout: GridLayout;
} }
...@@ -67,6 +68,7 @@ export default interface EditorState { ...@@ -67,6 +68,7 @@ export default interface EditorState {
export const defaultState = { export const defaultState = {
curEleIndex: null, curEleIndex: null,
curChildIndex: null, curChildIndex: null,
curRightTabName: null,
pageInfo: { pageInfo: {
id: 0, id: 0,
pageName: '', pageName: '',
......
...@@ -12,3 +12,4 @@ export const SET_PAGE_DATA = 'SET_PAGE_DATA'; ...@@ -12,3 +12,4 @@ export const SET_PAGE_DATA = 'SET_PAGE_DATA';
export const UPDATE_COMMON_STYLE = 'UPDATE_COMMON_STYLE'; export const UPDATE_COMMON_STYLE = 'UPDATE_COMMON_STYLE';
export const UPDATE_PAGE_STYLE = 'UPDATE_PAGE_STYLE'; export const UPDATE_PAGE_STYLE = 'UPDATE_PAGE_STYLE';
export const UPDATE_PAGE_PROPS = 'UPDATE_PAGE_PROPS'; export const UPDATE_PAGE_PROPS = 'UPDATE_PAGE_PROPS';
export const SET_CUR_RIGHT_TAB_NAME = 'SET_CUR_RIGHT_TAB_NAME';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment