|
|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
- <vxe-grid class="wrapper" v-bind="props.gridOptions" ref="gridRef" v-fullscreen>
|
|
|
+ <vxe-grid class="wrapper" v-bind="gridOptions" ref="gridRef" v-fullscreen>
|
|
|
<template #form>
|
|
|
<Search
|
|
|
- v-if="props?.searchConfig && props.searchConfig.enable && props.searchConfig?.fields && props.searchConfig?.data"
|
|
|
- :fields="props.searchConfig?.fields"
|
|
|
- :data="props.searchConfig?.data"
|
|
|
- v-bind="props.searchConfig"
|
|
|
+ v-if="searchConfig && searchConfig.enable && searchConfig?.fields && searchConfig?.data"
|
|
|
+ :fields="searchConfig?.fields"
|
|
|
+ :data="searchConfig?.data"
|
|
|
+ v-bind="searchConfig"
|
|
|
@reset="handleReset"
|
|
|
@search="handleSearch"
|
|
|
>
|
|
|
@@ -19,8 +19,8 @@
|
|
|
<template #top>
|
|
|
<div class="top-main">
|
|
|
<div class="top-top" v-if="$slots.toolbarTop">
|
|
|
- <a-space v-if="props?.toolbarTopConfig && props?.toolbarTopConfig.enable" style="margin-right: 8px">
|
|
|
- <a-button v-for="(btn, idx) in props?.toolbarTopConfig.buttons" :key="btn.code" size="middle" v-bind="btn.props">{{
|
|
|
+ <a-space v-if="toolbarTopConfig && toolbarTopConfig.enable" style="margin-right: 8px">
|
|
|
+ <a-button v-for="(btn, idx) in toolbarTopConfig.buttons" :key="btn.code" size="middle" v-bind="btn.props">{{
|
|
|
btn.title
|
|
|
}}</a-button>
|
|
|
</a-space>
|
|
|
@@ -28,55 +28,70 @@
|
|
|
<slot name="toolbarTop"></slot>
|
|
|
</div>
|
|
|
<div class="top-bottom">
|
|
|
- <div class="top-left" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
|
|
|
- <Toolbar :toolbarConfig="props.toolbarConfig">
|
|
|
+ <div class="top-left" v-if="toolbarConfig && toolbarConfig.enable">
|
|
|
+ <Toolbar :toolbarConfig="toolbarConfig">
|
|
|
+ <a-space v-if="toolbarConfig.leftButtons" style="margin-right: 8px">
|
|
|
+ <a-button v-for="(btn, idx) in toolbarConfig.leftButtons" :key="btn.code" size="middle" v-bind="btn.props">{{
|
|
|
+ btn.title
|
|
|
+ }}</a-button>
|
|
|
+ </a-space>
|
|
|
<slot name="toolbarLeft"></slot>
|
|
|
</Toolbar>
|
|
|
</div>
|
|
|
- <div class="top-right" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
|
|
|
- <a-tooltip placement="top">
|
|
|
- <template #title>
|
|
|
- <span>刷新</span>
|
|
|
- </template>
|
|
|
- <a-button type="text" size="small" @click="handleRefresh">
|
|
|
- <ReloadOutlined />
|
|
|
- </a-button>
|
|
|
- </a-tooltip>
|
|
|
-
|
|
|
- <a-tooltip placement="top" v-if="isZoom">
|
|
|
- <template #title>
|
|
|
- <span>还原</span>
|
|
|
- </template>
|
|
|
- <a-button type="text" size="small" @click="toggleFullscreen">
|
|
|
- <FullscreenExitOutlined />
|
|
|
- </a-button>
|
|
|
- </a-tooltip>
|
|
|
-
|
|
|
- <a-tooltip placement="top" v-if="!isZoom">
|
|
|
- <template #title>
|
|
|
- <span>全屏</span>
|
|
|
- </template>
|
|
|
- <a-button type="text" size="small" @click="toggleFullscreen">
|
|
|
- <FullscreenOutlined />
|
|
|
- </a-button>
|
|
|
- </a-tooltip>
|
|
|
-
|
|
|
- <a-tooltip placement="top">
|
|
|
- <template #title>
|
|
|
- <span>列设置</span>
|
|
|
- </template>
|
|
|
- <a-button type="text" size="small" @click="handleSetting">
|
|
|
- <SettingOutlined />
|
|
|
- </a-button>
|
|
|
- </a-tooltip>
|
|
|
+ <div class="top-right" v-if="toolbarConfig && toolbarConfig.enable">
|
|
|
+ <div class="top-right-left" v-if="!has(toolbarConfig, 'displayToolbar') || get(toolbarConfig, 'displayToolbar') === DISPLAY_STATE.VISIBLE">
|
|
|
+ <a-tooltip placement="top">
|
|
|
+ <template #title>
|
|
|
+ <span>刷新</span>
|
|
|
+ </template>
|
|
|
+ <a-button type="text" size="small" @click="handleRefresh">
|
|
|
+ <ReloadOutlined />
|
|
|
+ </a-button>
|
|
|
+ </a-tooltip>
|
|
|
+
|
|
|
+ <a-tooltip placement="top" v-if="isZoom">
|
|
|
+ <template #title>
|
|
|
+ <span>还原</span>
|
|
|
+ </template>
|
|
|
+ <a-button type="text" size="small" @click="toggleFullscreen">
|
|
|
+ <FullscreenExitOutlined />
|
|
|
+ </a-button>
|
|
|
+ </a-tooltip>
|
|
|
+
|
|
|
+ <a-tooltip placement="top" v-if="!isZoom">
|
|
|
+ <template #title>
|
|
|
+ <span>全屏</span>
|
|
|
+ </template>
|
|
|
+ <a-button type="text" size="small" @click="toggleFullscreen">
|
|
|
+ <FullscreenOutlined />
|
|
|
+ </a-button>
|
|
|
+ </a-tooltip>
|
|
|
+
|
|
|
+ <a-tooltip placement="top">
|
|
|
+ <template #title>
|
|
|
+ <span>列设置</span>
|
|
|
+ </template>
|
|
|
+ <a-button type="text" size="small" @click="handleSetting">
|
|
|
+ <SettingOutlined />
|
|
|
+ </a-button>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="top-right-right" v-if="toolbarConfig.rightButtons">
|
|
|
+ <a-space style="margin-right: 8px">
|
|
|
+ <a-button v-for="(btn, idx) in toolbarConfig.rightButtons" :key="btn.code" size="middle" v-bind="btn.props">{{
|
|
|
+ btn.title
|
|
|
+ }}</a-button>
|
|
|
+ </a-space>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template #pager>
|
|
|
- <div class="pager" v-if="props?.pagerConfig && props.pagerConfig.enable">
|
|
|
- <Pagination :pagerConfig="props.pagerConfig" />
|
|
|
+ <div class="pager" v-if="pagerConfig && pagerConfig.enable">
|
|
|
+ <Pagination :pagerConfig="pagerConfig" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -103,7 +118,8 @@
|
|
|
import Pagination from './component/pagination/index.vue';
|
|
|
import Toolbar from './component/toolbar/index.vue';
|
|
|
import IndexData from './component/indexData/index.vue';
|
|
|
- import { mapValues, has, isString } from 'lodash';
|
|
|
+ import { mapValues, has, isString, get } from 'lodash';
|
|
|
+ import {DISPLAY_STATE} from "/@/components/BsUi/constant.js";
|
|
|
const props = defineProps(['gridOptions', 'searchConfig', 'pagerConfig', 'toolbarConfig', 'getGridRef', 'mounted', 'toolbarTopConfig']);
|
|
|
|
|
|
const $slots = useSlots();
|
|
|
@@ -114,11 +130,9 @@
|
|
|
|
|
|
const slotCols = ref([]);
|
|
|
|
|
|
-
|
|
|
const handleSetting = () => {
|
|
|
gridRef.value.openCustom();
|
|
|
- }
|
|
|
-
|
|
|
+ };
|
|
|
|
|
|
const setSlotsCols = () => {
|
|
|
slotCols.value = [];
|
|
|
@@ -181,6 +195,18 @@
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
+
|
|
|
+ .top-right-left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-right-right {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|