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

<template>
  <div class="container">
    <el-row :gutter="20" class="equal-height-row">
      <!-- 左侧设备列表 -->
      <el-col :span="12">
        <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-radio-group v-model="selectedDevice">
              <div
                v-for="device in simpleDevices"
                :key="device.id"
                class="radio-item"
              >
                <el-radio :label="device.id">
                  {{ device.deviceCode }} ({{ device.deviceName }}) - {{ device.devicePersons }}
                </el-radio>
              </div>
            </el-radio-group>
          </el-scrollbar>
        </div>
      </el-col>

      <!-- 右侧责任人选择 -->
      <el-col :span="12">
        <div class="card">
          <h3>责任人关联设置</h3>
          <div class="dept-select">
            <el-tree-select
              clearable
              v-model="formData.deptId"
              :data="deptList"
              :props="defaultProps"
              check-strictly
              node-key="id"
              filterable
              placeholder="请选择人员所属部门"
              @node-click="handleDeptUserTreeNodeClick"
            />
          </div>

          <el-scrollbar height="400px">
            <el-checkbox-group v-model="selectedUsers" @change="handleUserSelectionChange">
              <div
                v-for="user in simpleUsers"
                :key="user.id"
                class="list-item"
              >
                <el-checkbox :label="user.id">
                  {{ user.nickname }} ({{ user.deptName }})
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-scrollbar>
        </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" />
        <el-table-column prop="userNames" label="关联责任人" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="danger"
              size="small"
              @click="removeTempRelation(row.deviceIds)"
            >
              删除
            </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";

defineOptions({ name: 'ConfigDevicePerson' })

// 模拟数据
const deviceList = ref([
  { id: 'd1', name: '数控机床', type: '生产设备' },
  { id: 'd2', name: '检测仪', type: '检测设备' },
  { id: 'd3', name: '包装机', type: '包装设备' },
  // 更多设备...
])

const simpleDevices = ref<IotDeviceVO[]>([])
const simpleUsers = ref<UserVO[]>([])

const deptList = ref<Tree[]>([]) // 树形结构

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,
  assetProperty: undefined,
  picUrl: undefined,
})

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

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

const departmentList = ref([
  { id: 'dept1', name: '生产部' },
  { id: 'dept2', name: '质检部' },
  { id: 'dept3', name: '设备部' },
])

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('')
const selectedUsers = ref<number[]>([])
const tempRelations = ref<Array<{
  deviceIds: number[]
  deviceNames: string
  userIds: number[]
  userNames: string
}>>([])

// 计算属性
const filteredUsers = computed(() => {
  return userList.value.filter(user => user.deptId === selectedDept.value)
})

const canSave = computed(() => {
  return !!selectedDevice.value && selectedUsers.value.length > 0
})

// 方法
const loadUsers = () => {
  selectedUsers.value = []
}

// 添加设备选择监听
watch(selectedDevice, (newVal) => {
  if (newVal) {
    // 切换设备时清空人员选择
    selectedUsers.value = []
    // 可选：清空部门选择
    formData.value.deptId = undefined
    simpleUsers.value = []
  }
})

// 处理人员选择变化
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 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)
  }

  clearSelection()
}

/** 处理 部门-设备 树 被点击 */
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 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 updateDeviceRelation = (device: IotDeviceVO, userIds: number[]) => {
  // 获取当前选择的人员
  const users = simpleUsers.value.filter(u => userIds.includes(u.id))

  const newRelation = {
    deviceIds: [device.id],
    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] === device.id
  )

  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)
  }
}

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('提交成功')
    tempRelations.value = []
  } catch (error) {
    ElMessage.error('提交失败，请重试')
  }
}

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

</script>

<style scoped>
.equal-height-row {
  display: flex;
  align-items: stretch;
}

.container {
  padding: 20px;
}

.card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}

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

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

.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;
}
</style>