加黑名单

This commit is contained in:
dengbw
2023-06-13 09:39:06 +08:00
parent d21e1bfba7
commit b1b6628af7
7 changed files with 579 additions and 248 deletions
+64
View File
@@ -0,0 +1,64 @@
import request from '@/utils/request';
/**
* 分页查询黑名单
* @param params 查询条件
*/
export async function pageBlacklist(params) {
const res = await request.get('/sylive/blacklist/page', {
params
});
if (res.data.code === 0) {
return res.data.data;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 添加黑名单
* @param data 黑名单信息
*/
export async function addBlacklist(data) {
const res = await request.post('/sylive/blacklist', data);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 删除黑名单
* @param id 黑名单id
*/
export async function removeBlacklist(id) {
return removeBlacklists([id]);
}
/**
* 批量删除黑名单
* @param ids 黑名单id集合
*/
export async function removeBlacklists(ids) {
const res = await request.delete('/sylive/blacklist/batch', {
data: { ids }
});
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
/**
* 导入黑名单
* @param file excel文件
*/
export async function importBlacklist(file, activityId) {
const formData = new FormData();
formData.append('file', file);
formData.append('activityId', activityId);
const res = await request.post('/sylive/blacklist/import', formData);
if (res.data.code === 0) {
return res.data.message;
}
return Promise.reject(new Error(res.data.message));
}
@@ -1,235 +0,0 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
width="930px"
:visible="visible"
:append-to-body="true"
:close-on-click-modal="true"
custom-class="ele-dialog-form"
title="修改黑名单"
@update:visible="updateVisible"
>
<el-form ref="form" :model="form" label-width="82px">
<el-form-item label="导入名单:">
<el-upload
drag
action=""
class="ele-block"
v-loading="loading"
accept=".xls,.xlsx"
:show-file-list="false"
:before-upload="doUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处, <em>点击上传</em>
</div>
<template v-slot:tip>
<div class="el-upload__tip ele-text-center">
<span>只能上传xlsxlsx文件, </span>
<el-link
download
:href="url"
type="primary"
:underline="false"
style="vertical-align: baseline"
>
下载模板
</el-link>
</div>
</template>
</el-upload>
<el-button
icon="el-icon-plus"
style="width: 100%; margin-top: 15px"
@click="addMobile"
>
新增手机号
</el-button>
</el-form-item>
<el-form-item label="名单列表:">
<el-table :data="form.blacklist" :border="true" style="width: 100%">
<el-table-column label="手机号" align="center">
<template v-slot="{ row }">
<el-input
v-if="row.type == 'add'"
v-model="row.mobile"
placeholder="请输入手机号"
/>
{{ row.type != 'add' ? row.mobile : '' }}
</template>
</el-table-column>
<el-table-column
label="操作"
width="70px"
align="center"
:resizable="false"
>
<template v-slot="{ row, $index }">
<span class="ele-action" v-if="row.type != 'del'">
<el-popconfirm
title="确定要删除此手机号?"
@confirm="removeMobile($index)"
>
<template v-slot:reference>
<el-link
icon="el-icon-delete"
type="danger"
:underline="false"
>
删除
</el-link>
</template>
</el-popconfirm>
</span>
<span class="ele-action" v-else>已删除</span>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
<template v-slot:footer>
<el-button @click="updateVisible(false)">取消</el-button>
<el-button type="primary" :loading="loading" @click="save">
保存
</el-button>
</template>
</ele-modal>
</template>
<script>
import {
updateActivityBlacklist,
importActivityBlacklist
} from '@/api/sylive/activity';
import { API_BASE_URL } from '@/config/setting';
export default {
components: {},
props: {
// 弹窗是否打开
visible: Boolean,
// 修改回显的数据
data: Object
},
data() {
const defaultForm = {
activityId: null,
blacklist: []
};
return {
defaultForm,
// 表单数据
form: { ...defaultForm },
// 提交状态
loading: false,
// 是否是修改
isUpdate: false,
// 导入请求状态
// 导入模板下载地址
url: API_BASE_URL.replace('api', '') + 'temp/blacklist.xlsx'
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 上传 */
doUpload(file) {
if (
![
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
].includes(file.type)
) {
this.$message.error('只能选择 excel 文件');
return false;
}
if (file.size / 1024 / 1024 > 5) {
this.$message.error('大小不能超过 5MB');
return false;
}
this.loading = true;
importActivityBlacklist(file, this.form.activityId)
.then((msg) => {
this.loading = false;
this.$message.success(msg);
this.updateVisible(false);
this.$emit('done');
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
return false;
},
/* 保存编辑 */
save() {
this.$refs.form.validate((valid) => {
if (!valid) {
return false;
}
this.loading = true;
const data = {
...this.form
};
updateActivityBlacklist(data)
.then((msg) => {
this.loading = false;
this.$message.success(msg);
this.updateVisible(false);
this.$emit('done');
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
});
},
/* 添加手机 */
addMobile() {
this.form.blacklist.push({ mobile: '', type: 'add' });
},
/* 删除手机 */
removeMobile(index) {
if (!this.form.blacklist[index].id) {
this.form.blacklist.splice(index, 1);
} else {
this.form.blacklist[index].type = 'del';
}
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
}
},
watch: {
visible(visible) {
if (visible) {
if (this.data) {
this.$util.assignObject(this.form, {
...this.data
});
this.isUpdate = true;
} else {
this.form.blacklist = [];
this.isUpdate = false;
}
} else {
this.$refs.form.clearValidate();
this.form = { ...this.defaultForm };
}
}
}
};
</script>
<style lang="scss" scoped>
.ele-block {
:deep(.el-upload),
:deep(.el-upload-dragger) {
width: 100%;
}
}
</style>
+1 -13
View File
@@ -153,11 +153,6 @@
:visible.sync="showEditVisitTag"
@done="reload"
/>
<activity-blacklist
:data="current"
:visible.sync="showEditBlacklist"
@done="reload"
/>
</div>
</template>
@@ -169,7 +164,6 @@
import ActivityCoupon from './components/activity-coupon.vue';
import ActivityDraw from './components/activity-draw.vue';
import ActivityVisitTag from './components/activity-visit-tag';
import ActivityBlacklist from './components/activity-blacklist';
import {
pageActivity,
@@ -183,7 +177,6 @@
export default {
name: 'syliveActivity',
components: {
ActivityBlacklist,
ActivityVisitTag,
QrCode,
ActivitySearch,
@@ -277,7 +270,6 @@
// 是否显示编辑券弹窗
showEditDraw: false,
showEditVisitTag: false,
showEditBlacklist: false,
// 是否显示二维码弹窗
showCode: false
};
@@ -310,11 +302,7 @@
};
this.showEditVisitTag = true;
} else if (command === 'blacklist') {
this.current = {
blacklist: row.showBlacklist,
activityId: row.activityId
};
this.showEditBlacklist = true;
this.$router.replace('/sylive/blacklist?id=' + row.activityId);
} else if (command === 'goods') {
this.$router.replace('/sylive/goods?id=' + row.activityId);
} else if (command === 'groups') {
@@ -0,0 +1,110 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="750px"
:visible="visible"
:append-to-body="true"
:close-on-click-modal="true"
custom-class="ele-dialog-form"
title="添加黑名单"
@update:visible="updateVisible"
>
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
<el-form-item label="手机号:" prop="mobile">
<el-input
clearable
:maxlength="60"
v-model="form.mobile"
placeholder="请输入手机号"
/>
</el-form-item>
</el-form>
<template v-slot:footer>
<el-button @click="updateVisible(false)">取消</el-button>
<el-button type="primary" :loading="loading" @click="save">
保存
</el-button>
</template>
</ele-modal>
</template>
<script>
import { addBlacklist } from '@/api/sylive/blacklist';
export default {
props: {
// 弹窗是否打开
visible: Boolean,
// 修改回显的数据
data: Object
},
data() {
const defaultForm = {
blacklistId: null,
activityId: null,
mobile: ''
};
return {
defaultForm,
// 表单数据
form: { ...defaultForm },
// 表单验证规则
rules: {
mobile: [
{
required: true,
message: '请输入手机号',
trigger: 'blur'
}
]
},
// 提交状态
loading: false
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 保存编辑 */
save() {
this.$refs.form.validate((valid) => {
if (!valid) {
return false;
}
this.loading = true;
const data = {
...this.form
};
addBlacklist(data)
.then((msg) => {
this.loading = false;
this.$message.success(msg);
this.updateVisible(false);
this.$emit('done');
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
});
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
}
},
watch: {
visible(visible) {
if (visible) {
this.form.activityId = this.data.activityId;
} else {
this.$refs.form.clearValidate();
this.form = { ...this.defaultForm };
}
}
}
};
</script>
@@ -0,0 +1,103 @@
<!-- 导入弹窗 -->
<template>
<ele-modal
width="520px"
title="导入黑名单"
:visible="visible"
@update:visible="updateVisible"
>
<el-upload
drag
action=""
class="ele-block"
v-loading="loading"
accept=".xls,.xlsx"
:show-file-list="false"
:before-upload="doUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处, <em>点击上传</em></div>
<template v-slot:tip>
<div class="el-upload__tip ele-text-center">
<span>只能上传xlsxlsx文件, </span>
<el-link
download
:href="url"
type="primary"
:underline="false"
style="vertical-align: baseline"
>
下载模板
</el-link>
</div>
</template>
</el-upload>
</ele-modal>
</template>
<script>
import { importBlacklist } from '@/api/sylive/blacklist';
import { API_BASE_URL } from '@/config/setting';
export default {
props: {
// 是否打开弹窗
visible: Boolean,
// 修改回显的数据
data: Object
},
data() {
return {
// 导入请求状态
loading: false,
// 导入模板下载地址
url: API_BASE_URL.replace('api', '') + 'temp/blacklist.xlsx'
};
},
methods: {
/* 上传 */
doUpload(file) {
if (
![
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
].includes(file.type)
) {
this.$message.error('只能选择 excel 文件');
return false;
}
if (file.size / 1024 / 1024 > 5) {
this.$message.error('大小不能超过 5MB');
return false;
}
this.loading = true;
let activityId = this.data.activityId;
importBlacklist(file, activityId)
.then((msg) => {
this.loading = false;
this.$message.success(msg);
this.updateVisible(false);
this.$emit('done');
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
return false;
},
/* 更新visible */
updateVisible(value) {
this.$emit('update:visible', value);
}
}
};
</script>
<style lang="scss" scoped>
.ele-block {
:deep(.el-upload),
:deep(.el-upload-dragger) {
width: 100%;
}
}
</style>
@@ -0,0 +1,62 @@
<!-- 搜索表单 -->
<template>
<el-form
label-width="77px"
class="ele-form-search"
@keyup.enter.native="search"
@submit.native.prevent
>
<el-row :gutter="15">
<el-col v-bind="styleResponsive ? { lg: 8, md: 16 } : { span: 8 }">
<el-form-item label="手机号:">
<el-input clearable v-model="where.mobile" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
<div class="ele-form-actions">
<el-button
type="primary"
icon="el-icon-search"
class="ele-btn-icon"
@click="search"
>
查询
</el-button>
<el-button @click="reset">重置</el-button>
</div>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
// 默认表单数据
const defaultWhere = {
mobile: ''
};
return {
// 表单数据
where: { ...defaultWhere }
};
},
computed: {
// 是否开启响应式布局
styleResponsive() {
return this.$store.state.theme.styleResponsive;
}
},
methods: {
/* 搜索 */
search() {
this.$emit('search', this.where);
},
/* 重置 */
reset() {
this.where = { ...this.defaultWhere };
this.search();
}
}
};
</script>
+239
View File
@@ -0,0 +1,239 @@
<template>
<div class="ele-body">
<el-card shadow="never">
<!-- 搜索表单 -->
<blacklist-search @search="reload" />
<!-- 数据表格 -->
<ele-pro-table
ref="table"
:columns="columns"
:datasource="datasource"
:selection.sync="selection"
cache-key="syliveActivityBlacklistTable"
>
<!-- 表头工具栏 -->
<template v-slot:toolbar>
<el-button
size="small"
type="primary"
icon="el-icon-plus"
class="ele-btn-icon"
@click="openEdit()"
>
新建
</el-button>
<el-button
size="small"
type="danger"
icon="el-icon-delete"
class="ele-btn-icon"
@click="removeBatch"
>
删除
</el-button>
<el-button
size="small"
icon="el-icon-upload2"
class="ele-btn-icon"
@click="openImport"
>
导入
</el-button>
</template>
<!-- 操作列 -->
<template v-slot:action="{ row }">
<el-popconfirm
class="ele-action"
title="确定要删除此手机号吗?"
@confirm="remove(row)"
>
<template v-slot:reference>
<el-link type="danger" :underline="false" icon="el-icon-delete">
删除
</el-link>
</template>
</el-popconfirm>
</template>
</ele-pro-table>
</el-card>
<!-- 编辑弹窗 -->
<blacklist-edit :data="current" :visible.sync="showEdit" @done="reload" />
<!-- 导入弹窗 -->
<blacklist-import
:data="current"
:visible.sync="showImport"
@done="reload"
/>
</div>
</template>
<script>
import { setPageTabTitle } from '@/utils/page-tab-util';
import BlacklistSearch from './components/blacklist-search.vue';
import BlacklistEdit from './components/blacklist-edit.vue';
import BlacklistImport from './components/blacklist-import';
import { getActivity } from '@/api/sylive/activity';
import {
pageBlacklist,
removeBlacklist,
removeBlacklists
} from '@/api/sylive/blacklist';
const ROUTE_PATH = '/sylive/blacklist';
export default {
name: 'syliveBlacklist',
components: { BlacklistSearch, BlacklistEdit, BlacklistImport },
data() {
return {
// 加载状态
title: '黑名单',
loading: true,
// 表格选中数据
selection: [],
// 当前编辑数据
current: null,
// 是否显示编辑弹窗
showEdit: false,
showImport: false,
activityId: null,
// 表格列配置
columns: [
{
columnKey: 'selection',
type: 'selection',
width: 45,
align: 'center',
fixed: 'left'
},
{
prop: 'blacklistId',
label: 'ID',
width: 80,
align: 'center',
showOverflowTooltip: true,
fixed: 'left'
},
{
prop: 'mobile',
label: '手机号',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 150
},
{
prop: 'createTime',
label: '创建时间',
sortable: 'custom',
showOverflowTooltip: true,
minWidth: 120,
formatter: (_row, _column, cellValue) => {
return this.$util.toDateString(cellValue);
}
},
{
columnKey: 'action',
label: '操作',
width: 200,
align: 'center',
resizable: false,
slot: 'action'
}
]
};
},
methods: {
/* 表格数据源 */
datasource({ page, limit, where, order }) {
const activityId = this.activityId;
return pageBlacklist({ ...where, ...order, page, limit, activityId });
},
query() {
this.activityId = Number(this.$route.query.id);
if (!this.activityId) {
return;
}
this.loading = true;
getActivity(this.activityId)
.then((data) => {
this.loading = false;
// 修改页签标题
if (this.$route.path === ROUTE_PATH) {
this.title = data.title + '-黑名单';
setPageTabTitle(this.title);
}
})
.catch((e) => {
this.loading = false;
this.$message.error(e.message);
});
},
/* 打开导入弹窗 */
openImport() {
this.current = { activityId: this.activityId };
this.showImport = true;
},
/* 刷新表格 */
reload(where) {
this.$refs.table.reload({ page: 1, where: where });
},
/* 显示编辑 */
openEdit() {
this.current = { activityId: this.activityId };
this.showEdit = true;
},
/* 删除 */
remove(row) {
const loading = this.$loading({ lock: true });
removeBlacklist(row.blacklistId)
.then((msg) => {
loading.close();
this.$message.success(msg);
this.reload();
})
.catch((e) => {
loading.close();
this.$message.error(e.message);
});
},
/* 批量删除 */
removeBatch() {
if (!this.selection.length) {
this.$message.error('请至少选择一条数据');
return;
}
this.$confirm('确定要删除选中的黑名单吗?', '提示', {
type: 'warning'
})
.then(() => {
const loading = this.$loading({ lock: true });
removeBlacklists(this.selection.map((d) => d.blacklistId))
.then((msg) => {
loading.close();
this.$message.success(msg);
this.reload();
})
.catch((e) => {
loading.close();
this.$message.error(e.message);
});
})
.catch(() => {});
}
},
watch: {
$route: {
handler(route) {
const { path } = route;
if (path !== ROUTE_PATH) {
return;
}
this.query();
if (this.$refs.table) {
this.$refs.table.reload({ page: 1 });
}
},
immediate: true
}
}
};
</script>