fix: 编辑用户组织不能删除，默认仪表板取消默认把”删除“字样改成”取消默认“ #3901，选项卡-tab内部样式设置-轮播-时间调试-时间被上下调节按钮遮挡，明细表的页码在深色模式下看不清

2022-11-29 12:02:25 +08:00 · 2022-11-29 12:02:25 +08:00 · 2a2a7b8567
commit 2a2a7b8567
parent c7e5c0e96e
24 changed files with 563 additions and 131 deletions
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@ -24,7 +24,7 @@
          >
            <el-tooltip :content="item.tooltip">
              <span style="float: left;">
-                <i :class="item.icon"/>
+                <i :class="item.icon" />
              </span>
            </el-tooltip>
          </el-radio-button>
@ -47,7 +47,7 @@
              :value="item.value"
            >
              <span style="float: left;">
-                <i :class="item.icon"/>
+                <i :class="item.icon" />
              </span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
            </el-option>
@ -257,7 +257,7 @@
              @click="goColor"
            />
          </el-tooltip>
-          <div :style="letterDivColor"/>
+          <div :style="letterDivColor" />
          <el-color-picker
            ref="colorPicker"
            v-model="styleInfo.color"
@ -279,7 +279,7 @@
              @click="goBoardColor"
            />
          </el-tooltip>
-          <div :style="boardDivColor"/>
+          <div :style="boardDivColor" />
          <el-color-picker
            ref="boardColorPicker"
            v-model="styleInfo.borderColor"
@ -302,7 +302,7 @@
              @click="goBackgroundColor"
            />
          </el-tooltip>
-          <div :style="backgroundDivColor"/>
+          <div :style="backgroundDivColor" />
          <el-color-picker
            ref="backgroundColorPicker"
            v-model="styleInfo.backgroundColor"
@ -318,7 +318,7 @@
        style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
      >
        <el-tooltip :content="$t('panel.video_info')">
-          <VideoLinks :link-info="curComponent.videoLinks"/>
+          <VideoLinks :link-info="curComponent.videoLinks" />
        </el-tooltip>
      </div>

@ -327,7 +327,7 @@
        style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
      >
        <el-tooltip :content="$t('panel.stream_media_info')">
-          <StreamMediaLinks :link-info="curComponent.streamMediaLinks"/>
+          <StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
        </el-tooltip>
      </div>

@ -336,7 +336,7 @@
        style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
      >
        <el-tooltip :content="$t('panel.web_addr')">
-          <FrameLinks :link-info="curComponent.frameLinks"/>
+          <FrameLinks :link-info="curComponent.frameLinks" />
        </el-tooltip>
      </div>
      <div
@ -356,7 +356,7 @@
        style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
      >
        <el-tooltip :content="$t('panel.tab_inner_style')">
-          <tab-style :style-info="styleInfo"/>
+          <tab-style :style-info="styleInfo" />
        </el-tooltip>
      </div>

--- a/frontend/src/components/canvas/components/editor/DeEditor.vue
+++ b/frontend/src/components/canvas/components/editor/DeEditor.vue
@ -121,7 +121,7 @@
      :canvas-id="canvasId"
    />
    <!-- 右击菜单 -->
-    <ContextMenu/>
+    <ContextMenu />

    <!-- 对齐标线 -->
    <span
--- a/frontend/src/components/canvas/components/editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/editor/SettingMenu.vue
@ -5,7 +5,7 @@
        trigger="click"
        @mouseup="handleMouseUp"
      >
-        <slot name="icon"/>
+        <slot name="icon" />
        <el-dropdown-menu v-if="curComponent">
          <el-dropdown-item
            v-if="editFilter.includes(curComponent.type)"
@ -33,7 +33,7 @@
          <el-dropdown-item v-if="!curComponent.auxiliaryMatrix">
            <el-dropdown placement="right-start">
              <span class="el-icon-copy-document">
-                {{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right"/>
+                {{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
@ -87,14 +87,14 @@
            v-if="curComponent.type != 'custom-button'"
            @click.native="hyperlinksSet"
          >
-            <i class="icon iconfont icon-font icon-chaolianjie1"/>
+            <i class="icon iconfont icon-font icon-chaolianjie1" />
            {{ $t('panel.hyperlinks') }}
          </el-dropdown-item>
          <el-dropdown-item
            v-if="curComponent.type !== 'view' && !curComponent.auxiliaryMatrix"
            @click.native="positionAdjust"
          >
-            <i class="el-icon-map-location"/>
+            <i class="el-icon-map-location" />
            {{ $t('panel.position_adjust') }}
          </el-dropdown-item>
        </el-dropdown-menu>
--- a/frontend/src/components/canvas/customComponent/UserView.vue
+++ b/frontend/src/components/canvas/customComponent/UserView.vue
@ -658,7 +658,6 @@ export default {
        } catch (e) {
          console.error('reDrawView-error：', this.element.propValue.id)
        }
-
      }
    },
    bindPluginEvent() {
--- a/frontend/src/components/deCustomCm/DeDatePick.vue
+++ b/frontend/src/components/deCustomCm/DeDatePick.vue
@ -26,7 +26,7 @@ export default {
  },
  methods: {
    handleChange(val) {
-      const [ pre, next ] = val
+      const [pre, next] = val
      this.$emit('input', [pre, next ? new Date(+new Date(next) + (23 * 3600 + 59 * 61) * 1000) : ''])
    }
  }
--- a/frontend/src/components/deCustomCm/DePager.vue
+++ b/frontend/src/components/deCustomCm/DePager.vue
@ -0,0 +1,180 @@
+<template>
+  <ul
+    class="el-pager"
+    @click="onPagerClick"
+  >
+    <li
+      v-if="pageCount > 0"
+      :class="{ active: currentPage === 1, disabled }"
+      :style="customStyle"
+      class="number"
+    >1</li>
+    <li
+      v-if="showPrevMore"
+      class="el-icon more btn-quickprev"
+      :class="[quickprevIconClass, { disabled }]"
+      :style="customStyle"
+      @mouseenter="onMouseenter('left')"
+      @mouseleave="quickprevIconClass = 'el-icon-more'"
+    />
+    <li
+      v-for="pager in pagers"
+      :key="pager"
+      :style="{ color: currentPage === pager? '#409eff' : customStyle.color }"
+      :class="{ active: currentPage === pager, disabled }"
+      class="number"
+    >{{ pager }}</li>
+    <li
+      v-if="showNextMore"
+      class="el-icon more btn-quicknext"
+      :class="[quicknextIconClass, { disabled }]"
+      :style="customStyle"
+      @mouseenter="onMouseenter('right')"
+      @mouseleave="quicknextIconClass = 'el-icon-more'"
+    />
+    <li
+      v-if="pageCount > 1"
+      :class="{ active: currentPage === pageCount, disabled }"
+      :style="customStyle"
+      class="number"
+    >{{ pageCount }}</li>
+  </ul>
+</template>
+
+<script type="text/babel">
+export default {
+  name: 'ElPager',
+
+  props: {
+    currentPage: Number,
+
+    pageCount: Number,
+
+    pagerCount: Number,
+    customStyle: {
+      default: () => {},
+      type: Object
+    },
+
+    disabled: Boolean
+  },
+
+  data() {
+    return {
+      current: null,
+      showPrevMore: false,
+      showNextMore: false,
+      quicknextIconClass: 'el-icon-more',
+      quickprevIconClass: 'el-icon-more'
+    }
+  },
+
+  computed: {
+    pagers() {
+      const pagerCount = this.pagerCount
+      const halfPagerCount = (pagerCount - 1) / 2
+
+      const currentPage = Number(this.currentPage)
+      const pageCount = Number(this.pageCount)
+
+      let showPrevMore = false
+      let showNextMore = false
+
+      if (pageCount > pagerCount) {
+        if (currentPage > pagerCount - halfPagerCount) {
+          showPrevMore = true
+        }
+
+        if (currentPage < pageCount - halfPagerCount) {
+          showNextMore = true
+        }
+      }
+
+      const array = []
+
+      if (showPrevMore && !showNextMore) {
+        const startPage = pageCount - (pagerCount - 2)
+        for (let i = startPage; i < pageCount; i++) {
+          array.push(i)
+        }
+      } else if (!showPrevMore && showNextMore) {
+        for (let i = 2; i < pagerCount; i++) {
+          array.push(i)
+        }
+      } else if (showPrevMore && showNextMore) {
+        const offset = Math.floor(pagerCount / 2) - 1
+        for (let i = currentPage - offset; i <= currentPage + offset; i++) {
+          array.push(i)
+        }
+      } else {
+        for (let i = 2; i < pageCount; i++) {
+          array.push(i)
+        }
+      }
+
+      //eslint-disable-next-line
+      this.showPrevMore = showPrevMore
+      //eslint-disable-next-line
+      this.showNextMore = showNextMore
+
+      return array
+    }
+  },
+
+  watch: {
+    showPrevMore(val) {
+      if (!val) this.quickprevIconClass = 'el-icon-more'
+    },
+
+    showNextMore(val) {
+      if (!val) this.quicknextIconClass = 'el-icon-more'
+    }
+  },
+
+  methods: {
+    onPagerClick(event) {
+      const target = event.target
+      if (target.tagName === 'UL' || this.disabled) {
+        return
+      }
+
+      let newPage = Number(event.target.textContent)
+      const pageCount = this.pageCount
+      const currentPage = this.currentPage
+      const pagerCountOffset = this.pagerCount - 2
+
+      if (target.className.indexOf('more') !== -1) {
+        if (target.className.indexOf('quickprev') !== -1) {
+          newPage = currentPage - pagerCountOffset
+        } else if (target.className.indexOf('quicknext') !== -1) {
+          newPage = currentPage + pagerCountOffset
+        }
+      }
+
+      /* istanbul ignore if */
+      if (!isNaN(newPage)) {
+        if (newPage < 1) {
+          newPage = 1
+        }
+
+        if (newPage > pageCount) {
+          newPage = pageCount
+        }
+      }
+
+      if (newPage !== currentPage) {
+        this.$emit('change', newPage)
+      }
+    },
+
+    onMouseenter(direction) {
+      if (this.disabled) return
+      if (direction === 'left') {
+        this.quickprevIconClass = 'el-icon-d-arrow-left'
+      } else {
+        this.quicknextIconClass = 'el-icon-d-arrow-right'
+      }
+    }
+  }
+}
+</script>
--- a/frontend/src/components/deCustomCm/pagination.js
+++ b/frontend/src/components/deCustomCm/pagination.js
@ -0,0 +1,241 @@
+import Pager from './DePager.vue'
+
+export default {
+  name: 'DePagination',
+
+  props: {
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+
+    customStyle: {
+      default: () => {},
+      type: Object
+    },
+
+    small: Boolean,
+
+    total: Number,
+
+    pageCount: Number,
+
+    pagerCount: {
+      type: Number,
+      validator(value) {
+        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1
+      },
+      default: 7
+    },
+
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+
+    layout: {
+      default: 'prev, pager, next'
+    },
+
+    popperClass: String,
+
+    prevText: String,
+
+    nextText: String,
+
+    background: Boolean,
+
+    disabled: Boolean,
+
+    hideOnSinglePage: Boolean
+  },
+
+  data() {
+    return {
+      internalCurrentPage: 1,
+      internalPageSize: 0,
+      lastEmittedPage: -1,
+      userChangePageSize: false
+    }
+  },
+
+  render(h) {
+    const layout = this.layout
+    if (!layout) return null
+    if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null
+
+    const template = <div class={['el-pagination', {
+      'is-background': this.background,
+      'el-pagination--small': this.small
+    }] }></div>
+    const TEMPLATE_MAP = {
+      prev: <prev customStyle={ this.customStyle } ></prev>,
+      pager: <pager currentPage={ this.internalCurrentPage } customStyle={ this.customStyle } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
+      next: <next customStyle={ this.customStyle } ></next>
+    }
+    const components = layout.split(',').map((item) => item.trim())
+
+    template.children = template.children || []
+    components.forEach(compo => {
+      template.children.push(TEMPLATE_MAP[compo])
+    })
+    return template
+  },
+
+  components: {
+    Prev: {
+      props: {
+        customStyle: {
+          default: () => {},
+          type: Object
+        }
+      },
+      render(h) {
+        return (
+          <button
+            type='button'
+            class='btn-prev'
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }
+            on-click={ this.$parent.prev }>
+            {
+              this.$parent.prevText
+                ? <span>{ this.$parent.prevText }</span>
+                : <i style={ this.customStyle } class='el-icon el-icon-arrow-left'></i>
+            }
+          </button>
+        )
+      }
+    },
+
+    Next: {
+      props: {
+        customStyle: {
+          default: () => {},
+          type: Object
+        }
+      },
+      render(h) {
+        return (
+          <button
+            type='button'
+            class='btn-next'
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
+            on-click={ this.$parent.next }>
+            {
+              this.$parent.nextText
+                ? <span>{ this.$parent.nextText }</span>
+                : <i style={ this.customStyle } class='el-icon el-icon-arrow-right'></i>
+            }
+          </button>
+        )
+      }
+    },
+    Pager
+  },
+
+  methods: {
+    handleCurrentChange(val) {
+      this.internalCurrentPage = this.getValidCurrentPage(val)
+      this.userChangePageSize = true
+      this.emitChange()
+    },
+
+    prev() {
+      if (this.disabled) return
+      const newVal = this.internalCurrentPage - 1
+      this.internalCurrentPage = this.getValidCurrentPage(newVal)
+      this.$emit('prev-click', this.internalCurrentPage)
+      this.emitChange()
+    },
+
+    next() {
+      if (this.disabled) return
+      const newVal = this.internalCurrentPage + 1
+      this.internalCurrentPage = this.getValidCurrentPage(newVal)
+      this.$emit('next-click', this.internalCurrentPage)
+      this.emitChange()
+    },
+
+    getValidCurrentPage(value) {
+      value = parseInt(value, 10)
+
+      const havePageCount = typeof this.internalPageCount === 'number'
+
+      let resetValue
+      if (!havePageCount) {
+        if (isNaN(value) || value < 1) resetValue = 1
+      } else {
+        if (value < 1) {
+          resetValue = 1
+        } else if (value > this.internalPageCount) {
+          resetValue = this.internalPageCount
+        }
+      }
+
+      if (resetValue === undefined && isNaN(value)) {
+        resetValue = 1
+      } else if (resetValue === 0) {
+        resetValue = 1
+      }
+
+      return resetValue === undefined ? value : resetValue
+    },
+
+    emitChange() {
+      this.$nextTick(() => {
+        if (this.internalCurrentPage !== this.lastEmittedPage || this.userChangePageSize) {
+          this.$emit('current-change', this.internalCurrentPage)
+          this.lastEmittedPage = this.internalCurrentPage
+          this.userChangePageSize = false
+        }
+      })
+    }
+  },
+
+  computed: {
+    internalPageCount() {
+      if (typeof this.total === 'number') {
+        return Math.max(1, Math.ceil(this.total / this.internalPageSize))
+      } else if (typeof this.pageCount === 'number') {
+        return Math.max(1, this.pageCount)
+      }
+      return null
+    }
+  },
+
+  watch: {
+    currentPage: {
+      immediate: true,
+      handler(val) {
+        this.internalCurrentPage = this.getValidCurrentPage(val)
+      }
+    },
+
+    pageSize: {
+      immediate: true,
+      handler(val) {
+        this.internalPageSize = isNaN(val) ? 10 : val
+      }
+    },
+
+    internalCurrentPage: {
+      immediate: true,
+      handler(newVal) {
+        this.$emit('update:currentPage', newVal)
+        this.lastEmittedPage = -1
+      }
+    },
+
+    internalPageCount(newVal) {
+      /* istanbul ignore if */
+      const oldPage = this.internalCurrentPage
+      if (newVal > 0 && oldPage === 0) {
+        this.internalCurrentPage = 1
+      } else if (oldPage > newVal) {
+        this.internalCurrentPage = newVal === 0 ? 1 : newVal
+        this.userChangePageSize && this.emitChange()
+      }
+      this.userChangePageSize = false
+    }
+  }
+}
--- a/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/frontend/src/components/widget/deWidget/DeTabs.vue
@ -202,7 +202,9 @@
    </el-dialog>

    <text-attr
-      v-if="showAttr && curComponent.canvasId === activeCanvasId" && isEdit
+      v-if="showAttr && curComponent.canvasId === activeCanvasId"
+      &&
+      is-edit
      :canvas-id="curComponent.canvasId"
      :scroll-left="scrollLeft"
      :scroll-top="scrollTop"
--- a/frontend/src/components/widget/deWidget/TabStyle.vue
+++ b/frontend/src/components/widget/deWidget/TabStyle.vue
@ -136,7 +136,7 @@
              size="mini"
              :min="2"
              :max="3600"
-              class="hide-icon-number"
+              class="hide-icon-number number-padding"
              @change="switchTimeChange"
            >
              <template slot="append">S</template>
@ -198,5 +198,12 @@ export default {
 </script>

 <style lang="scss" scoped>
-
+::v-deep.number-padding {
+  .el-input__inner {
+    padding-right: 0;
+  }
+  .el-input-group__append {
+    padding: 0 10px;
+  }
+}
 </style>
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -43,7 +43,7 @@ export default {
  },
  track: {
    upload_limit_format: 'The image format is incorrect. It supports JPG and PNG',
-    upload_limit_size: 'Picture size shall not exceed',
+    upload_limit_size: 'Picture size shall not exceed'
  },
  route: {
    dashboard: 'Dashboard',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -43,7 +43,7 @@ export default {
  },
  track: {
    upload_limit_format: '圖片格式錯誤，支持JPG，PNG',
-    upload_limit_size: '圖片大小不超過',
+    upload_limit_size: '圖片大小不超過'
  },
  route: {
    dashboard: '首頁',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -43,7 +43,7 @@ export default {
  },
  track: {
    upload_limit_format: '图片格式错误，支持JPG，PNG',
-    upload_limit_size: '图片大小不超过',
+    upload_limit_size: '图片大小不超过'
  },
  route: {
    dashboard: '首页',
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@ -112,7 +112,7 @@
              :http-request="upload"
              :file-list="fileList"
            >
-              <i class="el-icon-plus"/>
+              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog
              top="25vh"
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@ -68,12 +68,14 @@
            }}</span>
            {{ $t('chart.items') }}
          </span>
-          <el-pagination
+          <de-pagination
            small
            :current-page="currentPage.page"
-            :page-sizes="[10,20,50,100]"
            :page-size="currentPage.pageSize"
            :pager-count="5"
+            :custom-style="{
+              color: title_class.color
+            }"
            layout="prev, pager, next"
            :total="currentPage.show"
            class="page-style"
@ -95,10 +97,10 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { mapState } from 'vuex'
-
+import DePagination from '@/components/deCustomCm/pagination.js'
 export default {
  name: 'ChartComponentS2',
-  components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
+  components: { TitleRemark, ViewTrackBar, ChartTitleUpdate, DePagination },
  props: {
    chart: {
      type: Object,
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@ -56,12 +56,14 @@
              }}</span>
              {{ $t('chart.items') }}
            </span>
-            <el-pagination
+            <de-pagination
              small
              :current-page="currentPage.page"
-              :page-sizes="[10,20,50,100]"
              :page-size="currentPage.pageSize"
              :pager-count="5"
+              :custom-style="{
+                color: title_class.color
+              }"
              layout="prev, pager, next"
              :total="currentPage.show"
              class="page-style"
@ -81,9 +83,11 @@ import { hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { DEFAULT_COLOR_CASE, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import { mapState } from 'vuex'
+import DePagination from '@/components/deCustomCm/pagination.js'

 export default {
  name: 'TableNormal',
+  components: { DePagination },
  props: {
    chart: {
      type: Object,
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -192,7 +192,7 @@
                              @command="chartFieldEdit"
                            >
                              <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools"/>
+                                <i class="el-icon-s-tools" />
                              </span>
                              <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
@ -267,7 +267,7 @@
                              @command="chartFieldEdit"
                            >
                              <span class="el-dropdown-link">
-                                <i class="el-icon-s-tools"/>
+                                <i class="el-icon-s-tools" />
                              </span>
                              <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
@ -362,7 +362,7 @@
                          style="padding: 6px;"
                        >
                          {{ $t('chart.change_chart_type') }}
-                          <i class="el-icon-caret-bottom"/>
+                          <i class="el-icon-caret-bottom" />
                        </el-button>
                      </el-popover>
                    </span>
@ -490,8 +490,8 @@
                    >
                      <span class="data-area-label">
                        <span v-if="view.type && view.type.includes('table')">{{
-                            $t('chart.drag_block_table_data_column')
-                          }}</span>
+                          $t('chart.drag_block_table_data_column')
+                        }}</span>
                        <span
                          v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
                        >{{ $t('chart.drag_block_type_axis') }}</span>
@ -499,18 +499,18 @@
                          v-else-if="view.type && view.type.includes('pie')"
                        >{{ $t('chart.drag_block_pie_label') }}</span>
                        <span v-else-if="view.type && view.type.includes('funnel')">{{
-                            $t('chart.drag_block_funnel_split')
-                          }}</span>
+                          $t('chart.drag_block_funnel_split')
+                        }}</span>
                        <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_label')
-                          }}</span>
+                          $t('chart.drag_block_radar_label')
+                        }}</span>
                        <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                        <span v-else-if="view.type && view.type.includes('treemap')">{{
-                            $t('chart.drag_block_treemap_label')
-                          }}</span>
+                          $t('chart.drag_block_treemap_label')
+                        }}</span>
                        <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                            $t('chart.drag_block_word_cloud_label')
-                          }}</span>
+                          $t('chart.drag_block_word_cloud_label')
+                        }}</span>
                        <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                        <span v-show="view.type !== 'richTextView'"> / </span>
                        <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@ -633,8 +633,8 @@
                    >
                      <span class="data-area-label">
                        <span v-if="view.type && view.type.includes('table')">{{
-                            $t('chart.drag_block_table_data_column')
-                          }}</span>
+                          $t('chart.drag_block_table_data_column')
+                        }}</span>
                        <span
                          v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
                        >{{ $t('chart.drag_block_value_axis') }}</span>
@ -642,30 +642,30 @@
                          v-else-if="view.type && view.type.includes('pie')"
                        >{{ $t('chart.drag_block_pie_angel') }}</span>
                        <span v-else-if="view.type && view.type.includes('funnel')">{{
-                            $t('chart.drag_block_funnel_width')
-                          }}</span>
+                          $t('chart.drag_block_funnel_width')
+                        }}</span>
                        <span v-else-if="view.type && view.type.includes('radar')">{{
-                            $t('chart.drag_block_radar_length')
-                          }}</span>
+                          $t('chart.drag_block_radar_length')
+                        }}</span>
                        <span v-else-if="view.type && view.type.includes('gauge')">{{
-                            $t('chart.drag_block_gauge_angel')
-                          }}</span>
+                          $t('chart.drag_block_gauge_angel')
+                        }}</span>
                        <span
                          v-else-if="view.type && view.type.includes('text')"
                        >{{ $t('chart.drag_block_label_value') }}</span>
                        <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                        <span v-else-if="view.type && view.type.includes('tree')">{{
-                            $t('chart.drag_block_treemap_size')
-                          }}</span>
+                          $t('chart.drag_block_treemap_size')
+                        }}</span>
                        <span v-else-if="view.type && view.type === 'chart-mix'">{{
-                            $t('chart.drag_block_value_axis_main')
-                          }}</span>
+                          $t('chart.drag_block_value_axis_main')
+                        }}</span>
                        <span
                          v-else-if="view.type && view.type === 'liquid'"
                        >{{ $t('chart.drag_block_progress') }}</span>
                        <span v-else-if="view.type && view.type === 'word-cloud'">{{
-                            $t('chart.drag_block_word_cloud_size')
-                          }}</span>
+                          $t('chart.drag_block_word_cloud_size')
+                        }}</span>
                        <span v-show="view.type !== 'richTextView'"> / </span>
                        <span>{{ $t('chart.quota') }}</span>
                        <i
@ -1125,7 +1125,7 @@
                :title="$t('panel.position_adjust_component')"
                :name="'positionAdjust'"
              >
-                <position-adjust/>
+                <position-adjust />
              </el-collapse-item>
            </el-collapse>
          </div>
@ -1281,7 +1281,7 @@
      width="800px"
      class="dialog-css"
    >
-      <quota-filter-editor :item="quotaItem"/>
+      <quota-filter-editor :item="quotaItem" />
      <div
        slot="footer"
        class="dialog-footer"
@ -1308,7 +1308,7 @@
      width="800px"
      class="dialog-css"
    >
-      <dimension-filter-editor :item="dimensionItem"/>
+      <dimension-filter-editor :item="dimensionItem" />
      <div
        slot="footer"
        class="dialog-footer"
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@ -130,8 +130,8 @@
                "
              >
                <span style="font-size: 12px; color: #c0c0c0">{{
-                    $t('dataset.calc_field')
-                  }}</span>
+                  $t('dataset.calc_field')
+                }}</span>
              </span>
            </template>
          </el-table-column>
@ -180,8 +180,8 @@
                    />
                  </span>
                  <span style="color: #8492a6; font-size: 12px">{{
-                      data.label
-                    }}</span>
+                    data.label
+                  }}</span>
                </template>
              </el-cascader>
              <span class="select-svg-icon">
@ -284,8 +284,8 @@
                    v-if="scope.row.deExtractType === 3"
                    class="field-class"
                  >{{
-                      $t('dataset.value') + '(' + $t('dataset.float') + ')'
-                    }}</span>
+                    $t('dataset.value') + '(' + $t('dataset.float') + ')'
+                  }}</span>
                </span>
                <span v-if="scope.row.deExtractType === 5">
                  <svg-icon
@ -308,8 +308,8 @@
                "
              >
                <span style="font-size: 12px; color: #c0c0c0">{{
-                    $t('dataset.calc_field')
-                  }}</span>
+                  $t('dataset.calc_field')
+                }}</span>
              </span>
            </template>
          </el-table-column>
@ -356,7 +356,7 @@
                        "
                        command="copy"
                      >
-                        <i class="el-icon-document-copy"/>
+                        <i class="el-icon-document-copy" />
                        {{ $t('dataset.copy') }}
                      </el-dropdown-item>
                      <el-dropdown-item
@ -365,7 +365,7 @@
                        "
                        command="delete"
                      >
-                        <i class="el-icon-delete"/>
+                        <i class="el-icon-delete" />
                        {{ $t('chart.delete') }}
                      </el-dropdown-item>
                    </slot>
@ -470,8 +470,8 @@
                "
              >
                <span style="font-size: 12px; color: #c0c0c0">{{
-                    $t('dataset.calc_field')
-                  }}</span>
+                  $t('dataset.calc_field')
+                }}</span>
              </span>
            </template>
          </el-table-column>
@ -520,8 +520,8 @@
                    />
                  </span>
                  <span style="color: #8492a6; font-size: 12px">{{
-                      data.label
-                    }}</span>
+                    data.label
+                  }}</span>
                </template>
              </el-cascader>
              <span class="select-svg-icon">
@ -616,8 +616,8 @@
                    v-if="scope.row.deExtractType === 3"
                    class="field-class"
                  >{{
-                      $t('dataset.value') + '(' + $t('dataset.float') + ')'
-                    }}</span>
+                    $t('dataset.value') + '(' + $t('dataset.float') + ')'
+                  }}</span>
                </span>
                <span v-if="scope.row.deExtractType === 5">
                  <svg-icon
@ -640,8 +640,8 @@
                "
              >
                <span style="font-size: 12px; color: #c0c0c0">{{
-                    $t('dataset.calc_field')
-                  }}</span>
+                  $t('dataset.calc_field')
+                }}</span>
              </span>
            </template>
          </el-table-column>
@ -689,7 +689,7 @@
                        "
                        command="copy"
                      >
-                        <i class="el-icon-document-copy"/>
+                        <i class="el-icon-document-copy" />
                        {{ $t('dataset.copy') }}
                      </el-dropdown-item>
                      <el-dropdown-item
@ -698,7 +698,7 @@
                        "
                        command="delete"
                      >
-                        <i class="el-icon-delete"/>
+                        <i class="el-icon-delete" />
                        {{ $t('chart.delete') }}
                      </el-dropdown-item>
                    </slot>
@ -830,8 +830,7 @@ export default {
        this.quotaChange()
      })
      dateformats(this.param.id).then((response) => {
-
-        const children = (response?.data || []).map(ele => ({ label: ele.dateformat + ( ele.desc !== null ? ('(' + ele.desc) + ')' : ""), value: ele.dateformat }))
+        const children = (response?.data || []).map(ele => ({ label: ele.dateformat + (ele.desc !== null ? ('(' + ele.desc) + ')' : ''), value: ele.dateformat }))
        children.push({ label: this.$t('commons.custom'), value: 'custom' })
        this.dateformats = children
      })
--- a/frontend/src/views/panel/appTemplate/AppTemplateContent.vue
+++ b/frontend/src/views/panel/appTemplate/AppTemplateContent.vue
@ -77,7 +77,7 @@
          :label="dialogTitleLabel"
          prop="name"
        >
-          <el-input v-model="templateEditForm.name"/>
+          <el-input v-model="templateEditForm.name" />
        </el-form-item>
        <el-form-item
          :label="$t('app_template.app_group_icon')"
@ -95,7 +95,7 @@
              :http-request="upload"
              :file-list="fileList"
            >
-              <i class="el-icon-plus"/>
+              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog
              top="25vh"
--- a/frontend/src/views/panel/appTemplateMarket/index.vue
+++ b/frontend/src/views/panel/appTemplateMarket/index.vue
@ -43,7 +43,7 @@
        v-if="marketActiveTab==='apply_logs'"
        class="main-log-area template-main"
      >
-        <app-template-log class="log-area"/>
+        <app-template-log class="log-area" />
      </el-row>
    </el-row>

--- a/frontend/src/views/panel/edit/ComponentWait.vue
+++ b/frontend/src/views/panel/edit/ComponentWait.vue
@ -1,8 +1,8 @@
 <template>
  <el-row class="component-wait">
    <el-tabs
-      style="padding-left: 10px"
      v-model="activeName"
+      style="padding-left: 10px"
    >
      <el-tab-pane
        :label="$t('panel.component_hidden')"
@ -36,7 +36,7 @@
      class="component-wait-main"
      style="padding:10px"
    >
-      <mobile-background-selector/>
+      <mobile-background-selector />
    </el-row>
  </el-row>
 </template>
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -165,12 +165,12 @@
              v-show=" show &&showIndex===1"
              :canvas-id="canvasId"
            />
-            <subject-setting v-show=" show &&showIndex===2"/>
-            <assist-component v-show=" show &&showIndex===3"/>
+            <subject-setting v-show=" show &&showIndex===2" />
+            <assist-component v-show=" show &&showIndex===3" />
          </div>
        </el-drawer>
        <!--PC端画布区域-->
-        <canvas-opt-bar v-if="!previewVisible&&!mobileLayoutStatus"/>
+        <canvas-opt-bar v-if="!previewVisible&&!mobileLayoutStatus" />
        <de-canvas
          v-if="!previewVisible&&!mobileLayoutStatus"
          ref="canvasMainRef"
@ -181,9 +181,7 @@
          :canvas-id="canvasId"
          :canvas-pid="'0'"
          @canvasScroll="canvasScroll"
-        >
-
-        </de-canvas>
+        />
        <!--移动端画布区域 保持宽高比2.5-->
        <el-row
          v-if="mobileLayoutStatus"
@ -198,7 +196,7 @@
              :style="customCanvasMobileStyle"
              class="this_mobile_canvas"
            >
-              <el-row class="this_mobile_canvas_top"/>
+              <el-row class="this_mobile_canvas_top" />
              <el-row class="this_mobile_canvas_inner_top">
                {{ panelInfo.name }}
              </el-row>
@ -207,7 +205,7 @@
                class="this_mobile_canvas_main"
                :style="mobileCanvasStyle"
              >
-                <canvas-opt-bar v-if="!previewVisible&&mobileLayoutStatus"/>
+                <canvas-opt-bar v-if="!previewVisible&&mobileLayoutStatus" />
                <de-canvas
                  v-if="!previewVisible&&mobileLayoutStatus"
                  ref="canvasMainRef"
@ -216,8 +214,7 @@
                  :canvas-id="canvasId"
                  :canvas-pid="'0'"
                  :mobile-layout-status="true"
-                >
-                </de-canvas>
+                />
              </el-row>
              <el-row class="this_mobile_canvas_inner_bottom">
                <el-col :span="12">
@ -246,14 +243,14 @@
                  />
                </el-col>
              </el-row>
-              <el-row class="this_mobile_canvas_bottom"/>
+              <el-row class="this_mobile_canvas_bottom" />
            </div>
          </el-col>
          <el-col
            :span="16"
            class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
          >
-            <component-wait/>
+            <component-wait />
          </el-col>
        </el-row>
      </de-main-container>
@ -271,7 +268,7 @@
          />
        </div>
        <div v-if="showBatchViewToolsAside">
-          <chart-style-batch-set/>
+          <chart-style-batch-set />
        </div>
        <div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
          <el-row style="height: 40px">
@ -284,15 +281,18 @@
                @click="changeRightDrawOpen(false)"
              />
            </el-tooltip>
-            <span v-if="curComponent&&!curComponent.auxiliaryMatrix"
-                  style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px"
+            <span
+              v-if="curComponent&&!curComponent.auxiliaryMatrix"
+              style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px"
            >{{ $t('panel.position_adjust') }}</span>
          </el-row>
          <el-row>
-            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix"/>
-            <div v-else class="view-selected-message-class">
-              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px"
-              >{{ $t('panel.select_view') }}</span>
+            <position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix" />
+            <div
+              v-else
+              class="view-selected-message-class"
+            >
+              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.select_view') }}</span>
            </div>
          </el-row>
        </div>
@ -452,8 +452,7 @@
          />
        </el-col>
        <el-col :span="21">
-          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px"
-          >{{ $t('panel.panel_cache_use_tips') }}</span>
+          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
        </el-col>
      </el-row>
      <div
@ -978,11 +977,11 @@ export default {
    showPanel(type) {
      if (this.showIndex === -1 || this.showIndex === type) {
        this.$nextTick(() => {
-            if (this.show) {
-              this.showIndex === -1
-            }
-            this.show = !this.show
+          if (this.show) {
+            this.showIndex === -1
          }
+          this.show = !this.show
+        }
        )
      }
      this.showIndex = type
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@ -184,25 +184,25 @@
                    @change="val => {changeDynamicParams(val, item.name)}"
                  >
                    <el-checkbox
-                      v-for="(item ) in childViews.datasetParams"
-                      :key="item.id"
-                      :label="item.id"
-                      :disabled="attrs[tabsOption[(index + 1)%2].name + 'Parameters'] && attrs[tabsOption[(index + 1)%2].name + 'Parameters'].includes(item.id)"
+                      v-for="(ele ) in childViews.datasetParams"
+                      :key="ele.id"
+                      :label="ele.id"
+                      :disabled="attrs[tabsOption[(index + 1)%2].name + 'Parameters'] && attrs[tabsOption[(index + 1)%2].name + 'Parameters'].includes(ele.id)"
                      class="de-checkbox"
                    >
                      <div class="span-div">
                        <span
-                          v-if="item.alias && item.alias.length <= 7"
+                          v-if="ele.alias && ele.alias.length <= 7"
                          style="margin-left: 6px"
-                        >{{ item.alias }}</span>
+                        >{{ ele.alias }}</span>
                        <el-tooltip
                          v-else
                          class="item"
                          effect="dark"
-                          :content="item.alias"
+                          :content="ele.alias"
                          placement="left"
                        >
-                          <span style="margin-left: 6px">{{ item.alias }}</span>
+                          <span style="margin-left: 6px">{{ ele.alias }}</span>
                        </el-tooltip>
                      </div>

--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@ -109,7 +109,7 @@
                      icon="el-icon-delete"
                      :command="beforeClickMore('delete', data, node)"
                    >
-                      {{ $t('panel.delete') }}
+                      {{ $t('emailtask.default') + $t('commons.cancel') }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
@ -174,7 +174,7 @@
                  />
                </span>
                <span v-if="data.nodeType === 'folder'">
-                  <svg-icon icon-class="scene"/>
+                  <svg-icon icon-class="scene" />
                </span>
                <span
                  :class="data.status"
@ -211,7 +211,7 @@
                      <el-dropdown-item
                        :command="beforeClickEdit('folder', 'new', data, node)"
                      >
-                        <svg-icon icon-class="scene"/>
+                        <svg-icon icon-class="scene" />
                        <span style="margin-left: 5px">{{ $t('panel.groupAdd') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
@ -334,7 +334,7 @@
            :label="$t('commons.name')"
            prop="name"
          >
-            <el-input v-model="groupForm.name"/>
+            <el-input v-model="groupForm.name" />
          </el-form-item>
        </el-form>
        <div
@ -345,8 +345,8 @@
            size="mini"
            @click="close()"
          >{{
-              $t('panel.cancel')
-            }}
+            $t('panel.cancel')
+          }}
          </el-button>
          <el-button
            type="primary"
@ -422,8 +422,8 @@
            size="mini"
            @click="closeMoveGroup()"
          >{{
-              $t('dataset.cancel')
-            }}
+            $t('dataset.cancel')
+          }}
          </el-button>
          <el-button
            :disabled="groupMoveConfirmDisabled"
--- a/frontend/src/views/system/user/UserEditer.vue
+++ b/frontend/src/views/system/user/UserEditer.vue
@ -105,7 +105,7 @@
          >
            <el-select
              v-model="form.gender"
-              class="form-gender-select"
+              class="de-form-gender-select"
              :placeholder="$t('user.select_gender')"
            >
              <el-option
@ -146,11 +146,10 @@
              />

              <el-select
-                ref="roleSelect"
                slot="reference"
                v-model="form.deptId"
                clearable
-                class="form-gender-select"
+                class="de-form-gender-select"
                popper-class="tree-select"
                :placeholder="$t('commons.please_select')"
              >
@ -636,7 +635,7 @@ export default {
    }
  }

-  .form-gender-select {
+  .de-form-gender-select {
    width: 100%;
  }
 }