|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <el-row :gutter="20">
|
|
|
+ <el-row :gutter="20" class="equal-height-row">
|
|
|
<!-- 左侧设备列表 -->
|
|
|
- <el-col :span="12">
|
|
|
+ <el-col :span="12" class="col-wrapper">
|
|
|
<div class="card">
|
|
|
<h3>设备列表</h3>
|
|
|
<div class="dept-select">
|
|
@@ -34,12 +34,18 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
|
|
|
- <!-- 右侧责任人选择 -->
|
|
|
- <el-col :span="12">
|
|
|
+ <!-- 右侧设备状态 -->
|
|
|
+ <el-col :span="12" class="col-wrapper">
|
|
|
<div class="card">
|
|
|
<h3>设备状态</h3>
|
|
|
<div class="dept-select">
|
|
|
- <el-select v-model="formData.deviceStatus" placeholder="请选择" clearable>
|
|
|
+ <el-select
|
|
|
+ v-model="formData.deviceStatus"
|
|
|
+ @change="handleStatusChange"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ :disabled="selectedDevices.length === 0"
|
|
|
+ >
|
|
|
<el-option
|
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)"
|
|
|
:key="dict.label"
|
|
@@ -52,7 +58,7 @@
|
|
|
<el-input
|
|
|
v-model="formData.reason"
|
|
|
placeholder="请输入调整原因"
|
|
|
- :disabled="!selectedDevice"
|
|
|
+ :disabled="!formData.deviceStatus"
|
|
|
class="reason-input"
|
|
|
type="textarea"
|
|
|
:rows="3"
|
|
@@ -70,7 +76,11 @@
|
|
|
<div class="temp-list card">
|
|
|
<h3>待提交的关联关系</h3>
|
|
|
<el-table :data="tempRelations" style="width: 100%">
|
|
|
- <el-table-column prop="deviceNames" label="设备" width="200" />
|
|
|
+ <el-table-column prop="deviceNames" label="设备" width="200" >
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.deviceNames }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="status" label="状态" />
|
|
|
<el-table-column prop="reason" label="调整原因" />
|
|
|
<el-table-column label="操作" width="120">
|
|
@@ -78,7 +88,7 @@
|
|
|
<el-button
|
|
|
type="danger"
|
|
|
size="small"
|
|
|
- @click="removeTempRelation(row.deviceIds)"
|
|
|
+ @click="removeTempRelation(row.deviceId)"
|
|
|
>
|
|
|
删除
|
|
|
</el-button>
|
|
@@ -145,13 +155,6 @@ const queryParams = reactive({
|
|
|
|
|
|
const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件,用于操作成功后的回调
|
|
|
|
|
|
-const userList = ref([
|
|
|
- { id: 'u1', name: '张三', position: '工程师', deptId: 'dept1' },
|
|
|
- { id: 'u2', name: '李四', position: '技术员', deptId: 'dept1' },
|
|
|
- { id: 'u3', name: '王五', position: '质检员', deptId: 'dept2' },
|
|
|
- // 更多用户...
|
|
|
-])
|
|
|
-
|
|
|
// 响应式数据
|
|
|
const selectedDevice = ref<number>(0)
|
|
|
const selectedDept = ref('')
|
|
@@ -159,19 +162,11 @@ const selectedUsers = ref<number[]>([])
|
|
|
const tempRelations = ref<Array<{
|
|
|
deviceId: number
|
|
|
deviceNames: string
|
|
|
- deviceStatus: number
|
|
|
+ status: string
|
|
|
+ statusLabel: string
|
|
|
reason: string
|
|
|
}>>([])
|
|
|
|
|
|
-const canSave = computed(() => {
|
|
|
- return !!selectedDevice.value && selectedUsers.value.length > 0
|
|
|
-})
|
|
|
-
|
|
|
-// 方法
|
|
|
-const loadUsers = () => {
|
|
|
- selectedUsers.value = []
|
|
|
-}
|
|
|
-
|
|
|
// 设备切换时清空状态
|
|
|
const handleDeviceChange = () => {
|
|
|
currentStatus.value = ''
|
|
@@ -184,91 +179,47 @@ const handleDeviceChange = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 添加设备选择监听
|
|
|
-watch(selectedDevice, (newVal) => {
|
|
|
- if (newVal) {
|
|
|
- // 切换设备时清空人员选择
|
|
|
- selectedUsers.value = []
|
|
|
- // 可选:清空部门选择
|
|
|
- formData.value.deptId = undefined
|
|
|
- simpleUsers.value = []
|
|
|
+// 修改watch监听
|
|
|
+watch(selectedDevices, (newVal, oldVal) => {
|
|
|
+ // 删除取消选择的设备
|
|
|
+ const removedDevices = oldVal.filter(id => !newVal.includes(id))
|
|
|
+ removedDevices.forEach(deviceId => {
|
|
|
+ const index = tempRelations.value.findIndex(r => r.deviceId === deviceId)
|
|
|
+ if (index > -1) tempRelations.value.splice(index, 1)
|
|
|
+ })
|
|
|
+
|
|
|
+ // 自动应用当前状态到新选设备
|
|
|
+ if (formData.value.deviceStatus && formData.value.reason) {
|
|
|
+ saveCurrentRelation()
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-// 处理人员选择变化
|
|
|
-const handleUserSelectionChange = (value: number[]) => {
|
|
|
- if (!selectedDevice.value) {
|
|
|
- ElMessage.warning('请先选择设备')
|
|
|
- selectedUsers.value = []
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 获取当前选择的设备
|
|
|
- const device = simpleDevices.value.find(d => d.id === selectedDevice.value)
|
|
|
- if (!device) return
|
|
|
-
|
|
|
- // 新增或更新关联关系
|
|
|
- updateDeviceRelation(device, value)
|
|
|
-}
|
|
|
-
|
|
|
-// 保存当前关联关系
|
|
|
+// 修改保存方法
|
|
|
const saveCurrentRelation = () => {
|
|
|
- if (!selectedDevice.value || !currentDevice.value) return
|
|
|
- if (!currentStatus.value) {
|
|
|
- ElMessage.warning('请先选择设备状态')
|
|
|
- return
|
|
|
- }
|
|
|
+ if (!formData.value.deviceStatus || !formData.value.reason) return
|
|
|
|
|
|
const statusDict = getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)
|
|
|
- .find(d => d.value === currentStatus.value)
|
|
|
-
|
|
|
- const newRelation: DeviceStatusRelation = {
|
|
|
- deviceId: selectedDevice.value,
|
|
|
- deviceName: `${currentDevice.value.deviceCode} (${currentDevice.value.deviceName})`,
|
|
|
- status: currentStatus.value,
|
|
|
- statusLabel: statusDict?.label || '未知状态',
|
|
|
- reason: adjustReason.value
|
|
|
- }
|
|
|
-
|
|
|
- const existIndex = tempRelations.value
|
|
|
- .findIndex(r => r.deviceId === selectedDevice.value)
|
|
|
-
|
|
|
- if (existIndex > -1) {
|
|
|
- tempRelations.value[existIndex] = newRelation
|
|
|
- } else {
|
|
|
- tempRelations.value.push(newRelation)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 修改 暂时 保存关联方法
|
|
|
-const saveTempRelation = () => {
|
|
|
- if (!selectedDevice.value || selectedUsers.value.length === 0) return
|
|
|
-
|
|
|
- const device = simpleDevices.value.find(d => d.id === selectedDevice.value)
|
|
|
- const users = simpleUsers.value.filter(u => selectedUsers.value.includes(u.id))
|
|
|
-
|
|
|
- if (!device) return
|
|
|
-
|
|
|
- const newRelation = {
|
|
|
- deviceIds: [selectedDevice.value], // 保持数组结构但只包含单个设备
|
|
|
- deviceNames: `${device.deviceCode} (${device.deviceName})`,
|
|
|
- userIds: users.map(u => u.id),
|
|
|
- userNames: users.map(u => u.nickname).join(', ')
|
|
|
- }
|
|
|
-
|
|
|
- // 覆盖已存在的设备关联
|
|
|
-
|
|
|
- const existIndex = tempRelations.value.findIndex(
|
|
|
- r => r.deviceIds[0] === selectedDevice.value
|
|
|
- )
|
|
|
-
|
|
|
- if (existIndex > -1) {
|
|
|
- tempRelations.value[existIndex] = newRelation
|
|
|
- } else {
|
|
|
- tempRelations.value.push(newRelation)
|
|
|
- }
|
|
|
+ .find(d => d.value === formData.value.deviceStatus)
|
|
|
+
|
|
|
+ selectedDevices.value.forEach(deviceId => {
|
|
|
+ const device = simpleDevices.value.find(d => d.id === deviceId)
|
|
|
+ if (!device) return
|
|
|
+
|
|
|
+ const newRelation = {
|
|
|
+ deviceId,
|
|
|
+ deviceNames: `${device.deviceCode} (${device.deviceName})`,
|
|
|
+ status: formData.value.deviceStatus!,
|
|
|
+ statusLabel: statusDict?.label || '未知状态',
|
|
|
+ reason: formData.value.reason
|
|
|
+ }
|
|
|
|
|
|
- clearSelection()
|
|
|
+ const existIndex = tempRelations.value.findIndex(r => r.deviceId === deviceId)
|
|
|
+ if (existIndex > -1) {
|
|
|
+ tempRelations.value[existIndex] = newRelation
|
|
|
+ } else {
|
|
|
+ tempRelations.value.push(newRelation)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
/** 处理 部门-设备 树 被点击 */
|
|
@@ -290,87 +241,49 @@ const getDeviceList = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/** 处理 部门-人员 树 被点击 */
|
|
|
-const handleDeptUserTreeNodeClick = async (row: { [key: string]: any }) => {
|
|
|
- emit('node-click', row)
|
|
|
- formData.value.deptId = row.id
|
|
|
- await getUserList()
|
|
|
-}
|
|
|
-
|
|
|
-/** 获得 部门下的人员 列表 */
|
|
|
-const getUserList = async () => {
|
|
|
- try {
|
|
|
- const params = {
|
|
|
- deptId: formData.value.deptId,
|
|
|
- pageNo: 1,
|
|
|
- pageSize: 10 }
|
|
|
- const data = await UserApi.simpleUserList(params)
|
|
|
- simpleUsers.value = data || []
|
|
|
- } catch (error) {
|
|
|
- simpleUsers.value = []
|
|
|
- console.error('获取人员列表失败:', error)
|
|
|
+// 添加状态变更处理
|
|
|
+const handleStatusChange = () => {
|
|
|
+ if (selectedDevices.value.length > 0) {
|
|
|
+ saveCurrentRelation()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 更新设备关联关系
|
|
|
-const updateDeviceRelation = (device: IotDeviceVO, userIds: number[]) => {
|
|
|
- // 获取当前选择的人员
|
|
|
- const users = simpleUsers.value.filter(u => userIds.includes(u.id))
|
|
|
+// 添加多设备判断方法
|
|
|
+const isMultiDevice = (row: any) => {
|
|
|
+ return selectedDevices.value.includes(row.deviceId) && selectedDevices.value.length > 1
|
|
|
+}
|
|
|
|
|
|
- const newRelation = {
|
|
|
- deviceIds: [device.id],
|
|
|
- deviceNames: `${device.deviceCode} (${device.deviceName})`,
|
|
|
- userIds: users.map(u => u.id),
|
|
|
- userNames: users.map(u => u.nickname).join(', ')
|
|
|
- }
|
|
|
+// 修改删除方法
|
|
|
+const removeTempRelation = (deviceId: number) => {
|
|
|
+ // 从暂存列表删除
|
|
|
+ tempRelations.value = tempRelations.value.filter(r => r.deviceId !== deviceId)
|
|
|
|
|
|
- // 查找是否已存在该设备的关联
|
|
|
- const existIndex = tempRelations.value.findIndex(
|
|
|
- r => r.deviceIds[0] === device.id
|
|
|
- )
|
|
|
+ // 从选中设备中移除
|
|
|
+ selectedDevices.value = selectedDevices.value.filter(id => id !== deviceId)
|
|
|
|
|
|
- if (existIndex > -1) {
|
|
|
- // 如果没有选择人员,移除该关联
|
|
|
- if (userIds.length === 0) {
|
|
|
- tempRelations.value.splice(existIndex, 1)
|
|
|
- } else {
|
|
|
- // 更新关联
|
|
|
- tempRelations.value[existIndex] = newRelation
|
|
|
- }
|
|
|
- } else if (userIds.length > 0) {
|
|
|
- // 添加新关联
|
|
|
- tempRelations.value.push(newRelation)
|
|
|
+ // 如果当前表单状态为空,尝试恢复其他设备的状态
|
|
|
+ if (!formData.value.deviceStatus && tempRelations.value.length > 0) {
|
|
|
+ const firstRelation = tempRelations.value[0]
|
|
|
+ formData.value.deviceStatus = firstRelation.status
|
|
|
+ formData.value.reason = firstRelation.reason
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const clearSelection = () => {
|
|
|
- selectedDevice.value = ''
|
|
|
- selectedUsers.value = []
|
|
|
- selectedDept.value = ''
|
|
|
-}
|
|
|
-
|
|
|
-const removeTempRelation = (deviceIds: string[]) => {
|
|
|
- tempRelations.value = tempRelations.value.filter(
|
|
|
- r => r.deviceIds.join() !== deviceIds.join()
|
|
|
- )
|
|
|
-}
|
|
|
-
|
|
|
+// 提交时处理数据
|
|
|
const submitRelations = async () => {
|
|
|
try {
|
|
|
- // 转换为后端需要的格式
|
|
|
- const submitData = tempRelations.value.flatMap(relation => {
|
|
|
- return relation.deviceIds.map(deviceId => ({
|
|
|
- deviceId,
|
|
|
- userIds: relation.userIds
|
|
|
- }))
|
|
|
- })
|
|
|
- await IotDevicePersonApi.saveDevicePersonRelation(submitData)
|
|
|
- // 模拟API调用
|
|
|
- console.log('提交数据:', submitData)
|
|
|
- ElMessage.success('关联关系提交成功')
|
|
|
+ // 转换数据结构
|
|
|
+ const submitData = tempRelations.value.map(r => ({
|
|
|
+ deviceId: r.deviceId,
|
|
|
+ status: r.status,
|
|
|
+ reason: r.reason
|
|
|
+ }))
|
|
|
+
|
|
|
+ await IotDeviceApi.saveDeviceStatuses(submitData)
|
|
|
+ ElMessage.success('提交成功')
|
|
|
tempRelations.value = []
|
|
|
} catch (error) {
|
|
|
- ElMessage.error('提交失败,请重试')
|
|
|
+ ElMessage.error('提交失败')
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -389,11 +302,10 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
- border: 1px solid #ebeef5;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- background: white;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.list-item {
|
|
@@ -401,6 +313,11 @@ onMounted(async () => {
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
}
|
|
|
|
|
|
+.col-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
.dept-select {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
@@ -447,4 +364,24 @@ h3 {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
+
|
|
|
+.equal-height-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.el-scrollbar {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.reason-input {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加多设备标签样式 */
|
|
|
+.el-tag {
|
|
|
+ margin-left: 8px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|