icore-pass/src/views/inward/components/truckOrder/purInwardTruckOrder.vue

//运输派单
<template>
  <div class="transportOrder">
    <div class="transportOrder_top">
      <el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-badge  
      :value="addPlanCount"
      class="item"
      v-if="activeName == 'first'"
      style="margin-left:10px">
        <el-button type="primary" @click="Insert" v-if="activeName == 'first'">
          <i class="el-icon-plus"></i>新增
        </el-button>
      </el-badge>
    </div>
    <el-dialog
      title="车辆信息"
      :visible.sync="dialogTableVisible"
      :before-close="handleClose"
    >
      <dilTable
        v-bind.sync="truck"
        @radio-change="currentRadioChange1"
      ></dilTable>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateTruckCapacity()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="transportOrder_bottom">
      <el-tabs v-model="activeName">
        <!-- 已下发 -->
        <el-tab-pane label="未接收" name="first">
          <dilTable v-bind.sync="first">
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="updateClick(scope)" type="text" size="small">
                  修改
                </el-button>
                <el-button @click="deleteClick(scope)" type="text" size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </dilTable>
        </el-tab-pane>
        <!-- 已接收 -->
        <el-tab-pane label="已接收" name="Received">
          <dilTable v-bind.sync="Received">
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="deleteClick(scope)" type="text" size="small">
                  关闭
                </el-button>
              </template>
            </el-table-column>
          </dilTable>
        </el-tab-pane>
        <!-- 已完成 -->
        <el-tab-pane label="已完成" name="completed">
          <dilTable v-bind.sync="completed"> </dilTable>
        </el-tab-pane>
        <!-- 已派单 -->
        <el-tab-pane label="已派单" name="dispatched">
          <dilTable v-bind.sync="dispatched">
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="continueDispatch(scope)"
                  type="text"
                  size="small"
                  v-if="scope.row.enable1 == 1"
                >
                  继续分解
                </el-button>
              </template>
            </el-table-column>
          </dilTable>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/utils/util.js";
export default {
  data() {
    return {
      //模态窗的框计算
      inputText: null,
      //是否弹出对话框
      dialogTableVisible: false,
      //输入框的值
      input: null,
      //选项卡的当前选中的值
      activeName: "first",
      //已下发的表格
      first: {
        requestUrl: ""
      },
      //车辆信息的表格
      truck: {
        requestUrl: "",
        // 控制显示当选列
        selectionType: "radio"
      },
      Received: {
        requestUrl: ""
      },
      completed: {
        requestUrl: ""
      },
      dispatched: {
        requestUrl: ""
      },
      //车辆的表格
      truck: {
        requestUrl: "",
        selectionType: "radio"
      },
      //当前选中的订单id
      selectOrderId: null,
      //选中的车辆号
      capacityNumber: "",
      //选中的运力id
      capacityId: null,
      //是否关闭模态框
      drawer: false,
      //模态框从左往右打开
      direction: "rtl",

      orderId: null,
      //多选的选中的订单id
      selectionList: [],
      //区别点击的是添加运力，还是修改
      index: null,
      // wssUrl: "wss:wl.dasteel.cn:32322/websocket/socketServer",
      // actiones: { username: "湘M99999" } //传入后台的数据
      addPlanCount:0,
      timer:null,
    };
  },
  created() {
    if (getCookie("orgCode") == "chengyunshang") {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
        getCookie("userId");
    } else {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null;
    }
    if (getCookie("orgCode") == "chengyunshang") {
      this.first.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=4&planEnableStatus=1&carrierId=" +
        getCookie("userId");
      this.Received.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=5&carrierId=" +
        getCookie("userId");
      this.completed.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=2&carrierId=" +
        getCookie("userId");
      this.dispatched.requestUrl =
        "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&planStatus=3&carrierSsoId=" +
        getCookie("userId");
    } else if (
      getCookie("orgCode") == "dagangadmin" ||
      getCookie("orgCode") == "zidonghuabu"
    ) {
      this.first.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=4&planEnableStatus=1";
      this.Received.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=5";
      this.completed.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=2";
      this.dispatched.requestUrl =
        "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&planStatus=3";
    } else {
      this.first.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=4&planEnableStatus=1";
      this.Received.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=5";
      this.completed.requestUrl =
        "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=2";
      this.dispatched.requestUrl =
        "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&planStatus=3";
    }
    // this.initWebSocket();
  },
  mounted(){
    this.getAddPlan();
    this.timer=setInterval(this.getAddPlan, 10000);
  },
  beforeDestroy(){
    clearInterval(this.timer);
  },
  methods: {
    getAddPlan() {
      this.axios.post( "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&enableStatus=1&planStatus=2&pageNum=1&pageSize=10").then(res => {
        console.log("data:",res.data.data);
        this.addPlanCount = res.data.data.total;
      });
    },
    //建立websocket连接
    initWebSocket() {
      //试图调用websocket
      //初始化weosocket
      const wssUrl = this.wssUrl;
      this.websock = new WebSocket(wssUrl);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      // this.websock.onclose = this.websocketclose;
    },
    //发送数据
    websocketonopen() {
      this.websocketsend();
    },
    //接收数据
    websocketonmessage(e) {
      console.log("收到信息");
      let data = e.data;
      console.log(data);
      let websocketKey = data.messageContent;
      let userName = "湘M99999";
      let message =
        "{'messageContent': '" +
        websocketKey +
        ":" +
        userName +
        "','messageType':1,'receivePerson': 'app','sendPerson': 'self'}";
      this.websocketsend(message);
    },
    //连接建立失败重连
    websocketonerror() {
      this.initWebSocket();
    },
    //发送数据
    websocketsend(message) {
      this.websock.send({ message, async success() {} });
    },
    //关闭连接
    websocketclose(e) {
      console.log("断开连接", e);
    },
    continueDispatch(scope) {
      this.$router.push("/addPurInwardOrderCon/" + scope.row.planId);
    },
    onclick() {
      console.log();
    },
    handleClose(done) {
      done();
      this.$message.info("取消修改运力");
    },
    getRequestUrl() {
      if (getCookie("orgCode") == "chengyunshang") {
        (this.first.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=4&planEnableStatus=1&carrierId=" +
          this.carrierUserId +
          "&test=" +
          new Date()),
          (this.Received.requestUrl =
            "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=5&planEnableStatus=1&carrierId=" +
            this.carrierUserId +
            "&test=" +
            new Date());
        this.completed.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=2&carrierId=" +
          getCookie("userId");
      } else if (
        getCookie("orgCode") == "dagangadmin" ||
        getCookie("orgCode") == "zidonghuabu"
      ) {
        this.first.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=4&planEnableStatus=1" +
          "&test=" +
          new Date();
        this.Received.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=5" +
          "&test=" +
          new Date();
        this.completed.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=2";
      } else {
        this.first.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=4&planEnableStatus=1" +
          "&test=" +
          new Date();
        this.Received.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=5" +
          "&test=" +
          new Date();
        this.completed.requestUrl =
          "/api/v1/oms/getPurInwardOrderList?apiId=432&orderStatus=2";
      }
    },
    getTruckRequestUrl() {
      if (getCookie("orgCode") == "chengyunshang") {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
          getCookie("userId") +
          "&test=" +
          new Date();
      } else {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
          null +
          "&test=" +
          new Date();
      }
    },
    currentRadioChange1(row) {
      console.log(row);
      this.capacityId = row.capacityId;
    },
    //删除运输订单
    deleteClick(scope) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("/api/v1/oms/closeOmstruckOrder?orderId=" + scope.row.orderId)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getRequestUrl();
              } else {
                this.$message({
                  message: "删除失败",
                  type: "warning"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //修改运输订单
    updateClick(scope) {
      this.getTruckRequestUrl();
      this.orderId = scope.row.orderId;
      this.dialogTableVisible = true;
      console.log(scope.row.orderId);
    },
    updateTruckCapacity() {
      if (this.capacityId == null) {
        this.$message.error("未选中运力");
        return;
      }
      this.axios
        .post("/api/v1/oms/updateCapacityId", {
          capacityId: this.capacityId,
          orderId: this.orderId
        })
        .then(res => {
          if (res.data.code == "200") {
            this.$message.success("修改运力成功");
            this.getRequestUrl();
            this.dialogTableVisible = false;
          } else {
            this.$message.error("修改运力失败");
          }
        });
    },
    handleClick(tab, event) {
      this.getRequestUrl();
    },
    Insert() {
      this.$router.push("addPurInwardOrder");
    }
  }
};
</script>

<style lang="scss">
.transportOrder {
  .transportOrder_top {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    .el-input {
      width: 20%;
    }
  }
  .transportOrder_bottom {
    margin-left: 20px;
    margin-top: 20px;
  }
  .drawer_top {
    width: 100%;
    height: 50px;
    padding-left: 20px;
    display: flex;
    align-items: center;
  }
}
</style>