receivable.vue 9.59 KB
<template>
  <div class="app-container">
      <div slot="header" class="card-title">待收款</div>
      <!-- 操作工具栏 -->
      <el-row :gutter="10" class="mb8" style="margin-right: 60px;">
          <el-button style="float: right;margin-left:10px" type="primary"  size="mini" @click="handleAdd(0)">新增收款单</el-button>
          <el-button v-if="showSearch" style="float: right;" type="primary"  size="mini" icon="el-icon-s-unfold" @click="showSearch=!showSearch"></el-button>
          <el-button v-else style="float: right;" type="primary"  size="mini" icon="el-icon-s-fold" @click="showSearch=!showSearch"></el-button>
      </el-row>
    <!-- 搜索工作栏 -->
    <el-card  v-show="showSearch">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="80px" class="card">
          <el-row>
             <el-form-item label="始发城市:">
                 <el-select v-model="queryParams.departureId" placeholder="请选择始发城市">
                     <el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
                 </el-select>
             </el-form-item>
             <el-form-item label="目的城市:">
                 <el-select v-model="queryParams.objectiveId" placeholder="请选择目的城市">
                  <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
                 </el-select>
             </el-form-item>
              <el-form-item label="运输方式:" >
                  <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number" />
              </el-form-item>
             <el-form-item label="控货:">
                  <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="queryParams.control" />
             </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="订单状态:">
                <dict-selector :type="DICT_TYPE.ORDER_STATUS" v-model="queryParams.control" />
            </el-form-item>
             <el-form-item label="报关方式:">
                  <dict-selector :type="DICT_TYPE.ECW_CUSTOMS_TYPE" v-model="queryParams.customsType" />
             </el-form-item>
              <el-form-item label="订单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
              <el-form-item label="品名:" >
                   <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入品名" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item label="提单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入提单号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
              <el-form-item label="唛头:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入唛头" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
              <el-form-item label="费用类型:" >
                  <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.feeType"></dict-selector>
              </el-form-item>
              <el-form-item label="发货人:" prop="consignorId">
                  <customer-selector v-model="queryParams.consignorId" @change="consignor = $event" />
              </el-form-item>
<!--              <el-form-item label="发货人:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入发货人" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item> -->
            </el-row>
            <el-row>
              <el-form-item label="收货人:" >
                <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入收货人" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
             <el-form-item label="自编号:" >
                <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
              <el-form-item>
                    <dict-selector :type="DICT_TYPE.BEGINTIME_TYPE_ENDTIME" v-model="queryParams.date"></dict-selector>
                    <el-date-picker
                      v-model="dateType"
                      type="datetimerange"
                      range-separator="-"
                      start-placeholder="请选择日期"
                      end-placeholder="请选择日期">
                    </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
              </el-form-item>
            </el-row>
        </el-form>
        </el-card>
        <el-table v-loading="loadings" :data="list" border class="card">
            <el-table-column label="订单号" align="center" prop="orderNo" />
            <el-table-column label="唛头" align="center" prop="orderNo" />
            <el-table-column label="品名" align="center" prop="orderNo" />
            <el-table-column label="箱数" align="center" prop="sumNum" />
            <el-table-column label="体积/重量" align="center" prop="weight" />
            <el-table-column label="发货人" align="center" prop="orderNo" />
            <el-table-column label="收货人" align="center" prop="orderNo" />
            <el-table-column label="运输方式" align="center" prop="transportId">
              <template slot-scope="scope">
                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="出货渠道" align="center" prop="channelName" />
            <el-table-column label="始发地" align="center" prop="toDepartureId" />
            <el-table-column label="目的地" align="center" prop="toDepartureId" />
            <el-table-column label="商品信息" align="center" prop="toDepartureId" />
             <el-table-column label="订单状态" align="center" prop="orderStatus">
                <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.orderStatus" />
                </template>
              </el-table-column>
            <el-table-column label="收入类型" align="center" prop="feeType">
              <template slot-scope="scope">
                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.feeType"></dict-tag>
              </template>
              </el-table-column>
            <el-table-column label="总金额美元" align="center" prop="totalAmount" />
                 <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" @click="handleAdd(scope.row.consignorId)"
                              >收款</el-button>
                    </template>
                  </el-table-column>
          </el-table>
             <!-- 分页组件 -->
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
                         @pagination="getList"/>
  </div>
</template>

<script>
  import { userList } from "@/api/system/user"
  import {DICT_TYPE} from  '@/utils/dict'
  import CustomerSelector from '@/components/CustomerSelector'
  import {getTradeCityList} from '@/api/ecw/region'

  export default {
     name: "Receivable",
   components: {
      CustomerSelector
   },
     data() {
       return {
         showSearch:true,
         loadings: false,
         form:{},
          creatorData:[],
          list:[],
          total:0,
          dateType:[],
          loading:'',
          params:{
            page:1,
            rows:20,
          },
          queryParams:{
            page:1,
            rows:20,
          },
          tradeCityList:[],
       }
     },
     created() {
       let that = this
       userList('salesman').then(res =>that.creatorData = res.data)
       getTradeCityList().then(res => that.tradeCityList = res.data)
     },
     computed:{
       expoerCityList(){
           return this.tradeCityList.filter(item => item.type == 2)
       },
       importCityList(){
           return this.tradeCityList.filter(item => item.type == 1)
       },
     },
     methods: {
       /** 查询列表 */
       getList() {
         this.loading = true;
         // 处理查询参数
         let params = {...this.queryParams};
         this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
         // 执行查询
         getReceiptPage(params).then(response => {
           this.list = response.data.list;
           this.total = response.data.total;
           this.loading = false;
         });
       },
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNo = 1;
         this.getList();
       },
       /** 新增按钮操作 */
       handleAdd(id) {
         return this.$router.push('creatCollection?consignorId='+id)
       },
       submitForm(){

       }
     },
   }
 </script>

 <style>
   .card{
     margin-top: 20px;
   }
   .dialog-footer{
     padding: 40px;
   }
   .card-title{
       font-size: 18px;
       font-weight: bold;
   }
 </style>