nastiNte-Ui/src/views/management/myorder.vue

<template>
  <div style="width: 85%;margin: 0 auto;display:flex;justify-content: space-around">
    <div style="width: 20%;height: 392px; margin-top: 60px;border: 1px solid #e7e7e7">
      <el-menu
        default-active="3"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">订舱须知</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          <span slot="title">我的模板</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">申请放货</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">我的拆改单</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">在线换单</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-setting"></i>
          <span slot="title">快捷支付</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div
      style="width: 80%;border: 1px solid #f7f7f7;background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);margin-bottom: 20px">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="2">订单待付</el-menu-item>
        <el-menu-item index="3">已配船</el-menu-item>
        <el-menu-item index="4">待受理</el-menu-item>
        <el-menu-item index="5">已撤销</el-menu-item>
        <el-menu-item index="6">已驳回</el-menu-item>
        <el-menu-item index="7">运单变更</el-menu-item>
      </el-menu>
      <div style="width: 100%;display:flex;justify-content: space-around;">
        <div style="width: 20%;">
          <el-input placeholder="订舱单" v-model="filterAll.fBillno"></el-input>
          <el-input placeholder="船名" v-model="filterAll.vslidName"></el-input>
          <el-input placeholder="箱号" v-model="filterAll.boxNumber"></el-input>
        </div>
        <div style="width: 20%;">
          <el-input placeholder="收货人" v-model="filterAll.fConsigneername"></el-input>
          <el-input placeholder="航次" v-model="filterAll.voyidName"></el-input>
          <el-input placeholder="条数" v-model="filterAll.pageSize"></el-input>
        </div>
        <div style="width: 50%;">
          <div style="display:flex;justify-content: space-between">
            <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-input placeholder="创建开始时间" style="width: 45%;" v-model="filterAll.startTime"></el-input>-->
            <el-date-picker
              v-model="filterAll.startTime"
              style="width: 45%;"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="创建开始时间">
            </el-date-picker>
            <span style="margin-top: 20px">至</span>
<!--            <el-input placeholder="创建结束时间" style="width: 45%;" v-model="filterAll.endTime"></el-input>-->
            <el-date-picker
              v-model="filterAll.endTime"
              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 style="width: 100%;display:flex;justify-content: space-between;">
        <div style="display: flex;align-items: center;padding-left: 20px">
          <!--          <el-checkbox v-model="checked">全选</el-checkbox>-->
        </div>
        <div style="margin-right: 20px">
          <el-button type="success" plain>装箱单下载</el-button>
          <el-dropdown>
            <el-button type="success" plain>
              委托书下载
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>合并PDF</el-dropdown-item>
              <el-dropdown-item>批量PDF</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="success" plain>
              运单下载
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>合并PDF</el-dropdown-item>
              <el-dropdown-item>批量PDF</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="success" plain>
              放箱单下载
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>华南片区</el-dropdown-item>
              <el-dropdown-item>虎门提重</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        </div>
      </div>
      <div
        style="margin-top: 20px;background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);padding-top: 20px;"
        v-for="(item,index) in dataList" :key="index">
        <div style="left: 10px;display: flex;justify-content: space-between;border-bottom: 2px solid #EEEFEE;">
          <div style="display: flex;padding-left:10px;">
            <!-- `checked` 为 true 或 false -->
            <!--            <el-checkbox v-model="checked" style="margin-top: -8px">-->
            <!--            </el-checkbox>-->
            <span style="margin-top: -14px">单箱合计:<span>0元</span></span>
          </div>
          <div style="display: flex;flex-direction: column;align-items: flex-end;margin-right: -10px">
            <div
              style="width:100px;height:30px;background-color: #545c64;line-height: 30px;color: #fff;border-radius: 50px 0 0 50px;margin-top: -20px;font-size: 14px;">
              {{item.fBillstatus}}
            </div>
            <div
              style="width: 0px;height: 0px;border-color: #000000 white white #000000;border-width: 4px 4px 4px 4px;border-style: solid;margin-top:-2px"></div>
          </div>
        </div>
        <div style="display:flex;">
          <div
            style="width:85%;padding-left:20px;display: flex;justify-content: space-around;flex-wrap: wrap;text-align: left;border-right:2px solid #EEEFEE ">
            <p style="width:25%"><span>订舱号：</span><span>{{ item.fBillno }}</span></p>
            <p style="width:25%"><span>提单号：</span><span>{{ item.fMblno }}</span></p>
            <p style="width:25%"><span>运输条款：</span><span>{{ item.fServiceitems }}</span></p>
            <p style="width:25%"><span>收货人：</span><span>{{ item.fConsigneername }}</span></p>
            <p style="width:25%"><span>航线：</span><span>{{ item.fName }}</span></p>
            <p style="width:25%"><span>箱型：</span><span>{{ item.fNo }}</span></p>
            <p style="width:25%"><span>箱量：</span><span>{{ item.fCntrcount }}</span></p>
            <p style="width:25%"><span>装货时间：</span><span>{{ item.fBsdate }}</span></p>
          </div>
          <div style="width:15%;display:flex;flex-direction: column;align-items: center;margin-top: 40px">
            <el-button type="primary" size="small" style="width:80%; margin-left: 4px" @click="details(item.fId)">详情
            </el-button>
<!--            <el-button type="primary" size="small" style="width:80%;margin: 10px 0 0 4px">再来一单</el-button>-->
          </div>
        </div>
      </div>
      <div style="float: right;height: 40px;padding-top: 30px;margin-right: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from '../../request/request';

export default {
  name: 'myorder',
  data() {
    return {
      activeIndex: '1',
      checked: true,
      total:0,
      filterAll: {
        pageNum:1,
        pageSize:10
      },
      dataList: []
    };
  },
  created() {
    let myDate = new Date();
    this.filterAll.startTime = myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate()
    console.log(this.filterAll.startTime);
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.filterAll.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.filterAll.pageNum = val
      this.getList()
    },
    getList() {
      request({
        url: '/khwarehouse/warehousebills/webVersionOrderMessage',
        method: 'post',
        data: this.filterAll
      })
        .then(res => {
          console.log(res);
          this.dataList = res.data.rows;
          this.total = res.data.total
        })
        .catch(err => {
          console.log(err);
        });
    },
    details(fId) {
      // console.log(fId);
      // this.$router.push({ path: '/contractPlacing/index', query: { userId: fId } });
      this.$router.push({
        path: '/eontractPlaCing',
        query: { data:JSON.stringify(fId) },
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.el-input {
  margin: 10px auto;
}
</style>