Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
commit
fd46e8088b
|
@ -54,8 +54,8 @@
|
||||||
delete: item.key === 'delete',
|
delete: item.key === 'delete',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<!-- <slot name="actions" v-bind="item"></slot> -->
|
<slot name="actions" v-bind="item"></slot>
|
||||||
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
|
<!-- <a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
|
||||||
<a-button :disabled="item.disabled">
|
<a-button :disabled="item.disabled">
|
||||||
<DeleteOutlined v-if="item.key === 'delete'" />
|
<DeleteOutlined v-if="item.key === 'delete'" />
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
@ -72,7 +72,7 @@
|
||||||
<span>{{ item.text }}</span>
|
<span>{{ item.text }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</template>
|
</template> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
|
@ -284,13 +284,14 @@ const handleClick = () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
& > span,
|
& > :deep(span, button) {
|
||||||
button {
|
width: 100%;
|
||||||
width: 100% !important;
|
border-radius: 0;
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
:deep(button) {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
background: #f6f6f6;
|
background: #f6f6f6;
|
||||||
border: 1px solid #e6e6e6;
|
border: 1px solid #e6e6e6;
|
||||||
color: #2f54eb;
|
color: #2f54eb;
|
||||||
|
@ -322,7 +323,7 @@ const handleClick = () => {
|
||||||
flex-basis: 60px;
|
flex-basis: 60px;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
|
|
||||||
button {
|
:deep(button) {
|
||||||
background: @error-color-deprecated-bg;
|
background: @error-color-deprecated-bg;
|
||||||
border: 1px solid @error-color-outline;
|
border: 1px solid @error-color-outline;
|
||||||
|
|
||||||
|
@ -348,7 +349,7 @@ const handleClick = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled] {
|
:deep(button[disabled]) {
|
||||||
background: @disabled-bg;
|
background: @disabled-bg;
|
||||||
border-color: @disabled-color;
|
border-color: @disabled-color;
|
||||||
|
|
||||||
|
|
|
@ -11,16 +11,21 @@ enum ModelEnum {
|
||||||
CARD = 'CARD',
|
CARD = 'CARD',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
enum TypeEnum {
|
||||||
|
TREE = 'TREE',
|
||||||
|
PAGE = 'PAGE',
|
||||||
|
}
|
||||||
|
|
||||||
type RequestData = {
|
type RequestData = {
|
||||||
code: string;
|
code: string;
|
||||||
result: {
|
result: {
|
||||||
data: Record<string, any>[] | undefined;
|
data?: Record<string, any>[] | undefined;
|
||||||
pageIndex: number;
|
pageIndex: number;
|
||||||
pageSize: number;
|
pageSize: number;
|
||||||
total: number;
|
total: number;
|
||||||
};
|
};
|
||||||
status: number;
|
status: number;
|
||||||
} & Record<string, any>;
|
} | Record<string, any>;
|
||||||
|
|
||||||
export interface ActionsType {
|
export interface ActionsType {
|
||||||
key: string;
|
key: string;
|
||||||
|
@ -39,16 +44,10 @@ export interface JColumnProps extends ColumnProps{
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface JTableProps extends TableProps{
|
export interface JTableProps extends TableProps{
|
||||||
request?: (params: Record<string, any> & {
|
request?: (params?: Record<string, any>) => Promise<Partial<RequestData>>;
|
||||||
pageSize: number;
|
|
||||||
pageIndex: number;
|
|
||||||
}) => Promise<Partial<RequestData>>;
|
|
||||||
cardBodyClass?: string;
|
cardBodyClass?: string;
|
||||||
columns: JColumnProps[];
|
columns: JColumnProps[];
|
||||||
params?: Record<string, any> & {
|
params?: Record<string, any>;
|
||||||
pageSize: number;
|
|
||||||
pageIndex: number;
|
|
||||||
};
|
|
||||||
model?: keyof typeof ModelEnum | undefined; // 显示table还是card
|
model?: keyof typeof ModelEnum | undefined; // 显示table还是card
|
||||||
// actions?: ActionsType[];
|
// actions?: ActionsType[];
|
||||||
noPagination?: boolean;
|
noPagination?: boolean;
|
||||||
|
@ -64,6 +63,8 @@ export interface JTableProps extends TableProps{
|
||||||
*/
|
*/
|
||||||
gridColumns?: number[];
|
gridColumns?: number[];
|
||||||
alertRender?: boolean;
|
alertRender?: boolean;
|
||||||
|
type?: keyof typeof TypeEnum;
|
||||||
|
defaultParams?: Record<string, any>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const JTable = defineComponent<JTableProps>({
|
const JTable = defineComponent<JTableProps>({
|
||||||
|
@ -96,10 +97,6 @@ const JTable = defineComponent<JTableProps>({
|
||||||
type: [String, undefined],
|
type: [String, undefined],
|
||||||
default: undefined
|
default: undefined
|
||||||
},
|
},
|
||||||
// actions: {
|
|
||||||
// type: Array as PropType<ActionsType[]>,
|
|
||||||
// default: () => []
|
|
||||||
// },
|
|
||||||
noPagination: {
|
noPagination: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
@ -127,6 +124,19 @@ const JTable = defineComponent<JTableProps>({
|
||||||
alertRender: {
|
alertRender: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'PAGE'
|
||||||
|
},
|
||||||
|
defaultParams: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} as any,
|
} as any,
|
||||||
setup(props: JTableProps ,{ slots, emit }){
|
setup(props: JTableProps ,{ slots, emit }){
|
||||||
|
@ -162,25 +172,30 @@ const JTable = defineComponent<JTableProps>({
|
||||||
const handleSearch = async (_params?: Record<string, any>) => {
|
const handleSearch = async (_params?: Record<string, any>) => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
if(props.request) {
|
if(props.request) {
|
||||||
const resp = await props.request({
|
const resp = await props.request({
|
||||||
pageSize: 12,
|
...props.defaultParams,
|
||||||
pageIndex: 1,
|
|
||||||
..._params
|
..._params
|
||||||
})
|
})
|
||||||
if(resp.status === 200){
|
if(resp.status === 200){
|
||||||
// 判断如果是最后一页且最后一页为空,就跳转到前一页
|
if(props.type === 'PAGE'){
|
||||||
if(resp.result?.data?.length === 0 && resp.result.total && resp.result.pageSize && resp.result.pageIndex) {
|
// 判断如果是最后一页且最后一页为空,就跳转到前一页
|
||||||
handleSearch({
|
if(resp.result.total && resp.result.pageSize && resp.result.pageIndex && resp.result?.data?.length === 0) {
|
||||||
..._params,
|
handleSearch({
|
||||||
pageSize: pageSize.value,
|
..._params,
|
||||||
pageIndex: pageIndex.value - 1,
|
pageSize: pageSize.value,
|
||||||
})
|
pageIndex: pageIndex.value > 0 ? pageIndex.value - 1 : 0,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
_dataSource.value = resp.result?.data || []
|
||||||
|
pageIndex.value = resp.result?.pageIndex || 0
|
||||||
|
pageSize.value = resp.result?.pageSize || 6
|
||||||
|
total.value = resp.result?.total || 0
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
_dataSource.value = resp.result?.data || []
|
_dataSource.value = resp?.result || []
|
||||||
pageIndex.value = resp.result?.pageIndex || 0
|
|
||||||
pageSize.value = resp.result?.pageSize || 6
|
|
||||||
total.value = resp.result?.total || 0
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
_dataSource.value = []
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
_dataSource.value = props?.dataSource || []
|
_dataSource.value = props?.dataSource || []
|
||||||
|
@ -282,7 +297,7 @@ const JTable = defineComponent<JTableProps>({
|
||||||
</div>
|
</div>
|
||||||
{/* 分页 */}
|
{/* 分页 */}
|
||||||
{
|
{
|
||||||
_dataSource.value.length && !props.noPagination &&
|
(!!_dataSource.value.length) && !props.noPagination &&
|
||||||
<div class={styles['jtable-pagination']}>
|
<div class={styles['jtable-pagination']}>
|
||||||
<Pagination
|
<Pagination
|
||||||
size="small"
|
size="small"
|
||||||
|
@ -292,14 +307,16 @@ const JTable = defineComponent<JTableProps>({
|
||||||
current={pageIndex.value}
|
current={pageIndex.value}
|
||||||
pageSize={pageSize.value}
|
pageSize={pageSize.value}
|
||||||
pageSizeOptions={['12', '24', '48', '60', '100']}
|
pageSizeOptions={['12', '24', '48', '60', '100']}
|
||||||
showTotal={(total, range) => {
|
showTotal={(num) => {
|
||||||
return `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`
|
const minSize = pageIndex.value * pageSize.value + 1;
|
||||||
|
const MaxSize = (pageIndex.value + 1) * pageSize.value;
|
||||||
|
return `第 ${minSize} - ${MaxSize > num ? num : MaxSize} 条/总共 ${num} 条`;
|
||||||
}}
|
}}
|
||||||
onChange={(page, size) => {
|
onChange={(page, size) => {
|
||||||
handleSearch({
|
handleSearch({
|
||||||
...props.params,
|
...props.params,
|
||||||
pageSize: size,
|
pageSize: size,
|
||||||
pageIndex: pageSize.value === size ? page : 1,
|
pageIndex: pageSize.value === size ? page : 0
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
|
||||||
|
export const useMenuStore = defineStore({
|
||||||
|
id: 'menu',
|
||||||
|
state: () => ({
|
||||||
|
menus: {} as {[key: string]: string},
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
hasPermission(state) {
|
||||||
|
return (menuCode: string | string[]) => {
|
||||||
|
if (!menuCode) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
if (!!Object.keys(state.menus).length) {
|
||||||
|
if (typeof menuCode === 'string') {
|
||||||
|
return !!this.menus[menuCode]
|
||||||
|
}
|
||||||
|
return menuCode.some(code => !!this.menus[code])
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
|
@ -37,7 +37,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
</template>
|
||||||
<!-- <template #actions="item">
|
<template #actions="item">
|
||||||
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
|
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
|
||||||
<a-button :disabled="item.disabled">
|
<a-button :disabled="item.disabled">
|
||||||
<DeleteOutlined v-if="item.key === 'delete'" />
|
<DeleteOutlined v-if="item.key === 'delete'" />
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
</template>
|
</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
</template>
|
</template>
|
||||||
</template> -->
|
</template>
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</template>
|
</template>
|
||||||
<template #id="slotProps">
|
<template #id="slotProps">
|
||||||
|
@ -152,27 +152,23 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '导入'
|
title: '导入'
|
||||||
},
|
},
|
||||||
|
disabled: true,
|
||||||
icon: 'icon-xiazai'
|
icon: 'icon-xiazai'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'delete',
|
key: 'delete',
|
||||||
// disabled: true,
|
|
||||||
text: "删除",
|
text: "删除",
|
||||||
disabled: !!data?.state,
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: !!data?.state ? '正常的产品不能删除' : '删除'
|
title: !!data?.state ? '正常的产品不能删除' : '删除'
|
||||||
},
|
},
|
||||||
// popConfirm: {
|
popConfirm: {
|
||||||
// title: '确认删除?'
|
title: '确认删除?'
|
||||||
// },
|
},
|
||||||
|
|
||||||
icon: 'icon-huishouzhan'
|
icon: 'icon-huishouzhan'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
const p = h('p', 'hi')
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue