活动池流程
parent
e02a68db10
commit
80a041a306
@ -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,
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,83 +1,89 @@
|
|||||||
import Vue from 'vue';
|
import Vue from "vue";
|
||||||
import {
|
import {
|
||||||
Avatar, Breadcrumb, BreadcrumbItem,
|
Avatar,
|
||||||
Button,
|
Breadcrumb,
|
||||||
Card,
|
BreadcrumbItem,
|
||||||
Content,
|
Button,
|
||||||
Form,
|
Card,
|
||||||
FormItem,
|
Content,
|
||||||
Icon,
|
Form,
|
||||||
Input,
|
FormItem,
|
||||||
InputNumber,
|
Icon,
|
||||||
Layout,
|
Input,
|
||||||
Menu,
|
InputNumber,
|
||||||
MenuItem,
|
Layout,
|
||||||
Sider,
|
Menu,
|
||||||
Submenu,
|
MenuItem,
|
||||||
Table,
|
Sider,
|
||||||
Row,
|
Submenu,
|
||||||
Col,
|
Table,
|
||||||
Select,
|
Row,
|
||||||
Option,
|
Col,
|
||||||
Poptip,
|
Select,
|
||||||
DatePicker,
|
Option,
|
||||||
CheckboxGroup,
|
Poptip,
|
||||||
Checkbox,
|
DatePicker,
|
||||||
RadioGroup,
|
CheckboxGroup,
|
||||||
Switch,
|
Checkbox,
|
||||||
Modal,
|
RadioGroup,
|
||||||
Message,
|
Switch,
|
||||||
Radio,
|
Modal,
|
||||||
List,
|
Message,
|
||||||
Divider,
|
Radio,
|
||||||
Page,
|
List,
|
||||||
Upload,
|
Divider,
|
||||||
Spin,
|
Page,
|
||||||
Tooltip,
|
Upload,
|
||||||
Step,
|
Spin,
|
||||||
Steps,
|
Tooltip,
|
||||||
Tag
|
Step,
|
||||||
|
Steps,
|
||||||
|
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);
|
||||||
|
|||||||
@ -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);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,236 +1,267 @@
|
|||||||
<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 :span="9">
|
||||||
|
<i-input
|
||||||
|
class="inputClass"
|
||||||
|
type="text"
|
||||||
|
style="margin-left: 20px"
|
||||||
|
v-model="item.key"
|
||||||
|
placeholder="默认值"
|
||||||
|
></i-input>
|
||||||
</i-col>
|
</i-col>
|
||||||
<i-col :span="20">
|
<i-col :span="4">
|
||||||
<i-input class="inputClass" type="text" v-model="item.name" placeholder="参数名称"></i-input>
|
<Button
|
||||||
<i-input class="inputClass" type="text" style="margin-left: 20px" v-model="item.defaultVal" placeholder="默认值"></i-input>
|
style="margin-left: 20px"
|
||||||
<Button style="margin-left: 20px" type="error" @click="delActivityInput(index)">删除</Button>
|
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() {
|
||||||
return {
|
return {
|
||||||
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: [
|
description: [
|
||||||
{ required: true, message: '活动描述不能为空', trigger: 'blur' }
|
{ required: true, message: "活动描述不能为空", trigger: "blur" },
|
||||||
],
|
|
||||||
appId: [
|
|
||||||
{ required: true, message: 'appId不能为空', 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 = []
|
// param = JSON.stringify(param)
|
||||||
that.inputActivityList.forEach(element => {
|
let data = { ...that.formValidate, isGetActivityInfo: true };
|
||||||
param.push({
|
ActivityManager.addOreditActivity(data, function(data) {
|
||||||
defaultVal: element.defaultVal,
|
that.addActivityModal = false;
|
||||||
description: element.name,
|
that.formValidate = {};
|
||||||
key: element.name,
|
that.$emit("dispalyAddActivityModal", false, true);
|
||||||
name: element.name,
|
});
|
||||||
type: 2,
|
} else {
|
||||||
id: element.id,
|
that.$Message.error("表单验证失败!");
|
||||||
})
|
}
|
||||||
});
|
});
|
||||||
// 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('表单验证失败!');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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>
|
||||||
|
|||||||
@ -1,118 +1,166 @@
|
|||||||
<template>
|
<template>
|
||||||
<Modal v-model="displayUseModal" @on-cancel="cancel" width="1000">
|
<div class="use_box">
|
||||||
<Steps style="padding: 40px;" :current="currentStep">
|
<Modal
|
||||||
<Step title="基本信息" content=""></Step>
|
:scrollable="false"
|
||||||
<Step title="选择零售公司" content=""></Step>
|
v-model="showUse"
|
||||||
<Step title="选择店铺" content=""></Step>
|
title="使用活动"
|
||||||
<Step title="确认信息" content=""></Step>
|
@on-cancel="cancel"
|
||||||
</Steps>
|
:loading="modal_loading"
|
||||||
<useActivityStepOne :displayUseModal="displayUseModal" v-if="currentStep==0"></useActivityStepOne>
|
width="70%"
|
||||||
<useActivityStepTwo v-if="currentStep==1"></useActivityStepTwo>
|
>
|
||||||
<useActivityStepThree v-if="currentStep==2"></useActivityStepThree>
|
<Steps style="padding: 40px;" :current="currentStep">
|
||||||
<useActivityStepFoure v-if="currentStep==3"></useActivityStepFoure>
|
<Step title="基本信息"></Step>
|
||||||
<div slot="footer">
|
<Step title="选择零售公司" content></Step>
|
||||||
<Button v-if="currentStep!==0" type="primary" shape="circle" :loading="modal_loading" @click="back">上一步</Button>
|
<Step title="选择店铺" content></Step>
|
||||||
<Button v-if="currentStep!==3" type="primary" shape="circle" :loading="modal_loading" @click="next">下一步</Button>
|
<Step title="确认信息" content></Step>
|
||||||
<Button v-if="currentStep==3" type="primary" shape="circle" :loading="modal_loading" @click="finish">完成</Button>
|
</Steps>
|
||||||
</div>
|
<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>
|
</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() {
|
||||||
mounted() {
|
store.getters.useData.scheduleId = this.schedule.id;
|
||||||
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;
|
||||||
if (this.currentStep === 0) {
|
data.name = this.schedule.name;
|
||||||
if (!data.activityStartDate) {
|
if (this.currentStep === 0) {
|
||||||
this.$Message.error('请填写活动开始时间');
|
if (data.params.length <= 0) {
|
||||||
return;
|
this.$Message.error("请选择活动类型");
|
||||||
}
|
return;
|
||||||
if (!data.activityEndDate) {
|
}
|
||||||
this.$Message.error('请填写活动结束时间');
|
if (!data.beginTime) {
|
||||||
return;
|
this.$Message.error("请填写活动开始时间");
|
||||||
}
|
return;
|
||||||
if (data.activityStartDate > data.activityEndDate) {
|
}
|
||||||
this.$Message.error('开始时间不能晚于结束时间');
|
if (!data.endTime) {
|
||||||
return;
|
this.$Message.error("请填写活动结束时间");
|
||||||
}
|
return;
|
||||||
}
|
}
|
||||||
if (this.currentStep === 1) {
|
if (data.beginTime > data.endTime) {
|
||||||
if (!data.selectCompanyValue || data.selectCompanyValue.length === 0) {
|
this.$Message.error("开始时间不能晚于结束时间");
|
||||||
this.$Message.error('请至少选择1家公司');
|
return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if (this.currentStep === 2) {
|
}
|
||||||
if (!data.selectShopValue || data.selectShopValue.length === 0) {
|
if (this.currentStep === 1) {
|
||||||
this.$Message.error('请至少选择1家店铺');
|
if (!data.company || data.company.length === 0) {
|
||||||
return;
|
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() {
|
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>
|
|
||||||
|
|||||||
@ -0,0 +1,5 @@
|
|||||||
|
const getters = {
|
||||||
|
activityUseData: (state) => state.activity.useData,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default getters;
|
||||||
@ -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()] : [],
|
||||||
})
|
});
|
||||||
|
|||||||
@ -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
|
|
||||||
|
|||||||
@ -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";
|
||||||
|
|||||||
Loading…
Reference in New Issue