shangyun/Web/src/components/devices/feedbackRecord/index.vue

<template>
  <div class="feedbackRecord">
    <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
    <div class="feedbackRecord-table">
      <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="device_sn"
        :loading="state.listLoading" :columns="columns" @change="refreshData" :rowClassName="rowClassName"
        :dataSource="state.list" :pagination="paginationConfig">
        <!-- 设备型号 -->
        <template #device_name="{ record }">
          <CustomCell :record="record" fieldName="device_name" />
        </template>
        <!-- 设备SN -->
        <template #device_sn="{ record }">
          <CustomCell :record="record" fieldName="device_sn" />
        </template>
        <!-- 设备名称 -->
        <template #nick_name="{ record }">
          <CustomCell :record="record" fieldName="nick_name" />
        </template>
        <!-- 固件版本 -->
        <template #firmware_version="{ record }">
          <CustomCell :record="record" fieldName="firmware_version" />
        </template>
        <template #status="{ record }">
          上传状态
        </template>
        <!-- 操作 -->
        <template #operation="{ record }">
          <div class="editable-row-operations">
            <div class="flex-align-center flex-row" style="color: #2d8cf0">
              <a-tooltip title="详情">
                <FileSearchOutlined style="margin-right: 10px;" @click="onClickDetail(record.id)" />
              </a-tooltip>
              <a-tooltip title="删除">
                <DeleteOutlined @click="onClickDelete(record.id)" />
              </a-tooltip>
            </div>
          </div>
        </template>
      </a-table>
    </div>
    <Drawer :id="state.currentId" :visible="state.drawerVisible" :onClose="drawerOnClickClose" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { Modal } from 'ant-design-vue';
import { DeleteOutlined, FileSearchOutlined } from '@ant-design/icons-vue';
import Search from './components/Search.vue';
import CustomCell from './components/CustomCell.vue';
import Drawer from './components/Drawer.vue';
import { apis } from '/@/api/custom/index';

interface State {
  query: any,
  listLoading: boolean,
  list: any[],
  currentId: string,
  drawerVisible: boolean,
};

const state: State = reactive({
  query: undefined,
  listLoading: false,
  list: [],
  currentId: '',
  drawerVisible: false,
});

const paginationConfig = reactive({
  pageSizeOptions: ['20', '50', '100'],
  showQuickJumper: true,
  showSizeChanger: true,
  pageSize: 20,
  current: 1,
  total: 0
})

const fetchList = async () => {
  state.listLoading = true;
  try {
    const res = await apis.fetchChangeRecordList({
      ...state.query,
      page: paginationConfig.current,
      page_size: paginationConfig.pageSize
    });
    if (res.code === 0) {
      paginationConfig.total = res.data.pagination.total
      paginationConfig.current = res.data.pagination.page
      paginationConfig.pageSize = res.data.pagination.page_size
    }
    state.list = res.data.list;
  } catch (e) {
    console.error(e);
  } finally {
    state.listLoading = false;
  }
}

onMounted(async () => {
  await fetchList();
})

const columns = [
  {
    title: '反馈时间',
    dataIndex: 'create_time',
    width: 200,
    sorter: (a: any, b: any) => a.create_time.localeCompare(b.create_time),
  },
  {
    title: '反馈人',
    dataIndex: 'username',
    width: 150,
  },
  {
    title: '设备型号',
    dataIndex: 'device_name',
    width: 150,
    sorter: (a: any, b: any) => a.device_name.localeCompare(b.device_name),
    slots: { customRender: 'device_name' }
  },
  {
    title: '设备SN',
    dataIndex: 'device_sn',
    width: 250,
    slots: { customRender: 'device_sn' }
  },
  {
    title: '设备名称',
    dataIndex: 'nick_name',
    width: 150,
    slots: { customRender: 'nick_name' },
    sorter: (a: any, b: any) => a.nick_name.localeCompare(b.nick_name),
  },
  {
    title: '固件版本',
    dataIndex: 'firmware_version',
    width: 150,
    ellipsis: true,
    slots: { customRender: 'firmware_version' }
  },
  {
    title: '设备异常描述',
    dataIndex: 'log_info',
    width: 150,
    ellipsis: true,
  },
  {
    title: '上传状态',
    dataIndex: 'status',
    slots: { customRender: 'status' },
    sorter: (a: any, b: any) => a.status.localeCompare(b.status),
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: 80,
    slots: { customRender: 'operation' }
  },
]

const rowClassName = (record: any, index: number) => {
  const className = []
  if ((index & 1) === 0) {
    className.push('table-striped')
  }
  return className.toString().replaceAll(',', ' ')
}

const refreshData = async (page: any) => {
  paginationConfig.current = page?.current!
  paginationConfig.pageSize = page?.pageSize!
  await fetchList();
}

// 点击搜索
const onClickSearch = async (query: any) => {
  state.query = query;
  await fetchList();
}

// 点击重置
const onClickReset = async (query: any) => {
  state.query = query;
  await fetchList();
}

// 点击详情
const onClickDetail = (id: string) => {
  state.currentId = id;
  state.drawerVisible = true;
}

const drawerOnClickClose = () => {
  state.drawerVisible = false;
}

// 点击删除
const onClickDelete = (id: number) => {
  Modal.confirm({
    title: '提示',
    content: '确定删除吗？',
    onOk: async () => {

    },
  });
}
</script>

<style lang="scss">
.feedbackRecord {
  padding: 20px;
}

.ant-table {
  border-top: 1px solid rgb(0, 0, 0, 0.06);
  border-bottom: 1px solid rgb(0, 0, 0, 0.06);
}

.ant-table-tbody tr td {
  border: 0;
}
</style>