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.
360 lines
10 KiB
360 lines
10 KiB
<template>
|
|
<el-dialog :visible.sync="visible"
|
|
title="订阅消息"
|
|
:close-on-click-modal="false"
|
|
:before-close="handleClose"
|
|
:close-on-press-escape="false"
|
|
:width="diaWidth+'%'"
|
|
:top="diaTop">
|
|
<div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="9">
|
|
<el-card shadow="never"
|
|
class="box-card">
|
|
<div :style="{height:rowHeight}">
|
|
<div class="div_title">消息示例</div>
|
|
|
|
<div class=" div_keywords_sel div_left">
|
|
|
|
<div class="div_left_item"
|
|
v-for="(item,index) in kidSelNameList"
|
|
:key="item">
|
|
|
|
<el-row :gutter="10">
|
|
<el-col style=" text-align: left"
|
|
:span="9">
|
|
<span>{{item}}:</span>
|
|
</el-col>
|
|
<el-col :span="15">
|
|
<span>{{kidSelExampleList[index]}}</span>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="15">
|
|
<el-card shadow="never"
|
|
class="box-card card_right">
|
|
|
|
<el-form :style="{height:rowHeight}"
|
|
:inline="false"
|
|
:model="dataForm"
|
|
ref="dataForm"
|
|
:label-width="'120px'">
|
|
|
|
<el-form-item label=""
|
|
prop="isSync">
|
|
<el-checkbox v-model="dataForm.isSync">同步到所有客户</el-checkbox>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="App类型"
|
|
prop="appId">
|
|
<el-select class="item_width_1"
|
|
v-model="dataForm.appId"
|
|
placeholder="请选择"
|
|
clearable>
|
|
<el-option v-for="item in fromAppList"
|
|
:key="item.dictValue"
|
|
:label="item.dictName"
|
|
:value="item.dictValue">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="配置关键字">
|
|
<div class="item_width_1 div_keywords">
|
|
<el-checkbox-group v-model="kidSelNameList"
|
|
:min="1"
|
|
:max="5">
|
|
<div class="item_width_1 div_checkbox"
|
|
v-for="(item,index) in kidAllName"
|
|
:key="item">
|
|
<el-checkbox @change="function (val) { return checkboxChange(val, item,index)}"
|
|
:label="item">{{item}}</el-checkbox>
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="'已选择（'+kidSelNameList.length+'/'+kidAllList.length+'）'">
|
|
<div class="item_width_1 div_keywords_sel">
|
|
|
|
<div class="item_width_1 div_checkbox_sel"
|
|
v-for="(item,index) in kidSelNameList"
|
|
:key="item">{{item}}
|
|
|
|
<el-button v-if="index>0"
|
|
type="text"
|
|
class="btn_up"
|
|
@click.stop="moveUp(index)"
|
|
icon="el-icon-top"></el-button>
|
|
</div>
|
|
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="服务场景描述"
|
|
prop="sceneDesc">
|
|
|
|
<el-input class="item_width_1"
|
|
:maxlength="5"
|
|
:minlength="2"
|
|
v-model="dataForm.sceneDesc"
|
|
placeholder="服务场景描述"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
<template slot="footer">
|
|
<el-button @click="handleClose()">{{ $t('cancel') }}</el-button>
|
|
<el-button type="primary"
|
|
@click="saveForm()">{{ $t('confirm') }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { requestPost } from "@/js/dai/request";
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
|
|
|
let loading// 加载动画
|
|
export default {
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
workAppid: '',
|
|
resiAppid: '',
|
|
|
|
dataForm: {
|
|
isSync: true,
|
|
appId: '',
|
|
tid: '',
|
|
title: '',
|
|
type: Number,
|
|
sceneDesc: '',
|
|
kidList: [],
|
|
nameList: []
|
|
},
|
|
|
|
kidAllList: [],//全部的关键字对象
|
|
kidAllName: [],//全部的关键字name
|
|
kidSelNameList: [],//选择的关键字name
|
|
kidSelIdList: [],//选择的关键字id
|
|
kidSelExampleList: [],//选择的关键字example
|
|
}
|
|
},
|
|
created () {
|
|
// this.queryFunctionList()
|
|
},
|
|
|
|
methods: {
|
|
init (workAppid, resiAppid, row) {
|
|
this.workAppid = workAppid
|
|
this.resiAppid = resiAppid
|
|
this.dataForm.appId = resiAppid
|
|
this.dataForm.tid = row.tid
|
|
this.dataForm.type = row.type
|
|
this.dataForm.title = row.title
|
|
this.dataForm.isSync = true
|
|
|
|
this.visible = true
|
|
|
|
this.getkeywords()
|
|
|
|
},
|
|
async getkeywords () {
|
|
this.startLoading()
|
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/third/subscribe/getkeywords'
|
|
const url = 'https://epmet-cloud.elinkservice.cn/api/third/subscribe/getkeywords'
|
|
let _data = {
|
|
appId: this.resiAppid,
|
|
titleId: this.dataForm.tid
|
|
}
|
|
const { data, code, msg } = await requestPost(url, _data)
|
|
if (code === 0) {
|
|
this.kidAllList = data
|
|
this.kidAllList.forEach(item => {
|
|
this.kidAllName.push(item.name)
|
|
})
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
this.endLoading()
|
|
},
|
|
moveUp (index) {
|
|
this.kidSelNameList.splice(index - 1, 1, ...this.kidSelNameList.splice(index, 1, this.kidSelNameList[index - 1]))
|
|
this.kidSelIdList.splice(index - 1, 1, ...this.kidSelIdList.splice(index, 1, this.kidSelIdList[index - 1]))
|
|
this.kidSelExampleList.splice(index - 1, 1, ...this.kidSelExampleList.splice(index, 1, this.kidSelExampleList[index - 1]))
|
|
// console.log(this.kidSelNameList)
|
|
// console.log(this.kidSelIdList)
|
|
// console.log(this.kidSelExampleList)
|
|
},
|
|
checkboxChange (val, item, index) {
|
|
// debugger
|
|
const kid = this.kidAllList[index].kid
|
|
const example = this.kidAllList[index].example
|
|
if (val) {
|
|
this.kidSelIdList.push(kid)
|
|
this.kidSelExampleList.push(example)
|
|
} else {
|
|
this.kidSelIdList = this.kidSelIdList.filter(idItem => idItem !== kid)
|
|
this.kidSelExampleList = this.kidSelExampleList.filter(exampleItem => exampleItem !== example)
|
|
}
|
|
// console.log("kidSelIdList")
|
|
// console.log(this.kidSelIdList)
|
|
// console.log("kidSelExampleList")
|
|
// console.log(this.kidSelExampleList)
|
|
},
|
|
|
|
async saveForm () {
|
|
if (this.kidSelIdList.length === 0) {
|
|
this.$message.warning('请选择至少一个关键词')
|
|
return false
|
|
}
|
|
if (this.dataForm.sceneDesc === '') {
|
|
this.$message.warning('请填写场景描述')
|
|
return false
|
|
}
|
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/third/subscribe/addtemplate'
|
|
const url = 'https://epmet-cloud.elinkservice.cn/api/third/subscribe/addtemplate'
|
|
this.dataForm.kidList = this.kidSelIdList
|
|
this.dataForm.nameList = this.kidSelNameList
|
|
//console.log(this.dataForm)
|
|
const { data, code, msg } = await requestPost(url, this.dataForm)
|
|
if (code === 0) {
|
|
let clientType = this.dataForm.appId === this.resiAppid ? 'resi' : 'gov'
|
|
this.$emit('editDiaOK', clientType)
|
|
this.handleClose()
|
|
} else {
|
|
this.$message.error(msg)
|
|
let clientType = this.dataForm.appId === this.resiAppid ? 'resi' : 'gov'
|
|
this.$emit('editDiaOK', clientType)
|
|
this.handleClose()
|
|
|
|
}
|
|
|
|
|
|
},
|
|
handleClose () {
|
|
this.resetData()
|
|
this.visible = false
|
|
},
|
|
//重置数据
|
|
resetData () {
|
|
this.dataForm = {
|
|
isSync: true,
|
|
appId: '',
|
|
tid: '',
|
|
sceneDesc: '',
|
|
kidList: [],
|
|
nameList: []
|
|
}
|
|
|
|
this.kidAllList = []//全部的关键字对象
|
|
this.kidAllName = []//全部的关键字name
|
|
this.kidSelNameList = []//选择的关键字name
|
|
this.kidSelIdList = []//选择的关键字id
|
|
this.kidSelExampleList = []//选择的关键字example
|
|
},
|
|
|
|
// 开启加载动画
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: '正在加载……', // 加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
|
})
|
|
},
|
|
// 结束加载动画
|
|
endLoading () {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close()
|
|
}
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
fromAppList () {
|
|
let fromAppList = [
|
|
{
|
|
'dictName': '居民端',
|
|
'dictValue': this.resiAppid
|
|
}, {
|
|
'dictName': '工作端',
|
|
'dictValue': this.workAppid
|
|
}
|
|
]
|
|
return fromAppList
|
|
|
|
},
|
|
diaWidth () {
|
|
return this.resolution === 'small' ? 80 : 70
|
|
},
|
|
diaTop () {
|
|
return this.resolution === 'small' ? '20px' : '100px'
|
|
},
|
|
formHeight () {
|
|
return this.clientHeight * 0.6
|
|
},
|
|
rowHeight () {
|
|
return (this.formHeight - 70) + 'px'
|
|
|
|
},
|
|
...mapGetters(['clientHeight', 'resolution']),
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-row {
|
|
margin-bottom: 20px;
|
|
}
|
|
.el-col {
|
|
border-radius: 4px;
|
|
}
|
|
.card_right {
|
|
background: #f8f8f8af;
|
|
}
|
|
.div_keywords {
|
|
background-color: white;
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
}
|
|
.div_keywords_sel {
|
|
max-height: 250px;
|
|
|
|
/* overflow-y: auto; */
|
|
}
|
|
.div_checkbox {
|
|
margin: 0 0 0 20px;
|
|
}
|
|
.div_checkbox_sel {
|
|
background-color: white;
|
|
margin: 0 0 10px 0;
|
|
padding: 0 0 0 20px;
|
|
}
|
|
.btn_up {
|
|
float: right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.div_left {
|
|
margin: 20px 0 0 0;
|
|
}
|
|
.div_left_item {
|
|
background-color: white;
|
|
margin: 0 0 10px 0;
|
|
padding: 0 0 0 10px;
|
|
}
|
|
</style>
|
|
|