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

ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index-tree.vue.vm

@@ -89,6 +89,12 @@
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
+#set($firstTreeListField = "")
+#foreach($tempColumn in $columns)
+#if(!$tempColumn.pk && $tempColumn.list && "" != $tempColumn.javaField && $firstTreeListField == "")
+#set($firstTreeListField = $tempColumn.javaField)
+#end
+#end
 #foreach($column in $columns)
 #set($javaField=$column.javaField)
 #set($parentheseIndex=$column.columnComment.indexOf("（"))
@@ -99,19 +105,31 @@
 #end
 #if($column.pk)
 #elseif($column.list && $column.htmlType == "datetime")
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}" width="180">
+#else
         <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
+#end
           <template #default="scope">
             <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
           </template>
         </el-table-column>
 #elseif($column.list && $column.htmlType == "imageUpload")
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}Url" width="100">
+#else
         <el-table-column label="${comment}" align="center" prop="${javaField}Url" width="100">
+#end
           <template #default="scope">
             <image-preview :src="scope.row.${javaField}Url" :width="50" :height="50"/>
           </template>
         </el-table-column>
 #elseif($column.list && $column.dictType && "" != $column.dictType)
+#if($javaField == $firstTreeListField)
+        <el-table-column label="${comment}" prop="${javaField}">
+#else
         <el-table-column label="${comment}" align="center" prop="${javaField}">
+#end
           <template #default="scope">
 #if($column.htmlType == "checkbox")
             <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
@@ -121,7 +139,7 @@
           </template>
         </el-table-column>
 #elseif($column.list && "" != $javaField)
-#if(${foreach.index} == 1)
+#if($javaField == $firstTreeListField)
         <el-table-column label="${comment}" prop="${javaField}" />
 #else
         <el-table-column label="${comment}" align="center" prop="${javaField}" />
@@ -277,6 +295,10 @@
 <script setup name="${BusinessName}" lang="ts">
 import { add${BusinessName}, del${BusinessName}, get${BusinessName}, list${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}';
 import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 #if(${dicts} != '')
 import { useDict } from '@/utils/dict';
 #end
@@ -297,19 +319,14 @@ type ${BusinessName}Option = {
 const ${businessName}List = ref<${BusinessName}VO[]>([]);
 const ${businessName}Options = ref<${BusinessName}Option[]>([]);
 const buttonLoading = ref(false);
-const showSearch = ref(true);
+const { showSearch } = useSearchToggle();
 const isExpandAll = ref(true);
-const loading = ref(false);
+const { loading, setLoading, withLoading } = useLoading();
 
 const queryFormRef = ref<ElFormInstance>();
 const ${businessName}FormRef = ref<ElFormInstance>();
 const ${businessName}TableRef = ref<ElTableInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
@@ -369,28 +386,33 @@ const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ${businessName}FormRef,
+  initialFormData: initFormData
+});
 
 /** 查询${functionName}列表 */
 const getList = async () => {
-  loading.value = true;
+  await withLoading(async () => {
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-  queryParams.value.params = {};
+    queryParams.value.params = {};
 #break
 #end
 #end
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}');
+    addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}');
 #end
 #end
-  const res = await list${BusinessName}(queryParams.value);
+    const res = await list${BusinessName}(queryParams.value);
-  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;
-    loading.value = false;
+    }
-  }
+  });
 };
 
 /** 查询${functionName}下拉树结构 */
@@ -405,13 +427,7 @@ const getTreeselect = async () => {
 /** 取消按钮 */
 const cancel = () => {
   reset();
-  dialog.visible = false;
+  closeDialog();
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  ${businessName}FormRef.value?.resetFields();
 };
 
 /** 搜索按钮操作 */
@@ -419,29 +435,31 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
+const { resetQuery } = useSearchReset({
-const resetQuery = () => {
+  queryFormRef,
+  queryParams,
+  resetExtras: () => {
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  dateRange${AttrName}.value = ['', ''];
+    dateRange${AttrName}.value = ['', ''];
 #end
 #end
-  queryFormRef.value?.resetFields();
+  },
-  handleQuery();
+  afterReset: () => {
-};
+    handleQuery();
+  }
+});
 
 /** 新增按钮操作 */
 const handleAdd = (row?: ${BusinessName}VO) => {
-  reset();
+  openDialog('添加${functionName}');
   getTreeselect();
   if (row != null && row.${treeCode}) {
     form.value.${treeParentCode} = row.${treeCode};
   } else {
     form.value.${treeParentCode} = 0;
   }
-  dialog.visible = true;
-  dialog.title = '添加${functionName}';
 };
 
 /** 展开/折叠操作 */
@@ -472,8 +490,7 @@ const handleUpdate = async (row: ${BusinessName}VO) => {
   form.value.$column.javaField = form.value.${column.javaField}.split(",");
   #end
 #end
-  dialog.visible = true;
+  showDialog('修改${functionName}');
-  dialog.title = '修改${functionName}';
 };
 
 /** 提交按钮 */
@@ -492,7 +509,7 @@ const submitForm = () => {
         await add${BusinessName}(form.value).finally(() => (buttonLoading.value = false));
       }
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
@@ -501,8 +518,8 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row: ${BusinessName}VO) => {
   await modal.confirm('是否确认删除${functionName}编号为"' + row.${pkColumn.javaField} + '"的数据项？');
-  loading.value = true;
+  setLoading(true);
-  await del${BusinessName}(row.${pkColumn.javaField}).finally(() => (loading.value = false));
+  await del${BusinessName}(row.${pkColumn.javaField}).finally(() => setLoading(false));
   await getList();
   modal.msgSuccess('删除成功');
 };

ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index.vue.vm

@@ -257,6 +257,11 @@
 <script setup name="${BusinessName}" lang="ts">
 import { add${BusinessName}, del${BusinessName}, get${BusinessName}, list${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}';
 import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 #if(${dicts} != '')
 import { useDict } from '@/utils/dict';
 #end
@@ -273,11 +278,8 @@ const { ${dictsNoSymbol} } = toRefs<any>(useDict(${dicts}));
 
 const ${businessName}List = ref<${BusinessName}VO[]>([]);
 const buttonLoading = ref(false);
-const loading = ref(true);
+const { loading, withLoading } = useLoading(true);
-const showSearch = ref(true);
+const { showSearch } = useSearchToggle();
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
@@ -289,11 +291,6 @@ const dateRange${AttrName} = ref<[DateModelType, DateModelType]>(['', '']);
 const queryFormRef = ref<ElFormInstance>();
 const ${businessName}FormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: ${BusinessName}Form = {
 #foreach ($column in $columns)
 #if($column.insert || $column.edit)
@@ -347,38 +344,38 @@ const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<${BusinessName}VO>(item => item.${pkColumn.javaField});
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ${businessName}FormRef,
+  initialFormData: initFormData
+});
 
 /** 查询${functionName}列表 */
 const getList = async () => {
-  loading.value = true;
+  await withLoading(async () => {
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-  queryParams.value.params = {};
+    queryParams.value.params = {};
 #break
 #end
 #end
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}');
+    addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}');
 #end
 #end
-  const res = await list${BusinessName}(queryParams.value);
+    const res = await list${BusinessName}(queryParams.value);
-  ${businessName}List.value = res.data?.rows;
+    ${businessName}List.value = res.data?.rows;
-  total.value = res.data?.total;
+    total.value = res.data?.total;
-  loading.value = false;
+  });
 };
 
 /** 取消按钮 */
 const cancel = () => {
   reset();
-  dialog.visible = false;
+  closeDialog();
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  ${businessName}FormRef.value?.resetFields();
 };
 
 /** 搜索按钮操作 */
@@ -387,30 +384,28 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
+const { resetQuery } = useSearchReset({
-const resetQuery = () => {
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
 #foreach ($column in $columns)
 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
-  dateRange${AttrName}.value = ['', ''];
+    dateRange${AttrName}.value = ['', ''];
 #end
 #end
-  queryFormRef.value?.resetFields();
+  },
-  handleQuery();
+  afterReset: () => {
-};
+    handleQuery();
-
+  }
-/** 多选框选中数据 */
+});
-const handleSelectionChange = (selection: ${BusinessName}VO[]) => {
-  ids.value = selection.map(item => item.${pkColumn.javaField});
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
 
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
+  openDialog('添加${functionName}');
-  dialog.visible = true;
-  dialog.title = '添加${functionName}';
 };
 
 /** 修改按钮操作 */
@@ -424,8 +419,7 @@ const handleUpdate = async (row?: ${BusinessName}VO) => {
   form.value.$column.javaField = form.value.${column.javaField}.split(",");
   #end
 #end
-  dialog.visible = true;
+  showDialog('修改${functionName}');
-  dialog.title = '修改${functionName}';
 };
 
 /** 提交按钮 */
@@ -444,7 +438,7 @@ const submitForm = () => {
         await add${BusinessName}(form.value).finally(() => (buttonLoading.value = false));
       }
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
@@ -453,7 +447,7 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: ${BusinessName}VO) => {
   const _${pkColumn.javaField}s = row?.${pkColumn.javaField} || ids.value;
-  await modal.confirm('是否确认删除${functionName}编号为"' + _${pkColumn.javaField}s + '"的数据项？').finally(() => (loading.value = false));
+  await modal.confirm('是否确认删除${functionName}编号为"' + _${pkColumn.javaField}s + '"的数据项？');
   await del${BusinessName}(_${pkColumn.javaField}s);
   modal.msgSuccess('删除成功');
   await getList();