zhenghuang
/
bsdgy-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

活动池流程

Browse Source
feature_0521
郑皇 6 years ago
parent e02a68db10
commit 80a041a306
17 changed files with 1133 additions and 799 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -14,6 +14,7 @@
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"jquery": "^3.5.1", "jquery": "^3.5.1",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"lodash": "^4.17.15",
"moment": "^2.24.0", "moment": "^2.24.0",
"postcss-px2rem-exclude": "0.0.6", "postcss-px2rem-exclude": "0.0.6",
"script-loader": "^0.7.2", "script-loader": "^0.7.2",

8
postcss.config.js
Unescape Escape View File

@ -1,9 +1,9 @@
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: {}, autoprefixer: {},
"postcss-px2rem-exclude": { // "postcss-px2rem-exclude": {
remUnit: 40, // remUnit: 40,
exclude: /node_modules|folder_name/i, // exclude: /node_modules|folder_name/i,
}, // },
}, },
}; };

92
src/iview.js
Unescape Escape View File

@ -1,6 +1,8 @@
import Vue from 'vue'; import Vue from "vue";
import { import {
Avatar, Breadcrumb, BreadcrumbItem, Avatar,
Breadcrumb,
BreadcrumbItem,
Button, Button,
Card, Card,
Content, Content,
@ -36,48 +38,52 @@ import {
Tooltip, Tooltip,
Step, Step,
Steps, Steps,
Tag Tag,
Collapse,
Panel,
} from "view-design"; } from "view-design";
import 'view-design/dist/styles/iview.css'; import "view-design/dist/styles/iview.css";
Vue.component('Button', Button); Vue.component("Button", Button);
Vue.component('Tag', Tag); Vue.component("Collapse", Collapse);
Vue.component('Table', Table); Vue.component("Panel", Panel);
Vue.component('Card', Card); Vue.component("Tag", Tag);
Vue.component('Form', Form); Vue.component("Table", Table);
Vue.component('FormItem', FormItem); Vue.component("Card", Card);
Vue.component('InputNumber', InputNumber); Vue.component("Form", Form);
Vue.component('Icon', Icon); Vue.component("FormItem", FormItem);
Vue.component('i-input', Input); Vue.component("InputNumber", InputNumber);
Vue.component('Layout', Layout); Vue.component("Icon", Icon);
Vue.component('Sider', Sider); Vue.component("i-input", Input);
Vue.component('Avatar', Avatar); Vue.component("Layout", Layout);
Vue.component('Menu', Menu); Vue.component("Sider", Sider);
Vue.component('MenuItem', MenuItem); Vue.component("Avatar", Avatar);
Vue.component('Submenu', Submenu); Vue.component("Menu", Menu);
Vue.component('Content', Content); Vue.component("MenuItem", MenuItem);
Vue.component('Breadcrumb', Breadcrumb); Vue.component("Submenu", Submenu);
Vue.component('BreadcrumbItem', BreadcrumbItem); Vue.component("Content", Content);
Vue.component('Row', Row); Vue.component("Breadcrumb", Breadcrumb);
Vue.component('i-col', Col); Vue.component("BreadcrumbItem", BreadcrumbItem);
Vue.component('Select', Select); Vue.component("Row", Row);
Vue.component('Option', Option); Vue.component("i-col", Col);
Vue.component('Poptip', Poptip); Vue.component("Select", Select);
Vue.component('DatePicker', DatePicker); Vue.component("Option", Option);
Vue.component('CheckboxGroup', CheckboxGroup); Vue.component("Poptip", Poptip);
Vue.component('Checkbox', Checkbox); Vue.component("DatePicker", DatePicker);
Vue.component('RadioGroup', RadioGroup); Vue.component("CheckboxGroup", CheckboxGroup);
Vue.component('i-switch', Switch); Vue.component("Checkbox", Checkbox);
Vue.component('Modal', Modal); Vue.component("RadioGroup", RadioGroup);
Vue.component('Message', Message); Vue.component("i-switch", Switch);
Vue.component("Modal", Modal);
Vue.component("Message", Message);
Vue.prototype.$Modal = Modal; Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message; Vue.prototype.$Message = Message;
Vue.component('Radio', Radio); Vue.component("Radio", Radio);
Vue.component('List', List); Vue.component("List", List);
Vue.component('Divider', Divider); Vue.component("Divider", Divider);
Vue.component('Page', Page); Vue.component("Page", Page);
Vue.component('Spin', Spin); Vue.component("Spin", Spin);
Vue.component('Upload', Upload); Vue.component("Upload", Upload);
Vue.component('Tooltip', Tooltip); Vue.component("Tooltip", Tooltip);
Vue.component('Step', Step); Vue.component("Step", Step);
Vue.component('Steps', Steps); Vue.component("Steps", Steps);

45
src/main.js
Unescape Escape View File

@ -1,43 +1,42 @@
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
import Vuex from 'vuex' import Vuex from "vuex";
import moment from 'moment' import moment from "moment";
import axios from 'axios'; import axios from "axios";
import QS from 'qs'; import QS from "qs";
import './iview'; import "./iview";
import './vcharts' import "./vcharts";
import 'lib-flexible/flexible' import "lib-flexible/flexible";
import _ from "lodash";
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
Vue.prototype.$qs = QS; Vue.prototype.$qs = QS;
Vue.prototype.$moment = moment; Vue.prototype.$moment = moment;
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.prototype.$moment = moment; Vue.prototype.$moment = moment;
Vue.prototype._ = _;
import echarts from 'echarts'; import echarts from "echarts";
import 'echarts/map/js/china' import "echarts/map/js/china";
Vue.prototype.$echarts = echarts; Vue.prototype.$echarts = echarts;
// 需要汉化 // 需要汉化
moment.locale('zh-cn'); moment.locale("zh-cn");
Vue.use(Vuex); Vue.use(Vuex);
// Vue.use(ViewUI); // Vue.use(ViewUI);
//实现了全局的事件总线对象 //实现了全局的事件总线对象
Vue.prototype.bus = new Vue(); Vue.prototype.bus = new Vue();
new Vue({ new Vue({
render: h => h(App), render: (h) => h(App),
router, router,
}).$mount('#app') }).$mount("#app");
//重复点击同一个报错解决 //重复点击同一个报错解决
import Router from 'vue-router' import Router from "vue-router";
const routerPush = Router.prototype.push const routerPush = Router.prototype.push;
Router.prototype.push = function push(location) { Router.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error=> error) return routerPush.call(this, location).catch((error) => error);
} };

170
src/pages/activity/ActivityManager.vue
Unescape Escape View File

@ -1,14 +1,21 @@
<template> <template>
<div class="activityManager"> <div class="activityManager">
<Spin v-show="loading" fix>加载中...</Spin>
<Row> <Row>
<i-col class="activityListClass" v-for="(item, index) in activityList" :key="index" span="7" offset="1"> <i-col
class="activityListClass"
v-for="(item, index) in activityList"
:key="index"
span="7"
offset="1"
>
<Card> <Card>
<div class="operateAndThemeItem"> <div class="operateAndThemeItem">
<div class="ThemeItem"> <div class="ThemeItem">
<img class="img" :src="'/kiisoo-ic' + item.logo"> <img class="img" :src="'/kiisoo-ic' + item.logo" />
<div class="tipItem"> <div class="tipItem">
<span>{{item.name}}</span> <span>{{ item.name }}</span>
<span>{{item.description}}</span> <span>{{ item.description }}</span>
</div> </div>
</div> </div>
<div class="operateItem"> <div class="operateItem">
@ -27,115 +34,119 @@
</div> </div>
</i-col> </i-col>
</Row> </Row>
<useTable @dispalyuseModal="dispalyuseModal" :useModal="useModal" :id="id"></useTable> <useTable
<addActivity @dispalyAddActivityModal="dispalyAddActivityModal" :addActivityModal="addActivityModal" :id="id"></addActivity> ref="useTable"
@doShow="doShow"
:show="showUse"
:schedule="useSchedule"
></useTable>
<addActivity
@dispalyAddActivityModal="dispalyAddActivityModal"
:addActivityModal="addActivityModal"
:id="id"
></addActivity>
</div> </div>
</template> </template>
<script> <script>
import useTable from './useTable' import useTable from "./useTable";
import addActivity from './addActivity' import addActivity from "./addActivity";
import ActivityManager from "../../services/ActivityManager/ActivityManager" import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index" import store from "../../store/index";
export default { export default {
name: "ActivityManager", name: "ActivityManager",
components: { components: {
useTable, useTable,
addActivity addActivity,
}, },
inject: ['setMenuName'], inject: ["setMenuName"],
data() { data() {
return { return {
useModal: false, showUse: false,
addActivityModal: false, addActivityModal: false,
activityList: [], activityList: [],
id: '', id: "",
inputActivityList: [] inputActivityList: [],
} useSchedule: {},
loading: false,
};
}, },
mounted() { mounted() {
this.setMenuName("活动管理", "活动池") this.setMenuName("活动管理", "活动池");
this.getActivityTable() this.getActivityTable();
}, },
methods: { methods: {
doShow(show) {
this.showUse = show;
},
getActivityData(id) { getActivityData(id) {
let that = this let that = this;
let data = { let data = {
instanceId: id instanceId: id,
} };
ActivityManager.getActivityInfo(data, function (data) { that.loading = true;
that.inputActivityList = [] ActivityManager.getActivityInfo(data, function(data) {
data.data.results.params.forEach(item => { that.inputActivityList = [];
data.data.results.params.forEach((item) => {
that.inputActivityList.push({ that.inputActivityList.push({
value1: item.name, value1: item.name,
value2: item.description value2: item.description,
}) });
}) });
this.useModal = true this.useModal = true;
}) that.loading = false;
});
}, },
getActivityTable() { getActivityTable() {
let that = this let that = this;
ActivityManager.getActivityList({}, function (data) { ActivityManager.getActivityList({}, function(data) {
that.activityList = data.data.results that.activityList = data.data.results;
}) });
}, },
disPlayUseTable(item) { disPlayUseTable(item) {
let that = this let that = this;
let data = { let data = {
id: item.id id: item.id,
} };
// let data = new FormData() // let data = new FormData()
// data.append('instanceId', item.id) // data.append('instanceId', item.id)
ActivityManager.getActivityInfo(data, function (data) { ActivityManager.getActivityInfo(data, function(data) {
that.inputActivityList = [] that.useSchedule = data.data.results;
data.data.results.params.forEach(item => { that.showUse = true;
that.inputActivityList.push(item) });
})
let useData = {
name: data.data.results.name,
inputActivityList: that.inputActivityList,
scheduleId: item.id,
}
store.commit('SET_useData', useData)
store.commit('SET_ID', item.id)
console.log(store.getters.useData)
that.useModal = true
})
}, },
dispalyAddActivity(id) { dispalyAddActivity(id) {
this.addActivityModal = true this.addActivityModal = true;
this.id = id.toString() this.id = id.toString();
}, },
dispalyuseModal(displayModalFlag, isCancle) { dispalyuseModal(displayModalFlag, isCancle) {
this.useModal = displayModalFlag this.useModal = displayModalFlag;
if (isCancle === true) { if (isCancle === true) {
this.getActivityTable() this.getActivityTable();
} }
}, },
dispalyAddActivityModal(displayModalFlag, isCancle) { dispalyAddActivityModal(displayModalFlag, isCancle) {
this.addActivityModal = displayModalFlag this.addActivityModal = displayModalFlag;
if (isCancle === true) { if (isCancle === true) {
this.getActivityTable() this.getActivityTable();
}
}
}
} }
},
},
};
</script> </script>
<style scoped> <style scoped>
.operateAndThemeItem { .operateAndThemeItem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.img { .img {
width: 200px; height: 100px;
height: 200px; }
}
.operateItem { .operateItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -143,31 +154,30 @@
width: 20%; width: 20%;
text-align: right; text-align: right;
cursor: pointer; cursor: pointer;
} }
.ThemeItem { .ThemeItem {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
width: 80%; width: 80%;
} }
.tipItem { .tipItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin-left: 50px; margin-left: 50px;
} }
.activityListClass { .activityListClass {
margin-bottom: 50px; margin-bottom: 50px;
} }
.addactivity { .addactivity {
height: 300px; height: 100px;
border: 1px dashed; border: 1px dashed;
text-align: center; text-align: center;
line-height: 300px; line-height: 100px;
cursor: pointer; cursor: pointer;
} }
</style> </style>

301
src/pages/activity/addActivity.vue
Unescape Escape View File

@ -1,78 +1,123 @@
<template> <template>
<Modal v-model="dispalyModal" width="1000" :mask-closable="false" @on-cancel="cancel"> <Modal
v-model="dispalyModal"
width="1000"
:mask-closable="false"
@on-cancel="cancel"
@on-ok="save"
>
<p slot="header" style="color:#f60;text-align:left"> <p slot="header" style="color:#f60;text-align:left">
<span>配置活动</span> <span>配置活动</span>
</p> </p>
<div>基本配置</div> <div>基本配置</div>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <Form
ref="formValidate"
:model="formValidate"
:rules="ruleValidate"
:label-width="80"
>
<Row> <Row>
<i-col style="text-align: left;" span="8"> <i-col style="text-align: left;" span="8">
<FormItem label="" prop="uploadImg"> <FormItem label="" prop="uploadImg">
<!-- <Upload
type="select"
:on-success="uploadImgSuccess"
:show-upload-list="false"
:before-upload="handleBeforeUpload"
action="//jsonplaceholder.typicode.com/posts/">
<div style="padding: 20px 0;">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>上传活动图片</p>
</div>
</Upload> -->
<Upload <Upload
ref='upload' ref="upload"
:show-upload-list="false" :show-upload-list="false"
:on-success="uploadImgSuccess" :on-success="uploadImgSuccess"
:format="['jpg','jpeg','png']" :format="['jpg', 'jpeg', 'png']"
:max-size="2048" :max-size="2048"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
multiple multiple
type="drag" type="drag"
action="" action=""
style="display: inline-block;"> style="display: inline-block;"
>
<div style="width: 200px;height:200px;line-height: 200px;"> <div style="width: 200px;height:200px;line-height: 200px;">
<span v-if="!formValidate.logo">请上传图片</span> <span v-if="!formValidate.logo">请上传图片</span>
<img v-if="formValidate.logo" :src="`/kiisoo-ic` + formValidate.logo" alt="" style="width: 100%; height: auto"> <img
v-if="formValidate.logo"
:src="`/kiisoo-ic` + formValidate.logo"
alt=""
style="width: 100%; height: auto"
/>
</div> </div>
</Upload> </Upload>
</FormItem> </FormItem>
</i-col> </i-col>
<i-col span="15" offset="1"> <i-col span="15" offset="1">
<FormItem label="活动名称" prop="activityName"> <FormItem label="活动名称" prop="activityName">
<i-input type="text" v-model="formValidate.activityName" placeholder="请输入活动名称"></i-input> <i-input
type="text"
v-model="formValidate.name"
placeholder="请输入活动名称"
></i-input>
</FormItem> </FormItem>
<Form-item label="活动描述" prop="activityDsc"> <Form-item label="活动描述" prop="activityDsc">
<i-input v-model="formValidate.activityDsc" type="textarea" :autosize="{minRows: 3}" placeholder="请输入活动描述"></i-input> <i-input
v-model="formValidate.description"
type="textarea"
:autosize="{ minRows: 3 }"
placeholder="请输入活动描述"
></i-input>
</Form-item> </Form-item>
<FormItem label="APPID" prop="appId"> <FormItem label="APPID" prop="appId">
<i-input type="text" v-model="formValidate.appId" placeholder="请输入appid"></i-input> <i-input
type="text"
v-model="formValidate.appId"
placeholder="请输入appid"
></i-input>
</FormItem> </FormItem>
<FormItem label="URI" prop="uri"> <FormItem label="URI" prop="uri">
<i-input type="text" v-model="formValidate.uri" placeholder="请输入URI"></i-input> <i-input
type="text"
v-model="formValidate.uri"
placeholder="请输入URI"
></i-input>
</FormItem> </FormItem>
</i-col> </i-col>
</Row> </Row>
</Form> </Form>
<div class="topic">活动类型</div> <div class="topic">活动类型</div>
<Row class="inputItem" v-for="(item, index) in inputActivityList" :key="index"> <Row
<i-col :span="2"> :gutter="10"
类型{{index+1}} class="inputItem"
v-for="(item, index) in formValidate.params"
:key="index"
>
<i-col :span="2"> 类型{{ index + 1 }} </i-col>
<i-col :span="9">
<i-input
class="inputClass"
type="text"
v-model="item.name"
placeholder="参数名称"
></i-input>
</i-col> </i-col>
<i-col :span="20"> <i-col :span="9">
<i-input class="inputClass" type="text" v-model="item.name" placeholder="参数名称"></i-input> <i-input
<i-input class="inputClass" type="text" style="margin-left: 20px" v-model="item.defaultVal" placeholder="默认值"></i-input> class="inputClass"
<Button style="margin-left: 20px" type="error" @click="delActivityInput(index)">删除</Button> type="text"
style="margin-left: 20px"
v-model="item.key"
placeholder="默认值"
></i-input>
</i-col>
<i-col :span="4">
<Button
style="margin-left: 20px"
type="error"
@click="delActivityInput(index)"
>删除</Button
>
</i-col> </i-col>
</Row> </Row>
<Button style="margin-top: 10px" type="primary" @click="addActivityInput">+添加活动类型</Button> <Button style="margin-top: 10px" type="primary" @click="addActivityInput"
<div style="text-align: center;" slot="footer"> >+添加活动类型</Button
<Button type="primary" size="large" shape="circle" :loading="modal_loading" @click="next">保存</Button> >
</div>
</Modal> </Modal>
</template> </template>
<script> <script>
import ActivityManager from "../../services/ActivityManager/ActivityManager"; import ActivityManager from "../../services/ActivityManager/ActivityManager";
import axios from 'axios'; import axios from "axios";
export default { export default {
name: "addActivity", name: "addActivity",
data() { data() {
@ -80,157 +125,143 @@ export default {
dispalyModal: false, dispalyModal: false,
currentStep: 0, currentStep: 0,
modal_loading: false, modal_loading: false,
inputActivityList: [], imageName: "212",
imageName: '212', formValidate: {},
formValidate: {
activityName: '',
activityDsc: '',
appId: '',
uri: '',
logo: '',
},
ruleValidate: { ruleValidate: {
activityName: [ name: [
{ required: true, message: '活动名称不能为空', trigger: 'blur' } { required: true, message: "活动名称不能为空", trigger: "blur" },
],
activityDsc: [
{ required: true, message: '活动描述不能为空', trigger: 'blur' }
], ],
appId: [ description: [
{ required: true, message: 'appId不能为空', trigger: 'blur' } { required: true, message: "活动描述不能为空", trigger: "blur" },
],
uri: [
{ required: true, message: 'URI不能为空', trigger: 'blur' }
], ],
appId: [{ required: true, message: "appId不能为空", trigger: "blur" }],
uri: [{ required: true, message: "URI不能为空", trigger: "blur" }],
// uploadImg: [ // uploadImg: [
// { required: true, message: '请上传活动图片', trigger: 'blur' } // { required: true, message: '请上传活动图片', trigger: 'blur' }
// ] // ]
} },
} };
}, },
props: { props: {
addActivityModal: Boolean, addActivityModal: Boolean,
id: String id: String,
}, },
watch: { watch: {
addActivityModal(val) { addActivityModal(val) {
this.dispalyModal = val this.dispalyModal = val;
if(val === true && this.id) { if (val === true && this.id) {
this.getActivityData() this.getActivityData();
} }
if (this.id == null || this.id.length <= 0) {
this.formValidate = {};
}
if (
typeof this.formValidate.params == "undefined" ||
this.formValidate.params.length <= 0
) {
this.formValidate.params = [
{
defaultVal: "",
description: "",
id: 0,
isRequired: 0,
key: "",
limitLower: "",
limitUpper: "",
name: "",
type: 0,
}, },
];
}
}, },
mounted() {
}, },
mounted() {},
methods: { methods: {
addActivityInput() { addActivityInput() {
this.inputActivityList.push({ this.formValidate.params.push({
name: '', defaultVal: "",
defaultVal: '' description: "",
}) id: 0,
isRequired: 0,
key: "",
limitLower: "",
limitUpper: "",
name: "",
type: 0,
});
}, },
delActivityInput(index) { delActivityInput(index) {
this.inputActivityList.splice(index,1) if (this.formValidate.params.length <= 1) {
this.$Message.error("至少需要填写一个活动类型!");
return;
}
this.formValidate.params.splice(index, 1);
}, },
cancel() { cancel() {
this.inputActivityList = [] this.$emit("dispalyAddActivityModal", false, false);
this.formValidate.appId = ''
this.formValidate.activityDsc = ''
this.formValidate.activityName = ''
this.formValidate.uri = ''
this.dispalyModal = false
this.$emit("dispalyAddActivityModal", false, false)
}, },
getActivityData() { getActivityData() {
let that = this let that = this;
let data = { let data = {
id: that.id id: that.id,
} };
ActivityManager.getActivityInfo(data, function (data) { ActivityManager.getActivityInfo(data, function(data) {
that.inputActivityList = [] that.formValidate = data.data.results;
that.formValidate.appId = data.data.results.appId });
that.formValidate.activityDsc = data.data.results.description
that.formValidate.activityName = data.data.results.name
that.formValidate.uri = data.data.results.uri
that.formValidate.logo = data.data.results.logo || '';
data.data.results.params.forEach(item => {
that.inputActivityList.push({
id: item.id,
name: item.name,
defaultVal: item.defaultVal
})
})
})
}, },
uploadImgSuccess(res, file) { uploadImgSuccess(res, file) {
this.imageName = file.name this.imageName = file.name;
}, },
handleBeforeUpload(res) { handleBeforeUpload(res) {
const me = this; const me = this;
let data = new FormData(); let data = new FormData();
data.append('file', res); data.append("file", res);
axios({ axios({
method: 'post', method: "post",
url: '/upload', url: "/upload",
data: data, data: data,
headers: { headers: {
'Content-Type': 'multipart/form-data' "Content-Type": "multipart/form-data",
} },
}).then(function (res) { }).then(function(res) {
if (res.data.success) { if (res.data.success) {
me.formValidate.logo = res.data.results; me.formValidate.logo = res.data.results;
} }
}); });
return false; return false;
}, },
next() { save() {
let that = this let that = this;
if (that.formValidate.params.length <= 0) {
that.$Message.error("至少需要填写一个活动类型!");
return;
}
this.$refs["formValidate"].validate((valid) => { this.$refs["formValidate"].validate((valid) => {
if (valid) { if (valid) {
let param = []
that.inputActivityList.forEach(element => {
param.push({
defaultVal: element.defaultVal,
description: element.name,
key: element.name,
name: element.name,
type: 2,
id: element.id,
})
});
// param = JSON.stringify(param) // param = JSON.stringify(param)
let data = { let data = { ...that.formValidate, isGetActivityInfo: true };
appId: that.formValidate.appId, ActivityManager.addOreditActivity(data, function(data) {
logo: that.formValidate.logo, that.addActivityModal = false;
name: that.formValidate.activityName, that.formValidate = {};
uri: that.formValidate.uri, that.$emit("dispalyAddActivityModal", false, true);
params: param, });
isGetActivityInfo: true,
description: that.formValidate.activityDsc,
id: that.id
}
ActivityManager.addOreditActivity(data, function (data) {
console.log(data)
that.addActivityModal = false
that.$emit("dispalyAddActivityModal", false, true)
})
} else { } else {
that.$Message.error('表单验证失败!'); that.$Message.error("表单验证失败!");
}
})
} }
} });
} },
},
};
</script> </script>
<style scoped> <style scoped>
.inputClass{ .inputClass {
width: 1000px; width: 100%;
} }
.inputItem{ .inputItem {
margin-top: 40px; margin-top: 20px;
} }
.topic{ .topic {
margin-top: 100px; margin-top: 20px;
} }
</style> </style>

114
src/pages/activity/useActivityStepFoure.vue
Unescape Escape View File

@ -1,31 +1,58 @@
<template> <template>
<div style="padding: 0 40px;"> <div style="padding: 0 40px;">
<Form ref="formValidate" :model="formValidate" :label-width="80"> <Form ref="formValidate" :model="useData" :label-width="80">
<Row> <Row>
<i-col span="15" offset="2"> <i-col span="22" offset="2">
<FormItem label="活动名称" prop="activityName"> <FormItem label="活动名称" prop="activityName">
<div>{{formValidate.activityName}}</div> <div>{{ useData.name }}</div>
</FormItem> </FormItem>
<Form-item label="活动时间" prop="activityDate"> <Form-item label="活动时间" prop="activityDate">
<div>{{formValidate.activityDate}}</div> <div>{{ useData.beginTime }} - {{ useData.endTime }}</div>
</Form-item> </Form-item>
<FormItem label="活动类型" prop="activityStyle"> <FormItem label="活动类型" prop="activityStyle">
<div style="display:flex" v-for="(item, index) in formValidate.activityStyle" :key="index"> <div
<i-input class="inputClass" disabled type="text" v-model="item.name" placeholder=""></i-input> style="display:flex"
<i-input class="inputClass" style="margin-left: 20px" disabled type="text" v-model="item.defaultVal" placeholder=""></i-input> v-for="(item, index) in useData.params"
:key="index"
>
<i-input
class="inputClass"
disabled
type="text"
v-model="item.name"
placeholder=""
></i-input>
<i-input
class="inputClass"
style="margin-left: 20px"
disabled
type="text"
v-model="item.key"
placeholder=""
></i-input>
</div> </div>
</FormItem> </FormItem>
<FormItem label="活动范围" prop="activityRange"> <FormItem label="活动范围" prop="activityRange">
<div> <Collapse simple>
<span>{{formValidate.activityRange}}</span> <Panel :key="index" v-for="(item, index) in groups">
<span class="mr10">{{formValidate.activityCompanyNum}}家店铺</span> {{
<Button class="mr10" type="primary" @click="isDisplay">{{operate}}</Button> item.name
}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
item.stores.length
}}家店铺
<div slot="content">
<div class="activityShopClass">
<div
class="mr10"
v-for="(item, index) in item.stores"
:key="index"
>
<Tag class="tagClass" color="blue">{{ item.name }}</Tag>
</div> </div>
<div v-if="displayActivityShopFlag==true" class="activityShopClass">
<div class="mr10" v-for="(item, index) in formValidate.activityShop" :key="index">
<Tag class="tagClass" color="blue">{{item.name}}</Tag>
</div> </div>
</div> </div>
</Panel>
</Collapse>
</FormItem> </FormItem>
</i-col> </i-col>
</Row> </Row>
@ -33,58 +60,53 @@
</div> </div>
</template> </template>
<script> <script>
import store from "../../store/index" import store from "../../store/index";
export default { export default {
name: "useActivityStepFoure", name: "useActivityStepFoure",
data() { data() {
return { return {
formValidate: { useData: store.getters.useData,
activityName: '', operate: "收起",
activityDate: "", displayActivityShopFlag: false,
activityStyle: [], groups: [],
activityRange: '上海分公司', };
activityCompanyNum: '35',
activityShop: []
}, },
operate: '收起', created() {
displayActivityShopFlag: false let _this = this;
console.log(this.useData.stores);
} this.useData.company.forEach((item) => {
}, item.stores = _this._.filter(
mounted() { this.useData.stores,
this.formValidate.activityName = store.getters.useData.name (s) => s.companyId == item.id || s.parentId == item.id
this.formValidate.activityDate = store.getters.useData.activityStartDate + '-' + store.getters.useData.activityEndDate );
this.formValidate.activityStyle = store.getters.useData.inputActivityList _this.groups.push(item);
});
console.log(this.groups);
}, },
methods: { methods: {
isDisplay() { isDisplay() {
if(this.operate === '展开') { if (this.operate === "展开") {
this.operate = '收起' this.operate = "收起";
this.displayActivityShopFlag = false this.displayActivityShopFlag = false;
} else { } else {
this.operate = '展开' this.operate = "展开";
this.displayActivityShopFlag = true this.displayActivityShopFlag = true;
}
} }
} },
} },
};
</script> </script>
<style scoped> <style scoped>
.activityShopClass { .activityShopClass {
display: flex; display: flex;
justify-content: space-between; justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
} }
.mr10 { .mr10 {
margin-left: 40px; margin-right: 20px;
} }
.tagClass { .tagClass {
width: 360px;
text-align: center; text-align: center;
} }
.inputClass{
width: 1000px;
}
</style> </style>

144
src/pages/activity/useActivityStepOne.vue
Unescape Escape View File

@ -1,25 +1,65 @@
<template> <template>
<div> <div>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <Form
ref="formValidate"
:model="formValidate"
:rules="ruleValidate"
:label-width="80"
>
<Row> <Row>
<i-col span="20" offset="2"> <i-col span="20" offset="2">
<FormItem label="活动名称" prop="activityName"> <FormItem label="活动名称" prop="name">
<div>{{formValidate.activityName}}</div> <div>
<i-input
disabled
type="text"
v-model="schedule.name"
placeholder
></i-input>
</div>
</FormItem> </FormItem>
<div class="dateClass"> <div class="dateClass">
<Form-item label="活动时间" prop="activityStartDate"> <Form-item label="活动时间" prop="activityStartDate">
<Date-picker @on-change="storeStartDate" type="date" v-model="formValidate.activityStartDate" format="yyyy-MM-dd" placeholder="请选择开始日期" style="width: 200px"></Date-picker> <Date-picker
@on-change="storeStartDate"
type="date"
v-model="formValidate.activityStartDate"
format="yyyy-MM-dd"
placeholder="请选择开始日期"
style="width: 200px"
></Date-picker>
</Form-item> </Form-item>
<div class="text">至</div> <div class="text">至</div>
<Form-item label="" prop="activityEndDate"> <Form-item label prop="activityEndDate">
<Date-picker @on-change="storeEndDate" type="date" v-model="formValidate.activityEndDate" format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 200px"></Date-picker> <Date-picker
@on-change="storeEndDate"
type="date"
v-model="formValidate.activityEndDate"
format="yyyy-MM-dd"
placeholder="请选择结束日期"
style="width: 200px"
></Date-picker>
</Form-item> </Form-item>
</div> </div>
<FormItem label="活动类型" prop="activityStyle"> <FormItem label="活动类型" prop="activityStyle">
<div v-for="(item, index) in formValidate.activityStyle" :key="index"> <RadioGroup v-model="formValidate.activityStyle" vertical>
<i-input class="inputClass" disabled type="text" v-model="item.name" placeholder=""></i-input> <Radio
<i-input class="inputClass" style="margin-left: 20px" disabled type="text" v-model="item.defaultVal" placeholder=""></i-input> :border="true"
</div> v-for="(item, index) in schedule.params"
:key="index"
:label="item.id"
style="margin-bottom: 10px"
>
<Icon type="social-apple"></Icon>
<span
>{{
item.name
}}&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;{{
item.key
}}</span
>
</Radio>
</RadioGroup>
</FormItem> </FormItem>
</i-col> </i-col>
</Row> </Row>
@ -27,70 +67,80 @@
</div> </div>
</template> </template>
<script> <script>
import store from "../../store/index" import store from "../../store/index";
import { mapGetters } from "vuex";
export default { export default {
name: "useActivityStepOne", name: "useActivityStepOne",
data() { data() {
return { return {
formValidate: { formValidate: store.getters.useData,
activityName: '',
activityStartDate: '',
activityEndDate: '',
activityStyle: [],
},
flag: store.getters.useModal,
ruleValidate: { ruleValidate: {
activityName: [ activityName: [
{required: true, message: '活动名称不能为空', trigger: 'blur'} { required: true, message: "活动名称不能为空", trigger: "blur" },
], ],
activityStartDate: [ activityStartDate: [
{required: true, type: 'date', message: '开始时间不能为空', trigger: 'change'} {
required: true,
type: "date",
message: "开始时间不能为空",
trigger: "change",
},
], ],
activityEndDate: [ activityEndDate: [
{required: true, type: 'date', message: '结束时间不能为空', trigger: 'change'} {
], required: true,
activityStyle: [ type: "date",
{required: true, message: '', trigger: 'blur'} message: "结束时间不能为空",
trigger: "change",
},
], ],
} activityStyle: [{ required: true, message: "", trigger: "blur" }],
} },
};
}, },
props: { props: {
displayUseModal: Boolean schedule: Object,
}, },
watch: { created() {
displayUseModal() { this.formValidate = store.getters.useData;
this.formValidate.activityName = store.getters.useData.name
this.formValidate.activityStyle = store.getters.useData.inputActivityList
}, },
watch: {
["formValidate.activityStyle"]() {
let _this = this;
let type = {};
this.schedule.params.forEach((item) => {
if (item.id == _this.formValidate.activityStyle) {
type = item;
}
});
store.getters.useData.params = [type];
}, },
mounted() {
this.formValidate.activityName = store.getters.useData.name
this.formValidate.activityStyle = store.getters.useData.inputActivityList
}, },
methods: { methods: {
storeStartDate(date) { storeStartDate(date) {
store.getters.useData.activityStartDate = date store.getters.useData.beginTime = date;
}, },
storeEndDate(date) { storeEndDate(date) {
store.getters.useData.activityEndDate = date store.getters.useData.endTime = date;
} },
} },
} };
</script> </script>
<style scoped> <style scoped>
.dateClass { .dateClass {
display: flex; display: flex;
} }
.text { .text {
position: relative; position: relative;
left: 100px; left: 100px;
} }
.inputClass { .inputClass {
width: 1000px; width: 45%;
} margin-bottom: 10px;
margin-right: 20px;
}
</style> </style>

225
src/pages/activity/useActivityStepThree.vue
Unescape Escape View File

@ -1,94 +1,185 @@
<template> <template>
<div style="padding: 0 40px;"> <div style="padding: 0 40px;">
<div class="selectClass"> <div class="selectClass">
<Checkbox v-model="allSelect" @on-change="isSelectAllCompany">全选</Checkbox> <Checkbox
<i-input icon="search" placeholder="请输入店铺名称或编码" style="width: 250px"></i-input> :indeterminate="indeterminate"
:value="allSelect"
@click.prevent.native="handleCheckAll"
>&nbsp;&nbsp;&nbsp;全选</Checkbox
>
<i-input
icon="search"
@on-change="doSearch"
placeholder="请输入店铺名称"
style="width: 250px"
></i-input>
</div> </div>
<div class="companyTable"> <div class="companyTable">
<div class="companyListClass"> <div class="companyListClass">
<div :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in shopList" :key="index" >{{item.label}}</div> <Row :gutter="10">
<div v-if="loading" style="padding: 50px 0" class="loading">
<Spin fix>加载中...</Spin>
</div>
<CheckboxGroup size="large" @on-change="onChange" v-model="isSelect">
<i-col span="8" :key="index" v-for="(item, index) in shopList">
<Checkbox size="large" :label="item.value" border>
<span>{{ item.label }}</span>
</Checkbox>
</i-col>
</CheckboxGroup>
</Row>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ActivityManager from "../../services/ActivityManager/ActivityManager" import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index" import store from "../../store/index";
export default { export default {
name: "useActivityStepThree", name: "useActivityStepThree",
data() { data() {
return { return {
indeterminate: false,
allSelect: false, allSelect: false,
shopList: [], shopList: [],
isSelect:[], isSelect: [],
selectValue: [], selectValue: [],
shopListData: [] shopListData: [],
} loading: false,
companys: store.getters.useData.company,
orginShopList: [],
};
}, },
mounted() { mounted() {
this.getShopInfo() this.getShopInfo();
let _this = this;
if (store.getters.useData.stores) {
store.getters.useData.stores.forEach((item) => {
_this.isSelect.push(item.id);
});
}
}, },
methods: { methods: {
handleCheckAll() {
if (this.indeterminate) {
this.allSelect = false;
} else {
this.allSelect = !this.allSelect;
}
this.indeterminate = false;
if (this.allSelect) {
this.shopList.forEach((item) => {
this.isSelect.push(item.value);
});
} else {
this.isSelect = [];
}
},
doSearch(e) {
const keyword = e.target.value;
let that = this;
that.shopList = [];
if (keyword.length > 0) {
that.orginShopList.forEach((item) => {
if (item.label.indexOf(keyword) >= 0) {
that.shopList.push(item);
}
});
} else {
that.shopList = that.orginShopList;
}
},
onChange(data) {
let _this = this;
if (data.length === this.isSelect.length) {
this.indeterminate = false;
this.allSelect = true;
} else if (data.length > 0) {
this.indeterminate = true;
this.allSelect = false;
} else {
this.indeterminate = false;
this.allSelect = false;
}
store.getters.useData.stores = [];
data.forEach((item) => {
const s = _this._.find(_this.shopListData, (shop) => shop.id == item);
if (s) {
store.getters.useData.stores.push(
_this._.find(_this.shopListData, (shop) => shop.id == item)
);
}
});
},
getShopInfo() { getShopInfo() {
let that = this let that = this;
let companyIds = [];
this.companys.forEach((item) => {
companyIds.push(item.id);
});
let data = { let data = {
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
} customerIds: companyIds.join(","),
ActivityManager.getShop(data, function (data) { };
that.shopList = [] that.loading = true;
that.shopListData = data.data.results ActivityManager.getShop(data, function(data) {
data.data.results.forEach(element => { that.shopList = [];
that.isSelect.push('') that.shopListData = data.data.results;
that.selectValue.push('') data.data.results.forEach((element) => {
that.isSelect.push("");
that.selectValue.push("");
that.shopList.push({ that.shopList.push({
label: element.name, label: element.name,
value: element.id value: element.id,
}) });
that.orginShopList = that.shopList;
});
that.loading = false;
}); });
})
}, },
isSelectAllCompany() { isSelectAllCompany() {
if(this.allSelect === true) { if (this.allSelect === true) {
this.isSelect.forEach((element,index) => { this.isSelect.forEach((element, index) => {
this.isSelect.splice(index,1,true) this.isSelect.splice(index, 1, true);
}) });
this.shopList.forEach((element,index) => { this.shopList.forEach((element, index) => {
this.selectValue.splice(index,1,element.id) this.selectValue.splice(index, 1, element.id);
}) });
} else { } else {
this.isSelect.forEach((element,index) => { this.isSelect.forEach((element, index) => {
this.isSelect.splice(index,1,'') this.isSelect.splice(index, 1, "");
}) });
this.shopList.forEach((element,index) => { this.shopList.forEach((element, index) => {
this.selectValue.splice(index,1,'') this.selectValue.splice(index, 1, "");
}) });
} }
}, },
selectTag(value,index) { selectTag(value, index) {
this.isSelect.splice(index,1,!this.isSelect[index]) this.isSelect.splice(index, 1, !this.isSelect[index]);
if(this.isSelect[index] === true) { if (this.isSelect[index] === true) {
this.selectValue.splice(index, 1, value.value) this.selectValue.splice(index, 1, value.value);
} else if(this.isSelect[index] === false) { } else if (this.isSelect[index] === false) {
this.selectValue.splice(index, 1, '') this.selectValue.splice(index, 1, "");
}
let selectShopValue = []
this.isSelect.forEach((element,index) => {
if(element === true) {
selectShopValue.push(this.selectValue[index])
}
})
let selectShopValueObject = []
for(let j=0; j< selectShopValue.length; j++) {
for(let i = 0; i< this.shopList.length; i++){
if(this.shopList[i].value === selectShopValue[j]) {
selectShopValueObject.push(this.shopListData[i])
} }
let selectShopValue = [];
this.isSelect.forEach((element, index) => {
if (element === true) {
selectShopValue.push(this.selectValue[index]);
} }
});
let selectShopValueObject = [];
for (let j = 0; j < selectShopValue.length; j++) {
for (let i = 0; i < this.shopList.length; i++) {
if (this.shopList[i].value === selectShopValue[j]) {
selectShopValueObject.push(this.shopListData[i]);
} }
store.getters.useData.selectShopValue = selectShopValueObject
} }
} }
} store.getters.useData.selectShopValue = selectShopValueObject;
},
},
};
</script> </script>
<style scoped> <style scoped>
@ -97,25 +188,27 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
.companyTable { .companyTable {
width: 3150px; height: 250px;
height: 1000px; overflow-y: scroll;
border: 1px solid; width: 100%;
margin-top: 40px; overflow-x: hidden;
padding: 40px; margin-top: 10px;
overflow:scroll;
} }
.companyListClass { .ivu-checkbox-wrapper.ivu-checkbox-large {
display: flex; width: 100%;
justify-content: space-between; font-size: 12px;
flex-wrap: wrap; margin-bottom: 10px;
}
.ivu-checkbox + span {
margin-left: 4px;
} }
.tagClass { .tagClass {
width: 31%; width: 31%;
margin-bottom: 30px; margin-bottom: 30px;
height: 120px; height: 120px;
line-height: 120px; line-height: 120px;
border: 1px solid #e3e8ee!important; border: 1px solid #e3e8ee !important;
color: #657180!important; color: #657180 !important;
background: #fff; background: #fff;
padding: 0 12px; padding: 0 12px;
cursor: pointer; cursor: pointer;

195
src/pages/activity/useActivityStepTwo.vue
Unescape Escape View File

@ -1,94 +1,141 @@
<template> <template>
<div style="padding: 0 40px;"> <div style="padding: 0 40px;">
<div class="selectClass"> <div class="selectClass">
<Checkbox v-model="allSelect" @on-change="isSelectAllCompany">全选</Checkbox> <Checkbox
<i-input icon="search" placeholder="请输入零售公司名称或编码" style="width: 250px"></i-input> :indeterminate="indeterminate"
:value="allSelect"
@click.prevent.native="handleCheckAll"
>&nbsp;&nbsp;&nbsp;全选</Checkbox
>
<i-input
icon="search"
@on-change="doSearch"
placeholder="请输入零售公司名称"
style="width: 250px"
></i-input>
</div> </div>
<div class="companyTable"> <div class="companyTable">
<div class="companyListClass"> <div class="companyListClass">
<div :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in companyList" :key="index" >{{item.label}}</div> <Row :gutter="10">
<div v-show="loading" style="padding: 50px 0" class="loading">
<Spin fix>加载中...</Spin>
</div>
<CheckboxGroup
size="large"
@on-change="onChange"
v-model="checkCompanys"
>
<i-col span="8" :key="index" v-for="(item, index) in companyList">
<Checkbox size="large" :label="item.value" border>
<span>{{ item.label }}</span>
</Checkbox>
</i-col>
</CheckboxGroup>
</Row>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ActivityManager from "../../services/ActivityManager/ActivityManager" import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index" import store from "../../store/index";
export default { export default {
name: "useActivityStepTwo", name: "useActivityStepTwo",
data() { data() {
return { return {
indeterminate: false,
allSelect: false, allSelect: false,
companyList: [], companyList: [],
isSelect:[], companyListdata: [],
selectValue: [], checkCompanys: [],
companyListdata:[] orginCompanyList: [],
} loading: false,
};
}, },
mounted() { mounted() {
this.getCompanyInfo() this.getCompanyInfo();
let _this = this;
if (store.getters.useData.company) {
store.getters.useData.company.forEach((item) => {
_this.checkCompanys.push(item.id);
});
}
}, },
methods: { methods: {
onChange(data) {
let _this = this;
if (data.length === this.companyList.length) {
this.indeterminate = false;
this.allSelect = true;
} else if (data.length > 0) {
this.indeterminate = true;
this.allSelect = false;
} else {
this.indeterminate = false;
this.allSelect = false;
}
store.getters.useData.company = [];
data.forEach((item) => {
const c = _this._.find(
_this.companyListdata,
(shop) => shop.id == item
);
if (c) {
store.getters.useData.company.push(c);
}
});
},
doSearch(e) {
const keyword = e.target.value;
let that = this;
that.companyList = [];
if (keyword.length > 0) {
that.orginCompanyList.forEach((item) => {
if (item.label.indexOf(keyword) >= 0) {
that.companyList.push(item);
}
});
} else {
that.companyList = that.orginCompanyList;
}
},
getCompanyInfo() { getCompanyInfo() {
let that = this let that = this;
let data = { let data = {
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
} };
ActivityManager.getCompany(data, function (data) { this.loading = true;
that.companyList = [] ActivityManager.getCompany(data, function(data) {
that.companyListdata = data.data.results that.companyList = [];
data.data.results.forEach(element => { that.companyListdata = data.data.results;
that.isSelect.push('') data.data.results.forEach((element) => {
that.selectValue.push('')
that.companyList.push({ that.companyList.push({
label: element.name, label: element.name,
value: element.id value: element.id,
}) });
that.orginCompanyList = that.companyList;
});
that.loading = false;
}); });
})
}, },
isSelectAllCompany() { handleCheckAll() {
if(this.allSelect === true) { if (this.indeterminate) {
this.isSelect.forEach((element,index) => { this.allSelect = false;
this.isSelect.splice(index,1,true)
})
this.companyList.forEach((element,index) => {
this.selectValue.splice(index,1,element.id)
})
} else { } else {
this.isSelect.forEach((element,index) => { this.allSelect = !this.allSelect;
this.isSelect.splice(index,1,'')
})
this.companyList.forEach((element,index) => {
this.selectValue.splice(index,1,'')
})
}
},
selectTag(value, index) {
this.isSelect.splice(index,1,!this.isSelect[index])
if(this.isSelect[index] === true) {
this.selectValue.splice(index, 1, value.value)
} else if(this.isSelect[index] === false) {
this.selectValue.splice(index, 1, '')
}
let selectCompanyValue = []
this.isSelect.forEach((element,index) => {
if(element === true) {
selectCompanyValue.push(this.selectValue[index])
}
})
let selectCompanyValueObject = []
for(let j=0; j< selectCompanyValue.length; j++) {
for(let i = 0; i< this.companyList.length; i++){
if(this.companyList[i].value === selectCompanyValue[j]) {
selectCompanyValueObject.push(this.companyListdata[i])
}
}
}
store.getters.useData.selectCompanyValue = selectCompanyValueObject
} }
this.indeterminate = false;
if (this.allSelect) {
this.companyList.forEach((item) => {
this.checkCompanys.push(item.value);
});
} else {
this.checkCompanys = [];
} }
} },
},
};
</script> </script>
<style scoped> <style scoped>
@ -97,25 +144,27 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
.companyTable { .companyTable {
width: 3150px; height: 250px;
height: 1000px; overflow-y: scroll;
border: 1px solid; width: 100%;
margin-top: 40px; overflow-x: hidden;
padding: 40px; margin-top: 10px;
overflow:scroll;
} }
.companyListClass { .ivu-checkbox-wrapper.ivu-checkbox-large {
display: flex; width: 100%;
justify-content: space-between; font-size: 12px;
flex-wrap: wrap; margin-bottom: 10px;
}
.ivu-checkbox + span {
margin-left: 4px;
} }
.tagClass { .tagClass {
width: 31%; width: 31%;
margin-bottom: 30px; margin-bottom: 30px;
height: 120px; height: 120px;
line-height: 120px; line-height: 120px;
border: 1px solid #e3e8ee!important; border: 1px solid #e3e8ee !important;
color: #657180!important; color: #657180 !important;
background: #fff; background: #fff;
padding: 0 12px; padding: 0 12px;
cursor: pointer; cursor: pointer;

182
src/pages/activity/useTable.vue
Unescape Escape View File

@ -1,118 +1,166 @@
<template> <template>
<Modal v-model="displayUseModal" @on-cancel="cancel" width="1000"> <div class="use_box">
<Modal
:scrollable="false"
v-model="showUse"
title="使用活动"
@on-cancel="cancel"
:loading="modal_loading"
width="70%"
>
<Steps style="padding: 40px;" :current="currentStep"> <Steps style="padding: 40px;" :current="currentStep">
<Step title="基本信息" content=""></Step> <Step title="基本信息"></Step>
<Step title="选择零售公司" content=""></Step> <Step title="选择零售公司" content></Step>
<Step title="选择店铺" content=""></Step> <Step title="选择店铺" content></Step>
<Step title="确认信息" content=""></Step> <Step title="确认信息" content></Step>
</Steps> </Steps>
<useActivityStepOne :displayUseModal="displayUseModal" v-if="currentStep==0"></useActivityStepOne> <useActivityStepOne
<useActivityStepTwo v-if="currentStep==1"></useActivityStepTwo> :schedule="schedule"
<useActivityStepThree v-if="currentStep==2"></useActivityStepThree> v-if="currentStep == 0"
<useActivityStepFoure v-if="currentStep==3"></useActivityStepFoure> ></useActivityStepOne>
<useActivityStepTwo
:schedule="schedule"
v-if="currentStep == 1"
></useActivityStepTwo>
<useActivityStepThree
:schedule="schedule"
v-if="currentStep == 2"
></useActivityStepThree>
<useActivityStepFoure
:schedule="schedule"
v-if="currentStep == 3"
></useActivityStepFoure>
<div slot="footer"> <div slot="footer">
<Button v-if="currentStep!==0" type="primary" shape="circle" :loading="modal_loading" @click="back">上一步</Button> <Button
<Button v-if="currentStep!==3" type="primary" shape="circle" :loading="modal_loading" @click="next">下一步</Button> v-if="currentStep !== 0"
<Button v-if="currentStep==3" type="primary" shape="circle" :loading="modal_loading" @click="finish">完成</Button> type="primary"
shape="circle"
:loading="modal_loading"
@click="back"
>上一步</Button
>
<Button
v-if="currentStep !== 3"
type="primary"
shape="circle"
:loading="modal_loading"
@click="next"
>下一步</Button
>
<Button
v-if="currentStep == 3"
type="primary"
shape="circle"
:loading="modal_loading"
@click="finish"
>完成</Button
>
</div> </div>
</Modal> </Modal>
</div>
</template> </template>
<script> <script>
import useActivityStepOne from './useActivityStepOne' import useActivityStepOne from "./useActivityStepOne";
import useActivityStepTwo from './useActivityStepTwo' import useActivityStepTwo from "./useActivityStepTwo";
import useActivityStepThree from './useActivityStepThree' import useActivityStepThree from "./useActivityStepThree";
import useActivityStepFoure from './useActivityStepFoure' import useActivityStepFoure from "./useActivityStepFoure";
import ActivityManager from "../../services/ActivityManager/ActivityManager" import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index" import store from "../../store/index";
export default { export default {
name: "useTable", name: "useTable",
components: { components: {
useActivityStepOne, useActivityStepOne,
useActivityStepTwo, useActivityStepTwo,
useActivityStepThree, useActivityStepThree,
useActivityStepFoure useActivityStepFoure,
}, },
data() { data() {
return { return {
currentStep: 0, currentStep: 0,
modal_loading: false, modal_loading: false,
displayUseModal: false showUse: false,
} };
}, },
props: { props: {
useModal: Boolean, id: String,
id: String schedule: {},
show: Boolean,
}, },
watch: { watch: {
useModal(val) { show() {
this.displayUseModal = val this.showUse = this.show;
} },
schedule() {
store.getters.useData.scheduleId = this.schedule.id;
}, },
mounted() {
console.log(this.useModal)
}, },
mounted() {},
methods: { methods: {
cancel() { cancel() {
this.$emit("dispalyuseModal", false, false) this.currentStep = 0;
this.currentStep = 0 },
cancel() {
store.commit("RSET_useData");
this.$emit("doShow", false);
this.modal_loading = false;
this.showUse = false;
this.currentStep = 0;
}, },
next() { next() {
const data = store.getters.useData; let data = store.getters.useData;
data.name = this.schedule.name;
if (this.currentStep === 0) { if (this.currentStep === 0) {
if (!data.activityStartDate) { if (data.params.length <= 0) {
this.$Message.error('请填写活动开始时间'); this.$Message.error("请选择活动类型");
return;
}
if (!data.beginTime) {
this.$Message.error("请填写活动开始时间");
return; return;
} }
if (!data.activityEndDate) { if (!data.endTime) {
this.$Message.error('请填写活动结束时间'); this.$Message.error("请填写活动结束时间");
return; return;
} }
if (data.activityStartDate > data.activityEndDate) { if (data.beginTime > data.endTime) {
this.$Message.error('开始时间不能晚于结束时间'); this.$Message.error("开始时间不能晚于结束时间");
return; return;
} }
} }
if (this.currentStep === 1) { if (this.currentStep === 1) {
if (!data.selectCompanyValue || data.selectCompanyValue.length === 0) { if (!data.company || data.company.length === 0) {
this.$Message.error('请至少选择1家公司'); this.$Message.error("请至少选择1家公司");
return; return;
} }
} }
if (this.currentStep === 2) { if (this.currentStep === 2) {
if (!data.selectShopValue || data.selectShopValue.length === 0) { if (!data.stores || data.stores.length === 0) {
this.$Message.error('请至少选择1家店铺'); this.$Message.error("请至少选择1家店铺");
return; return;
} }
} }
this.currentStep = this.currentStep + 1 store.commit("SET_useData", data);
this.currentStep = this.currentStep + 1;
}, },
back() { back() {
this.currentStep = this.currentStep - 1 this.currentStep = this.currentStep - 1;
}, },
finish() { finish() {
let that = this let that = this;
console.log(store.getters.useData) let data = store.getters.useData;
data.isGetActivityInfo = true;
let data = { this.modal_loading = true;
beginTime: store.getters.useData.activityStartDate, ActivityManager.saveActivityData(store.getters.useData, function(data) {
endTime: store.getters.useData.activityEndDate, store.commit("RSET_useData");
name: store.getters.useData.name, that.$emit("doShow", false);
organizations: store.getters.useData.selectCompanyValue, that.$router.push("/activity/plan");
params: store.getters.useData.inputActivityList, that.currentStep = 0;
stores: store.getters.useData.selectShopValue, that.modal_loading = false;
id: store.getters.useData.id, that.showUse = false;
scheduleId: store.getters.useData.scheduleId, });
isGetActivityInfo: true },
} },
ActivityManager.saveActivityData(data, function (data) { };
that.$emit("dispalyuseModal", false, false)
that.$router.push('/activity/plan');
that.currentStep = 0
})
}
}
}
</script> </script>
<style scoped> <style></style>
</style>

22
src/services/ActivityManager/ActivityManager.js
Unescape Escape View File

@ -4,7 +4,7 @@
* @date 2020/05/19 * @date 2020/05/19
*/ */
import http from '../CommonHttp' import http from "../CommonHttp";
/** /**
* 活动池列表 * 活动池列表
@ -13,56 +13,56 @@ import http from '../CommonHttp'
* @returns {Promise<any>} 返回Promise对象 * @returns {Promise<any>} 返回Promise对象
*/ */
export function getActivityList(params, call) { export function getActivityList(params, call) {
return http.get('/activity/schedule/list/all', params).then(call) return http.get("/activity/schedule/list/all", params).then(call);
} }
/** /**
* 新增或修改活动池 * 新增或修改活动池
*/ */
export function addOreditActivity(params, call) { export function addOreditActivity(params, call) {
return http.post('/activity/schedule/save',params).then(call) return http.post("/activity/schedule/save", params).then(call);
} }
/** /**
* 获取活动池详情 * 获取活动池详情
*/ */
export function getActivityInfo(params, call) { export function getActivityInfo(params, call) {
return http.get('/activity/schedule/detail',params).then(call) return http.get("/activity/schedule/detail", params).then(call);
} }
/** /**
* 上传图片 * 上传图片
*/ */
export function uploadImg(params, call) { export function uploadImg(params, call) {
return http.post('/upload',params).then(call) return http.post("/upload", params).then(call);
} }
/** /**
* 获取零售公司 * 获取零售公司
*/ */
export function getCompany(params, call) { export function getCompany(params, call) {
return http.get('/retail/company',params).then(call) return http.get("/retail/company", params).then(call);
} }
/** /**
* 获取店铺 * 获取店铺
*/ */
export function getShop(params, call) { export function getShop(params, call) {
return http.post('poi/store/user/shop',params).then(call) return http.post("poi/store/user/shopDTO", params).then(call);
} }
/** /**
* 根据活动池新建/编辑实例 * 根据活动池新建/编辑实例
*/ */
export function saveActivityData(params, call) { export function saveActivityData(params, call) {
return http.post('activity/instance/save',params).then(call) return http.post("activity/instance/save", params).then(call);
} }
/** /**
* 活动实例分页列表 * 活动实例分页列表
*/ */
export function getActivityTableData(params, call) { export function getActivityTableData(params, call) {
return http.get('activity/instance/list',params).then(call) return http.get("activity/instance/list", params).then(call);
} }
export default { export default {
@ -73,5 +73,5 @@ export default {
getCompany, getCompany,
getShop, getShop,
getActivityTableData, getActivityTableData,
saveActivityData saveActivityData,
} };

5
src/store/getters.js
Unescape Escape View File

@ -0,0 +1,5 @@
const getters = {
activityUseData: (state) => state.activity.useData,
};
export default getters;

20
src/store/index.js
Unescape Escape View File

@ -1,16 +1,16 @@
import Vue from 'vue' import Vue from "vue";
import Vuex from 'vuex' import Vuex from "vuex";
import home from './modules/home' import home from "./modules/home";
import activity from './modules/activity' import activity from "./modules/activity";
import createLogger from 'vuex/dist/logger' import createLogger from "vuex/dist/logger";
Vue.use(Vuex) Vue.use(Vuex);
const debug = true const debug = true;
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
home, home,
activity activity,
}, },
plugins: debug ? [createLogger()] : [] plugins: debug ? [createLogger()] : [],
}) });

61
src/store/modules/activity.js
Unescape Escape View File

@ -1,35 +1,54 @@
import * as types from './mutation-type' import * as types from "./mutation-type";
const activity = { const activity = {
state: { state: {
useData: {}, useData: {
beginTime: "",
endTime: "",
id: null,
name: "",
params: [],
scheduleId: null,
stores: [],
company: [],
},
useModal: false, useModal: false,
id: '', id: "",
store: [], store: [],
company: [],
}, },
mutations: { mutations: {
[types.SET_useData](state, useData) { [types.SET_useData](state, useData) {
state.useData = useData state.useData = useData;
},
[types.RSET_useData](state) {
state.useData = {
beginTime: "",
endTime: "",
id: null,
name: "",
params: [],
scheduleId: null,
stores: [],
company: [],
};
}, },
[types.SET_useModal](state, useModal) { [types.SET_useModal](state, useModal) {
state.useModal = useModal state.useModal = useModal;
}, },
[types.SET_ID](state, id) { [types.SET_ID](state, id) {
state.id = id state.id = id;
} },
}, },
actions: {}, actions: {},
getters: { getters: {
useData: state => { useData: (state) => {
return state.useData return state.useData;
}, },
useModal: state => { useModal: (state) => {
return state.useModal return state.useModal;
}, },
id: state => { id: (state) => {
return state.id return state.id;
} },
} },
};
} export default activity;
export default activity

9
src/store/modules/mutation-type.js
Unescape Escape View File

@ -1,4 +1,5 @@
export const SET_NUM = 'SET_NUM' export const SET_NUM = "SET_NUM";
export const SET_ID = 'SET_ID' export const SET_ID = "SET_ID";
export const SET_useData = 'SET_useData' export const SET_useData = "SET_useData";
export const SET_useModal = 'SET_useModal' export const RSET_useData = "RSET_useData";
export const SET_useModal = "SET_useModal";

22
vue.config.js
Unescape Escape View File

@ -31,19 +31,19 @@ module.exports = {
// proxy: 'http://192.168.1.123:8312/' // proxy: 'http://192.168.1.123:8312/'
// proxy: 'http://192.168.31.177:8312/' // proxy: 'http://192.168.31.177:8312/'
// proxy: 'http://localhost:8312/' // proxy: 'http://localhost:8312/'
proxy: "http://111.231.218.44:8080/", proxy: "http://localhost:8080/",
// proxy: 'http://jdxdev.vipgz4.idcfengye.com/' // proxy: 'http://jdxdev.vipgz4.idcfengye.com/'
}, },
chainWebpack: (config) => { chainWebpack: (config) => {
config.module // config.module
.rule("css") // .rule("css")
.test(/\.css$/) // .test(/\.css$/)
.oneOf("vue") // .oneOf("vue")
.resourceQuery(/\?vue/) // .resourceQuery(/\?vue/)
.use("px2rem") // .use("px2rem")
.loader("px2rem-loader") // .loader("px2rem-loader")
.options({ // .options({
remUnit: 40, // remUnit: 40,
}); // });
}, },
}; };

Write Preview
Loading…
Cancel
Save