yusheng-admin/src/views/gift/giftClassif/index.vue

<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";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
const {
  searchLabel,
  searchForm,
  onSearch,
  isShow,
  tableList,
  pagination,
  tableLabel,
  handleSizeChange,
  handleCurrentChange,
  handleDelete,
  loading,
  openDialog
} = useData();
defineOptions({
  name: "roomType"
});
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" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
            新增礼物标签
          </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 link type="primary" :size="size" @click="openDialog('编辑', row)">
                编辑
              </el-button>
              <el-popconfirm :title="`是否确认删除标签名称为${row.name}的这条数据`" @confirm="handleDelete(row)">
                <template #reference>
                  <el-button link type="primary" :size="size"> 删除 </el-button>
                </template>
              </el-popconfirm>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>