模板文件

ruoyi-generator/src/main/resources/vm/vue/index.vue.vm

@@ -1,5 +1,6 @@
 <template>
-  <div class="app-container">
+  <div class="container-main" ref="main">
+  <div class="search-hearder" ref="topSearch">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
         #foreach($column in $columns)
             #if($column.query)
@@ -68,55 +69,39 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['${moduleName}:${businessName}:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
+    </div>
+    <div class="layui-table-tool" ref="tableTool">
+      <el-button
+        type="primary"
+        size="mini"
+        @click="handleAdd()"
+         v-hasPermi="['${moduleName}:${businessName}:add']"
+        >新增</el-button
+      >
+      <el-button
             type="success"
-            plain
-            icon="el-icon-edit"
             size="mini"
             :disabled="single"
             @click="handleUpdate"
             v-hasPermi="['${moduleName}:${businessName}:edit']"
         >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
+         <el-button
             type="danger"
-            plain
-            icon="el-icon-delete"
             size="mini"
             :disabled="multiple"
             @click="handleDelete"
             v-hasPermi="['${moduleName}:${businessName}:remove']"
         >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            :loading="exportLoading"
-            @click="handleExport"
-            v-hasPermi="['${moduleName}:${businessName}:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
+      <el-button
+        type="warning"
+        size="mini"
+        :loading="exportLoading"
+        @click="handleExport"
+         v-hasPermi="['${moduleName}:${businessName}:export']"
+        >导出</el-button
+      >
+    </div>
+    <el-table v-loading="loading" :data="${businessName}List"  :height="tableHeigth" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
         #foreach($column in $columns)
             #set($javaField=$column.javaField)
@@ -148,24 +133,20 @@
         <template slot-scope="scope">
           <el-button
               size="mini"
-              type="text"
-              icon="el-icon-view"
               @click="handleInfo(scope.row)"
               v-hasPermi="['${moduleName}:${businessName}:list']"
           >
             查看
           </el-button>
           <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
+            type="primary"
+            size="mini"
               @click="handleUpdate(scope.row)"
               v-hasPermi="['${moduleName}:${businessName}:edit']"
           >修改</el-button>
           <el-button
               size="mini"
-              type="text"
-              icon="el-icon-delete"
+            type="danger"
               @click="handleDelete(scope.row)"
               v-hasPermi="['${moduleName}:${businessName}:remove']"
           >删除</el-button>
@@ -182,7 +163,8 @@
     />
 
     <!-- 添加或修改${functionName}对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog  :visible.sync="open" width="500px" append-to-body custom-class="dialog-box">
+     <div slot="title" class="dialog-title">{{ title }}</div>
       <el-form ref="form" :model="form" :rules="rules" label-width="auto">
           #foreach($column in $columns)
               #set($field=$column.javaField)
@@ -320,16 +302,16 @@
     </el-dialog>
     <!--查看${functionName}详情页-->
     <el-dialog
-        :title="infoTitle"
         :visible.sync="infoOpen"
         width="90%"
         append-to-body
         :close-on-click-modal="false"
         :destroy-on-close="true"
+           custom-class="dialog-box"
     >
-      <div class="info_box">
+     <div slot="title" class="dialog-title">{{ infoTitle }}</div>
 
-        <el-descriptions title="${functionName}"  :column="2" border>
+        <el-descriptions title="${functionName}"  :column="2" border labelClassName="desLable">
             #foreach($column in $columns)
                 #set($field=$column.javaField)
                 #if($column.insert && !$column.pk)
@@ -347,14 +329,18 @@
                 #end
             #end
         </el-descriptions>
-      </div>
+   
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
   import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName}, export${BusinessName} } from "@/api/${moduleName}/${businessName}";
   export default {
+    computed: {
+    ...mapGetters(["townList"]),
+  },
     name: "${BusinessName}",
     //注释字典
             #if(${dicts} != '')
@@ -362,6 +348,7 @@
             #end
     data() {
       return {
+        tableHeigth: 0,
         //查看详情
         infoOpen:false,
         //详情标题
@@ -434,7 +421,15 @@
       };
     },
     created() {
+      // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight -
+        (this.$refs.topSearch.offsetHeight +
+          this.$refs.tableTool.offsetHeight) -
+        46;
       this.getList();
+    });
     },
     methods: {
       /** 查询${functionName}列表 */
@@ -565,13 +560,13 @@
               #end
             if (this.form.${pkColumn.javaField} != null) {
               update${BusinessName}(this.form).then(response => {
-                this.msgSuccess("修改成功");
+                this.$modal.msgSuccess("修改成功");
                 this.open = false;
                 this.getList();
               });
             } else {
               add${BusinessName}(this.form).then(response => {
-                this.msgSuccess("新增成功");
+                this.$modal.msgSuccess("新增成功");
                 this.open = false;
                 this.getList();
               });