Browse Source

修改样式+优化展示

林倩 3 years ago
parent
commit
f4a95bc40c

+ 2 - 1
config/btn-icon-config.js

@@ -19,7 +19,8 @@ const btnAttr = [
     ['用户信息', 'el-icon-document'],
     ['管理范围', 'el-icon-edit'],
     ['资源获取', 'el-icon-refresh'],
-    ['资源同步', 'el-icon-refresh']
+    ['资源同步', 'el-icon-refresh'],
+    ['查看列权限清单', 'el-icon-document']
 ]
 let iconMap = new Map(btnAttr);
 export default iconMap

+ 32 - 13
src/assets/style/project.scss

@@ -1,21 +1,22 @@
 .demo-scroll-bar {
-	width: 100%;
-	height: 500px;
-	padding-top: 10px;
-	overflow: hidden;
+  width: 100%;
+  height: 500px;
+  padding-top: 10px;
+  overflow: hidden;
 }
-.el-date-editor.el-input, .el-date-editor.el-input__inner{
-	width: 100% !important;
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: 100% !important;
 }
 
 /* 控制悬浮最大宽度
 -------------------------- */
 .el-tooltip__popper {
-    max-width: 600px;
+  max-width: 600px;
 }
 .layui-layer-setwin .layui-layer-min {
-	opacity: 0;
-    pointer-events: none
+  opacity: 0;
+  pointer-events: none;
 }
 // .layui-layer-setwin:nth-child(1) {
 // 	display: none;
@@ -46,8 +47,26 @@
 // 	cursor: pointer;
 // }
 
+.search-bar .el-form-item--small.el-form-item {
+  @include mq($large) {
+    margin-bottom: 16px;
+  }
+  @include mq($medium) {
+    margin-bottom: 14px;
+  }
+  @include mq($small) {
+    margin-bottom: 12px;
+  }
+}
 
-
-
-
-
+.opt-bar {
+  @include mq($large) {
+    padding: 16px 0;
+  }
+  @include mq($medium) {
+    padding: 14px 0;
+  }
+  @include mq($small) {
+    padding: 12px 0;
+  }
+}

+ 97 - 81
src/components/data-auth/table-check-layer.vue

@@ -4,98 +4,114 @@
 @Date: 2021-04-01 15:38
 -->
 <template>
-    <div>
-        <!-- 查询项 -->
-        <el-form :inline="true" class="search-form">
-            <el-form-item label="数据资源名称">
-                <el-input v-model="condition.resourceName.value" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <dg-button type="primary" icon="el-icon-search" @click="handleSearch">查询</dg-button>
-            </el-form-item>
-        </el-form>
-        <!-- 表格 -->
-        <dg-table ref="checkTable" url="/authsvr/v2/dataauth/dataDetailList" :condition="condition" border row-key="id">
-            <dg-table-column type="index" width="70" label="序号" align="center"></dg-table-column>
-            <dg-table-column prop="resourceName" label="数据资源名称" align="center"></dg-table-column>
-            <dg-table-column prop="tableCode" label="数据资源英文名称" align="center"></dg-table-column>
-            <dg-table-column prop="resourceCode" label="数据资源标识符" align="center"></dg-table-column>
-            <dg-table-column label="操作" align="center" width="120">
-                <template slot-scope="{ row }">
-                    <div class="u-table__operation">
-                        <el-tooltip content="查看列权限清单" effect="dark" placement="top-end">
-                            <i class="el-icon-document" @click="handleViewColumnCheckList(row)"></i>
-                        </el-tooltip>
-                    </div>
-                </template>
-            </dg-table-column>
-        </dg-table>
-    </div>
+  <div>
+    <!-- 查询项 -->
+    <el-form :inline="true" class="search-form">
+      <el-form-item label="数据资源名称">
+        <el-input v-model="condition.resourceName.value" placeholder="请输入数据资源名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <dg-button type="primary" icon="el-icon-search" @click="handleSearch">查询</dg-button>
+      </el-form-item>
+    </el-form>
+    <!-- 表格 -->
+    <new-table
+      ref="table"
+      :tableUrl="tableUrl"
+      :tableHeader="tableHeader"
+      :condition="searchCondition"
+      :tableOptList="tableOptList"
+      @submitTableOpt="receviceOpt"
+    ></new-table>
+  </div>
 </template>
 
 <script>
 // 列权限清单弹框
-import columnCheckLayer from "./column-check-layer";
+import columnCheckLayer from './column-check-layer';
+import newTable from '@/pages/common/new-table';
 export default {
-    props: {
-        tab: String,
-        codeDataTypeStr: String,
+  props: {
+    tab: String,
+    codeDataTypeStr: String,
+    idcard: {
+      type: String,
+      default: ''
+    }
+  },
+  components: { newTable },
+  data() {
+    return {
+      condition: {
+        codeDataTypeStr: {
+          value: '',
+          op: '='
+        },
+        resourceName: {
+          value: '',
+          op: 'like'
+        },
         idcard: {
-            type: String,
-            default: ""
+          value: '',
+          op: '='
         }
-    },
-    components: {},
-    data() {
-        return {
-            condition: {
-                codeDataTypeStr: {
-                    value: "",
-                    op: "="
-                },
-                resourceName: {
-                    value: "",
-                    op: "like"
-                },
-                idcard: {
-                    value: "",
-                    op: "="
-                }
-            }
-        };
-    },
-    computed: {},
-    methods: {
-        handleViewColumnCheckList(row) {
-            const layer = this.$dgLayer({
-                title: "列权限清单列表",
-                content: columnCheckLayer,
-                props: {
-                    tableList: row.dataItems
-                },
-                on: {
-                    success(params) {
-                        layer.close(layer.dialogIndex);
-                    }
-                },
-                cancel: function (index, layero) {
-                    // 关闭对应弹窗的ID
-                    layer.close(index);
-                    return false;
-                },
-                area: ["900px", "760px"]
-            });
+      },
+      searchCondition: {},
+      tableUrl: '/authsvr/v2/dataauth/dataDetailList',
+      tableHeader: [
+        {
+          prop: 'resourceName',
+          label: '数据资源名称'
+        },
+        {
+          prop: 'tableCode',
+          label: '数据资源英文名称'
         },
-        
-        handleSearch() {
-            this.$refs.checkTable.searchForm();
+        {
+          prop: 'resourceCode',
+          label: '数据资源标识符'
         }
+      ],
+      tableOptList: ['查看列权限清单']
+    };
+  },
+  computed: {},
+  methods: {
+    receviceOpt(opt, row) {
+      this.handleViewColumnCheckList(row);
     },
-    created() {
-        this.condition.codeDataTypeStr.value = this.codeDataTypeStr;
-        this.condition.idcard.value = this.idcard;
+    handleViewColumnCheckList(row) {
+      const layer = this.$dgLayer({
+        title: '列权限清单列表',
+        content: columnCheckLayer,
+        props: {
+          tableList: row.dataItems
+        },
+        on: {
+          success(params) {
+            layer.close(layer.dialogIndex);
+          }
+        },
+        cancel: function (index, layero) {
+          // 关闭对应弹窗的ID
+          layer.close(index);
+          return false;
+        },
+        area: ['900px', '760px']
+      });
     },
-    mounted() {}
+
+    handleSearch() {
+      this.searchCondition = this.condition;
+      this.$refs.table.handleSearch();
+    }
+  },
+  created() {
+    this.condition.codeDataTypeStr.value = this.codeDataTypeStr;
+    this.condition.idcard.value = this.idcard;
+    this.searchCondition = this.condition;
+  },
+  mounted() {}
 };
 </script>
 

+ 1 - 1
src/components/operate-bar/index.vue

@@ -4,7 +4,7 @@
 @Date: 2021-07-28 14:23
 -->
 <template>
-  <dg-row zebra="20px" class="opt-bar">
+  <dg-row class="opt-bar">
     <dg-button
       v-for="(item, index) in pageOptList"
       :key="index"

+ 1 - 1
src/components/search-bar/index.vue

@@ -4,7 +4,7 @@
 @Date: 2021-07-28 15:50
 -->
 <template>
-  <div>
+  <div class="search-bar">
     <el-form :inline="true">
       <el-form-item v-for="(item, index) in form" :key="index" :label="item.label">
         <template v-if="item.component !== 'SelectOrgTree' && item.component !== 'DgDatePicker'">

+ 1 - 1
src/pages/admin-manage/tab-first.vue

@@ -43,7 +43,7 @@ export default {
       conditionForm,
       tableHeader,
       pageOptList: ['新增'],
-      tableOptList: ['修改', '用户信息', '撤销']
+      tableOptList: ['用户信息','修改', '撤销']
     };
   },
   methods: {

+ 1 - 1
src/pages/application-manage/app-manage/index.vue

@@ -13,7 +13,7 @@
     </dg-col>
     <dg-col :span="19">
       <div class="u-right__table">
-        <el-form ref="form" :model="formData" label-position="left" label-suffix="" label-width="75px">
+        <el-form ref="form" class="search-bar" :model="formData" label-position="left" label-suffix="" label-width="75px">
           <dg-row :gutter="12">
             <dg-col :span="6">
               <el-form-item label="应用状态" prop="applyStatus.value">

+ 2 - 2
src/pages/data-auth-module/auth-object-manage/appfun-resource-manage/DataConfig.js

@@ -26,10 +26,10 @@ const conditionForm = [
 ];
 
 // 页面操作
-const pageOptList = ['导入', '新增', '同步'];
+const pageOptList = ['新增', '导入', '同步'];
 
 // 表头操作
-const tableOptList = ['修改', '详情', '删除', '功能配置'];
+const tableOptList = ['详情', '修改', '功能配置','删除'];
 
 // 列表
 const tableHeader = [

+ 2 - 2
src/pages/data-auth-module/auth-object-manage/service-resource-manage/DataConfig.js

@@ -36,10 +36,10 @@ const conditionForm = [
 ];
 
 // 页面操作
-const pageOptList = ['导入', '新增', '同步'];
+const pageOptList = ['新增', '导入', '同步'];
 
 // 表头操作
-const tableOptList = ['修改', '详情', '删除'];
+const tableOptList = ['详情','修改', '删除'];
 
 // 列表
 const tableHeader = [

+ 1 - 1
src/pages/log-manage/auth-risk-detection/index.vue

@@ -54,7 +54,7 @@ export default {
       sort: {
         updateTime: 'DESC'
       },
-      tableOptList: ['修改', '详情'],
+      tableOptList: ['详情','修改'],
       tableUrl: authRiskDetectionUrl
     };
   },

+ 1 - 1
static/themes/style/theme-black.css

@@ -19911,7 +19911,7 @@ html {
     height: 100%;
     min-height: calc(100vh - 200px);
     margin: 0 1rem;
-    background: #fff;
+    background: #000;
 }
 .dg-container-box__content {
     width: 100%;

+ 8 - 5
static/themes/style/theme-default.css

@@ -2072,7 +2072,8 @@ input {
 }
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
+
 }
 .el-form-item .el-input__validateIcon {
     display: none;
@@ -18208,20 +18209,21 @@ video::-webkit-media-text-track-display {
     font-size: 14px;
     width: 5%;
     color: rgba(0, 0, 0, 0.85);
+    line-height: 30px;
 }
 @media screen and (min-width: 1681px) {
     .el-date-editor .el-range-separator {
-        line-height: 30px;
+        /* line-height: 30px; */
     }
 }
 @media screen and (max-width: 1680px) and (min-width: 1367px) {
     .el-date-editor .el-range-separator {
-        line-height: 26px;
+        /* line-height: 26px; */
     }
 }
 @media screen and (max-width: 1366px) {
     .el-date-editor .el-range-separator {
-        line-height: 22px;
+        /* line-height: 22px; */
         font-size: 12px;
     }
 }
@@ -18286,7 +18288,7 @@ video::-webkit-media-text-track-display {
     height: 32px;
 }
 .el-range-editor--small .el-range-separator {
-    line-height: 24px;
+    /* line-height: 24px; */
     font-size: 14px;
 }
 .el-range-editor--small .el-range-input {
@@ -19907,6 +19909,7 @@ html {
     height: 100%;
     min-height: calc(100vh - 200px);
     margin: 0 1rem;
+    background-color: #fff;
 }
 .dg-container-box__content {
     width: 100%;