更新 安检模板

src/router/index.js

@@ -83,11 +83,20 @@ const router = createRouter({
       },
       component: () => import("../views/workStation/insuranceManage.vue"),
     },
+    {
+      path: "/shipSecurityManage/shipCheckTemplateDetail",
+      name: "shipCheckTemplateDetail",
+      meta: {
+        title: "船舶安检模板",
+      },
+      component: () =>
+        import("../views/shipSecurityManage/shipCheckTemplateDetail.vue"),
+    },
     {
       path: "/shipSecurityManage/shipCheckTemplateList",
       name: "shipCheck",
       meta: {
-        title: "船舶安检模板",
+        title: "船舶安检模板列表",
       },
       component: () =>
         import("../views/shipSecurityManage/shipCheckTemplateList.vue"),

src/views/index/Index.vue

@@ -7,7 +7,7 @@
       <div v-if="ship.code" class="ship-card">
         <div class="df aic">
           <img
-            v-if="ship.media.viewUrl"
+            v-if="ship.media"
             style="height: 100%; width: 120px"
             :src="ship.media.viewUrl"
             alt=""
@@ -21,44 +21,44 @@
             />
             <div class="df aic">
               <div class="c3 mr20">船名</div>
-              <div class="c7 fs14">{{ ship.media.shipname }}</div>
+              <div class="c7 fs14">{{ ship.shipname }}</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">MMSI</div>
-              <div class="c7 fs14">{{ ship.media.mmsi }}</div>
+              <div class="c7 fs14">{{ ship.mmsi }}</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">IMO</div>
-              <div class="c7 fs14">{{ ship.media.imo }}</div>
+              <div class="c7 fs14">{{ ship.imo }}</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">船长</div>
-              <div class="c7 fs14">{{ ship.media.length }}</div>
+              <div class="c7 fs14">{{ ship.length }}</div>
               <div class="unit c7">米</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">船宽</div>
-              <div class="c7 fs14">{{ ship.media.breadth }}</div>
+              <div class="c7 fs14">{{ ship.breadth }}</div>
               <div class="unit c7">米</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">吨位</div>
-              <div class="c7 fs14">{{ ship.media.loadTons }}</div>
+              <div class="c7 fs14">{{ ship.loadTons }}</div>
               <div class="unit c7">吨</div>
             </div>
             <div class="df aic">
               <div class="c3 mr20">满载吃水</div>
-              <div class="c7 fs14">{{ ship.media.draught }}</div>
+              <div class="c7 fs14">{{ ship.draught }}</div>
               <div class="unit c7">米</div>
             </div>
             <div class="df aic c5">
               <div class="c3 mr20">船龄</div>
-              <div class="c7 fs14">{{ ship.media.age }}</div>
+              <div class="c7 fs14">{{ ship.age }}</div>
               <div class="unit c7">年</div>
             </div>
           </div>
         </div>
-        <div class="mt20" v-if="ship.lastSecurityCheckTime">
+        <div class="mt20 c5" v-if="ship.lastSecurityCheckTime">
           最后安检时间: {{ ship.lastSecurityCheckTime }}
         </div>
         <div class="df jcc mt20">
@@ -208,7 +208,7 @@ function drawMarkers() {
         });
 
         marker.on("click", () => {
-          getIndexShipDetail(i.code);
+          getIndexShipDetail(i);
         });
 
         markers.push(marker);
@@ -221,13 +221,14 @@ function drawMarkers() {
 }
 let ship = ref({});
 let polyline = ref([]);
-async function getIndexShipDetail(shipCode) {
+async function getIndexShipDetail(shipItem) {
   map.value.remove(polyline.value);
   let { data } = await api.getIndexShipDetail({
-    shipCode,
+    shipCode: shipItem.code,
   });
   if (data.status == 0) {
-    ship.value = data.result;
+    ship.value = { ...data.result, ...shipItem };
+    console.log(ship.value);
     let { coors } = ship.value;
     if (coors.length) {
       let path = [];

src/views/shipSecurityManage/shipCheckTemplateDetail.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="pt30" style="width: 600px">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleFormRef"
+      label-width="140px"
+      label-position="left"
+    >
+      <el-form-item class="mb30" prop="securityCheckName" label="安检名称">
+        <el-input
+          style="width: 280px"
+          v-model="ruleForm.securityCheckName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item class="mb30" prop="shipLength" label="选择适用船长">
+        <div class="df aic" style="width: 100%">
+          <el-input
+            style="width: 130px"
+            v-model="ruleForm.minShipLen"
+          ></el-input>
+          <div class="mr10 ml10">-</div>
+          <el-input
+            style="width: 130px"
+            v-model="ruleForm.maxShipLen"
+          ></el-input>
+        </div>
+      </el-form-item>
+      <div class="df aic jcsb mb20 mt50">
+        <el-button class="mr30" type="primary" @click="addNewItem">
+          添加新检查项目
+        </el-button>
+        <el-button-group v-show="ruleForm.items.length > 1">
+          <el-button
+            v-for="(item, index) in ruleForm.items"
+            @click="itemIndex = index"
+            :type="itemIndex == index ? 'primary' : ''"
+          >
+            {{ item.checkItemName || "新检查项目" }}
+          </el-button>
+        </el-button-group>
+      </div>
+      <el-form-item class="mb30" label="项目名称" prop="checkItemName">
+        <el-input
+          style="width: 280px"
+          v-model="ruleForm.items[itemIndex].checkItemName"
+        ></el-input>
+      </el-form-item>
+      <el-form-item class="mb30" label="项目类型" prop="checkItemTypeName">
+        <el-select
+          style="width: 280px"
+          v-model="ruleForm.items[itemIndex].checkItemTypeName"
+          value-key="checkItemTypeName"
+          placeholder="请选择安全检查项目类型"
+          @change="selectChange"
+        >
+          <el-option
+            v-for="item in templateTypeSelect"
+            :label="item.value"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="mb30" label="项目备注" prop="checkItemRemark">
+        <el-input
+          style="width: 280px"
+          v-model="ruleForm.items[itemIndex].checkItemRemark"
+        ></el-input>
+      </el-form-item>
+      <div class="df jcfe">
+        <el-button
+          v-show="ruleForm.items.length > 1"
+          size="small"
+          type="primary"
+          @click="removeItem"
+        >
+          移除当前项目
+        </el-button>
+      </div>
+    </el-form>
+    <div class="dialog-footer df aic jcfe">
+      <el-button @click="resetForm">重置</el-button>
+      <el-button type="primary" @click="addSecurityTemplate(ruleForm)">
+        确定
+      </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";
+import _ from "lodash";
+import { subTimeStr } from "../../utils/utils";
+
+const route = useRoute();
+async function getSecurityTemplateDetail(id) {
+  let { data } = await api.getSecurityTemplateDetail({
+    id,
+  });
+  if (data.status == 0) {
+    ruleForm.value = data.result;
+  }
+}
+let ruleFormRef = ref(null);
+let ruleForm = ref({
+  securityCheckName: "",
+  items: [{}],
+  minShipLen: "",
+  maxShipLen: "",
+});
+
+async function resetForm() {
+  itemIndex.value = 0;
+  ruleForm.value = {
+    items: [{}],
+  };
+  if (route.query.id) getSecurityTemplateDetail(route.query.id);
+}
+
+const checkShipLength = (rule, value, callback) => {
+  if (!ruleForm.value.minShipLen || !ruleForm.value.maxShipLen) {
+    callback(new Error("请完善适用船长"));
+  } else {
+    callback();
+  }
+};
+
+const checkItemName = (rule, value, callback) => {
+  if (
+    !ruleForm.value.items.every((item, index) => {
+      if (!item.checkItemName)
+        callback(new Error(`请完善第${index + 1}个项目名称`));
+      return !!item.checkItemName;
+    })
+  ) {
+  } else {
+    callback();
+  }
+};
+const checkItemTypeName = (rule, value, callback) => {
+  if (
+    !ruleForm.value.items.every((item, index) => {
+      if (!item.checkItemTypeName)
+        callback(new Error(`请完善第${index + 1}个项目类型`));
+      return !!item.checkItemTypeName;
+    })
+  ) {
+  } else {
+    callback();
+  }
+};
+const checkItemRemark = (rule, value, callback) => {
+  if (
+    !ruleForm.value.items.every((item, index) => {
+      if (!item.checkItemRemark)
+        callback(new Error(`请完善第${index + 1}个项目备注`));
+      return !!item.checkItemRemark;
+    })
+  ) {
+  } else {
+    callback();
+  }
+};
+
+const rules = ref({
+  securityCheckName: [
+    { required: true, message: "请填写安检名称", trigger: "blur" },
+  ],
+  shipLength: [{ validator: checkShipLength, trigger: "blur" }],
+  checkItemName: [{ validator: checkItemName, trigger: "blur" }],
+  checkItemTypeName: [{ validator: checkItemTypeName, trigger: "blur" }],
+  checkItemRemark: [{ validator: checkItemRemark, trigger: "blur" }],
+});
+let itemIndex = ref(0);
+let templateTypeSelect = ref([]);
+function addNewItem() {
+  ruleForm.value.items.push({});
+  itemIndex.value = ruleForm.value.items.length - 1;
+}
+async function getSecurityTemplateSelect() {
+  let { data } = await api.getSecurityTemplateSelect();
+  templateTypeSelect.value = data.status == 0 ? data.result : [];
+}
+async function addSecurityTemplate() {
+  ruleFormRef.value.validate(async (valid) => {
+    if (valid) {
+      let { securityCheckName, minShipLen, maxShipLen, items, id } =
+        ruleForm.value;
+      let postData = {
+        securityCheckName,
+        minShipLen,
+        maxShipLen,
+        items,
+        id,
+      };
+      let res = await api[
+        id ? "updateSecurityTemplate" : "addSecurityTemplate"
+      ](postData);
+      if (res.data.status == 0) {
+        ElNotification.success({
+          title: id ? "更新成功" : "添加成功",
+          duration: 1500,
+          message: `${securityCheckName}:${res.data.msg}`,
+          type: "success",
+        });
+        router.replace("/shipSecurityManage/shipCheckTemplateList");
+      } else {
+        ElNotification.error({
+          title: "失败",
+          duration: 2000,
+          message: res.data.msg,
+        });
+      }
+    } else {
+      return false;
+    }
+  });
+}
+
+function removeItem() {
+  ruleForm.value.items.splice(itemIndex.value, 1);
+  itemIndex.value = itemIndex.value == 0 ? 0 : itemIndex.value - 1;
+}
+
+function selectChange(e) {
+  ruleForm.value.items[itemIndex.value].checkItemTypeId = e.key;
+  ruleForm.value.items[itemIndex.value].checkItemTypeName = e.value;
+}
+
+onMounted(() => {
+  if (route.query.id) getSecurityTemplateDetail(route.query.id);
+  getSecurityTemplateSelect();
+});
+</script>
+
+<style scoped>
+.dialog-footer {
+  margin-top: 100px;
+}
+</style>

src/views/shipSecurityManage/shipCheckTemplateList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-container-p24">
-    <div style="display: flex; justify-content: space-between">
+    <div class="df jcsb">
       <div style="display: flex">
         <el-input
           placeholder="请输入模板名称"
@@ -22,101 +22,6 @@
       <el-button size="large" type="primary" @click="showDialog">
         创建安检模板
       </el-button>
-      <el-dialog
-        title="安检模板"
-        v-model="dialogFormVisible"
-        @close="resetForm"
-      >
-        <template v-slot:default>
-          <el-form
-            :model="ruleForm"
-            :rules="rules"
-            ref="form"
-            label-width="140px"
-            label-position="left"
-          >
-            <el-form-item prop="securityCheckName" label="安检名称">
-              <el-input
-                style="width: 280px"
-                v-model="ruleForm.securityCheckName"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="minShipLen" label="选择适用船型">
-              <div class="df aic jcsb" style="width: 100%">
-                <el-input
-                  style="width: 130px"
-                  v-model="ruleForm.minShipLen"
-                ></el-input>
-                -
-                <el-input
-                  style="width: 130px"
-                  v-model="ruleForm.maxShipLen"
-                ></el-input>
-              </div>
-            </el-form-item>
-            <el-form-item prop="maxShipLen" label="最大适用船型"></el-form-item>
-            <div class="df aic jcsb mb20">
-              <el-button-group v-if="ruleForm.items.length > 1">
-                <el-button
-                  v-for="(item, index) in ruleForm.items"
-                  @click="itemIndex = index"
-                  :type="itemIndex == index ? 'primary' : ''"
-                >
-                  {{ item.itemName || "新检查项目" }}
-                </el-button>
-              </el-button-group>
-              <el-button type="primary" @click="addNewItem">
-                添加新检查项目
-              </el-button>
-            </div>
-            <div>
-              <el-form-item label="项目名称">
-                <el-input
-                  style="width: 280px"
-                  v-model="ruleForm.items[itemIndex].itemName"
-                ></el-input>
-              </el-form-item>
-              <el-form-item label="项目类型">
-                <el-select
-                  style="width: 280px"
-                  v-model="ruleForm.items[itemIndex].itemType"
-                  placeholder="请选择安全检查项目类型"
-                >
-                  <el-option
-                    v-for="item in templateTypeSelect"
-                    :label="item.value"
-                    :value="item.key"
-                  />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="项目备注">
-                <el-input
-                  style="width: 280px"
-                  v-model="ruleForm.items[itemIndex].itemRemark"
-                ></el-input>
-              </el-form-item>
-              <div class="df jcfe">
-                <el-button
-                  v-if="ruleForm.items.length > 1"
-                  size="small"
-                  type="primary"
-                  @click="removeItem"
-                >
-                  移除当前项目
-                </el-button>
-              </div>
-            </div>
-          </el-form>
-        </template>
-        <template v-slot:footer>
-          <div class="dialog-footer">
-            <el-button @click="resetForm">取 消</el-button>
-            <el-button type="primary" @click="addSecurityTemplate(ruleForm)">
-              确 定
-            </el-button>
-          </div>
-        </template>
-      </el-dialog>
     </div>
     <div style="margin-top: 24px">
       <el-table border :data="tableData" stripe style="width: 100%">
@@ -159,7 +64,12 @@
               编辑
             </el-button>
             <el-button
-              @click="deleteSecurityTemplate(scope.row.id)"
+              @click="
+                deleteSecurityTemplate(
+                  scope.row.id,
+                  scope.row.securityCheckName
+                )
+              "
               type="danger"
               text
               size="small"
@@ -190,75 +100,8 @@ import md5 from "md5";
 import api from "../../apis/fetch";
 import { subTimeStr } from "../../utils/utils";
 
-let dialogFormVisible = ref(false);
-let form = ref(null);
-let ruleForm = ref({
-  securityCheckName: "",
-  items: [{}],
-  minShipLen: "",
-  maxShipLen: "",
-});
 function showDialog() {
-  dialogFormVisible.value = true;
-}
-async function resetForm() {
-  itemIndex.value = 0;
-  ruleForm.value = {
-    items: [{}],
-  };
-  dialogFormVisible.value = false;
-}
-const rules = ref({
-  securityCheckName: [
-    { required: true, message: "请填写船东名称", trigger: "blur" },
-  ],
-  minShipLen: [{ required: true, message: "请填写船名", trigger: "blur" }],
-  maxShipLen: [{ required: true, message: "请填写MMSI", trigger: "blur" }],
-  items: [{ required: true, message: "请填写手机号", trigger: "blur" }],
-});
-let itemIndex = ref(0);
-let templateTypeSelect = ref([]);
-function addNewItem() {
-  ruleForm.value.items.push({});
-  itemIndex.value = ruleForm.value.items.length - 1;
-}
-async function getSecurityTemplateSelect() {
-  let { data } = await api.getSecurityTemplateSelect();
-  templateTypeSelect.value = data.status == 0 ? data.result : [];
-}
-async function addSecurityTemplate() {
-  form.value.validate(async (valid) => {
-    if (valid) {
-      let { securityCheckName, minShipLen, maxShipLen, items, id } =
-        ruleForm.value;
-      let res = await api[
-        id ? "updateSecurityTemplate" : "addSecurityTemplate"
-      ]({
-        securityCheckName,
-        minShipLen,
-        maxShipLen,
-        items,
-      });
-      if (res.data.status == 0) {
-        ElNotification.success({
-          title: id ? "更新成功" : "添加成功",
-          duration: 0,
-          message: `${securityCheckName}:${res.data.msg}`,
-          type: "success",
-        });
-        resetForm();
-        getSecurityTemplateList();
-      } else {
-        ElNotification.error({
-          title: "失败",
-          duration: 3000,
-          message: res.data.msg,
-        });
-      }
-    } else {
-      return false;
-    }
-  });
+  router.push("/shipSecurityManage/shipCheckTemplateDetail");
 }
 let currentPage = ref(1);
 let term = ref("");
@@ -280,25 +123,17 @@ async function getSecurityTemplateList(page) {
   }
 }
 
-function removeItem() {
-  ruleForm.value.items.splice(itemIndex.value, 1);
-  ruleForm.value.items.length > 1
-    ? (itemIndex.value -= 1)
-    : (itemIndex.value = 0);
-}
-
 async function getSecurityTemplateDetail(id) {
-  let { data } = await api.getSecurityTemplateDetail({
-    id,
+  router.push({
+    path: "/shipSecurityManage/shipCheckTemplateDetail",
+    query: {
+      id,
+    },
   });
-  if (data.status == 0) {
-    dialogFormVisible.value = true;
-    ruleForm.value = data.result;
-  }
 }
 
-function deleteSecurityTemplate(id) {
-  ElMessageBox.confirm("确认删除安检模板?", "提示", {
+function deleteSecurityTemplate(id, securityCheckName) {
+  ElMessageBox.confirm(`确认删除安检模板: ${securityCheckName} ?`, "提示", {
     confirmButtonText: "确认",
     cancelButtonText: "取消",
     type: "warning",
@@ -311,6 +146,7 @@ function deleteSecurityTemplate(id) {
         ElMessage({
           type: "success",
           message: data.msg,
+          duration: 1500,
         });
       }
       getSecurityTemplateList();
@@ -324,7 +160,6 @@ function pageChange(e) {
 }
 onMounted(() => {
   getSecurityTemplateList();
-  getSecurityTemplateSelect();
 });
 </script>
 <style scoped>