import {reactive, ref, Ref, UnwrapRef} from "vue";
|
import {PageF, PageInterface, PagesInterface} from "@/utils/globalInterface";
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {requestType} from "@/utils/request";
|
|
|
|
/**
|
* @description usePage 接收一个opts 参数，返回通用页面所需数据
|
* @param {Object} opts.form 表单对象
|
* @param {string} opts.title 页面标题
|
* @param {Object} opts.queryParams 查询参数
|
* @param {Function} opts.getListApi 获取列表数据的接口
|
* @param {Function} opts.getDetailApi 获取详情数据的接口
|
* @param {Function} opts.deleteApi 删除数据的接口
|
* @param {Function} opts.exportApi 导出数据的接口
|
* @param {Function} opts.getBeginListFunc 获取前getList数据的接口
|
* @param {Function} opts.getListFunc 执行完getList成功后执行的逻辑
|
* @param {Function} opts.resetFunc 执行完reset成功后执行的逻辑
|
* @param {Function} opts.resetQueryFunc 执行完resetQuery成功后执行的逻辑
|
* @param {Function} opts.handleSelectionChangeFunc 执行完handleSelectionChange成功后执行的逻辑
|
*/
|
export const usePagePlus = (opts: {
|
form?:any,
|
option?:any,
|
idKey?:any,
|
page:any,
|
queryParams?:any,
|
getListApi?:requestType,
|
addApi?:requestType,
|
updateApi?:requestType,
|
getDetailApi?:requestType,
|
deleteApi?:requestType,
|
exportApi?:requestType,
|
getBeginListFunc?:Function,
|
getListFunc?:Function,
|
resetFunc?:Function,
|
handleQueryFunc?:Function,
|
resetQueryFunc?:Function,
|
handleSelectionChangeFunc?:Function,
|
handleAddFunc?:Function,
|
handleUpdateFunc?:Function,
|
handleBeforeOpenFunc?:Function,
|
handleEndOpenFunc?:Function,
|
rowSaveBegin?:Function,
|
rowUpdateBegin?:Function,
|
})=>{
|
const pageF = reactive({...PageF});
|
const tableData = ref([]);
|
opts.idKey = opts.idKey?opts.idKey: 'id';
|
/**
|
* 获取列表数据
|
*/
|
const onLoad = (page:PagesInterface, params?:Object) =>{
|
if(opts.getBeginListFunc){
|
params = opts.getBeginListFunc!(params)
|
}
|
pageF.loading = true;
|
opts.getListApi!({pageNum:page.currentPage,pageSize:page.pageSize,...Object.assign(params?params:{},opts.queryParams.value)}).then((res:any)=>{
|
tableData.value = res.rows|| [];
|
pageF.loading = false;
|
opts.page.total = res.total || 0;
|
if(opts.getListFunc){
|
opts.getListFunc!(res)
|
}
|
})
|
}
|
|
/**
|
* 清空搜索回调方法
|
*/
|
const searchReset = () =>{
|
opts.queryParams = {};
|
if (opts.handleQueryFunc){
|
opts.handleQueryFunc();
|
}
|
onLoad(opts.page);
|
}
|
|
/** 搜索按钮操作 */
|
const searchChange = (params:any, done:any) => {
|
// opts.queryParams = params;
|
opts.page.currentPage = 1;
|
if (opts.handleQueryFunc){
|
opts.handleQueryFunc();
|
}
|
onLoad(opts.page,params);
|
done();
|
|
}
|
// 多选框选中数据
|
const selectionChange = (selection?: any[]) => {
|
pageF.ids = selection!.map(item => item[opts.idKey]);
|
pageF.single = selection!.length != 1;
|
pageF.multiple = !selection!.length;
|
if (opts.handleSelectionChangeFunc){
|
opts.handleSelectionChangeFunc!(selection);
|
}
|
}
|
/** 新增操作 */
|
const rowSave = (row:any, done:any, loading:any) => {
|
if (opts.rowSaveBegin){
|
opts.rowSaveBegin!(row);
|
}
|
opts.addApi!(row).then(()=>{
|
ElMessage({
|
message: "新增成功！",
|
type: 'success'
|
})
|
onLoad(opts.page);
|
done()
|
}).catch(()=>{
|
loading()
|
})
|
}
|
|
/** 修改操作 */
|
const rowUpdate = (row:any, index:any, done:any, loading:any) => {
|
if (opts.rowUpdateBegin){
|
opts.rowUpdateBegin!(row);
|
}
|
opts.updateApi!(row).then((response:any) => {
|
ElMessage({
|
message: "修改成功！",
|
type: 'success'
|
})
|
onLoad(opts.page);
|
done()
|
}).catch(()=>{
|
loading()
|
})
|
}
|
|
const handleUpdate = ()=>{
|
if ( !(pageF?.ids)|| pageF?.ids?.length === 0) {
|
ElMessage({
|
message: "请选择至少一条数据！",
|
type: 'warning'
|
})
|
return;
|
}
|
if(opts.handleUpdateFunc){
|
opts.handleUpdateFunc!()
|
}
|
|
}
|
|
|
const rowDel = (row:any) =>{
|
ElMessageBox.confirm("确定将选择数据删除？", '系统提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
|
return opts.deleteApi!(row[opts.idKey]);
|
}).then(() => {
|
onLoad(opts.page);
|
ElMessage({
|
message: "删除成功！",
|
type: 'success'
|
})
|
});
|
}
|
const handleDelete = () =>{
|
if ( !(pageF?.ids)|| pageF?.ids?.length === 0) {
|
ElMessage({
|
message: "请选择至少一条数据！",
|
type: 'warning'
|
})
|
return;
|
}
|
ElMessageBox.confirm("确定将选择数据删除？", '系统提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
|
return opts.deleteApi!(pageF?.ids);
|
}).then(() => {
|
onLoad(opts.page);
|
ElMessage({
|
message: "删除成功！",
|
type: 'success'
|
})
|
});
|
}
|
|
|
/**
|
* 导出
|
*/
|
const handleExport =()=>{
|
console.log(opts.queryParams.value)
|
opts.exportApi!(opts.queryParams.value);
|
}
|
|
const beforeOpen = (done:any, type:string) => {
|
if(opts.handleBeforeOpenFunc){
|
opts.handleBeforeOpenFunc!(type)
|
}
|
if (["edit", "view"].includes(type)) {
|
|
opts.getDetailApi!(opts.form.value[opts.idKey]).then(res => {
|
opts.form.value = res.data;
|
if(opts.handleEndOpenFunc){
|
opts.handleEndOpenFunc!(type,res)
|
}
|
});
|
}
|
done();
|
}
|
const currentChange = (currentPage:number) => {
|
opts.page.currentPage = currentPage;
|
}
|
const sizeChange = (pageSize:number) => {
|
opts.page.pageSize = pageSize;
|
}
|
const refreshChange = () => {
|
onLoad(opts.page,opts.queryParams.value);
|
}
|
return {
|
pageF,
|
tableData,
|
onLoad,
|
searchReset,
|
searchChange,
|
selectionChange,
|
rowSave,
|
rowUpdate,
|
rowDel,
|
handleDelete,
|
handleExport,
|
beforeOpen,
|
currentChange,
|
sizeChange,
|
handleUpdate,
|
refreshChange
|
}
|
|
}
|
