Просмотр исходного кода

fix: 修复多个组件逻辑与展示问题

1. 修复TreePositionSelect组件重复请求数据、选中值更新时机问题
2. 修复设备台账页面安装位置展示格式、表单字段默认值
3. 调整表格操作栏样式,优化显示效果
huoyi 1 месяц назад
Родитель
Сommit
6dda47e1be
2 измененных файлов с 40 добавлено и 21 удалено
  1. 20 6
      src/components/TreePositionSelect/index.vue
  2. 20 15
      src/views/equipManage/equipLedger/index.vue

+ 20 - 6
src/components/TreePositionSelect/index.vue

@@ -32,6 +32,7 @@ const emits = defineEmits(['update:modelValue', 'change'])
32
 const options = ref<any[]>([])
32
 const options = ref<any[]>([])
33
 const loading = ref(false)
33
 const loading = ref(false)
34
 const selectedValue = ref<any[]>([])
34
 const selectedValue = ref<any[]>([])
35
+const dataLoaded = ref(false)
35
 
36
 
36
 const placeholder = computed(() => props.placeholder || '请选择安装位置')
37
 const placeholder = computed(() => props.placeholder || '请选择安装位置')
37
 
38
 
@@ -43,13 +44,18 @@ const cascaderProps = {
43
 }
44
 }
44
 
45
 
45
 const loadData = async () => {
46
 const loadData = async () => {
47
+  if (dataLoaded.value) return
46
   loading.value = true
48
   loading.value = true
47
   try {
49
   try {
48
     const response = await treePosition()
50
     const response = await treePosition()
49
     options.value = response.data || []
51
     options.value = response.data || []
52
+    dataLoaded.value = true
53
+    
54
+    // 等待DOM更新后再设置选中值
55
+    await nextTick()
56
+    await nextTick()
50
     
57
     
51
     if (props.modelValue) {
58
     if (props.modelValue) {
52
-      await nextTick()
53
       updateSelectedValue(props.modelValue)
59
       updateSelectedValue(props.modelValue)
54
     }
60
     }
55
   } catch (error) {
61
   } catch (error) {
@@ -82,6 +88,7 @@ const findNodeByCode = (nodes: any[], code: string): any | null => {
82
 }
88
 }
83
 
89
 
84
 const handleChange = (value: any) => {
90
 const handleChange = (value: any) => {
91
+  console.log(value,"value")
85
   if (!value || value.length === 0) {
92
   if (!value || value.length === 0) {
86
     selectedValue.value = []
93
     selectedValue.value = []
87
     emits('update:modelValue', null)
94
     emits('update:modelValue', null)
@@ -112,15 +119,22 @@ const handleClear = () => {
112
   emits('change', null)
119
   emits('change', null)
113
 }
120
 }
114
 
121
 
115
-watch(() => props.modelValue, (newValue) => {
116
-  if (newValue && options.value.length > 0) {
117
-    updateSelectedValue(newValue)
122
+watch(() => props.modelValue, async (newValue) => {
123
+  if (newValue) {
124
+    if (!dataLoaded.value) {
125
+      await loadData()
126
+    } else {
127
+      await nextTick()
128
+      updateSelectedValue(newValue)
129
+    }
118
   }
130
   }
119
-}, { deep: true })
131
+}, { deep: true, immediate: true })
120
 
132
 
121
 watch(() => options.value, (newOptions) => {
133
 watch(() => options.value, (newOptions) => {
122
   if (newOptions.length > 0 && props.modelValue) {
134
   if (newOptions.length > 0 && props.modelValue) {
123
-    updateSelectedValue(props.modelValue)
135
+    nextTick(() => {
136
+      updateSelectedValue(props.modelValue)
137
+    })
124
   }
138
   }
125
 }, { immediate: false })
139
 }, { immediate: false })
126
 
140
 

+ 20 - 15
src/views/equipManage/equipLedger/index.vue

@@ -63,7 +63,7 @@
63
       <el-table-column label="安装位置" prop="installationLocation" align="center" min-width="180" show-overflow-tooltip>
63
       <el-table-column label="安装位置" prop="installationLocation" align="center" min-width="180" show-overflow-tooltip>
64
         <template #default="scope">
64
         <template #default="scope">
65
           <span>{{ scope.row.terminlName }}{{ scope.row.terminlName ? '/' : '' }}{{ scope.row.regionalName
65
           <span>{{ scope.row.terminlName }}{{ scope.row.terminlName ? '/' : '' }}{{ scope.row.regionalName
66
-            }}{{ scope.row.regionalName ? '/' : '' }}{{ scope.row.channelName }}</span>
66
+          }}{{ scope.row.regionalName ? '/' : '' }}{{ scope.row.channelName }}</span>
67
         </template>
67
         </template>
68
       </el-table-column>
68
       </el-table-column>
69
       <el-table-column label="使用状态" prop="usageStatus" align="center" min-width="100">
69
       <el-table-column label="使用状态" prop="usageStatus" align="center" min-width="100">
@@ -347,9 +347,9 @@ const form = reactive({
347
   inspectionSelfCheckDate: '',
347
   inspectionSelfCheckDate: '',
348
   inspectionSelfCheckCycle: 0,
348
   inspectionSelfCheckCycle: 0,
349
   nextInspectionDueDate: '',
349
   nextInspectionDueDate: '',
350
-  inspectionTeamLeaderId: null,
351
-  inspectionTeamMember1Id: null,
352
-  inspectionTeamMember2Id: null,
350
+  inspectionTeamLeaderId: '',
351
+  inspectionTeamMember1Id: '',
352
+  inspectionTeamMember2Id: '',
353
   initialAcceptanceStatus: '',
353
   initialAcceptanceStatus: '',
354
   baseAttachmentList: [],
354
   baseAttachmentList: [],
355
   equipmentInspectionRecordList: []
355
   equipmentInspectionRecordList: []
@@ -374,7 +374,7 @@ const upload = reactive({
374
   open: false,
374
   open: false,
375
   title: '',
375
   title: '',
376
   isUploading: false,
376
   isUploading: false,
377
-  updateSupport: 0,
377
+  updateSupport: 1,
378
   headers: { Authorization: 'Bearer ' + getToken() },
378
   headers: { Authorization: 'Bearer ' + getToken() },
379
   url: import.meta.env.VITE_APP_BASE_API + '/equipment/ledger/importData'
379
   url: import.meta.env.VITE_APP_BASE_API + '/equipment/ledger/importData'
380
 })
380
 })
@@ -425,14 +425,16 @@ function handleEdit(row) {
425
     if (!form.equipmentInspectionRecordList || !Array.isArray(form.equipmentInspectionRecordList)) {
425
     if (!form.equipmentInspectionRecordList || !Array.isArray(form.equipmentInspectionRecordList)) {
426
       form.equipmentInspectionRecordList = []
426
       form.equipmentInspectionRecordList = []
427
     }
427
     }
428
+    // form.installationLocation = [response.data.terminlCode, response.data.regionalCode, response.data.channelCode]
429
+ 
428
     form.installationLocation = {
430
     form.installationLocation = {
429
       terminlCode: response.data.terminlCode,
431
       terminlCode: response.data.terminlCode,
430
       regionalCode: response.data.regionalCode,
432
       regionalCode: response.data.regionalCode,
431
       channelCode: response.data.channelCode
433
       channelCode: response.data.channelCode
432
     }
434
     }
433
-    form.inspectionTeamLeaderId = form.inspectionTeamLeaderId || null
434
-    form.inspectionTeamMember1Id = form.inspectionTeamMember1Id || null;
435
-    form.inspectionTeamMember2Id = form.inspectionTeamMember2Id || null;
435
+    form.inspectionTeamLeaderId = form.inspectionTeamLeaderId || ''
436
+    form.inspectionTeamMember1Id = form.inspectionTeamMember1Id || ''
437
+    form.inspectionTeamMember2Id = form.inspectionTeamMember2Id || ''
436
     formDisabled.value = false
438
     formDisabled.value = false
437
     dialog.title = '编辑设备'
439
     dialog.title = '编辑设备'
438
     dialog.visible = true
440
     dialog.visible = true
@@ -453,14 +455,16 @@ function handleDetail(row) {
453
     if (!form.equipmentInspectionRecordList || !Array.isArray(form.equipmentInspectionRecordList)) {
455
     if (!form.equipmentInspectionRecordList || !Array.isArray(form.equipmentInspectionRecordList)) {
454
       form.equipmentInspectionRecordList = []
456
       form.equipmentInspectionRecordList = []
455
     }
457
     }
458
+    // form.installationLocation = [response.data.terminlCode, response.data.regionalCode, response.data.channelCode]
459
+ 
456
     form.installationLocation = {
460
     form.installationLocation = {
457
       terminlCode: response.data.terminlCode,
461
       terminlCode: response.data.terminlCode,
458
       regionalCode: response.data.regionalCode,
462
       regionalCode: response.data.regionalCode,
459
       channelCode: response.data.channelCode
463
       channelCode: response.data.channelCode
460
     }
464
     }
461
-    form.inspectionTeamLeaderId = form.inspectionTeamLeaderId || null
462
-    form.inspectionTeamMember1Id = form.inspectionTeamMember1Id || null;
463
-    form.inspectionTeamMember2Id = form.inspectionTeamMember2Id || null;
465
+    form.inspectionTeamLeaderId = form.inspectionTeamLeaderId || ''
466
+    form.inspectionTeamMember1Id = form.inspectionTeamMember1Id || ''
467
+    form.inspectionTeamMember2Id = form.inspectionTeamMember2Id || ''
464
     formDisabled.value = true
468
     formDisabled.value = true
465
     dialog.title = '设备详情'
469
     dialog.title = '设备详情'
466
     dialog.visible = true
470
     dialog.visible = true
@@ -532,9 +536,9 @@ function resetForm() {
532
     inspectionSelfCheckDate: '',
536
     inspectionSelfCheckDate: '',
533
     inspectionSelfCheckCycle: 0,
537
     inspectionSelfCheckCycle: 0,
534
     nextInspectionDueDate: '',
538
     nextInspectionDueDate: '',
535
-    inspectionTeamLeaderId: null,
536
-    inspectionTeamMember1Id: null,
537
-    inspectionTeamMember2Id: null,
539
+    inspectionTeamLeaderId: '',
540
+    inspectionTeamMember1Id: '',
541
+    inspectionTeamMember2Id: '',
538
     initialAcceptanceStatus: '',
542
     initialAcceptanceStatus: '',
539
     baseAttachmentList: [],
543
     baseAttachmentList: [],
540
     equipmentInspectionRecordList: []
544
     equipmentInspectionRecordList: []
@@ -680,7 +684,8 @@ onMounted(() => {
680
 }
684
 }
681
 
685
 
682
 :deep(.operation-column) {
686
 :deep(.operation-column) {
683
-  background-color: transparent !important;
684
 
687
 
688
+  background-color: white !important;
689
+  z-index: 3;
685
 }
690
 }
686
 </style>
691
 </style>