123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <template>
- <div class="table_item">
- <s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.id">
- <template #operator>
- <!-- 搜索区域 -->
- <div class="table-search">
- <div class="table-search-form">
- <a-row :gutter="10">
- <a-form
- ref="searchFormRef"
- name="advanced_search"
- layout="inline"
- :label-col="{ style: { width: '70px', justifyContent: 'end' } }"
- :model="searchFormState"
- class="ant-advanced-search-form"
- >
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
- ><a-form-item label="设备名称" name="deviceName">
- <a-input v-model:value="searchFormState.deviceName" placeholder="请输入设备名称" /> </a-form-item
- ></a-col>
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
- <a-form-item label="设备编号" name="deviceCode">
- <a-input v-model:value="searchFormState.deviceCode" placeholder="请输入设备编号" /> </a-form-item
- ></a-col>
- </a-form>
- </a-row>
- </div>
- <div class="table-search-buttons">
- <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
- <a-button class="xn-mg08" @click="reset">重置</a-button>
- </div>
- </div>
- <!-- 其他操作区域 -->
- <div class="table-head-btn">
- <div class="btn-left">
- <a-button type="primary" @click="formRef.onOpen()">
- <template #icon><plus-outlined /></template>新增
- </a-button>
- </div>
- <div class="btn-right">
- <a-button>
- <template #icon><download-outlined /></template>导出
- </a-button>
- </div>
- </div>
- </template>
- <template #bodyCell="{ column, record }">
- <!-- -->
- <template v-if="column.dataIndex === 'modelName'">
- {{ $TOOL.dictTypeData('COIDCHAIN', record.modelName) }}
- </template>
- <template v-if="column.dataIndex === 'status'">
- <span>
- <a-tag :color="record.status == '1' ? '#87d068' : '#cd201f'">
- {{ record.status == '1' ? '正常' : '闲置' }}
- </a-tag>
- </span>
- </template>
- <template v-if="column.dataIndex === 'action'">
- <a-button type="link" size="small" @click="configformRef.onOpen(record)">配置</a-button>
- <a-popconfirm title="确定要删除吗?" @confirm="deleteData(record)">
- <a-button type="link" danger size="small">删除</a-button>
- </a-popconfirm>
- <a-button type="link" size="small">记录</a-button>
- </template>
- </template>
- <template #expandedRowRender="{ record }">
- <a-tabs v-model:activeKey="record.activeKey" size="small" type="card">
- <a-tab-pane key="1" tab="基本信息">
- <div class="list">
- <a-descriptions bordered size="small">
- <a-descriptions-item label="设备名称" :span="2">{{ record.deviceName }}</a-descriptions-item>
- <a-descriptions-item label="设备编号" :span="2">{{ record.deviceCode }}</a-descriptions-item>
- <a-descriptions-item label="设备状态" :span="2">
- {{ $TOOL.dictTypeData('COIDCHAIN', record.modelName) }}</a-descriptions-item
- >
- <a-descriptions-item label="创建时间" :span="2">{{}}</a-descriptions-item>
- </a-descriptions>
- </div>
- </a-tab-pane>
- <a-tab-pane key="2" tab="1路">
- <div class="list">
- <a-descriptions bordered size="small">
- <a-descriptions-item label="传感器类型" :span="2">{{ '温度' }}</a-descriptions-item>
- <a-descriptions-item label="传感器路数" :span="2">{{ '1' }}</a-descriptions-item>
- </a-descriptions>
- </div>
- </a-tab-pane>
- </a-tabs>
- </template>
- </s-table>
- <Form ref="formRef" @successful="tableRef.refresh(true)" />
- <configForm ref="configformRef" @successful="tableRef.refresh(true)" />
- </div>
- </template>
- <script setup>
- import memApi from '@/api/basicset/memApi'
- import Form from './form.vue'
- import configForm from './configForm.vue'
- const formRef = ref()
- const configformRef = ref()
- const searchFormRef = ref()
- const searchFormState = ref({})
- const tableRef = ref()
- const columns = [
- {
- title: '设备名称',
- dataIndex: 'deviceName',
- align: 'center',
- ellipsis: true
- },
- {
- title: '设备编号',
- dataIndex: 'deviceCode',
- align: 'center',
- ellipsis: true
- },
- {
- title: '设备型号',
- dataIndex: 'modelName',
- align: 'center',
- ellipsis: true
- },
- {
- title: '最后心跳时间',
- dataIndex: 'lastHeartbeatTime',
- align: 'center',
- ellipsis: true
- },
- {
- title: '设备状态',
- dataIndex: 'status',
- align: 'center',
- ellipsis: true
- },
- {
- title: '传感器路数',
- dataIndex: 'sensorCount',
- align: 'center',
- ellipsis: true
- },
- {
- title: '最近登录时间',
- dataIndex: 'lastLoginTime',
- align: 'center',
- ellipsis: true
- },
- {
- title: '排序码',
- dataIndex: 'sortCode',
- align: 'center',
- ellipsis: true,
- sorter: true
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- width: 150
- }
- ]
- const loadData = (parameter) => {
- return memApi.memPage(Object.assign(parameter, searchFormState.value)).then((res) => {
- return res
- })
- }
- // 重置
- const reset = () => {
- searchFormRef.value.resetFields()
- tableRef.value.refresh(true)
- }
- // 删除
- const deleteData = (record) => {
- let params = [
- {
- id: record.id
- }
- ]
- memApi.memDelete(params).then(() => {
- tableRef.value.refresh(true)
- reset()
- })
- }
- </script>
- <style lang="less" scoped>
- .table_item {
- padding: 15px 20px;
- background-color: #ffffff;
- :deep(.ant-table-pagination-right) {
- justify-content: center !important;
- }
- }
- .list {
- width: 60%;
- padding: 10px 20px;
- border-radius: 10px;
- background-color: #ffffff;
- :deep(.ant-descriptions) {
- margin-bottom: 10px;
- }
- :deep(.ant-descriptions-header) {
- margin: 0;
- padding: 10px;
- border: 1px solid #f0f0f0;
- border-bottom: none;
- }
- }
- </style>
|