web/src/views/system/config-manage/device-manage/index.vue

<template>
  <div class="registration-query flex flex-col h-full">
    <div class="flex-1 page-wrap">
      <div class="btn-group">
        <t-button theme="success" @click="handleAdd">新增</t-button>
      </div>
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          total: pagination.total,
        }"
        v-loading="tableLoading"
      >
        <template #buy-time="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #status="{ col, row }">
          {{ runningStatusFilter(row[col.colKey]) }}
        </template>
      </t-table>
    </div>

    <edit-device-dialog
      v-model:visible="showEditDeviceDialog"
      :curRow="curRow"
      @success="fetchData"
    ></edit-device-dialog>
  </div>
</template>

<script setup lang="jsx" name="DeviceManage">
import { ref } from 'vue';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
import useFetchTable from '@/hooks/useFetchTable';
import EditDeviceDialog from './edit-device-dialog.vue';
import { deviceQueryApi, deviceDestroyApi } from '@/api/system';
import { runningStatusFilter, timestampFilter } from '@/utils/filter';

const showEditDeviceDialog = ref(false);
const curRow = ref(null);

const columns = [
  { colKey: 'name', title: '设备编号' },
  { colKey: 'serialNo', title: '序列号' },
  { colKey: 'brand', title: '品牌' },
  { colKey: 'buyTime', title: '购买时间', cell: 'buy-time', width: 170 },
  { colKey: 'supplier', title: '供应商' },
  { colKey: 'status', title: '运行状态', cell: 'status', width: 80 },
  { colKey: 'location', title: '当前所在地' },
  { colKey: 'scanCount', title: '总扫描量', width: 80 },
  {
    title: '操作',
    colKey: 'operate',
    fixed: 'right',
    width: 120,
    align: 'center',
    cell: (h, { row }) => {
      return (
        <div class="table-operations">
          <t-link
            theme="primary"
            hover="color"
            onClick={(e) => {
              e.stopPropagation();
              handleEdit(row);
            }}
          >
            修改
          </t-link>
          <t-link
            theme="danger"
            hover="color"
            onClick={(e) => {
              e.stopPropagation();
              handleDistroy(row);
            }}
          >
            作废
          </t-link>
        </div>
      );
    },
  },
];
const {
  loading: tableLoading,
  pagination,
  tableData,
  fetchData,
  onChange,
} = useFetchTable(deviceQueryApi);

const handleAdd = () => {
  curRow.value = null;
  showEditDeviceDialog.value = true;
};
const handleDistroy = (row) => {
  const confirmDia = DialogPlugin({
    header: '操作提示',
    body: `确定要作废选中的记录吗`,
    confirmBtn: '确定',
    cancelBtn: '取消',
    onConfirm: async () => {
      confirmDia.hide();
      const res = await deviceDestroyApi(row.id).catch(() => {});
      if (!res) return;
      MessagePlugin.success('删除成功');
      fetchData();
    },
  });
};
const handleEdit = (row) => {
  curRow.value = row;
  showEditDeviceDialog.value = true;
};
</script>