[Feat 0000] 开发矿名级联选择器并开发其应用场景示例

src/api/sys/menu.ts

@@ -6,11 +6,13 @@ import { TOKEN_KEY } from '@/enums/cacheEnum';
 import { router } from '@/router';
 import { PageEnum } from '@/enums/pageEnum';
 import { getFormattedText } from '/@/components/Configurable/hooks/helper';
+import { listToTree } from '/@/utils/helper/treeHelper';
 
 enum Api {
   GetMenuList = '/sys/permission/getUserPermissionByToken',
   // 获取执法处及其下辖地区树状数据
   getEnfMineTreeData = '/sys/user/getEnfMineTreeData',
+
   // 【QQYUN-8487】
   // SwitchVue3Menu = '/sys/switchVue3Menu',
 }
@@ -42,17 +44,20 @@ const generateStaticSealedMonitorRoute = (route: RouteItem, item: EnfMineTreeIte
 export const getMenuList: () => Promise<getMenuListResultModel> = () => {
   return Promise.all([
     defHttp.get<getMenuListResultModel>({ url: Api.GetMenuList }),
-    defHttp.get<EnfMineTreeItem[]>(
-      { url: Api.getEnfMineTreeData },
-      {
-        isTransformResponse: false,
-      }
-    ),
-  ]).then(([res, tree]) => {
+    defHttp.get({
+      url: Api.getEnfMineTreeData,
+    }),
+  ]).then(([res, rawlist]) => {
+    const tree = listToTree(rawlist, {
+      pid: 'parentId',
+      children: 'childDepart',
+      id: 'id',
+    });
     return {
       allAuth: res.allAuth || [],
       auth: res.auth || [],
       codeList: res.codeList || [],
+      // menu: __STATIC_ROUTES__,
       menu: __STATIC_ROUTES__.map((ele) => {
         if (ele.children && ele.children.length && ele.meta?.generation) {
           const template = ele.children[0];

src/components/Form/src/componentMap.ts

@@ -80,7 +80,8 @@ 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 formConfig from './jeecg/components/formCard/formConfig.vue';
+import MineCascader from './jeecg/components/MineCascader/MineCascader.vue';
+// import formConfig from './jeecg/components/formCard/formConfig.vue';
 const componentMap = new Map<ComponentType, Component>();
 
 componentMap.set('Time', Time);
@@ -178,7 +179,8 @@ componentMap.set('RoleSelect', RoleSelectInput);
 componentMap.set('JInputSelect', JInputSelect);
 componentMap.set('JSelectDepartPost', JSelectDepartPost);
 componentMap.set('JSelectUserByDeptPost', JSelectUserByDeptPost);
-componentMap.set('formConfig', formConfig);
+// componentMap.set('formConfig', formConfig);MineCascader
+componentMap.set('MineCascader', MineCascader);
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
 }

src/components/Form/src/jeecg/components/MineCascader/MineCascader.vue

@@ -0,0 +1,91 @@
+<template>
+  <a-cascader
+    v-model:value="innerValue"
+    :options="options"
+    :load-data="loadData"
+    :placeholder="placeholder"
+    :field-names="{
+      label: 'departName',
+      value: 'id',
+      children: 'children',
+    }"
+    @change="handleChange"
+  >
+  </a-cascader>
+  <!-- <a-input>{{ shownText }}</a-input> -->
+</template>
+
+<script lang="ts">
+  import { CascaderProps } from 'ant-design-vue';
+  import { last } from 'lodash';
+  import { defineComponent, ref, onMounted, triggerRef } from 'vue';
+  import { getSjmbStructData, getUserMinePermissionData } from './mineData.api';
+  // import { useMessage } from '/@/hooks/web/useMessage';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'MineCascader',
+    props: {
+      value: propTypes.string.def(''),
+      placeholder: propTypes.string.def('请选择矿名'),
+      // level: propTypes.number.def(3)
+    },
+    emits: ['change', 'update:value'],
+    setup(_, { emit }) {
+      // const { createMessage } = useMessage();
+
+      const shownText = ref('');
+      const innerValue = ref<string[]>([]);
+      const options = ref<CascaderProps['options']>([]);
+
+      const loadData: CascaderProps['loadData'] = async (selectedOptions) => {
+        const targetOption = last(selectedOptions);
+        if (!targetOption) return;
+        if (targetOption.children) return;
+
+        targetOption.loading = true;
+
+        // load options lazily
+        try {
+          if (selectedOptions.length === 2) {
+            const res = await getUserMinePermissionData({ departId: targetOption.id });
+            targetOption.children = res;
+          } else {
+            const res = await getSjmbStructData({ orgType: '3', parentId: targetOption.id });
+            targetOption.children = res;
+            targetOption.disabled = !res.length;
+          }
+        } finally {
+          targetOption.loading = false;
+          // trigger watcher
+          triggerRef(options);
+          // options.value = [...options.value];
+        }
+      };
+
+      /**
+       * change事件
+       * @param e
+       */
+      function handleChange(value, selectedOptions: CascaderProps['options']) {
+        value = last(value);
+        shownText.value = last(selectedOptions)?.label;
+        emit('update:value', value);
+        emit('change', value);
+      }
+
+      onMounted(() => {
+        getSjmbStructData({ orgType: '2' }).then((res) => {
+          options.value = res;
+        });
+      });
+
+      return {
+        innerValue,
+        options,
+        loadData,
+        handleChange,
+      };
+    },
+  });
+</script>

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

@@ -0,0 +1,20 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  // 获取执法处、地区、矿信息数据
+  getSjmbStructData = 'sys/user/getSjmbStructData',
+  getUserMinePermissionData = '/sys/user/getUserMinePermissionData',
+}
+
+export function getSjmbStructData(params) {
+  return defHttp.post({ url: Api.getSjmbStructData, params }).then((r) =>
+    r.map((e) => ({
+      ...e,
+      isLeaf: false,
+    }))
+  );
+}
+
+export function getUserMinePermissionData(params) {
+  return defHttp.post({ url: Api.getUserMinePermissionData, params });
+}

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

@@ -82,7 +82,7 @@ export interface ColEx {
 }
 
 export type ComponentType =
-  | 'formConfig'
+  | 'MineCascader'
   | 'Input'
   | 'InputGroup'
   | 'InputPassword'

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

@@ -37,259 +37,257 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-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, 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';
-// 引入模拟数据
-import { columns, boardData, searchFormSchema, historicalMinesData } from './airLeakStatus.data';
+  import { onMounted, ref } from 'vue';
+  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, 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';
+  // 引入模拟数据
+  import { columns, boardData, searchFormSchema, historicalMinesData } from './airLeakStatus.data';
 
-// 激活的Tab页签
-const activeTab = ref('realtime');
-//煤矿列表数据
-const deviceOptions = ref([]);
-const goafOptions = ref([]);
-const mineID = ref('');
-const minesData = ref([]);
-const mineCode = ref('');
-const goafId = ref('');
-const alarmFiled = ref('');
-const historyData = ref([]);
-const lawDeptOptions = ref([]);
-// 注册实时数据表格
-const [registerTable] = useTable({
-  dataSource: minesData,
-  title: '密闭漏风状态判定',
-  api: getProvinceAlarm,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: [
-      {
-        label: '',
-        field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
-        component: 'formConfig', // 自定义组件名
-        componentProps: {
-          lawDeptOptions: lawDeptOptions,
+  // 激活的Tab页签
+  const activeTab = ref('realtime');
+  //煤矿列表数据
+  const deviceOptions = ref([]);
+  const goafOptions = ref([]);
+  const mineID = ref('');
+  const minesData = ref([]);
+  const mineCode = ref('');
+  const goafId = ref('');
+  const alarmFiled = ref('');
+  const historyData = ref([]);
+  const lawDeptOptions = ref([]);
+  // 注册实时数据表格
+  const [registerTable] = useTable({
+    dataSource: minesData,
+    title: '密闭漏风状态判定',
+    api: getProvinceAlarm,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          label: '煤矿名称',
+          field: 'mineCode', // 对应组件的value.mineCode（最终传给Table的查询参数）
+          component: 'MineCascader', // 自定义组件名
+          colProps: { span: 6 },
+          rules: [],
         },
-        rules: [],
-      },
-    ],
-    showAdvancedButton: false,
-    schemaGroupNames: ['常规查询'],
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-  },
-});
+      ],
+      showAdvancedButton: false,
+      schemaGroupNames: ['常规查询'],
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
 
-// 注册历史数据表格
-const [registerHistoryTable] = useTable({
-  dataSource: historyData,
-  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;
+  // 注册历史数据表格
+  const [registerHistoryTable] = useTable({
+    dataSource: historyData,
+    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) => {
+              mineCode.value = e;
+              await getGoafDataList(e);
+            },
           },
-          options: deviceOptions,
-          onChange: async (e, option) => {
-            mineCode.value = e;
-            await getGoafDataList(e);
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        label: '采空区查询',
-        field: 'goafId',
-        component: 'Select',
-        defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
-        componentProps: {
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        {
+          label: '采空区查询',
+          field: 'goafId',
+          component: 'Select',
+          defaultValue: goafOptions.value[0] ? goafOptions.value[0]['value'] : '',
+          componentProps: {
+            showSearch: true,
+            filterOption: (input: string, option: any) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            options: goafOptions,
+            onChange: async (e, option) => {
+              goafId.value = e;
+              await fetchAlarmData(e);
+            },
           },
-          options: goafOptions,
-          onChange: async (e, option) => {
-            goafId.value = e;
-            await fetchAlarmData(e);
+          colProps: {
+            span: 6,
           },
         },
-        colProps: {
-          span: 6,
-        },
-      },
-      {
-        field: 'alarmFiled',
-        label: '预警字段',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '甲烷', value: 'ch4Val' },
-            { label: '氧气', value: 'o2Val' },
-            { label: '一氧化碳', value: 'coVal' },
-            { label: '二氧化碳', value: 'co2Val' },
-            { label: '乙烯', value: 'c2h4Val' },
-            { label: '乙炔', value: 'c2h2Val' },
-            { label: '压差', value: 'sourcePressure' },
-            { label: '温度', value: 'temperature' },
-          ],
-          onChange: async (e, option) => {
-            alarmFiled.value = e;
-            await getAlarmHistory(e);
+        {
+          field: 'alarmFiled',
+          label: '预警字段',
+          component: 'Select',
+          componentProps: {
+            options: [
+              { label: '甲烷', value: 'ch4Val' },
+              { label: '氧气', value: 'o2Val' },
+              { label: '一氧化碳', value: 'coVal' },
+              { label: '二氧化碳', value: 'co2Val' },
+              { label: '乙烯', value: 'c2h4Val' },
+              { label: '乙炔', value: 'c2h2Val' },
+              { label: '压差', value: 'sourcePressure' },
+              { label: '温度', value: 'temperature' },
+            ],
+            onChange: async (e, option) => {
+              alarmFiled.value = e;
+              await getAlarmHistory(e);
+            },
           },
+          colProps: { span: 6 },
         },
-        colProps: { span: 6 },
-      },
-    ],
-    showAdvancedButton: false,
-  },
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 60,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: undefined,
-  },
-});
+      ],
+      showAdvancedButton: false,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 60,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-// 弹窗引用
-const realtimeModalRef = ref(null);
-const historyModalRef = ref(null);
+  // 弹窗引用
+  const realtimeModalRef = ref(null);
+  const historyModalRef = ref(null);
 
-// 打开弹窗方法（区分实时/历史）
-const openModal = (record, type) => {
-  if (type === 'realtime') {
-    // 可向实时弹窗传递当前记录数据
-    realtimeModalRef.value?.showModal(record);
-  } else {
-    // 可向历史弹窗传递当前记录数据
-    historyModalRef.value?.showModal(record);
-  }
-};
-async function fetchAlarmData(id) {
-  const params = {
-    // 填写所需参数
-    alarmType: 'leakageAlarm',
-    mineId: id,
-    pageNo: 1,
-    pageSize: 50,
-  };
-  const result = await getProvinceAlarm(params);
-  minesData.value = result.records;
-}
-async function getAlarmHistory(id) {
-  const params = {
-    // 填写所需参数
-    alarmType: 'leakageAlarm',
-    mineCode: mineCode.value,
-    goafId: goafId.value,
-    alarmFiled: id,
+  // 打开弹窗方法（区分实时/历史）
+  const openModal = (record, type) => {
+    if (type === 'realtime') {
+      // 可向实时弹窗传递当前记录数据
+      realtimeModalRef.value?.showModal(record);
+    } else {
+      // 可向历史弹窗传递当前记录数据
+      historyModalRef.value?.showModal(record);
+    }
   };
-  const result = await getProvinceAlarmHistory(params);
-  historyData.value = result.records;
-}
-const getMineDataList = async () => {
-  const params = {
-    pageNo: 1,
-    pageSize: 50,
-  };
-  const response = await getMineData(params);
-  deviceOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['mineName'],
-      value: item['mineCode'],
+  async function fetchAlarmData(id) {
+    const params = {
+      // 填写所需参数
+      alarmType: 'leakageAlarm',
+      mineId: id,
+      pageNo: 1,
+      pageSize: 50,
     };
-  });
-};
-const getGoafDataList = async (mineId) => {
-  const params = {
-    mineCode: mineId,
+    const result = await getProvinceAlarm(params);
+    minesData.value = result.records;
+  }
+  async function getAlarmHistory(id) {
+    const params = {
+      // 填写所需参数
+      alarmType: 'leakageAlarm',
+      mineCode: mineCode.value,
+      goafId: goafId.value,
+      alarmFiled: id,
+    };
+    const result = await getProvinceAlarmHistory(params);
+    historyData.value = result.records;
+  }
+  const getMineDataList = async () => {
+    const params = {
+      pageNo: 1,
+      pageSize: 50,
+    };
+    const response = await getMineData(params);
+    deviceOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['mineName'],
+        value: item['mineCode'],
+      };
+    });
   };
-  const response = await getGoafData(params);
-  goafOptions.value = response.records.map((item, index) => {
-    return {
-      label: item['devicePos'],
-      value: item['goafId'],
+  const getGoafDataList = async (mineId) => {
+    const params = {
+      mineCode: mineId,
     };
+    const response = await getGoafData(params);
+    goafOptions.value = response.records.map((item, index) => {
+      return {
+        label: item['devicePos'],
+        value: item['goafId'],
+      };
+    });
+  };
+  async function getEnfMineData() {
+    const res = await getEnfMineTreeData();
+    lawDeptOptions.value = res.map((item) => ({
+      label: item.departName,
+      value: item.id,
+      rawdata: item,
+    }));
+    console.log(lawDeptOptions.value, '11111111');
+    // deviceOptions.value = res;
+  }
+  onMounted(() => {
+    // 页面挂载时的逻辑
+    getMineDataList();
+    getEnfMineData();
   });
-};
-async function getEnfMineData() {
-  const res = await getEnfMineTreeData();
-  lawDeptOptions.value = res.map((item) => ({
-    label: item.departName,
-    value: item.id,
-    rawdata: item,
-  }));
-  console.log(lawDeptOptions.value, '11111111');
-  // deviceOptions.value = res;
-}
-onMounted(() => {
-  // 页面挂载时的逻辑
-  getMineDataList();
-  getEnfMineData();
-});
 </script>
 
 <style lang="less" scoped>
-.monitoring-page {
-  padding: 16px;
-}
-.board-info {
-  display: flex;
-  padding: 10px;
-  background-color: #fff;
-  margin: 0 10px;
-  gap: 10px;
-  box-sizing: border-box;
-}
-.board-item {
-  flex: 1;
-  box-sizing: border-box;
-}
-.action-btn {
-  cursor: pointer;
-  border: none;
-  padding: 4px;
-}
-.action-icon {
-  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;
-}
+  .monitoring-page {
+    padding: 16px;
+  }
+  .board-info {
+    display: flex;
+    padding: 10px;
+    background-color: #fff;
+    margin: 0 10px;
+    gap: 10px;
+    box-sizing: border-box;
+  }
+  .board-item {
+    flex: 1;
+    box-sizing: border-box;
+  }
+  .action-btn {
+    cursor: pointer;
+    border: none;
+    padding: 4px;
+  }
+  .action-icon {
+    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>