查询窗口按钮组实现

packages/info/src/QueryPage.vue

@@ -38,38 +38,11 @@
         </div>
       </div>
 
-      <a-space warp style="margin-top: 5px">
-        <a-button type="link" @click="pageSearch">
-          {{ $t("lang.QueryConditionSimple.refresh") }}
-          <template #icon>
-            <SyncOutlined />
-          </template>
-        </a-button>
-
-        <a-button type="link" @click="executeExport">
-          {{ $t("lang.QueryConditionSimple.export") }}
-          <template #icon>
-            <DownloadOutlined />
-          </template>
-        </a-button>
-      </a-space>
-
       <div v-if="!isSearchWidget" style="display: inline-block">
-        <template v-for="infoButton in infoWindowDto.infoButtons" :key="infoButton.name">
-          <a-button
-            v-if="infoButton.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'"
-            v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)" type="link"
-            @click="openRemoteComponentModule(infoButton)"
-          >
-            {{ Language.getNameTrl($i18n.locale, infoButton) }}
-          </a-button>
-          <a-button
-            v-else v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)" type="link"
-            @click="executeProcess(infoButton)"
-          >
-            {{ Language.getNameTrl($i18n.locale, infoButton) }}
-          </a-button>
-        </template>
+        <QueryPageButton
+          :info-buttons="infoWindowDto.infoButtons" :info-window-no="infoWindowDto.no" :select-info-data="selectInfoData" :class-name="className"
+          @refresh-datas="pageSearch" @execute-export="executeExport" @execute-process="executeProcess"
+        />
       </div>
 
       <a-segmented v-model:value="selectedView" :options="views" class="m-segmented" size="small">
@@ -138,7 +111,7 @@
       <ProcessReportResult :process-report-result="processReportResult" :pdf-only="pdfOnly" :excel-only="excelOnly" />
     </a-modal>
   </div>
-  <component :is="modal1Component" v-model:open="modal1Open" :model-data="selectInfoData" @refresh-data="pageSearch" />
+  <!-- <component :is="modal1Component" v-model:open="modal1Open" :model-data="selectInfoData" @refresh-data="pageSearch" /> -->
 </template>
 
 <script>
@@ -170,6 +143,7 @@ import dayjs from 'dayjs';
 import QueryPageTable from './QueryPageTable.vue';
 import QueryPageDashboard from './QueryPageDashboard.vue';
 import { Modal } from 'ant-design-vue';
+import QueryPageButton from './QueryPageButton.vue';
 
 import {
   useSort,
@@ -202,6 +176,7 @@ export default {
     QueryPageDashboard,
     SyncOutlined,
     DownloadOutlined,
+    QueryPageButton,
     ExclamationCircleOutlined,
   },
 
@@ -750,7 +725,7 @@ export default {
           }
 
 
-          const executeProcess = function(){
+          const executeProcess = function () {
             _self.loading = true;
             ProcessReportResource.uniqueByNo(infoButton.processReportNo).then(
               successData => {
@@ -785,7 +760,7 @@ export default {
           };
 
 
-          
+
           if (tipsTitle != null && tipsTitle.length > 0 && tipsContent != null && tipsContent.length > 0) {
             Modal.confirm({
               title: tipsTitle,
@@ -800,10 +775,10 @@ export default {
                 console.log('Cancel');
               },
             });
-          }else{
+          } else {
             executeProcess();
           }
-          
+
         }
       } else if (
         infoButton.curdWindowNo != null &&
@@ -1018,75 +993,6 @@ export default {
     infoSelected: function (selected) {
       this.selectInfoData = selected;
     },
-
-    /**
-     * 获取字符串的哈希值
-     * @param input
-     */
-    getHash: function (input) {
-      let hash = 0;
-      if (input.length === 0) {
-        return hash;
-      }
-      for (let i = 0; i < input.length; i++) {
-        const char = input.charCodeAt(i);
-        hash = (hash << 5) - hash + char;
-        hash = hash & hash; // 确保返回值是一个32位有符号整数
-      }
-      return Math.abs(hash).toString();
-    },
-
-    /**
-     * 远程加载ES VUE组件模块，并在模态框中打开。
-     * @param jsUrl js路径
-     * @param cssUrl css路径
-     */
-    openRemoteComponentModule: async function (tabButton) {
-      const _self = this;
-
-      if (!_self.selectInfoData || _self.selectInfoData.length === 0) {
-        message.warning('请您至少选择一条数据。');
-        return;
-      }
-      let jsUrl = tabButton.remoteComponentModuleJsUrl;
-
-      let cssUrl = tabButton.remoteComponentModuleCssUrl;
-
-      // 显示模态框
-      // 异步的加载js组件
-      //let jsUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.js';
-      //let cssUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.css';
-
-      if (cssUrl != null && cssUrl.length > 0) {
-        let cssUrlHash = _self.getHash(cssUrl);
-        CssUtil.dynamicLoadCss(cssUrl, cssUrlHash);
-      }
-      // webpackIgnore：设置为 true 时，禁用动态导入解析。
-      // const testAsyncRemoteComponent  = await import(/* webpackIgnore: true */ jsUrl);
-
-      // console.log(testAsyncRemoteComponent);
-      if (jsUrl != null && jsUrl.length > 0) {
-        const testAsyncRemoteComponent = defineAsyncComponent({
-          // 加载函数
-          loader: () => {
-            return import(/* webpackIgnore: true */ jsUrl);
-          },
-          // 加载异步组件时使用的组件
-          loadingComponent: ASpin,
-          // 展示加载组件前的延迟时间，默认为 200ms
-          delay: 200,
-          // 加载失败后展示的组件
-          errorComponent: AEmpty,
-          // 如果提供了一个 timeout 时间限制，并超时了
-          // 也会显示这里配置的报错组件，默认值是：Infinity
-          timeout: 10000,
-        });
-
-        _self.modal1Component = testAsyncRemoteComponent;
-        _self.modal1Open = true;
-        console.log(_self.modal1Component);
-      }
-    },
   },
 };
 </script>

packages/info/src/QueryPageButton.vue

@@ -0,0 +1,265 @@
+<template>
+  <a-space style="margin-top: 5px;" size="small">
+    <template v-if="buttonGroup && buttonGroup.length">
+      <a-dropdown v-for="group in buttonGroup" :key="group.name" :trigger="['click']">
+        <template #overlay>
+          <a-menu>
+            <template v-if="group.children && group.children.length">
+              <a-menu-item v-for="item in group.children" :key="item.name">
+                <!-- <AuthImage :auth-src="getImageSrc(item.icon)" style="width: 40px; cursor: pointer" /> -->
+                <span v-if="item.action === 'RUN_PROCESS_REPORT'" @click="execute(item)">
+                  {{ Language.getNameTrl($i18n.locale, item) }}
+                </span>
+                <span v-else-if="item.action === 'OPEN_CUSTOMER_WINDOW'" @click="execute(item)">
+                  {{ Language.getNameTrl($i18n.locale, item) }}
+                </span>
+                <span v-else-if="item.action === 'OPEN_HTML_WINDOW'" @click="execute(item)">
+                  {{ Language.getNameTrl($i18n.locale, item) }}
+                </span>
+                <span v-else-if="item.action === 'EXPORT'" @click="exportDatas">
+                  {{ Language.getNameTrl($i18n.locale, item) }}
+                </span>
+                <span v-else-if="item.action === 'REFRESH'" @click="refresh">
+                  {{ Language.getNameTrl($i18n.locale, item) }}
+                </span>
+                <span v-else-if="item.action === 'NOTICE'">
+                  {{ Language.getNameTrl($i18n.locale, item) }}
+                </span>
+                <span
+                  v-else-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'"
+                  @click="openRemoteComponentModule(item)"
+                >
+                  {{ Language.getNameTrl($i18n.locale, item) }}
+                </span>
+                <span v-else>{{ Language.getNameTrl($i18n.locale, item) }}</span>
+              </a-menu-item>
+            </template>
+          </a-menu>
+        </template>
+        <a-button>
+          <ProjectTwoTone />
+          {{ Language.getNameTrl($i18n.locale, group.info) }}
+          <DownOutlined />
+        </a-button>
+      </a-dropdown>
+    </template>
+    <template v-if="otherButtons && otherButtons.length">
+      <template v-for="(item, index) in otherButtons" :key="index">
+        <a-button v-if="item.action === 'RUN_PROCESS_REPORT'" :icon="h(ControlTwoTone)" @click="execute(item)">
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'OPEN_CUSTOMER_WINDOW'" :icon="h(BookTwoTone)"
+          @click="execute(item)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'OPEN_HTML_WINDOW'" :icon="h(ContainerTwoTone)"
+          @click="execute(item)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else-if="item.action === 'EXPORT'" :icon="h(DownloadOutlined)" @click="exportDatas">
+          {{ item.name }}
+        </a-button>
+        <a-button v-else-if="item.action === 'REFRESH'" :icon="h(ReloadOutlined)" @click="refresh">
+          {{ item.name }}
+        </a-button>
+        <a-button v-else-if="item.action === 'NOTICE'" :icon="h(BellTwoTone)">
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'" :icon="h(HddOutlined)"
+          @click="openRemoteComponentModule(item)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else :icon="h(LayoutTwoTone)">{{ item.name }}</a-button>
+      </template>
+    </template>
+  </a-space>
+
+
+
+  <component :is="modal1Component" v-model:open="modal1Open" :model-data="selectInfoData" @refresh-data="refresh" />
+</template>
+
+<script setup>
+import { defineProps, defineEmits, defineAsyncComponent, ref, watch, h } from 'vue';
+import Language from '../../common/Language.js';
+import {
+  PlusSquareTwoTone,
+  DeleteTwoTone,
+  EditTwoTone,
+  BookTwoTone,
+  BellTwoTone,
+  HddOutlined,
+  FileTextTwoTone,
+  ContainerTwoTone,
+  ControlTwoTone,
+  ReloadOutlined,
+  LayoutTwoTone,
+  DownOutlined, DownloadOutlined, ProjectTwoTone,
+} from '@ant-design/icons-vue';
+import { Spin as ASpin, Empty as AEmpty, message } from 'ant-design-vue';
+import CssUtil from '../../common/CssUtil.js';
+import AuthImage from '../../image/src/AuthImage.vue';
+import Common from '../../common/Common.js';
+
+const emit = defineEmits(['refreshDatas', 'executeExport', 'executeProcess']);
+const props = defineProps({
+  infoButtons: {
+    type: Array,
+    default: () => [],
+  },
+  selectInfoData: {
+    type: Object,
+    default: null,
+  },
+  infoWindowNo: {
+    type: String,
+    default: null,
+  },
+});
+
+const buttons = ref([]);
+const buttonGroup = ref([]);
+const otherButtons = ref([]);
+const modal1Component = ref(null);
+const modal1Open = ref(false);
+
+
+watch(() => props.infoButtons, newValue => {
+  if (newValue && newValue.length > 0) {
+    buttons.value = [];
+    buttonGroup.value = [];
+    otherButtons.value = [];
+    newValue.forEach(item => {
+      if (item.isOption) {
+        buttonGroup.value.push({ name: item.name, info: item, children: [] });
+      }
+      if (!item.isOption && item.infoButtonOptionNo) {
+        buttonGroup.value.forEach(group => {
+          if (group.name === item.infoButtonOptionNo) {
+            group.children.push(item);
+          }
+        });
+      }
+      if (!item.isOption && !item.infoButtonOptionNo) {
+        otherButtons.value.push(item);
+      }
+    });
+  };
+}, { immediate: true, deep: true });
+
+// const getImageSrc = icon => {
+//   const params = {
+
+//   };
+//   if (icon) {
+
+//     getSrc(params).then(
+//       successData => {
+//         if (successData.errorCode === 0) {
+//           _self.iconSrc = Common.getRootPath() + successData.data;
+//         } else {
+//           message.warning(successData.errorMessage);
+//         }
+//       },
+//       errorData => {
+//         Common.processException(errorData);
+//       },
+//     );
+//     return Common.getImageSrc(_self.className, item);
+//   } else {
+//     return '';
+//   }
+// };
+
+// 执行导出
+const exportDatas = () => {
+  emit('executeExport');
+};
+
+// 刷新
+const refresh = () => {
+  console.log('刷新');
+  emit('refreshDatas');
+};
+
+// 执行流程
+const execute = infoButton => {
+  emit('executeProcess', infoButton);
+};
+/**
+ * 获取字符串的哈希值
+ * @param input
+ */
+const getHash = input => {
+  let hash = 0;
+  if (input.length === 0) {
+    return hash;
+  }
+  for (let i = 0; i < input.length; i++) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // 确保返回值是一个32位有符号整数
+  }
+  return Math.abs(hash).toString();
+};
+
+
+/**
+ * 远程加载ES VUE组件模块，并在模态框中打开。
+ * @param jsUrl js路径
+ * @param cssUrl css路径
+ */
+const openRemoteComponentModule = async tabButton => {
+
+  if (!props.selectInfoData || props.selectInfoData.length === 0) {
+    message.warning('请您至少选择一条数据。');
+    return;
+  }
+  let jsUrl = tabButton.remoteComponentModuleJsUrl;
+
+  let cssUrl = tabButton.remoteComponentModuleCssUrl;
+
+  // 显示模态框
+  // 异步的加载js组件
+  //let jsUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.js';
+  //let cssUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.css';
+
+  if (cssUrl != null && cssUrl.length > 0) {
+    let cssUrlHash = getHash(cssUrl);
+    CssUtil.dynamicLoadCss(cssUrl, cssUrlHash);
+  }
+  // webpackIgnore：设置为 true 时，禁用动态导入解析。
+  // const testAsyncRemoteComponent  = await import(/* webpackIgnore: true */ jsUrl);
+
+  // console.log(testAsyncRemoteComponent);
+  if (jsUrl != null && jsUrl.length > 0) {
+    const testAsyncRemoteComponent = defineAsyncComponent({
+      // 加载函数
+      loader: () => {
+        return import(/* webpackIgnore: true */ jsUrl);
+      },
+      // 加载异步组件时使用的组件
+      loadingComponent: ASpin,
+      // 展示加载组件前的延迟时间，默认为 200ms
+      delay: 200,
+      // 加载失败后展示的组件
+      errorComponent: AEmpty,
+      // 如果提供了一个 timeout 时间限制，并超时了
+      // 也会显示这里配置的报错组件，默认值是：Infinity
+      timeout: 10000,
+    });
+
+    modal1Component.value = testAsyncRemoteComponent;
+    modal1Open.value = true;
+    console.log(modal1Component.value);
+  }
+};
+</script>
+
+<style scoped></style>