Commit 3627f1e3 authored by 郝聪敏's avatar 郝聪敏

feature: 修改bug

parent 1000f997
...@@ -4,6 +4,7 @@ export const businessComponents = require('@qg/citrus-ui/md/index.json'); ...@@ -4,6 +4,7 @@ export const businessComponents = require('@qg/citrus-ui/md/index.json');
export const basicComponents = [ export const basicComponents = [
{ {
eleName: 'freedom-container', eleName: 'freedom-container',
coverImage: 'https://img.lkbang.net/citrus-ui/cherry-component-cover-free-container.png',
title: '自由容器', title: '自由容器',
config: [ config: [
// { // {
......
<template> <template>
<Modal v-model="showPopup" width="380" @on-visible-change="change" class-name='basic-form'> <Modal v-model="showPopup" width="380" @on-visible-change="change" class-name='basic-form'>
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80" label-position="left"> <Form @submit.native.prevent ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80" label-position="left">
<FormItem label="页面名称" prop="pageName"> <FormItem label="页面名称" prop="pageName">
<Input v-model="formCustom.pageName" placeholder="请输入页面名称"></Input> <Input v-model="formCustom.pageName" placeholder="请输入页面名称"></Input>
</FormItem> </FormItem>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<p slot="title">{{ config.title }}</p> <p slot="title">{{ config.title }}</p>
<div class="dynamic-row-card"> <div class="dynamic-row-card">
<img <img
src="https://activitystatic.q-gp.com/%E5%95%86%E5%93%81%402x.png" :src="config.coverImage || 'http://activitystatic.q-gp.com/low_code.jpg'"
/> />
</div> </div>
</Card> </Card>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<h4>项目{{index + 1}}</h4> <h4>项目{{index + 1}}</h4>
<a @click="del(index)">删除</a> <a @click="del(index)">删除</a>
</div> </div>
<Form :model="item" :label-width="80"> <Form @submit.native.prevent :model="item" :label-width="80">
<FormItem :prop="`${keywords.key}`" :label="keywords.name" :key="idx" v-for="(keywords, idx) in formControl"> <FormItem :prop="`${keywords.key}`" :label="keywords.name" :key="idx" v-for="(keywords, idx) in formControl">
<component :is="getComponent(keywords.type)" :options="item.options" v-model="item[keywords.key]" /> <component :is="getComponent(keywords.type)" :options="item.options" v-model="item[keywords.key]" />
</FormItem> </FormItem>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div slot='title' class="Fl-card-title"> <div slot='title' class="Fl-card-title">
<a slot='title' @click="add()">{{editText('edit')}}</a> <a slot='title' @click="add()">{{editText('edit')}}</a>
</div> </div>
<Form :model="form" :label-width="80"> <Form @submit.native.prevent :model="form" :label-width="80">
<FormItem :prop="`${keywords.key}`" :label="keywords.name" :key="idx" v-for="(keywords, idx) in formControl"> <FormItem :prop="`${keywords.key}`" :label="keywords.name" :key="idx" v-for="(keywords, idx) in formControl">
<component :is="getComponent(keywords.type)" :options="keywords.options" v-model="form[keywords.key]" /> <component :is="getComponent(keywords.type)" :options="keywords.options" v-model="form[keywords.key]" />
</FormItem> </FormItem>
......
<template> <template>
<div class="dynamic-form" v-if="isSelected"> <div class="dynamic-form" v-if="isSelected">
<h2>{{curElement.title}}</h2> <h2>{{curElement.title}}</h2>
<Form class="dynamic-form-component" :label-width="80" :model="form" v-if="curElement.schame && curElement.schame.length"> <Form class="dynamic-form-component" @submit.native.prevent :label-width="80" :model="form" v-if="curElement.schame && curElement.schame.length">
<h3 v-if="!hasGroup">组件属性</h3> <h3 v-if="!hasGroup">组件属性</h3>
<template v-for="(item, index) in curElement.schame"> <template v-for="(item, index) in curElement.schame">
<div v-if="item.title"> <div v-if="item.title">
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</FormItem> </FormItem>
</template> </template>
</Form> </Form>
<Form class="dynamic-form-basic" :label-width="80"> <Form class="dynamic-form-basic" @submit.native.prevent :label-width="80">
<h3>基础样式</h3> <h3>基础样式</h3>
<template v-if="childSelected"> <template v-if="childSelected">
<template v-for="item in styleSchame.curEle"> <template v-for="item in styleSchame.curEle">
......
<template> <template>
<div class="dynamic-form"> <div class="dynamic-form">
<h2>{{title}}</h2> <h2>{{title}}</h2>
<Form class="dynamic-form-component" :label-width="80" :model="propsForm"> <Form class="dynamic-form-component" :label-width="80" :model="propsForm" @submit.native.prevent>
<h3>基础属性</h3> <h3>基础属性</h3>
<template v-for="(item, index) in propsSchame"> <template v-for="(item, index) in propsSchame">
<FormItem class="Df-component-formitem" :label="item.name" > <FormItem class="Df-component-formitem" :label="item.name" >
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</FormItem> </FormItem>
</template> </template>
</Form> </Form>
<Form class="dynamic-form-component" :label-width="80" :model="commonStyleForm"> <Form class="dynamic-form-component" :label-width="80" :model="commonStyleForm" @submit.native.prevent>
<h3>基础样式</h3> <h3>基础样式</h3>
<template v-for="(item, index) in commonStyleSchame"> <template v-for="(item, index) in commonStyleSchame">
<FormItem class="Df-component-formitem" :label="item.name" > <FormItem class="Df-component-formitem" :label="item.name" >
......
...@@ -15,6 +15,17 @@ ...@@ -15,6 +15,17 @@
</template> </template>
<script lang="ts" src="./index.ts"></script> <script lang="ts" src="./index.ts"></script>
<style lang="less" scoped> <style lang="less" scoped>
.border() {
&:before {
position: absolute;
content: '';
border: 1px dashed #0c0c0c !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
.freedom { .freedom {
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -31,9 +42,21 @@ ...@@ -31,9 +42,21 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
&-item { &-item {
position: absolute;
z-index: 2;
font-size: 0; font-size: 0;
&:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
z-index: 3;
}
&:hover { &:hover {
border: 1px dashed #0c0c0c !important; .border();
} }
} }
&-dot { &-dot {
...@@ -46,7 +69,7 @@ ...@@ -46,7 +69,7 @@
z-index: 1001; z-index: 1001;
} }
.Fb-item_selected { .Fb-item_selected {
border: 1px dashed #0c0c0c !important; .border();
} }
} }
.activity { .activity {
......
<template> <template>
<div class="tableComStyle"> <div class="tableComStyle">
<div class="searchFormStyle qg-table"> <div class="searchFormStyle qg-table">
<Form inline ref="searchForm" :rules="searchCondition.rules || {}" :model="searchForm" class="inline"> <Form @submit.native.prevent inline ref="searchForm" :rules="searchCondition.rules || {}" :model="searchForm" class="inline">
<FormItem :key="getKey(item.key)" :prop="getKey(item.key)" :rules="item.rules" :label="item.label" v-for="item in searchCondition"> <FormItem :key="getKey(item.key)" :prop="getKey(item.key)" :rules="item.rules" :label="item.label" v-for="item in searchCondition">
<Input v-model="searchForm[item.key]" placeholder="" class="comWidth" v-if="item.type === 'input'" clearable /> <Input v-model="searchForm[item.key]" placeholder="" class="comWidth" v-if="item.type === 'input'" clearable />
<Select v-model="searchForm[item.key]" class="comWidth" filterable v-else-if="item.type === 'select'" clearable> <Select v-model="searchForm[item.key]" class="comWidth" filterable v-else-if="item.type === 'select'" clearable>
......
...@@ -136,7 +136,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin, ...@@ -136,7 +136,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
} }
dragover(event) { dragover(event) {
if (event.target.classList.contains('freedom')) { if (event?.target?.children?.[0]?.classList.contains('freedom')) {
event.dataTransfer.dropEffect = 'move'; event.dataTransfer.dropEffect = 'move';
} else { } else {
event.dataTransfer.dropEffect = 'copy'; event.dataTransfer.dropEffect = 'copy';
...@@ -169,22 +169,23 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin, ...@@ -169,22 +169,23 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
this.isCollapsed = false; this.isCollapsed = false;
const data = JSON.parse(event.dataTransfer.getData('text')); const data = JSON.parse(event.dataTransfer.getData('text'));
const { layerX: left, layerY: top } = event; const { layerX: left, layerY: top } = event;
const target = event?.target?.children?.[0]?.children?.[0] || {};
event.dataTransfer.clearData(); event.dataTransfer.clearData();
// template // template
if (data.template) { if (data.template) {
this.setPageData(JSON.parse(data.template)); this.setPageData(JSON.parse(data.template));
this.handleElementClick(null, null); this.handleElementClick(null, null);
// freedom // freedom
} else if (event.target.classList.contains('freedom-body')) { } else if (target?.classList?.contains('freedom-body')) {
const { y: curY } = this.pageData.elements[event.target.dataset.index].point; const { y: curY } = this.pageData.elements[target?.dataset?.index].point;
const scrollTop = this.layout.reduce((pre, cur) => { const scrollTop = this.layout.reduce((pre, cur) => {
if (cur.y < curY) { if (cur.y < curY) {
return pre + cur.h * this.rowHeight; return pre + cur.h * this.rowHeight;
} }
return pre; return pre;
}, 0); }, 0);
this.addElements({ containerIndex: event.target.dataset.index, data: { ...data, commonStyle: { position: 'absolute', left, top: top - scrollTop } } }); this.addElements({ containerIndex: target?.dataset?.index, data: { ...data, commonStyle: { position: 'absolute', left, top: top - scrollTop } } });
this.handleElementClick(+event.target.dataset.index, this.pageData.elements[event.target.dataset.index].child.length - 1); this.handleElementClick(+target?.dataset?.index, this.pageData.elements[target?.dataset?.index].child.length - 1);
// component // component
} else { } else {
const y = Math.floor(top / this.rowHeight); const y = Math.floor(top / this.rowHeight);
......
...@@ -105,6 +105,19 @@ ...@@ -105,6 +105,19 @@
justify-content: center; justify-content: center;
} }
} }
.border() {
&:before {
position: absolute;
content: '';
border: 1px dashed #0c0c0c !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
.dashboard { .dashboard {
min-width: 1280px; min-width: 1280px;
height: 100% !important; height: 100% !important;
...@@ -185,20 +198,29 @@ ...@@ -185,20 +198,29 @@
/deep/ .vue-grid-layout { /deep/ .vue-grid-layout {
min-height: 667px; min-height: 667px;
.vue-grid-item { .vue-grid-item {
position: relative;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
&:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
z-index: 1;
}
&:hover { &:hover {
border: 1px dashed #0c0c0c !important; .border();
} }
// &>*:first-child {
// height: 100%;
// }
.vue-resizable-handle { .vue-resizable-handle {
z-index: 10000; z-index: 10000;
} }
} }
.Dcmcp-item_selected { .Dcmcp-item_selected {
border: 1px dashed #0c0c0c !important; .border();
} }
} }
&_draging { &_draging {
......
...@@ -1464,14 +1464,14 @@ ...@@ -1464,14 +1464,14 @@
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
}, },
"@popperjs/core": { "@popperjs/core": {
"version": "2.9.0", "version": "2.9.1",
"resolved": "http://npmprivate.quantgroups.com/@popperjs%2fcore/-/core-2.9.0.tgz", "resolved": "http://npmprivate.quantgroups.com/@popperjs%2fcore/-/core-2.9.1.tgz",
"integrity": "sha512-wjtKehFAIARq2OxK8j3JrggNlEslJfNuSm2ArteIbKyRMts2g0a7KzTxfRVNUM+O0gnBJ2hNV8nWPOYBgI1sew==" "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
}, },
"@qg/cherry-ui": { "@qg/cherry-ui": {
"version": "2.18.75", "version": "2.19.2",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.18.75.tgz", "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.19.2.tgz",
"integrity": "sha512-F5a1iySaJ70IZ9/kdY7DoijR+Wa5nzJjhaGtv4n9wrujxwrIPJPJ7k+sgAmujJXWgzGoSVYqPT6AFhg4JJ1GCQ==", "integrity": "sha512-II08ZVAofNCPL3FM5os5P2TlmgsiNKLxO0f+dLFUb8YpbFmrj/fIKh4z7NO4MFQ+pK5TzwXi4M+ptS3onjOrIg==",
"requires": { "requires": {
"@popperjs/core": "^2.5.4", "@popperjs/core": "^2.5.4",
"vue-lazyload": "^1.3.3", "vue-lazyload": "^1.3.3",
...@@ -1479,9 +1479,9 @@ ...@@ -1479,9 +1479,9 @@
} }
}, },
"@qg/citrus-ui": { "@qg/citrus-ui": {
"version": "0.0.21", "version": "0.0.23",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.21.tgz", "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.23.tgz",
"integrity": "sha512-um+tQJJ+3R4qZ3IjZ8bNtnkaNqtnHypihbagNNKKkm3iS9XuL77MFzjX+SrXMCJlU1i3/aXBdLOokeKZc9FOoQ==", "integrity": "sha512-Hmgm7KGFyqEoZzRE0r0ybMULQSA+fJ2V2T0po9xKv+eNehIuyTJ903UganwmaYz7sK21BuQg+hrMi2OznFWO/Q==",
"requires": { "requires": {
"@better-scroll/core": "^2.1.1", "@better-scroll/core": "^2.1.1",
"@qg/cherry-ui": "^2.18.72", "@qg/cherry-ui": "^2.18.72",
...@@ -1494,9 +1494,12 @@ ...@@ -1494,9 +1494,12 @@
} }
}, },
"@qg/js-bridge": { "@qg/js-bridge": {
"version": "1.1.9", "version": "1.1.10",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.9.tgz", "resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.10.tgz",
"integrity": "sha512-ZIBzdYBae+5QLdCH8/8qjixvIrQNoVvxMYEKJv6wpFF9J/xEV2e3f+3KkPAlAjjyKSjSYarmYwZGgIGov53psg==" "integrity": "sha512-g0Dd7pGuSvSLjsAoAZBnxmNsO6+pbh3pASC4F05CfN1qCJ13n1OpbOx2LPDRXuZkWAIe3ZaLwHOHiODEdv9exA==",
"requires": {
"rollup": "^2.40.0"
}
}, },
"@riophae/vue-treeselect": { "@riophae/vue-treeselect": {
"version": "0.4.0", "version": "0.4.0",
...@@ -19822,6 +19825,14 @@ ...@@ -19822,6 +19825,14 @@
"resolved": "http://npmprivate.quantgroups.com/rndm/-/rndm-1.2.0.tgz", "resolved": "http://npmprivate.quantgroups.com/rndm/-/rndm-1.2.0.tgz",
"integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w=" "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
}, },
"rollup": {
"version": "2.41.0",
"resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.41.0.tgz",
"integrity": "sha512-Gk76XHTggulWPH95q8V62bw6uqDH6UGvbD6LOa3QUyhuMF3eOuaeDHR7SLm1T9faitkpNrqzUAVYx47klcMnlA==",
"requires": {
"fsevents": "~2.3.1"
}
},
"run-async": { "run-async": {
"version": "2.4.1", "version": "2.4.1",
"resolved": "http://npmprivate.quantgroups.com/run-async/-/run-async-2.4.1.tgz", "resolved": "http://npmprivate.quantgroups.com/run-async/-/run-async-2.4.1.tgz",
......
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