|
|
@@ -28,33 +28,6 @@
|
|
|
<p>{{ item.text }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <grid-layout
|
|
|
- :layout.sync="cpnArray"
|
|
|
- :col-num="6"
|
|
|
- :row-height="30"
|
|
|
- :min-rows="1"
|
|
|
- :is-draggable="false"
|
|
|
- :is-resizable="false"
|
|
|
- :is-mirrored="false"
|
|
|
- :vertical-compact="true"
|
|
|
- :margin="[10, 10]"
|
|
|
- :use-css-transforms="true"
|
|
|
- class="box-btns-items"
|
|
|
- >
|
|
|
- <grid-item
|
|
|
- v-for="(item, index) in cpnArray"
|
|
|
- :x="item.x"
|
|
|
- :y="item.y"
|
|
|
- :w="item.w"
|
|
|
- :h="item.h"
|
|
|
- :i="item.i"
|
|
|
- :key="index"
|
|
|
- class="box-btns-item"
|
|
|
- @click.native="addBtn(item)"
|
|
|
- >
|
|
|
- {{ item.text }}
|
|
|
- </grid-item>
|
|
|
- </grid-layout> -->
|
|
|
</div>
|
|
|
<div class="box-canvs">
|
|
|
<div class="box-canvs-main">
|
|
|
@@ -72,40 +45,59 @@
|
|
|
>
|
|
|
<grid-item
|
|
|
v-for="(item, index) in pageArray"
|
|
|
- :x="item.x"
|
|
|
- :y="item.y"
|
|
|
- :w="item.w"
|
|
|
- :h="item.h"
|
|
|
+ :x="Number(item.x)"
|
|
|
+ :y="Number(item.y)"
|
|
|
+ :w="Number(item.w)"
|
|
|
+ :h="Number(item.h)"
|
|
|
:i="item.i"
|
|
|
:key="index"
|
|
|
- @dblclick.native="showSeting(item, index)"
|
|
|
+ @dblclick.native="showSeting(index)"
|
|
|
>
|
|
|
- <span class="box-canvs-main-span">
|
|
|
- <div style="width: 100%; height: 100%;" v-html="item.dom"></div>
|
|
|
- <i @click.stop="removeBtn(index)" class="el-icon-close"></i></span>
|
|
|
+ <div class="box-canvs-main-span">
|
|
|
+ <div
|
|
|
+ style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;"
|
|
|
+ :style="{
|
|
|
+ borderColor:item.borderColor,
|
|
|
+ borderWidth:item.border,
|
|
|
+ borderStyle:'solid',
|
|
|
+ borderRadius:item.borderRadius,
|
|
|
+ fontSize:item.fontSize,
|
|
|
+ background:item.background,
|
|
|
+ color:item.color
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{item.text}}
|
|
|
+ </div>
|
|
|
+ <i @click.stop="removeBtn(index)" class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
</grid-item>
|
|
|
</grid-layout>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-set">
|
|
|
- <el-tabs type="card" v-model="activeName">
|
|
|
+ <el-tabs v-if="isShowSeting" type="card" v-model="activeName">
|
|
|
<el-tab-pane label="按钮基础配置" name="first">
|
|
|
<f-form
|
|
|
ref="btnForm"
|
|
|
- :form="btnData"
|
|
|
+ :key="btnFromKey"
|
|
|
+ :form="pageArray[currentCpn]"
|
|
|
:config="btnDataConfig"
|
|
|
:rules="btnRules"
|
|
|
label-position="left"
|
|
|
:column="1"
|
|
|
- :key="btnFromKey"
|
|
|
/>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="按钮样式配置" name="second">
|
|
|
- 按钮样式配置
|
|
|
+ <f-form
|
|
|
+ ref="btnClassForm"
|
|
|
+ :key="btnFromKey"
|
|
|
+ :form="pageArray[currentCpn]"
|
|
|
+ :config="btnClassConfig"
|
|
|
+ label-position="left"
|
|
|
+ :column="1"
|
|
|
+ />
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- <div><button @click="changeCpns">确定</button><button @click="btnFromShow = false">取消</button></div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -141,6 +133,7 @@ export default {
|
|
|
default: () => []
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
// tab
|
|
|
@@ -175,9 +168,101 @@ export default {
|
|
|
overCode:[{required: true, message: '请输入结束码'}],
|
|
|
},
|
|
|
btnFromKey: 0,
|
|
|
- currentCpn: 0
|
|
|
+ currentCpn: '', //已选择的组件下标
|
|
|
+ isShowSeting:false,
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ pageArrayCount() {
|
|
|
+ return this.pageArray.length;
|
|
|
+ },
|
|
|
+ cpnArray() {
|
|
|
+ return this.allButton.map((item, index) => ({ x: 0, y: index*2, w: 2, h: 2, i: index, text: item.name, ...item }))
|
|
|
+ },
|
|
|
+ btnClassConfig() {
|
|
|
+ let config = [
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'w',
|
|
|
+ label: '宽度',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请输入宽度',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'h',
|
|
|
+ label: '高度',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请输入高度',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ const { currentCpn, pageArray } = this
|
|
|
+ const { type } = pageArray[currentCpn]
|
|
|
+ if (type === 'button') {
|
|
|
+ config = [
|
|
|
+ ...config,
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'text',
|
|
|
+ label: '按钮文字'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'border',
|
|
|
+ label: '边框粗细'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'color',
|
|
|
+ prop: 'borderColor',
|
|
|
+ label: '边框颜色'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'borderRadius',
|
|
|
+ label: '圆角尺寸'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'fontSize',
|
|
|
+ label: '字体大小'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'color',
|
|
|
+ prop: 'background',
|
|
|
+ label: '背景颜色'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'color',
|
|
|
+ prop: 'color',
|
|
|
+ label: '字体颜色'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if (type === 'text') {
|
|
|
+ config = [
|
|
|
+ ...config,
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'text',
|
|
|
+ label: '文字'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'input',
|
|
|
+ prop: 'fontSize',
|
|
|
+ label: '字体大小'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemType: 'color',
|
|
|
+ prop: 'color',
|
|
|
+ label: '字体颜色'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return config
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 显示弹窗
|
|
|
show() {
|
|
|
@@ -193,16 +278,16 @@ export default {
|
|
|
this.fromKey++;
|
|
|
},
|
|
|
// 初始化按钮表单数据
|
|
|
- initBtnFormData(fromData) {
|
|
|
- this.btnData = {
|
|
|
- content: '',
|
|
|
- ...fromData
|
|
|
+ initBtnFormData(index) {
|
|
|
+ this.isShowSeting=false;
|
|
|
+ this.pageArray[index].form = {
|
|
|
+ ...this.pageArray[index]
|
|
|
}
|
|
|
- if (Object.keys(this.btnData).length === 0) {
|
|
|
- this.btnFromKey = 0
|
|
|
- return
|
|
|
- }
|
|
|
- this.btnFromKey++
|
|
|
+ this.currentCpn = index
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.isShowSeting = true
|
|
|
+ this.btnFromKey++
|
|
|
+ });
|
|
|
},
|
|
|
// 详情
|
|
|
async handleInitData() {
|
|
|
@@ -230,7 +315,6 @@ export default {
|
|
|
// 关闭之前回调.
|
|
|
async handleBeforeClose(type) {
|
|
|
if (type !='ok') {
|
|
|
- this.btnFromShow = false
|
|
|
return true
|
|
|
};
|
|
|
const validate = await this.$refs.ruleForm.validate();
|
|
|
@@ -250,37 +334,22 @@ export default {
|
|
|
|
|
|
this.$emit('updateList')
|
|
|
this.initFormData({})
|
|
|
- this.btnFromShow = false
|
|
|
return true
|
|
|
},
|
|
|
+ // 添加
|
|
|
addCpns(item) {
|
|
|
- console.log(item)
|
|
|
this.pageArray.push({ w: 2, h: 2, x: 1, y: this.pageArray.map(item => item?.y).sort()[-1] || 1, i: this.pageArrayCount, ...item })
|
|
|
+ this.initBtnFormData(this.pageArray.length-1);
|
|
|
},
|
|
|
removeBtn(index) {
|
|
|
this.pageArray.splice(index, 1)
|
|
|
},
|
|
|
- showSeting(item, index) {
|
|
|
- if (Object.keys(item).length == 0) return
|
|
|
- this.currentCpn = index
|
|
|
- const from = { ...item }
|
|
|
- this.initBtnFormData(from)
|
|
|
- this.btnFromShow = true
|
|
|
- },
|
|
|
- changeCpns() {
|
|
|
- this.pageArray.splice(this.currentCpn, 1, { ...this.btnData })
|
|
|
- this.btnFromShow = false
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- pageArrayCount() {
|
|
|
- return this.pageArray.length;
|
|
|
+ showSeting(index) {
|
|
|
+ this.initBtnFormData(index)
|
|
|
},
|
|
|
- cpnArray() {
|
|
|
- return this.allButton.map((item, index) => ({ x: 0, y: index*2, w: 2, h: 2, i: index, text: item.name, ...item }))
|
|
|
- }
|
|
|
},
|
|
|
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@@ -380,7 +449,15 @@ export default {
|
|
|
}
|
|
|
.box-canvs-main-span {
|
|
|
position: relative;
|
|
|
-
|
|
|
+ background: #ffc0cb29;
|
|
|
+ border: 1px dashed #00000033;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ i{
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
