bsdgy-front/src/pages/activity/ActivityPlan.vue

<template>
  <div>
    <Form ref="formValidate" :model="formValidate" :label-width="80">
      <Row>
        <i-col span="6">
          <FormItem label="零售公司" prop="">
            <Select
              v-model="formValidate.organizationId"
              filterable
              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="7">
          <FormItem label="选择日期" prop="">
            <Date-picker
              v-model="formValidate.date"
              type="daterange"
              placement="bottom-end"
              placeholder="选择日期区间"
            ></Date-picker>
          </FormItem>
        </i-col>
        <i-col span="1">
          <Button type="primary" @click="searchTable">查询</Button>
        </i-col>
      </Row>
      <Row style="margin-top:50px">
        <Table border :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 @dispalyuseModal="dispalyuseModal" :useModal="useModal" :id="id"></useTable>-->
  </div>
</template>

<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import useTable from "./useTable";
import http from "../../services/CommonHttp";
import { formatDate } from "../../utils/Common";

export default {
  name: "ActivityPlan",
  inject: ["setMenuName"],
  components: {
    useTable,
  },
  data() {
    return {
      totalSize: 0,
      pageNum: 1,
      pageSize: 10,
      data: [],
      companyList: [],
      shopList: [],
      formValidate: {
        date: null,
        organizationId: null,
        storeId: null,
        status: 0,
      },
      activityData: [
        {
          activityStatus: "进行中",
        },
        {
          activityStatus: "已结束",
        },
      ],
      activityStatusList: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "进行中",
          value: 2,
        },
        {
          label: "未开始",
          value: 1,
        },
        {
          label: "已结束",
          value: 3,
        },
      ],
      columns1: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "活动名称",
          key: "name",
        },
        {
          title: "活动类型",
          key: "scheduleVO.name",
          render(h, params) {
            return h("span", params.row["scheduleVO"]["name"]);
          },
        },
        {
          title: "活动开始时间",
          key: "beginTime",
        },
        {
          title: "活动结束时间",
          key: "endTime",
        },
        // {
        //     title: '零售公司',
        //     key: 'company'
        // },
        {
          title: "店铺",
          key: "shop",
          render(h, params) {
            return h("span", (params.row.stores.length || 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) {
            return h(
              "Button",
              { props: { type: "primary", size: "small" } },
              "查看详情"
            );
          },
        },
        {
          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: {
    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,
          });
        });
      });
    },
    getShopInfo() {
      let that = this;
      let data = {
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
      };
      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();
    },
    searchTable(params = {}) {
      console.log(this.formValidate.date);
      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 };
      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;
      });
    },
  },
};
</script>

<style scoped></style>