goelia-ai-admin/src/views/oms/promotion/amountOffProducts/index copy.vue

<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <div class="filter-container">
          <el-input
            :placeholder="$t('label.promotionName')"
            style="width: 200px;"
            clearable
            class="filter-item"
            v-model="listQuery.promotionName"
            @keyup.enter.native="retPage"
          />
          <el-input
            :placeholder="$t('label.minimumPurchaseRequirement')"
            style="width: 200px;"
            clearable
            class="filter-item"
            v-model="listQuery.minimumPurchaseRequirement"
            @keyup.enter.native="retPage"
          />
          <el-select
            v-model="listQuery.applicationMethod"
            clearable
            class="filter-item"
            style="width: 200px;"
            :placeholder="$t('label.applicationMethod')"
            @keyup.enter.native="retPage"
          >
            <el-option
              :key="index"
              v-for="(item, index) in storeList"
              :label="item.storeName"
              :value="item.storeId"
            />
          </el-select>
          <el-button
            v-waves
            v-has="'promotion:list'"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="retPage"
            >{{ $t("view.search") }}
          </el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :key="tableKey"
          :data="list"
          stripe
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column type="index" width="40"></el-table-column>

          <el-table-column
            :label="$t('label.promotionEventName')"
            width="220"
            show-overflow-tooltip
          >
            <template v-slot="{ row }">
              <span>{{ row.promotionName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.promotionId')"
            align="center"
            width="220"
            show-overflow-tooltip
          >
            <template v-slot="{ row }">
              <span>{{ row.promotionInfo }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.participateType')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{
                $t("label.participateTypeArr").find(
                  item => item.value === row.participateType
                )
                  ? $t("label.participateTypeArr").find(
                      item => item.value === row.participateType
                    ).label
                  : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.promotionLevel')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{ row.promotionStartTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.applicationMethod')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{ row.participateNum }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.minimumPurchaseRequirement')"
            align="center"
            width="160"
          >
            <template v-slot="{ row }">
              <span>{{ row.participateWeight }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('label.discountValue')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{
                $t("label.conditionTypeArr").find(
                  item => item.value === row.conditionType
                )
                  ? $t("label.conditionTypeArr").find(
                      item => item.value === row.conditionType
                    ).label
                  : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.priority')"
            align="center"
            width="120"
          >
            <template v-slot="{ row }">
              <span>{{ row.participateWeight }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.stackableType')"
            align="center"
            width="150"
          >
            <template v-slot="{ row }">
              <span>{{ row.participateWeight }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.promotionStartTime')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{ row.promotionStartTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.promotionEndTime')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{ row.promotionEndTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.version')"
            align="center"
            width="120"
          >
            <template v-slot="{ row }">
              <span>{{ row.participateWeight }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.operation')"
            min-width="180"
            align="center"
            fixed="right"
          >
            <template v-slot="{ row }">
              <!-- <el-tooltip
                class="item"
                effect="dark"
                :content="$t('view.edit')"
                placement="top-start"
              >
                <el-button
                  v-has="'promotion:update'"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  circle
                  @click="showDialog(row.id, false)"
                >
                </el-button>
              </el-tooltip> -->

              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('view.details')"
                placement="top-start"
              >
                <el-button
                  v-has="'promotion:list'"
                  type="primary"
                  size="mini"
                  icon="el-icon-more"
                  circle
                  @click="showDialog(row.id, true)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('view.delete')"
                placement="top-start"
              >
                <el-button
                  v-has="'promotion:delete'"
                  type="danger"
                  circle
                  size="mini"
                  icon="el-icon-delete"
                  @click="handleDelete(row.id)"
                >
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('label.version')"
                placement="top-start"
              >
                <el-button
                  v-has="'promotion:status'"
                  type="primary"
                  circle
                  size="mini"
                  icon="el-icon-notebook-1"
                  @click="handleLog(row.id)"
                >
                </el-button>
              </el-tooltip>
              <!-- <el-tooltip
                class="item"
                effect="dark"
                :content="$t('title.operationLog')"
                placement="top-start"
              >
                <el-button
                  v-has="'promotionLog:list'"
                  type="primary"
                  circle
                  size="mini"
                  icon="el-icon-notebook-1"
                  @click="handleLog(row.id)"
                >
                </el-button>
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <swPage
          v-if="total > 0"
          key="2"
          :listQuery="listQuery"
          :total="total"
          pos="btmRight"
          @retPage="getList"
        />
      </el-main>
    </el-container>

    <promotion-form ref="promotionFormRef" @refresh-table="getList" />
    <promotion-log-list ref="logListRef" @show="id => showDialog(id, true)" />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import SwPage from "@/views/common/swPage.vue";
import ElContainer from "element-ui/packages/container/src/main";
import PromotionForm from "@/views/oms/promotion/amountOffProducts/promotionForm.vue";
import PromotionLogList from "@/views/oms/promotion/amountOffProducts/promotionLogList.vue";
import {
  fetchList,
  deleteById,
  storeList,
  checkPromotion,
  changeStatus
} from "@/api/oms/order/promotion";
import { getToken } from "@/utils/auth";

export default {
  inject: ["reload"], //刷新
  components: {
    SwPage,
    ElContainer,
    PromotionForm,
    PromotionLogList
  },
  name: "multiBuyDiscount",
  directives: {
    waves
  },
  data() {
    return {
      activeName: "productIndex",
      iconSize: "mini",
      //右侧列表
      tableKey: 0,
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        applicationMethod: null,
        promotionName: null,
        minimumPurchaseRequirement: null,
        page: 1,
        limit: 10
      },
      storeList: []
    };
  },
  created() {
    this.getList();
    this.getStoreList();
  },
  computed: {
    headers: function() {
      return { "X-Token": getToken() };
    }
  },
  methods: {
    getStoreList() {
      storeList().then(res => {
        if (res.code === 200) {
          this.storeList = res.data;
        }
      });
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery)
        .then(response => {
          if (response.code === 200) {
            this.list = response.data.list;
            this.total = response.data.total;
            setTimeout(() => {
              this.listLoading = false;
            }, 0.5 * 1000);
          }
        })
        .catch(() => {
          setTimeout(() => {
            this.listLoading = false;
          }, 0.5 * 1000);
        });
    },
    retPage() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleDelete(id) {
      this.$confirm("是否删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteById(id).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getList();
          }
        });
      });
    },
    showDialog(id, edit) {
      this.$refs.promotionFormRef.showDialog(id, edit);
    },
    handleDetail(id) {
      console.log(id, "detail");
    },
    // changePromotionStatus(id, status) {
    //   this.$confirm(status ? "是否确认禁用?" : "是否确认启用?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(() => {
    //     changeStatus(id).then(res => {
    //       if (res.code === 200) {
    //         this.$message({
    //           message: "操作成功",
    //           type: "success"
    //         });
    //         this.getList();
    //       }
    //     });
    //   });
    // },
    handleLog(id) {
      this.$refs.logListRef.handleOpen(id);
    }
  }
};
</script>

<style scoped></style>