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

src/components/common/Pagination.vue

@@ -31,7 +31,6 @@ import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { parseInt } from 'lodash'
-import ElConfigProvider from 'element-plus'
 import cn from 'element-plus/lib/locale/lang/zh-cn'
 import en from 'element-plus/lib/locale/lang/en'
 

src/components/rightBox/settings/UserBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-box right-box-user">
     <div class="right-box__header">
-      <div class="header__title">{{editObject.id ? $t('config.user.editUser') : $t('config.user.createUser')}}</div>
+      <div class="header__title">{{ editObject.id ? $t('config.user.editUser') : $t('config.user.createUser') }}</div>
       <div class="header__operation">
         <span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
       </div>
@@ -11,12 +11,14 @@
         <el-form ref="userForm" :model="editObject" :rules="editObject.id ? rules2 : rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('config.user.name')" prop="name">
-            <el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.username==='admin' && editObject.id === 1"
+            <el-input id="account-input-name" v-model="editObject.name"
+                      :disabled="editObject.username==='admin' && editObject.id === 1"
                       minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
           </el-form-item>
           <!--username-->
           <el-form-item :label="$t('config.user.username')" prop="username">
-            <el-input id="account-input-username" v-model="editObject.username" :disabled="editObject.username==='admin' && editObject.id === 1"
+            <el-input id="account-input-username" v-model="editObject.username"
+                      :disabled="editObject.username==='admin' && editObject.id === 1"
                       minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
           </el-form-item>
           <!--password-->
@@ -69,45 +71,28 @@
               </template>
             </el-select>
           </el-form-item>
-          <!--theme-->
-<!--          <el-form-item :label="$t('config.user.theme')" prop="i18n">
-            <el-select id="account-input-roleIds"
-                       v-model="editObject.theme"
-                       class="right-box__select"
-                       clearable
-                       collapse-tags
-                       placeholder=" "
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small">
-              <template v-for="theme in themeData" :key="theme.value">
-                <el-option :label="theme.label" :value="theme.value"></el-option>
-              </template>
-            </el-select>
-          </el-form-item>-->
-          <!--enable-->
           <el-form-item :label="$t('config.user.enable')">
             <el-switch
-               id="account-input-status"
-               v-model="editObject.status"
-               :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
-               :active-value="1"
-               :inactive-value="0">
+                id="account-input-status"
+                v-model="editObject.status"
+                :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
+                :active-value="1"
+                :inactive-value="0">
             </el-switch>
           </el-form-item>
 
           <el-form-item v-if="editObject.id" :label="$t('config.user.createTime')">
-            <div class="right-box-form-content-txt">{{editObject.ctime}}</div>
+            <div class="right-box-form-content-txt">{{ editObject.ctime }}</div>
           </el-form-item>
-
         </el-form>
       </div>
     </div>
     <div class="right-box__footer">
       <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
-        <span>{{$t('overall.cancel')}}</span>
+        <span>{{ $t('overall.cancel') }}</span>
       </button>
       <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
-        <span>{{$t('overall.save')}}</span>
+        <span>{{ $t('overall.save') }}</span>
       </button>
     </div>
   </div>
@@ -241,7 +226,9 @@ export default {
       }
     },
     save () {
-      if (this.blockOperation.save) { return }
+      if (this.blockOperation.save) {
+        return
+      }
       this.blockOperation.save = true
 
       this.$refs.userForm.validate((valid) => {
@@ -250,7 +237,11 @@ export default {
             axios.put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
               if (res.status === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$message({
+                  duration: 2000,
+                  type: 'success',
+                  message: this.$t('tip.saveSuccess')
+                })
                 if (this.editObject.lang && this.editObject.id == localStorage.getItem(storageKey.userId)) {
                   const currentLang = localStorage.getItem(storageKey.language)
                   if (currentLang !== this.editObject.lang) {
@@ -271,7 +262,11 @@ export default {
             axios.post(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
               if (res.status === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$message({
+                  duration: 2000,
+                  type: 'success',
+                  message: this.$t('tip.saveSuccess')
+                })
                 this.esc(true)
               } else {
                 this.$message.error(res.data.msg || res.data.message)

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],