Browse Source

[Feat 0000]级联组件数据传递优化

bobo04052021@163.com 3 tháng trước cách đây
mục cha
commit
ad1b3545ae

+ 25 - 39
src/components/Form/src/jeecg/components/formCard/formConfig.vue

@@ -4,7 +4,7 @@
       <div class="custom-cascader">
         <!-- 执法处 -->
         <a-select v-model:value="pca.lawDept" placeholder="请选择执法处" style="width: 180px; margin-right: 8px" @change="handleLawDeptChange">
-          <a-select-option v-for="item in lawDeptOptions" :key="item.value" :value="item.value">
+          <a-select-option v-for="item in props.lawDeptOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
         </a-select>
@@ -35,13 +35,9 @@ import { ref, reactive, onMounted, nextTick, watch } from 'vue';
 // 替换为你的实际接口请求函数
 import { getEnfMineTreeData } from './mineData.api';
 const props = defineProps({
-  value: {
-    type: Object,
-    default: () => ({
-      lawDept: '', // 执法处ID
-      area: '', // 区域ID
-      mineCode: '', // 煤矿编码
-    }),
+  lawDeptOptions: {
+    type: Array,
+    default: <Array<{ label: string; value: string | number }>>[],
   },
 });
 const emit = defineEmits(['change', 'update:value', 'update:lawDept', 'update:area', 'update:position']);
@@ -52,49 +48,41 @@ const pca = reactive({
 });
 
 // 下拉选项列表
-const lawDeptOptions = ref<Array<{ label: string; value: string | number }>>([]);
+// const lawDeptOptions = ref<Array<{ label: string; value: string | number }>>([]);
 const areaOptions = ref<Array<{ label: string; value: string | number }>>([]);
 const positionOptions = ref<Array<{ label: string; value: string | number }>>([]);
 const rawLawDeptData = ref<any[]>([]); // 保存原始执法处数据以备后续查找
 // // 初始化加载执法处列表
-const initLawDeptList = async () => {
-  // 调用获取执法处列表的接口
-  try {
-    const res = await getEnfMineTreeData();
-    rawLawDeptData.value = res; // 保存原始数据以备后续查找
-    lawDeptOptions.value = res.map((item) => ({
-      label: item.departName, // 显示执法处名称
-      value: item.id, // 绑定执法处ID
-    }));
-  } catch (error) {
-    console.error('加载执法处列表失败:', error);
-  }
-};
-
-// // 选择区域后加载对应具体位置
+// const initLawDeptList = async () => {
+//   // 调用获取执法处列表的接口
+//   try {
+//     const res = await getEnfMineTreeData();
+//     rawLawDeptData.value = res; // 保存原始数据以备后续查找
+//     lawDeptOptions.value = res.map((item) => ({
+//       label: item.departName, // 显示执法处名称
+//       value: item.id, // 绑定执法处ID
+//     }));
+//   } catch (error) {
+//     console.error('加载执法处列表失败:', error);
+//   }
+// };
 const handleLawDeptChange = async (depId: string | number) => {
   pca.area = '';
   pca.position = '';
   areaOptions.value = [];
   positionOptions.value = [];
-
-  // 2. 找到选中的执法处原始数据
+  rawLawDeptData.value = props.lawDeptOptions;
+  console.log(rawLawDeptData.value, '222222');
   const currentDept = rawLawDeptData.value.find((item) => item.id === depId);
   if (!currentDept) {
     console.warn('未找到该执法处数据');
     return;
   }
   console.log(currentDept, '1111111');
-  // 3. 核心:绑定对应childDepart的label=departName,value=id
-  if (currentDept.childDepart && currentDept.childDepart.length > 0) {
-    areaOptions.value = currentDept.childDepart.map((child) => ({
-      label: child.departName, // 显示区域名称
-      value: child.id, // 绑定区域ID
-    }));
-    console.log(`执法处【${currentDept.departName}】对应的区域:`, areaOptions.value);
-  } else {
-    console.warn(`执法处【${currentDept.departName}】暂无下属区域`);
-  }
+  areaOptions.value = currentDept.childDepart.map((child) => ({
+    label: child.departName, // 显示区域名称
+    value: child.id, // 绑定区域ID
+  }));
 };
 // const handleAreaChange = async (areaId: string | number) => {
 //   pca.position = '';
@@ -115,9 +103,7 @@ const handleLawDeptChange = async (depId: string | number) => {
 
 // 页面初始化时加载执法处列表
 onMounted(() => {
-  nextTick(async () => {
-    await initLawDeptList();
-  });
+  console.log('接收的执法部门选项:', props.lawDeptOptions);
 });
 </script>
 

+ 14 - 6
src/views/analysis/warningAnalysis/airLeakStatus/index.vue

@@ -42,7 +42,7 @@ import { BasicTable, useTable } from '/@/components/Table';
 import { Tabs, TabPane } from 'ant-design-vue';
 import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
 import { SvgIcon } from '/@/components/Icon';
-import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory } from './airLeak.api';
+import { getMineData, getProvinceAlarm, getGoafData, getProvinceAlarmHistory, getEnfMineTreeData } from './airLeak.api';
 import formConfig from '/@/components/Form/src/jeecg/components/formCard/formConfig.vue';
 import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
 // 引入模拟数据
@@ -59,6 +59,7 @@ const mineCode = ref('');
 const goafId = ref('');
 const alarmFiled = ref('');
 const historyData = ref([]);
+const lawDeptOptions = ref([]);
 // 注册实时数据表格
 const [registerTable] = useTable({
   dataSource: minesData,
@@ -72,7 +73,9 @@ const [registerTable] = useTable({
         label: '',
         field: 'mineCode', // 对应组件的value.mineCode(最终传给Table的查询参数)
         component: 'formConfig', // 自定义组件名
-        componentProps: {},
+        componentProps: {
+          lawDeptOptions: lawDeptOptions,
+        },
         rules: [],
       },
     ],
@@ -241,15 +244,20 @@ const getGoafDataList = async (mineId) => {
     };
   });
 };
-const getEnfMineTreeData = async () => {
+async function getEnfMineData() {
   const res = await getEnfMineTreeData();
-  console.log(res, '1111111');
+  lawDeptOptions.value = res.map((item) => ({
+    label: item.departName,
+    value: item.id,
+    rawdata: item,
+  }));
+  console.log(lawDeptOptions.value, '11111111');
   // deviceOptions.value = res;
-};
+}
 onMounted(() => {
   // 页面挂载时的逻辑
   getMineDataList();
-  getEnfMineTreeData();
+  getEnfMineData();
 });
 </script>
 

+ 1 - 0
src/views/analysis/warningAnalysis/fireAreaJudgeAnalysis/index.vue

@@ -162,6 +162,7 @@ const [registerTable] = useTable({
       },
     ],
     showAdvancedButton: false,
+    schemaGroupNames: ['常规查询'],
   },
   pagination: false,
   striped: false,

+ 1 - 0
src/views/analysis/warningAnalysis/overlimitAlarm/index.vue

@@ -163,6 +163,7 @@ const [registerTable] = useTable({
       },
     ],
     showAdvancedButton: false,
+    schemaGroupNames: ['常规查询'],
   },
   pagination: false,
   striped: false,

+ 1 - 0
src/views/analysis/warningAnalysis/pressureDiffAnalysis/index.vue

@@ -181,6 +181,7 @@ const [registerTable] = useTable({
       },
     ],
     showAdvancedButton: false,
+    schemaGroupNames: ['常规查询'],
   },
   pagination: false,
   striped: false,

+ 9 - 6
src/views/analysis/warningAnalysis/sealRiskJudgeAnalysis/index.vue

@@ -16,13 +16,15 @@
         </div>
         <!-- 实时数据表格 -->
         <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }">
+          <!-- 核心:判断record是否有有效数据,无则显示- -->
           <template #action="{ record }">
-            <div class="action-buttons">
-              <!-- 操作按钮 -->
-              <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
-                <span class="action-text">详情</span>
-              </button>
-            </div>
+            <button @click="openModal(record, 'detail')" class="action-btn detail-btn" title="操作">
+              <span class="action-text">详情</span>
+            </button>
+          </template>
+          <template #empty>
+            <!-- 无数据时显示-,样式居中对齐 -->
+            <span class="empty-placeholder">-</span>
           </template>
         </BasicTable>
       </TabPane>
@@ -163,6 +165,7 @@ const [registerTable] = useTable({
       },
     ],
     showAdvancedButton: false,
+    schemaGroupNames: ['常规查询'],
   },
   pagination: false,
   striped: false,