From 4b6cc4215a844c934e02b19a14a332c8605ae733 Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Sat, 12 Oct 2024 18:26:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=BC=E7=AE=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/collect/relCode/operateRelCode.vue  | 125 +++-------
 .../collect/relCode/operateRelCodeSpell.vue   | 230 +++++++-----------
 src/views/collect/relCode/sonRelCode.vue      | 125 +++-------
 src/views/collect/relCode/sonRelCodeSpell.vue | 121 +++------
 4 files changed, 194 insertions(+), 407 deletions(-)

diff --git a/src/views/collect/relCode/operateRelCode.vue b/src/views/collect/relCode/operateRelCode.vue
index e9ad289d..91883cf1 100644
--- a/src/views/collect/relCode/operateRelCode.vue
+++ b/src/views/collect/relCode/operateRelCode.vue
@@ -8,93 +8,41 @@
         label-width="110px"
       >
         <el-card>
-          <el-row style="margin-bottom: 8px">
-            <el-button-group
-              style="display: flex; margin-top: 5px; float: right"
-            >
+          <el-row style="margin-top: 5px; display: flex; align-items: center;">
+            <div style="flex: 1;font-size: 24px">
+              <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+            </div>
+            <div style="margin-left: auto;">
               <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"
                          style="margin-right: 8px;border-radius: 5%;"
               >放弃
               </el-button>
-<!--              <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"-->
-<!--                        style="margin-right: 8px;border-radius: 5%;"-->
-<!--              >保存-->
-<!--              </el-button>-->
               <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
                          style="margin-right: 8px;border-radius: 5%;"
               >提交
               </el-button>
-            </el-button-group>
+            </div>
+
           </el-row>
-          <el-row>
-            <el-col :span="11">
-              <el-form-item prop="cpmctymc" class="query-form-item" label="产品名称:">
-                <el-input
-                  v-model="relFormData.cpmctymc"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packageSpec" class="query-form-item" label="规格型号:">
-                <el-input
-                  v-model="relFormData.packageSpec"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="productCode" class="query-form-item" label="产品编码:">
-                <el-input
-                  v-model="relFormData.productCode"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="cascadeRatio" class="query-form-item" label="包装比例:">
-                <el-input
-                  v-model="relFormData.cascadeRatio"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packLayer" class="query-form-item" label="当前层级:">
-                <el-input
-                  v-model="relFormData.packLayer"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packUnit" class="query-form-item" label="层级单位:">
-                <el-input
-                  v-model="relFormData.packUnit"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="batchNo" class="query-form-item" label="批次号:">
+
+          <el-row style="margin-top: 15px;font-size: 20px">
+            <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+              <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+              <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+              <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+              <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+            </el-descriptions>
+          </el-row>
+
+          <el-row style="margin-top: 10px;">
+          <el-divider></el-divider>
+          </el-row>
+
+          <el-row style="margin-top: 2px">
+            <el-col :span="12">
+              <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
                 <el-input
                   v-model="relFormData.batchNo"
                   auto-complete="off"
@@ -104,35 +52,35 @@
                 ></el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
-              <el-form-item prop="madeDate" class="query-form-item" label="生产日期:">
+            <el-col :span="12">
+              <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
                 <el-date-picker
                   v-model="relFormData.madeDate"
-                  type="datetime"
+                  type="date"
                   placeholder="日期"
                   clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd"
                   style="width: 90%"
                   :disabled="this.parentCode && this.detailList.length > 0"
                 >
                 </el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
-              <el-form-item prop="validateDate" class="query-form-item" label="失效日期:">
+            <el-col :span="12">
+              <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
                 <el-date-picker
                   v-model="relFormData.validateDate"
-                  type="datetime"
+                  type="date"
                   placeholder="日期"
                   clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd"
                   style="width: 90%"
                   :disabled="this.parentCode && this.detailList.length > 0"
                 >
                 </el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
+            <el-col :span="12">
               <el-form-item prop="comment" class="query-form-item" label="备注:">
                 <el-input
                   v-model="relFormData.comment"
@@ -200,9 +148,6 @@
       </el-form>
       <el-tabs type="border-card" style="margin: 15px">
         <el-tab-pane label="关联详情">
-          <div>
-            <span><strong>父级编码：{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
-          </div>
           <div>
               <el-table v-loading="loading"
               :data="detailList"
diff --git a/src/views/collect/relCode/operateRelCodeSpell.vue b/src/views/collect/relCode/operateRelCodeSpell.vue
index 61bd0a22..31ef7727 100644
--- a/src/views/collect/relCode/operateRelCodeSpell.vue
+++ b/src/views/collect/relCode/operateRelCodeSpell.vue
@@ -8,144 +8,95 @@
         label-width="110px"
       >
         <el-card>
-          <el-row style="margin-bottom: 8px">
-            <el-button-group
-              style="display: flex; margin-top: 5px; float: right"
-            >
-              <el-button size="mini" type="primary" @click.native="spellBox()" :loading="submitLoading"
-                        style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailListSpell.length == 0"
-              >拼箱
-              </el-button>
-              <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"
-                         style="margin-right: 8px;border-radius: 5%;"
-              >放弃
-              </el-button>
-
-              <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
-                         style="margin-right: 8px;border-radius: 5%;"
-              >提交
-              </el-button>
-            </el-button-group>
-          </el-row>
-          <el-row>
-            <el-col :span="11">
-              <el-form-item prop="cpmctymc" class="query-form-item" label="产品名称:">
-                <el-input
-                  v-model="relFormData.cpmctymc"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packageSpec" class="query-form-item" label="规格型号:">
-                <el-input
-                  v-model="relFormData.packageSpec"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="productCode" class="query-form-item" label="产品编码:">
-                <el-input
-                  v-model="relFormData.productCode"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="cascadeRatio" class="query-form-item" label="包装比例:">
-                <el-input
-                  v-model="relFormData.cascadeRatio"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packLayer" class="query-form-item" label="当前层级:">
-                <el-input
-                  v-model="relFormData.packLayer"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packUnit" class="query-form-item" label="层级单位:">
-                <el-input
-                  v-model="relFormData.packUnit"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="batchNo" class="query-form-item" label="批次号:">
-                <el-input
-                  v-model="relFormData.batchNo"
-                  auto-complete="off"
-                  style="width: 90%"
-                  clearable
-                  :disabled="this.inputDisabled"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="madeDate" class="query-form-item" label="生产日期:">
-                <el-date-picker
-                  v-model="relFormData.madeDate"
-                  type="datetime"
-                  placeholder="日期"
-                  clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  style="width: 90%"
-                  :disabled="this.inputDisabled"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="validateDate" class="query-form-item" label="失效日期:">
-                <el-date-picker
-                  v-model="relFormData.validateDate"
-                  type="datetime"
-                  placeholder="日期"
-                  clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  style="width: 90%"
-                  :disabled="this.inputDisabled"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="comment" class="query-form-item" label="备注:">
-                <el-input
-                  v-model="relFormData.comment"
-                  auto-complete="off"
-                  clearable
-                  style="width: 90%"
-                  placeholder="请输入备注"
-                  :disabled="this.inputDisabled"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+            <el-row style="margin-top: 5px; display: flex; align-items: center;">
+              <div style="flex: 1;font-size: 24px">
+                <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+                <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+                <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+              </div>
+              <div style="margin-left: auto;">
+                <el-button size="mini" type="primary" @click.native="spellBox()" :loading="submitLoading"
+                           style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailListSpell.length == 0"
+                >拼箱
+                </el-button>
+                <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"
+                           style="margin-right: 8px;border-radius: 5%;"
+                >放弃
+                </el-button>
+                <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
+                           style="margin-right: 8px;border-radius: 5%;"
+                >提交
+                </el-button>
+              </div>
+
+            </el-row>
+
+            <el-row style="margin-top: 15px;font-size: 20px">
+              <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+                <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+                <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+                <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+                <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+              </el-descriptions>
+            </el-row>
+
+            <el-row style="margin-top: 10px;">
+              <el-divider></el-divider>
+            </el-row>
+
+            <el-row style="margin-top: 2px">
+              <el-col :span="12">
+                <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
+                  <el-input
+                    v-model="relFormData.batchNo"
+                    auto-complete="off"
+                    style="width: 90%"
+                    :disabled="this.parentCode && this.detailList.length > 0"
+                    clearable
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
+                  <el-date-picker
+                    v-model="relFormData.madeDate"
+                    type="date"
+                    placeholder="日期"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    style="width: 90%"
+                    :disabled="this.parentCode && this.detailList.length > 0"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
+                  <el-date-picker
+                    v-model="relFormData.validateDate"
+                    type="date"
+                    placeholder="日期"
+                    clearable
+                    value-format="yyyy-MM-dd"
+                    style="width: 90%"
+                    :disabled="this.parentCode && this.detailList.length > 0"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item prop="comment" class="query-form-item" label="备注:">
+                  <el-input
+                    v-model="relFormData.comment"
+                    auto-complete="off"
+                    clearable
+                    style="width: 90%"
+                    placeholder="请输入备注"
+                    :disabled="this.parentCode && this.detailList.length > 0"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
           <el-divider></el-divider>
           <el-row>
             <el-col :span="18">
@@ -201,9 +152,6 @@
       </el-form>
       <el-tabs type="border-card" style="margin: 15px">
         <el-tab-pane label="关联详情">
-          <div>
-            <span><strong>父级编码：{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
-          </div>
           <div>
               <el-table v-loading="loading"
               :data="detailList"
diff --git a/src/views/collect/relCode/sonRelCode.vue b/src/views/collect/relCode/sonRelCode.vue
index 84a52b9f..8eae0570 100644
--- a/src/views/collect/relCode/sonRelCode.vue
+++ b/src/views/collect/relCode/sonRelCode.vue
@@ -8,93 +8,41 @@
         label-width="110px"
       >
         <el-card>
-          <el-row style="margin-bottom: 8px">
-            <el-button-group
-              style="display: flex; margin-top: 5px; float: right"
-            >
+          <el-row style="margin-top: 5px; display: flex; align-items: center;">
+            <div style="flex: 1;font-size: 24px">
+              <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+            </div>
+            <div style="margin-left: auto;">
               <el-button size="mini" type="primary" @click.native="giveUp()" :loading="submitLoading"
                          style="margin-right: 8px;border-radius: 5%;"
               >放弃
               </el-button>
-<!--              <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"-->
-<!--                         style="margin-right: 8px;border-radius: 5%;"-->
-<!--              >保存-->
-<!--              </el-button>-->
               <el-button size="mini" type="primary" @click.native="submit()" :loading="submitLoading"
                          style="margin-right: 8px;border-radius: 5%;"
               >提交
               </el-button>
-            </el-button-group>
+            </div>
+
           </el-row>
-          <el-row>
-            <el-col :span="11">
-              <el-form-item prop="cpmctymc" class="query-form-item" label="产品名称:">
-                <el-input
-                  v-model="relFormData.cpmctymc"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packageSpec" class="query-form-item" label="规格型号:">
-                <el-input
-                  v-model="relFormData.packageSpec"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="productCode" class="query-form-item" label="产品编码:">
-                <el-input
-                  v-model="relFormData.productCode"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="cascadeRatio" class="query-form-item" label="包装比例:">
-                <el-input
-                  v-model="relFormData.cascadeRatio"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packLayer" class="query-form-item" label="当前层级:">
-                <el-input
-                  v-model="relFormData.packLayer"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packUnit" class="query-form-item" label="层级单位:">
-                <el-input
-                  v-model="relFormData.packUnit"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="batchNo" class="query-form-item" label="批次号:">
+
+          <el-row style="margin-top: 15px;font-size: 20px">
+            <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+              <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+              <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+              <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+              <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+            </el-descriptions>
+          </el-row>
+
+          <el-row style="margin-top: 10px;">
+            <el-divider></el-divider>
+          </el-row>
+
+          <el-row style="margin-top: 2px">
+            <el-col :span="12">
+              <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
                 <el-input
                   v-model="relFormData.batchNo"
                   auto-complete="off"
@@ -104,35 +52,35 @@
                 ></el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
-              <el-form-item prop="madeDate" class="query-form-item" label="生产日期:">
+            <el-col :span="12">
+              <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
                 <el-date-picker
                   v-model="relFormData.madeDate"
-                  type="datetime"
+                  type="date"
                   placeholder="日期"
                   clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd"
                   style="width: 90%"
                   :disabled="true"
                 >
                 </el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
-              <el-form-item prop="validateDate" class="query-form-item" label="失效日期:">
+            <el-col :span="12">
+              <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
                 <el-date-picker
                   v-model="relFormData.validateDate"
-                  type="datetime"
+                  type="date"
                   placeholder="日期"
                   clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd"
                   style="width: 90%"
                   :disabled="true"
                 >
                 </el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
+            <el-col :span="12">
               <el-form-item prop="comment" class="query-form-item" label="备注:">
                 <el-input
                   v-model="relFormData.comment"
@@ -200,9 +148,6 @@
       </el-form>
       <el-tabs type="border-card" style="margin: 15px">
         <el-tab-pane label="关联详情">
-          <div>
-            <span><strong>父级编码：{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
-          </div>
           <div>
               <el-table v-loading="loading"
               :data="detailList"
diff --git a/src/views/collect/relCode/sonRelCodeSpell.vue b/src/views/collect/relCode/sonRelCodeSpell.vue
index 5a971be5..06c5035d 100644
--- a/src/views/collect/relCode/sonRelCodeSpell.vue
+++ b/src/views/collect/relCode/sonRelCodeSpell.vue
@@ -8,10 +8,13 @@
         label-width="110px"
       >
         <el-card>
-          <el-row style="margin-bottom: 8px">
-            <el-button-group
-              style="display: flex; margin-top: 5px; float: right"
-            >
+          <el-row style="margin-top: 5px; display: flex; align-items: center;">
+            <div style="flex: 1;font-size: 24px">
+              <span v-if="parentCode"><strong>{{ relFormData.packUnit }}</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ relFormData.packLayer }}层级</strong></span>
+              <span v-if="parentCode" style="margin-left: 30px"><strong>{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
+            </div>
+            <div style="margin-left: auto;">
               <el-button size="mini" type="primary" @click.native="spellBox()" :loading="submitLoading"
                          style="margin-right: 8px;border-radius: 5%;" :disabled="this.detailListSpell.length == 0"
               >拼箱
@@ -24,77 +27,26 @@
                          style="margin-right: 8px;border-radius: 5%;"
               >提交
               </el-button>
-            </el-button-group>
+            </div>
+
           </el-row>
-          <el-row>
-            <el-col :span="11">
-              <el-form-item prop="cpmctymc" class="query-form-item" label="产品名称:">
-                <el-input
-                  v-model="relFormData.cpmctymc"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packageSpec" class="query-form-item" label="规格型号:">
-                <el-input
-                  v-model="relFormData.packageSpec"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="productCode" class="query-form-item" label="产品编码:">
-                <el-input
-                  v-model="relFormData.productCode"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="cascadeRatio" class="query-form-item" label="包装比例:">
-                <el-input
-                  v-model="relFormData.cascadeRatio"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packLayer" class="query-form-item" label="当前层级:">
-                <el-input
-                  v-model="relFormData.packLayer"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="packUnit" class="query-form-item" label="层级单位:">
-                <el-input
-                  v-model="relFormData.packUnit"
-                  auto-complete="off"
-                  style="width: 90%"
-                  :disabled="true"
-                  clearable
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="11">
-              <el-form-item prop="batchNo" class="query-form-item" label="批次号:">
+
+          <el-row style="margin-top: 15px;font-size: 20px">
+            <el-descriptions :column="4" border label-style="width:75px"  style="margin-top: 15px;font-size: 20px">
+              <el-descriptions-item label="产品名称">{{ relFormData.cpmctymc }}</el-descriptions-item>
+              <el-descriptions-item label="规格型号">{{ relFormData.packageSpec }}</el-descriptions-item>
+              <el-descriptions-item label="产品编码">{{ relFormData.productCode }}</el-descriptions-item>
+              <el-descriptions-item label="包装比例">{{ relFormData.cascadeRatio }}</el-descriptions-item>
+            </el-descriptions>
+          </el-row>
+
+          <el-row style="margin-top: 10px;">
+            <el-divider></el-divider>
+          </el-row>
+
+          <el-row style="margin-top: 2px">
+            <el-col :span="12">
+              <el-form-item prop="batchNo"  class="query-form-item" label="批次号:">
                 <el-input
                   v-model="relFormData.batchNo"
                   auto-complete="off"
@@ -104,35 +56,35 @@
                 ></el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
-              <el-form-item prop="madeDate" class="query-form-item" label="生产日期:">
+            <el-col :span="12">
+              <el-form-item prop="madeDate"  class="query-form-item" label="生产日期:">
                 <el-date-picker
                   v-model="relFormData.madeDate"
-                  type="datetime"
+                  type="date"
                   placeholder="日期"
                   clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd"
                   style="width: 90%"
                   :disabled="this.inputDisabled"
                 >
                 </el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
-              <el-form-item prop="validateDate" class="query-form-item" label="失效日期:">
+            <el-col :span="12">
+              <el-form-item prop="validateDate" class="query-form-item"  label="失效日期:">
                 <el-date-picker
                   v-model="relFormData.validateDate"
-                  type="datetime"
+                  type="date"
                   placeholder="日期"
                   clearable
-                  value-format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd"
                   style="width: 90%"
                   :disabled="this.inputDisabled"
                 >
                 </el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11">
+            <el-col :span="12">
               <el-form-item prop="comment" class="query-form-item" label="备注:">
                 <el-input
                   v-model="relFormData.comment"
@@ -200,9 +152,6 @@
       </el-form>
       <el-tabs type="border-card" style="margin: 15px">
         <el-tab-pane label="关联详情">
-          <div>
-            <span><strong>父级编码：{{ parentCode || '暂未录入'}}</strong> <strong>  (<span style="color: #FF0000;">{{ syxjsl || 0}}</span>/<span >{{ bhxjsl || 0}}</span>)</strong></span>
-          </div>
           <div>
               <el-table v-loading="loading"
               :data="detailList"