bunny-admin-element-thin-i18n/src/views/monitor/test/index.vue

<template>
  <TablePlusBar
    :column="columns"
    :data-list="dataList"
    :form="form"
    :handle-current-change="handleCurrentChange"
    :handle-selection-change="handleSelectionChange"
    :handle-size-change="handleSizeChange"
    :loading="loading"
    :onReFresh="onReFresh"
    :pagination="pagination"
    row-key="id"
    tableTitle="系统测试（仅演示，操作后不生效）"
    @changeColumn="handleChangeColumn"
    @cell-dblclick="handleCellDblclick"
  >
    <template #tableForm>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" class="!w-[150px]" clearable placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="登录状态" prop="status">
        <el-select v-model="form.status" class="!w-[150px]" clearable placeholder="请选择">
          <el-option label="成功" value="1" />
          <el-option label="失败" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="登录时间" prop="loginTime">
        <el-date-picker v-model="form.loginTime" :shortcuts="getPickerShortcuts()" end-placeholder="结束日期时间" range-separator="至" start-placeholder="开始日期时间" type="datetimerange" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="useRenderIcon('ri:search-line')" :loading="loading" type="primary" @click="onSearch"> 搜索 </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> 重置</el-button>
      </el-form-item>
    </template>

    <template #tableButtons>
      <el-button type="danger">按钮</el-button>
    </template>

    <template #tableSelect>
      <div v-if="selectedNum > 0" v-motion-fade class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center">
        <div class="flex-auto">
          <span class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]" style="font-size: var(--el-font-size-base)"> 已选 {{ selectedNum }} 项 </span>
          <el-button text type="primary" @click="onSelectionCancel"> 取消选择</el-button>
        </div>
        <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
          <template #reference>
            <el-button class="mr-1" text type="danger"> 批量删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </template>

    <template #operation> 111</template>
  </TablePlusBar>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { PaginationProps } from "@pureadmin/table";
import TablePlusBar from "@/components/TableBar/src/TablePlusBar.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import { getPickerShortcuts } from "@/views/monitor/utils";
import { delay } from "@pureadmin/utils";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const loading = ref(true);
const form = reactive({});
const selectedNum = ref(0);
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
});
let columns = ref([
  { label: t("table.tableNumber"), prop: "id", minWidth: 60 },
  { label: "用户名", prop: "username", minWidth: 100 },
  { label: "登录 IP", prop: "ip", minWidth: 140 },
  { label: "登录地点", prop: "address", minWidth: 140 },
  { label: "操作系统", prop: "system", minWidth: 100 },
  { label: "浏览器类型", prop: "browser", minWidth: 100 },
  { label: "登录时间", prop: "loginTime", minWidth: 180 },
  { label: "操作", fixed: "right", slot: "operation" }
]);

const dataList = [
  {
    id: 1,
    username: "admin",
    ip: "163.108.28.226",
    address: "中国河南省信阳市",
    system: "macOS",
    browser: "Chrome",
    loginTime: "2024-05-12T07:33:12.080Z"
  },
  {
    id: 2,
    username: "common",
    ip: "106.62.252.181",
    address: "中国广东省深圳市",
    system: "Windows",
    browser: "Firefox",
    loginTime: "2024-05-12T07:33:12.080Z"
  }
];

const onSearch = () => {
  console.log(form);
  console.log("搜索。。。");
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  onSearch();
};

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}

function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}

function onReFresh() {
  loading.value = true;
  delay(500).then(() => (loading.value = false));
}

function handleChangeColumn(value: Object[]) {
  columns.value = value;
}

const onSelectionCancel = () => {};

const onbatchDel = () => {};
const handleCellDblclick = val => {
  console.log(val);
};
onMounted(() => {
  setTimeout(() => (loading.value = false), 1000);
});
</script>