<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>
      <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-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</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>
</template>

<script>
  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 弄'
                   }
         ]
      };
    },
    methods: {
      handleChange(val) {
              console.log(val);
            }
    },
  };
</script>

<style lang="scss">
   .single_header{
     .el-divider--horizontal{
       margin-top: 16px;
     }
   }
   .single{
      .el-table td{
        border-bottom: 0;
      }
   }

</style>

<style scoped lang="scss">
  .single{
    background-color: #eef0ff;
    height: 100%;
    padding: 20px;
    p{
      margin: 0;
    }
    // 头部
    .single_header{
       background-color: #fff;
       border-radius: 6px;
       padding: 23px;
       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;

     }
    }
    // 内容
    .surface_nave{
      background-color: #fff;
      border-radius: 6px;
      padding: 23px;
    }
  }
</style>
