client-base-v5/src/device/DeviceManagement.vue

<template>
  <div>
    <Navbar title="设备信息" :is-go-back="false" />
    <a-card>
      <a-form ref="formRef" :model="formState">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item name="name" :label="'查询条件'">
              <a-input v-model:value="formState.condition" placeholder="请输入终端名称或位置" @press-enter="searchDatas" />
            </a-form-item>
          </a-col>
          <a-col :span="2">
            <a-button type="primary" :icon="h(SearchOutlined)" @click="searchDatas">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <CommonTable
      ref="table" :data-source="dataSource" :columns="columns" :is-loading="isLoading" :total="total"
      @get-pager="getPageParams"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'status'">
          <a-tag v-if="record.status" color="success">在线</a-tag>
          <a-tag v-if="record.status === false" color="warning">离线</a-tag>
        </template>
      </template>
    </CommonTable>
  </div>
</template>

<script setup>
import { ref, h, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import Common from '../common/Common.js';
import CommonTable from '../common/CommonTable.vue';
import { ajaxApi } from '../api/workflow/workflow.js';
import { SearchOutlined } from '@ant-design/icons-vue';

const table = ref();
const isLoading = ref(false);
const dataSource = ref([]);

const formState = ref({
  condition: '',
});

const total = ref(0);

const pagination = ref({
  start: 1,
  length: 20,
});

onMounted(() => {
  searchDatas();
});

// 查询,回到第一页
const searchDatas = () => {
  table.value.backFirstPage();
};

// 获取分页参数
const getPageParams = (start, length) => {
  pagination.value.start = (start - 1) * length;
  pagination.value.length = length;
  queryDevice();
};

// 查询终端数据
const queryDevice = () => {
  const params = {
    condition: formState.value.condition,
    range: { ...pagination.value },
  };
  isLoading.value = true;
  const url = 'api/DeviceManagementResource/queryDeviceManagementDtoByNameAndPosition';
  ajaxApi(url, params).then(
    success => {
      if (success.dataList && success.dataList.length > 0) {
        dataSource.value = success.dataList;
        total.value = success.totalSize;
      } else {
        total.value = 0;
        dataSource.value = [];
      }
      isLoading.value = false;
    },
    error => {
      isLoading.value = false;
      Common.processException(error);
    },
  );
};

const columns = ref([
  {
    title: '终端名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '终端类型',
    dataIndex: 'terminalTypeName',
    key: 'terminalTypeName',
  },
  {
    title: '终端位置',
    dataIndex: 'position',
    key: 'position',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
]);

// 清空查询条件
const clearInfo = () => {
  formState.value.name = '';
  formState.value.position = '';
};
</script>

<style scoped>
:deep(.ant-card .ant-card-body) {
  padding-bottom: 0px !important;
}
</style>