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">
        <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>
      </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">
        <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>
      </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" v-model:open="modal1Open" />
  <!-- </a-modal> -->
</template>

<script setup>
import {
  ref,
  defineProps,
  defineEmits,
  watch,
  getCurrentInstance,
  defineAsyncComponent,
  h,
} 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,
  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;
    },
  },
  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 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 refresh = () => {
  emit('refreshDatas', false);
};
const closeModal = () => {
  modal1Open.value = false;
};
/**
 * 导出确认
 */
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);
  } else {
    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: 3000,
    });

    modal1Component.value = testAsyncRemoteComponent;
    modal1Open.value = true;
    console.log(modal1Component.value);
  }
};
</script>

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