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

<template>
  <!-- 添加汽运单价 111-->
  <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 id="liulan">
          <el-button type="primary" class="btn" @click="oilPriceFormulaClick">浏览</el-button>
          <el-button type="primary" class="btn1" @click="ondrawerOut">浏览</el-button>
          <!-- <el-button type="primary" class="btn1" @click="addressClick">浏览</el-button> -->
      </div>
    </div>
    <div class="elForm">
      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <el-button type="primary" id="cysbutton" @click="ondrawerOutcys">浏览所属承运商</el-button>
      </el-form>
    </div>

    <!-- 油价联动公式模态框 -->
    <el-drawer
      title="请选择油价联动公式"
      :visible.sync="oilPriceFormulaDrawer"
      :direction="direction"
      :before-close="handleClose"
      close-on-press-escape
      modal
      wrapperClosable
      size="70%"
    >
      <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>
        <el-button type="primary" @click="addoilPriceFormula">确定</el-button>
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable
            v-bind.sync="oilPriceFormula"
            @radio-change="currentRadioChange"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="oilPriceFormulaDrawer"
            @func="func"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>

    <!-- 收货地址弹出框 -->
    <el-dialog title="收货地址" :visible.sync="drawer1" width="90%">
      <el-form :inline="true">
        <el-form-item>
            <label class="el-form-item__label" style="width: auto;">省</label>
            <el-select v-model="province" filterable placeholder="请选择" @change="onchangeProvince">
              <el-option v-for="item in provinceList" :key="item.id" :label="item.addressProvince" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label class="el-form-item__label" style="width: auto;">市</label>
            <el-select v-model="city" filterable placeholder="请选择" @change="onchangeCity">
              <el-option v-for="item in cityList" :key="item.id" :label="item.addressDistrict" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label class="el-form-item__label" style="width: auto;">县(区)</label>
            <el-select v-model="county" filterable placeholder="请选择" @change="onchangeCounty">
              <el-option v-for="item in countyList" :key="item.id" :label="item.addressTown" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label class="el-form-item__label" style="width: auto;">具体收货地址</label>
            <el-autocomplete
              class="inline-input"
              v-model="place"
              :fetch-suggestions="querySearch1"
              placeholder="请输入具体收货地址"
              :trigger-on-focus="false"
              @select="handleSelect1"
            >
            </el-autocomplete>
          </el-form-item>
      </el-form>
      <div slot="footer" class="button-box">
        <el-button @click="drawer1 = false">取 消</el-button>
        <el-button type="primary" @click="specificAddress">确定</el-button>
      </div>
    </el-dialog>

    <!-- 承运商模态框 -->
    <el-drawer
      title="选择承运商"
      :visible.sync="drawer"
      direction="rtl"
      size="40%"
      :show-close="false"
    >
      <el-input
        placeholder="请输入内容"
        v-model="index"
        style="margin-top: 10px; margin-left: 20px;width:250px"
        clearable
      >
      </el-input
      ><el-button
      type="primary"
      class="btn"
      @click="onclickCarrier"
      style="margin-left: 4px;"
    >
      <i class="el-icon-search"></i>查询
    </el-button>
      <!-- <el-button @click="open">取消</el-button> -->
      <el-button type="primary" @click="selectMakeSure">确定</el-button>
      <div class="tablecls">
        <!-- 查询所有的承运商 -->
        <dilTable
          v-bind.sync="carrier"
          @selection-change="currentRadioChangecys"
          :drawer="drawer"
        >
        </dilTable>
      </div>
    </el-drawer>

    <!--  所属承运商表格  -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="deleteRow(scope.$index)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure">确定</el-button>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime,isNumber } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      carrierIdArray:[],
      tableTop: [
        {
          prop: "carrierName",
          label: "承运商"
        }
      ],
      selectionList: [],
      carrierTypes:[],
      carrier: {
        requestUrl: "",
        selectionType: "select"
      },
      //是否显示承运商模态框
      drawer: false,
      index: "",
      //具体收货地址
      place:null,
      //承运商名称
      state: null,
      //承运商id
      carrierIds: null,
      //收货地址id
      addressId:null,
      //收货地址模态框数据
      addressDetailed :null,
      addres:{
        requestUrl:"",
        selectionType: "radio",
      },
      //是否打开收货地址弹出框
      drawer1:false,
      //所有省
      provinceList: [],
      //选中的省
      province: '',
      //所有市
      cityList: [],
      //选中的市
      city: '',
      //所有的县(区)
      countyList: [],
      //选中的县
      county: '',
      //是否点击查询
      isKuang:false,
      //表格加载状态
      tableLoading:false,
      //公式内容
      formulaString:null,
      //油价联动公式Id
      oilPriceFormulaId:null,
      //是否打开油价联动公式的模态窗口
      oilPriceFormulaDrawer:false,
      //油价联动公式查询条件
      LineText:null,
      //油价联动公式模态框查询按钮状态
      selectLineLoading:false,
      //油价联动公式模态窗口的数据
      oilPriceFormula:{
        requestUrl:"",
        selectionType: "radio",
      },
      //模态窗口的打开的方向
      direction: 'rtl',
      //表单数据
      form1: {
        shipperId:1,
        priceDate:new Date(),
        oilTypeId:10,
        capacityTypeId:1,
        type: "销售钢材"
      },
      //提交给后端的数据
      // 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") {
          if (res.data.data) {
            this.state = res.data.data.carrierName;
            this.carrierIds = res.data.data.carrierId;
          }
        }
      });
  },
  created(){
    //获取所有的省
    this.getAllProvince();
  },
  methods: {
    //点击删除按钮删除当前点击的对象
    deleteRow(index) {
      this.selectionList.splice(index, 1);
    },
    ondrawerOutcys(){
      this.carrier.requestUrl =
        "/api/v1/uc/getCarrierListByLike?apiId=412&i=" + new Date();
      this.drawer = true;
    },
    currentRadioChangecys(selection) {
      this.carrierTypes=[];
      for (let i = 0; i < selection.length; i++) {
        if (this.carrierTypes.indexOf(selection[i]) === -1) {
          this.carrierTypes.push(selection[i]);
        }
      }
      console.log("this.carrierTypes "+JSON.stringify(this.carrierTypes));
    },
    //承运商确定按钮
    selectMakeSure() {
      for (let i = 0; i < this.carrierTypes.length; i++) {
          this.selectionList.push(this.carrierTypes[i])
      }
      this.index = null;
      this.drawer = false;
    },
    //模糊查询承运商
    onclickCarrier() {
      this.carrier.requestUrl =
        "/api/v1/uc/getCarrierListByLike?apiId=412&index=" +
        this.index +
        "&i=" +
        new Date();
    },
    func(res){
        this.selectLineLoading = false;
        this.isKuang = false;
        this.tableLoading = false;
    },
    //点击外层收货地址选择事件
    ondrawerOut(){
      this.drawer1 = true;
    },
    //获取所有省数据
    getAllProvince(){
      this.axios.post('/api/v1/uc/getAllProvince').then((res)=>{
        this.provinceList = res.data.data;
      })
    },
    //省改变
    onchangeProvince(){
      this.axios.post('/api/v1/uc/getDistrictByProvince?addressProvince='+this.province).then((res)=>{
        this.cityList = res.data.data;
      })
    },
    //市改变
    onchangeCity(){
      this.axios.post('/api/v1/uc/getTownByDistrict?addressDistrict='+this.city).then((res)=>{
        this.countyList = res.data.data;
      })
    },
    //县(区)改变
    onchangeCounty(){
      let mapValue = {
        addressProvince : this.province,
        addressDistrict : this.city,
        addressTown : this.county
      }
      this.axios.post('/api/v1/uc/getPlaceByAllAddress',mapValue).then((res)=>{
        this.addressId = res.data.data[0].addressId;
      })
    },
    selectLineClick(){
      this.tableLoading = true;
      this.selectLineLoading = true;
      this.isKuang = true;
      if(this.LineText){
        this.oilPriceFormula.requestUrl = "api/v1/uc/getOilFormula?apiId=444&con="+this.LineText;
      }else{
        this.oilPriceFormula.requestUrl = "api/v1/uc/getOilFormula?apiId=444&i=" + new Date();
      }
    },
    //承运商弹出层
    handleSelect(item) {
      this.carrierIds = item.carrierId;
      item.carrierName = this.state;
    },
    //收货地址弹出层
    handleSelect1(item) {
        console.log("获取所有下拉值!");
    },
    //以下是承运商边输边查搜索
    querySearch(queryString, cb) {
      this.axios
        .post("/api/v1/uc/getCarrierMesByLike?index=" + queryString)
        .then((res) => {
          if (res.data.code == "200") {
            var restaurants = res.data.data;
            var results = queryString
              ? restaurants.filter(this.createFilter(queryString))
              : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilter(queryString) {
      return (restaurants) => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        );
      };
    },
    //以上是承运商边输边查搜索

    //以下是收货地址边输边查搜索
    querySearch1(queryString, cb){
      this.axios
        .post("/api/v1/ams/getRealAddressByLike?addressId="+this.addressId + "&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.createFilter1(queryString))
              : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilter1(queryString) {
      return (restaurants) => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        );
      };
    },
    //以上是收货地址边输边查搜索

    //选定联动公式确定
    addoilPriceFormula(){
      let mapvalue = {
        shipperId : this.form1.shipperId,
        oilPriceFormula:this.formulaString,
        cargonameId : this.oilPriceFormulaId,
        capacityTypeId : this.form1.capacityTypeId,
        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.oilPriceFormulaDrawer = false;
    },
    currentRadioChange(val){
      this.formulaString = val.formulaString;
      this.oilPriceFormulaId = val.formulaId;
    },
    //具体地址确定
    specificAddress(){
      let mapvalue = {
        shipperId : this.form1.shipperId,
        oilPriceFormula:this.formulaString,
        capacityTypeId : this.form1.capacityTypeId,
        cargonameId : this.oilPriceFormulaId,
        priceValue : this.form1.priceValue,
        priceDate : this.form1.priceDate,
        addressName:this.province+this.city+this.county+this.place,
        type : this.form1.type,
        oilpriceBase : this.form1.oilpriceBase,
        oilTypeId : this.form1.oilTypeId,
        oilpriceChangeThreshold : this.form1.oilpriceChangeThreshold
      }
      this.form1 = mapvalue;
      this.drawer1 = false;
    },
    //打开线路的模态窗口
    oilPriceFormulaClick(){
      this.oilPriceFormulaDrawer = true;
      this.oilPriceFormula.requestUrl = "/api/v1/uc/getOilFormula?apiId=444"
    },
    //模态窗口关闭时调用
    handleClose(){
      if(this.oilPriceFormulaDrawer){
        this.oilPriceFormulaDrawer = false;
        this.LineText = null;
      }
    },
    makeSure() {
      for (let i = 0; i < this.selectionList.length; i++) {
        this.carrierIdArray.push(this.selectionList[i].carrierId)
      }
      let mapValue={
        shipperId : this.form1.shipperId,
        carrierId : this.carrierIdArray,
        cargonameId : this.oilPriceFormulaId,
        capacityTypeId : this.form1.capacityTypeId,
        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,
        place: this.place
      }
      this.axios.post("/api/v1/ams/addAmsContractTransportPrice", mapValue).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: 38%;
  }
.button-box{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
.addTransportPrice{
  .form{
    display: flex;
    .form_box{
      width: 320px;
      margin-left: 38%;
      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-top: 14px;
      }
      .btn{
        margin-top: 106px;
      }
      .btn1{
        margin-top: 13px;
        margin-left: 0px;
      }
      .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>