CN-1612 feat: 部分css重构内容: Administration下的界面、tabs和分页

src/components/table/CnDataList.vue

@@ -5,23 +5,18 @@
       <div class="main-container">
         <!-- 顶部工具栏 -->
         <div class="top-tools">
-          <div class="top-tool-left" style="min-width: 300px">
+          <div class="top-tool-left">
             <slot name="top-tool-left"></slot>
             <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
-              <div style="display: flex">
+              <div class="top-tool-search__display">
                 <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
-                <!--                <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
-                <button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
+                <button class="top-tool-btn top-tool-btn--search top-tool-btn__border" @click="onSearch">
                   <el-icon><Search /></el-icon>
-                  <!--<i class="el-icon-search"></i>-->
                 </button>
               </div>
             </div>
           </div>
           <div class="top-tool-right">
-<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
-            <el-button @click="onSearch" icon="el-icon-search" type="info" size="small" style="margin-right: 10px"></el-button>-->
-
             <slot name="top-tool-right"></slot>
             <div  v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize"  @click="tools.showCustomTableTitle = true">
               <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>

src/components/table/administration/RoleTable.vue

@@ -1,55 +1,55 @@
 <template>
   <el-table
-    id="roleTable"
-    ref="dataTable"
-    :data="tableData"
-    tooltip-effect="light"
-    empty-text=" "
-    @header-dragend="dragend"
-    @sort-change="tableDataSort"
-    @selection-change="selectionChange"
+      id="roleTable"
+      ref="dataTable"
+      :data="tableData"
+      tooltip-effect="light"
+      empty-text=" "
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
   >
     <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      :selectable="checkSelectable"
-      width="55">
+        :resizable="false"
+        align="center"
+        type="selection"
+        :selectable="checkSelectable"
+        width="55">
     </el-table-column>
     <!--key只使用item.prop的话，拖拽后，界面无响应，添加index后问题解决-->
     <el-table-column
-      v-for="(item, index) in customTableTitles"
-      :key="item.prop+index"
-      :fixed="item.fixed"
-      :label="item.label"
-      :min-width="`${item.minWidth}`"
-      :prop="item.prop"
-      :resizable="true"
-      :sort-orders="['ascending', 'descending']"
-      :sortable="item.sortable"
-      :width="`${item.width}`"
-      class="data-column"
+        v-for="(item, index) in customTableTitles"
+        :key="item.prop+index"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sort-orders="['ascending', 'descending']"
+        :sortable="item.sortable"
+        :width="`${item.width}`"
+        class="data-column"
     >
       <template #header>
-        <span class="data-column__span">{{item.label}}</span>
+        <span class="data-column__span">{{ item.label }}</span>
         <div class="col-resize-area"></div>
       </template>
-      <template  #default="scope" :column="item">
+      <template #default="scope" :column="item">
         <template v-if="item.prop === 'name'">
           <template v-if="scope.row.name">
-            <span>{{$t(scope.row.name)}}</span>
+            <span>{{ $t(scope.row.name) }}</span>
           </template>
           <template v-else-if="scope.row.i18n">
-            <span>{{scope.row.i18n}}</span>
+            <span>{{ scope.row.i18n }}</span>
           </template>
           <template v-else>
             <span>-</span>
           </template>
         </template>
-        <span v-else>{{scope.row[item.prop] || '-'}}</span>
+        <span v-else>{{ scope.row[item.prop] || '-' }}</span>
       </template>
     </el-table-column>
-    <template v-slot:empty >
+    <template v-slot:empty>
       <div class="table-no-data" v-if="isNoData">
         <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
       </div>
@@ -59,6 +59,7 @@
 
 <script>
 import table from '@/mixins/table'
+
 export default {
   name: 'roleTable',
   mixins: [table],