vben
5 years ago
30 changed files with 271 additions and 177 deletions
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<span :class="`${prefixCls}__extra-fold`" @click="handleFold"> |
|||
<Icon :icon="getIcon" /> |
|||
</span> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, unref, computed } from 'vue'; |
|||
import { RedoOutlined } from '@ant-design/icons-vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { Tooltip } from 'ant-design-vue'; |
|||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
|||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
|||
|
|||
import Icon from '/@/components/Icon'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'FoldButton', |
|||
components: { RedoOutlined, Tooltip, Icon }, |
|||
|
|||
setup() { |
|||
const { prefixCls } = useDesign('multiple-tabs-content'); |
|||
const { getShowMenu, setMenuSetting } = useMenuSetting(); |
|||
const { getShowHeader, setHeaderSetting } = useHeaderSetting(); |
|||
|
|||
const getIsUnFold = computed(() => { |
|||
return !unref(getShowMenu) && !unref(getShowHeader); |
|||
}); |
|||
|
|||
const getIcon = computed(() => { |
|||
return unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full'; |
|||
}); |
|||
|
|||
function handleFold() { |
|||
const isScale = !unref(getShowMenu) && !unref(getShowHeader); |
|||
setMenuSetting({ |
|||
show: isScale, |
|||
hidden: !isScale, |
|||
}); |
|||
setHeaderSetting({ |
|||
show: isScale, |
|||
}); |
|||
} |
|||
|
|||
return { prefixCls, getIcon, handleFold }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,11 +1,9 @@ |
|||
export default { |
|||
redo: '刷新当前', |
|||
close: '关闭当前', |
|||
closeLeft: '关闭左侧', |
|||
closeRight: '关闭右侧', |
|||
closeOther: '关闭其他', |
|||
closeAll: '关闭全部', |
|||
putAway: '收起', |
|||
unfold: '展开', |
|||
redo: '重新加载', |
|||
close: '关闭标签页', |
|||
closeLeft: '关闭左侧标签页', |
|||
closeRight: '关闭右侧标签页', |
|||
closeOther: '关闭其它标签页', |
|||
closeAll: '关闭全部标签页', |
|||
tooltipRedo: '刷新', |
|||
}; |
|||
|
|||
@ -0,0 +1,45 @@ |
|||
// Used to configure the general configuration of some components without modifying the components
|
|||
|
|||
import type { SorterResult } from '../components/Table'; |
|||
|
|||
export default { |
|||
// basic-table setting
|
|||
table: { |
|||
// Form interface request general configuration
|
|||
// support xxx.xxx.xxx
|
|||
fetchSetting: { |
|||
// The field name of the current page passed to the background
|
|||
pageField: 'page', |
|||
// The number field name of each page displayed in the background
|
|||
sizeField: 'pageSize', |
|||
// Field name of the form data returned by the interface
|
|||
listField: 'items', |
|||
// Total number of tables returned by the interface field name
|
|||
totalField: 'total', |
|||
}, |
|||
// Number of pages that can be selected
|
|||
pageSizeOptions: ['10', '50', '80', '100'], |
|||
// Default display quantity on one page
|
|||
defaultPageSize: 10, |
|||
// Custom general sort function
|
|||
defaultSortFn: (sortInfo: SorterResult) => { |
|||
const { field, order } = sortInfo; |
|||
return { |
|||
// The sort field passed to the backend you
|
|||
field, |
|||
// Sorting method passed to the background asc/desc
|
|||
order, |
|||
}; |
|||
}, |
|||
// Custom general filter function
|
|||
defaultFilterFn: (data: Partial<Recordable<string[]>>) => { |
|||
return data; |
|||
}, |
|||
}, |
|||
// scrollbar setting
|
|||
scrollbar: { |
|||
// Whether to use native scroll bar
|
|||
// After opening, the menu, modal, drawer will change the pop-up scroll bar to native
|
|||
native: false, |
|||
}, |
|||
}; |
|||
Loading…
Reference in new issue