客户主数据页面优化

src/views/mes/md/client/components/AddrInfo.vue

 <template>
   <div class="base-info">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="客户工作时间" prop="clientWorkTime">
-          <el-input v-model="form.clientWorkTime" placeholder="请输入 客户工作时间"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="开票地址" prop="invoiceAddr">
-          <el-input v-model="form.invoiceAddr" placeholder="请输入 开票地址"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="客户送货地址" prop="address">
-          <el-input v-model="form.address" placeholder="请输入 客户送货地址"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="城市" prop="city">
-          <el-input v-model="form.city" placeholder="请输入 城市"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="国家" prop="country">
-          <el-input v-model="form.country" placeholder="请输入 国家"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="地区" prop="area">
-          <el-input v-model="form.area" placeholder="请输入 地区"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="语言" prop="lang">
-          <el-input v-model="form.lang" placeholder="请输入 语言"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="邮政编码" prop="postcode">
-          <el-input v-model="form.postcode" placeholder="请输入 邮政编码"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="电话号码" prop="tel">
-          <el-input v-model="form.tel" placeholder="请输入 电话号码"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="移动电话" prop="phone">
-          <el-input v-model="form.phone" placeholder="请输入 移动电话"/>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="Email" prop="email">
-          <el-input v-model="form.email" placeholder="请输入 e_Mail"/>
-        </el-form-item>
-      </el-col>
-    </el-row>
+    <el-form :label-position="labelPosition">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+            label="客户工作时间"
+            prop="clientWorkTime"
+            :label-width="labelWidth"
+          >
+            <el-input
+              v-model="form.clientWorkTime"
+              placeholder="请输入客户工作时间"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="开票地址"
+            prop="invoiceAddr"
+            :label-width="labelWidth"
+          >
+            <el-input v-model="form.invoiceAddr" placeholder="请输入开票地址" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="客户送货地址"
+            prop="address"
+            :label-width="labelWidth"
+          >
+            <el-input v-model="form.address" placeholder="请输入客户送货地址" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="城市" prop="city" :label-width="labelWidth">
+            <el-input v-model="form.city" placeholder="请输入城市" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="国家" prop="country" :label-width="labelWidth">
+            <el-input v-model="form.country" placeholder="请输入国家" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="地区" prop="area" :label-width="labelWidth">
+            <el-input v-model="form.area" placeholder="请输入地区" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="语言" prop="lang" :label-width="labelWidth">
+            <el-input v-model="form.lang" placeholder="请输入语言" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="邮政编码"
+            prop="postcode"
+            :label-width="labelWidth"
+          >
+            <el-input v-model="form.postcode" placeholder="请输入邮政编码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电话号码" prop="tel" :label-width="labelWidth">
+            <el-input v-model="form.tel" placeholder="请输入电话号码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="移动电话" prop="phone" :label-width="labelWidth">
+            <el-input v-model="form.phone" placeholder="请输入移动电话" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="Email" prop="email" :label-width="labelWidth">
+            <el-input v-model="form.email" placeholder="请输入e_Mail" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
   </div>
 </template>
 
 <script>
-
 export default {
   props: {
-    form: { type: Object, required: true }
+    form: { type: Object, required: true },
   },
   data() {
-    return {}
+    return {
+      labelPosition: "right",
+      labelWidth: "12em",
+    };
   },
   methods: {
-    init() {
-
-    }
+    init() {},
   },
-  created() {
-
-  }
-}
+  created() {},
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/mes/md/client/components/BaseInfo.vue

 <template>
   <div class="base-info">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="客户工作时间" prop="clientWorkTime">
-          <el-input v-model="form.clientWorkTime" placeholder="请输入客户工作时间" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="所属集团" prop="membershipGroup">
-          <el-input v-model="form.membershipGroup" placeholder="请输入所属集团" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="公司法人" prop="legalPerson">
-          <el-input v-model="form.legalPerson" placeholder="请输入公司法人" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="工商注册号" prop="licenseNo">
-          <el-input v-model="form.licenseNo" placeholder="请输入工商注册号" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="国税注册号" prop="taxNo">
-          <el-input v-model="form.taxNo" placeholder="请输入国税注册号" />
-        </el-form-item>
-      </el-col>
-    </el-row>
+    <el-form :label-position="labelPosition">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+            label="客户工作时间"
+            prop="clientWorkTime"
+            :label-width="labelWidth"
+          >
+            <el-input
+              v-model="form.clientWorkTime"
+              placeholder="请输入客户工作时间"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="所属集团"
+            prop="membershipGroup"
+            :label-width="labelWidth"
+          >
+            <el-input
+              v-model="form.membershipGroup"
+              placeholder="请输入所属集团"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="公司法人"
+            prop="legalPerson"
+            :label-width="labelWidth"
+          >
+            <el-input v-model="form.legalPerson" placeholder="请输入公司法人" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="工商注册号"
+            prop="licenseNo"
+            :label-width="labelWidth"
+          >
+            <el-input v-model="form.licenseNo" placeholder="请输入工商注册号" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="国税注册号"
+            prop="taxNo"
+            :label-width="labelWidth"
+          >
+            <el-input v-model="form.taxNo" placeholder="请输入国税注册号" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
   </div>
 </template>
 
 <script>
-
 export default {
   props: {
-    form: {type: Object, required: true}
+    form: { type: Object, required: true },
   },
   data() {
-    return {}
+    return {
+      labelPosition: "right",
+      labelWidth: "12em",
+    };
   },
   methods: {
-    init() {
-
-    }
+    init() {},
   },
-  created() {
-
-  }
-}
+  created() {},
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/mes/md/client/components/DeliveryInfo.vue

 <template>
   <div class="base-info">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="验收单要求" prop="receiptRequest">
-          <el-input v-model="form.receiptRequest" placeholder="请输入验收单要求" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="客户系统验收要求" prop="clientCheckRequest">
-          <el-input v-model="form.clientCheckRequest" placeholder="请输入客户系统验收要求" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="要求签回货单" prop="requestSignReceipt">
-          <el-input v-model="form.requestSignReceipt" placeholder="请输入要求签回货单" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="货单是否打印送货日期" prop="isPrintDate">
-          <el-input v-model="form.isPrintDate" placeholder="请输入 货单是否打印送货日期" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="收货方签字要求" prop="signRequest">
-          <el-input v-model="form.signRequest" placeholder="请输入 收货方签字要求" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="货单打印要求" prop="billPrintRequest">
-          <el-input v-model="form.billPrintRequest" placeholder="请输入 货单打印要求" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="产品检验报告类型" prop="qcReportType">
-          <el-input v-model="form.qcReportType" placeholder="请输入 产品检验报告类型" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="货单签回方式" prop="receiptSigningMethod">
-          <el-input v-model="form.receiptSigningMethod" placeholder="请输入 货单签回方式" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="出货方式" prop="shippingMethod">
-          <el-input v-model="form.shippingMethod" placeholder="请输入 出货方式" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="线路" prop="path">
-          <el-input v-model="form.path" placeholder="请输入 线路" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="线路" prop="path">
-          <el-input v-model="form.path" placeholder="请输入 线路" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="送货单打印默认设置" prop="billPrintSetting">
-          <el-input v-model="form.billPrintSetting" placeholder="请输入 送货单打印默认设置" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="送货单统计异常期限" prop="billExceptionDeadline">
-          <el-input v-model="form.billExceptionDeadline" placeholder="请输入 送货单统计异常期限" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="生产发货方式" prop="sendMode">
-          <el-input v-model="form.sendMode" placeholder="请输入 生产发货方式" />
-        </el-form-item>
-      </el-col>
+    <el-form :label-position="labelPosition">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="验收单要求" prop="receiptRequest" :label-width="labelWidth">
+            <el-input v-model="form.receiptRequest" placeholder="请输入验收单要求" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="客户系统验收要求" prop="clientCheckRequest" :label-width="labelWidth">
+            <el-input v-model="form.clientCheckRequest" placeholder="请输入客户系统验收要求" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="要求签回货单" prop="requestSignReceipt" :label-width="labelWidth">
+            <el-input v-model="form.requestSignReceipt" placeholder="请输入要求签回货单" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="货单是否打印送货日期" prop="isPrintDate" :label-width="labelWidth">
+            <el-input v-model="form.isPrintDate" placeholder="请输入 货单是否打印送货日期" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="收货方签字要求" prop="signRequest" :label-width="labelWidth">
+            <el-input v-model="form.signRequest" placeholder="请输入 收货方签字要求" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="货单打印要求" prop="billPrintRequest" :label-width="labelWidth">
+            <el-input v-model="form.billPrintRequest" placeholder="请输入 货单打印要求" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产品检验报告类型" prop="qcReportType" :label-width="labelWidth">
+            <el-input v-model="form.qcReportType" placeholder="请输入 产品检验报告类型" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="货单签回方式" prop="receiptSigningMethod" :label-width="labelWidth">
+            <el-input v-model="form.receiptSigningMethod" placeholder="请输入 货单签回方式" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出货方式" prop="shippingMethod" :label-width="labelWidth">
+            <el-input v-model="form.shippingMethod" placeholder="请输入 出货方式" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="线路" prop="path" :label-width="labelWidth">
+            <el-input v-model="form.path" placeholder="请输入 线路" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="线路" prop="path" :label-width="labelWidth">
+            <el-input v-model="form.path" placeholder="请输入 线路" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="送货单打印默认设置" prop="billPrintSetting" :label-width="labelWidth">
+            <el-input v-model="form.billPrintSetting" placeholder="请输入 送货单打印默认设置" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="送货单统计异常期限" prop="billExceptionDeadline" :label-width="labelWidth">
+            <el-input v-model="form.billExceptionDeadline" placeholder="请输入 送货单统计异常期限" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="生产发货方式" prop="sendMode" :label-width="labelWidth">
+            <el-input v-model="form.sendMode" placeholder="请输入 生产发货方式" />
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
 
-    </el-row>
   </div>
 </template>
 
@@ -80,10 +83,13 @@
 
 export default {
   props: {
-    form: {type: Object, required: true}
+    form: { type: Object, required: true }
   },
   data() {
-    return {}
+    return {
+      labelPosition: 'right',
+      labelWidth: '12em'
+    }
   },
   methods: {
     init() {
@@ -96,6 +102,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/mes/md/client/components/FinanceInfo.vue

 <template>
   <div class="base-info">
+    <el-form :label-position="labelPosition">
     <el-row>
       <el-col :span="12">
-        <el-form-item label="盖章方式" prop="stampMode">
-          <el-input v-model="form.stampMode" placeholder="请输入 盖章方式"/>
+        <el-form-item label="盖章方式" prop="stampMode" :label-width="labelWidth">
+          <el-input v-model="form.stampMode" placeholder="请输入盖章方式"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="请款联" prop="requisition">
-          <el-input v-model="form.requisition" placeholder="请输入 请款联"/>
+        <el-form-item label="请款联" prop="requisition" :label-width="labelWidth">
+          <el-input v-model="form.requisition" placeholder="请输入请款联"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="客户联" prop="clientForm">
-          <el-input v-model="form.clientForm" placeholder="请输入 客户联"/>
+        <el-form-item label="客户联" prop="clientForm" :label-width="labelWidth">
+          <el-input v-model="form.clientForm" placeholder="请输入客户联"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="不开发票" prop="noInvoice">
-          <el-input v-model="form.noInvoice" placeholder="请输入 不开发票"/>
+        <el-form-item label="不开发票" prop="noInvoice" :label-width="labelWidth">
+          <el-input v-model="form.noInvoice" placeholder="请输入不开发票"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="请款要求" prop="paymentRequest">
-          <el-input v-model="form.paymentRequest" placeholder="请输入 请款要求"/>
+        <el-form-item label="请款要求" prop="paymentRequest" :label-width="labelWidth">
+          <el-input v-model="form.paymentRequest" placeholder="请输入请款要求"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="月结方式" prop="settleMode">
-          <el-input v-model="form.settleMode" placeholder="请输入 月结方式"/>
+        <el-form-item label="月结方式" prop="settleMode" :label-width="labelWidth">
+          <el-input v-model="form.settleMode" placeholder="请输入月结方式"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="请款期限" prop="paymentDeadline">
-          <el-input v-model="form.paymentDeadline" placeholder="请输入 请款期限"/>
+        <el-form-item label="请款期限" prop="paymentDeadline" :label-width="labelWidth">
+          <el-input v-model="form.paymentDeadline" placeholder="请输入请款期限"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="做账截止日" prop="accountingDeadline">
-          <el-input v-model="form.accountingDeadline" placeholder="请输入 做账截止日"/>
+        <el-form-item label="做账截止日" prop="accountingDeadline" :label-width="labelWidth">
+          <el-input v-model="form.accountingDeadline" placeholder="请输入做账截止日"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="客户收账截止日" prop="collectionDeadline">
-          <el-input v-model="form.collectionDeadline" placeholder="请输入 客户收账截止日"/>
+        <el-form-item label="客户收账截止日" prop="collectionDeadline" :label-width="labelWidth">
+          <el-input v-model="form.collectionDeadline" placeholder="请输入客户收账截止日"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="扣款百分比" prop="deductionPercent">
-          <el-input v-model="form.deductionPercent" placeholder="请输入 扣款百分比"/>
+        <el-form-item label="扣款百分比" prop="deductionPercent" :label-width="labelWidth">
+          <el-input v-model="form.deductionPercent" placeholder="请输入扣款百分比"/>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
-        <el-form-item label="金额小数位数" prop="amountDecimal">
-          <el-input v-model="form.amountDecimal" placeholder="请输入 金额小数位数"/>
+      <el-col :span="12"> 
+        <el-form-item label="金额小数位数" prop="amountDecimal" :label-width="labelWidth">
+          <el-input v-model="form.amountDecimal" placeholder="请输入金额小数位数"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="要求用客户系统货单" prop="isClientWaybill">
-          <el-input v-model="form.isClientWaybill" placeholder="请输入 要求用客户系统货单"/>
+        <el-form-item label="要求用客户系统货单" prop="isClientWaybill" :label-width="labelWidth">
+          <el-input v-model="form.isClientWaybill" placeholder="请输入要求用客户系统货单"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="订单要求" prop="orderRequest">
-          <el-input v-model="form.orderRequest" placeholder="请输入 订单要求"/>
+        <el-form-item label="订单要求" prop="orderRequest" :label-width="labelWidth">
+          <el-input v-model="form.orderRequest" placeholder="请输入订单要求"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="订单统计异常期限" prop="orderExceptionDeadline">
-          <el-input v-model="form.orderExceptionDeadline" placeholder="请输入 订单统计异常期限"/>
+        <el-form-item label="订单统计异常期限" prop="orderExceptionDeadline" :label-width="labelWidth">
+          <el-input v-model="form.orderExceptionDeadline" placeholder="请输入订单统计异常期限"/>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="订单性质" prop="orderKind">
-          <el-input v-model="form.orderKind" placeholder="请输入 订单性质"/>
+        <el-form-item label="订单性质" prop="orderKind" :label-width="labelWidth">
+          <el-input v-model="form.orderKind" placeholder="请输入订单性质"/>
         </el-form-item>
       </el-col>
 
     </el-row>
+  </el-form>
   </div>
 </template>
 
@@ -88,7 +90,10 @@ export default {
     form: { type: Object, required: true }
   },
   data() {
-    return {}
+    return {
+      labelWidth:'12em',
+      labelPosition:'regit'
+    }
   },
   methods: {
     init() {