mirror of
https://gitee.com/dromara/RuoYi-Vue-Plus.git
synced 2026-04-18 08:13:16 +08:00
update 优化 重构抽出一些常用hooks组件简化页面编码
This commit is contained in:
@@ -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();
|
||||||
|
|||||||
@@ -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
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user