jiangyy
5 years ago
6 changed files with 1214 additions and 5 deletions
@ -0,0 +1,877 @@ |
|||
<template> |
|||
<div> |
|||
<el-card v-show="step==1" |
|||
shadow="never" |
|||
class="aui-card--fill"> |
|||
<el-button type="text" |
|||
size="small" |
|||
@click="startSetWxIndex('', '', 0)">居民端</el-button> |
|||
<el-button type="text" |
|||
size="small" |
|||
@click="startSetWxIndex('', '', 1)">工作端</el-button> |
|||
</el-card> |
|||
|
|||
<div class="m-wx_index" |
|||
v-show="step==2"> |
|||
<el-button type="default" |
|||
@click="toStep(1)">取消返回</el-button> |
|||
<el-button type="info" |
|||
@click="isInPreview = true">预览</el-button> |
|||
<el-button type="success" |
|||
@click="save">保存</el-button> |
|||
<!-- <el-button type="danger" |
|||
@click="publish">发布</el-button> --> |
|||
<span style="margin-left:20px; color:#aaa; font-size:13px">({{ wxIndex.clientType===1 ? '工作端' : '居民端' }})</span> |
|||
|
|||
<el-row class="wrap" |
|||
:gutter="20"> |
|||
<el-col :span="5"> |
|||
<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.functionName=='议事厅'" |
|||
class="d-ico" |
|||
src="@/assets/img/modules/wx-mini/index-set/function-cpt1.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.functionName=='党建声音'" |
|||
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-cpt4.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> |
|||
|
|||
<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-region">({{ getCptRegionName(checkCptRegion(cptItem)) }})</span> |
|||
<span class="d-item-name">{{ cptItem.componentName }}</span> |
|||
<span class="d-item-btn z-disabled" |
|||
v-if="!checkCptReuse(cptItem) && checkExistCpt(cptItem)">已添加</span> |
|||
<span class="d-item-btn" |
|||
v-else |
|||
@click="beforeAddCpt(cptItem)"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/add.png"> |
|||
<span>添加</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="13"> |
|||
<div class="mw-show" |
|||
:class="{'z-preview': isInPreview}"> |
|||
<div v-show="isInPreview" |
|||
class="mw-show-close"> |
|||
<el-button type="default" |
|||
@click="isInPreview = false" |
|||
icon="el-icon-close" |
|||
circle></el-button> |
|||
</div> |
|||
<div class="mw-phone"> |
|||
<img class="mw-phone-topbar" |
|||
v-show="isInPreview" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/wx-top.png"> |
|||
|
|||
<div class="mw-phone-top" |
|||
v-show="!isInPreview || topCptList.length>0" |
|||
:class="{'z-none': !isInPreview}"> |
|||
<div class="mw-phone-hint" |
|||
v-show="!isInPreview" |
|||
:class="{'z-out-left': topCptList.length>0}">（{{ getCptRegionName('top') }}）</div> |
|||
<cpt-item :item="item" |
|||
:key="item.tempOnlyId" |
|||
:is-focused="focusedCpt.tempOnlyId===item.tempOnlyId" |
|||
@del="delCpt" |
|||
@sort="changeCptDisplayOrder" |
|||
@focus="focusCpt" |
|||
v-for="item in topCptList"></cpt-item> |
|||
</div> |
|||
<div class="mw-phone-ban" |
|||
v-show="!isInPreview || banCptList.length>0" |
|||
:class="{'z-none': !isInPreview}"> |
|||
<div class="mw-phone-hint" |
|||
v-show="!isInPreview" |
|||
:class="{'z-out-left': banCptList.length>0}">（{{ getCptRegionName('ban') }}）</div> |
|||
<cpt-item :item="item" |
|||
:key="item.tempOnlyId" |
|||
:is-focused="focusedCpt.tempOnlyId===item.tempOnlyId" |
|||
@del="delCpt" |
|||
@sort="changeCptDisplayOrder" |
|||
@focus="focusCpt" |
|||
v-for="item in banCptList"></cpt-item> |
|||
</div> |
|||
<div class="mw-phone-fixed" |
|||
v-show="!isInPreview || fixedCptList.length>0" |
|||
:class="{'z-none': !isInPreview}"> |
|||
<div class="mw-phone-hint" |
|||
v-show="!isInPreview" |
|||
:class="{'z-out-down': fixedCptList.length>0}">（{{ getCptRegionName('fixed') }}）</div> |
|||
<cpt-item :item="item" |
|||
:key="item.tempOnlyId" |
|||
:is-focused="focusedCpt.tempOnlyId===item.tempOnlyId" |
|||
@del="delCpt" |
|||
@sort="changeCptDisplayOrder" |
|||
@focus="focusCpt" |
|||
v-for="item in fixedCptList"></cpt-item> |
|||
</div> |
|||
<div class="mw-phone-cnt" |
|||
v-show="!isInPreview || cntCptList.length>0" |
|||
:class="{'z-none': !isInPreview}"> |
|||
<div class="mw-phone-hint" |
|||
v-show="!isInPreview" |
|||
:class="{'z-out-left': cntCptList.length>0}">（{{ getCptRegionName('cnt') }}）</div> |
|||
<cpt-item :item="item" |
|||
:key="item.tempOnlyId" |
|||
:is-focused="focusedCpt.tempOnlyId===item.tempOnlyId" |
|||
@del="delCpt" |
|||
@sort="changeCptDisplayOrder" |
|||
@focus="focusCpt" |
|||
v-for="item in cntCptList"></cpt-item> |
|||
</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"> |
|||
<el-form-item> |
|||
<el-input type="textarea" |
|||
v-model="focusedCpt.demoData"></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"> |
|||
<el-form-item> |
|||
<el-input type="textarea" |
|||
v-model="focusedCpt.configuration"></el-input> |
|||
</el-form-item> |
|||
<div class="d-config-hint" |
|||
v-show="focusedCpt.configurationDescription"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/info.png"> |
|||
<span>{{ focusedCpt.configurationDescription }}</span> |
|||
</div> |
|||
</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 componentWxcpt from '@/components/wx-index/cpt-item' |
|||
import { Loading } from 'element-ui' |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
import getRandomString from 'dai-js/tools/getRandomString' |
|||
import cloneDeep from 'lodash/cloneDeep' |
|||
|
|||
// 处理获得mock测试接口地址 |
|||
const getMockFilterUrl = (url) => { |
|||
const usedMockTest = false |
|||
const mockBaseUrl = 'https://nei.netease.com/api/apimock/30f0251f1b7dc90a8c38e3c634ef2a8b/api' |
|||
if (usedMockTest) { |
|||
return mockBaseUrl + url |
|||
} else { |
|||
return url |
|||
} |
|||
} |
|||
|
|||
// 当前是否是开发环境 |
|||
const envIsDev = process.env.VUE_APP_NODE_ENV === 'dev' |
|||
|
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
const cptTypeListTestdata = [ |
|||
// 通用组件 |
|||
{ |
|||
functionId: '0', |
|||
functionName: '通用组件', |
|||
functionType: 1, // 1通用 2功能 |
|||
isUnfold: true, |
|||
componentList: [ |
|||
{ |
|||
componentId: '7', |
|||
componentName: '最新议题', |
|||
componentFrontId: 'resi-functionList-hall-latestIssueList', |
|||
region: 'functionList', |
|||
configuration: { |
|||
num: 3 |
|||
}, |
|||
demoData: { |
|||
list: [ |
|||
{ |
|||
avatar: '', |
|||
title: '最新议题的标题。最新议题的标题。最新议题的标题。最新议题的标题。', |
|||
content: '最新议题的内容，最新议题的内容，最新议题的内容。', |
|||
author: '山东路45号-刘女士', |
|||
date: '2020-01-02' |
|||
}, |
|||
{ |
|||
avatar: '', |
|||
title: '最新议题的标题。', |
|||
content: '最新议题的内容，最新议题的内容，最新议题的内容。', |
|||
author: '山东路45号-刘女士', |
|||
date: '2020-01-02' |
|||
}, |
|||
{ |
|||
avatar: '', |
|||
title: '最新议题的标题。', |
|||
content: '最新议题的内容，最新议题的内容，最新议题的内容。', |
|||
author: '山东路45号-刘女士', |
|||
date: '2020-01-02' |
|||
} |
|||
] |
|||
}, |
|||
configurationDescription: '' |
|||
}, |
|||
{ |
|||
componentId: '8', |
|||
componentName: '最新发布', |
|||
componentFrontId: 'resi-functionList-voice-newsList', |
|||
region: 'functionList', |
|||
configuration: { |
|||
num: 3 |
|||
}, |
|||
demoData: { |
|||
list: [ |
|||
{ |
|||
pic: '', |
|||
title: '新型冠状病毒检测重大突破！新型冠状病毒检测重大突破！！！', |
|||
author: '大港路党支部', |
|||
date: '2020-01-02' |
|||
}, |
|||
{ |
|||
pic: '', |
|||
title: '新型冠状病毒检测重大突破！', |
|||
author: '大港路党支部', |
|||
date: '2020-01-02' |
|||
}, |
|||
{ |
|||
pic: '', |
|||
title: '新型冠状病毒检测重大突破！', |
|||
author: '大港路党支部', |
|||
date: '2020-01-02' |
|||
} |
|||
] |
|||
}, |
|||
configurationDescription: '' |
|||
}, |
|||
{ |
|||
componentId: '9', |
|||
componentName: '结案项目', |
|||
componentFrontId: 'resi-functionList-hall-closedProjectList', |
|||
region: 'functionList', |
|||
configuration: { |
|||
num: 3 |
|||
}, |
|||
demoData: { |
|||
list: [ |
|||
{ |
|||
title: '结案项目的标题。', |
|||
content: '结案项目的内容，结案项目的内容，结案项目的内容。', |
|||
author: '党支部-卫生部门', |
|||
date: '2020-01-02' |
|||
}, |
|||
{ |
|||
title: '结案项目的标题。', |
|||
content: '结案项目的内容，结案项目的内容，结案项目的内容。', |
|||
author: '党支部-卫生部门', |
|||
date: '2020-01-02' |
|||
}, |
|||
{ |
|||
title: '结案项目的标题。', |
|||
content: '结案项目的内容，结案项目的内容，结案项目的内容。', |
|||
author: '党支部-卫生部门', |
|||
date: '2020-01-02' |
|||
} |
|||
] |
|||
}, |
|||
configurationDescription: '' |
|||
} |
|||
] |
|||
}, |
|||
// 功能组件 |
|||
{ |
|||
functionId: '1', |
|||
functionName: '议事厅', |
|||
functionType: 2, // 1通用 2功能 |
|||
isUnfold: false, |
|||
componentList: [ |
|||
{ |
|||
componentId: '1', |
|||
componentName: '顶部标题', |
|||
componentFrontId: 'resi-titleList-home-gridNameTitle', |
|||
configuration: { |
|||
// content: '' |
|||
}, |
|||
demoData: { |
|||
ico: '', |
|||
avatar: '', |
|||
title: '青岛市市北区大港路第二网格' |
|||
}, |
|||
region: 'titleList', |
|||
configurationDescription: '请配置具体内容' |
|||
}, |
|||
{ |
|||
componentId: '2', |
|||
componentName: '轮播图', |
|||
componentFrontId: 'resi-topList-voice-hotNewsSwiper', |
|||
configuration: { |
|||
// content: '' |
|||
}, |
|||
demoData: { |
|||
pic: '', |
|||
title: '轮播图新闻标题' |
|||
}, |
|||
region: 'topList', |
|||
configurationDescription: '请配置具体内容' |
|||
}, |
|||
{ |
|||
componentId: '3', |
|||
componentName: '消息通知', |
|||
componentFrontId: 'resi-floatingList-mine-newMessageButton', |
|||
configuration: { |
|||
// content: '' |
|||
}, |
|||
demoData: { |
|||
ico: '', |
|||
text: '有新消息！' |
|||
}, |
|||
region: 'floatingList', |
|||
configurationDescription: '' |
|||
}, |
|||
{ |
|||
componentId: '5', |
|||
componentName: '功能菜单', |
|||
componentFrontId: 'resi-functionList-extend-moreFunctionIcons', |
|||
region: 'functionList', |
|||
configuration: { |
|||
// bgc: '#eee' |
|||
}, |
|||
demoData: { |
|||
list: [ |
|||
{ |
|||
ico: '', |
|||
text: '议事厅' |
|||
}, |
|||
{ |
|||
ico: '', |
|||
text: '社群' |
|||
}, |
|||
{ |
|||
ico: '', |
|||
text: '党建声音' |
|||
}, |
|||
{ |
|||
ico: '', |
|||
text: '更多功能' |
|||
} |
|||
] |
|||
}, |
|||
configurationDescription: '' |
|||
}, |
|||
{ |
|||
componentId: '6', |
|||
componentName: '热门群', |
|||
componentFrontId: 'resi-functionList-group-recommendGroupSlider', |
|||
region: 'functionList', |
|||
configuration: { |
|||
// bgc: '#fff' |
|||
}, |
|||
demoData: { |
|||
list: [ |
|||
{ |
|||
ico: '', |
|||
no: '1', |
|||
avatar: '', |
|||
title: '群名称', |
|||
info1: '山东路45号-张三', |
|||
info2: '共240人', |
|||
info3: '党员11人' |
|||
}, |
|||
{ |
|||
ico: '', |
|||
no: '2', |
|||
avatar: '', |
|||
title: '群名称', |
|||
info1: '山东路45号-张三', |
|||
info2: '共240人', |
|||
info3: '党员11人' |
|||
}, |
|||
{ |
|||
ico: '', |
|||
no: '3', |
|||
avatar: '', |
|||
title: '群名称', |
|||
info1: '山东路45号-张三', |
|||
info2: '共240人', |
|||
info3: '党员11人' |
|||
} |
|||
] |
|||
}, |
|||
configurationDescription: '' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: getMockFilterUrl('/oper/crm/customer/getvalidcustomerlist'), |
|||
getDataListIsPage: false |
|||
}, |
|||
|
|||
dataList: !envIsDev ? [] : [ |
|||
{ |
|||
customerName: '测试1', |
|||
customerId: '1' |
|||
}, |
|||
{ |
|||
customerName: '测试2', |
|||
customerId: '2' |
|||
} |
|||
], |
|||
|
|||
// 步骤: 1列表选择 2首页配置 |
|||
step: 1, |
|||
|
|||
wxIndex: { |
|||
customerId: '', |
|||
customerName: '', |
|||
clientType: '' |
|||
}, |
|||
|
|||
// 在预览中状态 |
|||
isInPreview: false, |
|||
|
|||
// 可用列表 |
|||
cptTypeList: !envIsDev ? [] : cptTypeListTestdata, |
|||
// 当前应用组件列表 |
|||
cptList: [ |
|||
// { |
|||
// componentId: '1', |
|||
// componentName: '顶部标题', |
|||
// componentFrontId: 'top_title', |
|||
// configuration: { |
|||
// content: '青岛市党委' |
|||
// }, |
|||
// demoData: { |
|||
// content: '我是标题' |
|||
// }, |
|||
// configurationDescription: '请配置具体内容', |
|||
// displayOrder: 1, |
|||
// region: 1 // 区域 1top 2ban 3fixed 4cnt |
|||
// } |
|||
], |
|||
lastSavedCptList: [], |
|||
focusedCpt: { |
|||
tempOnlyId: '' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
components: { |
|||
'cpt-item': componentWxcpt |
|||
}, |
|||
|
|||
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 |
|||
console.log(this.wxIndex) |
|||
let loadingInstance = Loading.service() |
|||
await this.getCptTypeList() |
|||
await this.getCptList() |
|||
this.toStep(2) |
|||
this.cleanFocusCpt() |
|||
loadingInstance.close() |
|||
}, |
|||
processBackendCptData (item) { |
|||
let demoData = {} |
|||
let configuration = {} |
|||
const tempOnlyId = getRandomString(20) |
|||
try { |
|||
demoData = JSON.parse(item.demoData) |
|||
configuration = JSON.parse(item.configuration) |
|||
} catch (err) { |
|||
console.log(err) |
|||
} |
|||
return { tempOnlyId, ...item, demoData, configuration } |
|||
}, |
|||
// 获取用户可用组件列表 |
|||
getCptTypeList () { |
|||
const url = getMockFilterUrl('/oper/customize/customerhometemplate/getcomponentlist') |
|||
const { wxIndex: { clientType, customerId } } = this |
|||
return this.$http.post( |
|||
url, |
|||
{ clientType, customerId } |
|||
).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
let list = [{ |
|||
functionId: '0', |
|||
functionName: '通用组件', |
|||
functionType: 1, // 1通用 2功能 |
|||
isUnfold: true, |
|||
componentList: res.data.commonList.map(this.processBackendCptData) |
|||
}, ...res.data.functionList.map(item => { |
|||
return { |
|||
functionId: item.functionId, |
|||
functionName: item.functionName, |
|||
functionType: 2, // 1通用 2功能 |
|||
isUnfold: false, |
|||
componentList: item.componentList.map(this.processBackendCptData) |
|||
} |
|||
})] |
|||
this.cptTypeList = list |
|||
console.log('可用组件列表', list) |
|||
} |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
// 获取用户当前保存的组件列表 |
|||
getCptList () { |
|||
const url = getMockFilterUrl('/oper/customize/customerhometemplate/gethometemplate') |
|||
const { wxIndex: { clientType, customerId } } = this |
|||
return this.$http.post( |
|||
url, |
|||
{ clientType, customerId } |
|||
).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
let list = [ |
|||
...res.data.titleList, |
|||
...res.data.topList, |
|||
...res.data.functionList, |
|||
...res.data.floatingList |
|||
] |
|||
this.cptList = list.map(this.processBackendCptData) |
|||
this.lastSavedCptList = cloneDeep(this.cptList) |
|||
console.log('用户储存组件列表', list) |
|||
} |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
|
|||
// 保存配置 |
|||
save () { |
|||
console.log('保存配置') |
|||
const url = getMockFilterUrl('/oper/customize/customerhometemplate/savecustomerhometemplate') |
|||
const { wxIndex: { clientType, customerId }, cptList } = this |
|||
const componentList = cptList.map(item => { |
|||
return { |
|||
componentId: item.componentId, |
|||
region: item.region, |
|||
displayOrder: item.displayOrder, |
|||
demoData: JSON.stringify(item.demoData), |
|||
configuration: JSON.stringify(item.configuration) |
|||
} |
|||
}) |
|||
return this.$http.post( |
|||
url, |
|||
{ clientType, customerId, componentList } |
|||
).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log(res) |
|||
this.lastSavedCptList = cloneDeep(this.cptList) |
|||
return this.$message.success('保存成功') |
|||
} |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
// 发布配置 |
|||
publish () { |
|||
console.log('发布配置') |
|||
const url = getMockFilterUrl('/oper/customize/home/distributehomedesign') |
|||
const { wxIndex: { clientType, customerId }, cptList } = this |
|||
const componentList = cptList.map(item => { |
|||
return { |
|||
componentId: item.componentId, |
|||
region: item.region, |
|||
displayOrder: item.displayOrder, |
|||
demoData: JSON.stringify(item.demoData), |
|||
configuration: JSON.stringify(item.configuration) |
|||
} |
|||
}) |
|||
if (componentList.length === 0) { |
|||
return this.$message.error('您尚未选择任何组件，不能发布') |
|||
} |
|||
return this.$confirm('目前的设置会呈现在所有用户的小程序上，是否继续发布？', '确认发布', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
return this.$http.post( |
|||
url, |
|||
{ clientType, customerId, componentList } |
|||
).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log(res) |
|||
this.lastSavedCptList = cloneDeep(this.cptList) |
|||
return this.$message.success('发布成功') |
|||
} |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 判断组件所属区域类别 |
|||
checkCptRegion (item) { |
|||
const { region } = item |
|||
if (region === 'titleList') { |
|||
return 'top' |
|||
} else if (region === 'topList') { |
|||
return 'ban' |
|||
} else if (region === 'functionList') { |
|||
return 'cnt' |
|||
} else if (region === 'floatingList') { |
|||
return 'fixed' |
|||
} else { |
|||
return 'none' |
|||
} |
|||
}, |
|||
// 判断组件是否可用复用 |
|||
checkCptReuse (item) { |
|||
const { componentFrontId } = item |
|||
const reuseList = this.cptTypeList[0].componentList.map(v => v.componentFrontId) |
|||
const fun = name => name === componentFrontId |
|||
return reuseList.findIndex(fun) !== -1 |
|||
}, |
|||
// 根据所属区域简称得到名字 |
|||
getCptRegionName (id) { |
|||
return { |
|||
'top': '标题区', |
|||
'ban': '置顶区', |
|||
'fixed': '浮窗区', |
|||
'cnt': '功能区', |
|||
'none': '' |
|||
}[id] |
|||
}, |
|||
// 添加组件到实例-前验证 |
|||
beforeAddCpt (item) { |
|||
console.log('添加组件到实例-前验证') |
|||
const regionType = this.checkCptRegion(item) |
|||
const tempOnlyId = getRandomString(20) |
|||
if (regionType === 'top') { |
|||
if (this.topCptList.length > 0) { |
|||
this.$message('标题区已有组件，请删除后再添加') |
|||
} else { |
|||
this.addCpt(item, tempOnlyId) |
|||
} |
|||
} else if (regionType === 'ban') { |
|||
if (this.banCptList.length > 0) { |
|||
this.$message('置顶区已有组件，请删除后再添加') |
|||
} else { |
|||
this.addCpt(item, tempOnlyId) |
|||
} |
|||
} else if (regionType === 'fixed') { |
|||
if (this.fixedCptList.length > 0) { |
|||
this.$message('浮窗区已有组件，请删除后再添加') |
|||
} else { |
|||
this.addCpt(item, tempOnlyId) |
|||
} |
|||
} else if (regionType === 'cnt') { |
|||
this.cntCptListResort() |
|||
this.addCpt(item, tempOnlyId, (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, displayOrder = 0) { |
|||
console.log('添加组件到实例') |
|||
let trueItem = cloneDeep(item) |
|||
trueItem.tempOnlyId = tempOnlyId |
|||
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) |
|||
if (this.focusedCpt.tempOnlyId === item.tempOnlyId) { |
|||
this.focusedCpt = { tempOnlyId: '' } |
|||
} |
|||
this.cntCptListResort() |
|||
}, |
|||
// 检测实例中是否存在某种类型组件 |
|||
checkExistCpt (item) { |
|||
return this.cptList.some(cptItem => item.componentFrontId === cptItem.componentFrontId) |
|||
}, |
|||
// 清空聚焦实例组件 |
|||
cleanFocusCpt () { |
|||
this.focusedCpt = { tempOnlyId: '' } |
|||
}, |
|||
// 聚焦实例组件 |
|||
focusCpt (item) { |
|||
console.log('聚焦实例组件') |
|||
if (this.isInPreview) return |
|||
if (this.focusedCpt.tempOnlyId === item.tempOnlyId) { |
|||
this.cleanFocusCpt() |
|||
} else { |
|||
this.focusedCpt = { ...cloneDeep(item), demoData: JSON.stringify(item.demoData), configuration: JSON.stringify(item.configuration), demoIsUnfold: true, confIsUnfold: false } |
|||
} |
|||
}, |
|||
// 保存聚焦组件数据 |
|||
saveFocusedCptData () { |
|||
const { focusedCpt } = this |
|||
this.cptList.forEach(item => { |
|||
if (item.tempOnlyId === focusedCpt.tempOnlyId) { |
|||
try { |
|||
item.demoData = JSON.parse(focusedCpt.demoData) |
|||
item.configuration = JSON.parse(focusedCpt.configuration) |
|||
} catch (err) { |
|||
this.$alert('json数据格式有误', '无法保存', { |
|||
confirmButtonText: '确定' |
|||
}) |
|||
console.log(err) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 重置聚焦组件数据，重置为上次整体保存时的数据 |
|||
resetFocusedCptData () { |
|||
const { focusedCpt } = this |
|||
const fun = item => { |
|||
if (item.tempOnlyId === focusedCpt.tempOnlyId) { |
|||
focusedCpt.demoData = JSON.stringify(item.demoData) |
|||
focusedCpt.configuration = JSON.stringify(item.configuration) |
|||
return true |
|||
} else { |
|||
return false |
|||
} |
|||
} |
|||
if (!this.lastSavedCptList.some(fun)) { |
|||
this.cptTypeListTiled.forEach(item => { |
|||
if (item.componentFrontId === focusedCpt.componentFrontId) { |
|||
focusedCpt.demoData = JSON.stringify(item.demoData) |
|||
focusedCpt.configuration = JSON.stringify(item.configuration) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 改变可用列表组件展开与收起 |
|||
shiftCptTypeItemUnfold (item) { |
|||
item.isUnfold = !item.isUnfold |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px"> |
|||
<el-form-item prop="type" :label="$t('menu.type')" size="mini"> |
|||
<el-radio-group v-model="dataForm.type" :disabled="!!dataForm.id"> |
|||
<el-radio :label="0">{{ $t('menu.type0') }}</el-radio> |
|||
<el-radio :label="1">{{ $t('menu.type1') }}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item prop="name" :label="$t('menu.name')"> |
|||
<el-input v-model="dataForm.name" :placeholder="$t('menu.name')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list"> |
|||
<el-popover v-model="menuListVisible" ref="menuListPopover" placement="bottom-start" trigger="click"> |
|||
<el-tree |
|||
:data="menuList" |
|||
:props="{ label: 'name', children: 'children' }" |
|||
node-key="id" |
|||
ref="menuListTree" |
|||
:highlight-current="true" |
|||
:expand-on-click-node="false" |
|||
accordion |
|||
@current-change="menuListTreeCurrentChangeHandle"> |
|||
</el-tree> |
|||
</el-popover> |
|||
<el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" :placeholder="$t('menu.parentName')"> |
|||
<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')"> |
|||
<el-input v-model="dataForm.url" :placeholder="$t('menu.url')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="showFlag" :label="$t('menu.showFlag')" size="mini"> |
|||
<el-radio-group v-model="dataForm.showFlag"> |
|||
<el-radio :label="1">{{ $t('menu.show1') }}</el-radio> |
|||
<el-radio :label="0">{{ $t('menu.show2') }}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item prop="sort" :label="$t('menu.sort')"> |
|||
<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list"> |
|||
<el-popover v-model="iconListVisible" ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-sys__menu-icon-popover"> |
|||
<div class="mod-sys__menu-icon-inner"> |
|||
<div class="mod-sys__menu-icon-list"> |
|||
<el-button |
|||
v-for="(item, index) in iconList" |
|||
:key="index" |
|||
@click="iconListCurrentChangeHandle(item)" |
|||
:class="{ 'is-active': dataForm.icon === item }"> |
|||
<svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg> |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
<el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" :placeholder="$t('menu.icon')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.type === 1" prop="permissions" :label="$t('menu.permissions')"> |
|||
<el-input v-model="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-for="(item, index) in dataForm.resourceList" |
|||
:key="item.key" |
|||
:prop="`resourceList.${index}.resourceUrl`" |
|||
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" |
|||
:label="index === 0 ? $t('menu.resource') : ''" |
|||
class="resource-list"> |
|||
<el-row> |
|||
<el-col :span="22"> |
|||
<el-input v-model="item.resourceUrl" :placeholder="$t('menu.resourceUrl')"> |
|||
<el-select v-model="item.resourceMethod" slot="prepend" :placeholder="$t('menu.resourceMethod')"> |
|||
<el-option label="GET" value="GET"></el-option> |
|||
<el-option label="POST" value="POST"></el-option> |
|||
<el-option label="PUT" value="PUT"></el-option> |
|||
<el-option label="DELETE" value="DELETE"></el-option> |
|||
</el-select> |
|||
</el-input> |
|||
</el-col> |
|||
<el-col :span="2" class="text-center"> |
|||
<el-button @click="resourceDeleteHandle(item)" size="small" type="text">{{ $t('delete') }}</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
<el-form-item :label="dataForm.resourceList==null || dataForm.resourceList.length <= 0 ? $t('menu.resource') : ''"> |
|||
<el-button @click="resourceAddHandle()" class="aui-button--dashed w-percent-100">{{ $t('menu.resourceAddItem') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import { getIconList } from '@/utils' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
menuList: [], |
|||
menuListVisible: false, |
|||
iconList: [], |
|||
iconListVisible: false, |
|||
dataForm: { |
|||
id: '', |
|||
type: 0, |
|||
name: '', |
|||
pid: '0', |
|||
parentName: '', |
|||
url: '', |
|||
showFlag: 1, |
|||
resourceList: [], |
|||
permissions: '', |
|||
sort: 0, |
|||
icon: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
name: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
parentName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'dataForm.type' (val) { |
|||
this.$refs['dataForm'].clearValidate() |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
this.iconList = getIconList() |
|||
this.dataForm.parentName = this.$t('menu.parentNameDefault') |
|||
this.dataForm.resourceList = [] |
|||
this.getMenuList().then(() => { |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取菜单列表 |
|||
getMenuList () { |
|||
return this.$http.get('/gov/access/menu/list?type=0').then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.menuList = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/gov/access/menu/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
if (this.dataForm.pid === '0') { |
|||
return this.deptListTreeSetDefaultHandle() |
|||
} |
|||
this.$refs.menuListTree.setCurrentKey(this.dataForm.pid) |
|||
}).catch(() => {}) |
|||
}, |
|||
// 上级菜单树, 设置默认值 |
|||
deptListTreeSetDefaultHandle () { |
|||
this.dataForm.pid = '0' |
|||
this.dataForm.parentName = this.$t('menu.parentNameDefault') |
|||
}, |
|||
// 上级菜单树, 选中 |
|||
menuListTreeCurrentChangeHandle (data) { |
|||
this.dataForm.pid = data.id |
|||
this.dataForm.parentName = data.name |
|||
this.menuListVisible = false |
|||
}, |
|||
// 图标, 选中 |
|||
iconListCurrentChangeHandle (icon) { |
|||
this.dataForm.icon = icon |
|||
this.iconListVisible = false |
|||
}, |
|||
// 菜单资源, 添加 |
|||
resourceAddHandle () { |
|||
this.dataForm.resourceList.push({ |
|||
key: new Date().getTime(), |
|||
resourceMethod: 'GET', |
|||
resourceUrl: '' |
|||
}) |
|||
}, |
|||
// 菜单资源, 删除 |
|||
resourceDeleteHandle (resource) { |
|||
this.dataForm.resourceList = this.dataForm.resourceList.filter(item => item.key !== resource.key) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/gov/access/menu', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.mod-sys__menu { |
|||
.resource-list { |
|||
.el-select .el-input__inner { |
|||
min-width: 110px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.menu-list, |
|||
.icon-list { |
|||
.el-input__inner, |
|||
.el-input__suffix { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
&-icon-popover { |
|||
width: 458px; |
|||
overflow: hidden; |
|||
} |
|||
&-icon-inner { |
|||
width: 478px; |
|||
max-height: 258px; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
&-icon-list { |
|||
width: 458px; |
|||
padding: 0; |
|||
margin: -8px 0 0 -8px; |
|||
> .el-button { |
|||
padding: 8px; |
|||
margin: 8px 0 0 8px; |
|||
> span { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
width: 18px; |
|||
height: 18px; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,55 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-sys__menu"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;"> |
|||
<el-table-column prop="name" :label="$t('menu.name')" header-align="center" min-width="150"></el-table-column> |
|||
<el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center"> |
|||
<template slot-scope="scope"> |
|||
<svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${scope.row.icon}`"></use></svg> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="type" :label="$t('menu.type')" header-align="center" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-tag v-if="scope.row.type === 0" size="small">{{ $t('menu.type0') }}</el-tag> |
|||
<el-tag v-else size="small" type="info">{{ $t('menu.type1') }}</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="sort" :label="$t('menu.sort')" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="150" :show-overflow-tooltip="true" ></el-table-column> |
|||
<el-table-column prop="permissions" :label="$t('menu.permissions')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="$hasPermission('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
|||
<el-button v-if="$hasPermission('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './menu-add-or-update' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/gov/access/menu/list', |
|||
deleteURL: '/gov/access/menu' |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue