bsdgy-front/src/pages/shop/IncreaseWelcomeList.vue

<template>
  <div>
    <Row :gutter="10"
         class="search-row">
      <i-col span="8">
        <i-input placeholder="请输入店铺名称或编码"
                 v-model="store" />
      </i-col>
      <i-col span="3">
        <Button type="primary"
                @click="search"
                class="search-btn">查询</Button></i-col>
      <i-col span="13"
             class="search-col">
        <Row class="row-style">
          <Button @click="handleEdit"
                  type="primary">配置欢迎语</Button>
        </Row>
      </i-col>
    </Row>
    <Table :columns="columns1"
           :data="data"
           :loading="loading"
           @on-cell-click="clickCell"
           style="margin-top: 20px;"
           size="small">
      <template slot-scope="{ row, index }"
                slot="action">
        <i-col span="12">
          <Button ghost
                  class="router-btn"
                  @click="() => {handleEdit(row, index)}">修改</Button>
        </i-col>
        <i-col span="12">
          <Button ghost
                  class="router-btn"
                  @click="() => {handleDelete(row, index)}">删除</Button>
        </i-col>
      </template>
    </Table>
    <Page :total="total"
          :current="pageNum"
          :page-size="pageSize"
          show-elevator
          show-total
          placement="top"
          @on-change="handlePage"
          class="ks-page"></Page>
    <Modal v-model="showDetail"
           title="配置范围"
           width="70%"
           :footer-hide="true">
      <welcomeDetail v-if="showDetail"
                     :detail="detail"></welcomeDetail>
    </Modal>
  </div>
</template>

<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import data from "../../utils/PhoneRegionData";
import http from "../../services/store/IncreaseStoreManager";

import staff from "../../services/staff/staff";
import welcomeDetail from "./WelcomeDetail";

export default {
  name: "IncreaseWelcomeList",
  inject: ["setMenuName"],
  components: { welcomeDetail },
  data () {
    let _this = this;
    return {
      loading: false,
      store: null,
      // 分页
      total: 0,
      pageSize: 10,
      showDetail: false,
      data: [],
      pageNum: 1,
      detail: {},
      columns1: [
        {
          width: 60,
          align: "center",
          title: "序号",
          render (h, params) {
            console.log(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: "scheduleVO.description",
          render (h, params) {
            return h("span", params.row.content);
          }
        },
        {
          title: "配置范围",
          key: "shop",
          render (h, params) {
            return h(
              "span",
              (params.row.companyCount || 0) +
              "家零售公司, " +
              (params.row.storeCount || 0) +
              "家店铺"
            );
          }
        },
        { title: "配置时间", key: "createTime" },
        { title: "修改时间", key: "updateTime" },
        { title: "操作", slot: "action" }
      ],
      formValidate: {}
    };
  },
  mounted () {
    this.setMenuName("门店推广", "欢迎语");
    this.handlePaginate();
  },
  methods: {
    clickCell (row, column, data, event) {
      if (column.key === "shop") {
        let _this = this;
        this.getDetail(row.id).then(res => {
          _this.detail = res;
          _this.showDetail = true;
        });
      }
    },
    getDetail (instanceId) {
      return new Promise((resolve, reject) => {
        ActivityManager.instanceDetail(
          {
            instanceId
          },
          res => {
            resolve(res.data.results);
          }
        );
      });
    },
    search () {
      this.pageNum = 1;
      this.handlePaginate();
    },
    // 分页刷新
    handlePaginate () {
      this.loading = true;
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
        categoryCode: "welcome",
        store: this.store
      };
      http.getWelcomeList(params, res => {
        const data = res.data.results.this || {};
        this.data = data.list || [];
        this.total = data.total || 0;
        this.loading = false;
      });
    },
    //切页处理
    handlePage: function (value) {
      this.pageNum = value;
      this.handlePaginate();
    },
    // 新增或修改
    handleEdit (row) {
      this.$router.push({
        path: "/shop/increase/welcome/edit",
        query: { id: row.id }
      });
    },
    // 删除
    handleDelete (row) {
      let _this = this;
      this.$Modal.confirm({
        title: "删除欢迎语",
        content: "您确定要删除该欢迎语?",
        onOk: () => {
          http.deleteWelcome({ id: row.scheduleId }).then(res => {
            if (_this.data.length <= 1) {
              if (_this.pageNum > 1) {
                _this.pageNum = _this.pageNum - 1;
              } else {
                _this.pageNum = 1;
              }
            }
            _this.handlePaginate()
          });
        },
        onCancel: () => { }
      });
    }
  }
};
</script>

<style scoped>
.router-btn {
  border: none;
  color: #3496eb !important;
  margin-left: -15px;
}
.table-img-qr-code {
  margin-left: 5px;
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
button:hover {
  /*background: inherit !important;*/
}
</style>