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