[Feat 0000]级联组件

src/components/Form/src/componentMap.ts

@@ -73,14 +73,14 @@ import JAddInput from './jeecg/components/JAddInput.vue';
 import { Time } from '/@/components/Time';
 import JRangeNumber from './jeecg/components/JRangeNumber.vue';
 import UserSelect from './jeecg/components/userSelect/index.vue';
-import JRangeDate from './jeecg/components/JRangeDate.vue'
-import JRangeTime from './jeecg/components/JRangeTime.vue'
-import JInputSelect from './jeecg/components/JInputSelect.vue'
+import JRangeDate from './jeecg/components/JRangeDate.vue';
+import JRangeTime from './jeecg/components/JRangeTime.vue';
+import JInputSelect from './jeecg/components/JInputSelect.vue';
 import RoleSelectInput from './jeecg/components/roleSelect/RoleSelectInput.vue';
 import JSelectUserByDeptPost from './jeecg/components/JSelectUserByDeptPost.vue';
 import JDatePickerMultiple from './jeecg/components/JDatePickerMultiple.vue';
-import {DatePickerInFilter, CascaderPcaInFilter} from "@/components/InFilter";
-
+import { DatePickerInFilter, CascaderPcaInFilter } from '@/components/InFilter';
+import formConfig from './jeecg/components/formCard/formConfig.vue';
 const componentMap = new Map<ComponentType, Component>();
 
 componentMap.set('Time', Time);
@@ -178,9 +178,7 @@ componentMap.set('RoleSelect', RoleSelectInput);
 componentMap.set('JInputSelect', JInputSelect);
 componentMap.set('JSelectDepartPost', JSelectDepartPost);
 componentMap.set('JSelectUserByDeptPost', JSelectUserByDeptPost);
-
-
-
+componentMap.set('formConfig', formConfig);
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
 }

src/components/Form/src/jeecg/components/formCard/formConfig.vue

@@ -0,0 +1,135 @@
+<template>
+  <a-form>
+    <a-row class="form-row">
+      <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">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+        <a-select
+          v-model:value="pca.area"
+          placeholder="请选择区域"
+          style="width: 180px; margin-right: 8px"
+          @change="handleAreaChange"
+          :disabled="!pca.lawDept"
+        >
+          <a-select-option v-for="item in areaOptions" :key="item.value" :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+        <!-- 选择煤矿 -->
+        <a-select v-model:value="pca.position" placeholder="请选择煤矿" style="width: 180px" :disabled="!pca.area">
+          <a-select-option v-for="item in positionOptions" :key="item.value" :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </div>
+    </a-row>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+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: '', // 煤矿编码
+    }),
+  },
+});
+const emit = defineEmits(['change', 'update:value', 'update:lawDept', 'update:area', 'update:position']);
+const pca = reactive({
+  lawDept: '', // 执法处
+  area: '', // 区域
+  position: '', // 具体位置
+});
+
+// 下拉选项列表
+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 handleLawDeptChange = async (depId: string | number) => {
+  pca.area = '';
+  pca.position = '';
+  areaOptions.value = [];
+  positionOptions.value = [];
+
+  // 2. 找到选中的执法处原始数据
+  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}】暂无下属区域`);
+  }
+};
+// const handleAreaChange = async (areaId: string | number) => {
+//   pca.position = '';
+//   positionOptions.value = [];
+//   // 1. 找到选中的执法处原始数据
+//   const currentDept = rawLawDeptData.value.find((item) => item.id === pca.lawDept);
+//   if (!currentDept) {
+//     console.warn('未找到该执法处数据');
+//     return;
+//   }
+//   // 2. 在执法处的childDepart中找到选中的区域数据
+//   const currentArea = currentDept.childDepart.find((area) => area.id === areaId);
+//   if (!currentArea) {
+//     console.warn('未找到该区域数据');
+//     return;
+//   }
+// };
+
+// 页面初始化时加载执法处列表
+onMounted(() => {
+  nextTick(async () => {
+    await initLawDeptList();
+  });
+});
+</script>
+
+<style scoped>
+.custom-cascader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 可选：调整选择框样式，和原JAreaSelect保持一致 */
+.custom-cascader :deep(.ant-select) {
+  border-radius: 4px;
+}
+</style>

src/components/Form/src/jeecg/components/formCard/mineData.api.ts

@@ -0,0 +1,15 @@
+import { defHttp } from '/@/utils/http/axios';
+enum Api {
+  getEnfMineTreeData = '/jeecg-system/sys/user/getEnfMineTreeData',
+}
+//获取执法处以及区域数据
+export const getEnfMineTreeData = () =>
+  defHttp.get({
+    url: Api.getEnfMineTreeData,
+  });
+//根据区域ID获取煤矿列表
+// export const getProvinceAlarmHistory = (params) =>
+//   defHttp.post({
+//     url: Api.getProvinceAlarmHistory,
+//     params,
+//   });

src/components/Form/src/types/index.ts

@@ -82,6 +82,7 @@ export interface ColEx {
 }
 
 export type ComponentType =
+  | 'formConfig'
   | 'Input'
   | 'InputGroup'
   | 'InputPassword'
@@ -162,4 +163,3 @@ export type ComponentType =
   | 'JRangeNumber'
   | 'JLinkTableCard'
   | 'JInputSelect';
-

src/views/analysis/warningAnalysis/airLeakStatus/airLeak.api.ts

@@ -5,6 +5,7 @@ enum Api {
   getMineData = '/province/mineData/getMineData',
   getGoafData = '/province/device/getGoafData',
   getProvinceAlarmHistory = '/province/device/getProvinceAlarmHistory',
+  getEnfMineTreeData = '/jeecg-system/sys/user/getEnfMineTreeData',
 }
 //查询煤矿列表
 export const getMineData = (params) =>
@@ -30,3 +31,8 @@ export const getProvinceAlarm = (params) =>
     url: Api.getProvinceAlarm,
     params,
   });
+//获取执法处以及区域数据
+export const getEnfMineTreeData = () =>
+  defHttp.get({
+    url: Api.getEnfMineTreeData,
+  });

src/views/analysis/warningAnalysis/airLeakStatus/index.vue

@@ -43,6 +43,8 @@ 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 formConfig from '/@/components/Form/src/jeecg/components/formCard/formConfig.vue';
+import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
 // 引入模拟数据
 import { columns, boardData, searchFormSchema, historicalMinesData } from './airLeakStatus.data';
 
@@ -61,95 +63,21 @@ const historyData = ref([]);
 const [registerTable] = useTable({
   dataSource: minesData,
   title: '密闭漏风状态判定',
+  api: getProvinceAlarm,
   columns,
   formConfig: {
     labelWidth: 120,
     schemas: [
       {
-        label: '查询煤矿',
-        field: 'mineCode',
-        component: 'Select',
-        defaultValue: deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-          },
-          options: deviceOptions,
-          onChange: async (e, option) => {
-            await fetchAlarmData(e);
-          },
-        },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'mineName',
-        label: '所属执法处',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '执法一处', value: '0' },
-            { label: '执法二处', value: '1' },
-            { label: '执法三处', value: '2' },
-          ],
-        },
-        colProps: { span: 6 },
-      },
-      {
-        field: 'mineName',
-        label: '所属区域',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '执法一处', value: '0' },
-            { label: '执法二处', value: '1' },
-            { label: '执法三处', value: '2' },
-          ],
-        },
-        colProps: { span: 6 },
-      },
-      {
-        field: 'mineName',
-        label: '煤矿名称',
-        component: 'Input',
-        colProps: { span: 6 },
-      },
-      {
-        field: 'mineNameAbbr',
-        label: '煤矿简称',
-        component: 'Input',
-        colProps: { span: 6 },
-      },
-      {
-        field: 'productStatus',
-        label: '生产状态',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '拟建矿井', value: '0' },
-            { label: '正常生产矿井', value: '1' },
-            { label: '长期停产矿井', value: '2' },
-          ],
-        },
-        colProps: { span: 6 },
-      },
-      {
-        field: 'riskLevel',
-        label: '自燃情况',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: 'Ⅰ类容易自燃', value: '0' },
-            { label: 'Ⅱ类自燃', value: '1' },
-            { label: 'Ⅲ类不易自燃', value: '2' },
-          ],
-        },
-        colProps: { span: 6 },
+        label: '',
+        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+        component: 'formConfig', // 自定义组件名
+        componentProps: {},
+        rules: [],
       },
     ],
     showAdvancedButton: false,
+    schemaGroupNames: ['常规查询'],
   },
   pagination: false,
   striped: false,
@@ -313,9 +241,15 @@ const getGoafDataList = async (mineId) => {
     };
   });
 };
+const getEnfMineTreeData = async () => {
+  const res = await getEnfMineTreeData();
+  console.log(res, '1111111');
+  // deviceOptions.value = res;
+};
 onMounted(() => {
   // 页面挂载时的逻辑
   getMineDataList();
+  getEnfMineTreeData();
 });
 </script>
 
@@ -344,4 +278,10 @@ onMounted(() => {
   width: 16px;
   height: 16px;
 }
+:deep(.jeecg-basic-table-form-container .ant-form) {
+  border: none !important;
+}
+:where(.css-dev-only-do-not-override-x9w3vz).ant-form-item .ant-form-item-label {
+  margin-top: 10px !important;
+}
 </style>

src/views/analysis/warningAnalysis/autoFireAnalysis/index.vue

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