pms-iot-vue/src/views/pms/device/ConfigDeviceStatus.vue

<template>
  <div class="container">
    <el-row :gutter="20" class="equal-height-row">
      <!-- 左侧设备列表 -->
      <el-col :span="12" class="col-wrapper">
        <div class="card">
          <h3>设备列表</h3>
          <div class="dept-select">
            <el-tree-select
              clearable
              v-model="formData.deptId1"
              :data="deptList"
              :props="defaultProps"
              check-strictly
              node-key="id"
              filterable
              placeholder="请选择设备所属部门"
              @node-click="handleDeptDeviceTreeNodeClick"
            />
          </div>
          <el-scrollbar height="400px">
            <el-checkbox-group v-model="selectedDevices"  @change="handleDeviceChange">
              <div
                v-for="device in simpleDevices"
                :key="device.id"
                class="checkbox-item"
              >
                <el-checkbox :label="device.id">
                  {{ device.deviceCode }} ({{ device.deviceName }})
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
      </el-col>

      <!-- 右侧设备状态 -->
      <el-col :span="12" class="col-wrapper">
        <div class="card">
          <h3>设备状态</h3>
          <div class="dept-select">
            <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"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </div>

          <el-input
            v-model="formData.reason"
            placeholder="请输入调整原因"
            :disabled="!formData.deviceStatus"
            class="reason-input"
            type="textarea"
            :rows="3"
            @blur="saveCurrentRelation"
          />

          <div class="action-bar">

          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 暂存关联列表 -->
    <div class="temp-list card">
      <h3>待提交的关联关系</h3>
      <el-table :data="tempRelations" style="width: 100%">
        <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">
          <template #default="{ row }">
            <el-button
              type="danger"
              size="small"
              @click="removeTempRelation(row.deviceId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="submit-area">
        <el-button
          type="primary"
          size="large"
          @click="submitRelations"
          :disabled="tempRelations.length === 0"
        >
          提交全部关联关系
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {defaultProps, handleTree} from "@/utils/tree";
import * as DeptApi from "@/api/system/dept";
import {IotDeviceApi, IotDeviceVO} from "@/api/pms/device";
import {IotDevicePersonApi, IotDevicePersonVO} from "@/api/pms/iotdeviceperson";
import * as UserApi from "@/api/system/user";
import {simpleUserList, UserVO} from "@/api/system/user";
import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";

defineOptions({ name: 'ConfigDeviceStatus' })

const simpleDevices = ref<IotDeviceVO[]>([])
const simpleUsers = ref<UserVO[]>([])
const currentStatus = ref<string>('')
const adjustReason = ref<string>('')
const deptList = ref<Tree[]>([]) // 树形结构
const selectedDevices = ref<number[]>([]) // 改为数组存储多选
// 获取当前设备对象
const currentDevice = computed(() => {
  return simpleDevices.value.find(d => d.id === selectedDevice.value)
})

const formData = ref({
  id: undefined,
  deviceCode: undefined,
  deviceName: undefined,
  brand: undefined,
  model: undefined,
  deptId: undefined as string | undefined,
  deptId1: undefined as string | undefined,
  deviceStatus: undefined,
  reason: '',
  assetProperty: undefined,
  picUrl: undefined,
})

const queryParams = reactive({
  deptId1: formData.value.deptId1,
  deptId: formData.value.deptId,
})

const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件，用于操作成功后的回调

// 响应式数据
const selectedDevice = ref<number>(0)
const selectedDept = ref('')
const selectedUsers = ref<number[]>([])
const tempRelations = ref<Array<{
  deviceId: number
  deviceNames: string
  status: string
  statusLabel: string
  reason: string
}>>([])

// 设备切换时清空状态
const handleDeviceChange = () => {
  currentStatus.value = ''
  adjustReason.value = ''
  // 尝试从暂存记录恢复数据
  const existRecord = tempRelations.value.find(r => r.deviceId === selectedDevice.value)
  if (existRecord) {
    currentStatus.value = existRecord.deviceStatus
    adjustReason.value = existRecord.reason
  }
}

// 修改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 saveCurrentRelation = () => {
  if (!formData.value.deviceStatus || !formData.value.reason) return

  const statusDict = getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)
    .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
    }

    const existIndex = tempRelations.value.findIndex(r => r.deviceId === deviceId)
    if (existIndex > -1) {
      tempRelations.value[existIndex] = newRelation
    } else {
      tempRelations.value.push(newRelation)
    }
  })
}

/** 处理 部门-设备 树 被点击 */
const handleDeptDeviceTreeNodeClick = async (row: { [key: string]: any }) => {
  emit('node-click', row)
  formData.value.deptId1 = row.id
  await getDeviceList()
}

/** 获得 部门下的设备 列表 */
const getDeviceList = async () => {
  try {
    const params = { deptId: formData.value.deptId1 }
    const data = await IotDeviceApi.simpleDevices(params)
    simpleDevices.value = data || []
  } catch (error) {
    simpleDevices.value = []
    console.error('获取设备列表失败:', error)
  }
}

// 添加状态变更处理
const handleStatusChange = () => {
  if (selectedDevices.value.length > 0) {
    saveCurrentRelation()
  }
}

// 添加多设备判断方法
const isMultiDevice = (row: any) => {
  return selectedDevices.value.includes(row.deviceId) && selectedDevices.value.length > 1
}

// 修改删除方法
const removeTempRelation = (deviceId: number) => {
  // 从暂存列表删除
  tempRelations.value = tempRelations.value.filter(r => r.deviceId !== deviceId)

  // 从选中设备中移除
  selectedDevices.value = selectedDevices.value.filter(id => id !== deviceId)

  // 如果当前表单状态为空，尝试恢复其他设备的状态
  if (!formData.value.deviceStatus && tempRelations.value.length > 0) {
    const firstRelation = tempRelations.value[0]
    formData.value.deviceStatus = firstRelation.status
    formData.value.reason = firstRelation.reason
  }
}

// 提交时处理数据
const submitRelations = async () => {
  try {
    // 转换数据结构
    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('提交失败')
  }
}

/** 初始化 */
onMounted(async () => {
  // 初始化部门树 根据选择的部门 查询设备列表 部门人员列表
  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
  // getList()
})

</script>

<style scoped>
.container {
  padding: 20px;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.list-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.col-wrapper {
  display: flex;
  flex-direction: column;
}

.dept-select {
  margin-bottom: 20px;
}

.user-list {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
}

.action-bar {
  text-align: right;
}

.temp-list {
  margin-top: 20px;
}

.submit-area {
  margin-top: 20px;
  text-align: center;
}

h3 {
  margin: 0 0 15px 0;
  color: #303133;
}

.radio-item {
  width: 100%;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.radio-item .el-radio {
  width: 100%;
  height: 100%;
}

.radio-item .el-radio__label {
  display: block;
  white-space: nowrap;
  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>