[Feat 0000] 全局矿名级联选择器联动功能开发

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

@@ -48,8 +48,8 @@
       rootId: propTypes.string,
       /** 是否从已存储的信息中初始化组件值 */
       initFromStore: propTypes.bool.def(true),
-      /** 是否从将值同步至STORE */
-      syncToStore: propTypes.bool.def(false),
+      /** 是否在全局部门变化后主动提交change事件 */
+      syncFromStore: propTypes.bool.def(true),
       showSearch: propTypes.bool.def(true),
       allowClear: propTypes.bool.def(true),
       changeOnSelect: propTypes.bool.def(true),
@@ -114,16 +114,19 @@
           innerValue.value = path;
         }
 
-        if (props.syncToStore) {
-          mineStore.setDepartById(id);
-        }
-
         const path = mineStore.calcDepartPathById(id, options.value, (e) => e.id);
         innerValue.value = path;
       }
 
       watch(() => props.value, handleWatch);
 
+      if (props.syncFromStore) {
+        watch(
+          () => mineStore.getDepartId,
+          (v) => handleChange([v])
+        );
+      }
+
       return {
         innerValue,
         options,

src/components/Form/src/props.ts

@@ -117,7 +117,7 @@ export const basicProps = {
   rowProps: Object as PropType<RowProps>,
 
   // 当表单是查询条件的时候 当表单改变后自动查询，不需要点击查询按钮
-  autoSearch: propTypes.bool.def(false),
+  autoSearch: propTypes.bool.def(true),
 
   schemaGroupNames: {
     type: [Array] as PropType<string[]>,

src/hooks/component/useDeptWatcher.ts

@@ -1,46 +0,0 @@
-import { ref, watch, WatchOptions } from 'vue';
-import { useAppStore } from '/@/store/modules/app';
-import { useMineDepartmentStore } from '/@/store/modules/mine';
-import { useRoute } from 'vue-router';
-
-/** 监听全局的部门变化 */
-export function useDeptWatch(cb: (id: string) => void, opt: WatchOptions = {}) {
-  //   const appStore = useAppStore();
-  const mineStore = useMineDepartmentStore();
-  const route = useRoute();
-  const deptId = ref<string>((route?.query?.deptId as string) || '');
-
-  watch(
-    () => mineStore.getDepartId,
-    (v) => {
-      if (!v) return;
-      deptId.value = v;
-      cb(v);
-    },
-    {
-      immediate: true,
-      ...opt,
-    }
-  );
-
-  return {
-    deptId,
-  };
-}
-
-export function useDeptSetter() {
-  const appStore = useAppStore();
-  const mineStore = useMineDepartmentStore();
-  const deptId = ref('');
-
-  return {
-    deptId,
-    setGlobDept: (deptId: string) => {
-      mineStore.setDepartById(deptId);
-      appStore.setSimpleMapParams({
-        deptId: mineStore.getDepartId,
-        isLeaf: mineStore.getDepart?.isLeaf,
-      });
-    },
-  };
-}

src/layouts/default/feature/SimpleMap.vue

@@ -22,7 +22,7 @@
   import { initMap2d, renderGoafMarkers } from '/@/views/system/cadFile/app';
   import { getGoafList } from '/@/views/system/cadFile/cad.api';
   import LeafPopup from './components/LeafPopup.vue';
-  import { useDeptWatch } from '/@/hooks/component/useDeptWatcher';
+  import { watchTriggerable } from '@vueuse/core';
   // import { useGlobSetting } from '/@/hooks/setting';
 
   const props = defineProps<{
@@ -247,23 +247,31 @@
     }
   }
 
-  function initDeptWatcher() {
-    useDeptWatch((id) => {
-      const { source } = map.getLayer(CIRCLE_LAYER_ID) as any;
-      const { features } = map.getSourceData(source);
-      const element = find(features, (e) => e.id === id)?.properties;
+  // 监听全局部门变化，因为部门可能是叶部门所以也负责切换地图
+  const { trigger } = watchTriggerable(
+    () => mineStore.getDepartId,
+    async (id) => {
+      if (props.slience) {
+        return toggleCADMap(mineStore.getRoot?.isLeaf || false);
+      } else {
+        await toggleCADMap(mineStore.getDepart?.isLeaf || mineStore.getRoot?.isLeaf || false);
 
-      if (!element) return;
-      historyStack.value.push(element);
-      markerClickHandler();
-    });
-  }
+        const { source } = map.getLayer(CIRCLE_LAYER_ID) as any;
+        const { features } = map.getSourceData(source);
+        const element = find(features, (e) => e.id === id)?.properties;
+
+        if (!element) return;
+        historyStack.value.push(element);
+        markerClickHandler();
+      }
+    }
+  );
 
   onMounted(() => {
-    toggleCADMap(mineStore.getRoot?.isLeaf || false).then(() => {
-      if (props.slience) return;
-      initDeptWatcher();
-    });
+    trigger();
+    // toggleCADMap(mineStore.getRoot?.isLeaf || false).then(() => {
+    //   triggerWatch();
+    // });
   });
 
   onUnmounted(() => {

src/layouts/default/header/index.vue

@@ -67,7 +67,8 @@
   import { useUserStore } from '/@/store/modules/user';
   import { useI18n } from '/@/hooks/web/useI18n';
   import MineCascader from '/@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
-  import { useDeptSetter } from '/@/hooks/component/useDeptWatcher';
+  import { useAppStore } from '/@/store/modules/app';
+  import { useMineDepartmentStore } from '/@/store/modules/mine';
 
   const { t } = useI18n();
 
@@ -166,7 +167,16 @@
         showLoginSelect();
       });
 
-      const { deptId, setGlobDept } = useDeptSetter();
+      const appStore = useAppStore();
+      const mineStore = useMineDepartmentStore();
+      const deptId = ref('');
+      function setGlobDept(deptId: string) {
+        mineStore.setDepartById(deptId);
+        appStore.setSimpleMapParams({
+          deptId: mineStore.getDepartId,
+          isLeaf: mineStore.getDepart?.isLeaf,
+        });
+      }
 
       return {
         prefixCls,

src/views/monitor/sealedMonitor/index.vue

@@ -86,7 +86,7 @@
             required: true,
             componentProps: {
               initFromStore: false,
-              syncToStore: false,
+              // syncFromStore: false,
               rootId: departId,
             },
           },