admin-frontend/src/views/Template/template/index.vue

<script lang="ts">
// 声明额外的选项
export default {
  name: "Template"
};
</script>
<script setup lang="ts">
import { provide, ref } from "vue";
import { useUser } from "./hook";
import { hasAuth } from "@/router/utils";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Add from "./components/add/index.vue"
import Edit from "./components/edit/index.vue"
import Search from "@iconify-icons/ep/search";
import All from "@iconify-icons/ep/refresh-left";
import Addicon from "@iconify-icons/ep/document-add";

const formRef = ref();
const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  onSearch,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleAdd,
  handleUpdate,
  handleDelete,
  addVisible,
  editVisible,
  editFormData,
  optionList,
} = useUser();
// 关闭修改
const closeEditVisible = () => {
  editVisible.value = false
}
provide('closeEditVisible', closeEditVisible)
// 关闭添加
const closeAddVisible = () => {
  addVisible.value = false
}
provide('closeAddVisible', closeAddVisible)
</script>

<template lang="pug">
.main
  div
    el-form.bg-bg_color.pl-8.pt-4.pr-8(
      label-position="left"
      label-width="100px"
      ref="formRef",
      :inline="true",
      :model="form",
      :rules="rules",
      class="w-[99/100]"
    )
      el-form-item(label="搜索内容框:", prop="searchMain")
        el-input(
          v-model="form.searchMain",
          placeholder="请输入搜索内容",
          clearable,
          class="!w-[230px]"
        )
      el-form-item(label="级联选择框:", prop="searchMain")
        el-cascader(
          v-model="form.searchMain" 
          :options="optionList" 
          class="!w-[230px]"
          clearable)
      el-form-item(label="时间选择器:", prop="searchMain")
        el-date-picker(
          v-model="form.searchMain"
          type="daterange"
          class="!w-[230px]"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        )
      el-form-item
        el-button(
          type="primary",
          :icon="useRenderIcon(Search)",
          :loading="loading",
          @click="onSearch()"
        ) 查询
      el-form-item
        el-button(
          type="primary",
          :icon="useRenderIcon(All)",
          :loading="loading",
          @click="onSearch('all')"
        ) 全部
    //- 表格组件
    PureTableBar(title="后台角色管理", @refresh="onSearch" )
      template(#buttons)
        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()") 新增
        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleUpdate(row)") 编辑
      template(v-slot="{ size, checkList }")
        pure-table(stripe 
          border,
          align-whole="center",
          table-layout="auto",
          :loading="loading",
          :size="size",
          :data="dataList",
          :columns="columns",
          :checkList="checkList",
          :pagination="pagination",
          :paginationSmall="size === 'default' ? true : false",
          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
          @selection-change="handleSelectionChange",
          @size-change="handleSizeChange",
          @current-change="handleCurrentChange"
        )          
          template(#operation="{ row }")
            .flex.flex-wrap.items-center
              el-dropdown(trigger="click", :hide-on-click="false")
                el-button(type="primary") 操作
                  el-icon.el-icon--right
                    arrow-down
                template(#dropdown)
                  el-dropdown-menu
                    el-dropdown-item
                      el-button.reset-margin(
                        link
                        type="primary"
                        :size="size"
                        @click="handleUpdate(row)"
                        :icon="useRenderIcon(EditPen)"
                        v-if="hasAuth(['edit'])"
                      ) 编辑
                    el-button.reset-margin(
                      link
                      type="primary"
                      :size="size"
                      @click="handleDelete(row)"
                      :icon="useRenderIcon(Delete)"
                      v-if="hasAuth(['delete'])"
                    ) 删除
    Add(:addVisible="addVisible")
    Edit(:editVisible="editVisible" :formData="editFormData")
                    
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-pagination) {
  flex-flow: wrap;
}

:deep(.is-draggable) {
  max-height: 80vh;
  overflow: auto;
}

:deep(.el-dialog__header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

:deep(.el-descriptions__header) {
  margin: 16px 0 !important;
}
</style>