personalhubs/src/views/pc/device/components/cooperationaa.vue

<template>
  <el-dialog
    v-model="visible"
    title="协作设置"
    width="400px"
    :before-close="handleClose"
    @close="handleClose"
  >
    <div class="cooperation-dialog">
      <div class="form-item">
        <label class="form-label">协作用户</label>
        <el-input
          v-model="cooperationUserName"
          placeholder="请输入协作用户"
          clearable
        />
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancelCooperation" class="cancel-btn">
          取消协作
        </el-button>
        <el-button type="primary" @click="handleSave" class="save-btn">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getsceneResourceList, saveCooperationUser, deleteCooperationUser } from '@/api/camera/index'

defineOptions({
  name: 'CooperationModal'
})

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  item: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'refresh'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const cooperationUserName = ref('')

// 监听item变化，设置初始值
watch(() => props.item, (newItem) => {
  if (newItem && newItem.cooperationUserName) {
    cooperationUserName.value = newItem.cooperationUserName
  } else {
    cooperationUserName.value = ''
  }
}, { immediate: true })

// 关闭弹窗
const handleClose = () => {
  visible.value = false
}

// 取消协作
const handleCancelCooperation = async () => {
  if (props.item.cooperationUserName) {
    try {
      await deleteCooperationUser({
        cameraId: props.item.id
      })
      ElMessage.success('取消协作成功')
      emit('refresh')
      handleClose()
    } catch (error) {
      console.error('取消协作失败:', error)
      ElMessage.error('取消协作失败')
    }
  } else {
    handleClose()
  }
}

// 保存协作
const handleSave = async () => {
  if (!cooperationUserName.value.trim()) {
    ElMessage.warning('请输入协作用户')
    return
  }

  try {
    // 先获取场景资源列表
    const resourceResponse = await getsceneResourceList({
      cameraId: props.item.id,
      sceneNum: false,
      type: 2
    })

    // 获取所有资源ID
    const resourceIds = resourceResponse.include ? resourceResponse.include.map((item) => item.id).join(',') : ''
    console.log(resourceIds)
    // 保存协作用户
    await saveCooperationUser({
      cameraId: props.item.id,
      resourceIds: resourceIds,
      userName: cooperationUserName.value.trim()
    })

    ElMessage.success('保存成功')
    emit('refresh')
    handleClose()
  } catch (error) {
    console.error('保存协作失败:', error)
    ElMessage.error('保存协作失败')
  }
}
</script>

<style lang="less" scoped>
.cooperation-dialog {
  .form-item {
    margin-bottom: 20px;
    
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  
  .cancel-btn {
    background: #f5f5f5;
    border-color: #d9d9d9;
    color: #666;
    
    &:hover {
      background: #e6e6e6;
      border-color: #bfbfbf;
    }
  }
  
  .save-btn {
    background: #15bec8;
    border-color: #15bec8;
    
    &:hover {
      background: #13a8b0;
      border-color: #13a8b0;
    }
  }
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #e5e5e5;
  
  .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  .el-dialog__headerbtn {
    top: 20px;
    right: 20px;
  }
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 10px 20px 20px;
  border-top: 1px solid #e5e5e5;
}
</style>