Skip to content

M
marketing-opeartion
Commit bb48625d by chenyu
Options

update: update

parent d02a9309
Showing with 564 additions and 3 deletions
package.json
......@@ -12,12 +12,13 @@
"dependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"axios": "^0.19.2",
"vue-clipboard2": "^0.1.1",
"core-js": "^2.6.5",
"element-ui": "^2.13.0",
"js-cookie": "^2.2.0",
"vue": "2.6.6",
"vue-router": "^3.1.5"
"vue-clipboard2": "^0.1.1",
"vue-router": "^3.1.5",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"@commitlint/cli": "^11.0.0",
......
public/index.html
......@@ -7,6 +7,8 @@
<link rel="icon" href="<%= BASE_URL %>favicon2.ico">
<link rel="stylesheet" type="text/css" href="//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.68.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2995156_rf810o69kh.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2859043_3i96mi4mdy2.css">
<title>实施运维</title>
</head>
<body class="damolish">
......@@ -24,5 +26,7 @@
})();
</script>
<script src="//web-1251519181.file.myqcloud.com/components/user-info.1.0.3.js"></script>
<script src="//web-1251519181.file.myqcloud.com/components/pagination.1.0.8.js"></script>
<!-- <script src="//web-1251519181.file.myqcloud.com/components/upload-image.2.0.30.js"></script> -->
</body>
</html>
src/components/layout.vue
......@@ -44,7 +44,6 @@ export default {
methods: {
getMenuList() {
getUserInfo().then(res => {
console.log(res);
this.entranceList = [];
let entranceList = res.result.menuList ? generatorMenuList(res.result.menuList) : [];
console.log(entranceList);
......
src/router/routes.js
......@@ -29,5 +29,17 @@ export const routes = [
component: _import('message', 'system-message')
},
]
},
{
path: '/activity',
name: '营销管理',
component: Layout,
children: [
{
path: 'activity-config',
name: '营销活动配置',
component: _import('activity', 'index')
}
]
}
];
src/views/activity/component/CategoryDialog.vue 0 → 100644
<template>
<el-dialog custom-class="category-dialog" :visible.sync=" dialogVisible" :rules="rules"
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+'.name'" :rules="rules.name">
<el-input v-model="list[idx].name" :disabled="!item.isEdit" style="width:430px;"
@keyup.enter.native="saveEdit(idx)">
</el-input>
</el-form-item>
<div class="btn-wrap">
<template v-if="item.isEdit">
<el-button type="text" @click="cancelEdit(idx)">取消</el-button>
<el-button type="text" @click="saveEdit(idx)">保存</el-button>
</template>
<template v-else>
<span class="icon-span" @click="editItem(idx)"><i
class="iconfont-components3 icon-cp-edit-outlined" /></span>
<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>
</template>
</div>
</li>
</draggable>
</el-form>
<el-button type="text" @click="addItem"><i
class="iconfont-components3 icon-cp-PlusOutlined" />
添加分类</el-button>
<div class="el-dialog__footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
// import fetch from '@/api/data-amend.js';
// const { saveItem } = fetch;
import draggable from 'vuedraggable';
export default {
name: 'CategoryDialog',
components: {
draggable
},
props: {
visible: {
type: Boolean,
default: false
},
categoryList: {
type: Array,
default() {
return {};
}
}
},
data() {
return {
dialogVisible: false,
loading: false,
list: [],
listCopy: [],
defaultItem: {
isEdit: true,
},
rules: {
name: [ { required: true, message: '请填写分类名称' } ],
},
copyItem: {}
};
},
methods: {
handleClose() {
this.$nextTick(_ => {
this.$emit('update:visible', false);
});
},
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;
// }
// });
},
onDeleteItem(idx) {
this.list.splice(idx, 1);
this.listCopy.splice(idx, 1);
},
editItem(idx) {
this.copyItem = { ...this.list[ idx ] };
this.list[ idx ].isEdit = true;
},
saveEdit(idx) {
this.$refs.form.validateField(idx + '.name', errorMessage => {
if (errorMessage) return;
this.listCopy.splice(idx, 1, { ...this.list[ idx ], isEdit: false });
this.$set(this.list, idx, { ...this.list[ idx ], isEdit: false });
});
},
async cancelEdit(idx) {
if (!this.listCopy[ idx ]) return this.list.splice(idx, 1);
this.$set(this.list, idx, { ...this.copyItem, isEdit: false });
this.copyItem = {};
},
addItem() {
this.list.push({ ...this.defaultItem });
}
},
watch: {
visible: {
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));
}
},
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;
}
.icon-span {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
&:hover {
background: #f2f3f7;
border-radius: 2px;
}
}
.handle.icon-cp-tuozhuaipaixu {
margin-left: 4px;
&:hover {
cursor: move;
color: #2f54eb;
}
}
}
</style>
<style lang="less">
.category-dialog {
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-tooltip__popper.category-dialog-tooltip {
line-height: 22px;
padding: 0 5px;
font-size: 12px;
transform: translateY(4px);
.popper__arrow {
display: none;
}
}
</style>
\ No newline at end of file
src/views/activity/component/NewActivity.vue 0 → 100644
<template>
<el-dialog custom-class="category-dialog" :visible.sync=" dialogVisible" :rules="rules"
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>
<i class="iconfont-components3 icon-cp-close" @click="handleClose"></i>
</el-row>
<div class="tip-message-wrap">
<i class="iconfont-components3 icon-cp-warning-circle-fill"></i>
<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-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>
<el-form-item label="活动说明" prop="value1">
<el-input v-model="form.value1" 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-input>
</el-form-item>
<el-form-item label="跳转路径" prop="value1">
<el-input v-model="form.value1" 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>
<el-form-item label="活动图片" prop="value4">
<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"
@deleteImage="deleteImage">
</vue-gic-upload-image>
<p class="image-tip">图片尺寸80*80px，格式 jpg/jpeg/png，大小 100KB 以内。</p>
</el-form-item>
</el-form>
<div class="el-dialog__footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
// import fetch from '@/api/data-amend.js';
// const { saveItem, getRpcList } = fetch;
export default {
name: 'NewActivity',
props: {
visible: {
type: Boolean,
default: false
},
item: {
type: Object,
default() {
return {
id: '',
};
}
},
categoryList: {
type: Array,
default() {
return {};
}
}
},
data() {
return {
dialogVisible: false,
loading: false,
form: {
id: '',
value1: '',
value6: 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: '请输入排序号' } ],
},
projectName: 'gic-marketing-operation', // 当前项目名(必传参数)
limitW: 80, // 上传图片的限制宽度(数字),(可选参数),各个调用地方可能不同
limitH: 80, // 上传图片的限制高度(数字),(可选参数),各个调用地方可能不同
actionUrl: '/api-plug/upload-img', // 必选参数，上传的相对地址 String 类型,切勿硬编码写死地址
accept: 'image/jpg,image/jpeg,image/png',
maxlength: 1, // 图片数量 默认 5
imageList: [], // 是否显示已上传文件列表
};
},
methods: {
handleClose() {
this.$refs.form.resetFields();
this.$nextTick(_ => {
this.$emit('update:visible', false);
});
},
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;
// }
// });
},
beforeUpload(file) {
if (file.size / 1024 > 100) {
this.$message.error('图片不能大于100kb，请重新上传！');
return false;
}
},
uploadOnSuccess({ res, file }) {
this.value4 = res.result[ 0 ].qcloudImageUrl || '';
this.imageList = [ { url: res.result[ 0 ].qcloudImageUrl } ];
},
deleteImage() {
this.value4 = '';
}
},
watch: {
visible: {
handler: function(n, o) {
this.dialogVisible = n;
if (n) {
this.form = Object.assign({}, this.form, this.item);
}
},
immediate: true
},
},
};
</script>
<style lang="less" scoped>
.tip-message-wrap {
display: flex;
align-items: center;
height: 32px;
padding-left: 17px;
margin-bottom: 20px;
background: #f7f8fa;
border-radius: 2px;
cursor: default;
.icon-cp-warning-circle-fill {
margin-right: 5px;
font-size: 13px;
color: #2f54eb;
}
.tip-message-content {
font-size: 12px;
color: #303133;
}
}
.image-tip {
margin: 6px 0 14px;
font-size: 12px;
color: #909399;
line-height: 17px;
cursor: default;
}
/deep/.el-input-number.is-controls-right:hover .el-input-number__decrease,
/deep/.el-input-number.is-controls-right:hover .el-input-number__increase {
display: none;
}
</style>
\ No newline at end of file
src/views/activity/index.vue 0 → 100644
<template>
<div class="container right_content">
<el-row type="flex" justify="space-between">
<div class="search">
<el-input v-model="search.search" @change="searchTypeChange" prefix-icon="el-icon-search"
placeholder="请输入活动名称" style="width: 260px" clearable />
<el-select v-model="search.category" @change="searchTypeChange" placeholder="全部分类"
class="ml10">
<el-option v-for="item in categoryList" :key="item.categoryId" :value="item.categoryId"
:label="item.categoryName" />
</el-select>
</div>
<div class="right-btn">
<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"
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" @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" />
</div>
</template>
<script>
// import requestApi from '@/api/operation';
// const { getAllChannel, getSystemTemplate } = requestApi;
import CategoryDialog from './component/CategoryDialog';
import NewActivity from './component/NewActivity';
export default {
components: {
CategoryDialog,
NewActivity
},
data() {
return {
loading: false,
categoryList: [ { name: '1', isEdit: false }, { name: '2', isEdit: false } ],
search: {
search: '',
category: ''
},
tableData: {
data: [],
pageNum: 1,
pageSizeList: [ 20, 40, 60, 80 ],
pageSize: 20,
tableHeader: [],
total: 0
},
editItem: {},
categoryVisible: false,
activityVisible: false
};
},
created() {
this.getTableHeader();
// this.getcategoryList();
// this.getTableData();
},
methods: {
getTableHeader() {
this.tableData.tableHeader = [
{ label: '活动分类', prop: '' },
{ label: '活动名称', prop: '' },
{ label: '活动说明', prop: '' },
{ label: '标签文案', prop: '' },
{ label: '跳转路径', prop: '' },
{ label: '排序号', prop: '' },
{ label: '活动图片', prop: '' },
{
label: '添加时间', prop: '', formatter: (row) => {
return '';
}
},
];
},
async getTableData() {
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.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 || [];
},
searchTypeChange() {
this.tableData.pageNum = 1;
this.getTableData();
},
onEdit(row) {
this.editItem = { ...this.editItem, ...row };
this.activityVisible = true;
},
onDelete(row) {
console.log(row);
}
}
};
</script>
<style scoped lang="scss"></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