dev-cl
qsh
2 months ago
parent
e71c9928a2
commit
f6e98e71e2
@ -0,0 +1,12 @@ |
|||||||
|
root = true |
||||||
|
[*.{js,ts,vue}] |
||||||
|
charset = utf-8 # 设置文件字符集为 utf-8 |
||||||
|
end_of_line = lf # 控制换行类型(lf | cr | crlf) |
||||||
|
insert_final_newline = true # 始终在文件末尾插入一个新行 |
||||||
|
indent_style = space # 缩进风格（tab | space） |
||||||
|
indent_size = 2 # 缩进大小 |
||||||
|
max_line_length = 120 # 最大行长度 |
||||||
|
|
||||||
|
[*.md] # 仅 md 文件适用以下规则 |
||||||
|
max_line_length = off # 关闭最大行长度限制 |
||||||
|
trim_trailing_whitespace = false # 关闭末尾空格修剪 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
# 标题 |
||||||
|
VITE_APP_TITLE=刷题后台 |
||||||
|
|
||||||
|
# 开发环境 |
||||||
|
VITE_NODE_ENV=development |
||||||
|
|
||||||
|
# 项目本地运行端口号 |
||||||
|
VITE_PORT=8000 |
||||||
|
|
||||||
|
# open 运行 npm run dev 时自动打开浏览器 |
||||||
|
VITE_OPEN=true |
||||||
|
|
||||||
|
# 租户开关 |
||||||
|
VITE_APP_TENANT_ENABLE=false |
||||||
|
|
||||||
|
# 验证码的开关 |
||||||
|
VITE_APP_CAPTCHA_ENABLE=true |
||||||
|
|
||||||
|
# 百度统计 |
||||||
|
VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
# 本地开发环境 |
||||||
|
VITE_NODE_ENV=development |
||||||
|
|
||||||
|
VITE_DEV=true |
||||||
|
|
||||||
|
# 请求路径 |
||||||
|
# VITE_BASE_URL='http://localhost:48080' |
||||||
|
|
||||||
|
VITE_BASE_URL='http://47.98.161.246:48080' |
||||||
|
# VITE_BASE_URL='http://114.55.169.15:48080' |
||||||
|
# VITE_BASE_URL='http://114.215.207.150:48080' |
||||||
|
|
||||||
|
# 上传路径 |
||||||
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' |
||||||
|
# VITE_UPLOAD_URL='http://114.55.169.15:48080/admin-api/system/file/upload' |
||||||
|
|
||||||
|
# 接口前缀 |
||||||
|
VITE_API_BASEPATH=/tiku-api |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
VITE_API_URL=/admin-api |
||||||
|
|
||||||
|
# 打包路径 |
||||||
|
VITE_BASE_PATH=/tiku/ |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
# 开发环境 |
||||||
|
VITE_NODE_ENV=production |
||||||
|
|
||||||
|
VITE_DEV=false |
||||||
|
|
||||||
|
# 请求路径 |
||||||
|
VITE_BASE_URL='http://localhost:48080' |
||||||
|
|
||||||
|
# 上传路径 |
||||||
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' |
||||||
|
|
||||||
|
# 接口前缀 |
||||||
|
VITE_API_BASEPATH=/tiku-api |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
VITE_API_URL=/admin-api |
||||||
|
|
||||||
|
# 打包路径 |
||||||
|
VITE_BASE_PATH=/tiku/ |
||||||
|
|
||||||
|
# 是否删除debugger |
||||||
|
VITE_DROP_DEBUGGER=false |
||||||
|
|
||||||
|
# 是否删除console.log |
||||||
|
VITE_DROP_CONSOLE=false |
||||||
|
|
||||||
|
# 是否sourcemap |
||||||
|
VITE_SOURCEMAP=true |
||||||
|
|
||||||
|
# 输出路径 |
||||||
|
VITE_OUT_DIR=dist-dev |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
# 本地开发环境 |
||||||
|
VITE_NODE_ENV=development |
||||||
|
|
||||||
|
VITE_DEV=true |
||||||
|
|
||||||
|
# 请求路径 |
||||||
|
VITE_BASE_URL='http://47.98.161.246:48080' |
||||||
|
|
||||||
|
# 上传路径 |
||||||
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' |
||||||
|
|
||||||
|
# 接口前缀 |
||||||
|
VITE_API_BASEPATH=/tiku-api |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
VITE_API_URL=/admin-api |
||||||
|
|
||||||
|
# 打包路径 |
||||||
|
VITE_BASE_PATH=/tiku/ |
||||||
|
|
||||||
|
# 项目本地运行端口号, 与.vscode/launch.json配合 |
||||||
|
VITE_PORT=80 |
||||||
|
|
||||||
|
# 是否删除debugger |
||||||
|
VITE_DROP_DEBUGGER=false |
||||||
|
|
||||||
|
# 是否删除console.log |
||||||
|
VITE_DROP_CONSOLE=false |
||||||
|
|
||||||
|
# 是否sourcemap |
||||||
|
VITE_SOURCEMAP=true |
||||||
|
|
||||||
|
# 验证码的开关 |
||||||
|
VITE_APP_CAPTCHA_ENABLE=false |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
# 生产环境 |
||||||
|
VITE_NODE_ENV=production |
||||||
|
|
||||||
|
VITE_DEV=false |
||||||
|
|
||||||
|
# 请求路径 |
||||||
|
VITE_BASE_URL='/oa-api' |
||||||
|
|
||||||
|
# 上传路径 |
||||||
|
VITE_UPLOAD_URL='/oa-api/admin-api/system/file/upload' |
||||||
|
|
||||||
|
# 接口前缀 |
||||||
|
VITE_API_BASEPATH=/tiku-api |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
VITE_API_URL=/admin-api |
||||||
|
|
||||||
|
# 是否删除debugger |
||||||
|
VITE_DROP_DEBUGGER=true |
||||||
|
|
||||||
|
# 是否删除console.log |
||||||
|
VITE_DROP_CONSOLE=true |
||||||
|
|
||||||
|
# 是否sourcemap |
||||||
|
VITE_SOURCEMAP=false |
||||||
|
|
||||||
|
# 打包路径 |
||||||
|
VITE_BASE_PATH=/tiku/ |
||||||
|
|
||||||
|
# 输出路径 |
||||||
|
VITE_OUT_DIR=dist-pro |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
# 生产环境 |
||||||
|
VITE_NODE_ENV=production |
||||||
|
|
||||||
|
VITE_DEV=false |
||||||
|
|
||||||
|
# 请求路径 |
||||||
|
VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn' |
||||||
|
|
||||||
|
# 上传路径 |
||||||
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' |
||||||
|
|
||||||
|
# 接口前缀 |
||||||
|
VITE_API_BASEPATH=/tiku-api |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
VITE_API_URL=/admin-api |
||||||
|
|
||||||
|
# 是否删除debugger |
||||||
|
VITE_DROP_DEBUGGER=true |
||||||
|
|
||||||
|
# 是否删除console.log |
||||||
|
VITE_DROP_CONSOLE=true |
||||||
|
|
||||||
|
# 是否sourcemap |
||||||
|
VITE_SOURCEMAP=false |
||||||
|
|
||||||
|
# 打包路径 |
||||||
|
VITE_BASE_PATH='/tiku/' |
||||||
|
|
||||||
|
# 输出路径 |
||||||
|
VITE_OUT_DIR=dist-stage |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
# 开发环境 |
||||||
|
VITE_NODE_ENV=production |
||||||
|
|
||||||
|
VITE_DEV=false |
||||||
|
|
||||||
|
# 请求路径 |
||||||
|
VITE_BASE_URL='http://localhost:48080' |
||||||
|
|
||||||
|
# 上传路径 |
||||||
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' |
||||||
|
|
||||||
|
# 接口前缀 |
||||||
|
VITE_API_BASEPATH=/tiku-api |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
VITE_API_URL=/admin-api |
||||||
|
|
||||||
|
# 是否删除debugger |
||||||
|
VITE_DROP_DEBUGGER=true |
||||||
|
|
||||||
|
# 是否删除console.log |
||||||
|
VITE_DROP_CONSOLE=true |
||||||
|
|
||||||
|
# 是否sourcemap |
||||||
|
VITE_SOURCEMAP=false |
||||||
|
|
||||||
|
# 打包路径 |
||||||
|
VITE_BASE_PATH=/tiku/ |
||||||
|
|
||||||
|
# 输出路径 |
||||||
|
VITE_OUT_DIR=dist-dev |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
# 测试环境 |
||||||
|
VITE_NODE_ENV=production |
||||||
|
|
||||||
|
VITE_DEV=false |
||||||
|
|
||||||
|
# 请求路径 |
||||||
|
VITE_BASE_URL='http://localhost:48080' |
||||||
|
|
||||||
|
# 上传路径 |
||||||
|
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' |
||||||
|
|
||||||
|
# 接口前缀 |
||||||
|
VITE_API_BASEPATH=/tiku-api |
||||||
|
|
||||||
|
# 接口地址 |
||||||
|
VITE_API_URL=/admin-api |
||||||
|
|
||||||
|
# 是否删除debugger |
||||||
|
VITE_DROP_DEBUGGER=false |
||||||
|
|
||||||
|
# 是否删除console.log |
||||||
|
VITE_DROP_CONSOLE=false |
||||||
|
|
||||||
|
# 是否sourcemap |
||||||
|
VITE_SOURCEMAP=true |
||||||
|
|
||||||
|
# 打包路径 |
||||||
|
VITE_BASE_PATH=/tiku/ |
||||||
|
|
||||||
|
# 输出路径 |
||||||
|
VITE_OUT_DIR=dist-test |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
/build/ |
||||||
|
/config/ |
||||||
|
/dist/ |
||||||
|
/*.js |
||||||
|
/test/unit/coverage/ |
||||||
|
/node_modules/* |
||||||
|
/dist* |
||||||
|
/src/main.ts |
||||||
@ -0,0 +1,259 @@ |
|||||||
|
{ |
||||||
|
"globals": { |
||||||
|
"EffectScope": true, |
||||||
|
"ElMessage": true, |
||||||
|
"ElMessageBox": true, |
||||||
|
"ElTag": true, |
||||||
|
"asyncComputed": true, |
||||||
|
"autoResetRef": true, |
||||||
|
"computed": true, |
||||||
|
"computedAsync": true, |
||||||
|
"computedEager": true, |
||||||
|
"computedInject": true, |
||||||
|
"computedWithControl": true, |
||||||
|
"controlledComputed": true, |
||||||
|
"controlledRef": true, |
||||||
|
"createApp": true, |
||||||
|
"createEventHook": true, |
||||||
|
"createGlobalState": true, |
||||||
|
"createInjectionState": true, |
||||||
|
"createReactiveFn": true, |
||||||
|
"createSharedComposable": true, |
||||||
|
"createUnrefFn": true, |
||||||
|
"customRef": true, |
||||||
|
"debouncedRef": true, |
||||||
|
"debouncedWatch": true, |
||||||
|
"defineAsyncComponent": true, |
||||||
|
"defineComponent": true, |
||||||
|
"eagerComputed": true, |
||||||
|
"effectScope": true, |
||||||
|
"extendRef": true, |
||||||
|
"getCurrentInstance": true, |
||||||
|
"getCurrentScope": true, |
||||||
|
"h": true, |
||||||
|
"ignorableWatch": true, |
||||||
|
"inject": true, |
||||||
|
"isDefined": true, |
||||||
|
"isProxy": true, |
||||||
|
"isReactive": true, |
||||||
|
"isReadonly": true, |
||||||
|
"isRef": true, |
||||||
|
"makeDestructurable": true, |
||||||
|
"markRaw": true, |
||||||
|
"nextTick": true, |
||||||
|
"onActivated": true, |
||||||
|
"onBeforeMount": true, |
||||||
|
"onBeforeUnmount": true, |
||||||
|
"onBeforeUpdate": true, |
||||||
|
"onClickOutside": true, |
||||||
|
"onDeactivated": true, |
||||||
|
"onErrorCaptured": true, |
||||||
|
"onKeyStroke": true, |
||||||
|
"onLongPress": true, |
||||||
|
"onMounted": true, |
||||||
|
"onRenderTracked": true, |
||||||
|
"onRenderTriggered": true, |
||||||
|
"onScopeDispose": true, |
||||||
|
"onServerPrefetch": true, |
||||||
|
"onStartTyping": true, |
||||||
|
"onUnmounted": true, |
||||||
|
"onUpdated": true, |
||||||
|
"pausableWatch": true, |
||||||
|
"provide": true, |
||||||
|
"reactify": true, |
||||||
|
"reactifyObject": true, |
||||||
|
"reactive": true, |
||||||
|
"reactiveComputed": true, |
||||||
|
"reactiveOmit": true, |
||||||
|
"reactivePick": true, |
||||||
|
"readonly": true, |
||||||
|
"ref": true, |
||||||
|
"refAutoReset": true, |
||||||
|
"refDebounced": true, |
||||||
|
"refDefault": true, |
||||||
|
"refThrottled": true, |
||||||
|
"refWithControl": true, |
||||||
|
"resolveComponent": true, |
||||||
|
"resolveRef": true, |
||||||
|
"resolveUnref": true, |
||||||
|
"shallowReactive": true, |
||||||
|
"shallowReadonly": true, |
||||||
|
"shallowRef": true, |
||||||
|
"syncRef": true, |
||||||
|
"syncRefs": true, |
||||||
|
"templateRef": true, |
||||||
|
"throttledRef": true, |
||||||
|
"throttledWatch": true, |
||||||
|
"toRaw": true, |
||||||
|
"toReactive": true, |
||||||
|
"toRef": true, |
||||||
|
"toRefs": true, |
||||||
|
"triggerRef": true, |
||||||
|
"tryOnBeforeMount": true, |
||||||
|
"tryOnBeforeUnmount": true, |
||||||
|
"tryOnMounted": true, |
||||||
|
"tryOnScopeDispose": true, |
||||||
|
"tryOnUnmounted": true, |
||||||
|
"unref": true, |
||||||
|
"unrefElement": true, |
||||||
|
"until": true, |
||||||
|
"useActiveElement": true, |
||||||
|
"useArrayEvery": true, |
||||||
|
"useArrayFilter": true, |
||||||
|
"useArrayFind": true, |
||||||
|
"useArrayFindIndex": true, |
||||||
|
"useArrayJoin": true, |
||||||
|
"useArrayMap": true, |
||||||
|
"useArrayReduce": true, |
||||||
|
"useArraySome": true, |
||||||
|
"useAsyncQueue": true, |
||||||
|
"useAsyncState": true, |
||||||
|
"useAttrs": true, |
||||||
|
"useBase64": true, |
||||||
|
"useBattery": true, |
||||||
|
"useBluetooth": true, |
||||||
|
"useBreakpoints": true, |
||||||
|
"useBroadcastChannel": true, |
||||||
|
"useBrowserLocation": true, |
||||||
|
"useCached": true, |
||||||
|
"useClipboard": true, |
||||||
|
"useColorMode": true, |
||||||
|
"useConfirmDialog": true, |
||||||
|
"useCounter": true, |
||||||
|
"useCssModule": true, |
||||||
|
"useCssVar": true, |
||||||
|
"useCssVars": true, |
||||||
|
"useCurrentElement": true, |
||||||
|
"useCycleList": true, |
||||||
|
"useDark": true, |
||||||
|
"useDateFormat": true, |
||||||
|
"useDebounce": true, |
||||||
|
"useDebounceFn": true, |
||||||
|
"useDebouncedRefHistory": true, |
||||||
|
"useDeviceMotion": true, |
||||||
|
"useDeviceOrientation": true, |
||||||
|
"useDevicePixelRatio": true, |
||||||
|
"useDevicesList": true, |
||||||
|
"useDisplayMedia": true, |
||||||
|
"useDocumentVisibility": true, |
||||||
|
"useDraggable": true, |
||||||
|
"useDropZone": true, |
||||||
|
"useElementBounding": true, |
||||||
|
"useElementByPoint": true, |
||||||
|
"useElementHover": true, |
||||||
|
"useElementSize": true, |
||||||
|
"useElementVisibility": true, |
||||||
|
"useEventBus": true, |
||||||
|
"useEventListener": true, |
||||||
|
"useEventSource": true, |
||||||
|
"useEyeDropper": true, |
||||||
|
"useFavicon": true, |
||||||
|
"useFetch": true, |
||||||
|
"useFileDialog": true, |
||||||
|
"useFileSystemAccess": true, |
||||||
|
"useFocus": true, |
||||||
|
"useFocusWithin": true, |
||||||
|
"useFps": true, |
||||||
|
"useFullscreen": true, |
||||||
|
"useGamepad": true, |
||||||
|
"useGeolocation": true, |
||||||
|
"useIdle": true, |
||||||
|
"useImage": true, |
||||||
|
"useInfiniteScroll": true, |
||||||
|
"useIntersectionObserver": true, |
||||||
|
"useInterval": true, |
||||||
|
"useIntervalFn": true, |
||||||
|
"useKeyModifier": true, |
||||||
|
"useLastChanged": true, |
||||||
|
"useLocalStorage": true, |
||||||
|
"useMagicKeys": true, |
||||||
|
"useManualRefHistory": true, |
||||||
|
"useMediaControls": true, |
||||||
|
"useMediaQuery": true, |
||||||
|
"useMemoize": true, |
||||||
|
"useMemory": true, |
||||||
|
"useMounted": true, |
||||||
|
"useMouse": true, |
||||||
|
"useMouseInElement": true, |
||||||
|
"useMousePressed": true, |
||||||
|
"useMutationObserver": true, |
||||||
|
"useNavigatorLanguage": true, |
||||||
|
"useNetwork": true, |
||||||
|
"useNow": true, |
||||||
|
"useObjectUrl": true, |
||||||
|
"useOffsetPagination": true, |
||||||
|
"useOnline": true, |
||||||
|
"usePageLeave": true, |
||||||
|
"useParallax": true, |
||||||
|
"usePermission": true, |
||||||
|
"usePointer": true, |
||||||
|
"usePointerSwipe": true, |
||||||
|
"usePreferredColorScheme": true, |
||||||
|
"usePreferredDark": true, |
||||||
|
"usePreferredLanguages": true, |
||||||
|
"useRafFn": true, |
||||||
|
"useRefHistory": true, |
||||||
|
"useResizeObserver": true, |
||||||
|
"useRoute": true, |
||||||
|
"useRouter": true, |
||||||
|
"useScreenOrientation": true, |
||||||
|
"useScreenSafeArea": true, |
||||||
|
"useScriptTag": true, |
||||||
|
"useScroll": true, |
||||||
|
"useScrollLock": true, |
||||||
|
"useSessionStorage": true, |
||||||
|
"useShare": true, |
||||||
|
"useSlots": true, |
||||||
|
"useSpeechRecognition": true, |
||||||
|
"useSpeechSynthesis": true, |
||||||
|
"useStepper": true, |
||||||
|
"useStorage": true, |
||||||
|
"useStorageAsync": true, |
||||||
|
"useStyleTag": true, |
||||||
|
"useSupported": true, |
||||||
|
"useSwipe": true, |
||||||
|
"useTemplateRefsList": true, |
||||||
|
"useTextDirection": true, |
||||||
|
"useTextSelection": true, |
||||||
|
"useTextareaAutosize": true, |
||||||
|
"useThrottle": true, |
||||||
|
"useThrottleFn": true, |
||||||
|
"useThrottledRefHistory": true, |
||||||
|
"useTimeAgo": true, |
||||||
|
"useTimeout": true, |
||||||
|
"useTimeoutFn": true, |
||||||
|
"useTimeoutPoll": true, |
||||||
|
"useTimestamp": true, |
||||||
|
"useTitle": true, |
||||||
|
"useToggle": true, |
||||||
|
"useTransition": true, |
||||||
|
"useUrlSearchParams": true, |
||||||
|
"useUserMedia": true, |
||||||
|
"useVModel": true, |
||||||
|
"useVModels": true, |
||||||
|
"useVibrate": true, |
||||||
|
"useVirtualList": true, |
||||||
|
"useWakeLock": true, |
||||||
|
"useWebNotification": true, |
||||||
|
"useWebSocket": true, |
||||||
|
"useWebWorker": true, |
||||||
|
"useWebWorkerFn": true, |
||||||
|
"useWindowFocus": true, |
||||||
|
"useWindowScroll": true, |
||||||
|
"useWindowSize": true, |
||||||
|
"watch": true, |
||||||
|
"watchArray": true, |
||||||
|
"watchAtMost": true, |
||||||
|
"watchDebounced": true, |
||||||
|
"watchEffect": true, |
||||||
|
"watchIgnorable": true, |
||||||
|
"watchOnce": true, |
||||||
|
"watchPausable": true, |
||||||
|
"watchPostEffect": true, |
||||||
|
"watchSyncEffect": true, |
||||||
|
"watchThrottled": true, |
||||||
|
"watchTriggerable": true, |
||||||
|
"watchWithFilter": true, |
||||||
|
"whenever": true |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
// @ts-check
|
||||||
|
const { defineConfig } = require('eslint-define-config') |
||||||
|
module.exports = defineConfig({ |
||||||
|
root: true, |
||||||
|
env: { |
||||||
|
browser: true, |
||||||
|
node: true, |
||||||
|
es6: true |
||||||
|
}, |
||||||
|
parser: 'vue-eslint-parser', |
||||||
|
parserOptions: { |
||||||
|
parser: '@typescript-eslint/parser', |
||||||
|
ecmaVersion: 2020, |
||||||
|
sourceType: 'module', |
||||||
|
jsxPragma: 'React', |
||||||
|
ecmaFeatures: { |
||||||
|
jsx: true |
||||||
|
} |
||||||
|
}, |
||||||
|
extends: [ |
||||||
|
'plugin:vue/vue3-recommended', |
||||||
|
'plugin:@typescript-eslint/recommended', |
||||||
|
'prettier', |
||||||
|
'plugin:prettier/recommended', |
||||||
|
'./.eslintrc-auto-import.json' |
||||||
|
], |
||||||
|
rules: { |
||||||
|
'vue/script-setup-uses-vars': 'error', |
||||||
|
'vue/no-reserved-component-names': 'off', |
||||||
|
'@typescript-eslint/ban-ts-ignore': 'off', |
||||||
|
'@typescript-eslint/explicit-function-return-type': 'off', |
||||||
|
'@typescript-eslint/no-explicit-any': 'off', |
||||||
|
'@typescript-eslint/no-var-requires': 'off', |
||||||
|
'@typescript-eslint/no-empty-function': 'off', |
||||||
|
'vue/custom-event-name-casing': 'off', |
||||||
|
'no-use-before-define': 'off', |
||||||
|
'@typescript-eslint/no-use-before-define': 'off', |
||||||
|
'@typescript-eslint/ban-ts-comment': 'off', |
||||||
|
'@typescript-eslint/ban-types': 'off', |
||||||
|
'@typescript-eslint/no-non-null-assertion': 'off', |
||||||
|
'@typescript-eslint/explicit-module-boundary-types': 'off', |
||||||
|
'@typescript-eslint/no-unused-vars': 'error', |
||||||
|
'no-unused-vars': 'error', |
||||||
|
'space-before-function-paren': 'off', |
||||||
|
|
||||||
|
'vue/attributes-order': 'off', |
||||||
|
'vue/one-component-per-file': 'off', |
||||||
|
'vue/html-closing-bracket-newline': 'off', |
||||||
|
'vue/max-attributes-per-line': 'off', |
||||||
|
'vue/multiline-html-element-content-newline': 'off', |
||||||
|
'vue/singleline-html-element-content-newline': 'off', |
||||||
|
'vue/attribute-hyphenation': 'off', |
||||||
|
'vue/require-default-prop': 'off', |
||||||
|
'vue/require-explicit-emits': 'off', |
||||||
|
'vue/html-self-closing': [ |
||||||
|
'error', |
||||||
|
{ |
||||||
|
html: { |
||||||
|
void: 'always', |
||||||
|
normal: 'never', |
||||||
|
component: 'always' |
||||||
|
}, |
||||||
|
svg: 'always', |
||||||
|
math: 'always' |
||||||
|
} |
||||||
|
], |
||||||
|
'vue/multi-word-component-names': 'off' |
||||||
|
} |
||||||
|
}) |
||||||
@ -1,11 +1,11 @@ |
|||||||
# ---> Vue |
node_modules |
||||||
# gitignore template for Vue.js projects |
.DS_Store |
||||||
# |
dist |
||||||
# Recommended template: Node.gitignore |
dist-ssr |
||||||
|
*.local |
||||||
# TODO: where does this rule come from? |
/dist* |
||||||
docs/_book |
*-lock.* |
||||||
|
pnpm-debug |
||||||
# TODO: where does this rule come from? |
auto-*.d.ts |
||||||
test/ |
.idea |
||||||
|
.history |
||||||
|
|||||||
@ -0,0 +1,11 @@ |
|||||||
|
/node_modules/** |
||||||
|
/dist/ |
||||||
|
/dist* |
||||||
|
/public/* |
||||||
|
/docs/* |
||||||
|
/vite.config.ts |
||||||
|
/src/types/env.d.ts |
||||||
|
/src/types/auto-components.d.ts |
||||||
|
/src/types/auto-imports.d.ts |
||||||
|
/docs/**/* |
||||||
|
CHANGELOG |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
/dist/* |
||||||
|
/public/* |
||||||
|
public/* |
||||||
|
/dist* |
||||||
|
/src/types/env.d.ts |
||||||
|
/docs/**/* |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2021-present Archer |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,109 @@ |
|||||||
|
import { resolve } from 'path' |
||||||
|
import Vue from '@vitejs/plugin-vue' |
||||||
|
import VueJsx from '@vitejs/plugin-vue-jsx' |
||||||
|
import WindiCSS from 'vite-plugin-windicss' |
||||||
|
import progress from 'vite-plugin-progress' |
||||||
|
import EslintPlugin from 'vite-plugin-eslint' |
||||||
|
import PurgeIcons from 'vite-plugin-purge-icons' |
||||||
|
import { ViteEjsPlugin } from 'vite-plugin-ejs' |
||||||
|
// @ts-ignore
|
||||||
|
import ElementPlus from 'unplugin-element-plus/vite' |
||||||
|
import AutoImport from 'unplugin-auto-import/vite' |
||||||
|
import Components from 'unplugin-vue-components/vite' |
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' |
||||||
|
import viteCompression from 'vite-plugin-compression' |
||||||
|
import topLevelAwait from 'vite-plugin-top-level-await' |
||||||
|
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus' |
||||||
|
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' |
||||||
|
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' |
||||||
|
|
||||||
|
export function createVitePlugins() { |
||||||
|
const root = process.cwd() |
||||||
|
|
||||||
|
// 路径查找
|
||||||
|
function pathResolve(dir: string) { |
||||||
|
return resolve(root, '.', dir) |
||||||
|
} |
||||||
|
|
||||||
|
return [ |
||||||
|
Vue(), |
||||||
|
VueJsx(), |
||||||
|
WindiCSS(), |
||||||
|
progress(), |
||||||
|
PurgeIcons(), |
||||||
|
vueSetupExtend(), |
||||||
|
ElementPlus({}), |
||||||
|
AutoImport({ |
||||||
|
include: [ |
||||||
|
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
|
||||||
|
/\.vue$/, |
||||||
|
/\.vue\?vue/, // .vue
|
||||||
|
/\.md$/ // .md
|
||||||
|
], |
||||||
|
imports: [ |
||||||
|
'vue', |
||||||
|
'vue-router', |
||||||
|
// 可额外添加需要 autoImport 的组件
|
||||||
|
{ |
||||||
|
'@/hooks/web/useI18n': ['useI18n'], |
||||||
|
'@/hooks/web/useMessage': ['useMessage'], |
||||||
|
'@/hooks/web/useTable': ['useTable'], |
||||||
|
'@/hooks/web/useCrudSchemas': ['useCrudSchemas'], |
||||||
|
'@/utils/formRules': ['required'], |
||||||
|
'@/utils/dict': ['DICT_TYPE'] |
||||||
|
} |
||||||
|
], |
||||||
|
dts: 'src/types/auto-imports.d.ts', |
||||||
|
resolvers: [ElementPlusResolver()], |
||||||
|
eslintrc: { |
||||||
|
enabled: false, // Default `false`
|
||||||
|
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
|
||||||
|
globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
|
||||||
|
} |
||||||
|
}), |
||||||
|
Components({ |
||||||
|
// 要搜索组件的目录的相对路径
|
||||||
|
dirs: ['src/components'], |
||||||
|
// 组件的有效文件扩展名
|
||||||
|
extensions: ['vue', 'md'], |
||||||
|
// 搜索子目录
|
||||||
|
deep: true, |
||||||
|
include: [/\.vue$/, /\.vue\?vue/], |
||||||
|
// 生成自定义 `auto-components.d.ts` 全局声明
|
||||||
|
dts: 'src/types/auto-components.d.ts', |
||||||
|
// 自定义组件的解析器
|
||||||
|
resolvers: [ElementPlusResolver()], |
||||||
|
exclude: [/[\\/]node_modules[\\/]/] |
||||||
|
}), |
||||||
|
EslintPlugin({ |
||||||
|
cache: false, |
||||||
|
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
||||||
|
}), |
||||||
|
VueI18nPlugin({ |
||||||
|
runtimeOnly: true, |
||||||
|
compositionOnly: true, |
||||||
|
include: [resolve(__dirname, 'src/locales/**')] |
||||||
|
}), |
||||||
|
createSvgIconsPlugin({ |
||||||
|
iconDirs: [pathResolve('src/assets/svgs')], |
||||||
|
symbolId: 'icon-[dir]-[name]', |
||||||
|
svgoOptions: true |
||||||
|
}), |
||||||
|
viteCompression({ |
||||||
|
verbose: true, // 是否在控制台输出压缩结果
|
||||||
|
disable: false, // 是否禁用
|
||||||
|
threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
|
||||||
|
algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
|
||||||
|
ext: '.gz', // 生成的压缩包后缀
|
||||||
|
deleteOriginFile: false //压缩后是否删除源文件
|
||||||
|
}), |
||||||
|
ViteEjsPlugin(), |
||||||
|
topLevelAwait({ |
||||||
|
// https://juejin.cn/post/7152191742513512485
|
||||||
|
// The export name of top-level await promise for each chunk module
|
||||||
|
promiseExportName: '__tla', |
||||||
|
// The function to generate import names of top-level await promise in each chunk module
|
||||||
|
promiseImportName: (i) => `__tla_${i}` |
||||||
|
}) |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
const include = [ |
||||||
|
'qs', |
||||||
|
'url', |
||||||
|
'vue', |
||||||
|
'sass', |
||||||
|
'mitt', |
||||||
|
'axios', |
||||||
|
'pinia', |
||||||
|
'dayjs', |
||||||
|
'qrcode', |
||||||
|
'windicss', |
||||||
|
'vue-router', |
||||||
|
'vue-types', |
||||||
|
'vue-i18n', |
||||||
|
'xe-utils', |
||||||
|
'crypto-js', |
||||||
|
'cropperjs', |
||||||
|
'lodash-es', |
||||||
|
'nprogress', |
||||||
|
'web-storage-cache', |
||||||
|
'@iconify/iconify', |
||||||
|
'@vueuse/core', |
||||||
|
'@zxcvbn-ts/core', |
||||||
|
'echarts/core', |
||||||
|
'echarts/charts', |
||||||
|
'echarts/components', |
||||||
|
'echarts/renderers', |
||||||
|
'echarts-wordcloud', |
||||||
|
'@wangeditor/editor', |
||||||
|
'@wangeditor/editor-for-vue', |
||||||
|
'element-plus', |
||||||
|
'element-plus/es', |
||||||
|
'element-plus/es/locale/lang/zh-cn', |
||||||
|
'element-plus/es/locale/lang/en', |
||||||
|
'element-plus/es/components/backtop/style/css', |
||||||
|
'element-plus/es/components/form/style/css', |
||||||
|
'element-plus/es/components/radio-group/style/css', |
||||||
|
'element-plus/es/components/radio/style/css', |
||||||
|
'element-plus/es/components/checkbox/style/css', |
||||||
|
'element-plus/es/components/checkbox-group/style/css', |
||||||
|
'element-plus/es/components/switch/style/css', |
||||||
|
'element-plus/es/components/time-picker/style/css', |
||||||
|
'element-plus/es/components/date-picker/style/css', |
||||||
|
'element-plus/es/components/descriptions/style/css', |
||||||
|
'element-plus/es/components/descriptions-item/style/css', |
||||||
|
'element-plus/es/components/link/style/css', |
||||||
|
'element-plus/es/components/tooltip/style/css', |
||||||
|
'element-plus/es/components/drawer/style/css', |
||||||
|
'element-plus/es/components/dialog/style/css', |
||||||
|
'element-plus/es/components/checkbox-button/style/css', |
||||||
|
'element-plus/es/components/option-group/style/css', |
||||||
|
'element-plus/es/components/radio-button/style/css', |
||||||
|
'element-plus/es/components/cascader/style/css', |
||||||
|
'element-plus/es/components/color-picker/style/css', |
||||||
|
'element-plus/es/components/input-number/style/css', |
||||||
|
'element-plus/es/components/rate/style/css', |
||||||
|
'element-plus/es/components/select-v2/style/css', |
||||||
|
'element-plus/es/components/tree-select/style/css', |
||||||
|
'element-plus/es/components/slider/style/css', |
||||||
|
'element-plus/es/components/time-select/style/css', |
||||||
|
'element-plus/es/components/autocomplete/style/css', |
||||||
|
'element-plus/es/components/image-viewer/style/css', |
||||||
|
'element-plus/es/components/upload/style/css', |
||||||
|
'element-plus/es/components/col/style/css', |
||||||
|
'element-plus/es/components/form-item/style/css', |
||||||
|
'element-plus/es/components/alert/style/css', |
||||||
|
'element-plus/es/components/breadcrumb/style/css', |
||||||
|
'element-plus/es/components/select/style/css', |
||||||
|
'element-plus/es/components/input/style/css', |
||||||
|
'element-plus/es/components/breadcrumb-item/style/css', |
||||||
|
'element-plus/es/components/tag/style/css', |
||||||
|
'element-plus/es/components/pagination/style/css', |
||||||
|
'element-plus/es/components/table/style/css', |
||||||
|
'element-plus/es/components/table-v2/style/css', |
||||||
|
'element-plus/es/components/table-column/style/css', |
||||||
|
'element-plus/es/components/card/style/css', |
||||||
|
'element-plus/es/components/row/style/css', |
||||||
|
'element-plus/es/components/button/style/css', |
||||||
|
'element-plus/es/components/menu/style/css', |
||||||
|
'element-plus/es/components/sub-menu/style/css', |
||||||
|
'element-plus/es/components/menu-item/style/css', |
||||||
|
'element-plus/es/components/option/style/css', |
||||||
|
'element-plus/es/components/dropdown/style/css', |
||||||
|
'element-plus/es/components/dropdown-menu/style/css', |
||||||
|
'element-plus/es/components/dropdown-item/style/css', |
||||||
|
'element-plus/es/components/skeleton/style/css', |
||||||
|
'element-plus/es/components/skeleton/style/css', |
||||||
|
'element-plus/es/components/backtop/style/css', |
||||||
|
'element-plus/es/components/menu/style/css', |
||||||
|
'element-plus/es/components/sub-menu/style/css', |
||||||
|
'element-plus/es/components/menu-item/style/css', |
||||||
|
'element-plus/es/components/dropdown/style/css', |
||||||
|
'element-plus/es/components/tree/style/css', |
||||||
|
'element-plus/es/components/dropdown-menu/style/css', |
||||||
|
'element-plus/es/components/dropdown-item/style/css', |
||||||
|
'element-plus/es/components/badge/style/css', |
||||||
|
'element-plus/es/components/breadcrumb/style/css', |
||||||
|
'element-plus/es/components/breadcrumb-item/style/css', |
||||||
|
'element-plus/es/components/image/style/css', |
||||||
|
'element-plus/es/components/collapse-transition/style/css', |
||||||
|
'element-plus/es/components/timeline/style/css', |
||||||
|
'element-plus/es/components/timeline-item/style/css', |
||||||
|
'element-plus/es/components/collapse/style/css', |
||||||
|
'element-plus/es/components/collapse-item/style/css', |
||||||
|
'element-plus/es/components/button-group/style/css', |
||||||
|
'element-plus/es/components/text/style/css' |
||||||
|
] |
||||||
|
|
||||||
|
const exclude = ['@iconify/json'] |
||||||
|
|
||||||
|
export { include, exclude } |
||||||
@ -0,0 +1,143 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" href="/favicon.ico" /> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>%VITE_APP_TITLE%</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"> |
||||||
|
<style> |
||||||
|
.app-loading { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
background: #f0f2f5; |
||||||
|
} |
||||||
|
|
||||||
|
.app-loading .app-loading-wrap { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
display: flex; |
||||||
|
-webkit-transform: translate3d(-50%, -50%, 0); |
||||||
|
transform: translate3d(-50%, -50%, 0); |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.app-loading .app-loading-title { |
||||||
|
margin-bottom: 30px; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: bold; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.app-loading .app-loading-logo { |
||||||
|
width: 100px; |
||||||
|
margin: 0 auto 15px auto; |
||||||
|
} |
||||||
|
|
||||||
|
.app-loading .app-loading-item { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
vertical-align: middle; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.app-loading .app-loading-outter { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border: 4px solid #2d8cf0; |
||||||
|
border-bottom: 0; |
||||||
|
border-left-color: transparent; |
||||||
|
border-radius: 50%; |
||||||
|
animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; |
||||||
|
} |
||||||
|
|
||||||
|
.app-loading .app-loading-inner { |
||||||
|
position: absolute; |
||||||
|
top: calc(50% - 20px); |
||||||
|
left: calc(50% - 20px); |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
border: 4px solid #87bdff; |
||||||
|
border-right: 0; |
||||||
|
border-top-color: transparent; |
||||||
|
border-radius: 50%; |
||||||
|
animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes loader-outter { |
||||||
|
0% { |
||||||
|
-webkit-transform: rotate(0deg); |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
-webkit-transform: rotate(360deg); |
||||||
|
transform: rotate(360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes loader-outter { |
||||||
|
0% { |
||||||
|
-webkit-transform: rotate(0deg); |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
-webkit-transform: rotate(360deg); |
||||||
|
transform: rotate(360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes loader-inner { |
||||||
|
0% { |
||||||
|
-webkit-transform: rotate(0deg); |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
-webkit-transform: rotate(-360deg); |
||||||
|
transform: rotate(-360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes loader-inner { |
||||||
|
0% { |
||||||
|
-webkit-transform: rotate(0deg); |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
-webkit-transform: rotate(-360deg); |
||||||
|
transform: rotate(-360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<div class="app-loading"> |
||||||
|
<div class="app-loading-wrap"> |
||||||
|
<div class="app-loading-title"> |
||||||
|
<img src="/logo.gif" class="app-loading-logo" alt="Logo" /> |
||||||
|
<div class="app-loading-title">%VITE_APP_TITLE%</div> |
||||||
|
</div> |
||||||
|
<div class="app-loading-item"> |
||||||
|
<div class="app-loading-outter"></div> |
||||||
|
<div class="app-loading-inner"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script type="module" src="/src/main.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,142 @@ |
|||||||
|
{ |
||||||
|
"name": "ss-tiku-manage", |
||||||
|
"version": "1.0.1", |
||||||
|
"description": "莳松题库管理系统", |
||||||
|
"author": "ss", |
||||||
|
"private": false, |
||||||
|
"scripts": { |
||||||
|
"i": "pnpm install", |
||||||
|
"dev": "vite --mode base", |
||||||
|
"dev-front": "vite --mode front", |
||||||
|
"front": "vite --mode front", |
||||||
|
"ts:check": "vue-tsc --noEmit", |
||||||
|
"build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro", |
||||||
|
"build:dev": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode dev", |
||||||
|
"build:stage": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode stage", |
||||||
|
"build:test": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode test", |
||||||
|
"build:static": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode static", |
||||||
|
"build:front": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode front", |
||||||
|
"serve:pro": "vite preview --mode pro", |
||||||
|
"serve:dev": "vite preview --mode dev", |
||||||
|
"serve:test": "vite preview --mode test", |
||||||
|
"preview": "pnpm build && vite preview", |
||||||
|
"npm:check": "npx npm-check-updates", |
||||||
|
"clean": "npx rimraf node_modules", |
||||||
|
"clean:cache": "npx rimraf node_modules/.cache", |
||||||
|
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src", |
||||||
|
"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"", |
||||||
|
"lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/", |
||||||
|
"lint:lint-staged": "lint-staged -c ", |
||||||
|
"lint:pretty": "pretty-quick --staged" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@amap/amap-jsapi-loader": "^1.0.1", |
||||||
|
"@element-plus/icons-vue": "^2.1.0", |
||||||
|
"@form-create/designer": "^3.1.0", |
||||||
|
"@form-create/element-ui": "^3.1.17", |
||||||
|
"@iconify/iconify": "^3.1.0", |
||||||
|
"@videojs-player/vue": "^1.0.0", |
||||||
|
"@vueuse/core": "^10.1.2", |
||||||
|
"@wangeditor/editor": "^5.1.23", |
||||||
|
"@wangeditor/editor-for-vue": "^5.1.10", |
||||||
|
"@zxcvbn-ts/core": "^3.0.1", |
||||||
|
"animate.css": "^4.1.1", |
||||||
|
"axios": "^1.4.0", |
||||||
|
"benz-amr-recorder": "^1.1.5", |
||||||
|
"bpmn-js-token-simulation": "^0.10.0", |
||||||
|
"camunda-bpmn-moddle": "^7.0.1", |
||||||
|
"cropperjs": "^1.5.13", |
||||||
|
"crypto-js": "^4.1.1", |
||||||
|
"dayjs": "^1.11.7", |
||||||
|
"diagram-js": "^11.6.0", |
||||||
|
"echarts": "^5.4.2", |
||||||
|
"echarts-wordcloud": "^2.1.0", |
||||||
|
"element-plus": "2.9.4", |
||||||
|
"fast-xml-parser": "^4.2.2", |
||||||
|
"highlight.js": "^11.8.0", |
||||||
|
"intro.js": "^7.0.1", |
||||||
|
"jsencrypt": "^3.3.2", |
||||||
|
"lodash-es": "^4.17.21", |
||||||
|
"min-dash": "^4.1.1", |
||||||
|
"mitt": "^3.0.0", |
||||||
|
"nprogress": "^0.2.0", |
||||||
|
"pinia": "^2.1.3", |
||||||
|
"qrcode": "^1.5.3", |
||||||
|
"qs": "^6.11.2", |
||||||
|
"steady-xml": "^0.1.0", |
||||||
|
"url": "^0.11.0", |
||||||
|
"video.js": "^8.3.0", |
||||||
|
"vue": "3.3.4", |
||||||
|
"vue-amap": "^0.5.10", |
||||||
|
"vue-dompurify-html": "^5.0.1", |
||||||
|
"vue-i18n": "9.2.2", |
||||||
|
"vue-router": "^4.2.1", |
||||||
|
"vue-types": "^5.0.3", |
||||||
|
"vue3-tree-org": "^4.2.2", |
||||||
|
"vuedraggable": "^4.1.0", |
||||||
|
"web-storage-cache": "^1.1.1", |
||||||
|
"xe-utils": "^3.5.7", |
||||||
|
"xml-js": "^1.6.11" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@commitlint/cli": "^17.6.3", |
||||||
|
"@commitlint/config-conventional": "^17.6.3", |
||||||
|
"@iconify/json": "^2.2.67", |
||||||
|
"@intlify/unplugin-vue-i18n": "^0.10.0", |
||||||
|
"@purge-icons/generated": "^0.9.0", |
||||||
|
"@types/intro.js": "^5.1.1", |
||||||
|
"@types/lodash-es": "^4.17.7", |
||||||
|
"@types/node": "^18.16.0", |
||||||
|
"@types/nprogress": "^0.2.0", |
||||||
|
"@types/qrcode": "^1.5.0", |
||||||
|
"@types/qs": "^6.9.7", |
||||||
|
"@typescript-eslint/eslint-plugin": "^5.59.6", |
||||||
|
"@typescript-eslint/parser": "^5.59.6", |
||||||
|
"@vitejs/plugin-legacy": "^4.0.3", |
||||||
|
"@vitejs/plugin-vue": "^4.2.3", |
||||||
|
"@vitejs/plugin-vue-jsx": "^3.0.1", |
||||||
|
"autoprefixer": "^10.4.14", |
||||||
|
"bpmn-js": "^8.9.0", |
||||||
|
"bpmn-js-properties-panel": "^0.46.0", |
||||||
|
"consola": "^3.1.0", |
||||||
|
"eslint": "^8.40.0", |
||||||
|
"eslint-config-prettier": "^8.8.0", |
||||||
|
"eslint-define-config": "^1.20.0", |
||||||
|
"eslint-plugin-prettier": "^4.2.1", |
||||||
|
"eslint-plugin-vue": "^9.13.0", |
||||||
|
"lint-staged": "^13.2.2", |
||||||
|
"postcss": "^8.4.23", |
||||||
|
"postcss-html": "^1.5.0", |
||||||
|
"postcss-scss": "^4.0.6", |
||||||
|
"prettier": "^2.8.8", |
||||||
|
"rimraf": "^5.0.1", |
||||||
|
"rollup": "^3.22.0", |
||||||
|
"sass": "^1.62.1", |
||||||
|
"stylelint": "^15.6.2", |
||||||
|
"stylelint-config-html": "^1.1.0", |
||||||
|
"stylelint-config-recommended": "^12.0.0", |
||||||
|
"stylelint-config-standard": "^33.0.0", |
||||||
|
"stylelint-order": "^6.0.3", |
||||||
|
"terser": "^5.17.4", |
||||||
|
"typescript": "5.0.4", |
||||||
|
"unplugin-auto-import": "^0.16.0", |
||||||
|
"unplugin-element-plus": "^0.7.1", |
||||||
|
"unplugin-vue-components": "^0.24.1", |
||||||
|
"vite": "4.3.8", |
||||||
|
"vite-plugin-compression": "^0.5.1", |
||||||
|
"vite-plugin-ejs": "^1.6.4", |
||||||
|
"vite-plugin-eslint": "^1.8.1", |
||||||
|
"vite-plugin-progress": "^0.0.7", |
||||||
|
"vite-plugin-purge-icons": "^0.9.2", |
||||||
|
"vite-plugin-svg-icons": "^2.0.1", |
||||||
|
"vite-plugin-top-level-await": "^1.3.0", |
||||||
|
"vite-plugin-vue-setup-extend-plus": "^0.1.0", |
||||||
|
"vite-plugin-windicss": "^1.9.0", |
||||||
|
"vue-tsc": "^1.6.5", |
||||||
|
"windicss": "^3.5.6" |
||||||
|
}, |
||||||
|
"engines": { |
||||||
|
"node": ">=16.0.0" |
||||||
|
}, |
||||||
|
"license": "MIT" |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
autoprefixer: {} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
module.exports = { |
||||||
|
printWidth: 100, // 每行代码长度（默认80）
|
||||||
|
tabWidth: 2, // 每个tab相当于多少个空格（默认2）ab进行缩进（默认false）
|
||||||
|
useTabs: false, // 是否使用tab
|
||||||
|
semi: false, // 声明结尾使用分号(默认true)
|
||||||
|
vueIndentScriptAndStyle: false, |
||||||
|
singleQuote: true, // 使用单引号（默认false）
|
||||||
|
quoteProps: 'as-needed', |
||||||
|
bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
|
||||||
|
trailingComma: 'none', // 多行使用拖尾逗号（默认none）
|
||||||
|
jsxSingleQuote: false, |
||||||
|
// 箭头函数参数括号 默认avoid 可选 avoid| always
|
||||||
|
// avoid 能省略括号的时候就省略 例如x => x
|
||||||
|
// always 总是有括号
|
||||||
|
arrowParens: 'always', |
||||||
|
insertPragma: false, |
||||||
|
requirePragma: false, |
||||||
|
proseWrap: 'never', |
||||||
|
htmlWhitespaceSensitivity: 'strict', |
||||||
|
endOfLine: 'auto', |
||||||
|
rangeStart: 0 |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
@ -0,0 +1,54 @@ |
|||||||
|
<script lang="ts" name="APP" setup> |
||||||
|
import { isDark } from '@/utils/is' |
||||||
|
import { useAppStore } from '@/store/modules/app' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { CACHE_KEY } from '@/hooks/web/useCache' |
||||||
|
import routerSearch from '@/components/RouterSearch/index.vue' |
||||||
|
import cache from '@/plugins/cache' |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
const prefixCls = getPrefixCls('app') |
||||||
|
const appStore = useAppStore() |
||||||
|
const currentSize = computed(() => appStore.getCurrentSize) |
||||||
|
const greyMode = computed(() => appStore.getGreyMode) |
||||||
|
|
||||||
|
// 根据浏览器当前主题设置系统主题色 |
||||||
|
const setDefaultTheme = () => { |
||||||
|
let isDarkTheme = cache.local.get(CACHE_KEY.IS_DARK) |
||||||
|
if (isDarkTheme === null) { |
||||||
|
isDarkTheme = isDark() |
||||||
|
} |
||||||
|
appStore.setIsDark(isDarkTheme) |
||||||
|
} |
||||||
|
setDefaultTheme() |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<ConfigGlobal :size="currentSize"> |
||||||
|
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" /> |
||||||
|
<routerSearch /> |
||||||
|
</ConfigGlobal> |
||||||
|
</template> |
||||||
|
<style lang="scss"> |
||||||
|
$prefix-cls: #{$namespace}-app; |
||||||
|
|
||||||
|
.size { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
html, |
||||||
|
body { |
||||||
|
padding: 0 !important; |
||||||
|
margin: 0; |
||||||
|
overflow: hidden; |
||||||
|
@extend .size; |
||||||
|
|
||||||
|
#app { |
||||||
|
@extend .size; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.#{$prefix-cls}-grey-mode { |
||||||
|
filter: grayscale(100%); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
// 创建
|
||||||
|
export const createCustomer = (data) => { |
||||||
|
return request.post({ url: '/admin-api/tiku/customer/create', data, isSubmitForm: true }) |
||||||
|
} |
||||||
|
|
||||||
|
// 分页
|
||||||
|
export const getCustomerSimpleList = (params) => { |
||||||
|
return request.get({ url: '/admin-api/tiku/customer/list-all-simple', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改
|
||||||
|
export const updateCustomer = (data) => { |
||||||
|
return request.put({ url: '/admin-api/tiku/customer/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 分页
|
||||||
|
export const getCustomerPage = (params) => { |
||||||
|
return request.get({ url: '/admin-api/tiku/customer/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 详情
|
||||||
|
export const getCustomerDetail = (id) => { |
||||||
|
return request.get({ url: '/admin-api/tiku/customer/get', params: { id } }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除
|
||||||
|
export const deleteCustomer = (id) => { |
||||||
|
return request.delete({ url: '/admin-api/tiku/customer/delete', params: { id } }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取钉钉id
|
||||||
|
export const getDingUserId = (params) => { |
||||||
|
return request.get({ url: '/admin-api/tiku/customer/getDingTalkUserIdByMobile', params }) |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface ConfigVO { |
||||||
|
id: number | undefined |
||||||
|
category: string |
||||||
|
name: string |
||||||
|
key: string |
||||||
|
value: string |
||||||
|
type: number |
||||||
|
visible: boolean |
||||||
|
remark: string |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
// 查询参数列表
|
||||||
|
export const getConfigPage = (params: PageParam) => { |
||||||
|
return request.get({ url: '/admin-api/infra/config/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询参数详情
|
||||||
|
export const getConfig = (id: number) => { |
||||||
|
return request.get({ url: '/admin-api/infra/config/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 根据参数键名查询参数值
|
||||||
|
export const getConfigKey = (configKey: string) => { |
||||||
|
return request.get({ url: '/admin-api/infra/config/get-value-by-key?key=' + configKey }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增参数
|
||||||
|
export const createConfig = (data: ConfigVO) => { |
||||||
|
return request.post({ url: '/admin-api/infra/config/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改参数
|
||||||
|
export const updateConfig = (data: ConfigVO) => { |
||||||
|
return request.put({ url: '/admin-api/infra/config/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除参数
|
||||||
|
export const deleteConfig = (id: number) => { |
||||||
|
return request.delete({ url: '/admin-api/infra/config/delete?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 导出参数
|
||||||
|
export const exportConfig = (params) => { |
||||||
|
return request.download({ url: '/admin-api/infra/config/export', params }) |
||||||
|
} |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface FilePageReqVO extends PageParam { |
||||||
|
path?: string |
||||||
|
type?: string |
||||||
|
createTime?: Date[] |
||||||
|
} |
||||||
|
|
||||||
|
// 文件预签名地址 Response VO
|
||||||
|
export interface FilePresignedUrlRespVO { |
||||||
|
// 文件配置编号
|
||||||
|
configId: number |
||||||
|
// 文件上传 URL
|
||||||
|
uploadUrl: string |
||||||
|
// 文件 URL
|
||||||
|
url: string |
||||||
|
} |
||||||
|
|
||||||
|
// 查询文件列表
|
||||||
|
export const getFilePage = (params: FilePageReqVO) => { |
||||||
|
return request.get({ url: '/infra/file/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除文件
|
||||||
|
export const deleteFile = (id: number) => { |
||||||
|
return request.delete({ url: '/infra/file/delete?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取文件预签名地址
|
||||||
|
export const getFilePresignedUrl = (path: string) => { |
||||||
|
return request.get<FilePresignedUrlRespVO>({ |
||||||
|
url: '/infra/file/presigned-url', |
||||||
|
params: { path } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 创建文件
|
||||||
|
export const createFile = (data: any) => { |
||||||
|
return request.post({ url: '/infra/file/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 上传文件
|
||||||
|
export const updateFile = (data: any) => { |
||||||
|
return request.upload({ url: '/admin-api/system/file/upload', data }) |
||||||
|
} |
||||||
@ -0,0 +1,73 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
import { getRefreshToken } from '@/utils/auth' |
||||||
|
import type { UserLoginVO } from './types' |
||||||
|
|
||||||
|
export interface SmsCodeVO { |
||||||
|
mobile: string |
||||||
|
scene: number |
||||||
|
} |
||||||
|
|
||||||
|
export interface SmsLoginVO { |
||||||
|
mobile: string |
||||||
|
code: string |
||||||
|
} |
||||||
|
|
||||||
|
// 登录
|
||||||
|
export const login = (data: UserLoginVO) => { |
||||||
|
return request.post({ url: '/admin-api/system/auth/login', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 刷新访问令牌
|
||||||
|
export const refreshToken = () => { |
||||||
|
return request.post({ |
||||||
|
url: '/admin-api/system/auth/refresh-token?refreshToken=' + getRefreshToken() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 使用租户名，获得租户编号
|
||||||
|
export const getTenantIdByName = (name: string) => { |
||||||
|
return request.get({ url: '/admin-api/system/tenant/get-id-by-name?name=' + name }) |
||||||
|
} |
||||||
|
|
||||||
|
// 登出
|
||||||
|
export const loginOut = () => { |
||||||
|
return request.post({ url: '/admin-api/system/auth/logout' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取用户权限信息
|
||||||
|
export const getInfo = (params) => { |
||||||
|
return request.get({ url: '/admin-api/system/auth/get-permission-info', params }) |
||||||
|
} |
||||||
|
|
||||||
|
//获取登录验证码
|
||||||
|
export const sendSmsCode = (data: SmsCodeVO) => { |
||||||
|
return request.post({ url: '/admin-api/system/auth/send-sms-code', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 短信验证码登录
|
||||||
|
export const smsLogin = (data: SmsLoginVO) => { |
||||||
|
return request.post({ url: '/admin-api/system/auth/sms-login', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 社交授权的跳转
|
||||||
|
export const socialAuthRedirect = (type: number, redirectUri: string) => { |
||||||
|
return request.get({ |
||||||
|
url: '/admin-api/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri |
||||||
|
}) |
||||||
|
} |
||||||
|
// 获取验证图片以及 token
|
||||||
|
export const getCode = (data) => { |
||||||
|
return request.postOriginal({ url: '/admin-api/system/captcha/get', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 滑动或者点选验证
|
||||||
|
export const reqCheck = (data) => { |
||||||
|
return request.postOriginal({ url: '/admin-api/system/captcha/check', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取应用信息
|
||||||
|
export const getAppInfo = (instanceId: number) => { |
||||||
|
return request.get({ |
||||||
|
url: '/admin-api/system/serviceInstance/getInstanceInfo?instanceId=' + instanceId |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
// 获得授权信息
|
||||||
|
export const getAuthorize = (clientId: string) => { |
||||||
|
return request.get({ url: '/admin-api/system/oauth2/authorize?clientId=' + clientId }) |
||||||
|
} |
||||||
|
|
||||||
|
// 发起授权
|
||||||
|
export const authorize = ( |
||||||
|
responseType: string, |
||||||
|
clientId: string, |
||||||
|
redirectUri: string, |
||||||
|
state: string, |
||||||
|
autoApprove: boolean, |
||||||
|
checkedScopes: string[], |
||||||
|
uncheckedScopes: string[] |
||||||
|
) => { |
||||||
|
// 构建 scopes
|
||||||
|
const scopes = {} |
||||||
|
for (const scope of checkedScopes) { |
||||||
|
scopes[scope] = true |
||||||
|
} |
||||||
|
for (const scope of uncheckedScopes) { |
||||||
|
scopes[scope] = false |
||||||
|
} |
||||||
|
// 发起请求
|
||||||
|
return request.post({ |
||||||
|
url: '/admin-api/system/oauth2/authorize', |
||||||
|
headers: { |
||||||
|
'Content-type': 'application/x-www-form-urlencoded' |
||||||
|
}, |
||||||
|
params: { |
||||||
|
response_type: responseType, |
||||||
|
client_id: clientId, |
||||||
|
redirect_uri: redirectUri, |
||||||
|
state: state, |
||||||
|
auto_approve: autoApprove, |
||||||
|
scope: JSON.stringify(scopes) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
export type UserLoginVO = { |
||||||
|
username: string |
||||||
|
password: string |
||||||
|
captchaVerification: string |
||||||
|
} |
||||||
|
|
||||||
|
export type TokenType = { |
||||||
|
id: number // 编号
|
||||||
|
accessToken: string // 访问令牌
|
||||||
|
refreshToken: string // 刷新令牌
|
||||||
|
userId: number // 用户编号
|
||||||
|
userType: number //用户类型
|
||||||
|
clientId: string //客户端编号
|
||||||
|
expiresTime: number //过期时间
|
||||||
|
} |
||||||
|
|
||||||
|
export type UserVO = { |
||||||
|
id: number |
||||||
|
username: string |
||||||
|
nickname: string |
||||||
|
deptId: number |
||||||
|
email: string |
||||||
|
mobile: string |
||||||
|
sex: number |
||||||
|
avatar: string |
||||||
|
loginIp: string |
||||||
|
loginDate: string |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export const getSimpleAppList = async () => { |
||||||
|
return await request.get({ url: '/admin-api/system/serviceInstance/simple-list' }) |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface DeptVO { |
||||||
|
id?: number |
||||||
|
name: string |
||||||
|
parentId: number |
||||||
|
status: number |
||||||
|
sort: number |
||||||
|
leaderUserId: number |
||||||
|
phone: string |
||||||
|
email: string |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
// 查询部门（精简)列表
|
||||||
|
export const getSimpleDeptList = async (params: any): Promise<any[]> => { |
||||||
|
return await request.get({ url: '/admin-api/system/dept/list-all-simple', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询部门列表
|
||||||
|
export const getDeptPage = async (params) => { |
||||||
|
return await request.get({ url: '/admin-api/system/dept/list', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询部门详情
|
||||||
|
export const getDept = async (id: number) => { |
||||||
|
return await request.get({ url: '/admin-api/system/dept/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增部门
|
||||||
|
export const createDept = async (data: DeptVO) => { |
||||||
|
return await request.post({ url: '/admin-api/system/dept/create', data: data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改部门
|
||||||
|
export const updateDept = async (params: DeptVO) => { |
||||||
|
return await request.put({ url: '/admin-api/system/dept/update', data: params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除部门
|
||||||
|
export const deleteDept = async (id: number) => { |
||||||
|
return await request.delete({ url: '/admin-api/system/dept/delete?id=' + id }) |
||||||
|
} |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export type DictDataVO = { |
||||||
|
id: number | undefined |
||||||
|
sort: number | undefined |
||||||
|
label: string |
||||||
|
value: string |
||||||
|
dictType: string |
||||||
|
status: number |
||||||
|
colorType: string |
||||||
|
cssClass: string |
||||||
|
remark: string |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
// 查询字典数据（精简)列表
|
||||||
|
export const listSimpleDictData = () => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-data/simple-list' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询字典数据列表
|
||||||
|
export const getDictDataPage = (params: PageParam) => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-data/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询字典数据详情
|
||||||
|
export const getDictData = (id: number) => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-data/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增字典数据
|
||||||
|
export const createDictData = (data: DictDataVO) => { |
||||||
|
return request.post({ url: '/admin-api/oa/dict-data/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改字典数据
|
||||||
|
export const updateDictData = (data: DictDataVO) => { |
||||||
|
return request.put({ url: '/admin-api/oa/dict-data/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除字典数据
|
||||||
|
export const deleteDictData = (id: number) => { |
||||||
|
return request.delete({ url: '/admin-api/oa/dict-data/delete?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 导出字典类型数据
|
||||||
|
export const exportDictData = (params) => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-data/export', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取通用字典数据
|
||||||
|
export const getGeneralSysDictData = (dictType: string) => { |
||||||
|
return request.get({ url: '/admin-api/system/dict-data/get-by-type', params: { dictType } }) |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export type DictTypeVO = { |
||||||
|
id: number | undefined |
||||||
|
name: string |
||||||
|
type: string |
||||||
|
status: number |
||||||
|
remark: string |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
// 查询字典（精简)列表
|
||||||
|
export const getSimpleDictTypeList = () => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-type/list-all-simple' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询字典列表
|
||||||
|
export const getDictTypePage = (params: PageParam) => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-type/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询字典详情
|
||||||
|
export const getDictType = (id: number) => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-type/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增字典
|
||||||
|
export const createDictType = (data: DictTypeVO) => { |
||||||
|
return request.post({ url: '/admin-api/oa/dict-type/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改字典
|
||||||
|
export const updateDictType = (data: DictTypeVO) => { |
||||||
|
return request.put({ url: '/admin-api/oa/dict-type/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除字典
|
||||||
|
export const deleteDictType = (id: number) => { |
||||||
|
return request.delete({ url: '/admin-api/oa/dict-type/delete?id=' + id }) |
||||||
|
} |
||||||
|
// 导出字典类型
|
||||||
|
export const exportDictType = (params) => { |
||||||
|
return request.get({ url: '/admin-api/oa/dict-type/export', params }) |
||||||
|
} |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface MenuVO { |
||||||
|
id: number |
||||||
|
name: string |
||||||
|
permission: string |
||||||
|
type: number |
||||||
|
sort: number |
||||||
|
parentId: number |
||||||
|
path: string |
||||||
|
icon: string |
||||||
|
component: string |
||||||
|
componentName?: string |
||||||
|
status: number |
||||||
|
visible: boolean |
||||||
|
keepAlive: boolean |
||||||
|
alwaysShow?: boolean |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
// 获取服务列表
|
||||||
|
export const getServiceAppList = () => { |
||||||
|
return request.get({ url: '/admin-api/system/service/list' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询菜单（精简）列表
|
||||||
|
export const getSimpleMenusList = () => { |
||||||
|
return request.get({ url: '/admin-api/system/menu/list-all-simple' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询菜单列表
|
||||||
|
export const getMenuList = (params) => { |
||||||
|
return request.get({ url: '/admin-api/system/menu/list', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取菜单详情
|
||||||
|
export const getMenu = (id: number) => { |
||||||
|
return request.get({ url: '/admin-api/system/menu/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增菜单
|
||||||
|
export const createMenu = (data: MenuVO) => { |
||||||
|
return request.post({ url: '/admin-api/system/menu/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改菜单
|
||||||
|
export const updateMenu = (data: MenuVO) => { |
||||||
|
return request.put({ url: '/admin-api/system/menu/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除菜单
|
||||||
|
export const deleteMenu = (id: number) => { |
||||||
|
return request.delete({ url: '/admin-api/system/menu/delete?id=' + id }) |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface NotifyMessageVO { |
||||||
|
id: number |
||||||
|
userId: number |
||||||
|
userType: number |
||||||
|
templateId: number |
||||||
|
templateCode: string |
||||||
|
templateNickname: string |
||||||
|
templateContent: string |
||||||
|
templateType: number |
||||||
|
templateParams: string |
||||||
|
readStatus: boolean |
||||||
|
readTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
// 查询站内信消息列表
|
||||||
|
export const getNotifyMessagePage = async (params: any) => { |
||||||
|
return await request.get({ url: '/admin-api/system/notify-message/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获得我的站内信分页
|
||||||
|
export const getMyNotifyMessagePage = async (params: any) => { |
||||||
|
return await request.get({ url: '/admin-api/system/notify-message/my-page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 批量标记已读
|
||||||
|
export const updateNotifyMessageRead = async (data: any) => { |
||||||
|
return await request.put({ |
||||||
|
url: '/admin-api/system/notify-message/update-read?', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 标记所有站内信为已读
|
||||||
|
export const updateAllNotifyMessageRead = async (data: any) => { |
||||||
|
return await request.put({ url: '/admin-api/system/notify-message/update-all-read', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取当前用户的最新站内信列表
|
||||||
|
export const getUnreadNotifyMessageList = async (params: any) => { |
||||||
|
return await request.get({ url: '/admin-api/system/notify-message/get-unread-list', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获得当前用户的未读站内信数量
|
||||||
|
export const getUnreadNotifyMessageCount = async (params: any) => { |
||||||
|
return await request.get({ url: '/admin-api/system/notify-message/get-unread-count', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取详情
|
||||||
|
export const getNotifyMessageDetail = async (id: number) => { |
||||||
|
return await request.get({ url: '/admin-api/system/notify-message/get', params: { id } }) |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface NotifyTemplateVO { |
||||||
|
id?: number |
||||||
|
name: string |
||||||
|
nickname: string |
||||||
|
code: string |
||||||
|
content: string |
||||||
|
type: number |
||||||
|
params: string |
||||||
|
status: number |
||||||
|
remark: string |
||||||
|
} |
||||||
|
|
||||||
|
export interface NotifySendReqVO { |
||||||
|
userId: number | null |
||||||
|
templateCode: string |
||||||
|
templateParams: Map<String, Object> |
||||||
|
} |
||||||
|
|
||||||
|
// 查询站内信模板列表
|
||||||
|
export const getNotifyTemplatePage = async (params: PageParam) => { |
||||||
|
return await request.get({ url: '/system/notify-template/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询站内信模板详情
|
||||||
|
export const getNotifyTemplate = async (id: number) => { |
||||||
|
return await request.get({ url: '/system/notify-template/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增站内信模板
|
||||||
|
export const createNotifyTemplate = async (data: NotifyTemplateVO) => { |
||||||
|
return await request.post({ url: '/system/notify-template/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改站内信模板
|
||||||
|
export const updateNotifyTemplate = async (data: NotifyTemplateVO) => { |
||||||
|
return await request.put({ url: '/system/notify-template/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除站内信模板
|
||||||
|
export const deleteNotifyTemplate = async (id: number) => { |
||||||
|
return await request.delete({ url: '/system/notify-template/delete?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 发送站内信
|
||||||
|
export const sendNotify = (data: NotifySendReqVO) => { |
||||||
|
return request.post({ url: '/system/notify-template/send-notify', data }) |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface PermissionAssignUserRoleReqVO { |
||||||
|
userId: number |
||||||
|
roleIds: number[] |
||||||
|
} |
||||||
|
|
||||||
|
export interface PermissionAssignRoleMenuReqVO { |
||||||
|
roleId: number |
||||||
|
menuIds: number[] |
||||||
|
} |
||||||
|
|
||||||
|
export interface PermissionAssignRoleDataScopeReqVO { |
||||||
|
roleId: number |
||||||
|
dataScope: number |
||||||
|
dataScopeDeptIds: number[] |
||||||
|
} |
||||||
|
|
||||||
|
// 查询角色拥有的菜单权限
|
||||||
|
export const getRoleMenuList = async (roleId: number) => { |
||||||
|
return await request.get({ url: '/admin-api/system/permission/list-role-menus?roleId=' + roleId }) |
||||||
|
} |
||||||
|
|
||||||
|
// 赋予角色菜单权限
|
||||||
|
export const assignRoleMenu = async (data: PermissionAssignRoleMenuReqVO) => { |
||||||
|
return await request.post({ url: '/admin-api/system/permission/assign-role-menu', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 赋予角色数据权限
|
||||||
|
export const assignRoleDataScope = async (data: PermissionAssignRoleDataScopeReqVO) => { |
||||||
|
return await request.post({ url: '/admin-api/system/permission/assign-role-data-scope', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询用户拥有的角色数组
|
||||||
|
export const getUserRoleList = async (userId: number) => { |
||||||
|
return await request.get({ url: '/admin-api/system/permission/list-user-roles?userId=' + userId }) |
||||||
|
} |
||||||
|
|
||||||
|
// 赋予用户角色
|
||||||
|
export const assignUserRole = async (data: PermissionAssignUserRoleReqVO) => { |
||||||
|
return await request.post({ url: '/admin-api/system/permission/assign-user-role', data }) |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface RoleVO { |
||||||
|
id: number |
||||||
|
name: string |
||||||
|
code: string |
||||||
|
sort: number |
||||||
|
status: number |
||||||
|
type: number |
||||||
|
dataScope: number |
||||||
|
dataScopeDeptIds: number[] |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
export interface UpdateStatusReqVO { |
||||||
|
id: number |
||||||
|
status: number |
||||||
|
} |
||||||
|
|
||||||
|
// 查询角色列表
|
||||||
|
export const getRolePage = async (params: PageParam) => { |
||||||
|
return await request.get({ url: '/admin-api/system/role/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询角色（精简)列表
|
||||||
|
export const getSimpleRoleList = async () => { |
||||||
|
return await request.get({ url: '/admin-api/system/role/list-all-simple' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询角色详情
|
||||||
|
export const getRole = async (id: number) => { |
||||||
|
return await request.get({ url: '/admin-api/system/role/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增角色
|
||||||
|
export const createRole = async (data: RoleVO) => { |
||||||
|
return await request.post({ url: '/admin-api/system/role/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改角色
|
||||||
|
export const updateRole = async (data: RoleVO) => { |
||||||
|
return await request.put({ url: '/admin-api/system/role/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除角色
|
||||||
|
export const deleteRole = async (id: number) => { |
||||||
|
return await request.delete({ url: '/admin-api/system/role/delete?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 角色用户
|
||||||
|
export const getRoleUsers = async (params) => { |
||||||
|
return await request.get({ url: '/admin-api/system/role/getUserByRole', params }) |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
// 通过key，查询内容
|
||||||
|
export const getConfigByConfigKey = (params) => { |
||||||
|
return request.get({ url: '/admin-api/crm/config/getConfigByConfigKey', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 保存配置项
|
||||||
|
export const updateConfig = (data) => { |
||||||
|
return request.put({ url: '/admin-api/crm/config/batchUpdateConfigValue', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 根据模块获取配置列表
|
||||||
|
export const getConfigList = (params) => { |
||||||
|
return request.get({ url: '/admin-api/crm/config/query', params }) |
||||||
|
} |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface UserVO { |
||||||
|
id: number |
||||||
|
username: string |
||||||
|
nickname: string |
||||||
|
deptId: number |
||||||
|
postIds: string[] |
||||||
|
email: string |
||||||
|
mobile: string |
||||||
|
sex: number |
||||||
|
avatar: string |
||||||
|
loginIp: string |
||||||
|
status: number |
||||||
|
remark: string |
||||||
|
loginDate: Date |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
// 查询用户管理列表
|
||||||
|
export const getUserPage = (params: PageParam) => { |
||||||
|
return request.get({ url: '/admin-api/system/user/page', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 查询用户详情
|
||||||
|
export const getUser = (id: number) => { |
||||||
|
return request.get({ url: '/admin-api/system/user/get?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增用户
|
||||||
|
export const createUser = (data: UserVO) => { |
||||||
|
return request.post({ url: '/admin-api/system/user/create', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改用户
|
||||||
|
export const updateUser = (data: UserVO) => { |
||||||
|
return request.put({ url: '/admin-api/system/user/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 删除用户
|
||||||
|
export const deleteUser = (id: number) => { |
||||||
|
return request.delete({ url: '/admin-api/system/user/delete?id=' + id }) |
||||||
|
} |
||||||
|
|
||||||
|
// 导出用户
|
||||||
|
export const exportUser = (params) => { |
||||||
|
return request.download({ url: '/admin-api/system/user/export', params }) |
||||||
|
} |
||||||
|
|
||||||
|
// 下载用户导入模板
|
||||||
|
export const importUserTemplate = () => { |
||||||
|
return request.download({ url: '/admin-api/system/user/get-import-template' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 用户密码重置
|
||||||
|
export const resetUserPwd = (id: number, password: string) => { |
||||||
|
const data = { |
||||||
|
id, |
||||||
|
password |
||||||
|
} |
||||||
|
return request.put({ url: '/admin-api/system/user/update-password', data: data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 用户状态修改
|
||||||
|
export const updateUserStatus = (id: number, status: number) => { |
||||||
|
const data = { |
||||||
|
id, |
||||||
|
status |
||||||
|
} |
||||||
|
return request.put({ url: '/admin-api/system/user/update-status', data: data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 获取用户精简信息列表
|
||||||
|
export const getSimpleUserList = (): Promise<UserVO[]> => { |
||||||
|
return request.get({ url: '/admin-api/system/user/list-all-simple' }) |
||||||
|
} |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
export interface ProfileDept { |
||||||
|
id: number |
||||||
|
name: string |
||||||
|
} |
||||||
|
export interface ProfileRole { |
||||||
|
id: number |
||||||
|
name: string |
||||||
|
} |
||||||
|
export interface ProfilePost { |
||||||
|
id: number |
||||||
|
name: string |
||||||
|
} |
||||||
|
export interface SocialUser { |
||||||
|
id: number |
||||||
|
type: number |
||||||
|
openid: string |
||||||
|
token: string |
||||||
|
rawTokenInfo: string |
||||||
|
nickname: string |
||||||
|
avatar: string |
||||||
|
rawUserInfo: string |
||||||
|
code: string |
||||||
|
state: string |
||||||
|
} |
||||||
|
export interface ProfileVO { |
||||||
|
id: number |
||||||
|
username: string |
||||||
|
nickname: string |
||||||
|
dept: ProfileDept |
||||||
|
roles: ProfileRole[] |
||||||
|
posts: ProfilePost[] |
||||||
|
socialUsers: SocialUser[] |
||||||
|
email: string |
||||||
|
mobile: string |
||||||
|
sex: number |
||||||
|
avatar: string |
||||||
|
status: number |
||||||
|
remark: string |
||||||
|
loginIp: string |
||||||
|
loginDate: Date |
||||||
|
createTime: Date |
||||||
|
} |
||||||
|
|
||||||
|
export interface UserProfileUpdateReqVO { |
||||||
|
nickname: string |
||||||
|
email: string |
||||||
|
mobile: string |
||||||
|
sex: number |
||||||
|
} |
||||||
|
|
||||||
|
// 查询用户个人信息
|
||||||
|
export const getUserProfile = () => { |
||||||
|
return request.get({ url: '/admin-api/system/user/profile/get' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 修改用户个人信息
|
||||||
|
export const updateUserProfile = (data: UserProfileUpdateReqVO) => { |
||||||
|
return request.put({ url: '/admin-api/system/user/profile/update', data }) |
||||||
|
} |
||||||
|
|
||||||
|
// 用户密码重置
|
||||||
|
export const updateUserPassword = (oldPassword: string, newPassword: string) => { |
||||||
|
return request.put({ |
||||||
|
url: '/admin-api/system/user/profile/update-password', |
||||||
|
data: { |
||||||
|
oldPassword: oldPassword, |
||||||
|
newPassword: newPassword |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 用户头像上传
|
||||||
|
export const uploadAvatar = (data) => { |
||||||
|
return request.upload({ url: '/admin-api/system/user/profile/update-avatar', data: data }) |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import request from '@/config/axios' |
||||||
|
|
||||||
|
// 社交绑定，使用 code 授权码
|
||||||
|
export const socialBind = (type, code, state) => { |
||||||
|
return request.post({ |
||||||
|
url: '/admin-api/system/social-user/bind', |
||||||
|
data: { |
||||||
|
type, |
||||||
|
code, |
||||||
|
state |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 取消社交绑定
|
||||||
|
export const socialUnbind = (type, openid) => { |
||||||
|
return request.delete({ |
||||||
|
url: '/admin-api/system/social-user/unbind', |
||||||
|
data: { |
||||||
|
type, |
||||||
|
openid |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 社交授权的跳转
|
||||||
|
export const socialAuthRedirect = (type, redirectUri) => { |
||||||
|
return request.get({ |
||||||
|
url: '/admin-api/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri |
||||||
|
}) |
||||||
|
} |
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 309 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 669 B |
|
After Width: | Height: | Size: 335 B |
|
After Width: | Height: | Size: 731 B |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,3 @@ |
|||||||
|
import Backtop from './src/Backtop.vue' |
||||||
|
|
||||||
|
export { Backtop } |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<script lang="ts" name="BackTop" setup> |
||||||
|
import { ElBacktop } from 'element-plus' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
|
||||||
|
const { getPrefixCls, variables } = useDesign() |
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('backtop') |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ElBacktop |
||||||
|
:class="`${prefixCls}-backtop`" |
||||||
|
:target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`" |
||||||
|
/> |
||||||
|
</template> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import ConfigGlobal from './src/ConfigGlobal.vue' |
||||||
|
|
||||||
|
export { ConfigGlobal } |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
<script lang="ts" name="ConfigGlobal" setup> |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { useLocaleStore } from '@/store/modules/locale' |
||||||
|
import { useAppStore } from '@/store/modules/app' |
||||||
|
import { setCssVar } from '@/utils' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { ElementPlusSize } from '@/types/elementPlus' |
||||||
|
import { useWindowSize } from '@vueuse/core' |
||||||
|
|
||||||
|
const { variables } = useDesign() |
||||||
|
|
||||||
|
const appStore = useAppStore() |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
size: propTypes.oneOf<ElementPlusSize>(['default', 'small', 'large']).def('default') |
||||||
|
}) |
||||||
|
|
||||||
|
provide('configGlobal', props) |
||||||
|
|
||||||
|
// 初始化所有主题色 |
||||||
|
onMounted(() => { |
||||||
|
appStore.setCssVarTheme() |
||||||
|
}) |
||||||
|
|
||||||
|
const { width } = useWindowSize() |
||||||
|
|
||||||
|
// 监听窗口变化 |
||||||
|
watch( |
||||||
|
() => width.value, |
||||||
|
(width: number) => { |
||||||
|
if (width < 768) { |
||||||
|
!appStore.getMobile ? appStore.setMobile(true) : undefined |
||||||
|
setCssVar('--left-menu-min-width', '0') |
||||||
|
appStore.setCollapse(true) |
||||||
|
appStore.getLayout !== 'classic' ? appStore.setLayout('classic') : undefined |
||||||
|
} else { |
||||||
|
appStore.getMobile ? appStore.setMobile(false) : undefined |
||||||
|
setCssVar('--left-menu-min-width', '64px') |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 多语言相关 |
||||||
|
const localeStore = useLocaleStore() |
||||||
|
|
||||||
|
const currentLocale = computed(() => localeStore.currentLocale) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ElConfigProvider |
||||||
|
:locale="currentLocale.elLocale" |
||||||
|
:message="{ max: 1 }" |
||||||
|
:namespace="variables.elNamespace" |
||||||
|
:size="size" |
||||||
|
> |
||||||
|
<slot></slot> |
||||||
|
</ElConfigProvider> |
||||||
|
</template> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import ContentDetailWrap from './src/ContentDetailWrap.vue' |
||||||
|
|
||||||
|
export { ContentDetailWrap } |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<script lang="ts" name="ContentDetailWrap" setup> |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('content-detail-wrap') |
||||||
|
|
||||||
|
defineProps({ |
||||||
|
title: propTypes.string.def(''), |
||||||
|
message: propTypes.string.def('') |
||||||
|
}) |
||||||
|
const emit = defineEmits(['back']) |
||||||
|
const offset = ref(85) |
||||||
|
const contentDetailWrap = ref() |
||||||
|
onMounted(() => { |
||||||
|
offset.value = contentDetailWrap.value.getBoundingClientRect().top |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div ref="contentDetailWrap" :class="[`${prefixCls}-container`]"> |
||||||
|
<Sticky :offset="offset"> |
||||||
|
<div |
||||||
|
:class="[ |
||||||
|
`${prefixCls}-header`, |
||||||
|
'flex border-bottom-1 h-50px items-center text-center pr-10px' |
||||||
|
]" |
||||||
|
> |
||||||
|
<div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']"> |
||||||
|
<ElButton @click="emit('back')"> |
||||||
|
<Icon class="mr-5px" icon="ep:arrow-left" /> |
||||||
|
{{ t('common.back') }} |
||||||
|
</ElButton> |
||||||
|
</div> |
||||||
|
<div :class="[`${prefixCls}-header__title`, 'flex flex-1 justify-center']"> |
||||||
|
<slot name="title"> |
||||||
|
<label class="text-16px font-700">{{ title }}</label> |
||||||
|
</slot> |
||||||
|
</div> |
||||||
|
<div :class="[`${prefixCls}-header__right`, 'flex pl-10px pr-10px']"> |
||||||
|
<slot name="right"></slot> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Sticky> |
||||||
|
<div style="padding: var(--app-content-padding)"> |
||||||
|
<ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never"> |
||||||
|
<div> |
||||||
|
<slot></slot> |
||||||
|
</div> |
||||||
|
</ElCard> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import ContentWrap from './src/ContentWrap.vue' |
||||||
|
|
||||||
|
export { ContentWrap } |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
<script lang="ts" name="ContentWrap" setup> |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('content-wrap') |
||||||
|
|
||||||
|
defineProps({ |
||||||
|
title: propTypes.string.def(''), |
||||||
|
message: propTypes.string.def('') |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ElCard :class="[prefixCls, 'mb-15px']" shadow="never"> |
||||||
|
<template v-if="title" #header> |
||||||
|
<div class="flex items-center"> |
||||||
|
<span class="text-16px font-700">{{ title }}</span> |
||||||
|
<ElTooltip v-if="message" effect="dark" placement="right"> |
||||||
|
<template #content> |
||||||
|
<div class="max-w-200px">{{ message }}</div> |
||||||
|
</template> |
||||||
|
<Icon :size="14" class="ml-5px" icon="ep:question-filled" /> |
||||||
|
</ElTooltip> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div> |
||||||
|
<slot></slot> |
||||||
|
</div> |
||||||
|
</ElCard> |
||||||
|
</template> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import CountTo from './src/CountTo.vue' |
||||||
|
|
||||||
|
export { CountTo } |
||||||
@ -0,0 +1,180 @@ |
|||||||
|
<script lang="ts" name="CountTo" setup> |
||||||
|
import { PropType } from 'vue' |
||||||
|
import { isNumber } from '@/utils/is' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('count-to') |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
startVal: propTypes.number.def(0), |
||||||
|
endVal: propTypes.number.def(2021), |
||||||
|
duration: propTypes.number.def(3000), |
||||||
|
autoplay: propTypes.bool.def(true), |
||||||
|
decimals: propTypes.number.validate((value: number) => value >= 0).def(0), |
||||||
|
decimal: propTypes.string.def('.'), |
||||||
|
separator: propTypes.string.def(','), |
||||||
|
prefix: propTypes.string.def(''), |
||||||
|
suffix: propTypes.string.def(''), |
||||||
|
useEasing: propTypes.bool.def(true), |
||||||
|
easingFn: { |
||||||
|
type: Function as PropType<(t: number, b: number, c: number, d: number) => number>, |
||||||
|
default(t: number, b: number, c: number, d: number) { |
||||||
|
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['mounted', 'callback']) |
||||||
|
|
||||||
|
const formatNumber = (num: number | string) => { |
||||||
|
const { decimals, decimal, separator, suffix, prefix } = props |
||||||
|
num = Number(num).toFixed(decimals) |
||||||
|
num += '' |
||||||
|
const x = num.split('.') |
||||||
|
let x1 = x[0] |
||||||
|
const x2 = x.length > 1 ? decimal + x[1] : '' |
||||||
|
const rgx = /(\d+)(\d{3})/ |
||||||
|
if (separator && !isNumber(separator)) { |
||||||
|
while (rgx.test(x1)) { |
||||||
|
x1 = x1.replace(rgx, '$1' + separator + '$2') |
||||||
|
} |
||||||
|
} |
||||||
|
return prefix + x1 + x2 + suffix |
||||||
|
} |
||||||
|
|
||||||
|
const state = reactive<{ |
||||||
|
localStartVal: number |
||||||
|
printVal: number | null |
||||||
|
displayValue: string |
||||||
|
paused: boolean |
||||||
|
localDuration: number | null |
||||||
|
startTime: number | null |
||||||
|
timestamp: number | null |
||||||
|
rAF: any |
||||||
|
remaining: number | null |
||||||
|
}>({ |
||||||
|
localStartVal: props.startVal, |
||||||
|
displayValue: formatNumber(props.startVal), |
||||||
|
printVal: null, |
||||||
|
paused: false, |
||||||
|
localDuration: props.duration, |
||||||
|
startTime: null, |
||||||
|
timestamp: null, |
||||||
|
remaining: null, |
||||||
|
rAF: null |
||||||
|
}) |
||||||
|
|
||||||
|
const displayValue = toRef(state, 'displayValue') |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
if (props.autoplay) { |
||||||
|
start() |
||||||
|
} |
||||||
|
emit('mounted') |
||||||
|
}) |
||||||
|
|
||||||
|
const getCountDown = computed(() => { |
||||||
|
return props.startVal > props.endVal |
||||||
|
}) |
||||||
|
|
||||||
|
watch([() => props.startVal, () => props.endVal], () => { |
||||||
|
if (props.autoplay) { |
||||||
|
start() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const start = () => { |
||||||
|
const { startVal, duration } = props |
||||||
|
state.localStartVal = startVal |
||||||
|
state.startTime = null |
||||||
|
state.localDuration = duration |
||||||
|
state.paused = false |
||||||
|
state.rAF = requestAnimationFrame(count) |
||||||
|
} |
||||||
|
|
||||||
|
const pauseResume = () => { |
||||||
|
if (state.paused) { |
||||||
|
resume() |
||||||
|
state.paused = false |
||||||
|
} else { |
||||||
|
pause() |
||||||
|
state.paused = true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const pause = () => { |
||||||
|
cancelAnimationFrame(state.rAF) |
||||||
|
} |
||||||
|
|
||||||
|
const resume = () => { |
||||||
|
state.startTime = null |
||||||
|
state.localDuration = +(state.remaining as number) |
||||||
|
state.localStartVal = +(state.printVal as number) |
||||||
|
requestAnimationFrame(count) |
||||||
|
} |
||||||
|
|
||||||
|
const reset = () => { |
||||||
|
state.startTime = null |
||||||
|
cancelAnimationFrame(state.rAF) |
||||||
|
state.displayValue = formatNumber(props.startVal) |
||||||
|
} |
||||||
|
|
||||||
|
const count = (timestamp: number) => { |
||||||
|
const { useEasing, easingFn, endVal } = props |
||||||
|
if (!state.startTime) state.startTime = timestamp |
||||||
|
state.timestamp = timestamp |
||||||
|
const progress = timestamp - state.startTime |
||||||
|
state.remaining = (state.localDuration as number) - progress |
||||||
|
if (useEasing) { |
||||||
|
if (unref(getCountDown)) { |
||||||
|
state.printVal = |
||||||
|
state.localStartVal - |
||||||
|
easingFn(progress, 0, state.localStartVal - endVal, state.localDuration as number) |
||||||
|
} else { |
||||||
|
state.printVal = easingFn( |
||||||
|
progress, |
||||||
|
state.localStartVal, |
||||||
|
endVal - state.localStartVal, |
||||||
|
state.localDuration as number |
||||||
|
) |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (unref(getCountDown)) { |
||||||
|
state.printVal = |
||||||
|
state.localStartVal - |
||||||
|
(state.localStartVal - endVal) * (progress / (state.localDuration as number)) |
||||||
|
} else { |
||||||
|
state.printVal = |
||||||
|
state.localStartVal + |
||||||
|
(endVal - state.localStartVal) * (progress / (state.localDuration as number)) |
||||||
|
} |
||||||
|
} |
||||||
|
if (unref(getCountDown)) { |
||||||
|
state.printVal = state.printVal < endVal ? endVal : state.printVal |
||||||
|
} else { |
||||||
|
state.printVal = state.printVal > endVal ? endVal : state.printVal |
||||||
|
} |
||||||
|
state.displayValue = formatNumber(state.printVal!) |
||||||
|
if (progress < (state.localDuration as number)) { |
||||||
|
state.rAF = requestAnimationFrame(count) |
||||||
|
} else { |
||||||
|
emit('callback') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
pauseResume, |
||||||
|
reset, |
||||||
|
start, |
||||||
|
pause |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<span :class="prefixCls"> |
||||||
|
{{ displayValue }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import Crontab from './src/Crontab.vue' |
||||||
|
export { Crontab } |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,4 @@ |
|||||||
|
import CropperImage from './src/Cropper.vue' |
||||||
|
import CropperAvatar from './src/CropperAvatar.vue' |
||||||
|
|
||||||
|
export { CropperImage, CropperAvatar } |
||||||
@ -0,0 +1,257 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<Dialog |
||||||
|
v-model="dialogVisible" |
||||||
|
:canFullscreen="false" |
||||||
|
:title="t('cropper.modalTitle')" |
||||||
|
maxHeight="380px" |
||||||
|
width="800px" |
||||||
|
> |
||||||
|
<div :class="prefixCls"> |
||||||
|
<div :class="`${prefixCls}-left`"> |
||||||
|
<div :class="`${prefixCls}-cropper`"> |
||||||
|
<CropperImage |
||||||
|
v-if="src" |
||||||
|
:circled="circled" |
||||||
|
:src="src" |
||||||
|
height="300px" |
||||||
|
@cropend="handleCropend" |
||||||
|
@ready="handleReady" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div :class="`${prefixCls}-toolbar`"> |
||||||
|
<el-upload :beforeUpload="handleBeforeUpload" :fileList="[]" accept="image/*"> |
||||||
|
<el-tooltip :content="t('cropper.selectImage')" placement="bottom"> |
||||||
|
<XButton preIcon="ant-design:upload-outlined" type="primary" /> |
||||||
|
</el-tooltip> |
||||||
|
</el-upload> |
||||||
|
<el-space> |
||||||
|
<el-tooltip :content="t('cropper.btn_reset')" placement="bottom"> |
||||||
|
<XButton |
||||||
|
:disabled="!src" |
||||||
|
preIcon="ant-design:reload-outlined" |
||||||
|
size="small" |
||||||
|
type="primary" |
||||||
|
@click="handlerToolbar('reset')" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip :content="t('cropper.btn_rotate_left')" placement="bottom"> |
||||||
|
<XButton |
||||||
|
:disabled="!src" |
||||||
|
preIcon="ant-design:rotate-left-outlined" |
||||||
|
size="small" |
||||||
|
type="primary" |
||||||
|
@click="handlerToolbar('rotate', -45)" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip :content="t('cropper.btn_rotate_right')" placement="bottom"> |
||||||
|
<XButton |
||||||
|
:disabled="!src" |
||||||
|
preIcon="ant-design:rotate-right-outlined" |
||||||
|
size="small" |
||||||
|
type="primary" |
||||||
|
@click="handlerToolbar('rotate', 45)" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip :content="t('cropper.btn_scale_x')" placement="bottom"> |
||||||
|
<XButton |
||||||
|
:disabled="!src" |
||||||
|
preIcon="vaadin:arrows-long-h" |
||||||
|
size="small" |
||||||
|
type="primary" |
||||||
|
@click="handlerToolbar('scaleX')" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip :content="t('cropper.btn_scale_y')" placement="bottom"> |
||||||
|
<XButton |
||||||
|
:disabled="!src" |
||||||
|
preIcon="vaadin:arrows-long-v" |
||||||
|
size="small" |
||||||
|
type="primary" |
||||||
|
@click="handlerToolbar('scaleY')" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip :content="t('cropper.btn_zoom_in')" placement="bottom"> |
||||||
|
<XButton |
||||||
|
:disabled="!src" |
||||||
|
preIcon="ant-design:zoom-in-outlined" |
||||||
|
size="small" |
||||||
|
type="primary" |
||||||
|
@click="handlerToolbar('zoom', 0.1)" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
<el-tooltip :content="t('cropper.btn_zoom_out')" placement="bottom"> |
||||||
|
<XButton |
||||||
|
:disabled="!src" |
||||||
|
preIcon="ant-design:zoom-out-outlined" |
||||||
|
size="small" |
||||||
|
type="primary" |
||||||
|
@click="handlerToolbar('zoom', -0.1)" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
</el-space> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div :class="`${prefixCls}-right`"> |
||||||
|
<div :class="`${prefixCls}-preview`"> |
||||||
|
<img v-if="previewSource" :alt="t('cropper.preview')" :src="previewSource" /> |
||||||
|
</div> |
||||||
|
<template v-if="previewSource"> |
||||||
|
<div :class="`${prefixCls}-group`"> |
||||||
|
<el-avatar :src="previewSource" size="large" /> |
||||||
|
<el-avatar :size="48" :src="previewSource" /> |
||||||
|
<el-avatar :size="64" :src="previewSource" /> |
||||||
|
<el-avatar :size="80" :src="previewSource" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<template #footer> |
||||||
|
<el-button type="primary" @click="handleOk">{{ t('cropper.okText') }}</el-button> |
||||||
|
</template> |
||||||
|
</Dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script lang="ts" name="CopperModal" setup> |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { dataURLtoBlob } from '@/utils/filt' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import type { CropendResult, Cropper } from './types' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { CropperImage } from '@/components/Cropper' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
srcValue: propTypes.string.def(''), |
||||||
|
circled: propTypes.bool.def(true) |
||||||
|
}) |
||||||
|
const emit = defineEmits(['uploadSuccess']) |
||||||
|
const { t } = useI18n() |
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
const prefixCls = getPrefixCls('cropper-am') |
||||||
|
|
||||||
|
const src = ref(props.srcValue) |
||||||
|
const previewSource = ref('') |
||||||
|
const cropper = ref<Cropper>() |
||||||
|
const dialogVisible = ref(false) |
||||||
|
let filename = '' |
||||||
|
let scaleX = 1 |
||||||
|
let scaleY = 1 |
||||||
|
|
||||||
|
// Block upload |
||||||
|
function handleBeforeUpload(file: File) { |
||||||
|
const reader = new FileReader() |
||||||
|
reader.readAsDataURL(file) |
||||||
|
src.value = '' |
||||||
|
previewSource.value = '' |
||||||
|
reader.onload = function (e) { |
||||||
|
src.value = (e.target?.result as string) ?? '' |
||||||
|
filename = file.name |
||||||
|
} |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
function handleCropend({ imgBase64 }: CropendResult) { |
||||||
|
previewSource.value = imgBase64 |
||||||
|
} |
||||||
|
|
||||||
|
function handleReady(cropperInstance: Cropper) { |
||||||
|
cropper.value = cropperInstance |
||||||
|
} |
||||||
|
|
||||||
|
function handlerToolbar(event: string, arg?: number) { |
||||||
|
if (event === 'scaleX') { |
||||||
|
scaleX = arg = scaleX === -1 ? 1 : -1 |
||||||
|
} |
||||||
|
if (event === 'scaleY') { |
||||||
|
scaleY = arg = scaleY === -1 ? 1 : -1 |
||||||
|
} |
||||||
|
cropper?.value?.[event]?.(arg) |
||||||
|
} |
||||||
|
|
||||||
|
async function handleOk() { |
||||||
|
const blob = dataURLtoBlob(previewSource.value) |
||||||
|
emit('uploadSuccess', { source: previewSource.value, data: blob, filename: filename }) |
||||||
|
} |
||||||
|
|
||||||
|
function openModal() { |
||||||
|
dialogVisible.value = true |
||||||
|
} |
||||||
|
|
||||||
|
function closeModal() { |
||||||
|
dialogVisible.value = false |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ openModal, closeModal }) |
||||||
|
</script> |
||||||
|
<style lang="scss"> |
||||||
|
$prefix-cls: #{$namespace}-cropper-am; |
||||||
|
|
||||||
|
.#{$prefix-cls} { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
&-left, |
||||||
|
&-right { |
||||||
|
height: 340px; |
||||||
|
} |
||||||
|
|
||||||
|
&-left { |
||||||
|
width: 55%; |
||||||
|
} |
||||||
|
|
||||||
|
&-right { |
||||||
|
width: 45%; |
||||||
|
} |
||||||
|
|
||||||
|
&-cropper { |
||||||
|
height: 300px; |
||||||
|
background: #eee; |
||||||
|
background-image: linear-gradient( |
||||||
|
45deg, |
||||||
|
rgb(0 0 0 / 25%) 25%, |
||||||
|
transparent 0, |
||||||
|
transparent 75%, |
||||||
|
rgb(0 0 0 / 25%) 0 |
||||||
|
), |
||||||
|
linear-gradient( |
||||||
|
45deg, |
||||||
|
rgb(0 0 0 / 25%) 25%, |
||||||
|
transparent 0, |
||||||
|
transparent 75%, |
||||||
|
rgb(0 0 0 / 25%) 0 |
||||||
|
); |
||||||
|
background-position: 0 0, 12px 12px; |
||||||
|
background-size: 24px 24px; |
||||||
|
} |
||||||
|
|
||||||
|
&-toolbar { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
&-preview { |
||||||
|
width: 220px; |
||||||
|
height: 220px; |
||||||
|
margin: 0 auto; |
||||||
|
overflow: hidden; |
||||||
|
border: 1px solid; |
||||||
|
border-radius: 50%; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-group { |
||||||
|
display: flex; |
||||||
|
padding-top: 8px; |
||||||
|
margin-top: 8px; |
||||||
|
border-top: 1px solid; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,181 @@ |
|||||||
|
<template> |
||||||
|
<div :class="getClass" :style="getWrapperStyle"> |
||||||
|
<img |
||||||
|
v-show="isReady" |
||||||
|
ref="imgElRef" |
||||||
|
:alt="alt" |
||||||
|
:crossorigin="crossorigin" |
||||||
|
:src="src" |
||||||
|
:style="getImageStyle" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script lang="ts" name="Cropper" setup> |
||||||
|
import { CSSProperties, PropType } from 'vue' |
||||||
|
import Cropper from 'cropperjs' |
||||||
|
import 'cropperjs/dist/cropper.css' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { useDebounceFn } from '@vueuse/core' |
||||||
|
|
||||||
|
type Options = Cropper.Options |
||||||
|
|
||||||
|
const defaultOptions: Options = { |
||||||
|
aspectRatio: 1, |
||||||
|
zoomable: true, |
||||||
|
zoomOnTouch: true, |
||||||
|
zoomOnWheel: true, |
||||||
|
cropBoxMovable: true, |
||||||
|
cropBoxResizable: true, |
||||||
|
toggleDragModeOnDblclick: true, |
||||||
|
autoCrop: true, |
||||||
|
background: true, |
||||||
|
highlight: true, |
||||||
|
center: true, |
||||||
|
responsive: true, |
||||||
|
restore: true, |
||||||
|
checkCrossOrigin: true, |
||||||
|
checkOrientation: true, |
||||||
|
scalable: true, |
||||||
|
modal: true, |
||||||
|
guides: true, |
||||||
|
movable: true, |
||||||
|
rotatable: true |
||||||
|
} |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
src: propTypes.string.def(''), |
||||||
|
alt: propTypes.string.def(''), |
||||||
|
circled: propTypes.bool.def(false), |
||||||
|
realTimePreview: propTypes.bool.def(true), |
||||||
|
height: propTypes.string.def('360px'), |
||||||
|
crossorigin: { |
||||||
|
type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>, |
||||||
|
default: undefined |
||||||
|
}, |
||||||
|
imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) }, |
||||||
|
options: { type: Object as PropType<Options>, default: () => ({}) } |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['cropend', 'ready', 'cropendError']) |
||||||
|
const attrs = useAttrs() |
||||||
|
const imgElRef = ref<ElRef<HTMLImageElement>>() |
||||||
|
const cropper = ref<Nullable<Cropper>>() |
||||||
|
const isReady = ref(false) |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
const prefixCls = getPrefixCls('cropper-image') |
||||||
|
const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80) |
||||||
|
|
||||||
|
const getImageStyle = computed((): CSSProperties => { |
||||||
|
return { |
||||||
|
height: props.height, |
||||||
|
maxWidth: '100%', |
||||||
|
...props.imageStyle |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const getClass = computed(() => { |
||||||
|
return [ |
||||||
|
prefixCls, |
||||||
|
attrs.class, |
||||||
|
{ |
||||||
|
[`${prefixCls}--circled`]: props.circled |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
const getWrapperStyle = computed((): CSSProperties => { |
||||||
|
return { height: `${props.height}`.replace(/px/, '') + 'px' } |
||||||
|
}) |
||||||
|
|
||||||
|
onMounted(init) |
||||||
|
|
||||||
|
onUnmounted(() => { |
||||||
|
cropper.value?.destroy() |
||||||
|
}) |
||||||
|
|
||||||
|
async function init() { |
||||||
|
const imgEl = unref(imgElRef) |
||||||
|
if (!imgEl) { |
||||||
|
return |
||||||
|
} |
||||||
|
cropper.value = new Cropper(imgEl, { |
||||||
|
...defaultOptions, |
||||||
|
ready: () => { |
||||||
|
isReady.value = true |
||||||
|
realTimeCroppered() |
||||||
|
emit('ready', cropper.value) |
||||||
|
}, |
||||||
|
crop() { |
||||||
|
debounceRealTimeCroppered() |
||||||
|
}, |
||||||
|
zoom() { |
||||||
|
debounceRealTimeCroppered() |
||||||
|
}, |
||||||
|
cropmove() { |
||||||
|
debounceRealTimeCroppered() |
||||||
|
}, |
||||||
|
...props.options |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// Real-time display preview |
||||||
|
function realTimeCroppered() { |
||||||
|
props.realTimePreview && croppered() |
||||||
|
} |
||||||
|
|
||||||
|
// event: return base64 and width and height information after cropping |
||||||
|
function croppered() { |
||||||
|
if (!cropper.value) { |
||||||
|
return |
||||||
|
} |
||||||
|
let imgInfo = cropper.value.getData() |
||||||
|
const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas() |
||||||
|
canvas.toBlob((blob) => { |
||||||
|
if (!blob) { |
||||||
|
return |
||||||
|
} |
||||||
|
let fileReader: FileReader = new FileReader() |
||||||
|
fileReader.readAsDataURL(blob) |
||||||
|
fileReader.onloadend = (e) => { |
||||||
|
emit('cropend', { |
||||||
|
imgBase64: e.target?.result ?? '', |
||||||
|
imgInfo |
||||||
|
}) |
||||||
|
} |
||||||
|
fileReader.onerror = () => { |
||||||
|
emit('cropendError') |
||||||
|
} |
||||||
|
}, 'image/png') |
||||||
|
} |
||||||
|
|
||||||
|
// Get a circular picture canvas |
||||||
|
function getRoundedCanvas() { |
||||||
|
const sourceCanvas = cropper.value!.getCroppedCanvas() |
||||||
|
const canvas = document.createElement('canvas') |
||||||
|
const context = canvas.getContext('2d')! |
||||||
|
const width = sourceCanvas.width |
||||||
|
const height = sourceCanvas.height |
||||||
|
canvas.width = width |
||||||
|
canvas.height = height |
||||||
|
context.imageSmoothingEnabled = true |
||||||
|
context.drawImage(sourceCanvas, 0, 0, width, height) |
||||||
|
context.globalCompositeOperation = 'destination-in' |
||||||
|
context.beginPath() |
||||||
|
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true) |
||||||
|
context.fill() |
||||||
|
return canvas |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss"> |
||||||
|
$prefix-cls: #{$namespace}-cropper-image; |
||||||
|
|
||||||
|
.#{$prefix-cls} { |
||||||
|
&--circled { |
||||||
|
.cropper-view-box, |
||||||
|
.cropper-face { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,141 @@ |
|||||||
|
<template> |
||||||
|
<div class="user-info-head" @click="open()"> |
||||||
|
<img v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" /> |
||||||
|
<el-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" @click="open()"> |
||||||
|
{{ btnText ? btnText : t('cropper.selectImage') }} |
||||||
|
</el-button> |
||||||
|
<CopperModal |
||||||
|
ref="cropperModelRef" |
||||||
|
:srcValue="sourceValue" |
||||||
|
@upload-success="handleUploadSuccess" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script lang="ts" name="CropperAvatar" setup> |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
|
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import CopperModal from './CopperModal.vue' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
width: propTypes.string.def('200px'), |
||||||
|
value: propTypes.string.def(''), |
||||||
|
showBtn: propTypes.bool.def(true), |
||||||
|
btnText: propTypes.string.def('') |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['update:value', 'change']) |
||||||
|
const sourceValue = ref(props.value) |
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
const prefixCls = getPrefixCls('cropper-avatar') |
||||||
|
const message = useMessage() |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const cropperModelRef = ref() |
||||||
|
|
||||||
|
watchEffect(() => { |
||||||
|
sourceValue.value = props.value |
||||||
|
}) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => sourceValue.value, |
||||||
|
(v: string) => { |
||||||
|
emit('update:value', v) |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
function handleUploadSuccess({ source, data, filename }) { |
||||||
|
sourceValue.value = source |
||||||
|
emit('change', { source, data, filename }) |
||||||
|
message.success(t('cropper.uploadSuccess')) |
||||||
|
} |
||||||
|
|
||||||
|
function open() { |
||||||
|
cropperModelRef.value.openModal() |
||||||
|
} |
||||||
|
|
||||||
|
function close() { |
||||||
|
cropperModelRef.value.closeModal() |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
open, |
||||||
|
close |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
$prefix-cls: #{$namespace}--cropper-avatar; |
||||||
|
|
||||||
|
.#{$prefix-cls} { |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&-image-wrapper { |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
border: 1px solid; |
||||||
|
border-radius: 50%; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-image-mask { |
||||||
|
opacity: 0%; |
||||||
|
position: absolute; |
||||||
|
width: inherit; |
||||||
|
height: inherit; |
||||||
|
border-radius: inherit; |
||||||
|
border: inherit; |
||||||
|
background: rgb(0 0 0 / 40%); |
||||||
|
cursor: pointer; |
||||||
|
transition: opacity 0.4s; |
||||||
|
|
||||||
|
::v-deep(svg) { |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-image-mask:hover { |
||||||
|
opacity: 4000%; |
||||||
|
} |
||||||
|
|
||||||
|
&-upload-btn { |
||||||
|
margin: 10px auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.user-info-head { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.img-circle { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.img-lg { |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
} |
||||||
|
|
||||||
|
.user-info-head:hover:after { |
||||||
|
content: '+'; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
color: #eee; |
||||||
|
background: rgba(0, 0, 0, 0.5); |
||||||
|
font-size: 24px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
cursor: pointer; |
||||||
|
line-height: 110px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import type Cropper from 'cropperjs' |
||||||
|
|
||||||
|
export interface CropendResult { |
||||||
|
imgBase64: string |
||||||
|
imgInfo: Cropper.Data |
||||||
|
} |
||||||
|
|
||||||
|
export type { Cropper } |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import Descriptions from './src/Descriptions.vue' |
||||||
|
|
||||||
|
export { Descriptions } |
||||||
@ -0,0 +1,172 @@ |
|||||||
|
<script lang="ts" name="Descriptions" setup> |
||||||
|
import { PropType } from 'vue' |
||||||
|
import dayjs from 'dayjs' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { useAppStore } from '@/store/modules/app' |
||||||
|
import { DescriptionsSchema } from '@/types/descriptions' |
||||||
|
|
||||||
|
const appStore = useAppStore() |
||||||
|
|
||||||
|
const mobile = computed(() => appStore.getMobile) |
||||||
|
|
||||||
|
const attrs = useAttrs() |
||||||
|
|
||||||
|
const slots = useSlots() |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
title: propTypes.string.def(''), |
||||||
|
message: propTypes.string.def(''), |
||||||
|
collapse: propTypes.bool.def(true), |
||||||
|
columns: propTypes.number.def(1), |
||||||
|
labelWidth: propTypes.string.def('100px'), |
||||||
|
schema: { |
||||||
|
type: Array as PropType<DescriptionsSchema[]>, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
data: { |
||||||
|
type: Object as PropType<any>, |
||||||
|
default: () => ({}) |
||||||
|
}, |
||||||
|
defaultShow: propTypes.bool.def(true) |
||||||
|
}) |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('descriptions') |
||||||
|
|
||||||
|
const getBindValue = computed(() => { |
||||||
|
const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class'] |
||||||
|
const obj = { ...attrs, ...props } |
||||||
|
for (const key in obj) { |
||||||
|
if (delArr.indexOf(key) !== -1) { |
||||||
|
delete obj[key] |
||||||
|
} |
||||||
|
} |
||||||
|
return obj |
||||||
|
}) |
||||||
|
|
||||||
|
const getBindItemValue = (item: DescriptionsSchema) => { |
||||||
|
const delArr: string[] = ['field'] |
||||||
|
const obj = { ...item } |
||||||
|
for (const key in obj) { |
||||||
|
if (delArr.indexOf(key) !== -1) { |
||||||
|
delete obj[key] |
||||||
|
} |
||||||
|
} |
||||||
|
return obj |
||||||
|
} |
||||||
|
|
||||||
|
// 折叠 |
||||||
|
const show = ref(props.defaultShow) |
||||||
|
|
||||||
|
const toggleClick = () => { |
||||||
|
if (props.collapse) { |
||||||
|
show.value = !unref(show) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
:class="[ |
||||||
|
prefixCls, |
||||||
|
'bg-[var(--el-color-white)] dark:(bg-[var(--el-bg-color)] border-[var(--el-border-color)] border-1px)' |
||||||
|
]" |
||||||
|
> |
||||||
|
<div |
||||||
|
v-if="title" |
||||||
|
:class="[ |
||||||
|
`${prefixCls}-header`, |
||||||
|
'h-40px flex justify-between items-center border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]' |
||||||
|
]" |
||||||
|
@click="toggleClick" |
||||||
|
> |
||||||
|
<div :class="[`${prefixCls}-header__title`, 'relative font-18px font-bold ml-10px']"> |
||||||
|
<div class="flex items-center"> |
||||||
|
{{ title }} |
||||||
|
<ElTooltip v-if="message" :content="message" placement="right"> |
||||||
|
<Icon class="ml-5px" icon="ep:warning" /> |
||||||
|
</ElTooltip> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Icon v-if="collapse" :icon="show ? 'ep:arrow-down' : 'ep:arrow-up'" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ElCollapseTransition> |
||||||
|
<div v-show="show" :class="[`${prefixCls}-content`, 'p-10px']"> |
||||||
|
<ElDescriptions |
||||||
|
:column="props.columns" |
||||||
|
:direction="mobile ? 'vertical' : 'horizontal'" |
||||||
|
border |
||||||
|
v-bind="getBindValue" |
||||||
|
> |
||||||
|
<template v-if="slots['extra']" #extra> |
||||||
|
<slot name="extra"></slot> |
||||||
|
</template> |
||||||
|
<ElDescriptionsItem |
||||||
|
v-for="item in schema" |
||||||
|
:key="item.field" |
||||||
|
min-width="80" |
||||||
|
:span="item.span" |
||||||
|
label-class-name="desc-label" |
||||||
|
v-bind="getBindItemValue(item)" |
||||||
|
> |
||||||
|
<template #label> |
||||||
|
<slot |
||||||
|
:name="`${item.field}-label`" |
||||||
|
:row="{ |
||||||
|
label: item.label |
||||||
|
}" |
||||||
|
>{{ item.label }} |
||||||
|
</slot> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template #default> |
||||||
|
<slot v-if="item.dateFormat"> |
||||||
|
{{ |
||||||
|
data[item.field] !== null ? dayjs(data[item.field]).format(item.dateFormat) : '' |
||||||
|
}} |
||||||
|
</slot> |
||||||
|
<slot v-else-if="item.dictType"> |
||||||
|
<DictTag :type="item.dictType" :value="data[item.field] + ''" /> |
||||||
|
</slot> |
||||||
|
<slot v-else-if="item.isEditor"> |
||||||
|
<div v-if="data[item.field]" v-dompurify-html="data[item.field]"></div> |
||||||
|
</slot> |
||||||
|
<slot v-else :name="item.field" :row="data">{{ data[item.field] }}</slot> |
||||||
|
</template> |
||||||
|
</ElDescriptionsItem> |
||||||
|
</ElDescriptions> |
||||||
|
</div> |
||||||
|
</ElCollapseTransition> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
$prefix-cls: #{$namespace}-descriptions; |
||||||
|
|
||||||
|
.#{$prefix-cls}-header { |
||||||
|
&__title { |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
top: 3px; |
||||||
|
left: -10px; |
||||||
|
width: 4px; |
||||||
|
height: 70%; |
||||||
|
background: var(--el-color-primary); |
||||||
|
content: ''; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.#{$prefix-cls}-content { |
||||||
|
// :deep(.#{$elNamespace}-descriptions__cell) { |
||||||
|
// width: 0; |
||||||
|
// } |
||||||
|
|
||||||
|
:deep(.desc-label) { |
||||||
|
width: v-bind('labelWidth'); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import Dialog from './src/Dialog.vue' |
||||||
|
|
||||||
|
export { Dialog } |
||||||
@ -0,0 +1,126 @@ |
|||||||
|
<script lang="ts" name="Dialog" setup> |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { isNumber } from '@/utils/is' |
||||||
|
|
||||||
|
const slots = useSlots() |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
modelValue: propTypes.bool.def(false), |
||||||
|
title: propTypes.string.def('Dialog'), |
||||||
|
fullscreen: propTypes.bool.def(true), |
||||||
|
width: propTypes.oneOfType([String, Number]).def('40%'), |
||||||
|
scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度 |
||||||
|
maxHeight: propTypes.oneOfType([String, Number]).def('300px') |
||||||
|
}) |
||||||
|
|
||||||
|
const getBindValue = computed(() => { |
||||||
|
const delArr: string[] = ['fullscreen', 'title', 'maxHeight'] |
||||||
|
const attrs = useAttrs() |
||||||
|
const obj = { ...attrs, ...props } |
||||||
|
for (const key in obj) { |
||||||
|
if (delArr.indexOf(key) !== -1) { |
||||||
|
delete obj[key] |
||||||
|
} |
||||||
|
} |
||||||
|
return obj |
||||||
|
}) |
||||||
|
|
||||||
|
const isFullscreen = ref(false) |
||||||
|
|
||||||
|
const toggleFull = () => { |
||||||
|
isFullscreen.value = !unref(isFullscreen) |
||||||
|
} |
||||||
|
|
||||||
|
const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => isFullscreen.value, |
||||||
|
async (val: boolean) => { |
||||||
|
// 计算最大高度 |
||||||
|
await nextTick() |
||||||
|
if (val) { |
||||||
|
const windowHeight = document.documentElement.offsetHeight |
||||||
|
dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px` |
||||||
|
} else { |
||||||
|
dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
const dialogStyle = computed(() => { |
||||||
|
return { |
||||||
|
height: unref(dialogHeight) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['close']) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ElDialog |
||||||
|
:close-on-click-modal="false" |
||||||
|
:fullscreen="isFullscreen" |
||||||
|
:width="width" |
||||||
|
destroy-on-close |
||||||
|
draggable |
||||||
|
lock-scroll |
||||||
|
v-bind="getBindValue" |
||||||
|
@close="emit('close')" |
||||||
|
> |
||||||
|
<template #header> |
||||||
|
<div class="flex justify-between"> |
||||||
|
<slot name="title"> |
||||||
|
{{ title }} |
||||||
|
</slot> |
||||||
|
<Icon |
||||||
|
v-if="fullscreen" |
||||||
|
:icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" |
||||||
|
class="mr-22px cursor-pointer is-hover mt-2px z-10" |
||||||
|
color="var(--el-color-info)" |
||||||
|
@click="toggleFull" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<!-- 情况一：如果 scroll 为 true，说明开启滚动条 --> |
||||||
|
<ElScrollbar v-if="scroll" :style="dialogStyle"> |
||||||
|
<slot></slot> |
||||||
|
</ElScrollbar> |
||||||
|
<!-- 情况二：如果 scroll 为 false，说明关闭滚动条滚动条 --> |
||||||
|
<slot v-else></slot> |
||||||
|
|
||||||
|
<template v-if="slots.footer" #footer> |
||||||
|
<slot name="footer"></slot> |
||||||
|
</template> |
||||||
|
</ElDialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.#{$elNamespace}-dialog__header { |
||||||
|
margin-right: 0 !important; |
||||||
|
border-bottom: 1px solid var(--tags-view-border-color); |
||||||
|
} |
||||||
|
|
||||||
|
.#{$elNamespace}-dialog__footer { |
||||||
|
border-top: 1px solid var(--tags-view-border-color); |
||||||
|
} |
||||||
|
|
||||||
|
.is-hover { |
||||||
|
&:hover { |
||||||
|
color: var(--el-color-primary) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.dark { |
||||||
|
.#{$elNamespace}-dialog__header { |
||||||
|
border-bottom: 1px solid var(--el-border-color); |
||||||
|
} |
||||||
|
|
||||||
|
.#{$elNamespace}-dialog__footer { |
||||||
|
border-top: 1px solid var(--el-border-color); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import DictTag from './src/DictTag.vue' |
||||||
|
|
||||||
|
export { DictTag } |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
<script lang="tsx"> |
||||||
|
import { defineComponent, PropType, ref } from 'vue' |
||||||
|
import { isHexColor } from '@/utils/color' |
||||||
|
import { ElTag } from 'element-plus' |
||||||
|
import { DictDataType, getDictOptions } from '@/utils/dict' |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'DictTag', |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: String as PropType<string>, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: [String, Number, Boolean] as PropType<string | number | boolean>, |
||||||
|
required: true |
||||||
|
} |
||||||
|
}, |
||||||
|
setup(props) { |
||||||
|
const dictData = ref<DictDataType>() |
||||||
|
const getDictObj = (dictType: string, value: string) => { |
||||||
|
const dictOptions = getDictOptions(dictType) |
||||||
|
dictOptions.forEach((dict: DictDataType) => { |
||||||
|
if (dict.value === value) { |
||||||
|
if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') { |
||||||
|
dict.colorType = '' |
||||||
|
} |
||||||
|
dictData.value = dict |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
const rederDictTag = () => { |
||||||
|
if (!props.type) { |
||||||
|
return null |
||||||
|
} |
||||||
|
// 解决自定义字典标签值为零时标签不渲染的问题 |
||||||
|
if (props.value === undefined || props.value === null) { |
||||||
|
return null |
||||||
|
} |
||||||
|
getDictObj(props.type, props.value.toString()) |
||||||
|
// 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题 |
||||||
|
return ( |
||||||
|
<ElTag |
||||||
|
style={dictData.value?.cssClass ? 'color: #fff' : ''} |
||||||
|
type={dictData.value?.colorType} |
||||||
|
color={ |
||||||
|
dictData.value?.cssClass && isHexColor(dictData.value?.cssClass) |
||||||
|
? dictData.value?.cssClass |
||||||
|
: '' |
||||||
|
} |
||||||
|
disableTransitions={true} |
||||||
|
> |
||||||
|
{dictData.value?.label} |
||||||
|
</ElTag> |
||||||
|
) |
||||||
|
} |
||||||
|
return () => rederDictTag() |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
<template> |
||||||
|
<el-alert v-if="getEnable()" type="success" show-icon> |
||||||
|
<template #title> |
||||||
|
<div @click="goToUrl">{{ '【' + title + '】文档地址：' + url }}</div> |
||||||
|
</template> |
||||||
|
</el-alert> |
||||||
|
</template> |
||||||
|
<script setup lang="tsx" name="DocAlert"> |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
title: propTypes.string, |
||||||
|
url: propTypes.string |
||||||
|
}) |
||||||
|
|
||||||
|
/** 跳转 URL 链接 */ |
||||||
|
const goToUrl = () => { |
||||||
|
window.open(props.url) |
||||||
|
} |
||||||
|
|
||||||
|
/** 是否开启 */ |
||||||
|
const getEnable = () => { |
||||||
|
return import.meta.env.VITE_APP_TENANT_ENABLE === 'true' |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.el-alert--success.is-light { |
||||||
|
border: 1px solid green; |
||||||
|
margin-bottom: 10px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import Echart from './src/Echart.vue' |
||||||
|
|
||||||
|
export { Echart } |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
<script lang="ts" name="EChart" setup> |
||||||
|
import type { EChartsOption } from 'echarts' |
||||||
|
import echarts from '@/plugins/echarts' |
||||||
|
import { debounce } from 'lodash-es' |
||||||
|
import 'echarts-wordcloud' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { PropType } from 'vue' |
||||||
|
import { useAppStore } from '@/store/modules/app' |
||||||
|
import { isString } from '@/utils/is' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
|
||||||
|
const { getPrefixCls, variables } = useDesign() |
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('echart') |
||||||
|
|
||||||
|
const appStore = useAppStore() |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
options: { |
||||||
|
type: Object as PropType<EChartsOption>, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
width: propTypes.oneOfType([Number, String]).def(''), |
||||||
|
height: propTypes.oneOfType([Number, String]).def('500px') |
||||||
|
}) |
||||||
|
|
||||||
|
const isDark = computed(() => appStore.getIsDark) |
||||||
|
|
||||||
|
const theme = computed(() => { |
||||||
|
const echartTheme: boolean | string = unref(isDark) ? true : 'auto' |
||||||
|
|
||||||
|
return echartTheme |
||||||
|
}) |
||||||
|
|
||||||
|
const options = computed(() => { |
||||||
|
return Object.assign(props.options, { |
||||||
|
darkMode: unref(theme) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
const elRef = ref<ElRef>() |
||||||
|
|
||||||
|
let echartRef: Nullable<echarts.ECharts> = null |
||||||
|
|
||||||
|
const contentEl = ref<Element>() |
||||||
|
|
||||||
|
const styles = computed(() => { |
||||||
|
const width = isString(props.width) ? props.width : `${props.width}px` |
||||||
|
const height = isString(props.height) ? props.height : `${props.height}px` |
||||||
|
|
||||||
|
return { |
||||||
|
width, |
||||||
|
height |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const initChart = () => { |
||||||
|
if (unref(elRef) && props.options) { |
||||||
|
echartRef = echarts.init(unref(elRef) as HTMLElement) |
||||||
|
echartRef?.setOption(unref(options)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
watch( |
||||||
|
() => options.value, |
||||||
|
(options) => { |
||||||
|
if (echartRef) { |
||||||
|
echartRef?.setOption(options) |
||||||
|
resizeHandler() |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
deep: true |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
const resizeHandler = debounce(() => { |
||||||
|
if (echartRef) { |
||||||
|
echartRef.resize() |
||||||
|
} |
||||||
|
}, 100) |
||||||
|
|
||||||
|
const contentResizeHandler = async (e: TransitionEvent) => { |
||||||
|
if (e.propertyName === 'width') { |
||||||
|
resizeHandler() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
initChart() |
||||||
|
|
||||||
|
window.addEventListener('resize', resizeHandler) |
||||||
|
|
||||||
|
contentEl.value = document.getElementsByClassName(`${variables.namespace}-layout-content`)[0] |
||||||
|
unref(contentEl) && |
||||||
|
(unref(contentEl) as Element).addEventListener('transitionend', contentResizeHandler) |
||||||
|
}) |
||||||
|
|
||||||
|
onBeforeUnmount(() => { |
||||||
|
window.removeEventListener('resize', resizeHandler) |
||||||
|
unref(contentEl) && |
||||||
|
(unref(contentEl) as Element).removeEventListener('transitionend', contentResizeHandler) |
||||||
|
}) |
||||||
|
|
||||||
|
onActivated(() => { |
||||||
|
if (echartRef) { |
||||||
|
echartRef.resize() |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div> |
||||||
|
</template> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import Editor from './src/Editor.vue' |
||||||
|
import { IDomEditor } from '@wangeditor/editor' |
||||||
|
|
||||||
|
export interface EditorExpose { |
||||||
|
getEditorRef: () => Promise<IDomEditor> |
||||||
|
} |
||||||
|
|
||||||
|
export { Editor } |
||||||
@ -0,0 +1,280 @@ |
|||||||
|
<script lang="ts" name="Editor" setup> |
||||||
|
import { PropType } from 'vue' |
||||||
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' |
||||||
|
import { i18nChangeLanguage, IDomEditor, IEditorConfig } from '@wangeditor/editor' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { isNumber } from '@/utils/is' |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
import { useLocaleStore } from '@/store/modules/locale' |
||||||
|
import { getAccessToken, getTenantId, getAppId } from '@/utils/auth' |
||||||
|
|
||||||
|
type InsertFnType = (url: string, alt: string, href: string) => void |
||||||
|
|
||||||
|
const localeStore = useLocaleStore() |
||||||
|
|
||||||
|
const currentLocale = computed(() => localeStore.getCurrentLocale) |
||||||
|
|
||||||
|
i18nChangeLanguage(unref(currentLocale).lang) |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
editorId: propTypes.string.def('wangeEditor-1'), |
||||||
|
height: propTypes.oneOfType([Number, String]).def('40vh'), |
||||||
|
editorConfig: { |
||||||
|
type: Object as PropType<Partial<IEditorConfig>>, |
||||||
|
default: () => undefined |
||||||
|
}, |
||||||
|
readonly: propTypes.bool.def(false), |
||||||
|
modelValue: propTypes.string.def(''), |
||||||
|
toolbarConfig: { |
||||||
|
type: Object, |
||||||
|
default: () => ({ |
||||||
|
excludeKeys: [ |
||||||
|
'insertVideo', // 网络视频 |
||||||
|
'insertImage', // 网络图片 |
||||||
|
'insertLink', // 链接 |
||||||
|
'codeBlock', // 代码块 |
||||||
|
'headerSelect', // 标题 |
||||||
|
'blockquote', // 引用 |
||||||
|
'fontFamily', // 字体 |
||||||
|
'todo', // 代办 |
||||||
|
'group-indent', // 缩进 |
||||||
|
'emotion', // 表情 |
||||||
|
'undo', // 撤销 |
||||||
|
'redo', // 重做 |
||||||
|
'fullScreen' |
||||||
|
] |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['change', 'update:modelValue']) |
||||||
|
|
||||||
|
// 编辑器实例，必须用 shallowRef |
||||||
|
const editorRef = shallowRef<IDomEditor>() |
||||||
|
|
||||||
|
const valueHtml = ref('') |
||||||
|
|
||||||
|
watch( |
||||||
|
() => props.modelValue, |
||||||
|
(val: string) => { |
||||||
|
if (val === unref(valueHtml)) return |
||||||
|
valueHtml.value = val |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 监听 |
||||||
|
watch( |
||||||
|
() => valueHtml.value, |
||||||
|
(val: string) => { |
||||||
|
emit('update:modelValue', val) |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
const handleCreated = (editor: IDomEditor) => { |
||||||
|
editorRef.value = editor |
||||||
|
} |
||||||
|
|
||||||
|
// 编辑器配置 |
||||||
|
const editorConfig = computed((): IEditorConfig => { |
||||||
|
return Object.assign( |
||||||
|
{ |
||||||
|
placeholder: '请输入内容...', |
||||||
|
readOnly: props.readonly, |
||||||
|
customAlert: (s: string, t: string) => { |
||||||
|
switch (t) { |
||||||
|
case 'success': |
||||||
|
ElMessage.success(s) |
||||||
|
break |
||||||
|
case 'info': |
||||||
|
ElMessage.info(s) |
||||||
|
break |
||||||
|
case 'warning': |
||||||
|
ElMessage.warning(s) |
||||||
|
break |
||||||
|
case 'error': |
||||||
|
ElMessage.error(s) |
||||||
|
break |
||||||
|
default: |
||||||
|
ElMessage.info(s) |
||||||
|
break |
||||||
|
} |
||||||
|
}, |
||||||
|
autoFocus: false, |
||||||
|
scroll: true, |
||||||
|
MENU_CONF: { |
||||||
|
['uploadImage']: { |
||||||
|
server: import.meta.env.VITE_UPLOAD_URL, |
||||||
|
// 单个文件的最大体积限制，默认为 2M |
||||||
|
maxFileSize: 5 * 1024 * 1024, |
||||||
|
// 最多可上传几个文件，默认为 100 |
||||||
|
maxNumberOfFiles: 10, |
||||||
|
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 [] |
||||||
|
allowedFileTypes: ['image/*'], |
||||||
|
|
||||||
|
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。 |
||||||
|
meta: { updateSupport: 0 }, |
||||||
|
// 将 meta 拼接到 url 参数中，默认 false |
||||||
|
metaWithUrl: true, |
||||||
|
|
||||||
|
// 自定义增加 http header |
||||||
|
headers: { |
||||||
|
Accept: '*', |
||||||
|
Authorization: 'Bearer ' + getAccessToken(), |
||||||
|
'tenant-id': getTenantId(), |
||||||
|
'instance-id': getAppId() |
||||||
|
}, |
||||||
|
|
||||||
|
// 跨域是否传递 cookie ，默认为 false |
||||||
|
withCredentials: true, |
||||||
|
|
||||||
|
// 超时时间，默认为 10 秒 |
||||||
|
timeout: 5 * 1000, // 5 秒 |
||||||
|
|
||||||
|
// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image |
||||||
|
fieldName: 'file', |
||||||
|
|
||||||
|
// 上传之前触发 |
||||||
|
onBeforeUpload(file: File) { |
||||||
|
console.log(file) |
||||||
|
return file |
||||||
|
}, |
||||||
|
// 上传进度的回调函数 |
||||||
|
onProgress(progress: number) { |
||||||
|
// progress 是 0-100 的数字 |
||||||
|
console.log('progress', progress) |
||||||
|
}, |
||||||
|
onSuccess(file: File, res: any) { |
||||||
|
console.log('onSuccess', file, res) |
||||||
|
}, |
||||||
|
onFailed(file: File, res: any) { |
||||||
|
alert(res.message) |
||||||
|
console.log('onFailed', file, res) |
||||||
|
}, |
||||||
|
onError(file: File, err: any, res: any) { |
||||||
|
alert(err.message) |
||||||
|
console.error('onError', file, err, res) |
||||||
|
}, |
||||||
|
// 自定义插入图片 |
||||||
|
customInsert(res: any, insertFn: InsertFnType) { |
||||||
|
insertFn(res.data, 'image', res.data) |
||||||
|
} |
||||||
|
}, |
||||||
|
['uploadVideo']: { |
||||||
|
server: import.meta.env.VITE_UPLOAD_URL, |
||||||
|
// 单个文件的最大体积限制，默认为 2M |
||||||
|
maxFileSize: 100 * 1024 * 1024, |
||||||
|
// 最多可上传几个文件，默认为 100 |
||||||
|
maxNumberOfFiles: 10, |
||||||
|
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 [] |
||||||
|
allowedFileTypes: ['video/*'], |
||||||
|
|
||||||
|
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。 |
||||||
|
meta: { updateSupport: 0 }, |
||||||
|
// 将 meta 拼接到 url 参数中，默认 false |
||||||
|
metaWithUrl: true, |
||||||
|
|
||||||
|
// 自定义增加 http header |
||||||
|
headers: { |
||||||
|
Accept: '*', |
||||||
|
Authorization: 'Bearer ' + getAccessToken(), |
||||||
|
'tenant-id': getTenantId(), |
||||||
|
'instance-id': getAppId() |
||||||
|
}, |
||||||
|
|
||||||
|
// 跨域是否传递 cookie ，默认为 false |
||||||
|
withCredentials: true, |
||||||
|
|
||||||
|
// 超时时间，默认为 10 秒 |
||||||
|
timeout: 10 * 1000, // 5 秒 |
||||||
|
|
||||||
|
// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image |
||||||
|
fieldName: 'file', |
||||||
|
|
||||||
|
// 上传之前触发 |
||||||
|
onBeforeUpload(file: File) { |
||||||
|
console.log(file) |
||||||
|
return file |
||||||
|
}, |
||||||
|
// 上传进度的回调函数 |
||||||
|
onProgress(progress: number) { |
||||||
|
// progress 是 0-100 的数字 |
||||||
|
console.log('progress', progress) |
||||||
|
}, |
||||||
|
onSuccess(file: File, res: any) { |
||||||
|
console.log('onSuccess', file, res) |
||||||
|
}, |
||||||
|
onFailed(file: File, res: any) { |
||||||
|
alert(res.message) |
||||||
|
console.log('onFailed', file, res) |
||||||
|
}, |
||||||
|
onError(file: File, err: any, res: any) { |
||||||
|
alert(err.message) |
||||||
|
console.error('onError', file, err, res) |
||||||
|
}, |
||||||
|
// 自定义插入图片 |
||||||
|
customInsert(res: any, insertFn: InsertFnType) { |
||||||
|
insertFn(res.data, 'video', res.data) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
uploadImgShowBase64: true |
||||||
|
}, |
||||||
|
props.editorConfig || {} |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
const editorStyle = computed(() => { |
||||||
|
return { |
||||||
|
height: isNumber(props.height) ? `${props.height}px` : props.height |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// 回调函数 |
||||||
|
const handleChange = (editor: IDomEditor) => { |
||||||
|
emit('change', editor) |
||||||
|
} |
||||||
|
|
||||||
|
// 组件销毁时，及时销毁编辑器 |
||||||
|
onBeforeUnmount(() => { |
||||||
|
const editor = unref(editorRef.value) |
||||||
|
if (editor === null) return |
||||||
|
|
||||||
|
// 销毁，并移除 editor |
||||||
|
editor?.destroy() |
||||||
|
}) |
||||||
|
|
||||||
|
const getEditorRef = async (): Promise<IDomEditor> => { |
||||||
|
await nextTick() |
||||||
|
return unref(editorRef.value) as IDomEditor |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
getEditorRef |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="border-1 border-solid border-[var(--tags-view-border-color)] z-99"> |
||||||
|
<!-- 工具栏 --> |
||||||
|
<Toolbar |
||||||
|
:editor="editorRef" |
||||||
|
:editorId="editorId" |
||||||
|
:defaultConfig="toolbarConfig" |
||||||
|
class="border-bottom-1 border-solid border-[var(--tags-view-border-color)]" |
||||||
|
/> |
||||||
|
<!-- 编辑器 --> |
||||||
|
<Editor |
||||||
|
v-model="valueHtml" |
||||||
|
:defaultConfig="editorConfig" |
||||||
|
:editorId="editorId" |
||||||
|
:style="editorStyle" |
||||||
|
@on-change="handleChange" |
||||||
|
@on-created="handleCreated" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style src="@wangeditor/editor/dist/css/style.css"></style> |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
|
||||||
|
**「工具栏key」** |
||||||
|
[ |
||||||
|
"headerSelect",// 标题 |
||||||
|
"blockquote", // 引用 |
||||||
|
"bold", // 加粗 |
||||||
|
"underline", // 下划线 |
||||||
|
"italic", // 斜体 |
||||||
|
// 删除线、清除格式等 |
||||||
|
"group-more-style", |
||||||
|
{ |
||||||
|
key: "group-more-style", |
||||||
|
title: "更多", |
||||||
|
iconSvg: |
||||||
|
'<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6…0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>', |
||||||
|
menuKeys: Array(5) |
||||||
|
}, |
||||||
|
"color", // 文字颜色 |
||||||
|
"bgColor", // 背景色 |
||||||
|
"fontSize", // 字号 |
||||||
|
"fontFamily", // 字体 |
||||||
|
"lineHeight", // 行高 |
||||||
|
"bulletedList", // 无序列表 |
||||||
|
"numberedList", // 有序列表 |
||||||
|
"todo", // 代办 |
||||||
|
// 对齐 |
||||||
|
"group-justify", |
||||||
|
{ |
||||||
|
key: "group-justify", |
||||||
|
title: "对齐", |
||||||
|
iconSvg: |
||||||
|
'<svg viewBox="0 0 1024 1024"><path d="M768 793.6v1…72.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>', |
||||||
|
menuKeys: Array(4) |
||||||
|
}, |
||||||
|
// 缩进 |
||||||
|
"group-indent", |
||||||
|
{ |
||||||
|
key: "group-indent", |
||||||
|
title: "缩进", |
||||||
|
iconSvg: |
||||||
|
'<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v1…32h1024v128H0z m0-128V320l256 192z"></path></svg>', |
||||||
|
menuKeys: Array(2) |
||||||
|
}, |
||||||
|
"emotion",// 表情 |
||||||
|
"insertLink",// 插入链接 |
||||||
|
"group-image",// 上传图片 |
||||||
|
{ |
||||||
|
key: "group-image", |
||||||
|
title: "图片", |
||||||
|
iconSvg: |
||||||
|
'<svg viewBox="0 0 1024 1024"><path d="M959.877 128…l224.01-384 256 320h64l224.01-192z"></path></svg>', |
||||||
|
menuKeys: Array(2) |
||||||
|
}, |
||||||
|
"group-video",// 上传视频 |
||||||
|
{ |
||||||
|
key: "group-video", |
||||||
|
title: "视频", |
||||||
|
iconSvg: |
||||||
|
'<svg viewBox="0 0 1024 1024"><path d="M981.184 160….904zM384 704V320l320 192-320 192z"></path></svg>', |
||||||
|
menuKeys: Array(2) |
||||||
|
}, |
||||||
|
"insertTable",// 插入表格 |
||||||
|
"codeBlock", // 代码块 |
||||||
|
"divider", // 分割线 |
||||||
|
"undo", // 撤销 |
||||||
|
"redo", // 重做 |
||||||
|
"fullScreen" // 全屏 |
||||||
|
] |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import Error from './src/Error.vue' |
||||||
|
|
||||||
|
export { Error } |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<script lang="ts" name="Error" setup> |
||||||
|
import pageError from '@/assets/svgs/404.svg' |
||||||
|
import networkError from '@/assets/svgs/500.svg' |
||||||
|
import noPermission from '@/assets/svgs/403.svg' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
|
||||||
|
interface ErrorMap { |
||||||
|
url: string |
||||||
|
message: string |
||||||
|
buttonText: string |
||||||
|
} |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const errorMap: { |
||||||
|
[key: string]: ErrorMap |
||||||
|
} = { |
||||||
|
'404': { |
||||||
|
url: pageError, |
||||||
|
message: t('error.pageError'), |
||||||
|
buttonText: t('error.returnToHome') |
||||||
|
}, |
||||||
|
'500': { |
||||||
|
url: networkError, |
||||||
|
message: t('error.networkError'), |
||||||
|
buttonText: t('error.returnToHome') |
||||||
|
}, |
||||||
|
'403': { |
||||||
|
url: noPermission, |
||||||
|
message: t('error.noPermission'), |
||||||
|
buttonText: t('error.returnToHome') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
type: propTypes.string.validate((v: string) => ['404', '500', '403'].includes(v)).def('404') |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['errorClick']) |
||||||
|
|
||||||
|
const btnClick = () => { |
||||||
|
emit('errorClick', props.type) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex justify-center"> |
||||||
|
<div class="text-center"> |
||||||
|
<img :src="errorMap[type].url" alt="" width="350" /> |
||||||
|
<div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div> |
||||||
|
<div class="mt-20px"> |
||||||
|
<ElButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</ElButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import Form from './src/Form.vue' |
||||||
|
import { ElForm } from 'element-plus' |
||||||
|
import { FormSchema, FormSetPropsType } from '@/types/form' |
||||||
|
|
||||||
|
export interface FormExpose { |
||||||
|
setValues: (data: Recordable) => void |
||||||
|
setProps: (props: Recordable) => void |
||||||
|
delSchema: (field: string) => void |
||||||
|
addSchema: (formSchema: FormSchema, index?: number) => void |
||||||
|
setSchema: (schemaProps: FormSetPropsType[]) => void |
||||||
|
formModel: Recordable |
||||||
|
getElFormRef: () => ComponentRef<typeof ElForm> |
||||||
|
} |
||||||
|
|
||||||
|
export { Form } |
||||||
@ -0,0 +1,314 @@ |
|||||||
|
<script lang="tsx"> |
||||||
|
import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue' |
||||||
|
import { ElForm, ElFormItem, ElRow, ElCol, ElTooltip } from 'element-plus' |
||||||
|
import { componentMap } from './componentMap' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { getSlot } from '@/utils/tsxHelper' |
||||||
|
import { |
||||||
|
setTextPlaceholder, |
||||||
|
setGridProp, |
||||||
|
setComponentProps, |
||||||
|
setItemComponentSlots, |
||||||
|
initModel, |
||||||
|
setFormItemSlots |
||||||
|
} from './helper' |
||||||
|
import { useRenderSelect } from './components/useRenderSelect' |
||||||
|
import { useRenderRadio } from './components/useRenderRadio' |
||||||
|
import { useRenderCheckbox } from './components/useRenderCheckbox' |
||||||
|
import { useDesign } from '@/hooks/web/useDesign' |
||||||
|
import { findIndex } from '@/utils' |
||||||
|
import { set } from 'lodash-es' |
||||||
|
import { FormProps } from './types' |
||||||
|
import { Icon } from '@/components/Icon' |
||||||
|
import { FormSchema, FormSetPropsType } from '@/types/form' |
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign() |
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('form') |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'Form', |
||||||
|
props: { |
||||||
|
// 生成Form的布局结构数组 |
||||||
|
schema: { |
||||||
|
type: Array as PropType<FormSchema[]>, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
// 是否需要栅格布局 |
||||||
|
// update by 芋艿：将 true 改成 false，因为项目更常用这种方式 |
||||||
|
isCol: propTypes.bool.def(false), |
||||||
|
// 是否搜索 |
||||||
|
isSearch: propTypes.bool.def(false), |
||||||
|
// 表单数据对象 |
||||||
|
model: { |
||||||
|
type: Object as PropType<Recordable>, |
||||||
|
default: () => ({}) |
||||||
|
}, |
||||||
|
// 是否自动设置placeholder |
||||||
|
autoSetPlaceholder: propTypes.bool.def(true), |
||||||
|
// 是否自定义内容 |
||||||
|
isCustom: propTypes.bool.def(false), |
||||||
|
// 表单label宽度 |
||||||
|
labelWidth: propTypes.oneOfType([String, Number]).def('auto'), |
||||||
|
// 是否 loading 数据中 add by 芋艿 |
||||||
|
vLoading: propTypes.bool.def(false), |
||||||
|
inlineBlock: propTypes.bool.def(false) |
||||||
|
}, |
||||||
|
emits: ['register'], |
||||||
|
setup(props, { slots, expose, emit }) { |
||||||
|
// element form 实例 |
||||||
|
const elFormRef = ref<ComponentRef<typeof ElForm>>() |
||||||
|
|
||||||
|
// useForm传入的props |
||||||
|
const outsideProps = ref<FormProps>({}) |
||||||
|
|
||||||
|
const mergeProps = ref<FormProps>({}) |
||||||
|
|
||||||
|
const getProps = computed(() => { |
||||||
|
const propsObj = { ...props } |
||||||
|
Object.assign(propsObj, unref(mergeProps)) |
||||||
|
return propsObj |
||||||
|
}) |
||||||
|
|
||||||
|
// 表单数据 |
||||||
|
const formModel = ref<Recordable>({}) |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
emit('register', unref(elFormRef)?.$parent, unref(elFormRef)) |
||||||
|
}) |
||||||
|
|
||||||
|
// 对表单赋值 |
||||||
|
const setValues = (data: Recordable = {}) => { |
||||||
|
formModel.value = Object.assign(unref(formModel), data) |
||||||
|
} |
||||||
|
|
||||||
|
const setProps = (props: FormProps = {}) => { |
||||||
|
mergeProps.value = Object.assign(unref(mergeProps), props) |
||||||
|
outsideProps.value = props |
||||||
|
} |
||||||
|
|
||||||
|
const delSchema = (field: string) => { |
||||||
|
const { schema } = unref(getProps) |
||||||
|
|
||||||
|
const index = findIndex(schema, (v: FormSchema) => v.field === field) |
||||||
|
if (index > -1) { |
||||||
|
schema.splice(index, 1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const addSchema = (formSchema: FormSchema, index?: number) => { |
||||||
|
const { schema } = unref(getProps) |
||||||
|
if (index !== void 0) { |
||||||
|
schema.splice(index, 0, formSchema) |
||||||
|
return |
||||||
|
} |
||||||
|
schema.push(formSchema) |
||||||
|
} |
||||||
|
|
||||||
|
const setSchema = (schemaProps: FormSetPropsType[]) => { |
||||||
|
const { schema } = unref(getProps) |
||||||
|
for (const v of schema) { |
||||||
|
for (const item of schemaProps) { |
||||||
|
if (v.field === item.field) { |
||||||
|
set(v, item.path, item.value) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getElFormRef = (): ComponentRef<typeof ElForm> => { |
||||||
|
return unref(elFormRef) as ComponentRef<typeof ElForm> |
||||||
|
} |
||||||
|
|
||||||
|
expose({ |
||||||
|
setValues, |
||||||
|
formModel, |
||||||
|
setProps, |
||||||
|
delSchema, |
||||||
|
addSchema, |
||||||
|
setSchema, |
||||||
|
getElFormRef |
||||||
|
}) |
||||||
|
|
||||||
|
// 监听表单结构化数组，重新生成formModel |
||||||
|
watch( |
||||||
|
() => unref(getProps).schema, |
||||||
|
(schema = []) => { |
||||||
|
formModel.value = initModel(schema, unref(formModel)) |
||||||
|
}, |
||||||
|
{ |
||||||
|
immediate: true, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 渲染包裹标签，是否使用栅格布局 |
||||||
|
const renderWrap = () => { |
||||||
|
const { isCol } = unref(getProps) |
||||||
|
const content = isCol ? ( |
||||||
|
<ElRow gutter={20}>{renderFormItemWrap()}</ElRow> |
||||||
|
) : ( |
||||||
|
renderFormItemWrap() |
||||||
|
) |
||||||
|
return content |
||||||
|
} |
||||||
|
|
||||||
|
// 是否要渲染el-col |
||||||
|
const renderFormItemWrap = () => { |
||||||
|
// hidden属性表示隐藏，不做渲染 |
||||||
|
const { schema = [], isCol } = unref(getProps) |
||||||
|
|
||||||
|
return schema |
||||||
|
.filter((v) => !v.hidden) |
||||||
|
.map((item) => { |
||||||
|
// 如果是 Divider 组件，需要自己占用一行 |
||||||
|
const isDivider = item.component === 'Divider' |
||||||
|
const Com = componentMap['Divider'] as ReturnType<typeof defineComponent> |
||||||
|
return isDivider ? ( |
||||||
|
<Com {...{ contentPosition: 'left', ...item.componentProps }}>{item?.label}</Com> |
||||||
|
) : isCol ? ( |
||||||
|
// 如果需要栅格，需要包裹 ElCol |
||||||
|
<ElCol {...setGridProp(item.colProps)}>{renderFormItem(item)}</ElCol> |
||||||
|
) : ( |
||||||
|
renderFormItem(item) |
||||||
|
) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 渲染formItem |
||||||
|
const renderFormItem = (item: FormSchema) => { |
||||||
|
// 单独给只有options属性的组件做判断 |
||||||
|
const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer'] |
||||||
|
const slotsMap: Recordable = { |
||||||
|
...setItemComponentSlots(slots, item?.componentProps?.slots, item.field) |
||||||
|
} |
||||||
|
if (item?.component !== 'SelectV2' && item?.component !== 'Cascader' && item?.options) { |
||||||
|
slotsMap.default = () => renderOptions(item) |
||||||
|
} |
||||||
|
|
||||||
|
const formItemSlots: Recordable = setFormItemSlots(slots, item.field) |
||||||
|
// 如果有 labelMessage，自动使用插槽渲染 |
||||||
|
if (item?.labelMessage) { |
||||||
|
formItemSlots.label = () => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<span>{item.label}</span> |
||||||
|
<ElTooltip placement="right" raw-content> |
||||||
|
{{ |
||||||
|
content: () => <span v-html={item.labelMessage}></span>, |
||||||
|
default: () => ( |
||||||
|
<Icon |
||||||
|
icon="ep:warning" |
||||||
|
size={16} |
||||||
|
color="var(--el-color-primary)" |
||||||
|
class="ml-2px relative top-1px" |
||||||
|
></Icon> |
||||||
|
) |
||||||
|
}} |
||||||
|
</ElTooltip> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
const { isSearch } = unref(getProps) |
||||||
|
return ( |
||||||
|
<ElFormItem |
||||||
|
class={isSearch ? 'search-form-item' : 'crud-form-item'} |
||||||
|
{...(item.formItemProps || {})} |
||||||
|
prop={item.field} |
||||||
|
label={item.label || ''} |
||||||
|
> |
||||||
|
{{ |
||||||
|
...formItemSlots, |
||||||
|
default: () => { |
||||||
|
const Com = componentMap[item.component as string] as ReturnType< |
||||||
|
typeof defineComponent |
||||||
|
> |
||||||
|
const baseSty = isSearch ? '' : 'width: 100%;' |
||||||
|
const { autoSetPlaceholder } = unref(getProps) |
||||||
|
return slots[item.field] ? ( |
||||||
|
getSlot(slots, item.field, formModel.value) |
||||||
|
) : ( |
||||||
|
<Com |
||||||
|
vModel={formModel.value[item.field]} |
||||||
|
{...(autoSetPlaceholder && setTextPlaceholder(item))} |
||||||
|
{...setComponentProps(item)} |
||||||
|
filterable |
||||||
|
format={item.component == 'DatePicker' ? 'YYYY-MM-DD' : null} |
||||||
|
value-format={item.component == 'DatePicker' ? 'YYYY-MM-DD' : null} |
||||||
|
style={baseSty + item.componentProps?.style} |
||||||
|
// eslint-disable-next-line prettier/prettier |
||||||
|
{...(notRenderOptions.includes(item?.component as string) && item?.componentProps?.options |
||||||
|
? { options: item?.componentProps?.options || [] } |
||||||
|
: {})} |
||||||
|
> |
||||||
|
{{ ...slotsMap }} |
||||||
|
</Com> |
||||||
|
) |
||||||
|
} |
||||||
|
}} |
||||||
|
</ElFormItem> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
// 渲染options |
||||||
|
const renderOptions = (item: FormSchema) => { |
||||||
|
switch (item.component) { |
||||||
|
case 'Select': |
||||||
|
case 'SelectV2': |
||||||
|
const { renderSelectOptions } = useRenderSelect(slots) |
||||||
|
return renderSelectOptions(item) |
||||||
|
case 'Radio': |
||||||
|
case 'RadioButton': |
||||||
|
const { renderRadioOptions } = useRenderRadio() |
||||||
|
return renderRadioOptions(item) |
||||||
|
case 'Checkbox': |
||||||
|
case 'CheckboxButton': |
||||||
|
const { renderCheckboxOptions } = useRenderCheckbox() |
||||||
|
return renderCheckboxOptions(item) |
||||||
|
default: |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 过滤传入Form组件的属性 |
||||||
|
const getFormBindValue = () => { |
||||||
|
// 避免在标签上出现多余的属性 |
||||||
|
const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom', 'model'] |
||||||
|
const props = { ...unref(getProps) } |
||||||
|
for (const key in props) { |
||||||
|
if (delKeys.indexOf(key) !== -1) { |
||||||
|
delete props[key] |
||||||
|
} |
||||||
|
} |
||||||
|
return props |
||||||
|
} |
||||||
|
|
||||||
|
return () => ( |
||||||
|
<ElForm |
||||||
|
ref={elFormRef} |
||||||
|
{...getFormBindValue()} |
||||||
|
model={props.isCustom ? props.model : formModel} |
||||||
|
class={prefixCls} |
||||||
|
v-loading={props.vLoading} |
||||||
|
style={props.inlineBlock ? 'display: inline' : ''} |
||||||
|
> |
||||||
|
{{ |
||||||
|
// 如果需要自定义，就什么都不渲染，而是提供默认插槽 |
||||||
|
default: () => { |
||||||
|
const { isCustom } = unref(getProps) |
||||||
|
return isCustom ? getSlot(slots, 'default') : renderWrap() |
||||||
|
} |
||||||
|
}} |
||||||
|
</ElForm> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.#{$elNamespace}-form.#{$namespace}-form .#{$elNamespace}-row { |
||||||
|
margin-right: 0 !important; |
||||||
|
margin-left: 0 !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import type { Component } from 'vue' |
||||||
|
import { |
||||||
|
ElCascader, |
||||||
|
ElCheckboxGroup, |
||||||
|
ElColorPicker, |
||||||
|
ElDatePicker, |
||||||
|
ElInput, |
||||||
|
ElInputNumber, |
||||||
|
ElRadioGroup, |
||||||
|
ElRate, |
||||||
|
ElSelect, |
||||||
|
ElSelectV2, |
||||||
|
ElTreeSelect, |
||||||
|
ElSlider, |
||||||
|
ElSwitch, |
||||||
|
ElTimePicker, |
||||||
|
ElTimeSelect, |
||||||
|
ElTransfer, |
||||||
|
ElAutocomplete, |
||||||
|
ElDivider |
||||||
|
} from 'element-plus' |
||||||
|
import { InputPassword } from '@/components/InputPassword' |
||||||
|
import { Editor } from '@/components/Editor' |
||||||
|
import { UploadImg, UploadImgs, UploadFile } from '@/components/UploadFile' |
||||||
|
import { ComponentName } from '@/types/components' |
||||||
|
|
||||||
|
const componentMap: Recordable<Component, ComponentName> = { |
||||||
|
Radio: ElRadioGroup, |
||||||
|
Checkbox: ElCheckboxGroup, |
||||||
|
CheckboxButton: ElCheckboxGroup, |
||||||
|
Input: ElInput, |
||||||
|
Autocomplete: ElAutocomplete, |
||||||
|
InputNumber: ElInputNumber, |
||||||
|
Select: ElSelect, |
||||||
|
Cascader: ElCascader, |
||||||
|
Switch: ElSwitch, |
||||||
|
Slider: ElSlider, |
||||||
|
TimePicker: ElTimePicker, |
||||||
|
DatePicker: ElDatePicker, |
||||||
|
Rate: ElRate, |
||||||
|
ColorPicker: ElColorPicker, |
||||||
|
Transfer: ElTransfer, |
||||||
|
Divider: ElDivider, |
||||||
|
TimeSelect: ElTimeSelect, |
||||||
|
SelectV2: ElSelectV2, |
||||||
|
TreeSelect: ElTreeSelect, |
||||||
|
RadioButton: ElRadioGroup, |
||||||
|
InputPassword: InputPassword, |
||||||
|
Editor: Editor, |
||||||
|
UploadImg: UploadImg, |
||||||
|
UploadImgs: UploadImgs, |
||||||
|
UploadFile: UploadFile |
||||||
|
} |
||||||
|
|
||||||
|
export { componentMap } |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import { FormSchema } from '@/types/form' |
||||||
|
import { ElCheckbox, ElCheckboxButton } from 'element-plus' |
||||||
|
import { defineComponent } from 'vue' |
||||||
|
|
||||||
|
export const useRenderCheckbox = () => { |
||||||
|
const renderCheckboxOptions = (item: FormSchema) => { |
||||||
|
// 如果有别名，就取别名
|
||||||
|
const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id' |
||||||
|
const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name' |
||||||
|
const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType< |
||||||
|
typeof defineComponent |
||||||
|
> |
||||||
|
return item?.options?.map((option) => { |
||||||
|
const { ...other } = option |
||||||
|
return ( |
||||||
|
<Com {...other} label={option[valueAlias || 'value']}> |
||||||
|
{option[labelAlias || 'label']} |
||||||
|
</Com> |
||||||
|
) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
renderCheckboxOptions |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import { FormSchema } from '@/types/form' |
||||||
|
import { ElRadio, ElRadioButton } from 'element-plus' |
||||||
|
import { defineComponent } from 'vue' |
||||||
|
|
||||||
|
export const useRenderRadio = () => { |
||||||
|
const renderRadioOptions = (item: FormSchema) => { |
||||||
|
// 如果有别名，就取别名
|
||||||
|
const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id' |
||||||
|
const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name' |
||||||
|
const Com = (item.component === 'Radio' ? ElRadio : ElRadioButton) as ReturnType< |
||||||
|
typeof defineComponent |
||||||
|
> |
||||||
|
return item?.options?.map((option) => { |
||||||
|
const { ...other } = option |
||||||
|
return ( |
||||||
|
<Com {...other} label={option[valueAlias || 'value']}> |
||||||
|
{option[labelAlias || 'label']} |
||||||
|
</Com> |
||||||
|
) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
renderRadioOptions |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import { FormSchema } from '@/types/form' |
||||||
|
import { ComponentOptions } from '@/types/components' |
||||||
|
import { ElOption, ElOptionGroup } from 'element-plus' |
||||||
|
import { getSlot } from '@/utils/tsxHelper' |
||||||
|
import { Slots } from 'vue' |
||||||
|
|
||||||
|
export const useRenderSelect = (slots: Slots) => { |
||||||
|
// 渲染 select options
|
||||||
|
const renderSelectOptions = (item: FormSchema) => { |
||||||
|
// 如果有别名，就取别名
|
||||||
|
const labelAlias = item?.componentProps?.optionsAlias?.labelField |
||||||
|
return item?.options?.map((option) => { |
||||||
|
if (option?.length) { |
||||||
|
return ( |
||||||
|
<ElOptionGroup label={option[labelAlias || 'label']}> |
||||||
|
{() => { |
||||||
|
return option?.map((v) => { |
||||||
|
return renderSelectOptionItem(item, v) |
||||||
|
}) |
||||||
|
}} |
||||||
|
</ElOptionGroup> |
||||||
|
) |
||||||
|
} else { |
||||||
|
return renderSelectOptionItem(item, option) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 渲染 select option item
|
||||||
|
const renderSelectOptionItem = (item: FormSchema, option: ComponentOptions) => { |
||||||
|
// 如果有别名，就取别名
|
||||||
|
const labelAlias = item?.componentProps?.optionsAlias?.labelField || 'id' |
||||||
|
const valueAlias = item?.componentProps?.optionsAlias?.valueField || 'name' |
||||||
|
|
||||||
|
const { label, value, ...other } = option |
||||||
|
|
||||||
|
return ( |
||||||
|
<ElOption |
||||||
|
{...other} |
||||||
|
label={labelAlias ? option[labelAlias] : label} |
||||||
|
value={valueAlias ? option[valueAlias] : value} |
||||||
|
> |
||||||
|
{{ |
||||||
|
default: () => |
||||||
|
// option 插槽名规则，{field}-option
|
||||||
|
item?.componentProps?.optionsSlot |
||||||
|
? getSlot(slots, `${item.field}-option`, { item: option }) |
||||||
|
: undefined |
||||||
|
}} |
||||||
|
</ElOption> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
renderSelectOptions |
||||||
|
} |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue