platform_agency/src/views/promotion/channel.vue

<template>
  <div>
    <div class="card table-search">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-button type="primary" :icon="CirclePlus" @click="handleCreate">新建推广渠道</el-button>
        </el-col>
        <el-col :span="8" class="text-right">
          <div class="flex">
            <el-input v-model="query.key" placeholder="输入推广者名称搜索关键词搜索" clearable></el-input>
            <el-button class="ml-2" type="primary" plain :icon="Search" @click="onSearch">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card mt-4">
      <el-table :data="state.list" style="width: 100%">
        <el-table-column prop="name" label="推广渠道名称"> </el-table-column>
        <el-table-column prop="remark" label="备注信息"> </el-table-column>
        <el-table-column prop="name" label="操作" width="width">
          <template #default="{ row }">
            <el-button type="primary" :icon="Grid" @click="handleViewCode(row)" link>推广码</el-button>
            <el-button type="primary" :icon="Edit" link @click="handleEdit(row)">编辑</el-button>

            <el-popconfirm
              title="确定要删除这个推广渠道吗?删除后，该推广渠道的所有推广链接将失效，已推广订单不会受到影响"
              @confirm="handleDelete(row)"
              width="330px"
            >
              <template #reference>
                <el-button type="danger" :icon="Delete" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-5">
        <Pagination
          :pageable="{
            ...query,
            total: state.total
          }"
          :handle-size-change="handleSizeChange"
          :handle-current-change="handleCurrentChange"
        ></Pagination>
      </div>
    </div>
    <DialogEditPromotionChannel
      v-model:show="state.visible"
      @success="getList"
      :row-data="{ ...state.rowData }"
    ></DialogEditPromotionChannel>

    <DialogPromotionCode
      v-model:show="state.visibleCode"
      @success="getList"
      :row-data="{ ...state.rowData }"
    ></DialogPromotionCode>
  </div>
</template>
<script setup lang="tsx" name="promotionChannel">
import { onMounted, reactive } from "vue";
import { CirclePlus, Search, Edit, Delete, Grid } from "@element-plus/icons-vue";
import { promotionSitePaginate, promotionSiteDelete } from "@/api/modules/promotion";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import DialogEditPromotionChannel from "./components/DialogEditPromotionChannel.vue";
import DialogPromotionCode from "./components/DialogPromotionCode.vue";
import { ElMessage } from "element-plus";
const query = reactive({
  page: 1,
  pageSize: 10,
  key: ""
});
const state = reactive({
  list: [],
  total: 0,
  visible: false,
  visibleCode: false,
  rowData: {}
});

const onSearch = () => {
  query.page = 1;
  getList();
};
const getList = async () => {
  let { data } = await promotionSitePaginate(query);
  state.list = data.list;
  state.total = data.total;
};
const handleSizeChange = (val: number) => {
  query.pageSize = val;
  getList();
};
const handleCurrentChange = (val: number) => {
  query.page = val;
  getList();
};
const handleEdit = (row: any) => {
  state.visible = true;
  state.rowData = row;
};
const handleCreate = () => {
  state.visible = true;
  state.rowData = {};
};
const handleDelete = async (row: any) => {
  let { message } = await promotionSiteDelete({ id: row.id });
  ElMessage.success(message);
  getList();
};
const handleViewCode = (row: any) => {
  state.visibleCode = true;
  state.rowData = row;
};
onMounted(() => {
  getList();
});
</script>