Agency_WebApp/src/views/voyage/billDetail.vue

<template>
  <div class="full-container-p24">
    <div class="df mb10 aic">
      <h5 class="mr20">请选择单据:</h5>
      <el-checkbox
        v-model="isCheckAll"
        @change="checkAll"
        :indeterminate="isIndeterminate"
        size="large"
        style="margin-right: 20px"
        >全选</el-checkbox
      >
    </div>

    <div v-show="fileList?.length" class="df aic fww">
      <div
        style="
          width: 100px;
          text-align: center;
          margin-right: 20px;
          margin-bottom: 20px;
        "
        v-for="item in fileList"
        :key="item.id"
      >
        <el-image
          style="height: 100px; width: 100px"
          fit="contain"
          :src="item.viewUrl"
          :preview-src-list="previewList"
        ></el-image>
        <div style="width: 100px; text-align: center; font-size: 12px">
          {{ item.createTime }}
        </div>
        <div class="tac">
          <el-checkbox
            @change="checkItem"
            v-model="item.checked"
            size="large"
          ></el-checkbox>
        </div>
      </div>
    </div>
    <div
      v-show="!fileList?.length"
      style="text-align: center; font-size: 24px; color: #ccc"
    >
      暂无单据图片
    </div>
    <div v-if="recordIds.length" class="mb20">
      <h5 class="mb10">请选择单据类型:</h5>
      <div class="df aic distribute-group mb20">
        <el-button
          class="mr20"
          :type="distributeType == 1 ? 'primary' : ''"
          @click="distributeType = 1"
          size="small"
          >运单</el-button
        >
        <el-button
          class="mr20"
          :type="distributeType == 2 ? 'primary' : ''"
          @click="distributeType = 2"
          size="small"
          >磅单</el-button
        >
        <el-button
          class="mr20"
          :type="distributeType == 4 ? 'primary' : ''"
          @click="distributeType = 4"
          size="small"
          >汽运装货单</el-button
        >
        <el-button @click="fail" size="small" type="danger">不通过</el-button>
      </div>
      <div v-if="distributeType != -1" class="mb20">
        <h5 class="mb10">请选择卸货港:</h5>
        <div class="df aic distribute-group">
          <el-button
            v-for="(item, index) in discPorts"
            class="mr20"
            :type="distributePortId == item.portId ? 'primary' : ''"
            @click="distributePortId = item.portId"
            size="small"
            >{{ item.portName }}</el-button
          >
        </div>
      </div>
      <div v-show="distributeType == 2">
        <el-form inline :model="distributePoundForm">
          <el-form-item label="卸货时间">
            <el-date-picker
              class="info-line-text"
              v-model="distributePoundForm.dischargeTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="卸货时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="卸货吨位">
            <el-input
              class="info-line-text"
              v-model="distributePoundForm.dischargeTons"
              placeholder="卸货吨位"
            ></el-input>
          </el-form-item>
          <el-form-item label="卸货件数">
            <el-input
              class="info-line-text"
              v-model="distributePoundForm.dischargePieces"
              placeholder="卸货件数"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="distributeType == 4">
        <div class="tar">
          <el-button @click="ocr" :loading="ocrLoading" type="primary">{{
            ocrLoading ? "正在识别" : "开始识别"
          }}</el-button>
        </div>
        <el-table :data="ocrTruckRecordTableData" stripe max-height="500">
          <el-table-column label="港口名称" min-width="200" align="center">
            <template v-slot="scope">
              <el-input size="small" v-model="scope.row.portName"></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column label="称重时间" min-width="200" align="center">
          <template v-slot="scope">
            <el-date-picker
              size="small"
              class="info-line-text"
              v-model="scope.row.weighTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="称重时间"
            ></el-date-picker>
          </template>
        </el-table-column> -->
          <el-table-column label="称重时间" min-width="120" align="center">
            <template v-slot="scope">
              <el-input
                :input-style="
                  scope.row.weighTime ? {} : { border: '1px solid red' }
                "
                size="small"
                v-model="scope.row.weighTime"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="车号" min-width="120" align="center">
            <template v-slot="scope">
              <el-input
                :input-style="
                  scope.row.carNum?.length == 7
                    ? {}
                    : { border: '1px solid red' }
                "
                size="small"
                v-model="scope.row.carNum"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="货物名称" min-width="120" align="center">
            <template v-slot="scope">
              <el-input size="small" v-model="scope.row.cargoName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="发货单位" min-width="200" align="center">
            <template v-slot="scope">
              <el-input
                size="small"
                v-model="scope.row.shippingUnit"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="收货单位" min-width="200" align="center">
            <template v-slot="scope">
              <el-input
                :input-style="
                  scope.row.receivingUnit ? {} : { border: '1px solid red' }
                "
                size="small"
                v-model="scope.row.receivingUnit"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="毛重" min-width="120" align="center">
            <template v-slot="scope">
              <el-input
                :input-style="
                  scope.row.grossWeight ? {} : { border: '1px solid red' }
                "
                size="small"
                v-model="scope.row.grossWeight"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="皮重" min-width="120" align="center">
            <template v-slot="scope">
              <el-input
                :input-style="scope.row.tare ? {} : { border: '1px solid red' }"
                size="small"
                v-model="scope.row.tare"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="净重" min-width="120" align="center">
            <template v-slot="scope">
              <el-input
                :input-style="
                  scope.row.netWeight ? {} : { border: '1px solid red' }
                "
                size="small"
                v-model="scope.row.netWeight"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="货船名称" min-width="120" align="center">
            <template v-slot="scope">
              <el-input size="small" v-model="scope.row.shipName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="司磅员" min-width="120" align="center">
            <template v-slot="scope">
              <el-input size="small" v-model="scope.row.weigher"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="查看" min-width="120" align="center">
            <template v-slot="scope">
              <el-image
                style="height: 40px; width: 60px"
                fit="contain"
                :src="scope.row.viewUrl"
                :preview-src-list="ocrImageList"
              ></el-image
            ></template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="df jcfe" v-if="distributeType != -1 && distributeType != 5">
      <el-button size="large" type="primary" @click="submitDistribute"
        >提交</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted } from "vue";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";

const route = useRoute();
let fileList = ref([]);
let discPorts = ref([]);
let isCheckAll = ref(false);
let isIndeterminate = ref(false);
let previewList = ref([]);
function checkAll(b) {
  isIndeterminate.value = false;
  fileList.value.forEach((e) => {
    e.checked = b;
  });
  setRecordIds();
}
function checkItem() {
  if (
    fileList.value.every((item) => {
      return item.checked;
    })
  ) {
    isCheckAll.value = true;
    isIndeterminate.value = false;
  } else if (
    fileList.value.every((item) => {
      return !item.checked;
    })
  ) {
    isCheckAll.value = false;
    isIndeterminate.value = false;
  } else {
    isIndeterminate.value = true;
  }
  setRecordIds();
}
function setRecordIds() {
  let arr0 = [];
  for (let i of fileList.value) {
    if (i.checked) {
      checkedPreviewList.value.push(i.viewUrl);
      arr0.push(i.id);
    }
  }
  recordIds.value = arr0.join(",");
  ocrTruckRecordTableData.value = [];
}
async function getBill() {
  let res = await api.getBill({
    voyageId: route.query.id,
  });
  fileList.value = res.data.result;
  for (let i of fileList.value || []) {
    previewList.value.push(i.viewUrl);
  }
}
let distributeType = ref(-1);
let distributePortId = ref(-1);

let distributePoundForm = ref({});
let ocrLoading = ref(false);
let ocrImageList = ref([]);
let checkedPreviewList = ref([]);
let recordIds = ref("");
let ocrTruckRecordTableData = ref([]);
async function ocr() {
  ocrLoading.value = true;
  ocrImageList.value = [];
  let res = await api.ocr({
    recordIds: recordIds.value,
  });
  ocrLoading.value = false;
  ocrTruckRecordTableData.value = res.data.result;
  for (let i of ocrTruckRecordTableData.value) {
    if (i.weighTime) i.weighTime = i.weighTime.substring(0, 10);
    ocrImageList.value.push(i.viewUrl);
  }
}
async function fail() {
  let res = await api.distribute({
    voyageId: route.query.id,
    recordIds: recordIds.value,
    type: 5,
  });
  console.log(res);
  distributeType.value = -1;
  recordIds.value = [];
  distributePortId.value = -1;
  ocrTruckRecordTableData.value = [];
  isCheckAll.value = false;
  isIndeterminate.value = false;
  getBill();
}
async function submitDistribute() {
  if (recordIds.value.length == 0) {
    ElMessage({
      type: "error",
      message: "请选择要分配的图片!",
    });
    return;
  }
  if (distributeType.value == -1) {
    ElMessage({
      type: "error",
      message: "请选择要分配类型!",
    });
    return;
  }
  if (distributePortId.value == -1) {
    ElMessage({
      type: "error",
      message: "请选择要分配的港口!",
    });
    return;
  }
  let postData = {};
  let type = distributeType.value;
  if (2 == type) {
    if (
      !distributePoundForm.value.dischargeTime ||
      !distributePoundForm.value.dischargeTons
    ) {
      ElMessage({
        type: "error",
        message: "卸货时间和吨位必填!",
      });
      return;
    }
    postData = {
      poundBillData: {
        ...distributePoundForm.value,
        portId: distributePortId.value,
      },
    };
  } else if (4 == type) {
    if (!ocrTruckRecordTableData.value.length) {
      ElMessage({
        type: "error",
        message: "请识别装货单!",
      });
      return;
    }
    for (let i of ocrTruckRecordTableData.value) {
      i.portId = distributePortId.value;
    }
    postData = { carLoadDatas: ocrTruckRecordTableData.value };
  }
  console.log(postData, route.query.id, recordIds.value, type);
  let res = await api.distribute({
    ...postData,
    voyageId: route.query.id,
    recordIds: recordIds.value,
    type,
  });
  if (res.data.status == 0) {
    ElMessage({
      type: "success",
      message: res.data.msg,
    });
  } else {
    ElMessage({
      type: "info",
      message: res.data.msg,
    });
  }
  distributeType.value = -1;
  recordIds.value = [];
  distributePortId.value = -1;
  ocrTruckRecordTableData.value = [];
  isCheckAll.value = false;
  isIndeterminate.value = false;
  getBill();
}
onMounted(() => {
  discPorts.value = JSON.parse(route.query.discPorts);
  getBill();
});
</script>
<style scoped>
</style>