liuhaodong
/
laic-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 用户固件操作日志列表切换到 t-table

main
xiaosi 3 weeks ago
parent
99c451abc5
commit
87e86e7640
3 changed files with 89 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      src/views/FirmwaresView/FirmwaresView.vue
  2. 45
      src/views/OperationLogsView/OperationLogsView.vue
  3. 59
      src/views/UsersView/UsersView.vue

68
src/views/FirmwaresView/FirmwaresView.vue
View File

@ -30,38 +30,31 @@
</div>
<div class="asset-table-wrap">
<table class="asset-table">
<thead>
<tr>
<th style="width:12%">版本</th>
<th style="width:14%">组件</th>
<th style="width:22%">描述</th>
<th style="width:9%">大小</th>
<th style="width:8%">升级方式</th>
<th style="width:9%">状态</th>
<th style="width:16%">创建时间</th>
<th style="width:10%">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="f in list" :key="f.id">
<td><strong>{{ f.version }}</strong></td>
<td>{{ f.component }}</td>
<td><span :title="f.description">{{ f.description || '—' }}</span></td>
<td>{{ f.sizeText }}</td>
<td>{{ f.mandatory ? '强制' : '普通' }}</td>
<td><span class="table-status" :class="f.statusClass"><i></i>{{ f.statusName }}</span></td>
<td>{{ f.createdAt }}</td>
<td>
<div class="row-actions">
<t-button variant="text" theme="primary" @click="openEdit(f)">编辑</t-button>
<t-button variant="text" theme="danger" shape="square" @click="remove(f)"><svg><use href="#i-trash" /></svg></t-button>
</div>
</td>
</tr>
</tbody>
</table>
<div v-if="!list.length" class="table-empty">暂无固件版本</div>
<t-table
row-key="id"
:data="list"
:columns="columns"
empty="暂无固件版本"
>
<template #version="{ row }">
<strong>{{ row.version }}</strong>
</template>
<template #description="{ row }">
<span :title="row.description">{{ row.description || '—' }}</span>
</template>
<template #mandatory="{ row }">
{{ row.mandatory ? '强制' : '普通' }}
</template>
<template #status="{ row }">
<span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
</template>
<template #actions="{ row }">
<div class="row-actions">
<t-button variant="text" theme="primary" @click="openEdit(row)">编辑</t-button>
<t-button variant="text" theme="danger" shape="square" @click="remove(row)"><svg><use href="#i-trash" /></svg></t-button>
</div>
</template>
</t-table>
</div>
<div class="table-footer">
@ -147,6 +140,17 @@ const statusOptions = [
{ label: '已弃用', value: 'deprecated' }
]
const columns = [
{ colKey: 'version', title: '版本', width: '12%' },
{ colKey: 'component', title: '组件', width: '14%' },
{ colKey: 'description', title: '描述', width: '22%', ellipsis: true },
{ colKey: 'sizeText', title: '大小', width: '9%' },
{ colKey: 'mandatory', title: '升级方式', width: '8%' },
{ colKey: 'status', title: '状态', width: '9%' },
{ colKey: 'createdAt', title: '创建时间', width: '16%' },
{ colKey: 'actions', title: '操作', width: '10%' }
]
const STATUS = {
draft: { name: '草稿', cls: 'pending' },
released: { name: '已发布', cls: 'online' },

45
src/views/OperationLogsView/OperationLogsView.vue
View File

@ -27,29 +27,19 @@
</div>
<div class="asset-table-wrap">
<table class="asset-table">
<thead>
<tr>
<th style="width:18%">目标机巢</th>
<th style="width:20%">控制指令</th>
<th style="width:18%">目标飞机</th>
<th style="width:12%">执行状态</th>
<th style="width:14%">应答结果</th>
<th style="width:18%">下发时间</th>
</tr>
</thead>
<tbody>
<tr v-for="c in list" :key="c.id">
<td>{{ c.dockId }}</td>
<td><strong>{{ c.commandName }}</strong><small>{{ c.commandType }}</small></td>
<td>{{ c.droneSn }}</td>
<td><span class="table-status" :class="c.statusClass"><i></i>{{ c.statusName }}</span></td>
<td>{{ c.result }}</td>
<td>{{ c.createdAt }}</td>
</tr>
</tbody>
</table>
<div v-if="!list.length" class="table-empty">暂无设备操作记录</div>
<t-table
row-key="id"
:data="list"
:columns="columns"
empty="暂无设备操作记录"
>
<template #command="{ row }">
<strong>{{ row.commandName }}</strong><small>{{ row.commandType }}</small>
</template>
<template #status="{ row }">
<span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
</template>
</t-table>
</div>
<div class="table-footer">
@ -86,6 +76,15 @@ const statusFilterOptions = [
{ label: '执行失败', value: 'terminal' }
]
const columns = [
{ colKey: 'dockId', title: '目标机巢', width: '18%' },
{ colKey: 'command', title: '控制指令', width: '20%' },
{ colKey: 'droneSn', title: '目标飞机', width: '18%' },
{ colKey: 'status', title: '执行状态', width: '12%' },
{ colKey: 'result', title: '应答结果', width: '14%' },
{ colKey: 'createdAt', title: '下发时间', width: '18%' }
]
const COMMAND_NAMES = {
'dock.open': '打开舱门',
'dock.close': '关闭舱门',

59
src/views/UsersView/UsersView.vue
View File

@ -27,34 +27,28 @@
</div>
<div class="asset-table-wrap">
<table class="asset-table">
<thead>
<tr>
<th style="width:24%">用户</th>
<th style="width:16%">手机号</th>
<th style="width:20%">邮箱</th>
<th style="width:12%">角色</th>
<th style="width:10%">状态</th>
<th style="width:18%">注册时间</th>
</tr>
</thead>
<tbody>
<tr v-for="u in users" :key="u.id">
<td>
<div class="asset-name-cell">
<span class="table-asset-icon" :class="u.role === 'admin' ? 'pending' : 'drone'">{{ u.initial }}</span>
<span><strong>{{ u.name }}</strong><small>ID {{ u.id }}</small></span>
</div>
</td>
<td>{{ u.phone }}</td>
<td>{{ u.email || '—' }}</td>
<td><span class="table-status" :class="u.role === 'admin' ? 'mission' : 'online'"><i></i>{{ u.roleName }}</span></td>
<td><span class="table-status" :class="u.statusClass"><i></i>{{ u.statusName }}</span></td>
<td>{{ u.createdAt }}</td>
</tr>
</tbody>
</table>
<div v-if="!users.length" class="table-empty">暂无用户</div>
<t-table
row-key="id"
:data="users"
:columns="columns"
empty="暂无用户"
>
<template #user="{ row }">
<div class="asset-name-cell">
<span class="table-asset-icon" :class="row.role === 'admin' ? 'pending' : 'drone'">{{ row.initial }}</span>
<span><strong>{{ row.name }}</strong><small>ID {{ row.id }}</small></span>
</div>
</template>
<template #email="{ row }">
{{ row.email || '—' }}
</template>
<template #role="{ row }">
<span class="table-status" :class="row.role === 'admin' ? 'mission' : 'online'"><i></i>{{ row.roleName }}</span>
</template>
<template #status="{ row }">
<span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
</template>
</t-table>
</div>
<div class="table-footer">
@ -91,6 +85,15 @@ const roleFilterOptions = [
{ label: '普通用户', value: 'user' }
]
const columns = [
{ colKey: 'user', title: '用户', width: '24%' },
{ colKey: 'phone', title: '手机号', width: '16%' },
{ colKey: 'email', title: '邮箱', width: '20%' },
{ colKey: 'role', title: '角色', width: '12%' },
{ colKey: 'status', title: '状态', width: '10%' },
{ colKey: 'createdAt', title: '注册时间', width: '18%' }
]
function fmtTime(t) {
if (!t) return '--'
const d = new Date(t)

Write Preview
Loading…
Cancel
Save