|
|
@@ -60,12 +60,27 @@
|
|
|
<el-table-column label="成套名称" align="center" prop="name" />
|
|
|
|
|
|
<el-table-column label="描述" align="center" prop="remark" />
|
|
|
- <el-table-column label="设备数量" align="center" prop="deviceCount" />
|
|
|
- <el-table-column label="主设备" align="center" prop="mainDeviceName" />
|
|
|
- <el-table-column label="设备详情" align="center" prop="deviceDetails" />
|
|
|
+ <el-table-column label="设备数量" align="center" prop="deviceCount">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ (scope.row.details && scope.row.details.length) || 0 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="主设备" align="center" prop="mainDeviceName">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ scope.row.details.filter((item) => item.ifMaster)[0].deviceName || '无' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="设备详情" align="center" prop="deviceDetails">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" @click="handleDeviceDetail(scope.row)">
|
|
|
+ 查看
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column :label="t('devicePerson.operation')" align="center" min-width="120px">
|
|
|
<template #default="scope">
|
|
|
<el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
|
|
|
+ <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -82,6 +97,11 @@
|
|
|
|
|
|
<!-- 新增/编辑成套设备对话框 -->
|
|
|
<el-dialog :title="dialogTitle" v-model="dialogVisible" width="800px" @close="cancel">
|
|
|
+ <template #header>
|
|
|
+ <div class="my-header" style="padding-bottom: 20px">
|
|
|
+ <span>{{ dialogTitle }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
|
|
<el-form-item label="成套名称" prop="name">
|
|
|
<el-input v-model="formData.name" placeholder="请输入成套名称" />
|
|
|
@@ -115,26 +135,36 @@
|
|
|
:filter-method="filterDeviceMethod"
|
|
|
filter-placeholder="请输入设备名称"
|
|
|
@change="rightDeviceChange"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 已选择的设备列表 -->
|
|
|
- <div v-if="selectedDevices.length > 0" class="mt-4">
|
|
|
- <div class="mb-2 font-medium">设置主设备：</div>
|
|
|
-
|
|
|
- <div
|
|
|
- v-for="device in selectedDevices"
|
|
|
- :key="device.id"
|
|
|
- class="flex items-center justify-between p-2 bg-gray-50 rounded mb-1"
|
|
|
>
|
|
|
- <span class="pr-2">{{ device.label }}</span>
|
|
|
-
|
|
|
- <el-radio v-model="mainDeviceId" :label="device.key" @change="setMainDevice">
|
|
|
- 设为主设备
|
|
|
- </el-radio>
|
|
|
- </div>
|
|
|
+ <template #left-empty>
|
|
|
+ <el-empty :image-size="60" description="暂无数据" />
|
|
|
+ </template>
|
|
|
+ <template #right-empty>
|
|
|
+ <el-empty :image-size="60" description="暂未选择设备" />
|
|
|
+ </template>
|
|
|
+ </el-transfer>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <div v-if="selectedDevices.length > 0" class="mt-4">
|
|
|
+ <el-form-item label="设置主设备" prop="mainDevice">
|
|
|
+ <el-select
|
|
|
+ v-model="mainDeviceId"
|
|
|
+ placeholder="请选择主设备"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ style="width: 200px"
|
|
|
+ @change="setMainDevice"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="device in selectedDevices"
|
|
|
+ :key="device.id"
|
|
|
+ :label="device.label"
|
|
|
+ :value="device.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
</el-form>
|
|
|
|
|
|
<template #footer>
|
|
|
@@ -142,6 +172,15 @@
|
|
|
<el-button type="primary" @click="submit">确 定</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 设备详情对话框 -->
|
|
|
+ <el-dialog v-model="dialogDetailVisible" title="设备详情" width="800">
|
|
|
+ <el-table :data="deviceList">
|
|
|
+ <el-table-column property="date" label="设备名称" width="150" />
|
|
|
+ <el-table-column property="name" label="Name" width="200" />
|
|
|
+ <el-table-column property="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
@@ -149,6 +188,8 @@ import { IotDeviceApi } from '@/api/pms/device'
|
|
|
import DeptTree from '@/views/system/user/DeptTree.vue'
|
|
|
import { defaultProps, handleTree } from '@/utils/tree'
|
|
|
import * as DeptApi from '@/api/system/dept'
|
|
|
+import { ElMessageBox } from 'element-plus'
|
|
|
+import { get } from 'axios'
|
|
|
const deptList = ref<Tree[]>([]) // 树形结构
|
|
|
|
|
|
defineOptions({ name: 'IotDeviceComplete' })
|
|
|
@@ -176,6 +217,9 @@ const dialogVisible = ref(false)
|
|
|
const dialogTitle = ref('')
|
|
|
const isEdit = ref(false)
|
|
|
|
|
|
+let dialogDetailVisible = ref(false)
|
|
|
+const deviceList = ref([])
|
|
|
+
|
|
|
// 表单相关
|
|
|
const formRef = ref()
|
|
|
const formData = ref({
|
|
|
@@ -316,23 +360,56 @@ const handleEdit = (row) => {
|
|
|
isEdit.value = true
|
|
|
dialogTitle.value = '编辑成套设备'
|
|
|
|
|
|
- console.log('row>>>>>>>>>>>>>>>>', row)
|
|
|
-
|
|
|
formData.value = {
|
|
|
...row
|
|
|
}
|
|
|
|
|
|
- deviceOptions.value = row.details.map((item) => ({
|
|
|
- key: item.deviceId,
|
|
|
- label: `${item.deviceName} (${item.deviceCode})`,
|
|
|
- ...item
|
|
|
- }))
|
|
|
+ console.log('row>>>>>>>>>>>>>>>>>>>>>>', row)
|
|
|
+
|
|
|
+ // deviceOptions.value = row.details.map((item) => ({
|
|
|
+ // key: item.deviceId,
|
|
|
+ // label: `${item.deviceName} (${item.deviceCode})`,
|
|
|
+ // ...item
|
|
|
+ // }))
|
|
|
+
|
|
|
+ getDeviceList(row.deptId)
|
|
|
|
|
|
selectedDeviceIds.value = row.details.map((item) => item.deviceId)
|
|
|
mainDeviceId.value = row.details.find((item) => item.ifMaster)?.deviceId || ''
|
|
|
+ selectedDevices.value = deviceOptions.value.filter((item) =>
|
|
|
+ selectedDeviceIds.value.includes(item.id)
|
|
|
+ )
|
|
|
// updateSelectedDevices()
|
|
|
dialogVisible.value = true
|
|
|
}
|
|
|
+//删除成套
|
|
|
+const handleDelete = async (id: number) => {
|
|
|
+ ElMessageBox.confirm('确定要删除该成套设备吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ try {
|
|
|
+ await IotDeviceApi.deleteIotDeviceSet(id)
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ getList()
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // 取消操作
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 查看设备详情
|
|
|
+const handleDeviceDetail = (row) => {
|
|
|
+ console.log('查看设备详情', row)
|
|
|
+ // 这里可以打开一个对话框或者路由跳转来显示设备详情
|
|
|
+ dialogDetailVisible.value = true
|
|
|
+ deviceList.value = row.details || []
|
|
|
+}
|
|
|
|
|
|
// 重置表单
|
|
|
const resetForm = () => {
|
