Skip to content

M
marketing-opeartion
Commit 3b17e79a by liuchenxi
Options

update: 11月迭代内容

parent d984a2d1
Showing with 581 additions and 56 deletions
src/api/operation.js
import getFetch from './getFetch.js';
let api1 = {
let marketingApi = {
/** 获取全部渠道 */
getAllChannel: {
url: '/sms/all-channel-list',
method: 'get'
}
getAllChannel: '/sms/all-channel-list',
// 获取模板管理列表
getTemplateList: {
method: 'post',
url: '/sms/page-sms-setting'
},
// 获取模板管理列表详情表格
getTemplateDetailList: {
method: 'post',
url: '/sms/page-template',
},
// 提审模板
sendExamine: {
method: 'post',
url: '/sms/audit-template',
},
// 获取通道详情
getSmsSetting: {
method: 'post',
url: '/sms/sms-setting-detail',
// useFormData: true
},
// 修改通道
updateSms: {
method: 'post',
url: '/sms/update-sms-setting',
// useFormData: true
},
// 生成appid
getAppid: '/sms/default-appid',
};
let api2 = {
let authApi = {
/** 登录信息 */
getUserInfo: '/gic-authcenter/loginuser'
getUserInfo: '/loginuser'
};
api1 = getFetch(api1, '/marketing-operation');
api2 = getFetch(api2, '');
marketingApi = getFetch(marketingApi, '/marketing-operation');
authApi = getFetch(authApi, '/gic-authcenter');
export default { ...api1, ...api2 };
export default { ...marketingApi, ...authApi };
src/components/aside-menu.vue
......@@ -4,7 +4,7 @@
<template v-for="item in tabData">
<li
v-if="item.isShow == 1"
:class="['tab-left-list-cell p-l-14', {'active-tab': item.uri === activeTab}]"
:class="['tab-left-list-cell p-l-14', {'active-tab': (item.uri === activeTab) && !item.nodeChildren}]"
:key="item.id"
@click="selectTab(item)">
<!-- <i class="my-icon" :class="['iconfont', item.icon, !!item.onlyIconActive ? 'iconActive' : '']"></i> -->
......@@ -58,8 +58,9 @@ export default {
methods: {
selectTab(item) {
console.log(item);
if (this.activeTab === item.uri) return;
if (this.activeTab === item.uri && !item.nodeChildren) return;
if (Array.isArray(item.nodeChildren) && item.nodeChildren.length > 0) {
console.log('11');
return item.collapsFlag = !item.collapsFlag;
} else {
this.$router.push({ path: item.uri });
......@@ -87,7 +88,7 @@ export default {
menu: {
immediate: true,
handler(menu) {
let menuTree = menu.filter(item => item.code === 'goods_operation')[0] || {};
let menuTree = menu.filter(item => item.code === 'marketing_operation')[0] || {};
console.log(menu, menuTree);
this.tabData = (menuTree.nodeChildren || []).map(item => {
this.$set(item, 'collapsFlag', false);
......
src/router/routes.js
......@@ -9,13 +9,19 @@ export const routes = [
component: Layout,
children: [
{
path: '/messageTemplate',
path: 'messageTemplate',
name: '短信模板管理',
component: _import('message', 'index')
component: _import('message', 'template')
},
{
path: '/messagePass',
path: 'messageTemplateDetail',
name: '短信模板管理',
component: _import('message', 'template-detail')
},
{
path: 'messagePass',
name: '短信通道管理',
component: _import('message', 'pass-manage')
},
]
}
......
src/styles/component.less
......@@ -8,7 +8,7 @@
}
.right_content {
padding: 10px;
padding: 20px;
}
.mr10 {
margin-right: 10px;
......
src/views/message/component/detail-form.vue 0 → 100644
<template>
<div class="content">
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
<el-form-item label="短信签名ID：" prop="smsSignId">
<el-input v-model="form.smsSignId" class="w180" />
</el-form-item>
<el-form-item label="短信签名：" prop="smsSignText">
<el-input v-model="form.smsSignText" class="w180" />
</el-form-item>
<el-form-item label="签名应用通道：" prop="channelSignList">
<el-checkbox-group v-model="form.channelSignList">
<el-checkbox v-for="v in channelList" :key="v.channelId" :label="v.channelId">{{ v.channelName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="短信模板数量：" prop="maxTemplateCount">
<el-input-number v-model="form.maxTemplateCount" controls-position="right" :min="form.limitTemplateCount" class="w90" />
<span class="tips">该商户在商户后台看到的短信模板数量</span>
</el-form-item>
<el-form-item label="短信发送优先级：" prop="sendSmsType">
<el-radio-group v-model="form.sendSmsType">
<p class="send_sms">
<el-radio :label="0">多通道</el-radio>
<span class="channels">{{ channelSort }}</span>
</p>
<el-radio :label="1">
指定通道
<el-radio-group v-model="form.appointChannel" class="ml20" v-if="form.sendSmsType" style="vertical-align: top">
<el-radio v-for="item in channelList" :key="item.channelId" :label="item.channelId">{{ item.channelName }}</el-radio>
</el-radio-group>
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="短信AppID：" prop="smsAppid">
{{ form.smsAppid }}
</el-form-item>
<el-form-item label="">
<el-button type="primary" style="margin-top: 30px" @click="submit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import requestApi from '@/api/operation';
const { getAllChannel, getSmsSetting, updateSms, getAppid } = requestApi;
export default {
data() {
const sendSmsTypeValidate = (_, val, cb) => {
if(val === 1 && !this.form.appointChannel) {
cb(new Error('请选择指定通道'));
}
cb();
};
return {
channelList: [],
form: {
enterpriseSmsSettingId: '',
enterpriseId: '',
smsSignId: '',
smsSignText: '',
channelSignList: [],
maxTemplateCount: 0,
limitTemplateCount: 0, // 输入限制模板数量
sendSmsType: 0,
appointChannel: null, // 指定通道时的类型
smsAppid: '',
},
rules: {
smsSignId: { required: true, message: '请输入签名Id', trigger: 'blur' },
smsSignText: { required: true, message: '请输入短信签名', trigger: 'blur' },
channelSignList: { required: true, message: '请选择签名应用通道', trigger: 'blur' },
maxTemplateCount: { required: true, message: '请输短信模板数量', trigger: 'blur' },
sendSmsType: { validator: sendSmsTypeValidate, trigger: 'change' }
}
};
},
created() {
this.getChannelList();
this.getDetail();
},
methods: {
async getDetail() {
let result = await getSmsSetting({ enterpriseId: this.$route.query.id });
result = result.result || {};
for(let key in result) {
if(this.form.hasOwnProperty(key)) {
this.form[key] = result[key] || this.form[key];
if(key == 'channelSignList' && this.form[key]) this.form[key] = this.form[key].split(',').map(el => +el);
if(key == 'maxTemplateCount') this.form['limitTemplateCount'] = this.form[key] || 0;
if(key == 'sendSmsType' && this.form[key] != 0) {
this.form['appointChannel'] = this.form[key];
this.form[key] = 1;
};
if(key == 'smsAppid' && !this.form[key]) {
const { result } = await getAppid();
this.form[key] = result;
};
}
}
},
async getChannelList() {
const { result } = await getAllChannel();
this.channelList = result || [];
},
// 表单提交
submit() {
this.$refs.form.validate(async val => {
if(val) {
const para = Object.assign({}, this.form);
if(para.sendSmsType == 1) para.sendSmsType = para.appointChannel;
para.channelSignList = para.channelSignList.toString();
delete para.appointChannel;
delete para.limitTemplateCount;
await updateSms(para);
this.$message.success('保存成功');
}
});
}
},
computed: {
channelSort() {
let res = '';
const arr = [ ...this.channelList ];
arr
.sort((a, b) => b - a)
.forEach((el, index, arr) => {
res += (index > 0 ? ' > ' : '') + el.channelName;
});
return res;
}
},
watch: {
// 发送给table组件
'form.sendSmsType': {
handler(val) {
val == 0 && this.$emit('getTableChannelType', val);
},
immediate: true
},
'form.appointChannel': {
handler(val) {
this.$emit('getTableChannelType', val);
}
}
}
};
</script>
<style scoped lang="scss">
.w180 {
width: 180px;
}
.w90 {
width: 90px;
}
.content {
margin-top: 26px;
.send_sms {
height: 32px;
margin-bottom: 28px;
padding-top: 5px;
box-sizing: border-box;
}
.channels {
font-size: 14px;
color: #606266;
line-height: 20px;
}
}
.tips {
margin-left: 14px;
font-size: 12px;
color: #909399;
line-height: 17px;
}
</style>
src/views/message/component/detail-table.vue 0 → 100644
<template>
<div class="detail-table">
<div class="top">
<div class="left">
<el-input v-model="search.searchKey" placeholder="请输入GIC短信模板ID/模板名称/模板内容" prefix-icon="el-icon-search" style="width: 260px" />
<el-select v-model="search.smsType" placeholder="请选择模板类型" class="w148 ml10">
<el-option v-for="item in smsList" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
<el-select v-model="search.auditStatus" placeholder="商户后台状态" class="w148 ml10">
<el-option v-for="item in auditStatusList" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
<el-select v-model="search.channelType" placeholder="通道类型" class="w148 ml10">
<el-option v-for="item in channelList" :key="item.channelId" :value="item.channelId" :label="item.channelName" />
</el-select>
<el-select v-model="search.channelStatus" placeholder="商户后台状态" class="w148 ml10">
<el-option v-for="item in channelStatusList" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
</div>
<div class="right">
<el-button type="primary" @click="submitExamine">全量提交审核</el-button>
</div>
</div>
<div class="content mt20">
<el-table :data="tableData.data" element-loading-text="拼命加载中">
<el-table-column v-for="(v, i) in tableData.header" :key="i" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :fixed="v.fixed" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
<span v-else>{{ scope.row[v.prop] || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<!-- <template slot-scope="{ row }">
<el-button type="text">操作</el-button>
</template> -->
</el-table-column>
</el-table>
<dm-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
</div>
</div>
</template>
<script>
import requestApi from '@/api/operation';
import utils from '@/filters/index';
const { getTemplateDetailList, sendExamine, getAllChannel } = requestApi;
const { getTime, getSeconds } = utils;
export default {
components: {},
props: {
tableChannelType: Number || String
},
data() {
return {
smsList: [
{ label: '普通短信', value: 0 },
{ label: '营销短信', value: 1 }
],
auditStatusList: [
{ label: '已通过', value: 0 },
{ label: '待审核', value: 1 },
{ label: '已拒绝', value: 2 }
],
channelList: [],
channelStatusList: [
{ label: '已通过', value: 1 },
{ label: '未通过', value: 2 },
{ label: '审核中', value: 3 }
],
search: {
searchKey: '',
smsType: null, // 0-普通短信 1-营销短信
auditStatus: null, // 状态：0：已通过；1：待审核；2：已拒绝
channelType: '', // 前端自定义筛选
channelStatus: null // 前端自定义筛选
},
tableData: {
data: [],
currentPage: 1,
pageSizeList: [ 20, 40, 60, 80 ],
pageSize: 20,
header: [],
total: 0
}
};
},
created() {
// create hook
this.getTableHeader();
this.getTableData();
this.getChannelList();
},
mounted() {
// mounted hook
},
methods: {
// table-methods
async getTableData() {
const { currentPage, pageSize } = this.tableData;
const { searchKey, smsType, auditStatus } = this.search;
const para = {
enterpriseId: this.$route.query.id,
pageNum: currentPage,
pageSize,
searchKey,
smsType,
auditStatus
};
const result = await getTemplateDetailList(para);
console.log(result);
},
getTableHeader() {
this.tableData.header = [
{ label: 'GIC短信模板ID', prop: 'gicSmsTemplateId' },
{ label: '模板名称', prop: 'smsTitle' },
{ label: '模板内容', prop: 'smsContent' },
{
label: '模板类型',
prop: 'smsType',
formatter(row) {
return row.smsType ? '营销短信' : '普通短信';
}
},
{
label: '创建时间',
prop: 'createTime',
formatter(row) {
return `${getTime(row.createTime)}<br />${getSeconds(row.createTime)}`;
}
},
{
label: '商户后台状态',
prop: 'auditStatus',
formatter(row) {
return row.auditResult == 0 ? '已通过' : row.auditStatus == 1 ? '待审核' : '已拒绝';
}
},
{ label: '通道审核状态', prop: 'auditResult' }
];
},
handleSizeChange(val) {
this.tableData.pageSize = val;
this.tableData.currentPage = 1;
this.getTableData();
},
handleCurrentChange(val) {
this.tableData.currentPage = val;
this.getTableData();
},
// 提交审核
async submitExamine(row) {
await sendExamine({ enterpriseId: this.$route.query.id });
this.$message.success('提交成功');
},
async getChannelList() {
const { result } = await getAllChannel();
this.channelList = result || [];
this.initChannelType(this.tableChannelType);
},
// 设置通道类型的初始化
initChannelType(val) {
if(val == 0) {
this.search.channelType = this.channelList.find(el => el.channelName == '腾讯云').channelId;
} else {
this.search.channelType = val;
}
}
},
computed: {
// do something
},
watch: {
// do something
tableChannelType(val) {
this.channelList.length && this.initChannelType(val);
}
}
};
</script>
<style scoped lang="scss">
.w148 {
width: 148px;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
src/views/message/pass-manage.vue 0 → 100644
<template>
<div class="container right_content">
<div class="mt20">
<el-table :data="tableData.data" element-loading-text="拼命加载中">
<el-table-column v-for="(v, i) in tableData.tableHeader" :key="i" :prop="v.prop" :min-width="v.minWidth" :label="v.label" :formatter="v.formatter" :fixed="v.fixed" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
<span v-else>{{ scope.row[v.prop] || '--' }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import requestApi from '@/api/operation';
const { getAllChannel } = requestApi;
export default {
data() {
return {
tableData: {
data: [],
tableHeader: []
}
};
},
created() {
this.getTableHeader();
this.getTableData();
},
methods: {
// table methods
getTableHeader() {
this.tableData.tableHeader = [
{ label: '通道名称', prop: 'channelName' },
{
label: '发送优先级',
prop: 'enterpriseName',
formatter(row) {
return `P${row.sendSort}`;
}
}
];
},
async getTableData() {
const result = await getAllChannel();
this.tableData.data = result.result || [];
}
}
};
</script>
<style scoped lang="scss"></style>
src/views/message/template-detail.vue 0 → 100644
<template>
<div class="container right_content">
<div class="top">
<div class="title">
<h2>基本信息</h2>
</div>
<detail-form @getTableChannelType="(val) => tableChannelType = val" />
</div>
<div class="bottom">
<div class="title mb20">
<h2>短信模板列表</h2>
</div>
<detail-table :table-channel-type="tableChannelType" />
</div>
</div>
</template>
<script>
import detailForm from './component/detail-form.vue';
import detailTable from './component/detail-table.vue';
export default {
components: {
detailForm,
detailTable
},
data() {
return {
tableChannelType: null
};
}
};
</script>
<style scoped lang="scss">
.top,
.bottom {
&.bottom {
margin-top: 30px;
}
.title {
background: #f7f8fa;
h2 {
padding-left: 22px;
font-size: 14px;
font-weight: 600;
color: #303133;
height: 40px;
line-height: 40px;
position: relative;
&::before {
content: '';
width: 3px;
height: 14px;
background: #1890ff;
position: absolute;
left: 11px;
top: 13px;
}
}
}
}
</style>
src/views/message/index.vue → src/views/message/template.vue
<template>
<div class="container right_content">
<div class="search">
<el-input v-model="searchText" prefix-icon="el-icon-search" placeholder="请输入品牌名称/公司名称" style="width: 234px" />
<el-select v-model="mode" placeholder="选择发送通道" class="ml10">
<el-option v-for="(item, index) in passList" :key="index" :value="item.value">{{ item.label }}</el-option>
<el-input v-model="search.searchText" @change="getTableData" prefix-icon="el-icon-search" placeholder="请输入品牌名称/公司名称" style="width: 234px" />
<el-select v-model="search.channelId" @change="getTableData" placeholder="选择发送通道" class="ml10">
<el-option v-for="item in channelList" :key="item.channelId" :value="item.channelId" :label="item.channelName">{{ item.channelName }}</el-option>
</el-select>
</div>
<div class="mt20">
......@@ -19,35 +19,22 @@
<el-button type="text" @click="toDetail(row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<dm-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
</el-table>
<el-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
</div>
</div>
</template>
<script>
import requestApi from '@/api/operation';
const { getAllChannel } = requestApi;
const { getAllChannel, getTemplateList } = requestApi;
export default {
data() {
return {
passList: [
{
label: '多通道',
value: 1
},
{
label: '腾讯云',
value: 2
},
{
label: '大汉三通',
value: 3
}
],
channelList: [],
search: {
searchText: '',
mode: 0
channelId: ''
},
tableData: {
data: [],
......@@ -62,29 +49,53 @@ export default {
created() {
this.getTableHeader();
this.getChannelList();
this.getTableData();
},
methods: {
// table methods
getTableHeader() {
this.tableData.tableHeader = [
{ label: '手机号', prop: 'phoneNumber' },
{ label: '黑名单原因', prop: 'reason' },
{ label: '操作人', prop: 'creatorName' }
{ label: '品牌名称', prop: 'brandName' },
{ label: '公司名称', prop: 'enterpriseName' },
{ label: '短信签名', prop: 'smsSignText' },
{
label: '发送通道',
prop: 'sendSmsType',
formatter(row) {
let text = '';
switch (row.sendSmsType) {
case 0:
text = '多通道';
break;
case 1:
text = '腾讯云';
break;
case 3:
text = '大汉三通';
break;
default:
text = '--';
break;
}
return text;
}
},
{ label: '短信模板总数', prop: 'maxTemplateCount' },
{ label: '已用短信模板数', prop: 'useTemplateCount' }
];
},
async getTableData() {
// const { currentPage, pageSize } = this.tableData;
// const { phone, time } = this.search;
// const para = {
// currentPage,
// pageSize,
// phoneNumber: phone,
// startTime: new Date(time[0]).getTime() || '',
// endTime: new Date(time[1]).getTime() || ''
// };
// const result = await getBlackList(para);
// this.tableData.data = result.result.result || [];
// this.tableData.total = result.result.totalCount || 0;
const { currentPage, pageSize } = this.tableData;
const { searchText, channelId } = this.search;
const para = {
pageNum: currentPage,
pageSize,
channel: channelId,
search: searchText
};
const result = await getTemplateList(para);
this.tableData.data = result.result.result || [];
this.tableData.total = result.result.totalCount || 0;
},
handleSizeChange(val) {
this.tableData.pageSize = val;
......@@ -96,12 +107,12 @@ export default {
this.getTableData();
},
toDetail(row) {
console.log(row);
this.$router.push(`/messageTemplateDetail?id=${row.enterpriseId}`);
},
// others
async getChannelList() {
const res = await getAllChannel();
console.log(res);
const { result } = await getAllChannel();
this.channelList = result.concat({ channelId: 0, channelName: '多通道' }) || [];
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment