diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum

diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum
diff --git a/src/components/mycomponent/dialog/snCodeRulsDialog.vue b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
index ae82b98..dc6cf3f 100644
--- a/src/components/mycomponent/dialog/snCodeRulsDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
@@ -1,10 +1,9 @@
 <!--SN码规则新增弹窗-->
 <template>
-  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
+  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
     <div class="snCodeRulsDialog ">
       <div class="header">
-        <red-star />
-        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
+        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
       </div>
       <div class="content">
         <div class="contentHeader contentItem">
@@ -18,15 +17,16 @@
         <!-- snCodeCofig -->
 
         <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
-          <div class="selectIcon">
+          <div style="line-height:42px; padding: 0px 10px">
             <el-radio v-model="select" :label="index" size="medium ">
               {{ '' }}
             </el-radio>
           </div>
           <code-field
-            :rule-list="item"
-            :all-info="[...addInfo.ruleList]"
+            :code-item="item"
             :index="index"
+            :pre-list="preItemList"
+            :relation-show="index>0"
             @changeRuleList="changeRuleList"
           />
         </div>
@@ -45,13 +45,11 @@
 
 <script>
 import InputVue from '../input/inputVue.vue'
-import DialogHeader from './dialogHeader.vue'
 import codeField from '../snCode/codeField.vue'
 import { S_add } from '../../../api/product/snCodeRuls'
 
 export default {
   components: {
-    DialogHeader,
     InputVue,
     codeField
 
@@ -66,11 +64,11 @@
     return {
       select: -1,
       addInfo: {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
-            snDigitName: ' ',
+            snDigit: 1,
+            snDigitName: '',
             snDigitOrder: '',
             checked: false,
             itemList: [
@@ -83,39 +81,80 @@
             ]
           }
         ]
+      } // 表单对象
+    }
+  },
+  computed: {
+    preItemList() {
+      const list = this.addInfo.ruleList.map((item, index) => {
+        return {
+          name: item.snDigitName,
+          value: index,
+          itemList: item.itemList
+        }
+      })
+      return list
+    }, // 所有项列表
+    codeLength() {
+      let length = 0
+      for (const item of this.addInfo.ruleList) {
+        length += item.snDigit
       }
+      return length
     }
   },
   methods: {
+    validateForm() {
+      // TODO: 校验表单数据
+      let flag = true
+      let message = ''
+      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
+        const rule = this.addInfo.ruleList[rindex]
+        if (rule.snDigitName === '') {
+          message += `第${rindex + 1}项固定码中，名称不得为空！`
+          flag = false
+          break
+        }
+        for (const code of rule.itemList) {
+          if (code.digitItem === '' || code.digitItemIllustration === '') {
+            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
+            flag = false
+            break
+          }
+          if (rule.checked && code.digitPre == '') {
+            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
+            flag = false
+            break
+          }
+          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
+            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
+            flag = false
+            break
+          }
+        }
+        if (!flag) {
+          break
+        }
+      }
+      if (!flag) {
+        this.$message.warning(message)
+      }
+      return flag
+    },
     save() {
-      let CodeNumber = 0
-      this.addInfo.ruleList.forEach(item => {
-        CodeNumber += item.snDigit
-        console.log(CodeNumber, this.addInfo.ruleList)
-      })
-      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
-      if (typeof (this.addInfo.snQuantity) === 'string') {
-        this.$message.error('请输入正确SN码（固定标识）个数')
-        return
-      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
-        this.$message.error('位数相加不等于SN码个数请调整')
-        return
-      } else if (this.addInfo.snQuantity == 0) {
-        this.$message.error('正确SN码（固定标识）个数不能为零')
-        return
-      } else {
+      if (this.validateForm()) {
         // 数据正确后开始对数据进行数据处理
         const subData = this.addInfo.ruleList.map((item, index) => {
           let aryTemp = null
-          // 1.处理前编码项
-          if (!item.checked) {
-            item.itemList = item.itemList.map(littleItem => {
-              return {
-                digitItem: littleItem.digitItem,
-                digitItemIllustration: littleItem.digitItemIllustration
-              }
-            })
-          }
+          // // 1.处理前编码项
+          // if (!item.checked) {
+          //   item.itemList = item.itemList.map(littleItem => {
+          //     return {
+          //       digitItem: littleItem.digitItem,
+          //       digitItemIllustration: littleItem.digitItemIllustration
+          //     }
+          //   })
+          // }
           //  去除checked参数
           aryTemp = {
             snDigit: item.snDigit,
@@ -127,25 +166,23 @@
         })
         //  提交数据
         S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
-          if (resp != '') {
-            this.$message.success('添加成功')
-            this.close()
-            this.reset()
-          }
+          this.$message.success('添加成功')
+          this.close()
+          this.reset()
+        }).catch(_ => {
+          console.log(_)
         })
       }
-
-      // if(CodeNumber == 0 )
     },
     close() {
       this.$emit('close')
     },
     reset() {
       this.addInfo = {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
+            snDigit: 1,
             snDigitName: ' ',
             snDigitOrder: '',
             checked: false,
@@ -163,22 +200,22 @@
     },
     addCode() {
       this.addInfo.ruleList.push({
-        snDigit: 0,
-        snDigitName: '',
-        checked: false,
-        snDigitOrder: '',
+        snDigit: 1, // 位数
+        snDigitName: '', // 名称
+        checked: false, // 是否关联前项
+        snDigitOrder: '', // 顺序
         itemList: [
           {
-            digitItem: '',
-            digitPre: '',
-            digitItemIllustration: ''
+            digitItem: '', // 编码项
+            digitPre: '', // 前项编码
+            digitItemIllustration: '' // 编码说明
           }
-
         ]
       })
+      this.addInfo.snQuantity += 1 //
     },
     removeCode() {
-      if (this.select == -1) {
+      if (this.select === -1) {
         this.$message({
           message: '请选择删除项',
           type: 'error'
@@ -203,40 +240,33 @@
 
 <style lang="scss" scoped>
 .snCodeRulsDialog {
-  width: 1500px;
-
   .bgred {
     background: red;
     border: red;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .content {
-    border: 1px solid #666;
-    max-height: 500px;
+    width: 100%;
+    border: 1px solid #f0f0f0;
     overflow: auto;
-
+    border-radius: 10px;
+    margin-top: 20px ;
     .contentItem {
       padding: 10px;
-      border-bottom: 1px solid #999;
+      border-bottom: 1px solid #f0f0f0;
     }
-
     .item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: 10px;
     }
-
     .contentHeader {
       text-align: right;
     }
-
   }
-
   .btnBox {
     padding: 30px;
     box-sizing: border-box;

diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum
diff --git a/src/components/mycomponent/dialog/snCodeRulsDialog.vue b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
index ae82b98..dc6cf3f 100644
--- a/src/components/mycomponent/dialog/snCodeRulsDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
@@ -1,10 +1,9 @@
 <!--SN码规则新增弹窗-->
 <template>
-  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
+  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
     <div class="snCodeRulsDialog ">
       <div class="header">
-        <red-star />
-        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
+        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
       </div>
       <div class="content">
         <div class="contentHeader contentItem">
@@ -18,15 +17,16 @@
         <!-- snCodeCofig -->
 
         <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
-          <div class="selectIcon">
+          <div style="line-height:42px; padding: 0px 10px">
             <el-radio v-model="select" :label="index" size="medium ">
               {{ '' }}
             </el-radio>
           </div>
           <code-field
-            :rule-list="item"
-            :all-info="[...addInfo.ruleList]"
+            :code-item="item"
             :index="index"
+            :pre-list="preItemList"
+            :relation-show="index>0"
             @changeRuleList="changeRuleList"
           />
         </div>
@@ -45,13 +45,11 @@
 
 <script>
 import InputVue from '../input/inputVue.vue'
-import DialogHeader from './dialogHeader.vue'
 import codeField from '../snCode/codeField.vue'
 import { S_add } from '../../../api/product/snCodeRuls'
 
 export default {
   components: {
-    DialogHeader,
     InputVue,
     codeField
 
@@ -66,11 +64,11 @@
     return {
       select: -1,
       addInfo: {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
-            snDigitName: ' ',
+            snDigit: 1,
+            snDigitName: '',
             snDigitOrder: '',
             checked: false,
             itemList: [
@@ -83,39 +81,80 @@
             ]
           }
         ]
+      } // 表单对象
+    }
+  },
+  computed: {
+    preItemList() {
+      const list = this.addInfo.ruleList.map((item, index) => {
+        return {
+          name: item.snDigitName,
+          value: index,
+          itemList: item.itemList
+        }
+      })
+      return list
+    }, // 所有项列表
+    codeLength() {
+      let length = 0
+      for (const item of this.addInfo.ruleList) {
+        length += item.snDigit
       }
+      return length
     }
   },
   methods: {
+    validateForm() {
+      // TODO: 校验表单数据
+      let flag = true
+      let message = ''
+      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
+        const rule = this.addInfo.ruleList[rindex]
+        if (rule.snDigitName === '') {
+          message += `第${rindex + 1}项固定码中，名称不得为空！`
+          flag = false
+          break
+        }
+        for (const code of rule.itemList) {
+          if (code.digitItem === '' || code.digitItemIllustration === '') {
+            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
+            flag = false
+            break
+          }
+          if (rule.checked && code.digitPre == '') {
+            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
+            flag = false
+            break
+          }
+          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
+            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
+            flag = false
+            break
+          }
+        }
+        if (!flag) {
+          break
+        }
+      }
+      if (!flag) {
+        this.$message.warning(message)
+      }
+      return flag
+    },
     save() {
-      let CodeNumber = 0
-      this.addInfo.ruleList.forEach(item => {
-        CodeNumber += item.snDigit
-        console.log(CodeNumber, this.addInfo.ruleList)
-      })
-      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
-      if (typeof (this.addInfo.snQuantity) === 'string') {
-        this.$message.error('请输入正确SN码（固定标识）个数')
-        return
-      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
-        this.$message.error('位数相加不等于SN码个数请调整')
-        return
-      } else if (this.addInfo.snQuantity == 0) {
-        this.$message.error('正确SN码（固定标识）个数不能为零')
-        return
-      } else {
+      if (this.validateForm()) {
         // 数据正确后开始对数据进行数据处理
         const subData = this.addInfo.ruleList.map((item, index) => {
           let aryTemp = null
-          // 1.处理前编码项
-          if (!item.checked) {
-            item.itemList = item.itemList.map(littleItem => {
-              return {
-                digitItem: littleItem.digitItem,
-                digitItemIllustration: littleItem.digitItemIllustration
-              }
-            })
-          }
+          // // 1.处理前编码项
+          // if (!item.checked) {
+          //   item.itemList = item.itemList.map(littleItem => {
+          //     return {
+          //       digitItem: littleItem.digitItem,
+          //       digitItemIllustration: littleItem.digitItemIllustration
+          //     }
+          //   })
+          // }
           //  去除checked参数
           aryTemp = {
             snDigit: item.snDigit,
@@ -127,25 +166,23 @@
         })
         //  提交数据
         S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
-          if (resp != '') {
-            this.$message.success('添加成功')
-            this.close()
-            this.reset()
-          }
+          this.$message.success('添加成功')
+          this.close()
+          this.reset()
+        }).catch(_ => {
+          console.log(_)
         })
       }
-
-      // if(CodeNumber == 0 )
     },
     close() {
       this.$emit('close')
     },
     reset() {
       this.addInfo = {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
+            snDigit: 1,
             snDigitName: ' ',
             snDigitOrder: '',
             checked: false,
@@ -163,22 +200,22 @@
     },
     addCode() {
       this.addInfo.ruleList.push({
-        snDigit: 0,
-        snDigitName: '',
-        checked: false,
-        snDigitOrder: '',
+        snDigit: 1, // 位数
+        snDigitName: '', // 名称
+        checked: false, // 是否关联前项
+        snDigitOrder: '', // 顺序
         itemList: [
           {
-            digitItem: '',
-            digitPre: '',
-            digitItemIllustration: ''
+            digitItem: '', // 编码项
+            digitPre: '', // 前项编码
+            digitItemIllustration: '' // 编码说明
           }
-
         ]
       })
+      this.addInfo.snQuantity += 1 //
     },
     removeCode() {
-      if (this.select == -1) {
+      if (this.select === -1) {
         this.$message({
           message: '请选择删除项',
           type: 'error'
@@ -203,40 +240,33 @@
 
 <style lang="scss" scoped>
 .snCodeRulsDialog {
-  width: 1500px;
-
   .bgred {
     background: red;
     border: red;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .content {
-    border: 1px solid #666;
-    max-height: 500px;
+    width: 100%;
+    border: 1px solid #f0f0f0;
     overflow: auto;
-
+    border-radius: 10px;
+    margin-top: 20px ;
     .contentItem {
       padding: 10px;
-      border-bottom: 1px solid #999;
+      border-bottom: 1px solid #f0f0f0;
     }
-
     .item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: 10px;
     }
-
     .contentHeader {
       text-align: right;
     }
-
   }
-
   .btnBox {
     padding: 30px;
     box-sizing: border-box;
diff --git a/src/components/mycomponent/input/inputVue.vue b/src/components/mycomponent/input/inputVue.vue
index 56a50db..8a50163 100644
--- a/src/components/mycomponent/input/inputVue.vue
+++ b/src/components/mycomponent/input/inputVue.vue
@@ -1,28 +1,35 @@
 <!--输入组件-->
 <template>
   <div class="inputBox" :style="{width:boxWidth}">
+    <red-star v-if="redStar" />
     <div style="white-space: nowrap;" :class="{'ismargin':title}">
       {{ title }}{{ title?'：':'' }}
     </div>
     <!--可以自定义 输入框  -->
     <slot>
-      <el-input v-model="vls" :placeholder="placeholder" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
+      <el-input v-model="vls" :placeholder="placeholder" :size="size" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
     </slot>
   </div>
 </template>
 
 <script>
+import RedStar from '../redStar.vue'
 export default {
+  components: {
+    RedStar
+  },
   model: {
     prop: 'input',
     event: 'changeinput'
   },
   props: {
+    redStar: false,
     title: '',
     width: '',
     placeholder: '',
     boxWidth: '',
     input: '',
+    size: '',
     disabled: false
   },
   data() {
@@ -56,7 +63,7 @@
 .inputBox {
   display: flex;
   align-items: center;
-  margin: 5PX 10PX 5px 0;
+  margin: 5px 10px 5px 0;
   justify-content: space-between;
 }
 

diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum
diff --git a/src/components/mycomponent/dialog/snCodeRulsDialog.vue b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
index ae82b98..dc6cf3f 100644
--- a/src/components/mycomponent/dialog/snCodeRulsDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
@@ -1,10 +1,9 @@
 <!--SN码规则新增弹窗-->
 <template>
-  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
+  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
     <div class="snCodeRulsDialog ">
       <div class="header">
-        <red-star />
-        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
+        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
       </div>
       <div class="content">
         <div class="contentHeader contentItem">
@@ -18,15 +17,16 @@
         <!-- snCodeCofig -->
 
         <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
-          <div class="selectIcon">
+          <div style="line-height:42px; padding: 0px 10px">
             <el-radio v-model="select" :label="index" size="medium ">
               {{ '' }}
             </el-radio>
           </div>
           <code-field
-            :rule-list="item"
-            :all-info="[...addInfo.ruleList]"
+            :code-item="item"
             :index="index"
+            :pre-list="preItemList"
+            :relation-show="index>0"
             @changeRuleList="changeRuleList"
           />
         </div>
@@ -45,13 +45,11 @@
 
 <script>
 import InputVue from '../input/inputVue.vue'
-import DialogHeader from './dialogHeader.vue'
 import codeField from '../snCode/codeField.vue'
 import { S_add } from '../../../api/product/snCodeRuls'
 
 export default {
   components: {
-    DialogHeader,
     InputVue,
     codeField
 
@@ -66,11 +64,11 @@
     return {
       select: -1,
       addInfo: {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
-            snDigitName: ' ',
+            snDigit: 1,
+            snDigitName: '',
             snDigitOrder: '',
             checked: false,
             itemList: [
@@ -83,39 +81,80 @@
             ]
           }
         ]
+      } // 表单对象
+    }
+  },
+  computed: {
+    preItemList() {
+      const list = this.addInfo.ruleList.map((item, index) => {
+        return {
+          name: item.snDigitName,
+          value: index,
+          itemList: item.itemList
+        }
+      })
+      return list
+    }, // 所有项列表
+    codeLength() {
+      let length = 0
+      for (const item of this.addInfo.ruleList) {
+        length += item.snDigit
       }
+      return length
     }
   },
   methods: {
+    validateForm() {
+      // TODO: 校验表单数据
+      let flag = true
+      let message = ''
+      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
+        const rule = this.addInfo.ruleList[rindex]
+        if (rule.snDigitName === '') {
+          message += `第${rindex + 1}项固定码中，名称不得为空！`
+          flag = false
+          break
+        }
+        for (const code of rule.itemList) {
+          if (code.digitItem === '' || code.digitItemIllustration === '') {
+            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
+            flag = false
+            break
+          }
+          if (rule.checked && code.digitPre == '') {
+            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
+            flag = false
+            break
+          }
+          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
+            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
+            flag = false
+            break
+          }
+        }
+        if (!flag) {
+          break
+        }
+      }
+      if (!flag) {
+        this.$message.warning(message)
+      }
+      return flag
+    },
     save() {
-      let CodeNumber = 0
-      this.addInfo.ruleList.forEach(item => {
-        CodeNumber += item.snDigit
-        console.log(CodeNumber, this.addInfo.ruleList)
-      })
-      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
-      if (typeof (this.addInfo.snQuantity) === 'string') {
-        this.$message.error('请输入正确SN码（固定标识）个数')
-        return
-      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
-        this.$message.error('位数相加不等于SN码个数请调整')
-        return
-      } else if (this.addInfo.snQuantity == 0) {
-        this.$message.error('正确SN码（固定标识）个数不能为零')
-        return
-      } else {
+      if (this.validateForm()) {
         // 数据正确后开始对数据进行数据处理
         const subData = this.addInfo.ruleList.map((item, index) => {
           let aryTemp = null
-          // 1.处理前编码项
-          if (!item.checked) {
-            item.itemList = item.itemList.map(littleItem => {
-              return {
-                digitItem: littleItem.digitItem,
-                digitItemIllustration: littleItem.digitItemIllustration
-              }
-            })
-          }
+          // // 1.处理前编码项
+          // if (!item.checked) {
+          //   item.itemList = item.itemList.map(littleItem => {
+          //     return {
+          //       digitItem: littleItem.digitItem,
+          //       digitItemIllustration: littleItem.digitItemIllustration
+          //     }
+          //   })
+          // }
           //  去除checked参数
           aryTemp = {
             snDigit: item.snDigit,
@@ -127,25 +166,23 @@
         })
         //  提交数据
         S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
-          if (resp != '') {
-            this.$message.success('添加成功')
-            this.close()
-            this.reset()
-          }
+          this.$message.success('添加成功')
+          this.close()
+          this.reset()
+        }).catch(_ => {
+          console.log(_)
         })
       }
-
-      // if(CodeNumber == 0 )
     },
     close() {
       this.$emit('close')
     },
     reset() {
       this.addInfo = {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
+            snDigit: 1,
             snDigitName: ' ',
             snDigitOrder: '',
             checked: false,
@@ -163,22 +200,22 @@
     },
     addCode() {
       this.addInfo.ruleList.push({
-        snDigit: 0,
-        snDigitName: '',
-        checked: false,
-        snDigitOrder: '',
+        snDigit: 1, // 位数
+        snDigitName: '', // 名称
+        checked: false, // 是否关联前项
+        snDigitOrder: '', // 顺序
         itemList: [
           {
-            digitItem: '',
-            digitPre: '',
-            digitItemIllustration: ''
+            digitItem: '', // 编码项
+            digitPre: '', // 前项编码
+            digitItemIllustration: '' // 编码说明
           }
-
         ]
       })
+      this.addInfo.snQuantity += 1 //
     },
     removeCode() {
-      if (this.select == -1) {
+      if (this.select === -1) {
         this.$message({
           message: '请选择删除项',
           type: 'error'
@@ -203,40 +240,33 @@
 
 <style lang="scss" scoped>
 .snCodeRulsDialog {
-  width: 1500px;
-
   .bgred {
     background: red;
     border: red;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .content {
-    border: 1px solid #666;
-    max-height: 500px;
+    width: 100%;
+    border: 1px solid #f0f0f0;
     overflow: auto;
-
+    border-radius: 10px;
+    margin-top: 20px ;
     .contentItem {
       padding: 10px;
-      border-bottom: 1px solid #999;
+      border-bottom: 1px solid #f0f0f0;
     }
-
     .item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: 10px;
     }
-
     .contentHeader {
       text-align: right;
     }
-
   }
-
   .btnBox {
     padding: 30px;
     box-sizing: border-box;
diff --git a/src/components/mycomponent/input/inputVue.vue b/src/components/mycomponent/input/inputVue.vue
index 56a50db..8a50163 100644
--- a/src/components/mycomponent/input/inputVue.vue
+++ b/src/components/mycomponent/input/inputVue.vue
@@ -1,28 +1,35 @@
 <!--输入组件-->
 <template>
   <div class="inputBox" :style="{width:boxWidth}">
+    <red-star v-if="redStar" />
     <div style="white-space: nowrap;" :class="{'ismargin':title}">
       {{ title }}{{ title?'：':'' }}
     </div>
     <!--可以自定义 输入框  -->
     <slot>
-      <el-input v-model="vls" :placeholder="placeholder" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
+      <el-input v-model="vls" :placeholder="placeholder" :size="size" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
     </slot>
   </div>
 </template>
 
 <script>
+import RedStar from '../redStar.vue'
 export default {
+  components: {
+    RedStar
+  },
   model: {
     prop: 'input',
     event: 'changeinput'
   },
   props: {
+    redStar: false,
     title: '',
     width: '',
     placeholder: '',
     boxWidth: '',
     input: '',
+    size: '',
     disabled: false
   },
   data() {
@@ -56,7 +63,7 @@
 .inputBox {
   display: flex;
   align-items: center;
-  margin: 5PX 10PX 5px 0;
+  margin: 5px 10px 5px 0;
   justify-content: space-between;
 }
 
diff --git a/src/components/mycomponent/snCode/codeField.vue b/src/components/mycomponent/snCode/codeField.vue
index 158f84c..848f023 100644
--- a/src/components/mycomponent/snCode/codeField.vue
+++ b/src/components/mycomponent/snCode/codeField.vue
@@ -4,42 +4,41 @@
     <div class="inputContent">
       <div class="inputBox">
         <red-star />
-        <input-vue v-model.number="itemInfo.snDigit" title="位数" width="150px" />
+        <input-vue v-model.number="itemInfo.snDigit" title="位数" size="small" width="80px" />
       </div>
     </div>
     <div class="inputContent">
       <div class="inputBox">
-        <red-star />
-        <input-vue v-model="itemInfo.snDigitName" title="名称" />
+        <input-vue v-model="itemInfo.snDigitName" title="名称" size="small" :red-star="true" />
       </div>
     </div>
     <div class="Content_content">
-      <div class="left_title">
-        <red-star />编码规则：
-      </div>
+      <div class="left_title" />
       <div class="right_content">
         <div class="title">
-          <div class="title_item">
-            <input-vue>
-              <el-checkbox v-model="itemInfo.checked">
+          <div class="inputBox">
+            <input-vue title="编码规则" width="150px" :red-star="true">
+              <el-checkbox v-model="itemInfo.checked" :disabled="!relationShow">
                 是否关联前一项
               </el-checkbox>
             </input-vue>
           </div>
-          <div class="title_item">
-            <input-vue title="关联项名称">
+          <div class="title_item" style="margin-left: 20px">
+            <input-vue title="关联项名称" box-width="200px" width="100px">
               <el-select
-                v-model="relevanceName"
+                v-model="relevance"
+                value-key="value"
                 filterable
                 placeholder="请选择"
-                style="width: 130px"
-                @change="changitemInfo"
+                style="width: 150px; margin-left: 10px"
+                size="small"
+                :disabled="!relationShow||!itemInfo.checked"
               >
                 <el-option
                   v-for="(item,index) in NameList"
                   :key="index"
-                  :label="item.snDigitName"
-                  :value="item.snDigitName"
+                  :label="item.name"
+                  :value="item"
                 />
               </el-select>
             </input-vue>
@@ -51,7 +50,7 @@
         </div>
         <div class="right_content_conetent">
           <div v-for="(item,index) in itemInfo.itemList" :key="index">
-            <code-item v-model=" itemInfo.itemList[index]" :checked="checked" :code-list="codelist" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
+            <code-item v-model=" itemInfo.itemList[index]" :checked="itemInfo.checked" :code-list="relevance?relevance.itemList:[]" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
           </div>
         </div>
       </div>
@@ -66,130 +65,83 @@
 import codeItem from './codeItem.vue'
 export default {
   components: { codeItem, InputVue, RedStar },
-  props: ['ruleList', 'allInfo', 'index'],
+  props: {
+    preList: {
+      type: Array,
+      default: () => {
+        return []
+      } // 前项下拉选择列表
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    codeItem: {
+      type: Object,
+      required: true
+    }, // 当前编码对象
+    relationShow: {
+      type: Boolean,
+      default: false
+    }// 是否可点击关联项
+  },
   data() {
     return {
       checked: false,
       itemInfo: {},
-      relevanceName: '',
-      codelist: '',
+      relevance: null,
       codeItemInfo: ''// 编码详情
     }
   },
   computed: {
-    NameList() {
-      // console.log(this.allInfo[0].itemList[0].digitItem,"=========");
-      const temp = [...this.allInfo]
-      const temp2 = temp.slice(0, this.index)
-      //  console.log(temp2[0].itemList[0].digitItem,"+=====temp2====");
-      return [...temp2]
-    // return []
+    NameList() { // 只取当前项之前的
+      return this.preList.slice(0, this.index)
     }
-    // codeList(){
-    //     const index = this.allInfo.findIndex(item => {
-
-    //       return  item.snDigitName = this.relevanceName
-    //       // console.log(item.snDigitName ,  this.relevanceName);
-    //     })
-    //     // if(index==-1) return []
-    //     // const temp  =  this.ruleList[index].itemList
-    //     // return [...temp]
-    //     return index
-    // }
   },
   watch: {
-
-    itemInfo: {
-      handler(vls) {
-        this.changitemInfo()
-        //  iteminfo改变时改变父组件
-        // 判断是否带前项编码
-        //  if(!vls.checked){
-
-        //  const  temp = vls.itemList.map(item => {
-        //    item.itemList = {
-        //      digitItem:item.digitItem,
-        //      digitItemIllustration:item.digitItemIllustration
-        //    }
-        //    return item
-        //  })
-        //    this.$emit('changeRuleList',{data:temp,index:this.index})
-        // // console.log(temp, "-===========================",vls);
-        // }else{
-        this.$emit('changeRuleList', { data: vls, index: this.index })
-      // }
+    codeItem: {
+      handler(val) {
+        this.itemInfo = val
       },
       deep: true
     },
-    allInfo: {
-      handler(vls) {
-        this.changitemInfo()
+    itemInfo: {
+      handler(val) {
+        this.$emit('changeRuleList', { data: val, index: this.index })
       },
       deep: true
     }
-    // checked(){
-    //     this.subInfo(this.itemInfo)
-    // }
-    // ruleList:{
-    //   handler(vls){
-
-    //     if(this.itemInfo.digitItem)
-    //    this.itemInfo = {...vls}
-    //   },
-    //   deep:true,
-    //   immediate:true
-    // }
   },
-  // model: {
-  //   prop: 'snDigitOrder',
-  //   event: 'changeSnDigitOrder'
-  // },
   mounted() {
-    this.itemInfo = { ...this.ruleList } // 单个框数据
-    //  allInfo 全部数据
-    // this.itemInfo = this.ruleList   // 根据 对象的性质
-    // this.$on('submitCode',()=>{console.log(11);})
-    // this.codeItemInfo =
+    this.itemInfo = this.codeItem
   },
   methods: {
+    // 移除编码项
     remove(index) {
       this.itemInfo.itemList.splice(index, 1)
     },
+    // 上移编码项
     upmove(index) {
-      if (index == 0) return
-      console.log(this.itemInfo)
+      if (index === 0) return
       const temp = this.itemInfo.itemList[index - 1]
       this.itemInfo.itemList[index - 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
       console.log(this.itemInfo.itemList[index])
     },
+    // 下移编码项
     downmove(index) {
-      console.log(index, this.itemInfo.itemList.length - 1)
-      if (index == this.itemInfo.itemList.length - 1) return
+      if (index === this.itemInfo.itemList.length - 1) return
       const temp = this.itemInfo.itemList[index + 1]
       this.itemInfo.itemList[index + 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
     },
+    // 添加编码项
     addAry() {
-      console.log(this.itemInfo)
       this.itemInfo.itemList.push({
         digitItem: '',
         digitPre: '',
         digitItemIllustration: ''
       })
-    },
-    changitemInfo() {
-      const temp = this.NameList.findIndex(item => {
-        return item.snDigitName == this.relevanceName
-      })
-
-      if (temp == -1) return []
-      const ary = this.NameList[temp].itemList.map(item => {
-        return { digitItem: item.digitItem }
-      })
-      console.log(ary, '======ary=====')
-      this.codelist = ary
-    //  this.codelist = temp
     }
 
   }
@@ -198,17 +150,20 @@
 
 <style lang="scss" scoped>
 .codeItem {
+  display: flex;
+  flex: 1;
+  .inputContent {
+
+    .inputBox {
       display: flex;
-      flex: 1;
-      .inputContent {
-        flex: 1;
-        .inputBox {
-          display: flex;
-          align-items: center;
-        }
-      }
+      align-items: center;
+    }
+  }
+  .inputContent+.inputContent{
+    margin-left: 20px;
+  }
       .Content_content {
-        flex: 3;
+        flex: 1;
         display: flex;
         // align-items:center;
         .left_title{

diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum
diff --git a/src/components/mycomponent/dialog/snCodeRulsDialog.vue b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
index ae82b98..dc6cf3f 100644
--- a/src/components/mycomponent/dialog/snCodeRulsDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
@@ -1,10 +1,9 @@
 <!--SN码规则新增弹窗-->
 <template>
-  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
+  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
     <div class="snCodeRulsDialog ">
       <div class="header">
-        <red-star />
-        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
+        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
       </div>
       <div class="content">
         <div class="contentHeader contentItem">
@@ -18,15 +17,16 @@
         <!-- snCodeCofig -->
 
         <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
-          <div class="selectIcon">
+          <div style="line-height:42px; padding: 0px 10px">
             <el-radio v-model="select" :label="index" size="medium ">
               {{ '' }}
             </el-radio>
           </div>
           <code-field
-            :rule-list="item"
-            :all-info="[...addInfo.ruleList]"
+            :code-item="item"
             :index="index"
+            :pre-list="preItemList"
+            :relation-show="index>0"
             @changeRuleList="changeRuleList"
           />
         </div>
@@ -45,13 +45,11 @@
 
 <script>
 import InputVue from '../input/inputVue.vue'
-import DialogHeader from './dialogHeader.vue'
 import codeField from '../snCode/codeField.vue'
 import { S_add } from '../../../api/product/snCodeRuls'
 
 export default {
   components: {
-    DialogHeader,
     InputVue,
     codeField
 
@@ -66,11 +64,11 @@
     return {
       select: -1,
       addInfo: {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
-            snDigitName: ' ',
+            snDigit: 1,
+            snDigitName: '',
             snDigitOrder: '',
             checked: false,
             itemList: [
@@ -83,39 +81,80 @@
             ]
           }
         ]
+      } // 表单对象
+    }
+  },
+  computed: {
+    preItemList() {
+      const list = this.addInfo.ruleList.map((item, index) => {
+        return {
+          name: item.snDigitName,
+          value: index,
+          itemList: item.itemList
+        }
+      })
+      return list
+    }, // 所有项列表
+    codeLength() {
+      let length = 0
+      for (const item of this.addInfo.ruleList) {
+        length += item.snDigit
       }
+      return length
     }
   },
   methods: {
+    validateForm() {
+      // TODO: 校验表单数据
+      let flag = true
+      let message = ''
+      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
+        const rule = this.addInfo.ruleList[rindex]
+        if (rule.snDigitName === '') {
+          message += `第${rindex + 1}项固定码中，名称不得为空！`
+          flag = false
+          break
+        }
+        for (const code of rule.itemList) {
+          if (code.digitItem === '' || code.digitItemIllustration === '') {
+            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
+            flag = false
+            break
+          }
+          if (rule.checked && code.digitPre == '') {
+            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
+            flag = false
+            break
+          }
+          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
+            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
+            flag = false
+            break
+          }
+        }
+        if (!flag) {
+          break
+        }
+      }
+      if (!flag) {
+        this.$message.warning(message)
+      }
+      return flag
+    },
     save() {
-      let CodeNumber = 0
-      this.addInfo.ruleList.forEach(item => {
-        CodeNumber += item.snDigit
-        console.log(CodeNumber, this.addInfo.ruleList)
-      })
-      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
-      if (typeof (this.addInfo.snQuantity) === 'string') {
-        this.$message.error('请输入正确SN码（固定标识）个数')
-        return
-      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
-        this.$message.error('位数相加不等于SN码个数请调整')
-        return
-      } else if (this.addInfo.snQuantity == 0) {
-        this.$message.error('正确SN码（固定标识）个数不能为零')
-        return
-      } else {
+      if (this.validateForm()) {
         // 数据正确后开始对数据进行数据处理
         const subData = this.addInfo.ruleList.map((item, index) => {
           let aryTemp = null
-          // 1.处理前编码项
-          if (!item.checked) {
-            item.itemList = item.itemList.map(littleItem => {
-              return {
-                digitItem: littleItem.digitItem,
-                digitItemIllustration: littleItem.digitItemIllustration
-              }
-            })
-          }
+          // // 1.处理前编码项
+          // if (!item.checked) {
+          //   item.itemList = item.itemList.map(littleItem => {
+          //     return {
+          //       digitItem: littleItem.digitItem,
+          //       digitItemIllustration: littleItem.digitItemIllustration
+          //     }
+          //   })
+          // }
           //  去除checked参数
           aryTemp = {
             snDigit: item.snDigit,
@@ -127,25 +166,23 @@
         })
         //  提交数据
         S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
-          if (resp != '') {
-            this.$message.success('添加成功')
-            this.close()
-            this.reset()
-          }
+          this.$message.success('添加成功')
+          this.close()
+          this.reset()
+        }).catch(_ => {
+          console.log(_)
         })
       }
-
-      // if(CodeNumber == 0 )
     },
     close() {
       this.$emit('close')
     },
     reset() {
       this.addInfo = {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
+            snDigit: 1,
             snDigitName: ' ',
             snDigitOrder: '',
             checked: false,
@@ -163,22 +200,22 @@
     },
     addCode() {
       this.addInfo.ruleList.push({
-        snDigit: 0,
-        snDigitName: '',
-        checked: false,
-        snDigitOrder: '',
+        snDigit: 1, // 位数
+        snDigitName: '', // 名称
+        checked: false, // 是否关联前项
+        snDigitOrder: '', // 顺序
         itemList: [
           {
-            digitItem: '',
-            digitPre: '',
-            digitItemIllustration: ''
+            digitItem: '', // 编码项
+            digitPre: '', // 前项编码
+            digitItemIllustration: '' // 编码说明
           }
-
         ]
       })
+      this.addInfo.snQuantity += 1 //
     },
     removeCode() {
-      if (this.select == -1) {
+      if (this.select === -1) {
         this.$message({
           message: '请选择删除项',
           type: 'error'
@@ -203,40 +240,33 @@
 
 <style lang="scss" scoped>
 .snCodeRulsDialog {
-  width: 1500px;
-
   .bgred {
     background: red;
     border: red;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .content {
-    border: 1px solid #666;
-    max-height: 500px;
+    width: 100%;
+    border: 1px solid #f0f0f0;
     overflow: auto;
-
+    border-radius: 10px;
+    margin-top: 20px ;
     .contentItem {
       padding: 10px;
-      border-bottom: 1px solid #999;
+      border-bottom: 1px solid #f0f0f0;
     }
-
     .item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: 10px;
     }
-
     .contentHeader {
       text-align: right;
     }
-
   }
-
   .btnBox {
     padding: 30px;
     box-sizing: border-box;
diff --git a/src/components/mycomponent/input/inputVue.vue b/src/components/mycomponent/input/inputVue.vue
index 56a50db..8a50163 100644
--- a/src/components/mycomponent/input/inputVue.vue
+++ b/src/components/mycomponent/input/inputVue.vue
@@ -1,28 +1,35 @@
 <!--输入组件-->
 <template>
   <div class="inputBox" :style="{width:boxWidth}">
+    <red-star v-if="redStar" />
     <div style="white-space: nowrap;" :class="{'ismargin':title}">
       {{ title }}{{ title?'：':'' }}
     </div>
     <!--可以自定义 输入框  -->
     <slot>
-      <el-input v-model="vls" :placeholder="placeholder" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
+      <el-input v-model="vls" :placeholder="placeholder" :size="size" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
     </slot>
   </div>
 </template>
 
 <script>
+import RedStar from '../redStar.vue'
 export default {
+  components: {
+    RedStar
+  },
   model: {
     prop: 'input',
     event: 'changeinput'
   },
   props: {
+    redStar: false,
     title: '',
     width: '',
     placeholder: '',
     boxWidth: '',
     input: '',
+    size: '',
     disabled: false
   },
   data() {
@@ -56,7 +63,7 @@
 .inputBox {
   display: flex;
   align-items: center;
-  margin: 5PX 10PX 5px 0;
+  margin: 5px 10px 5px 0;
   justify-content: space-between;
 }
 
diff --git a/src/components/mycomponent/snCode/codeField.vue b/src/components/mycomponent/snCode/codeField.vue
index 158f84c..848f023 100644
--- a/src/components/mycomponent/snCode/codeField.vue
+++ b/src/components/mycomponent/snCode/codeField.vue
@@ -4,42 +4,41 @@
     <div class="inputContent">
       <div class="inputBox">
         <red-star />
-        <input-vue v-model.number="itemInfo.snDigit" title="位数" width="150px" />
+        <input-vue v-model.number="itemInfo.snDigit" title="位数" size="small" width="80px" />
       </div>
     </div>
     <div class="inputContent">
       <div class="inputBox">
-        <red-star />
-        <input-vue v-model="itemInfo.snDigitName" title="名称" />
+        <input-vue v-model="itemInfo.snDigitName" title="名称" size="small" :red-star="true" />
       </div>
     </div>
     <div class="Content_content">
-      <div class="left_title">
-        <red-star />编码规则：
-      </div>
+      <div class="left_title" />
       <div class="right_content">
         <div class="title">
-          <div class="title_item">
-            <input-vue>
-              <el-checkbox v-model="itemInfo.checked">
+          <div class="inputBox">
+            <input-vue title="编码规则" width="150px" :red-star="true">
+              <el-checkbox v-model="itemInfo.checked" :disabled="!relationShow">
                 是否关联前一项
               </el-checkbox>
             </input-vue>
           </div>
-          <div class="title_item">
-            <input-vue title="关联项名称">
+          <div class="title_item" style="margin-left: 20px">
+            <input-vue title="关联项名称" box-width="200px" width="100px">
               <el-select
-                v-model="relevanceName"
+                v-model="relevance"
+                value-key="value"
                 filterable
                 placeholder="请选择"
-                style="width: 130px"
-                @change="changitemInfo"
+                style="width: 150px; margin-left: 10px"
+                size="small"
+                :disabled="!relationShow||!itemInfo.checked"
               >
                 <el-option
                   v-for="(item,index) in NameList"
                   :key="index"
-                  :label="item.snDigitName"
-                  :value="item.snDigitName"
+                  :label="item.name"
+                  :value="item"
                 />
               </el-select>
             </input-vue>
@@ -51,7 +50,7 @@
         </div>
         <div class="right_content_conetent">
           <div v-for="(item,index) in itemInfo.itemList" :key="index">
-            <code-item v-model=" itemInfo.itemList[index]" :checked="checked" :code-list="codelist" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
+            <code-item v-model=" itemInfo.itemList[index]" :checked="itemInfo.checked" :code-list="relevance?relevance.itemList:[]" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
           </div>
         </div>
       </div>
@@ -66,130 +65,83 @@
 import codeItem from './codeItem.vue'
 export default {
   components: { codeItem, InputVue, RedStar },
-  props: ['ruleList', 'allInfo', 'index'],
+  props: {
+    preList: {
+      type: Array,
+      default: () => {
+        return []
+      } // 前项下拉选择列表
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    codeItem: {
+      type: Object,
+      required: true
+    }, // 当前编码对象
+    relationShow: {
+      type: Boolean,
+      default: false
+    }// 是否可点击关联项
+  },
   data() {
     return {
       checked: false,
       itemInfo: {},
-      relevanceName: '',
-      codelist: '',
+      relevance: null,
       codeItemInfo: ''// 编码详情
     }
   },
   computed: {
-    NameList() {
-      // console.log(this.allInfo[0].itemList[0].digitItem,"=========");
-      const temp = [...this.allInfo]
-      const temp2 = temp.slice(0, this.index)
-      //  console.log(temp2[0].itemList[0].digitItem,"+=====temp2====");
-      return [...temp2]
-    // return []
+    NameList() { // 只取当前项之前的
+      return this.preList.slice(0, this.index)
     }
-    // codeList(){
-    //     const index = this.allInfo.findIndex(item => {
-
-    //       return  item.snDigitName = this.relevanceName
-    //       // console.log(item.snDigitName ,  this.relevanceName);
-    //     })
-    //     // if(index==-1) return []
-    //     // const temp  =  this.ruleList[index].itemList
-    //     // return [...temp]
-    //     return index
-    // }
   },
   watch: {
-
-    itemInfo: {
-      handler(vls) {
-        this.changitemInfo()
-        //  iteminfo改变时改变父组件
-        // 判断是否带前项编码
-        //  if(!vls.checked){
-
-        //  const  temp = vls.itemList.map(item => {
-        //    item.itemList = {
-        //      digitItem:item.digitItem,
-        //      digitItemIllustration:item.digitItemIllustration
-        //    }
-        //    return item
-        //  })
-        //    this.$emit('changeRuleList',{data:temp,index:this.index})
-        // // console.log(temp, "-===========================",vls);
-        // }else{
-        this.$emit('changeRuleList', { data: vls, index: this.index })
-      // }
+    codeItem: {
+      handler(val) {
+        this.itemInfo = val
       },
       deep: true
     },
-    allInfo: {
-      handler(vls) {
-        this.changitemInfo()
+    itemInfo: {
+      handler(val) {
+        this.$emit('changeRuleList', { data: val, index: this.index })
       },
       deep: true
     }
-    // checked(){
-    //     this.subInfo(this.itemInfo)
-    // }
-    // ruleList:{
-    //   handler(vls){
-
-    //     if(this.itemInfo.digitItem)
-    //    this.itemInfo = {...vls}
-    //   },
-    //   deep:true,
-    //   immediate:true
-    // }
   },
-  // model: {
-  //   prop: 'snDigitOrder',
-  //   event: 'changeSnDigitOrder'
-  // },
   mounted() {
-    this.itemInfo = { ...this.ruleList } // 单个框数据
-    //  allInfo 全部数据
-    // this.itemInfo = this.ruleList   // 根据 对象的性质
-    // this.$on('submitCode',()=>{console.log(11);})
-    // this.codeItemInfo =
+    this.itemInfo = this.codeItem
   },
   methods: {
+    // 移除编码项
     remove(index) {
       this.itemInfo.itemList.splice(index, 1)
     },
+    // 上移编码项
     upmove(index) {
-      if (index == 0) return
-      console.log(this.itemInfo)
+      if (index === 0) return
       const temp = this.itemInfo.itemList[index - 1]
       this.itemInfo.itemList[index - 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
       console.log(this.itemInfo.itemList[index])
     },
+    // 下移编码项
     downmove(index) {
-      console.log(index, this.itemInfo.itemList.length - 1)
-      if (index == this.itemInfo.itemList.length - 1) return
+      if (index === this.itemInfo.itemList.length - 1) return
       const temp = this.itemInfo.itemList[index + 1]
       this.itemInfo.itemList[index + 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
     },
+    // 添加编码项
     addAry() {
-      console.log(this.itemInfo)
       this.itemInfo.itemList.push({
         digitItem: '',
         digitPre: '',
         digitItemIllustration: ''
       })
-    },
-    changitemInfo() {
-      const temp = this.NameList.findIndex(item => {
-        return item.snDigitName == this.relevanceName
-      })
-
-      if (temp == -1) return []
-      const ary = this.NameList[temp].itemList.map(item => {
-        return { digitItem: item.digitItem }
-      })
-      console.log(ary, '======ary=====')
-      this.codelist = ary
-    //  this.codelist = temp
     }
 
   }
@@ -198,17 +150,20 @@
 
 <style lang="scss" scoped>
 .codeItem {
+  display: flex;
+  flex: 1;
+  .inputContent {
+
+    .inputBox {
       display: flex;
-      flex: 1;
-      .inputContent {
-        flex: 1;
-        .inputBox {
-          display: flex;
-          align-items: center;
-        }
-      }
+      align-items: center;
+    }
+  }
+  .inputContent+.inputContent{
+    margin-left: 20px;
+  }
       .Content_content {
-        flex: 3;
+        flex: 1;
         display: flex;
         // align-items:center;
         .left_title{
diff --git a/src/components/mycomponent/snCode/codeItem.vue b/src/components/mycomponent/snCode/codeItem.vue
index 6174527..633f10a 100644
--- a/src/components/mycomponent/snCode/codeItem.vue
+++ b/src/components/mycomponent/snCode/codeItem.vue
@@ -1,14 +1,14 @@
 <!--SN码规则新增弹窗内置组件2-->
 <template>
   <div class="box">
-    <div v-if="checked" class="frontCode code">
-      <red-star />
-      <input-vue title="前项编码">
+    <div v-show="checked" class="frontCode code">
+      <input-vue title="前项编码" :red-star="true">
         <el-select
           v-model="itemInfo.digitPre"
           filterable
           placeholder="请选择"
           style="width: 100px"
+          size="small"
           @change="changeCodeinfo"
         >
           <el-option v-for="item in codeList" :key="item.digitItem" :label="item.digitItem" :value="item.digitItem" />
@@ -16,12 +16,10 @@
       </input-vue>
     </div>
     <div class="middleCode code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="CodeDesc code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="title_item">
       <i class="el-icon-top icon" @click="move('up')" />
@@ -44,26 +42,28 @@
   },
   props: {
     checked: {
-      type: Boolean
-    },
-    codeInfo: {},
-    codeList: []
+      type: Boolean,
+      default: false
+    }, // 是否选中前置编码项
+    codeInfo: {
+      type: Object,
+      required: true
+    }, // 编码项
+    codeList: {
+      type: Array,
+      default: () => []
+    } // 前项编码列表
   },
   data() {
     return {
       itemInfo: {
-        digitItemIllustration: 1
+        digitItem: '',
+        digitPre: '',
+        digitItemIllustration: ''
       }
     }
   },
   watch: {
-    // itemInfo:{
-    //   handler(vls){
-    //     console.log(vls,"=========itemInfo===========");
-    //     // this.$emit('changeCodeInfo',vls)
-    //   },
-    //   deep:true
-    // },
     codeInfo: {
       handler(vls) {
         this.itemInfo = { ...vls }
@@ -76,12 +76,9 @@
 
   },
   methods: {
-
     // 移动
     move(str) {
-    //  console.log('submitCode');
-    //  this.$emit('submitCode')
-      if (str == 'up') {
+      if (str === 'up') {
         this.changeCodeinfo()
         this.$emit('upmove', str)
       } else {
@@ -94,7 +91,6 @@
       this.$emit('remove')
     },
     changeCodeinfo() {
-      // console.log(JSON.stringify(this.itemInfo));
       this.$emit('changeCodeInfo', this.itemInfo)
     }
   }

diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum
diff --git a/src/components/mycomponent/dialog/snCodeRulsDialog.vue b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
index ae82b98..dc6cf3f 100644
--- a/src/components/mycomponent/dialog/snCodeRulsDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
@@ -1,10 +1,9 @@
 <!--SN码规则新增弹窗-->
 <template>
-  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
+  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
     <div class="snCodeRulsDialog ">
       <div class="header">
-        <red-star />
-        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
+        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
       </div>
       <div class="content">
         <div class="contentHeader contentItem">
@@ -18,15 +17,16 @@
         <!-- snCodeCofig -->
 
         <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
-          <div class="selectIcon">
+          <div style="line-height:42px; padding: 0px 10px">
             <el-radio v-model="select" :label="index" size="medium ">
               {{ '' }}
             </el-radio>
           </div>
           <code-field
-            :rule-list="item"
-            :all-info="[...addInfo.ruleList]"
+            :code-item="item"
             :index="index"
+            :pre-list="preItemList"
+            :relation-show="index>0"
             @changeRuleList="changeRuleList"
           />
         </div>
@@ -45,13 +45,11 @@
 
 <script>
 import InputVue from '../input/inputVue.vue'
-import DialogHeader from './dialogHeader.vue'
 import codeField from '../snCode/codeField.vue'
 import { S_add } from '../../../api/product/snCodeRuls'
 
 export default {
   components: {
-    DialogHeader,
     InputVue,
     codeField
 
@@ -66,11 +64,11 @@
     return {
       select: -1,
       addInfo: {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
-            snDigitName: ' ',
+            snDigit: 1,
+            snDigitName: '',
             snDigitOrder: '',
             checked: false,
             itemList: [
@@ -83,39 +81,80 @@
             ]
           }
         ]
+      } // 表单对象
+    }
+  },
+  computed: {
+    preItemList() {
+      const list = this.addInfo.ruleList.map((item, index) => {
+        return {
+          name: item.snDigitName,
+          value: index,
+          itemList: item.itemList
+        }
+      })
+      return list
+    }, // 所有项列表
+    codeLength() {
+      let length = 0
+      for (const item of this.addInfo.ruleList) {
+        length += item.snDigit
       }
+      return length
     }
   },
   methods: {
+    validateForm() {
+      // TODO: 校验表单数据
+      let flag = true
+      let message = ''
+      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
+        const rule = this.addInfo.ruleList[rindex]
+        if (rule.snDigitName === '') {
+          message += `第${rindex + 1}项固定码中，名称不得为空！`
+          flag = false
+          break
+        }
+        for (const code of rule.itemList) {
+          if (code.digitItem === '' || code.digitItemIllustration === '') {
+            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
+            flag = false
+            break
+          }
+          if (rule.checked && code.digitPre == '') {
+            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
+            flag = false
+            break
+          }
+          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
+            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
+            flag = false
+            break
+          }
+        }
+        if (!flag) {
+          break
+        }
+      }
+      if (!flag) {
+        this.$message.warning(message)
+      }
+      return flag
+    },
     save() {
-      let CodeNumber = 0
-      this.addInfo.ruleList.forEach(item => {
-        CodeNumber += item.snDigit
-        console.log(CodeNumber, this.addInfo.ruleList)
-      })
-      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
-      if (typeof (this.addInfo.snQuantity) === 'string') {
-        this.$message.error('请输入正确SN码（固定标识）个数')
-        return
-      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
-        this.$message.error('位数相加不等于SN码个数请调整')
-        return
-      } else if (this.addInfo.snQuantity == 0) {
-        this.$message.error('正确SN码（固定标识）个数不能为零')
-        return
-      } else {
+      if (this.validateForm()) {
         // 数据正确后开始对数据进行数据处理
         const subData = this.addInfo.ruleList.map((item, index) => {
           let aryTemp = null
-          // 1.处理前编码项
-          if (!item.checked) {
-            item.itemList = item.itemList.map(littleItem => {
-              return {
-                digitItem: littleItem.digitItem,
-                digitItemIllustration: littleItem.digitItemIllustration
-              }
-            })
-          }
+          // // 1.处理前编码项
+          // if (!item.checked) {
+          //   item.itemList = item.itemList.map(littleItem => {
+          //     return {
+          //       digitItem: littleItem.digitItem,
+          //       digitItemIllustration: littleItem.digitItemIllustration
+          //     }
+          //   })
+          // }
           //  去除checked参数
           aryTemp = {
             snDigit: item.snDigit,
@@ -127,25 +166,23 @@
         })
         //  提交数据
         S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
-          if (resp != '') {
-            this.$message.success('添加成功')
-            this.close()
-            this.reset()
-          }
+          this.$message.success('添加成功')
+          this.close()
+          this.reset()
+        }).catch(_ => {
+          console.log(_)
         })
       }
-
-      // if(CodeNumber == 0 )
     },
     close() {
       this.$emit('close')
     },
     reset() {
       this.addInfo = {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
+            snDigit: 1,
             snDigitName: ' ',
             snDigitOrder: '',
             checked: false,
@@ -163,22 +200,22 @@
     },
     addCode() {
       this.addInfo.ruleList.push({
-        snDigit: 0,
-        snDigitName: '',
-        checked: false,
-        snDigitOrder: '',
+        snDigit: 1, // 位数
+        snDigitName: '', // 名称
+        checked: false, // 是否关联前项
+        snDigitOrder: '', // 顺序
         itemList: [
           {
-            digitItem: '',
-            digitPre: '',
-            digitItemIllustration: ''
+            digitItem: '', // 编码项
+            digitPre: '', // 前项编码
+            digitItemIllustration: '' // 编码说明
           }
-
         ]
       })
+      this.addInfo.snQuantity += 1 //
     },
     removeCode() {
-      if (this.select == -1) {
+      if (this.select === -1) {
         this.$message({
           message: '请选择删除项',
           type: 'error'
@@ -203,40 +240,33 @@
 
 <style lang="scss" scoped>
 .snCodeRulsDialog {
-  width: 1500px;
-
   .bgred {
     background: red;
     border: red;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .content {
-    border: 1px solid #666;
-    max-height: 500px;
+    width: 100%;
+    border: 1px solid #f0f0f0;
     overflow: auto;
-
+    border-radius: 10px;
+    margin-top: 20px ;
     .contentItem {
       padding: 10px;
-      border-bottom: 1px solid #999;
+      border-bottom: 1px solid #f0f0f0;
     }
-
     .item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: 10px;
     }
-
     .contentHeader {
       text-align: right;
     }
-
   }
-
   .btnBox {
     padding: 30px;
     box-sizing: border-box;
diff --git a/src/components/mycomponent/input/inputVue.vue b/src/components/mycomponent/input/inputVue.vue
index 56a50db..8a50163 100644
--- a/src/components/mycomponent/input/inputVue.vue
+++ b/src/components/mycomponent/input/inputVue.vue
@@ -1,28 +1,35 @@
 <!--输入组件-->
 <template>
   <div class="inputBox" :style="{width:boxWidth}">
+    <red-star v-if="redStar" />
     <div style="white-space: nowrap;" :class="{'ismargin':title}">
       {{ title }}{{ title?'：':'' }}
     </div>
     <!--可以自定义 输入框  -->
     <slot>
-      <el-input v-model="vls" :placeholder="placeholder" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
+      <el-input v-model="vls" :placeholder="placeholder" :size="size" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
     </slot>
   </div>
 </template>
 
 <script>
+import RedStar from '../redStar.vue'
 export default {
+  components: {
+    RedStar
+  },
   model: {
     prop: 'input',
     event: 'changeinput'
   },
   props: {
+    redStar: false,
     title: '',
     width: '',
     placeholder: '',
     boxWidth: '',
     input: '',
+    size: '',
     disabled: false
   },
   data() {
@@ -56,7 +63,7 @@
 .inputBox {
   display: flex;
   align-items: center;
-  margin: 5PX 10PX 5px 0;
+  margin: 5px 10px 5px 0;
   justify-content: space-between;
 }
 
diff --git a/src/components/mycomponent/snCode/codeField.vue b/src/components/mycomponent/snCode/codeField.vue
index 158f84c..848f023 100644
--- a/src/components/mycomponent/snCode/codeField.vue
+++ b/src/components/mycomponent/snCode/codeField.vue
@@ -4,42 +4,41 @@
     <div class="inputContent">
       <div class="inputBox">
         <red-star />
-        <input-vue v-model.number="itemInfo.snDigit" title="位数" width="150px" />
+        <input-vue v-model.number="itemInfo.snDigit" title="位数" size="small" width="80px" />
       </div>
     </div>
     <div class="inputContent">
       <div class="inputBox">
-        <red-star />
-        <input-vue v-model="itemInfo.snDigitName" title="名称" />
+        <input-vue v-model="itemInfo.snDigitName" title="名称" size="small" :red-star="true" />
       </div>
     </div>
     <div class="Content_content">
-      <div class="left_title">
-        <red-star />编码规则：
-      </div>
+      <div class="left_title" />
       <div class="right_content">
         <div class="title">
-          <div class="title_item">
-            <input-vue>
-              <el-checkbox v-model="itemInfo.checked">
+          <div class="inputBox">
+            <input-vue title="编码规则" width="150px" :red-star="true">
+              <el-checkbox v-model="itemInfo.checked" :disabled="!relationShow">
                 是否关联前一项
               </el-checkbox>
             </input-vue>
           </div>
-          <div class="title_item">
-            <input-vue title="关联项名称">
+          <div class="title_item" style="margin-left: 20px">
+            <input-vue title="关联项名称" box-width="200px" width="100px">
               <el-select
-                v-model="relevanceName"
+                v-model="relevance"
+                value-key="value"
                 filterable
                 placeholder="请选择"
-                style="width: 130px"
-                @change="changitemInfo"
+                style="width: 150px; margin-left: 10px"
+                size="small"
+                :disabled="!relationShow||!itemInfo.checked"
               >
                 <el-option
                   v-for="(item,index) in NameList"
                   :key="index"
-                  :label="item.snDigitName"
-                  :value="item.snDigitName"
+                  :label="item.name"
+                  :value="item"
                 />
               </el-select>
             </input-vue>
@@ -51,7 +50,7 @@
         </div>
         <div class="right_content_conetent">
           <div v-for="(item,index) in itemInfo.itemList" :key="index">
-            <code-item v-model=" itemInfo.itemList[index]" :checked="checked" :code-list="codelist" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
+            <code-item v-model=" itemInfo.itemList[index]" :checked="itemInfo.checked" :code-list="relevance?relevance.itemList:[]" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
           </div>
         </div>
       </div>
@@ -66,130 +65,83 @@
 import codeItem from './codeItem.vue'
 export default {
   components: { codeItem, InputVue, RedStar },
-  props: ['ruleList', 'allInfo', 'index'],
+  props: {
+    preList: {
+      type: Array,
+      default: () => {
+        return []
+      } // 前项下拉选择列表
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    codeItem: {
+      type: Object,
+      required: true
+    }, // 当前编码对象
+    relationShow: {
+      type: Boolean,
+      default: false
+    }// 是否可点击关联项
+  },
   data() {
     return {
       checked: false,
       itemInfo: {},
-      relevanceName: '',
-      codelist: '',
+      relevance: null,
       codeItemInfo: ''// 编码详情
     }
   },
   computed: {
-    NameList() {
-      // console.log(this.allInfo[0].itemList[0].digitItem,"=========");
-      const temp = [...this.allInfo]
-      const temp2 = temp.slice(0, this.index)
-      //  console.log(temp2[0].itemList[0].digitItem,"+=====temp2====");
-      return [...temp2]
-    // return []
+    NameList() { // 只取当前项之前的
+      return this.preList.slice(0, this.index)
     }
-    // codeList(){
-    //     const index = this.allInfo.findIndex(item => {
-
-    //       return  item.snDigitName = this.relevanceName
-    //       // console.log(item.snDigitName ,  this.relevanceName);
-    //     })
-    //     // if(index==-1) return []
-    //     // const temp  =  this.ruleList[index].itemList
-    //     // return [...temp]
-    //     return index
-    // }
   },
   watch: {
-
-    itemInfo: {
-      handler(vls) {
-        this.changitemInfo()
-        //  iteminfo改变时改变父组件
-        // 判断是否带前项编码
-        //  if(!vls.checked){
-
-        //  const  temp = vls.itemList.map(item => {
-        //    item.itemList = {
-        //      digitItem:item.digitItem,
-        //      digitItemIllustration:item.digitItemIllustration
-        //    }
-        //    return item
-        //  })
-        //    this.$emit('changeRuleList',{data:temp,index:this.index})
-        // // console.log(temp, "-===========================",vls);
-        // }else{
-        this.$emit('changeRuleList', { data: vls, index: this.index })
-      // }
+    codeItem: {
+      handler(val) {
+        this.itemInfo = val
       },
       deep: true
     },
-    allInfo: {
-      handler(vls) {
-        this.changitemInfo()
+    itemInfo: {
+      handler(val) {
+        this.$emit('changeRuleList', { data: val, index: this.index })
       },
       deep: true
     }
-    // checked(){
-    //     this.subInfo(this.itemInfo)
-    // }
-    // ruleList:{
-    //   handler(vls){
-
-    //     if(this.itemInfo.digitItem)
-    //    this.itemInfo = {...vls}
-    //   },
-    //   deep:true,
-    //   immediate:true
-    // }
   },
-  // model: {
-  //   prop: 'snDigitOrder',
-  //   event: 'changeSnDigitOrder'
-  // },
   mounted() {
-    this.itemInfo = { ...this.ruleList } // 单个框数据
-    //  allInfo 全部数据
-    // this.itemInfo = this.ruleList   // 根据 对象的性质
-    // this.$on('submitCode',()=>{console.log(11);})
-    // this.codeItemInfo =
+    this.itemInfo = this.codeItem
   },
   methods: {
+    // 移除编码项
     remove(index) {
       this.itemInfo.itemList.splice(index, 1)
     },
+    // 上移编码项
     upmove(index) {
-      if (index == 0) return
-      console.log(this.itemInfo)
+      if (index === 0) return
       const temp = this.itemInfo.itemList[index - 1]
       this.itemInfo.itemList[index - 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
       console.log(this.itemInfo.itemList[index])
     },
+    // 下移编码项
     downmove(index) {
-      console.log(index, this.itemInfo.itemList.length - 1)
-      if (index == this.itemInfo.itemList.length - 1) return
+      if (index === this.itemInfo.itemList.length - 1) return
       const temp = this.itemInfo.itemList[index + 1]
       this.itemInfo.itemList[index + 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
     },
+    // 添加编码项
     addAry() {
-      console.log(this.itemInfo)
       this.itemInfo.itemList.push({
         digitItem: '',
         digitPre: '',
         digitItemIllustration: ''
       })
-    },
-    changitemInfo() {
-      const temp = this.NameList.findIndex(item => {
-        return item.snDigitName == this.relevanceName
-      })
-
-      if (temp == -1) return []
-      const ary = this.NameList[temp].itemList.map(item => {
-        return { digitItem: item.digitItem }
-      })
-      console.log(ary, '======ary=====')
-      this.codelist = ary
-    //  this.codelist = temp
     }
 
   }
@@ -198,17 +150,20 @@
 
 <style lang="scss" scoped>
 .codeItem {
+  display: flex;
+  flex: 1;
+  .inputContent {
+
+    .inputBox {
       display: flex;
-      flex: 1;
-      .inputContent {
-        flex: 1;
-        .inputBox {
-          display: flex;
-          align-items: center;
-        }
-      }
+      align-items: center;
+    }
+  }
+  .inputContent+.inputContent{
+    margin-left: 20px;
+  }
       .Content_content {
-        flex: 3;
+        flex: 1;
         display: flex;
         // align-items:center;
         .left_title{
diff --git a/src/components/mycomponent/snCode/codeItem.vue b/src/components/mycomponent/snCode/codeItem.vue
index 6174527..633f10a 100644
--- a/src/components/mycomponent/snCode/codeItem.vue
+++ b/src/components/mycomponent/snCode/codeItem.vue
@@ -1,14 +1,14 @@
 <!--SN码规则新增弹窗内置组件2-->
 <template>
   <div class="box">
-    <div v-if="checked" class="frontCode code">
-      <red-star />
-      <input-vue title="前项编码">
+    <div v-show="checked" class="frontCode code">
+      <input-vue title="前项编码" :red-star="true">
         <el-select
           v-model="itemInfo.digitPre"
           filterable
           placeholder="请选择"
           style="width: 100px"
+          size="small"
           @change="changeCodeinfo"
         >
           <el-option v-for="item in codeList" :key="item.digitItem" :label="item.digitItem" :value="item.digitItem" />
@@ -16,12 +16,10 @@
       </input-vue>
     </div>
     <div class="middleCode code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="CodeDesc code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="title_item">
       <i class="el-icon-top icon" @click="move('up')" />
@@ -44,26 +42,28 @@
   },
   props: {
     checked: {
-      type: Boolean
-    },
-    codeInfo: {},
-    codeList: []
+      type: Boolean,
+      default: false
+    }, // 是否选中前置编码项
+    codeInfo: {
+      type: Object,
+      required: true
+    }, // 编码项
+    codeList: {
+      type: Array,
+      default: () => []
+    } // 前项编码列表
   },
   data() {
     return {
       itemInfo: {
-        digitItemIllustration: 1
+        digitItem: '',
+        digitPre: '',
+        digitItemIllustration: ''
       }
     }
   },
   watch: {
-    // itemInfo:{
-    //   handler(vls){
-    //     console.log(vls,"=========itemInfo===========");
-    //     // this.$emit('changeCodeInfo',vls)
-    //   },
-    //   deep:true
-    // },
     codeInfo: {
       handler(vls) {
         this.itemInfo = { ...vls }
@@ -76,12 +76,9 @@
 
   },
   methods: {
-
     // 移动
     move(str) {
-    //  console.log('submitCode');
-    //  this.$emit('submitCode')
-      if (str == 'up') {
+      if (str === 'up') {
         this.changeCodeinfo()
         this.$emit('upmove', str)
       } else {
@@ -94,7 +91,6 @@
       this.$emit('remove')
     },
     changeCodeinfo() {
-      // console.log(JSON.stringify(this.itemInfo));
       this.$emit('changeCodeInfo', this.itemInfo)
     }
   }
diff --git a/src/router/index.js b/src/router/index.js
index 54b62db..c0532a4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,7 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
-import { exampleRouters } from './modules/example'
+// import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -197,6 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
-  ...exampleRouters,
+  // ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]

diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum
diff --git a/src/components/mycomponent/dialog/snCodeRulsDialog.vue b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
index ae82b98..dc6cf3f 100644
--- a/src/components/mycomponent/dialog/snCodeRulsDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
@@ -1,10 +1,9 @@
 <!--SN码规则新增弹窗-->
 <template>
-  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
+  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
     <div class="snCodeRulsDialog ">
       <div class="header">
-        <red-star />
-        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
+        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
       </div>
       <div class="content">
         <div class="contentHeader contentItem">
@@ -18,15 +17,16 @@
         <!-- snCodeCofig -->
 
         <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
-          <div class="selectIcon">
+          <div style="line-height:42px; padding: 0px 10px">
             <el-radio v-model="select" :label="index" size="medium ">
               {{ '' }}
             </el-radio>
           </div>
           <code-field
-            :rule-list="item"
-            :all-info="[...addInfo.ruleList]"
+            :code-item="item"
             :index="index"
+            :pre-list="preItemList"
+            :relation-show="index>0"
             @changeRuleList="changeRuleList"
           />
         </div>
@@ -45,13 +45,11 @@
 
 <script>
 import InputVue from '../input/inputVue.vue'
-import DialogHeader from './dialogHeader.vue'
 import codeField from '../snCode/codeField.vue'
 import { S_add } from '../../../api/product/snCodeRuls'
 
 export default {
   components: {
-    DialogHeader,
     InputVue,
     codeField
 
@@ -66,11 +64,11 @@
     return {
       select: -1,
       addInfo: {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
-            snDigitName: ' ',
+            snDigit: 1,
+            snDigitName: '',
             snDigitOrder: '',
             checked: false,
             itemList: [
@@ -83,39 +81,80 @@
             ]
           }
         ]
+      } // 表单对象
+    }
+  },
+  computed: {
+    preItemList() {
+      const list = this.addInfo.ruleList.map((item, index) => {
+        return {
+          name: item.snDigitName,
+          value: index,
+          itemList: item.itemList
+        }
+      })
+      return list
+    }, // 所有项列表
+    codeLength() {
+      let length = 0
+      for (const item of this.addInfo.ruleList) {
+        length += item.snDigit
       }
+      return length
     }
   },
   methods: {
+    validateForm() {
+      // TODO: 校验表单数据
+      let flag = true
+      let message = ''
+      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
+        const rule = this.addInfo.ruleList[rindex]
+        if (rule.snDigitName === '') {
+          message += `第${rindex + 1}项固定码中，名称不得为空！`
+          flag = false
+          break
+        }
+        for (const code of rule.itemList) {
+          if (code.digitItem === '' || code.digitItemIllustration === '') {
+            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
+            flag = false
+            break
+          }
+          if (rule.checked && code.digitPre == '') {
+            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
+            flag = false
+            break
+          }
+          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
+            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
+            flag = false
+            break
+          }
+        }
+        if (!flag) {
+          break
+        }
+      }
+      if (!flag) {
+        this.$message.warning(message)
+      }
+      return flag
+    },
     save() {
-      let CodeNumber = 0
-      this.addInfo.ruleList.forEach(item => {
-        CodeNumber += item.snDigit
-        console.log(CodeNumber, this.addInfo.ruleList)
-      })
-      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
-      if (typeof (this.addInfo.snQuantity) === 'string') {
-        this.$message.error('请输入正确SN码（固定标识）个数')
-        return
-      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
-        this.$message.error('位数相加不等于SN码个数请调整')
-        return
-      } else if (this.addInfo.snQuantity == 0) {
-        this.$message.error('正确SN码（固定标识）个数不能为零')
-        return
-      } else {
+      if (this.validateForm()) {
         // 数据正确后开始对数据进行数据处理
         const subData = this.addInfo.ruleList.map((item, index) => {
           let aryTemp = null
-          // 1.处理前编码项
-          if (!item.checked) {
-            item.itemList = item.itemList.map(littleItem => {
-              return {
-                digitItem: littleItem.digitItem,
-                digitItemIllustration: littleItem.digitItemIllustration
-              }
-            })
-          }
+          // // 1.处理前编码项
+          // if (!item.checked) {
+          //   item.itemList = item.itemList.map(littleItem => {
+          //     return {
+          //       digitItem: littleItem.digitItem,
+          //       digitItemIllustration: littleItem.digitItemIllustration
+          //     }
+          //   })
+          // }
           //  去除checked参数
           aryTemp = {
             snDigit: item.snDigit,
@@ -127,25 +166,23 @@
         })
         //  提交数据
         S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
-          if (resp != '') {
-            this.$message.success('添加成功')
-            this.close()
-            this.reset()
-          }
+          this.$message.success('添加成功')
+          this.close()
+          this.reset()
+        }).catch(_ => {
+          console.log(_)
         })
       }
-
-      // if(CodeNumber == 0 )
     },
     close() {
       this.$emit('close')
     },
     reset() {
       this.addInfo = {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
+            snDigit: 1,
             snDigitName: ' ',
             snDigitOrder: '',
             checked: false,
@@ -163,22 +200,22 @@
     },
     addCode() {
       this.addInfo.ruleList.push({
-        snDigit: 0,
-        snDigitName: '',
-        checked: false,
-        snDigitOrder: '',
+        snDigit: 1, // 位数
+        snDigitName: '', // 名称
+        checked: false, // 是否关联前项
+        snDigitOrder: '', // 顺序
         itemList: [
           {
-            digitItem: '',
-            digitPre: '',
-            digitItemIllustration: ''
+            digitItem: '', // 编码项
+            digitPre: '', // 前项编码
+            digitItemIllustration: '' // 编码说明
           }
-
         ]
       })
+      this.addInfo.snQuantity += 1 //
     },
     removeCode() {
-      if (this.select == -1) {
+      if (this.select === -1) {
         this.$message({
           message: '请选择删除项',
           type: 'error'
@@ -203,40 +240,33 @@
 
 <style lang="scss" scoped>
 .snCodeRulsDialog {
-  width: 1500px;
-
   .bgred {
     background: red;
     border: red;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .content {
-    border: 1px solid #666;
-    max-height: 500px;
+    width: 100%;
+    border: 1px solid #f0f0f0;
     overflow: auto;
-
+    border-radius: 10px;
+    margin-top: 20px ;
     .contentItem {
       padding: 10px;
-      border-bottom: 1px solid #999;
+      border-bottom: 1px solid #f0f0f0;
     }
-
     .item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: 10px;
     }
-
     .contentHeader {
       text-align: right;
     }
-
   }
-
   .btnBox {
     padding: 30px;
     box-sizing: border-box;
diff --git a/src/components/mycomponent/input/inputVue.vue b/src/components/mycomponent/input/inputVue.vue
index 56a50db..8a50163 100644
--- a/src/components/mycomponent/input/inputVue.vue
+++ b/src/components/mycomponent/input/inputVue.vue
@@ -1,28 +1,35 @@
 <!--输入组件-->
 <template>
   <div class="inputBox" :style="{width:boxWidth}">
+    <red-star v-if="redStar" />
     <div style="white-space: nowrap;" :class="{'ismargin':title}">
       {{ title }}{{ title?'：':'' }}
     </div>
     <!--可以自定义 输入框  -->
     <slot>
-      <el-input v-model="vls" :placeholder="placeholder" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
+      <el-input v-model="vls" :placeholder="placeholder" :size="size" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
     </slot>
   </div>
 </template>
 
 <script>
+import RedStar from '../redStar.vue'
 export default {
+  components: {
+    RedStar
+  },
   model: {
     prop: 'input',
     event: 'changeinput'
   },
   props: {
+    redStar: false,
     title: '',
     width: '',
     placeholder: '',
     boxWidth: '',
     input: '',
+    size: '',
     disabled: false
   },
   data() {
@@ -56,7 +63,7 @@
 .inputBox {
   display: flex;
   align-items: center;
-  margin: 5PX 10PX 5px 0;
+  margin: 5px 10px 5px 0;
   justify-content: space-between;
 }
 
diff --git a/src/components/mycomponent/snCode/codeField.vue b/src/components/mycomponent/snCode/codeField.vue
index 158f84c..848f023 100644
--- a/src/components/mycomponent/snCode/codeField.vue
+++ b/src/components/mycomponent/snCode/codeField.vue
@@ -4,42 +4,41 @@
     <div class="inputContent">
       <div class="inputBox">
         <red-star />
-        <input-vue v-model.number="itemInfo.snDigit" title="位数" width="150px" />
+        <input-vue v-model.number="itemInfo.snDigit" title="位数" size="small" width="80px" />
       </div>
     </div>
     <div class="inputContent">
       <div class="inputBox">
-        <red-star />
-        <input-vue v-model="itemInfo.snDigitName" title="名称" />
+        <input-vue v-model="itemInfo.snDigitName" title="名称" size="small" :red-star="true" />
       </div>
     </div>
     <div class="Content_content">
-      <div class="left_title">
-        <red-star />编码规则：
-      </div>
+      <div class="left_title" />
       <div class="right_content">
         <div class="title">
-          <div class="title_item">
-            <input-vue>
-              <el-checkbox v-model="itemInfo.checked">
+          <div class="inputBox">
+            <input-vue title="编码规则" width="150px" :red-star="true">
+              <el-checkbox v-model="itemInfo.checked" :disabled="!relationShow">
                 是否关联前一项
               </el-checkbox>
             </input-vue>
           </div>
-          <div class="title_item">
-            <input-vue title="关联项名称">
+          <div class="title_item" style="margin-left: 20px">
+            <input-vue title="关联项名称" box-width="200px" width="100px">
               <el-select
-                v-model="relevanceName"
+                v-model="relevance"
+                value-key="value"
                 filterable
                 placeholder="请选择"
-                style="width: 130px"
-                @change="changitemInfo"
+                style="width: 150px; margin-left: 10px"
+                size="small"
+                :disabled="!relationShow||!itemInfo.checked"
               >
                 <el-option
                   v-for="(item,index) in NameList"
                   :key="index"
-                  :label="item.snDigitName"
-                  :value="item.snDigitName"
+                  :label="item.name"
+                  :value="item"
                 />
               </el-select>
             </input-vue>
@@ -51,7 +50,7 @@
         </div>
         <div class="right_content_conetent">
           <div v-for="(item,index) in itemInfo.itemList" :key="index">
-            <code-item v-model=" itemInfo.itemList[index]" :checked="checked" :code-list="codelist" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
+            <code-item v-model=" itemInfo.itemList[index]" :checked="itemInfo.checked" :code-list="relevance?relevance.itemList:[]" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
           </div>
         </div>
       </div>
@@ -66,130 +65,83 @@
 import codeItem from './codeItem.vue'
 export default {
   components: { codeItem, InputVue, RedStar },
-  props: ['ruleList', 'allInfo', 'index'],
+  props: {
+    preList: {
+      type: Array,
+      default: () => {
+        return []
+      } // 前项下拉选择列表
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    codeItem: {
+      type: Object,
+      required: true
+    }, // 当前编码对象
+    relationShow: {
+      type: Boolean,
+      default: false
+    }// 是否可点击关联项
+  },
   data() {
     return {
       checked: false,
       itemInfo: {},
-      relevanceName: '',
-      codelist: '',
+      relevance: null,
       codeItemInfo: ''// 编码详情
     }
   },
   computed: {
-    NameList() {
-      // console.log(this.allInfo[0].itemList[0].digitItem,"=========");
-      const temp = [...this.allInfo]
-      const temp2 = temp.slice(0, this.index)
-      //  console.log(temp2[0].itemList[0].digitItem,"+=====temp2====");
-      return [...temp2]
-    // return []
+    NameList() { // 只取当前项之前的
+      return this.preList.slice(0, this.index)
     }
-    // codeList(){
-    //     const index = this.allInfo.findIndex(item => {
-
-    //       return  item.snDigitName = this.relevanceName
-    //       // console.log(item.snDigitName ,  this.relevanceName);
-    //     })
-    //     // if(index==-1) return []
-    //     // const temp  =  this.ruleList[index].itemList
-    //     // return [...temp]
-    //     return index
-    // }
   },
   watch: {
-
-    itemInfo: {
-      handler(vls) {
-        this.changitemInfo()
-        //  iteminfo改变时改变父组件
-        // 判断是否带前项编码
-        //  if(!vls.checked){
-
-        //  const  temp = vls.itemList.map(item => {
-        //    item.itemList = {
-        //      digitItem:item.digitItem,
-        //      digitItemIllustration:item.digitItemIllustration
-        //    }
-        //    return item
-        //  })
-        //    this.$emit('changeRuleList',{data:temp,index:this.index})
-        // // console.log(temp, "-===========================",vls);
-        // }else{
-        this.$emit('changeRuleList', { data: vls, index: this.index })
-      // }
+    codeItem: {
+      handler(val) {
+        this.itemInfo = val
       },
       deep: true
     },
-    allInfo: {
-      handler(vls) {
-        this.changitemInfo()
+    itemInfo: {
+      handler(val) {
+        this.$emit('changeRuleList', { data: val, index: this.index })
       },
       deep: true
     }
-    // checked(){
-    //     this.subInfo(this.itemInfo)
-    // }
-    // ruleList:{
-    //   handler(vls){
-
-    //     if(this.itemInfo.digitItem)
-    //    this.itemInfo = {...vls}
-    //   },
-    //   deep:true,
-    //   immediate:true
-    // }
   },
-  // model: {
-  //   prop: 'snDigitOrder',
-  //   event: 'changeSnDigitOrder'
-  // },
   mounted() {
-    this.itemInfo = { ...this.ruleList } // 单个框数据
-    //  allInfo 全部数据
-    // this.itemInfo = this.ruleList   // 根据 对象的性质
-    // this.$on('submitCode',()=>{console.log(11);})
-    // this.codeItemInfo =
+    this.itemInfo = this.codeItem
   },
   methods: {
+    // 移除编码项
     remove(index) {
       this.itemInfo.itemList.splice(index, 1)
     },
+    // 上移编码项
     upmove(index) {
-      if (index == 0) return
-      console.log(this.itemInfo)
+      if (index === 0) return
       const temp = this.itemInfo.itemList[index - 1]
       this.itemInfo.itemList[index - 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
       console.log(this.itemInfo.itemList[index])
     },
+    // 下移编码项
     downmove(index) {
-      console.log(index, this.itemInfo.itemList.length - 1)
-      if (index == this.itemInfo.itemList.length - 1) return
+      if (index === this.itemInfo.itemList.length - 1) return
       const temp = this.itemInfo.itemList[index + 1]
       this.itemInfo.itemList[index + 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
     },
+    // 添加编码项
     addAry() {
-      console.log(this.itemInfo)
       this.itemInfo.itemList.push({
         digitItem: '',
         digitPre: '',
         digitItemIllustration: ''
       })
-    },
-    changitemInfo() {
-      const temp = this.NameList.findIndex(item => {
-        return item.snDigitName == this.relevanceName
-      })
-
-      if (temp == -1) return []
-      const ary = this.NameList[temp].itemList.map(item => {
-        return { digitItem: item.digitItem }
-      })
-      console.log(ary, '======ary=====')
-      this.codelist = ary
-    //  this.codelist = temp
     }
 
   }
@@ -198,17 +150,20 @@
 
 <style lang="scss" scoped>
 .codeItem {
+  display: flex;
+  flex: 1;
+  .inputContent {
+
+    .inputBox {
       display: flex;
-      flex: 1;
-      .inputContent {
-        flex: 1;
-        .inputBox {
-          display: flex;
-          align-items: center;
-        }
-      }
+      align-items: center;
+    }
+  }
+  .inputContent+.inputContent{
+    margin-left: 20px;
+  }
       .Content_content {
-        flex: 3;
+        flex: 1;
         display: flex;
         // align-items:center;
         .left_title{
diff --git a/src/components/mycomponent/snCode/codeItem.vue b/src/components/mycomponent/snCode/codeItem.vue
index 6174527..633f10a 100644
--- a/src/components/mycomponent/snCode/codeItem.vue
+++ b/src/components/mycomponent/snCode/codeItem.vue
@@ -1,14 +1,14 @@
 <!--SN码规则新增弹窗内置组件2-->
 <template>
   <div class="box">
-    <div v-if="checked" class="frontCode code">
-      <red-star />
-      <input-vue title="前项编码">
+    <div v-show="checked" class="frontCode code">
+      <input-vue title="前项编码" :red-star="true">
         <el-select
           v-model="itemInfo.digitPre"
           filterable
           placeholder="请选择"
           style="width: 100px"
+          size="small"
           @change="changeCodeinfo"
         >
           <el-option v-for="item in codeList" :key="item.digitItem" :label="item.digitItem" :value="item.digitItem" />
@@ -16,12 +16,10 @@
       </input-vue>
     </div>
     <div class="middleCode code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="CodeDesc code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="title_item">
       <i class="el-icon-top icon" @click="move('up')" />
@@ -44,26 +42,28 @@
   },
   props: {
     checked: {
-      type: Boolean
-    },
-    codeInfo: {},
-    codeList: []
+      type: Boolean,
+      default: false
+    }, // 是否选中前置编码项
+    codeInfo: {
+      type: Object,
+      required: true
+    }, // 编码项
+    codeList: {
+      type: Array,
+      default: () => []
+    } // 前项编码列表
   },
   data() {
     return {
       itemInfo: {
-        digitItemIllustration: 1
+        digitItem: '',
+        digitPre: '',
+        digitItemIllustration: ''
       }
     }
   },
   watch: {
-    // itemInfo:{
-    //   handler(vls){
-    //     console.log(vls,"=========itemInfo===========");
-    //     // this.$emit('changeCodeInfo',vls)
-    //   },
-    //   deep:true
-    // },
     codeInfo: {
       handler(vls) {
         this.itemInfo = { ...vls }
@@ -76,12 +76,9 @@
 
   },
   methods: {
-
     // 移动
     move(str) {
-    //  console.log('submitCode');
-    //  this.$emit('submitCode')
-      if (str == 'up') {
+      if (str === 'up') {
         this.changeCodeinfo()
         this.$emit('upmove', str)
       } else {
@@ -94,7 +91,6 @@
       this.$emit('remove')
     },
     changeCodeinfo() {
-      // console.log(JSON.stringify(this.itemInfo));
       this.$emit('changeCodeInfo', this.itemInfo)
     }
   }
diff --git a/src/router/index.js b/src/router/index.js
index 54b62db..c0532a4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,7 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
-import { exampleRouters } from './modules/example'
+// import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -197,6 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
-  ...exampleRouters,
+  // ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/utils/myUtils/mixins/listPage.js b/src/utils/myUtils/mixins/listPage.js
index 9bc028d..a9f21e5 100644
--- a/src/utils/myUtils/mixins/listPage.js
+++ b/src/utils/myUtils/mixins/listPage.js
@@ -1,85 +1,83 @@
 const listMixin = {
-    data(){
-        return {
-            tableData:{rows:[]}
-             , // 品牌表格数据
-            limit:10, // 当前的行数
-            offset:1, //当前页
-            queryInfo:{} ,  // 搜索的数据
-            isFristPage:false
-        }
-    },
-    mounted(){
-        //获取 表格列表
-      
-         this.refresh()
-      },
-    methods: {
-        //  页面行数改变
-        setLimit(crrentSize) {
-            this.limit = crrentSize
-        },
-        setOffset(offset) {
-            this.offset = offset
-        },
-          //  搜索
-        selectData(){
-        this.queryInfo = {...this.selectInfo}  // 加入搜索内容
-        // 回到初始页
-        if(this.offset ==1){
-          this.refresh()
-          return
-        }
-        this.offset =1 
-        // this.getListPage(this.limit,this.offset) 
-        this.isFristPage= true
-        //  将分页组件 调到第一页
-      },
-      // 刷新
-         refresh(){
-         this.$nextTick(()=>{
-          this.getListPage(this.limit,this.offset)   
-        })
-       },
-    },
-    computed: {
-        total() {
-            let index = this.tableData.total / this.limit
-            return Math.ceil(index)
-        }
-    },
-    //  监听当前页 和当前页总条数的改变 
-    watch: {
-        limit(newVls) {
-            this.getListPage(newVls, this.offset)
-        },
-        offset(newVls) {
-            this.getListPage(this.limit, newVls)
-        }
+  data() {
+    return {
+      tableData: { rows: [] }, // 品牌表格数据
+      limit: 10, // 当前的行数
+      offset: 1, // 当前页
+      queryInfo: {}, // 搜索的数据
+      isFristPage: false
     }
+  },
+  mounted() {
+    // 获取 表格列表
+    this.refresh()
+  },
+  methods: {
+    //  页面行数改变
+    setLimit(crrentSize) {
+      this.limit = crrentSize
+    },
+    setOffset(offset) {
+      this.offset = offset
+    },
+    //  搜索
+    selectData() {
+      this.queryInfo = { ...this.selectInfo } // 加入搜索内容
+      // 回到初始页
+      if (this.offset == 1) {
+        this.refresh()
+        return
+      }
+      this.offset = 1
+      // this.getListPage(this.limit,this.offset)
+      this.isFristPage = true
+      //  将分页组件 调到第一页
+    },
+    // 刷新
+    refresh() {
+      this.$nextTick(() => {
+        this.getListPage(this.limit, this.offset)
+      })
+    }
+  },
+  computed: {
+    total() {
+      const index = this.tableData.total / this.limit
+      return Math.ceil(index)
+    }
+  },
+  //  监听当前页 和当前页总条数的改变
+  watch: {
+    limit(newVls) {
+      this.getListPage(newVls, this.offset)
+    },
+    offset(newVls) {
+      this.getListPage(this.limit, newVls)
+    }
+  }
 }
 // 详情弹框相关数据
 const elDataDialog = {
-    data() {
-      return {
-          rowInfo:null,
-          isShowInfo:false,  
-      }
+  data() {
+    return {
+      rowInfo: null,
+      isShowInfo: false
+    }
+  },
+  methods: {
+    // 关闭详情
+    closeInfo() {
+      this.isShowInfo = false
     },
-    methods: {
-         // 关闭详情 
-         closeInfo() {
-          this.isShowInfo = false;
-        },
-         //  打开详情
-         showInfo(row){
-          console.log(row);
-          this.isShowInfo = true
-          // 改变当前行的数据
-          this.rowInfo = row
-        },
-    },
+    //  打开详情
+    showInfo(row) {
+      console.log(row)
+      this.isShowInfo = true
+      // 改变当前行的数据
+      this.rowInfo = row
+    }
   }
+}
 export {
-    listMixin,elDataDialog
-}
\ No newline at end of file
+  listMixin, elDataDialog
+}

diff --git a/src/components/mycomponent/dialog/snCodeFieldDialog.vue b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
index e5f4ba9..0adc36d 100644
--- a/src/components/mycomponent/dialog/snCodeFieldDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeFieldDialog.vue
@@ -8,65 +8,40 @@
     @close="close"
   >
     <div class="codeDialog">
-      <div class="content">
-        <div class="inputContent">
-          <!-- <div class="inputBox">
-            <red-star /><input-vue title="	SN码固定标识表主键id" class="inputWidth">
-              <el-select
-                v-model="addInfo.snFixedId"
-                filterable
-                style="width: 300px"
-                @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.id"
-                  :label="item.id"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </input-vue>
-          </div> -->
-          <div class="inputBox">
-            <red-star /><input-vue title="SN码（固定标识）" width="300px" class="inputWidth">
+      <el-form ref="dataForm" :rules="rules" :model="addInfo" class="inputContent" label-position="right" label-width="160px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(固定标识)" prop="snFixedCode">
               <el-select
                 v-model="addInfo.snFixedCode"
                 filterable
-                style="width: 300px"
+                style="width: 100%"
                 @change="snFixedIdChange"
-              >
-                <el-option
-                  v-for="item in snCodeList"
-                  :key="item.snCode"
-                  :label="item.snCode"
-                  :value="item.snCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snStartCode"
-              title="SN码（起始序列号）"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入起始编码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productCode"
-              title="产品型号编码 "
-              width="300px"
-              class="inputWidth"
-            >
-              <el-select
-                v-model="addInfo.productCode"
-                filterable
-                style="width: 300px"
-                @change="productChange"
-              >
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码固定标识名字" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.productCode" type="text" placeholder="根据标识自动生成的说明" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="SN码(起始序列号)" prop="snFixedCode">
+              <el-input v-model.trim="addInfo.snStartCode" type="text" placeholder="请输入起始编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="SN码(终止序列号)" prop="snEndCode">
+              <el-input v-model.trim="addInfo.snEndCode" type="text" placeholder="请输入终止码" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="设备型号" prop="productCode">
+              <el-select v-model="addInfo.productCode" filterable style="width: 100%" @change="productChange">
                 <el-option
                   v-for="(item,index) in productList"
                   :key="index"
@@ -74,126 +49,63 @@
                   :value="item.productCode"
                 />
               </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star />
-            <input-vue v-model.number="snSegmentNum" title="断码个数" width="300px" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.hardwareVersion"
-              title="硬件版本 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入硬件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="生产日期" class="inputWidth">
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="设备品牌" prop="productBrandName">
+              <el-input v-model.trim="addInfo.productBrandName" type="text" placeholder="根据型号自动填充品牌" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="硬件版本" prop="hardwareVersion">
+              <el-input v-model.trim="addInfo.hardwareVersion" type="text" placeholder="请输入硬件版本" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="软件版本" prop="softwareVersion">
+              <el-input v-model.trim="addInfo.softwareVersion" type="text" placeholder="请输入软件版本" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="productDate">
               <el-date-picker
                 v-model="addInfo.productDate"
-                style="width: 300px"
+                style="width: 100%"
                 type="date"
-                format="yyyy - MM - dd "
+                format="yyyy-MM-dd "
                 value-format="yyyy-MM-dd"
+                aria-placeholder="请选择生产日期"
               />
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <input-vue
-              v-model="addInfo.remark"
-              title="备注"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入备注"
-            />
-          </div>
-        </div>
-        <div class="inputContent">
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.snFixedIllustration"
-              title="SN码固定标识名字 "
-              class="inputWidth"
-              width="300px"
-              placeholder="根据标识自动生成的说明"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model.number="addInfo.snEndCode"
-              title="SN码（终止序列码） "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入终止码"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productId"
-              title="产品表id "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.productName"
-              title="产品型号名称 "
-              width="300px"
-              class="inputWidth"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue title="品牌编号" class="inputWidth">
-              <el-select
-                v-model="addInfo.productBrandCode"
-                filterable
-                style="width: 300px"
-                @change="brandCodeChange"
-              >
-                <el-option
-                  v-for="(item,index) in brandList"
-                  :key="index"
-                  :label="item.brandCode"
-                  :value="item.brandCode"
-                />
-              </el-select>
-            </input-vue>
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue v-model="addInfo.productBrandName" title="品牌名称" width="300px" placeholder="请根据型号自动填充品牌" class="inputWidth" />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.softwareVersion"
-              title="软件版本"
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入软件版本"
-            />
-          </div>
-          <div class="inputBox">
-            <red-star /><input-vue
-              v-model="addInfo.coreParts"
-              title="核心配件 "
-              width="300px"
-              class="inputWidth"
-              placeholder="请输入核心配件"
-            />
-          </div>
-        </div>
-      </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="核心配件" prop="coreParts">
+              <el-input v-model.trim="addInfo.coreParts" type="text" placeholder="请输入核心配件" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model.trim="addInfo.remark" type="text" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-      <div class="btnBox">
-        <el-button type="primary" class="save" @click="save">
-          保存
-        </el-button>
-        <el-button type="info" class="close" @click="close">
-          取消
-        </el-button>
-      </div>
+    <div class="btnBox">
+      <el-button type="primary" class="save" @click="save">
+        保存
+      </el-button>
+      <el-button type="info" class="close" @click="close">
+        取消
+      </el-button>
+    </div>
     </div>
   </el-dialog>
 </template>
@@ -247,19 +159,35 @@
     }
   },
   mounted() {
-    // snFixedId
-    S_list({}).then(res => {
-      this.snCodeList = res
-    })
-    list().then(res => {
-      this.productList = res
-    })
+    this.fetchSnFixedList()
+    this.fetchProductList()
     SelectList().then(res => {
       //  console.log(res,"==============");
       this.brandList = res
     })
   },
   methods: {
+    // 获取sn固定标识列表
+    fetchSnFixedList() {
+      const params = {
+        snCode: '',
+        snQuantity: ''
+      }
+      S_list(params).then(res => {
+        this.snCodeList = res
+      })
+    },
+    // 获取产品列表
+    fetchProductList() {
+      const data = {
+        productCode: '',
+        productName: '',
+        categoryId: ''
+      }
+      list(data).then(res => {
+        this.productList = res
+      })
+    },
     save() {
       const temp = { ...this.addInfo }
       temp.snSegmentNum = this.snSegmentNum
diff --git a/src/components/mycomponent/dialog/snCodeRulsDialog.vue b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
index ae82b98..dc6cf3f 100644
--- a/src/components/mycomponent/dialog/snCodeRulsDialog.vue
+++ b/src/components/mycomponent/dialog/snCodeRulsDialog.vue
@@ -1,10 +1,9 @@
 <!--SN码规则新增弹窗-->
 <template>
-  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
+  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
     <div class="snCodeRulsDialog ">
       <div class="header">
-        <red-star />
-        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
+        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
       </div>
       <div class="content">
         <div class="contentHeader contentItem">
@@ -18,15 +17,16 @@
         <!-- snCodeCofig -->
 
         <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
-          <div class="selectIcon">
+          <div style="line-height:42px; padding: 0px 10px">
             <el-radio v-model="select" :label="index" size="medium ">
               {{ '' }}
             </el-radio>
           </div>
           <code-field
-            :rule-list="item"
-            :all-info="[...addInfo.ruleList]"
+            :code-item="item"
             :index="index"
+            :pre-list="preItemList"
+            :relation-show="index>0"
             @changeRuleList="changeRuleList"
           />
         </div>
@@ -45,13 +45,11 @@
 
 <script>
 import InputVue from '../input/inputVue.vue'
-import DialogHeader from './dialogHeader.vue'
 import codeField from '../snCode/codeField.vue'
 import { S_add } from '../../../api/product/snCodeRuls'
 
 export default {
   components: {
-    DialogHeader,
     InputVue,
     codeField
 
@@ -66,11 +64,11 @@
     return {
       select: -1,
       addInfo: {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
-            snDigitName: ' ',
+            snDigit: 1,
+            snDigitName: '',
             snDigitOrder: '',
             checked: false,
             itemList: [
@@ -83,39 +81,80 @@
             ]
           }
         ]
+      } // 表单对象
+    }
+  },
+  computed: {
+    preItemList() {
+      const list = this.addInfo.ruleList.map((item, index) => {
+        return {
+          name: item.snDigitName,
+          value: index,
+          itemList: item.itemList
+        }
+      })
+      return list
+    }, // 所有项列表
+    codeLength() {
+      let length = 0
+      for (const item of this.addInfo.ruleList) {
+        length += item.snDigit
       }
+      return length
     }
   },
   methods: {
+    validateForm() {
+      // TODO: 校验表单数据
+      let flag = true
+      let message = ''
+      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
+        const rule = this.addInfo.ruleList[rindex]
+        if (rule.snDigitName === '') {
+          message += `第${rindex + 1}项固定码中，名称不得为空！`
+          flag = false
+          break
+        }
+        for (const code of rule.itemList) {
+          if (code.digitItem === '' || code.digitItemIllustration === '') {
+            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
+            flag = false
+            break
+          }
+          if (rule.checked && code.digitPre == '') {
+            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
+            flag = false
+            break
+          }
+          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
+            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
+            flag = false
+            break
+          }
+        }
+        if (!flag) {
+          break
+        }
+      }
+      if (!flag) {
+        this.$message.warning(message)
+      }
+      return flag
+    },
     save() {
-      let CodeNumber = 0
-      this.addInfo.ruleList.forEach(item => {
-        CodeNumber += item.snDigit
-        console.log(CodeNumber, this.addInfo.ruleList)
-      })
-      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
-      if (typeof (this.addInfo.snQuantity) === 'string') {
-        this.$message.error('请输入正确SN码（固定标识）个数')
-        return
-      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
-        this.$message.error('位数相加不等于SN码个数请调整')
-        return
-      } else if (this.addInfo.snQuantity == 0) {
-        this.$message.error('正确SN码（固定标识）个数不能为零')
-        return
-      } else {
+      if (this.validateForm()) {
         // 数据正确后开始对数据进行数据处理
         const subData = this.addInfo.ruleList.map((item, index) => {
           let aryTemp = null
-          // 1.处理前编码项
-          if (!item.checked) {
-            item.itemList = item.itemList.map(littleItem => {
-              return {
-                digitItem: littleItem.digitItem,
-                digitItemIllustration: littleItem.digitItemIllustration
-              }
-            })
-          }
+          // // 1.处理前编码项
+          // if (!item.checked) {
+          //   item.itemList = item.itemList.map(littleItem => {
+          //     return {
+          //       digitItem: littleItem.digitItem,
+          //       digitItemIllustration: littleItem.digitItemIllustration
+          //     }
+          //   })
+          // }
           //  去除checked参数
           aryTemp = {
             snDigit: item.snDigit,
@@ -127,25 +166,23 @@
         })
         //  提交数据
         S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
-          if (resp != '') {
-            this.$message.success('添加成功')
-            this.close()
-            this.reset()
-          }
+          this.$message.success('添加成功')
+          this.close()
+          this.reset()
+        }).catch(_ => {
+          console.log(_)
         })
       }
-
-      // if(CodeNumber == 0 )
     },
     close() {
       this.$emit('close')
     },
     reset() {
       this.addInfo = {
-        snQuantity: 0,
+        snQuantity: 1,
         ruleList: [
           {
-            snDigit: 0,
+            snDigit: 1,
             snDigitName: ' ',
             snDigitOrder: '',
             checked: false,
@@ -163,22 +200,22 @@
     },
     addCode() {
       this.addInfo.ruleList.push({
-        snDigit: 0,
-        snDigitName: '',
-        checked: false,
-        snDigitOrder: '',
+        snDigit: 1, // 位数
+        snDigitName: '', // 名称
+        checked: false, // 是否关联前项
+        snDigitOrder: '', // 顺序
         itemList: [
           {
-            digitItem: '',
-            digitPre: '',
-            digitItemIllustration: ''
+            digitItem: '', // 编码项
+            digitPre: '', // 前项编码
+            digitItemIllustration: '' // 编码说明
           }
-
         ]
       })
+      this.addInfo.snQuantity += 1 //
     },
     removeCode() {
-      if (this.select == -1) {
+      if (this.select === -1) {
         this.$message({
           message: '请选择删除项',
           type: 'error'
@@ -203,40 +240,33 @@
 
 <style lang="scss" scoped>
 .snCodeRulsDialog {
-  width: 1500px;
-
   .bgred {
     background: red;
     border: red;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .content {
-    border: 1px solid #666;
-    max-height: 500px;
+    width: 100%;
+    border: 1px solid #f0f0f0;
     overflow: auto;
-
+    border-radius: 10px;
+    margin-top: 20px ;
     .contentItem {
       padding: 10px;
-      border-bottom: 1px solid #999;
+      border-bottom: 1px solid #f0f0f0;
     }
-
     .item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: 10px;
     }
-
     .contentHeader {
       text-align: right;
     }
-
   }
-
   .btnBox {
     padding: 30px;
     box-sizing: border-box;
diff --git a/src/components/mycomponent/input/inputVue.vue b/src/components/mycomponent/input/inputVue.vue
index 56a50db..8a50163 100644
--- a/src/components/mycomponent/input/inputVue.vue
+++ b/src/components/mycomponent/input/inputVue.vue
@@ -1,28 +1,35 @@
 <!--输入组件-->
 <template>
   <div class="inputBox" :style="{width:boxWidth}">
+    <red-star v-if="redStar" />
     <div style="white-space: nowrap;" :class="{'ismargin':title}">
       {{ title }}{{ title?'：':'' }}
     </div>
     <!--可以自定义 输入框  -->
     <slot>
-      <el-input v-model="vls" :placeholder="placeholder" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
+      <el-input v-model="vls" :placeholder="placeholder" :size="size" :style="{width:width}" clearable :disabled="disabled" @input="changeinput" @blur="blurInput" />
     </slot>
   </div>
 </template>
 
 <script>
+import RedStar from '../redStar.vue'
 export default {
+  components: {
+    RedStar
+  },
   model: {
     prop: 'input',
     event: 'changeinput'
   },
   props: {
+    redStar: false,
     title: '',
     width: '',
     placeholder: '',
     boxWidth: '',
     input: '',
+    size: '',
     disabled: false
   },
   data() {
@@ -56,7 +63,7 @@
 .inputBox {
   display: flex;
   align-items: center;
-  margin: 5PX 10PX 5px 0;
+  margin: 5px 10px 5px 0;
   justify-content: space-between;
 }
 
diff --git a/src/components/mycomponent/snCode/codeField.vue b/src/components/mycomponent/snCode/codeField.vue
index 158f84c..848f023 100644
--- a/src/components/mycomponent/snCode/codeField.vue
+++ b/src/components/mycomponent/snCode/codeField.vue
@@ -4,42 +4,41 @@
     <div class="inputContent">
       <div class="inputBox">
         <red-star />
-        <input-vue v-model.number="itemInfo.snDigit" title="位数" width="150px" />
+        <input-vue v-model.number="itemInfo.snDigit" title="位数" size="small" width="80px" />
       </div>
     </div>
     <div class="inputContent">
       <div class="inputBox">
-        <red-star />
-        <input-vue v-model="itemInfo.snDigitName" title="名称" />
+        <input-vue v-model="itemInfo.snDigitName" title="名称" size="small" :red-star="true" />
       </div>
     </div>
     <div class="Content_content">
-      <div class="left_title">
-        <red-star />编码规则：
-      </div>
+      <div class="left_title" />
       <div class="right_content">
         <div class="title">
-          <div class="title_item">
-            <input-vue>
-              <el-checkbox v-model="itemInfo.checked">
+          <div class="inputBox">
+            <input-vue title="编码规则" width="150px" :red-star="true">
+              <el-checkbox v-model="itemInfo.checked" :disabled="!relationShow">
                 是否关联前一项
               </el-checkbox>
             </input-vue>
           </div>
-          <div class="title_item">
-            <input-vue title="关联项名称">
+          <div class="title_item" style="margin-left: 20px">
+            <input-vue title="关联项名称" box-width="200px" width="100px">
               <el-select
-                v-model="relevanceName"
+                v-model="relevance"
+                value-key="value"
                 filterable
                 placeholder="请选择"
-                style="width: 130px"
-                @change="changitemInfo"
+                style="width: 150px; margin-left: 10px"
+                size="small"
+                :disabled="!relationShow||!itemInfo.checked"
               >
                 <el-option
                   v-for="(item,index) in NameList"
                   :key="index"
-                  :label="item.snDigitName"
-                  :value="item.snDigitName"
+                  :label="item.name"
+                  :value="item"
                 />
               </el-select>
             </input-vue>
@@ -51,7 +50,7 @@
         </div>
         <div class="right_content_conetent">
           <div v-for="(item,index) in itemInfo.itemList" :key="index">
-            <code-item v-model=" itemInfo.itemList[index]" :checked="checked" :code-list="codelist" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
+            <code-item v-model=" itemInfo.itemList[index]" :checked="itemInfo.checked" :code-list="relevance?relevance.itemList:[]" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
           </div>
         </div>
       </div>
@@ -66,130 +65,83 @@
 import codeItem from './codeItem.vue'
 export default {
   components: { codeItem, InputVue, RedStar },
-  props: ['ruleList', 'allInfo', 'index'],
+  props: {
+    preList: {
+      type: Array,
+      default: () => {
+        return []
+      } // 前项下拉选择列表
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    codeItem: {
+      type: Object,
+      required: true
+    }, // 当前编码对象
+    relationShow: {
+      type: Boolean,
+      default: false
+    }// 是否可点击关联项
+  },
   data() {
     return {
       checked: false,
       itemInfo: {},
-      relevanceName: '',
-      codelist: '',
+      relevance: null,
       codeItemInfo: ''// 编码详情
     }
   },
   computed: {
-    NameList() {
-      // console.log(this.allInfo[0].itemList[0].digitItem,"=========");
-      const temp = [...this.allInfo]
-      const temp2 = temp.slice(0, this.index)
-      //  console.log(temp2[0].itemList[0].digitItem,"+=====temp2====");
-      return [...temp2]
-    // return []
+    NameList() { // 只取当前项之前的
+      return this.preList.slice(0, this.index)
     }
-    // codeList(){
-    //     const index = this.allInfo.findIndex(item => {
-
-    //       return  item.snDigitName = this.relevanceName
-    //       // console.log(item.snDigitName ,  this.relevanceName);
-    //     })
-    //     // if(index==-1) return []
-    //     // const temp  =  this.ruleList[index].itemList
-    //     // return [...temp]
-    //     return index
-    // }
   },
   watch: {
-
-    itemInfo: {
-      handler(vls) {
-        this.changitemInfo()
-        //  iteminfo改变时改变父组件
-        // 判断是否带前项编码
-        //  if(!vls.checked){
-
-        //  const  temp = vls.itemList.map(item => {
-        //    item.itemList = {
-        //      digitItem:item.digitItem,
-        //      digitItemIllustration:item.digitItemIllustration
-        //    }
-        //    return item
-        //  })
-        //    this.$emit('changeRuleList',{data:temp,index:this.index})
-        // // console.log(temp, "-===========================",vls);
-        // }else{
-        this.$emit('changeRuleList', { data: vls, index: this.index })
-      // }
+    codeItem: {
+      handler(val) {
+        this.itemInfo = val
       },
       deep: true
     },
-    allInfo: {
-      handler(vls) {
-        this.changitemInfo()
+    itemInfo: {
+      handler(val) {
+        this.$emit('changeRuleList', { data: val, index: this.index })
       },
       deep: true
     }
-    // checked(){
-    //     this.subInfo(this.itemInfo)
-    // }
-    // ruleList:{
-    //   handler(vls){
-
-    //     if(this.itemInfo.digitItem)
-    //    this.itemInfo = {...vls}
-    //   },
-    //   deep:true,
-    //   immediate:true
-    // }
   },
-  // model: {
-  //   prop: 'snDigitOrder',
-  //   event: 'changeSnDigitOrder'
-  // },
   mounted() {
-    this.itemInfo = { ...this.ruleList } // 单个框数据
-    //  allInfo 全部数据
-    // this.itemInfo = this.ruleList   // 根据 对象的性质
-    // this.$on('submitCode',()=>{console.log(11);})
-    // this.codeItemInfo =
+    this.itemInfo = this.codeItem
   },
   methods: {
+    // 移除编码项
     remove(index) {
       this.itemInfo.itemList.splice(index, 1)
     },
+    // 上移编码项
     upmove(index) {
-      if (index == 0) return
-      console.log(this.itemInfo)
+      if (index === 0) return
       const temp = this.itemInfo.itemList[index - 1]
       this.itemInfo.itemList[index - 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
       console.log(this.itemInfo.itemList[index])
     },
+    // 下移编码项
     downmove(index) {
-      console.log(index, this.itemInfo.itemList.length - 1)
-      if (index == this.itemInfo.itemList.length - 1) return
+      if (index === this.itemInfo.itemList.length - 1) return
       const temp = this.itemInfo.itemList[index + 1]
       this.itemInfo.itemList[index + 1] = this.itemInfo.itemList[index]
       this.itemInfo.itemList[index] = temp
     },
+    // 添加编码项
     addAry() {
-      console.log(this.itemInfo)
       this.itemInfo.itemList.push({
         digitItem: '',
         digitPre: '',
         digitItemIllustration: ''
       })
-    },
-    changitemInfo() {
-      const temp = this.NameList.findIndex(item => {
-        return item.snDigitName == this.relevanceName
-      })
-
-      if (temp == -1) return []
-      const ary = this.NameList[temp].itemList.map(item => {
-        return { digitItem: item.digitItem }
-      })
-      console.log(ary, '======ary=====')
-      this.codelist = ary
-    //  this.codelist = temp
     }
 
   }
@@ -198,17 +150,20 @@
 
 <style lang="scss" scoped>
 .codeItem {
+  display: flex;
+  flex: 1;
+  .inputContent {
+
+    .inputBox {
       display: flex;
-      flex: 1;
-      .inputContent {
-        flex: 1;
-        .inputBox {
-          display: flex;
-          align-items: center;
-        }
-      }
+      align-items: center;
+    }
+  }
+  .inputContent+.inputContent{
+    margin-left: 20px;
+  }
       .Content_content {
-        flex: 3;
+        flex: 1;
         display: flex;
         // align-items:center;
         .left_title{
diff --git a/src/components/mycomponent/snCode/codeItem.vue b/src/components/mycomponent/snCode/codeItem.vue
index 6174527..633f10a 100644
--- a/src/components/mycomponent/snCode/codeItem.vue
+++ b/src/components/mycomponent/snCode/codeItem.vue
@@ -1,14 +1,14 @@
 <!--SN码规则新增弹窗内置组件2-->
 <template>
   <div class="box">
-    <div v-if="checked" class="frontCode code">
-      <red-star />
-      <input-vue title="前项编码">
+    <div v-show="checked" class="frontCode code">
+      <input-vue title="前项编码" :red-star="true">
         <el-select
           v-model="itemInfo.digitPre"
           filterable
           placeholder="请选择"
           style="width: 100px"
+          size="small"
           @change="changeCodeinfo"
         >
           <el-option v-for="item in codeList" :key="item.digitItem" :label="item.digitItem" :value="item.digitItem" />
@@ -16,12 +16,10 @@
       </input-vue>
     </div>
     <div class="middleCode code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="CodeDesc code">
-      <red-star />
-      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" @submit="changeCodeinfo" />
+      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
     </div>
     <div class="title_item">
       <i class="el-icon-top icon" @click="move('up')" />
@@ -44,26 +42,28 @@
   },
   props: {
     checked: {
-      type: Boolean
-    },
-    codeInfo: {},
-    codeList: []
+      type: Boolean,
+      default: false
+    }, // 是否选中前置编码项
+    codeInfo: {
+      type: Object,
+      required: true
+    }, // 编码项
+    codeList: {
+      type: Array,
+      default: () => []
+    } // 前项编码列表
   },
   data() {
     return {
       itemInfo: {
-        digitItemIllustration: 1
+        digitItem: '',
+        digitPre: '',
+        digitItemIllustration: ''
       }
     }
   },
   watch: {
-    // itemInfo:{
-    //   handler(vls){
-    //     console.log(vls,"=========itemInfo===========");
-    //     // this.$emit('changeCodeInfo',vls)
-    //   },
-    //   deep:true
-    // },
     codeInfo: {
       handler(vls) {
         this.itemInfo = { ...vls }
@@ -76,12 +76,9 @@
 
   },
   methods: {
-
     // 移动
     move(str) {
-    //  console.log('submitCode');
-    //  this.$emit('submitCode')
-      if (str == 'up') {
+      if (str === 'up') {
         this.changeCodeinfo()
         this.$emit('upmove', str)
       } else {
@@ -94,7 +91,6 @@
       this.$emit('remove')
     },
     changeCodeinfo() {
-      // console.log(JSON.stringify(this.itemInfo));
       this.$emit('changeCodeInfo', this.itemInfo)
     }
   }
diff --git a/src/router/index.js b/src/router/index.js
index 54b62db..c0532a4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,7 +114,7 @@
 /* Layout */
 import Layout from '@/layout/Layout'
 
-import { exampleRouters } from './modules/example'
+// import { exampleRouters } from './modules/example'
 import { productManagemant } from './modules/productManagement'
 import { distributorManagement } from './modules/distributorManagement' // 经销商
 import { supplierManagement } from './modules/supplierManagement' // 供应商
@@ -197,6 +197,6 @@
   ...orderManagement,
   ...shopManagement,
   ...accountManagemant,
-  ...exampleRouters,
+  // ...exampleRouters,
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/utils/myUtils/mixins/listPage.js b/src/utils/myUtils/mixins/listPage.js
index 9bc028d..a9f21e5 100644
--- a/src/utils/myUtils/mixins/listPage.js
+++ b/src/utils/myUtils/mixins/listPage.js
@@ -1,85 +1,83 @@
 const listMixin = {
-    data(){
-        return {
-            tableData:{rows:[]}
-             , // 品牌表格数据
-            limit:10, // 当前的行数
-            offset:1, //当前页
-            queryInfo:{} ,  // 搜索的数据
-            isFristPage:false
-        }
-    },
-    mounted(){
-        //获取 表格列表
-      
-         this.refresh()
-      },
-    methods: {
-        //  页面行数改变
-        setLimit(crrentSize) {
-            this.limit = crrentSize
-        },
-        setOffset(offset) {
-            this.offset = offset
-        },
-          //  搜索
-        selectData(){
-        this.queryInfo = {...this.selectInfo}  // 加入搜索内容
-        // 回到初始页
-        if(this.offset ==1){
-          this.refresh()
-          return
-        }
-        this.offset =1 
-        // this.getListPage(this.limit,this.offset) 
-        this.isFristPage= true
-        //  将分页组件 调到第一页
-      },
-      // 刷新
-         refresh(){
-         this.$nextTick(()=>{
-          this.getListPage(this.limit,this.offset)   
-        })
-       },
-    },
-    computed: {
-        total() {
-            let index = this.tableData.total / this.limit
-            return Math.ceil(index)
-        }
-    },
-    //  监听当前页 和当前页总条数的改变 
-    watch: {
-        limit(newVls) {
-            this.getListPage(newVls, this.offset)
-        },
-        offset(newVls) {
-            this.getListPage(this.limit, newVls)
-        }
+  data() {
+    return {
+      tableData: { rows: [] }, // 品牌表格数据
+      limit: 10, // 当前的行数
+      offset: 1, // 当前页
+      queryInfo: {}, // 搜索的数据
+      isFristPage: false
     }
+  },
+  mounted() {
+    // 获取 表格列表
+    this.refresh()
+  },
+  methods: {
+    //  页面行数改变
+    setLimit(crrentSize) {
+      this.limit = crrentSize
+    },
+    setOffset(offset) {
+      this.offset = offset
+    },
+    //  搜索
+    selectData() {
+      this.queryInfo = { ...this.selectInfo } // 加入搜索内容
+      // 回到初始页
+      if (this.offset == 1) {
+        this.refresh()
+        return
+      }
+      this.offset = 1
+      // this.getListPage(this.limit,this.offset)
+      this.isFristPage = true
+      //  将分页组件 调到第一页
+    },
+    // 刷新
+    refresh() {
+      this.$nextTick(() => {
+        this.getListPage(this.limit, this.offset)
+      })
+    }
+  },
+  computed: {
+    total() {
+      const index = this.tableData.total / this.limit
+      return Math.ceil(index)
+    }
+  },
+  //  监听当前页 和当前页总条数的改变
+  watch: {
+    limit(newVls) {
+      this.getListPage(newVls, this.offset)
+    },
+    offset(newVls) {
+      this.getListPage(this.limit, newVls)
+    }
+  }
 }
 // 详情弹框相关数据
 const elDataDialog = {
-    data() {
-      return {
-          rowInfo:null,
-          isShowInfo:false,  
-      }
+  data() {
+    return {
+      rowInfo: null,
+      isShowInfo: false
+    }
+  },
+  methods: {
+    // 关闭详情
+    closeInfo() {
+      this.isShowInfo = false
     },
-    methods: {
-         // 关闭详情 
-         closeInfo() {
-          this.isShowInfo = false;
-        },
-         //  打开详情
-         showInfo(row){
-          console.log(row);
-          this.isShowInfo = true
-          // 改变当前行的数据
-          this.rowInfo = row
-        },
-    },
+    //  打开详情
+    showInfo(row) {
+      console.log(row)
+      this.isShowInfo = true
+      // 改变当前行的数据
+      this.rowInfo = row
+    }
   }
+}
 export {
-    listMixin,elDataDialog
-}
\ No newline at end of file
+  listMixin, elDataDialog
+}
diff --git a/src/views/product/snCodeRuls.vue b/src/views/product/snCodeRuls.vue
index 73da71e..8c0d4cd 100644
--- a/src/views/product/snCodeRuls.vue
+++ b/src/views/product/snCodeRuls.vue
@@ -5,62 +5,27 @@
       <div class="productInput">
         SN码 (固定标识):
         <div class="inputBox" style="width: 200px">
-          <el-input
-            v-model="selectInfo.snCode"
-            placeholder="请输入SN码固定标识"
-            clearable
-            class="product-input"
-          />
+          <el-input v-model="selectInfo.snCode" placeholder="请输入SN码固定标识" clearable class="product-input" />
         </div>
         个数:
-        <div class="inputBox" style="width: 200px">
-          <el-input
-            v-model="selectInfo.snQuantity"
-            placeholder="请输入SN码固定标识个数"
-            clearable
-            class="product-input"
-          />
+        <div class="inputBox" style="width: 220px">
+          <el-input v-model="selectInfo.snQuantity" placeholder="请输入SN码固定标识个数" clearable class="product-input" />
         </div>
       </div>
       <div class="productBtn">
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          class="btnItem"
-          @click="selectData"
-        >
+        <el-button type="primary" icon="el-icon-search" class="btnItem" @click="selectData">
           查询
         </el-button>
-        <el-button
-          type="primary"
-          icon="el-icon-refresh-right"
-          class="btnItem"
-          @click="reset"
-        >
+        <el-button type="primary" icon="el-icon-refresh-right" class="btnItem" @click="reset">
           重置
         </el-button>
-        <el-button
-          type="success"
-          icon="el-icon-circle-plus-outline"
-          class="btnItem bggreen"
-          @click="addCategory"
-        >
+        <el-button type="success" icon="el-icon-circle-plus-outline" class="btnItem bggreen" @click="addCategory">
           新增
         </el-button>
-        <el-button
-          type="danger"
-          icon="el-icon-delete-solid"
-          class="btnItem bgred"
-          @click=" BatchDelete"
-        >
+        <el-button type="danger" icon="el-icon-delete-solid" class="btnItem bgred" @click=" BatchDelete">
           删除
         </el-button>
-        <el-button
-          type="primary"
-          icon="el-icon-folder-opened"
-          class="btnItem"
-          @click="exportToExcel"
-        >
+        <el-button type="primary" icon="el-icon-folder-opened" class="btnItem" @click="exportToExcel">
           导出
         </el-button>
       </div>
@@ -143,6 +108,7 @@
     tableRowClassName: tableRowClassName,
     closeAdd() {
       this.isShowAdd = false
+      this.refresh()
     },
     addCategory() {
       this.isShowAdd = true
@@ -177,27 +143,22 @@
         ids.push(ele.id)
       })
       S_batchDelete({ ids: ids }).then(res => {
-        if (res != '') {
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.refresh()
-        }
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        this.refresh()
       })
     },
     // 删除
     Bdelete(row) {
       const id = row.id
       S_delete({ id: id }).then(res => {
-        // 删除成功跟新数据
-        if (res != '') {
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.refresh()
-        }
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        this.refresh()
       })
     }
   }