feat: 适配 vue 3.3 defineOptions
parent
ffe2d77613
commit
73ad948870
|
@ -5,7 +5,6 @@ import windiCSS from 'vite-plugin-windicss'
|
|||
import progress from 'vite-plugin-progress'
|
||||
import purgeIcons from 'vite-plugin-purge-icons'
|
||||
import VitePluginCertificate from 'vite-plugin-mkcert'
|
||||
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
|
||||
import { configPwaConfig } from './pwa'
|
||||
import { configHtmlPlugin } from './html'
|
||||
import { configCompressPlugin } from './compress'
|
||||
|
@ -24,8 +23,6 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
|
|||
vueJsx(),
|
||||
// 打包进度条
|
||||
progress(),
|
||||
// support name
|
||||
vueSetupExtend({}),
|
||||
VitePluginCertificate({
|
||||
source: 'coding'
|
||||
})
|
||||
|
|
|
@ -7,13 +7,15 @@
|
|||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
<script lang="ts" setup name="AButton" extends="Button" indeterminate="false">
|
||||
<script lang="ts" setup extends="Button">
|
||||
import { Button } from 'ant-design-vue'
|
||||
import { computed, unref } from 'vue'
|
||||
import { Icon } from '@/components/Icon'
|
||||
import { buttonProps } from './props'
|
||||
import { useAttrs } from '@/hooks/core/useAttrs'
|
||||
|
||||
defineOptions({ name: 'AButton', indeterminate: false })
|
||||
|
||||
const props = defineProps(buttonProps)
|
||||
// get component class
|
||||
const attrs = useAttrs({ excludeDefaultKeys: false })
|
||||
|
|
|
@ -9,12 +9,14 @@
|
|||
</div>
|
||||
</transition-group>
|
||||
</template>
|
||||
<script lang="ts" setup name="LazyContainer" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import { reactive, onMounted, ref, toRef } from 'vue'
|
||||
import { Skeleton } from 'ant-design-vue'
|
||||
import { useTimeoutFn } from '@vueuse/core'
|
||||
import { useIntersectionObserver } from '@/hooks/event/useIntersectionObserver'
|
||||
|
||||
defineOptions({ name: 'LazyContainer', inheritAttrs: false })
|
||||
|
||||
interface State {
|
||||
isInit: boolean
|
||||
loading: boolean
|
||||
|
|
|
@ -4,11 +4,13 @@
|
|||
</Scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ScrollContainer">
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, nextTick } from 'vue'
|
||||
import { Scrollbar, ScrollbarType } from '@/components/Scrollbar'
|
||||
import { useScrollTo } from '@/hooks/event/useScrollTo'
|
||||
|
||||
defineOptions({ name: 'ScrollContainer' })
|
||||
|
||||
const scrollbarRef = ref<Nullable<ScrollbarType>>(null)
|
||||
|
||||
/**
|
||||
|
|
|
@ -3,13 +3,15 @@
|
|||
{{ getButtonText }}
|
||||
</Button>
|
||||
</template>
|
||||
<script lang="ts" setup name="CountButton">
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect, computed, unref } from 'vue'
|
||||
import { Button } from 'ant-design-vue'
|
||||
import { useCountdown } from './useCountdown'
|
||||
import { isFunction } from '@/utils/is'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
defineOptions({ name: 'CountButton' })
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: [Object, Number, String, Array] },
|
||||
count: { type: Number, default: 60 },
|
||||
|
|
|
@ -8,10 +8,13 @@
|
|||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<script lang="ts" setup name="CountDownInput" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import CountButton from './CountButton.vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useRuleFormItem } from '@/hooks/component/useFormItem'
|
||||
|
||||
defineOptions({ name: 'CountDownInput', inheritAttrs: false })
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: String },
|
||||
size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
|
||||
|
@ -21,6 +24,7 @@ const props = defineProps({
|
|||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const { prefixCls } = useDesign('countdown-input')
|
||||
const [state] = useRuleFormItem(props)
|
||||
</script>
|
||||
|
|
|
@ -3,11 +3,13 @@
|
|||
{{ value }}
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup name="CountTo">
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watchEffect, unref, onMounted, watch } from 'vue'
|
||||
import { useTransition, TransitionPresets } from '@vueuse/core'
|
||||
import { isNumber } from '@/utils/is'
|
||||
|
||||
defineOptions({ name: 'CountTo' })
|
||||
|
||||
const emit = defineEmits(['onStarted', 'onFinished'])
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
@ -91,7 +91,7 @@
|
|||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup name="CropperModal">
|
||||
<script lang="ts" setup>
|
||||
import type { CropendResult, Cropper } from './typing'
|
||||
import { ref } from 'vue'
|
||||
import CropperImage from './Cropper.vue'
|
||||
|
@ -102,6 +102,8 @@ import { dataURLtoBlob } from '@/utils/file/base64Conver'
|
|||
import { isFunction } from '@/utils/is'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
defineOptions({ name: 'CropperModal' })
|
||||
|
||||
type apiFunParams = { file: Blob; name: string; filename: string }
|
||||
|
||||
const emit = defineEmits(['uploadSuccess', 'register'])
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<img v-show="isReady" ref="imgElRef" :src="src" :alt="alt" :crossorigin="crossorigin" :style="getImageStyle" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="CropperImage">
|
||||
<script lang="ts" setup>
|
||||
import { CSSProperties, useAttrs } from 'vue'
|
||||
import { onMounted, ref, unref, computed, onUnmounted } from 'vue'
|
||||
import Cropper from 'cropperjs'
|
||||
|
@ -11,6 +11,8 @@ import 'cropperjs/dist/cropper.css'
|
|||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'CropperImage' })
|
||||
|
||||
const emit = defineEmits(['cropend', 'ready', 'cropendError'])
|
||||
const attrs = useAttrs()
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<CopperModal @register="register" @upload-success="handleUploadSuccess" :uploadApi="uploadApi" :src="sourceValue" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="CropperAvatar">
|
||||
<script lang="ts" setup>
|
||||
import { computed, CSSProperties, unref, ref, watchEffect, watch } from 'vue'
|
||||
import CopperModal from './CopperModal.vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
@ -23,6 +23,8 @@ import { useI18n } from '@/hooks/web/useI18n'
|
|||
import type { ButtonProps } from '@/components/Button'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
||||
defineOptions({ name: 'CropperAvatar' })
|
||||
|
||||
const emit = defineEmits(['update:value', 'change'])
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
@ -17,12 +17,14 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicDrawerFooter">
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { footerProps } from '../props'
|
||||
|
||||
defineOptions({ name: 'BasicDrawerFooter' })
|
||||
|
||||
const props = defineProps({
|
||||
...footerProps,
|
||||
height: {
|
||||
|
|
|
@ -17,12 +17,14 @@
|
|||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicDrawerHeader">
|
||||
<script lang="ts" setup>
|
||||
import { BasicTitle } from '@/components/Basic'
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'BasicDrawerHeader' })
|
||||
|
||||
defineProps({
|
||||
isDetail: propTypes.bool,
|
||||
showDetailBack: propTypes.bool,
|
||||
|
|
|
@ -6,12 +6,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ImportExcel">
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref } from 'vue'
|
||||
import * as XLSX from 'xlsx'
|
||||
import { dateUtil } from '@/utils/dateUtil'
|
||||
import type { ExcelData } from './typing'
|
||||
|
||||
defineOptions({ name: 'ImportExcel' })
|
||||
|
||||
const props = defineProps({
|
||||
// 日期时间格式。如果不提供或者提供空值,将返回原始Date对象
|
||||
dateFormat: {
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
</Row>
|
||||
</Form>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicForm">
|
||||
<script lang="ts" setup>
|
||||
import type { FormActionType, FormProps, FormSchema } from './types/form'
|
||||
import type { AdvanceState } from './types/hooks'
|
||||
import { Ref, useAttrs } from 'vue'
|
||||
|
@ -56,6 +56,8 @@ import { basicProps } from './props'
|
|||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
defineOptions({ name: 'BasicForm' })
|
||||
|
||||
const props = defineProps(basicProps)
|
||||
const emit = defineEmits(['advanced-change', 'reset', 'submit', 'register', 'field-value-change'])
|
||||
const attrs = useAttrs()
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
</template>
|
||||
</Cascader>
|
||||
</template>
|
||||
<script lang="ts" setup name="ApiCascader">
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, watch, watchEffect } from 'vue'
|
||||
import { Cascader } from 'ant-design-vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
@ -28,6 +28,8 @@ import { useRuleFormItem } from '@/hooks/component/useFormItem'
|
|||
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
defineOptions({ name: 'ApiCascader' })
|
||||
|
||||
interface Option {
|
||||
value: string
|
||||
label: string
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</template>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<script lang="ts" setup name="ApiRadioGroup">
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect, computed, unref, watch } from 'vue'
|
||||
import { Radio } from 'ant-design-vue'
|
||||
import { isFunction } from '@/utils/is'
|
||||
|
@ -24,6 +24,8 @@ import { get, omit } from 'lodash-es'
|
|||
const RadioButton = Radio.Button
|
||||
const RadioGroup = Radio.Group
|
||||
|
||||
defineOptions({ name: 'ApiRadioGroup' })
|
||||
|
||||
type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean }
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</template>
|
||||
</Select>
|
||||
</template>
|
||||
<script lang="ts" setup name="ApiSelect" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect, computed, unref, watch } from 'vue'
|
||||
import { Select } from 'ant-design-vue'
|
||||
import { isFunction } from '@/utils/is'
|
||||
|
@ -33,6 +33,8 @@ import { useI18n } from '@/hooks/web/useI18n'
|
|||
import { propTypes } from '@/utils/propTypes'
|
||||
import { SelectValue } from 'ant-design-vue/lib/select'
|
||||
|
||||
defineOptions({ name: 'ApiSelect', inheritAttrs: false })
|
||||
|
||||
type OptionsItem = { label: string; value: string; disabled?: boolean }
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
@change="handleChange"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup name="ApiTransfer">
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch, ref, unref, useAttrs, watchEffect } from 'vue'
|
||||
import { Transfer } from 'ant-design-vue'
|
||||
import { isFunction } from '@/utils/is'
|
||||
|
@ -19,6 +19,8 @@ import { get, omit } from 'lodash-es'
|
|||
import { propTypes } from '@/utils/propTypes'
|
||||
import { TransferDirection, TransferItem } from 'ant-design-vue/lib/transfer'
|
||||
|
||||
defineOptions({ name: 'ApiTransfer' })
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: Array as PropType<Array<any>> },
|
||||
api: {
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
</Tree>
|
||||
</template>
|
||||
<script lang="ts" setup name="ApiTree">
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch, ref, onMounted, unref, useSlots, useAttrs } from 'vue'
|
||||
import { Tree } from 'ant-design-vue'
|
||||
import { isArray, isFunction } from '@/utils/is'
|
||||
|
@ -17,6 +17,8 @@ import { propTypes } from '@/utils/propTypes'
|
|||
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
|
||||
defineOptions({ name: 'ApiTree' })
|
||||
|
||||
const props = defineProps({
|
||||
api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
|
||||
params: { type: Object },
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
</TreeSelect>
|
||||
</template>
|
||||
<script lang="ts" setup name="ApiTreeSelect">
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch, ref, onMounted, unref, useAttrs } from 'vue'
|
||||
import { TreeSelect } from 'ant-design-vue'
|
||||
import { isArray, isFunction } from '@/utils/is'
|
||||
|
@ -17,6 +17,8 @@ import { propTypes } from '@/utils/propTypes'
|
|||
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
|
||||
defineOptions({ name: 'ApiTreeSelect' })
|
||||
|
||||
const props = defineProps({
|
||||
api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
|
||||
params: { type: Object },
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
:fileList="fileList"
|
||||
:disabled="disabled"
|
||||
v-bind="bindProps"
|
||||
@remove="onRemove"
|
||||
@remove="onRemove as any"
|
||||
@change="onFileChange"
|
||||
@preview="onFilePreview"
|
||||
>
|
||||
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="FileUpload">
|
||||
<script lang="ts" setup>
|
||||
import { Upload } from 'ant-design-vue'
|
||||
import { ref, reactive, computed, watch, unref } from 'vue'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
@ -37,6 +37,8 @@ import { useAttrs } from '@/hooks/core/useAttrs'
|
|||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useGlobSetting } from '@/hooks/setting'
|
||||
|
||||
defineOptions({ name: 'FileUpload' })
|
||||
|
||||
const { createMessage, createConfirm } = useMessage()
|
||||
const { prefixCls } = useDesign('upload')
|
||||
const attrs = useAttrs()
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</Col>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicFormAction">
|
||||
<script lang="ts" setup>
|
||||
import type { ColEx } from '../types'
|
||||
//import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
|
||||
import { computed } from 'vue'
|
||||
|
@ -33,10 +33,12 @@ import { useFormContext } from '../hooks/useFormContext'
|
|||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
type ButtonOptions = Partial<ButtonProps> & { text: string }
|
||||
|
||||
const FormItem = Form.Item
|
||||
|
||||
defineOptions({ name: 'BasicFormAction' })
|
||||
|
||||
type ButtonOptions = Partial<ButtonProps> & { text: string }
|
||||
|
||||
const props = defineProps({
|
||||
showActionButtonGroup: propTypes.bool.def(true),
|
||||
showResetButton: propTypes.bool.def(true),
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<script lang="ts" setup name="RadioButtonGroup">
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { Radio } from 'ant-design-vue'
|
||||
import { isString } from '@/utils/is'
|
||||
|
@ -23,6 +23,8 @@ const RadioGroup = Radio.Group
|
|||
type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean }
|
||||
type RadioItem = string | OptionsItem
|
||||
|
||||
defineOptions({ name: 'RadioButtonGroup' })
|
||||
|
||||
const emits = defineEmits(['change'])
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="RuleProps">
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { remove } from '../../../utils'
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState'
|
||||
|
@ -28,6 +28,8 @@ import { isArray } from 'lodash-es'
|
|||
import { Form, FormItem, AutoComplete, Input } from 'ant-design-vue'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
||||
defineOptions({ name: 'RuleProps' })
|
||||
|
||||
// 获取祖先组件的状态
|
||||
const { formConfig } = useFormDesignState()
|
||||
// 抽离 currentItem
|
||||
|
|
|
@ -2,13 +2,15 @@
|
|||
<SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class, 'anticon']" :spin="spin" />
|
||||
<span v-else ref="elRef" :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']" :style="getWrapStyle"></span>
|
||||
</template>
|
||||
<script lang="ts" setup name="Icon">
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted, nextTick, unref, computed, CSSProperties } from 'vue'
|
||||
import SvgIcon from './SvgIcon.vue'
|
||||
import Iconify from '@purge-icons/generated'
|
||||
import { isString } from '@/utils/is'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'Icon' })
|
||||
|
||||
const SVG_END_WITH_FLAG = '|svg'
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
@ -3,11 +3,13 @@
|
|||
<use :xlink:href="symbolId" />
|
||||
</svg>
|
||||
</template>
|
||||
<script lang="ts" setup name="SvgIcon">
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'SvgIcon' })
|
||||
|
||||
const props = defineProps({
|
||||
prefix: {
|
||||
type: String,
|
||||
|
|
|
@ -8,11 +8,13 @@
|
|||
<Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
|
||||
</section>
|
||||
</template>
|
||||
<script lang="ts" setup name="Loading">
|
||||
<script lang="ts" setup>
|
||||
import { Spin } from 'ant-design-vue'
|
||||
import { SizeEnum } from '@/enums/sizeEnum'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'Loading' })
|
||||
|
||||
defineProps({
|
||||
tip: propTypes.string.def(''),
|
||||
size: {
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
</Menu>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicMenu">
|
||||
<script lang="ts" setup>
|
||||
import type { MenuState } from './types'
|
||||
import { computed, unref, reactive, watch, toRefs, ref } from 'vue'
|
||||
import { Menu } from 'ant-design-vue'
|
||||
|
@ -34,6 +34,8 @@ import { getCurrentParentPath } from '@/router/menus'
|
|||
import { listenerRouteChange } from '@/logics/mitt/routeChange'
|
||||
import { getAllParentPath } from '@/router/helper/menuHelper'
|
||||
|
||||
defineOptions({ name: 'BasicMenu' })
|
||||
|
||||
const props = defineProps(basicProps)
|
||||
const emit = defineEmits(['menuClick'])
|
||||
|
||||
|
|
|
@ -3,10 +3,12 @@
|
|||
<MenuItemContent v-bind="$props" :item="item" />
|
||||
</MenuItem>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicMenuItem">
|
||||
<script lang="ts" setup>
|
||||
import { MenuItem } from 'ant-design-vue'
|
||||
import { itemProps } from '../props'
|
||||
import MenuItemContent from './MenuItemContent.vue'
|
||||
|
||||
defineOptions({ name: 'BasicMenuItem' })
|
||||
|
||||
defineProps(itemProps)
|
||||
</script>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
</SubMenu>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicSubMenuItem">
|
||||
<script lang="ts" setup>
|
||||
import type { Menu as MenuType } from '@/router/types'
|
||||
import { computed } from 'vue'
|
||||
import { Menu } from 'ant-design-vue'
|
||||
|
@ -20,6 +20,9 @@ import BasicMenuItem from './BasicMenuItem.vue'
|
|||
import MenuItemContent from './MenuItemContent.vue'
|
||||
|
||||
const SubMenu = Menu.SubMenu
|
||||
|
||||
defineOptions({ name: 'BasicSubMenuItem' })
|
||||
|
||||
const props = defineProps(itemProps)
|
||||
|
||||
const { prefixCls } = useDesign('basic-menu-item')
|
||||
|
|
|
@ -4,13 +4,16 @@
|
|||
{{ getI18nName }}
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup name="MenuItemContent">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { Icon } from '@/components/Icon'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { contentProps } from '../props'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
defineOptions({ name: 'MenuItemContent' })
|
||||
const props = defineProps(contentProps)
|
||||
|
||||
const { prefixCls } = useDesign('basic-menu-item-content')
|
||||
|
|
|
@ -44,7 +44,7 @@
|
|||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicModal" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import type { ModalProps, ModalMethods } from './typing'
|
||||
|
||||
import { computed, ref, watch, unref, watchEffect, toRef, getCurrentInstance, nextTick, useAttrs } from 'vue'
|
||||
|
@ -60,6 +60,8 @@ import { useFullScreen } from './hooks/useModalFullScreen'
|
|||
import { omit } from 'lodash-es'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'BasicModal', inheritAttrs: false })
|
||||
|
||||
const props = defineProps(basicProps)
|
||||
const attrs = useAttrs()
|
||||
const emit = defineEmits(['visible-change', 'height-change', 'cancel', 'ok', 'register', 'update:visible'])
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ModalClose">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
@ -22,6 +22,8 @@ import { useI18n } from '@/hooks/web/useI18n'
|
|||
|
||||
const { t } = useI18n()
|
||||
|
||||
defineOptions({ name: 'ModalClose' })
|
||||
|
||||
const props = defineProps({
|
||||
canFullscreen: { type: Boolean, default: true },
|
||||
fullScreen: { type: Boolean }
|
||||
|
|
|
@ -11,9 +11,11 @@
|
|||
<slot name="appendFooter"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicModalFooter">
|
||||
<script lang="ts" setup>
|
||||
import { basicProps } from '../props'
|
||||
|
||||
defineOptions({ name: 'BasicModalFooter' })
|
||||
|
||||
defineProps(basicProps)
|
||||
|
||||
const emit = defineEmits(['ok', 'cancel'])
|
||||
|
|
|
@ -3,9 +3,11 @@
|
|||
{{ title }}
|
||||
</BasicTitle>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicModalHeader">
|
||||
<script lang="ts" setup>
|
||||
import { BasicTitle } from '@/components/Basic'
|
||||
|
||||
defineOptions({ name: 'BasicModalHeader' })
|
||||
|
||||
defineProps({
|
||||
helpMessage: {
|
||||
type: [String, Array] as PropType<string | string[]>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
</div>
|
||||
</ScrollContainer>
|
||||
</template>
|
||||
<script lang="ts" setup name="ModalWrapper" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { computed, ref, watchEffect, unref, watch, onMounted, nextTick, onUnmounted } from 'vue'
|
||||
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
|
||||
|
@ -13,6 +13,8 @@ import { ScrollContainer } from '@/components/Container'
|
|||
import { createModalContext } from '../hooks/useModalContext'
|
||||
import { useMutationObserver } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'ModalWrapper', inheritAttrs: false })
|
||||
|
||||
const emit = defineEmits(['height-change', 'ext-height'])
|
||||
const props = defineProps({
|
||||
loading: { type: Boolean },
|
||||
|
|
|
@ -10,10 +10,12 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="PageFooter" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'PageFooter', inheritAttrs: false })
|
||||
|
||||
const { prefixCls } = useDesign('page-footer')
|
||||
const { getCalcContentWidth } = useMenuSetting()
|
||||
</script>
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
</PageFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="PageWrapper" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import { CSSProperties, provide } from 'vue'
|
||||
import { computed, watch, ref, unref, useAttrs, useSlots } from 'vue'
|
||||
import PageFooter from './PageFooter.vue'
|
||||
|
@ -37,6 +37,8 @@ import { PageHeader } from 'ant-design-vue'
|
|||
import { useContentHeight } from '@/hooks/web/useContentHeight'
|
||||
import { PageWrapperFixedHeightKey } from '..'
|
||||
|
||||
defineOptions({ name: 'PageWrapper', inheritAttrs: false })
|
||||
|
||||
const props = defineProps({
|
||||
title: propTypes.string,
|
||||
dense: propTypes.bool,
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
</ImagePreviewGroup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ImagePreview">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { Image, ImagePreviewGroup } from 'ant-design-vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
@ -39,6 +39,8 @@ interface ImageProps {
|
|||
|
||||
type ImageItem = string | ImageProps
|
||||
|
||||
defineOptions({ name: 'ImagePreview' })
|
||||
|
||||
const props = defineProps({
|
||||
functional: propTypes.bool,
|
||||
imageList: {
|
||||
|
|
|
@ -3,13 +3,15 @@
|
|||
<component :is="tag" ref="wrapRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="QrCode">
|
||||
<script lang="ts" setup>
|
||||
import { watch, ref, unref, onMounted } from 'vue'
|
||||
import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus'
|
||||
import { toDataURL } from 'qrcode'
|
||||
import { downloadByUrl } from '@/utils/file/download'
|
||||
import { QrcodeDoneEventParams } from './typing'
|
||||
|
||||
defineOptions({ name: 'QrCode' })
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: [String, Array] as PropType<string | any[]>,
|
||||
|
|
|
@ -16,13 +16,15 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="Scrollbar">
|
||||
<script lang="ts" setup>
|
||||
import { addResizeListener, removeResizeListener } from '@/utils/event'
|
||||
import componentSetting from '@/settings/componentSetting'
|
||||
import { toObject } from './util'
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick, provide, computed, unref } from 'vue'
|
||||
import Bar from './bar'
|
||||
|
||||
defineOptions({ name: 'Scrollbar' })
|
||||
|
||||
const props = defineProps({
|
||||
native: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
</Menu>
|
||||
</template>
|
||||
<script lang="ts" setup name="SimpleMenu" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import type { MenuState } from './types'
|
||||
import type { Menu as MenuType } from '@/router/types'
|
||||
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||
|
@ -28,6 +28,8 @@ import { isFunction, isUrl } from '@/utils/is'
|
|||
import { openWindow } from '@/utils'
|
||||
import { useOpenKeys } from './useOpenKeys'
|
||||
|
||||
defineOptions({ name: 'SimpleMenu', inheritAttrs: false })
|
||||
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array as PropType<MenuType[]>,
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span>
|
||||
</template>
|
||||
<script lang="ts" setup name="SimpleMenuTag">
|
||||
<script lang="ts" setup>
|
||||
import type { Menu } from '@/router/types'
|
||||
import { computed } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'SimpleMenuTag' })
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object as PropType<Menu>,
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
</template>
|
||||
</SubMenu>
|
||||
</template>
|
||||
<script lang="ts" setup name="SimpleSubMenu">
|
||||
<script lang="ts" setup>
|
||||
import type { Menu } from '@/router/types'
|
||||
import { computed } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
@ -48,6 +48,8 @@ import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
|
|||
|
||||
const SimpleMenuTag = createAsyncComponent(() => import('./SimpleMenuTag.vue'))
|
||||
|
||||
defineOptions({ name: 'SimpleSubMenu' })
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object as PropType<Menu>,
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
</ul>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Menu">
|
||||
<script lang="ts" setup>
|
||||
import type { SubMenuProvider } from './types'
|
||||
import { ref, computed, onMounted, watchEffect, watch, nextTick, getCurrentInstance, provide } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
@ -12,6 +12,8 @@ import { propTypes } from '@/utils/propTypes'
|
|||
import { createSimpleRootMenuContext } from './useSimpleMenuContext'
|
||||
import mitt from '@/utils/mitt'
|
||||
|
||||
defineOptions({ name: 'Menu' })
|
||||
|
||||
const props = defineProps({
|
||||
theme: propTypes.oneOf(['light', 'dark']).def('light'),
|
||||
activeName: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
||||
|
|
|
@ -3,8 +3,11 @@
|
|||
<slot></slot>
|
||||
</transition>
|
||||
</template>
|
||||
<script lang="ts" setup name="MenuCollapseTransition">
|
||||
<script lang="ts" setup>
|
||||
import { addClass, removeClass } from '@/utils/domUtils'
|
||||
|
||||
defineOptions({ name: 'MenuCollapseTransition' })
|
||||
|
||||
const on = {
|
||||
beforeEnter(el) {
|
||||
addClass(el, 'collapse-transition')
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="MenuItem">
|
||||
<script lang="ts" setup>
|
||||
import { ref, useSlots, computed, unref, getCurrentInstance, watch } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
@ -24,6 +24,8 @@ import { useMenuItem } from './useMenu'
|
|||
import { Tooltip } from 'ant-design-vue'
|
||||
import { useSimpleRootMenuContext } from './useSimpleMenuContext'
|
||||
|
||||
defineOptions({ name: 'MenuItem' })
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
</Popover>
|
||||
</li>
|
||||
</template>
|
||||
<script lang="ts" setup name="SubMenu">
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import type { SubMenuProvider } from './types'
|
||||
import { computed, unref, getCurrentInstance, reactive, provide, onBeforeMount, inject } from 'vue'
|
||||
|
@ -58,6 +58,9 @@ import { Icon } from '@/components/Icon'
|
|||
import { Popover } from 'ant-design-vue'
|
||||
import { isBoolean, isObject } from '@/utils/is'
|
||||
import mitt from '@/utils/mitt'
|
||||
|
||||
defineOptions({ name: 'SubMenu' })
|
||||
|
||||
const DELAY = 200
|
||||
const props = defineProps({
|
||||
name: {
|
||||
|
|
|
@ -10,13 +10,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="StrengthMeter">
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch, unref, watchEffect } from 'vue'
|
||||
import { InputPassword } from 'ant-design-vue'
|
||||
import { zxcvbn } from '@zxcvbn-ts/core'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'StrengthMeter' })
|
||||
|
||||
const props = defineProps({
|
||||
value: propTypes.string,
|
||||
showInput: propTypes.bool.def(true),
|
||||
|
|
|
@ -39,7 +39,7 @@
|
|||
</Table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicTable">
|
||||
<script lang="ts" setup>
|
||||
import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam } from './types/table'
|
||||
import { ref, computed, unref, toRaw, inject, watchEffect, useAttrs, useSlots } from 'vue'
|
||||
import { Table } from 'ant-design-vue'
|
||||
|
@ -67,6 +67,8 @@ import { basicProps } from './props'
|
|||
import { isFunction } from '@/utils/is'
|
||||
import { warn } from '@/utils/log'
|
||||
|
||||
defineOptions({ name: 'BasicTable' })
|
||||
|
||||
const props = defineProps(basicProps)
|
||||
const emit = defineEmits([
|
||||
'fetch-success',
|
||||
|
|
|
@ -5,8 +5,10 @@
|
|||
<FormOutlined />
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup name="EditTableHeaderIcon">
|
||||
<script lang="ts" setup>
|
||||
import { FormOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({ name: 'EditTableHeaderIcon' })
|
||||
|
||||
defineProps({ title: { type: String, default: '' } })
|
||||
</script>
|
||||
|
|
|
@ -5,13 +5,15 @@
|
|||
<span v-else>{{ getTitle }}</span>
|
||||
<BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
|
||||
</template>
|
||||
<script lang="ts" setup name="TableHeaderCell">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import type { BasicColumn } from '../types/table'
|
||||
import BasicHelp from '@/components/Basic/src/BasicHelp.vue'
|
||||
import EditTableHeaderCell from './EditTableHeaderIcon.vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'TableHeaderCell' })
|
||||
|
||||
const props = defineProps({
|
||||
column: {
|
||||
type: Object as PropType<BasicColumn>,
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="TableAction">
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { computed, toRaw, unref } from 'vue'
|
||||
import { MoreOutlined } from '@ant-design/icons-vue'
|
||||
|
@ -35,6 +35,8 @@ import { isBoolean, isFunction, isString } from '@/utils/is'
|
|||
import { propTypes } from '@/utils/propTypes'
|
||||
import { ACTION_COLUMN_FLAG } from '../const'
|
||||
|
||||
defineOptions({ name: 'TableAction' })
|
||||
|
||||
const props = defineProps({
|
||||
actions: {
|
||||
type: Array as PropType<ActionItem[]>,
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
:scroll="scroll"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicTableFooter">
|
||||
<script lang="ts" setup>
|
||||
import { unref, computed, toRaw } from 'vue'
|
||||
import { Table } from 'ant-design-vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
@ -24,6 +24,8 @@ import { useTableContext } from '../hooks/useTableContext'
|
|||
const SUMMARY_ROW_KEY = '_row'
|
||||
const SUMMARY_INDEX_KEY = '_index'
|
||||
|
||||
defineOptions({ name: 'BasicTableFooter' })
|
||||
|
||||
const props = defineProps({
|
||||
summaryFunc: {
|
||||
type: Function as PropType<Fn>
|
||||
|
|
|
@ -14,13 +14,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicTableHeader">
|
||||
<script lang="ts" setup>
|
||||
import type { TableSetting, ColumnChangeParam } from '../types/table'
|
||||
import { Divider } from 'ant-design-vue'
|
||||
import TableSettingComponent from './settings/index.vue'
|
||||
import TableTitle from './TableTitle.vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'BasicTableHeader' })
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: [Function, String] as PropType<string | ((data: Recordable) => string)>
|
||||
|
|
|
@ -23,13 +23,15 @@
|
|||
</ImagePreviewGroup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="TableImage">
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { Image, Badge, ImagePreviewGroup } from 'ant-design-vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'TableImage' })
|
||||
|
||||
const props = defineProps({
|
||||
imgList: propTypes.arrayOf(propTypes.string),
|
||||
size: propTypes.number.def(40),
|
||||
|
|
|
@ -3,12 +3,14 @@
|
|||
{{ getTitle }}
|
||||
</BasicTitle>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicTableTitle">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { BasicTitle } from '@/components/Basic'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { isFunction } from '@/utils/is'
|
||||
|
||||
defineOptions({ name: 'BasicTableTitle' })
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: [Function, String] as PropType<string | ((data: Recordable) => string)>
|
||||
|
|
|
@ -82,7 +82,7 @@
|
|||
</Popover>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script lang="ts" setup name="ColumnSetting">
|
||||
<script lang="ts" setup>
|
||||
import type { BasicColumn, BasicTableProps, ColumnChangeParam } from '../../types/table'
|
||||
import { ref, reactive, useAttrs, watchEffect, nextTick, unref, computed } from 'vue'
|
||||
import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue'
|
||||
|
@ -100,6 +100,8 @@ import { cloneDeep, omit } from 'lodash-es'
|
|||
import Sortablejs from 'sortablejs'
|
||||
import type Sortable from 'sortablejs'
|
||||
|
||||
defineOptions({ name: 'ColumnSetting' })
|
||||
|
||||
interface State {
|
||||
checkAll: boolean
|
||||
isInit?: boolean
|
||||
|
|
|
@ -6,12 +6,14 @@
|
|||
<RedoOutlined @click="redo" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script lang="ts" setup name="RedoSetting">
|
||||
<script lang="ts" setup>
|
||||
import { Tooltip } from 'ant-design-vue'
|
||||
import { RedoOutlined } from '@ant-design/icons-vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useTableContext } from '../../hooks/useTableContext'
|
||||
|
||||
defineOptions({ name: 'RedoSetting' })
|
||||
|
||||
const table = useTableContext()
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
</Dropdown>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script lang="ts" setup name="SizeSetting">
|
||||
<script lang="ts" setup>
|
||||
import type { SizeType } from '../../types/table'
|
||||
import { ref } from 'vue'
|
||||
import { Tooltip, Dropdown, Menu } from 'ant-design-vue'
|
||||
|
@ -32,6 +32,9 @@ import { useTableContext } from '../../hooks/useTableContext'
|
|||
import { getPopupContainer } from '@/utils'
|
||||
|
||||
const MenuItem = Menu.Item
|
||||
|
||||
defineOptions({ name: 'SizeSetting' })
|
||||
|
||||
const table = useTableContext()
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="TableSetting">
|
||||
<script lang="ts" setup>
|
||||
import type { TableSetting, ColumnChangeParam } from '../../types/table'
|
||||
import { computed, unref } from 'vue'
|
||||
import ColumnSetting from './ColumnSetting.vue'
|
||||
|
@ -15,6 +15,8 @@ import RedoSetting from './RedoSetting.vue'
|
|||
import FullScreenSetting from './FullScreenSetting.vue'
|
||||
import { useTableContext } from '../../hooks/useTableContext'
|
||||
|
||||
defineOptions({ name: 'TableSetting' })
|
||||
|
||||
const props = defineProps({
|
||||
setting: {
|
||||
type: Object as PropType<TableSetting>,
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Tinymce" inheritAttrs="false">
|
||||
<script lang="ts" setup>
|
||||
import type { Editor, RawEditorSettings } from 'tinymce'
|
||||
import tinymce from 'tinymce/tinymce'
|
||||
import 'tinymce/themes/silver'
|
||||
|
@ -59,6 +59,8 @@ import { isNumber } from '@/utils/is'
|
|||
import { useLocale } from '@/locales/useLocale'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
|
||||
defineOptions({ name: 'Tinymce', inheritAttrs: false })
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Object as PropType<Partial<RawEditorSettings>>,
|
||||
|
|
|
@ -7,14 +7,15 @@
|
|||
</Upload>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="TinymceImageUpload">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { Upload } from 'ant-design-vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useGlobSetting } from '@/hooks/setting'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
defineOptions({ name: 'TinymceImageUpload' })
|
||||
|
||||
const props = defineProps({
|
||||
fullscreen: {
|
||||
type: Boolean
|
||||
|
|
|
@ -3,8 +3,11 @@
|
|||
<slot></slot>
|
||||
</transition>
|
||||
</template>
|
||||
<script lang="ts" setup name="CollapseTransition">
|
||||
<script lang="ts" setup>
|
||||
import { addClass, removeClass } from '@/utils/domUtils'
|
||||
|
||||
defineOptions({ name: 'CollapseTransition' })
|
||||
|
||||
const on = {
|
||||
beforeEnter(el) {
|
||||
addClass(el, 'collapse-transition')
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BasicUpload">
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, unref, useAttrs, computed } from 'vue'
|
||||
import { Icon } from '@/components/Icon'
|
||||
import { Tooltip, Space } from 'ant-design-vue'
|
||||
|
@ -47,6 +47,8 @@ import { isArray } from '@/utils/is'
|
|||
import UploadModal from './UploadModal.vue'
|
||||
import UploadPreviewModal from './UploadPreviewModal.vue'
|
||||
|
||||
defineOptions({ name: 'BasicUpload' })
|
||||
|
||||
const props = defineProps(uploadContainerProps)
|
||||
const emit = defineEmits(['change', 'delete', 'preview-delete', 'update:value'])
|
||||
const attrs = useAttrs()
|
||||
|
|
|
@ -3,13 +3,15 @@
|
|||
<PageLayout />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="LayoutContent">
|
||||
<script lang="ts" setup>
|
||||
import PageLayout from '@/layouts/page/index.vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useRootSetting } from '@/hooks/setting/useRootSetting'
|
||||
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'
|
||||
import { useContentViewHeight } from './useContentViewHeight'
|
||||
|
||||
defineOptions({ name: 'LayoutContent' })
|
||||
|
||||
const { prefixCls } = useDesign('layout-content')
|
||||
const { getOpenPageLoading } = useTransitionSetting()
|
||||
const { getLayoutContentMode, getPageLoading } = useRootSetting()
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
|
||||
<SessionTimeoutLogin v-if="getIsSessionTimeout" />
|
||||
</template>
|
||||
<script lang="ts" setup name="LayoutFeatures">
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue'
|
||||
import { BackTop } from 'ant-design-vue'
|
||||
|
||||
|
@ -22,6 +22,8 @@ const LayoutLockPage = createAsyncComponent(() => import('@/views/base/lock/inde
|
|||
|
||||
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))
|
||||
|
||||
defineOptions({ name: 'LayoutFeatures' })
|
||||
|
||||
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting()
|
||||
const userStore = useUserStoreWithOut()
|
||||
const { prefixCls } = useDesign('setting-drawer-feature')
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
</Footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="LayoutFooter">
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref, ref } from 'vue'
|
||||
import { Layout } from 'ant-design-vue'
|
||||
|
||||
|
@ -30,6 +30,8 @@ const SITE_TITLE = ref(import.meta.env.VITE_GLOB_APP_TITLE)
|
|||
|
||||
const Footer = Layout.Footer
|
||||
|
||||
defineOptions({ name: 'LayoutFooter' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { getShowFooter } = useRootSetting()
|
||||
const { currentRoute } = useRouter()
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<MultipleTabs v-if="getShowTabs" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="LayoutMultipleHeader">
|
||||
<script lang="ts" setup>
|
||||
import { unref, computed, CSSProperties } from 'vue'
|
||||
|
||||
import LayoutHeader from './index.vue'
|
||||
|
@ -19,9 +19,12 @@ import { useAppInject } from '@/hooks/web/useAppInject'
|
|||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useLayoutHeight } from '../content/useContentViewHeight'
|
||||
|
||||
defineOptions({ name: 'LayoutMultipleHeader' })
|
||||
|
||||
const HEADER_HEIGHT = 48
|
||||
|
||||
const TABS_HEIGHT = 32
|
||||
|
||||
const { setHeaderHeight } = useLayoutHeight()
|
||||
const { prefixCls } = useDesign('layout-multiple-header')
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</Breadcrumb>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="LayoutBreadcrumb">
|
||||
<script lang="ts" setup>
|
||||
import type { RouteLocationMatched } from 'vue-router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { Menu } from '@/router/types'
|
||||
|
@ -31,6 +31,8 @@ import { REDIRECT_NAME } from '@/router/constant'
|
|||
import { getAllParentPath } from '@/router/helper/menuHelper'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
||||
defineOptions({ name: 'LayoutBreadcrumb' })
|
||||
|
||||
defineProps({
|
||||
theme: propTypes.oneOf(['dark', 'light'])
|
||||
})
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
</Badge>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script lang="ts" setup name="ErrorAction">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { Tooltip, Badge } from 'ant-design-vue'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
@ -16,6 +16,8 @@ import { PageEnum } from '@/enums/pageEnum'
|
|||
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
defineOptions({ name: 'ErrorAction' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { push } = useRouter()
|
||||
const errorLogStore = useErrorLogStore()
|
||||
|
|
|
@ -6,13 +6,14 @@
|
|||
</span>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script lang="ts" setup name="FullScreen">
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue'
|
||||
import { Tooltip } from 'ant-design-vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
|
||||
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({ name: 'FullScreen' })
|
||||
const { t } = useI18n()
|
||||
const { toggle, isFullscreen } = useFullscreen()
|
||||
// 重新检查全屏状态
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup name="LockModal">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
@ -28,6 +28,8 @@ import { useUserStore } from '@/store/modules/user'
|
|||
import { useLockStore } from '@/store/modules/lock'
|
||||
import headerImg from '@/assets/images/header.jpg'
|
||||
|
||||
defineOptions({ name: 'LockModal' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { prefixCls } = useDesign('header-lock-modal')
|
||||
const userStore = useUserStore()
|
||||
|
|
|
@ -6,13 +6,15 @@
|
|||
</span>
|
||||
</MenuItem>
|
||||
</template>
|
||||
<script lang="ts" setup name="DropdownMenuItem">
|
||||
<script lang="ts" setup>
|
||||
import { MenuItem } from 'ant-design-vue'
|
||||
import { computed, getCurrentInstance } from 'vue'
|
||||
|
||||
import { Icon } from '@/components/Icon'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'DropdownMenuItem' })
|
||||
|
||||
const props = defineProps({
|
||||
// eslint-disable-next-line
|
||||
key: propTypes.string,
|
||||
|
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
</Header>
|
||||
</template>
|
||||
<script lang="ts" setup name="LayoutHeader">
|
||||
<script lang="ts" setup>
|
||||
import { unref, computed } from 'vue'
|
||||
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
@ -70,6 +70,7 @@ const Header = Layout.Header
|
|||
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
|
||||
loading: true
|
||||
})
|
||||
defineOptions({ name: 'LayoutHeader' })
|
||||
const props = defineProps({
|
||||
fixed: propTypes.bool
|
||||
})
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</Layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="DefaultLayout">
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue'
|
||||
import { Layout } from 'ant-design-vue'
|
||||
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
|
||||
|
@ -33,6 +33,8 @@ import { useAppInject } from '@/hooks/web/useAppInject'
|
|||
const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'))
|
||||
const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'))
|
||||
|
||||
defineOptions({ name: 'DefaultLayout' })
|
||||
|
||||
const { prefixCls } = useDesign('default-layout')
|
||||
const { getIsMobile } = useAppInject()
|
||||
const { getShowFullHeaderRef } = useHeaderSetting()
|
||||
|
|
|
@ -4,12 +4,14 @@
|
|||
<InputNumber v-bind="$attrs" :class="`${prefixCls}-input-number`" @change="handleChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="InputNumberItem">
|
||||
<script lang="ts" setup>
|
||||
import { InputNumber } from 'ant-design-vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { baseHandler } from '../handler'
|
||||
import { HandlerEnum } from '../enum'
|
||||
|
||||
defineOptions({ name: 'InputNumberItem' })
|
||||
|
||||
const props = defineProps({
|
||||
event: {
|
||||
type: Number as PropType<HandlerEnum>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<Select v-bind="getBindValue" :class="`${prefixCls}-select`" @change="handleChange as any" :disabled="disabled" :options="options" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="SelectItem">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { Select } from 'ant-design-vue'
|
||||
|
@ -12,6 +12,8 @@ import { useDesign } from '@/hooks/web/useDesign'
|
|||
import { baseHandler } from '../handler'
|
||||
import { HandlerEnum } from '../enum'
|
||||
|
||||
defineOptions({ name: 'SelectItem' })
|
||||
|
||||
const props = defineProps({
|
||||
event: {
|
||||
type: Number as PropType<HandlerEnum>
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="SettingFooter">
|
||||
<script lang="ts" setup>
|
||||
import { unref } from 'vue'
|
||||
|
||||
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue'
|
||||
|
@ -37,6 +37,8 @@ import defaultSetting from '@/settings/projectSetting'
|
|||
import { changeTheme } from '@/logics/theme'
|
||||
import { updateSidebarBgColor } from '@/logics/theme/updateBackground'
|
||||
|
||||
defineOptions({ name: 'SettingFooter' })
|
||||
|
||||
const permissionStore = usePermissionStore()
|
||||
const { prefixCls } = useDesign('setting-footer')
|
||||
const { t } = useI18n()
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="SwitchItem">
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { Switch } from 'ant-design-vue'
|
||||
|
@ -19,6 +19,8 @@ import { useI18n } from '@/hooks/web/useI18n'
|
|||
import { baseHandler } from '../handler'
|
||||
import { HandlerEnum } from '../enum'
|
||||
|
||||
defineOptions({ name: 'SwitchItem' })
|
||||
|
||||
const props = defineProps({
|
||||
event: {
|
||||
type: Number as PropType<HandlerEnum>
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ThemeColorPicker">
|
||||
<script lang="ts" setup>
|
||||
import { CheckOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
@ -24,6 +24,8 @@ import { useDesign } from '@/hooks/web/useDesign'
|
|||
import { baseHandler } from '../handler'
|
||||
import { HandlerEnum } from '../enum'
|
||||
|
||||
defineOptions({ name: 'ThemeColorPicker' })
|
||||
|
||||
const props = defineProps({
|
||||
colorList: {
|
||||
type: Array as PropType<string[]>,
|
||||
|
|
|
@ -18,11 +18,13 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="MenuTypePicker">
|
||||
<script lang="ts" setup>
|
||||
import { Tooltip } from 'ant-design-vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { menuTypeList } from '../enum'
|
||||
|
||||
defineOptions({ name: 'MenuTypePicker' })
|
||||
|
||||
defineProps({
|
||||
menuTypeList: {
|
||||
type: Array as PropType<typeof menuTypeList>,
|
||||
|
|
|
@ -4,11 +4,13 @@
|
|||
<SettingDrawer @register="register" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="SettingButton">
|
||||
<script lang="ts" setup>
|
||||
import SettingDrawer from './SettingDrawer'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
||||
import { useDrawer } from '@/components/Drawer'
|
||||
|
||||
defineOptions({ name: 'SettingButton' })
|
||||
|
||||
const [register, { openDrawer }] = useDrawer()
|
||||
</script>
|
||||
|
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<div :class="getClass" :style="getDragBarStyle"></div>
|
||||
</template>
|
||||
<script lang="ts" setup name="DargBar">
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue'
|
||||
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||||
|
||||
const props = {
|
||||
defineOptions({ name: 'DargBar' })
|
||||
|
||||
const props = defineProps({
|
||||
mobile: Boolean
|
||||
}
|
||||
})
|
||||
const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting()
|
||||
|
||||
const { prefixCls } = useDesign('darg-bar')
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
<DragBar ref="dragBarRef" />
|
||||
</Sider>
|
||||
</template>
|
||||
<script lang="ts" setup name="LayoutSideBar">
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, unref, CSSProperties, h } from 'vue'
|
||||
|
||||
import { Layout } from 'ant-design-vue'
|
||||
|
@ -37,6 +37,9 @@ import { useDesign } from '@/hooks/web/useDesign'
|
|||
|
||||
import DragBar from './DragBar.vue'
|
||||
const Sider = Layout.Sider
|
||||
|
||||
defineOptions({ name: 'LayoutSideBar' })
|
||||
|
||||
const dragBarRef = ref<ElRef>(null)
|
||||
const sideRef = ref<ElRef>(null)
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<MixSider v-else-if="getIsMixSidebar" />
|
||||
<Sider v-else />
|
||||
</template>
|
||||
<script lang="ts" setup name="SiderWrapper">
|
||||
<script lang="ts" setup>
|
||||
import Sider from './LayoutSider.vue'
|
||||
import MixSider from './MixSider.vue'
|
||||
import { Drawer } from 'ant-design-vue'
|
||||
|
@ -22,6 +22,8 @@ import { useAppInject } from '@/hooks/web/useAppInject'
|
|||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'SiderWrapper' })
|
||||
|
||||
const { prefixCls } = useDesign('layout-sider-wrapper')
|
||||
const { getIsMobile } = useAppInject()
|
||||
const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting()
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<Icon :icon="getIcon" />
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup name="FoldButton">
|
||||
<script lang="ts" setup>
|
||||
import { unref, computed } from 'vue'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
||||
|
@ -12,6 +12,8 @@ import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
|
|||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||||
import { triggerWindowResize } from '@/utils/event'
|
||||
|
||||
defineOptions({ name: 'FoldButton' })
|
||||
|
||||
const { prefixCls } = useDesign('multiple-tabs-content')
|
||||
const { getShowMenu, setMenuSetting } = useMenuSetting()
|
||||
const { getShowHeader, setHeaderSetting } = useHeaderSetting()
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
</span>
|
||||
</Dropdown>
|
||||
</template>
|
||||
<script lang="ts" setup name="TabContent">
|
||||
<script lang="ts" setup>
|
||||
import type { RouteLocationNormalized } from 'vue-router'
|
||||
|
||||
import { computed, unref } from 'vue'
|
||||
|
@ -27,6 +27,8 @@ import { useDesign } from '@/hooks/web/useDesign'
|
|||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useTabDropdown } from '../useTabDropdown'
|
||||
|
||||
defineOptions({ name: 'TabContent' })
|
||||
|
||||
const props = defineProps({
|
||||
tabItem: {
|
||||
type: Object as PropType<RouteLocationNormalized>,
|
||||
|
|
|
@ -3,12 +3,14 @@
|
|||
<RedoOutlined :spin="loading" />
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts" setup name="TabRedo">
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { RedoOutlined } from '@ant-design/icons-vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useTabs } from '@/hooks/web/useTabs'
|
||||
|
||||
defineOptions({ name: 'TabRedo' })
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const { prefixCls } = useDesign('multiple-tabs-content')
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="MultipleTabs">
|
||||
<script lang="ts" setup>
|
||||
import type { RouteLocationNormalized, RouteMeta } from 'vue-router'
|
||||
|
||||
import { computed, unref, ref } from 'vue'
|
||||
|
@ -49,6 +49,9 @@ import { listenerRouteChange } from '@/logics/mitt/routeChange'
|
|||
|
||||
import { useRouter } from 'vue-router'
|
||||
const TabPane = Tabs.TabPane
|
||||
|
||||
defineOptions({ name: 'MultipleTabs' })
|
||||
|
||||
const affixTextList = initAffixTabs()
|
||||
const activeKeyRef = ref('')
|
||||
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<span :class="[prefixCls, theme]" @click="toggleCollapsed"> <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else /> </span>
|
||||
</template>
|
||||
<script lang="ts" setup name="HeaderTrigger">
|
||||
<script lang="ts" setup>
|
||||
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
|
||||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'HeaderTrigger' })
|
||||
|
||||
defineProps({
|
||||
theme: propTypes.oneOf(['light', 'dark'])
|
||||
})
|
||||
|
|
|
@ -4,9 +4,11 @@
|
|||
<DoubleLeftOutlined v-else />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="SiderTrigger">
|
||||
<script lang="ts" setup>
|
||||
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue'
|
||||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||||
|
||||
defineOptions({ name: 'SiderTrigger' })
|
||||
|
||||
const { getCollapsed, toggleCollapsed } = useMenuSetting()
|
||||
</script>
|
||||
|
|
|
@ -2,12 +2,15 @@
|
|||
<SiderTrigger v-if="sider" />
|
||||
<HeaderTrigger v-else :theme="theme" />
|
||||
</template>
|
||||
<script lang="ts" setup name="LayoutTrigger">
|
||||
<script lang="ts" setup>
|
||||
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import HeaderTrigger from './HeaderTrigger.vue'
|
||||
|
||||
const SiderTrigger = createAsyncComponent(() => import('./SiderTrigger.vue'))
|
||||
|
||||
defineOptions({ name: 'LayoutTrigger' })
|
||||
|
||||
defineProps({
|
||||
sider: propTypes.bool.def(true),
|
||||
theme: propTypes.oneOf(['light', 'dark'])
|
||||
|
|
|
@ -5,12 +5,14 @@
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="FrameLayout">
|
||||
<script lang="ts" setup>
|
||||
import { unref, computed } from 'vue'
|
||||
import FramePage from '@/views/base/iframe/index.vue'
|
||||
|
||||
import { useFrameKeepAlive } from './useFrameKeepAlive'
|
||||
|
||||
defineOptions({ name: 'FrameLayout' })
|
||||
|
||||
const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive()
|
||||
|
||||
const showFrame = computed(() => unref(getFramePages).length > 0)
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<FrameLayout v-if="getCanEmbedIFramePage" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="PageLayout">
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue'
|
||||
|
||||
import FrameLayout from '@/layouts/iframe/index.vue'
|
||||
|
@ -37,6 +37,8 @@ import { getTransitionName } from './transition'
|
|||
|
||||
import { useMultipleTabStore } from '@/store/modules/multipleTab'
|
||||
|
||||
defineOptions({ name: 'PageLayout' })
|
||||
|
||||
const { getShowMultipleTab } = useMultipleTabSetting()
|
||||
const tabStore = useMultipleTabStore()
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script lang="ts" setup name="FrameBlank">
|
||||
// freame
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'FrameBlank' })
|
||||
</script>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup name="PasswordModal">
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
|
@ -12,6 +12,8 @@ import { BasicModal, useModalInner } from '@/components/Modal'
|
|||
import { passwordSchema } from './data'
|
||||
import { updateUserPwdApi } from '@/api/base/profile'
|
||||
|
||||
defineOptions({ name: 'PasswordModal' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { createMessage } = useMessage()
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BpmForm">
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { IconEnum } from '@/enums/appEnum'
|
||||
|
@ -37,6 +37,8 @@ import { BasicTable, useTable, TableAction } from '@/components/Table'
|
|||
import { deleteForm, getFormPage } from '@/api/bpm/form'
|
||||
import { columns, searchFormSchema } from './form.data'
|
||||
|
||||
defineOptions({ name: 'BpmForm' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { createMessage } = useMessage()
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup name="BpmGroupModal">
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
|
@ -12,6 +12,8 @@ import { BasicModal, useModalInner } from '@/components/Modal'
|
|||
import { formSchema } from './group.data'
|
||||
import { createUserGroup, getUserGroup, updateUserGroup } from '@/api/bpm/userGroup'
|
||||
|
||||
defineOptions({ name: 'BpmGroupModal' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { createMessage } = useMessage()
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<GroupModal @register="registerModal" @success="reload()" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="BpmGroup">
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { useModal } from '@/components/Modal'
|
||||
|
@ -40,6 +40,8 @@ import { BasicTable, useTable, TableAction } from '@/components/Table'
|
|||
import { deleteUserGroup, getUserGroupPage } from '@/api/bpm/userGroup'
|
||||
import { columns, searchFormSchema } from './group.data'
|
||||
|
||||
defineOptions({ name: 'BpmGroup' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { createMessage } = useMessage()
|
||||
const [registerModal, { openModal }] = useModal()
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue