Skip to content

M
marketing-opeartion
Commit ba806a0e by caoyanzhi
Options

Merge branch 'feature/3-2迭代'

parents 39e78573 03ef7a06
Showing with 809 additions and 0 deletions
src/api/operation.js
......@@ -43,6 +43,18 @@ let marketingApi = {
activityCategoryUpdate: {
method: 'post',
url: '/operation/activity/category/addOrUpdate'
},
// 节日管理
getHolidayCategoryList: '/holidays/category/getList',
getPageHolidays: '/holidays/page-holidays',
getHolidayDetail: '/holidays/get-holidays',
addHoliday: '/holidays/add-holidays',
editHoliday: '/holidays/edit-holidays',
delHoliday: '/holidays/delete-holidays',
saveHolidayCategory: {
method: 'post',
url: '/holidays/category/addOrUpdate'
}
};
......
src/router/routes.js
......@@ -39,6 +39,11 @@ export const routes = [
path: 'activity-config',
name: '营销活动配置',
component: _import('activity', 'index')
},
{
path: 'holiday-manage',
name: '营销节日管理',
component: _import('activity', 'holiday-manage')
}
]
}
......
src/views/activity/component/holiday-category-dialog.vue 0 → 100644
<template>
<el-dialog custom-class="category-dialog" :visible.sync="dialogVisible" :rules="rules" class="category-dialog-wrap" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
<div v-loading="loading">
<el-row type="flex" justify="space-between">
<h1 class="el-dialog__title">分类管理</h1>
<i class="iconfont-components3 icon-cp-close" @click="handleClose"></i>
</el-row>
<el-form ref="form" :model="list">
<draggable tag="ul" :list="list" class="list-group" handle=".handle">
<li class="list-group-item" v-for="(item, idx) in list" :key="idx">
<el-form-item :prop="idx + '.categoryName'" :rules="rules.categoryName">
<!-- <p class="show-name" v-show="!item.isEdit">{{list[idx].categoryName}}</p> -->
<el-input v-model="list[idx].categoryName" style="width: 466px" maxlength="8" placeholder="请输入分类名称，不超过8个字"> </el-input>
</el-form-item>
<div class="btn-wrap" v-if="list.length > 1">
<span class="icon-span" @click="onDeleteItem(idx)"><i class="iconfont-components3 icon-cp-DeleteOutlined" /></span>
<el-tooltip popper-class="category-dialog-tooltip" effect="dark" content="拖拽排序" placement="top">
<i class="iconfont-components3 icon-cp-tuozhuaipaixu handle"></i>
</el-tooltip>
</div>
<div class="btn-wrap" v-else></div>
</li>
</draggable>
</el-form>
<el-button type="text" @click="addItem" style="margin-top: 12px"><i class="iconfont-components3 icon-cp-PlusOutlined" /> 添加分类</el-button>
<el-row type="flex" justify="end" style="margin-top: 24px">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</el-row>
</div>
</el-dialog>
</template>
<script>
import requestApi from '@/api/operation';
const { saveHolidayCategory, getHolidayCategoryList } = requestApi;
import draggable from 'vuedraggable';
export default {
name: 'CategoryDialog',
components: {
draggable
},
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
const nameValidate = (r, v, c) => {
if (!v) c(new Error('请填写分类名称'));
if (this.nameMap[v] === this.list.indexOf((el) => el.categoryName === v)) c(new Error(`${v}分类名称重复`));
c();
};
return {
dialogVisible: false,
loading: false,
list: [],
nameMap: {},
defaultItem: {
activityCategoryId: '',
categoryName: '',
isEdit: true
},
rules: {
categoryName: [
{
required: true,
validator: nameValidate
}
]
},
copyItem: {}
};
},
methods: {
handleClose() {
this.$nextTick((_) => {
this.list = [];
this.$emit('update:visible', false);
});
},
async getCategoryList() {
this.loading = true;
let { result = [] } = await getHolidayCategoryList().finally((_) => (this.loading = false));
let nameMap = {};
result = result.map((el, idx) => {
el.isEdit = false;
nameMap[el.categoryName] = idx;
return el;
});
this.nameMap = nameMap;
this.list = JSON.parse(JSON.stringify(result));
},
submit() {
this.loading = true;
this.$refs.form.validate((valid) => {
if (valid) {
let list = [];
list = this.list.map((el, idx) => {
el = {
categorySort: idx,
categoryName: el.categoryName,
activityCategoryId: el.activityCategoryId || ''
};
return el;
});
saveHolidayCategory(list)
.then((res) => {
this.$message.success('提交成功');
this.handleClose();
this.$emit('refresh');
this.loading = false;
})
.catch(() => {
this.loading = false;
});
} else {
this.loading = false;
}
});
},
async onDeleteItem(idx) {
// activityGetList
if (this.list.length == 1) {
return;
}
if (this.list[idx].hasUse) {
return this.$message.error('该分类有活动在引用，不可删除！');
}
this.list.splice(idx, 1);
delete this.nameMap[this.list[idx].categoryName];
},
addItem() {
this.copyItem = {};
this.list.push({
...this.defaultItem
});
}
},
watch: {
visible: {
handler(n, o) {
this.dialogVisible = n;
if (n) {
this.getCategoryList();
}
},
immediate: true
}
}
};
</script>
<style lang="less" scoped>
.list-group {
max-height: 516px;
padding-bottom: 20px;
overflow-y: auto;
}
.list-group-item {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 10px;
& + .list-group-item {
margin-top: 20px;
}
.el-form-item {
margin-bottom: 0;
.show-name {
width: 430px;
height: 32px;
padding-left: 11px;
color: #303133;
font-size: 14px;
line-height: 32px;
background: #f2f3f7;
border-radius: 2px;
cursor: default;
}
}
.icon-span {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
&:hover {
background: #f2f3f7;
border-radius: 2px;
}
& + .icon-span {
margin-left: 4px;
}
i.iconfont-components3 {
color: #303133;
}
}
.handle.icon-cp-tuozhuaipaixu {
margin-left: 4px;
&:hover {
cursor: move;
color: #2f54eb;
}
}
}
</style>
<style lang="less">
.category-dialog-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.category-dialog {
margin: 0 !important;
padding: 0 4px 4px;
max-height: 700px;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding-bottom: 0 !important;
.el-row {
margin-bottom: 24px;
.icon-cp-close {
cursor: pointer;
&:hover {
color: #2f54eb;
}
}
}
}
.el-dialog__footer {
padding: 20px 0;
}
}
.el-tooltip__popper.category-dialog-tooltip {
line-height: 22px;
padding: 0 5px;
font-size: 12px;
transform: translateY(4px);
.popper__arrow {
display: none;
}
}
</style>
src/views/activity/component/holiday-dialog.vue 0 → 100644
<template>
<el-dialog :title="isEdit ? '编辑' : '新增节日'" :visible.sync="visible" width="600px" @close="onClose">
<el-form :model="submitData" :rules="rules" ref="submitData" label-width="95px">
<el-row type="flex" style="background: #f7f8fa; border-radius: 2px; height: 32px; margin-bottom: 20px" align="middle" v-if="!isEdit">
<i class="el-icon-warning" style="padding: 0 9px; color: #2f54eb"></i>
<div style="font-size: 12px; color: #303133">新增节日后，则在商户后台节日活动弹框中展示</div>
</el-row>
<el-form-item label="节日分类" prop="categoryCode">
<el-select v-model="submitData.categoryCode" clearable placeholder="请选择分类" style="width: 465px">
<el-option v-for="item in categoryList" :key="item.activityCategoryId" :label="item.categoryName" :value="item.activityCategoryId"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="节日名称" prop="name">
<el-input v-model="submitData.name" placeholder="请输入节日名称，不超过 10 个字" maxlength="10" clearable :disabled="isEdit"></el-input>
</el-form-item>
<el-form-item label="节日日期" prop="customFlag">
<el-radio v-model="submitData.customFlag" :label="0" :disabled="isEdit">固定日期</el-radio>
<el-radio v-model="submitData.customFlag" :label="1" :disabled="isEdit">灵活日期</el-radio>
</el-form-item>
<el-form-item label="选择日期" prop="date" v-if="submitData.customFlag == 0">
<div>
<el-radio v-model="submitData.dateType" :label="1" :disabled="isEdit">
<div style="display: inline-block">阳历</div>
<el-form-item v-if="submitData.dateType == 1" label="" prop="date" style="margin-left: 16px; display: inline-block">
<el-date-picker v-model="submitData.date" type="date" placeholder="选择日期" format="MM-dd" :disabled="isEdit"> </el-date-picker>
</el-form-item>
</el-radio>
</div>
<div style="padding-top: 10px">
<el-radio v-model="submitData.dateType" :label="2" :disabled="isEdit">
<div style="display: inline-block">农历</div>
<el-form-item v-if="submitData.dateType == 2" label="" prop="date" style="margin-left: 16px; display: inline-block">
<el-date-picker v-model="submitData.date" type="date" placeholder="选择日期" format="MM-dd" :disabled="isEdit"> </el-date-picker>
</el-form-item>
</el-radio>
</div>
</el-form-item>
<el-form-item label="选择日期" v-if="submitData.customFlag == 1" prop="holidaysDate">
<el-row type="flex" align="middle">
<el-form-item prop="month" style="margin: 0 10px 0 0">
<el-select v-model="submitData.month" placeholder="请选择月份" class="selector-item" :disabled="isEdit">
<el-option v-for="item in months" :key="item.key" :label="item.value" :value="item.key"> </el-option>
</el-select>
</el-form-item>
<el-form-item prop="week" style="margin: 0 10px 0 0">
<el-select v-model="submitData.week" placeholder="请选择周" class="selector-item" :disabled="isEdit">
<el-option v-for="item in weeks" :key="item.key" :label="item.value" :value="item.key"> </el-option>
</el-select>
</el-form-item>
<el-form-item prop="weekDay" style="margin: 0 10px 0 0">
<el-select v-model="submitData.weekDay" placeholder="请选择星期" class="selector-item" :disabled="isEdit">
<el-option v-for="item in weekDays" :key="item.key" :label="item.value" :value="item.key"> </el-option>
</el-select>
</el-form-item>
</el-row>
</el-form-item>
<el-form-item label="排序号" prop="sort">
<el-input v-model="submitData.sort" placeholder="请输入排序号，1-1000" max="1000" min="1" step="1" clearable></el-input>
</el-form-item>
<el-form-item>
<el-row type="flex" justify="end">
<el-button @click="onClose">取消</el-button>
<el-button type="primary" @click="submitForm('submitData')">确定</el-button>
</el-row>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
// import calendar from '@/utils/calendar.js';
import fetch from '@/api/operation.js';
const { addHoliday, getHolidayCategoryList,editHoliday } = fetch;
export default {
name: 'HolidayDialog',
props: {
visible: Boolean,
data: Object
},
data() {
return {
submitData: {
categoryCode: '', // 节日类目id
name: '',
customFlag: 0,
dateType: 1,
holidaysDate: '',
sort: '',
date: '',
month: '',
week: '',
weekDay: ''
},
months: [
{
key: '1',
value: '一月'
},
{
key: '2',
value: '二月'
},
{
key: '3',
value: '三月'
},
{
key: '4',
value: '四月'
},
{
key: '5',
value: '五月'
},
{
key: '6',
value: '六月'
},
{
key: '7',
value: '七月'
},
{
key: '8',
value: '八月'
},
{
key: '9',
value: '九月'
},
{
key: '10',
value: '十月'
},
{
key: '11',
value: '十一月'
},
{
key: '12',
value: '十二月'
}
],
weeks: [
{
key: '1',
value: '第一周'
},
{
key: '2',
value: '第二周'
},
{
key: '3',
value: '第三周'
},
{
key: '4',
value: '第四周'
},
{
key: '5',
value: '第五周'
}
],
weekDays: [
{
key: '1',
value: '星期一'
},
{
key: '2',
value: '星期二'
},
{
key: '3',
value: '星期三'
},
{
key: '4',
value: '星期四'
},
{
key: '5',
value: '星期五'
},
{
key: '6',
value: '星期六'
},
{
key: '7',
value: '星期日'
}
],
rules: {
categoryCode: {
required: true,
message: '请选择节日分类'
},
name: {
required: true,
message: '请输入节日名称'
},
date: {
required: true,
message: '请选择日期'
},
holidaysDate: {
required: true,
validator: (rule, value, callback) => {
callback();
}
},
customFlag: {
required: true,
message: '请选择日期类型'
},
month: {
required: true,
message: '请选择月份'
},
week: {
required: true,
message: '请选择周'
},
weekDay: {
required: true,
message: '请选择星期'
},
sort: {
required: true,
name: '排序号',
validator: (rule, value, callback) => {
if (!value) {
callback(`请输入${rule.name}`);
return;
}
if (isNaN(value)) {
callback(new Error(`${rule.name}格式错误`));
return;
}
value = parseFloat(value);
if (value < 1) {
callback(new Error('排序号不能小于1'));
} else if (value > 1000) {
callback(new Error('排序号不能大于1000'));
} else {
callback();
}
}
}
},
categoryList: []
};
},
methods: {
// solarDate2lunar(solarDate) {
// var solar = solarDate.split('-');
// var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
// return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn;
// },
async getCategoryList() {
this.loading = true;
let { result = [] } = await getHolidayCategoryList().finally(() => {
this.loading = false;
});
this.categoryList = result;
},
onClose() {
this.data = {};
this.enterpriseParams = {
pageSize: 20,
currentPage: 1,
search: ''
};
this.enterpriseList = [];
this.$emit('update:visible', false);
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let { categoryCode, name, customFlag, dateType, sort, date, month, week, weekDay } = this.submitData;
let params = {
categoryCode, // 节日类目id
name,
customFlag,
dateType,
sort,
holidaysId: this.data.holidaysId || ''
};
if (customFlag == 1) {
params.holidaysDate = month + '-' + week + '-' + weekDay;
} else {
params.holidaysDate = date.getMonth() + 1 + '-' + date.getDate();
}
(this.isEdit?editHoliday:addHoliday)(params).then(() => {
this.$message.success(this.isEdit ? '保存成功' : '添加成功');
this.onClose();
this.$emit('change', params);
});
} else {
return false;
}
});
}
},
watch: {
data: {
handler(n) {
this.isEdit = n && n.categoryCode ? true : false;
if (n && n.categoryCode) {
this.submitData = {
categoryCode: n.categoryCode, // 节日类目id
name: n.name,
customFlag: n.customFlag,
dateType: n.dateType,
holidaysDate: n.holidaysDate,
sort: n.sort
};
let arr = (n.holidaysDate || '').split('-');
if (n.customFlag == 1) {
this.submitData.month = arr[0];
this.submitData.week = arr[1];
this.submitData.weekDay = arr[2];
} else {
this.submitData.date = new Date(2000, +arr[0] - 1, +arr[1]);
}
} else {
this.submitData = {
categoryCode: '', // 节日类目id
name: '',
customFlag: 0,
dateType: 1,
holidaysDate: '',
sort: '',
month: '',
week: '',
weekDay: '',
date: null
};
}
this.$refs['submitData'].resetFields();
}
},
visible: {
handler(n) {
if (n) {
this.getCategoryList();
}
}
}
}
};
</script>
<style lang="scss" scoped>
.date-selector-box .damolish .el-form-item {
margin-bottom: 0;
}
</style>
src/views/activity/holiday-manage.vue 0 → 100644
<template>
<div style="padding: 20px">
<el-row type="flex" justify="space-between">
<el-row type="flex" align="middle" style="margin-right: 10px">
<el-input @change="loadData" placeholder="请输入节日名称" prefix-icon="el-icon-search" v-model="searchParams.name" clearable style="width: 260px; margin-right: 10px"> </el-input>
<el-select v-model="searchParams.categoryCode" clearable placeholder="全部分类" @change="loadData">
<el-option v-for="item in categoryList" :key="item.activityCategoryId" :label="item.categoryName" :value="item.activityCategoryId"> </el-option>
</el-select>
</el-row>
<el-row type="flex" align="middle">
<el-button @click="categoryManage">分类管理</el-button>
<el-button type="primary" @click="addHoliday()">新增节日</el-button>
</el-row>
</el-row>
<el-table :data="list" style="margin-top: 20px" v-loading="loading">
<el-table-column label="节日分类" min-width="200px" prop="categoryName"> </el-table-column>
<el-table-column label="节日名称" min-width="200px" prop="name"> </el-table-column>
<el-table-column label="节日日期" min-width="200px" prop="holidaysDate"> </el-table-column>
<el-table-column label="排序号" min-width="200px" prop="sort"> </el-table-column>
<el-table-column label="添加时间" min-width="220px">
<template slot-scope="{ row }">
{{ row.updateTime | formatDate }}
</template>
</el-table-column>
<el-table-column label="操作" min-width="110px">
<template slot-scope="{ row }">
<el-row type="flex">
<el-button type="text" @click="edit(row)">编辑</el-button>
<el-button type="text" @click="del(row)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
<el-row type="flex" justify="end" v-if="totalCount > 0">
<el-pagination @size-change="doSizeChange" @current-change="doCurrentChange" background="#2F54EB" :current-page="searchParams.pageNum" :page-sizes="[20, 30, 40, 50]" :page-size="searchParams.pageSize" layout="total, sizes, prev, pager, next" :total="totalCount"> </el-pagination>
</el-row>
<holiday-category-dialog :visible.sync="holidayCategoryDialogVisible" @refresh="getCategoryList" v-if="holidayCategoryDialogVisible"></holiday-category-dialog>
<holiday-dialog :visible.sync="holidayDialogVisible" @change="loadData" :data.sync="editItem"></holiday-dialog>
</div>
</template>
<script>
import fetch from '@/api/operation.js';
import util from '@/filters/index.js';
const { formatDate2 } = util;
const { getPageHolidays, delHoliday, getHolidayCategoryList,getHolidayDetail } = fetch;
import holidayCategoryDialog from './component/holiday-category-dialog.vue';
import holidayDialog from './component/holiday-dialog.vue';
export default {
name: 'FeeRuleManage',
components: {
holidayCategoryDialog,
holidayDialog
},
data() {
return {
searchParams: {
pageNum: 1,
pageSize: 20,
name: '',
categoryCode: ''
},
categoryList: [],
list: [],
totalCount: 0,
holidayCategoryDialogVisible: false,
holidayDialogVisible: false
};
},
created() {
this.loadData();
this.getCategoryList();
},
methods: {
getCategoryList() {
getHolidayCategoryList().then((res) => {
let result = res.result || [];
this.categoryList = result;
});
},
doSizeChange(event) {
this.searchParams.pageSize = event;
this.loadData();
},
doCurrentChange(event) {
this.searchParams.pageNum = event;
this.loadData();
},
loadData() {
getPageHolidays(this.searchParams).then((res) => {
let result = res.result;
let list = result.result || [];
let totalCount = result.totalCount;
this.list = list;
this.totalCount = totalCount;
});
},
del(item) {
this.$confirm('删除后不可恢复，是否继续删除？', '删除提示', {
distinguishCancelAndClose: true,
type: 'warning',
confirmButtonText: '删除',
cancelButtonText: '取消'
})
.then(() => {
return delHoliday({
holidaysId: item.holidaysId
});
})
.then(() => {
this.getCategoryList();
this.loadData();
});
},
async edit(item){
let detail = await getHolidayDetail({
holidaysId: item.holidaysId || ''
});
console.log("detail----->",detail.result);
this.holidayDialogVisible = true;
this.editItem = detail.result;
},
addHoliday(){
this.holidayDialogVisible = true;
this.editItem = {};
},
categoryManage() {
this.holidayCategoryDialogVisible = true;
}
},
filters: {
formatDate: formatDate2,
filterFee(value) {
if (value === null || value === undefined) {
return '--';
}
return value;
}
}
};
</script>
<style lang="scss" scoped></style>
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