新增 出险功能

src/apis/fetch.js

@@ -220,4 +220,24 @@ export default {
   unmergeVoyage(data) {
     return $http("/voyage/merge/lift", 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

@@ -5,6 +5,7 @@ import { asyncRouterList } from "../router";
 import menuData from "../auth/menuData";
 console.log(import.meta.env.VITE_PROJECT_ENV);
 let baseurl = import.meta.env.VITE_BASEURL;
+const accidentUrl = `${baseurl}voyage/uploadAccidentMedia`;
 
 const store = createStore({
   state: {
@@ -17,6 +18,7 @@ const store = createStore({
     userPermission: [],
     menuData: [],
     baseParentNodes: [],
+    accidentUrl,
   },
   getters: {},
   mutations: {

src/views/voyage/voyageDetail.vue

@@ -871,7 +871,186 @@
           @click="openMediaModal(item.viewUrl, 1, '保险单查看')"
         ></el-image>
       </div>
-      <hr class="hr m30-0" />
+      <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="df aic">
         <div class="info-line-title">运单:</div>
         <el-image
@@ -964,7 +1143,7 @@
           v-else
           autoplay
           controls
-          style="width: 100%; height: 100%"
+          style="width: 100%; height: 60vh"
           :src="currentUrl"
         ></video>
       </el-dialog>
@@ -1085,7 +1264,10 @@ async function getVoyageDetail(isInit) {
       getTruckLoadRecord();
       getLabList();
       getPortWeatherList();
-      initMap();
+      getAccidentList();
+      try {
+        initMap();
+      } catch (error) {}
     }
   } else {
     console.log(res);
@@ -1603,6 +1785,115 @@ function changeDiscPortTab(e) {
   getPortWeatherList();
 }
 
+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);
 });