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.
429 lines
15 KiB
429 lines
15 KiB
6 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-card v-show="step==1" shadow="never" class="aui-card--fill">
|
||
|
|
<el-table
|
||
|
|
v-loading="dataListLoading"
|
||
|
|
:data="dataList"
|
||
|
|
border
|
||
|
|
@selection-change="dataListSelectionChangeHandle"
|
||
|
|
@sort-change="dataListSortChangeHandle"
|
||
|
|
style="width: 100%;">
|
||
|
|
<el-table-column prop="customerName" label="客户名称" header-align="left" align="left"></el-table-column>
|
||
|
|
<el-table-column label="小程序首页配置" fixed="right" header-align="center" align="center" width="150">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text" size="small"
|
||
|
|
@click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 0)">政府端</el-button>
|
||
|
|
<el-button type="text" size="small"
|
||
|
|
@click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 1)">居民端</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<div class="m-wx_index" v-show="step==2">
|
||
|
|
<el-button type="default"
|
||
|
|
@click="toStep(1)">取消返回</el-button>
|
||
|
|
<el-button type="success"
|
||
|
|
@click="save">保存</el-button>
|
||
|
|
<el-button type="danger"
|
||
|
|
@click="publish">发布</el-button>
|
||
|
|
|
||
|
|
<el-row class="wrap" :gutter="20">
|
||
|
|
<el-col :span="4">
|
||
|
|
<h4>选择组件</h4>
|
||
|
|
<div class="mw-cpt_type">
|
||
|
|
<div class="d-function" v-show="item.componentList.length > 0" :key="item.functionId" v-for="item in cptTypeList">
|
||
|
|
<div class="d-info" @click="shiftCptTypeItemUnfold(item)">
|
||
|
|
<img v-if="item.functionId==0" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/common-cpt.png">
|
||
|
|
<img v-if="item.functionId==1" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt1.png">
|
||
|
|
<img v-if="item.functionId==2" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt2.png">
|
||
|
|
<img v-if="item.functionId==3" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt3.png">
|
||
|
|
<img v-if="item.functionId==4" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt4.png">
|
||
|
|
|
||
|
|
<span class="d-name">{{ item.functionName }}</span>
|
||
|
|
|
||
|
|
<img class="d-arrow" :class="{'z-unfold': item.isUnfold}" src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
|
||
|
|
</div>
|
||
|
|
<div class="d-list" v-show="item.isUnfold">
|
||
|
|
<div class="d-item" :key="cptItem.componentId" v-for="cptItem in item.componentList">
|
||
|
|
<span class="d-item-name">{{ cptItem.componentName }}</span>
|
||
|
|
<span class="d-item-btn" @click="beforeAddCpt(cptItem)">
|
||
|
|
<img class="d-item-ico" src="@/assets/img/modules/wx-mini/index-set/add.png">
|
||
|
|
<span>添加</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="14">
|
||
|
|
<div class="mw-show">
|
||
|
|
<div class="mw-phone">
|
||
|
|
<div class="mw-phone-top z-none">
|
||
|
|
<div class="mw-phone-hint" :class="{'z-out-left': topCptList.length>0}">（标题区）</div>
|
||
|
|
<div class="mw-cpt"
|
||
|
|
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
|
||
|
|
@click="focusCpt(item)" :key="item.componentId"
|
||
|
|
v-for="item in topCptList">
|
||
|
|
<div class="mw-cpt-top_title" v-if="item.componentFrontId==='top_title'">
|
||
|
|
<span>{{ item.demoData.content }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mw-phone-ban z-none">
|
||
|
|
<div class="mw-phone-hint" :class="{'z-out-left': banCptList.length>0}">（置顶区）</div>
|
||
|
|
</div>
|
||
|
|
<div class="mw-phone-fixed z-none">
|
||
|
|
<div class="mw-phone-hint" :class="{'z-out-down': fixedCptList.length>0}">（浮窗区）</div>
|
||
|
|
</div>
|
||
|
|
<div class="mw-phone-cnt z-none">
|
||
|
|
<div class="mw-phone-hint" :class="{'z-out-left': cntCptList.length>0}">（功能区）</div>
|
||
|
|
<div class="mw-cpt"
|
||
|
|
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
|
||
|
|
@click="focusCpt(item)"
|
||
|
|
:key="index"
|
||
|
|
v-for="(item, index) in cntCptList">
|
||
|
|
<div class="mw-cpt-cnt_news" :style="{backgroundColor: item.configuration.bgc}" v-if="item.componentFrontId==='cnt_news'">
|
||
|
|
<div class="d-news-title">{{ item.demoData.title }}</div>
|
||
|
|
<p class="d-news-cnt">{{ item.demoData.content }}</p>
|
||
|
|
<div class="d-cpt-operate"
|
||
|
|
v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
|
||
|
|
@click.stop>
|
||
|
|
<div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'up')">
|
||
|
|
<img src="@/assets/img/modules/wx-mini/index-set/up.png">
|
||
|
|
<p>上移</p>
|
||
|
|
</div>
|
||
|
|
<div class="d-cpt-btn" @click="delCpt(item)">
|
||
|
|
<img src="@/assets/img/modules/wx-mini/index-set/del.png">
|
||
|
|
<p>删除</p>
|
||
|
|
</div>
|
||
|
|
<div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'down')">
|
||
|
|
<img src="@/assets/img/modules/wx-mini/index-set/down.png">
|
||
|
|
<p>下移</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<transition v-show="focusedCpt.tempOnlyId" name="el-zoom-in-top">
|
||
|
|
<div class="mw-set el-zoom-in-top" v-if="focusedCpt.tempOnlyId">
|
||
|
|
<div class="d-set-head" @click="focusedCpt.demoIsUnfold = !focusedCpt.demoIsUnfold">
|
||
|
|
<span class="d-title">演示数据</span>
|
||
|
|
<img class="d-arrow"
|
||
|
|
:class="{'z-unfold': focusedCpt.demoIsUnfold}"
|
||
|
|
src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
|
||
|
|
</div>
|
||
|
|
<el-form v-show="focusedCpt.demoIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.demoData" size="mini">
|
||
|
|
<el-form-item label="标题">
|
||
|
|
<el-input v-model="focusedCpt.demoData.title"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="内容">
|
||
|
|
<el-input type="textarea" v-model="focusedCpt.demoData.content"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<div class="d-set-head" @click="focusedCpt.confIsUnfold = !focusedCpt.confIsUnfold">
|
||
|
|
<span class="d-title">高级选项</span>
|
||
|
|
<img class="d-arrow"
|
||
|
|
:class="{'z-unfold': focusedCpt.confIsUnfold}"
|
||
|
|
src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
|
||
|
|
</div>
|
||
|
|
<el-form v-show="focusedCpt.confIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.configuration" size="mini">
|
||
|
|
<el-form-item label="背景色">
|
||
|
|
<el-input v-model="focusedCpt.configuration.bgc"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<div class="d-operate">
|
||
|
|
<el-button type="default" size="small" round
|
||
|
|
@click="resetFocusedCptData">重置</el-button>
|
||
|
|
<el-button type="success" size="small" round
|
||
|
|
@click="saveFocusedCptData">保存</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import mixinViewModule from '@/mixins/view-module'
|
||
|
|
import { Loading } from 'element-ui'
|
||
|
|
import nextTick from 'dai-js/tools/nextTick'
|
||
|
|
import getRandomString from 'dai-js/tools/getRandomString'
|
||
|
|
import cloneDeep from 'lodash/cloneDeep'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins: [mixinViewModule],
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
mixinViewModuleOptions: {
|
||
|
|
getDataListURL: '/oper/crm/customer/getvalidcustomerlist',
|
||
|
|
getDataListIsPage: false
|
||
|
|
},
|
||
|
|
|
||
|
|
dataList: [
|
||
|
|
{
|
||
|
|
customerName: '青岛李沧区党委',
|
||
|
|
customerId: '1'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
customerName: '青岛市北区党委',
|
||
|
|
customerId: '2'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
// 步骤: 1列表选择 2首页配置
|
||
|
|
step: 2,
|
||
|
|
|
||
|
|
wxIndex: {
|
||
|
|
customerId: '',
|
||
|
|
customerName: '',
|
||
|
|
clientType: ''
|
||
|
|
},
|
||
|
|
|
||
|
|
// 可用列表
|
||
|
|
cptTypeList: [
|
||
|
|
// 通用组件
|
||
|
|
{
|
||
|
|
functionId: '0',
|
||
|
|
functionName: '通用组件',
|
||
|
|
functionType: 1, // 1通用 2功能
|
||
|
|
isUnfold: true,
|
||
|
|
componentList: [
|
||
|
|
{
|
||
|
|
componentId: '1',
|
||
|
|
componentName: '顶部标题',
|
||
|
|
componentFrontId: 'top_title',
|
||
|
|
configuration: {
|
||
|
|
content: '青岛市党委'
|
||
|
|
},
|
||
|
|
demoData: {
|
||
|
|
content: '我是标题'
|
||
|
|
},
|
||
|
|
configurationDescription: '请配置具体内容'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
// 功能组件
|
||
|
|
{
|
||
|
|
functionId: '1',
|
||
|
|
functionName: '议事厅',
|
||
|
|
functionType: 2, // 1通用 2功能
|
||
|
|
isUnfold: false,
|
||
|
|
componentList: [
|
||
|
|
{
|
||
|
|
componentId: '5',
|
||
|
|
componentName: '新闻类',
|
||
|
|
componentFrontId: 'cnt_news',
|
||
|
|
configuration: {
|
||
|
|
bgc: '#eee'
|
||
|
|
},
|
||
|
|
demoData: {
|
||
|
|
title: '我是标题',
|
||
|
|
content: '我是内容。我是内容。我是内容。'
|
||
|
|
},
|
||
|
|
configurationDescription: '请配置具体内容'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
// 当前应用组件列表
|
||
|
|
cptList: [
|
||
|
|
// {
|
||
|
|
// componentId: '1',
|
||
|
|
// componentName: '顶部标题',
|
||
|
|
// componentFrontId: 'top_title',
|
||
|
|
// configuration: {
|
||
|
|
// content: '青岛市党委'
|
||
|
|
// },
|
||
|
|
// demoData: {
|
||
|
|
// content: '我是标题'
|
||
|
|
// },
|
||
|
|
// configurationDescription: '请配置具体内容',
|
||
|
|
// displayOrder: 1,
|
||
|
|
// region: 1 // 区域 1top 2ban 3fixed 4cnt
|
||
|
|
// }
|
||
|
|
],
|
||
|
|
focusedCpt: {
|
||
|
|
tempOnlyId: ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
cptTypeListTiled () {
|
||
|
|
const { cptTypeList } = this
|
||
|
|
let list = []
|
||
|
|
cptTypeList.forEach(item => {
|
||
|
|
list = [...list, ...item.componentList]
|
||
|
|
})
|
||
|
|
return list
|
||
|
|
},
|
||
|
|
topCptList () {
|
||
|
|
return this.cptList.filter(item => this.checkCptRegion(item) === 'top')
|
||
|
|
},
|
||
|
|
banCptList () {
|
||
|
|
return this.cptList.filter(item => this.checkCptRegion(item) === 'ban')
|
||
|
|
},
|
||
|
|
cntCptList () {
|
||
|
|
console.log('cntCpt发生了变化')
|
||
|
|
let arr = this.cptList.filter(item => this.checkCptRegion(item) === 'cnt')
|
||
|
|
arr.sort((f, s) => f.displayOrder - s.displayOrder)
|
||
|
|
return arr
|
||
|
|
},
|
||
|
|
fixedCptList () {
|
||
|
|
return this.cptList.filter(item => this.checkCptRegion(item) === 'fixed')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
// 改变步骤
|
||
|
|
toStep (s) {
|
||
|
|
this.step = s
|
||
|
|
},
|
||
|
|
// 选择用户开始配置
|
||
|
|
async startSetWxIndex (id, name, type) {
|
||
|
|
this.wxIndex.customerId = id
|
||
|
|
this.wxIndex.customerName = name
|
||
|
|
this.wxIndex.clientType = type
|
||
|
|
let loadingInstance = Loading.service()
|
||
|
|
await nextTick(1000)
|
||
|
|
loadingInstance.close()
|
||
|
|
this.toStep(2)
|
||
|
|
console.log(this.wxIndex)
|
||
|
|
},
|
||
|
|
|
||
|
|
// 保存配置
|
||
|
|
save () {
|
||
|
|
console.log('保存配置')
|
||
|
|
},
|
||
|
|
// 发布配置
|
||
|
|
publish () {
|
||
|
|
console.log('发布配置')
|
||
|
|
},
|
||
|
|
// 判断组件所属区域类别
|
||
|
|
checkCptRegion (item) {
|
||
|
|
const { componentFrontId } = item
|
||
|
|
const fun = name => name === componentFrontId
|
||
|
|
if (['top_title'].findIndex(fun) !== -1) {
|
||
|
|
return 'top'
|
||
|
|
} else if (['ban_banner'].findIndex(fun) !== -1) {
|
||
|
|
return 'ban'
|
||
|
|
} else if (['cnt_news'].findIndex(fun) !== -1) {
|
||
|
|
return 'cnt'
|
||
|
|
} else if (['fixed_msg'].findIndex(fun) !== -1) {
|
||
|
|
return 'fixed'
|
||
|
|
} else {
|
||
|
|
return 'none'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 添加组件到实例-前验证
|
||
|
|
beforeAddCpt (item) {
|
||
|
|
console.log('添加组件到实例-前验证')
|
||
|
|
const regionType = this.checkCptRegion(item)
|
||
|
|
const tempOnlyId = getRandomString(20)
|
||
|
|
if (regionType === 'top') {
|
||
|
|
if (this.topCptList.length > 0) {
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.addCpt(item, tempOnlyId, 1)
|
||
|
|
}
|
||
|
|
} else if (regionType === 'ban') {
|
||
|
|
if (this.banCptList.length > 0) {
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.addCpt(item, tempOnlyId, 2)
|
||
|
|
}
|
||
|
|
} else if (regionType === 'fixed') {
|
||
|
|
if (this.fixedCptList.length > 0) {
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.addCpt(item, tempOnlyId, 3)
|
||
|
|
}
|
||
|
|
} else if (regionType === 'cnt') {
|
||
|
|
this.addCpt(item, tempOnlyId, 4, (this.cntCptList.length + 1) * 10)
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 实例内容组件重置displayOrder属性
|
||
|
|
cntCptListResort () {
|
||
|
|
console.log('实例内容组件重置displayOrder属性')
|
||
|
|
this.cntCptList.forEach((item, index) => {
|
||
|
|
item.displayOrder = (index + 1) * 10
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 添加组件到实例
|
||
|
|
addCpt (item, tempOnlyId, region, displayOrder = 0) {
|
||
|
|
console.log('添加组件到实例')
|
||
|
|
let trueItem = cloneDeep(item)
|
||
|
|
trueItem.tempOnlyId = tempOnlyId
|
||
|
|
trueItem.region = region
|
||
|
|
trueItem.displayOrder = displayOrder
|
||
|
|
this.cptList.push(trueItem)
|
||
|
|
},
|
||
|
|
// 改变实例组件显示顺序
|
||
|
|
async changeCptDisplayOrder (item, type) {
|
||
|
|
console.log('改变实例组件显示顺序')
|
||
|
|
if (type === 'up') {
|
||
|
|
item.displayOrder -= 11
|
||
|
|
} else if (type === 'down') {
|
||
|
|
item.displayOrder += 11
|
||
|
|
}
|
||
|
|
await nextTick()
|
||
|
|
this.cntCptListResort()
|
||
|
|
},
|
||
|
|
// 删除组件
|
||
|
|
delCpt (item) {
|
||
|
|
this.cptList = this.cptList.filter(cptItem => item.tempOnlyId !== cptItem.tempOnlyId)
|
||
|
|
},
|
||
|
|
// 聚焦实例组件
|
||
|
|
focusCpt (item) {
|
||
|
|
console.log('聚焦实例组件')
|
||
|
|
if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
|
||
|
|
this.focusedCpt = { tempOnlyId: '' }
|
||
|
|
} else {
|
||
|
|
this.focusedCpt = { ...cloneDeep(item), demoIsUnfold: true, confIsUnfold: false }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 保存聚焦组件数据
|
||
|
|
saveFocusedCptData () {
|
||
|
|
const { focusedCpt } = this
|
||
|
|
this.cptList.forEach(item => {
|
||
|
|
if (item.tempOnlyId === focusedCpt.tempOnlyId) {
|
||
|
|
item.demoData = cloneDeep(focusedCpt.demoData)
|
||
|
|
item.configuration = cloneDeep(focusedCpt.configuration)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 重置聚焦组件数据
|
||
|
|
resetFocusedCptData () {
|
||
|
|
const { focusedCpt } = this
|
||
|
|
this.cptTypeListTiled.forEach(item => {
|
||
|
|
if (item.componentId === focusedCpt.componentId) {
|
||
|
|
focusedCpt.demoData = cloneDeep(item.demoData)
|
||
|
|
focusedCpt.configuration = cloneDeep(item.configuration)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
// 改变可用列表组件展开与收起
|
||
|
|
shiftCptTypeItemUnfold (item) {
|
||
|
|
item.isUnfold = !item.isUnfold
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|