|
|
@@ -0,0 +1,390 @@
|
|
|
+<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'" />
|
|
|
+
|
|
|
+ <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>{{ 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'" />
|
|
|
+ <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 === '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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, defineProps, defineEmits, watch, getCurrentInstance } 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 {
|
|
|
+ PlusSquareTwoTone,
|
|
|
+ DeleteTwoTone,
|
|
|
+ EditTwoTone,
|
|
|
+ BookTwoTone,
|
|
|
+ BellTwoTone,
|
|
|
+ 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 { 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;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.button_list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|