著录界面

src/assets/iconfonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 3409379 */
-  src: url('iconfont.woff2?t=1653383362524') format('woff2'),
-       url('iconfont.woff?t=1653383362524') format('woff'),
-       url('iconfont.ttf?t=1653383362524') format('truetype');
+  font-family: 'iconfont';  /* Project id 3409379 */
+  src: url('//at.alicdn.com/t/font_3409379_goi7jp83r8m.woff2?t=1653633971812') format('woff2'),
+       url('//at.alicdn.com/t/font_3409379_goi7jp83r8m.woff?t=1653633971812') format('woff'),
+       url('//at.alicdn.com/t/font_3409379_goi7jp83r8m.ttf?t=1653633971812') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,18 @@
   line-height: 32px;
 }
 
+.icon-weibiaoti-2:before {
+  content: "\e619";
+}
+
+.icon-paixu-fanbai:before {
+  content: "\e618";
+}
+
+.icon-rili:before {
+  content: "\e617";
+}
+
 .icon-yonghuyouxiang-fanbai:before {
   content: "\e616";
 }

src/assets/styles/index.scss

@@ -228,4 +228,28 @@ ul{
       width: 73px !important;
     }
   }
+  .des-preview-left{
+    width: 510px;
+    flex: auto !important;
+    .des-form{
+      width: 100% !important;
+      .el-input__inner{
+        width: 100% !important;
+      }
+      .input-num .el-input__inner{
+        width: 30px !important;
+      }
+      .input-num {
+        .el-form-item__content .el-input{
+          width: 100% !important;
+          margin-right: 6px;
+        }
+        .el-input__inner{
+          padding: 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+
 }

src/views/category/descriptionPreview/form.json

@@ -0,0 +1,180 @@
+[{
+  "id": "1",
+  "fieldName": "qzm",
+  "fieldCnName": "全宗名",
+  "isInputClass": "select",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "2",
+  "fieldName": "bmmc",
+  "fieldCnName": "部门名称",
+  "isInputClass": "select",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 1
+},
+{
+  "id": "3",
+  "fieldName": "ddnd",
+  "fieldCnName": "归档年度",
+  "isInputClass": "popover",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 1
+},
+{
+  "id": "4",
+  "fieldName": "wh",
+  "fieldCnName": "文号",
+  "isInputClass": "text",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 1
+},
+{
+  "id": "5",
+  "fieldName": "jg",
+  "fieldCnName": "机构(问题)",
+  "isInputClass": "select",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "6",
+  "fieldName": "jh",
+  "fieldCnName": "件号",
+  "isInputClass": "number",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "7",
+  "fieldName": "date1",
+  "fieldCnName": "成交日期",
+  "isInputClass": "date",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "8",
+  "fieldName": "dh",
+  "fieldCnName": "档号",
+  "isInputClass": "text",
+  "isDisplayWidth": 200,
+  "isFullRow": 1,
+  "isRequired": 0
+},
+{
+  "id": "9",
+  "fieldName": "th",
+  "fieldCnName": "题号",
+  "isInputClass": "textarea",
+  "isDisplayWidth": 516,
+  "isFullRow": 1,
+  "isRequired": 0
+},
+{
+  "id": "10",
+  "fieldName": "bgqx",
+  "fieldCnName": "保管期限",
+  "isInputClass": "select",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "11",
+  "fieldName": "zrz",
+  "fieldCnName": "责任者",
+  "isInputClass": "text",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "12",
+  "fieldName": "ys",
+  "fieldCnName": "页数",
+  "isInputClass": "number",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "13",
+  "fieldName": "fs",
+  "fieldCnName": "份数",
+  "isInputClass": "number",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "14",
+  "fieldName": "mj",
+  "fieldCnName": "密级",
+  "isInputClass": "select",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "15",
+  "fieldName": "gdbz",
+  "fieldCnName": "归档标识",
+  "isInputClass": "select",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "16",
+  "fieldName": "ljr",
+  "fieldCnName": "立卷人",
+  "isInputClass": "text",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "17",
+  "fieldName": "date2",
+  "fieldCnName": "立卷时间",
+  "isInputClass": "date",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "18",
+  "fieldName": "jcr",
+  "fieldCnName": "检查人",
+  "isInputClass": "text",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "18",
+  "fieldName": "date3",
+  "fieldCnName": "检查时间",
+  "isInputClass": "date",
+  "isDisplayWidth": 200,
+  "isFullRow": 0,
+  "isRequired": 0
+},
+{
+  "id": "19",
+  "fieldName": "bz",
+  "fieldCnName": "备注",
+  "isInputClass": "text",
+  "isDisplayWidth": 516,
+  "isFullRow": 1,
+  "isRequired": 0
+}]

src/views/category/descriptionPreview/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="category-main">
     <div class="des-preview-left">
-      <h4 class="des-title">字段调整 显示字段</h4>
+      <div class="des-title">
+        <p>字段调整 显示字段</p>
+      </div>
       <ul class="des-fields">
         <li v-for="(item,index) in showFields" :key="index">
           <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
@@ -9,7 +11,9 @@
           </el-tooltip>
         </li>
       </ul>
-      <h4 class="des-title">隐藏字段</h4>
+      <div class="des-title">
+        <p>隐藏字段 <i class="el-icon-arrow-down" /></p>
+      </div>
       <ul class="des-fields">
         <li v-for="(item,index) in showFields" v-show="index>13" :key="index">
           <el-tooltip class="item" effect="dark" :content="item.fieldCnName" :enterable="false" placement="top">
@@ -18,40 +22,116 @@
         </li>
       </ul>
       <div class="des-set-btn">
-        <el-button type="primary">修改</el-button>
-        <el-button type="primary">排序</el-button>
+        <el-button type="primary" icon="el-icon-edit">修改</el-button>
+        <el-button class="des-set-sort" type="primary" icon="iconfont icon-paixu-fanbai">排序</el-button>
       </div>
       <div class="des-form">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-          <el-form-item label="字段类型" prop="fieldCnName">
-            <el-input v-model="form.fieldCnName" />
-          </el-form-item>
-          <el-form-item label="字段长度" prop="fieldName">
-            <el-input v-model="form.fieldName" />
-          </el-form-item>
-          <el-form-item label="著录形式" prop="isDataType">
-            <el-select v-model="form.isDataType" placeholder="请选择">
-              <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
-              <el-option label="区域二" value="beijing" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="对应字典" prop="isColumnLength">
-            <el-input-number v-model="form.isColumnLength" controls-position="right" />
-          </el-form-item>
-          <el-form-item label="显示长度" prop="isDefaultValue">
-            <el-input v-model="form.isDefaultValue" />
-          </el-form-item>
-        </el-form>
+        <el-row :gutter="10">
+          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="75px">
+            <el-col :span="15">
+              <el-form-item label="字段类型" prop="fieldCnName">
+                <el-select v-model="form.isDataType" placeholder="" disabled>
+                  <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
+                  <el-option label="区域二" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="字段长度" prop="fieldName">
+                <el-input v-model="form.fieldName" placeholder="" disabled />
+              </el-form-item>
+              <el-form-item label="著录形式" prop="isDataType">
+                <el-select v-model="form.isDataType" placeholder="" disabled>
+                  <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
+                  <el-option label="区域二" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="对应字典" prop="isColumnLength">
+                <el-select v-model="form.isDataType" placeholder="" disabled>
+                  <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> -->
+                  <el-option label="区域二" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="显示长度" prop="isDefaultValue">
+                <el-input v-model="form.isDefaultValue" disabled />
+              </el-form-item>
+              <el-form-item label="默认值" prop="isDefaultValue">
+                <el-input v-model="form.isDefaultValue" disabled />
+              </el-form-item>
+              <el-form-item class="checkbox-item">
+                <span>自动补零</span>
+                <el-checkbox v-model="form.type" label="" name="type" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item class="checkbox-item">
+                <span>显示一整行</span>
+                <el-checkbox v-model="form.type" label="" name="type" disabled />
+              </el-form-item>
+              <el-form-item class="checkbox-item">
+                <span>输入字段</span>
+                <el-checkbox v-model="form.type" label="" name="type" disabled />
+              </el-form-item>
+              <el-form-item class="checkbox-item">
+                <span>必填字段</span>
+                <el-checkbox v-model="form.type" label="" name="type" disabled />
+              </el-form-item>
+              <el-form-item class="checkbox-item">
+                <span>自动生成</span>
+                <el-checkbox v-model="form.type" label="" name="type" disabled />
+              </el-form-item>
+              <el-form-item class="checkbox-item">
+                <span>自动加一</span>
+                <el-checkbox v-model="form.type" label="" name="type" disabled />
+              </el-form-item>
+              <el-form-item class="checkbox-item">
+                <span>值不重复</span>
+                <el-checkbox v-model="form.type" label="" name="type" disabled />
+              </el-form-item>
+              <el-form-item class="input-num" label="位数" prop="num">
+                <el-input v-model="form.num" disabled />
+                <span>位</span>
+              </el-form-item>
+            </el-col>
+          </el-form>
+        </el-row>
       </div>
     </div>
     <div class="des-preview-right">
-      <h4 class="des-title">界面预览效果</h4>
+      <div class="des-title">
+        <p>界面预览效果</p>
+      </div>
+      <div class="preview-content des-form">
+        <el-row :gutter="4">
+          <el-form label-width="100px">
+            <el-col v-for="(item,index) in formPreviewData" :key="index" :span="item.isFullRow ? 24 : 12">
+              <el-form-item :label="item.fieldCnName" prop="fieldCnName">
+                <!-- select  -->
+                <el-select v-if="item.isInputClass === 'select'" v-model="item.fieldName" placeholder="" :style="{ width: item.isDisplayWidth+'px'}">
+                  <el-option label="区域二" value="beijing" />
+                </el-select>
+                <!-- text  -->
+                <el-input v-if="item.isInputClass === 'text'" v-model="item.fieldName" :style="{ width: item.isDisplayWidth+'px'}" />
+                <!-- number  -->
+                <el-input v-if="item.isInputClass === 'number'" v-model="item.fieldName" type="number" :style="{ width: item.isDisplayWidth+'px'}" />
+                <!-- date  -->
+                <el-date-picker v-if="item.isInputClass === 'date'" v-model="item.fieldName" type="date" align="right" format="yyyy 年 MM 月 dd 日" placeholder="" :style="{ width: item.isDisplayWidth+'px'}" />
+                <!-- popover  -->
+                <el-input v-if="item.isInputClass === 'popover'" v-model="item.fieldName" class="input-popover" :style="{ width: item.isDisplayWidth+'px'}">
+                  <i slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" />
+                </el-input>
+                <!-- textarea  -->
+                <el-input v-if="item.isInputClass === 'textarea'" v-model="item.fieldName" type="textarea" rows="3" :style="{ width: item.isDisplayWidth+'px'}" />
+              </el-form-item>
+            </el-col>
+          </el-form>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import data from './data.json'
+import formData from './form.json'
 export default {
   name: 'DescriptionPreview',
   components: {},
@@ -59,35 +139,72 @@ export default {
     return {
       showFields: [],
       form: {},
-      rules: {}
+      rules: {},
+      formPreviewData: [],
+      value1: ''
     }
   },
   mounted() {
     this.showFields = data
+    this.formPreviewData = formData
   },
   methods: {
   }
 }
 </script>
-
 <style lang="scss" scoped>
 .category-main{
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding: 20px;
-  .des-preview-left{
-    width: 500px;
+  .des-preview-left,
+  .des-preview-right{
     height: calc(100vh - 274px);
-    overflow:hidden;
+    padding-right: 10px;
+    // overflow:hidden;
     overflow-y: auto;
+  }
 
+  .des-preview-left{
+    // width: 510px;
+    flex: 1;
   }
   .des-title{
+    position: relative;
+    height: 28px;
     margin-bottom: 10px;
+    padding-left: 46px;
     font-size: 14px;
+    font-weight: bold;
     color: #fff;
-    height: 28px;
-    line-height: 28px;
+    cursor: pointer;
+    p{
+      position: absolute;
+      left: 46px;
+      top: 0;
+      line-height: 28px;
+      background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 1)), to(rgba(46, 143, 237, 1)));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      z-index: 2;
+      i{
+        font-size: 16px;
+        margin-left: 6px;
+        background-image: none;
+        -webkit-text-fill-color: #fff;
+      }
+    }
+    &::before{
+      content:"";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 93px;
+      height: 28px;
+      background: url(~@/assets/images/des_title.png) no-repeat;
+      background-size: contain;
+      z-index: 1;
+    }
   }
   .des-fields{
     display: flex;
@@ -117,16 +234,124 @@ export default {
       }
     }
   }
+  .des-set-btn{
+    text-align: right;
+    .el-button{
+      background-color: #3A99FD;
+    }
+    .des-set-sort{
+      ::v-deep .iconfont{
+        line-height: 0 !important;
+      }
+      ::v-deep span{
+        margin-left: 5px;
+      }
+    }
+  }
 
   .des-form{
     width: 496px;
-    padding: 20px 0;
+    padding: 20px 38px 20px 20px;
     margin-top: 30px;
     border-radius: 4px;
     background-color: #02255F;
+    ::v-deep .el-form-item__label{
+      font-weight: normal;
+      line-height: 36px;
+      color: #3A99FD;
+    }
+    ::v-deep .el-input__inner{
+      width: 200px;
+      height: 36px;
+      line-height: 36px;
+      color: #3A99FD;
+      background: #021941;
+      border: none;
+      &::placeholder{
+        color: #3A99FD !important;
+      }
+      &::-webkit-input-placeholder{
+        color: #3A99FD !important;
+      }
+    }
+    ::v-deep .el-input__icon{
+      color: #3A99FD;
+    }
+    .checkbox-item{
+      height: 36px;
+      line-height: 36px;
+      text-align: right;
+      ::v-deep .el-form-item__content{
+        margin-left: 0 !important;
+      }
+      ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner{
+        background-color: transparent;
+        border-color: #339CFF;
+        &::after{
+          border-color: #3A99FD;
+        }
+      }
+      span{
+        margin-right: 10px;
+        color: #3A99FD;
+      }
+    }
+    .input-num{
+      display: flex;
+      justify-content: flex-end;
+      ::v-deep .el-input__inner{
+        width: 50px;
+      }
+      ::v-deep .el-form-item__content{
+        display: flex;
+        justify-content: flex-start;
+        margin-left: 0 !important;
+        .el-input{
+          width: 60px;
+        }
+      }
+      span{
+        color: #3A99FD;
+        line-height: 36px;
+      }
+    }
   }
   .des-preview-right{
-
+    width: 658px;
+    margin-left: 20px;
+    .preview-content{
+      width: 630px;
+      min-height: calc(100vh - 312px);
+      padding: 20px 15px 20px 0;
+      margin-top: 0;
+      border-radius: 4px;
+      background-color: #02255F;
+      ::v-deep .el-input__inner{
+        width: 100%;
+      }
+      ::v-deep .el-textarea__inner{
+        width: 100%;
+        color: #3A99FD;
+        background: #021941;
+        border: none;
+        &::placeholder{
+          color: #3A99FD !important;
+        }
+        &::-webkit-input-placeholder{
+          color: #3A99FD !important;
+        }
+      }
+      ::v-deep .el-input__prefix{
+        text-align: right;
+        right: 5px !important;
+      }
+      .input-popover {
+        ::v-deep .el-input__suffix{
+          right: 10px;
+        }
+      }
+    }
   }
 }
+
 </style>