doctor-admin-components 1.0.13-beta.9 → 1.0.13-beta.91

package/packages/src/views/biz/bizShipment/add.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="app-container">
     <!-- 添加或修改装运对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :before-close="handleClose">
+    <el-dialog :visible.sync="open" z-index="1000" width="80%" :before-close="handleClose">
+      <slot name="">
+        <span>{{ title }}</span>
+        <span v-if="voidInvoiceList" style="color: red">【快捷转卖】：系统检测到此销售合同关联的采购合同存在【已作废】的装运，</span>
+        <el-button v-if="voidInvoiceList" @click="handleReference" size="mini" type="text">点击这里直接复制并引用</el-button>
+      </slot>
+      <div v-if="reason" style="color:#f00;padding-left:60px;margin-bottom:10px;">{{ reason }}</div>
       <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="80px">
         <el-row>
           <el-col :span="6">
@@ -93,6 +99,11 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="8">
+            <el-form-item label="ETA更新" prop="etaUpdateOn" label-width="100">
+              <el-switch v-model="form.etaUpdateOn" active-text="自动" inactive-text="手动"> </el-switch>
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-table stripe :data="contractDetailList" border>
           <el-table-column label="序号" type="index" align="center"></el-table-column>
@@ -147,14 +158,14 @@
             </el-col>
             <el-col :span="8">
               <el-form-item label="集装箱皮重(kg)" :prop="'containerList.' + index + '.containerTareWeight'" :rules="subrules.containerTareWeight" label-width="120px">
-                <el-input v-model="dt.containerTareWeight" placeholder="请输入" size="mini"></el-input>
+                <el-input v-model="dt.containerTareWeight" placeholder="请输入" size="mini" type="number"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="6">
               <el-form-item label="总货物毛重(t)" :prop="'containerList.' + index + '.totalGoodsGrossWeight'" :rules="subrules.totalGoodsGrossWeight" label-width="105px">
-                <el-input v-if="editSwitch" size="mini" v-model="dt.totalGoodsGrossWeight"></el-input>
+                <el-input v-if="editSwitch" size="mini" v-model="dt.totalGoodsGrossWeight" type="number"></el-input>
                 <div v-else>
                   {{ dt.totalGoodsGrossWeight ? dt.totalGoodsGrossWeight : '自动计算' }}
                 </div>
@@ -162,7 +173,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="总货物皮重(t)" :prop="'containerList.' + index + '.totalGoodsTareWeight'" :rules="subrules.totalGoodsTareWeight" label-width="105px">
-                <el-input v-if="editSwitch" size="mini" v-model="dt.totalGoodsTareWeight"></el-input>
+                <el-input v-if="editSwitch" size="mini" v-model="dt.totalGoodsTareWeight" type="number"></el-input>
                 <div v-else>
                   {{ dt.totalGoodsTareWeight ? dt.totalGoodsTareWeight : '自动计算' }}
                 </div>
@@ -170,7 +181,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="总货物净重(t)" :prop="'containerList.' + index + '.totalGoodsNetWeight'" :rules="subrules.totalGoodsNetWeight" label-width="105px">
-                <el-input v-if="editSwitch" size="mini" v-model="dt.totalGoodsNetWeight"></el-input>
+                <el-input v-if="editSwitch" size="mini" v-model="dt.totalGoodsNetWeight" type="number"></el-input>
                 <div v-else>
                   {{ dt.totalGoodsNetWeight ? dt.totalGoodsNetWeight : '自动计算' }}
                 </div>
@@ -202,7 +213,8 @@
                           v-model="scope2.row.packageGrossWeight"
                           placeholder="请输入毛重"
                           size="mini"
-                          @change="changePackageGrossWeight(index, scope1.$index, scope2.$index)"
+                          type="number"
+                          @input="changePackageGrossWeight(index, scope1.$index, scope2.$index)"
                         ></el-input>
                       </el-form-item>
                     </template>
@@ -220,7 +232,8 @@
                           v-model="scope2.row.packageTareWeight"
                           placeholder="请输入皮重"
                           size="mini"
-                          @change="changePackageTareWeight(index, scope1.$index, scope2.$index)"
+                          type="number"
+                          @input="changePackageTareWeight(index, scope1.$index, scope2.$index)"
                         ></el-input>
                       </el-form-item>
                     </template>
@@ -234,7 +247,7 @@
                         :rules="rules.packageNetWeight"
                         :prop="'containerList.' + index + '.containerDetailList.' + scope1.$index + '.packageList.' + scope2.$index + '.packageNetWeight'"
                       >
-                        <el-input v-model="scope2.row.packageNetWeight" placeholder="请输入净重" size="mini"></el-input>
+                        <el-input v-model="scope2.row.packageNetWeight" placeholder="请输入净重" size="mini" type="number"></el-input>
                       </el-form-item>
                     </template>
                   </el-table-column>
@@ -348,7 +361,7 @@
                   :prop="'containerList.' + index + '.containerDetailList.' + scope.$index + '.goodsNumber'"
                   :rules="subrules.goodsNumber"
                 >
-                  <el-input v-model="scope.row.goodsNumber" size="small" @change="changeTotalGoodsNumber(index)"></el-input>
+                  <el-input v-model="scope.row.goodsNumber" size="small" @change="changeTotalGoodsNumber(index)" type="number"></el-input>
                 </el-form-item>
               </template>
             </el-table-column>
@@ -388,7 +401,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
 
-      <div style="display: flex; justify-content: center; align-items: center">
+      <div style="display: flex; justify-content: center; align-items: center" v-if="title == '修改装运'">
         <ul>
           按钮说明
           <ul>
@@ -421,26 +434,35 @@
     </el-dialog>
 
     <select-booking ref="selectBooking" @submit="setBooking" @unSubmit="unSetBooking" />
+    <!-- 引用装运 -->
+    <reference-alert @referenced="handleReferenced" ref="referenceAlert" />
   </div>
 </template>
 
 <script>
-import { listBizShipment, getBizShipment, delBizShipment, addWithContainer, updateWithContainer, updateWithContainerAndInvoice } from '../../../api/biz/bizShipment'
+import { haveVoidShipment, listBizShipment, getBizShipment, delBizShipment, addWithContainer, addContainerCheck, updateWithContainer, updateWithContainerAndInvoice } from '../../../api/biz/bizShipment'
 import { generateFinalInvoiceByShipmentId } from '../../../api/biz/bizInvoice'
 import { updateBizContractDetail } from '../../../api/biz/bizContractDetail'
+import { queryPurchaseContracts } from '../../../api/biz/bizContract'
+
 import { Loading } from 'element-ui'
 import { listDictData } from '../../../api/biz/dictData'
 import selectBooking from './selectBooking.vue'
 import { listBizBooking } from '../../../api/biz/bizBooking'
+import ReferenceAlert from './referenceAlert.vue'
+import { MessageBox } from 'element-ui'
 
 export default {
   name: 'AddShipment',
   dicts: ['shipping_company'],
   components: {
-    selectBooking
+    selectBooking,
+    ReferenceAlert,
   },
   data() {
     return {
+      // 已作废的装运合同
+      voidInvoiceList: null,
       //目的地港口列表
       destinationPortList: [],
       //折叠面板
@@ -488,7 +510,9 @@ export default {
         actualArrivalDate: null
       },
       // 表单参数
-      form: {},
+      form: {
+        etaUpdateOn: true
+      },
       // 表单校验
       rules: {
         billOfLadingNo: [{ required: true, message: '提单号不能为空', trigger: 'blur' }],
@@ -523,6 +547,10 @@ export default {
       default: () => {
         return null
       }
+    },
+    reason: {
+      type: String,
+      default: ''
     }
   },
   created() {
@@ -563,6 +591,21 @@ export default {
     }
   },
   methods: {
+    // 已用的数据，赋值给form
+    handleReferenced(data) {
+      //shipment, copyFileTypeList
+      let contractIds = this.form.contractIds // 保持不变
+      this.form = {...this.form, ...data.shipment, 'contractIds':contractIds}
+      // 需要去掉shipmentId
+      this.form.shipmentId = null
+      this.form.citeShipmentId = data.shipment.shipmentId
+      this.form.copyFileTypeList = data.copyFileTypeList
+      console.log('form:', this.form)
+    },
+    //引用已作废的装运
+    handleReference() {
+      this.$refs.referenceAlert.handleOpen(this.voidInvoiceList)
+    },
     //编辑开关
     openEditSwitch() {
       this.editSwitch = this.editSwitch = true
@@ -627,6 +670,21 @@ export default {
       this.form.containerList[index].totalGoodsGrossWeight = this.form.containerList[index].containerDetailList.reduce((total, item) => {
         return total + Number(item.goodsGrossWeight)
       }, 0)
+      //计算净重
+      this.form.containerList[index].containerDetailList[k].packageList[yindex].packageNetWeight = (
+        this.form.containerList[index].containerDetailList[k].packageList[yindex].packageGrossWeight -
+        this.form.containerList[index].containerDetailList[k].packageList[yindex].packageTareWeight
+      ).toFixed(3)
+
+      this.form.containerList[index].containerDetailList[k].goodsNetWeight = this.form.containerList[index].containerDetailList[k].packageList.reduce((total, item) => {
+        return total + Number(item.packageNetWeight)
+      }, 0)
+
+      this.form.containerList[index].totalGoodsNetWeight = this.form.containerList[index].containerDetailList
+        .reduce((total, item) => {
+          return total + Number(item.goodsNetWeight)
+        }, 0)
+        .toFixed(3)
     },
     changePackageTareWeight(index, k, yindex) {
       //计算皮重
@@ -766,6 +824,7 @@ export default {
         createTime: null,
         updateTime: null,
         containerList: [],
+        etaUpdateOn: true,
         loadingTime: this.utc2local(new Date(), 'yyyy-MM-DD HH:mm:ss')
       }
       this.contract = {
@@ -834,19 +893,29 @@ export default {
       this.contractDetailList = contractDetailList.map((v) => {
         return { ...v, selected: false }
       })
-      var purchaseContractNos = contract?.purchaseContractNos
-      if (typeof purchaseContractNos == 'string') {
-        purchaseContractNos = purchaseContractNos?.split(',')
-        this.contract.purchaseContractNos = purchaseContractNos
-        if (purchaseContractNos && purchaseContractNos.length == 1) {
-          this.form.purchaseContractNo = purchaseContractNos[0]
-        }
-      } else {
+      // 过滤作废的采购合同
+      queryPurchaseContracts(contract.contractId)
+      .then((res) => {
+        let purchaseContractNos = res.rows
         this.contract.purchaseContractNos = purchaseContractNos
         if (purchaseContractNos && purchaseContractNos.length == 1) {
           this.form.purchaseContractNo = purchaseContractNos[0]
         }
-      }
+      })
+      // var purchaseContractNos = contract?.purchaseContractNos
+      // if (typeof purchaseContractNos == 'string') {
+      //   purchaseContractNos = purchaseContractNos?.split(',')
+      //   this.contract.purchaseContractNos = purchaseContractNos
+      //   if (purchaseContractNos && purchaseContractNos.length == 1) {
+      //     this.form.purchaseContractNo = purchaseContractNos[0]
+      //   }
+      // } else {
+      //   this.contract.purchaseContractNos = purchaseContractNos
+      //   if (purchaseContractNos && purchaseContractNos.length == 1) {
+      //     this.form.purchaseContractNo = purchaseContractNos[0]
+      //   }
+      // }
+
       let containerNum = 1
       this.form.destinationPort = destinationPort
       this.form.contractIds = Array.from(new Set(contractDetailList.map((i) => i.contractId)))
@@ -864,6 +933,13 @@ export default {
         .catch((error) => {
           console.error(error)
         })
+      // 查询是否有可引用的
+      haveVoidShipment(contract.contractId)
+        .then((res) => {
+          this.voidInvoiceList = res.rows && res.rows.length > 0 ? res.rows : null
+        })
+      // 测试数据
+      // this.voidInvoiceList = [{'contractId': '1', 'contractNo':'合同号1'}] 
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -978,34 +1054,46 @@ export default {
       })
     },
     //仅生成装运
-    submitShipment() {
+    async submitShipment() {
+      // 装运前校验
+      let resOK = await this.checkPreShipment()
+      if (!resOK) {
+        return
+      }
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.open = false
+          let loadingInstance = Loading.service({
+            text: '请稍候',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)',
+            customClass: 'custom-loading-class'
+          })
           if (this.form.shipmentId == null) {
-            let loadingInstance = Loading.service({
-              text: '请稍候',
-              spinner: 'el-icon-loading',
-              background: 'rgba(0, 0, 0, 0.7)'
-            })
             addWithContainer(this.form).then((response) => {
-              loadingInstance.close()
-              this.$confirm('装运已生成！您可以点击“确认”按钮留在当前页面，或点击“去看看”按钮查看详细信息。', {
-                confirmButtonText: '确定',
-                cancelButtonText: '去看看',
-                type: 'warning'
-              })
-                .then(() => {})
-                .catch(() => {
-                  this.$router.push({
-                    name: 'BizShipment',
-                    params: { viewDetailFlag: true }
-                  })
+              if (response.code == 200) {
+                this.open = false
+                loadingInstance.close()
+                this.$confirm('装运已生成！您可以点击“确认”按钮留在当前页面，或点击“去看看”按钮查看详细信息。', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '去看看',
+                  type: 'warning'
                 })
-              this.$emit('refresh')
+                  .then(() => {})
+                  .catch(() => {
+                    this.$router.push({
+                      name: 'BizShipment',
+                      params: { viewDetailFlag: true }
+                    })
+                  })
+                this.$emit('refresh')
+              } else {
+                loadingInstance.close()
+              }
             })
           } else {
             updateWithContainer(this.form).then((res) => {
+              loadingInstance.close()
+              this.open = false
               this.$modal.msgSuccess('修改成功')
               this.$emit('refresh')
             })
@@ -1014,32 +1102,46 @@ export default {
       })
     },
     //装运并下载
-    handleTemplate(command) {
+    async handleTemplate() {
+      // 装运前校验
+      let resOK = await this.checkPreShipment()
+      if (!resOK) {
+        return
+      }
       this.submitAndDownload(command)
     },
     //提交并下载
     submitAndDownload(templateType) {
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.open = false
           let loadingInstance = Loading.service({
             text: '请稍候',
             spinner: 'el-icon-loading',
-            background: 'rgba(0, 0, 0, 0.7)'
+            background: 'rgba(0, 0, 0, 0.7)',
+            customClass: 'custom-loading-class'
           })
-          addWithContainer(this.form).then((res) => {
-            loadingInstance.close()
-            var query = {}
-            query.orderByColumn = 'shipmentId'
-            query.isAsc = 'desc'
-            query.pageNum = 1
-            query.pageSize = 1
-            listBizShipment(query).then((res) => {
-              var shipment = res.rows[0]
-              this.handleDownloadShipment(shipment, templateType)
+          addWithContainer(this.form)
+            .then((res) => {
+              if (res.code == 200) {
+                var query = {}
+                query.orderByColumn = 'shipmentId'
+                query.isAsc = 'desc'
+                query.pageNum = 1
+                query.pageSize = 1
+                listBizShipment(query).then((res) => {
+                  var shipment = res.rows[0]
+                  this.handleDownloadShipment(shipment, templateType)
+                })
+                this.$emit('refresh')
+                this.open = false
+                loadingInstance.close()
+              } else {
+                loadingInstance.close()
+              }
+            })
+            .finally(() => {
+              loadingInstance.close()
             })
-            this.$emit('refresh')
-          })
         }
       })
     },
@@ -1061,30 +1163,68 @@ export default {
         fileName
       )
     },
+    // 装运前校验
+    async checkPreShipment() {
+      let res = await addContainerCheck({
+        'billOfLadingNo': this.form.billOfLadingNo,
+        'bookingNo': this.form.bookingNo,
+        'shipmentId': this.form.shipmentId
+      })
+      if (!res.data.checkShipmentTip) {
+        return true
+      }
+      let result = await MessageBox.confirm(res.data.checkShipmentTip, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+      }).catch(err => err)
+      return result === 'confirm'
+    },
     /** 提交按钮 */
-    submitForm() {
+    async submitForm() {
+      // 装运前校验
+      let resOK = await this.checkPreShipment()
+      if (!resOK) {
+        return
+      }
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.open = false
+          let loadingInstance = Loading.service({
+            text: '请稍候',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)',
+            customClass: 'custom-loading-class'
+          })
           if (this.form.shipmentId == null) {
-            addWithContainer(this.form).then((response) => {
-              this.$modal.msgSuccess('生成成功')
-              var query = {}
-              query.orderByColumn = 'shipmentId'
-              query.isAsc = 'desc'
-              query.pageNum = 1
-              query.pageSize = 10
-              if (this.contract.contractType == 'sale') {
-                query.saleContractId = this.contract.contractId
-              } else {
-                query.purchaseContractId = this.contract.contractId
-              }
-              listBizShipment(query).then((res) => {
-                var shipment = res.rows[0]
-                this.handleGenerateFinalInvoice(shipment)
+            addWithContainer(this.form)
+              .then((response) => {
+                if (response.code == 200) {
+                  this.open = false
+                  this.$modal.msgSuccess('生成成功')
+                  var query = {}
+                  query.orderByColumn = 'shipmentId'
+                  query.isAsc = 'desc'
+                  query.pageNum = 1
+                  query.pageSize = 10
+                  if (this.contract.contractType == 'sale') {
+                    query.saleContractId = this.contract.contractId
+                  } else {
+                    query.purchaseContractId = this.contract.contractId
+                  }
+                  listBizShipment(query).then((res) => {
+                    var shipment = res.rows[0]
+                    this.handleGenerateFinalInvoice(shipment)
+                  })
+                } else {
+                  loadingInstance.close()
+                }
+              })
+              .finally(() => {
+                loadingInstance.close()
               })
-            })
           } else {
+            loadingInstance.close()
+            this.open = false
             this.$emit('openGenerateLive', { ...this.form, quoteType: this.contract.quoteType })
           }
         }
@@ -1139,3 +1279,11 @@ export default {
   border-radius: 4px;
 }
 </style>
+<style lang="scss">
+.el-loading-mask.custom-loading-class.is-fullscreen {
+  z-index: 3000 !important;
+}
+.el-message.el-message--error {
+  z-index: 3001 !important;
+}
+</style>

package/packages/src/views/biz/bizShipment/referenceAlert.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class>
+    <el-dialog :title="title" :visible.sync="open" width="75%" append-to-body>
+      <el-form ref="form" :model="form" label-width="100%">
+        <el-form-item class="vertical-form-item" :required="true" label="请选择您需要复制的装运：">
+          <el-row> 合同号 </el-row>
+          <el-row>
+            <el-select @change="selectContract" v-model="contractId" placeholder="请选择合同号">
+              <el-option v-for="(item, i) in shipmentList" :key="i" :label="item.contractNo" :value="item.contractId"></el-option>
+            </el-select>
+          </el-row>
+          <el-row v-if="contractId" style="padding-top: 15px"> 提单号 </el-row>
+          <el-row v-if="contractId">
+            <el-radio-group v-model="form.citeShipmentId">
+              <div v-for="(item, i) in blList" :key="i">
+                <el-radio :label="item.shipmentId">
+                  <span>{{ item.billOfLadingNo }}</span>
+                  <span v-if="item.citeNumber">（</span>
+                  <span v-if="item.citeNumber" style="color: red">已被引用过{{ item.citeNumber }}次</span>
+                  <span v-if="item.citeNumber">）</span>
+                </el-radio>
+              </div>
+            </el-radio-group>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item v-if="contractId" class="vertical-form-item" :required="true" label="请选择您需要复制的数据或文件：">
+          <el-row> 可复用的文件如下： </el-row>
+          <el-row>
+            <el-checkbox v-model="isSelectAll" @change="selectAll" label="0">选择全部</el-checkbox>
+          </el-row>
+          <el-row>
+            <el-checkbox-group @change="selectChange" v-model="form.copyFileTypeList">
+              <el-checkbox v-for="(item, i) in fileList" :key="i" :label="item.key">{{ item.value }}</el-checkbox>
+            </el-checkbox-group>
+          </el-row>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listBizShipment, getBizShipment } from '../../../api/biz/bizShipment'
+
+export default {
+  name: 'ReferenceAlert',
+  props: {},
+  components: {},
+  data() {
+    return {
+      // 弹出层标题
+      title: '请确认：',
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {
+        citeShipmentId: null,
+        copyFileTypeList: [] // 可复用的文件
+      },
+      // 选择的合同
+      contractId: null,
+      // 可引用的数据(销售合同列表)
+      shipmentList: null,
+      // 合同对应的提单列表
+      blList: null,
+      isSelectAll: false,
+      fileList: [
+        { key: 'booking_data', value: '订舱资料' },
+        { key: 'packingPhoto', value: '装箱照片' },
+        { key: 'draft_bill_of_lading', value: '草稿提单' },
+        { key: 'shipment_delivery_receipt', value: '正式提单' }
+      ]
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    selectAll(val) {
+      if (val) {
+        this.form.copyFileTypeList = this.fileList.map((res) => res.key)
+      } else {
+        this.form.copyFileTypeList = []
+      }
+    },
+    selectChange(val) {
+      this.isSelectAll = this.form.copyFileTypeList.length == 4
+    },
+    selectContract(val) {
+      this.blList = null
+      // 获取提单
+      listBizShipment({ 'saleContractId': val, 'voidStatus': 1 }).then((res) => {
+        this.blList = res.rows
+      })
+    },
+
+    /** 提交按钮 */
+    submitForm() {
+      // 数据校验
+      if (!this.contractId) {
+        return this.$modal.msgError('请选择合同号')
+      }
+      if (!this.form.citeShipmentId) {
+        return this.$modal.msgError('请选择提单号')
+      }
+      if (this.form.copyFileTypeList.length == 0) {
+        return this.$modal.msgError('请选择您需要复制的数据或文件')
+      }
+      console.log('form', this.form)
+      // 获取详情数据
+      const loading = this.openLoading()
+      getBizShipment(this.form.citeShipmentId).then((res) => {
+        loading.close()
+        if (res.code == 200) {
+          // 回传数据
+          let shipment = res.data
+          this.$emit('referenced', { shipment: shipment, copyFileTypeList: this.form.copyFileTypeList })
+          this.open = false
+        }
+      })
+    },
+    /** 展示按钮操作 */
+    handleOpen(shipmentList) {
+      this.reset()
+      this.shipmentList = shipmentList
+      this.open = true
+      console.log('shipmentList', shipmentList)
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.shipmentList = null
+      this.form = {
+        citeShipmentId: null,
+        copyFileTypeList: this.fileList.map((res) => res.key) // 可复用的文件
+      }
+      this.contractId = null
+      this.isSelectAll = true
+      this.blList = null
+    }
+  },
+  computed: {}
+}
+</script>
+<style lang="scss" scoped>
+// 修改为上下布局
+.vertical-form-item {
+  display: block;
+}
+::v-deep .vertical-form-item .el-form-item__label {
+  text-align: left;
+  display: block;
+  margin-bottom: 5px !important; /* 根据需要调整间距 */
+}
+
+::v-deep .vertical-form-item .el-form-item__content {
+  display: block;
+  margin-left: 5px !important; /* 重置默认的margin-left，因为标签和输入控件不再水平排列 */
+}
+</style>