You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
469 lines
13 KiB
Vue
469 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<Spin v-if="saving" fix>加载中...</Spin>
|
|
<Form ref="formValidate" :model="formValidate" :label-width="80">
|
|
<Row :gutter="10">
|
|
<i-col span="4">
|
|
<FormItem label="开始日期" prop>
|
|
<Date-picker
|
|
v-model="formValidate.startDate"
|
|
:options='startDateOptions'
|
|
type="date"
|
|
placement="bottom-end"
|
|
placeholder="选择日期区间"
|
|
format="yyyy-MM-dd"
|
|
@on-change="startDateChange"
|
|
></Date-picker>
|
|
</FormItem>
|
|
</i-col>
|
|
|
|
<i-col span="4">
|
|
<FormItem label="结束日期" prop>
|
|
<Date-picker
|
|
v-model="formValidate.endDate"
|
|
:options='endDateOptions'
|
|
type="date"
|
|
placement="bottom-end"
|
|
placeholder="选择结束日期"
|
|
format="yyyy-MM-dd"
|
|
@on-change="endDateChange"
|
|
></Date-picker>
|
|
</FormItem>
|
|
</i-col>
|
|
<i-col span="4">
|
|
<FormItem label="零售公司" prop>
|
|
<Select
|
|
v-model="formValidate.organizationId"
|
|
filterable
|
|
@on-change="selectCompany"
|
|
placeholder="全部"
|
|
clearable
|
|
>
|
|
<Option
|
|
v-for="(item, index) in companyList"
|
|
:key="index"
|
|
:value="item.value"
|
|
>{{ item.label }}</Option>
|
|
</Select>
|
|
</FormItem>
|
|
</i-col>
|
|
<i-col span="6">
|
|
<FormItem label="店铺" prop>
|
|
<Select v-model="formValidate.storeId" filterable placeholder="全部" clearable>
|
|
<Option
|
|
v-for="(item, index) in shopList"
|
|
:key="index"
|
|
:value="item.value"
|
|
>{{ item.label }}</Option>
|
|
</Select>
|
|
</FormItem>
|
|
</i-col>
|
|
<i-col span="3">
|
|
<FormItem label="活动状态" prop>
|
|
<Select v-model="formValidate.status">
|
|
<Option
|
|
v-for="(item, index) in activityStatusList"
|
|
:key="index"
|
|
:value="item.value"
|
|
>{{ item.label }}</Option>
|
|
</Select>
|
|
</FormItem>
|
|
</i-col>
|
|
<i-col span="3">
|
|
<Button type="primary" @click="() => {pageNum = 1;searchTable()}">查询</Button>
|
|
</i-col>
|
|
</Row>
|
|
<Row style="margin-top:50px">
|
|
<Table
|
|
:loading="loading"
|
|
border
|
|
@on-row-dblclick="showDetail"
|
|
:columns="columns1"
|
|
:data="data"
|
|
></Table>
|
|
<Page
|
|
:total="totalSize"
|
|
:current="pageNum"
|
|
:page-size="pageSize"
|
|
show-elevator
|
|
show-total
|
|
placement="top"
|
|
@on-change="handlePage"
|
|
class-name="ks-page"
|
|
></Page>
|
|
</Row>
|
|
</Form>
|
|
<useTable
|
|
ref="useTable"
|
|
@doShow="doShow"
|
|
:show="showUse"
|
|
:isModify="true"
|
|
:schedule="activityInstance.scheduleVO"
|
|
></useTable>
|
|
<Modal v-model="isShowDetail" title="活动计划详情" width="70%" :footer-hide="true">
|
|
<planDetail v-if="isShowDetail" :detail="detail"></planDetail>
|
|
</Modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ActivityManager from "../../services/ActivityManager/ActivityManager";
|
|
import useTable from "./useTable";
|
|
import http from "../../services/CommonHttp";
|
|
import { formatDate } from "../../utils/Common";
|
|
import store from "../../store";
|
|
import planDetail from "./PlanDetail";
|
|
export default {
|
|
name: "ActivityPlan",
|
|
inject: ["setMenuName"],
|
|
components: {
|
|
useTable,
|
|
planDetail
|
|
},
|
|
data() {
|
|
const _this = this;
|
|
return {
|
|
loading: false,
|
|
isShowDetail: false,
|
|
totalSize: 0,
|
|
pageNum: 1,
|
|
detail: {},
|
|
pageSize: 10,
|
|
saving: false,
|
|
data: [],
|
|
companyList: [],
|
|
customerId: null,
|
|
shopList: [],
|
|
showUse: false,
|
|
activityInstance: {},
|
|
formValidate: {
|
|
date: null,
|
|
organizationId: null,
|
|
storeId: null,
|
|
status: 2,
|
|
startDate:null,
|
|
endDate:null,
|
|
},
|
|
startDateOptions:{},
|
|
endDateOptions:{},
|
|
activityData: [
|
|
{
|
|
activityStatus: "进行中"
|
|
},
|
|
{
|
|
activityStatus: "已结束"
|
|
}
|
|
],
|
|
activityStatusList: [
|
|
{
|
|
label: "全部",
|
|
value: 0
|
|
},
|
|
{
|
|
label: "进行中",
|
|
value: 2
|
|
},
|
|
{
|
|
label: "未开始",
|
|
value: 1
|
|
},
|
|
{
|
|
label: "已结束",
|
|
value: 3
|
|
}
|
|
],
|
|
columns1: [
|
|
{
|
|
width: 60,
|
|
align: "center",
|
|
title: "序号",
|
|
render(h, params) {
|
|
let num = parseInt(params.index) + 1;
|
|
console.log(_this.pageSize);
|
|
if (_this.pageSize > 1) {
|
|
num += (_this.pageNum - 1) * _this.pageSize;
|
|
}
|
|
return h("span", num);
|
|
}
|
|
},
|
|
{
|
|
title: "活动名称",
|
|
key: "name"
|
|
},
|
|
{
|
|
title: "活动类型",
|
|
key: "scheduleVO.name",
|
|
render(h, params) {
|
|
return h("span", params.row["params"][0]["name"]);
|
|
}
|
|
},
|
|
{
|
|
title: "活动时间",
|
|
key: "beginTime",
|
|
width: 230,
|
|
render(h, params) {
|
|
return h("span", params.row.beginTime + " - " + params.row.endTime);
|
|
}
|
|
},
|
|
{
|
|
title: "零售公司",
|
|
key: "shop",
|
|
render(h, params) {
|
|
return h(
|
|
"span",
|
|
params.row.companyName +
|
|
"等" +
|
|
(params.row.companyCount || 0) +
|
|
"家公司"
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "店铺",
|
|
key: "shop",
|
|
render(h, params) {
|
|
return h(
|
|
"span",
|
|
params.row.storeName +
|
|
"等" +
|
|
(params.row.storeCount || 0) +
|
|
"家店铺"
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "添加好友数",
|
|
key: "addFriendNum",
|
|
render(h, params) {
|
|
return h("span", (params.row.friends || 0) + "人");
|
|
}
|
|
},
|
|
{
|
|
title: "参与活动客户数",
|
|
key: "joinActivityClientNum",
|
|
render(h, params) {
|
|
return h("span", (params.row.friends || 0) + "人");
|
|
}
|
|
},
|
|
{
|
|
title: "活动码",
|
|
key: "activityCode",
|
|
render(h, p) {
|
|
return h(
|
|
"Button",
|
|
{
|
|
props: { type: "primary", size: "small" },
|
|
on: { click: () => _this.navigateCode(p.row) }
|
|
},
|
|
"查看详情"
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "活动状态",
|
|
key: "status",
|
|
render(h, p) {
|
|
const status = p.row.status;
|
|
if (status === 1) return h("span", "未开始");
|
|
if (status === 2) return h("span", "进行中");
|
|
if (status === 3) return h("span", "已结束");
|
|
if (status === 4) return h("span", "取消");
|
|
}
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
width: 200,
|
|
render(h, p) {
|
|
let r = [
|
|
h(
|
|
"Button",
|
|
{
|
|
props: { type: "primary", size: "small" },
|
|
style: { marginRight: "8px" },
|
|
on: {
|
|
click: () => _this.stop(p.row)
|
|
}
|
|
},
|
|
"终止"
|
|
),
|
|
h(
|
|
"Button",
|
|
{
|
|
props: { type: "primary", size: "small" },
|
|
on: { click: () => _this.modify(p.row) }
|
|
},
|
|
"修改"
|
|
)
|
|
];
|
|
if (p.row.status > 2) {
|
|
delete r[0];
|
|
}
|
|
return h("div", r);
|
|
}
|
|
}
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
this.setMenuName("活动管理", "活动计划");
|
|
this.getCompanyInfo();
|
|
this.getShopInfo();
|
|
this.searchTable();
|
|
},
|
|
methods: {
|
|
doShow(show) {
|
|
this.showUse = show;
|
|
this.searchTable();
|
|
},
|
|
showDetail(detail) {
|
|
let _this = this;
|
|
this.getDetail(detail.id).then(res => {
|
|
_this.detail = res;
|
|
_this.isShowDetail = true;
|
|
});
|
|
},
|
|
getCompanyInfo() {
|
|
let that = this;
|
|
let data = {
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
|
|
};
|
|
ActivityManager.getCompany(data, function(data) {
|
|
that.companyList = [];
|
|
data.data.results.forEach(element => {
|
|
that.companyList.push({
|
|
label: element.name,
|
|
value: element.id
|
|
});
|
|
});
|
|
});
|
|
},
|
|
selectCompany(value) {
|
|
this.customerId = value;
|
|
this.getShopInfo();
|
|
},
|
|
getShopInfo() {
|
|
let that = this;
|
|
let data = {
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
|
|
customerIds: this.customerId,
|
|
scheduleId: null
|
|
};
|
|
ActivityManager.getShop(data, function(data) {
|
|
that.shopList = [];
|
|
data.data.results.forEach(element => {
|
|
that.shopList.push({
|
|
label: element.name,
|
|
value: element.id
|
|
});
|
|
});
|
|
});
|
|
},
|
|
handlePage: function(value) {
|
|
this.pageNum = value;
|
|
this.searchTable();
|
|
},
|
|
stop(instance) {
|
|
let _this = this;
|
|
this.$Modal.confirm({
|
|
title: "您确认要终止?",
|
|
content: "终止之后不可恢复",
|
|
onOk: () => {
|
|
this.saving = true;
|
|
ActivityManager.instanceTerminate(
|
|
{ instanceId: instance.id },
|
|
res => {
|
|
_this.saving = false;
|
|
if (res.data.success == undefined || !res.data.success) {
|
|
_this.$Message.error("终止失败!");
|
|
} else {
|
|
_this.searchTable();
|
|
}
|
|
}
|
|
);
|
|
},
|
|
onCancel: () => {}
|
|
});
|
|
},
|
|
getDetail(instanceId) {
|
|
return new Promise((resolve, reject) => {
|
|
ActivityManager.instanceDetail(
|
|
{
|
|
instanceId
|
|
},
|
|
res => {
|
|
resolve(res.data.results);
|
|
}
|
|
);
|
|
});
|
|
},
|
|
modify(instance) {
|
|
let _this = this;
|
|
this.getDetail(instance.id).then(res => {
|
|
store.commit("SET_useData", res);
|
|
_this.activityInstance = res;
|
|
_this.showUse = true;
|
|
});
|
|
},
|
|
navigateCode(instance) {
|
|
this.$router.push({
|
|
path: "/activity/plan/code",
|
|
query: { instanceId: instance.id }
|
|
});
|
|
},
|
|
searchTable(params = {}) {
|
|
debugger
|
|
this.loading = true;
|
|
if (this.formValidate.startDate !== "") {
|
|
this.formValidate.startDate = formatDate(this.formValidate.startDate);
|
|
} else {
|
|
this.formValidate.startDate = undefined;
|
|
}
|
|
if (!!this.formValidate.endDate) {
|
|
this.formValidate.endDate = formatDate(this.formValidate.endDate);
|
|
} else {
|
|
this.formValidate.endDate = undefined;
|
|
}
|
|
params.pageNum = this.pageNum;
|
|
params.pageSize = this.pageSize;
|
|
params = { ...params, ...this.formValidate };
|
|
params.userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
|
|
if (params.status == 0) {
|
|
params.status = undefined;
|
|
}
|
|
params.date = undefined;
|
|
http.get("/activity/instance/list", params).then(res => {
|
|
const data = res.data.results.this || {};
|
|
this.data = data.list || [];
|
|
this.totalSize = data.total || 0;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
startDateChange:function(e){
|
|
//设置开始时间
|
|
this.endDateOptions = {
|
|
disabledDate:date =>{
|
|
let startTime = this.formValidate.startDate ? new Date(this.formValidate.startDate).valueOf() : '';
|
|
return date && (date.valueOf() < startTime)
|
|
}
|
|
}
|
|
},
|
|
endDateChange:function(e){
|
|
//设置结束时间
|
|
let endTime = this.formValidate.endDate ? new Date( this.formValidate.endDate ).valueOf()-1*24*60*60*1000 :'';
|
|
this.startDateOptions = {
|
|
disabledDate:date =>{
|
|
return date && (date.valueOf() >endTime);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.ivu-date-picker .ivu-select-dropdown {
|
|
left: 0 !important;
|
|
}
|
|
</style>
|