admin-cms/src/layout/intelligentDocking/list.vue

<template>
  <div id="list">
    <el-row>
      <el-col :span="24" class="list">
        <el-table ref="debtTable" :data="debtTable" style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
          <el-table-column property="companyName" label="企业名称" align="center"> </el-table-column>
          <el-table-column property="institution" label="金融机构" align="center"> </el-table-column>
          <el-table-column property="money" label="融资金额(万元)" align="center"> </el-table-column>
          <!--<el-table-column label="利率范围" align="center">-->
            <!--<template slot-scope="scope">-->
              <!--<span style="margin-left: 10px">{{ scope.row.intelligent.mongey_min_rate }}%~{{ scope.row.intelligent.mongey_max_rate }}%</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column property="time" label="" align="center"> </el-table-column>-->
          <!--<el-table-column label="申请时间" align="center">-->
            <!--<template slot-scope="scope">-->
              <!--<span>{{formatDate( scope.row.meta)}}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->

          <el-table-column label="当前状态" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">
                {{
                scope.row.creditStatus=='0'?'已处理':''
                ||scope.row.creditStatus=='2'?'审批':''
                ||scope.row.creditStatus=='1'?'放款':''
                ||scope.row.creditStatus=='3'?'拒绝':'待处理'
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{formatDate( scope.row.time)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300px">
            <template slot-scope="scope">
              <el-button @click="$router.push({ path: '/intelligentDocking/detail', query: { intelligentId: scope.row._id } })" type="text">
                <i class="el-icon-view"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <!--<el-pagination-->
            <!--@size-change="handleSizeChange"-->
            <!--@current-change="handleCurrentChange"-->
            <!--:current-page="currentPage"-->
            <!--background-->
            <!--layout="total,  prev, pager, next, jumper"-->
            <!--:total="total"-->
            <!--:page-size="pageSize"-->
          <!--&gt;-->
          <!--</el-pagination>-->
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  background
          >
          </el-pagination>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'list',
  props: {
    debtTable: null,
    total: null,
  },
  components: {},
  data: () => ({
    currentPage: 0,
    pageSize: 10,
  }),
  created() {},
  computed: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.$emit('pagechange', { skip: val});
    },
    formatTen(num) {
      return num > 9 ? (num + "") : ("0" + num);
    },
    formatDate(date) {
      var date = new Date(date);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return year + "-" + this.formatTen(month) + "-" + this.formatTen(day) + " " + this.formatTen(hour) + ":" + this.formatTen(minute) + ":" + this.formatTen(second);
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(currentPage) {
    //   this.$emit('handleCurrentChange', { skip: (currentPage - 1) * this.pageSize, limit: this.pageSize, currentPage });
    // },
  },
};
</script>

<style lang="less" scoped>
/*.list {*/
/*  padding: 20px;*/
/*}*/
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
/deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
/deep/.el-table th {
  background-color: #f5f6fa;
  padding: 8px 0;
}
/deep/.el-table td {
  padding: 11px 0;
}
.other {
  color: #f36302;
}
.view {
  color: #f36302;
}
.edit {
  color: #2ccc02;
}
.delete {
  color: #e9021d;
}
/deep/.el-pagination {
  padding: 26px 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: red;
}
/deep/ .el-icon-view {
  background: url(../../assets/xiangqing.png) center no-repeat;
  background-size: cover;
  width: 25px;
  height: 25px;
}

/deep/ .el-icon-view:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}
</style>