|
|
<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>
|