|
|
@@ -5,25 +5,27 @@
|
|
|
<el-col :xs="24">
|
|
|
<el-card class="mt8" shadow="hover">
|
|
|
<el-form :model="state.filter" :inline="true" @submit.stop.prevent style="margin-bottom:-3vh">
|
|
|
- <el-form-item prop="name" style="width: 100%">
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
- <el-form-item label="应用">
|
|
|
- <el-input v-model="state.appName" disabled placeholder="请选择应用" @keyup.enter="onQuery" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-form-item prop="name" style="width: 100%">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-form-item label="应用">
|
|
|
+ <el-input v-model="state.appName" disabled placeholder="请选择应用" @keyup.enter="onQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="设备sn">
|
|
|
<el-input v-model="state.filter.SN" placeholder="请输入设备sn" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="登录账户">
|
|
|
<el-input v-model="state.filter.Account" placeholder="请输入账号" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="设备状态">
|
|
|
- <el-input v-model="state.filter.Status" placeholder="请选择设备状态" clearable></el-input>
|
|
|
+ <el-select v-model="state.filter.Status" placeholder="请选择状态">
|
|
|
+ <el-option v-for="(label, value) in statusMap" :key="value" :label="label" :value="value" />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-form-item>
|
|
|
@@ -32,15 +34,15 @@
|
|
|
<hr>
|
|
|
|
|
|
<el-row justify="space-between" class="submit-button" style="margin-bottom: -9px;">
|
|
|
- <el-row>
|
|
|
- <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
- <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-button type="primary" icon="ele-Plus" @click="onAdd"> 添加 </el-button>
|
|
|
+ <el-row>
|
|
|
+ <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
+ <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-button type="primary" icon="ele-Plus" @click="onAdd"> 添加 </el-button>
|
|
|
</el-row>
|
|
|
</el-row>
|
|
|
- </el-card>
|
|
|
+ </el-card>
|
|
|
</el-col>
|
|
|
<!--表格-->
|
|
|
<el-col :xs="24">
|
|
|
@@ -49,15 +51,17 @@
|
|
|
<el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop"
|
|
|
:label="column.label">
|
|
|
<template #default="{ row }">
|
|
|
- <!-- 如果是状态列，使用 StatusBox 组件 -->
|
|
|
- <StatusBox
|
|
|
- v-if="column.prop === 'status'"
|
|
|
- :status="getStatusInfo(row[column.prop]).name" />
|
|
|
- <!-- 其他列保持原有逻辑 -->
|
|
|
- <span v-else>
|
|
|
- {{ row[column.prop] }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
+ <!-- 如果是状态列，使用 StatusBox 组件 -->
|
|
|
+ <StatusBox
|
|
|
+ v-if="column.prop === 'status'"
|
|
|
+ :status="statusMap[row.status] || '未知'"
|
|
|
+ :color="statusStyles[row.status]?.color || '#909399'"
|
|
|
+ />
|
|
|
+ <!-- 其他列保持原有逻辑 -->
|
|
|
+ <span v-else>
|
|
|
+ {{ row[column.prop] }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation"
|
|
|
width="140">
|
|
|
@@ -71,10 +75,9 @@
|
|
|
</el-table>
|
|
|
<div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
<el-pagination v-model:currentPage="pageState.pageInput.currentPage"
|
|
|
- v-model:page-size="pageState.pageInput.pageSize" :total="state.total"
|
|
|
- :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
|
|
|
- @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
|
|
|
-
|
|
|
+ v-model:page-size="pageState.pageInput.pageSize" :total="state.total"
|
|
|
+ :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
|
|
|
+ @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
@@ -83,6 +86,7 @@
|
|
|
<EquipmentEditDialog ref="equipmentEditRef"></EquipmentEditDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script setup lang="ts">
|
|
|
import { defineAsyncComponent, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
|
|
|
import eventBus from "/@/utils/mitt";
|
|
|
@@ -92,8 +96,7 @@ import { PermissionApi } from "/@/api/admin/Permission";
|
|
|
import router from "/@/router";
|
|
|
import StatusBox from "/@/components/StatusBox.vue";
|
|
|
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
|
|
|
-
|
|
|
-
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
|
|
|
// 使用组合式函数获取分页状态
|
|
|
const pageState = useDynamicPageSize(10, 15);
|
|
|
@@ -106,17 +109,17 @@ const equipmentEditRef = ref()
|
|
|
const state = reactive({
|
|
|
/**加载显示 */
|
|
|
loading: false,
|
|
|
- appName:"",
|
|
|
+ appName: "",
|
|
|
/**条件查询模块 */
|
|
|
filter: {
|
|
|
/** appid */
|
|
|
- Appid:"",
|
|
|
+ Appid: "",
|
|
|
/**设备sn */
|
|
|
SN: null,
|
|
|
/**登录账户 */
|
|
|
Account: null,
|
|
|
/**设备状态 */
|
|
|
- Status: null,
|
|
|
+ Status: '', // 默认所有状态
|
|
|
},
|
|
|
/**表格信息 */
|
|
|
tableModel: [] as unknown as EquipmentGetPageOutput,
|
|
|
@@ -126,7 +129,8 @@ const state = reactive({
|
|
|
{ prop: 'account', label: '登录账户' },
|
|
|
{ prop: 'status', label: '设备状态' },
|
|
|
{ prop: 'loginTime', label: '最近一次登录时间' },
|
|
|
- { prop: 'validityTime', label: '登录有效期' },],
|
|
|
+ { prop: 'validityTime', label: '登录有效期' },
|
|
|
+ ],
|
|
|
/**分页标识 */
|
|
|
pageInput: {
|
|
|
CurrentPage: 1,
|
|
|
@@ -136,19 +140,21 @@ const state = reactive({
|
|
|
total: 0,
|
|
|
})
|
|
|
|
|
|
-// 状态映射表
|
|
|
+// 状态映射表 - 用于选择框和显示
|
|
|
const statusMap = {
|
|
|
- 0: { name: "关闭", color: "#F56C6C" }, // 红色表示关闭
|
|
|
- 1: { name: "开启", color: "#67C23A" }, // 绿色表示开启
|
|
|
+ '': '所有',
|
|
|
+ '1': '启用',
|
|
|
+ '0': '禁用',
|
|
|
};
|
|
|
|
|
|
-// 根据 status 值获取映射后的对象
|
|
|
-const getStatusInfo = (status: number) => {
|
|
|
- return statusMap[status] || { name: "未知状态", color: "#000" };
|
|
|
+// 状态样式映射 - 用于StatusBox组件
|
|
|
+const statusStyles = {
|
|
|
+ '1': { text: "启用", color: "#67C23A" }, // 绿色表示启用
|
|
|
+ '0': { text: "禁用", color: "#F56C6C" }, // 红色表示禁用
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- // 初始化分页大小
|
|
|
+ // 初始化分页大小
|
|
|
state.pageInput.PageSize = pageState.pageInput.pageSize;
|
|
|
state.pageInput.CurrentPage = 1; // 初始化时重置为第一页
|
|
|
init()
|
|
|
@@ -156,60 +162,91 @@ onMounted(() => {
|
|
|
eventBus.on('refreshView', async () => {
|
|
|
await init()
|
|
|
})
|
|
|
- console.log()
|
|
|
})
|
|
|
+
|
|
|
onBeforeMount(() => {
|
|
|
eventBus.off('refreshView')
|
|
|
})
|
|
|
-/**
|
|
|
-* 监听变换
|
|
|
-*/
|
|
|
-// watch(() => { })
|
|
|
+
|
|
|
/**条件查询 */
|
|
|
const onQuery = async () => {
|
|
|
- state.loading = true
|
|
|
- const res: any = await new PermissionApi().getEquipmentList({
|
|
|
- ...state.pageInput,
|
|
|
- "Filter.Appid":state.filter.Appid,
|
|
|
- "Filter.SN":state.filter.SN,
|
|
|
- "Filter.Account":state.filter.Account,
|
|
|
- "Filter.Status":state.filter.Status,
|
|
|
- })
|
|
|
- state.total = res?.data?.total ?? 0
|
|
|
- state.tableModel = res?.data?.list ?? []
|
|
|
- state.loading = false
|
|
|
-}
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const res: any = await new PermissionApi().getEquipmentList({
|
|
|
+ ...state.pageInput,
|
|
|
+ "Filter.Appid": state.filter.Appid,
|
|
|
+ "Filter.SN": state.filter.SN,
|
|
|
+ "Filter.Account": state.filter.Account,
|
|
|
+ // 确保传递正确的状态值
|
|
|
+ "Filter.Status": state.filter.Status !== '' ? state.filter.Status : null,
|
|
|
+ });
|
|
|
+
|
|
|
+ state.total = res?.data?.total ?? 0;
|
|
|
+ state.tableModel = res?.data?.list ?? [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取设备列表失败:', error);
|
|
|
+ ElMessage.error('获取设备列表失败');
|
|
|
+ } finally {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
/**初始化 */
|
|
|
const init = async () => {
|
|
|
- state.loading = true
|
|
|
- const name = router.currentRoute.value.params.id
|
|
|
- const appData=await new PermissionApi().getApplyInfo({Name:name})
|
|
|
- state.appName = appData.data[0].name
|
|
|
- state.filter.Appid = appData.data[0].appid
|
|
|
- state.loading = false
|
|
|
- onQuery()
|
|
|
-}
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const name = router.currentRoute.value.params.id;
|
|
|
+ const appData = await new PermissionApi().getApplyInfo({ Name: name });
|
|
|
+ state.appName = appData.data[0].name;
|
|
|
+ state.filter.Appid = appData.data[0].appid;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取应用信息失败:', error);
|
|
|
+ ElMessage.error('获取应用信息失败');
|
|
|
+ } finally {
|
|
|
+ state.loading = false;
|
|
|
+ onQuery();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
/**添加 */
|
|
|
const onAdd = () => {
|
|
|
- equipmentEditRef.value.openDialog('add',{appid:state.filter.Appid})
|
|
|
+ equipmentEditRef.value.openDialog('add', { appid: state.filter.Appid })
|
|
|
}
|
|
|
-/**重置 */
|
|
|
-const onReset = () => { }
|
|
|
+
|
|
|
+/**重置筛选条件 */
|
|
|
+const onReset = () => {
|
|
|
+ state.filter = {
|
|
|
+ Appid: state.filter.Appid,
|
|
|
+ SN: null,
|
|
|
+ Account: null,
|
|
|
+ Status: '',
|
|
|
+ };
|
|
|
+ onQuery();
|
|
|
+};
|
|
|
+
|
|
|
/**编辑 */
|
|
|
const onDateUpdate = (row) => {
|
|
|
- equipmentEditRef.value.openDialog('edit',row)
|
|
|
- }
|
|
|
+ equipmentEditRef.value.openDialog('edit', row)
|
|
|
+}
|
|
|
+
|
|
|
/**删除 */
|
|
|
const onDataDelete = (row) => {
|
|
|
- equipmentEditRef.value.openDialog('delete',row)
|
|
|
- }
|
|
|
-
|
|
|
-const onSizeChange = () => {
|
|
|
+ equipmentEditRef.value.openDialog('delete', row)
|
|
|
}
|
|
|
|
|
|
-const onCurrentChange = () => {
|
|
|
-}
|
|
|
+/**页大小变化 */
|
|
|
+const onSizeChange = (newSize: number) => {
|
|
|
+ state.pageInput.PageSize = newSize;
|
|
|
+ onQuery();
|
|
|
+};
|
|
|
+
|
|
|
+/**页码变化 */
|
|
|
+const onCurrentChange = (newPage: number) => {
|
|
|
+ state.pageInput.CurrentPage = newPage;
|
|
|
+ onQuery();
|
|
|
+};
|
|
|
</script>
|
|
|
+
|
|
|
<style scoped lang="scss">
|
|
|
.el-input,
|
|
|
.el-select {
|
