nastiNte-Ui/src/views/settlementCenter/settlementCenter.vue

<template>
  <div>
    <div class="head">
      <div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          background-color="#FFFFFF">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">结算说明</span>
          </el-menu-item>
          <el-menu-item index="/settlementCenter">
            <i class="el-icon-menu"></i>
            <span slot="title">生成账单</span>
          </el-menu-item>
          <el-menu-item index="/confirmTheBill">
            <i class="el-icon-menu"></i>
            <span slot="title">确认账单</span>
          </el-menu-item>
          <el-menu-item index="/applyForInvoice">
            <i class="el-icon-menu"></i>
            <span slot="title">申请发票</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="background-color: #FFFFFF;border: 1px solid #eeeeee;">
        <div style="width:75%;display:flex;justify-content: space-around;float: left">
          <div style="width: 20%;">
            <el-input placeholder="订舱单" style="width: 100%;"></el-input>
            <el-input placeholder="船名"></el-input>
            <el-input placeholder="箱号"></el-input>
          </div>
          <div style="width: 20%;">
            <el-input placeholder="收货人" style="width: 100%;"></el-input>
            <el-input placeholder="航次"></el-input>
            <el-input placeholder="条数"></el-input>
          </div>
          <div style="width: 50%;">
            <div style="display:flex;justify-content: space-between;width: 100%;">
              <el-input placeholder="始发港" style="width: 45%;"></el-input>
              <span style="margin-top: 20px">至</span>
              <el-input placeholder="目的港" style="width: 45%;"></el-input>
            </div>
            <div style="display:flex;justify-content: space-between;">
              <el-date-picker
                style="width: 45%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="创建开始时间">
              </el-date-picker>
              <span style="margin-top: 20px">至</span>
              <el-date-picker
                style="width: 45%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="创建结束时间">
              </el-date-picker>
            </div>
            <div style="display:flex;justify-content: space-between;">
              <el-input placeholder="单据有效期结束" style="width: 45%;"></el-input>
              <span style="margin-top: 20px">&nbsp;&nbsp;&nbsp;</span>
              <el-input placeholder="提单号" style="width: 45%;"></el-input>
            </div>
          </div>
        </div>
        <div class="query">
          <div>
            <div>
              <el-button type="primary">查询</el-button>
            </div>
            <div>
              <el-button type="success" size="mini">对账单下载</el-button>
              <el-button type="success" size="mini">对账申请</el-button>
            </div>
            <div>合计金额：￥87127319</div>
          </div>
        </div>
        <div style="width: 98%;height: 200px;float: left;padding-right: 1%;padding-left: 1%;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column type="index" label="行号" align="center"/>
            <el-table-column
              prop="date"
              label="运单号">
            </el-table-column>
            <el-table-column
              prop="date"
              label="收费单位">
            </el-table-column>
            <el-table-column
              prop="date"
              label="售票单位">
            </el-table-column>
            <el-table-column
              prop="date"
              label="付款方式">
            </el-table-column>
            <el-table-column
              prop="date"
              label="费目名称">
            </el-table-column>
            <el-table-column
              prop="date"
              label="应收(元)">
            </el-table-column>
          </el-table>
          <div style="float: right;margin-top: 30px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              background
              layout="sizes, prev, pager, next"
              :total="23">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'settlementCenter',
  data() {
    return {
      activeIndex: '/settlementCenter',
      tableData:[]
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelect(key, keyPath) {
      this.$router.push(key);
      console.log(this.activeIndex);
      console.log(key, keyPath);
    },
  }
};
</script>

<style scoped lang="scss">
.head {
  width: 80%;
  border: 1px solid #eeeeee;
  margin: 10px auto;
  display: flex;
  div:nth-child(1) {
    width: 20%;
  }
}

.head > div:nth-child(2) {
  width: 80%;
}

.el-input {
  margin: 10px auto;
}
.query div:nth-child(1){
  width: 200px;
}
.query div:nth-child(1) div:nth-child(1){
  margin-bottom: 10px;
}
.query div:nth-child(1) div:nth-child(2){
  margin-bottom: 10px;
}
.query div:nth-child(1) div:nth-child(3){
  font-weight:bold;
  color: red;
}
.query {
  width: 25%;
  float: right;
  display: flex;
  justify-content: center;
  margin-top: 35px;
}
</style>