门类-著录项

README.md

@@ -33,6 +33,7 @@
 │   │   ├── archivesConfig        # 档案配置
 │   │   ├── category              # 门类管理
 │   │   ├── components            # views内页面组件
+│   │   │   ├── field                 # 字段管理组件
 │   │   ├── dashboard             # 首页面板内容
 │   │   ├── features              # 错误页面
 │   │   ├── system                # 权限管理

src/assets/styles/index.scss

@@ -31,6 +31,8 @@ html {
 *,
 *:before,
 *:after {
+  margin: 0;
+  padding: 0;
   box-sizing: inherit;
 }
 
@@ -198,7 +200,7 @@ ul{
 
 /**滚动条的宽度*/
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 4px;
 }
 
 //滚动条的滑块
@@ -210,4 +212,20 @@ ul{
 // 设置loading-mask
 .el-loading-mask{
   background-color: rgba(0,0,0,0.2);
+}
+
+@media screen and (min-width:1200px) and (max-width:1536px){
+  .tab-content .tab-nav {
+    li{
+      font-size: 14px;
+      padding: 0 4px !important;
+      letter-spacing: normal;
+      &:first-child{
+        padding: 0 12px !important;
+      }
+    }
+    .tab-right-img{
+      width: 73px !important;
+    }
+  }
 }

src/views/category/descriptionPreview/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="category-main">
+    <div class="des-preview-left">
+      <h4 class="des-title">字段调整 显示字段</h4>
+      <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">
+            <p>{{ item.fieldCnName }}</p>
+          </el-tooltip>
+        </li>
+      </ul>
+      <h4 class="des-title">隐藏字段</h4>
+      <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">
+            <p>{{ item.fieldCnName }}</p>
+          </el-tooltip>
+        </li>
+      </ul>
+      <div class="des-set-btn">
+        <el-button type="primary">修改</el-button>
+        <el-button type="primary">排序</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>
+      </div>
+    </div>
+    <div class="des-preview-right">
+      <h4 class="des-title">界面预览效果</h4>
+    </div>
+  </div>
+</template>
+
+<script>
+import data from './data.json'
+export default {
+  name: 'DescriptionPreview',
+  components: {},
+  data() {
+    return {
+      showFields: [],
+      form: {},
+      rules: {}
+    }
+  },
+  mounted() {
+    this.showFields = data
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.category-main{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  .des-preview-left{
+    width: 500px;
+    height: calc(100vh - 274px);
+    overflow:hidden;
+    overflow-y: auto;
+
+  }
+  .des-title{
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #fff;
+    height: 28px;
+    line-height: 28px;
+  }
+  .des-fields{
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 30px;
+    margin-left: 1px;
+    li{
+      width: 100px;
+      height: 40px;
+      line-height: 40px;
+      margin: -1px 0 0 -1px;
+      font-size: 14px;
+      text-align: center;
+      color: #3A99FD;
+      border: 1px solid #339CFF;
+      cursor: pointer;
+      p{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+      }
+      &:hover{
+        color: #fff;
+        background-color: #02255F;
+      }
+    }
+  }
+
+  .des-form{
+    width: 496px;
+    padding: 20px 0;
+    margin-top: 30px;
+    border-radius: 4px;
+    background-color: #02255F;
+  }
+  .des-preview-right{
+
+  }
+}
+</style>

src/views/category/index.vue

@@ -280,7 +280,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.container-left,
+.container-right{
+  min-height: calc(100vh - 240px);
+}
 .curd-in-out {
+  width: 330px;
   margin-top: 50px;
   .crud-opts {
     padding: 0 !important;
@@ -288,10 +293,18 @@ export default {
     border-bottom: none;
   }
 }
-.tab-content .tab-nav li {
-  padding: 0 10px;
-  &:first-child {
-    padding: 0 24px;
+.tab-nav {
+  margin-bottom: 0;
+  li{
+    padding: 0 10px;
+    &:first-child{
+      padding: 0 24px;
+
+    }
   }
 }
+.container-left .el-tree{
+  margin: 40px 0 20px 0;
+}
+
 </style>