|
@@ -1,14 +1,14 @@
|
|
<template>
|
|
<template>
|
|
- <div class="container">
|
|
|
|
- <el-row :gutter="20">
|
|
|
|
|
|
+ <div class="container" >
|
|
|
|
+ <el-row :gutter="20" class="equal-height-row">
|
|
<!-- 左侧设备列表 -->
|
|
<!-- 左侧设备列表 -->
|
|
- <el-col :span="12">
|
|
|
|
- <div class="card">
|
|
|
|
|
|
+ <el-col :span="12" class="col-height">
|
|
|
|
+ <div class="card left-card">
|
|
<h3>设备列表</h3>
|
|
<h3>设备列表</h3>
|
|
<div class="dept-select">
|
|
<div class="dept-select">
|
|
<el-tree-select
|
|
<el-tree-select
|
|
clearable
|
|
clearable
|
|
- v-model="formData.deptId1"
|
|
|
|
|
|
+ v-model="formData.deptId"
|
|
:data="deptList"
|
|
:data="deptList"
|
|
:props="defaultProps"
|
|
:props="defaultProps"
|
|
check-strictly
|
|
check-strictly
|
|
@@ -19,14 +19,14 @@
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<el-scrollbar height="400px">
|
|
<el-scrollbar height="400px">
|
|
- <el-checkbox-group v-model="selectedDevices" @change="handleDeviceChange">
|
|
|
|
|
|
+ <el-checkbox-group v-model="selectedDevices">
|
|
<div
|
|
<div
|
|
v-for="device in simpleDevices"
|
|
v-for="device in simpleDevices"
|
|
:key="device.id"
|
|
:key="device.id"
|
|
class="checkbox-item"
|
|
class="checkbox-item"
|
|
>
|
|
>
|
|
<el-checkbox :label="device.id">
|
|
<el-checkbox :label="device.id">
|
|
- {{ device.deviceCode }} ({{ device.deviceName }})
|
|
|
|
|
|
+ {{ device.deviceCode }} ({{ device.deviceName }}) - {{ device.deptName }}
|
|
</el-checkbox>
|
|
</el-checkbox>
|
|
</div>
|
|
</div>
|
|
</el-checkbox-group>
|
|
</el-checkbox-group>
|
|
@@ -34,12 +34,12 @@
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
|
|
|
|
- <!-- 右侧责任人选择 -->
|
|
|
|
- <el-col :span="12" >
|
|
|
|
- <div class="card" height="400px">
|
|
|
|
|
|
+ <!-- 右侧部门选择 -->
|
|
|
|
+ <el-col :span="12" class="col-height">
|
|
|
|
+ <div class="card right-card">
|
|
<h3>部门列表</h3>
|
|
<h3>部门列表</h3>
|
|
- <ContentWrap class="h-1/1" v-if="true" height="400px">
|
|
|
|
- <DeptTree2 @node-click="handleDeptNodeClick" height="400px" :radio-value="selectedDeptId"/>
|
|
|
|
|
|
+ <ContentWrap class="dept-tree-container" >
|
|
|
|
+ <DeptTree2 ref="deptTreeRef" v-model="selectedDeptId" height="100%" @update:modelValue="handleDeptChange"/>
|
|
</ContentWrap>
|
|
</ContentWrap>
|
|
|
|
|
|
<div class="action-bar">
|
|
<div class="action-bar">
|
|
@@ -54,8 +54,8 @@
|
|
<h3>待提交的关联关系</h3>
|
|
<h3>待提交的关联关系</h3>
|
|
<el-table :data="tempRelations" style="width: 100%">
|
|
<el-table :data="tempRelations" style="width: 100%">
|
|
<el-table-column prop="deviceNames" label="设备" width="200" />
|
|
<el-table-column prop="deviceNames" label="设备" width="200" />
|
|
- <el-table-column prop="status" label="状态" />
|
|
|
|
- <el-table-column prop="reason" label="调整原因" />
|
|
|
|
|
|
+ <el-table-column prop="deptName" label="部门" />
|
|
|
|
+ <el-table-column prop="deptId" label="部门id" v-if="false"/>
|
|
<el-table-column label="操作" width="120">
|
|
<el-table-column label="操作" width="120">
|
|
<template #default="{ row }">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
<el-button
|
|
@@ -90,24 +90,13 @@ import {defaultProps, handleTree} from "@/utils/tree";
|
|
import * as DeptApi from "@/api/system/dept";
|
|
import * as DeptApi from "@/api/system/dept";
|
|
import {IotDeviceApi, IotDeviceVO} from "@/api/pms/device";
|
|
import {IotDeviceApi, IotDeviceVO} from "@/api/pms/device";
|
|
import {IotDevicePersonApi, IotDevicePersonVO} from "@/api/pms/iotdeviceperson";
|
|
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";
|
|
|
|
-import {dateFormatter} from "@/utils/formatTime";
|
|
|
|
import DeptTree2 from "@/views/pms/device/DeptTree2.vue";
|
|
import DeptTree2 from "@/views/pms/device/DeptTree2.vue";
|
|
|
|
|
|
defineOptions({ name: 'ConfigDeviceAllot' })
|
|
defineOptions({ name: 'ConfigDeviceAllot' })
|
|
-
|
|
|
|
|
|
+const selectedDeptId = ref<number | string>('')
|
|
const simpleDevices = ref<IotDeviceVO[]>([])
|
|
const simpleDevices = ref<IotDeviceVO[]>([])
|
|
-const simpleUsers = ref<UserVO[]>([])
|
|
|
|
-const currentStatus = ref<string>('')
|
|
|
|
-const adjustReason = ref<string>('')
|
|
|
|
const deptList = ref<Tree[]>([]) // 树形结构
|
|
const deptList = ref<Tree[]>([]) // 树形结构
|
|
const selectedDevices = ref<number[]>([]) // 改为数组存储多选
|
|
const selectedDevices = ref<number[]>([]) // 改为数组存储多选
|
|
-// 获取当前设备对象
|
|
|
|
-const currentDevice = computed(() => {
|
|
|
|
- return simpleDevices.value.find(d => d.id === selectedDevice.value)
|
|
|
|
-})
|
|
|
|
|
|
|
|
const formData = ref({
|
|
const formData = ref({
|
|
id: undefined,
|
|
id: undefined,
|
|
@@ -116,7 +105,6 @@ const formData = ref({
|
|
brand: undefined,
|
|
brand: undefined,
|
|
model: undefined,
|
|
model: undefined,
|
|
deptId: undefined as string | undefined,
|
|
deptId: undefined as string | undefined,
|
|
- deptId1: undefined as string | undefined,
|
|
|
|
deviceStatus: undefined,
|
|
deviceStatus: undefined,
|
|
reason: '',
|
|
reason: '',
|
|
assetProperty: undefined,
|
|
assetProperty: undefined,
|
|
@@ -124,189 +112,73 @@ const formData = ref({
|
|
})
|
|
})
|
|
|
|
|
|
const queryParams = reactive({
|
|
const queryParams = reactive({
|
|
- deptId1: formData.value.deptId1,
|
|
|
|
deptId: formData.value.deptId,
|
|
deptId: formData.value.deptId,
|
|
})
|
|
})
|
|
|
|
|
|
-const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件,用于操作成功后的回调
|
|
|
|
|
|
+const deptTreeRef = ref<InstanceType<typeof DeptTree2>>()
|
|
|
|
|
|
-const userList = ref([
|
|
|
|
- { id: 'u1', name: '张三', position: '工程师', deptId: 'dept1' },
|
|
|
|
- { id: 'u2', name: '李四', position: '技术员', deptId: 'dept1' },
|
|
|
|
- { id: 'u3', name: '王五', position: '质检员', deptId: 'dept2' },
|
|
|
|
- // 更多用户...
|
|
|
|
-])
|
|
|
|
|
|
+const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件,用于操作成功后的回调
|
|
|
|
|
|
// 响应式数据
|
|
// 响应式数据
|
|
-const selectedDevice = ref<number>(0)
|
|
|
|
-const selectedDept = ref('')
|
|
|
|
-const selectedUsers = ref<number[]>([])
|
|
|
|
const tempRelations = ref<Array<{
|
|
const tempRelations = ref<Array<{
|
|
|
|
+ deviceIds: []
|
|
deviceId: number
|
|
deviceId: number
|
|
deviceNames: string
|
|
deviceNames: string
|
|
- deviceStatus: number
|
|
|
|
|
|
+ deptName: string
|
|
|
|
+ deptId: number
|
|
reason: string
|
|
reason: string
|
|
}>>([])
|
|
}>>([])
|
|
|
|
|
|
-const canSave = computed(() => {
|
|
|
|
- return !!selectedDevice.value && selectedUsers.value.length > 0
|
|
|
|
-})
|
|
|
|
-
|
|
|
|
-// 树形配置
|
|
|
|
-const treeProps = {
|
|
|
|
- label: 'name',
|
|
|
|
- children: 'children'
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-interface Dept {
|
|
|
|
- id: number
|
|
|
|
- name: string
|
|
|
|
- parentId: number
|
|
|
|
- children?: Dept[]
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-// 转换后的树形数据
|
|
|
|
-const deptTreeData = computed(() => buildDeptTree(deptList.value))
|
|
|
|
-
|
|
|
|
-// 构建树形结构的方法
|
|
|
|
-const buildDeptTree = (list: Dept[]): Dept[] => {
|
|
|
|
- const map = new Map<number, Dept>()
|
|
|
|
- const roots: Dept[] = []
|
|
|
|
-
|
|
|
|
- // 创建映射表
|
|
|
|
- list.forEach(item => {
|
|
|
|
- map.set(item.id, { ...item, children: [] })
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- // 构建树结构
|
|
|
|
- list.forEach(item => {
|
|
|
|
- const node = map.get(item.id)
|
|
|
|
- if (item.parentId === 0) {
|
|
|
|
- roots.push(node!)
|
|
|
|
- } else {
|
|
|
|
- const parent = map.get(item.parentId)
|
|
|
|
- parent?.children?.push(node!)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- return roots
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-// 方法
|
|
|
|
-const loadUsers = () => {
|
|
|
|
- selectedUsers.value = []
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-// 设备切换时清空状态
|
|
|
|
-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(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 saveCurrentRelation = () => {
|
|
|
|
- if (!selectedDevice.value || !currentDevice.value) return
|
|
|
|
- if (!currentStatus.value) {
|
|
|
|
- ElMessage.warning('请先选择设备状态')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- const statusDict = getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)
|
|
|
|
- .find(d => d.value === currentStatus.value)
|
|
|
|
-
|
|
|
|
- const newRelation: DeviceStatusRelation = {
|
|
|
|
- deviceId: selectedDevice.value,
|
|
|
|
- deviceName: `${currentDevice.value.deviceCode} (${currentDevice.value.deviceName})`,
|
|
|
|
- status: currentStatus.value,
|
|
|
|
- statusLabel: statusDict?.label || '未知状态',
|
|
|
|
- reason: adjustReason.value
|
|
|
|
- }
|
|
|
|
|
|
+watch([selectedDevices, selectedDeptId], () => {
|
|
|
|
+ updateTempRelations();
|
|
|
|
+}, {deep: true})
|
|
|
|
+
|
|
|
|
+const updateTempRelations = () => {
|
|
|
|
+ if (!selectedDeptId.value || selectedDevices.value.length === 0) return;
|
|
|
|
+
|
|
|
|
+ const treeNode = deptTreeRef.value?.treeRef?.getNode(selectedDeptId.value);
|
|
|
|
+ const deptName = treeNode?.data?.name || '未知部门';
|
|
|
|
+
|
|
|
|
+ const newRelations = selectedDevices.value
|
|
|
|
+ .map(deviceId => {
|
|
|
|
+ const device = simpleDevices.value.find(d => d.id === deviceId);
|
|
|
|
+ return device ? {
|
|
|
|
+ deviceIds: [deviceId],
|
|
|
|
+ deviceId: deviceId,
|
|
|
|
+ deviceNames: `${device.deviceCode} (${device.deviceName})`,
|
|
|
|
+ deptId: selectedDeptId.value,
|
|
|
|
+ deptName: deptName
|
|
|
|
+ } : null;
|
|
|
|
+ })
|
|
|
|
+ .filter(Boolean);
|
|
|
|
|
|
- const existIndex = tempRelations.value
|
|
|
|
- .findIndex(r => r.deviceId === selectedDevice.value)
|
|
|
|
|
|
+ tempRelations.value = [
|
|
|
|
+ ...tempRelations.value.filter(r =>
|
|
|
|
+ !selectedDevices.value.includes(r.deviceId)
|
|
|
|
+ ),
|
|
|
|
+ ...newRelations
|
|
|
|
+ ];
|
|
|
|
+};
|
|
|
|
|
|
- if (existIndex > -1) {
|
|
|
|
- tempRelations.value[existIndex] = newRelation
|
|
|
|
- } else {
|
|
|
|
- tempRelations.value.push(newRelation)
|
|
|
|
- }
|
|
|
|
|
|
+// 修改部门变更处理方法
|
|
|
|
+const handleDeptChange = (deptId) => {
|
|
|
|
+ selectedDeptId.value = deptId
|
|
|
|
+ updateTempRelations()
|
|
}
|
|
}
|
|
|
|
|
|
-// 修改 暂时 保存关联方法
|
|
|
|
-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 }) => {
|
|
const handleDeptDeviceTreeNodeClick = async (row: { [key: string]: any }) => {
|
|
emit('node-click', row)
|
|
emit('node-click', row)
|
|
- formData.value.deptId1 = row.id
|
|
|
|
|
|
+ formData.value.deptId = row.id
|
|
await getDeviceList()
|
|
await getDeviceList()
|
|
}
|
|
}
|
|
|
|
|
|
/** 获得 部门下的设备 列表 */
|
|
/** 获得 部门下的设备 列表 */
|
|
const getDeviceList = async () => {
|
|
const getDeviceList = async () => {
|
|
try {
|
|
try {
|
|
- const params = { deptId: formData.value.deptId1 }
|
|
|
|
|
|
+ const params = { deptId: formData.value.deptId }
|
|
const data = await IotDeviceApi.simpleDevices(params)
|
|
const data = await IotDeviceApi.simpleDevices(params)
|
|
simpleDevices.value = data || []
|
|
simpleDevices.value = data || []
|
|
} catch (error) {
|
|
} catch (error) {
|
|
@@ -315,84 +187,27 @@ const getDeviceList = async () => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-/** 处理 部门-人员 树 被点击 */
|
|
|
|
-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[]) => {
|
|
|
|
|
|
+const removeTempRelation = (deviceIds: number[]) => {
|
|
tempRelations.value = tempRelations.value.filter(
|
|
tempRelations.value = tempRelations.value.filter(
|
|
- r => r.deviceIds.join() !== deviceIds.join()
|
|
|
|
- )
|
|
|
|
-}
|
|
|
|
|
|
+ r => !deviceIds.includes(r.deviceId)
|
|
|
|
+ );
|
|
|
|
+ selectedDevices.value = selectedDevices.value.filter(
|
|
|
|
+ id => !deviceIds.includes(id)
|
|
|
|
+ );
|
|
|
|
+};
|
|
|
|
|
|
const submitRelations = async () => {
|
|
const submitRelations = async () => {
|
|
try {
|
|
try {
|
|
// 转换为后端需要的格式
|
|
// 转换为后端需要的格式
|
|
- const submitData = tempRelations.value.flatMap(relation => {
|
|
|
|
- return relation.deviceIds.map(deviceId => ({
|
|
|
|
- deviceId,
|
|
|
|
- userIds: relation.userIds
|
|
|
|
- }))
|
|
|
|
- })
|
|
|
|
- await IotDevicePersonApi.saveDevicePersonRelation(submitData)
|
|
|
|
|
|
+ const submitData = tempRelations.value.map(r => ({
|
|
|
|
+ deviceId: r.deviceId,
|
|
|
|
+ deptId: r.deptId,
|
|
|
|
+ reason: r.reason
|
|
|
|
+ }))
|
|
|
|
+ await IotDeviceApi.saveDeviceAllot(submitData)
|
|
// 模拟API调用
|
|
// 模拟API调用
|
|
console.log('提交数据:', submitData)
|
|
console.log('提交数据:', submitData)
|
|
- ElMessage.success('关联关系提交成功')
|
|
|
|
|
|
+ ElMessage.success('提交成功')
|
|
tempRelations.value = []
|
|
tempRelations.value = []
|
|
} catch (error) {
|
|
} catch (error) {
|
|
ElMessage.error('提交失败,请重试')
|
|
ElMessage.error('提交失败,请重试')
|
|
@@ -403,7 +218,10 @@ const submitRelations = async () => {
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
// 初始化部门树 根据选择的部门 查询设备列表 部门人员列表
|
|
// 初始化部门树 根据选择的部门 查询设备列表 部门人员列表
|
|
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
- // getList()
|
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ // 强制重新计算布局
|
|
|
|
+ window.dispatchEvent(new Event('resize'))
|
|
|
|
+ })
|
|
})
|
|
})
|
|
|
|
|
|
</script>
|
|
</script>
|
|
@@ -502,22 +320,34 @@ h3 {
|
|
flex-shrink: 0; /* 防止搜索框被压缩 */
|
|
flex-shrink: 0; /* 防止搜索框被压缩 */
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.el-scrollbar__wrap {
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.tree-container .el-tree {
|
|
|
|
+ height: 100% !important;
|
|
|
|
+}
|
|
|
|
+
|
|
/* 左侧滚动区域 */
|
|
/* 左侧滚动区域 */
|
|
-.el-scrollbar {
|
|
|
|
- flex: 1;
|
|
|
|
- min-height: 0; /* 关键:允许内容区域收缩 */
|
|
|
|
|
|
+.el-scrollbar,
|
|
|
|
+.tree-container {
|
|
|
|
+ scrollbar-width: thin;
|
|
|
|
+ scrollbar-color: #c0c4cc transparent;
|
|
}
|
|
}
|
|
|
|
|
|
-/* 右侧树形容器 */
|
|
|
|
|
|
+.left-card,
|
|
.right-card {
|
|
.right-card {
|
|
|
|
+ flex: 1;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
+ height: 100%; /* 继承父级高度 */
|
|
}
|
|
}
|
|
|
|
|
|
.dept-tree-container {
|
|
.dept-tree-container {
|
|
flex: 1;
|
|
flex: 1;
|
|
min-height: 0; /* 关键:允许内容区域收缩 */
|
|
min-height: 0; /* 关键:允许内容区域收缩 */
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
/* 确保内容区域填充高度 */
|
|
/* 确保内容区域填充高度 */
|
|
@@ -531,4 +361,15 @@ h3 {
|
|
overflow: auto;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.equal-height-row {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: stretch; /* 关键:等高布局 */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.col-height {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ min-height: 600px; /* 统一最小高度 */
|
|
|
|
+}
|
|
|
|
+
|
|
</style>
|
|
</style>
|