ConfigDeviceAllot.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <template>
  2. <div class="container" >
  3. <el-row :gutter="20" class="equal-height-row">
  4. <!-- 左侧设备列表 -->
  5. <el-col :span="12" class="col-height">
  6. <div class="card left-card">
  7. <h3>设备列表</h3>
  8. <div class="dept-select">
  9. <el-tree-select
  10. clearable
  11. v-model="formData.deptId"
  12. :data="deptList"
  13. :props="defaultProps"
  14. check-strictly
  15. node-key="id"
  16. filterable
  17. placeholder="请选择设备所属部门"
  18. @node-click="handleDeptDeviceTreeNodeClick"
  19. />
  20. </div>
  21. <el-scrollbar height="500px">
  22. <el-checkbox-group v-model="selectedDevices">
  23. <div
  24. v-for="device in simpleDevices"
  25. :key="device.id"
  26. class="checkbox-item"
  27. >
  28. <el-checkbox :label="device.id">
  29. {{ device.deviceCode }} ({{ device.deviceName }}) - {{ device.deptName }}
  30. </el-checkbox>
  31. </div>
  32. </el-checkbox-group>
  33. </el-scrollbar>
  34. </div>
  35. </el-col>
  36. <!-- 右侧部门选择 -->
  37. <el-col :span="12" class="col-height">
  38. <div class="card right-card">
  39. <h3>部门列表</h3>
  40. <ContentWrap class="dept-tree-container" height="400px">
  41. <DeptTree2 ref="deptTreeRef" v-model="selectedDeptId" height="100%" @update:modelValue="handleDeptChange"/>
  42. </ContentWrap>
  43. </div>
  44. </el-col>
  45. </el-row>
  46. <!-- 暂存关联列表 -->
  47. <div class="submit-area">
  48. <div class="card">
  49. <el-input
  50. v-model="formData.reason"
  51. placeholder="请输入调拨原因"
  52. class="reason-input"
  53. type="textarea"
  54. :rows="3"
  55. @input="updateTempRelations"
  56. />
  57. </div>
  58. <el-button
  59. type="primary"
  60. size="large"
  61. @click="submitRelations"
  62. :disabled="tempRelations.length === 0"
  63. >
  64. 保 存
  65. </el-button>
  66. <div class="temp-list card" v-if="false">
  67. <h3>设备调拨记录</h3>
  68. <el-table :data="tempRelations" style="width: 100%">
  69. <el-table-column prop="deviceNames" label="设备" width="200" />
  70. <el-table-column prop="deptName" label="部门" />
  71. <el-table-column prop="deptId" label="部门id" v-if="false"/>
  72. <el-table-column prop="reason" label="调拨原因" />
  73. <el-table-column label="操作" width="120">
  74. <template #default="{ row }">
  75. <el-button
  76. type="danger"
  77. size="small"
  78. @click="removeTempRelation(row.deviceId)"
  79. >
  80. 删除
  81. </el-button>
  82. </template>
  83. </el-table-column>
  84. </el-table>
  85. </div>
  86. </div>
  87. </div>
  88. </template>
  89. <script setup lang="ts">
  90. import { ref, computed } from 'vue'
  91. import { ElMessage } from 'element-plus'
  92. import {defaultProps, handleTree} from "@/utils/tree";
  93. import * as DeptApi from "@/api/system/dept";
  94. import {IotDeviceApi, IotDeviceVO} from "@/api/pms/device";
  95. import DeptTree2 from "@/views/pms/device/DeptTree2.vue";
  96. defineOptions({ name: 'ConfigDeviceAllot' })
  97. const selectedDeptId = ref<number | string>('')
  98. const simpleDevices = ref<IotDeviceVO[]>([])
  99. const deptList = ref<Tree[]>([]) // 树形结构
  100. const selectedDevices = ref<number[]>([]) // 改为数组存储多选
  101. const formData = ref({
  102. id: undefined,
  103. deviceCode: undefined,
  104. deviceName: undefined,
  105. brand: undefined,
  106. model: undefined,
  107. deptId: undefined as string | undefined,
  108. deviceStatus: undefined,
  109. reason: '',
  110. assetProperty: undefined,
  111. picUrl: undefined,
  112. })
  113. const queryParams = reactive({
  114. deptId: formData.value.deptId,
  115. })
  116. const deptTreeRef = ref<InstanceType<typeof DeptTree2>>()
  117. const emit = defineEmits(['success', 'node-click']) // 定义 success 树点击 事件,用于操作成功后的回调
  118. // 响应式数据
  119. const tempRelationsMap = ref(new Map<number, {
  120. deviceId: number
  121. deviceNames: string
  122. deptId: number
  123. deptName: string
  124. reason: string
  125. }>())
  126. // 计算属性转换 Map 为数组
  127. const tempRelations = computed(() =>
  128. Array.from(tempRelationsMap.value.values())
  129. )
  130. const updateTempRelations = () => {
  131. if (!selectedDeptId.value) {
  132. // 未选择部门时清除所有关联
  133. tempRelationsMap.value.clear()
  134. return
  135. }
  136. // 获取部门信息
  137. const treeNode = deptTreeRef.value?.treeRef?.getNode(selectedDeptId.value)
  138. const deptName = treeNode?.data?.name || '未知部门'
  139. // 创建当前应该存在的设备集合
  140. const currentDeviceIds = new Set(selectedDevices.value)
  141. // 清理无效关联(包含:1.当前部门外的关联 2.未选中的设备)
  142. Array.from(tempRelationsMap.value.entries()).forEach(([deviceId, relation]) => {
  143. if (relation.deptId !== selectedDeptId.value || !currentDeviceIds.has(deviceId)) {
  144. tempRelationsMap.value.delete(deviceId)
  145. }
  146. })
  147. // 添加/更新当前选中设备的关联
  148. selectedDevices.value.forEach(deviceId => {
  149. const device = simpleDevices.value.find(d => d.id === deviceId)
  150. if (device) {
  151. tempRelationsMap.value.set(deviceId, {
  152. deviceId,
  153. deviceNames: `${device.deviceCode} (${device.deviceName})`,
  154. deptId: selectedDeptId.value as number,
  155. deptName,
  156. reason: formData.value.reason
  157. })
  158. }
  159. })
  160. }
  161. // 添加设备选择监听
  162. watch([selectedDevices, selectedDeptId], () => {
  163. updateTempRelations();
  164. }, {deep: true, immediate: true, debounce: 100})
  165. // 修改部门变更处理方法
  166. const handleDeptChange = (deptId) => {
  167. selectedDeptId.value = deptId
  168. updateTempRelations()
  169. }
  170. /** 处理 部门-设备 树 被点击 */
  171. const handleDeptDeviceTreeNodeClick = async (row: { [key: string]: any }) => {
  172. emit('node-click', row)
  173. formData.value.deptId = row.id
  174. selectedDevices.value = []
  175. await getDeviceList()
  176. }
  177. /** 获得 部门下的设备 列表 */
  178. const getDeviceList = async () => {
  179. try {
  180. const params = { deptId: formData.value.deptId }
  181. const data = await IotDeviceApi.simpleDevices(params)
  182. simpleDevices.value = data || []
  183. } catch (error) {
  184. simpleDevices.value = []
  185. console.error('获取设备列表失败:', error)
  186. }
  187. }
  188. const removeTempRelation = (deviceId: number) => {
  189. tempRelationsMap.value.delete(deviceId)
  190. selectedDevices.value = selectedDevices.value.filter(id => id !== deviceId)
  191. };
  192. const submitRelations = async () => {
  193. try {
  194. // 转换为后端需要的格式
  195. const submitData = tempRelations.value.map(r => ({
  196. deviceId: r.deviceId,
  197. deptId: r.deptId,
  198. reason: r.reason
  199. }))
  200. await IotDeviceApi.saveDeviceAllot(submitData)
  201. // 模拟API调用
  202. console.log('提交数据:', submitData)
  203. ElMessage.success('提交成功')
  204. tempRelations.value = []
  205. } catch (error) {
  206. ElMessage.error('提交失败,请重试')
  207. }
  208. }
  209. /** 初始化 */
  210. onMounted(async () => {
  211. // 初始化部门树 根据选择的部门 查询设备列表 部门人员列表
  212. deptList.value = handleTree(await DeptApi.getSimpleDeptList())
  213. nextTick(() => {
  214. // 强制重新计算布局
  215. window.dispatchEvent(new Event('resize'))
  216. })
  217. })
  218. </script>
  219. <style scoped>
  220. .container {
  221. padding: 20px;
  222. }
  223. .card {
  224. border: 1px solid #ebeef5;
  225. border-radius: 4px;
  226. padding: 20px;
  227. margin-bottom: 20px;
  228. background: white;
  229. display: flex;
  230. flex-direction: column;
  231. height: 100%; /* 根据实际需要调整整体高度 */
  232. box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  233. transition: box-shadow 0.2s;
  234. }
  235. .card:hover {
  236. box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  237. }
  238. .list-item {
  239. padding: 8px 12px;
  240. border-bottom: 1px solid #f0f0f0;
  241. }
  242. .dept-select {
  243. margin-bottom: 20px;
  244. }
  245. .user-list {
  246. margin-bottom: 20px;
  247. border: 1px solid #ebeef5;
  248. border-radius: 4px;
  249. padding: 10px;
  250. }
  251. .action-bar {
  252. text-align: right;
  253. }
  254. .temp-list {
  255. margin-top: 20px;
  256. }
  257. .submit-area {
  258. margin-top: 5px;
  259. text-align: center;
  260. }
  261. h3 {
  262. margin: 0 0 15px 0;
  263. color: #303133;
  264. }
  265. .dept-select {
  266. flex-shrink: 0; /* 防止搜索框被压缩 */
  267. }
  268. .el-scrollbar__wrap {
  269. overflow-x: hidden;
  270. }
  271. .tree-container .el-tree {
  272. height: 100% !important;
  273. }
  274. /* 左侧滚动区域 */
  275. .el-scrollbar,
  276. .tree-container {
  277. scrollbar-width: thin;
  278. scrollbar-color: #c0c4cc transparent;
  279. }
  280. .left-card,
  281. .right-card {
  282. flex: 1;
  283. display: flex;
  284. flex-direction: column;
  285. height: 100%; /* 继承父级高度 */
  286. }
  287. .dept-tree-container {
  288. flex: 1;
  289. min-height: 0; /* 关键:允许内容区域收缩 */
  290. position: relative;
  291. overflow: hidden;
  292. }
  293. /* 调整树形组件内部滚动 */
  294. :deep(.el-tree) {
  295. height: 100%;
  296. overflow: auto;
  297. }
  298. .equal-height-row {
  299. display: flex;
  300. align-items: stretch; /* 关键:等高布局 */
  301. }
  302. .col-height {
  303. display: flex;
  304. flex-direction: column;
  305. min-height: 400px;/* 统一最小高度 */
  306. }
  307. </style>