Skip to content

M
marketing-opeartion
Commit e9e874a1 by chenyu
Options

update: update

parent bb48625d
Showing with 202 additions and 157 deletions
src/api/operation.js
......@@ -33,6 +33,10 @@ let marketingApi = {
getSystemTemplate: '/sms/page-system-template',
// 生成appid
getAppid: '/sms/default-appid',
activityGetList: '/operation/activity/getList',
activityCategoryGetList: '/operation/activity/category/getList',
activityRightMenuList: '/operation/activity/rightMenuList',
activityUpdate: '/operation/activity/update',
};
let authApi = {
......
src/views/activity/component/CategoryDialog.vue
......@@ -9,9 +9,9 @@
<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+'.name'" :rules="rules.name">
<el-input v-model="list[idx].name" :disabled="!item.isEdit" style="width:430px;"
@keyup.enter.native="saveEdit(idx)">
<el-form-item :prop="idx+'.categoryName'" :rules="rules.categoryName">
<el-input v-model="list[idx].categoryName " :disabled="!item.isEdit"
style="width:430px;" @keyup.enter.native="saveEdit(idx)">
</el-input>
</el-form-item>
<div class="btn-wrap">
......@@ -44,8 +44,8 @@
</el-dialog>
</template>
<script>
// import fetch from '@/api/data-amend.js';
// const { saveItem } = fetch;
import requestApi from '@/api/operation';
const { activityCategoryGetList } = requestApi;
import draggable from 'vuedraggable';
export default {
name: 'CategoryDialog',
......@@ -57,24 +57,25 @@ export default {
type: Boolean,
default: false
},
categoryList: {
type: Array,
default() {
return {};
}
}
},
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: [],
listCopy: [],
nameMap: {},
defaultItem: {
activityCategoryId: '',
categoryName: '',
isEdit: true,
},
rules: {
name: [ { required: true, message: '请填写分类名称' } ],
categoryName: [ { required: true, validator: nameValidate } ],
},
copyItem: {}
};
......@@ -82,44 +83,64 @@ export default {
methods: {
handleClose() {
this.$nextTick(_ => {
this.list = [];
this.$emit('update:visible', false);
});
},
async getCategoryList() {
this.loading = true;
let { result = [] } = await activityCategoryGetList().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(async valid => {
// if (valid) {
// const { code } = await saveItem({ ...this.form }).finally(() => this.loading = false);
// if (code === '0') this.$message.success('提交成功');
this.$refs.form.validate(async valid => {
if (valid) {
this.list = this.list.map((el, idx) => el = {
categorySort: idx,
categoryName: el.categoryName,
activityCategoryId: el.activityCategoryId || ''
});
console.log(this.list);
// const { code } = await saveItem({ ...this.form }).finally(() => this.loading = false);
// if (code === '0') this.$message.success('提交成功');
// this.handleClose();
// this.$emit('refresh');
// } else {
// this.loading = false;
// }
// });
this.handleClose();
this.$emit('refresh');
} else {
this.loading = false;
}
});
},
onDeleteItem(idx) {
this.list.splice(idx, 1);
this.listCopy.splice(idx, 1);
delete this.nameMap[this.list[ idx ].categoryName];
},
editItem(idx) {
this.copyItem = { ...this.list[ idx ] };
this.list[ idx ].isEdit = true;
},
saveEdit(idx) {
this.$refs.form.validateField(idx + '.name', errorMessage => {
this.$refs.form.validateField(idx + '.categoryName', errorMessage => {
if (errorMessage) return;
this.listCopy.splice(idx, 1, { ...this.list[ idx ], isEdit: false });
this.$set(this.list, idx, { ...this.list[ idx ], isEdit: false });
this.nameMap[this.list[ idx ].categoryName] = idx;
});
},
async cancelEdit(idx) {
if (!this.listCopy[ idx ]) return this.list.splice(idx, 1);
if (!Object.keys(this.copyItem).length) return this.list.splice(idx, 1);
this.$set(this.list, idx, { ...this.copyItem, isEdit: false });
this.copyItem = {};
},
addItem() {
this.copyItem = {};
this.list.push({ ...this.defaultItem });
}
},
......@@ -128,8 +149,7 @@ export default {
handler: function(n, o) {
this.dialogVisible = n;
if (n) {
this.list = JSON.parse(JSON.stringify(this.categoryList));
this.listCopy = JSON.parse(JSON.stringify(this.categoryList));
this.getCategoryList();
}
},
immediate: true
......
src/views/activity/component/NewActivity.vue
......@@ -3,7 +3,7 @@
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">{{form.id?'编辑活动':'新建活动'}}</h1>
<h1 class="el-dialog__title">{{form.activityConfigId?'编辑活动':'新建活动'}}</h1>
<i class="iconfont-components3 icon-cp-close" @click="handleClose"></i>
</el-row>
<div class="tip-message-wrap">
......@@ -11,33 +11,37 @@
<div class="tip-message-content">活动新增成功，需要给用户配置活动权限后，活动才会展示在GIC后台-营销活动列表</div>
</div>
<el-form ref="form" :model="form" label-width="92px" :rules="rules">
<el-form-item label="活动分类" prop="value1">
<el-select v-model="form.value1" placeholder="请选择分类" style="width:460px;">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
<el-form-item label="活动分类" prop="activityCategoryId">
<el-select v-model="form.activityCategoryId" placeholder="请选择" style="width:460px;">
<el-option v-for="item in categoryList" :key="item.activityCategoryId"
:value="item.activityCategoryId" :label="item.categoryName" />
</el-select>
</el-form-item>
<el-form-item label="活动名称" prop="value1">
<el-input v-model="form.value1" type="text" maxlength="8" placeholder="请输入活动名称，不超过 8 个字">
</el-input>
<el-form-item label="活动名称" prop="activityInfo">
<el-select v-model="form.activityInfo" placeholder="请选择" style="width:460px;"
value-key="activityCode">
<el-option v-for="item in activityList" :key="item.activityCode"
:label="item.activityName" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="活动说明" prop="value1">
<el-input v-model="form.value1" type="text" maxlength="20"
<el-form-item label="活动说明" prop="activityExplain">
<el-input v-model="form.activityExplain" type="text" maxlength="20"
placeholder="请输入活动说明，不超过 20 个字"></el-input>
</el-form-item>
<el-form-item label="标签文案" prop="value1">
<el-input v-model="form.value1" type="text" maxlength="2" placeholder="请输入活动说明，不超过 2 个字">
<el-form-item label="标签文案" prop="activityRemark">
<el-input v-model="form.activityRemark" type="text" maxlength="2"
placeholder="请输入活动说明，不超过 2 个字">
</el-input>
</el-form-item>
<el-form-item label="跳转路径" prop="value1">
<el-input v-model="form.value1" placeholder="请输入按钮跳转路径"></el-input>
<el-form-item label="跳转路径" prop="jumpUrl">
<el-input v-model="form.jumpUrl" placeholder="请输入按钮跳转路径"></el-input>
</el-form-item>
<el-form-item label="排序号" prop="value6">
<el-input-number v-model="form.value6" :max="1000" :min="1" controls-position="right"
placeholder="请输入排序号，1-1000" style="width:460px;" />
<el-form-item label="排序号" prop="activitySort">
<el-input-number v-model="form.activitySort" :max="1000" :min="1"
controls-position="right" placeholder="请输入排序号，1-1000" style="width:460px;" />
</el-form-item>
<el-form-item label="活动图片" prop="value4">
<el-form-item label="活动图片" prop="activityImage">
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" :image-list="imageList" :max-image-length="maxlength" :accept="accept"
:before-upload="beforeUpload" @uploadOnSuccess="uploadOnSuccess"
......@@ -54,8 +58,8 @@
</el-dialog>
</template>
<script>
// import fetch from '@/api/data-amend.js';
// const { saveItem, getRpcList } = fetch;
import requestApi from '@/api/operation';
const { activityCategoryGetList, activityRightMenuList, activityUpdate } = requestApi;
export default {
name: 'NewActivity',
props: {
......@@ -67,33 +71,39 @@ export default {
type: Object,
default() {
return {
id: '',
activityConfigId: '',
};
}
},
categoryList: {
type: Array,
default() {
return {};
}
}
},
data() {
const activityInfoValidator = (r, v, c) => {
console.log(v);
if (!v.activityCode || !v.activityName) {
c(new Error('请选择活动名称'));
}
c();
};
return {
dialogVisible: false,
loading: false,
form: {
id: '',
value1: '',
value6: undefined
activityConfigId: '',
activityCategoryId: '',
activityInfo: {},
activityCode: '',
activityName: '',
activityExplain: '',
activityRemark: '',
jumpUrl: '',
activitySort: undefined
},
rules: {
value1: [ { required: true, message: '请选择活动分类' } ],
value2: [ { required: true, message: '请输入活动名称' } ],
value3: [ { required: true, message: '请输入活动说明' } ],
value4: [ { required: true, message: '请上传活动图片' } ],
value5: [ { required: true, message: '请输入跳转路径' } ],
value6: [ { required: true, message: '请输入排序号' } ],
activityConfigId: [ { required: true, message: '请选择活动分类' } ],
activityInfo: [ { required: true, validator: activityInfoValidator } ],
activityExplain: [ { required: true, message: '请输入活动说明' } ],
activityImage: [ { required: true, message: '请上传活动图片' } ],
activitySort: [ { required: true, message: '请输入排序号' } ],
},
projectName: 'gic-marketing-operation', // 当前项目名(必传参数)
limitW: 80, // 上传图片的限制宽度(数字),(可选参数),各个调用地方可能不同
......@@ -102,6 +112,8 @@ export default {
accept: 'image/jpg,image/jpeg,image/png',
maxlength: 1, // 图片数量 默认 5
imageList: [], // 是否显示已上传文件列表
categoryList: [],
activityList: [],
};
},
methods: {
......@@ -111,39 +123,72 @@ export default {
this.$emit('update:visible', false);
});
},
init() {
this.loading = true;
this.getCategoryList();
this.getSelectActivityList();
this.loading = false;
},
async getCategoryList() {
let { result = [] } = await activityCategoryGetList();
this.categoryList = JSON.parse(JSON.stringify(result));
},
async getSelectActivityList() {
let { result = [] } = await activityRightMenuList();
this.activityList = result.map(el => {
el = { activityCode: el.menuCode, activityName: el.menuName };
return el;
});
},
submit() {
this.loading = true;
// this.$refs.form.validate(async valid => {
// if (valid) {
// const { code } = await saveItem({ ...this.form }).finally(() => this.loading = false);
// if (code === '0') this.$message.success('提交成功');
// this.handleClose();
// this.$emit('refresh');
// } else {
// this.loading = false;
// }
// });
this.$refs.form.validate(async valid => {
if (valid) {
let param = {
activityConfigId: this.form.activityConfigId,
activityCategoryId: this.form.activityCategoryId,
activityCode: this.form.activityCode,
activityName: this.form.activityName,
activityExplain: this.form.activityExplain,
activityRemark: this.form.activityRemark,
activitySort: this.form.activitySort,
activityImage: this.form.activityImage,
categoryName: this.form.categoryName,
};
delete param.activityInfo;
const { code } = await activityUpdate(param).finally(() => this.loading = false);
if (code === '0') this.$message.success('提交成功');
this.handleClose();
this.$emit('refresh');
} else {
this.loading = false;
}
});
},
beforeUpload(file) {
if (file.size / 1024 > 100) {
this.$message.error('图片不能大于100kb，请重新上传！');
return false;
}
return true;
},
uploadOnSuccess({ res, file }) {
this.value4 = res.result[ 0 ].qcloudImageUrl || '';
this.activityImage = res.result[ 0 ].qcloudImageUrl || '';
this.imageList = [ { url: res.result[ 0 ].qcloudImageUrl } ];
},
deleteImage() {
this.value4 = '';
}
this.activityImage = '';
this.imageList = [];
},
},
watch: {
visible: {
handler: function(n, o) {
this.dialogVisible = n;
if (n) {
this.form = Object.assign({}, this.form, this.item);
this.init();
this.form = Object.assign({}, this.form, this.item, { activityInfo: { activityCode: this.item.activityCode, activityName: this.item.activityName } });
this.imageList = this.item.activityImage ? [ { url: this.item.activityImage } ] : [];
}
},
immediate: true
......
src/views/activity/index.vue
<template>
<div class="container right_content">
<div class="container right_content" style="min-width:1200px;">
<el-row type="flex" justify="space-between">
<div class="search">
<el-input v-model="search.search" @change="searchTypeChange" prefix-icon="el-icon-search"
<el-input v-model="search.search" @change="getList" prefix-icon="el-icon-search"
placeholder="请输入活动名称" style="width: 260px" clearable />
<el-select v-model="search.category" @change="searchTypeChange" placeholder="全部分类"
<el-select v-model="search.activityCategoryId" @change="getList" placeholder="全部分类"
class="ml10">
<el-option v-for="item in categoryList" :key="item.categoryId" :value="item.categoryId"
:label="item.categoryName" />
<el-option v-for="item in categoryList" :key="item.activityCategoryId"
:value="item.activityCategoryId" :label="item.categoryName" />
</el-select>
</div>
<div class="right-btn">
<el-button @click="categoryVisible=true" v-if="$getButtonLimit($buttonCode.activityCategory)"
<el-button @click="categoryVisible=true"
v-if="$getButtonLimit($buttonCode.activityCategory)"
:limit-code="$buttonCode.activityCategory">分类管理</el-button>
<el-button type="primary" @click="onEdit({})"
v-if="$getButtonLimit($buttonCode.activityAdd)" :limit-code="$buttonCode.activityAdd">新增活动
</el-button>
</div>
</el-row>
<div class="mt20">
<el-table :data="tableData.data" element-loading-text="拼命加载中" v-loading="loading">
<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"
<el-table :data="tableData" element-loading-text="拼命加载中" v-loading="loading">
<el-table-column v-for="(v, i) in tableHeader" :key="i" v-bind="{...v}"
show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
<el-image v-else-if="v.isImage&&scope.row.activityImage" style="width: 40px; height: 40px" :src="scope.row.activityImage" :preview-src-list="[scope.row.activityImage]"/>
<span v-else>{{ scope.row[v.prop] || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<el-table-column label="操作" width="100">
<template slot-scope="{ row }">
<el-button type="text" @click="onEdit(row)"
v-if="$getButtonLimit($buttonCode.activityEdit)"
:limit-code="$buttonCode.activityEdit">
编辑</el-button>
<el-button type="text" @click="onDeletet(row)"
v-if="$getButtonLimit($buttonCode.activityDel)" :limit-code="$buttonCode.activityDel">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<dm-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:total="tableData.total" :current-page="tableData.pageNum" :page-sizes="[20, 40, 60, 80]"
:page-size="tableData.pageSize" layout="total, sizes, prev, pager, next"
style="text-align: right" background></dm-pagination>
</div>
<category-dialog :visible.sync="categoryVisible" :category-list="categoryList" />
<new-activity :visible.sync="activityVisible" :category-list="categoryList" :item="editItem" />
<category-dialog :visible.sync="categoryVisible" />
<new-activity :visible.sync="activityVisible" :category-list="categoryList" :item="editItem" @refresh="getList"/>
</div>
</template>
<script>
// import requestApi from '@/api/operation';
// const { getAllChannel, getSystemTemplate } = requestApi;
import requestApi from '@/api/operation';
const { activityGetList, activityCategoryGetList } = requestApi;
import CategoryDialog from './component/CategoryDialog';
import NewActivity from './component/NewActivity';
export default {
......@@ -64,78 +54,64 @@ export default {
data() {
return {
loading: false,
categoryList: [ { name: '1', isEdit: false }, { name: '2', isEdit: false } ],
categoryList: [],
categoryFilter: {},
activityList: [],
search: {
search: '',
category: ''
},
tableData: {
data: [],
pageNum: 1,
pageSizeList: [ 20, 40, 60, 80 ],
pageSize: 20,
tableHeader: [],
total: 0
activityCategoryId: ''
},
tableData: [],
tableHeader: [],
editItem: {},
categoryVisible: false,
activityVisible: false
};
},
created() {
this.getTableHeader();
// this.getcategoryList();
// this.getTableData();
this.init();
},
methods: {
getTableHeader() {
this.tableData.tableHeader = [
{ label: '活动分类', prop: '' },
{ label: '活动名称', prop: '' },
{ label: '活动说明', prop: '' },
{ label: '标签文案', prop: '' },
{ label: '跳转路径', prop: '' },
{ label: '排序号', prop: '' },
{ label: '活动图片', prop: '' },
this.tableHeader = [
{ label: '活动分类', prop: 'activityCategoryId', width: '120', formatter: ({ activityCategoryId = '' }) => this.categoryFilter[activityCategoryId] },
{ label: '活动名称', prop: 'activityName', 'min-width': '100' },
{ label: '活动说明', prop: 'activityExplain', 'min-width': '100' },
{ label: '标签文案', prop: 'activityRemark', 'min-width': '50' },
{ label: '跳转路径', prop: 'jumpUrl', 'min-width': '100' },
{ label: '排序号', prop: 'activitySort', width: '100' },
{ label: '活动图片', prop: 'activityImage', width: '100', isImage: true },
{
label: '添加时间', prop: '', formatter: (row) => {
return '';
}
label: '添加时间', prop: 'createTime', 'width': '180', formatter: ({ createTime = '' }) => this.$options.filters.formatDate(createTime)
},
];
},
async getTableData() {
init() {
this.loading = true;
// const { pageNum, pageSize } = this.tableData;
// const { search, category } = this.search;
// const para = {
// pageNum,
// pageSize,
// smsSendType: category,
// searchParams: search
// };
// const result = await getSystemTemplate(para);
// this.tableData.data = result.result.result || [];
// this.tableData.total = result.result.totalCount || 0;
this.getTableHeader();
this.getList();
this.getCategoryList();
this.loading = false;
},
handleSizeChange(val) {
this.tableData.pageSize = val;
this.tableData.pageNum = 1;
this.getTableData();
},
handleCurrentChange(val) {
this.tableData.pageNum = val;
this.getTableData();
},
async getcategoryList() {
// const { result } = await getAllChannel();
// this.categoryList = result || [];
async getList() {
const { search, activityCategoryId } = this.search;
const para = {
search,
activityCategoryId,
orderBy: 'create_time DESC'
};
const res = await activityGetList(para);
this.tableData = res?.result || [];
},
searchTypeChange() {
this.tableData.pageNum = 1;
this.getTableData();
async getCategoryList() {
let { result = [] } = await activityCategoryGetList();
let categoryFilter = {};
result = result.map(el => {
categoryFilter[el.activityCategoryId] = el.categoryName;
return el;
});
this.categoryFilter = { ...categoryFilter };
this.categoryList = result || [];
},
onEdit(row) {
this.editItem = { ...this.editItem, ...row };
......
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