elink-star
/
epmet-oper-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/dev' into dev

dev
wangchao 6 years ago
parent
29c694ce1c 2c79651194
commit
8e8bf0ba60
2 changed files with 141 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
  2. 214
      epmet-oper-web/src/views/modules/wx-mini/index-set.vue

15
epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
View File

@ -45,6 +45,7 @@
.d-item { .d-item {
margin: 5px 0; margin: 5px 0;
line-height: 24px; line-height: 24px;
overflow: hidden;
.d-item-region { .d-item-region {
margin-right: 4px; margin-right: 4px;
font-size: 10px; font-size: 10px;
@ -128,7 +129,7 @@
background-color: #f7f6f9; background-color: #f7f6f9;
box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2);
.mw-phone-topbar{ .mw-phone-topbar {
display: block; display: block;
width: 100%; width: 100%;
} }
@ -182,7 +183,7 @@
cursor: pointer; cursor: pointer;
&.z-focused { &.z-focused {
box-shadow: 0 0 12px 3px rgba(#67C23A, 0.5); box-shadow: 0 0 12px 3px rgba(#67c23a, 0.5);
} }
.d-cpt-operate { .d-cpt-operate {
@ -224,6 +225,16 @@
} }
} }
.mw-cpt-placeholder {
position: relative;
line-height: 40px;
text-align: center;
font-size: 17px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 76, 82, 1);
}
.mw-cpt-top_title { .mw-cpt-top_title {
position: relative; position: relative;

214
epmet-oper-web/src/views/modules/wx-mini/index-set.vue
View File

@ -12,9 +12,9 @@
<el-table-column label="小程序首页配置" fixed="right" header-align="center" align="center" width="150"> <el-table-column label="小程序首页配置" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" <el-button type="text" size="small"
@click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 0)">政府端</el-button> @click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 0)">居民端</el-button>
<el-button type="text" size="small" <el-button type="text" size="small"
@click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 1)">居民端</el-button> @click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 1)">政府端</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -29,7 +29,7 @@
@click="save">保存</el-button> @click="save">保存</el-button>
<el-button type="danger" <el-button type="danger"
@click="publish">发布</el-button> @click="publish">发布</el-button>
<span style="margin-left:20px; color:#aaa; font-size:13px">({{ wxIndex.customerName }} - {{ wxIndex.clientType===0 ? '政府端' : '居民端' }})</span> <span style="margin-left:20px; color:#aaa; font-size:13px">({{ wxIndex.customerName }} - {{ wxIndex.clientType===1 ? '政府端' : '居民端' }})</span>
<el-row class="wrap" :gutter="20"> <el-row class="wrap" :gutter="20">
<el-col :span="5"> <el-col :span="5">
@ -37,10 +37,10 @@
<div class="mw-cpt_type"> <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-function" v-show="item.componentList.length > 0" :key="item.functionId" v-for="item in cptTypeList">
<div class="d-info" @click="shiftCptTypeItemUnfold(item)"> <div class="d-info" @click="shiftCptTypeItemUnfold(item)">
<img v-if="item.functionId==1" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt1.png"> <img v-if="item.functionName=='议事厅'" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt1.png">
<img v-else-if="item.functionId==2" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt2.png"> <img v-else-if="item.functionName=='社群'" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt2.png">
<img v-else-if="item.functionId==3" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt3.png"> <img v-else-if="item.functionName=='党建声音'" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt3.png">
<img v-else-if="item.functionId==4" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt4.png"> <img v-else-if="item.functionName=='消息通知'" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt4.png">
<img v-else class="d-ico" src="@/assets/img/modules/wx-mini/index-set/common-cpt.png"> <img v-else class="d-ico" src="@/assets/img/modules/wx-mini/index-set/common-cpt.png">
<span class="d-name">{{ item.functionName }}</span> <span class="d-name">{{ item.functionName }}</span>
@ -85,14 +85,18 @@
<img class="d-cpt-avatar" v-if="item.demoData.avatar" :src="item.demoData.avatar"> <img class="d-cpt-avatar" v-if="item.demoData.avatar" :src="item.demoData.avatar">
<img class="d-cpt-avatar" v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png"> <img class="d-cpt-avatar" v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png">
</div> </div>
</div>
<div class="d-cpt-operate z-small" <div class="mw-cpt-placeholder" v-else>
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" <div class="d-cpt-wrap">
@click.stop> {{ item.componentName }}
<div class="d-cpt-btn" @click="delCpt(item)"> </div>
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> </div>
<p>删除</p> <div class="d-cpt-operate z-small"
</div> v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
@click.stop>
<div class="d-cpt-btn" @click="delCpt(item)">
<img src="@/assets/img/modules/wx-mini/index-set/del.png">
<p>删除</p>
</div> </div>
</div> </div>
</div> </div>
@ -117,14 +121,18 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="d-cpt-operate z-small" <div class="mw-cpt-placeholder" v-else>
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" <div class="d-cpt-wrap">
@click.stop> {{ item.componentName }}
<div class="d-cpt-btn" @click="delCpt(item)"> </div>
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> </div>
<p>删除</p> <div class="d-cpt-operate z-small"
</div> v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
@click.stop>
<div class="d-cpt-btn" @click="delCpt(item)">
<img src="@/assets/img/modules/wx-mini/index-set/del.png">
<p>删除</p>
</div> </div>
</div> </div>
</div> </div>
@ -141,14 +149,18 @@
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/msg.png"> <img v-else src="@/assets/img/modules/wx-mini/index-set/page/msg.png">
<span>{{ item.demoData.text }}</span> <span>{{ item.demoData.text }}</span>
</div> </div>
</div>
<div class="d-cpt-operate z-small" <div class="mw-cpt-placeholder" v-else>
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" <div class="d-cpt-wrap">
@click.stop> {{ item.componentName }}
<div class="d-cpt-btn" @click="delCpt(item)"> </div>
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> </div>
<p>删除</p> <div class="d-cpt-operate z-small"
</div> v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
@click.stop>
<div class="d-cpt-btn" @click="delCpt(item)">
<img src="@/assets/img/modules/wx-mini/index-set/del.png">
<p>删除</p>
</div> </div>
</div> </div>
</div> </div>
@ -177,7 +189,7 @@
</div> </div>
</div> </div>
<div class="mw-cpt-cnt_menus" <div class="mw-cpt-cnt_menus"
v-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'"> v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
<div class="d-cpt-wrap"> <div class="d-cpt-wrap">
<div class="list"> <div class="list">
<div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list"> <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
@ -192,7 +204,7 @@
</div> </div>
</div> </div>
<div class="mw-cpt-cnt_groups" <div class="mw-cpt-cnt_groups"
v-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'"> v-else-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">
<div class="d-cpt-wrap"> <div class="d-cpt-wrap">
<div class="list"> <div class="list">
<div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list"> <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
@ -219,6 +231,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mw-cpt-placeholder" v-else>
<div class="d-cpt-wrap">
{{ item.componentName }}
</div>
</div>
<div class="d-cpt-operate" <div class="d-cpt-operate"
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
@click.stop> @click.stop>
@ -316,6 +333,47 @@ export default {
functionName: '通用组件', functionName: '通用组件',
functionType: 1, // 1通用 2功能 functionType: 1, // 1通用 2功能
isUnfold: true, isUnfold: true,
componentList: [
{
componentId: '7',
componentName: '新闻列表',
componentFrontId: 'resi-functionList-hall-hotSubjectList',
region: 'functionList',
configuration: {
// bgc: '#fff'
},
demoData: {
list: [
{
pic: '',
title: '我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题',
author: '大港路党支部',
date: '2020-01-02'
},
{
pic: '',
title: '我是新闻标题',
author: '大港路党支部',
date: '2020-01-02'
},
{
pic: '',
title: '我是新闻标题',
author: '大港路党支部',
date: '2020-01-02'
}
]
},
configurationDescription: ''
}
]
},
// 功能组件
{
functionId: '1',
functionName: '议事厅',
functionType: 2, // 1通用 2功能
isUnfold: false,
componentList: [ componentList: [
{ {
componentId: '1', componentId: '1',
@ -329,6 +387,7 @@ export default {
avatar: '', avatar: '',
title: '青岛市市北区大港路第二网格' title: '青岛市市北区大港路第二网格'
}, },
region: 'titleList',
configurationDescription: '请配置具体内容' configurationDescription: '请配置具体内容'
}, },
{ {
@ -342,6 +401,7 @@ export default {
pic: '', pic: '',
title: '轮播图新闻标题' title: '轮播图新闻标题'
}, },
region: 'topList',
configurationDescription: '请配置具体内容' configurationDescription: '请配置具体内容'
}, },
{ {
@ -355,21 +415,14 @@ export default {
ico: '', ico: '',
text: '有新消息！' text: '有新消息！'
}, },
region: 'floatingList',
configurationDescription: '' configurationDescription: ''
} },
]
},
// 功能组件
{
functionId: '1',
functionName: '议事厅',
functionType: 2, // 1通用 2功能
isUnfold: false,
componentList: [
{ {
componentId: '5', componentId: '5',
componentName: '功能菜单', componentName: '功能菜单',
componentFrontId: 'resi-functionList-extend-moreFunctionIcons', componentFrontId: 'resi-functionList-extend-moreFunctionIcons',
region: 'functionList',
configuration: { configuration: {
// bgc: '#eee' // bgc: '#eee'
}, },
@ -399,6 +452,7 @@ export default {
componentId: '6', componentId: '6',
componentName: '热门群', componentName: '热门群',
componentFrontId: 'resi-functionList-group-recommendGroupSlider', componentFrontId: 'resi-functionList-group-recommendGroupSlider',
region: 'functionList',
configuration: { configuration: {
// bgc: '#fff' // bgc: '#fff'
}, },
@ -434,37 +488,6 @@ export default {
] ]
}, },
configurationDescription: '' configurationDescription: ''
},
{
componentId: '7',
componentName: '新闻列表',
componentFrontId: 'resi-functionList-hall-hotSubjectList',
configuration: {
// bgc: '#fff'
},
demoData: {
list: [
{
pic: '',
title: '我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题',
author: '大港路党支部',
date: '2020-01-02'
},
{
pic: '',
title: '我是新闻标题',
author: '大港路党支部',
date: '2020-01-02'
},
{
pic: '',
title: '我是新闻标题',
author: '大港路党支部',
date: '2020-01-02'
}
]
},
configurationDescription: ''
} }
] ]
} }
@ -568,6 +591,7 @@ export default {
await this.getCptTypeList() await this.getCptTypeList()
await this.getCptList() await this.getCptList()
this.toStep(2) this.toStep(2)
this.cleanFocusCpt()
loadingInstance.close() loadingInstance.close()
}, },
processBackendCptData (item) { processBackendCptData (item) {
@ -710,15 +734,27 @@ export default {
}, },
// 判断组件所属区域类别 // 判断组件所属区域类别
checkCptRegion (item) { checkCptRegion (item) {
const { componentFrontId } = item const { region } = item
const fun = name => name === componentFrontId // const { componentFrontId } = item
if (['resi-titleList-home-gridNameTitle'].findIndex(fun) !== -1) { // const fun = name => name === componentFrontId
// if (['resi-titleList-home-gridNameTitle'].findIndex(fun) !== -1) {
// return 'top'
// } else if (['resi-topList-voice-hotNewsSwiper'].findIndex(fun) !== -1) {
// return 'ban'
// } else if (['resi-functionList-extend-moreFunctionIcons', 'resi-functionList-group-recommendGroupSlider', 'resi-functionList-hall-hotSubjectList'].findIndex(fun) !== -1) {
// return 'cnt'
// } else if (['resi-floatingList-mine-newMessageButton'].findIndex(fun) !== -1) {
// return 'fixed'
// } else {
// return 'none'
// }
if (region === 'titleList') {
return 'top' return 'top'
} else if (['resi-topList-voice-hotNewsSwiper'].findIndex(fun) !== -1) { } else if (region === 'topList') {
return 'ban' return 'ban'
} else if (['resi-functionList-extend-moreFunctionIcons', 'resi-functionList-group-recommendGroupSlider', 'resi-functionList-hall-hotSubjectList'].findIndex(fun) !== -1) { } else if (region === 'functionList') {
return 'cnt' return 'cnt'
} else if (['resi-floatingList-mine-newMessageButton'].findIndex(fun) !== -1) { } else if (region === 'floatingList') {
return 'fixed' return 'fixed'
} else { } else {
return 'none' return 'none'
@ -727,8 +763,10 @@ export default {
// 判断组件是否可用复用 // 判断组件是否可用复用
checkCptReuse (item) { checkCptReuse (item) {
const { componentFrontId } = item const { componentFrontId } = item
const reuseList = this.cptTypeList[0].componentList.map(v => v.componentFrontId)
const fun = name => name === componentFrontId const fun = name => name === componentFrontId
return ['resi-functionList-hall-hotSubjectList'].findIndex(fun) !== -1 // return ['resi-functionList-hall-hotSubjectList'].findIndex(fun) !== -1
return reuseList.findIndex(fun) !== -1
}, },
// 根据所属区域简称得到名字 // 根据所属区域简称得到名字
getCptRegionName (id) { getCptRegionName (id) {
@ -747,19 +785,19 @@ export default {
const tempOnlyId = getRandomString(20) const tempOnlyId = getRandomString(20)
if (regionType === 'top') { if (regionType === 'top') {
if (this.topCptList.length > 0) { if (this.topCptList.length > 0) {
this.$message('标题区已有组件，请删除后再添加')
} else { } else {
this.addCpt(item, tempOnlyId, 1) this.addCpt(item, tempOnlyId, 1)
} }
} else if (regionType === 'ban') { } else if (regionType === 'ban') {
if (this.banCptList.length > 0) { if (this.banCptList.length > 0) {
this.$message('置顶区已有组件，请删除后再添加')
} else { } else {
this.addCpt(item, tempOnlyId, 2) this.addCpt(item, tempOnlyId, 2)
} }
} else if (regionType === 'fixed') { } else if (regionType === 'fixed') {
if (this.fixedCptList.length > 0) { if (this.fixedCptList.length > 0) {
this.$message('浮窗区已有组件，请删除后再添加')
} else { } else {
this.addCpt(item, tempOnlyId, 3) this.addCpt(item, tempOnlyId, 3)
} }
@ -781,7 +819,7 @@ export default {
console.log('添加组件到实例') console.log('添加组件到实例')
let trueItem = cloneDeep(item) let trueItem = cloneDeep(item)
trueItem.tempOnlyId = tempOnlyId trueItem.tempOnlyId = tempOnlyId
trueItem.region = region trueItem.localRegion = region
trueItem.displayOrder = displayOrder trueItem.displayOrder = displayOrder
this.cptList.push(trueItem) this.cptList.push(trueItem)
}, },
@ -807,12 +845,16 @@ export default {
checkExistCpt (item) { checkExistCpt (item) {
return this.cptList.some(cptItem => item.componentFrontId === cptItem.componentFrontId) return this.cptList.some(cptItem => item.componentFrontId === cptItem.componentFrontId)
}, },
// 清空聚焦实例组件
cleanFocusCpt () {
this.focusedCpt = { tempOnlyId: '' }
},
// 聚焦实例组件 // 聚焦实例组件
focusCpt (item) { focusCpt (item) {
console.log('聚焦实例组件') console.log('聚焦实例组件')
if (this.isInPreview) return if (this.isInPreview) return
if (this.focusedCpt.tempOnlyId === item.tempOnlyId) { if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
this.focusedCpt = { tempOnlyId: '' } this.cleanFocusCpt()
} else { } else {
this.focusedCpt = { ...cloneDeep(item), demoData: JSON.stringify(item.demoData), configuration: JSON.stringify(item.configuration), demoIsUnfold: true, confIsUnfold: false } this.focusedCpt = { ...cloneDeep(item), demoData: JSON.stringify(item.demoData), configuration: JSON.stringify(item.configuration), demoIsUnfold: true, confIsUnfold: false }
} }

Write Preview
Loading…
Cancel
Save