From 7359568d758f689981809ac7c035f9223d2c7086 Mon Sep 17 00:00:00 2001
From: Wangjiahao <1522128093@qq.com>
Date: Thu, 6 Apr 2023 11:50:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9Tab=E8=BD=AE=E6=92=AD=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/SettingMenu.vue  |  33 ++++-
 .../components/editor/TabCarouselDialog.vue   | 127 ++++++++++++++++++
 .../components/widget/deWidget/TabStyle.vue   |  41 ------
 frontend/src/lang/en.js                       |   1 +
 frontend/src/lang/tw.js                       |   1 +
 frontend/src/lang/zh.js                       |   1 +
 6 files changed, 162 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/canvas/components/editor/TabCarouselDialog.vue

diff --git a/frontend/src/components/canvas/components/editor/SettingMenu.vue b/frontend/src/components/canvas/components/editor/SettingMenu.vue
index 89f330fbd3..6b1380bf0b 100644
--- a/frontend/src/components/canvas/components/editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/editor/SettingMenu.vue
@@ -66,6 +66,12 @@
             @click.native="linkageSetting"
           >{{ $t('panel.linkage_setting') }}
           </el-dropdown-item>
+          <el-dropdown-item
+            v-if="tabCarouselShow"
+            icon="el-icon-switch-button"
+            @click.native="tabCarouselSet"
+          >{{ $t('panel.carousel') }}
+          </el-dropdown-item>
           <el-dropdown-item
             v-if="'de-tabs'===curComponent.type"
             icon="el-icon-plus"
@@ -115,6 +121,21 @@
       />
     </el-dialog>
 
+    <!--tab 轮播设计-->
+    <el-dialog
+      :visible.sync="tabCarouselVisible"
+      width="400px"
+      class="dialog-css"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :show-close="true"
+    >
+      <TabCarouselDialog
+        v-if="tabCarouselVisible"
+        @onClose="tabCarouselVisible = false"
+      />
+    </el-dialog>
+
     <el-dialog
       v-if="showCustomSort"
       v-dialogDrag
@@ -155,12 +176,14 @@ import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { getViewLinkageGather } from '@/api/panel/linkage'
 import HyperlinksDialog from '@/components/canvas/components/editor/HyperlinksDialog'
+import TabCarouselDialog from '@/components/canvas/components/editor/TabCarouselDialog'
 import CustomTabsSort from '@/components/widget/deWidget/CustomTabsSort'
 
 export default {
-  components: { CustomTabsSort, HyperlinksDialog },
+  components: { CustomTabsSort, HyperlinksDialog,TabCarouselDialog },
   data() {
     return {
+      tabCarouselVisible: false,
       systemOS: 'Mac',
       showCustomSort: false,
       jumpExcludeViewType: [
@@ -189,6 +212,9 @@ export default {
     }
   },
   computed: {
+    tabCarouselShow() {
+      return this.curComponent.type === 'de-tabs'
+    },
     linkJumpSetShow() {
       return this.curComponent.type === 'view' &&
         !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType) &&
@@ -340,7 +366,12 @@ export default {
     // 超链接设置
     hyperlinksSet() {
       this.hyperlinksSetVisible = true
+    },
+    // 轮播设置
+    tabCarouselSet() {
+      this.tabCarouselVisible = true
     }
+
   }
 }
 </script>
diff --git a/frontend/src/components/canvas/components/editor/TabCarouselDialog.vue b/frontend/src/components/canvas/components/editor/TabCarouselDialog.vue
new file mode 100644
index 0000000000..4cc284efe9
--- /dev/null
+++ b/frontend/src/components/canvas/components/editor/TabCarouselDialog.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-row>
+    <el-form
+      ref="form"
+      size="mini"
+      label-width="70px"
+    >
+      <el-form-item :label="$t('panel.enable_carousel')">
+        <el-switch
+          v-model="carouselEnable"
+          size="mini"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('panel.switch_time')">
+        <el-input
+          v-model="switchTime"
+          :disabled="!carouselEnable"
+          type="number"
+          size="mini"
+          :min="2"
+          :max="3600"
+          class="hide-icon-number number-padding"
+          @change="switchTimeChange"
+        >
+          <template slot="append">S</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          @click="onSubmit"
+        >{{ $t('panel.confirm') }}</el-button>
+        <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </el-row>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      carouselEnable: false,
+      switchTime: 50
+    }
+  },
+  computed: {
+    ...mapState([
+      'curComponent'
+    ])
+  },
+  created() {
+    this.carouselEnable = this.curComponent.style.carouselEnable
+    this.switchTime = this.curComponent.style.switchTime
+  },
+  mounted() {
+  },
+  methods: {
+    switchTimeChange() {
+      if (!this.switchTime || this.switchTime < 2) {
+        this.switchTime = 2
+      } else if (this.switchTime && this.switchTime > 3600) {
+        this.switchTime = 3600
+      }
+    },
+    onSubmit() {
+      this.curComponent.style.carouselEnable  = this.carouselEnable
+      this.curComponent.style.switchTime  = this.switchTime
+      this.$store.commit('canvasChange')
+      this.onClose()
+    },
+    onClose() {
+      this.$emit('onClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .slot-class{
+    color: white;
+  }
+
+  .bottom {
+    margin-top: 20px;
+    text-align: center;
+
+  }
+  .ellip{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    background-color: #f7f8fa;
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 24px;
+    height: 24px;
+    border-radius: 3px;
+  }
+
+  .select-filed{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 35px;
+    height: 35px;
+    border-radius: 3px;
+  }
+  ::v-deep .el-popover{
+    height: 200px;
+    overflow: auto;
+  }
+  .icon-font{
+    color: white;
+  }
+
+</style>
diff --git a/frontend/src/components/widget/deWidget/TabStyle.vue b/frontend/src/components/widget/deWidget/TabStyle.vue
index 3b0c522199..27d44b66e2 100644
--- a/frontend/src/components/widget/deWidget/TabStyle.vue
+++ b/frontend/src/components/widget/deWidget/TabStyle.vue
@@ -112,39 +112,6 @@
           <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item :label="$t('panel.carousel')">
-        <el-row>
-          <el-col :span="6">
-            <el-checkbox
-              v-model="styleInfo.carouselEnable"
-              size="mini"
-              @change="styleChange"
-            >{{ $t('commons.enable') }}
-            </el-checkbox>
-          </el-col>
-          <el-col
-            :span="8"
-            style="text-align: right;padding-right: 10px"
-          >
-            {{ $t('panel.switch_time') }}
-          </el-col>
-          <el-col :span="10">
-            <el-input
-              v-model="styleInfo.switchTime"
-              :disabled="!styleInfo.carouselEnable"
-              type="number"
-              size="mini"
-              :min="2"
-              :max="3600"
-              class="hide-icon-number number-padding"
-              @change="switchTimeChange"
-            >
-              <template slot="append">S</template>
-            </el-input>
-          </el-col>
-
-        </el-row>
-      </el-form-item>
     </el-form>
     <i
       slot="reference"
@@ -181,14 +148,6 @@ export default {
       const current = this.$refs[pickKey]
       current && (current.showPicker = true)
     },
-    switchTimeChange() {
-      if (!this.styleInfo.switchTime || this.styleInfo.switchTime < 2) {
-        this.styleInfo.switchTime = 2
-      } else if (this.styleInfo.switchTime && this.styleInfo.switchTime > 3600) {
-        this.styleInfo.switchTime = 3600
-      }
-      this.styleChange()
-    },
     styleChange() {
       this.$store.commit('canvasChange')
     }
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 4c0098245a..4b96813d7f 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -2001,6 +2001,7 @@ export default {
     position_adjust_component: 'Position adjust',
     active_font_size: 'Selected font size',
     carousel: 'Carousel',
+    enable_carousel: 'Enable Carousel',
     switch_time: 'Switch time',
     position_adjust: 'Position',
     space_top: 'Top',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 8e0db8d908..33d9d8adb8 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1995,6 +1995,7 @@ export default {
     position_adjust_component: '位置調整',
     active_font_size: '选中字體大小',
     carousel: '輪播',
+    enable_carousel: '啟用輪播',
     switch_time: '切換時間',
     position_adjust: '位置',
     space_top: '上',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index f9a60cbd36..94d0b27d51 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -2012,6 +2012,7 @@ export default {
     position_adjust_component: '位置调整',
     active_font_size: '选中字体大小',
     carousel: '轮播',
+    enable_carousel: '启用轮播',
     switch_time: '切换时间',
     position_adjust: '位置',
     space_top: '上',