修改

ruoyi-ui/src/views/system/surface/index.vue

@@ -1,154 +1,201 @@
 <template>
-  <div class="single">
-   <!-- 头部 -->
-   <div class="single_header">
-      <p>表</p>
-      <el-divider></el-divider>
-      <div class="table_headerBtun">
-           <el-button type="primary" plain v-for="(item,index) in 7" :key="index">新增</el-button>
+  <div class="table_total">
+    <div class="table_header">
+      <!-- <p>单表</p>
+      <el-divider></el-divider> -->
+      <div class="table_headerBtun" v-if="queryData.buttonList">
+        <el-button type="primary" plain v-for="(item,index) in queryData.buttonList.split('')" :key="index">{{item | btnConversion}}</el-button>
       </div>
-      <el-form style="margin-top: 30px;" :model="queryParams" ref="queryForm" :inline="true"  label-width="118px">
-        <el-form-item label="岗位编码" prop="postCode" v-for="(item,index) in 4" :key="index">
-          <el-input
-            v-model="queryParams.postCode"
-            placeholder="请输入岗位编码"
-            clearable
-            size="small"
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+        <dynamic-form :config="queryParams" @inputs = "changeFn" :formConfig="item" v-for="(item,index) in queryData.queryList" :key='index'/>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
-   </div>
-   <!-- 内容 -->
-   <div class="surface_nave">
-     <el-table stripe v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-       <el-table-column label="序号" align="center" prop="noticeId" width="80" />
-       <el-table-column :label="surlable" align="center" prop="name" />
-       <el-table-column :label="surlable" align="center" sortable prop="name" />
-       <el-table-column label="岗位编码" align="center" prop="postCode" />
-       <el-table-column label="岗位名称" align="center" prop="postName" />
-       <el-table-column label="岗位排序" align="center" prop="postSort" />
-       <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
-       <el-table-column label="创建时间" align="center" prop="createTime" width="160">
-         <template slot-scope="scope">
-           <span>{{ parseTime(scope.row.createTime) }}</span>
-         </template>
-       </el-table-column>
-       <el-table-column label="可用" align="center" class-name="small-padding fixed-width">
-
-       </el-table-column>
-     </el-table>
-
-     <pagination
-       v-show="total>0"
-       :total="total"
-       :page.sync="queryParams.pageNum"
-       :limit.sync="queryParams.pageSize"
-       @pagination="getList"
-     />
-   </div>
+    </div>
+    <!-- 内容 -->
+    <div class="table_nav">
+      <!-- <el-collapse v-model="activeNames" @change="handleChange">
+        <el-collapse-item :title="title" :name="index" v-for="(item,index) in 4" :key="index">
+          <el-form :model="queryParams" ref="queryForm" :inline="true">
+            <el-row :gutter="0">
+              <el-col :span="6" v-for="(item,index) in 12" :key="index">
+                <el-form-item :label="labletit" prop="dictName">
+                  <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable size="small"
+                    @keyup.enter.native="handleQuery" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-collapse-item>
+
+      </el-collapse> -->
+    </div>
+
   </div>
+
 </template>
 
 <script>
+  import {
+    getTableQuery
+  } from '@/api/system/table.js'
   export default {
     name: "index",
     data() {
       return {
-         activeNames: ['1'],
-         title:'单表1',
-         total:1,
-         // 查询参数
-         queryParams: {
-           pageNum: 1,
-           pageSize: 10,
-           dictName: undefined,
-           dictType: undefined,
-           status: undefined
-         },
-         labletit:'查询参数1233',
-         surlable:'实际数据库表',
-         postList:[
-           {
-                     date: '2016-05-02',
-                     name: '王小虎',
-                     address: '上海市普陀区金沙江路 1518 弄'
-                   }, {
-                     date: '2016-05-04',
-                     name: '王小虎',
-                     address: '上海市普陀区金沙江路 1517 弄'
-                   }, {
-                     date: '2016-05-01',
-                     name: '王小虎',
-                     address: '上海市普陀区金沙江路 1519 弄'
-                   }, {
-                     date: '2016-05-03',
-                     name: '王小虎',
-                     address: '上海市普陀区金沙江路 1516 弄'
-                   }
-         ]
+        // 显示搜索条件
+        showSearch: true,
+        activeNames: ['1'],
+        title: '单表1',
+        queryData: {},
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        labletit: '查询参数1233'
       };
     },
+    filters:{
+      btnConversion(val) {
+        switch(val){
+          case 'A':
+          return '新增';
+          case 'M':
+          return '修改';
+          case 'D':
+          return '删除';
+          case 'Q':
+          return '查询';
+          case 'S':
+          return '提交';
+          case 'U':
+          return '反提交';
+          case 'I':
+          return '导入';
+          case 'E':
+          return '导出';
+        }
+      }
+    },
+    mounted() {
+      this.init()
+    },
     methods: {
+      changeFn(obj) {
+        for(let key in obj){
+          this.queryParams[key] = obj[key]
+        }
+      },
+      resetQuery() {
+
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.getList();
+      },
+      getList() {
+
+      },
+      init() {
+        getTableQuery({
+          table: 'obj_test'
+        }).then(res => {
+          let data = res.data
+          this.queryData = data
+        })
+      },
       handleChange(val) {
-              console.log(val);
-            }
+        console.log(val);
+      }
     },
   };
 </script>
 
+
 <style lang="scss">
-   .single_header{
-     .el-divider--horizontal{
-       margin-top: 16px;
-     }
-   }
-   .single{
-      .el-table td{
-        border-bottom: 0;
-      }
-   }
+  .table_header {
+    .el-divider--horizontal {
+      margin-top: 16px;
+    }
+    .table_headerBtun{
+      margin-bottom: 20px;
+    }
+  }
+
+  .table_nav {
+    .el-collapse-item__wrap {
+      border-bottom: 0;
+    }
+
+    .el-collapse-item__header {
+      border-bottom: 0;
+      font-size: 15px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #3C8DBC;
+      line-height: 36px;
+    }
+
+    .el-form-item__content {
+      width: 55%;
+    }
 
+    .el-collapse {
+      border-top: 0;
+    }
+  }
 </style>
 
+
+
 <style scoped lang="scss">
-  .single{
+  .app-main {
+    // background-color: #eef0ff !important;
+  }
+
+  .table_total {
     background-color: #eef0ff;
-    height: 100%;
+    min-height: calc(100vh - 94px);
     padding: 20px;
-    p{
-      margin: 0;
-    }
+
     // 头部
-    .single_header{
-       background-color: #fff;
-       border-radius: 6px;
-       padding: 23px;
-       margin-bottom: 20px;
-     p{
+    .table_header {
+      background-color: #fff;
+      border-radius: 6px;
+      padding: 23px 23px 0px;
+      margin-bottom: 20px;
+
+      p {
         font-size: 15px;
         font-weight: bold;
         color: #3C8DBC;
         line-height: 36px;
-       }
-     p::before{
-       content: "";
-       display: block;
-       width: 18px;
-       height: 8px;
-       background: #3C8DBC;
-       border-radius: 3px;
-
-     }
+      }
+
+      p::before {
+        content: "";
+        display: block;
+        width: 18px;
+        height: 8px;
+        background: #3C8DBC;
+        border-radius: 3px;
+
+      }
     }
+
     // 内容
-    .surface_nave{
+    .table_nav {
       background-color: #fff;
       border-radius: 6px;
       padding: 23px;
     }
   }
+
+  p {
+    margin: 0;
+
+  }
 </style>