新增 货主详情,代理详情 基础信息更新

src/apis/fetch.js

@@ -513,4 +513,13 @@ export default {
   getCargoList(data) {
     return $http("/cargo/list", data);
   },
+  // 更新货主公司基本信息
+  updateAgencyCompany(data) {
+    return $http("/proxy/updateBasicInfo", data);
+  },
+
+  // 更新货主公司基本信息
+  updateCargoOwnerCompany(data) {
+    return $http("/cargoOwner/updateBasicInfo", data);
+  },
 };

src/views/agencyManage/agencyCompanyDetail.vue

@@ -12,13 +12,44 @@
   <div class="line-container-p24">
     <div class="df aic">
       <div class="normal-label">代理名称</div>
-      <div class="show-input">{{ proxyName }}</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="!isBasicInfoEdit"
+        v-model="proxyName"
+      ></el-input>
+      <div class="normal-label">代理名称缩写</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="!isBasicInfoEdit"
+        v-model="shortName"
+      ></el-input>
+      <el-button v-if="!isBasicInfoEdit" @click="editBasicInfo" type="primary">
+        修改
+      </el-button>
+      <el-button
+        v-if="isBasicInfoEdit"
+        @click="submitBasicInfoEdit"
+        type="primary"
+      >
+        提交
+      </el-button>
+      <el-button v-if="isBasicInfoEdit" @click="cancelBasicInfoEdit">
+        取消
+      </el-button>
+    </div>
+    <div class="df aic mt20">
       <div class="normal-label">联系人</div>
-      <div class="show-input">{{ contactName }}</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="true"
+        v-model="contactName"
+      ></el-input>
       <div class="normal-label">联系人手机号</div>
-      <div class="show-input">{{ contactPhone }}</div>
-      <div class="normal-label">联系人邮箱</div>
-      <div class="show-input">{{ contactEmail }}</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="true"
+        v-model="contactPhone"
+      ></el-input>
     </div>
     <div class="df aic mt20">
       <div class="normal-label">过期时间</div>
@@ -463,6 +494,7 @@ function pageChange(e) {
   getAgencySubAccountList();
 }
 let proxyName = ref();
+let shortName = ref();
 let contactName = ref();
 let contactPhone = ref();
 let contactEmail = ref();
@@ -472,6 +504,7 @@ async function getAgencyCompanyDetail() {
   });
   if (res.data.status == 0) {
     proxyName.value = res.data.result.proxyName;
+    shortName.value = res.data.result.shortName;
     contactName.value = res.data.result.contactName;
     contactPhone.value = res.data.result.contactPhone;
     contactEmail.value = res.data.result.contactEmail;
@@ -618,6 +651,43 @@ function showEdit(row) {
   };
 }
 
+const isBasicInfoEdit = ref(false);
+const nameCache = ref("");
+const shortCache = ref("");
+function editBasicInfo() {
+  isBasicInfoEdit.value = true;
+  nameCache.value = proxyName.value;
+  shortCache.value = shortName.value;
+}
+async function submitBasicInfoEdit() {
+  let { data } = await api.updateAgencyCompany({
+    proxyId: route.query.id,
+    companyName: proxyName.value,
+    shortName: shortName.value,
+  });
+  if (data.status == 0) {
+    ElNotification.success({
+      title: "成功",
+      duration: 2000,
+      message: `${data.msg}`,
+      type: "success",
+    });
+    getAgencyCompanyDetail();
+    isBasicInfoEdit.value = false;
+  } else {
+    ElNotification.error({
+      title: "失败",
+      duration: 3000,
+      message: data.msg,
+    });
+  }
+}
+function cancelBasicInfoEdit() {
+  isBasicInfoEdit.value = false;
+  proxyName.value = nameCache.value;
+  shortName.value = shortCache.value;
+}
+
 onMounted(() => {
   getAgencyCompanyDetail();
   getCargoOwnerCompanyByAgencyCompany();
@@ -635,6 +705,7 @@ onMounted(() => {
 }
 
 .normal-label {
+  width: 100px;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;

src/views/cargoOwnerManage/cargoOwnerCompanyDetail.vue

@@ -12,13 +12,44 @@
   <div class="line-container-p24">
     <div class="df aic">
       <div class="normal-label">货主名称</div>
-      <div class="show-input">{{ cargoOwnerName }}</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="!isBasicInfoEdit"
+        v-model="cargoOwnerName"
+      ></el-input>
+      <div class="normal-label">货主名称缩写</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="!isBasicInfoEdit"
+        v-model="shortName"
+      ></el-input>
+      <el-button v-if="!isBasicInfoEdit" @click="editBasicInfo" type="primary">
+        修改
+      </el-button>
+      <el-button
+        v-if="isBasicInfoEdit"
+        @click="submitBasicInfoEdit"
+        type="primary"
+      >
+        提交
+      </el-button>
+      <el-button v-if="isBasicInfoEdit" @click="cancelBasicInfoEdit">
+        取消
+      </el-button>
+    </div>
+    <div class="df aic mt20">
       <div class="normal-label">联系人</div>
-      <div class="show-input">{{ contactName }}</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="true"
+        v-model="contactName"
+      ></el-input>
       <div class="normal-label">联系人手机号</div>
-      <div class="show-input">{{ contactPhone }}</div>
-      <div class="normal-label">联系人邮箱</div>
-      <div class="show-input">{{ contactEmail }}</div>
+      <el-input
+        style="width: 220px; margin-right: 20px"
+        :disabled="true"
+        v-model="contactPhone"
+      ></el-input>
     </div>
     <div class="df aic mt20">
       <div class="normal-label">过期时间</div>
@@ -34,7 +65,6 @@
       <el-button
         v-if="!expiredTimeEditable"
         @click="editExpiredTime"
-        size="small"
         type="primary"
       >
         修改
@@ -316,6 +346,7 @@ import { subTimeStr } from "../../utils/utils";
 
 const route = useRoute();
 let cargoOwnerName = ref();
+let shortName = ref();
 let contactName = ref();
 let contactPhone = ref();
 let contactEmail = ref();
@@ -325,6 +356,7 @@ async function getCargoOwnerCompanyDetail() {
   });
   if (res.data.status == 0) {
     cargoOwnerName.value = res.data.result.cargoOwnerName;
+    shortName.value = res.data.result.shortName;
     contactName.value = res.data.result.contactName;
     contactPhone.value = res.data.result.contactPhone;
     contactEmail.value = res.data.result.contactEmail;
@@ -582,6 +614,43 @@ function showEdit(row) {
   };
 }
 
+const isBasicInfoEdit = ref(false);
+const nameCache = ref("");
+const shortCache = ref("");
+function editBasicInfo() {
+  isBasicInfoEdit.value = true;
+  nameCache.value = cargoOwnerName.value;
+  shortCache.value = shortName.value;
+}
+async function submitBasicInfoEdit() {
+  let { data } = await api.updateCargoOwnerCompany({
+    cargoOwnerId: route.query.id,
+    companyName: cargoOwnerName.value,
+    shortName: shortName.value,
+  });
+  if (data.status == 0) {
+    ElNotification.success({
+      title: "成功",
+      duration: 2000,
+      message: `${data.msg}`,
+      type: "success",
+    });
+    isBasicInfoEdit.value = false;
+    getAgencyCompanyDetail();
+  } else {
+    ElNotification.error({
+      title: "失败",
+      duration: 3000,
+      message: data.msg,
+    });
+  }
+}
+function cancelBasicInfoEdit() {
+  isBasicInfoEdit.value = false;
+  cargoOwnerName.value = nameCache.value;
+  shortName.value = shortCache.value;
+}
+
 onMounted(() => {
   getCargoOwnerCompanyDetail();
   getCargoOwnerAccountList();
@@ -600,6 +669,7 @@ onMounted(() => {
 }
 
 .normal-label {
+  width: 100px;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;