change: 企业微信申请货物直发迭代.

(cherry picked from commit 27666f8016953cc7b574fd70ca4b7e74f240269c)

src/pages/wecom-approval/index.vue

@@ -163,46 +163,72 @@
           label="重量"
         >
           <el-input v-model="form.weight">
-            <template #append>kg</template>
+            <template #append>
+              <div style="width: 100px; text-align: center">kg</div>
+            </template>
           </el-input>
         </el-form-item>
 
         <el-form-item label="地址">
           <div class="addr-input-group">
-            <el-input
-              v-model="form.ATTN"
-              placeholder="ATTN"
-            ></el-input>
-            <el-input
-              v-model="form.Phone"
-              placeholder="Phone"
-            ></el-input>
-            <el-input
-              v-model="form.Shipping_Unit_Building_Name"
-              placeholder="Shipping_Unit/Building_Name"
-              type="textarea"
-              rows="1"
-            ></el-input>
-            <el-input
-              v-model="form.Shipping_Street"
-              placeholder="Shipping_Street"
-            ></el-input>
-            <el-input
-              v-model="form.Shipping_City"
-              placeholder="Shipping_City"
-            ></el-input>
-            <el-input
-              v-model="form.Shipping_State"
-              placeholder="Shipping_State"
-            ></el-input>
-            <el-input
-              v-model="form.Shipping_Code"
-              placeholder="Shipping_Code"
-            ></el-input>
-            <el-input
-              v-model="form.Shipping_Country"
-              placeholder="Shipping_Country"
-            ></el-input>
+            <div class="flex start">
+              <el-input
+                v-model="form.ATTN"
+                placeholder="ATTN"
+              ></el-input>
+              <div class="addr-append">ATTN</div>
+            </div>
+            <div class="flex start">
+              <el-input
+                v-model="form.Phone"
+                placeholder="Phone"
+              ></el-input>
+              <div class="addr-append">Phone</div>
+            </div>
+            <div class="flex start stretch">
+              <el-input
+                v-model="form.Shipping_Unit_Building_Name"
+                placeholder="Shipping Unit/Building Name"
+                :autosize="{ minRows: 1 }"
+                type="textarea"
+              ></el-input>
+              <div class="addr-append">Shipping Unit</div>
+            </div>
+            <div class="flex start">
+              <el-input
+                v-model="form.Shipping_Street"
+                placeholder="Shipping Street"
+              ></el-input>
+              <div class="addr-append">Shipping Street</div>
+            </div>
+            <div class="flex start">
+              <el-input
+                v-model="form.Shipping_City"
+                placeholder="Shipping City"
+              ></el-input>
+              <div class="addr-append">Shipping City</div>
+            </div>
+            <div class="flex start">
+              <el-input
+                v-model="form.Shipping_State"
+                placeholder="Shipping state"
+              ></el-input>
+              <div class="addr-append">Shipping State</div>
+            </div>
+            <div class="flex start">
+              <el-input
+                v-model="form.Shipping_Code"
+                placeholder="Shipping Code"
+              ></el-input>
+              <div class="addr-append">Shipping Code</div>
+            </div>
+            <div class="flex start">
+              <el-input
+                v-model="form.Shipping_Country"
+                placeholder="Shipping Country"
+              ></el-input>
+              <div class="addr-append">Shipping Country</div>
+            </div>
           </div>
         </el-form-item>
 
@@ -400,7 +426,6 @@
             </el-table-column>
           </el-table>
         </el-form-item>
-
         <el-form-item>
           <div class="flex">
             <el-button
@@ -435,7 +460,7 @@ export default defineComponent({
 })
 </script>
 <script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import {
   ElButton,
@@ -873,7 +898,22 @@ const processFile = async function (event: any) {
     resetFileInput()
   })
 }
+const approvalCount = computed(() => {
+  return form.value.goods.reduce((t, i) => {
+    t += Number(i.number)
+    return t
+  }, 0)
+})
 const checkForm = function (formEl: FormInstance | undefined) {
+  if (approvalCount.value <= 0) {
+    ElNotification({
+      duration: 0,
+      type: 'warning',
+      title: '注意',
+      message: '总发货数量不能为 0, 请修改发货数量。',
+    })
+    return
+  }
   if (!formEl) return
 
   formEl.validate((valid, fields) => {
@@ -1253,10 +1293,13 @@ input[type='number'] {
   right: 16px;
 }
 .addr-input-group {
+  width: 100%;
   ::v-deep {
-    input,
+    .el-input__wrapper,
     textarea {
-      text-align: right;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      min-height: 34px !important;
     }
   }
   .el-input,
@@ -1266,5 +1309,27 @@ input[type='number'] {
       margin-bottom: 0;
     }
   }
+  .addr-append {
+    box-sizing: border-box;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid #dfdfdf;
+    border-left: none;
+    margin-bottom: 10px;
+
+    $width: 140px;
+    width: $width;
+    max-width: $width;
+    min-width: $width;
+    color: rgb(144, 147, 153);
+    background-color: rgb(245, 247, 250);
+    box-shadow:
+      0 1px 0 0 var(--el-input-border-color) inset,
+      0 -1px 0 0 var(--el-input-border-color) inset,
+      -1px 0 0 0 var(--el-input-border-color) inset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>