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

2024-04-08 11:06:28 +08:00
parent 8e5a45bfcf
commit 26e3b7a4eb
20 changed files with 308 additions and 383 deletions
--- a/src/views/administration/Appearance.vue
+++ b/src/views/administration/Appearance.vue
@@ -1,18 +1,18 @@
 <template>
  <div class="appearance" :class="from">
    <div class="appearance-form">
-      <el-form ref="appearanceForm" :model="appearanceObject"  label-position="top" label-width="120px">
+      <el-form ref="appearanceForm" :model="appearanceObject" label-position="top" label-width="120px">
        <el-form-item :label="$t('config.appearance.dateFormat')" prop="date_format">
          <el-select id="appearance-dateFormat"
-                     v-model="appearanceObject.date_format"
-                     collapse-tags
-                     placeholder=" "
-                     popper-class="right-box-select-dropdown right-box-select-report "
-                     size="small">
+              v-model="appearanceObject.date_format"
+              collapse-tags
+              placeholder=" "
+              popper-class="right-box-select-dropdown right-box-select-report "
+              size="small">
            <template v-for="dateFormat in dateFormatList" :key="dateFormat.id">
-              <el-option :label="dateFormat.label" :value="dateFormat.value">
-                <span style="float: left">{{ dateFormat.label }}</span>
-                <span style="float: right;">{{ dateFormat.example }}</span>
+              <el-option :label="dateFormat.label" :value="dateFormat.value" class="appearance__option">
+                <span>{{ dateFormat.label }}</span>
+                <span>{{ dateFormat.example }}</span>
              </el-option>
            </template>
          </el-select>
@@ -40,7 +40,7 @@
            <template v-for="timezone in timezoneList" :key="timezone.id">
              <el-option :label="timezone.name" :value="timezone.name">
                <span style="float: left">{{ timezone.name }}</span>
-                <span style="float: right;">{{ timezone.offset}}</span>
+                <span style="float: right;">{{ timezone.offset }}</span>
              </el-option>
            </template>
          </el-select>
@@ -48,11 +48,16 @@
        </el-form-item>
      </el-form>
      <div class="edit-appearance-base__footer">
-        <button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save"
-                v-if="hasPermission('editAppearence')"
+        <button
+            style="position: relative;"
+            :class="{'footer__btn--disabled': blockOperation.save}"
+            :disabled="blockOperation.save"
+            class="footer__btn"
+            @click="save"
+            v-if="hasPermission('editAppearence')"
        >
          <el-loading size="small" :loading="blockOperation.save"></el-loading>
-          <span>{{$t('overall.save')}}</span>
+          <span>{{ $t('overall.save') }}</span>
        </button>
      </div>
    </div>
--- a/src/views/administration/I18n.vue
+++ b/src/views/administration/I18n.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
    <cn-data-list
        ref="dataList"
        :tableId="tableId"
@@ -10,21 +10,17 @@
        @search="search"
    >
      <template #top-tool-left>
-        <button id="i18n-add"
-                class="top-tool-btn margin-r-10 top-tool-btn--create"
-                @click="add">
+        <button id="i18n-add" class="top-tool-btn margin-r-10 top-tool-btn--create" @click="add">
          <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
        </button>
-        <button id="i18n-edit"  class="top-tool-btn margin-r-10"  :disabled="disableEdit"
-                @click="editSelectRecord">
+        <button id="i18n-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit" @click="editSelectRecord">
          <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
        </button>
-        <button id="i18n-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
-                @click="delBatch">
+        <button id="i18n-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" @click="delBatch">
          <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
        </button>
      </template>
      <template #default>
@@ -90,7 +86,6 @@ export default {
      tableId: 'i18nTable'
    }
  },
-  methods: {
-  }
+  methods: {}
 }
 </script>
--- a/src/views/administration/Index.vue
+++ b/src/views/administration/Index.vue
@@ -2,14 +2,14 @@
  <div class="administration entity-explorer entity-explorer--show-list">
    <!-- 顶部工具栏，在列表页显示 -->
    <div class="explorer-top-tools explorer-detection-top-tools">
-      <div class="explorer-top-tools-title">{{$t('overall.administration')}}</div>
+      <div class="explorer-top-tools-title">{{ $t('overall.administration') }}</div>
    </div>
-    <div style="width: 100%;padding-bottom: 26px;">
+    <div class="administration__tabs">
      <chart-tabs :data="tabsData" router></chart-tabs>
    </div>
    <!-- 内容区 -->
    <div class="explorer-container administration-container">
-      <router-view />
+      <router-view/>
    </div>
  </div>
 </template>
@@ -17,6 +17,7 @@
 <script>
 import ChartTabs from '@/components/common/ChartTabs'
 import { useStore } from 'vuex'
+
 export default {
  name: 'index',
  components: {
--- a/src/views/administration/License.vue
+++ b/src/views/administration/License.vue
@@ -1,26 +1,26 @@
 <template>
  <div class="license" :class="from">
    <div class="license-form">
-      <el-form ref="licenseForm" :model="licenseObject"  label-position="left" label-width="134px" size="small">
-        <el-form-item  :label="`${$t('license.type')}：`" prop="type">
-          {{licenseObject.type}}
+      <el-form ref="licenseForm" :model="licenseObject" label-position="left" label-width="134px" size="small">
+        <el-form-item :label="`${$t('license.type')}：`" prop="type">
+          {{ licenseObject.type }}
        </el-form-item>
        <el-form-item :label="`${$t('license.organization')}：`" prop="organization">
-          <div class="">{{licenseObject.organization}}</div>
+          <div class="">{{ licenseObject.organization }}</div>
        </el-form-item>
        <el-form-item :label="`${$t('license.supportId')}：`" prop="supportID">
-          <div class="">{{licenseObject.supportID}}</div>
+          <div class="">{{ licenseObject.supportID }}</div>
        </el-form-item>
        <el-form-item :label="`${$t('license.dateIssued')}：`" prop="dateIssued">
-          <div class="">{{licenseObject.dateIssued}}</div>
+          <div class="">{{ licenseObject.dateIssued }}</div>
        </el-form-item>
        <el-form-item :label="`${$t('license.dateExpires')}：`" prop="dateExpires">
-          <div class="">{{licenseObject.dateExpires}}</div>
+          <div class="">{{ licenseObject.dateExpires }}</div>
        </el-form-item>
-        <el-form-item :label="`${$t('license.licenseFile')}：`" >
+        <el-form-item :label="`${$t('license.licenseFile')}：`">
          <div class="license-file">
-            <button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile">
-              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{$t('license.download')}}</span>
+            <button class="license__btn margin-r-20" @click.prevent="downloadFile">
+              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{ $t('license.download') }}</span>
            </button>
            <el-upload :action="`${baseUrl}sys/license/upload`"
                       ref="licenseUpload"
@@ -34,13 +34,12 @@
                       :on-change="fileChange"
                       :on-success="uploadSuccess"
                       :on-error="uploadError">
-              <button style="position: relative;" class="license__btn" @click.prevent="">
-                <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{$t('license.upload')}}</span>
+              <button class="license__btn" @click.prevent="">
+                <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{ $t('license.upload') }}</span>
              </button>
            </el-upload>
          </div>
        </el-form-item>
-
      </el-form>
    </div>
  </div>
@@ -51,6 +50,7 @@ import { storageKey } from '@/utils/constants'
 import axios from 'axios'
 import { ref } from 'vue'
 import { dateFormat } from '@/utils/date-util'
+import _ from 'lodash'

 export default {
  name: 'License',
@@ -109,7 +109,7 @@ export default {
    downloadFile () {
      axios.get(this.downloadC2vUrl, { responseType: 'blob' }).then(res => {
        let fileName = ''
-        if(res.headers['content-disposition']) {
+        if (res.headers['content-disposition']) {
          fileName = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
        }

--- a/src/views/administration/OperationLog.vue
+++ b/src/views/administration/OperationLog.vue
@@ -1,29 +1,29 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
    <cn-data-list
-      ref="dataList"
-      :api="url"
-      :tableId="tableId"
-      :layout="['search', 'elementSet','search']"
-      v-model:custom-table-title="tools.customTableTitle"
-      :from="fromRoute.operationLog"
-      @search="search">
+        ref="dataList"
+        :api="url"
+        :tableId="tableId"
+        :layout="['search', 'elementSet','search']"
+        v-model:custom-table-title="tools.customTableTitle"
+        :from="fromRoute.operationLog"
+        @search="search">
      <template v-slot:default>
        <loading :loading="loading"></loading>
        <operation-log-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
-          :table-data="tableData"
-          @del="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
-          @search="search"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @del="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @search="search"
+            @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
      </template>
      <!-- 分页组件 -->
      <template #pagination>
--- a/src/views/administration/Roles.vue
+++ b/src/views/administration/Roles.vue
@@ -1,32 +1,30 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
    <cn-data-list
-            ref="dataList"
-            :tableId="tableId"
-            v-model:custom-table-title="tools.customTableTitle"
-            :api="url"
-            :from="fromRoute.roles"
-            :layout="['columnCustomize','elementSet','search']"
-            @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.roles"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
    >
      <template v-slot:top-tool-left>
-        <button id="roles-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
+        <button id="roles-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
                v-if="hasPermission('createRole')"
                @click="add">
          <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
        </button>
-        <button id="roles-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="roles-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
                v-if="hasPermission('editRole')"
                @click="edit">
          <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
        </button>
-        <button id="roles-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
-                v-if="hasPermission('deleteRole')"
-                @click="delBatch">
+        <button id="roles-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
          <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
        </button>

        <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
@@ -34,17 +32,17 @@
      <template v-slot:default>
        <loading :loading="loading"></loading>
        <roles-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
-          :table-data="tableData"
-          @delete="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
        ></roles-table>
      </template>
      <!-- 分页组件 -->
@@ -53,12 +51,12 @@
      </template>
    </cn-data-list>
    <el-drawer
-            v-model="rightBox.show"
-            direction="rtl"
-            class="common-right-box"
-            :with-header="false"
-            :size="700"
-            destroy-on-close>
+        v-model="rightBox.show"
+        direction="rtl"
+        class="common-right-box"
+        :with-header="false"
+        :size="700"
+        destroy-on-close>
      <role-box :object="object" @close="closeRightBox"></role-box>
    </el-drawer>
  </div>
@@ -101,7 +99,8 @@ export default {
        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
          confirmButtonText: this.$t('tip.yes'),
          type: 'warning'
-        }).catch(() => {})
+        }).catch(() => {
+        })
      } else {
        axios.get(`${this.url}`, { params: { ids: this.batchDeleteObjs[0].id } }).then(response => {
          if (response.status === 200) {
--- a/src/views/administration/User.vue
+++ b/src/views/administration/User.vue
@@ -1,47 +1,47 @@
 <template>
-  <div style="height: 100%;">
+  <div class="administration-container__body">
    <cn-data-list
-      ref="dataList"
-      :tableId="tableId"
-      v-model:custom-table-title="tools.customTableTitle"
-      :api="url"
-      :from="fromRoute.user"
-      :layout="['columnCustomize','elementSet','search']"
-      @search="search"
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.user"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
    >
      <template #top-tool-left>
        <button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
                v-if="hasPermission('createUser')"
                @click="add">
          <i class="cn-icon-xinjian cn-icon"></i>
-          <span>{{$t('overall.create')}}</span>
+          <span>{{ $t('overall.create') }}</span>
        </button>
-        <button id="account-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+        <button id="account-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
                v-if="hasPermission('editUser')"
                @click="editSelectRecord">
          <i class="cn-icon-edit cn-icon"></i>
-          <span>{{$t('overall.edit')}}</span>
+          <span>{{ $t('overall.edit') }}</span>
        </button>
-        <button id="account-delete"  class="top-tool-btn margin-r-10" :disabled="disableDelete"
+        <button id="account-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
                v-if="hasPermission('deleteUser')"
                @click="delBatch">
          <i class="cn-icon-delete cn-icon"></i>
-          <span>{{$t('overall.delete')}}</span>
+          <span>{{ $t('overall.delete') }}</span>
        </button>
      </template>
      <template #default>
        <loading :loading="loading"></loading>
        <user-table
-          ref="dataTable"
-          :api="url"
-          :isNoData="isNoData"
-          :custom-table-title="tools.customTableTitle"
-          :table-data="tableData"
-          @delete="del"
-          @edit="edit"
-          @orderBy="tableDataSort"
-          @reload="getTableData"
-          @selectionChange="selectionChange"
+            ref="dataTable"
+            :api="url"
+            :isNoData="isNoData"
+            :custom-table-title="tools.customTableTitle"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
        />
      </template>
      <template #pagination>
@@ -49,16 +49,13 @@
      </template>
    </cn-data-list>
    <el-drawer
-            v-model="rightBox.show"
-            direction="rtl"
-            class="common-right-box"
-            :size="700"
-            :with-header="false"
-            destroy-on-close>
-      <user-box
-              :object="object"
-              @close="closeRightBox"
-      />
+        v-model="rightBox.show"
+        direction="rtl"
+        class="common-right-box"
+        :size="700"
+        :with-header="false"
+        destroy-on-close>
+      <user-box :object="object" @close="closeRightBox"/>
    </el-drawer>
  </div>
 </template>