FranklinWH-Toolbox/src/views/xlog/manage.vue

<template>
  <div class="main-wrap flex flex-col gap-y-2 p-4">
    <NCard>
      <div class="mb-2 flex gap-x-4">
        <NForm ref="formRef" :model="form" inline label-placement="left">
          <NFormItem label="SN" path="sn">
            <NInput v-model:value="form.sn" style="width: 250px" clearable />
          </NFormItem>
          <NFormItem label="UUID" path="uuid">
            <NInput v-model:value="form.uuid" style="width: 250px" clearable />
          </NFormItem>
        </NForm>
        <div class="flex gap-2">
          <NButton disabled type="success" @click="createXlogConnect()">
            <template #icon>
              <span class="i-ph:plus-circle" />
            </template>
            新增xlog
          </NButton>
          <NButton type="info" @click="handleQueryClick" :loading="isRequestLoading" :disabled="isRequestLoading">
            <template #icon>
              <span class="i-ph:magnifying-glass" />
            </template>
            查询
          </NButton>
          <NButton type="warning" @click="resetForm">
            <template #icon>
              <span class="i-ph:arrow-clockwise" />
            </template>
            重置
          </NButton>
        </div>
      </div>
      <div>
        <NDataTable ref="dataTableRef" v-model:checked-row-keys="checkedRowKeys" :remote="true" :min-height="166.6"
          :max-height="maxHeight" size="small" :columns="tableColumns" :data="tableData" :row-key="tableRowKey"
          :loading="isRequestLoading" striped :single-line="false" :row-props="rowProps" />
        <div class="mt-3 flex items-end justify-between">
          <div class="flex items-center gap-x-3">
            <span>已选择&nbsp;{{ checkedRowKeys.length }}&nbsp; 条</span>
          </div>
          <NPagination v-bind="tablePagination" :prefix="paginationPrefix" />
        </div>
      </div>
    </NCard>
    <NDropdown placement="bottom-start" trigger="manual" v-bind="dropdownOptions" :show="showDropdown" />
  </div>
</template>

<script setup lang="tsx">
import { h } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NDataTable, NForm, NNumberAnimation } from 'naive-ui'
import type { DataTableColumns, PaginationProps, DropdownProps } from 'naive-ui'
import type { XlogSiteItemInfo } from '@/service/xlog/interface'
import { getManageList } from '@/service/xlog'

import { useDataTable } from '@/composable/comp/useDataTable'
import { useResettableReactive } from '@/composable/useResettable'

const router = useRouter()

const formRef = useTemplateRef<InstanceType<typeof NForm>>('formRef')
const dataTableRef = useTemplateRef<InstanceType<typeof NDataTable>>('dataTableRef')
const { maxHeight } = useDataTable(dataTableRef)

const isRequestLoading = ref(false)
const showDropdown = ref(false)
const checkedRowKeys = ref<Array<number | string>>([])
const contextmenuUUID = ref<string | undefined>(undefined)

interface XlogSiteFilterForm extends Partial<XlogSiteItemInfo> { }

const [form, , resetForm] = useResettableReactive<XlogSiteFilterForm>({
  sn: '',
  uuid: '',
})

const handleQueryClick = () => {
  // 请求查询数据
  handleListQuery()
}

const prevUserListTotal = ref(0)

const paginationPrefix: PaginationProps['prefix'] = (info) => {
  const { itemCount } = info
  return (
    itemCount && (
      <div>
        <span>总&nbsp; </span>
        < NNumberAnimation
          from={prevUserListTotal.value}
          to={itemCount}
          onFinish={() => {
            prevUserListTotal.value = itemCount
          }}
        />
        <span>&nbsp;条 </span>
      </div>
    )
  )
}

const dropdownOptions = reactive<DropdownProps>({
  x: 0,
  y: 0,
  options: [
    {
      label: () => <span class='text-green-500'> 查看 </span>,
      key: 'view',
    },
  ],
  onClickoutside: () => {
    showDropdown.value = false
  },
  onSelect: (key: string) => {
    showDropdown.value = false
    if (contextmenuUUID.value === undefined) return
    if (key === 'view') {
      itemView(contextmenuUUID.value, "")
    }
  },
})

const createXlogConnect = () => {
  // TODO 创建xlog连接
}

const tableRowKey = (rowData: XlogSiteItemInfo) => {
  return rowData.sn
}

function createColumns(): DataTableColumns<XlogSiteItemInfo> {
  return [
    {
      type: 'selection',
      fixed: 'left'
    },
    {
      title: 'SN',
      key: 'sn',
      width: 200,
    },
    {
      title: 'UUID',
      key: 'uuid',
    },
    {
      title: '操作',
      key: 'operate',
      width: 80,
      fixed: 'right',
      render(row) {
        return h('div', { class: 'flex justify-center gap-4 p-x-4' }, [
          h(NButton, {
            type: "success",
            strong: true,
            size: 'small',
            onClick: () => itemView(row.uuid, "")
          }, {
            default: () => '查看'
          })
        ])
      }
    }
  ]
}

// 表格右键菜单
function rowProps(row: XlogSiteItemInfo) {
  return {
    onContextmenu: (e: MouseEvent) => {
      e.preventDefault()
      showDropdown.value = false
      nextTick().then(() => {
        contextmenuUUID.value = row.uuid
        showDropdown.value = true
        dropdownOptions.x = e.clientX
        dropdownOptions.y = e.clientY
      })
    },
  }
}

const tableData = ref<XlogSiteItemInfo[]>([])
const tableColumns = createColumns()
const tablePagination = reactive<PaginationProps>({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100],
  itemCount: 0,
  showQuickJumper: true,
  showQuickJumpDropdown: true,
  onUpdatePage: (page: number) => {
    tablePagination.page = page
    handleListQuery()
  },
  onUpdatePageSize: (pageSize: number) => {
    tablePagination.pageSize = pageSize
    tablePagination.page = 1
    handleListQuery()
  },
})

const itemView = (uuid: string, sn: string) => {
  router.push({
    path: `/xlog-terminal/${uuid}`,
    query: { sn },
  })
}

interface XlogSiteListFilter {
  sn?: string
  uuid?: string
}

const queryXlogSiteList = async (pageSize: number, pageNum: number, filter?: XlogSiteListFilter) => {
  const siteList = await getManageList(pageSize, pageNum, filter)
  tableData.value = siteList.data
  tablePagination.itemCount = siteList.total
}

const handleListQuery = () => {
  const pageSize = tablePagination.pageSize ?? 10
  const page = tablePagination.page ?? 1

  // 处理过滤条件
  const filter = {
    sn: form.sn,
    uuid: form.uuid
  }

  queryXlogSiteList(pageSize, page, filter)
}

onMounted(() => {
  handleListQuery()
})

</script>