更新

src/api/modules/room.ts

@@ -280,3 +280,18 @@ export const queryLockRecord = params => {
     { params }
   );
 };
+// 获取房间红包列表
+export const queryRedEnvelopeList = params => {
+  return http.request<Result>(
+    "get",
+    "/adminapi/Room/room_redpacket_list",
+    { params }
+  );
+};
+export const getRedEnvelopeDetail = params => {
+  return http.request<Result>(
+    "get",
+    "/adminapi/Room/room_redpacket_detail",
+    { params }
+  );
+};

src/views/room/RedEnvelope/form.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const props = defineProps(["rowData"]);
+const detailData = ref({ record_lists: [] })
+console.log(props.rowData)
+detailData.value = { ...props.rowData }
+</script>
+
+<template>
+  <div>
+    <el-table :data="detailData.record_lists" border style="width: 100%">
+      <el-table-column prop="user_code" label="领取用户ID">
+      </el-table-column>
+      <el-table-column prop="nickname" label="领取用户昵称">
+      </el-table-column>
+      <el-table-column prop="createtime_text" label="抢红包时间">
+      </el-table-column>
+      <el-table-column prop="amount" label="获得金额">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>

src/views/room/RedEnvelope/hook.tsx

@@ -0,0 +1,229 @@
+import { ref, h, nextTick } from "vue";
+import editForm from "./form.vue";
+import { message } from "@/utils/message";
+import { utils, writeFile } from "xlsx";
+import {
+  queryRedEnvelopeList,
+  getRedEnvelopeDetail
+} from "@/api/modules/room";
+import ExportForm from '@/components/exportDialog/index.vue';
+import { addDialog } from "@/components/ReDialog";
+export function useData() {
+  const formRef = ref();
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const searchForm = ref({
+    room_id: "",
+    status: "",
+    stime: "",
+    etime: ""
+  });
+  // //状态:0=未开始,1=进行中,2=已结束,3=已退回',
+  const searchLabel = ref([
+    { label: "房间ID", prop: "room_id", type: "input" },
+    {
+      label: "红包状态", prop: "status", type: "select",
+      optionList: [
+        { label: "未开始", value: 0 },
+        { label: "进行中", value: 1 },
+        { label: "已结束", value: 2 },
+        { label: "已退回", value: 3 }
+      ]
+    },
+    { label: "开始时间", prop: "stime", type: "date" },
+    { label: "结束时间", prop: "etime", type: "date" }
+  ]);
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "房间ID",
+      prop: "room_id"
+    },
+    {
+      label: "房间名字",
+      prop: "room_name"
+    },
+    {
+      label: "发放人ID",
+      prop: "user_code"
+    },
+    {
+      label: "发放人昵称",
+      prop: "nickname"
+    },
+    {
+      label: "红包类型",
+      prop: "type_text"
+    },
+    {
+      label: "口令",
+      prop: "password"
+    },
+    {
+      label: "多少秒后开抢",
+      prop: "countdown"
+    },
+    {
+      label: "币种",
+      prop: "coin_type_text"
+    },
+    {
+      label: "总金额",
+      prop: "total_amount"
+    },
+    {
+      label: "总数量",
+      prop: "total_count"
+    },
+    {
+      label: "剩余金额",
+      prop: "left_amount"
+    },
+    {
+      label: "剩余数量",
+      prop: "left_count"
+    },
+    {
+      label: "状态",
+      prop: "status_text"
+    },
+    {
+      label: "红包备注",
+      prop: "remark"
+    },
+    {
+      label: "创建时间",
+      prop: "createtime"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ]);
+  const onSearch = async (formData) => {
+    loading.value = true;
+    searchForm.value = { ...formData }
+    const { data, code } = await queryRedEnvelopeList({
+      ...formData,
+      page: pagination.value.currentPage,
+      page_limit: pagination.value.pageSize
+    });
+    if (code) {
+      tableList.value = data.lists;
+      pagination.value.total = data.count;
+      pagination.value.currentPage = data.page;
+    }
+    loading.value = false;
+  };
+  const handleSizeChange = (val: number) => {
+    pagination.value.pageSize = val;
+    onSearch(searchForm.value);
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch(searchForm.value);
+  };
+  // 
+  const openDialog = async (title = "审核", rowData: any) => {
+    const { code, data } = await getRedEnvelopeDetail({ redpacket_id: rowData.id })
+    if (!code) return
+    nextTick(() => {
+      addDialog({
+        title: `${title}`,
+        props: {
+          rowData: data
+        },
+        width: "40%",
+        hideFooter: true,
+        closeOnClickModal: false,
+        contentRenderer: () => h(editForm, { ref: formRef, formInline: null })
+      });
+    })
+
+  };
+  const exportFormRef = ref(null)
+  const exportExcel = () => {
+    let exportTableList = []
+    addDialog({
+      title: `导出数据`,
+      props: {
+        formInline: {
+          time: ''
+        }
+      },
+      width: "40%",
+      closeOnClickModal: false,
+      contentRenderer: () => h(ExportForm, { ref: exportFormRef, formInline: null }),
+      beforeSure: (done, { options }) => {
+        const FormRef = exportFormRef.value.getRef();
+        const curData = options.props.formInline;
+        const exportData = async (formData) => {
+          const { data, code } = await queryRedEnvelopeList({
+            stime: formData.search_status_time,
+            etime: formData.search_end_time,
+            page: 1,
+            page_limit: 20000
+          });
+          if (code) {
+            exportTableList = data.lists;
+            const res = exportTableList.map(item => {
+              const arr = [];
+              tableLabel.value.forEach(column => {
+                arr.push(item[column.prop as string]);
+              });
+              return arr;
+            });
+            const titleList = [];
+            tableLabel.value.forEach(column => {
+              titleList.push(column.label);
+            });
+            res.unshift(titleList);
+            const workSheet = utils.aoa_to_sheet(res);
+            const workBook = utils.book_new();
+            utils.book_append_sheet(workBook, workSheet, "数据报表");
+            writeFile(workBook, `房间红包发放统计${formData.search_status_time} - ${formData.search_end_time}.xlsx`);
+            message("导出成功", {
+              type: "success"
+            });
+            done()
+          } else {
+            message("获取数据失败，请重试！", {
+              type: "error"
+            });
+          }
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            if (curData.time && curData.time.length) {
+              exportData({ search_status_time: curData.time[0] || '', search_end_time: curData.time[1] || '' })
+            }
+          }
+        });
+      }
+    });
+
+  }
+  return {
+    searchForm,
+    searchLabel,
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading,
+    openDialog,
+    exportExcel
+  };
+}

src/views/room/RedEnvelope/index.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./hook";
+import SearchForm from "@/components/SearchForm/index.vue";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { deviceDetection } from "@pureadmin/utils";
+const {
+  searchLabel,
+  searchForm,
+  onSearch,
+  isShow,
+  exportExcel,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  loading,
+  openDialog,
+} = useData();
+defineOptions({
+  name: "roomSubsidy"
+});
+onMounted(() => {
+  onSearch(searchForm.value);
+});
+</script>
+
+
+<template>
+  <div class="main">
+    <SearchForm class="pb-2" :LabelList="searchLabel" :formData="searchForm" @handleSearch="onSearch" />
+    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
+      <PureTableBar title="房间红包发放" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
+        :columns="tableLabel" @refresh="onSearch">
+        <template #buttons>
+          <el-button type="primary" @click="exportExcel">导出</el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all
+            :loading="loading" :size="size" row-key="id" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
+            :data="tableList" :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
+              background: 'var(--el-fill-color-light)',
+              color: 'var(--el-text-color-primary)'
+            }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
+
+            <template #operation="{ row }">
+              <el-button v-if="!row.status" link type="primary" :size="size" @click="openDialog('查看领取详情', row)">
+                查看领取详情
+              </el-button>
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>