Merge pull request #3923 from dataease/pr@dev_memory_component

Pr@dev memory component

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>

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
+    }
+  }
+}

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"

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>

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',

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: '首頁',

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: '首页',

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -71,12 +71,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"
@@ -98,10 +100,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,

frontend/src/views/chart/components/table/TableNormal.vue

@@ -59,12 +59,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"
@@ -84,9 +86,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,

frontend/src/views/dataset/data/FieldEdit.vue

@@ -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
       })

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')"

frontend/src/views/panel/edit/index.vue

@@ -181,9 +181,7 @@
           :canvas-id="canvasId"
           :canvas-pid="'0'"
           @canvasScroll="canvasScroll"
-        >
+        />
-
-        </de-canvas>
         <!--移动端画布区域 保持宽高比2.5-->
         <el-row
           v-if="mobileLayoutStatus"
@@ -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">
@@ -284,15 +281,18 @@
                 @click="changeRightDrawOpen(false)"
               />
             </el-tooltip>
-            <span v-if="curComponent&&!curComponent.auxiliaryMatrix"
+            <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">
+            <div
-              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px"
+              v-else
-              >{{ $t('panel.select_view') }}</span>
+              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"
+          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
-          >{{ $t('panel.panel_cache_use_tips') }}</span>
         </el-col>
       </el-row>
       <div

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"
+                      v-for="(ele ) in childViews.datasetParams"
-                      :key="item.id"
+                      :key="ele.id"
-                      :label="item.id"
+                      :label="ele.id"
-                      :disabled="attrs[tabsOption[(index + 1)%2].name + 'Parameters'] && attrs[tabsOption[(index + 1)%2].name + 'Parameters'].includes(item.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>
 

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>

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%;
   }
 }