jiangyy
5 years ago
committed by
13176889840
13176889840
7 changed files with 704 additions and 417 deletions
@ -0,0 +1,221 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<el-table ref="ref_table" |
||||
|
v-loading="dataListLoading" |
||||
|
:data="dataList" |
||||
|
border |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column prop="title" |
||||
|
label="标题" |
||||
|
header-align="left" |
||||
|
:min-width="100" |
||||
|
align="left"></el-table-column> |
||||
|
<el-table-column prop="kidNames" |
||||
|
label="关键词" |
||||
|
header-align="left" |
||||
|
:min-width="400" |
||||
|
align="left"></el-table-column> |
||||
|
<el-table-column prop="priTmplId" |
||||
|
label="模板ID" |
||||
|
header-align="left" |
||||
|
:min-width="400" |
||||
|
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="detailShow(scope.row)">详情</el-button> |
||||
|
<el-button type="text" |
||||
|
size="small" |
||||
|
@click="showDel(scope.row)">删除</el-button> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<temp-detail ref="ref_edit" |
||||
|
@editDiaOK="editDiaOK"> |
||||
|
|
||||
|
</temp-detail> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CDialog from '@c/CDialog' |
||||
|
import TempDetail from './TempDetail' |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
|
||||
|
let loading// 加载动画 |
||||
|
|
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
activeName: 'resi', |
||||
|
appIdL: '',//父组件传来 |
||||
|
|
||||
|
// 列表相关 |
||||
|
dataListLoading: false, |
||||
|
dataList: [] |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
CDialog, TempDetail |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
tableHeight () { |
||||
|
return this.clientHeight - 60 - 80 - 80 |
||||
|
}, |
||||
|
...mapGetters(['clientHeight', 'env']) |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
doLayout () { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['ref_table'].doLayout() // 解决表格错位 |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
init (appId) { |
||||
|
|
||||
|
this.appId = appId |
||||
|
this.loadData() |
||||
|
}, |
||||
|
|
||||
|
//加载列表数据 |
||||
|
async loadData () { |
||||
|
this.dataListLoading = true |
||||
|
const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/third/subscribe/gettemplate' |
||||
|
// const url = '/third/subscribe/gettemplate' |
||||
|
const params = { |
||||
|
appId: this.appId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.dataList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
this.dataListLoading = false |
||||
|
}, |
||||
|
|
||||
|
// 刷新 |
||||
|
refresh () { |
||||
|
if (this.activeName === 'gov') { |
||||
|
this.loadWorkTableData() // 获取表格数据 |
||||
|
} else if (this.activeName === 'resi') { |
||||
|
this.loadResiTableData() // 获取表格数据 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 详情 |
||||
|
detailShow (row) { |
||||
|
this.$refs['ref_edit'].init(row) |
||||
|
}, |
||||
|
|
||||
|
// 删除 |
||||
|
showDel (row) { |
||||
|
this.$confirm('确认删除当前模板', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.del(row) |
||||
|
}).catch(() => { |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
async del (row) { |
||||
|
this.startLoading() |
||||
|
const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/third/subscribe/deltemplate' |
||||
|
// const url = '/third/subscribe/deltemplate' |
||||
|
const params = { |
||||
|
appId: this.appId, |
||||
|
priTmplId: row.priTmplId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
if (code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
this.endLoading() |
||||
|
}, |
||||
|
// 取消 |
||||
|
diaCancel () { |
||||
|
this.$emit('cancleBack') |
||||
|
}, |
||||
|
editDiaOK () { |
||||
|
this.refresh() |
||||
|
}, |
||||
|
editDiaCancel () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async renderSelData () { // 渲染下拉框/单选框/复选框等数据 |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
showFrom: { |
||||
|
type: String, |
||||
|
default: 'default' |
||||
|
}, |
||||
|
//table的关键字 |
||||
|
tableKeywork: { |
||||
|
type: String, |
||||
|
default: 'FootBar' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.div_btn_default { |
||||
|
z-index: 10; |
||||
|
position: absolute; |
||||
|
right: 40px; |
||||
|
top: 35px; |
||||
|
/* margin: 0 0 20px 0; */ |
||||
|
} |
||||
|
.div_btn_customize { |
||||
|
z-index: 10; |
||||
|
position: absolute; |
||||
|
right: 40px; |
||||
|
top: 35px; |
||||
|
/* margin: 0 0 20px 0; */ |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,247 @@ |
|||||
|
<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"> |
||||
|
|
||||
|
<div class="div_left_total" |
||||
|
:style="{height:rowHeight}"> |
||||
|
<div class=" div_left_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: right" |
||||
|
:span="9"> |
||||
|
<span>{{item}}:</span> |
||||
|
</el-col> |
||||
|
<el-col :span="15"> |
||||
|
<span>{{kidSelExampleList[index]}}</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> --> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
<el-col :span="15"> |
||||
|
|
||||
|
<el-row :gutter="10"> |
||||
|
<div class="div_left_item_total"> |
||||
|
<el-col style=" text-align: left" |
||||
|
:span="6"> |
||||
|
<span class="span_left_item_title">模板ID</span> |
||||
|
</el-col> |
||||
|
<el-col :span="18"> |
||||
|
<span class="span_left_item_content">{{dataForm.priTmplId}}</span> |
||||
|
</el-col> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="10"> |
||||
|
<div class="div_left_item_total"> |
||||
|
<el-col style=" text-align: left" |
||||
|
:span="6"> |
||||
|
<span class="span_left_item_title">标题</span> |
||||
|
</el-col> |
||||
|
<el-col :span="18"> |
||||
|
<span class="span_left_item_content">{{dataForm.title}}</span> |
||||
|
</el-col> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
<el-row :gutter="10"> |
||||
|
<div class="div_left_item_total"> |
||||
|
<el-col style=" text-align: left" |
||||
|
:span="6"> |
||||
|
<span class="span_left_item_title">类目</span> |
||||
|
</el-col> |
||||
|
<el-col :span="18"> |
||||
|
<span class="span_left_item_content">{{'社区/论坛'}}</span> |
||||
|
</el-col> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
<el-row :gutter="10"> |
||||
|
<div class="div_left_item_total"> |
||||
|
<el-col style=" text-align: left" |
||||
|
:span="6"> |
||||
|
<span class="span_left_item_title">详细内容</span> |
||||
|
</el-col> |
||||
|
<el-col :span="18"> |
||||
|
<span class="span_left_item_content">{{dataForm.content}}</span> |
||||
|
</el-col> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
<el-row :gutter="10"> |
||||
|
<div class="div_left_item_total"> |
||||
|
<el-col style=" text-align: left" |
||||
|
:span="6"> |
||||
|
<span class="span_left_item_title">场景说明</span> |
||||
|
</el-col> |
||||
|
<el-col :span="18"> |
||||
|
<span class="span_left_item_content">{{dataForm.sceneDesc}}</span> |
||||
|
</el-col> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
|
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</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, |
||||
|
|
||||
|
tid: '',// |
||||
|
|
||||
|
dataForm: { |
||||
|
priTmplId: '', |
||||
|
title: '', |
||||
|
content: '', |
||||
|
contentShow: [], |
||||
|
example: '', |
||||
|
exampleArray: [], |
||||
|
type: '', |
||||
|
kidNames: '', |
||||
|
kidNamesArray: [], |
||||
|
sceneDesc: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created () { |
||||
|
// this.queryFunctionList() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
init (row) { |
||||
|
this.dataForm = row |
||||
|
|
||||
|
this.visible = true |
||||
|
this.loadData() |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
loadData () { |
||||
|
let array = this.dataForm.example.split('\\n') |
||||
|
array.forEach(element => { |
||||
|
let oneArray = element.split(':') |
||||
|
let obj = Object |
||||
|
obj.title = oneArray[0] |
||||
|
obj.content = oneArray[1s] |
||||
|
}) |
||||
|
this.dataForm.exampleArray = |
||||
|
console.log(this.dataForm.exampleArray) |
||||
|
}, |
||||
|
|
||||
|
handleClose () { |
||||
|
|
||||
|
this.visible = false |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
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 scope> |
||||
|
.el-row { |
||||
|
margin-bottom: 0 20px 20px 20px; |
||||
|
} |
||||
|
.el-col { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.div_keywords_sel { |
||||
|
max-height: 250px; |
||||
|
|
||||
|
/* overflow-y: auto; */ |
||||
|
} |
||||
|
|
||||
|
.div_left_total { |
||||
|
margin-left: 20px; |
||||
|
border: 1px solid rgb(199, 199, 199); |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
.div_left_title { |
||||
|
margin: 10px 10px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.div_left { |
||||
|
margin: 20px 20px 20px 20px; |
||||
|
} |
||||
|
.div_left_item { |
||||
|
background-color: white; |
||||
|
margin: 0 0 10px 0; |
||||
|
padding: 0 0 0 10px; |
||||
|
} |
||||
|
|
||||
|
.div_left_item_total { |
||||
|
margin: 10px 0 10px 20px; |
||||
|
|
||||
|
color: rgb(121, 121, 121); |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
.span_left_item_content { |
||||
|
color: rgb(31, 31, 31); |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
.span_left_item_title { |
||||
|
padding-left: 40px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue