bsdgy-front/src/pages/activity/ActivityPlan.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>