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

<template>
  <div class="button_list">
    <a-space v-if="leftTabButton && leftTabButton.length" size="small">
      <template v-for="(item, index) in leftTabButton" :key="index">
        <a-button
          v-if="item.action === 'CREATE'"
          :icon="h(PlusSquareTwoTone)"
          @click="create"
        >
          {{ item.name }}
        </a-button>
        <a-button v-else-if="item.action === 'EDIT'" :icon="h(EditTwoTone)">
          {{ item.name }}
        </a-button>
        <a-button
          v-else-if="item.action === 'DELETE'"
          :icon="h(DeleteTwoTone)"
          @click="deleteData"
        >
          {{ item.name }}
        </a-button>
        <a-button
          v-else-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(FileTextTwoTone)"
          @click="exportConfirm"
        >
          {{ 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>
    </a-space>
    <div v-else />
    <a-space v-if="rightTabButton && rightTabButton.length" size="small">
      <template v-for="(item, index) in rightTabButton" :key="index">
        <a-button
          v-if="item.action === 'CREATE'"
          :icon="h(PlusSquareTwoTone)"
          @click="create"
        >
          {{ item.name }}
        </a-button>
        <a-button v-else-if="item.action === 'EDIT'" :icon="h(EditTwoTone)">
          {{ item.name }}
        </a-button>
        <a-button
          v-else-if="item.action === 'DELETE'"
          :icon="h(DeleteTwoTone)"
          @click="deleteData"
        >
          {{ item.name }}
        </a-button>
        <a-button
          v-else-if="item.action === 'RUN_PROCESS_REPORT'"
          :icon="h(ControlTwoTone)"
        >
          {{ item.name }}
        </a-button>
        <a-button
          v-else-if="item.action === 'OPEN_CUSTOMER_WINDOW'"
          :icon="h(BookTwoTone)"
        >
          {{ item.name }}
        </a-button>
        <a-button
          v-else-if="item.action === 'OPEN_HTML_WINDOW'"
          :icon="h(ContainerTwoTone)"
        >
          {{ item.name }}
        </a-button>
        <a-button
          v-else-if="item.action === 'EXPORT'"
          :icon="h(FileTextTwoTone)"
          @click="exportConfirm"
        >
          {{ 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>
    </a-space>
    <div v-else />
  </div>
  <Modal v-model:show="modal" :full="true">
    <ProcessReportResultPreview
      v-if="
        processReportResult != null &&
          (processReportResult.reportResults != null ||
            processReportResult.processResult != null)
      "
      :process-report-result="processReportResult"
      :pdf-only="false"
      :excel-only="false"
    />
    <template #header>
      {{ $t("lang.tabButton.executeResult") }}
    </template>
  </Modal>

  <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="executeProcess">
        {{ $t("lang.tabButton.send") }}
      </button>
      <button type="button" class="btn btn-default" @click="cancelNotification">
        {{ $t("lang.tabButton.cancel") }}
      </button>
    </template>
  </Modal>

  <component
    :is="modal1Component"
    v-model:open="modal1Open"
    :model-data="selectDatas"
    @refresh-data="refresh"
  />
</template>

<script setup>
import {
  ref,
  defineProps,
  defineEmits,
  watch,
  getCurrentInstance,
  defineAsyncComponent,
  h,
  onMounted,
} 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 CustomerWindowResource from '../../api/dic/CustomerWindowResource.js';
import HtmlWindowResource from '../../api/dic/HtmlWindowResource.js';
import ProcessReportResource from '../../api/dic/ProcessReportResource.js';

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,
  ReloadOutlined,
  LayoutTwoTone,
} 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;
    },
  },
  selectModelDatas: {
    type: Array,
    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,
  },
  uuid: {
    type: String,
    default: null,
  },
});

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

const selectDatas = ref([]);
const tabButtons = ref([]);
const leftTabButton = ref([]);
const rightTabButton = ref([]);
const notificationModal = ref(false);
const processReportResult = ref(null);
const modal = ref(false);
//表头按钮提示模态框
const titleModal = ref(false);
const tabButtonModel = ref(null);
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 refresh = () => {
  emit('refreshDatas', false);
};

watch(
  () => props.selectModelDatas,
  newV => {
    selectDatas.value = newV;
  },
  { immediate: true, deep: true },
);

/**
 * 导出确认
 */
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);
    }
  });
  if (leftTabButton.value.length > 0 || rightTabButton.value.length > 0) {
    emit('judgeIsHaveButtons', true);
  }
  if (leftTabButton.value.length === 0 && rightTabButton.value.length === 0) {
    emit('judgeIsHaveButtons', false);
  }
};
// 用来判断分组的表头按钮是否有值
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 openRemoteComponentModule = async function (tabButton) {
  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);
  }
};
//跳转或执行流程
const execute = async function (tabButton) {
  tabButtonModel.value = tabButton;
  if (
    tabButton.customerWindowNo != undefined &&
    tabButton.customerWindowNo != ''
  ) {
    CustomerWindowResource.uniqueByNo(tabButton.customerWindowNo).then(
      successData => {
        tabButton.customerWindowRouteUrl = successData.routeUrl;
        if (tabButton.customerWindowNo == '20221101_151823') {
          localStorage.setItem(
            'AssetInstance_ComplexFilterParams',
            JSON.stringify(props.complexFilterParams),
          );
          localStorage.setItem(
            'AssetInstance_SimpleFilterParams',
            props.simpleFilterParams,
          );
        }
        //跳转到tabButton.routeUrl
        if (props.viewType == 'Form' || props.viewType == 'EditForm') {
          switchFormRoute(tabButton);
        } else if (props.viewType == 'Grid') {
          switchFormRoute(tabButton);
        }
      },
      errorData => {
        Common.processException(errorData);
      },
    );
  } else if (
    tabButton.processReportNo != undefined &&
    tabButton.processReportNo != ''
  ) {
    // 判断流程报表是否有参数
    // 如果有参数则直接跳转到流程和报表的界面。
    if (
      tabButton.routerRedirect == undefined ||
      tabButton.routerRedirect == false
    ) {
      titleModal.value = true;
      if (tabButton.tipsTitle == undefined || tabButton.tipsTitle.length == 0) {
        executeProcess();
      } else {
        titleModal.value = true;
      }
    } else {
      this.$router.push({
        path: '/desktop/process-report/' + tabButton.processReportNo,
      });
    }
  } else if (tabButton.htmlWindowNo != undefined) {
    HtmlWindowResource.uniqueByNo(tabButton.htmlWindowNo).then(
      htmlWindowDto => {
        if (htmlWindowDto != undefined) {
          var htmlWindowUrl = htmlWindowDto.htmlFileName;
          var autoCloseInterval = htmlWindowDto.autoCloseInterval;
          var regExp = new RegExp('[{].*?[}]', 'g');
          var result = htmlWindowUrl.match(regExp);
          if (htmlWindowUrl != undefined && htmlWindowUrl != '') {
            for (var index = 0, len = result.length; index < len; index++) {
              var tempResult = result[index];
              console.log('{' + tempResult + '}匹配');
              if (tempResult == '{URL}') {
                htmlWindowUrl = htmlWindowUrl.replace(
                  '{URL}',
                  Common.getHostPageBaseURL(),
                );
              } else if (tempResult == '{RecordIds}') {
                if (props.viewType == 'Grid') {
                  var recordIds = '';
                  if (props.modelDatas && props.modelDatas.length > 0) {
                    props.modelDatas.forEach(function (item) {
                      if (item.select) {
                        recordIds += item.id + ',';
                      }
                    });
                  }
                  if (recordIds != null && recordIds.length > 0) {
                    recordIds = recordIds.substring(0, recordIds.length - 1);
                  } else {
                    Notify.error(
                      proxy.$t('lang.Notify.error'),
                      proxy.$t('lang.tabButton.describe3'),
                      true,
                    );
                    return;
                  }
                  htmlWindowUrl = htmlWindowUrl.replace(
                    '{RecordIds}',
                    recordIds,
                  );
                } else {
                  var recordId = props.modelData.id;
                  htmlWindowUrl = htmlWindowUrl.replace(
                    '{RecordIds}',
                    recordId,
                  );
                }
              } else if (tempResult == '{Token}') {
                htmlWindowUrl = htmlWindowUrl.replace(
                  '{Token}',
                  Common.getToken(),
                );
              } else {
                if (props.selectedModelDatas.length == 0) {
                  Notify.error(
                    proxy.$t('lang.Notify.error'),
                    proxy.$t('lang.tabButton.describe3'),
                    true,
                  );
                  return;
                } else if (props.selectedModelDatas.length > 1) {
                  Notify.error(
                    proxy.$t('lang.Notify.error'),
                    proxy.$t('lang.tabButton.describe2'),
                    true,
                  );
                  return;
                }
                var tempResult1 = tempResult.replace('{', '').replace('}', '');
                htmlWindowUrl = htmlWindowUrl.replace(
                  tempResult,
                  props.getFirstSelectModelDataFieldValue(tempResult1),
                );
              }
            }

            var openWindow = window.open(htmlWindowUrl);

            // 自动关闭
            if (autoCloseInterval != undefined) {
              setTimeout(function () {
                openWindow.close();
                openWindow = undefined;
              }, autoCloseInterval * 1000);
            }
          }
        }
      },
      errorData => {
        Common.processException(errorData);
      },
    );
  }
};
// 切换到Form表单的路由
const switchFormRoute = async function (tabButton) {
  var recordIds = '';
  if (props.modelDatas && props.modelDatas.length > 0) {
    props.modelDatas.forEach(function (item) {
      if (item.select) {
        recordIds += item.id + ',';
      }
    });
  }
  var routeDate = {
    path: tabButton.customerWindowRouteUrl,
    params: {
      recordIds: recordIds,
    },
  };
  // 请勿修改，会影响生单的功能
  var uuid = props.uuid;
  if (uuid != undefined) {
    routeDate.path = routeDate.path + '/' + uuid;
  }

  const frameUrl = Common.getRedirectUrl('#' + routeDate.path);

  // 供子页面iframe调用，修改modelData，(举例：生单界面修改参数)。
  // window.modelDataChanged = modelDataChanged;

  // window.getModelData = this.getModelData;
  // let modelData1 = JSON.stringify(modelData);
  // console.log(modelData1);
  // localStorage.setItem(props.uuid + '#GenerateDocumentTool', modelData1);

  var iWidth = 1280; //弹出窗口的宽度;
  var iHeight = 720; //弹出窗口的高度;
  var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
  var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
  window.open(
    frameUrl,
    '_blank',
    'height=' +
      iHeight +
      ',innerHeight=' +
      iHeight +
      ',width=' +
      iWidth +
      ',innerWidth=' +
      iWidth +
      ',top=' +
      iTop +
      ',left=' +
      iLeft +
      ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no',
  );
  // window.open(frameUrl);
};
// 执行流程
const executeProcess = async function () {
  var ids = [];
  if (props.modelDatas) {
    props.modelDatas.forEach(function (modelData) {
      if (modelData.select == true) {
        ids.push(modelData.id);
      }
    });
  } else if (props.modelData) {
    ids.push(props.modelData.id);
  }
  // props.loading=true;

  ProcessReportResource.runProcessByIds(
    tabButtonModel.value.processReportNo,
    ids,
  ).then(
    successData => {
      modal.value = true;
      // _self.loading=false;
      processReportResult.value = successData;

      if (
        processReportResult.value.reportResults != undefined &&
        processReportResult.value.reportResults.length > 0
      ) {
        processReportResult.value.reportResults.forEach(function (item, index) {
          if (item.reportDefinitionType !== 'ExcelReport') {
            item.previewIndex = 1;
          } else {
            item.previewIndex = 2;
          }
          if (index == 0) {
            item.showPreview = true;
          } else {
            item.showPreview = false;
          }
        });
      }
      titleModal.value = false;
    },
    errorData => {
      titleModal.value = false;
      Common.processException(errorData);
    },
  );
  // }
};
//关闭表头按钮提示框
const titleModalClose = async function () {
  titleModal.value = false;
};
</script>

<style scoped>
.button_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 6px;
}
.ant-btn {
  padding: 4px 10px;
}
</style>