diff --git a/src/views/deviceManage/shelfManage/codeRules.vue b/src/views/deviceManage/shelfManage/codeRules.vue
index 6a768e4..c209836 100644
--- a/src/views/deviceManage/shelfManage/codeRules.vue
+++ b/src/views/deviceManage/shelfManage/codeRules.vue
@@ -97,40 +97,77 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="规则设置" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="settingDialog" :before-close="handleClose">
+    <el-dialog class="rules-setting-dialog" title="规则设置" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="settingDialog" :before-close="handleClose">
       <div class="setting-dialog">
         <div class="setting-tip"><i class="iconfont icon-zhuyi-lan" /><span>“机构编码”只能显示在最前，其他项目可根据机构的现行规则修改显示顺序 (使用鼠标拖拽完成操作) ！</span></div>
         <el-checkbox v-model="isConnector">编号显示时加入连接字符“-”</el-checkbox>
 
         <div class="config-field">
           <div
-            v-for="(item,index) in field"
-            :key="index"
+            v-for="(item,index) in tempField"
+            :key="item.id"
             class="config-field-item"
-            :data-index="index"
+            :class="{ 'org-item': item.name === '机构' }"
           >
-            {{ item.name }}
+            <div :class="['setting-conent', { 'disabled-fonds': item.name === '机构' }]">
+              <p class="setting-title">{{ item.name }}</p>
+
+              <div v-if="item.name === '机构'" class="setting-form-item">
+                <el-checkbox-group v-model="fondsCodeType">
+                  <el-checkbox v-for="i in fondsCodeOptions" :key="i.value" :label="i.value">{{ i.label }}</el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <div v-if="item.name === '区域'" class="setting-form-item">
+                数据来源见区域管理！
+              </div>
+              <div v-if="item.name === '排'" class="setting-form-item">
+                <div class="number-input-style">
+                  <el-input-number v-model="row" controls-position="right" :min="1" :max="10" />
+                  <span class="unit-style">位</span>
+                </div>
+              </div>
+              <div v-if="item.name === '面'" class="setting-form-item">
+                <span>A/B 或 1/2</span>
+                <el-checkbox v-model="isNumber">编号采用<br>数字显示</el-checkbox>
+              </div>
+              <div v-if="item.name === '架/列'" class="setting-form-item">
+                <div class="number-input-style">
+                  <el-input-number v-model="line" controls-position="right" :min="1" :max="10" />
+                  <span class="unit-style">位</span>
+                </div>
+              </div>
+
+              <div v-if="item.name === '层'" class="setting-form-item">
+                <div class="number-input-style">
+                  <el-input-number v-model="layer" controls-position="right" :min="1" :max="10" />
+                  <span class="unit-style">位</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="index < tempField.length - 1" class="setting-connector">
+              <span v-if="isConnector">-</span>
+            </div>
           </div>
         </div>
 
         <div style="padding: 10px; background-color: #eef5fe;">
           <p class="setting-title">当前设置</p>
-          <ul class="setting-list">
+          <ul class="setting-list" style="width: 100%;">
             <li>
               <span>中文显示规则：</span>
-              <p>区域-排-面-架/列-层</p>
+              <p>{{ previewData.cnRule }}</p>
             </li>
             <li>
               <span>例如：</span>
-              <p>01区001排A面01架6层</p>
+              <p>{{ previewData.cnExample }}</p>
             </li>
             <li>
               <span>编号显示规则：</span>
-              <p>机构-区域-排-面-架/列-层 </p>
+              <p>{{ previewData.codeRule }}</p>
             </li>
             <li>
               <span>例如：</span>
-              <p>FTZN-01-001-A-01-6</p>
+              <p>{{ previewData.codeExample }}</p>
             </li>
           </ul>
         </div>
@@ -168,22 +205,105 @@ export default {
         verifyCode: ''
       },
       verifyStatus: '',
+      tempField: [],
       showVerifyDialog: true,
-      settingDialog: true,
-      isConnector: false
+      settingDialog: false,
+      isConnector: true,
+      fondsCodeOptions: [
+        {
+          label: '中文显示',
+          value: 1
+        },
+        {
+          label: '英文显示',
+          value: 2
+        }
+      ],
+      fondsCodeType: [1, 2],
+      row: 3,
+      line: 2,
+      layer: 1,
+      isNumber: false
     }
   },
   computed: {
-    ...mapGetters([
-      'baseApi'
-    ])
+    ...mapGetters(['baseApi', 'user']),
+
+    previewData() {
+      // 判断是否选中中文/英文
+      const hasChinese = this.fondsCodeType.includes(1)
+      const hasEnglish = this.fondsCodeType.includes(2)
+
+      // 生成机构显示文本
+      const orgCnText = this.user.fonds.fondsName
+      const orgCodeText = this.user.fonds.fondsNo
+
+      // 字段预览规则
+      const fieldRules = {
+        '机构': {
+          cn: orgCnText,
+          code: orgCodeText,
+          // 控制是否在预览中显示
+          showInCn: hasChinese,
+          showInCode: hasEnglish
+        },
+        '区域': {
+          cn: '01区',
+          code: '01',
+          showInCn: true,
+          showInCode: true
+        },
+        '排': {
+          cn: this._formatNumber(1, this.row) + '排',
+          code: this._formatNumber(1, this.row),
+          showInCn: true,
+          showInCode: true
+        },
+        '面': {
+          cn: this.isNumber ? '1面' : 'A面',
+          code: this.isNumber ? '1' : 'A',
+          showInCn: true,
+          showInCode: true
+        },
+        '架/列': {
+          cn: this._formatNumber(1, this.line) + '架',
+          code: this._formatNumber(1, this.line),
+          showInCn: true,
+          showInCode: true
+        },
+        '层': {
+          cn: this._formatNumber(6, this.layer) + '层',
+          code: this._formatNumber(6, this.layer),
+          showInCn: true,
+          showInCode: true
+        }
+      }
+
+      // 筛选需要显示的字段
+      const cnFields = this.tempField.filter(item => fieldRules[item.name].showInCn)
+      const codeFields = this.tempField.filter(item => fieldRules[item.name].showInCode)
+
+      // 生成预览文本
+      return {
+        // 中文显示规则
+        cnRule: cnFields.map(item => item.name).join(' - '),
+        // 中文示例
+        cnExample: cnFields.map(item => fieldRules[item.name].cn).join(this.isConnector ? '-' : ''),
+        // 编号显示规则
+        codeRule: codeFields.map(item => item.name).join(' - '),
+        // 编号示例
+        codeExample: codeFields.map(item => fieldRules[item.name].code).join(this.isConnector ? '-' : '')
+      }
+    }
+
   },
   mounted() {
-    this.$nextTick(() => {
-      this.draggableScreen()
-    })
+
   },
   methods: {
+    _formatNumber(value, length) {
+      return value.toString().padStart(length, '0')
+    },
     handleRemarkHover(index) {
       this.hoverIndex = index
     },
@@ -207,7 +327,10 @@ export default {
           this.verfiyForm.verifyCode = ''
           this.showVerifyDialog = false
           this.settingDialog = true
-          this.draggableScreen()
+          this.$nextTick(() => {
+            this.tempField = JSON.parse(JSON.stringify(this.field))
+            this.draggableScreen()
+          })
         } else {
           this.$message({ message: '验证码错误！', type: 'error', offset: 8 })
         }
@@ -216,27 +339,17 @@ export default {
     draggableScreen() {
       const container = document.querySelector('.config-field')
       const that = this
-      let originalOrder = [...this.field.map(item => item.id)]
+      // 找到机构项的初始索引
       Sortable.create(container, {
-        draggable: '.config-field-item',
+        draggable: '.config-field-item:not(.org-item)',
+        // draggable: '.config-field-item',
         animation: 150,
-        onStart() {
-          originalOrder = [...that.field.map(item => item.id)]
-        },
+        filter: '.disabled-fonds, .setting-connector',
         onEnd({ newIndex, oldIndex }) {
           if (newIndex === oldIndex) return
-
-          // 执行元素移动操作
-          const movedItem = that.field.splice(oldIndex, 1)[0]
-          that.field.splice(newIndex, 0, movedItem)
-
-          // 检查顺序是否真的发生了变化
-          const newOrder = [...that.field.map(item => item.id)]
-          console.log('newOrder', newOrder)
-          if (!that.arraysEqual(originalOrder, newOrder)) {
-            // 顺序变化，提交show_screen数据
-            // that.submitScreenOrderAndStatus()
-          }
+          console.log('newIndex', newIndex)
+          that.tempField.splice(newIndex, 0, that.tempField.splice(oldIndex, 1)[0])
+          console.log('that.tempField', that.tempField)
         }
       })
     },
@@ -423,7 +536,7 @@ export default {
 .setting-list{
   display: flex;
   flex-wrap: wrap;
-  width: 600px;
+  width: 1000px;
   font-size: 14px;
   li{
     display: flex;
@@ -439,11 +552,18 @@ export default {
   }
 }
 
+.rules-setting-dialog{
+  ::v-deep .el-dialog{
+    width: 900px;
+  }
+}
+
 .setting-tip{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   line-height: 26px;
+  margin-bottom: 15px;
   span{
     display: inline-block;
     font-size: 12px;
@@ -458,11 +578,88 @@ export default {
 .config-field{
   display: flex;
   justify-content: flex-start;
+  padding: 20px 0;
 }
 
 .config-field-item{
-  width: 100px;
-  height: 100px;
-  border: 1px solid #0348F3;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .setting-conent{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 120px;
+    height: 150px;
+    padding: 10px 0;
+    border: 1px solid #e6e8ed;
+    background-color: #fff;
+    border-radius: 4px;
+    .setting-title{
+      height: 40px;
+      line-height: 40px;
+    }
+    .setting-form-item{
+      flex: 1;
+      border:1px solid #e6e8ed;
+      border-radius: 4px;
+      width: 100px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 0 6px;
+      ::v-deep .el-checkbox{
+        display: flex;
+        align-items: center;
+        width: 80px;
+        margin-top: 6px;
+        margin-right: 0 !important;
+      }
+    }
+  }
+  .disabled-fonds{
+    background-color: #e6e8ed;
+    .setting-form-item{
+      background-color: #fff;
+    }
+  }
+  .setting-connector{
+    width: 30px;
+    font-size: 22px;
+    font-weight: bold;
+    color: #0c0e1e;
+    text-align: center;
+    span{
+      display: block;
+
+    }
+  }
+}
+
+.number-input-style{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  ::v-deep .el-input-number{
+    width: 65px;
+
+    .el-input__inner{
+      padding-right: 34px;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  .unit-style{
+    display: block;
+    height: 32px;
+    line-height: 32px;
+    background-color: #f5f7fa;
+    color: #909399;
+    padding: 0 4px;
+    border: 1px solid #dcdfe6;
+    border-left: 0;
+    border-radius: 0 4px 4px 0;
+  }
 }
 </style>