<template>
|
<el-dialog class="command-page-map-view-dialog" v-model="visible" :show-close="false" :close-on-click-modal="false">
|
<div class="dialog-container">
|
<div class="right-container" style="width: 100%">
|
<div class="header">
|
<span>设备共享</span>
|
<el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
|
</div>
|
|
<div class="content">
|
<div class="command-table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)">
|
<div class="command-table-content">
|
<el-table
|
ref="tableRef"
|
class="command-table"
|
:data="deviceList"
|
row-key="id"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" :reserve-selection="true" />
|
<el-table-column type="index" show-overflow-tooltip width="64" label="序号" />
|
<el-table-column prop="deviceName" show-overflow-tooltip label="设备名称" />
|
<el-table-column prop="deviceSn" show-overflow-tooltip label="设备SN" />
|
<el-table-column prop="deviceType" show-overflow-tooltip label="设备类型">
|
<template v-slot="{ row }">
|
{{ getDictLabel(row.deviceType, dictObj.deviceType) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="belongDeptName" show-overflow-tooltip label="所属部门" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
|
<div class="footer">
|
<el-button color="#2B2B4C" @click="handleCancel">取消</el-button>
|
<el-button color="#284FE3" type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit">
|
确定
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { Close } from '@element-plus/icons-vue'
|
import { ref, nextTick } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { nonDeptAreaDevicesApi, fwDevicePerShareSaveApi, fwDevicePerShareRemoveApi } from './fwDevicePerShareApi'
|
import { getDictionaryByCode } from '@/api/system/dictbiz'
|
import { getDictLabel } from '@ztzf/utils'
|
|
const emit = defineEmits(['success'])
|
const visible = defineModel() // 弹框显隐
|
const loading = ref(false) // 加载中
|
const submitting = ref(false) // 提交中
|
const deviceList = ref([]) // 设备列表
|
const tableRef = ref(null) // 表格实例
|
const selectedRows = ref([]) // 当前选中的行
|
const originalSharedIds = ref([]) // 原始已共享的设备ID集合
|
const originalSharedMap = ref({}) // 原始已共享的设备ID与shareId的映射
|
const currentDeptId = ref(null) // 当前操作的部门ID
|
const regionCode = ref(null) // 当前操作的部门code
|
const dictObj = ref({
|
deviceType: [], // 设备类型
|
})
|
|
// 获取字典
|
function getDictList() {
|
getDictionaryByCode('deviceType').then(res => {
|
dictObj.value = res.data.data
|
})
|
}
|
|
// 选中变化
|
function handleSelectionChange(rows) {
|
selectedRows.value = rows
|
}
|
|
// 关闭弹框
|
function handleCancel() {
|
visible.value = false
|
}
|
|
// 获取设备列表
|
async function getDeviceList() {
|
loading.value = true
|
try {
|
const res = await nonDeptAreaDevicesApi({ deptId: currentDeptId.value,regionCode: regionCode.value })
|
deviceList.value = res?.data?.data ?? []
|
// 记录原始已共享的设备ID和shareId映射
|
const sharedDevices = deviceList.value.filter(item => item.isShared)
|
originalSharedIds.value = sharedDevices.map(item => item.id)
|
originalSharedMap.value = sharedDevices.reduce((map, item) => {
|
map[item.id] = item.shareId
|
return map
|
}, {})
|
// 回显已共享的设备勾选状态
|
nextTick(() => {
|
deviceList.value.forEach(item => {
|
if (item.isShared) {
|
tableRef.value?.toggleRowSelection(item, true)
|
}
|
})
|
})
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 提交
|
async function handleSubmit() {
|
submitting.value = true
|
try {
|
const currentSelectedIds = selectedRows.value.map(item => item.id)
|
|
// 计算需要新增的设备（当前选中但原来未共享）
|
const toAddDevices = selectedRows.value.filter(item => !originalSharedIds.value.includes(item.id))
|
|
// 计算需要删除的设备（原来共享但当前未选中），使用shareId
|
const toRemoveShareIds = originalSharedIds.value
|
.filter(id => !currentSelectedIds.includes(id))
|
.map(id => originalSharedMap.value[id])
|
.filter(Boolean)
|
|
const promises = []
|
|
// 调用新增接口
|
if (toAddDevices.length > 0) {
|
const addData = toAddDevices.map(item => ({
|
deviceId: item.id,
|
deviceSn: item.deviceSn,
|
loanFromDeptId: item.belongDept,
|
loanToDeptId: currentDeptId.value,
|
}))
|
promises.push(fwDevicePerShareSaveApi(addData))
|
}
|
|
// 调用删除接口
|
if (toRemoveShareIds.length > 0) {
|
promises.push(fwDevicePerShareRemoveApi({ ids: toRemoveShareIds.join(',') }))
|
}
|
|
if (promises.length > 0) {
|
await Promise.all(promises)
|
ElMessage.success('保存成功')
|
} else {
|
ElMessage.info('未做任何修改')
|
}
|
|
visible.value = false
|
emit('success')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
// 打开弹框
|
async function open({ row } = {}) {
|
currentDeptId.value = row?.id
|
regionCode.value = row?.areaCode
|
selectedRows.value = []
|
getDictList()
|
await getDeviceList()
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped lang="scss"></style>
|
