Administrator
4 years ago
parent
b0985f67b4
commit
54015e3d0c
@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div :class="['grid-row-style',selected_id === data.id ? 'is-selected-style':'']" @click="onClick(data)">
|
||||
<a-row style="padding: 0.25rem">
|
||||
<a-col v-for="(col,index) in data.cols" :key="col.id" :span="24 / data.cols.length"
|
||||
:class="['col-style',selected_id === col.id ? 'col-selected-style':'']"
|
||||
@click.stop="onClick(col)">
|
||||
<draggable v-model="col.items" group="itemGroup" forceFallback="true" ghostClass="ghostClass">
|
||||
<field-item v-for="item in col.items" :key="item.id" :item="item"/>
|
||||
</draggable>
|
||||
<div v-if="selected_id === col.id" class="col-operate-style">
|
||||
<a-icon v-if="data.cols.length < 4" type="copy" title="复制" class="icon-style" @click.stop="addCol(index,col)"/>
|
||||
<a-icon v-if="data.cols.length > 1" type="delete" title="删除" class="icon-style" @click.stop="deleteCol(index)"/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="move" v-if="selected_id === data.id">
|
||||
<icon-font type="icon-move" />
|
||||
</div>
|
||||
<div class="operate" v-if="selected_id === data.id">
|
||||
<a-icon type="plus-square" title="增加列" @click.stop="addCol(-1)" :class="['style-icon',{'disable':data.cols.length === 4}]"/>
|
||||
<a-icon type="copy" title="复制" class='style-icon' @click.stop="copyRow"/>
|
||||
<a-icon type="delete" title="删除" class='style-icon' @click.stop="deleteRow"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import {Row,Icon,Col} from 'ant-design-vue'
|
||||
import _ from 'lodash'
|
||||
import Common from '../../../utils/common'
|
||||
import draggable from 'vuedraggable'
|
||||
import FieldItem from './FieldItem'
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const IconFont = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_2363602_ovz7ocuydo.js',
|
||||
});
|
||||
export default {
|
||||
name: "FieldRowItem",
|
||||
props: ["rowData"],
|
||||
data: function (){
|
||||
return {
|
||||
data:this.rowData,
|
||||
selected_id:this.rowData.id
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ARow:Row,
|
||||
IconFont,
|
||||
AIcon:Icon,
|
||||
ACol:Col,
|
||||
draggable,
|
||||
FieldItem
|
||||
},
|
||||
methods :{
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
clickItem: function (add) {
|
||||
this.selected_id = add.id
|
||||
},
|
||||
onClick: function (data) {
|
||||
// eslint-disable-next-line no-debugger
|
||||
if (this.selected_id !== data.id){
|
||||
this.selected_id = data.id
|
||||
this.$bus.emit("clickItem",{id:this.selected_id})
|
||||
}
|
||||
},
|
||||
addCol: function (index = -1,data = null) {
|
||||
let col_id = "col_" + Common.getRandom(12);
|
||||
if (index === -1){//添加列
|
||||
this.data.cols.push({id:col_id});
|
||||
}else{//复制列
|
||||
let dataCopy = _.cloneDeep(data);
|
||||
dataCopy.id = "col_" + Common.getRandom(12);
|
||||
if (dataCopy.items && dataCopy.items.length > 0){
|
||||
data.item.forEach((field)=>{field.id = field.tag + "_" + Common.getRandom(12)})
|
||||
}
|
||||
|
||||
this.data.cols.splice(index + 1,0,dataCopy)
|
||||
this.$bus.emit("clickItem",{id:dataCopy.id})
|
||||
}
|
||||
},
|
||||
deleteCol: function (index) {
|
||||
if (index === this.data.cols.length - 1){
|
||||
this.$bus.emit("clickItem",{id:this.data.cols[index - 1].id})
|
||||
}else{
|
||||
this.$bus.emit("clickItem",{id:this.data.cols[index + 1].id})
|
||||
}
|
||||
|
||||
this.data.cols.splice(index,1)
|
||||
},
|
||||
copyRow: function () {
|
||||
this.$emit("copyRow",this.data)
|
||||
},
|
||||
deleteRow: function (){
|
||||
this.$emit("deleteRow",null)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// eslint-disable-next-line no-undef
|
||||
this.$bus.on("clickItem",this.clickItem)
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "style/fieldRowItem";
|
||||
</style>
|
||||
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">栅格占列数</div>
|
||||
<a-input-number v-model="attribute.span" :min="1" :max="24" :step="1" @change="onChange"/>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">栅格左侧的间隔格数</div>
|
||||
<a-input-number v-model="attribute.offset" :min="0" :step="1"/>
|
||||
</div>
|
||||
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">栅格向左移动格数</div>
|
||||
<a-input-number v-model="attribute.pull" :min="0" :step="1"/>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">栅格向右移动格数</div>
|
||||
<a-input-number v-model="attribute.push" :min="0" :step="1"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {InputNumber} from 'ant-design-vue'
|
||||
export default {
|
||||
name: "ColItemAttribute",
|
||||
props:["data"],
|
||||
data: function(){
|
||||
return {
|
||||
attribute:this.data,
|
||||
}
|
||||
},
|
||||
components:{
|
||||
AInputNumber:InputNumber
|
||||
},
|
||||
methods:{
|
||||
onChange:function () {
|
||||
// this.$bus.emit("colAttributeChange",this.attribute.id)
|
||||
// console.log(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "style/attributeCommonStyle";
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">栅格水平间隔</div>
|
||||
<a-input-number v-model="attribute.props.gutter[1]" :min="0" :step="1"/>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">栅格垂直间隔</div>
|
||||
<a-input-number v-model="attribute.props.gutter[0]" :min="0" :step="1"/>
|
||||
</div>
|
||||
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">flex布局</div>
|
||||
<div class="choice-style">
|
||||
<ASwitch @change="onChangMode" :checked="attribute.props.type === 'flex'" size="small"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">水平排列方式</div>
|
||||
<a-select v-model="attribute.props.justify" :options="justifyData" style="width: 10rem"/>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">垂直排列方式</div>
|
||||
<a-select v-model="attribute.props.align" :options="alignData" style="width: 10rem"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Switch,InputNumber,Select} from 'ant-design-vue'
|
||||
export default {
|
||||
name: "FieldRowItemAttribute",
|
||||
props:["data"],
|
||||
data: function(){
|
||||
return {
|
||||
attribute:this.data,
|
||||
justifyData:[{value:"start",label:"左对齐"},{value:"end",label:"右对齐"},{value:"center",label:"居中"},
|
||||
{value:"space-around",label:"两侧间隔相等"},{value:"space-between",label:"两端对齐"}],
|
||||
alignData:[{value:"top",label:"顶部对齐"},{value:"middle",label:"居中"},{value:"bottom",label:"底部对齐"}]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ASwitch:Switch,
|
||||
AInputNumber:InputNumber,
|
||||
ASelect:Select
|
||||
},
|
||||
methods:{
|
||||
onChangMode: function (checked) {
|
||||
if (checked){
|
||||
this.attribute.props.type = "flex";
|
||||
}else{
|
||||
this.attribute.props.type = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data:function (newData) {
|
||||
this.attribute = newData
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "style/attributeCommonStyle";
|
||||
.choice-style{
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue