新增 船舶安检模板列表;新增/更新模板

src/views/shipSecurityManage/shipCheckTemplateList.vue

@@ -3,7 +3,7 @@
     <div style="display: flex; justify-content: space-between">
       <div style="display: flex">
         <el-input
-          placeholder="请输入船东/手机号"
+          placeholder="请输入模板名称"
           prefix-icon="el-icon-search"
           v-model="term"
           clearable
@@ -19,49 +19,99 @@
           查询
         </el-button>
       </div>
-      <el-button
-        size="large"
-        type="primary"
-        @click="router.push('/shipOwnerManage/shipOwnerDetail')"
-      >
-        添加船东
+      <el-button size="large" type="primary" @click="showDialog">
+        创建安检模板
       </el-button>
-      <el-dialog title="添加船东" v-model="dialogFormVisible">
+      <el-dialog
+        title="安检模板"
+        v-model="dialogFormVisible"
+        @close="resetForm"
+      >
         <template v-slot:default>
           <el-form
             :model="ruleForm"
             :rules="rules"
             ref="form"
-            label-width="110px"
+            label-width="140px"
             label-position="left"
           >
-            <el-form-item prop="userName" label="船东姓名">
-              <el-input
-                style="width: 280px"
-                v-model="ruleForm.userName"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="phone" label="手机号">
-              <el-input
-                style="width: 280px"
-                v-model="ruleForm.phone"
-              ></el-input>
-            </el-form-item>
-            <el-form-item prop="shipname" label="船名">
+            <el-form-item prop="securityCheckName" label="安检名称">
               <el-input
                 style="width: 280px"
-                v-model="ruleForm.shipname"
+                v-model="ruleForm.securityCheckName"
               ></el-input>
             </el-form-item>
-            <el-form-item prop="mmsi" label="MMSI">
-              <el-input style="width: 280px" v-model="ruleForm.mmsi"></el-input>
+            <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="addShipOwner(ruleForm)">
+            <el-button type="primary" @click="addSecurityTemplate(ruleForm)">
               确 定
             </el-button>
           </div>
@@ -77,14 +127,14 @@
           align="center"
         ></el-table-column>
         <el-table-column
-          prop="userName"
+          prop="securityCheckName"
           label="船东名称"
           min-width="120"
           align="center"
         ></el-table-column>
         <el-table-column
-          prop="phone"
-          label="手机号"
+          prop="shipLen"
+          label="适用船型"
           min-width="120"
           align="center"
         ></el-table-column>
@@ -101,7 +151,7 @@
         <el-table-column label="操作" min-width="80" align="center">
           <template v-slot="scope">
             <el-button
-              @click="shipOwnerDetail(scope.row.id)"
+              @click="getSecurityTemplateDetail(scope.row.id)"
               type="primary"
               text
               size="small"
@@ -135,40 +185,57 @@ import { subTimeStr } from "../../utils/utils";
 let dialogFormVisible = ref(false);
 let form = ref(null);
 let ruleForm = ref({
-  userName: "",
-  phone: "",
-  shipname: "",
-  mmsi: "",
+  securityCheckName: "",
+  items: [{}],
+  minShipLen: "",
+  maxShipLen: "",
 });
+function showDialog() {
+  dialogFormVisible.value = true;
+}
 async function resetForm() {
+  itemIndex.value = 0;
+  ruleForm.value = {
+    items: [{}],
+  };
   dialogFormVisible.value = false;
-  form.value.resetFields();
 }
 const rules = ref({
-  userName: [{ required: true, message: "请填写船东名称", trigger: "blur" }],
-  shipname: [{ required: true, message: "请填写船名", trigger: "blur" }],
-  mmsi: [{ required: true, message: "请填写MMSI", trigger: "blur" }],
-  phone: [
-    { required: true, message: "请填写手机号", trigger: "blur" },
-    { min: 11, max: 11, message: "请正确填写手机号", trigger: "blur" },
+  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" }],
 });
-async function addShipOwner() {
+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 { userName, shipname, mmsi, phone } = ruleForm.value;
-      let res = await api.addShipOwner({
-        userName,
-        shipname,
-        mmsi,
-        phone,
+      let { securityCheckName, minShipLen, maxShipLen, items, id } =
+        ruleForm.value;
+      let res = await api[
+        id ? "updateSecurityTemplate" : "addSecurityTemplate"
+      ]({
+        securityCheckName,
+        minShipLen,
+        maxShipLen,
+        items,
       });
-      console.log(res);
       if (res.data.status == 0) {
         ElNotification.success({
-          title: "添加成功",
+          title: id ? "更新成功" : "添加成功",
           duration: 0,
-          message: `${userName}:${res.data.msg}`,
+          message: `${securityCheckName}:${res.data.msg}`,
           type: "success",
         });
         resetForm();
@@ -205,14 +272,21 @@ async function getSecurityTemplateList(page) {
   }
 }
 
-async function shipOwnerDetail(shipOwnerId) {
-  store.commit("addAlive", "shipOwnerList");
-  router.push({
-    path: "/shipOwnerManage/shipOwnerDetail",
-    query: {
-      shipOwnerId,
-    },
+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,
   });
+  if (data.status == 0) {
+    dialogFormVisible.value = true;
+    ruleForm.value = data.result;
+  }
 }
 function pageChange(e) {
   currentPage.value = e;
@@ -220,6 +294,7 @@ function pageChange(e) {
 }
 onMounted(() => {
   getSecurityTemplateList();
+  getSecurityTemplateSelect();
 });
 </script>
 <style scoped>