修改每日菜谱
This commit is contained in:
ctw committed
1 parent
b4ff730fc8
commit
002f8ad6b1
6 files changed
+459
-336
No files matched your search
+69
-69
@@ -1,44 +1,44 @@
|
||||
import { CellStyle, ElMessage } from 'element-plus';
|
||||
import other from '/@/utils/other';
|
||||
import { CellStyle, ElMessage } from "element-plus"
|
||||
import other from "/@/utils/other"
|
||||
|
||||
/**
|
||||
* 表格组件基础配置属性
|
||||
*/
|
||||
export interface BasicTableProps {
|
||||
// 是否在创建页面时即调用数据列表接口，默认为true
|
||||
createdIsNeed?: boolean;
|
||||
createdIsNeed?: boolean
|
||||
// 是否需要分页，默认为true
|
||||
isPage?: boolean;
|
||||
isPage?: boolean
|
||||
// 查询条件表单对象，类型为any
|
||||
queryForm?: any;
|
||||
queryForm?: any
|
||||
// 数据列表数组
|
||||
dataList?: any[];
|
||||
dataList?: any[]
|
||||
// 分页属性对象
|
||||
pagination?: Pagination;
|
||||
pagination?: Pagination
|
||||
// 数据列表，loading状态标志，默认为false
|
||||
dataListLoading?: boolean;
|
||||
dataListLoading?: boolean
|
||||
// 数据列表多选项数组
|
||||
dataListSelections?: any[];
|
||||
dataListSelections?: any[]
|
||||
// 数据列表查询接口api方法，接收任意数量参数，返回Promise
|
||||
pageList?: (...arg: any) => Promise<any>;
|
||||
pageList?: (...arg: any) => Promise<any>
|
||||
// loading标志，默认为false
|
||||
loading?: Boolean;
|
||||
loading?: Boolean
|
||||
// 多选结果数组
|
||||
selectObjs?: any[];
|
||||
selectObjs?: any[]
|
||||
// 排序字段数组
|
||||
descs?: string[];
|
||||
descs?: string[]
|
||||
// 排序方式数组
|
||||
ascs?: string[];
|
||||
ascs?: string[]
|
||||
// props属性对象，类型为any
|
||||
props?: any;
|
||||
props?: any
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格样式。
|
||||
*/
|
||||
export interface TableStyle {
|
||||
cellStyle: CellStyle<any>;
|
||||
headerCellStyle: CellStyle<any>;
|
||||
cellStyle: CellStyle<any>
|
||||
headerCellStyle: CellStyle<any>
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -46,15 +46,15 @@ export interface TableStyle {
|
||||
*/
|
||||
export interface Pagination {
|
||||
// 当前页码，默认为1
|
||||
current?: number;
|
||||
current?: number
|
||||
// 每页显示条数，默认为10
|
||||
size?: number;
|
||||
size?: number
|
||||
// 总条数，默认为0
|
||||
total?: number;
|
||||
total?: number
|
||||
// 每页显示条数选择器的选项数组，默认为[10,20,30,40]
|
||||
pageSizes?: any[];
|
||||
pageSizes?: any[]
|
||||
// 分页组件布局方式，可选值有 total,sizes,prev,jump,next，默认为'total,sizes,prev,jump,next'
|
||||
layout?: String;
|
||||
layout?: String
|
||||
}
|
||||
|
||||
export function useTable(options?: BasicTableProps) {
|
||||
@@ -75,7 +75,7 @@ export function useTable(options?: BasicTableProps) {
|
||||
size: 10,
|
||||
total: 0,
|
||||
pageSizes: [1, 10, 20, 50, 100, 200],
|
||||
layout: 'total, sizes, prev, pager, next, jumper',
|
||||
layout: "total, sizes, prev, pager, next, jumper",
|
||||
} as Pagination,
|
||||
// 当前选中的数据项，默认为空数组
|
||||
dataListSelections: [],
|
||||
@@ -89,10 +89,10 @@ export function useTable(options?: BasicTableProps) {
|
||||
ascs: [],
|
||||
// props属性配置对象，用于自定义数据属性，默认值为 {item:'records',totalCount:'total'}
|
||||
props: {
|
||||
item: 'records',
|
||||
totalCount: 'total',
|
||||
item: "records",
|
||||
totalCount: "total",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 合并默认属性配置和自定义属性配置
|
||||
@@ -103,14 +103,14 @@ export function useTable(options?: BasicTableProps) {
|
||||
const mergeDefaultOptions = (options: any, props: any): BasicTableProps => {
|
||||
for (const key in options) {
|
||||
if (!Object.getOwnPropertyDescriptor(props, key)) {
|
||||
props[key] = options[key];
|
||||
props[key] = options[key]
|
||||
}
|
||||
}
|
||||
return props;
|
||||
};
|
||||
return props
|
||||
}
|
||||
|
||||
// 覆盖默认值
|
||||
const state = mergeDefaultOptions(defaultOptions, options);
|
||||
const state = mergeDefaultOptions(defaultOptions, options)
|
||||
|
||||
/**
|
||||
* 发起分页查询，并设置表格数据和分页信息
|
||||
@@ -120,36 +120,36 @@ export function useTable(options?: BasicTableProps) {
|
||||
if (state.pageList) {
|
||||
try {
|
||||
// 开始加载数据，设置state.loading为true
|
||||
state.loading = true;
|
||||
state.loading = true
|
||||
|
||||
// 调用state.pageList方法发起分页查询
|
||||
const res = await state.pageList({
|
||||
...state.queryForm,
|
||||
current: state.pagination?.current,
|
||||
size: state.pagination?.size,
|
||||
descs: state.descs?.join(','),
|
||||
ascs: state.ascs?.join(','),
|
||||
});
|
||||
descs: state.descs?.join(","),
|
||||
ascs: state.ascs?.join(","),
|
||||
})
|
||||
|
||||
// 设置表格展示的数据数组
|
||||
state.dataList = state.isPage ? res.data[state.props.item] : res.data;
|
||||
state.dataList = state.isPage ? res.data[state.props.item] : res.data
|
||||
// 设置分页信息中的总数据条数
|
||||
state.pagination!.total = state.isPage ? res.data[state.props.totalCount] : 0;
|
||||
state.pagination!.total = state.isPage ? res.data[state.props.totalCount] : 0
|
||||
} catch (err: any) {
|
||||
// 捕获异常并显示错误提示
|
||||
ElMessage.error(err.msg || err.data.msg);
|
||||
ElMessage.error(err.msg || err.data.msg)
|
||||
} finally {
|
||||
// 结束加载数据，设置state.loading为false
|
||||
state.loading = false;
|
||||
state.loading = false
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (state.createdIsNeed) {
|
||||
query();
|
||||
query()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
/**
|
||||
* 分页大小改变事件处理函数
|
||||
@@ -157,10 +157,10 @@ export function useTable(options?: BasicTableProps) {
|
||||
*/
|
||||
const sizeChangeHandle = (val: number) => {
|
||||
// 修改state.pagination中的size属性
|
||||
state.pagination!.size = val;
|
||||
state.pagination!.size = val
|
||||
// 再次发起查询操作
|
||||
query();
|
||||
};
|
||||
query()
|
||||
}
|
||||
|
||||
/**
|
||||
* 当前页码改变事件处理函数
|
||||
@@ -168,34 +168,34 @@ export function useTable(options?: BasicTableProps) {
|
||||
*/
|
||||
const currentChangeHandle = (val: number) => {
|
||||
// 修改state.pagination中的current属性
|
||||
state.pagination!.current = val;
|
||||
state.pagination!.current = val
|
||||
// 再次发起查询操作
|
||||
query();
|
||||
};
|
||||
query()
|
||||
}
|
||||
|
||||
// 排序触发事件
|
||||
const sortChangeHandle = (column: any) => {
|
||||
const prop = other.toUnderline(column.prop);
|
||||
if (column.order === 'descending') {
|
||||
state.descs?.push(prop);
|
||||
const prop = other.toUnderline(column.prop)
|
||||
if (column.order === "descending") {
|
||||
state.descs?.push(prop)
|
||||
if (state.ascs!.includes(prop)) {
|
||||
state.ascs?.splice(state.ascs.indexOf(prop), 1);
|
||||
state.ascs?.splice(state.ascs.indexOf(prop), 1)
|
||||
}
|
||||
} else if (column.order === 'ascending') {
|
||||
state.ascs?.push(prop);
|
||||
} else if (column.order === "ascending") {
|
||||
state.ascs?.push(prop)
|
||||
if (state.descs!.includes(prop)) {
|
||||
state.descs?.splice(state.descs.indexOf(prop), 1);
|
||||
state.descs?.splice(state.descs.indexOf(prop), 1)
|
||||
}
|
||||
} else {
|
||||
if (state.ascs!.includes(prop)) {
|
||||
state.ascs?.splice(state.ascs.indexOf(prop), 1);
|
||||
state.ascs?.splice(state.ascs.indexOf(prop), 1)
|
||||
}
|
||||
if (state.descs!.includes(prop)) {
|
||||
state.descs?.splice(state.descs.indexOf(prop), 1);
|
||||
state.descs?.splice(state.descs.indexOf(prop), 1)
|
||||
}
|
||||
}
|
||||
query();
|
||||
};
|
||||
query()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取数据列表，并可选择是否刷新当前页码
|
||||
@@ -205,11 +205,11 @@ export function useTable(options?: BasicTableProps) {
|
||||
const getDataList = (refresh?: any) => {
|
||||
// 如果需要刷新，则将state.pagination.current重置为1
|
||||
if (refresh !== false) {
|
||||
state.pagination!.current = 1;
|
||||
state.pagination!.current = 1
|
||||
}
|
||||
// 再次发起查询操作
|
||||
query();
|
||||
};
|
||||
query()
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
@@ -219,21 +219,21 @@ export function useTable(options?: BasicTableProps) {
|
||||
* @returns 返回一个Promise对象，用于异步处理结果
|
||||
*/
|
||||
const downBlobFile = (url: string, query: any, fileName: string) => {
|
||||
return other.downBlobFile(url, query, fileName);
|
||||
};
|
||||
return other.downBlobFile(url, query, fileName)
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义表格通用样式
|
||||
* @returns css
|
||||
*/
|
||||
const tableStyle: TableStyle = {
|
||||
cellStyle: { textAlign: 'center' },
|
||||
cellStyle: { textAlign: "center" },
|
||||
headerCellStyle: {
|
||||
textAlign: 'center',
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)',
|
||||
textAlign: "center",
|
||||
background: "var(--el-table-row-hover-bg-color)",
|
||||
color: "var(--el-text-color-primary)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
tableStyle,
|
||||
@@ -242,5 +242,5 @@ export function useTable(options?: BasicTableProps) {
|
||||
currentChangeHandle,
|
||||
sortChangeHandle,
|
||||
downBlobFile,
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user