From 2c245020cdb70c480c71e10527a311d7d20c7943 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 16 Apr 2024 12:22:53 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20krry=20paging?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

chrome: remove debug
---
 .../Apps/AccountCreateUpdateForm/const.js     |   1 -
 src/components/Dialog/index.vue               |   2 +-
 .../Form/FormFields/TransferSelect.vue        |   5 +-
 src/components/Libs/Krry/paging/index.vue     | 136 ++++++++++--------
 src/styles/index.scss                         |   4 +
 src/views/ops/Job/QuickJob.vue                |   4 +-
 6 files changed, 85 insertions(+), 67 deletions(-)

diff --git a/src/components/Apps/AccountCreateUpdateForm/const.js b/src/components/Apps/AccountCreateUpdateForm/const.js
index f9a481ffa..c8235f817 100644
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -113,7 +113,6 @@ export const accountFieldsMeta = (vm) => {
       label: vm.$t('assets.Password'),
       component: UpdateToken,
       hidden: (formValue) => {
-        console.log('formValue: ', formValue)
         return formValue.secret_type !== 'password' || vm.addTemplate
       }
     },
diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index 0bf11a659..150d46c08 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -92,7 +92,7 @@ export default {
 <style lang="scss" scoped>
   .dialog >>> .el-dialog {
     border-radius: 0.3em;
-    max-width: 1500px;
+    max-width: min(100vw, 1500px);
 
     .el-icon-circle-check {
       display: none;
diff --git a/src/components/Form/FormFields/TransferSelect.vue b/src/components/Form/FormFields/TransferSelect.vue
index 906bea91b..acde05505 100644
--- a/src/components/Form/FormFields/TransferSelect.vue
+++ b/src/components/Form/FormFields/TransferSelect.vue
@@ -11,9 +11,10 @@
     />
     <Dialog
       v-if="showTransfer"
+      :close-on-click-modal="false"
       :title="label"
       :visible.sync="showTransfer"
-      :close-on-click-modal="false"
+      class="the-dialog"
       width="730px"
       @cancel="handleTransCancel"
       @confirm="handleTransConfirm"
@@ -154,7 +155,7 @@ export default {
       this.showTransfer = false
     },
     handleTransConfirm() {
-      const selectedData = this.$refs.pageTransfer.checkedData
+      const selectedData = this.$refs.pageTransfer.selectListCheck
       const options = selectedData.map(item => {
         return { value: item.id, label: item.label }
       })
diff --git a/src/components/Libs/Krry/paging/index.vue b/src/components/Libs/Krry/paging/index.vue
index 9327dc219..843918cff 100644
--- a/src/components/Libs/Krry/paging/index.vue
+++ b/src/components/Libs/Krry/paging/index.vue
@@ -1,61 +1,69 @@
 <template>
   <div class="krry-main">
-    <krry-box
-      ref="noSelect"
-      :async="async"
-      :async-search-flag="asyncSearchFlag"
-      :data-show-list="notSelectDataList"
-      :filter-placeholder="filterPlaceholder[0] || $tc('common.Search')"
-      :filterable="filterable"
-      :highlight-color="highlightColor"
-      :is-highlight="isHighlight"
-      :is-last-page="isLastPage"
-      :operate-id="0"
-      :page-size="pageSize"
-      :page-texts="pageTexts"
-      :show-clear-btn="showClearBtn"
-      :title="boxTitle[0] || $tc('common.Selection')"
-      @check-district="noCheckSelect"
-      @search-word="searchWord"
-      @check-disable="checkDisable"
-      @get-data="getData"
-      @get-data-by-keyword="getDataByKeyword"
-      @clear-input="clearQueryInp('left')"
-    />
-    <div class="opera">
-      <el-button
-        :disabled="disablePre"
-        class="el-transfer__button"
-        icon="el-icon-arrow-left"
-        size="mini"
-        @click="deleteData"
-      />
-      <el-button
-        :disabled="disableNex"
-        class="el-transfer__button"
-        icon="el-icon-arrow-right"
-        size="mini"
-        type="primary"
-        @click="addData"
-      />
-    </div>
-    <krry-box
-      ref="hasSelect"
-      :data-show-list="checkedData"
-      :filter-placeholder="filterPlaceholder[1] || $tc('common.Search')"
-      :filterable="filterable"
-      :highlight-color="highlightColor"
-      :is-highlight="isHighlight"
-      :operate-id="1"
-      :page-size="pageSize"
-      :page-texts="pageTexts"
-      :show-clear-btn="showClearBtn"
-      :title="boxTitle[1] || $tc('common.Selected')"
-      @check-district="hasCheckSelect"
-      @search-word="searchWord"
-      @check-disable="checkDisable"
-      @clear-input="clearQueryInp('right')"
-    />
+    <el-row :gutter="10">
+      <el-col :md="10" :sm="24">
+        <krry-box
+          ref="noSelect"
+          :async="async"
+          :async-search-flag="asyncSearchFlag"
+          :data-show-list="notSelectDataList"
+          :filter-placeholder="filterPlaceholder[0] || $tc('common.Search')"
+          :filterable="filterable"
+          :highlight-color="highlightColor"
+          :is-highlight="isHighlight"
+          :is-last-page="isLastPage"
+          :operate-id="0"
+          :page-size="pageSize"
+          :page-texts="pageTexts"
+          :show-clear-btn="showClearBtn"
+          :title="boxTitle[0] || $tc('common.Selection')"
+          @check-district="noCheckSelect"
+          @search-word="searchWord"
+          @check-disable="checkDisable"
+          @get-data="getData"
+          @get-data-by-keyword="getDataByKeyword"
+          @clear-input="clearQueryInp('left')"
+        />
+      </el-col>
+      <el-col :md="4" :sm="24" class="buttons">
+        <div class="opera">
+          <el-button
+            :disabled="disablePre"
+            class="el-transfer__button"
+            icon="el-icon-arrow-left"
+            size="mini"
+            @click="deleteData"
+          />
+          <el-button
+            :disabled="disableNex"
+            class="el-transfer__button"
+            icon="el-icon-arrow-right"
+            size="mini"
+            type="primary"
+            @click="addData"
+          />
+        </div>
+      </el-col>
+      <el-col :md="10" :sm="24">
+        <krry-box
+          ref="hasSelect"
+          :data-show-list="checkedData"
+          :filter-placeholder="filterPlaceholder[1] || $tc('common.Search')"
+          :filterable="filterable"
+          :highlight-color="highlightColor"
+          :is-highlight="isHighlight"
+          :operate-id="1"
+          :page-size="pageSize"
+          :page-texts="pageTexts"
+          :show-clear-btn="showClearBtn"
+          :title="boxTitle[1] || $tc('common.Selected')"
+          @check-district="hasCheckSelect"
+          @search-word="searchWord"
+          @check-disable="checkDisable"
+          @clear-input="clearQueryInp('right')"
+        />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -189,7 +197,7 @@ export default {
     }
   },
   created() {
-    this.async ? this.getData(1) : this.initData()
+    this.async ? this.getData(1, true) : this.initData(true)
   },
   methods: {
     // 分页数据，初始化数据，过滤已选数据
@@ -370,7 +378,7 @@ export default {
         await this.getData(1)
       }
     },
-    async getData(pageIndex) {
+    async getData(pageIndex, changed = false) {
       this.$nextTick(() => {
         // 设置异步分页的 pageIndex
         this.$refs.noSelect.asyncPageIndex = pageIndex
@@ -383,7 +391,8 @@ export default {
       if (Array.isArray(resData) && resData.length) {
         this.asyncDataList = resData
         this.notSelectDataList = resData
-        this.initData(false)
+        // 这里必须是 true，否则右侧不能搜索, 一搜索确认就不行了
+        this.initData(changed)
         this.isLastPage = resData.length < this.pageSize
       } else {
         this.notSelectDataList = []
@@ -401,18 +410,23 @@ export default {
 .inner-center {
   margin: 0 5px;
 }
+
+.buttons {
+  vertical-align: middle;
+}
 .opera {
   position: relative;
   display: inline-block;
   vertical-align: middle;
-  margin: 0 8px;
+  text-align: center;
+  margin: 180px 8px;
+  width: 100%;
 
   .el-button.is-circle {
     border-radius: 50%;
     padding: 12px;
     display: block;
     margin: 25px auto;
-
   }
   .el-transfer__button {
     padding: 5px;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index da7093e65..0a0f5e65c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -304,6 +304,10 @@ input[type=file] {
   font-size: 16px;
 }
 
+.el-dialog {
+  max-width: 100vw;
+}
+
 .el-input--mini .el-input__inner::placeholder {
   font-size: 13px;
   font-weight: 400;
diff --git a/src/views/ops/Job/QuickJob.vue b/src/views/ops/Job/QuickJob.vue
index fc9d5d29a..60b7fb04a 100644
--- a/src/views/ops/Job/QuickJob.vue
+++ b/src/views/ops/Job/QuickJob.vue
@@ -57,7 +57,7 @@ import Page from '@/layout/components/Page'
 import AdhocOpenDialog from '@/views/ops/Job/AdhocOpenDialog'
 import AdhocSaveDialog from '@/views/ops/Job/AdhocSaveDialog'
 import VariableHelpDialog from '@/views/ops/Job/VariableHelpDialog'
-import { createJob, StopJob, getJob, getTaskDetail } from '@/api/ops'
+import { createJob, getJob, getTaskDetail, StopJob } from '@/api/ops'
 
 export default {
   name: 'CommandExecution',
@@ -454,7 +454,7 @@ export default {
         this.xterm.write(this.wrapperError('Task has been canceled'))
         this.getTaskStatus()
       }).catch((e) => {
-        console.log(e)
+        this.$log.error(e)
       }).finally(() => {
         this.setBtn()
       })