You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
12 KiB
385 lines
12 KiB
<template>
|
|
<div class="productGroupTool">
|
|
<h3 class="toolTit">分组列表</h3>
|
|
<div class="toolBox">
|
|
<div class="itemBox">
|
|
<label>标题</label>
|
|
<el-input v-model="activeComponent.componentContent.title" maxlength="20" :placeholder="$t('common.defaulthint')"></el-input>
|
|
</div>
|
|
<tool-select :linkValue.sync='activeComponent.componentContent.textAlign' title="文字对齐方式" :options="alignList"></tool-select>
|
|
<div class="itemBox">
|
|
<div class="Tit">显示方式</div>
|
|
<el-select v-model="activeComponent.componentContent.showType" :placeholder="$t('common.choose')">
|
|
<el-option label="平铺" :value="1"></el-option>
|
|
<el-option label="列表" :value="2"></el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div class="textTit">添加分组</div>
|
|
<div class="productGroupListBox">
|
|
<draggable v-model="activeComponent.componentContent.productGroupData">
|
|
<div v-for="(item, index) in activeComponent.componentContent.productGroupData" :key="index" class="item">
|
|
<div class="listItemBox">
|
|
<div class="addImgTit" @click="openAddProductGroup(item, index)">
|
|
<div class="titLeft">
|
|
<span class="iconfont"></span>
|
|
<span class="iconfont"></span>
|
|
<span>分组</span>
|
|
</div>
|
|
<div class="titRight">
|
|
<span class="iconfont" @click.stop="deleteItem(item, index)"></span>
|
|
<span v-html="productGroupCurrent === index ? '' : ''" class="iconfont"></span>
|
|
</div>
|
|
</div>
|
|
<div class="addBox" v-show="productGroupCurrent === index">
|
|
<div class="addContent">
|
|
<tool-single-img :imageUrl.sync='item.img' tip='建议尺寸5:4等比例图片'></tool-single-img>
|
|
<div v-if="!item.data.groupName" class="addProductGroupBox" @click="addItemProductGroup(item, index)"><span class="iconfont"></span>添加分组</div>
|
|
<div v-else class="productGroupName">
|
|
<span>{{item.data.groupName}}</span>
|
|
<div class="operation">
|
|
<span class="iconfont" @click="replaceProductGroup(index)"></span>
|
|
<span class="iconfont" @click="deleteProductGroup(index)"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div @click="deleteItem(item, index)" class="deleteItem"><span class="iconfont"></span>删除内容</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
</div>
|
|
<div class="addImgBtn" v-show="activeComponent.componentContent.productGroupData.length < 8" @click="addProductGroup"><span class="iconfont"></span>添加分组</div>
|
|
<div class="addImgBtn" v-show="activeComponent.componentContent.productGroupData.length === 8"><span class="iconfont"></span>最多只能添加8个</div>
|
|
<el-dialog
|
|
title="提示"
|
|
:visible.sync="dialogVisible"
|
|
width="30%"
|
|
:before-close="deleteItem">
|
|
<span>点击确定删除此项</span>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="dialogVisible = false">{{ $t('common.sure') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog title="选择分组" :visible.sync="dialogProductGroup" width="480px">
|
|
<product-group-select ref="productGroupSelect"></product-group-select>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogProductGroup = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="productGroupChanged">{{ $t('common.sure') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Draggable from 'vuedraggable'
|
|
import {toolMixin} from '@@/config/mixin'
|
|
import ProductGroupSelect from '../toolModule/product-group-select'
|
|
import ToolSingleImg from '../toolModule/tool-single-img'
|
|
import ToolSelect from '../toolModule/tool-select'
|
|
// import imageSrc from '../../../assets/canvasImg'
|
|
export default {
|
|
mixins: [toolMixin],
|
|
name: 'productGroupTool',
|
|
components: {
|
|
ToolSelect,
|
|
ToolSingleImg,
|
|
ProductGroupSelect,
|
|
Draggable
|
|
},
|
|
data () {
|
|
return {
|
|
title: '', // 标题内容
|
|
alignList: [
|
|
{
|
|
id: 1,
|
|
label: '居左',
|
|
value: 'left'
|
|
},
|
|
{
|
|
id: 2,
|
|
label: '居中',
|
|
value: 'center'
|
|
},
|
|
{
|
|
id: 3,
|
|
label: '居右',
|
|
value: 'right'
|
|
}
|
|
],
|
|
textAlign: 'left',
|
|
productGroupCurrent: null,
|
|
dialogVisible: false,
|
|
dialogProductGroup: false,
|
|
currentProductGroup: null
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
openAddProductGroup (item, index) {
|
|
if (this.productGroupCurrent === index) {
|
|
this.productGroupCurrent = null
|
|
return false
|
|
}
|
|
this.productGroupCurrent = index
|
|
},
|
|
// 添加分组
|
|
addProductGroup () {
|
|
this.activeComponent.componentContent.productGroupData.push({
|
|
data: [],
|
|
img: ''
|
|
})
|
|
},
|
|
// 删除内容
|
|
deleteItem (item, index) {
|
|
this.$confirm('确定删除此项？')
|
|
.then(_ => {
|
|
this.activeComponent.componentContent.productGroupData.splice(index, 1)
|
|
})
|
|
.catch(_ => {
|
|
})
|
|
},
|
|
addItemProductGroup (item, index) {
|
|
this.dialogProductGroup = true
|
|
this.productGroupCurrent = index
|
|
},
|
|
// 替换分组
|
|
replaceProductGroup (index) {
|
|
this.dialogProductGroup = true
|
|
this.productGroupCurrent = index
|
|
console.log(this.productGroupCurrent)
|
|
},
|
|
// 删除已选分组
|
|
deleteProductGroup (index) {
|
|
this.activeComponent.componentContent.productGroupData[index].data = {}
|
|
},
|
|
// 选择分组
|
|
productGroupChanged () {
|
|
let nodesObj = this.$refs.productGroupSelect.productGroup
|
|
console.log(nodesObj, this.productGroupCurrent)
|
|
if (nodesObj) {
|
|
var data = nodesObj
|
|
this.dialogProductGroup = false
|
|
this.activeComponent.componentContent.productGroupData[this.productGroupCurrent].id = data.id
|
|
this.activeComponent.componentContent.productGroupData[this.productGroupCurrent].data = data
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.productGroupTool {
|
|
padding: 20px 20px 0 20px;
|
|
h3 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
color: #333333;
|
|
margin-bottom: 20px;
|
|
}
|
|
.toolBox {
|
|
padding-bottom: 10px;
|
|
.textTit {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
}
|
|
.itemBox {
|
|
label {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
::v-deep .ql-container {
|
|
height: 200px;
|
|
}
|
|
.productGroupListBox {
|
|
margin-top: 30px;
|
|
.item {
|
|
border: 1px solid #E8EAEC;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.listItemBox {
|
|
.addImgTit {
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #F6F7F9;
|
|
cursor: pointer;
|
|
.titLeft {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
color: #7D7E80;
|
|
}
|
|
span:nth-child(1) {
|
|
font-size: 28px;
|
|
}
|
|
span:nth-child(2) {
|
|
font-size: 25px;
|
|
margin: 0 6px;
|
|
}
|
|
span:nth-child(3) {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.titRight {
|
|
display: flex;
|
|
align-items: center;
|
|
span:nth-child(1) {
|
|
width: 40px;
|
|
text-align: center;
|
|
display: block;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
.addContent {
|
|
padding: 13px;
|
|
.addProductGroupBox {
|
|
width: 100%;
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
background: $mainColor;
|
|
border-radius: 4px;
|
|
margin: 15px 0;
|
|
cursor: pointer;
|
|
}
|
|
.deleteItem {
|
|
border-radius: 4px;
|
|
background: $mainColor;
|
|
text-align: center;
|
|
height: 36px;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
span {
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.productGroupName {
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #e9e9e9;
|
|
padding: 0 10px;
|
|
justify-content: space-between;
|
|
span {
|
|
color: #333333;
|
|
}
|
|
span {
|
|
color: #333333;
|
|
}
|
|
.operation {
|
|
display: flex;
|
|
span {
|
|
width: 35px;
|
|
display: block;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.deleteItem {
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #F6F7F9;
|
|
cursor: pointer;
|
|
color: $mainColor;
|
|
font-size: 14px;
|
|
span {
|
|
font-size: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.addImgBtn {
|
|
border-radius: 4px;
|
|
background: $mainColor;
|
|
text-align: center;
|
|
height: 36px;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
span {
|
|
font-size: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.classList {
|
|
.classTit {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 50px;
|
|
align-items: center;
|
|
padding:0 20px;
|
|
background: #eeeeee;
|
|
span {
|
|
display: block;
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.classListBox {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
.classItemBox {
|
|
display: flex;
|
|
padding: 0 20px;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eeeeee;
|
|
div {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
height: 50px;
|
|
align-items: center;
|
|
span:nth-child(1) {
|
|
padding-left: 5px;
|
|
}
|
|
span {
|
|
display: block;
|
|
width: 100px;
|
|
text-align: left;
|
|
}
|
|
span:nth-child(2) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|