From b3992187148de154c0962cc7b2f59c0e0e37f2eb Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 3 Apr 2023 17:32:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E7=B1=BB=E5=AD=97=E6=AE=B5=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/mixin.scss                  | 107 +++++++++++++++++-
 src/assets/styles/yxk-admin.scss              |  87 +++-----------
 src/views/components/field/index.vue          |  49 ++++----
 src/views/system/field/commonFields/index.vue |  21 ++++
 .../system/field/electronicFields/index.vue   |  21 ++++
 src/views/system/field/index.vue              |  57 ++++++++++
 src/views/system/field/systemFields/index.vue |  21 ++++
 7 files changed, 262 insertions(+), 101 deletions(-)
 create mode 100644 src/views/system/field/commonFields/index.vue
 create mode 100644 src/views/system/field/electronicFields/index.vue
 create mode 100644 src/views/system/field/index.vue
 create mode 100644 src/views/system/field/systemFields/index.vue

diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 82293ac..49ae8fb 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -563,4 +563,109 @@
   [data-theme="light"] & {
     min-height: calc(100vh - 282px);
   }
-}
\ No newline at end of file
+}
+
+@mixin row_tab_style{
+  [data-theme="dark"] & {
+    margin-top: 61px;
+    border: 1px solid #113d72;
+    .head-container{
+      margin: 20px;
+    }
+    .el-table__header{
+      border-top: 1px solid #113D72;
+    }
+    .tab-nav{
+      height: 41px;
+      line-height: 41px;
+      margin: -41px 0 30px -1px;
+      font-weight: bold;
+      color: #359AFC;
+      border-bottom: 1px solid #113D72;
+      li{
+        position: relative;
+        padding: 0 24px;
+        margin: -1px 30px 0 0;
+        letter-spacing: 2px;
+        border-top: 1px solid #113D72;
+        background-color: #021941;
+        cursor: pointer;
+        &::before,
+        &::after{
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 33px;
+          height: 41px;
+        }
+        &::before{
+          left: -15px;
+          background: url(~@/assets/images/tab_left.png) no-repeat;
+          background-size: contain;
+        }
+        &::after{
+          right: -32px;
+          background: url(~@/assets/images/tab_right.png) no-repeat;
+          background-size: contain;
+        }
+        &:first-child{
+          border-left: 1px solid #113d72;;
+          &::before{
+            width: 17px;
+            height: 17px;
+            left: -1px;
+            top: -1px;
+            border-left: 1px solid $mainColor;
+            border-top: 1px solid $mainColor;
+          }
+        }
+        &.active-tab-nav{
+          color: #fff;
+          &::before{
+            background: url(~@/assets/images/tab_left_active.png) no-repeat;
+            background-size: contain;
+          }
+          &::after{
+            background: url(~@/assets/images/tab_right_active.png) no-repeat;
+            background-size: contain;
+          }
+          i{
+            display: block;
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            border-bottom: 1px solid #021941;
+          }
+        }
+      }
+      .tab-right-img{
+        display: block;
+        width: 93px;
+        margin: 4px 0 0 -14px;
+        background: url(~@/assets/images/tab_img.png) no-repeat;
+        background-size: contain;
+      }
+    }
+  }
+  [data-theme="light"] & {
+    margin-top: 0;
+    .head-container{
+      margin: 20px 20px 20px 0;
+    }
+    .tab-nav{
+      color: #545B65;
+      padding: 0 0 0 20px;
+      border-bottom: 1px solid #EDEFF3;
+      li{
+        margin-right: 60px;
+        &.active-tab-nav{
+          padding-bottom: 13px;
+          color: #0348F3;
+          border-bottom: 3px solid #0348F3;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index c90a20b..c1210f5 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -50,6 +50,20 @@
   }
 }
 
+.tab-container{
+  @include bg_color;
+  @include box_padding;
+  
+  .tab-content{
+    position: relative;
+    @include row_tab_style;
+    
+    .tab-nav{
+      margin-bottom: 0;
+    }
+  }
+}
+
 
 .head-container {
   // padding: 20px;
@@ -848,90 +862,17 @@
 
 // tab样式布局
 .tab-content{
-  margin-top: 40px;
   border-top: none;
-  background-color: #021941;
   &::before{
     display: none;
   }
   .tab-nav{
     display: flex;
     justify-content: flex-start;
-    height: 41px;
-    line-height: 41px;
-    margin: -41px 0 30px -1px;
     font-size: 16px;
-    font-weight: bold;
-    color: #359AFC;
-    border-bottom: 1px solid #113D72;
     li{
-      position: relative;
-      padding: 0 24px;
-      margin: -1px 30px 0 0;
-      letter-spacing: 2px;
-      border-top: 1px solid #113D72;
-      background-color: #021941;
       cursor: pointer;
-      &::before,
-      &::after{
-        content: "";
-        position: absolute;
-        top: 0;
-        width: 33px;
-        height: 41px;
-      }
-      &::before{
-        left: -15px;
-        background: url(~@/assets/images/tab_left.png) no-repeat;
-        background-size: contain;
-      }
-      &::after{
-        right: -32px;
-        background: url(~@/assets/images/tab_right.png) no-repeat;
-        background-size: contain;
-      }
-      &:first-child{
-        border-left: 1px solid #113d72;;
-        &::before{
-          width: 17px;
-          height: 17px;
-          left: -1px;
-          top: -1px;
-          border-left: 1px solid $mainColor;
-          border-top: 1px solid $mainColor;
-        }
-      }
-      &.active-tab-nav{
-        color: #fff;
-        &::before{
-          background: url(~@/assets/images/tab_left_active.png) no-repeat;
-          background-size: contain;
-        }
-        &::after{
-          background: url(~@/assets/images/tab_right_active.png) no-repeat;
-          background-size: contain;
-        }
-        i{
-          display: block;
-          position: absolute;
-          bottom: -1px;
-          left: 0;
-          width: 100%;
-          height: 1px;
-          border-bottom: 1px solid #021941;
-        }
-      }
     }
-    .tab-right-img{
-      display: block;
-      width: 93px;
-      margin: 4px 0 0 -14px;
-      background: url(~@/assets/images/tab_img.png) no-repeat;
-      background-size: contain;
-    }
-  }
-  .el-table__header{
-    border-top: 1px solid #113D72;
   }
 }
 
diff --git a/src/views/components/field/index.vue b/src/views/components/field/index.vue
index b5a1378..35e6bbf 100644
--- a/src/views/components/field/index.vue
+++ b/src/views/components/field/index.vue
@@ -1,34 +1,29 @@
 <template>
-  <div class="app-container">
-
+  <div>
     <!--工具栏-->
-    <div class="head-container" style="padding:0 0 20px 0">
+    <div class="head-container">
       <crudOperation :permission="permission" />
     </div>
-    <div class="container-wrap" style="min-height: calc(100vh - 241px);">
-      <span class="right-top-line" />
-      <span class="left-bottom-line" />
-      <!--表格渲染-->
-      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 263px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
-        <el-table-column type="selection" width="55" />
-        <el-table-column type="index" label="序号" width="55" />
-        <el-table-column prop="fieldCnName" label="中文名称" />
-        <el-table-column prop="fieldName" label="字段标识" />
-        <el-table-column label="数据类型">
-          <template slot-scope="scope">
-            <span v-if="scope.row.isDataType === 1">字符</span>
-            <span v-if="scope.row.isDataType === 2">数字</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="isColumnLength" label="字段长度" />
-        <el-table-column label="默认值">
-          <template slot-scope="scope">
-            <span v-if="scope.row.isDefaultValue === ''">-</span>
-            <span v-else>{{ scope.row.isDefaultValue }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 273px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
+      <el-table-column type="selection" width="55" />
+      <el-table-column type="index" label="序号" width="55" />
+      <el-table-column prop="fieldCnName" label="中文名称" />
+      <el-table-column prop="fieldName" label="字段标识" />
+      <el-table-column label="数据类型">
+        <template slot-scope="scope">
+          <span v-if="scope.row.isDataType === 1">字符</span>
+          <span v-if="scope.row.isDataType === 2">数字</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="isColumnLength" label="字段长度" />
+      <el-table-column label="默认值">
+        <template slot-scope="scope">
+          <span v-if="scope.row.isDefaultValue === ''">-</span>
+          <span v-else>{{ scope.row.isDefaultValue }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
     <!--表单渲染-->
     <eForm ref="eform" />
     <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" :before-close="handleClose">
diff --git a/src/views/system/field/commonFields/index.vue b/src/views/system/field/commonFields/index.vue
new file mode 100644
index 0000000..5eb1993
--- /dev/null
+++ b/src/views/system/field/commonFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="常用字段" :is-type="2" permission-str="commonFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'CommonFields',
+  components: { Field }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep thead .el-table-column--selection .cell {
+  display: none;
+}
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+</style>
diff --git a/src/views/system/field/electronicFields/index.vue b/src/views/system/field/electronicFields/index.vue
new file mode 100644
index 0000000..6dc2a44
--- /dev/null
+++ b/src/views/system/field/electronicFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="电子文件字段" :is-type="3" permission-str="electronicFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'ElectronicFields',
+  components: { Field }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep thead .el-table-column--selection .cell {
+  display: none;
+}
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+</style>
diff --git a/src/views/system/field/index.vue b/src/views/system/field/index.vue
new file mode 100644
index 0000000..9481680
--- /dev/null
+++ b/src/views/system/field/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="app-container tab-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">常用字段<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">系统字段<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">电子文件字段<i /></li>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" />
+    </div>
+  </div>
+</template>
+
+<script>
+import commonFields from './commonFields/index.vue'
+import electronicFields from './electronicFields/index.vue'
+import systemFields from './systemFields/index.vue'
+
+export default {
+  name: 'FiledManage',
+  components: {
+    commonFields,
+    electronicFields,
+    systemFields
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'commonFields'
+      } else if (this.activeIndex === 1) {
+        return 'electronicFields'
+      } else if (this.activeIndex === 2) {
+        return 'systemFields'
+      }
+      return 'commonFields'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/system/field/systemFields/index.vue b/src/views/system/field/systemFields/index.vue
new file mode 100644
index 0000000..c3e09a7
--- /dev/null
+++ b/src/views/system/field/systemFields/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <field title="系统字段" :is-type="1" permission-str="systemFields" />
+</template>
+
+<script>
+import Field from '@/views/components/field'
+
+export default {
+  name: 'SystemFields',
+  components: { Field }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep thead .el-table-column--selection .cell {
+  display: none;
+}
+::v-deep div.el-dialog__footer {
+  text-align: center;
+}
+</style>