icore-pass/src/views/appoint/components/saleContract/addTransportPrice.vue

<template>
  <!-- 添加汽运单价 -->
  <div class="addTransportPrice">
    <page-title>新增</page-title>
    <div class="form">
      <div class="form_box">
        <dil-form :formId="287" v-model="form1" ref="from1"></dil-form>
      </div> 
      <div class="liulan">
          <el-button type="primary" class="btn" @click="lineClick">浏览</el-button>
          <el-button type="primary" class="btn1" @click="addressClick">浏览</el-button>
          <!-- <el-button type="primary" class="btn2">浏览</el-button> -->
      </div>
    </div>
    <div class="elForm">
      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <el-form-item label="所属承运商">
          <el-autocomplete
            class="inline-input"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请输入承运商名称"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div class="name" v-if="item.carrierName">
                {{ item.carrierName }}
              </div>
            </template>
          </el-autocomplete>
        </el-form-item>
      </el-form>
    </div>
    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure">确定</el-button>
    </div>
    <!-- 线路模态框 -->
    <el-drawer
      title="请选择线路"
      :visible.sync="LineDrawer"
      :direction="direction"
      :before-close="handleClose"
      close-on-press-escape
      modal
      wrapperClosable
      size="40%"
    >
      <div class="selectText">
        <!-- <span></span> -->
        <el-input v-model="LineText" placeholder="请输入内容"></el-input>
        <el-button type="primary" @click="selectLineClick" :loading="selectLineLoading"><i class="el-icon-search"></i>查询</el-button>
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable 
            v-bind.sync="line"
            @radio-change="currentRadioChange"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="LineDrawer"
            @func="func"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>
    <!-- 地址模态框 -->
    <el-drawer
      title="请选择收货地址"
      :visible.sync="addresDrawer"
      :direction="direction"
      :before-close="handleClose"
      close-on-press-escape
      wrapperClosable
      modal
      size="40%"
    >
      <div class="selectText">
        <!-- <span></span> -->
        <el-input v-model="addresText" placeholder="请输入内容"></el-input>
        <el-button type="primary" @click="selectAddresClick" :loading="selectLineLoading"><i class="el-icon-search"></i>查询</el-button>
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable 
            v-bind.sync="addres"
            @radio-change="currentRadioChange1"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="addresDrawer"
            @func="func"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime,isNumber } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      //承运商名称
      state: null,
      //承运商id
      carrierIds: null,
      //是否打开收货地址模态框
      addresDrawer:false,
      //收货地址查询条件
      addresText:null,
      //收货地址id
      addressId:null,
      //收货地址模态框数据
      addressDetailed :null,
      addres:{
        requestUrl:"",
        selectionType: "radio",
      },

      //是否点击查询
      isKuang:false,
      //表格加载状态
      tableLoading:false,
      //是否打开线路的模态窗口
      LineDrawer:false,
      //线路查询条件
      LineText:null,
      //线路Id
      lineId:null,
      //线路模态框查询按钮状态
      selectLineLoading:false,
      //线路模态窗口的数据
      line:{
        requestUrl:"",
        selectionType: "radio",
      },
      //模态窗口的打开的方向
      direction: 'rtl',
      //表单数据
      form1: {
        priceDate:new Date(),
        oilTypeId:10,
      },
      //提交给后端的数据
      // map:{},
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#5f9ea0",//滚动条颜色
          opacity: 0.8,//滚动条透明度
          "overflow-x": "hidden"
        }
      }
    };
  },
  mounted() {
    this.axios
      .post(
        "/api/v1/rms/getCarrierNameBySSOId?carrierSSOId=" + this.carrierUserId
      )
      .then((res) => {
        if (res.data.code == "200") {
          console.log(res.data.data);
          if (res.data.data) {
            this.state = res.data.data.carrierName;
            this.carrierIds = res.data.data.carrierId;
          }
        }
      });
  },
  methods: {
    func(res){
        this.selectLineLoading = false;
        this.isKuang = false;
        this.tableLoading = false;
    },
    selectAddresClick(){
      this.tableLoading = true;
      this.selectLineLoading = true;
      this.isKuang = true;
      if(this.addresText){
        this.addres.requestUrl = "/api/v1/ams/getAddressDeliveryAddress?apiId=255&con="+this.addresText;
      }else{
        this.addres.requestUrl = "/api/v1/ams/getAddressDeliveryAddress?apiId=255&i=" + new Date();
      }
    },
    selectLineClick(){
      this.tableLoading = true;
      this.selectLineLoading = true;
      this.isKuang = true;
      if(this.LineText){
        this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con="+this.LineText;
      }else{
        this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&i=" + new Date();
      }
    },
    //承运商弹出层
    handleSelect(item) {
      this.carrierIds = item.carrierId;
      item.carrierName = this.state;
    },
    //以下是承运商边输边查搜索
    querySearch(queryString, cb) {
      this.axios
        .post("/api/v1/uc/getCarrierMesByLike?index=" + queryString)
        .then((res) => {
          if (res.data.code == "200") {
            console.log(res.data.data);
            var restaurants = res.data.data;
            // console.log(restaurants, "restaurants");
            var results = queryString
              ? restaurants.filter(this.createFilter(queryString))
              : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilter(queryString) {
      return (restaurants) => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        );
      };
    },
    //以上是承运商边输边查搜索
    currentRadioChange(val){
      let mapvalue = {
        shipperId : this.form1.shipperId,
        lineName:val.lineName,
        capacityTypeId : this.form1.capacityTypeId,
        cargonameId : this.form1.cargonameId,
        priceValue : this.form1.priceValue,
        priceDate : this.form1.priceDate,
        addressName:this.form1.addressName,
        type : this.form1.type,
        oilpriceBase : this.form1.oilpriceBase,
        oilTypeId : this.form1.oilTypeId,
        oilpriceChangeThreshold : this.form1.oilpriceChangeThreshold
      }
      this.form1 = mapvalue;
      this.lineId = val.lineId;
    },
    currentRadioChange1(val){
      let mapvalue = {
        shipperId : this.form1.shipperId,
        lineName:this.form1.lineName,
        capacityTypeId : this.form1.capacityTypeId,
        cargonameId : this.form1.cargonameId,
        priceValue : this.form1.priceValue,
        priceDate : this.form1.priceDate,
        addressName:val.address,
        type : this.form1.type,
        oilpriceBase : this.form1.oilpriceBase,
        oilTypeId : this.form1.oilTypeId,
        oilpriceChangeThreshold : this.form1.oilpriceChangeThreshold
      }
      this.form1 = mapvalue;
      this.addressId = val.addressId;
    },
    //打开线路的模态窗口
    lineClick(){
      this.LineDrawer = true;
      this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3"
    },
    addressClick(){
      this.addresDrawer = true;
      this.addres.requestUrl = "/api/v1/ams/getAddressDeliveryAddress?apiId=255"
    },
    //模态窗口关闭时调用
    handleClose(){
      if(this.LineDrawer){
        this.LineDrawer = false;
        this.LineText = null;
      }
      if(this.addresDrawer){
        this.addresDrawer = false;
        this.addresText = null;
      }
    },
    makeSure() {
      let amsContractTransportPrice={
        shipperId : this.form1.shipperId,
        carrierId : this.carrierIds,
        lineId : this.lineId,
        capacityTypeId : this.form1.capacityTypeId,
        cargonameId : this.form1.cargonameId,
        priceValue : this.form1.priceValue,
        priceDate : sjTime(this.form1.priceDate),
        addressId : this.addressId,
        type : this.form1.type,
        oilpriceBase : this.form1.oilpriceBase,
        oilTypeId : this.form1.oilTypeId,
        oilpriceChangeThreshold : this.form1.oilpriceChangeThreshold
      }
      // console.log("amsContractTransportPrice",amsContractTransportPrice)
      this.axios.post("/api/v1/ams/addAmsContractTransportPrice", amsContractTransportPrice).then((res) => {
          if (res.data.code == "200") {
            this.$router.go(-1);
          }
          this.$message({
            type: "success",
            message: "新增运输单价成功!",
          });
        });   
    },
    // 取消
    cancel() {
      this.$router.push('/transportPrice');
    },
  },
};
</script>
<style lang='scss'>
.elForm {
    margin-left: 30%;
  }
.addTransportPrice{
  .form{
    display: flex;
    .form_box{
      width: 320px;
      margin-left: 30%;
      margin-top: 30px;
      margin-right: 20px;
      .el-form{
        .preview-group{
          .el-form-item{
            .el-form-item__label{
              display: inline-block;
              width: 70px !important;
            }
            .el-form-item__content{
              .el-select{
                width: 250px;
              }
              .el-input{
                width: 250px;
              }
            }
          }
        }
      }
    }
    .liulan{
      width: 120px;
      margin-top: 30px;
      .el-button{
        width: 100px !important;
        margin: auto;
      }
      .btn{
        margin-top: 105px;
      }
      .btn1{
        margin-top: 13px;
      }
      .btn2{
        margin-top: 67px;
      }
    }
  }
  .button_box{
    margin-left: 45%;
  }
  .selectText{
    .el-input{
      width: 250px;
    }
  }
  .LineTable{
    width: 100%;
    height: 480px;
    overflow: hidden;
    margin-top: 10px;
  }
}
</style>
<style lang='scss'>
  /deep/.__bar-is-vertical {
    right: -1px !important;
  }
  /deep/.__bar-is-horizontal {
    display: none !important;
  }
</style>