|
|
@@ -1,165 +1,166 @@
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
- <a-card class="general-card">
|
|
|
- <a-row>
|
|
|
- <a-col :flex="1">
|
|
|
- <a-form
|
|
|
- :model="formModel"
|
|
|
- :label-col-props="{ span: 4 }"
|
|
|
- :wrapper-col-props="{ span: 18 }"
|
|
|
- label-align="left"
|
|
|
- >
|
|
|
- <a-row :gutter="16">
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item
|
|
|
- field="address"
|
|
|
- :label="t('device.form.address')"
|
|
|
- label-col-flex="50px"
|
|
|
- >
|
|
|
- <a-input
|
|
|
- v-model="formModel.address"
|
|
|
- :placeholder="t('device.form.address')"
|
|
|
- allow-clear
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item
|
|
|
- field="name"
|
|
|
- :label="t('device.form.name')"
|
|
|
- label-col-flex="50px"
|
|
|
- >
|
|
|
- <a-input
|
|
|
- v-model="formModel.name"
|
|
|
- :placeholder="t('device.form.name')"
|
|
|
- allow-clear
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item
|
|
|
- field="entityType"
|
|
|
- :label="t('device.form.entityType')"
|
|
|
- label-col-flex="60px"
|
|
|
- >
|
|
|
- <a-select
|
|
|
- v-model="formModel.entityType"
|
|
|
- :placeholder="t('device.form.entityType')"
|
|
|
- allow-clear
|
|
|
- @clear="formModel.entityType = null"
|
|
|
+ <a-spin :loading="loading">
|
|
|
+ <div class="container">
|
|
|
+ <a-card class="general-card">
|
|
|
+ <a-row>
|
|
|
+ <a-col :flex="1">
|
|
|
+ <a-form
|
|
|
+ :model="formModel"
|
|
|
+ :label-col-props="{ span: 4 }"
|
|
|
+ :wrapper-col-props="{ span: 18 }"
|
|
|
+ label-align="left"
|
|
|
+ >
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item
|
|
|
+ field="address"
|
|
|
+ :label="t('device.form.address')"
|
|
|
+ label-col-flex="50px"
|
|
|
>
|
|
|
- <a-option
|
|
|
- v-for="item of deviceTypeList"
|
|
|
- :value="item.dictCode"
|
|
|
- :label="item.name"
|
|
|
+ <a-input
|
|
|
+ v-model="formModel.address"
|
|
|
+ :placeholder="t('device.form.address')"
|
|
|
+ allow-clear
|
|
|
/>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item
|
|
|
- field="status"
|
|
|
- :label="t('device.form.status')"
|
|
|
- label-col-flex="60px"
|
|
|
- >
|
|
|
- <a-select
|
|
|
- v-model="formModel.status"
|
|
|
- :placeholder="t('device.form.status')"
|
|
|
- allow-clear
|
|
|
- @clear="formModel.status = null"
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item
|
|
|
+ field="name"
|
|
|
+ :label="t('device.form.name')"
|
|
|
+ label-col-flex="50px"
|
|
|
>
|
|
|
- <a-option
|
|
|
- v-for="item of deviceStatusList"
|
|
|
- :value="item.dictCode"
|
|
|
- :label="item.name"
|
|
|
+ <a-input
|
|
|
+ v-model="formModel.name"
|
|
|
+ :placeholder="t('device.form.name')"
|
|
|
+ allow-clear
|
|
|
/>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item
|
|
|
- :label="t('device.form.timeRange')"
|
|
|
- label-col-flex="60px"
|
|
|
- >
|
|
|
- <a-range-picker v-model="formModel.time" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </a-col>
|
|
|
- <a-divider :style="{ height: '84px' }" direction="vertical" />
|
|
|
- <a-col :flex="'86px'">
|
|
|
- <a-space :size="10">
|
|
|
- <a-button type="primary" @click="search">
|
|
|
- <template #icon>
|
|
|
- <icon-search />
|
|
|
- </template>
|
|
|
- {{ t('searchTable.form.search') }}
|
|
|
- </a-button>
|
|
|
- <a-button @click="reset">
|
|
|
- <template #icon>
|
|
|
- <icon-refresh />
|
|
|
- </template>
|
|
|
- {{ t('searchTable.form.reset') }}
|
|
|
- </a-button>
|
|
|
- </a-space>
|
|
|
- <a-space class="right-side">
|
|
|
- <a-button type="primary" @click="downloadExcel">
|
|
|
- <template #icon>
|
|
|
- <icon-download />
|
|
|
- </template>
|
|
|
- {{ t('searchTable.form.export') }}
|
|
|
- </a-button>
|
|
|
- </a-space>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-table
|
|
|
- row-key="name"
|
|
|
- :loading="loading"
|
|
|
- :pagination="pagination"
|
|
|
- :columns="cloneColumns as TableColumnData[]"
|
|
|
- :data="renderData"
|
|
|
- :bordered="false"
|
|
|
- :size="size"
|
|
|
- :scrollbar="true"
|
|
|
- @page-change="onPageChange"
|
|
|
- @row-dblclick="handleClick"
|
|
|
- >
|
|
|
- <template #index="{ rowIndex }">
|
|
|
- {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
|
|
- </template>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item
|
|
|
+ field="entityType"
|
|
|
+ :label="t('device.form.entityType')"
|
|
|
+ label-col-flex="60px"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ v-model="formModel.entityType"
|
|
|
+ :placeholder="t('device.form.entityType')"
|
|
|
+ allow-clear
|
|
|
+ @clear="formModel.entityType = null"
|
|
|
+ >
|
|
|
+ <a-option
|
|
|
+ v-for="item of deviceTypeList"
|
|
|
+ :value="item.dictCode"
|
|
|
+ :label="item.name"
|
|
|
+ />
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item
|
|
|
+ field="status"
|
|
|
+ :label="t('device.form.status')"
|
|
|
+ label-col-flex="60px"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ v-model="formModel.status"
|
|
|
+ :placeholder="t('device.form.status')"
|
|
|
+ allow-clear
|
|
|
+ @clear="formModel.status = null"
|
|
|
+ >
|
|
|
+ <a-option
|
|
|
+ v-for="item of deviceStatusList"
|
|
|
+ :value="item.dictCode"
|
|
|
+ :label="item.name"
|
|
|
+ />
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item
|
|
|
+ :label="t('device.form.timeRange')"
|
|
|
+ label-col-flex="60px"
|
|
|
+ >
|
|
|
+ <a-range-picker v-model="formModel.time" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-col>
|
|
|
+ <a-divider :style="{ height: '84px' }" direction="vertical" />
|
|
|
+ <a-col :flex="'86px'">
|
|
|
+ <a-space :size="10">
|
|
|
+ <a-button type="primary" @click="search">
|
|
|
+ <template #icon>
|
|
|
+ <icon-search />
|
|
|
+ </template>
|
|
|
+ {{ t('searchTable.form.search') }}
|
|
|
+ </a-button>
|
|
|
+ <a-button @click="reset">
|
|
|
+ <template #icon>
|
|
|
+ <icon-refresh />
|
|
|
+ </template>
|
|
|
+ {{ t('searchTable.form.reset') }}
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ <a-space class="right-side">
|
|
|
+ <a-button type="primary" @click="downloadExcel">
|
|
|
+ <template #icon>
|
|
|
+ <icon-download />
|
|
|
+ </template>
|
|
|
+ {{ t('searchTable.form.export') }}
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-table
|
|
|
+ row-key="name"
|
|
|
+ :pagination="pagination"
|
|
|
+ :columns="cloneColumns as TableColumnData[]"
|
|
|
+ :data="renderData"
|
|
|
+ :bordered="false"
|
|
|
+ :size="size"
|
|
|
+ :scrollbar="true"
|
|
|
+ @page-change="onPageChange"
|
|
|
+ @row-dblclick="handleClick"
|
|
|
+ >
|
|
|
+ <template #index="{ rowIndex }">
|
|
|
+ {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
|
|
+ </template>
|
|
|
|
|
|
- <template #entityType="{ record }">
|
|
|
- <span>
|
|
|
- {{
|
|
|
- deviceTypeList.find(item => item.dictCode === record.entityType)
|
|
|
- ?.name
|
|
|
- }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <template #status="{ record }">
|
|
|
- <BTag :status="record.status">
|
|
|
- {{
|
|
|
- deviceStatusList.find(item => item.dictCode === record.status)
|
|
|
- ?.name
|
|
|
- }}
|
|
|
- </BTag>
|
|
|
- </template>
|
|
|
- <template #time="{ record }">
|
|
|
- <span>{{
|
|
|
- record.time && dayjs(record.time).format('YYYY-MM-DD HH:mm:ss')
|
|
|
- }}</span>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </a-card>
|
|
|
- <DeviceInfoDialog
|
|
|
- v-model="showDeviceInfoDialog"
|
|
|
- :id="deviceId"
|
|
|
- :deviceInfo="deviceInfo"
|
|
|
- :deviceType="deviceType"
|
|
|
- >
|
|
|
- </DeviceInfoDialog>
|
|
|
- </div>
|
|
|
+ <template #entityType="{ record }">
|
|
|
+ <span>
|
|
|
+ {{
|
|
|
+ deviceTypeList.find(item => item.dictCode === record.entityType)
|
|
|
+ ?.name
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template #status="{ record }">
|
|
|
+ <BTag :status="record.status">
|
|
|
+ {{
|
|
|
+ deviceStatusList.find(item => item.dictCode === record.status)
|
|
|
+ ?.name
|
|
|
+ }}
|
|
|
+ </BTag>
|
|
|
+ </template>
|
|
|
+ <template #time="{ record }">
|
|
|
+ <span>{{
|
|
|
+ record.time && dayjs(record.time).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+ <DeviceInfoDialog
|
|
|
+ v-model="showDeviceInfoDialog"
|
|
|
+ :id="deviceId"
|
|
|
+ :deviceInfo="deviceInfo"
|
|
|
+ :deviceType="deviceType"
|
|
|
+ >
|
|
|
+ </DeviceInfoDialog>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="DevicePage">
|
|
|
@@ -186,7 +187,7 @@ import useDictList from '@/hooks/dict-list';
|
|
|
import { downLoadFun, DeviceInfo } from '@/utils/const';
|
|
|
|
|
|
const { t } = useI18n();
|
|
|
-const { loading, setLoading } = useLoading(true);
|
|
|
+const { loading, setLoading } = useLoading(false);
|
|
|
const cloneColumns = computed(() => [
|
|
|
{
|
|
|
title: t('searchTable.table.number'),
|
|
|
@@ -276,7 +277,7 @@ function searchTable() {
|
|
|
renderData.value = res.data;
|
|
|
})
|
|
|
.finally(() => {
|
|
|
- setLoading(false);
|
|
|
+ // setLoading(false);
|
|
|
});
|
|
|
}
|
|
|
searchTable();
|
曾坤森