ToDo 完成船东资料

src/App.vue

@@ -142,6 +142,10 @@ export default {
   margin-top: 50px;
 }
 
+.mb50 {
+  margin-bottom: 50px;
+}
+
 .container-title {
   font-size: 18px;
   font-family: PingFangSC-Medium, PingFang SC;

src/components/RemoteSelect.vue

@@ -15,7 +15,7 @@
       v-for="item in options"
       :key="item.key"
       :label="item.value"
-      :value="{ value: item.value, key: item.key }"
+      :value="{ value: item.value, key: item.key, phone: item.phone }"
     />
   </el-select>
 </template>

src/views/orderManage/orderDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full-container-p24">
+  <div class="full-container-p24" style="width: 800px">
     <el-form
       ref="contractRuleFormRef"
       :model="contractRuleForm"
@@ -16,7 +16,6 @@
         ></Uploader>
       </el-form-item>
       <div class="container-title">合同信息</div>
-
       <el-form-item label="选择货主" prop="cargoOwnerName">
         <RemoteSelect
           class="w240"
@@ -98,12 +97,135 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <div class="df aic mt30" style="margin-left: 300px">
-          <el-button @click="onSubmit" type="primary">保存</el-button>
+        <div class="df aic mt30 jcfe">
+          <el-button @click="onContractSubmit" type="primary">
+            保存合同
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <el-divider class="mb50"></el-divider>
+    <el-form
+      ref="shipOwnerRuleFormRef"
+      :model="shipOwnerRuleForm"
+      :rules="shipOwnerRules"
+      label-width="120px"
+    >
+      <div class="container-title">船东资料</div>
+      <el-form-item label="选择船东">
+        <RemoteSelect
+          class="w240 mr10"
+          api="getOrderShipOwnerSelect"
+          v-model="shipOwnerRuleForm.shipOwnerName"
+          placeholder="请选择"
+          @selectItem="selectShipOwner($event)"
+        ></RemoteSelect>
+        <el-button type="primary" size="small">添加新船东</el-button>
+      </el-form-item>
+      <el-form-item label="船东手机号">
+        <el-input
+          class="w240"
+          v-model="shipOwnerRuleForm.phone"
+          placeholder=""
+        ></el-input>
+      </el-form-item>
+      <div class="df aic jcsb" v-if="shipOwnerRuleForm.shipOwnerId">
+        <div class="container-title">卡号信息</div>
+        <el-button
+          type="primary"
+          size="small"
+          @click="addCardDialogVisible = true"
+        >
+          添加新卡号
+        </el-button>
+      </div>
+      <el-form-item
+        label="卡号信息"
+        prop="shipOwnerBankCardId"
+        v-if="bankCardInfo.length"
+      >
+        <div class="df aic pointer">
+          <el-card
+            class="w260 mr10"
+            shadow="never"
+            v-for="(item, index) in bankCardInfo"
+          >
+            <div class="df aic">
+              <div class="card-title">持卡人姓名</div>
+              <div class="card-text">{{ item.bankCardOwnerName }}</div>
+            </div>
+            <div class="df aic">
+              <div class="card-title">银行卡号</div>
+              <div class="card-text">{{ item.bankCardNo }}</div>
+            </div>
+            <div class="df aic">
+              <div class="card-title">开户行</div>
+              <div class="card-text">{{ item.accountOpeningBankName }}</div>
+            </div>
+          </el-card>
         </div>
       </el-form-item>
+      <div v-if="shipInfo.mmsi">
+        <div class="container-title">船舶信息</div>
+        <el-form-item label="船舶名称" prop="shipname">
+          <el-input class="w240" v-model="shipInfo.shipname"></el-input>
+        </el-form-item>
+        <el-form-item label="船长" prop="length">
+          <el-input class="w240" v-model="shipInfo.length"></el-input>
+        </el-form-item>
+        <el-form-item label="船宽" prop="breadth">
+          <el-input class="w240" v-model="shipInfo.breadth"></el-input>
+        </el-form-item>
+        <el-form-item label="吃水" prop="draught">
+          <el-input class="w240" v-model="shipInfo.draught"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <div class="df aic mt30 jcfe">
+            <el-button @click="onShipOwnerSubmit" type="primary">
+              保存船东资料
+            </el-button>
+          </div>
+        </el-form-item>
+      </div>
     </el-form>
-    <el-divider></el-divider>
+    <el-dialog
+      title="新增卡号信息"
+      v-model="addCardDialogVisible"
+      width="470px"
+      @closed="addCardForm = {}"
+    >
+      <el-form
+        ref="addCardFormRef"
+        :model="addCardForm"
+        :rules="addCardRules"
+        label-width="120px"
+      >
+        <el-form-item label="持卡人姓名" prop="bankCardOwnerName">
+          <el-input
+            class="w240"
+            v-model="addCardForm.bankCardOwnerName"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="银行卡号" prop="bankCardNo">
+          <el-input class="w240" v-model="addCardForm.bankCardNo"></el-input>
+        </el-form-item>
+        <el-form-item label="开户行" prop="accountOpeningBankName">
+          <el-input
+            class="w240"
+            v-model="addCardForm.accountOpeningBankName"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="addCardDialogVisible = false">
+            取消
+          </el-button>
+
+          <el-button type="primary" @click="addShipOwnerBankCard()">
+            保存
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -213,7 +335,7 @@ function removeDischargePort(index) {
   contractRuleForm.value.dischargePorts.splice(index, 1);
 }
 
-function onSubmit() {
+function onContractSubmit() {
   contractRuleFormRef.value.validate(async (valid) => {
     if (valid) {
       ElMessageBox.confirm("是否确认提交", "提示", {
@@ -264,6 +386,69 @@ function onSubmit() {
     }
   });
 }
+
+const shipOwnerRuleFormRef = ref(null);
+const shipOwnerRuleForm = ref({});
+const shipOwnerRules = ref({});
+
+function selectShipOwner(e) {
+  console.log(e);
+  shipOwnerRuleForm.value.shipOwnerId = e.key;
+  shipOwnerRuleForm.value.shipOwnerName = e.value;
+  shipOwnerRuleForm.value.phone = e.phone;
+  getShipOwnerBankCardShipInfo(e.key);
+}
+const bankCardInfo = ref([]);
+const shipInfo = ref({});
+async function getShipOwnerBankCardShipInfo(shipOwnerId) {
+  let { data } = await api.getShipOwnerBankCardShipInfo({
+    shipOwnerId,
+  });
+  bankCardInfo.value = data.result.bankCardInfo;
+  shipInfo.value = data.result.shipInfo;
+}
+
+const addCardDialogVisible = ref(false);
+const addCardFormRef = ref(null);
+const addCardForm = ref({});
+const addCardRules = ref({
+  bankCardOwnerName: [
+    { required: true, message: "请输入持卡人姓名", trigger: "blur" },
+  ],
+  bankCardNo: [{ required: true, message: "请输入银行卡号", trigger: "blur" }],
+  accountOpeningBankName: [
+    { required: true, message: "请输入开户行", trigger: "blur" },
+  ],
+});
+
+function addShipOwnerBankCard() {
+  addCardFormRef.value.validate(async (valid) => {
+    if (valid) {
+      let postData = {
+        ...addCardForm.value,
+        shipOwnerId: shipOwnerRuleForm.value.shipOwnerId,
+      };
+      let { data } = await api.addShipOwnerBankCard(postData);
+      if (data.status === 0) {
+        ElNotification({
+          title: "提示",
+          message: data.msg,
+          type: "success",
+        });
+        addCardDialogVisible.value = false;
+        getShipOwnerBankCardShipInfo(shipOwnerRuleForm.value.shipOwnerId);
+      } else {
+        ElNotification({
+          title: "提示",
+          message: data.msg,
+          type: "error",
+        });
+      }
+    }
+  });
+}
+
+function onShipOwnerSubmit() {}
 onMounted(() => {
   getOrderDetail();
 });
@@ -273,4 +458,13 @@ onMounted(() => {
 .w240 {
   width: 240px;
 }
+
+.card-title {
+  width: 80px;
+  color: #999;
+}
+
+.w260 {
+  width: 260px;
+}
 </style>