Commit ba806a0e by caoyanzhi

Merge branch 'feature/3-2迭代'

parents 39e78573 03ef7a06
......@@ -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'
}
};
......
......@@ -39,6 +39,11 @@ export const routes = [
path: 'activity-config',
name: '营销活动配置',
component: _import('activity', 'index')
},
{
path: 'holiday-manage',
name: '营销节日管理',
component: _import('activity', 'holiday-manage')
}
]
}
......
<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>
<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