活动池流程
parent
e02a68db10
commit
80a041a306
@ -1,9 +1,9 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
"postcss-px2rem-exclude": {
|
||||
remUnit: 40,
|
||||
exclude: /node_modules|folder_name/i,
|
||||
},
|
||||
// "postcss-px2rem-exclude": {
|
||||
// remUnit: 40,
|
||||
// exclude: /node_modules|folder_name/i,
|
||||
// },
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,83 +1,89 @@
|
||||
import Vue from 'vue';
|
||||
import Vue from "vue";
|
||||
import {
|
||||
Avatar, Breadcrumb, BreadcrumbItem,
|
||||
Button,
|
||||
Card,
|
||||
Content,
|
||||
Form,
|
||||
FormItem,
|
||||
Icon,
|
||||
Input,
|
||||
InputNumber,
|
||||
Layout,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Sider,
|
||||
Submenu,
|
||||
Table,
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
Option,
|
||||
Poptip,
|
||||
DatePicker,
|
||||
CheckboxGroup,
|
||||
Checkbox,
|
||||
RadioGroup,
|
||||
Switch,
|
||||
Modal,
|
||||
Message,
|
||||
Radio,
|
||||
List,
|
||||
Divider,
|
||||
Page,
|
||||
Upload,
|
||||
Spin,
|
||||
Tooltip,
|
||||
Step,
|
||||
Steps,
|
||||
Tag
|
||||
Avatar,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
Button,
|
||||
Card,
|
||||
Content,
|
||||
Form,
|
||||
FormItem,
|
||||
Icon,
|
||||
Input,
|
||||
InputNumber,
|
||||
Layout,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Sider,
|
||||
Submenu,
|
||||
Table,
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
Option,
|
||||
Poptip,
|
||||
DatePicker,
|
||||
CheckboxGroup,
|
||||
Checkbox,
|
||||
RadioGroup,
|
||||
Switch,
|
||||
Modal,
|
||||
Message,
|
||||
Radio,
|
||||
List,
|
||||
Divider,
|
||||
Page,
|
||||
Upload,
|
||||
Spin,
|
||||
Tooltip,
|
||||
Step,
|
||||
Steps,
|
||||
Tag,
|
||||
Collapse,
|
||||
Panel,
|
||||
} from "view-design";
|
||||
import 'view-design/dist/styles/iview.css';
|
||||
import "view-design/dist/styles/iview.css";
|
||||
|
||||
Vue.component('Button', Button);
|
||||
Vue.component('Tag', Tag);
|
||||
Vue.component('Table', Table);
|
||||
Vue.component('Card', Card);
|
||||
Vue.component('Form', Form);
|
||||
Vue.component('FormItem', FormItem);
|
||||
Vue.component('InputNumber', InputNumber);
|
||||
Vue.component('Icon', Icon);
|
||||
Vue.component('i-input', Input);
|
||||
Vue.component('Layout', Layout);
|
||||
Vue.component('Sider', Sider);
|
||||
Vue.component('Avatar', Avatar);
|
||||
Vue.component('Menu', Menu);
|
||||
Vue.component('MenuItem', MenuItem);
|
||||
Vue.component('Submenu', Submenu);
|
||||
Vue.component('Content', Content);
|
||||
Vue.component('Breadcrumb', Breadcrumb);
|
||||
Vue.component('BreadcrumbItem', BreadcrumbItem);
|
||||
Vue.component('Row', Row);
|
||||
Vue.component('i-col', Col);
|
||||
Vue.component('Select', Select);
|
||||
Vue.component('Option', Option);
|
||||
Vue.component('Poptip', Poptip);
|
||||
Vue.component('DatePicker', DatePicker);
|
||||
Vue.component('CheckboxGroup', CheckboxGroup);
|
||||
Vue.component('Checkbox', Checkbox);
|
||||
Vue.component('RadioGroup', RadioGroup);
|
||||
Vue.component('i-switch', Switch);
|
||||
Vue.component('Modal', Modal);
|
||||
Vue.component('Message', Message);
|
||||
Vue.component("Button", Button);
|
||||
Vue.component("Collapse", Collapse);
|
||||
Vue.component("Panel", Panel);
|
||||
Vue.component("Tag", Tag);
|
||||
Vue.component("Table", Table);
|
||||
Vue.component("Card", Card);
|
||||
Vue.component("Form", Form);
|
||||
Vue.component("FormItem", FormItem);
|
||||
Vue.component("InputNumber", InputNumber);
|
||||
Vue.component("Icon", Icon);
|
||||
Vue.component("i-input", Input);
|
||||
Vue.component("Layout", Layout);
|
||||
Vue.component("Sider", Sider);
|
||||
Vue.component("Avatar", Avatar);
|
||||
Vue.component("Menu", Menu);
|
||||
Vue.component("MenuItem", MenuItem);
|
||||
Vue.component("Submenu", Submenu);
|
||||
Vue.component("Content", Content);
|
||||
Vue.component("Breadcrumb", Breadcrumb);
|
||||
Vue.component("BreadcrumbItem", BreadcrumbItem);
|
||||
Vue.component("Row", Row);
|
||||
Vue.component("i-col", Col);
|
||||
Vue.component("Select", Select);
|
||||
Vue.component("Option", Option);
|
||||
Vue.component("Poptip", Poptip);
|
||||
Vue.component("DatePicker", DatePicker);
|
||||
Vue.component("CheckboxGroup", CheckboxGroup);
|
||||
Vue.component("Checkbox", Checkbox);
|
||||
Vue.component("RadioGroup", RadioGroup);
|
||||
Vue.component("i-switch", Switch);
|
||||
Vue.component("Modal", Modal);
|
||||
Vue.component("Message", Message);
|
||||
Vue.prototype.$Modal = Modal;
|
||||
Vue.prototype.$Message = Message;
|
||||
Vue.component('Radio', Radio);
|
||||
Vue.component('List', List);
|
||||
Vue.component('Divider', Divider);
|
||||
Vue.component('Page', Page);
|
||||
Vue.component('Spin', Spin);
|
||||
Vue.component('Upload', Upload);
|
||||
Vue.component('Tooltip', Tooltip);
|
||||
Vue.component('Step', Step);
|
||||
Vue.component('Steps', Steps);
|
||||
Vue.component("Radio", Radio);
|
||||
Vue.component("List", List);
|
||||
Vue.component("Divider", Divider);
|
||||
Vue.component("Page", Page);
|
||||
Vue.component("Spin", Spin);
|
||||
Vue.component("Upload", Upload);
|
||||
Vue.component("Tooltip", Tooltip);
|
||||
Vue.component("Step", Step);
|
||||
Vue.component("Steps", Steps);
|
||||
|
||||
@ -1,43 +1,42 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import Vuex from 'vuex'
|
||||
import moment from 'moment'
|
||||
import axios from 'axios';
|
||||
import QS from 'qs';
|
||||
import './iview';
|
||||
import './vcharts'
|
||||
import 'lib-flexible/flexible'
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import Vuex from "vuex";
|
||||
import moment from "moment";
|
||||
import axios from "axios";
|
||||
import QS from "qs";
|
||||
import "./iview";
|
||||
import "./vcharts";
|
||||
import "lib-flexible/flexible";
|
||||
import _ from "lodash";
|
||||
|
||||
Vue.prototype.$axios = axios;
|
||||
Vue.prototype.$qs = QS;
|
||||
Vue.prototype.$moment = moment;
|
||||
Vue.config.productionTip = false
|
||||
Vue.config.productionTip = false;
|
||||
Vue.prototype.$moment = moment;
|
||||
Vue.prototype._ = _;
|
||||
|
||||
import echarts from 'echarts';
|
||||
import 'echarts/map/js/china'
|
||||
import echarts from "echarts";
|
||||
import "echarts/map/js/china";
|
||||
|
||||
Vue.prototype.$echarts = echarts;
|
||||
// 需要汉化
|
||||
moment.locale('zh-cn');
|
||||
moment.locale("zh-cn");
|
||||
|
||||
Vue.use(Vuex);
|
||||
// Vue.use(ViewUI);
|
||||
//实现了全局的事件总线对象
|
||||
Vue.prototype.bus = new Vue();
|
||||
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
render: (h) => h(App),
|
||||
router,
|
||||
}).$mount('#app')
|
||||
|
||||
}).$mount("#app");
|
||||
|
||||
//重复点击同一个报错解决
|
||||
import Router from 'vue-router'
|
||||
const routerPush = Router.prototype.push
|
||||
import Router from "vue-router";
|
||||
const routerPush = Router.prototype.push;
|
||||
Router.prototype.push = function push(location) {
|
||||
return routerPush.call(this, location).catch(error=> error)
|
||||
}
|
||||
|
||||
return routerPush.call(this, location).catch((error) => error);
|
||||
};
|
||||
|
||||
@ -1,236 +1,267 @@
|
||||
<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">
|
||||
<span>配置活动</span>
|
||||
<span>配置活动</span>
|
||||
</p>
|
||||
<div>基本配置</div>
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<Form
|
||||
ref="formValidate"
|
||||
:model="formValidate"
|
||||
:rules="ruleValidate"
|
||||
:label-width="80"
|
||||
>
|
||||
<Row>
|
||||
<i-col style="text-align: left;" span="8">
|
||||
<i-col style="text-align: left;" span="8">
|
||||
<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
|
||||
ref='upload'
|
||||
ref="upload"
|
||||
:show-upload-list="false"
|
||||
:on-success="uploadImgSuccess"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:format="['jpg', 'jpeg', 'png']"
|
||||
:max-size="2048"
|
||||
:before-upload="handleBeforeUpload"
|
||||
multiple
|
||||
type="drag"
|
||||
action=""
|
||||
style="display: inline-block;">
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<div style="width: 200px;height:200px;line-height: 200px;">
|
||||
<span v-if="!formValidate.logo">请上传图片</span>
|
||||
<img v-if="formValidate.logo" :src="`/kiisoo-ic` + formValidate.logo" alt="" style="width: 100%; height: auto">
|
||||
<span v-if="!formValidate.logo">请上传图片</span>
|
||||
<img
|
||||
v-if="formValidate.logo"
|
||||
:src="`/kiisoo-ic` + formValidate.logo"
|
||||
alt=""
|
||||
style="width: 100%; height: auto"
|
||||
/>
|
||||
</div>
|
||||
</Upload>
|
||||
</Upload>
|
||||
</FormItem>
|
||||
</i-col>
|
||||
<i-col span="15" offset="1">
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
</i-col>
|
||||
</Row>
|
||||
</Form>
|
||||
<div class="topic">活动类型</div>
|
||||
<Row class="inputItem" v-for="(item, index) in inputActivityList" :key="index">
|
||||
<i-col :span="2">
|
||||
类型{{index+1}}
|
||||
<Row
|
||||
:gutter="10"
|
||||
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 :span="9">
|
||||
<i-input
|
||||
class="inputClass"
|
||||
type="text"
|
||||
style="margin-left: 20px"
|
||||
v-model="item.key"
|
||||
placeholder="默认值"
|
||||
></i-input>
|
||||
</i-col>
|
||||
<i-col :span="20">
|
||||
<i-input class="inputClass" type="text" v-model="item.name" placeholder="参数名称"></i-input>
|
||||
<i-input class="inputClass" type="text" style="margin-left: 20px" v-model="item.defaultVal" placeholder="默认值"></i-input>
|
||||
<Button style="margin-left: 20px" type="error" @click="delActivityInput(index)">删除</Button>
|
||||
<i-col :span="4">
|
||||
<Button
|
||||
style="margin-left: 20px"
|
||||
type="error"
|
||||
@click="delActivityInput(index)"
|
||||
>删除</Button
|
||||
>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Button style="margin-top: 10px" type="primary" @click="addActivityInput">+添加活动类型</Button>
|
||||
<div style="text-align: center;" slot="footer">
|
||||
<Button type="primary" size="large" shape="circle" :loading="modal_loading" @click="next">保存</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<Button style="margin-top: 10px" type="primary" @click="addActivityInput"
|
||||
>+添加活动类型</Button
|
||||
>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import ActivityManager from "../../services/ActivityManager/ActivityManager";
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: "addActivity",
|
||||
data() {
|
||||
return {
|
||||
return {
|
||||
dispalyModal: false,
|
||||
currentStep: 0,
|
||||
modal_loading: false,
|
||||
inputActivityList: [],
|
||||
imageName: '212',
|
||||
formValidate: {
|
||||
activityName: '',
|
||||
activityDsc: '',
|
||||
appId: '',
|
||||
uri: '',
|
||||
logo: '',
|
||||
},
|
||||
imageName: "212",
|
||||
formValidate: {},
|
||||
ruleValidate: {
|
||||
activityName: [
|
||||
{ required: true, message: '活动名称不能为空', trigger: 'blur' }
|
||||
name: [
|
||||
{ required: true, message: "活动名称不能为空", trigger: "blur" },
|
||||
],
|
||||
activityDsc: [
|
||||
{ required: true, message: '活动描述不能为空', trigger: 'blur' }
|
||||
],
|
||||
appId: [
|
||||
{ required: true, message: 'appId不能为空', trigger: 'blur' }
|
||||
],
|
||||
uri: [
|
||||
{ required: true, message: 'URI不能为空', trigger: 'blur' }
|
||||
description: [
|
||||
{ required: true, message: "活动描述不能为空", trigger: "blur" },
|
||||
],
|
||||
appId: [{ required: true, message: "appId不能为空", trigger: "blur" }],
|
||||
uri: [{ required: true, message: "URI不能为空", trigger: "blur" }],
|
||||
// uploadImg: [
|
||||
// { required: true, message: '请上传活动图片', trigger: 'blur' }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
addActivityModal: Boolean,
|
||||
id: String
|
||||
id: String,
|
||||
},
|
||||
watch: {
|
||||
addActivityModal(val) {
|
||||
this.dispalyModal = val
|
||||
if(val === true && this.id) {
|
||||
this.getActivityData()
|
||||
this.dispalyModal = val;
|
||||
if (val === true && this.id) {
|
||||
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: {
|
||||
addActivityInput() {
|
||||
this.inputActivityList.push({
|
||||
name: '',
|
||||
defaultVal: ''
|
||||
})
|
||||
this.formValidate.params.push({
|
||||
defaultVal: "",
|
||||
description: "",
|
||||
id: 0,
|
||||
isRequired: 0,
|
||||
key: "",
|
||||
limitLower: "",
|
||||
limitUpper: "",
|
||||
name: "",
|
||||
type: 0,
|
||||
});
|
||||
},
|
||||
delActivityInput(index) {
|
||||
this.inputActivityList.splice(index,1)
|
||||
if (this.formValidate.params.length <= 1) {
|
||||
this.$Message.error("至少需要填写一个活动类型!");
|
||||
return;
|
||||
}
|
||||
this.formValidate.params.splice(index, 1);
|
||||
},
|
||||
cancel() {
|
||||
this.inputActivityList = []
|
||||
this.formValidate.appId = ''
|
||||
this.formValidate.activityDsc = ''
|
||||
this.formValidate.activityName = ''
|
||||
this.formValidate.uri = ''
|
||||
this.dispalyModal = false
|
||||
this.$emit("dispalyAddActivityModal", false, false)
|
||||
this.$emit("dispalyAddActivityModal", false, false);
|
||||
},
|
||||
getActivityData() {
|
||||
let that = this
|
||||
let that = this;
|
||||
let data = {
|
||||
id: that.id
|
||||
}
|
||||
ActivityManager.getActivityInfo(data, function (data) {
|
||||
that.inputActivityList = []
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
id: that.id,
|
||||
};
|
||||
ActivityManager.getActivityInfo(data, function(data) {
|
||||
that.formValidate = data.data.results;
|
||||
});
|
||||
},
|
||||
uploadImgSuccess(res, file) {
|
||||
this.imageName = file.name
|
||||
this.imageName = file.name;
|
||||
},
|
||||
handleBeforeUpload(res) {
|
||||
const me = this;
|
||||
let data = new FormData();
|
||||
data.append('file', res);
|
||||
data.append("file", res);
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/upload',
|
||||
method: "post",
|
||||
url: "/upload",
|
||||
data: data,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}).then(function (res) {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}).then(function(res) {
|
||||
if (res.data.success) {
|
||||
me.formValidate.logo = res.data.results;
|
||||
}
|
||||
});
|
||||
return false;
|
||||
},
|
||||
next() {
|
||||
let that = this
|
||||
save() {
|
||||
let that = this;
|
||||
if (that.formValidate.params.length <= 0) {
|
||||
that.$Message.error("至少需要填写一个活动类型!");
|
||||
return;
|
||||
}
|
||||
this.$refs["formValidate"].validate((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)
|
||||
let data = {
|
||||
appId: that.formValidate.appId,
|
||||
logo: that.formValidate.logo,
|
||||
name: that.formValidate.activityName,
|
||||
uri: that.formValidate.uri,
|
||||
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 {
|
||||
that.$Message.error('表单验证失败!');
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
if (valid) {
|
||||
// param = JSON.stringify(param)
|
||||
let data = { ...that.formValidate, isGetActivityInfo: true };
|
||||
ActivityManager.addOreditActivity(data, function(data) {
|
||||
that.addActivityModal = false;
|
||||
that.formValidate = {};
|
||||
that.$emit("dispalyAddActivityModal", false, true);
|
||||
});
|
||||
} else {
|
||||
that.$Message.error("表单验证失败!");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inputClass{
|
||||
width: 1000px;
|
||||
<style scoped>
|
||||
.inputClass {
|
||||
width: 100%;
|
||||
}
|
||||
.inputItem{
|
||||
margin-top: 40px;
|
||||
.inputItem {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.topic{
|
||||
margin-top: 100px;
|
||||
.topic {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,118 +1,166 @@
|
||||
<template>
|
||||
<Modal v-model="displayUseModal" @on-cancel="cancel" width="1000">
|
||||
<Steps style="padding: 40px;" :current="currentStep">
|
||||
<Step title="基本信息" content=""></Step>
|
||||
<Step title="选择零售公司" content=""></Step>
|
||||
<Step title="选择店铺" content=""></Step>
|
||||
<Step title="确认信息" content=""></Step>
|
||||
</Steps>
|
||||
<useActivityStepOne :displayUseModal="displayUseModal" v-if="currentStep==0"></useActivityStepOne>
|
||||
<useActivityStepTwo v-if="currentStep==1"></useActivityStepTwo>
|
||||
<useActivityStepThree v-if="currentStep==2"></useActivityStepThree>
|
||||
<useActivityStepFoure v-if="currentStep==3"></useActivityStepFoure>
|
||||
<div slot="footer">
|
||||
<Button v-if="currentStep!==0" 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 class="use_box">
|
||||
<Modal
|
||||
:scrollable="false"
|
||||
v-model="showUse"
|
||||
title="使用活动"
|
||||
@on-cancel="cancel"
|
||||
:loading="modal_loading"
|
||||
width="70%"
|
||||
>
|
||||
<Steps style="padding: 40px;" :current="currentStep">
|
||||
<Step title="基本信息"></Step>
|
||||
<Step title="选择零售公司" content></Step>
|
||||
<Step title="选择店铺" content></Step>
|
||||
<Step title="确认信息" content></Step>
|
||||
</Steps>
|
||||
<useActivityStepOne
|
||||
:schedule="schedule"
|
||||
v-if="currentStep == 0"
|
||||
></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">
|
||||
<Button
|
||||
v-if="currentStep !== 0"
|
||||
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>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import useActivityStepOne from './useActivityStepOne'
|
||||
import useActivityStepTwo from './useActivityStepTwo'
|
||||
import useActivityStepThree from './useActivityStepThree'
|
||||
import useActivityStepFoure from './useActivityStepFoure'
|
||||
import ActivityManager from "../../services/ActivityManager/ActivityManager"
|
||||
import store from "../../store/index"
|
||||
import useActivityStepOne from "./useActivityStepOne";
|
||||
import useActivityStepTwo from "./useActivityStepTwo";
|
||||
import useActivityStepThree from "./useActivityStepThree";
|
||||
import useActivityStepFoure from "./useActivityStepFoure";
|
||||
import ActivityManager from "../../services/ActivityManager/ActivityManager";
|
||||
import store from "../../store/index";
|
||||
export default {
|
||||
name: "useTable",
|
||||
components: {
|
||||
useActivityStepOne,
|
||||
useActivityStepTwo,
|
||||
useActivityStepThree,
|
||||
useActivityStepFoure
|
||||
},
|
||||
useActivityStepFoure,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
return {
|
||||
currentStep: 0,
|
||||
modal_loading: false,
|
||||
displayUseModal: false
|
||||
}
|
||||
showUse: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
useModal: Boolean,
|
||||
id: String
|
||||
id: String,
|
||||
schedule: {},
|
||||
show: Boolean,
|
||||
},
|
||||
watch: {
|
||||
useModal(val) {
|
||||
this.displayUseModal = val
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.useModal)
|
||||
show() {
|
||||
this.showUse = this.show;
|
||||
},
|
||||
schedule() {
|
||||
store.getters.useData.scheduleId = this.schedule.id;
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
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() {
|
||||
const data = store.getters.useData;
|
||||
if (this.currentStep === 0) {
|
||||
if (!data.activityStartDate) {
|
||||
this.$Message.error('请填写活动开始时间');
|
||||
return;
|
||||
}
|
||||
if (!data.activityEndDate) {
|
||||
this.$Message.error('请填写活动结束时间');
|
||||
return;
|
||||
}
|
||||
if (data.activityStartDate > data.activityEndDate) {
|
||||
this.$Message.error('开始时间不能晚于结束时间');
|
||||
return;
|
||||
}
|
||||
let data = store.getters.useData;
|
||||
data.name = this.schedule.name;
|
||||
if (this.currentStep === 0) {
|
||||
if (data.params.length <= 0) {
|
||||
this.$Message.error("请选择活动类型");
|
||||
return;
|
||||
}
|
||||
if (!data.beginTime) {
|
||||
this.$Message.error("请填写活动开始时间");
|
||||
return;
|
||||
}
|
||||
if (!data.endTime) {
|
||||
this.$Message.error("请填写活动结束时间");
|
||||
return;
|
||||
}
|
||||
if (this.currentStep === 1) {
|
||||
if (!data.selectCompanyValue || data.selectCompanyValue.length === 0) {
|
||||
this.$Message.error('请至少选择1家公司');
|
||||
return;
|
||||
}
|
||||
if (data.beginTime > data.endTime) {
|
||||
this.$Message.error("开始时间不能晚于结束时间");
|
||||
return;
|
||||
}
|
||||
if (this.currentStep === 2) {
|
||||
if (!data.selectShopValue || data.selectShopValue.length === 0) {
|
||||
this.$Message.error('请至少选择1家店铺');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.currentStep === 1) {
|
||||
if (!data.company || data.company.length === 0) {
|
||||
this.$Message.error("请至少选择1家公司");
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.currentStep === 2) {
|
||||
if (!data.stores || data.stores.length === 0) {
|
||||
this.$Message.error("请至少选择1家店铺");
|
||||
return;
|
||||
}
|
||||
this.currentStep = this.currentStep + 1
|
||||
}
|
||||
store.commit("SET_useData", data);
|
||||
this.currentStep = this.currentStep + 1;
|
||||
},
|
||||
back() {
|
||||
this.currentStep = this.currentStep - 1
|
||||
this.currentStep = this.currentStep - 1;
|
||||
},
|
||||
finish() {
|
||||
let that = this
|
||||
console.log(store.getters.useData)
|
||||
|
||||
let data = {
|
||||
beginTime: store.getters.useData.activityStartDate,
|
||||
endTime: store.getters.useData.activityEndDate,
|
||||
name: store.getters.useData.name,
|
||||
organizations: store.getters.useData.selectCompanyValue,
|
||||
params: store.getters.useData.inputActivityList,
|
||||
stores: store.getters.useData.selectShopValue,
|
||||
id: store.getters.useData.id,
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
let that = this;
|
||||
let data = store.getters.useData;
|
||||
data.isGetActivityInfo = true;
|
||||
this.modal_loading = true;
|
||||
ActivityManager.saveActivityData(store.getters.useData, function(data) {
|
||||
store.commit("RSET_useData");
|
||||
that.$emit("doShow", false);
|
||||
that.$router.push("/activity/plan");
|
||||
that.currentStep = 0;
|
||||
that.modal_loading = false;
|
||||
that.showUse = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
const getters = {
|
||||
activityUseData: (state) => state.activity.useData,
|
||||
};
|
||||
|
||||
export default getters;
|
||||
@ -1,16 +1,16 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import home from './modules/home'
|
||||
import activity from './modules/activity'
|
||||
import createLogger from 'vuex/dist/logger'
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
import home from "./modules/home";
|
||||
import activity from "./modules/activity";
|
||||
import createLogger from "vuex/dist/logger";
|
||||
|
||||
Vue.use(Vuex)
|
||||
const debug = true
|
||||
Vue.use(Vuex);
|
||||
const debug = true;
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
home,
|
||||
activity
|
||||
activity,
|
||||
},
|
||||
plugins: debug ? [createLogger()] : []
|
||||
})
|
||||
plugins: debug ? [createLogger()] : [],
|
||||
});
|
||||
|
||||
@ -1,35 +1,54 @@
|
||||
import * as types from './mutation-type'
|
||||
import * as types from "./mutation-type";
|
||||
const activity = {
|
||||
state: {
|
||||
useData: {},
|
||||
useData: {
|
||||
beginTime: "",
|
||||
endTime: "",
|
||||
id: null,
|
||||
name: "",
|
||||
params: [],
|
||||
scheduleId: null,
|
||||
stores: [],
|
||||
company: [],
|
||||
},
|
||||
useModal: false,
|
||||
id: '',
|
||||
id: "",
|
||||
store: [],
|
||||
company: [],
|
||||
},
|
||||
mutations: {
|
||||
[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) {
|
||||
state.useModal = useModal
|
||||
state.useModal = useModal;
|
||||
},
|
||||
[types.SET_ID](state, id) {
|
||||
state.id = id
|
||||
}
|
||||
state.id = id;
|
||||
},
|
||||
},
|
||||
actions: {},
|
||||
getters: {
|
||||
useData: state => {
|
||||
return state.useData
|
||||
},
|
||||
useModal: state => {
|
||||
return state.useModal
|
||||
},
|
||||
id: state => {
|
||||
return state.id
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
export default activity
|
||||
useData: (state) => {
|
||||
return state.useData;
|
||||
},
|
||||
useModal: (state) => {
|
||||
return state.useModal;
|
||||
},
|
||||
id: (state) => {
|
||||
return state.id;
|
||||
},
|
||||
},
|
||||
};
|
||||
export default activity;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
export const SET_NUM = 'SET_NUM'
|
||||
export const SET_ID = 'SET_ID'
|
||||
export const SET_useData = 'SET_useData'
|
||||
export const SET_useModal = 'SET_useModal'
|
||||
export const SET_NUM = "SET_NUM";
|
||||
export const SET_ID = "SET_ID";
|
||||
export const SET_useData = "SET_useData";
|
||||
export const RSET_useData = "RSET_useData";
|
||||
export const SET_useModal = "SET_useModal";
|
||||
|
||||
Loading…
Reference in New Issue