client-base-v5/src/window1/tabGridView/NewTabButton.vue

<template>
  <div class="button_list">
    <div v-if="leftTabButton.length === 0" />
    <a-breadcrumb v-if="leftTabButton && leftTabButton.length" separator="|">
      <a-breadcrumb-item v-for="(item, index) in leftTabButton" :key="index">
        <PlusSquareTwoTone v-if="item.action === 'CREATE'" />
        <EditTwoTone v-if="item.action === 'EDIT'" />
        <DeleteTwoTone v-if="item.action === 'DELETE'" />
        <ControlTwoTone v-if="item.action === 'RUN_PROCESS_REPORT'" />
        <BookTwoTone v-if="item.action === 'OPEN_CUSTOMER_WINDOW'" />
        <ContainerTwoTone v-if="item.action === 'OPEN_HTML_WINDOW'" />
        <FileTextTwoTone v-if="item.action === 'EXPORT'" />
        <BellTwoTone v-if="item.action === 'NOTICE'" />
        <HddOutlined v-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'" />

        <span v-if="item.action === 'CREATE'" @click="create">{{
          item.name
        }}</span>
        <span v-else-if="item.action === 'DELETE'" @click="deleteData">{{
          item.name
        }}</span>
        <span v-else-if="item.action === 'EXPORT'" @click="exportConfirm">{{
          item.name
        }}</span>
        <span
          v-else-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'" 
          @click="openRemotCompoentModule(item)"
        >{{
          item.name
        }}</span>
        <span v-else>{{ item.name }}</span>
      </a-breadcrumb-item>

      <!-- <a-breadcrumb-item>
        <GridColumnDef
          :window-no="windowNo"
          :tab-index="tabIndex"
          :tab-grid-fields="tabGridFields"
          @property-changed="propertyChanged($event)"
        />
      </a-breadcrumb-item> -->
    </a-breadcrumb>
    <a-breadcrumb separator="|">
      <a-breadcrumb-item v-for="(item, index) in rightTabButton" :key="index">
        <PlusSquareTwoTone v-if="item.action === 'CREATE'" />
        <EditTwoTone v-if="item.action === 'EDIT'" />
        <DeleteTwoTone v-if="item.action === 'DELETE'" />
        <ControlTwoTone v-if="item.action === 'RUN_PROCESS_REPORT'" />
        <BookTwoTone v-if="item.action === 'OPEN_CUSTOMER_WINDOW'" />
        <ContainerTwoTone v-if="item.action === 'OPEN_HTML_WINDOW'" />
        <FileTextTwoTone v-if="item.action === 'EXPORT'" />
        <BellTwoTone v-if="item.action === 'NOTICE'" />
        <HddOutlined v-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'" />
        <span v-if="item.action === 'CREATE'" @click="create">{{
          item.name
        }}</span>
        <span v-else-if="item.action === 'DELETE'" @click="deleteData">{{
          item.name
        }}</span>
        <span v-else-if="item.action === 'EXPORT'" @click="exportConfirm">{{
          item.name
        }}</span>
        <span v-else-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'" @click="openRemotCompoentModule(item)">{{
          item.name
        }}</span>
        <span
          v-else-if="item.action === 'NOTICE'"
          @click="notificationModal = true"
        >{{ item.name }}</span>
        <span v-else>{{ item.name }}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>

  <Modal
    v-model:show="notificationModal"
    :show-canel-button="false"
    :show-ok-button="false"
  >
    <template #header>
      {{ $t("lang.tabButton.sendNotice") }}
    </template>
    <NotificationPanel ref="notificationPanel" />
    <template #footer>
      <button type="button" class="btn btn-default" @click="sendNotification">
        {{ $t("lang.tabButton.send") }}
      </button>
      <button type="button" class="btn btn-default" @click="cancelNotification">
        {{ $t("lang.tabButton.cancel") }}
      </button>
    </template>
  </Modal>

  
  <a-modal v-model:open="modal1Open">
    <component :is="modal1Component" />
  </a-modal>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, getCurrentInstance, defineAsyncComponent } from 'vue';
import Common from '../../common/Common';
import DownloadService from '../../resource/file/DownloadService.js';
import NotificationPanel from '../../customer/NotificationPanel.vue';

import dayjs from 'dayjs';
import GridColumnDefUtil from '../tabGridView/GridColumnDef.js';
import GridColumnDef from '../tabGridView/GridColumnDef.vue';

import { Spin as ASpin, Empty as AEmpty } from 'ant-design-vue';
import { CssUtil } from 'pc-component-v3';
import {
  PlusSquareTwoTone,
  DeleteTwoTone,
  EditTwoTone,
  BookTwoTone,
  BellTwoTone,
  HddOutlined,
  FileTextTwoTone,
  ContainerTwoTone,
  ControlTwoTone,
} from '@ant-design/icons-vue';
const props = defineProps({
  window: {
    type: Object,
    default: () => ({}),
  },
  nowTab: {
    type: String,
    default: '',
  },
  curdWindowFunctionAccess: {
    type: Object,
    default: function () {
      return null;
    },
  },
  modelDatas: {
    type: Object,
    default: function () {
      return null;
    },
  },
  showTabDto: {
    type: Object,
    default: function () {
      return null;
    },
  },
  simpleFilterParams: {
    type: String,
    default: null,
  },
  complexFilterParams: {
    type: Array,
    default: () => {
      return [];
    },
  },
  viewType: {
    type: String,
    default: null,
  },
});

const emit = defineEmits(['createRecordInWindowEdit', 'deleteRecords']);

const tabButtons = ref([]);
const leftTabButton = ref([]);
const rightTabButton = ref([]);
const notificationModal = ref(false);
const notificationPanel = ref(null);
// 模态框的打开状态
const modal1Open = ref(false);
// 模态框的组件
const modal1Component = ref(null);




const { proxy } = getCurrentInstance(); //访问this
// 新建数据
const create = () => {
  emit('createRecordInWindowEdit');
};
// 删除数据
const deleteData = () => {
  emit('deleteRecords');
};

/**
 * 导出确认
 */
const exportConfirm = () => {
  if (
    props.curdWindowFunctionAccess.canExport != null &&
    props.curdWindowFunctionAccess.canExport === true
  ) {
    BootstrapDialog.show({
      title: proxy.$t('lang.TabButton.dataExport'), //title
      message: proxy.$t('lang.TabButton.DataExport'),
      buttons: [
        {
          label: proxy.$t('lang.TabButton.exportMasterTableData'),
          action: function (dialog) {
            exportData(false);
            dialog.close();
          },
        },
        {
          label: proxy.$t('lang.TabButton.exportAllData'),
          action: function (dialog) {
            exportData(true);
            dialog.close();
          },
        },
        {
          label: proxy.$t('lang.TabButton.cancel'),
          action: function (dialog) {
            dialog.close();
          },
        },
      ],
    });
  } else {
    Notify.error(
      proxy.$t('lang.tabButton.describe4'),
      proxy.$t('lang.tabButton.describe5'),
      false,
    );
  }
};
const exportData = exportSubTabData => {
  var token = localStorage.getItem('#token');
  var windowNo = props.window.no;
  var recordId = null;
  if (props.modelDatas != undefined) {
    recordId = props.modelDatas.id;
  }

  var obj = {
    windowNo: windowNo,
    tabIndex: props.showTabDto.tabIndex,
    recordId: recordId,
    token: token,
    simpleFilterCondition: props.simpleFilterParams,
    filterParams: props.complexFilterParams,
  };

  let url = null;
  if (recordId == null) {
    url = Common.getApiURL('exportResource/exportWindowData');
  } else {
    url = Common.getApiURL('exportResource/exportSingleWindowData');
  }
  url += '?exportSubTabData=' + exportSubTabData;

  let formParameterName = 'exportQueryParamStr';
  let formParameterValue = JSON.stringify(obj);

  var data = formParameterName + '=' + formParameterValue;
  var timeStr = dayjs().format('_YYYYMMDD_hhmmss');

  var fileName =
    props.showTabDto == null
      ? '导出数据' + timeStr + '.xlsx'
      : props.showTabDto.name + timeStr + '.xlsx';
  DownloadService.postDownloadFile(url, data, fileName);
};

// 发送通知
const sendNotification = () => {
  var notification = notificationPanel.value.getNotification();
  var recordIds = [];
  if (props.viewType == 'Grid') {
    if (props.modelDatas && props.modelDatas.length > 0) {
      props.modelDatas.forEach(function (item) {
        if (item.select) {
          recordIds.push(item.id);
        }
      });
    }
  }
  if (recordIds.length == 0) {
    Notify.error(
      proxy.$t('lang.Notify.error'),
      proxy.$t('lang.tabButton.describe7'),
      true,
    );
    return;
  }
  if (notification.userIds == null || notification.userIds.length == 0) {
    Notify.error(
      proxy.$t('lang.Notify.error'),
      proxy.$t('lang.tabButton.describe8'),
      true,
    );
    return;
  }
  if (notification.theme == null || notification.theme.trim() == '') {
    Notify.error(
      proxy.$t('lang.Notify.error'),
      proxy.$t('lang.tabButton.describe9'),
      true,
    );
    return;
  }
  if (notification.content == null || notification.content.trim() == '') {
    Notify.error(
      proxy.$t('lang.Notify.error'),
      proxy.$t('lang.tabButton.describe10'),
      true,
    );
    return;
  }
  var windowNo = props.window.no;
  var tabIndex = props.showTabDto.tabIndex;
  notification.windowNo = windowNo;
  notification.tabIndex = tabIndex;
  notification.recordIds = recordIds;
  notification.className = props.showTabDto.className;

  $.ajax({
    url: Common.getApiURL('notificationResource/send'),
    type: 'post',
    beforeSend: function (request) {
      Common.addTokenToRequest(request);
    },
    contentType: 'application/json',
    data: JSON.stringify(notification),
    success: function (data) {
      notificationModal.value = false;
      Notify.success(
        proxy.$t('lang.tabButton.describe11'),
        proxy.$t('lang.tabButton.describe12'),
        true,
      );
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      Common.processException(XMLHttpRequest, textStatus, errorThrown);
    },
  });
};
// 取消发送
const cancelNotification = () => {
  notificationModal.value = false;
};

// 获取表头按钮分组值，如果没有分组则使用页签按钮
watch(
  () => props.window,
  newVal => {
    if (newVal.tabs && newVal.tabs.length) {
      const mapTabButtonDtos = JSON.parse(
        JSON.stringify(newVal.tabs[0].tabGridView.mapTabButtonDtos),
      );
      if (isEmpty(mapTabButtonDtos)) {
        tabButtons.value = newVal.tabs[0].tabGridView.tabButtons;
        tabButtonsHandler();
      } else {
        tabButtons.value = newVal.tabs[0].tabGridView.mapTabButtonDtos;
      }
    }
  },
  { deep: true, immediate: true },
);
watch(
  () => props.nowTab,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      let nowTabButtons;
      if (tabButtons.value) {
        for (let key in tabButtons.value) {
          if (key === newVal) {
            nowTabButtons = tabButtons.value[key];
            tabButtonsHandler(nowTabButtons);
          }
        }
      }
    }
  },
  { deep: true, immediate: true },
);
const tabButtonsHandler = nowTabButtons => {
  let buttons;
  if (nowTabButtons) {
    buttons = JSON.parse(JSON.stringify(nowTabButtons));
  } else {
    buttons = JSON.parse(JSON.stringify(tabButtons.value));
  }
  rightTabButton.value = [];
  leftTabButton.value = [];
  buttons.forEach(item => {
    if (item.buttonLocation === 'TABLE_HEADER_RIGHT') {
      rightTabButton.value.push(item);
    } else {
      leftTabButton.value.push(item);
    }
  });
};
// 用来判断分组的表头按钮是否有值
const isEmpty = obj => {
  if (typeof obj !== 'object' || obj === null) {
    return true;
  }
  if (Object.keys(obj).length === 0) {
    return true;
  }
};


/**
 * 获取字符串的哈希值
 * @param input 
 */
const 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路径
     */
const openRemotCompoentModule = async function(tabButton){

  let jsUrl = tabButton.remoteComponentModuleJsUrl;
  
  let cssUrl = tabButton.remoteComponentModuleCssUrl;

  // 显示模态框
  // 异步的加载js组件
  //let jsUrl = './module/client-eam-module-v3/dist/AssetCheckCreate.js';
  //let cssUrl = './module/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: 3000,
    });

    modal1Component.value = testAsyncRemoteComponent;
    modal1Open.value = true;
  }
  
};


</script>

<style scoped>
.button_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>