From 8757b3dad75905774b225faed3a0c68db57553ee Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 27 May 2022 17:35:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=91=97=E5=BD=95=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/iconfonts/iconfont.css             |  20 +-
 src/assets/images/des_title.png               | Bin 0 -> 2803 bytes
 src/assets/styles/index.scss                  |  24 ++
 .../category/descriptionPreview/form.json     | 180 +++++++++++
 .../category/descriptionPreview/index.vue     | 295 +++++++++++++++---
 5 files changed, 480 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/images/des_title.png
 create mode 100644 src/views/category/descriptionPreview/form.json

diff --git a/src/assets/iconfonts/iconfont.css b/src/assets/iconfonts/iconfont.css
index b3c5423..da34462 100644
--- a/src/assets/iconfonts/iconfont.css
+++ b/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";
 }
diff --git a/src/assets/images/des_title.png b/src/assets/images/des_title.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c0ef80961cd0ccc5b579a94e4bafd06a778d102
GIT binary patch
literal 2803
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%0A??sJZCU+*)>sZJQNvS3raq?^T`LU<XjPe
z>6E3Ak%{^e6awe#y94(-2k(dT$@_FZ`M{OjE)4DSGZQP*Fa1)==-!ZNVlbH|2Cn38
z^>d$}nRxQW`$QD~A}IM_GEEdh$pu#gV0X^Kg~x^CA`{<%d1E1GQ2%oV6++3Kn)5^w
zc6rW)$Atr*`3(H!4~98;|8oWvL&?dN$P`JKx)Pc2xa^vIboL8K|Ma_{<U_3FPR)7F
zILy?X2am@tL?%u*-awkO8-jPGzuDgkqvUR3Xn&uXI8m+tAQtkQA&+N&^LQ3!PVN?l
zcp?e2g&`h1F1sox|L_?RC4US`KEz7yg0}X3Hs?P{VLll$GWRbdbD@;nk(?)zFns}K
z!sD`QV!HmVSc>mcs%Gam4;h(vJ0o+U=Hx_7t_Z+%nV%^;G?!gRPriU`)umT(UOVy)
zq)YtWl;qk?Wsustld7D;bg_}#rU0i@;FJ>F)m>Dhdrs-?U21Sj<&794+YZU?k=@&+
z65p8G+~9eXrVj56v@|t3wFe$jm{am^m%<$JgD7#wr7%Y-b6fB9kIvCAZX@+~+*zup
zeqqqw*yBk%gLW&Pyi3IYEx959Q#EIbbmX$@hHCw{Am|-I$uSTlUP3XfFj$q0DToUL
z3MFbNBdwB_rcx%Tmr$1q11i#yjPOrw5}9DY#yY_O8yzX>cDseo8Pje_HC`_1R&!ky
zPRZR1C{H9|_5#X-$7L7ZJ03)+=2Jn*g(}hS1`!>^)%KSNgeD^6K7KYVvB6_Ua7*-9
z%T`lID2dq861=TOZ5b(%Xw#N0HEuv~)FW(|DBPUfPFa{D3DYSH6CRgcNA7PNEFaeA
zpk8s9lMktq+l8ThADLMHId<~j-Ek*|Ir*?Dxm*3*-;s$}7`hh(e<mpT5G(mGL?%v%
z<u_v?#y4z@3*MDsnUiO+C;L4zvHld?f%k88@6quUcqxTLPT;*Oa~F2qb={DFtWNJ|
zXh#k{xc$hz=iGj9Puh~66P(13Byu}KIXmvcG+4~K8PUGuZY1|3xhu&GYY*MWOCh-_
z;rT@A@CXM@J9r&;qe`^vH*-J6(O%iDze{^O^W2DbVTdV`Fm)v|;c?k@{Ui0ymtyg&
zpyWg7UD-%{o(RAUkqeIp$4L0z{|x1ubjnTp*@Kb~g`a#Q$@hC?BEoOKhv~#)Zed7-
zIr*^7$=$*bPb6WsFvNq$W!KS18lNhc%!@(E_tuK%e*w>^L^eKDGh6@w002ovPDHLk
FV1msJRwDoa

literal 0
HcmV?d00001

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 324c800..783496c 100644
--- a/src/assets/styles/index.scss
+++ b/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;
+        }
+      }
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/src/views/category/descriptionPreview/form.json b/src/views/category/descriptionPreview/form.json
new file mode 100644
index 0000000..88b218c
--- /dev/null
+++ b/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
+}]
diff --git a/src/views/category/descriptionPreview/index.vue b/src/views/category/descriptionPreview/index.vue
index 8523765..f738469 100644
--- a/src/views/category/descriptionPreview/index.vue
+++ b/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>