From fc8aea41a2795aa60f0f3bb3c795c4f0979c3eaa Mon Sep 17 00:00:00 2001
From: shuiluo <lzi.love@icloud.com>
Date: Sat, 17 Jul 2021 09:48:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=20=E9=83=A8=E5=88=86=E5=9B=BD=E9=99=85=E5=8C=96?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/table.vue                |  23 +-
 src/components/tool/Drawer.vue                | 196 +++++++++---------
 src/local/index.js                            |   2 +
 src/local/table.js                            |   7 +
 .../frame/components/setting/Setting.vue      |  17 +-
 src/pages/frame/layouts/AdminLayout.vue       |   4 +-
 .../ranger/task_managment/center/index.vue    |  29 +--
 7 files changed, 149 insertions(+), 129 deletions(-)
 create mode 100644 src/local/table.js

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index dc767b2..fe15913 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -13,10 +13,10 @@
                                 <slot name="moreSearch" :query="queryForm" />
                             </div>
                         </template>
-                        <a-button>更多查询</a-button>
+                        <a-button>{{ $t('table.moreSearch') }}</a-button>
                     </a-popover>
-                    <a-button @click="reset">重置</a-button>
-                    <a-button type="primary" @click="getData">查询</a-button>
+                    <a-button @click="reset">{{ $t('table.reset') }}</a-button>
+                    <a-button type="primary" @click="getData">{{ $t('table.search') }}</a-button>
                 </a-space>
             </div>
         </my-card>
@@ -24,7 +24,7 @@
         <my-card :class="noPadding ? 'tw-p-0' : ''" :style="tableCardStyle">
             <a-space class="tw-mb-2">
                 <a-button type="primary" v-if="newBtn" @click="addBtnClick">
-                    {{ newBtn.text || '新增' }}
+                    {{ newBtn.text || $t('table.add') }}
                 </a-button>
                 <slot name="operation" />
             </a-space>
@@ -42,7 +42,7 @@
             >
                 <slot />
                 <a-table-column
-                    :title="newButtons.title"
+                    :title="newButtons.title || $t('table.operation')"
                     v-if="this.newButtons"
                     v-bind="this.newButtons.options"
                 >
@@ -65,7 +65,7 @@
             :width="dWidth"
             @close="hidden"
             :maskClosable="false"
-            :title="title"
+            :title="drawerTitle"
             :afterVisibleChange="afterVisibleChange"
         >
             <slot name="drawer" :hidden="hidden" :refresh="getData" :type="type" :row="row" />
@@ -83,8 +83,6 @@ const initQuery = {
     pageNum: 1,
 };
 
-const defaultTitle = '新增';
-
 export default {
     props: {
         url: String,
@@ -123,7 +121,7 @@ export default {
             loading: false,
             total: 0,
             visible: false,
-            title: newBtn.title ?? defaultTitle,
+            title: null,
             drawerStyle: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -160,7 +158,7 @@ export default {
         newButtons() {
             return this.buttons
                 ? Array.isArray(this.buttons)
-                    ? { data: this.buttons, title: '操作' }
+                    ? { data: this.buttons }
                     : this.buttons
                 : null;
         },
@@ -188,6 +186,9 @@ export default {
                   }
                 : {};
         },
+        drawerTitle() {
+            return this.title ?? this.addBtn?.title ?? this.$t('table.add');
+        },
     },
 
     methods: {
@@ -228,7 +229,7 @@ export default {
         },
         afterVisibleChange(visible) {
             if (!visible) {
-                this.title = this.addBtn?.title ?? defaultTitle;
+                this.title = null;
                 this.type = null;
                 this.row = null;
                 this.dWidth = this.drawerWidth;
diff --git a/src/components/tool/Drawer.vue b/src/components/tool/Drawer.vue
index f3810e9..8d2ec5f 100644
--- a/src/components/tool/Drawer.vue
+++ b/src/components/tool/Drawer.vue
@@ -1,64 +1,68 @@
 <template>
-  <div >
-    <div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
-    <div :class="['drawer', placement, visible ? 'open' : 'close']">
-      <div ref="drawer" class="content beauty-scroll">
-        <slot></slot>
-      </div>
-      <div v-if="showHandler" :class="['handler-container', placement, visible ? 'open' : 'close']" ref="handler" @click="toggle">
-        <slot v-if="$slots.handler" name="handler"></slot>
-        <div v-else class="handler">
-          <a-icon :type="visible ? 'close'  : 'bars'" />
-        </div>
-      </div>
+    <div>
+        <div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
+        <div :class="['drawer', placement, visible ? 'open' : 'close']">
+            <div ref="drawer" class="content beauty-scroll">
+                <slot />
+            </div>
+            <div
+                v-if="showHandler"
+                :class="['handler-container', placement, visible ? 'open' : 'close']"
+                ref="handler"
+                @click="toggle"
+            >
+                <slot v-if="$slots.handler" name="handler" />
+                <div v-else class="handler">
+                    <a-icon :type="visible ? 'close' : 'bars'" />
+                </div>
+            </div>
+        </div> 
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'Drawer',
-  data () {
-    return {
-    }
-  },
-  model: {
-    prop: 'visible',
-    event: 'change'
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false
+    name: 'Drawer',
+    data() {
+        return {};
     },
-    placement: {
-      type: String,
-      required: false,
-      default: 'left'
+    model: {
+        prop: 'visible',
+        event: 'change',
     },
-    showHandler: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  methods: {
-    open () {
-      this.$emit('change', true)
+    props: {
+        visible: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        placement: {
+            type: String,
+            required: false,
+            default: 'left',
+        },
+        showHandler: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
     },
-    close () {
-      this.$emit('change', false)
+    methods: {
+        open() {
+            this.$emit('change', true);
+        },
+        close() {
+            this.$emit('change', false);
+        },
+        toggle() {
+            this.$emit('change', !this.visible);
+        },
     },
-    toggle () {
-      this.$emit('change', !this.visible)
-    }
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
-  .mask{
+.mask {
     position: fixed;
     left: 0;
     right: 0;
@@ -67,50 +71,50 @@ export default {
     background-color: @shadow-color;
     transition: all 0.5s;
     z-index: 100;
-    &.open{
-      display: inline-block;
+    &.open {
+        display: inline-block;
     }
-    &.close{
-      display: none;
+    &.close {
+        display: none;
     }
-  }
-  .drawer{
+}
+.drawer {
     position: fixed;
     transition: all 0.5s;
     height: 100vh;
     z-index: 100;
-    &.left{
-      left: 0px;
-      &.open{
-        .content{
-          box-shadow: 2px 0 8px @shadow-color;
+    &.left {
+        left: 0px;
+        &.open {
+            .content {
+                box-shadow: 2px 0 8px @shadow-color;
+            }
+        }
+        &.close {
+            transform: translateX(-100%);
         }
-      }
-      &.close{
-        transform: translateX(-100%);
-      }
     }
-    &.right{
-      right: 0px;
-      .content{
-        float: right;
-      }
-      &.open{
-        .content{
-          box-shadow: -2px 0 8px @shadow-color;
+    &.right {
+        right: 0px;
+        .content {
+            float: right;
+        }
+        &.open {
+            .content {
+                box-shadow: -2px 0 8px @shadow-color;
+            }
+        }
+        &.close {
+            transform: translateX(100%);
         }
-      }
-      &.close{
-        transform: translateX(100%);
-      }
     }
-  }
-  .content{
+}
+.content {
     display: inline-block;
     height: 100vh;
     overflow-y: auto;
-  }
-  .handler-container{
+}
+.handler-container {
     position: absolute;
     display: inline-block;
     text-align: center;
@@ -119,24 +123,24 @@ export default {
     top: 200px;
     z-index: 100;
     .handler {
-      height: 40px;
-      width: 40px;
-      background-color: @base-bg-color;
-      font-size: 26px;
-      box-shadow: 0 2px 8px @shadow-color;
-      line-height: 40px;
+        height: 40px;
+        width: 40px;
+        background-color: @base-bg-color;
+        font-size: 26px;
+        box-shadow: 0 2px 8px @shadow-color;
+        line-height: 40px;
     }
-    &.left{
-      right: -40px;
-      .handler{
-        border-radius: 0 5px 5px 0;
-      }
+    &.left {
+        right: -40px;
+        .handler {
+            border-radius: 0 5px 5px 0;
+        }
     }
-    &.right{
-      left: -40px;
-      .handler{
-        border-radius: 5px 0 0 5px;
-      }
+    &.right {
+        left: -40px;
+        .handler {
+            border-radius: 5px 0 0 5px;
+        }
     }
-  }
+}
 </style>
diff --git a/src/local/index.js b/src/local/index.js
index 2fd0f73..5cd2aea 100644
--- a/src/local/index.js
+++ b/src/local/index.js
@@ -1,4 +1,5 @@
 import selectLang from './select';
+import TableLang from './table';
 
 const zh_CN = {};
 const en_US = {};
@@ -12,5 +13,6 @@ function formatLang(langObject) {
 }
 
 formatLang(selectLang);
+formatLang(TableLang);
 
 export { en_US, zh_CN };
diff --git a/src/local/table.js b/src/local/table.js
new file mode 100644
index 0000000..875567c
--- /dev/null
+++ b/src/local/table.js
@@ -0,0 +1,7 @@
+export default {
+    'table.operation': ['操作', 'Operation'],
+    'table.moreSearch': ['更多查询', 'More Search'],
+    'table.reset': ['重置', 'Reset'],
+    'table.add': ['新增', 'Add'],
+    'table.search': ['查询', 'Search'],
+};
diff --git a/src/pages/frame/components/setting/Setting.vue b/src/pages/frame/components/setting/Setting.vue
index fd5a45d..3825e7c 100644
--- a/src/pages/frame/components/setting/Setting.vue
+++ b/src/pages/frame/components/setting/Setting.vue
@@ -8,7 +8,7 @@
         </setting-item>
         <setting-item :title="$t('theme.title')">
             <img-checkbox-group
-                @change="values => setTheme({ ...theme, mode: values[0] })"
+                @change="(values) => setTheme({ ...theme, mode: values[0] })"
                 :default-values="[theme.mode]"
             >
                 <img-checkbox
@@ -39,7 +39,7 @@
         </setting-item>
         <a-divider />
         <setting-item :title="$t('navigate.title')">
-            <img-checkbox-group @change="values => setLayout(values[0])" :default-values="[layout]">
+            <img-checkbox-group @change="(values) => setLayout(values[0])" :default-values="[layout]">
                 <img-checkbox
                     :title="$t('navigate.side')"
                     img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg"
@@ -105,7 +105,7 @@
                         :checked="animate.disabled"
                         slot="actions"
                         size="small"
-                        @change="val => setAnimate({ ...animate, disabled: val })"
+                        @change="(val) => setAnimate({ ...animate, disabled: val })"
                     />
                 </a-list-item>
                 <a-list-item>
@@ -113,7 +113,7 @@
                     <a-select
                         :value="animate.name"
                         :getPopupContainer="getPopupContainer"
-                        @change="val => setAnimate({ ...animate, name: val })"
+                        @change="(val) => setAnimate({ ...animate, name: val })"
                         class="select-item"
                         size="small"
                         slot="actions"
@@ -128,7 +128,7 @@
                     <a-select
                         :value="animate.direction"
                         :getPopupContainer="getPopupContainer"
-                        @change="val => setAnimate({ ...animate, direction: val })"
+                        @change="(val) => setAnimate({ ...animate, direction: val })"
                         class="select-item"
                         size="small"
                         slot="actions"
@@ -238,7 +238,7 @@ export default {
     },
     computed: {
         directions() {
-            return this.animates.find(item => item.name == this.animate.name).directions;
+            return this.animates.find((item) => item.name == this.animate.name).directions;
         },
         ...mapState('settingModule', [
             'theme',
@@ -254,7 +254,7 @@ export default {
         ]),
     },
     watch: {
-        'animate.name': function(val) {
+        'animate.name': function (val) {
             this.setAnimate({ name: val, direction: this.directions[0] });
         },
     },
@@ -282,7 +282,7 @@ export default {
             let config = {};
             let mySetting = this.$store.state.settingModule;
             let dftSetting = local ? settingConfig : settingConfig;
-            Object.keys(mySetting).forEach(key => {
+            Object.keys(mySetting).forEach((key) => {
                 const dftValue = dftSetting[key],
                     myValue = mySetting[key];
                 if (dftValue != undefined && !fastEqual(dftValue, myValue)) {
@@ -309,6 +309,7 @@ export default {
 <style lang="less" module>
 .side-setting {
     min-height: 100%;
+    width: 280px;
     background-color: @base-bg-color;
     padding: 24px;
     font-size: 14px;
diff --git a/src/pages/frame/layouts/AdminLayout.vue b/src/pages/frame/layouts/AdminLayout.vue
index 72e004c..7e5bbf1 100644
--- a/src/pages/frame/layouts/AdminLayout.vue
+++ b/src/pages/frame/layouts/AdminLayout.vue
@@ -47,9 +47,9 @@
 
 <script>
 import LayoutTopHeader from '../components/header/LayoutTopHeader.vue';
-import Drawer from '@/components/tool/Drawer';
+import Drawer from '@/components/tool/Drawer.vue';
 import SideMenu from '@/components/menu/SideMenu.vue';
-import Setting from '../components/setting/Setting';
+import Setting from '../components/setting/Setting.vue';
 import { mapState, mapMutations, mapGetters } from 'vuex';
 import { convertListToTree, getUserInfo } from '@/utils';
 
diff --git a/src/pages/ranger/task_managment/center/index.vue b/src/pages/ranger/task_managment/center/index.vue
index cc76888..ce11971 100644
--- a/src/pages/ranger/task_managment/center/index.vue
+++ b/src/pages/ranger/task_managment/center/index.vue
@@ -7,6 +7,7 @@
         :selected.sync="selected"
         ref="table"
         :drawerWidth="800"
+        :scroll="scroll"
     >
         <template #search="{ query }">
             <MoreItem label="开始时间">
@@ -175,19 +176,23 @@ export default {
             addBtn: {
                 title: '新建临时任务',
             },
-            buttons: [
-                {
-                    label: '详情',
-                    click: this.viewDetail,
-                },
-                { label: '进度', click: this.viewProgress },
-                {
-                    type: 'confirm',
-                    url: (row) => `/ranger/inspection/api/v1/jobs/${row.jobId}`,
-                    after: this.refresh,
-                },
-            ],
+            buttons: {
+                options: { fixed: 'right', width: 200 },
+                data: [
+                    {
+                        label: '详情',
+                        click: this.viewDetail,
+                    },
+                    { label: '进度', click: this.viewProgress },
+                    {
+                        type: 'confirm',
+                        url: (row) => `/ranger/inspection/api/v1/jobs/${row.jobId}`,
+                        after: this.refresh,
+                    },
+                ],
+            },
             selected: {},
+            scroll: { x: 1500 },
         };
     },
     methods: {
-- 
GitLab