update 优化 重构抽出一些常用hooks组件简化页面编码

This commit is contained in:
疯狂的狮子Li
2026-04-17 15:46:40 +08:00
parent e0033702b0
commit 983b393d3e
2 changed files with 36 additions and 37 deletions

View File

@@ -297,13 +297,17 @@ import { add${BusinessName}, del${BusinessName}, get${BusinessName}, list${Busin
import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types'; import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
import { useLoading } from '@/hooks/async/useLoading'; import { useLoading } from '@/hooks/async/useLoading';
import { useFormDialog } from '@/hooks/dialog/useFormDialog'; import { useFormDialog } from '@/hooks/dialog/useFormDialog';
#if($needAddDateRange)
import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
#end
import { useSearchReset } from '@/hooks/form/useSearchReset'; import { useSearchReset } from '@/hooks/form/useSearchReset';
import { useSearchToggle } from '@/hooks/form/useSearchToggle'; import { useSearchToggle } from '@/hooks/form/useSearchToggle';
import { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
#if(${dicts} != '') #if(${dicts} != '')
import { useDict } from '@/utils/dict'; import { useDict } from '@/utils/dict';
#end #end
import modal from '@/plugins/modal'; import modal from '@/plugins/modal';
import { handleTree#if($needAddDateRange), addDateRange#end } from '@/utils/ruoyi'; import { handleTree } from '@/utils/ruoyi';
#if(${dicts} != '') #if(${dicts} != '')
#set($dictsNoSymbol=$dicts.replace("'", "")) #set($dictsNoSymbol=$dicts.replace("'", ""))
@@ -320,17 +324,24 @@ const ${businessName}List = ref<${BusinessName}VO[]>([]);
const ${businessName}Options = ref<${BusinessName}Option[]>([]); const ${businessName}Options = ref<${BusinessName}Option[]>([]);
const buttonLoading = ref(false); const buttonLoading = ref(false);
const { showSearch } = useSearchToggle(); const { showSearch } = useSearchToggle();
const isExpandAll = ref(true);
const { loading, setLoading, withLoading } = useLoading(); const { loading, setLoading, withLoading } = useLoading();
const queryFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>();
const ${businessName}FormRef = ref<ElFormInstance>(); const ${businessName}FormRef = ref<ElFormInstance>();
const ${businessName}TableRef = ref<ElTableInstance>(); const ${businessName}TableRef = ref<ElTableInstance>();
const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<${BusinessName}VO>({
tableRef: ${businessName}TableRef,
data: ${businessName}List
});
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
const dateRange${AttrName} = ref<[DateModelType, DateModelType]>(['', '']); const {
dateRange: dateRange${AttrName},
applyDateRange: apply${AttrName}DateRange,
resetDateRange: reset${AttrName}DateRange
} = useDateRangeQuery('${AttrName}');
#end #end
#end #end
@@ -395,19 +406,18 @@ const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFor
/** 查询${functionName}列表 */ /** 查询${functionName}列表 */
const getList = async () => { const getList = async () => {
await withLoading(async () => { await withLoading(async () => {
#foreach ($column in $columns) #if($needAddDateRange)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") let params = queryParams.value;
queryParams.value.params = {};
#break
#end
#end
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}'); params = apply${AttrName}DateRange(params);
#end #end
#end #end
const res = await list${BusinessName}(params);
#else
const res = await list${BusinessName}(queryParams.value); const res = await list${BusinessName}(queryParams.value);
#end
const data = handleTree<${BusinessName}VO>(res.data, '${treeCode}', '${treeParentCode}'); const data = handleTree<${BusinessName}VO>(res.data, '${treeCode}', '${treeParentCode}');
if (data) { if (data) {
${businessName}List.value = data; ${businessName}List.value = data;
@@ -442,7 +452,7 @@ const { resetQuery } = useSearchReset({
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
dateRange${AttrName}.value = ['', '']; reset${AttrName}DateRange();
#end #end
#end #end
}, },
@@ -462,20 +472,6 @@ const handleAdd = (row?: ${BusinessName}VO) => {
} }
}; };
/** 展开/折叠操作 */
const handleToggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
toggleExpandAll(${businessName}List.value, isExpandAll.value);
};
/** 展开/折叠操作 */
const toggleExpandAll = (data: ${BusinessName}VO[], status: boolean) => {
data.forEach(item => {
${businessName}TableRef.value?.toggleRowExpansion(item, status);
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
});
};
/** 修改按钮操作 */ /** 修改按钮操作 */
const handleUpdate = async (row: ${BusinessName}VO) => { const handleUpdate = async (row: ${BusinessName}VO) => {
reset(); reset();

View File

@@ -259,15 +259,15 @@ import { add${BusinessName}, del${BusinessName}, get${BusinessName}, list${Busin
import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types'; import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
import { useLoading } from '@/hooks/async/useLoading'; import { useLoading } from '@/hooks/async/useLoading';
import { useFormDialog } from '@/hooks/dialog/useFormDialog'; import { useFormDialog } from '@/hooks/dialog/useFormDialog';
#if($needAddDateRange)
import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
#end
import { useSearchReset } from '@/hooks/form/useSearchReset'; import { useSearchReset } from '@/hooks/form/useSearchReset';
import { useSearchToggle } from '@/hooks/form/useSearchToggle'; import { useSearchToggle } from '@/hooks/form/useSearchToggle';
import { useTableSelection } from '@/hooks/table/useTableSelection'; import { useTableSelection } from '@/hooks/table/useTableSelection';
#if(${dicts} != '') #if(${dicts} != '')
import { useDict } from '@/utils/dict'; import { useDict } from '@/utils/dict';
#end #end
#if($needAddDateRange)
import { addDateRange } from '@/utils/ruoyi';
#end
import modal from '@/plugins/modal'; import modal from '@/plugins/modal';
import { download as requestDownload } from '@/utils/request'; import { download as requestDownload } from '@/utils/request';
@@ -284,7 +284,11 @@ const total = ref(0);
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
const dateRange${AttrName} = ref<[DateModelType, DateModelType]>(['', '']); const {
dateRange: dateRange${AttrName},
applyDateRange: apply${AttrName}DateRange,
resetDateRange: reset${AttrName}DateRange
} = useDateRangeQuery('${AttrName}');
#end #end
#end #end
@@ -354,19 +358,18 @@ const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFor
/** 查询${functionName}列表 */ /** 查询${functionName}列表 */
const getList = async () => { const getList = async () => {
await withLoading(async () => { await withLoading(async () => {
#foreach ($column in $columns) #if($needAddDateRange)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") let params = queryParams.value;
queryParams.value.params = {};
#break
#end
#end
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}'); params = apply${AttrName}DateRange(params);
#end #end
#end #end
const res = await list${BusinessName}(params);
#else
const res = await list${BusinessName}(queryParams.value); const res = await list${BusinessName}(queryParams.value);
#end
${businessName}List.value = res.data?.rows; ${businessName}List.value = res.data?.rows;
total.value = res.data?.total; total.value = res.data?.total;
}); });
@@ -394,7 +397,7 @@ const { resetQuery } = useSearchReset({
#foreach ($column in $columns) #foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
dateRange${AttrName}.value = ['', '']; reset${AttrName}DateRange();
#end #end
#end #end
}, },