mirror of
https://github.com/vbenjs/vben-admin-thin-next.git
synced 2025-02-02 18:08:40 +08:00
chore: merge branch 'main' of github.com:anncwb/vue-vben-admin into main
This commit is contained in:
vben
commit
8efcba4861
@ -1,3 +1,30 @@
|
||||
### ✨ Features
|
||||
|
||||
- **其它**
|
||||
- `.env`文件中的`VITE_PROXY`配置支持单引号
|
||||
- 移除 build 过程中的警告
|
||||
|
||||
### 🐛 Bug Fixes
|
||||
|
||||
- **BasicTable**
|
||||
- 修复可编辑单元格某些情况下无法提交的问题
|
||||
- 修复`inset`属性不起作用的问题
|
||||
- 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题
|
||||
- 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题
|
||||
- 修复`BasicTable`在某些情况下，分页会被重置的问题
|
||||
- 修改 `deleteTableDataRecord` 方法
|
||||
- **BasicModal**
|
||||
- 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题
|
||||
- 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题
|
||||
- **BasicTree** 修复节点插槽不起作用的问题
|
||||
- **CodeEditor** 修复可能会造成的`Build`失败的问题
|
||||
- **BasicForm** 修复自定义 FormItem 组件的内容宽度可能超出范围的问题
|
||||
- **ApiTreeSelect** 修复`params`变化未能触发重新请求 api 数据的问题
|
||||
- **其它**
|
||||
- 修复多标签在某些情况下关闭页签不会跳转路由的问题
|
||||
- 修复部分组件可能会造成热更新异常的问题
|
||||
- 修复直接`import`部分`antdv`子组件时会在 build 过程中报错的问题，如：TabPane、RadioGroup
|
||||
|
||||
## 2.7.2(2021-09-14)
|
||||
|
||||
### ✨ Features
|
||||
|
||||
@ -5,18 +5,19 @@ import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
|
||||
import fs, { writeFileSync } from 'fs-extra';
|
||||
import chalk from 'chalk';
|
||||
|
||||
import { getRootPath, getEnvConfig } from '../utils';
|
||||
import { getEnvConfig, getRootPath } from '../utils';
|
||||
import { getConfigFileName } from '../getConfigFileName';
|
||||
|
||||
import pkg from '../../package.json';
|
||||
|
||||
function createConfig(
|
||||
{
|
||||
configName,
|
||||
config,
|
||||
configFileName = GLOB_CONFIG_FILE_NAME,
|
||||
}: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} },
|
||||
) {
|
||||
interface CreateConfigParams {
|
||||
configName: string;
|
||||
config: any;
|
||||
configFileName?: string;
|
||||
}
|
||||
|
||||
function createConfig(params: CreateConfigParams) {
|
||||
const { configName, config, configFileName } = params;
|
||||
try {
|
||||
const windowConf = `window.${configName}`;
|
||||
// Ensure that the variable will not be modified
|
||||
@ -40,5 +41,5 @@ function createConfig(
|
||||
export function runBuildConfig() {
|
||||
const config = getEnvConfig();
|
||||
const configFileName = getConfigFileName(config);
|
||||
createConfig({ config, configName: configFileName });
|
||||
createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME });
|
||||
}
|
||||
|
||||
@ -28,9 +28,9 @@ export function wrapperEnv(envConf: Recordable): ViteEnv {
|
||||
if (envName === 'VITE_PORT') {
|
||||
realName = Number(realName);
|
||||
}
|
||||
if (envName === 'VITE_PROXY') {
|
||||
if (envName === 'VITE_PROXY' && realName) {
|
||||
try {
|
||||
realName = JSON.parse(realName);
|
||||
realName = JSON.parse(realName.replace(/'/g, '"'));
|
||||
} catch (error) {
|
||||
realName = '';
|
||||
}
|
||||
|
||||
@ -14,7 +14,52 @@ export function configStyleImportPlugin(isBuild: boolean) {
|
||||
libraryName: 'ant-design-vue',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => {
|
||||
return `ant-design-vue/es/${name}/style/index`;
|
||||
// 这里是“子组件”列表，无需额外引入样式文件
|
||||
const ignoreList = [
|
||||
'typography-text',
|
||||
'typography-title',
|
||||
'typography-paragraph',
|
||||
'typography-link',
|
||||
'anchor-link',
|
||||
'sub-menu',
|
||||
'menu-item',
|
||||
'menu-item-group',
|
||||
'dropdown-button',
|
||||
'breadcrumb-item',
|
||||
'breadcrumb-separator',
|
||||
'input-password',
|
||||
'input-search',
|
||||
'input-group',
|
||||
'form-item',
|
||||
'radio-group',
|
||||
'checkbox-group',
|
||||
'layout-sider',
|
||||
'layout-content',
|
||||
'layout-footer',
|
||||
'layout-header',
|
||||
'step',
|
||||
'select-option',
|
||||
'select-opt-group',
|
||||
'card-grid',
|
||||
'card-meta',
|
||||
'collapse-panel',
|
||||
'descriptions-item',
|
||||
'list-item',
|
||||
'list-item-meta',
|
||||
'table-column',
|
||||
'table-column-group',
|
||||
'tab-pane',
|
||||
'tab-content',
|
||||
'timeline-item',
|
||||
'tree-node',
|
||||
'skeleton-input',
|
||||
'skeleton-avatar',
|
||||
'skeleton-title',
|
||||
'skeleton-paragraph',
|
||||
'skeleton-image',
|
||||
'skeleton-button',
|
||||
];
|
||||
return ignoreList.includes(name) ? '' : `ant-design-vue/es/${name}/style/index`;
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -7,7 +7,7 @@ type ProxyItem = [string, string];
|
||||
|
||||
type ProxyList = ProxyItem[];
|
||||
|
||||
type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>;
|
||||
type ProxyTargetList = Record<string, ProxyOptions>;
|
||||
|
||||
const httpsRE = /^https:\/\//;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { MockMethod } from 'vite-plugin-mock';
|
||||
import { resultSuccess, resultError } from '../_util';
|
||||
import { ResultEnum } from '../../src/enums/httpEnum';
|
||||
|
||||
const userInfo = {
|
||||
name: 'Vben',
|
||||
@ -59,4 +60,12 @@ export default [
|
||||
return resultError();
|
||||
},
|
||||
},
|
||||
{
|
||||
url: '/basic-api/user/tokenExpired',
|
||||
method: 'post',
|
||||
statusCode: 200,
|
||||
response: () => {
|
||||
return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number });
|
||||
},
|
||||
},
|
||||
] as MockMethod[];
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { MockMethod } from 'vite-plugin-mock';
|
||||
import { resultSuccess } from '../_util';
|
||||
|
||||
const demoList = (keyword) => {
|
||||
const demoList = (keyword, count = 20) => {
|
||||
const result = {
|
||||
list: [] as any[],
|
||||
};
|
||||
for (let index = 0; index < 20; index++) {
|
||||
for (let index = 0; index < count; index++) {
|
||||
result.list.push({
|
||||
name: `${keyword ?? ''}选项${index}`,
|
||||
id: `${index}`,
|
||||
@ -20,9 +20,9 @@ export default [
|
||||
timeout: 1000,
|
||||
method: 'get',
|
||||
response: ({ query }) => {
|
||||
const { keyword } = query;
|
||||
const { keyword, count } = query;
|
||||
console.log(keyword);
|
||||
return resultSuccess(demoList(keyword));
|
||||
return resultSuccess(demoList(keyword, count));
|
||||
},
|
||||
},
|
||||
] as MockMethod[];
|
||||
|
||||
@ -12,7 +12,7 @@ function getRandomPics(count = 10): string[] {
|
||||
|
||||
const demoList = (() => {
|
||||
const result: any[] = [];
|
||||
for (let index = 0; index < 60; index++) {
|
||||
for (let index = 0; index < 200; index++) {
|
||||
result.push({
|
||||
id: `${index}`,
|
||||
beginTime: '@datetime',
|
||||
|
||||
102
package.json
102
package.json
@ -35,98 +35,100 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify/iconify": "^2.0.4",
|
||||
"@vueuse/core": "^6.3.3",
|
||||
"@vueuse/core": "^6.6.2",
|
||||
"@zxcvbn-ts/core": "^1.0.0-beta.0",
|
||||
"ant-design-vue": "2.2.7",
|
||||
"axios": "^0.21.4",
|
||||
"ant-design-vue": "2.2.8",
|
||||
"axios": "^0.23.0",
|
||||
"crypto-js": "^4.1.1",
|
||||
"echarts": "^5.2.0",
|
||||
"echarts": "^5.2.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"pinia": "2.0.0-rc.9",
|
||||
"pinia": "2.0.0-rc.14",
|
||||
"print-js": "^1.6.0",
|
||||
"qrcode": "^1.4.4",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"sortablejs": "^1.14.0",
|
||||
"vue": "3.2.11",
|
||||
"vue-i18n": "9.1.7",
|
||||
"vue-router": "^4.0.11",
|
||||
"vue-types": "^4.1.0"
|
||||
"vue": "^3.2.20",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-json-pretty": "^2.0.4",
|
||||
"vue-router": "^4.0.12",
|
||||
"vue-types": "^4.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^13.1.0",
|
||||
"@commitlint/config-conventional": "^13.1.0",
|
||||
"@iconify/json": "^1.1.401",
|
||||
"@commitlint/cli": "^13.2.1",
|
||||
"@commitlint/config-conventional": "^13.2.0",
|
||||
"@iconify/json": "^1.1.416",
|
||||
"@purge-icons/generated": "^0.7.0",
|
||||
"@types/codemirror": "^5.60.2",
|
||||
"@types/codemirror": "^5.60.5",
|
||||
"@types/crypto-js": "^4.0.2",
|
||||
"@types/fs-extra": "^9.0.12",
|
||||
"@types/inquirer": "^8.1.1",
|
||||
"@types/fs-extra": "^9.0.13",
|
||||
"@types/inquirer": "^8.1.3",
|
||||
"@types/intro.js": "^3.0.2",
|
||||
"@types/jest": "^27.0.1",
|
||||
"@types/jest": "^27.0.2",
|
||||
"@types/lodash-es": "^4.17.5",
|
||||
"@types/mockjs": "^1.0.4",
|
||||
"@types/node": "^16.9.1",
|
||||
"@types/node": "^16.11.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/qrcode": "^1.4.1",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@types/showdown": "^1.9.4",
|
||||
"@types/sortablejs": "^1.10.7",
|
||||
"@typescript-eslint/eslint-plugin": "^4.31.0",
|
||||
"@typescript-eslint/parser": "^4.31.0",
|
||||
"@vitejs/plugin-legacy": "^1.5.3",
|
||||
"@vitejs/plugin-vue": "^1.6.2",
|
||||
"@vitejs/plugin-vue-jsx": "^1.1.8",
|
||||
"@vue/compiler-sfc": "3.2.11",
|
||||
"@vue/test-utils": "^2.0.0-rc.14",
|
||||
"autoprefixer": "^10.3.4",
|
||||
"@typescript-eslint/eslint-plugin": "^5.1.0",
|
||||
"@typescript-eslint/parser": "^5.1.0",
|
||||
"@vitejs/plugin-legacy": "^1.6.2",
|
||||
"@vitejs/plugin-vue": "^1.9.3",
|
||||
"@vitejs/plugin-vue-jsx": "^1.2.0",
|
||||
"@vue/compiler-sfc": "3.2.20",
|
||||
"@vue/test-utils": "^2.0.0-rc.16",
|
||||
"autoprefixer": "^10.3.7",
|
||||
"commitizen": "^4.2.4",
|
||||
"conventional-changelog-cli": "^2.1.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"dotenv": "^10.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint": "^8.0.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-define-config": "^1.0.9",
|
||||
"eslint-plugin-jest": "^24.4.0",
|
||||
"eslint-define-config": "^1.1.1",
|
||||
"eslint-plugin-jest": "^25.2.2",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^7.17.0",
|
||||
"esno": "^0.9.1",
|
||||
"eslint-plugin-vue": "^7.19.1",
|
||||
"esno": "^0.10.1",
|
||||
"fs-extra": "^10.0.0",
|
||||
"http-server": "^13.0.1",
|
||||
"http-server": "^14.0.0",
|
||||
"husky": "^7.0.2",
|
||||
"inquirer": "^8.1.2",
|
||||
"inquirer": "^8.2.0",
|
||||
"is-ci": "^3.0.0",
|
||||
"jest": "^27.2.0",
|
||||
"less": "^4.1.1",
|
||||
"lint-staged": "^11.1.2",
|
||||
"jest": "^27.3.1",
|
||||
"less": "^4.1.2",
|
||||
"lint-staged": "^11.2.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.3.6",
|
||||
"prettier": "^2.4.0",
|
||||
"postcss": "^8.3.9",
|
||||
"prettier": "^2.4.1",
|
||||
"pretty-quick": "^3.1.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup-plugin-visualizer": "5.5.2",
|
||||
"rollup-plugin-visualizer": "^5.5.2",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-standard": "^22.0.0",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"ts-jest": "^27.0.5",
|
||||
"ts-node": "^10.2.1",
|
||||
"typescript": "4.4.3",
|
||||
"vite": "2.5.7",
|
||||
"ts-jest": "^27.0.7",
|
||||
"ts-node": "^10.3.0",
|
||||
"typescript": "^4.4.4",
|
||||
"vite": "^2.6.10",
|
||||
"vite-plugin-compression": "^0.3.5",
|
||||
"vite-plugin-html": "^2.1.0",
|
||||
"vite-plugin-imagemin": "^0.4.5",
|
||||
"vite-plugin-html": "^2.1.1",
|
||||
"vite-plugin-imagemin": "^0.4.6",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-purge-icons": "^0.7.0",
|
||||
"vite-plugin-pwa": "^0.11.2",
|
||||
"vite-plugin-pwa": "^0.11.3",
|
||||
"vite-plugin-style-import": "^1.2.1",
|
||||
"vite-plugin-svg-icons": "^1.0.4",
|
||||
"vite-plugin-svg-icons": "^1.0.5",
|
||||
"vite-plugin-theme": "^0.8.1",
|
||||
"vite-plugin-vue-setup-extend": "^0.1.0",
|
||||
"vite-plugin-windicss": "^1.4.2",
|
||||
"vue-eslint-parser": "^7.11.0",
|
||||
"vue-tsc": "^0.3.0"
|
||||
"vite-plugin-windicss": "^1.4.12",
|
||||
"vue-eslint-parser": "^8.0.0",
|
||||
"vue-tsc": "^0.28.7"
|
||||
},
|
||||
"resolutions": {
|
||||
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
|
||||
|
||||
@ -87,6 +87,7 @@
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
transition: all 0.5s;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,3 +4,5 @@ import jsonPreview from './src/json-preview/JsonPreview.vue';
|
||||
|
||||
export const CodeEditor = withInstall(codeEditor);
|
||||
export const JsonPreview = withInstall(jsonPreview);
|
||||
|
||||
export * from './src/typing';
|
||||
|
||||
@ -8,22 +8,22 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export const MODE = {
|
||||
JSON: 'application/json',
|
||||
html: 'htmlmixed',
|
||||
js: 'javascript',
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import CodeMirrorEditor from './codemirror/CodeMirror.vue';
|
||||
import { isString } from '/@/utils/is';
|
||||
import { MODE } from './typing';
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: [Object, String] as PropType<Record<string, any> | string> },
|
||||
mode: { type: String, default: MODE.JSON },
|
||||
mode: {
|
||||
type: String as PropType<MODE>,
|
||||
default: MODE.JSON,
|
||||
validator(value: any) {
|
||||
// 这个值必须匹配下列字符串中的一个
|
||||
return Object.values(MODE).includes(value);
|
||||
},
|
||||
},
|
||||
readonly: { type: Boolean },
|
||||
autoFormat: { type: Boolean, default: true },
|
||||
});
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
import { useAppStore } from '/@/store/modules/app';
|
||||
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
|
||||
import CodeMirror from 'codemirror';
|
||||
import { MODE } from './../typing';
|
||||
// css
|
||||
import './codemirror.css';
|
||||
import 'codemirror/theme/idea.css';
|
||||
@ -18,7 +19,14 @@
|
||||
import 'codemirror/mode/htmlmixed/htmlmixed';
|
||||
|
||||
const props = defineProps({
|
||||
mode: { type: String, default: 'application/json' },
|
||||
mode: {
|
||||
type: String as PropType<MODE>,
|
||||
default: MODE.JSON,
|
||||
validator(value: any) {
|
||||
// 这个值必须匹配下列字符串中的一个
|
||||
return Object.values(MODE).includes(value);
|
||||
},
|
||||
},
|
||||
value: { type: String, default: '' },
|
||||
readonly: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
5
src/components/CodeEditor/src/typing.ts
Normal file
5
src/components/CodeEditor/src/typing.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export enum MODE {
|
||||
JSON = 'application/json',
|
||||
HTML = 'htmlmixed',
|
||||
JS = 'javascript',
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<Dropdown :trigger="trigger" v-bind="$attrs">
|
||||
<a-dropdown :trigger="trigger" v-bind="$attrs">
|
||||
<span>
|
||||
<slot></slot>
|
||||
</span>
|
||||
<template #overlay>
|
||||
<Menu :selectedKeys="selectedKeys">
|
||||
<a-menu :selectedKeys="selectedKeys">
|
||||
<template v-for="item in dropMenuList" :key="`${item.event}`">
|
||||
<MenuItem
|
||||
<a-menu-item
|
||||
v-bind="getAttr(item.event)"
|
||||
@click="handleClickMenu(item)"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<Popconfirm
|
||||
<a-popconfirm
|
||||
v-if="popconfirm && item.popConfirm"
|
||||
v-bind="getPopConfirmAttrs(item.popConfirm)"
|
||||
>
|
||||
@ -22,40 +22,34 @@
|
||||
<Icon :icon="item.icon" v-if="item.icon" />
|
||||
<span class="ml-1">{{ item.text }}</span>
|
||||
</div>
|
||||
</Popconfirm>
|
||||
</a-popconfirm>
|
||||
<template v-else>
|
||||
<Icon :icon="item.icon" v-if="item.icon" />
|
||||
<span class="ml-1">{{ item.text }}</span>
|
||||
</template>
|
||||
</MenuItem>
|
||||
<MenuDivider v-if="item.divider" :key="`d-${item.event}`" />
|
||||
</a-menu-item>
|
||||
<a-menu-divider v-if="item.divider" :key="`d-${item.event}`" />
|
||||
</template>
|
||||
</Menu>
|
||||
</a-menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { computed, PropType } from 'vue';
|
||||
import type { DropMenu } from './typing';
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { omit } from 'lodash-es';
|
||||
import { isFunction } from '/@/utils/is';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicDropdown',
|
||||
components: {
|
||||
Dropdown,
|
||||
Menu,
|
||||
MenuItem: Menu.Item,
|
||||
MenuDivider: Menu.Divider,
|
||||
Icon,
|
||||
Popconfirm,
|
||||
},
|
||||
props: {
|
||||
const ADropdown = Dropdown;
|
||||
const AMenu = Menu;
|
||||
const AMenuItem = Menu.Item;
|
||||
const AMenuDivider = Menu.Divider;
|
||||
const APopconfirm = Popconfirm;
|
||||
|
||||
const props = defineProps({
|
||||
popconfirm: Boolean,
|
||||
/**
|
||||
* the trigger mode which executes the drop-down action
|
||||
@ -76,9 +70,10 @@
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
emits: ['menuEvent'],
|
||||
setup(props, { emit }) {
|
||||
});
|
||||
|
||||
const emit = defineEmits(['menuEvent']);
|
||||
|
||||
function handleClickMenu(item: DropMenu) {
|
||||
const { event } = item;
|
||||
const menu = props.dropMenuList.find((item) => `${item.event}` === `${event}`);
|
||||
@ -97,11 +92,5 @@
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
handleClickMenu,
|
||||
getPopConfirmAttrs,
|
||||
getAttr: (key: string | number) => ({ key }),
|
||||
};
|
||||
},
|
||||
});
|
||||
const getAttr = (key: string | number) => ({ key });
|
||||
</script>
|
||||
|
||||
@ -15,12 +15,25 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, unref } from 'vue';
|
||||
import XLSX from 'xlsx';
|
||||
import { dateUtil } from '/@/utils/dateUtil';
|
||||
|
||||
import type { ExcelData } from './typing';
|
||||
export default defineComponent({
|
||||
name: 'ImportExcel',
|
||||
props: {
|
||||
// 日期时间格式。如果不提供或者提供空值，将返回原始Date对象
|
||||
dateFormat: {
|
||||
type: String,
|
||||
},
|
||||
// 时区调整。实验性功能，仅为了解决读取日期时间值有偏差的问题。目前仅提供了+08:00时区的偏差修正值
|
||||
// https://github.com/SheetJS/sheetjs/issues/1470#issuecomment-501108554
|
||||
timeZone: {
|
||||
type: Number,
|
||||
default: 8,
|
||||
},
|
||||
},
|
||||
emits: ['success', 'error'],
|
||||
setup(_, { emit }) {
|
||||
setup(props, { emit }) {
|
||||
const inputRef = ref<HTMLInputElement | null>(null);
|
||||
const loadingRef = ref<Boolean>(false);
|
||||
|
||||
@ -51,10 +64,28 @@
|
||||
*/
|
||||
function getExcelData(workbook: XLSX.WorkBook) {
|
||||
const excelData: ExcelData[] = [];
|
||||
const { dateFormat, timeZone } = props;
|
||||
for (const sheetName of workbook.SheetNames) {
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const header: string[] = getHeaderRow(worksheet);
|
||||
const results = XLSX.utils.sheet_to_json(worksheet);
|
||||
let results = XLSX.utils.sheet_to_json(worksheet, {
|
||||
raw: true,
|
||||
dateNF: dateFormat, //Not worked
|
||||
}) as object[];
|
||||
results = results.map((row: object) => {
|
||||
for (let field in row) {
|
||||
if (row[field] instanceof Date) {
|
||||
if (timeZone === 8) {
|
||||
row[field].setSeconds(row[field].getSeconds() + 43);
|
||||
}
|
||||
if (dateFormat) {
|
||||
row[field] = dateUtil(row[field]).format(dateFormat);
|
||||
}
|
||||
}
|
||||
}
|
||||
return row;
|
||||
});
|
||||
|
||||
excelData.push({
|
||||
header,
|
||||
results,
|
||||
@ -76,7 +107,7 @@
|
||||
reader.onload = async (e) => {
|
||||
try {
|
||||
const data = e.target && e.target.result;
|
||||
const workbook = XLSX.read(data, { type: 'array' });
|
||||
const workbook = XLSX.read(data, { type: 'array', cellDates: true });
|
||||
// console.log(workbook);
|
||||
/* DO SOMETHING WITH workbook HERE */
|
||||
const excelData = getExcelData(workbook);
|
||||
|
||||
@ -9,5 +9,6 @@ export { useForm } from './src/hooks/useForm';
|
||||
export { default as ApiSelect } from './src/components/ApiSelect.vue';
|
||||
export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue';
|
||||
export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
|
||||
export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
|
||||
|
||||
export { BasicForm };
|
||||
|
||||
@ -21,6 +21,7 @@ import {
|
||||
Divider,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import ApiRadioGroup from './components/ApiRadioGroup.vue';
|
||||
import RadioButtonGroup from './components/RadioButtonGroup.vue';
|
||||
import ApiSelect from './components/ApiSelect.vue';
|
||||
import ApiTreeSelect from './components/ApiTreeSelect.vue';
|
||||
@ -43,6 +44,7 @@ componentMap.set('Select', Select);
|
||||
componentMap.set('ApiSelect', ApiSelect);
|
||||
componentMap.set('TreeSelect', TreeSelect);
|
||||
componentMap.set('ApiTreeSelect', ApiTreeSelect);
|
||||
componentMap.set('ApiRadioGroup', ApiRadioGroup);
|
||||
componentMap.set('Switch', Switch);
|
||||
componentMap.set('RadioButtonGroup', RadioButtonGroup);
|
||||
componentMap.set('RadioGroup', Radio.Group);
|
||||
|
||||
130
src/components/Form/src/components/ApiRadioGroup.vue
Normal file
130
src/components/Form/src/components/ApiRadioGroup.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
|
||||
-->
|
||||
<template>
|
||||
<RadioGroup v-bind="attrs" v-model:value="state" button-style="solid" @change="handleChange">
|
||||
<template v-for="item in getOptions" :key="`${item.value}`">
|
||||
<RadioButton v-if="props.isBtn" :value="item.value" :disabled="item.disabled">
|
||||
{{ item.label }}
|
||||
</RadioButton>
|
||||
<Radio v-else :value="item.value" :disabled="item.disabled">
|
||||
{{ item.label }}
|
||||
</Radio>
|
||||
</template>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, watchEffect, computed, unref, watch } from 'vue';
|
||||
import { Radio } from 'ant-design-vue';
|
||||
import { isFunction } from '/@/utils/is';
|
||||
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
|
||||
import { useAttrs } from '/@/hooks/core/useAttrs';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { get, omit } from 'lodash-es';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ApiRadioGroup',
|
||||
components: {
|
||||
RadioGroup: Radio.Group,
|
||||
RadioButton: Radio.Button,
|
||||
Radio,
|
||||
},
|
||||
props: {
|
||||
api: {
|
||||
type: Function as PropType<(arg?: Recordable | string) => Promise<OptionsItem[]>>,
|
||||
default: null,
|
||||
},
|
||||
params: {
|
||||
type: [Object, String] as PropType<Recordable | string>,
|
||||
default: () => ({}),
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Boolean] as PropType<string | number | boolean>,
|
||||
},
|
||||
isBtn: {
|
||||
type: [Boolean] as PropType<boolean>,
|
||||
default: false,
|
||||
},
|
||||
numberToString: propTypes.bool,
|
||||
resultField: propTypes.string.def(''),
|
||||
labelField: propTypes.string.def('label'),
|
||||
valueField: propTypes.string.def('value'),
|
||||
immediate: propTypes.bool.def(true),
|
||||
},
|
||||
emits: ['options-change', 'change'],
|
||||
setup(props, { emit }) {
|
||||
const options = ref<OptionsItem[]>([]);
|
||||
const loading = ref(false);
|
||||
const isFirstLoad = ref(true);
|
||||
const emitData = ref<any[]>([]);
|
||||
const attrs = useAttrs();
|
||||
const { t } = useI18n();
|
||||
// Embedded in the form, just use the hook binding to perform form verification
|
||||
const [state] = useRuleFormItem(props);
|
||||
|
||||
// Processing options value
|
||||
const getOptions = computed(() => {
|
||||
const { labelField, valueField, numberToString } = props;
|
||||
|
||||
return unref(options).reduce((prev, next: Recordable) => {
|
||||
if (next) {
|
||||
const value = next[valueField];
|
||||
prev.push({
|
||||
label: next[labelField],
|
||||
value: numberToString ? `${value}` : value,
|
||||
...omit(next, [labelField, valueField]),
|
||||
});
|
||||
}
|
||||
return prev;
|
||||
}, [] as OptionsItem[]);
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
props.immediate && fetch();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.params,
|
||||
() => {
|
||||
!unref(isFirstLoad) && fetch();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
async function fetch() {
|
||||
const api = props.api;
|
||||
if (!api || !isFunction(api)) return;
|
||||
options.value = [];
|
||||
try {
|
||||
loading.value = true;
|
||||
const res = await api(props.params);
|
||||
if (Array.isArray(res)) {
|
||||
options.value = res;
|
||||
emitChange();
|
||||
return;
|
||||
}
|
||||
if (props.resultField) {
|
||||
options.value = get(res, props.resultField) || [];
|
||||
}
|
||||
emitChange();
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function emitChange() {
|
||||
emit('options-change', unref(getOptions));
|
||||
}
|
||||
|
||||
function handleChange(_, ...args) {
|
||||
emitData.value = args;
|
||||
}
|
||||
|
||||
return { state, getOptions, attrs, loading, t, handleChange, props };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -77,9 +77,9 @@
|
||||
if (next) {
|
||||
const value = next[valueField];
|
||||
prev.push({
|
||||
...omit(next, [labelField, valueField]),
|
||||
label: next[labelField],
|
||||
value: numberToString ? `${value}` : value,
|
||||
...omit(next, [labelField, valueField]),
|
||||
});
|
||||
}
|
||||
return prev;
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
watch(
|
||||
() => props.params,
|
||||
() => {
|
||||
isFirstLoaded.value && fetch();
|
||||
!unref(isFirstLoaded) && fetch();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
@ -340,7 +340,7 @@
|
||||
wrapperCol={wrapperCol}
|
||||
>
|
||||
<div style="display:flex">
|
||||
<div style="flex:1">{getContent()}</div>
|
||||
<div style="flex:1;">{getContent()}</div>
|
||||
{showSuffix && <span class="suffix">{getSuffix}</span>}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
@ -129,7 +129,7 @@ export interface FormSchema {
|
||||
// Variable name bound to v-model Default value
|
||||
valueField?: string;
|
||||
// Label name
|
||||
label: string;
|
||||
label: string | VNode;
|
||||
// Auxiliary text
|
||||
subLabel?: string;
|
||||
// Help text on the right side of the text
|
||||
|
||||
@ -92,6 +92,7 @@ export type ComponentType =
|
||||
| 'ApiSelect'
|
||||
| 'TreeSelect'
|
||||
| 'ApiTreeSelect'
|
||||
| 'ApiRadioGroup'
|
||||
| 'RadioButtonGroup'
|
||||
| 'RadioGroup'
|
||||
| 'Checkbox'
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
v-model:value="currentSelect"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<Popover
|
||||
<a-popover
|
||||
placement="bottomLeft"
|
||||
trigger="click"
|
||||
v-model="visible"
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="flex justify-between">
|
||||
<a-input
|
||||
:placeholder="t('component.icon.search')"
|
||||
@change="handleSearchChange"
|
||||
@change="debounceHandleSearchChange"
|
||||
allowClear
|
||||
/>
|
||||
</div>
|
||||
@ -53,7 +53,7 @@
|
||||
</ul>
|
||||
</ScrollContainer>
|
||||
<div class="flex py-2 items-center justify-center" v-if="getTotal >= pageSize">
|
||||
<Pagination
|
||||
<a-pagination
|
||||
showLessItems
|
||||
size="small"
|
||||
:pageSize="pageSize"
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<template v-else
|
||||
><div class="p-5"><Empty /></div>
|
||||
><div class="p-5"><a-empty /></div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -71,16 +71,14 @@
|
||||
<SvgIcon :name="currentSelect" />
|
||||
</span>
|
||||
<Icon :icon="currentSelect || 'ion:apps-outline'" class="cursor-pointer px-2 py-1" v-else />
|
||||
</Popover>
|
||||
</a-popover>
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watchEffect, watch, unref } from 'vue';
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect, watch, unref } from 'vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { ScrollContainer } from '/@/components/Container';
|
||||
|
||||
import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
|
||||
import Icon from './Icon.vue';
|
||||
import SvgIcon from './SvgIcon.vue';
|
||||
@ -94,6 +92,12 @@
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import svgIcons from 'virtual:svg-icons-names';
|
||||
|
||||
// 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
|
||||
const AInput = Input;
|
||||
const APopover = Popover;
|
||||
const APagination = Pagination;
|
||||
const AEmpty = Empty;
|
||||
|
||||
function getIcons() {
|
||||
const data = iconsData as any;
|
||||
const prefix: string = data?.prefix ?? '';
|
||||
@ -110,19 +114,16 @@
|
||||
return svgIcons.map((icon) => icon.replace('icon-', ''));
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'IconPicker',
|
||||
components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty, SvgIcon },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
const props = defineProps({
|
||||
value: propTypes.string,
|
||||
width: propTypes.string.def('100%'),
|
||||
pageSize: propTypes.number.def(140),
|
||||
copy: propTypes.bool.def(false),
|
||||
mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
|
||||
},
|
||||
emits: ['change', 'update:value'],
|
||||
setup(props, { emit }) {
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change', 'update:value']);
|
||||
|
||||
const isSvgMode = props.mode === 'svg';
|
||||
const icons = isSvgMode ? getSvgIcons() : getIcons();
|
||||
|
||||
@ -177,21 +178,6 @@
|
||||
}
|
||||
currentList.value = icons.filter((item) => item.includes(value));
|
||||
}
|
||||
|
||||
return {
|
||||
t,
|
||||
prefixCls,
|
||||
visible,
|
||||
isSvgMode,
|
||||
getTotal,
|
||||
getPaginationList,
|
||||
handlePageChange,
|
||||
handleClick,
|
||||
currentSelect,
|
||||
handleSearchChange: debounceHandleSearchChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-icon-picker';
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<section class="full-loading" :class="{ absolute }" v-show="loading">
|
||||
<section
|
||||
class="full-loading"
|
||||
:class="{ absolute, [theme]: !!theme }"
|
||||
:style="[background ? `background-color: ${background}` : '']"
|
||||
v-show="loading"
|
||||
>
|
||||
<Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
|
||||
</section>
|
||||
</template>
|
||||
@ -35,6 +40,9 @@
|
||||
background: {
|
||||
type: String as PropType<string>,
|
||||
},
|
||||
theme: {
|
||||
type: String as PropType<'dark' | 'light'>,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -60,8 +68,12 @@
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.full-loading {
|
||||
.full-loading:not(.light) {
|
||||
background-color: @modal-mask-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.full-loading.dark {
|
||||
background-color: @modal-mask-bg;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -134,7 +134,9 @@
|
||||
isClickGo.value = false;
|
||||
return;
|
||||
}
|
||||
const path = (route || unref(currentRoute)).path;
|
||||
const path =
|
||||
(route || unref(currentRoute)).meta?.currentActiveMenu ||
|
||||
(route || unref(currentRoute)).path;
|
||||
setOpenKeys(path);
|
||||
if (unref(currentActiveMenu)) return;
|
||||
if (props.isHorizontal && unref(getSplit)) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Modal v-bind="getBindValue">
|
||||
<Modal v-bind="getBindValue" @cancel="handleCancel">
|
||||
<template #closeIcon v-if="!$slots.closeIcon">
|
||||
<ModalClose
|
||||
:canFullscreen="getProps.canFullscreen"
|
||||
@ -72,6 +72,7 @@
|
||||
import { basicProps } from './props';
|
||||
import { useFullScreen } from './hooks/useModalFullScreen';
|
||||
import { omit } from 'lodash-es';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicModal',
|
||||
@ -83,6 +84,7 @@
|
||||
const visibleRef = ref(false);
|
||||
const propsRef = ref<Partial<ModalProps> | null>(null);
|
||||
const modalWrapperRef = ref<any>(null);
|
||||
const { prefixCls } = useDesign('basic-modal');
|
||||
|
||||
// modal Bottom and top height
|
||||
const extHeightRef = ref(0);
|
||||
@ -175,7 +177,8 @@
|
||||
// 取消事件
|
||||
async function handleCancel(e: Event) {
|
||||
e?.stopPropagation();
|
||||
|
||||
// 过滤自定义关闭按钮的空白区域
|
||||
if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
|
||||
if (props.closeFunc && isFunction(props.closeFunc)) {
|
||||
const isClose: boolean = await props.closeFunc();
|
||||
visibleRef.value = !isClose;
|
||||
|
||||
@ -9,6 +9,7 @@ export default defineComponent({
|
||||
name: 'Modal',
|
||||
inheritAttrs: false,
|
||||
props: basicProps,
|
||||
emits: ['cancel'],
|
||||
setup(props, { slots }) {
|
||||
const { visible, draggable, destroyOnClose } = toRefs(props);
|
||||
const attrs = useAttrs();
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
& span:nth-child(2) {
|
||||
& span:last-child {
|
||||
&:hover {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
@ -17,5 +17,6 @@
|
||||
},
|
||||
title: { type: String },
|
||||
},
|
||||
emits: ['dblclick'],
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -222,7 +222,6 @@
|
||||
const getBindValues = computed(() => {
|
||||
const dataSource = unref(getDataSourceRef);
|
||||
let propsData: Recordable = {
|
||||
size: 'middle',
|
||||
// ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
|
||||
...attrs,
|
||||
customRow,
|
||||
@ -365,12 +364,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--inset {
|
||||
.ant-table-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -431,5 +424,11 @@
|
||||
padding: 12px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&--inset {
|
||||
.ant-table-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -246,7 +246,7 @@
|
||||
if (!record) return false;
|
||||
const { key, dataIndex } = column;
|
||||
const value = unref(currentValueRef);
|
||||
if (!key || !dataIndex) return;
|
||||
if (!key && !dataIndex) return;
|
||||
|
||||
const dataKey = (dataIndex || key) as string;
|
||||
|
||||
|
||||
@ -2,7 +2,14 @@ import componentSetting from '/@/settings/componentSetting';
|
||||
|
||||
const { table } = componentSetting;
|
||||
|
||||
const { pageSizeOptions, defaultPageSize, fetchSetting, defaultSortFn, defaultFilterFn } = table;
|
||||
const {
|
||||
pageSizeOptions,
|
||||
defaultPageSize,
|
||||
fetchSetting,
|
||||
defaultSize,
|
||||
defaultSortFn,
|
||||
defaultFilterFn,
|
||||
} = table;
|
||||
|
||||
export const ROW_KEY = 'key';
|
||||
|
||||
@ -15,6 +22,9 @@ export const PAGE_SIZE = defaultPageSize;
|
||||
// Common interface field settings
|
||||
export const FETCH_SETTING = fetchSetting;
|
||||
|
||||
// Default Size
|
||||
export const DEFAULT_SIZE = defaultSize;
|
||||
|
||||
// Configure general sort function
|
||||
export const DEFAULT_SORT_FN = defaultSortFn;
|
||||
|
||||
|
||||
@ -46,6 +46,14 @@ export function useCustomRow(
|
||||
|
||||
const isCheckbox = rowSelection.type === 'checkbox';
|
||||
if (isCheckbox) {
|
||||
// 找到tr
|
||||
const tr: HTMLElement = (e as MouseEvent)
|
||||
.composedPath?.()
|
||||
.find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
|
||||
if (!tr) return;
|
||||
// 找到Checkbox，检查是否为disabled
|
||||
const checkBox = tr.querySelector('input[type=checkbox]');
|
||||
if (!checkBox || checkBox.hasAttribute('disabled')) return;
|
||||
if (!keys.includes(key)) {
|
||||
setSelectedRowKeys([...keys, key]);
|
||||
return;
|
||||
|
||||
@ -160,21 +160,39 @@ export function useDataSource(
|
||||
}
|
||||
}
|
||||
|
||||
function deleteTableDataRecord(record: Recordable | Recordable[]): Recordable | undefined {
|
||||
function deleteTableDataRecord(rowKey: string | number | string[] | number[]) {
|
||||
if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
|
||||
const records = !Array.isArray(record) ? [record] : record;
|
||||
const recordIndex = records
|
||||
.map((item) => dataSourceRef.value.findIndex((s) => s.key === item.key)) // 取序号
|
||||
.filter((item) => item !== undefined)
|
||||
.sort((a, b) => b - a); // 从大到小排序
|
||||
for (const index of recordIndex) {
|
||||
unref(dataSourceRef).splice(index, 1);
|
||||
const rowKeyName = unref(getRowKey);
|
||||
if (!rowKeyName) return;
|
||||
const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
|
||||
for (const key of rowKeys) {
|
||||
let index: number | undefined = dataSourceRef.value.findIndex((row) => {
|
||||
let targetKeyName: string;
|
||||
if (typeof rowKeyName === 'function') {
|
||||
targetKeyName = rowKeyName(row);
|
||||
} else {
|
||||
targetKeyName = rowKeyName as string;
|
||||
}
|
||||
return row[targetKeyName] === key;
|
||||
});
|
||||
if (index >= 0) {
|
||||
dataSourceRef.value.splice(index, 1);
|
||||
}
|
||||
index = unref(propsRef).dataSource?.findIndex((row) => {
|
||||
let targetKeyName: string;
|
||||
if (typeof rowKeyName === 'function') {
|
||||
targetKeyName = rowKeyName(row);
|
||||
} else {
|
||||
targetKeyName = rowKeyName as string;
|
||||
}
|
||||
return row[targetKeyName] === key;
|
||||
});
|
||||
if (typeof index !== 'undefined' && index !== -1)
|
||||
unref(propsRef).dataSource?.splice(index, 1);
|
||||
}
|
||||
setPagination({
|
||||
total: unref(propsRef).dataSource?.length,
|
||||
});
|
||||
return unref(propsRef).dataSource;
|
||||
}
|
||||
|
||||
function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined {
|
||||
@ -223,8 +241,16 @@ export function useDataSource(
|
||||
}
|
||||
|
||||
async function fetch(opt?: FetchParams) {
|
||||
const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } =
|
||||
unref(propsRef);
|
||||
const {
|
||||
api,
|
||||
searchInfo,
|
||||
defSort,
|
||||
fetchSetting,
|
||||
beforeFetch,
|
||||
afterFetch,
|
||||
useSearchForm,
|
||||
pagination,
|
||||
} = unref(propsRef);
|
||||
if (!api || !isFunction(api)) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
@ -251,6 +277,7 @@ export function useDataSource(
|
||||
...(useSearchForm ? getFieldsValue() : {}),
|
||||
...searchInfo,
|
||||
...(opt?.searchInfo ?? {}),
|
||||
...defSort,
|
||||
...sortInfo,
|
||||
...filterInfo,
|
||||
...(opt?.sortInfo ?? {}),
|
||||
@ -275,7 +302,7 @@ export function useDataSource(
|
||||
setPagination({
|
||||
current: currentTotalPage,
|
||||
});
|
||||
fetch(opt);
|
||||
return await fetch(opt);
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,6 +322,7 @@ export function useDataSource(
|
||||
items: unref(resultItems),
|
||||
total: resultTotal,
|
||||
});
|
||||
return resultItems;
|
||||
} catch (error) {
|
||||
emit('fetch-error', error);
|
||||
dataSourceRef.value = [];
|
||||
@ -319,7 +347,7 @@ export function useDataSource(
|
||||
}
|
||||
|
||||
async function reload(opt?: FetchParams) {
|
||||
await fetch(opt);
|
||||
return await fetch(opt);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { PaginationProps } from '../types/pagination';
|
||||
import type { BasicTableProps } from '../types/table';
|
||||
import { computed, unref, ref, ComputedRef, watchEffect } from 'vue';
|
||||
import { computed, unref, ref, ComputedRef, watch } from 'vue';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||
import { isBoolean } from '/@/utils/is';
|
||||
import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
|
||||
@ -27,15 +27,17 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
|
||||
const configRef = ref<PaginationProps>({});
|
||||
const show = ref(true);
|
||||
|
||||
watchEffect(() => {
|
||||
const { pagination } = unref(refProps);
|
||||
watch(
|
||||
() => unref(refProps).pagination,
|
||||
(pagination) => {
|
||||
if (!isBoolean(pagination) && pagination) {
|
||||
configRef.value = {
|
||||
...unref(configRef),
|
||||
...(pagination ?? {}),
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
const getPaginationInfo = computed((): PaginationProps | boolean => {
|
||||
const { pagination } = unref(refProps);
|
||||
|
||||
@ -68,7 +68,7 @@ export function useTable(tableProps?: Props): [
|
||||
getForm: () => FormActionType;
|
||||
} = {
|
||||
reload: async (opt?: FetchParams) => {
|
||||
getTableInstance().reload(opt);
|
||||
return await getTableInstance().reload(opt);
|
||||
},
|
||||
setProps: (props: Partial<BasicTableProps>) => {
|
||||
getTableInstance().setProps(props);
|
||||
@ -122,8 +122,8 @@ export function useTable(tableProps?: Props): [
|
||||
updateTableData: (index: number, key: string, value: any) => {
|
||||
return getTableInstance().updateTableData(index, key, value);
|
||||
},
|
||||
deleteTableDataRecord: (record: Recordable | Recordable[]) => {
|
||||
return getTableInstance().deleteTableDataRecord(record);
|
||||
deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => {
|
||||
return getTableInstance().deleteTableDataRecord(rowKey);
|
||||
},
|
||||
insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
|
||||
return getTableInstance().insertTableDataRecord(record, index);
|
||||
|
||||
@ -7,9 +7,10 @@ import type {
|
||||
SorterResult,
|
||||
TableCustomRecord,
|
||||
TableRowSelection,
|
||||
SizeType,
|
||||
} from './types/table';
|
||||
import type { FormProps } from '/@/components/Form';
|
||||
import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING } from './const';
|
||||
import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
|
||||
export const basicProps = {
|
||||
@ -69,6 +70,11 @@ export const basicProps = {
|
||||
type: Object as PropType<Recordable>,
|
||||
default: null,
|
||||
},
|
||||
// 默认的排序参数
|
||||
defSort: {
|
||||
type: Object as PropType<Recordable>,
|
||||
default: null,
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: propTypes.bool,
|
||||
// 表单配置
|
||||
@ -136,4 +142,8 @@ export const basicProps = {
|
||||
}) => Promise<any>
|
||||
>,
|
||||
},
|
||||
size: {
|
||||
type: String as PropType<SizeType>,
|
||||
default: DEFAULT_SIZE,
|
||||
},
|
||||
};
|
||||
|
||||
@ -95,7 +95,7 @@ export interface TableActionType {
|
||||
setPagination: (info: Partial<PaginationProps>) => void;
|
||||
setTableData: <T = Recordable>(values: T[]) => void;
|
||||
updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
|
||||
deleteTableDataRecord: (record: Recordable | Recordable[]) => Recordable | void;
|
||||
deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => void;
|
||||
insertTableDataRecord: (record: Recordable, index?: number) => Recordable | void;
|
||||
findTableDataRecord: (rowKey: string | number) => Recordable | void;
|
||||
getColumns: (opt?: GetColumnsParams) => BasicColumn[];
|
||||
@ -176,6 +176,8 @@ export interface BasicTableProps<T = any> {
|
||||
emptyDataIsShowTable?: boolean;
|
||||
// 额外的请求参数
|
||||
searchInfo?: Recordable;
|
||||
// 默认的排序参数
|
||||
defSort?: Recordable;
|
||||
// 使用搜索表单
|
||||
useSearchForm?: boolean;
|
||||
// 表单配置
|
||||
|
||||
@ -422,8 +422,8 @@
|
||||
class={`${prefixCls}-title pl-2`}
|
||||
onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
|
||||
>
|
||||
{slots?.title ? (
|
||||
getSlot(slots, 'title', item)
|
||||
{item.slots?.title ? (
|
||||
getSlot(slots, item.slots?.title, item)
|
||||
) : (
|
||||
<>
|
||||
{icon && <TreeIcon icon={icon} />}
|
||||
|
||||
@ -187,8 +187,12 @@
|
||||
item.status = UploadResultStatus.UPLOADING;
|
||||
const { data } = await props.api?.(
|
||||
{
|
||||
data: {
|
||||
...(props.uploadParams || {}),
|
||||
},
|
||||
file: item.file,
|
||||
name: props.name,
|
||||
filename: props.filename,
|
||||
},
|
||||
function onUploadProgress(progressEvent: ProgressEvent) {
|
||||
const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
|
||||
|
||||
@ -34,6 +34,14 @@ export const basicProps = {
|
||||
default: null,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String as PropType<string>,
|
||||
default: 'file',
|
||||
},
|
||||
filename: {
|
||||
type: String as PropType<string>,
|
||||
default: null,
|
||||
},
|
||||
};
|
||||
|
||||
export const uploadContainerProps = {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { UnwrapRef, Ref } from 'vue';
|
||||
import type { UnwrapRef, Ref, WritableComputedRef, DeepReadonly } from 'vue';
|
||||
import {
|
||||
reactive,
|
||||
readonly,
|
||||
@ -12,6 +12,13 @@ import {
|
||||
|
||||
import { isEqual } from 'lodash-es';
|
||||
|
||||
export function useRuleFormItem<T extends Recordable, K extends keyof T, V = UnwrapRef<T[K]>>(
|
||||
props: T,
|
||||
key?: K,
|
||||
changeEvent?,
|
||||
emitData?: Ref<any[]>,
|
||||
): [WritableComputedRef<V>, (val: V) => void, DeepReadonly<V>];
|
||||
|
||||
export function useRuleFormItem<T extends Recordable>(
|
||||
props: T,
|
||||
key: keyof T = 'value',
|
||||
|
||||
@ -3,6 +3,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useTitle as usePageTitle } from '@vueuse/core';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useLocaleStore } from '/@/store/modules/locale';
|
||||
|
||||
import { REDIRECT_NAME } from '/@/router/constant';
|
||||
|
||||
@ -13,11 +14,12 @@ export function useTitle() {
|
||||
const { title } = useGlobSetting();
|
||||
const { t } = useI18n();
|
||||
const { currentRoute } = useRouter();
|
||||
const localeStore = useLocaleStore();
|
||||
|
||||
const pageTitle = usePageTitle();
|
||||
|
||||
watch(
|
||||
() => currentRoute.value.path,
|
||||
[() => currentRoute.value.path, () => localeStore.getLocale],
|
||||
() => {
|
||||
const route = unref(currentRoute);
|
||||
|
||||
|
||||
@ -101,12 +101,12 @@
|
||||
if (!meta) {
|
||||
return !!name;
|
||||
}
|
||||
const { title, hideBreadcrumb, hideMenu } = meta;
|
||||
if (!title || hideBreadcrumb || hideMenu) {
|
||||
const { title, hideBreadcrumb } = meta;
|
||||
if (!title || hideBreadcrumb) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}).filter((item) => !item.meta?.hideBreadcrumb || !item.meta?.hideMenu);
|
||||
}).filter((item) => !item.meta?.hideBreadcrumb);
|
||||
}
|
||||
|
||||
function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
|
||||
|
||||
@ -34,18 +34,21 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
|
||||
const { meta } = unref(getTargetTab);
|
||||
const { path } = unref(currentRoute);
|
||||
|
||||
// Refresh button
|
||||
const curItem = state.current;
|
||||
|
||||
const isCurItem = curItem ? curItem.path === path : false;
|
||||
|
||||
// Refresh button
|
||||
const index = state.currentIndex;
|
||||
const refreshDisabled = curItem ? curItem.path !== path : true;
|
||||
const refreshDisabled = !isCurItem;
|
||||
// Close left
|
||||
const closeLeftDisabled = index === 0;
|
||||
const closeLeftDisabled = index === 0 || !isCurItem;
|
||||
|
||||
const disabled = tabStore.getTabList.length === 1;
|
||||
|
||||
// Close right
|
||||
const closeRightDisabled =
|
||||
index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0;
|
||||
!isCurItem || (index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0);
|
||||
const dropMenuList: DropMenu[] = [
|
||||
{
|
||||
icon: 'ion:reload-sharp',
|
||||
@ -78,7 +81,7 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
|
||||
icon: 'dashicons:align-center',
|
||||
event: MenuEventEnum.CLOSE_OTHER,
|
||||
text: t('layout.multipleTab.closeOther'),
|
||||
disabled: disabled,
|
||||
disabled: disabled || !isCurItem,
|
||||
},
|
||||
{
|
||||
icon: 'clarity:minus-line',
|
||||
|
||||
@ -84,6 +84,7 @@ export default {
|
||||
breadcrumb: 'Breadcrumbs',
|
||||
breadcrumbIcon: 'Breadcrumbs Icon',
|
||||
tabs: 'Tabs',
|
||||
tabDetail: 'Tab Detail',
|
||||
tabsQuickBtn: 'Tabs quick button',
|
||||
tabsRedoBtn: 'Tabs redo button',
|
||||
tabsFoldBtn: 'Tabs flod button',
|
||||
|
||||
@ -67,6 +67,7 @@ export default {
|
||||
feat: 'Page Function',
|
||||
icon: 'Icon',
|
||||
tabs: 'Tabs',
|
||||
tabDetail: 'Tab Detail',
|
||||
sessionTimeout: 'Session Timeout',
|
||||
print: 'Print',
|
||||
contextMenu: 'Context Menu',
|
||||
|
||||
@ -84,6 +84,7 @@ export default {
|
||||
breadcrumb: '面包屑',
|
||||
breadcrumbIcon: '面包屑图标',
|
||||
tabs: '标签页',
|
||||
tabDetail: '标签详情页',
|
||||
tabsQuickBtn: '标签页快捷按钮',
|
||||
tabsRedoBtn: '标签页刷新按钮',
|
||||
tabsFoldBtn: '标签页折叠按钮',
|
||||
|
||||
@ -67,6 +67,7 @@ export default {
|
||||
icon: '图标',
|
||||
sessionTimeout: '登录过期',
|
||||
tabs: '标签页操作',
|
||||
tabDetail: '标签详情页',
|
||||
print: '打印',
|
||||
contextMenu: '右键菜单',
|
||||
download: '文件下载',
|
||||
|
||||
@ -4,7 +4,7 @@ export const PARENT_LAYOUT_NAME = 'ParentLayout';
|
||||
|
||||
export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
|
||||
|
||||
export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');
|
||||
export const EXCEPTION_COMPONENT = () => import('/@/views/sys/exception/Exception.vue');
|
||||
|
||||
/**
|
||||
* @description: default layout
|
||||
|
||||
@ -8,12 +8,12 @@ import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
|
||||
|
||||
export function createStateGuard(router: Router) {
|
||||
router.afterEach((to) => {
|
||||
// Just enter the login page and clear the authentication information
|
||||
if (to.path === PageEnum.BASE_LOGIN) {
|
||||
const tabStore = useMultipleTabStore();
|
||||
const userStore = useUserStore();
|
||||
const appStore = useAppStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
// Just enter the login page and clear the authentication information
|
||||
if (to.path === PageEnum.BASE_LOGIN) {
|
||||
appStore.resetAllState();
|
||||
permissionStore.resetState();
|
||||
tabStore.resetState();
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
|
||||
import type { Router, RouteRecordNormalized } from 'vue-router';
|
||||
|
||||
import { getParentLayout, LAYOUT } from '/@/router/constant';
|
||||
import { getParentLayout, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
|
||||
import { cloneDeep, omit } from 'lodash-es';
|
||||
import { warn } from '/@/utils/log';
|
||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||
@ -27,7 +27,7 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
|
||||
const { component, name } = item;
|
||||
const { children } = item;
|
||||
if (component) {
|
||||
const layoutFound = LayoutMap.get(component as string);
|
||||
const layoutFound = LayoutMap.get(component.toUpperCase());
|
||||
if (layoutFound) {
|
||||
item.component = layoutFound;
|
||||
} else {
|
||||
@ -46,20 +46,24 @@ function dynamicImport(
|
||||
) {
|
||||
const keys = Object.keys(dynamicViewsModules);
|
||||
const matchKeys = keys.filter((key) => {
|
||||
let k = key.replace('../../views', '');
|
||||
const lastIndex = k.lastIndexOf('.');
|
||||
k = k.substring(0, lastIndex);
|
||||
return k === component;
|
||||
const k = key.replace('../../views', '');
|
||||
const startFlag = component.startsWith('/');
|
||||
const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
|
||||
const startIndex = startFlag ? 0 : 1;
|
||||
const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
|
||||
return k.substring(startIndex, lastIndex) === component;
|
||||
});
|
||||
if (matchKeys?.length === 1) {
|
||||
const matchKey = matchKeys[0];
|
||||
return dynamicViewsModules[matchKey];
|
||||
}
|
||||
if (matchKeys?.length > 1) {
|
||||
} else if (matchKeys?.length > 1) {
|
||||
warn(
|
||||
'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure',
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
warn('在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!');
|
||||
return EXCEPTION_COMPONENT;
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,6 +84,8 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul
|
||||
meta.affix = false;
|
||||
route.meta = meta;
|
||||
}
|
||||
} else {
|
||||
warn('请正确配置路由：' + route?.name + '的component属性');
|
||||
}
|
||||
route.children && asyncImportRoute(route.children);
|
||||
});
|
||||
|
||||
@ -21,15 +21,21 @@ export default {
|
||||
pageSizeOptions: ['10', '50', '80', '100'],
|
||||
// Default display quantity on one page
|
||||
defaultPageSize: 10,
|
||||
// Default Size
|
||||
defaultSize: 'middle',
|
||||
// Custom general sort function
|
||||
defaultSortFn: (sortInfo: SorterResult) => {
|
||||
const { field, order } = sortInfo;
|
||||
if (field && order) {
|
||||
return {
|
||||
// The sort field passed to the backend you
|
||||
field,
|
||||
// Sorting method passed to the background asc/desc
|
||||
order,
|
||||
};
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// Custom general filter function
|
||||
defaultFilterFn: (data: Partial<Recordable<string[]>>) => {
|
||||
|
||||
@ -26,6 +26,15 @@ function handleGotoPage(router: Router) {
|
||||
go(unref(router.currentRoute).path, true);
|
||||
}
|
||||
|
||||
const getToTarget = (tabItem: RouteLocationNormalized) => {
|
||||
const { params, path, query } = tabItem;
|
||||
return {
|
||||
params: params || {},
|
||||
path,
|
||||
query: query || {},
|
||||
};
|
||||
};
|
||||
|
||||
const cacheTab = projectSetting.multiTabsSetting.cache;
|
||||
|
||||
export const useMultipleTabStore = defineStore({
|
||||
@ -110,7 +119,7 @@ export const useMultipleTabStore = defineStore({
|
||||
},
|
||||
|
||||
async addTab(route: RouteLocationNormalized) {
|
||||
const { path, name, fullPath, params, query } = getRawRoute(route);
|
||||
const { path, name, fullPath, params, query, meta } = getRawRoute(route);
|
||||
// 404 The page does not need to add a tab
|
||||
if (
|
||||
path === PageEnum.ERROR_PAGE ||
|
||||
@ -140,6 +149,22 @@ export const useMultipleTabStore = defineStore({
|
||||
this.tabList.splice(updateIndex, 1, curTab);
|
||||
} else {
|
||||
// Add tab
|
||||
// 获取动态路由打开数，超过 0 即代表需要控制打开数
|
||||
const dynamicLevel = meta?.dynamicLevel ?? -1;
|
||||
if (dynamicLevel > 0) {
|
||||
// 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
|
||||
// 首先获取到真实的路由，使用配置方式减少计算开销.
|
||||
// const realName: string = path.match(/(\S*)\//)![1];
|
||||
const realPath = meta?.realPath ?? '';
|
||||
// 获取到已经打开的动态路由数, 判断是否大于某一个值
|
||||
if (
|
||||
this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath).length >= dynamicLevel
|
||||
) {
|
||||
// 关闭第一个
|
||||
const index = this.tabList.findIndex((item) => item.meta.realPath === realPath);
|
||||
index !== -1 && this.tabList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
this.tabList.push(route);
|
||||
}
|
||||
this.updateCacheTab();
|
||||
@ -147,15 +172,6 @@ export const useMultipleTabStore = defineStore({
|
||||
},
|
||||
|
||||
async closeTab(tab: RouteLocationNormalized, router: Router) {
|
||||
const getToTarget = (tabItem: RouteLocationNormalized) => {
|
||||
const { params, path, query } = tabItem;
|
||||
return {
|
||||
params: params || {},
|
||||
path,
|
||||
query: query || {},
|
||||
};
|
||||
};
|
||||
|
||||
const close = (route: RouteLocationNormalized) => {
|
||||
const { fullPath, meta: { affix } = {} } = route;
|
||||
if (affix) {
|
||||
@ -196,13 +212,36 @@ export const useMultipleTabStore = defineStore({
|
||||
toTarget = getToTarget(page);
|
||||
}
|
||||
close(currentRoute.value);
|
||||
replace(toTarget);
|
||||
await replace(toTarget);
|
||||
},
|
||||
|
||||
// Close according to key
|
||||
async closeTabByKey(key: string, router: Router) {
|
||||
const index = this.tabList.findIndex((item) => (item.fullPath || item.path) === key);
|
||||
index !== -1 && this.closeTab(this.tabList[index], router);
|
||||
if (index !== -1) {
|
||||
await this.closeTab(this.tabList[index], router);
|
||||
const { currentRoute, replace } = router;
|
||||
// 检查当前路由是否存在于tabList中
|
||||
const isActivated = this.tabList.findIndex((item) => {
|
||||
return item.fullPath === currentRoute.value.fullPath;
|
||||
});
|
||||
// 如果当前路由不存在于TabList中，尝试切换到其它路由
|
||||
if (isActivated === -1) {
|
||||
let pageIndex;
|
||||
if (index > 0) {
|
||||
pageIndex = index - 1;
|
||||
} else if (index < this.tabList.length - 1) {
|
||||
pageIndex = index + 1;
|
||||
} else {
|
||||
pageIndex = -1;
|
||||
}
|
||||
if (pageIndex >= 0) {
|
||||
const page = this.tabList[index - 1];
|
||||
const toTarget = getToTarget(page);
|
||||
await replace(toTarget);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Sort the tabs
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios';
|
||||
import type { RequestOptions, Result, UploadFileParams } from '../../../../types/axios';
|
||||
import type { RequestOptions, Result, UploadFileParams } from '/#/axios';
|
||||
import type { CreateAxiosOptions } from './axiosTransform';
|
||||
import axios from 'axios';
|
||||
import qs from 'qs';
|
||||
import { AxiosCanceler } from './axiosCancel';
|
||||
import { isFunction } from '/@/utils/is';
|
||||
import { cloneDeep, omit } from 'lodash-es';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { ContentTypeEnum } from '/@/enums/httpEnum';
|
||||
import { RequestEnum } from '/@/enums/httpEnum';
|
||||
|
||||
@ -121,11 +121,17 @@ export class VAxios {
|
||||
*/
|
||||
uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
|
||||
const formData = new window.FormData();
|
||||
const customFilename = params.name || 'file';
|
||||
|
||||
if (params.filename) {
|
||||
formData.append(customFilename, params.file, params.filename);
|
||||
} else {
|
||||
formData.append(customFilename, params.file);
|
||||
}
|
||||
|
||||
if (params.data) {
|
||||
Object.keys(params.data).forEach((key) => {
|
||||
if (!params.data) return;
|
||||
const value = params.data[key];
|
||||
const value = params.data![key];
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
formData.append(`${key}[]`, item);
|
||||
@ -133,15 +139,9 @@ export class VAxios {
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append(key, params.data[key]);
|
||||
formData.append(key, params.data![key]);
|
||||
});
|
||||
}
|
||||
formData.append(params.name || 'file', params.file, params.filename);
|
||||
const customParams = omit(params, 'file', 'filename', 'file');
|
||||
|
||||
Object.keys(customParams).forEach((key) => {
|
||||
formData.append(key, customParams[key]);
|
||||
});
|
||||
|
||||
return this.axiosInstance.request<T>({
|
||||
...config,
|
||||
|
||||
@ -15,6 +15,7 @@ import { setObjToUrlParams, deepMerge } from '/@/utils';
|
||||
import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { joinTimestamp, formatRequestDate } from './helper';
|
||||
import { useUserStoreWithOut } from '/@/store/modules/user';
|
||||
|
||||
const globSetting = useGlobSetting();
|
||||
const urlPrefix = globSetting.urlPrefix;
|
||||
@ -61,6 +62,9 @@ const transform: AxiosTransform = {
|
||||
switch (code) {
|
||||
case ResultEnum.TIMEOUT:
|
||||
timeoutMsg = t('sys.api.timeoutMessage');
|
||||
const userStore = useUserStoreWithOut();
|
||||
userStore.setToken(undefined);
|
||||
userStore.logout(true);
|
||||
break;
|
||||
default:
|
||||
if (message) {
|
||||
@ -136,7 +140,7 @@ const transform: AxiosTransform = {
|
||||
const token = getToken();
|
||||
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
|
||||
// jwt token
|
||||
config.headers.Authorization = options.authenticationScheme
|
||||
(config as Recordable).headers.Authorization = options.authenticationScheme
|
||||
? `${options.authenticationScheme} ${token}`
|
||||
: token;
|
||||
}
|
||||
@ -180,7 +184,7 @@ const transform: AxiosTransform = {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
throw new Error(error as unknown as string);
|
||||
}
|
||||
|
||||
checkStatus(error?.response?.status, msg, errorMessageMode);
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
</Form>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, toRaw, unref, computed } from 'vue';
|
||||
import { reactive, ref, unref, computed } from 'vue';
|
||||
|
||||
import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
|
||||
import {
|
||||
@ -134,13 +134,11 @@
|
||||
if (!data) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const userInfo = await userStore.login(
|
||||
toRaw({
|
||||
const userInfo = await userStore.login({
|
||||
password: data.password,
|
||||
username: data.account,
|
||||
mode: 'none', //不要默认的错误提示
|
||||
}),
|
||||
);
|
||||
});
|
||||
if (userInfo) {
|
||||
notification.success({
|
||||
message: t('sys.login.loginSuccessTitle'),
|
||||
@ -151,7 +149,7 @@
|
||||
} catch (error) {
|
||||
createErrorModal({
|
||||
title: t('sys.api.errorTip'),
|
||||
content: error.message || t('sys.api.networkExceptionMsg'),
|
||||
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
|
||||
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
|
||||
});
|
||||
} finally {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"fs-extra": "^10.0.0",
|
||||
"koa": "^2.13.1",
|
||||
"koa": "^2.13.4",
|
||||
"koa-body": "^4.2.0",
|
||||
"koa-bodyparser": "^4.3.0",
|
||||
"koa-route": "^3.2.0",
|
||||
@ -24,13 +24,13 @@
|
||||
"@types/koa": "^2.13.4",
|
||||
"@types/koa-bodyparser": "^5.0.2",
|
||||
"@types/koa-router": "^7.4.4",
|
||||
"@types/node": "^16.9.1",
|
||||
"nodemon": "^2.0.12",
|
||||
"pm2": "^5.1.1",
|
||||
"@types/node": "^16.11.1",
|
||||
"nodemon": "^2.0.14",
|
||||
"pm2": "^5.1.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-node": "^10.2.1",
|
||||
"ts-node": "^10.3.0",
|
||||
"tsconfig-paths": "^3.11.0",
|
||||
"tsup": "^4.14.0",
|
||||
"typescript": "^4.4.3"
|
||||
"tsup": "^5.4.2",
|
||||
"typescript": "^4.4.4"
|
||||
}
|
||||
}
|
||||
|
||||
4
types/vue-router.d.ts
vendored
4
types/vue-router.d.ts
vendored
@ -5,6 +5,10 @@ declare module 'vue-router' {
|
||||
orderNo?: number;
|
||||
// title
|
||||
title: string;
|
||||
// dynamic router level.
|
||||
dynamicLevel?: number;
|
||||
// dynamic router real route path (For performance).
|
||||
realPath?: string;
|
||||
// Whether to ignore permissions
|
||||
ignoreAuth?: boolean;
|
||||
// role info
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import colors from 'windicss/colors';
|
||||
import { defineConfig } from 'vite-plugin-windicss';
|
||||
import { primaryColor } from './build/config/themeConfig';
|
||||
|
||||
@ -11,7 +10,6 @@ export default defineConfig({
|
||||
'-1': '-1',
|
||||
},
|
||||
colors: {
|
||||
...colors,
|
||||
primary: primaryColor,
|
||||
},
|
||||
screens: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user