新增 出险功能

src/apis/fetch.js

@@ -430,4 +430,24 @@ export default {
   checkShipMmsi(data) {
     return $http("/ship/search/ship", data);
   },
+
+  // 添加出险记录
+  addAccident(data) {
+    return $http("/voyage/addAccident", data);
+  },
+
+  // 删除出险记录
+  deleteAccident(data) {
+    return $http("/voyage/deleteAccident", data);
+  },
+
+  // 更新出险记录
+  updateAccident(data) {
+    return $http("/voyage/updateAccident", data);
+  },
+
+  // 获取出险记录列表
+  getAccidentList(data) {
+    return $http("/voyage/getAccidentList", data);
+  },
 };

src/store/index.js

@@ -7,6 +7,7 @@ let baseurl = import.meta.env.VITE_BASEURL;
 
 const uploadUrl = `${baseurl}cos/upload`;
 const wayBillUrl = `${baseurl}voyage/uploadVoyageWayBill`;
+const accidentUrl = `${baseurl}voyage/uploadAccidentMedia`;
 const fydi = `${baseurl}fydi/upload`;
 
 const store = createStore({
@@ -22,6 +23,7 @@ const store = createStore({
     baseParentNodes: [],
     uploadUrl,
     wayBillUrl,
+    accidentUrl,
     fydi,
   },
   getters: {},

src/views/voyage/voyageDetail.vue

@@ -1224,6 +1224,184 @@
         </el-upload>
       </div>
     </div>
+    <div v-if="voyage.hasInsurance == 1">
+      <div class="hr mb20"></div>
+      <div class="df aic jcsb">
+        <div style="color: #0094fe">出险记录</div>
+        <el-button
+          type="primary"
+          @click="
+            (isAccidentVisable = true) && (accidentTitle = '新增出险记录')
+          "
+        >
+          新增出险记录
+        </el-button>
+      </div>
+      <el-table :data="accidentList" style="width: 800px">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="accidentTime"
+          label="出险时间"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="accidentTime"
+          label="操作"
+          min-width="100"
+          align="center"
+        >
+          <template v-slot="scope">
+            <el-button
+              type="primary"
+              size="small"
+              @click="checkAccident(scope.row, true)"
+            >
+              查看
+            </el-button>
+            <el-button
+              type="info"
+              size="small"
+              @click="checkAccident(scope.row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              @click="deleteAccident(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="df jcfe">
+        <el-pagination
+          class="mt20"
+          background
+          layout="prev, pager, next"
+          :total="accidentTotal"
+          :current-page="accidentCurrentPage"
+          @current-change="accidentPageChange"
+        ></el-pagination>
+      </div>
+      <el-dialog
+        :title="accidentTitle"
+        v-model="isAccidentVisable"
+        @close="resetAccidentForm"
+        destroy-on-close
+      >
+        <el-form :model="accidentForm" label-width="100px">
+          <el-form-item label="出险时间">
+            <el-date-picker
+              class="info-line-text"
+              v-model="accidentForm.accidentTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm:ss"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="出险时间"
+              :disabled="isAccidentCheck"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input
+              class="info-line-text"
+              v-model="accidentForm.remark"
+              placeholder="备注"
+              :disabled="isAccidentCheck"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="出险材料">
+            <div class="df">
+              <div
+                v-for="item in accidentForm.files"
+                v-bind:key="item.id"
+                style="position: relative"
+              >
+                <img
+                  v-if="item.mediaType == 1"
+                  style="
+                    height: 148px;
+                    width: 148px;
+                    object-fit: contain;
+                    margin-right: 10px;
+                  "
+                  @click="openMediaModal(item.viewUrl, 1, '图片查看')"
+                  :src="item.viewUrl"
+                  alt=""
+                />
+                <div v-else>
+                  <div style="height: 148px; width: 148px; margin-right: 10px">
+                    <video
+                      style="height: 100%; width: 100%"
+                      @click="openMediaModal(item.viewUrl, 2, '视频查看')"
+                      :src="item.viewUrl"
+                    ></video>
+                  </div>
+                </div>
+                <img
+                  v-if="item.mediaType == 2"
+                  @click="openMediaModal(item.viewUrl, 2, '视频查看')"
+                  src="../../assets/icon-player.png"
+                  style="
+                    object-fit: contain;
+                    width: 40px;
+                    height: 40px;
+                    position: absolute;
+                    z-index: 100;
+                    left: 50px;
+                    top: 50px;
+                    background: #fff;
+                    border-radius: 50%;
+                  "
+                  alt=""
+                />
+              </div>
+              <el-upload
+                drag
+                multiple
+                :action="store.state.accidentUrl"
+                list-type="picture-card"
+                :data="accidentParams"
+                :on-success="accidentUploadSuccess"
+                :show-file-list="false"
+                :file-list="accidentList"
+                :before-upload="accidentBeforeUpload"
+                v-if="!isAccidentCheck"
+              >
+                <div class="upload-plus-icon">+</div>
+                <div class="upload-text">拖拽或点击上传</div>
+              </el-upload>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div class="df aic jcfe mb30" v-if="!isAccidentCheck">
+          <el-button
+            type="primary"
+            v-if="accidentForm.id"
+            @click="addUpdateAccident"
+          >
+            修改
+          </el-button>
+          <el-button type="primary" v-else @click="addUpdateAccident">
+            新增
+          </el-button>
+        </div>
+      </el-dialog>
+      <div class="hr mt20 mb20"></div>
+    </div>
     <div class="line" v-auth="'WAYBILL'">
       <div class="info-line">
         <div class="info-line-title">运单</div>
@@ -1689,7 +1867,7 @@
             v-else
             autoplay
             controls
-            style="width: 100%; height: 100%"
+            style="width: 100%; height: 60vh"
             :src="currentUrl"
           ></video>
         </el-dialog>
@@ -1766,6 +1944,7 @@ async function getVoyageDetail(isInit) {
       getTruckLoadRecord();
       getLabList();
       getPortWeatherList();
+      getAccidentList();
       try {
         initMap();
       } catch (error) {}
@@ -2822,6 +3001,114 @@ function showAddPoundModal() {
   formInline.value.dischargeTime = dayjs().format("YYYY/MM/DD HH:mm:ss");
 }
 
+let isAccidentVisable = ref(false);
+let accidentForm = ref({
+  files: [],
+});
+let accidentParams = ref({
+  voyageId: route.query.id,
+});
+let accidentCurrentPage = ref(1);
+let accidentTotal = ref(0);
+async function getAccidentList() {
+  let res = await api.getAccidentList({
+    voyageId: route.query.id,
+    currentPage: accidentCurrentPage.value,
+    size: 10,
+  });
+  if (res.data.status == 0) {
+    accidentList.value = res.data.result;
+    accidentTotal.value = res.data.total;
+  } else {
+    accidentList.value = [];
+    accidentTotal.value = 0;
+    accidentCurrentPage.value = 1;
+  }
+}
+let accidentList = ref([]);
+async function addUpdateAccident() {
+  // console.log("accidentForm", accidentForm.value);
+  let { accidentTime, remark, files, id } = accidentForm.value;
+  let arr = [];
+  for (let i of files) {
+    arr.push(i.id);
+  }
+  let postData = {
+    loginAccountId: localStorage.loginAccountId,
+    voyageId: route.query.id,
+    accidentTime,
+    remark,
+    voyageFileIds: arr.join(","),
+    id,
+  };
+  // console.log("postData", postData);
+  let res = await api[id ? "updateAccident" : "addAccident"](postData);
+  if (res.data.status == 0) {
+    resetAccidentForm();
+    isAccidentVisable.value = false;
+  }
+  getAccidentList();
+}
+function resetAccidentForm() {
+  isAccidentCheck.value = false;
+  accidentForm.value = {
+    files: [],
+  };
+}
+function accidentUploadSuccess(e) {
+  console.log(e);
+  accidentForm.value.files.push(e.result);
+}
+function accidentPageChange(e) {
+  accidentCurrentPage.value = e;
+  getAccidentList();
+}
+let accidentTitle = ref("");
+function accidentBeforeUpload(e) {
+  if (e.type.indexOf("image") != -1) {
+    accidentParams.value.mediaType = 1;
+  } else {
+    accidentParams.value.mediaType = 2;
+  }
+}
+let isAccidentCheck = ref(false);
+function checkAccident(item, boo) {
+  isAccidentCheck.value = boo;
+  if (boo) {
+    accidentTitle.value = "查看出险记录";
+  } else {
+    accidentTitle.value = "修改出险记录";
+  }
+  isAccidentVisable.value = true;
+  item.files = item.files || [];
+  accidentForm.value = item;
+}
+
+function deleteAccident(id) {
+  ElMessageBox.confirm("确认删除出险记录?", "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "info",
+  })
+    .then(async () => {
+      let res = await api.deleteAccident({
+        id,
+      });
+      if (res.data.status == 0) {
+        ElMessage({
+          type: "success",
+          message: "删除成功!",
+        });
+      }
+      getAccidentList();
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "取消删除",
+      });
+    });
+}
 onMounted(() => {
   getVoyageDetail(true);
 });