Warehouse_management_ui/src/views/kaihe/singleVoyageShip/indexItem.vue

<template>
  <el-dialog title="提单号明细" width="80%" :visible.sync="open" @close="close">
    <div style="display: flex; margin-bottom: 10px">
      <el-date-picker
        type="datetime"
        placeholder="选择离港时间"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"
        size="mini"
        v-model="departure"
        style="margin-right: 10px"
      ></el-date-picker>
      <el-button
        type="primary"
        size="mini"
        :disabled="!selecList.length"
        @click="departureShipment"
        style="margin-right: 10px"
        >离港出运</el-button
      >
      <el-date-picker
        type="datetime"
        placeholder="选择到港时间"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"
        size="mini"
        v-model="arrival"
        style="margin-right: 10px"
      ></el-date-picker>
      <el-select
        v-model="fLoadportid"
        filterable
        clearable
        size="mini"
        placeholder="请选择港口"
        style="margin-right: 10px"
      >
        <el-scrollbar>
          <el-option
            v-for="(item, index) in fMblnoOptions"
            :key="index"
            :label="item.fName"
            :value="item.fId"
          ></el-option>
        </el-scrollbar>
      </el-select>
      <el-button
        type="primary"
        size="mini"
        :disabled="!selecList.length"
        @click="unloading"
        >到港卸船</el-button
      >
    </div>
    <el-table
      :data="dataList"
      ref="multipleTable"
      style="width: 100%"
      height="60vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="fMblno"
        label="提单号"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="corpName"
        label="客户名称"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="loadportName"
        label="起运港"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="destportName"
        label="目的港"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="fNo" label="箱型" :show-overflow-tooltip="true" />
      <el-table-column
        prop="fCntrcount"
        label="箱量"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="fConsigneername"
        label="收货人"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createBy"
        label="发货人"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="open = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { portInquiry } from "@/api/kaihe/domesticTrade/orderInformation";
import { listBLNo,cargoStatus } from "@/api/kaihe/singleVoyageShip/index";
export default {
  name: "BLNo",
  data() {
    return {
      open: false,
      dataList: [],
      selecList: [],
      fMblnoOptions: [],
      fLoadportid: null,
      departure: null,
      arrival: null,
      form: null,
    };
  },
  created() {
    portInquiry().then((res) => {
      this.fMblnoOptions = res.rows;
    });
  },
  methods: {
    init(row) {
      this.open = true;
      this.form = row;
      this.dataList = row.children;
    },
    handleSelectionChange(list) {
      this.selecList = list;
    },
    close() {
      this.$refs.multipleTable.clearSelection();
      this.dataList = [];
      this.fLoadportid = null;
      this.departure = null;
      this.arrival = null;
      this.form = null;
    },
    // 离港出运
    departureShipment() {
      let arr = [];
      this.selecList.forEach((e) => {
        arr.push(e.fMblno);
      });
      if (!this.departure) {
        return this.$message.error("离港时间未选择");
      }
      const data = {
        billList: arr,
        fUpdatetime: this.departure,
        updateStatus: "1",
      };
      cargoStatus(data).then((response) => {
        this.$emit("refresh");
        this.$alert("离港操作成功", "提示", {
          confirmButtonText: "确定",
          type: "success",
          callback: (action) => {
            this.$refs.multipleTable.clearSelection();
          },
        });
      });
    },
    // 到港卸船
    unloading() {
      let arr = [];
      this.selecList.forEach((e) => {
        arr.push(e.fMblno);
      });
      if (!this.arrival) {
        return this.$message.error("到港时间未选择");
      }
      // if (!this.fLoadportid) {
      //   return this.$message.error("港口地点未选择");
      // }
      const data = {
        billList: arr,
        fUpdatetime: this.arrival,
        fUpdateaddress: this.fLoadportid,
        updateStatus: "2",
      };
      cargoStatus(data).then((response) => {
        this.$emit("refresh");
        let blNo = {
          fCargoPlanning: 0,
          fArrivalStatus: 3,
          fVslid: this.form.fVslid,
          fVoyid: this.form.fVoyid,
        };
        listBLNo(blNo).then((res) => {
          this.dataList= res.rows;
        });
        this.$alert("到港操作成功", "提示", {
          confirmButtonText: "确定",
          type: "success",
          callback: (action) => {
            this.$refs.multipleTable.clearSelection();
          },
        });
      });
    },
  },
};
</script>

<style scoped></style>