通用标准页面排版

src/components/CascaderDict/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="position: relative">
     <el-cascader
       ref="cascader"
       :value="value"
@@ -11,7 +11,7 @@
       :clearable = "clearable"
       style="width: 100%"
       @change="cascaderChange" />
-    <i v-show="loading" class="el-icon-loading"/>
+    <i v-show="loading" class="el-icon-loading" style="position: absolute;top: 10px;right: 25px;"/>
   </div>
 </template>
 <script>

src/views/hiddenDangerCheckStandardLibrary/common/components/list.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-row :gutter="20">
+      <div class="filter-row mb-10">
         <el-form label-width="80px">
-          <el-col :span="8">
+          <el-row :gutter="20">
+            <el-col :span="6">
               <el-form-item label="行业类型">
                 <cascader-dict
                   v-model = "searchForm.INDUSTRY_TYPE_ARR"
@@ -12,11 +13,13 @@
                 />
               </el-form-item>
             </el-col>
-          <el-col :span="6">
+            <el-col :span="7">
               <el-form-item label="标准名称">
                 <el-input v-model="searchForm.CHECK_STANDARD_NAME" placeholder="搜索标准名称..." class="filter-item" />
               </el-form-item>
             </el-col>
+          </el-row>
+          <el-row :gutter="20">
             <el-col :span="6">
               <el-form-item label="导入时间">
                 <el-date-picker
@@ -29,9 +32,9 @@
                   value-format="yyyy-MM-dd"/>
               </el-form-item>
             </el-col>
-          <el-col :span="6">
+            <el-col :span="5">
               <el-form-item label="状态">
-              <el-select v-model="searchForm.COMMON_STATUS" placeholder="状态" clearable style="width: 100px" class="filter-item">
+                <el-select v-model="searchForm.COMMON_STATUS" placeholder="状态" clearable style="width: 100%" class="filter-item">
                   <el-option v-for="item in commonStatusList" :key="item.id" :label="item.name" :value="item.id" />
                 </el-select>
               </el-form-item>
@@ -44,13 +47,16 @@
                 <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh-left" @click="resetting">
                   重置
                 </el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="filter-flot">
         <el-button v-waves class="filter-item" type="primary" icon="el-icon-document-add" @click="importExcel('import')">
           导入标准表
         </el-button>
-            </el-form-item>
+      </div>
-          </el-col>
-        </el-form>
-      </el-row>
     </div>
     <el-table
       v-loading="listLoading"
@@ -80,16 +86,18 @@
           {{ row.COMMON_STATUS ? (row.COMMON_STATUS === 1 ? '有效' : '停用') : '' }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="300">
+      <el-table-column label="操作" align="center" width="320">
         <template slot-scope="{row}">
-          <el-row :gutter="20">
+          <el-row :gutter="20" style="margin-bottom: 5px">
             <el-button type="success" icon="el-icon-view" size="mini" @click="getInfo(row)">查看</el-button>
-            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="importExcel('reimport', row)">重新导入</el-button>
-            <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="importExcel('appendImport', row)">追加导入</el-button>
-            <el-button type="success" icon="el-icon-tickets" size="mini" @click="getCommonItem(row)">清单详细</el-button>
             <el-button v-show="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
             <el-button v-show="del" :disabled="row.COUNT_CUSTOM !== 0" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.COMMON_ID)">删除</el-button>
           </el-row>
+          <el-row :gutter="20">
+            <el-button type="success" icon="el-icon-tickets" size="mini" @click="getCommonItem(row)">清单详细</el-button>
+            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="importExcel('reimport', row)">重新导入</el-button>
+            <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="importExcel('appendImport', row)">追加导入</el-button>
+          </el-row>
         </template>
       </el-table-column>
     </el-table>
@@ -312,3 +320,12 @@ export default {
 }
 
 </script>
+<style lang="sass" scoped>
+  .filter-container
+    position: relative
+    .filter-flot
+      position: absolute
+      padding-bottom: 33px
+      right: 0
+      bottom: 0
+</style>