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.date"
                         type="daterange"
                         placement="bottom-end"
                         placeholder="选择日期区间"></Date-picker>
          </FormItem>
        </i-col>
        <i-col span="6">
          <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="4">
          <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="4">
          <Button type="primary"
                  @click="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,
      },
      activityData: [
        {
          activityStatus: "进行中",
        },
        {
          activityStatus: "已结束",
        },
      ],
      activityStatusList: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "进行中",
          value: 2,
        },
        {
          label: "未开始",
          value: 1,
        },
        {
          label: "已结束",
          value: 3,
        },
      ],
      columns1: [
        {
          type: "index",
          width: 60,
          align: "center",
          title: "序号",
        },
        {
          title: "活动名称",
          key: "name",
        },
        {
          title: "活动类型",
          key: "scheduleVO.name",
          render (h, params) {
            return h("span", params.row["params"][0]["defaultVal"]);
          },
        },
        {
          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) {
            return h("div", [
              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) },
                },
                "修改"
              ),
            ]);
          },
        },
      ],
    };
  },
  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,
      };
      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 = {}) {
      this.loading = true;
      if (
        this.formValidate.date !== null &&
        this.formValidate.date.length > 0
      ) {
        if (this.formValidate.date[0] !== "") {
          this.formValidate.startDate = formatDate(this.formValidate.date[0]);
        } else {
          this.formValidate.startDate = undefined;
        }
        if (this.formValidate.date[1] !== "") {
          this.formValidate.endDate = formatDate(this.formValidate.date[1]);
        } 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;
      });
    },
  },
};
</script>

<style>
.ivu-date-picker .ivu-select-dropdown {
  left: 0 !important;
}
</style>