icore-pass/src/views/TMS/components/importedMine/outBoundWagon.vue

<template>
  <!-- 出库 -->
  <div class="homeworkPath">
    <div class="top">
      <el-input placeholder="请输入内容" v-model="input" clearable style="width:200px"> </el-input>
      <el-date-picker style="margin: 10px;width:250px" v-model="startTime" type="datetime" placeholder="起始日期"></el-date-picker>
      <el-date-picker style="margin: 10px;width:250px" v-model="endTime" type="datetime" placeholder="结束日期"></el-date-picker>
      <el-button type="primary" class="btn" @click="onclick">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button type="primary" class="btn" @click="insert"> 出库 </el-button>
      <el-button type="primary" @click="exportData()" ><i class="el-icon-download"></i>导出(Excel)</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <mergeRowTable v-bind.sync="option1" ref="excelDom" @func="calculate">
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              @click="click(scope.row.resultId)"
              type="text"
              size="small"
              :disabled="scope.row.isEdit!=1"
              >修改</el-button
            >
            <el-button
            type="text"
            size="small"
            :disabled="scope.row.isEdit!=1"
            @click="deleteclick(scope.row.resultId)"
            >删除</el-button >
          </template>
        </el-table-column>
      </mergeRowTable>
      </el-tab-pane>
      <el-tab-pane label="待计量" name="second">
        <mergeRowTable v-bind.sync="option1" ref="excelDom" @func="calculate">
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              @click="click(scope.row.resultId)"
              type="text"
              size="small"
              :disabled="scope.row.isEdit!=1"
              >修改</el-button
            >
            <el-button
            type="text"
            size="small"
            :disabled="scope.row.isEdit!=1"
            @click="deleteclick(scope.row.resultId)"
            >删除</el-button >
          </template>
        </el-table-column>
      </mergeRowTable>
      </el-tab-pane>
    </el-tabs>
    <div class="count"  style="margin-right:50px;font-size:18px;">
      <div style="display:flex;flex-direction:row-reverse">总车数：{{dataTabel.length}}</div>
      <div style="display:flex;flex-direction:row-reverse">标重总吨位：{{sum}}</div>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/utils/util.js";
import { sjTime } from "@/utils/sharedJsFile";
export default {
  name: "inplantTMS",
  data() {
    return {
      input: "",
      Time: "",
      activeName: "first",
      option1: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/wmsh/getUnLockPortStock?apiId=494",
        comparison: "resultNumber",
        columnIndexs: [0, 1, 2, 3, 4, 5],
      },
      startTime: null,
      endTime: null,
      tableTitle: "港口出库表",
      dataTabel:[],
      sum:0,
    };
  },
  filters: {},
  mounted(){
    this.onclick();
  },
  methods: {
    onclick() {
      if (this.activeName == "first") {
        if(this.checkSEDate()==true){
          this.option1.requestUrl =
          "/api/v1/wmsh/getUnLockPortStock?apiId=494&con=" + this.input
          +"&activeName="+this.activeName
          +"&startTime="+sjTime(this.startTime)
          +"&endTime="+sjTime(this.endTime);
        }else{
          this.option1.requestUrl =
          "/api/v1/wmsh/getUnLockPortStock?apiId=494&con=" + this.input
           +"&activeName="+this.activeName;
        }
      }else if(this.activeName == "second"){
        if(this.checkSEDate()==true){
          this.option1.requestUrl =
          "/api/v1/wmsh/getUnLockPortStock?apiId=494&con=" + this.input
           +"&activeName="+this.activeName
           +"&startTime="+sjTime(this.startTime)
          +"&endTime="+sjTime(this.endTime);
        }else{
          this.option1.requestUrl =
          "/api/v1/wmsh/getUnLockPortStock?apiId=494&con=" + this.input
          +"&activeName="+this.activeName;
        }
      }
    },
    insert() {
      this.$router.push("/addWagonLoadCopy");
    },
    handleClick(tab, event) {
      this.onclick();
    },
    click(resultId) {
      this.$router.push("/editOutBoundWagon/" + resultId);
    },
    deleteclick(resultId){
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.axios
            .post( "/api/v1/tms/deleteOutBoundWagonById?resultId=" + resultId)
            .then(() => {
              this.onclick();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!"
          });
        });
    },
    //起止时间校验
    checkSEDate(){
      if(this.startTime && this.endTime && this.startTime<=this.endTime){
          return true;
      }else{
         return false;
      }
    },
    calculate(res){
      console.log("res",res);
      this.dataTabel=res.list;
      this.sum=0
      this.dataTabel.forEach(item => {
        this.sum+=item.weight;
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.homeworkPath {
  .top {
    padding: 1.25rem 0.375rem;
    .el-input {
      width: 20%;
      margin-right: 40rpx;
    }
    .btn {
      width: 5.5%;
      margin-left: 0.25rem;
    }
  }
}
</style>