Browse Source
* upgrade electron version:11->18. upgrade electron version:11->18. Packaging failed because the original electronic version was too old. 将electron 11 改成18.因为11太老导致打包错误。 * main->electron-main合并代码 * main->electron-main合并代码 * main->electron-main合并代码electron-v2
sanmen359
4 years ago
committed by
GitHub
GitHub
276 changed files with 9306 additions and 7202 deletions
@ -1,8 +0,0 @@ |
|||
module.exports = { |
|||
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'], |
|||
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'], |
|||
'package.json': ['prettier --write'], |
|||
'*.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'], |
|||
'*.{scss,less,styl,html}': ['stylelint --fix', 'prettier --write'], |
|||
'*.md': ['prettier --write'], |
|||
}; |
|||
@ -1,48 +0,0 @@ |
|||
# test directories |
|||
__tests__ |
|||
test |
|||
tests |
|||
powered-test |
|||
|
|||
# asset directories |
|||
docs |
|||
doc |
|||
website |
|||
images |
|||
assets |
|||
|
|||
# examples |
|||
example |
|||
examples |
|||
|
|||
# code coverage directories |
|||
coverage |
|||
.nyc_output |
|||
|
|||
# build scripts |
|||
Makefile |
|||
Gulpfile.js |
|||
Gruntfile.js |
|||
|
|||
# configs |
|||
appveyor.yml |
|||
circle.yml |
|||
codeship-services.yml |
|||
codeship-steps.yml |
|||
wercker.yml |
|||
.tern-project |
|||
.gitattributes |
|||
.editorconfig |
|||
.*ignore |
|||
.eslintrc |
|||
.jshintrc |
|||
.flowconfig |
|||
.documentup.json |
|||
.yarn-metadata.json |
|||
.travis.yml |
|||
|
|||
# misc |
|||
*.md |
|||
|
|||
!istanbul-reports/lib/html/assets |
|||
!istanbul-api/node_modules/istanbul-reports/lib/html/assets |
|||
@ -1,21 +0,0 @@ |
|||
// TODO
|
|||
import type { GetManualChunk } from 'rollup'; |
|||
|
|||
//
|
|||
const vendorLibs: { match: string[]; output: string }[] = [ |
|||
// {
|
|||
// match: ['xlsx'],
|
|||
// output: 'xlsx',
|
|||
// },
|
|||
]; |
|||
|
|||
// @ts-ignore
|
|||
export const configManualChunk: GetManualChunk = (id: string) => { |
|||
if (/[\\/]node_modules[\\/]/.test(id)) { |
|||
const matchItem = vendorLibs.find((item) => { |
|||
const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig'); |
|||
return reg.test(id); |
|||
}); |
|||
return matchItem ? matchItem.output : null; |
|||
} |
|||
}; |
|||
@ -1,25 +0,0 @@ |
|||
import type { Plugin } from 'vite'; |
|||
|
|||
/** |
|||
* TODO |
|||
* Temporarily solve the Vite circular dependency problem, and wait for a better solution to fix it later. I don't know what problems this writing will bring. |
|||
* @returns |
|||
*/ |
|||
|
|||
export function configHmrPlugin(): Plugin { |
|||
return { |
|||
name: 'singleHMR', |
|||
handleHotUpdate({ modules, file }) { |
|||
if (file.match(/xml$/)) return []; |
|||
|
|||
modules.forEach((m) => { |
|||
if (!m.url.match(/\.(css|less)/)) { |
|||
m.importedModules = new Set(); |
|||
m.importers = new Set(); |
|||
} |
|||
}); |
|||
|
|||
return modules; |
|||
}, |
|||
}; |
|||
} |
|||
@ -1,36 +0,0 @@ |
|||
export default { |
|||
preset: 'ts-jest', |
|||
roots: ['<rootDir>/tests/'], |
|||
clearMocks: true, |
|||
moduleDirectories: ['node_modules', 'src'], |
|||
moduleFileExtensions: ['js', 'ts', 'vue', 'tsx', 'jsx', 'json', 'node'], |
|||
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'], |
|||
testMatch: [ |
|||
'**/tests/**/*.[jt]s?(x)', |
|||
'**/?(*.)+(spec|test).[tj]s?(x)', |
|||
'(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$', |
|||
], |
|||
testPathIgnorePatterns: [ |
|||
'<rootDir>/tests/server/', |
|||
'<rootDir>/tests/__mocks__/', |
|||
'/node_modules/', |
|||
], |
|||
transform: { |
|||
'^.+\\.tsx?$': 'ts-jest', |
|||
}, |
|||
transformIgnorePatterns: ['<rootDir>/tests/__mocks__/', '/node_modules/'], |
|||
// A map from regular expressions to module names that allow to stub out resources with a single module
|
|||
moduleNameMapper: { |
|||
'\\.(vs|fs|vert|frag|glsl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': |
|||
'<rootDir>/tests/__mocks__/fileMock.ts', |
|||
'\\.(sass|s?css|less)$': '<rootDir>/tests/__mocks__/styleMock.ts', |
|||
'\\?worker$': '<rootDir>/tests/__mocks__/workerMock.ts', |
|||
'^/@/(.*)$': '<rootDir>/src/$1', |
|||
}, |
|||
testEnvironment: 'jsdom', |
|||
verbose: true, |
|||
collectCoverage: false, |
|||
coverageDirectory: 'coverage', |
|||
collectCoverageFrom: ['src/**/*.{js,ts,vue}'], |
|||
coveragePathIgnorePatterns: ['^.+\\.d\\.ts$'], |
|||
}; |
|||
@ -0,0 +1,325 @@ |
|||
import { MockMethod } from 'vite-plugin-mock'; |
|||
import { resultSuccess } from '../_util'; |
|||
|
|||
const areaList: any[] = [ |
|||
{ |
|||
id: '530825900854620160', |
|||
code: '430000', |
|||
parentCode: '100000', |
|||
levelType: 1, |
|||
name: '湖南省', |
|||
province: '湖南省', |
|||
city: null, |
|||
district: null, |
|||
town: null, |
|||
village: null, |
|||
parentPath: '430000', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 16:33:42', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530825900883980288', |
|||
code: '430100', |
|||
parentCode: '430000', |
|||
levelType: 2, |
|||
name: '长沙市', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: null, |
|||
town: null, |
|||
village: null, |
|||
parentPath: '430000,430100', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 16:33:42', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530825900951089152', |
|||
code: '430102', |
|||
parentCode: '430100', |
|||
levelType: 3, |
|||
name: '芙蓉区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '芙蓉区', |
|||
town: null, |
|||
village: null, |
|||
parentPath: '430000,430100,430102', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 16:33:42', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530825901014003712', |
|||
code: '430104', |
|||
parentCode: '430100', |
|||
levelType: 3, |
|||
name: '岳麓区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '岳麓区', |
|||
town: null, |
|||
village: null, |
|||
parentPath: '430000,430100,430104', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 16:33:42', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530825900988837888', |
|||
code: '430103', |
|||
parentCode: '430100', |
|||
levelType: 3, |
|||
name: '天心区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: null, |
|||
village: null, |
|||
parentPath: '430000,430100,430103', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 16:33:42', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530826672489115648', |
|||
code: '430103002', |
|||
parentCode: '430103', |
|||
levelType: 4, |
|||
name: '坡子街街道', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: null, |
|||
parentPath: '430000,430100,430103,430103002', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-12-14 15:26:43', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241171607552', |
|||
code: '430103002001', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '八角亭社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '八角亭社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002001', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2021-01-20 14:07:23', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241200967680', |
|||
code: '430103002002', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '西牌楼社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '西牌楼社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002002', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241230327808', |
|||
code: '430103002003', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '太平街社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '太平街社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002003', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241259687936', |
|||
code: '430103002005', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '坡子街社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '坡子街社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002005', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241284853760', |
|||
code: '430103002006', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '青山祠社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '青山祠社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002006', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241310019584', |
|||
code: '430103002007', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '沙河社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '沙河社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002007', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241381322752', |
|||
code: '430103002008', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '碧湘社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '碧湘社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002008', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241410682880', |
|||
code: '430103002009', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '创远社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '创远社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002009', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241431654400', |
|||
code: '430103002010', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '楚湘社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '楚湘社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002010', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241465208832', |
|||
code: '430103002011', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '西湖社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '西湖社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002011', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241502957568', |
|||
code: '430103002012', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '登仁桥社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '登仁桥社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002012', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
{ |
|||
id: '530840241553289216', |
|||
code: '430103002013', |
|||
parentCode: '430103002', |
|||
levelType: 5, |
|||
name: '文庙坪社区', |
|||
province: '湖南省', |
|||
city: '长沙市', |
|||
district: '天心区', |
|||
town: '坡子街街道', |
|||
village: '文庙坪社区', |
|||
parentPath: '430000,430100,430103,430103002,430103002013', |
|||
createTime: '2020-11-30 15:47:31', |
|||
updateTime: '2020-11-30 17:30:41', |
|||
customized: false, |
|||
usable: true, |
|||
}, |
|||
]; |
|||
export default [ |
|||
{ |
|||
url: '/basic-api/cascader/getAreaRecord', |
|||
timeout: 1000, |
|||
method: 'post', |
|||
response: ({ body }) => { |
|||
const { parentCode } = body || {}; |
|||
if (!parentCode) { |
|||
return resultSuccess(areaList.filter((it) => it.code === '430000')); |
|||
} |
|||
return resultSuccess(areaList.filter((it) => it.parentCode === parentCode)); |
|||
}, |
|||
}, |
|||
] as MockMethod[]; |
|||
@ -0,0 +1,9 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { AreaModel, AreaParams } from '/@/api/demo/model/areaModel'; |
|||
|
|||
enum Api { |
|||
AREA_RECORD = '/cascader/getAreaRecord', |
|||
} |
|||
|
|||
export const areaRecord = (data: AreaParams) => |
|||
defHttp.post<AreaModel>({ url: Api.AREA_RECORD, data }); |
|||
@ -0,0 +1,12 @@ |
|||
export interface AreaModel { |
|||
id: string; |
|||
code: string; |
|||
parentCode: string; |
|||
name: string; |
|||
levelType: number; |
|||
[key: string]: string | number; |
|||
} |
|||
|
|||
export interface AreaParams { |
|||
parentCode: string; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
export enum MODE { |
|||
JSON = 'application/json', |
|||
HTML = 'htmlmixed', |
|||
JS = 'javascript', |
|||
} |
|||
@ -0,0 +1,198 @@ |
|||
<template> |
|||
<a-cascader |
|||
v-model:value="state" |
|||
:options="options" |
|||
:load-data="loadData" |
|||
change-on-select |
|||
@change="handleChange" |
|||
:displayRender="handleRenderDisplay" |
|||
> |
|||
<template #suffixIcon v-if="loading"> |
|||
<LoadingOutlined spin /> |
|||
</template> |
|||
<template #notFoundContent v-if="loading"> |
|||
<span> |
|||
<LoadingOutlined spin class="mr-1" /> |
|||
{{ t('component.form.apiSelectNotFound') }} |
|||
</span> |
|||
</template> |
|||
</a-cascader> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, PropType, ref, unref, watch, watchEffect } from 'vue'; |
|||
import { Cascader } from 'ant-design-vue'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { isFunction } from '/@/utils/is'; |
|||
import { get, omit } from 'lodash-es'; |
|||
import { useRuleFormItem } from '/@/hooks/component/useFormItem'; |
|||
import { LoadingOutlined } from '@ant-design/icons-vue'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
interface Option { |
|||
value: string; |
|||
label: string; |
|||
loading?: boolean; |
|||
isLeaf?: boolean; |
|||
children?: Option[]; |
|||
} |
|||
export default defineComponent({ |
|||
name: 'ApiCascader', |
|||
components: { |
|||
LoadingOutlined, |
|||
[Cascader.name]: Cascader, |
|||
}, |
|||
props: { |
|||
value: { |
|||
type: Array, |
|||
}, |
|||
api: { |
|||
type: Function as PropType<(arg?: Recordable) => Promise<Option[]>>, |
|||
default: null, |
|||
}, |
|||
numberToString: propTypes.bool, |
|||
resultField: propTypes.string.def(''), |
|||
labelField: propTypes.string.def('label'), |
|||
valueField: propTypes.string.def('value'), |
|||
childrenField: propTypes.string.def('children'), |
|||
asyncFetchParamKey: propTypes.string.def('parentCode'), |
|||
immediate: propTypes.bool.def(true), |
|||
// init fetch params |
|||
initFetchParams: { |
|||
type: Object as PropType<Recordable>, |
|||
default: () => ({}), |
|||
}, |
|||
// 是否有下级，默认是 |
|||
isLeaf: { |
|||
type: Function as PropType<(arg: Recordable) => boolean>, |
|||
default: null, |
|||
}, |
|||
displayRenderArray: { |
|||
type: Array, |
|||
}, |
|||
}, |
|||
emits: ['change', 'defaultChange'], |
|||
setup(props, { emit }) { |
|||
const apiData = ref<any[]>([]); |
|||
const options = ref<Option[]>([]); |
|||
const loading = ref<boolean>(false); |
|||
const emitData = ref<any[]>([]); |
|||
const isFirstLoad = ref(true); |
|||
const { t } = useI18n(); |
|||
// Embedded in the form, just use the hook binding to perform form verification |
|||
const [state] = useRuleFormItem(props, 'value', 'change', emitData); |
|||
|
|||
watch( |
|||
apiData, |
|||
(data) => { |
|||
const opts = generatorOptions(data); |
|||
options.value = opts; |
|||
}, |
|||
{ deep: true }, |
|||
); |
|||
|
|||
function generatorOptions(options: any[]): Option[] { |
|||
const { labelField, valueField, numberToString, childrenField, isLeaf } = props; |
|||
return options.reduce((prev, next: Recordable) => { |
|||
if (next) { |
|||
const value = next[valueField]; |
|||
const item = { |
|||
...omit(next, [labelField, valueField]), |
|||
label: next[labelField], |
|||
value: numberToString ? `${value}` : value, |
|||
isLeaf: isLeaf && typeof isLeaf === 'function' ? isLeaf(next) : false, |
|||
}; |
|||
const children = Reflect.get(next, childrenField); |
|||
if (children) { |
|||
Reflect.set(item, childrenField, generatorOptions(children)); |
|||
} |
|||
prev.push(item); |
|||
} |
|||
return prev; |
|||
}, [] as Option[]); |
|||
} |
|||
|
|||
async function initialFetch() { |
|||
const api = props.api; |
|||
if (!api || !isFunction(api)) return; |
|||
apiData.value = []; |
|||
loading.value = true; |
|||
try { |
|||
const res = await api(props.initFetchParams); |
|||
if (Array.isArray(res)) { |
|||
apiData.value = res; |
|||
return; |
|||
} |
|||
if (props.resultField) { |
|||
apiData.value = get(res, props.resultField) || []; |
|||
} |
|||
} catch (error) { |
|||
console.warn(error); |
|||
} finally { |
|||
loading.value = false; |
|||
} |
|||
} |
|||
|
|||
async function loadData(selectedOptions: Option[]) { |
|||
const targetOption = selectedOptions[selectedOptions.length - 1]; |
|||
targetOption.loading = true; |
|||
|
|||
const api = props.api; |
|||
if (!api || !isFunction(api)) return; |
|||
try { |
|||
const res = await api({ |
|||
[props.asyncFetchParamKey]: Reflect.get(targetOption, 'value'), |
|||
}); |
|||
if (Array.isArray(res)) { |
|||
const children = generatorOptions(res); |
|||
targetOption.children = children; |
|||
return; |
|||
} |
|||
if (props.resultField) { |
|||
const children = generatorOptions(get(res, props.resultField) || []); |
|||
targetOption.children = children; |
|||
} |
|||
} catch (e) { |
|||
console.error(e); |
|||
} finally { |
|||
targetOption.loading = false; |
|||
} |
|||
} |
|||
|
|||
watchEffect(() => { |
|||
props.immediate && initialFetch(); |
|||
}); |
|||
|
|||
watch( |
|||
() => props.initFetchParams, |
|||
() => { |
|||
!unref(isFirstLoad) && initialFetch(); |
|||
}, |
|||
{ deep: true }, |
|||
); |
|||
|
|||
function handleChange(keys, args) { |
|||
emitData.value = keys; |
|||
emit('defaultChange', keys, args); |
|||
} |
|||
|
|||
function handleRenderDisplay({ labels, selectedOptions }) { |
|||
if (unref(emitData).length === selectedOptions.length) { |
|||
return labels.join(' / '); |
|||
} |
|||
if (props.displayRenderArray) { |
|||
return props.displayRenderArray.join(' / '); |
|||
} |
|||
return ''; |
|||
} |
|||
|
|||
return { |
|||
state, |
|||
options, |
|||
loading, |
|||
t, |
|||
handleChange, |
|||
loadData, |
|||
handleRenderDisplay, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -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> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<a-tree v-bind="getAttrs" @change="handleChange"> |
|||
<template #[item]="data" v-for="item in Object.keys($slots)"> |
|||
<slot :name="item" v-bind="data || {}"></slot> |
|||
</template> |
|||
<template #suffixIcon v-if="loading"> |
|||
<LoadingOutlined spin /> |
|||
</template> |
|||
</a-tree> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue'; |
|||
import { Tree } from 'ant-design-vue'; |
|||
import { isArray, isFunction } from '/@/utils/is'; |
|||
import { get } from 'lodash-es'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
import { LoadingOutlined } from '@ant-design/icons-vue'; |
|||
export default defineComponent({ |
|||
name: 'ApiTree', |
|||
components: { ATree: Tree, LoadingOutlined }, |
|||
props: { |
|||
api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> }, |
|||
params: { type: Object }, |
|||
immediate: { type: Boolean, default: true }, |
|||
resultField: propTypes.string.def(''), |
|||
afterFetch: { type: Function as PropType<Fn> }, |
|||
}, |
|||
emits: ['options-change', 'change'], |
|||
setup(props, { attrs, emit }) { |
|||
const treeData = ref<Recordable[]>([]); |
|||
const isFirstLoaded = ref<Boolean>(false); |
|||
const loading = ref(false); |
|||
const getAttrs = computed(() => { |
|||
return { |
|||
...(props.api ? { treeData: unref(treeData) } : {}), |
|||
...attrs, |
|||
}; |
|||
}); |
|||
|
|||
function handleChange(...args) { |
|||
emit('change', ...args); |
|||
} |
|||
|
|||
watch( |
|||
() => props.params, |
|||
() => { |
|||
!unref(isFirstLoaded) && fetch(); |
|||
}, |
|||
{ deep: true }, |
|||
); |
|||
|
|||
watch( |
|||
() => props.immediate, |
|||
(v) => { |
|||
v && !isFirstLoaded.value && fetch(); |
|||
}, |
|||
); |
|||
|
|||
onMounted(() => { |
|||
props.immediate && fetch(); |
|||
}); |
|||
|
|||
async function fetch() { |
|||
const { api, afterFetch } = props; |
|||
if (!api || !isFunction(api)) return; |
|||
loading.value = true; |
|||
treeData.value = []; |
|||
let result; |
|||
try { |
|||
result = await api(props.params); |
|||
} catch (e) { |
|||
console.error(e); |
|||
} |
|||
if (afterFetch && isFunction(afterFetch)) { |
|||
result = afterFetch(result); |
|||
} |
|||
loading.value = false; |
|||
if (!result) return; |
|||
if (!isArray(result)) { |
|||
result = get(result, props.resultField); |
|||
} |
|||
treeData.value = (result as Recordable[]) || []; |
|||
isFirstLoaded.value = true; |
|||
emit('options-change', treeData.value); |
|||
} |
|||
return { getAttrs, loading, handleChange }; |
|||
}, |
|||
}); |
|||
</script> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue