复制组件
This commit is contained in:
parent
e81895f62e
commit
d6ed7e354c
|
|
@ -40,12 +40,16 @@ declare module 'vue' {
|
||||||
ATabs: typeof import('ant-design-vue/es')['Tabs']
|
ATabs: typeof import('ant-design-vue/es')['Tabs']
|
||||||
ATag: typeof import('ant-design-vue/es')['Tag']
|
ATag: typeof import('ant-design-vue/es')['Tag']
|
||||||
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
|
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
|
||||||
|
FormProMax: typeof import('./src/components/form/FormProMax.vue')['default']
|
||||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||||
|
IconFont: typeof import('./src/components/iconfont/IconFont.vue')['default']
|
||||||
Layout: typeof import('./src/components/layout/layout.vue')['default']
|
Layout: typeof import('./src/components/layout/layout.vue')['default']
|
||||||
LayoutHeader: typeof import('./src/components/layout/header/LayoutHeader.vue')['default']
|
LayoutHeader: typeof import('./src/components/layout/header/LayoutHeader.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
SingleImageFileUpload: typeof import('./src/components/upload/SingleImageFileUpload.vue')['default']
|
||||||
Sliber: typeof import('./src/components/layout/sliber/sliber.vue')['default']
|
Sliber: typeof import('./src/components/layout/sliber/sliber.vue')['default']
|
||||||
|
TableProMax: typeof import('./src/components/table/TableProMax.vue')['default']
|
||||||
TelephoneLogin: typeof import('./src/components/login/TelephoneLogin.vue')['default']
|
TelephoneLogin: typeof import('./src/components/login/TelephoneLogin.vue')['default']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -734,6 +734,21 @@
|
||||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@types/lodash": {
|
||||||
|
"version": "4.17.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
|
||||||
|
"integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"@types/lodash-es": {
|
||||||
|
"version": "4.17.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
|
||||||
|
"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@types/lodash": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "22.5.1",
|
"version": "22.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
|
||||||
|
|
@ -743,6 +758,11 @@
|
||||||
"undici-types": "~6.19.2"
|
"undici-types": "~6.19.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@types/uuid": {
|
||||||
|
"version": "8.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
|
||||||
|
"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
|
||||||
|
},
|
||||||
"@vitejs/plugin-vue": {
|
"@vitejs/plugin-vue": {
|
||||||
"version": "5.1.3",
|
"version": "5.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
|
||||||
|
|
@ -2332,6 +2352,11 @@
|
||||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"uuid": {
|
||||||
|
"version": "8.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||||
|
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||||
|
},
|
||||||
"vite": {
|
"vite": {
|
||||||
"version": "5.4.2",
|
"version": "5.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
|
||||||
|
|
@ -2362,6 +2387,11 @@
|
||||||
"@vue/shared": "3.4.38"
|
"@vue/shared": "3.4.38"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue-component-type-helpers": {
|
||||||
|
"version": "2.1.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.6.tgz",
|
||||||
|
"integrity": "sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w=="
|
||||||
|
},
|
||||||
"vue-demi": {
|
"vue-demi": {
|
||||||
"version": "0.14.10",
|
"version": "0.14.10",
|
||||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||||
|
|
@ -2402,6 +2432,15 @@
|
||||||
"is-plain-object": "3.0.1"
|
"is-plain-object": "3.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue-uuid": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-uuid/-/vue-uuid-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-+5DP857xVmTHYd00dMC1c1gVg/nxG6+K4Lepojv9ckHt8w0fDpGc5gQCCttS9D+AkSkTJgb0cekidKjTWu5OQQ==",
|
||||||
|
"requires": {
|
||||||
|
"@types/uuid": "^8.3.4",
|
||||||
|
"uuid": "^8.3.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"warning": {
|
"warning": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,17 @@
|
||||||
"ant-design-vue": "^4.2.3",
|
"ant-design-vue": "^4.2.3",
|
||||||
"axios": "^1.7.5",
|
"axios": "^1.7.5",
|
||||||
"jsencrypt": "^3.3.2",
|
"jsencrypt": "^3.3.2",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
"pinia": "^2.2.2",
|
"pinia": "^2.2.2",
|
||||||
"pinia-plugin-persistedstate": "^3.2.0",
|
"pinia-plugin-persistedstate": "^3.2.0",
|
||||||
|
"vue-component-type-helpers": "^2.1.2",
|
||||||
"sass": "^1.77.8",
|
"sass": "^1.77.8",
|
||||||
"vue": "^3.4.37",
|
"vue": "^3.4.37",
|
||||||
"vue-router": "4"
|
"vue-router": "4",
|
||||||
|
"vue-uuid": "^3.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@types/lodash-es": "^4.17.12",
|
||||||
"@types/node": "^22.5.1",
|
"@types/node": "^22.5.1",
|
||||||
"@vitejs/plugin-vue": "^5.1.2",
|
"@vitejs/plugin-vue": "^5.1.2",
|
||||||
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
<template>
|
||||||
|
<a-form ref="formProMaxRef" v-bind="props" :model="modelValue">
|
||||||
|
<a-row :gutter="props.gutter">
|
||||||
|
<a-col v-for="(item,field) in props.formItemOptions as FormProMaxItemOptions<T>" :key="field" v-bind="getResponsive(item)">
|
||||||
|
<a-form-item :name="field" v-bind="item" :label="undefined">
|
||||||
|
<template v-slot:label>
|
||||||
|
{{ item.label }}
|
||||||
|
<template v-if="item.remarkRender">
|
||||||
|
<a-popover :title="item.label" :content="item.remarkRender()">
|
||||||
|
<QuestionCircleOutlined class="margin-left-xs" style="color: red" />
|
||||||
|
</a-popover>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<!-- 自定义组件 -->
|
||||||
|
<!-- ant design vue 组件 -->
|
||||||
|
<a-input
|
||||||
|
v-if="item.type === 'input'"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
style="width: 100%"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="getPlaceholder(item)"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
/>
|
||||||
|
<a-input-password
|
||||||
|
v-else-if="item.type === 'inputPassword'"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
style="width: 100%"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="getPlaceholder(item)"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
/>
|
||||||
|
<a-input-number v-else-if="item.type === 'inputNumber'" v-model:value="modelValue[field]" style="width: 100%" v-bind="item.componentsProps" :placeholder="getPlaceholder(item)" />
|
||||||
|
<a-textarea
|
||||||
|
v-else-if="item.type === 'inputTextArea'"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
style="width: 100%"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="getPlaceholder(item)"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
/>
|
||||||
|
<a-radio-group v-else-if="item.type === 'radioGroup'" v-model:value="modelValue[field]" style="width: 100%" v-bind="item.componentsProps" :options="item.options" />
|
||||||
|
<a-checkbox-group v-else-if="item.type === 'checkboxGroup'" v-model:value="modelValue[field]" style="width: 100%" v-bind="item.componentsProps" :options="item.options" />
|
||||||
|
<a-select
|
||||||
|
v-else-if="item.type === 'select'"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
style="width: 100%"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="getPlaceholder(item)"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
:options="item.options"
|
||||||
|
/>
|
||||||
|
<a-tree-select
|
||||||
|
v-else-if="item.type === 'treeSelect'"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="getPlaceholder(item)"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
:tree-data="item.options"
|
||||||
|
/>
|
||||||
|
<a-cascader
|
||||||
|
v-else-if="item.type === 'cascader'"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="getPlaceholder(item)"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
:options="item.options"
|
||||||
|
/>
|
||||||
|
<a-range-picker
|
||||||
|
v-else-if="item.type === 'rangePicker'"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="item.componentsProps?.placeholder ?? ['开始日期', '结束日期']"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
/>
|
||||||
|
<a-date-picker
|
||||||
|
v-else-if="item.type === 'datePicker'"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="item.componentsProps?.placeholder ?? '请选择日期'"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
/>
|
||||||
|
<a-time-range-picker
|
||||||
|
v-else-if="item.type === 'timeRangePicker'"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="item.componentsProps?.placeholder ?? ['开始时间', '结束时间']"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
/>
|
||||||
|
<a-time-picker
|
||||||
|
v-else-if="item.type === 'timePicker'"
|
||||||
|
style="width: 100%"
|
||||||
|
v-model:value="modelValue[field]"
|
||||||
|
v-bind="item.componentsProps"
|
||||||
|
:placeholder="getPlaceholder(item)"
|
||||||
|
:allowClear="item.componentsProps?.allowClear ?? true"
|
||||||
|
/>
|
||||||
|
<template v-else-if="item.type === 'custom'">
|
||||||
|
<component :is="item.customRender" />
|
||||||
|
</template>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<slot name="formOperation"></slot>
|
||||||
|
</a-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" generic="T extends Record<string,any>">
|
||||||
|
import { FormInstance } from 'ant-design-vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { FormExpose } from 'ant-design-vue/es/form/Form'
|
||||||
|
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { FormProMaxItemOptions, FormProMaxItemProps, FormProMaxProps } from '@/types/components/form/index.ts'
|
||||||
|
|
||||||
|
const modelValue = defineModel<T>('value', {
|
||||||
|
default: {},
|
||||||
|
})
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<FormProMaxProps<T>>(), {
|
||||||
|
grid: () => {
|
||||||
|
return {
|
||||||
|
span: 24,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
gutter: 10,
|
||||||
|
labelCol: () => {
|
||||||
|
return {
|
||||||
|
style: {
|
||||||
|
width: '100px',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
wrapperCol: () => {
|
||||||
|
return {
|
||||||
|
span: 18,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelAlign: 'left',
|
||||||
|
colon: undefined,
|
||||||
|
disabled: undefined,
|
||||||
|
hideRequiredMark: undefined,
|
||||||
|
labelWrap: undefined,
|
||||||
|
scrollToFirstError: undefined,
|
||||||
|
validateOnRuleChange: undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
const formProMaxRef = ref<FormInstance>(null!)
|
||||||
|
|
||||||
|
const getResponsive = (item: FormProMaxItemProps): Grid => {
|
||||||
|
//span优先级高于响应式设置
|
||||||
|
if (item.grid) return item.grid.span ? { span: item.grid.span } : { ...item.grid }
|
||||||
|
return { ...props.grid }
|
||||||
|
}
|
||||||
|
|
||||||
|
//优先级: 组件本身=》formItem=》label
|
||||||
|
const getPlaceholder = (item: FormProMaxItemProps) => item.componentsProps?.placeholder ?? item.placeholder ?? (item.type.includes('input') ? `请输入${item.label}` : `请选择${item.label}`)
|
||||||
|
|
||||||
|
defineExpose<FormExpose>({
|
||||||
|
validate: (nameList, options) => formProMaxRef.value?.validate(nameList, options),
|
||||||
|
resetFields: (name) => formProMaxRef.value?.resetFields(name),
|
||||||
|
clearValidate: () => formProMaxRef.value?.clearValidate(),
|
||||||
|
getFieldsValue: (nameList) => formProMaxRef.value?.getFieldsValue(nameList),
|
||||||
|
scrollToField: (name, options) => formProMaxRef.value?.scrollToField(name, options),
|
||||||
|
validateFields: (nameList, options) => formProMaxRef.value?.validateFields(nameList, options),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<i v-if="type==='class'" :class="[`iconfont ${fontClass}`]" :style="{fontSize:`${size}px`}"/>
|
||||||
|
<svg v-else-if="type === 'svg'" :style="{width:`${size}px`,height:`${size}px`}">
|
||||||
|
<use :href="`#${fontClass}`"/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {IconFontProps} from "@/types/components/iconfont/IconFont";
|
||||||
|
|
||||||
|
withDefaults(defineProps<IconFontProps>(), {
|
||||||
|
size: 25,
|
||||||
|
type: "svg"
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,205 @@
|
||||||
|
<template>
|
||||||
|
<div class="table-pro-content">
|
||||||
|
<div class="card padding" v-if="props.searchFormOptions">
|
||||||
|
<FormProMax ref="searchFormRef" :form-item-options="props.searchFormOptions" v-model:value="searchParams" v-bind="props.searchFormProps">
|
||||||
|
<template v-slot:formOperation>
|
||||||
|
<a-space class="margin-right flex-end">
|
||||||
|
<a-button type="primary" @click="search">
|
||||||
|
<search-outlined />
|
||||||
|
搜索
|
||||||
|
</a-button>
|
||||||
|
<a-button danger @click="resetFormAndTable">
|
||||||
|
<rollback-outlined />
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</FormProMax>
|
||||||
|
</div>
|
||||||
|
<div class="card padding margin-top-xs">
|
||||||
|
<div class="flex-justify-between">
|
||||||
|
<slot name="tableHeader" :selectKeys="selectKeys" :selectRows="selectRows"></slot>
|
||||||
|
<div></div>
|
||||||
|
<slot name="tableHeaderRight" :selectKeys="selectKeys" :selectRows="selectRows"></slot>
|
||||||
|
<a-space>
|
||||||
|
<template v-if="!props.searchFormOptions">
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>刷新数据</template>
|
||||||
|
<a-button shape="circle" @click="requestGetTableData">
|
||||||
|
<ReloadOutlined />
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
<template v-if="props.isPrinter">
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>打印数据</template>
|
||||||
|
<a-button shape="circle">
|
||||||
|
<PrinterOutlined />
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
class="margin-top"
|
||||||
|
v-bind="props"
|
||||||
|
:columns="tableColumns"
|
||||||
|
:row-selection="props.isSelection ? (props.selectionProps ? props.selectionProps : defaultSelectProps) : null"
|
||||||
|
:data-source="dataSource"
|
||||||
|
:loading="loading"
|
||||||
|
:pagination="false"
|
||||||
|
>
|
||||||
|
<template v-for="(_, key) in slots" v-slot:[key]="scope">
|
||||||
|
<slot v-if="!includes(['tableHeader', 'tableHeaderRight'], String(key))" :name="key" v-bind="scope"></slot>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
<a-pagination
|
||||||
|
v-if="props.isPagination"
|
||||||
|
class="flex-end margin-top margin-right"
|
||||||
|
v-model:current="pageParams.current"
|
||||||
|
v-model:page-size="pageParams.size"
|
||||||
|
:total="pageParams.total"
|
||||||
|
v-bind="props.paginationProps"
|
||||||
|
@change="handleCurrentChange"
|
||||||
|
@showSizeChange="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" generic="T extends BaseTableRowRecord = {},P extends { [key: string]: any } ={}">
|
||||||
|
import FormProMax from '@/components/form/FormProMax.vue'
|
||||||
|
import { PrinterOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { computed, onMounted, Ref, ref } from 'vue'
|
||||||
|
import { FormInstance } from 'ant-design-vue'
|
||||||
|
import useTableProMax from '@/hooks/useTableProMax'
|
||||||
|
import { includes, isEmpty } from 'lodash-es'
|
||||||
|
import { BaseTableRowRecord, TableProMaxProps, TableProMaxRowSelect, TableProMaxSlots } from '@/types/components/table'
|
||||||
|
|
||||||
|
const selectKeys = ref<string[]>([])
|
||||||
|
const selectRows = ref<T[]>([]) as Ref<T[]>
|
||||||
|
|
||||||
|
const defaultSelectProps: TableProMaxRowSelect<T> = {
|
||||||
|
type: 'checkbox',
|
||||||
|
selectedRowKeys: selectKeys as any,
|
||||||
|
preserveSelectedRowKeys: true,
|
||||||
|
onSelect: (record, selected) => {
|
||||||
|
if (selected) {
|
||||||
|
selectKeys.value.push(record[props.rowKey] as string)
|
||||||
|
selectRows.value.push(record)
|
||||||
|
} else {
|
||||||
|
selectKeys.value.splice(selectKeys.value.findIndex((x) => x === record[props.rowKey]))
|
||||||
|
selectRows.value.splice(selectRows.value.findIndex((r) => r[props.rowKey] === record[props.rowKey]))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onChange: (selectedRowKeys, selectedRows) => {
|
||||||
|
selectKeys.value = selectedRowKeys as string[]
|
||||||
|
selectRows.value = selectedRows
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearSelect = () => {
|
||||||
|
selectKeys.value = []
|
||||||
|
selectRows.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<TableProMaxProps<T, P>>(), {
|
||||||
|
needIndex: true,
|
||||||
|
searchFormProps: () => {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
xs: 24,
|
||||||
|
sm: 12,
|
||||||
|
md: 8,
|
||||||
|
lg: 6,
|
||||||
|
xl: 4,
|
||||||
|
},
|
||||||
|
labelCol: undefined,
|
||||||
|
wrapperCol: undefined,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rowKey: 'snowFlakeId',
|
||||||
|
requestAuto: true,
|
||||||
|
isPagination: true,
|
||||||
|
isSelection: false,
|
||||||
|
paginationProps: () => {
|
||||||
|
return {
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bordered: true,
|
||||||
|
showSorterTooltip: undefined,
|
||||||
|
showHeader: undefined,
|
||||||
|
expandFixed: undefined,
|
||||||
|
expandRowByClick: undefined,
|
||||||
|
defaultExpandAllRows: undefined,
|
||||||
|
showExpandColumn: undefined,
|
||||||
|
sticky: undefined,
|
||||||
|
})
|
||||||
|
const slots = defineSlots<TableProMaxSlots<T>>()
|
||||||
|
|
||||||
|
const tableColumns = computed(() => {
|
||||||
|
let cols = props.columns
|
||||||
|
if (!isEmpty(cols) && props.needIndex) {
|
||||||
|
if (!(cols?.[0].dataIndex === 'index')) {
|
||||||
|
cols?.unshift({
|
||||||
|
dataIndex: 'index',
|
||||||
|
width: 60,
|
||||||
|
title: '序号',
|
||||||
|
customRender: ({ index }) => index + 1,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return cols
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单实例
|
||||||
|
*/
|
||||||
|
const searchFormRef = ref<FormInstance>() as Ref<FormInstance>
|
||||||
|
/**
|
||||||
|
* 查询参数
|
||||||
|
*/
|
||||||
|
const searchParams = ref<P | Record<string, any>>(props.defaultSearchParams || {}) as Ref<P>
|
||||||
|
|
||||||
|
const { loading, dataSource, pageParams, search, requestGetTableData, handleSizeChange, handleCurrentChange, resetState } = useTableProMax(
|
||||||
|
props.requestApi,
|
||||||
|
searchFormRef,
|
||||||
|
searchParams,
|
||||||
|
props.isPagination,
|
||||||
|
props.dataCallback,
|
||||||
|
props.requestError
|
||||||
|
)
|
||||||
|
|
||||||
|
onMounted(() => props.requestAuto && requestGetTableData(true))
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置表单并查询
|
||||||
|
*/
|
||||||
|
const resetFormAndTable = () => {
|
||||||
|
searchFormRef.value?.resetFields()
|
||||||
|
requestGetTableData()
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
selectKeys,
|
||||||
|
selectRows,
|
||||||
|
requestGetTableData,
|
||||||
|
clearSelect,
|
||||||
|
resetTable: () => {
|
||||||
|
searchFormRef.value?.resetFields()
|
||||||
|
resetState()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.card {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { h, Ref, ref, VNode } from 'vue'
|
||||||
|
import { Modal } from 'ant-design-vue'
|
||||||
|
import { FormExpose } from 'ant-design-vue/es/form/Form'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
import FormProMax from '@/components/form/FormProMax.vue'
|
||||||
|
import { FormProMaxItemOptions, FormProMaxProps } from '@/types/components/form'
|
||||||
|
|
||||||
|
export function submitSimpleFormModal<T>(props: {
|
||||||
|
title: string
|
||||||
|
formParams?: T & Record<string, any>
|
||||||
|
formProps?: Omit<FormProMaxProps<T>, 'formItemOptions'>
|
||||||
|
formOptions: FormProMaxItemOptions<T>
|
||||||
|
submit: (params: T) => Promise<any>
|
||||||
|
cancel?: (params: T) => Promise<any>
|
||||||
|
icon?: () => VNode
|
||||||
|
maskClosable?: boolean
|
||||||
|
width?: string | number
|
||||||
|
}) {
|
||||||
|
if (!props.formParams) props.formParams = {} as T
|
||||||
|
if (!props.width) props.width = 520
|
||||||
|
|
||||||
|
const formRef = ref<FormExpose>(null)
|
||||||
|
const _formParams = ref<T>({
|
||||||
|
...props.formParams,
|
||||||
|
}) as Ref<T>
|
||||||
|
|
||||||
|
Modal.confirm({
|
||||||
|
icon: props.icon ? props.icon() : ' ',
|
||||||
|
width: props.width,
|
||||||
|
maskClosable: props.maskClosable ?? true,
|
||||||
|
title: props.title,
|
||||||
|
content: () => <FormProMax ref={formRef} v-model={[_formParams.value, 'value']} {...props.formProps} formItemOptions={props.formOptions} />,
|
||||||
|
onOk: async () => {
|
||||||
|
await formRef.value?.validate()
|
||||||
|
await props.submit(_formParams.value)
|
||||||
|
},
|
||||||
|
onCancel: async () => props.cancel && (await props.cancel(_formParams.value)),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const deleteDataModal = (name: string, submit: () => Promise<any>, cancel?: () => Promise<any>) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: `确认删除【${name}】吗?`,
|
||||||
|
icon: h(ExclamationCircleOutlined),
|
||||||
|
content: h('div', { style: 'color:red;' }, '此操作将删除数据，且无法找回!'),
|
||||||
|
onOk: async () => await submit(),
|
||||||
|
onCancel: async () => cancel && (await cancel()),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<template>
|
||||||
|
<div class="simpleUploadDiv">
|
||||||
|
<a-progress v-if="uploading" type="circle" :percent="percent" />
|
||||||
|
<a-image height="80%" v-else :src="minioBaseUrl + modelValue" alt="avatar" />
|
||||||
|
<a-button class="btn-success" @click="selectFile">{{ btnLabel }}</a-button>
|
||||||
|
<input id="myFileInput" type="file" style="display: none" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import { onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { generateSimpleObjectName, getResignedObjectUrl } from '@/utils/minioUtil'
|
||||||
|
import axios, { CancelTokenSource } from 'axios'
|
||||||
|
import { convertFileSizeToStr } from '@/utils/index.ts'
|
||||||
|
|
||||||
|
const minioBaseUrl = __APP_ENV.VITE_APP_MINIO_URL
|
||||||
|
|
||||||
|
const modelValue = defineModel<string>('value')
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
parentDir?: string
|
||||||
|
allowedExtensions?: string[]
|
||||||
|
maxSize?: number
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
btnLabel?: string
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
parentDir: '',
|
||||||
|
allowedExtensions: () => ['jpg', 'jpeg', 'png', 'gif'],
|
||||||
|
maxSize: 1024 * 1024 * 4,
|
||||||
|
width: '150px',
|
||||||
|
height: '150px',
|
||||||
|
btnLabel: '选择图片',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const uploading = ref(false)
|
||||||
|
const percent = ref(0)
|
||||||
|
let cancelToken: CancelTokenSource | null = null
|
||||||
|
|
||||||
|
const selectFile = () => {
|
||||||
|
document.getElementById('myFileInput')?.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function inputFileListener(this: HTMLInputElement) {
|
||||||
|
const selectedFile: File = this.files?.[0] as File
|
||||||
|
|
||||||
|
const fileExtension = selectedFile?.name?.split('.')?.pop()?.toLowerCase() as string
|
||||||
|
if (!props.allowedExtensions.includes(fileExtension)) {
|
||||||
|
return message.error(`错误：不支持的文件格式,目前支持:【${props.allowedExtensions}】`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const isMax = selectedFile.size > props.maxSize
|
||||||
|
if (isMax) {
|
||||||
|
return message.error(`文件大小超出限制，最大支持:【${convertFileSizeToStr(props.maxSize)}】`)
|
||||||
|
}
|
||||||
|
|
||||||
|
cancelToken?.cancel()
|
||||||
|
percent.value = 0
|
||||||
|
uploading.value = true
|
||||||
|
|
||||||
|
const objectName = generateSimpleObjectName(selectedFile.name, props.parentDir)
|
||||||
|
const uploadUrl = await getResignedObjectUrl(__APP_ENV.VITE_APP_MINIO_BUCKET, objectName)
|
||||||
|
cancelToken = axios.CancelToken.source()
|
||||||
|
await axios.put(uploadUrl, selectedFile, {
|
||||||
|
cancelToken: cancelToken.token,
|
||||||
|
onUploadProgress: (progressEvent) => {
|
||||||
|
percent.value = ((progressEvent.loaded / (progressEvent.total as number)) * 100) | 0
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
modelValue.value = '/' + __APP_ENV.VITE_APP_MINIO_BUCKET + objectName
|
||||||
|
uploading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.getElementById('myFileInput')?.addEventListener('change', inputFileListener)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.getElementById('myFileInput')?.removeEventListener('change', inputFileListener)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.simpleUploadDiv {
|
||||||
|
width: v-bind(width);
|
||||||
|
height: v-bind(height);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
declare const __APP_ENV: ImportMetaEnv;
|
declare const __APP_ENV: ImportMetaEnv;
|
||||||
|
declare module 'lodash-es' {
|
||||||
|
import { includes, isEmpty, ceil, divide } from 'lodash';
|
||||||
|
export { includes, isEmpty, ceil, divide };
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 全局返回
|
* 全局返回
|
||||||
|
|
@ -8,6 +12,34 @@ interface JsonResult<T> {
|
||||||
message: string;
|
message: string;
|
||||||
data?: T;
|
data?: T;
|
||||||
}
|
}
|
||||||
|
class TreeNodeVo<T, E = Record<string, any>> {
|
||||||
|
value: T;
|
||||||
|
parentValue: T;
|
||||||
|
label: string;
|
||||||
|
orderIndex?: number;
|
||||||
|
children?: TreeNodeVo<T>[]
|
||||||
|
extData?: E;
|
||||||
|
}
|
||||||
|
declare interface Grid {
|
||||||
|
//栅格占据的列数
|
||||||
|
span?: number;
|
||||||
|
//栅格左侧的间隔格数
|
||||||
|
offset?: number;
|
||||||
|
//栅格向右移动格数
|
||||||
|
push?: number;
|
||||||
|
//栅格向左移动格数
|
||||||
|
pull?: number;
|
||||||
|
//<768px 响应式栅格数或者栅格属性对象
|
||||||
|
xs?: number;
|
||||||
|
//≥768px 响应式栅格数或者栅格属性对象
|
||||||
|
sm?: number;
|
||||||
|
//≥992px 响应式栅格数或者栅格属性对象
|
||||||
|
md?: number;
|
||||||
|
//≥1200px 响应式栅格数或者栅格属性对象
|
||||||
|
lg?: number;
|
||||||
|
//≥1920px 响应式栅格数或者栅格属性对象
|
||||||
|
xl?: number;
|
||||||
|
}
|
||||||
interface dataStatus {
|
interface dataStatus {
|
||||||
account: string;
|
account: string;
|
||||||
password: string;
|
password: string;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
import { ref, Ref } from "vue";
|
||||||
|
import { Page, PageParams, PageResult } from "@/types/hooks/useTableProMax.ts";
|
||||||
|
import { FormInstance } from "ant-design-vue";
|
||||||
|
import { BaseTableRowRecord, RequestApiType } from "@/types/components/table";
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param api 查询方法
|
||||||
|
* @param searchFormRef 表单校验
|
||||||
|
* @param searchParams 查询的参数
|
||||||
|
* @param isPageTable 是否分页
|
||||||
|
* @param dataCallBack 查询到数据后的回调
|
||||||
|
* @param requestError 查询出错回调
|
||||||
|
*/
|
||||||
|
export default <T extends BaseTableRowRecord, P extends Record<string, any> | PageParams<P>>(api: RequestApiType<T, P>,
|
||||||
|
searchFormRef: Ref<FormInstance>,
|
||||||
|
searchParams: Ref<P>,
|
||||||
|
isPageTable: boolean = true,
|
||||||
|
dataCallBack?: (data: T[]) => T[],
|
||||||
|
requestError?: (errorMsg: any) => void) => {
|
||||||
|
|
||||||
|
const dataSource = ref<T[]>([]) as Ref<T[]>;
|
||||||
|
const loading = ref<boolean>(false);
|
||||||
|
const pageParams = ref<Page>({
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取表格数据
|
||||||
|
*/
|
||||||
|
const requestGetTableData = async (isInit: boolean = false) => {
|
||||||
|
try {
|
||||||
|
//校验表单
|
||||||
|
!isInit && await searchFormRef.value?.validate();
|
||||||
|
//组装参数
|
||||||
|
let totalSearchParams;
|
||||||
|
if (isPageTable) {
|
||||||
|
totalSearchParams = {
|
||||||
|
params: searchParams.value,
|
||||||
|
page: {
|
||||||
|
current: pageParams.value.current,
|
||||||
|
size: pageParams.value.size
|
||||||
|
}
|
||||||
|
} as PageParams<P>;
|
||||||
|
} else {
|
||||||
|
totalSearchParams = searchParams.value
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
const resp = await api(totalSearchParams as P);
|
||||||
|
let tableData: T[];
|
||||||
|
|
||||||
|
if (isPageTable) {
|
||||||
|
const { current, records, size, total } = resp.data as PageResult<T>;
|
||||||
|
isPageTable && updatePageParams({
|
||||||
|
current: parseInt(current),
|
||||||
|
size: parseInt(size),
|
||||||
|
total: parseInt(total)
|
||||||
|
});
|
||||||
|
tableData = records;
|
||||||
|
} else {
|
||||||
|
tableData = resp.data as T[]
|
||||||
|
}
|
||||||
|
dataCallBack && (tableData = dataCallBack(tableData));
|
||||||
|
dataSource.value = tableData;
|
||||||
|
} catch (error) {
|
||||||
|
requestError && requestError(error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新分页信息
|
||||||
|
*/
|
||||||
|
const updatePageParams = (ps: Page) => Object.assign(pageParams.value, ps)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置表格状态 包括 dataSource loading pageParams
|
||||||
|
*/
|
||||||
|
const resetState = () => {
|
||||||
|
dataSource.value = [];
|
||||||
|
loading.value = false;
|
||||||
|
pageParams.value = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格数据查询 与 requestGetTableData 区别是会将页面重置为1
|
||||||
|
* 如果只做刷新数据请用 requestGetTableData
|
||||||
|
*/
|
||||||
|
const search = async () => {
|
||||||
|
pageParams.value.current = 1;
|
||||||
|
await requestGetTableData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 每页条数改变
|
||||||
|
* @param _
|
||||||
|
* @param {Number} size 页显示数量
|
||||||
|
*/
|
||||||
|
const handleSizeChange = async (_: number, size: number) => {
|
||||||
|
pageParams.value.current = 1;
|
||||||
|
pageParams.value.size = size;
|
||||||
|
await requestGetTableData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 当前页改变
|
||||||
|
* @param current 当前页
|
||||||
|
*/
|
||||||
|
const handleCurrentChange = async (current: number) => {
|
||||||
|
pageParams.value.current = current;
|
||||||
|
await requestGetTableData();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
dataSource,
|
||||||
|
loading,
|
||||||
|
pageParams,
|
||||||
|
requestGetTableData,
|
||||||
|
search,
|
||||||
|
handleSizeChange,
|
||||||
|
handleCurrentChange,
|
||||||
|
resetState
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
import {
|
||||||
|
FormProps,
|
||||||
|
RangePicker,
|
||||||
|
Input,
|
||||||
|
InputNumber,
|
||||||
|
Textarea,
|
||||||
|
InputPassword,
|
||||||
|
RadioGroup,
|
||||||
|
Select,
|
||||||
|
TreeSelect,
|
||||||
|
Cascader,
|
||||||
|
CheckboxGroup,
|
||||||
|
DatePicker,
|
||||||
|
FormItem, TimeRangePicker, TimePicker,
|
||||||
|
} from "ant-design-vue";
|
||||||
|
import { Ref, UnwrapRef, VNode } from "vue";
|
||||||
|
import { ComponentProps } from "vue-component-type-helpers";
|
||||||
|
|
||||||
|
type FormProMaxItemType =
|
||||||
|
| 'custom'
|
||||||
|
| 'input'
|
||||||
|
| 'inputPassword'
|
||||||
|
| 'inputNumber'
|
||||||
|
| 'inputTextArea'
|
||||||
|
| 'radioGroup'
|
||||||
|
| 'select'
|
||||||
|
| 'selectIcon'
|
||||||
|
| 'selectUser'
|
||||||
|
| 'treeSelect'
|
||||||
|
| 'cascader'
|
||||||
|
| 'checkboxGroup'
|
||||||
|
| 'datePicker'
|
||||||
|
| 'rangePicker'
|
||||||
|
| 'timeRangePicker'
|
||||||
|
| 'timePicker';
|
||||||
|
|
||||||
|
interface FormProMaxItemCommonProps extends ComponentProps<typeof FormItem> {
|
||||||
|
label?: string,
|
||||||
|
grid?: Grid,
|
||||||
|
placeholder?: string,
|
||||||
|
remarkRender?: () => VNode | string,
|
||||||
|
customRender?: () => VNode;
|
||||||
|
options?: (SelectNodeVo<unknown> | TreeNodeVo<unknown>)[] | Ref<(SelectNodeVo<unknown> | TreeNodeVo<unknown>)[]>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FormProMaxItemProps<T extends FormProMaxItemType = any, C = any> extends FormProMaxItemCommonProps {
|
||||||
|
type: T
|
||||||
|
componentsProps?: C
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FormProMaxItemOptions<T> = {
|
||||||
|
[key in keyof T | string]:
|
||||||
|
FormProMaxItemProps<'custom', ComponentProps<Record<string, any>>>
|
||||||
|
| FormProMaxItemProps<'input', ComponentProps<typeof Input>>
|
||||||
|
| FormProMaxItemProps<'inputPassword', ComponentProps<typeof InputPassword>>
|
||||||
|
| FormProMaxItemProps<'inputNumber', ComponentProps<typeof InputNumber>>
|
||||||
|
| FormProMaxItemProps<'inputTextArea', ComponentProps<typeof Textarea>>
|
||||||
|
| FormProMaxItemProps<'radioGroup', ComponentProps<typeof RadioGroup>>
|
||||||
|
| FormProMaxItemProps<'select', ComponentProps<typeof Select>>
|
||||||
|
| FormProMaxItemProps<'treeSelect', ComponentProps<typeof TreeSelect>>
|
||||||
|
| FormProMaxItemProps<'cascader', ComponentProps<typeof Cascader>>
|
||||||
|
| FormProMaxItemProps<'checkboxGroup', ComponentProps<typeof CheckboxGroup>>
|
||||||
|
| FormProMaxItemProps<'datePicker', ComponentProps<typeof DatePicker>>
|
||||||
|
| FormProMaxItemProps<'rangePicker', ComponentProps<typeof RangePicker>>
|
||||||
|
| FormProMaxItemProps<'timeRangePicker', ComponentProps<typeof TimeRangePicker>>
|
||||||
|
| FormProMaxItemProps<'timePicker', ComponentProps<typeof TimePicker>>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FormProMaxProps<T = {}> extends FormProps {
|
||||||
|
grid?: Grid
|
||||||
|
gutter?: number;
|
||||||
|
formItemOptions?: FormProMaxItemOptions<T> | Ref<FormProMaxItemOptions<T>> | UnwrapRef<FormProMaxItemOptions<T>>
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
export interface IconFontProps {
|
||||||
|
fontClass?: string,
|
||||||
|
size?: number,
|
||||||
|
type?: 'class' | 'svg'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { PaginationProps, Table, TableProps } from "ant-design-vue";
|
||||||
|
import { TableRowSelection } from "ant-design-vue/lib/table/interface";
|
||||||
|
import { Ref, UnwrapRef } from "vue";
|
||||||
|
import { ColumnType } from "ant-design-vue/es/table/interface";
|
||||||
|
import { ComponentSlots } from "vue-component-type-helpers";
|
||||||
|
import { FormProMaxItemOptions, FormProMaxProps } from "@/types/components/form";
|
||||||
|
import { PageParams, PageResult } from "@/types/hooks/useTableProMax.ts";
|
||||||
|
|
||||||
|
|
||||||
|
export type TableProMaxColumnType<T extends BaseTableRowRecord> = Omit<ColumnType<T>, 'dataIndex'> & {
|
||||||
|
dataIndex: keyof T | string | string[] | number | number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export type TableProMaxProps<
|
||||||
|
T extends BaseTableRowRecord = {},
|
||||||
|
P extends { [key: string]: any } = {}
|
||||||
|
> = Partial<Omit<TableProps<T>, "dataSource" | 'pagination' | 'loading' | 'rowKey' | 'columns'>> & {
|
||||||
|
rowKey?: keyof T,
|
||||||
|
columns?: TableProMaxColumnType<T>[],
|
||||||
|
searchFormProps?: Omit<FormProMaxProps<P>, 'formItems'>
|
||||||
|
searchFormOptions?: FormProMaxItemOptions<P> | Ref<FormProMaxItemOptions<P>> | UnwrapRef<FormProMaxItemOptions<P>>,
|
||||||
|
defaultSearchParams?: { [key in keyof P | string]: any };
|
||||||
|
requestAuto?: boolean,
|
||||||
|
requestApi: RequestApiType<T, P>,
|
||||||
|
requestError?: (errorMsg: any) => void,
|
||||||
|
dataCallback?: (data: T[]) => T[],
|
||||||
|
isPagination?: boolean,
|
||||||
|
paginationProps?: TableProMaxPaginationProps,
|
||||||
|
isSelection?: boolean,
|
||||||
|
selectionProps?: TableProMaxRowSelect<T>,
|
||||||
|
isPrinter?: boolean,
|
||||||
|
needIndex?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TableProMaxSlots<T> = ComponentSlots<typeof Table> & {
|
||||||
|
tableHeader: (scope: { selectKeys: string[], selectRows: T[] }) => any,
|
||||||
|
tableHeaderRight: (scope: { selectKeys: string[], selectRows: T[] }) => any,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type RequestApiType<T extends BaseTableRowRecord, P extends {
|
||||||
|
[key: string]: any
|
||||||
|
} = {}> = (params: P | PageParams<P>) => Promise<JsonResult<T[] | PageResult<T>>>;
|
||||||
|
|
||||||
|
export type TableProMaxPaginationProps = Partial<Omit<PaginationProps, "current" | "pageSize" | "total">>;
|
||||||
|
|
||||||
|
export type TableProMaxRowSelect<T extends BaseTableRowRecord> = TableRowSelection<T>;
|
||||||
|
|
||||||
|
export interface BaseTableRowRecord {
|
||||||
|
snowFlakeId?: string;
|
||||||
|
createUserName?: string;
|
||||||
|
createTime?: Date | string;
|
||||||
|
updateUserName?: string;
|
||||||
|
updateTime?: Date | string
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { RouteComponent } from "vue-router";
|
||||||
|
|
||||||
|
export interface SystemMenu {
|
||||||
|
type: 'dir' | 'menu';
|
||||||
|
title: string;
|
||||||
|
path: string;
|
||||||
|
name: string;
|
||||||
|
icon?: string;
|
||||||
|
|
||||||
|
component?: RouteComponent;
|
||||||
|
children?: SystemMenu[];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
/**
|
||||||
|
* 分页对象
|
||||||
|
*/
|
||||||
|
export interface Page {
|
||||||
|
current: number,
|
||||||
|
size: number,
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分页参数
|
||||||
|
*/
|
||||||
|
export interface PageParams<T extends Record<string, any> = {}> {
|
||||||
|
params: T & { [key: string]: any },
|
||||||
|
page: Omit<Page, 'total'>
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分页结果
|
||||||
|
*/
|
||||||
|
export interface PageResult<T> {
|
||||||
|
current: string,
|
||||||
|
records: T[],
|
||||||
|
size: string,
|
||||||
|
total: string
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import {ceil, divide} from "lodash-es";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将文件大小转为字符串格式
|
||||||
|
* @param fileSizeInBytes
|
||||||
|
*/
|
||||||
|
export const convertFileSizeToStr = (fileSizeInBytes: number): string => {
|
||||||
|
if (fileSizeInBytes < 1024) {
|
||||||
|
return fileSizeInBytes + "B";
|
||||||
|
} else if (fileSizeInBytes < 1024 * 1024) {
|
||||||
|
return (ceil(divide(fileSizeInBytes, 1024), 2)) + "KB";
|
||||||
|
} else if (fileSizeInBytes < 1024 * 1024 * 1024) {
|
||||||
|
return (ceil(divide(fileSizeInBytes, (1024 * 1024)), 2)) + "MB";
|
||||||
|
} else {
|
||||||
|
return (ceil(divide(fileSizeInBytes, (1024 * 1024 * 1024)), 2)) + "GB";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import api from "@/axios";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { uuid } from "vue-uuid";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成一个简单的对象文件地址
|
||||||
|
* @param fileName 原始文件名
|
||||||
|
* @param parentDir 上级目录
|
||||||
|
*/
|
||||||
|
export const generateSimpleObjectName = (fileName: string, parentDir?: String): string => {
|
||||||
|
let objectName = parentDir + dayjs().format('/YYYY/MM/DD/') + uuid.v4().replace(/-/g, '');
|
||||||
|
if (fileName && fileName.length > 0) {
|
||||||
|
objectName += fileName.substring(fileName.lastIndexOf('.'))
|
||||||
|
}
|
||||||
|
return objectName;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取生成预签名的 URL
|
||||||
|
*/
|
||||||
|
export const getResignedObjectUrl = async (bucketName: string, objectName: string): Promise<string> => {
|
||||||
|
return (await api.get<string>('/common/getResignedObjectUrl', {
|
||||||
|
bucketName,
|
||||||
|
objectName
|
||||||
|
})).data as string;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue