功能岛管理+设备管理
This commit is contained in:
@@ -37,7 +37,7 @@ export function userRoleById(id: string | number) {
|
||||
// 根据角色ID查询关联用户（先封装不调用）
|
||||
export function userRoleByRoleId(roleId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/getByRoleId/${roleId}`,
|
||||
url: `/user-role/role/${roleId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
@@ -45,7 +45,7 @@ export function userRoleByRoleId(roleId: string | number) {
|
||||
// 根据角色ID删除所有关联（先封装不调用）
|
||||
export function userRoleDelByRoleId(roleId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/delByRoleId/${roleId}`,
|
||||
url: `/user-role/role/${roleId}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
@@ -53,7 +53,7 @@ export function userRoleDelByRoleId(roleId: string | number) {
|
||||
// 根据用户ID查询关联角色（先封装不调用）
|
||||
export function userRoleByUserId(userId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/getByUserId/${userId}`,
|
||||
url: `/user-role/user/${userId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
@@ -61,7 +61,7 @@ export function userRoleByUserId(userId: string | number) {
|
||||
// 根据用户ID删除所有关联（先封装不调用）
|
||||
export function userRoleDelByUserId(userId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/delByUserId/${userId}`,
|
||||
url: `/user-role/user/${userId}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
47
rc_autoplc_front/src/api/tb/devinfo.ts
Normal file
47
rc_autoplc_front/src/api/tb/devinfo.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function devInfoadd(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfodel(id: string | number) {
|
||||
return request({
|
||||
url: `/devInfo/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfoupd(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfolist(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfobyid(id: string | number) {
|
||||
return request({
|
||||
url: `/devInfo/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function devselect(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/all',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
@@ -37,6 +37,16 @@ const router = createRouter({
|
||||
name: 'user-role',
|
||||
component: () => import('../views/user-role/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/island-info',
|
||||
name: 'island-info',
|
||||
component: () => import('../views/islandInfo/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/devinfo',
|
||||
name: 'devinfo',
|
||||
component: () => import('../views/devinfo/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -61,6 +61,20 @@
|
||||
<span>用户角色管理</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="island">
|
||||
<template #title>
|
||||
<el-icon><Grid /></el-icon>
|
||||
<span>业务管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/island-info">
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span>功能岛管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/devinfo">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span>设备管理</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
@@ -76,7 +90,7 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { User, Setting, Avatar, OfficeBuilding, Briefcase, Document, CaretBottom, UserFilled } from '@element-plus/icons-vue'
|
||||
import { User, Setting, Avatar, OfficeBuilding, Briefcase, Document, CaretBottom, UserFilled, Grid, Monitor } from '@element-plus/icons-vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
686
rc_autoplc_front/src/views/devinfo/index.vue
Normal file
686
rc_autoplc_front/src/views/devinfo/index.vue
Normal file
@@ -0,0 +1,686 @@
|
||||
<template>
|
||||
<div class="devinfo-page">
|
||||
<!-- 搜索栏 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="100px">
|
||||
<el-form-item label="设备名称">
|
||||
<el-input
|
||||
v-model="queryForm.devName"
|
||||
placeholder="输入设备名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态">
|
||||
<el-select
|
||||
v-model="queryForm.status"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option label="空闲" :value="0" />
|
||||
<el-option label="运行" :value="1" />
|
||||
<el-option label="故障" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属功能岛">
|
||||
<el-select
|
||||
v-model="queryForm.islandId"
|
||||
placeholder="请选择功能岛"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="island in islandList"
|
||||
:key="island.id"
|
||||
:label="island.islandName || island.name"
|
||||
:value="island.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增设备
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="deviceList"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" :index="getIndex" />
|
||||
<el-table-column prop="devName" label="设备名称" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.devName || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devModel" label="设备型号" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.devModel || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.ipAddr || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="port" label="端口" width="80">
|
||||
<template #default="{ row }">
|
||||
{{ row.port !== null && row.port !== undefined ? row.port : '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="protocolType" label="协议" min-width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.protocolType || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="company" label="公司名" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.company || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)" size="small">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="islandId" label="所属功能岛" width="150">
|
||||
<template #default="{ row }">
|
||||
{{ getIslandName(row.islandId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devDesc" label="描述" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.devDesc || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.remark || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
<el-icon><Edit /></el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 新增/编辑抽屉 -->
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
direction="rtl"
|
||||
size="500px"
|
||||
:before-close="handleDrawerClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item label="设备名称" prop="devName">
|
||||
<el-input
|
||||
v-model="formData.devName"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备型号" prop="devModel">
|
||||
<el-input
|
||||
v-model="formData.devModel"
|
||||
placeholder="请输入设备型号"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址" prop="ipAddr">
|
||||
<el-input
|
||||
v-model="formData.ipAddr"
|
||||
placeholder="请输入IP地址"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="端口" prop="port">
|
||||
<el-input-number
|
||||
v-model="formData.port"
|
||||
placeholder="请输入端口"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="协议" prop="protocolType">
|
||||
<el-input
|
||||
v-model="formData.protocolType"
|
||||
placeholder="请输入协议类型"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司名" prop="company">
|
||||
<el-input
|
||||
v-model="formData.company"
|
||||
placeholder="请输入公司名"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="devDesc">
|
||||
<el-input
|
||||
v-model="formData.devDesc"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入描述"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="handleDrawerClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
|
||||
import {
|
||||
devInfoadd,
|
||||
devInfodel,
|
||||
devInfoupd,
|
||||
devInfolist,
|
||||
devInfobyid,
|
||||
} from '@/api/tb/devinfo'
|
||||
import { islandInfobyid, islandInfolist } from '@/api/tb/islandinfo'
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
|
||||
// 设备列表
|
||||
const deviceList = ref<any[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
// 功能岛列表和映射
|
||||
const islandList = ref<any[]>([])
|
||||
const islandMap = ref<Record<number, string>>({})
|
||||
|
||||
// 查询表单
|
||||
const queryForm = reactive({
|
||||
devName: '',
|
||||
status: undefined as number | undefined,
|
||||
islandId: undefined as number | undefined,
|
||||
})
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
// 抽屉相关
|
||||
const drawerVisible = ref(false)
|
||||
const drawerTitle = ref('新增设备')
|
||||
const isEdit = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: undefined,
|
||||
devName: '',
|
||||
devModel: '',
|
||||
ipAddr: '',
|
||||
port: undefined,
|
||||
protocolType: '',
|
||||
company: '',
|
||||
devDesc: '',
|
||||
remark: '',
|
||||
status: 0, // 状态自动设置为0
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = {
|
||||
devName: [
|
||||
{ required: true, message: '请输入设备名称', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
|
||||
// 获取序号
|
||||
const getIndex = (index: number) => {
|
||||
return (pagination.pageNum - 1) * pagination.pageSize + index + 1
|
||||
}
|
||||
|
||||
// 获取状态类型
|
||||
const getStatusType = (status: number | null | undefined) => {
|
||||
if (status === 0) return 'success' // 空闲 - 绿色
|
||||
if (status === 1) return 'warning' // 运行 - 黄色
|
||||
if (status === 4) return 'danger' // 故障 - 红色
|
||||
return 'info'
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: number | null | undefined) => {
|
||||
if (status === 0) return '空闲'
|
||||
if (status === 1) return '运行'
|
||||
if (status === 4) return '故障'
|
||||
return '未知'
|
||||
}
|
||||
|
||||
// 获取功能岛列表
|
||||
const getIslandList = async () => {
|
||||
try {
|
||||
const res: any = await islandInfolist({
|
||||
pageNum: 1,
|
||||
pageSize: 1000, // 获取所有功能岛
|
||||
})
|
||||
|
||||
const data = res?.data ?? res ?? {}
|
||||
const recordsFromData =
|
||||
data.records ||
|
||||
data.list ||
|
||||
data.rows ||
|
||||
data.items ||
|
||||
(Array.isArray(data.data) ? data.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(data)
|
||||
? data
|
||||
: []
|
||||
|
||||
islandList.value = records
|
||||
|
||||
// 建立ID到名称的映射
|
||||
const map: Record<number, string> = {}
|
||||
records.forEach((island: any) => {
|
||||
if (island.id !== null && island.id !== undefined) {
|
||||
map[island.id] = island.islandName || island.name || '未命名功能岛'
|
||||
}
|
||||
})
|
||||
islandMap.value = map
|
||||
} catch (error) {
|
||||
console.error('获取功能岛列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取功能岛名称
|
||||
const getIslandName = (islandId: number | null | undefined) => {
|
||||
if (islandId === null || islandId === undefined || islandId === 0) {
|
||||
return '暂未绑定功能岛'
|
||||
}
|
||||
return islandMap.value[islandId] || `功能岛${islandId}`
|
||||
}
|
||||
|
||||
// 获取设备列表
|
||||
const getDeviceList = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params: any = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
|
||||
// 设备名称模糊查询
|
||||
if (queryForm.devName) {
|
||||
params.devName = queryForm.devName
|
||||
}
|
||||
// 设备状态精确查询
|
||||
if (queryForm.status !== undefined && queryForm.status !== null) {
|
||||
params.status = queryForm.status
|
||||
}
|
||||
// 所属功能岛精确查询
|
||||
if (queryForm.islandId !== undefined && queryForm.islandId !== null) {
|
||||
params.islandId = queryForm.islandId
|
||||
}
|
||||
|
||||
const res: any = await devInfolist(params)
|
||||
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const recordsFromData =
|
||||
data.records ||
|
||||
data.list ||
|
||||
data.rows ||
|
||||
data.items ||
|
||||
(Array.isArray(data.data) ? data.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(data)
|
||||
? data
|
||||
: []
|
||||
|
||||
const totalValue =
|
||||
data.total ?? data.count ?? data.totalCount ?? records.length ?? 0
|
||||
|
||||
deviceList.value = records
|
||||
total.value = Number(totalValue) || 0
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败:', error)
|
||||
ElMessage.error('获取设备列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetSearch = () => {
|
||||
queryForm.devName = ''
|
||||
queryForm.status = undefined
|
||||
queryForm.islandId = undefined
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 分页大小改变
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
// 当前页改变
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
// 打开新增抽屉
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
drawerTitle.value = '新增设备'
|
||||
resetForm()
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formData.id = undefined
|
||||
formData.devName = ''
|
||||
formData.devModel = ''
|
||||
formData.ipAddr = ''
|
||||
formData.port = undefined
|
||||
formData.protocolType = ''
|
||||
formData.company = ''
|
||||
formData.devDesc = ''
|
||||
formData.remark = ''
|
||||
formData.status = 0
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
// 编辑设备
|
||||
const handleEdit = async (item: any) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res: any = await devInfobyid(item.id)
|
||||
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
formData.id = data.id ?? item.id
|
||||
formData.devName = data.devName ?? ''
|
||||
formData.devModel = data.devModel ?? ''
|
||||
formData.ipAddr = data.ipAddr ?? ''
|
||||
formData.port = data.port ?? undefined
|
||||
formData.protocolType = data.protocolType ?? ''
|
||||
formData.company = data.company ?? ''
|
||||
formData.devDesc = data.devDesc ?? ''
|
||||
formData.remark = data.remark ?? ''
|
||||
formData.status = data.status ?? 0
|
||||
|
||||
isEdit.value = true
|
||||
drawerTitle.value = '编辑设备'
|
||||
drawerVisible.value = true
|
||||
} catch (error) {
|
||||
console.error('获取设备信息失败:', error)
|
||||
ElMessage.error('获取设备信息失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 删除设备
|
||||
const handleDelete = async (item: any) => {
|
||||
try {
|
||||
// 检查设备是否绑定了功能岛
|
||||
if (item.islandId && item.islandId !== 0 && item.islandId !== '0') {
|
||||
// 查询功能岛名称
|
||||
let islandName = '功能岛'
|
||||
try {
|
||||
const islandRes: any = await islandInfobyid(item.islandId)
|
||||
if (islandRes?.code === '0' || islandRes?.code === 0) {
|
||||
const islandData = islandRes.data || islandRes || {}
|
||||
islandName = islandData.islandName || islandData.name || '功能岛'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取功能岛信息失败:', error)
|
||||
}
|
||||
|
||||
await ElMessageBox.alert(
|
||||
`该设备已绑定${islandName}，请先完成解绑`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除设备"${item.devName || '未命名'}"吗？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
|
||||
loading.value = true
|
||||
const res: any = await devInfodel(item.id)
|
||||
|
||||
if (res?.code === '0' || res?.code === 0 || res?.success) {
|
||||
ElMessage.success('删除成功')
|
||||
getDeviceList()
|
||||
} else {
|
||||
ElMessage.error(res?.message || res?.msg || '删除失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除设备失败:', error)
|
||||
ElMessage.error('删除设备失败')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
submitting.value = true
|
||||
|
||||
// 构建提交数据，只包含非空字段（根据后端要求：非空则入库/更新）
|
||||
const submitData: any = {
|
||||
devName: formData.devName,
|
||||
}
|
||||
|
||||
// 添加其他字段（如果非空）
|
||||
if (formData.devModel) {
|
||||
submitData.devModel = formData.devModel
|
||||
}
|
||||
if (formData.ipAddr) {
|
||||
submitData.ipAddr = formData.ipAddr
|
||||
}
|
||||
if (formData.port !== undefined && formData.port !== null) {
|
||||
submitData.port = formData.port
|
||||
}
|
||||
if (formData.protocolType) {
|
||||
submitData.protocolType = formData.protocolType
|
||||
}
|
||||
if (formData.company) {
|
||||
submitData.company = formData.company
|
||||
}
|
||||
if (formData.devDesc) {
|
||||
submitData.devDesc = formData.devDesc
|
||||
}
|
||||
if (formData.remark) {
|
||||
submitData.remark = formData.remark
|
||||
}
|
||||
|
||||
let res: any
|
||||
if (isEdit.value && formData.id) {
|
||||
// 编辑 - 需要传入ID，其他字段可选(非空则更新)
|
||||
res = await devInfoupd({
|
||||
id: formData.id,
|
||||
...submitData,
|
||||
})
|
||||
} else {
|
||||
// 新增 - 状态自动设置为0
|
||||
res = await devInfoadd({
|
||||
...submitData,
|
||||
status: 0,
|
||||
})
|
||||
}
|
||||
|
||||
if (res?.code === '0' || res?.code === 0 || res?.success) {
|
||||
ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
|
||||
drawerVisible.value = false
|
||||
getDeviceList()
|
||||
} else {
|
||||
ElMessage.error(res?.message || res?.msg || (isEdit.value ? '编辑失败' : '新增失败'))
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== false) {
|
||||
console.error('提交失败:', error)
|
||||
ElMessage.error('提交失败，请检查表单')
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭抽屉
|
||||
const handleDrawerClose = () => {
|
||||
drawerVisible.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getIslandList().then(() => {
|
||||
getDeviceList()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.devinfo-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
1091
rc_autoplc_front/src/views/islandInfo/index.vue
Normal file
1091
rc_autoplc_front/src/views/islandInfo/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user