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

<template>
  <!-- 汽运单价页面 -->
  <div class="salePlan">
    <div class="top">
      <el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick" :loading="loading">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button type="primary" @click="btnclick(0)">
        <i class="el-icon-plus"></i>新增
      </el-button>
       <el-button type="primary" @click="exportAllExcel()"><i class="el-icon-download"></i>导出(Excel)</el-button>
      <el-button type="primary" @click="importOperation()">
        导入
      </el-button>
      <el-dialog
        :visible.sync="dialogVisible"
      >
      <div class="dialog">
        <div style="width:250px">
          <span>油价</span>
          <el-input v-model="importPriceValue" style="width:150px"></el-input>
        </div>
        <div style="width:250px">
          <span>执行日期</span>
          <el-date-picker
          v-model="importPriceDate"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width:150px"
          >
          </el-date-picker>
        </div>
        <div style="width:200px">
          <el-upload 
          style="margin-left:10px"
          action=""
          :on-change="importExcel"
          :show-file-list="false"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :auto-upload="false">
          <el-button  type="primary">
            <i class="el-icon-upload"></i>导入（Excel）</el-button>
      </el-upload>
        </div>
      </div>
      </el-dialog>
      </div>
    

<el-tabs v-model="activeName">
      <!-- 正在启用 -->
       <el-tab-pane label="正在启用" name="first">
          <dilTable ref="excelDom" v-bind.sync="option" :loading="loading" :isKuang="isKuang" @func="func">
            <el-table-column
            fixed="right"
            label="操作"
            width="200px"
            align="center"
            >
            <template slot-scope="scope">
              <el-button type="primary" @click="updatePriceclick(scope.row)">修改</el-button>
              <el-button type="primary" @click="deletePrice(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </dilTable>
      </el-tab-pane>
      <!-- 历史启用 -->
      <el-tab-pane label="历史启用" name="second">
          <dilTable ref="excelDom" v-bind.sync="option2" :loading="loading" :isKuang="isKuang" @func="func">
          </dilTable>
      </el-tab-pane>
    </el-tabs>

    <!-- 承运商模态框 -->
    <el-drawer
      title="运价修改界面"
      :visible.sync="drawer"
      direction="rtl"
      size="40%"
      :show-close="false"
    >
      <div class="operation1">
        <span style="width:10%;align-content: center;">卸货地点</span>
        <el-input
        v-model="newAddressDeliveryAddress"
        style="width:70%"
        ></el-input>
        <el-button type="primary" style="width:15%" @click="updateAddressDeliveryAddress">提交</el-button>
      </div>
      <div class="operation2">
        <span style="width:10%;align-content: center;">运价</span>
        <el-input
        v-model="newPriceValue"
        style="width:30%"
        ></el-input>
        <el-button type="primary" style="width:15%" @click="updatePriceValue">提交</el-button>
      </div>
      <el-input
        placeholder="请输入内容"
        style="margin-top: 10px; margin-left: 20px;width:250px"
        clearable
        v-model="index"
      >
      </el-input
      ><el-button
      type="primary"
      style="margin-left: 4px;"
      @click="queryCarrierName"
    >
      <i class="el-icon-search"></i>查询
    </el-button>
      <el-button type="primary" @click="updateCarrierNamelist">确定修改承运商</el-button>
      <div>
        <!-- 查询所有的承运商 -->
        <el-table
        :data="carrierNameTable"
        style="width:100%"
        max-height="200px"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
        :border="true"
        ref="carrierNameTable"
        >
        <el-table-column
        type="selection"
        :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
        type="index"
        label="序号"
        >
        </el-table-column>
        <el-table-column
        prop="carrierName"
        label="承运商"
        align="center"
        >
        </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total,prev,pager,next,sizes"
        :total="carrierNametotal"
        :page-sizes="[10, 50, 100, 1000]"
        :page-size="currentPageSize"
        >
        </el-pagination>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: "TransportPrice",
  data() {
    return {
      activeName: "first",
      isKuang:false,
      loading:false,
      input: "",
      drawer:false,
      //承运商
      carrierNameTable:[],
      //卸货地点
      newAddressDeliveryAddress:'',
      //运价
      newPriceValue:'',
      //执行日期
      insertTime:'',
      //修改单价或者卸货地址所需信息
      datalist:{},
      //选中的值
      checkedList:[],
      //承运商总数目
      carrierNametotal:100,
      //当前页数
      currentPage:1,
      //当前页数规格
      currentPageSize:10,
      //搜索框
      index:'',
      //承运商的修改
      carrierIdArray:[],
      option: {
        // 表格请求数据的地址
        requestUrl:
          "/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=0",
      },
      option2: {
        // 表格请求数据的地址
        requestUrl:
          "/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=1",
      },
      tableTitle:'汽运单价',
      importPriceValue:null,
      importPriceDate:null,
      dialogVisible:false
    };
  },
  methods: {
    importOperation(){
      this.dialogVisible=true
    },
    exportAllExcel() {
     if (this.activeName == 'first') {
       this.tableTitle = '正在启用的运输单价'
       this.loading = true;
     this.isKuang = true;
     if(this.input){
       this.axios
               .post(
                 "/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=0&con=" +this.input+"&i="+new Date()
               )
               .then(res => {
                 console.log(res.data.data)
                 this.exportAllList = res.data.data.list
                 this.noSettleDetailsColumn=res.data.data.columnData
                 this.exportAllReportToExcel(
                   this.tableTitle,
                   this.exportAllList,
                   this.noSettleDetailsColumn
                 )
               })
     }else{
       this.axios
               .post(
                 "/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=0&i="+new Date()
               )
               .then(res => {
                 console.log(res.data.data)
                 this.exportAllList = res.data.data.list
                 this.noSettleDetailsColumn=res.data.data.columnData
                 this.exportAllReportToExcel(
                   this.tableTitle,
                   this.exportAllList,
                   this.noSettleDetailsColumn
                 )
               })
     }
      }else if (this.activeName == 'second') {
       this.tableTitle = '历史启用的运输单价'
       this.loading = true;
       this.isKuang = true;
     if(this.input){
       this.axios
               .post(
                 "/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=1&con=" +this.input+"&i="+new Date()
               )
               .then(res => {
                 console.log(res.data.data)
                 this.exportAllList = res.data.data.list
                 this.noSettleDetailsColumn=res.data.data.columnData
                 this.exportAllReportToExcel(
                   this.tableTitle,
                   this.exportAllList,
                   this.noSettleDetailsColumn
                 )
               })
     }else{
       this.axios
               .post(
                 "/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=1&con=" +this.input+"&i="+new Date()
               )
               .then(res => {
                 console.log(res.data.data)
                 this.exportAllList = res.data.data.list
                 this.noSettleDetailsColumn=res.data.data.columnData
                 this.exportAllReportToExcel(
                   this.tableTitle,
                   this.exportAllList,
                   this.noSettleDetailsColumn
                 )
               })
     }
       } else {
       }
       this.loading=false
     },
   //导出excel
   exportAllReportToExcel(tableTitle, dataArr, columnData) {
     var title = tableTitle
     let tHeader = []
     let filterVal = []
     columnData.forEach(e1 => {
       if (tHeader.indexOf(e1.label) === -1) {
         tHeader.push(e1.label)
       }
       if (filterVal.indexOf(e1.prop) === -1) {
         filterVal.push(e1.prop)
       }
     })
     //导出为excel
     this.downloadLoading = true
     require.ensure([], () => {
       const {
         export_json_to_excel
       } = require('@/assets/excel/Export2Excel.js') //这里必须使用绝对路径，使用@/+存放export2Excel的路径
       // let list = this.$refs.excelDom.dataTabel;
       let data = dataArr.map(v => filterVal.map(j => v[j])) //3.formatJson格式转换
       export_json_to_excel(tHeader, data, title) // (title)导出的表格名称
     })
   },
    func(){
      this.loading = false;
      this.isKuang = false;
    },
    onclick() {
      this.loading = true;
      this.isKuang = true;
      if(this.input){
        this.option.requestUrl ="/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=0&con=" +this.input+"&i="+new Date();
        this.option2.requestUrl ="/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=1&con=" +this.input+"&i="+new Date();
      }else{
        this.option.requestUrl ="/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=0&i="+new Date();
        this.option2.requestUrl ="/api/v1/ams/getAmsContractTransportPrice1?apiId=109&deleted=1&con=" +this.input+"&i="+new Date();
      }
    },
    btnclick() {
      this.$router.push("/addTransportPrice");
    },
    updatePriceclick(row) {
      this.$router.push({
        name:'addTransportPriceNew',
        params:{
          addressProvince:row.addressProvince,
          addressDistrict:row.addressDistrict,
          addressTown:row.addressTown,
          addressDeliveryAddress:row.addressDeliveryAddress,
          priceValue:row.priceValue,
          haulDistance:row.haulDistance,
          placeId:row.placeId,
          priceDate:row.priceDate
        }
      });
    },
    //修改运价
    //删除运价
    deletePrice(row){
      let mapValue={
        addressProvince:row.addressProvince,
        addressDistrict:row.addressDistrict,
        addressTown:row.addressTown,
        addressDeliveryAddress:row.addressDeliveryAddress
      }
      this.axios.post("/api/v1/ams/deleteSalelPrice",mapValue)
      .then(res=>{
        if(res.data.code==200){
          this.$message.success("删除成功")
        }else{
          this.$message.warning("删除失败")
        }
      })
      this.onclick()
    },
    //修改
    async updatePrice(row){
      this.drawer=true
      this.newAddressDeliveryAddress=row.addressDeliveryAddress
      this.newPriceValue=row.priceValue
      this.datalist.placeId=row.placeId
      this.datalist.addressProvince=row.addressProvince
      this.datalist.addressDistrict=row.addressDistrict
      this.datalist.addressTown=row.addressTown
      this.datalist.addressDeliveryAddress=row.addressDeliveryAddress
      let mapValue={
          pageSize:this.currentPageSize,
          pageNum:this.currentPage,
          index:this.index
        }
      await this.axios.post("/api/v1/ams/getCarrierListByPrice",mapValue).then(res=>{
        console.log("进入了查询承运商界面")
        console.log(res.data)
        this.carrierNameTable=res.data.data
        this.carrierNametotal=res.data.data[1].total
      })
      await this.axios.post("/api/v1/ams/getCarrierListByAddress",this.datalist).
      then(res=>{
        //this.checkedList=res.data.data
      })
      //console.log("初始化时选中的数据")
      //console.log(this.checkedList)
    },
    //修改运价
    updatePriceValue(){
      console.log("查看数据")
      console.log(this.newPriceValue)
      if(this.newPriceValue==null||this.newPriceValue==""){
        this.$message.warning("运价不能为空")
        return
      }
      console.log("进入了修改单价的方法")
      this.datalist.newPriceValue=this.newPriceValue
      console.log(this.datalist)
      this.axios.post("/api/v1/ams/updatePriceValue",this.datalist).
      then(res=>{
        if(res.data.code==200){
          this.$message.success("修改运价成功")
        }else{
          this.$message.warning("修改运价失败")
        }
      })
      this.onclick()
      this.drawer=false
      this.$refs.carrierNameTable.clearSelection()
    },
    //修改卸货地址
    updateAddressDeliveryAddress(){
      if(this.newAddressDeliveryAddress==null||this.newAddressDeliveryAddress==""){
        this.$message.warning("卸货地址不能为空")
        return
      }
      console.log("进入了修改卸货地址的方法")
      this.datalist.newAddressDeliveryAddress=this.newAddressDeliveryAddress
      console.log(this.datalist)
      this.axios.post("/api/v1/ams/updateaddressDeliveryAddress",this.datalist).
      then(res=>{
        console.log(res)
        if(res.data.code==200){
          this.$message.success("修改卸货成功")
        }else{
          this.$message.warning("修改卸货失败")
        }
      })
      this.onclick()
      this.drawer=false
      this.$refs.carrierNameTable.clearSelection()
    },
    getRowKeys(row){
      return row.carrierId
    },
    handleSelectionChange(list){
      console.log("选中的值")
      console.log(list)
      this.checkedList=list
      console.log(this.checkedList)
    },
    async handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPageSize=val
        let mapValue={
          pageSize:this.currentPageSize,
          pageNum:this.currentPage,
          index:this.index
        }
        await this.axios.post("/api/v1/ams/getCarrierListByPrice",mapValue).then(res=>{
        console.log("进入了查询承运商界面")
        console.log(res.data)
        this.carrierNameTable=res.data.data
        this.carrierNametotal=res.data.data[1].total
      })
      },
    async handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val
        let mapValue={
          pageSize:this.currentPageSize,
          pageNum:this.currentPage,
          index:this.index
        }
        await this.axios.post("/api/v1/ams/getCarrierListByPrice",mapValue).then(res=>{
        console.log("进入了查询承运商界面")
        console.log(res.data)
        this.carrierNameTable=res.data.data
        this.carrierNametotal=res.data.data[1].total
      })
    },
    async queryCarrierName(){
      let mapValue={
          pageSize:this.currentPageSize,
          pageNum:this.currentPage,
          index:this.index
        }
        await this.axios.post("/api/v1/ams/getCarrierListByPrice",mapValue).then(res=>{
        console.log("进入了查询承运商界面")
        console.log(res.data)
        this.carrierNameTable=res.data.data
        this.carrierNametotal=res.data.data[1].total
      })
    },
    //修改承运商
    async updateCarrierNamelist(){
      for(let i=0;i<this.checkedList.length;i++){
        this.carrierIdArray.push(this.checkedList[i].carrierId)
      }
      this.datalist.carrierIdArray=this.carrierIdArray
      await this.axios.post("/api/v1/ams/updateCarrierName",this.datalist).then(res=>{
        if(res.data.code==200){
          this.$message.success("修改承运商成功")
        }else{
          this.$message.warning("修改承运商失败")
        }
      })
      console.log("看看数据对不对")
      console.log(this.carrierIdArray)
      console.log(this.$refs)
      this.$refs.carrierNameTable.clearSelection()
      this.carrierIdArray=[]
      this.drawer=false
      this.onclick()
    },
    importExcel(file){
      let that = this;
      console.log("进入了导入")
        if(that.importPriceValue==null){
          that.$message.warning("油价没有值")
          return
        }else if(that.importPriceDate==null){
          that.$message.warning("执行时间没有填")
          return
        }
      if (!file) {
        that.$message({
          message: "文件错误!",
          type: "warning"
        });
        return;
      }
      let excelData =[]
      var reader=new FileReader();
      var data=null;
      var workbook = null;
      //设置读取操作
      reader.onload = function (e){
        console.log(e);
        data = e.target.result;
        workbook=XLSX.read(data,{type:'binary'});
        console.log(workbook)
        //只取第一个表的 数据
        let rows= XLSX.utils.sheet_to_json(
          workbook.Sheets[workbook.SheetNames[0]]
        );
        console.log("rows:",rows)
        //查找"序号"
        let index=1;
        for (index=1;index<rows.length;index++){
          if (workbook.Sheets[workbook.SheetNames[0]]["A"+index] &&  
          (workbook.Sheets[workbook.SheetNames[0]]["A"+index].v=="序号" || workbook.Sheets[workbook.SheetNames[0]]["A"+index].v=="序\n号"
           || workbook.Sheets[workbook.SheetNames[0]]["A"+index].v=="序\r\n号")){
            break;
          }
        }
        console.log("表头行数:" + index);
        if(index>=rows.length){
          that.$message({
            message: "文件错误!",
            type: "warning",
          });
          return
        }
        //查找最新运价
        let cols=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
        let j=cols.length-1;
        let priceCol=null;
        let tonnageCol=null;
        for (j=cols.length-1;j>0;j--){
         if (workbook.Sheets[workbook.SheetNames[0]][cols[j]+(index+1)] &&  priceCol==null
         && (workbook.Sheets[workbook.SheetNames[0]][cols[j]+(index+1)].v=="运价\n（元/吨）"
            || workbook.Sheets[workbook.SheetNames[0]][cols[j]+(index+1)].v=="运价\r\n（元/吨）")){
            priceCol=cols[j];
          }else if (workbook.Sheets[workbook.SheetNames[0]][cols[j]+(index+1)] &&  tonnageCol==null
         && (workbook.Sheets[workbook.SheetNames[0]][cols[j]+(index+1)].v=="吨公里\n（元/吨.km）"
            || workbook.Sheets[workbook.SheetNames[0]][cols[j]+(index+1)].v=="吨公里\r\n（元/吨.km）")){
            tonnageCol=cols[j];
          }
        }
        console.log("最新单价列数:" + priceCol);
        console.log("最新单价吨公里:" + tonnageCol);
        //读取表格
        for (let i = index+2; i <= rows.length+1 ; i++){
          let temp={
            no:null,
            addressProvince:null,
            addressDistrict:null,
            addressTown:null,
            addressDeliveryAddress:null,
            priceValue:null,
            haulDistance:null,
            priceTonKilometer:null,
            carrierName:null
          }
          //序号,无序号视为无效数据。
          if(!workbook.Sheets[workbook.SheetNames[0]]["A" + i]){
            continue;
          }
          try{
            temp.no=workbook.Sheets[workbook.SheetNames[0]]["A" + i].v;
          }catch(error){}
          //省
          try{
            temp.addressProvince=workbook.Sheets[workbook.SheetNames[0]]["B" + i].v;
          }catch(error){}
          //市
          try{
            temp.addressDistrict=workbook.Sheets[workbook.SheetNames[0]]["C" + i].v;
          }catch(error){}
          //县
          try{
            temp.addressTown=workbook.Sheets[workbook.SheetNames[0]]["D" + i].v;
          }catch(error){}
           //卸货地点
          try{
            temp.addressDeliveryAddress=workbook.Sheets[workbook.SheetNames[0]]["E" + i].v;
          }catch(error){}
          //参考运距
          try{
            temp.haulDistance=workbook.Sheets[workbook.SheetNames[0]]["F" + i].v;
          }catch(error){}
          //承运商
          try{
            temp.carrierName=workbook.Sheets[workbook.SheetNames[0]]["O" + i].v;
          }catch(error){}
          //单价
          try{
            temp.priceValue=workbook.Sheets[workbook.SheetNames[0]][priceCol + i].v;
          }catch(error){}
           //吨/公里
          try{
            temp.priceTonKilometer=workbook.Sheets[workbook.SheetNames[0]][tonnageCol + i].v;
          }catch(error){}
          // console.log(temp);
          excelData.push(temp);
        }
        //最终数据表格：
        console.log("excelData",excelData);
        that.importData(excelData)
      }
      reader.readAsBinaryString(file.raw);
    },
    async importData(excelData){
      const loading = this.$loading({
        lock: true,
        text: '正在导入数据',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      await this.axios.post("/api/v1/ams/importDataForAmsContractTransportPrice?importPriceValue="+this.importPriceValue
         +"&importPriceDate="+this.importPriceDate,excelData).then(res=>{
           console.log(res)
           if(res.data.code==200){
             this.$message({
             message: "导入成功",
             type: "success"
           });
          }
        })
        console.log("导入成功")
        this.dialogVisible=false
        this.importPriceValue=null
        this.importPriceDate=null
        loading.close()
        this.onclick()
  }
  },
};
</script>
<style lang='scss' scoped>
.salePlan {
  .top{
    display: flex;
    padding: 1.25rem 0.375rem;
    .el-input {
      width: 20%;
      margin-right: 1.25rem;
    }
  }
  .operation1{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
  }
  .operation2{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
  }
}
.dialog{
  display: flex;
  flex-direction: row;
}
</style>