update 优化 代码生成模板

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

@@ -1,8 +1,9 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
 #foreach($column in $columns)
 #if($column.query)
 #set($dictType=$column.dictType)
@@ -14,38 +15,33 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.htmlType == "input" || $column.htmlType == "textarea")
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-input v-model="queryParams.${column.javaField}" placeholder="请输入${comment}" clearable style="width: 240px" @keyup.enter="handleQuery" />
-          </el-form-item>
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-input v-model="queryParams.${column.javaField}" placeholder="请输入${comment}" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-              <el-option
-                  v-for="dict in ${dictType}"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
+                <el-option v-for="dict in ${dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>
+              </el-select>
+            </el-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-              <el-option label="请选择字典生成" value="" />
-            </el-select>
-          </el-form-item>
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
+                <el-option label="请选择字典生成" value="" />
+              </el-select>
+            </el-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-date-picker clearable
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-date-picker clearable
                 v-model="queryParams.${column.javaField}"
                 type="date"
                 value-format="YYYY-MM-DD"
                 placeholder="选择${comment}"
-            />
-          </el-form-item>
+              />
+            </el-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-          <el-form-item label="${comment}" style="width: 308px">
-            <el-date-picker
+            <el-form-item label="${comment}" style="width: 308px">
+              <el-date-picker
                 v-model="dateRange${AttrName}"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 type="daterange"
@@ -53,16 +49,17 @@
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-            />
-          </el-form-item>
+              />
+            </el-form-item>
 #end
 #end
 #end
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
       </div>
     </transition>
 
@@ -79,12 +76,12 @@
         </el-row>
       </template>
       <el-table
+        ref="${businessName}TableRef"
         v-loading="loading"
         :data="${businessName}List"
         row-key="${treeCode}"
         :default-expand-all="isExpandAll"
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-        ref="${businessName}TableRef"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
 #foreach($column in $columns)
 #set($javaField=$column.javaField)
@@ -322,9 +319,9 @@ const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
   queryParams: {
 #foreach ($column in $columns)
 #if($column.query)
-    #if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
+#if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
     $column.javaField: undefined,
-    #end
+#end
 #end
 #end
     params: {
@@ -421,17 +418,15 @@ const resetQuery = () => {
 
 /** 新增按钮操作 */
 const handleAdd = (row?: ${BusinessName}VO) => {
+  reset();
+  getTreeselect();
+  if (row != null && row.${treeCode}) {
+    form.value.${treeParentCode} = row.${treeCode};
+  } else {
+    form.value.${treeParentCode} = 0;
+  }
   dialog.visible = true;
   dialog.title = "添加${functionName}";
-  nextTick(() => {
-    reset();
-    getTreeselect();
-    if (row != null && row.${treeCode}) {
-      form.value.${treeParentCode} = row.${treeParentCode};
-    } else {
-      form.value.${treeParentCode} = 0;
-    }
-  });
 }
 
 /** 展开/折叠操作 */
@@ -449,25 +444,21 @@ const toggleExpandAll = (data: ${BusinessName}VO[], status: boolean) => {
 }
 
 /** 修改按钮操作 */
-const handleUpdate = (row: ${BusinessName}VO) => {
-  loading.value = true;
-  dialog.visible = true;
-  dialog.title = "修改${functionName}";
-  nextTick(async () => {
-    reset();
-    await getTreeselect();
-    if (row != null) {
-      form.value.${treeParentCode} = row.${treeCode};
-    }
-    const res = await get${BusinessName}(row.${pkColumn.javaField});
-    loading.value = false;
-    Object.assign(form.value, res.data);
+const handleUpdate = async (row: ${BusinessName}VO) => {
+  reset();
+  await getTreeselect();
+  if (row != null) {
+    form.value.${treeParentCode} = row.${treeParentCode};
+  }
+  const res = await get${BusinessName}(row.${pkColumn.javaField});
+  Object.assign(form.value, res.data);
 #foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-    form.value.$column.javaField = form.value.${column.javaField}.split(",");
-#end
+  #if($column.htmlType == "checkbox")
+  form.value.$column.javaField = form.value.${column.javaField}.split(",");
+  #end
 #end
-  });
+  dialog.visible = true;
+  dialog.title = "修改${functionName}";
 }
 
 /** 提交按钮 */

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

@@ -1,8 +1,9 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
 #foreach($column in $columns)
 #if($column.query)
 #set($dictType=$column.dictType)
@@ -14,38 +15,33 @@
 #set($comment=$column.columnComment)
 #end
 #if($column.htmlType == "input" || $column.htmlType == "textarea")
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-input v-model="queryParams.${column.javaField}" placeholder="请输入${comment}" clearable style="width: 240px" @keyup.enter="handleQuery" />
-          </el-form-item>
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-input v-model="queryParams.${column.javaField}" placeholder="请输入${comment}" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-              <el-option
-                v-for="dict in ${dictType}"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable >
+                <el-option v-for="dict in ${dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>
+              </el-select>
+            </el-form-item>
 #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
-              <el-option label="请选择字典生成" value="" />
-            </el-select>
-          </el-form-item>
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable >
+                <el-option label="请选择字典生成" value="" />
+              </el-select>
+            </el-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
-          <el-form-item label="${comment}" prop="${column.javaField}">
-            <el-date-picker clearable
-              v-model="queryParams.${column.javaField}"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="请选择${comment}"
-            />
-          </el-form-item>
+            <el-form-item label="${comment}" prop="${column.javaField}">
+              <el-date-picker clearable
+                v-model="queryParams.${column.javaField}"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择${comment}"
+              />
+            </el-form-item>
 #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
-          <el-form-item label="${comment}" style="width: 308px">
-            <el-date-picker
+            <el-form-item label="${comment}" style="width: 308px">
+              <el-date-picker
                 v-model="dateRange${AttrName}"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 type="daterange"
@@ -53,16 +49,17 @@
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-            />
-          </el-form-item>
+              />
+            </el-form-item>
 #end
 #end
 #end
-          <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
       </div>
     </transition>
 
@@ -135,13 +132,7 @@
         </el-table-column>
       </el-table>
 
-      <pagination
-          v-show="total>0"
-          :total="total"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getList"
-      />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改${functionName}对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
@@ -214,12 +205,12 @@
         <el-form-item label="${comment}" prop="${field}">
           <el-radio-group v-model="form.${field}">
             <el-radio
-                v-for="dict in ${dictType}"
-                :key="dict.value"
+              v-for="dict in ${dictType}"
+              :key="dict.value"
 #if($column.javaType == "Integer" || $column.javaType == "Long")
-                :label="parseInt(dict.value)"
+              :label="parseInt(dict.value)"
 #else
-                :label="dict.value"
+              :label="dict.value"
 #end
             >{{dict.label}}</el-radio>
           </el-radio-group>
@@ -227,7 +218,7 @@
 #elseif($column.htmlType == "radio" && $dictType)
         <el-form-item label="${comment}" prop="${field}">
           <el-radio-group v-model="form.${field}">
-                <el-radio label="1">请选择字典生成</el-radio>
+            <el-radio label="1">请选择字典生成</el-radio>
           </el-radio-group>
         </el-form-item>
 #elseif($column.htmlType == "datetime")
@@ -308,9 +299,9 @@ const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
     pageSize: 10,
 #foreach ($column in $columns)
 #if($column.query)
-    #if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
+#if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
     $column.javaField: undefined,
-    #end
+#end
 #end
 #end
     params: {
@@ -404,30 +395,24 @@ const handleSelectionChange = (selection: ${BusinessName}VO[]) => {
 
 /** 新增按钮操作 */
 const handleAdd = () => {
+  reset();
   dialog.visible = true;
   dialog.title = "添加${functionName}";
-  nextTick(() => {
-    reset();
-  });
 }
 
 /** 修改按钮操作 */
-const handleUpdate = (row?: ${BusinessName}VO) => {
-  loading.value = true
-  dialog.visible = true;
-  dialog.title = "修改${functionName}";
-  nextTick(async () => {
-    reset();
-    const _${pkColumn.javaField} = row?.${pkColumn.javaField} || ids.value[0]
-    const res = await get${BusinessName}(_${pkColumn.javaField});
-    loading.value = false;
-    Object.assign(form.value, res.data);
+const handleUpdate = async (row?: ${BusinessName}VO) => {
+  reset();
+  const _${pkColumn.javaField} = row?.${pkColumn.javaField} || ids.value[0]
+  const res = await get${BusinessName}(_${pkColumn.javaField});
+  Object.assign(form.value, res.data);
 #foreach ($column in $columns)
-#if($column.htmlType == "checkbox")
-    form.value.$column.javaField = form.value.${column.javaField}.split(",");
-#end
+  #if($column.htmlType == "checkbox")
+  form.value.$column.javaField = form.value.${column.javaField}.split(",");
+  #end
 #end
-  });
+  dialog.visible = true;
+  dialog.title = "修改${functionName}";
 }
 
 /** 提交按钮 */