parking/src/views/backend/enterprise/coupons/couponstheme/index.vue

<template>
  <div class="default-main ba-table-box">
    <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
              show-icon />
    <el-row>
      <el-col :span="24">
        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch']"
                     quick-search-placeholder="通过标题模糊搜索"
                     @action="baTable.onTableHeaderAction" />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table @action="baTable.onTableAction" />

      </el-col>
    </el-row>

    <!-- 表单 -->
    <PopupForm ref="formRef" />
    <sendDialog ref="sendDialogRef"></sendDialog>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from "vue";
import { coupon } from "/@/api/controllerUrls";
import Table from "/@/components/table/index.vue";
import TableHeader from "/@/components/table/header/index.vue";
import { defaultOptButtons } from "/@/components/table";
import PopupForm from "./popupForm.vue";
import { baTableApi } from "/@/api/common";
import baTableClass from "/@/utils/baTable";
import _ from "lodash";
import { ElMessage } from "element-plus";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import sendDialog from "./sendDialog.vue"

//注销按钮
let cancelBtn: OptButton[] = [
  {
    render: "tipButton",
    name: "send",
    title: "派发",
    text: "",
    type: "primary",
    icon: "el-icon-Avatar",
    class: "",
    disabledTip: false
  }
];

let btn = defaultOptButtons(['edit','delete']);
btn = btn.concat(cancelBtn);

const tableRef = ref();
const baTable = new baTableClass(
  new baTableApi(coupon),
  {
    dblClickNotEditColumn: [undefined, "status"],
    column: [
      { type: "selection", align: "center", operator: false },
      { label: "优惠卷名称", prop: "couponName", align: "left", operator: "LIKE" },
      {
        label: "优惠券类型",
        prop: "couponType",
        align: "center",
        render: "tag",
        operator: "=",
        replaceValue: { 0: "抵扣券", 1: "折扣券", 2: "特价券" }
      },
      {
        label: "使用场景",
        prop: "sceneType",
        align: "center",
        render: "tag",
        operator: "=",
        replaceValue: { 0: "不限定", 1: "首页投放", 2: "商家派发", 3: "营销活动" }
      },
      {
        label: "限定使用",
        prop: "limitedUse",
        align: "center",
        render: "tag",
        operator: "=",
        replaceValue: { 0: "否", 1: "是" }
      },
      { label: "发行数量", prop: "issuesNumber", align: "center", operator: "LIKE" },
      {
        label: "状态",
        prop: "couponStatus",
        align: "center",
        render: "tag",
        operator: "=",
        custom: { 0: "success", 1: "info" },
        replaceValue: { 0: "可用", 1: "停用" }
      },
      { label: "创建人", prop: "creatorName", align: "center", width: "120", operator: false },
      { label: "创建时间", prop: "createTime", align: "center", width: "180", operator: false },
      {
        label: "操作",
        align: "center",
        width: "160",
        render: "buttons",
        buttons: btn,
        operator: false
      }
    ]
  },
  {
    defaultItems: {}
  },
  {
    // 获得编辑数据后
    requestEdit: () => {
      if (baTable.form.items && !baTable.form.items.icon) baTable.form.items.icon = "el-icon-Minus";
    }
  }
);

provide("baTable", baTable);

onMounted(() => {
  baTable.mount();
  baTable.getIndex();

  const { proxy } = useCurrentInstance();
  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on("onTableButtonClick", (data: { name: string; row: TableRow }) => {
    if (!baTable.activate) return;
    if (data.name == "send") {
      newButtonClick(data.row);
    }
  });
});

let sendDialogRef = ref();

/** 点击按钮事件 */
const newButtonClick = (row: TableRow) => {
  if (!row) {
    return;
  } else if (row.couponStatus == 1) {
    ElMessage({ type: "error", message: "该消费卷已停用！" ,grouping:true});
    return;
  }
// 数据来自表格数据,未重新请求api,深克隆,不然可能会影响表格
  let rowClone = _.cloneDeep(row);

  sendDialogRef.value.open(rowClone);
};
</script>


<style scoped lang="scss"></style>