联调程序升级
This commit is contained in:
guanj
@@ -1,141 +1,159 @@
|
||||
<template>
|
||||
<div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||
<OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree>
|
||||
<div class="device-manage-right" :style="{ height: pageHeight.height }">
|
||||
<div class="el-descriptions__header">
|
||||
<el-button type="primary" icon="el-icon-Sort" @click="getEnginnerDev">绑定工程 / 设备</el-button>
|
||||
</div>
|
||||
<div class="device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||
<OfficialUserTree @node-click="selectUser" @selectUser="selectUser"></OfficialUserTree>
|
||||
<div style="flex: 1" class="pt10 pr10">
|
||||
<div class="el-descriptions__header">
|
||||
<div class="el-descriptions__title">工程 / 设备列表</div>
|
||||
<el-button type="primary" icon="el-icon-Sort" @click="getEnginnerDev">绑定工程 / 设备</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 使用flex布局平均分配高度 -->
|
||||
<div class="tables-container">
|
||||
<div class="table-wrapper">
|
||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||
<vxe-column field="name" title="工程名称"></vxe-column>
|
||||
<vxe-column title="操作" width="200px">
|
||||
<template v-slot:default="scoped">
|
||||
<el-button link size="small" type="danger" @click="deleteEngineering(scoped.row)">
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<!-- 使用flex布局平均分配高度 -->
|
||||
<div class="tables-container">
|
||||
<div class="table-wrapper" :style="{ height: pageHeight1.height }">
|
||||
<vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
|
||||
<vxe-column field="name" title="工程名称"></vxe-column>
|
||||
<vxe-column title="操作" width="200px">
|
||||
<template v-slot:default="scoped">
|
||||
<el-button link size="small" type="danger" @click="deleteEngineering(scoped.row)">
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 短信配置 -->
|
||||
|
||||
<div style="width: 400px" class="pt10 pr10">
|
||||
<div class="el-descriptions__header">
|
||||
<div class="el-descriptions__title">短信配置</div>
|
||||
<el-button type="primary" icon="el-icon-Select" @click="saveConfiguration">保存</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 使用flex布局平均分配高度 -->
|
||||
<div :style="{ height: pageHeight1.height }" class="border">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
class="mt10"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:data="tableData"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.name.replace(/\([^)]*\)/, '') }}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增设备列表 -->
|
||||
<!-- <div class="device-list-section table-wrapper">
|
||||
<vxe-table v-bind="defaultAttribute" :data="deviceTableData" height="auto" style="width: 100%">
|
||||
<vxe-column field="name" title="设备名称"></vxe-column>
|
||||
<vxe-column title="操作" width="200px">
|
||||
<template v-slot:default="scoped">
|
||||
<el-button link size="small" type="danger" @click="deleteDevice(scoped.row)">
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 对话框为左右布局 -->
|
||||
<el-dialog
|
||||
v-model.trim="dialogVisible"
|
||||
draggable
|
||||
title="绑定工程 / 设备"
|
||||
class="cn-operate-dialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="dialog-content">
|
||||
<!-- 工程部分 -->
|
||||
<div class="dialog-section">
|
||||
<div class="section-header">
|
||||
<span>工程列表</span>
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="filterText"
|
||||
placeholder="搜索工程"
|
||||
clearable
|
||||
class="search-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="tableData2.filter((item: any) => {
|
||||
return item.name.includes(filterText)
|
||||
})"
|
||||
height="400px"
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="工程名称"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
<!-- 设备部分 -->
|
||||
<div class="dialog-section">
|
||||
<div class="section-header">
|
||||
<span>设备列表</span>
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="deviceFilterText"
|
||||
placeholder="搜索设备"
|
||||
clearable
|
||||
class="search-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<vxe-table
|
||||
ref="deviceTableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="deviceTableData2.filter((item: any) => {
|
||||
return item.name.includes(deviceFilterText)
|
||||
})"
|
||||
height="400px"
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="便携式设备名称"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<!-- 对话框为左右布局 -->
|
||||
<el-dialog
|
||||
v-model.trim="dialogVisible"
|
||||
draggable
|
||||
title="绑定工程 / 设备"
|
||||
class="cn-operate-dialog"
|
||||
:close-on-click-modal="false"
|
||||
|
||||
>
|
||||
<div class="dialog-content">
|
||||
<!-- 工程部分 -->
|
||||
<div class="dialog-section">
|
||||
<div class="section-header">
|
||||
<span>工程列表</span>
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="filterText"
|
||||
placeholder="搜索工程"
|
||||
clearable
|
||||
class="search-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="tableData2.filter((item: any) => {
|
||||
return item.name.includes(filterText)
|
||||
})"
|
||||
height="400px"
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="工程名称"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
<!-- 设备部分 -->
|
||||
<div class="dialog-section">
|
||||
<div class="section-header">
|
||||
<span>设备列表</span>
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="deviceFilterText"
|
||||
placeholder="搜索设备"
|
||||
clearable
|
||||
class="search-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<vxe-table
|
||||
ref="deviceTableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="deviceTableData2.filter((item: any) => {
|
||||
return item.name.includes(deviceFilterText)
|
||||
})"
|
||||
height="400px"
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="便携式设备名称"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addData">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'govern/officialUser/index'
|
||||
name: 'govern/officialUser/index'
|
||||
})
|
||||
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import OfficialUserTree from '@/components/tree/govern/officialUserTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { queryRunPortableDevByUseId ,queryUnlinkEngineeringByUseId} from '@/api/cs-device-boot/user'
|
||||
import { add, removeUserDev, queryDevByUseId } from '@/api/cs-system-boot/official'
|
||||
import { queryRunPortableDevByUseId, queryUnlinkEngineeringByUseId } from '@/api/cs-device-boot/user'
|
||||
import {
|
||||
add,
|
||||
removeUserDev,
|
||||
queryDevByUseId,
|
||||
addUserDevices,
|
||||
queryDeviceIdsByUserId
|
||||
} from '@/api/cs-system-boot/official'
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const pageHeight = mainHeight(60)
|
||||
const pageHeight1 = mainHeight(125)
|
||||
const loading = ref(true)
|
||||
|
||||
const user: any = ref({})
|
||||
@@ -148,185 +166,221 @@ const filterText = ref('') // 工程搜索文本
|
||||
const deviceFilterText = ref('') // 设备搜索文本
|
||||
const tableRef = ref()
|
||||
const deviceTableRef = ref() // 设备表格引用
|
||||
|
||||
const defaultProps = {
|
||||
children: 'devList',
|
||||
label: 'name'
|
||||
}
|
||||
const selectUser = (e: any) => {
|
||||
user.value = e
|
||||
loading.value = true
|
||||
user.value = e
|
||||
loading.value = true
|
||||
|
||||
queryDevByUseId({ userId: e.id }).then((engineeringRes) => {
|
||||
loading.value = false
|
||||
tableData.value = engineeringRes.data.engineeringList || []
|
||||
deviceTableData.value = engineeringRes.data.portableDevList || []
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
queryDevByUseId({ userId: e.id })
|
||||
.then(engineeringRes => {
|
||||
loading.value = false
|
||||
|
||||
tableData.value = engineeringRes.data.engineeringList || []
|
||||
deviceTableData.value = engineeringRes.data.portableDevList || []
|
||||
queryDeviceIdsByUserId({
|
||||
userId: user.value.id
|
||||
}).then(res => {
|
||||
treeRef.value!.setCheckedKeys(res.data, false)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getEnginnerDev = () => {
|
||||
filterText.value = ''
|
||||
deviceFilterText.value = ''
|
||||
filterText.value = ''
|
||||
deviceFilterText.value = ''
|
||||
|
||||
// 同时获取工程和设备数据
|
||||
Promise.all([
|
||||
queryUnlinkEngineeringByUseId({ userId: user.value.id }),
|
||||
queryRunPortableDevByUseId({ userId: user.value.id })
|
||||
]).then(([engineeringRes, deviceRes]) => {
|
||||
tableData2.value = engineeringRes.data || []
|
||||
deviceTableData2.value = deviceRes.data || []
|
||||
dialogVisible.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
tableRef.value?.clearCheckboxRow()
|
||||
deviceTableRef.value?.clearCheckboxRow()
|
||||
}, 0)
|
||||
})
|
||||
// 同时获取工程和设备数据
|
||||
Promise.all([
|
||||
queryUnlinkEngineeringByUseId({ userId: user.value.id }),
|
||||
queryRunPortableDevByUseId({ userId: user.value.id })
|
||||
]).then(([engineeringRes, deviceRes]) => {
|
||||
tableData2.value = engineeringRes.data || []
|
||||
deviceTableData2.value = deviceRes.data || []
|
||||
dialogVisible.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
tableRef.value?.clearCheckboxRow()
|
||||
deviceTableRef.value?.clearCheckboxRow()
|
||||
}, 0)
|
||||
})
|
||||
}
|
||||
|
||||
const deleteEngineering = (row: any) => {
|
||||
ElMessageBox.confirm('是否移出该工程?', '请确认', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 只移除工程，设备列表为空
|
||||
const form = {
|
||||
engineeringList: [row.id], // 要移除的工程ID
|
||||
portableDevList: [], // 设备列表为空
|
||||
userId: user.value.id
|
||||
}
|
||||
|
||||
removeUserDev(form).then((res: any) => {
|
||||
ElMessage.success(res.message)
|
||||
selectUser(user.value)
|
||||
ElMessageBox.confirm('是否移出该工程?', '请确认', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 只移除工程，设备列表为空
|
||||
const form = {
|
||||
engineeringList: [row.id], // 要移除的工程ID
|
||||
portableDevList: [], // 设备列表为空
|
||||
userId: user.value.id
|
||||
}
|
||||
|
||||
removeUserDev(form).then((res: any) => {
|
||||
ElMessage.success(res.message)
|
||||
selectUser(user.value)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 删除设备方法
|
||||
const deleteDevice = (row: any) => {
|
||||
console.log('删除设备', row)
|
||||
ElMessageBox.confirm('是否移出该设备?', '请确认', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 只移除设备，工程列表为空
|
||||
const form = {
|
||||
engineeringList: [], // 工程列表为空
|
||||
portableDevList: [row.id], // 要移除的设备ID
|
||||
userId: user.value.id
|
||||
}
|
||||
|
||||
removeUserDev(form).then((res: any) => {
|
||||
ElMessage.success(res.message)
|
||||
selectUser(user.value)
|
||||
ElMessageBox.confirm('是否移出该设备?', '请确认', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 只移除设备，工程列表为空
|
||||
const form = {
|
||||
engineeringList: [], // 工程列表为空
|
||||
portableDevList: [row.id], // 要移除的设备ID
|
||||
userId: user.value.id
|
||||
}
|
||||
|
||||
removeUserDev(form).then((res: any) => {
|
||||
ElMessage.success(res.message)
|
||||
selectUser(user.value)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const addData = () => {
|
||||
const selectedEngineers = tableRef.value.getCheckboxRecords()
|
||||
const selectedDevices = deviceTableRef.value.getCheckboxRecords()
|
||||
|
||||
// 如果没有选择任何项，则提示
|
||||
if (selectedEngineers.length === 0 && selectedDevices.length === 0) {
|
||||
ElMessage.warning('请至少选择一项工程或设备')
|
||||
return
|
||||
}
|
||||
|
||||
// 构造请求参数对象
|
||||
const form = {
|
||||
engineeringList: [] as any[],
|
||||
portableDevList: [] as any[],
|
||||
userId: user.value.id
|
||||
}
|
||||
|
||||
// // 处理已有的工程数据
|
||||
// tableData.value.forEach((item: any) => {
|
||||
// form.engineeringList.push(item.id)
|
||||
// })
|
||||
|
||||
// // 处理已有的设备数据
|
||||
// deviceTableData.value.forEach((item: any) => {
|
||||
// form.portableDevList.push(item.id)
|
||||
// })
|
||||
|
||||
// 添加新选择的工程
|
||||
selectedEngineers.forEach((item: any) => {
|
||||
form.engineeringList.push( item.id)
|
||||
})
|
||||
|
||||
// 添加新选择的设备
|
||||
selectedDevices.forEach((item: any) => {
|
||||
form.portableDevList.push(item.id)
|
||||
})
|
||||
|
||||
// 发送请求
|
||||
add(form).then((res: any) => {
|
||||
ElMessage.success(res.message)
|
||||
selectUser(user.value)
|
||||
dialogVisible.value = false
|
||||
})
|
||||
const selectedEngineers = tableRef.value.getCheckboxRecords()
|
||||
const selectedDevices = deviceTableRef.value.getCheckboxRecords()
|
||||
|
||||
// 如果没有选择任何项，则提示
|
||||
if (selectedEngineers.length === 0 && selectedDevices.length === 0) {
|
||||
ElMessage.warning('请至少选择一项工程或设备')
|
||||
return
|
||||
}
|
||||
|
||||
// 构造请求参数对象
|
||||
const form = {
|
||||
engineeringList: [] as any[],
|
||||
portableDevList: [] as any[],
|
||||
userId: user.value.id
|
||||
}
|
||||
|
||||
// // 处理已有的工程数据
|
||||
// tableData.value.forEach((item: any) => {
|
||||
// form.engineeringList.push(item.id)
|
||||
// })
|
||||
|
||||
// // 处理已有的设备数据
|
||||
// deviceTableData.value.forEach((item: any) => {
|
||||
// form.portableDevList.push(item.id)
|
||||
// })
|
||||
|
||||
// 添加新选择的工程
|
||||
selectedEngineers.forEach((item: any) => {
|
||||
form.engineeringList.push(item.id)
|
||||
})
|
||||
|
||||
// 添加新选择的设备
|
||||
selectedDevices.forEach((item: any) => {
|
||||
form.portableDevList.push(item.id)
|
||||
})
|
||||
|
||||
// 发送请求
|
||||
add(form).then((res: any) => {
|
||||
ElMessage.success(res.message)
|
||||
selectUser(user.value)
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
const treeRef = ref()
|
||||
// 保存短信配置
|
||||
const saveConfiguration = () => {
|
||||
// treeRef.value!.getCheckedNodes(false, false)
|
||||
let deviceIds = treeRef
|
||||
.value!.getCheckedNodes(false, false)
|
||||
.filter((item: any) => item.devList == null)
|
||||
.map((item: any) => item.id)
|
||||
if (deviceIds.length == 0) {
|
||||
return ElMessage.warning('请选择设备!')
|
||||
}
|
||||
addUserDevices({
|
||||
deviceIds: deviceIds,
|
||||
userId: user.value.id
|
||||
}).then((res: any) => {
|
||||
return ElMessage.success('短信配置成功!')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device-manage {
|
||||
display: flex;
|
||||
|
||||
&-right {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
padding: 10px 10px 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-descriptions__header {
|
||||
height: 27px;
|
||||
display: flex;
|
||||
justify-content: flex-end; /* 靠右显示 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tables-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.table-wrapper {
|
||||
&-right {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 10px 10px 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:first-child {
|
||||
// margin-bottom: 10px;
|
||||
.el-descriptions__header {
|
||||
// height: 27px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/* 靠右显示 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tables-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
&:first-child {
|
||||
// margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-descriptions__header) {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.dialog-section {
|
||||
flex: 1;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 200px;
|
||||
}
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.dialog-section {
|
||||
flex: 1;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.border {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user