|
|
@@ -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>
|
liuyanpeng