Merge branch 'dev' of github.com:dataease/dataease into dev

backend/src/main/java/io/dataease/plugins/server/RowPermissionsTreeController.java

@@ -5,14 +5,18 @@ import com.github.pagehelper.PageHelper;
 import io.dataease.auth.annotation.DePermission;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
+import io.dataease.commons.exception.DEException;
 import io.dataease.commons.utils.PageUtils;
 import io.dataease.commons.utils.Pager;
+import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.request.permission.DataSetRowPermissionsTreeDTO;
 import io.dataease.plugins.common.request.permission.DatasetRowPermissionsTreeRequest;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.auth.service.RowPermissionTreeService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
@@ -27,6 +31,14 @@ public class RowPermissionsTreeController {
     @ApiOperation("保存")
     @PostMapping("save")
     public void save(@RequestBody DataSetRowPermissionsTreeDTO request) {
+        if (StringUtils.isEmpty(request.getAuthTargetType())) {
+            DEException.throwException(Translator.get("i18n_row_permission_type_error"));
+        }
+        if (!StringUtils.equalsIgnoreCase(request.getAuthTargetType(), "sysParams")) {
+            if (ObjectUtils.isEmpty(request.getAuthTargetId())) {
+                DEException.throwException(Translator.get("i18n_row_permission_id"));
+            }
+        }
         RowPermissionTreeService rowPermissionTreeService = SpringContextUtil.getBean(RowPermissionTreeService.class);
         rowPermissionTreeService.save(request);
     }

backend/src/main/java/io/dataease/service/sys/SysUserService.java

@@ -73,6 +73,7 @@ public class SysUserService {
 
     @Transactional
     public int save(SysUserCreateRequest request) {
+        request.setUsername(request.getUsername().trim());
         checkUsername(request);
         checkEmail(request);
         checkNickName(request);

backend/src/main/resources/db/migration/V38__1.13.sql

@@ -82,3 +82,18 @@ ADD COLUMN `update_time` bigint(13) NULL COMMENT '更新时间' AFTER `update_by
 ALTER TABLE `sys_task_email`
 ADD COLUMN `view_ids` varchar(255) NULL COMMENT '视图ID集合' AFTER `task_id`;
 
+UPDATE `sys_menu`
+SET
+    `permission` = 'user:add,user:del,user:edit'
+WHERE
+        `menu_id` = 35;
+UPDATE `sys_menu`
+SET
+    `permission` = 'datasource:read'
+WHERE
+        `menu_id` = 39;
+UPDATE `sys_menu`
+SET
+    `permission` = 'user:editPwd'
+WHERE
+        `menu_id` = 51;

backend/src/main/resources/i18n/messages_en_US.properties

@@ -195,3 +195,6 @@ I18N_EMAIL_CONFIG_ERROR=Email config error
 I18N_EMAIL_HOST_ERROR=Email host can not be empty
 I18N_EMAIL_PORT_ERROR=Email port can not be empty
 I18N_EMAIL_ACCOUNT_ERROR=Email account can not be empty
+
+i18n_row_permission_type_error=Row permission type can not be empty
+i18n_row_permission_id=Row permission type is Dept/Role/User,name can not be empty

backend/src/main/resources/i18n/messages_zh_CN.properties

@@ -197,3 +197,6 @@ I18N_EMAIL_CONFIG_ERROR=邮件配置错误
 I18N_EMAIL_HOST_ERROR=邮件主机不能为空
 I18N_EMAIL_PORT_ERROR=邮件端口不能为空
 I18N_EMAIL_ACCOUNT_ERROR=邮件账号不能为空
+
+i18n_row_permission_type_error=行权限类型不能为空
+i18n_row_permission_id=行权限类型为组织/角色/用户时，名称不能为空

backend/src/main/resources/i18n/messages_zh_TW.properties

@@ -193,3 +193,6 @@ I18N_EMAIL_CONFIG_ERROR=郵件配置錯誤
 I18N_EMAIL_HOST_ERROR=郵件主機不能為空
 I18N_EMAIL_PORT_ERROR=郵件端口不能為空
 I18N_EMAIL_ACCOUNT_ERROR=郵件賬號不能為空
+
+i18n_row_permission_type_error=行權限類型不能為空
+i18n_row_permission_id=行權限類型為組織/角色/用戶時，名稱不能為空

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -11,10 +11,12 @@
       <de-out-widget
         v-if="config.type==='custom'"
         :id="'component' + config.id"
+        ref="deOutWidget"
         class="component-custom"
         :style="getComponentStyleDefault(config.style)"
         style="overflow: hidden"
         :out-style="config.style"
+        :is-relation="isRelation"
         :element="config"
         :in-screen="inScreen"
         :edit-mode="'preview'"
@@ -103,6 +105,10 @@ export default {
       type: String,
       required: false,
       default: 'NotProvided'
+    },
+    isRelation: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -150,7 +156,7 @@ export default {
       return style
     },
     componentActiveFlag() {
-      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && this.showPosition.includes('multiplexing') && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
+      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
     },
     curGap() {
       return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0
@@ -247,6 +253,13 @@ export default {
     },
     closePreview() {
       this.previewVisible = false
+    },
+    getCondition() {
+      if (this.$refs.deOutWidget && this.$refs.deOutWidget.getCondition) {
+        return this.$refs.deOutWidget.getCondition()
+      } else {
+        return null
+      }
     }
   }
 }

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -24,10 +24,12 @@
         <ComponentWrapper
           v-for="(item, index) in componentDataInfo"
           :key="index"
+          ref="viewWrapperChild"
           :config="item"
           :search-count="searchCount"
           :in-screen="inScreen"
           :terminal="terminal"
+          :is-relation="relationFilterIds.includes(item.id)"
           :filters="filterMap[item.propValue && item.propValue.viewId]"
           :screen-shot="screenShot"
           :canvas-style-data="canvasStyleData"
@@ -80,7 +82,7 @@ import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
 import bus from '@/utils/bus'
-import { buildFilterMap } from '@/utils/conditionUtil'
+import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
 import { hasDataPermission } from '@/utils/permission'
 const erd = elementResizeDetectorMaker()
 
@@ -171,7 +173,8 @@ export default {
       showChartTableInfo: {},
       showChartInfoType: 'details',
       // 布局展示 1.pc pc端布局 2.mobile 移动端布局
-      terminal: 'pc'
+      terminal: 'pc',
+      buttonFilterMap: null
     }
   },
   created() {
@@ -255,9 +258,29 @@ export default {
     ...mapState([
       'isClickComponent'
     ]),
+
+    searchButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      return result
+    },
     filterMap() {
-      const map = buildFilterMap(this.componentData)
+      const result = buildFilterMap(this.componentData)
-      return map
+      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            result[key] = filters
+          }
+        }
+      }
+      return result
+    },
+    buttonExist() {
+      return this.searchButtonInfo && this.searchButtonInfo.buttonExist
+    },
+    relationFilterIds() {
+      return this.buttonExist && this.searchButtonInfo.relationFilterIds || []
     }
   },
   watch: {
@@ -283,14 +306,101 @@ export default {
     if (this.terminal === 'mobile') {
       this.initMobileCanvas()
     }
+    bus.$on('trigger-search-button', this.triggerSearchButton)
   },
   beforeDestroy() {
     erd.uninstall(this.$refs.canvasInfoTemp)
     erd.uninstall(this.$refs.canvasInfoMain)
     clearInterval(this.timer)
     eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
+    bus.$on('trigger-search-button', this.triggerSearchButton)
   },
   methods: {
+    triggerSearchButton() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      this.searchButtonInfo.autoTrigger = result.autoTrigger
+      this.searchButtonInfo.filterMap = result.filterMap
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+
+      this.componentData.forEach(component => {
+        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
+          component.filters = this.buttonFilterMap[component.propValue.viewId]
+        }
+      })
+    },
+    buildButtonFilterMap(panelItems) {
+      const result = {
+        buttonExist: false,
+        relationFilterIds: [],
+        autoTrigger: true,
+        filterMap: {
+
+        }
+      }
+      if (!panelItems || !panelItems.length) return result
+      let sureButtonItem = null
+      result.buttonExist = panelItems.some(item => {
+        if (item.type === 'custom-button' && item.serviceName === 'buttonSureWidget') {
+          sureButtonItem = item
+          return true
+        }
+      })
+
+      if (!result.buttonExist) return result
+
+      const customRange = sureButtonItem.options.attrs.customRange
+      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
+      const allFilters = panelItems.filter(item => item.type === 'custom')
+
+      const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters
+
+      result.relationFilterIds = matchFilters.map(item => item.id)
+
+      let viewKeyMap = buildViewKeyMap(panelItems)
+      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap)
+      result.filterMap = viewKeyMap
+      return result
+    },
+    buildViewKeyFilters(panelItems, result) {
+      const refs = this.$refs
+      if (!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
+      panelItems.forEach((element) => {
+        if (element.type !== 'custom') {
+          return true
+        }
+
+        const index = this.getComponentIndex(element.id)
+        if (index < 0) {
+          return true
+        }
+        let param = null
+        const wrapperChild = refs['viewWrapperChild'][index]
+        param = wrapperChild.getCondition && wrapperChild.getCondition()
+        const condition = formatCondition(param)
+        const vValid = valueValid(condition)
+        const filterComponentId = condition.componentId
+        Object.keys(result).forEach(viewId => {
+          const vidMatch = viewIdMatch(condition.viewIds, viewId)
+          const viewFilters = result[viewId]
+          let j = viewFilters.length
+          while (j--) {
+            const filter = viewFilters[j]
+            if (filter.componentId === filterComponentId) {
+              viewFilters.splice(j, 1)
+            }
+          }
+          vidMatch && vValid && viewFilters.push(condition)
+        })
+      })
+      return result
+    },
+    getComponentIndex(id) {
+      for (let index = 0; index < this.componentData.length; index++) {
+        const item = this.componentData[index]
+        if (item.id === id) return index
+      }
+      return -1
+    },
     _isMobile() {
       const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
       this.terminal = flag ? 'mobile' : 'pc'

frontend/src/components/canvas/components/Editor/SettingMenu.vue

@@ -5,7 +5,7 @@
         <slot name="icon" />
         <el-dropdown-menu v-if="curComponent">
           <el-dropdown-item v-if="editFilter.includes(curComponent.type)" icon="el-icon-edit-outline" @click.native="edit">{{ $t('panel.edit') }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
+          <el-dropdown-item v-if="curComponent.type != 'custom-button'" icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
           <el-dropdown-item icon="el-icon-delete" @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
           <el-dropdown-item v-if="!curComponent.auxiliaryMatrix">
             <el-dropdown placement="right-start">

frontend/src/components/canvas/components/Editor/index.vue

@@ -68,6 +68,7 @@
         :style="getComponentStyleDefault(item.style)"
         :prop-value="item.propValue"
         :element="item"
+        :is-relation="searchButtonInfo && searchButtonInfo.buttonExist && searchButtonInfo.relationFilterIds.includes(item.id)"
         :out-style="getShapeStyleInt(item.style)"
         :active="item === curComponent"
         :h="getShapeStyleIntDeDrag(item.style,'height')"
@@ -207,7 +208,7 @@ import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import DragShadow from '@/components/DeDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
-import { buildFilterMap } from '@/utils/conditionUtil'
+import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
 // 挤占式画布
 import _ from 'lodash'
 import $ from 'jquery'
@@ -929,7 +930,9 @@ export default {
       yourList: [],
       linkJumpSetVisible: false,
       linkJumpSetViewId: null,
-      editShow: false
+      editShow: false,
+      buttonFilterMap: null,
+      autoTrigger: true
     }
   },
   computed: {
@@ -1003,9 +1006,25 @@ export default {
       'curCanvasScale',
       'batchOptStatus'
     ]),
+
+    searchButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      return result
+    },
     filterMap() {
-      return buildFilterMap(this.componentData)
+      const result = buildFilterMap(this.componentData)
+      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            result[key] = filters
           }
+        }
+      }
+      return result
+    }
+
   },
   watch: {
     customStyle: {
@@ -1043,6 +1062,29 @@ export default {
         this.initMatrix()
       },
       deep: true
+    },
+    autoTrigger: {
+      handler(val, old) {
+        if (val === old) return
+        const result = buildFilterMap(this.componentData)
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+              filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            }
+
+            this.filterMap[key] = filters
+
+            this.componentData.forEach(item => {
+              if (item.type === 'view' && item.propValue.viewId === key) {
+                item.filters = filters
+              }
+            })
+          }
+        }
+      },
+      deep: true
     }
   },
 
@@ -1055,6 +1097,8 @@ export default {
     eventBus.$on('startMoveIn', this.startMoveIn)
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$on('onRemoveLastItem', this.removeLastItem)
+    bus.$on('trigger-search-button', this.triggerSearchButton)
+    bus.$on('refresh-button-info', this.refreshButtonInfo)
 
     // 矩阵定位调试模式
     if (this.psDebug) {
@@ -1068,10 +1112,107 @@ export default {
     eventBus.$off('startMoveIn', this.startMoveIn)
     eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$off('onRemoveLastItem', this.removeLastItem)
+    bus.$off('trigger-search-button', this.triggerSearchButton)
+    bus.$off('refresh-button-info', this.refreshButtonInfo)
   },
   created() {
   },
   methods: {
+    refreshButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      this.searchButtonInfo.buttonExist = result.buttonExist
+      this.searchButtonInfo.relationFilterIds = result.relationFilterIds
+      this.searchButtonInfo.filterMap = result.filterMap
+      this.searchButtonInfo.autoTrigger = result.autoTrigger
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+    },
+    triggerSearchButton() {
+      this.refreshButtonInfo()
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+
+      this.componentData.forEach(component => {
+        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
+          component.filters = this.buttonFilterMap[component.propValue.viewId]
+        }
+      })
+
+      // this.$store.commit('addViewFilter', param)
+    },
+    buildButtonFilterMap(panelItems) {
+      const result = {
+        buttonExist: false,
+        relationFilterIds: [],
+        autoTrigger: true,
+        filterMap: {}
+      }
+      if (!panelItems || !panelItems.length) return result
+      let sureButtonItem = null
+      result.buttonExist = panelItems.some(item => {
+        if (item.type === 'custom-button' && item.serviceName === 'buttonSureWidget') {
+          sureButtonItem = item
+          return true
+        }
+      })
+
+      if (!result.buttonExist) return result
+
+      const customRange = sureButtonItem.options.attrs.customRange
+      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
+      this.autoTrigger = result.autoTrigger
+
+      const allFilters = panelItems.filter(item => item.type === 'custom')
+
+      const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters
+
+      result.relationFilterIds = matchFilters.map(item => item.id)
+
+      let viewKeyMap = buildViewKeyMap(panelItems)
+      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap)
+      result.filterMap = viewKeyMap
+      return result
+    },
+    buildViewKeyFilters(panelItems, result) {
+      const refs = this.$refs
+      if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
+      const len = this.$refs['wrapperChild'].length
+      panelItems.forEach((element) => {
+        if (element.type !== 'custom') {
+          return true
+        }
+
+        let param = null
+        const index = this.getComponentIndex(element.id)
+        if (index < 0 || index >= len) {
+          return true
+        }
+        const wrapperChild = refs['wrapperChild'][index]
+        if (!wrapperChild || !wrapperChild.getCondition) return true
+        param = wrapperChild.getCondition && wrapperChild.getCondition()
+        const condition = formatCondition(param)
+        const vValid = valueValid(condition)
+        const filterComponentId = condition.componentId
+        Object.keys(result).forEach(viewId => {
+          const vidMatch = viewIdMatch(condition.viewIds, viewId)
+          const viewFilters = result[viewId]
+          let j = viewFilters.length
+          while (j--) {
+            const filter = viewFilters[j]
+            if (filter.componentId === filterComponentId) {
+              viewFilters.splice(j, 1)
+            }
+          }
+          vidMatch && vValid && viewFilters.push(condition)
+        })
+      })
+      return result
+    },
+    getComponentIndex(id) {
+      for (let index = 0; index < this.componentData.length; index++) {
+        const item = this.componentData[index]
+        if (item.id === id) return index
+      }
+      return -1
+    },
     pluginEditHandler({ e, id }) {
       let index = -1
       for (let i = 0; i < this.componentData.length; i++) {

frontend/src/components/dataease/DeOutWidget.vue

@@ -30,6 +30,7 @@
                 ref="deOutWidget"
                 class="component-custom"
                 :out-style="element.style"
+                :is-relation="isRelation"
                 :element="element"
                 :in-draw="inDraw"
                 :in-screen="inScreen"
@@ -72,6 +73,10 @@ export default {
       type: String,
       require: false,
       default: 'edit'
+    },
+    isRelation: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -152,6 +157,12 @@ export default {
           alignItems: 'center'
         }
       }
+    },
+    getCondition() {
+      if (this.$refs && this.$refs['deOutWidget'] && this.$refs['deOutWidget'].getCondition) {
+        return this.$refs['deOutWidget'].getCondition()
+      }
+      return null
     }
   }
 }

frontend/src/components/gridTable/index.vue

@@ -169,6 +169,15 @@ export default {
     }
   }
 
+  .el-table::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    border-top: 1px solid rgba(31, 35, 41, 0.15);;
+  }
+
   ::v-deep .el-table__fixed-body-wrapper {
     tr {
         background-color: var(--TableBG, #ffffff) !important;

frontend/src/components/widget/DeWidget/DeButton.vue

@@ -1,17 +1,20 @@
 <template>
 
   <el-button
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null"
-    :type="options.attrs.type"
+    :type="element.options.attrs.type"
-    :round="options.attrs.round"
+    :round="element.options.attrs.round"
-    :plain="options.attrs.plain"
+    :plain="element.options.attrs.plain"
     :size="size"
+    class="de-search-button"
+    @click="triggerSearch"
   >
-    {{ options.value }}
+    {{ element.options.value }}
   </el-button>
 </template>
 
 <script>
+import bus from '@/utils/bus'
 export default {
 
   props: {
@@ -27,17 +30,23 @@ export default {
   },
   data() {
     return {
-      options: null,
       operator: 'eq',
       values: null
     }
   },
   created() {
-    this.options = this.element.options
+  },
+  methods: {
+    triggerSearch() {
+      bus.$emit('trigger-search-button')
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.de-search-button {
+  height: 100%;
+  width: 100%;
+}
 </style>

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -46,7 +46,11 @@ export default {
       required: false,
       default: true
     },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -170,14 +174,18 @@ export default {
     search() {
       this.setCondition()
     },
-    setCondition() {
+    getCondition() {
       const param = {
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator
       }
       param.value = this.formatValues(param.value)
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
     },
     dateChange(value) {
       if (!this.inDraw) {

frontend/src/components/widget/DeWidget/DeInputSearch.vue

@@ -31,7 +31,11 @@ export default {
       type: Boolean,
       default: true
     },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -91,13 +95,17 @@ export default {
       }
       this.setCondition()
     },
-    setCondition() {
+    getCondition() {
       const param = {
         component: this.element,
         value: !this.value ? [] : Array.isArray(this.value) ? this.value : [this.value],
         operator: this.operator
       }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
     },
     setEdit() {
       this.canEdit = true

frontend/src/components/widget/DeWidget/DeNumberRange.vue

@@ -29,7 +29,11 @@ export default {
       type: Boolean,
       default: true
     },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -194,33 +198,53 @@ export default {
         })
       })
     },
-    setCondition() {
+    getCondition() {
       const param = {
         component: this.element,
-        // value: !this.values ? [] : Array.isArray(this.values) ? this.values : [this.values],
         value: [this.form.min, this.form.max],
         operator: this.operator
       }
+      if (this.form.min && this.form.max) {
+        return param
+      }
+      if (!this.form.min && !this.form.max) {
+        param.value = []
+        return param
+      }
+      if (this.form.min) {
+        param.value = [this.form.min]
+        param.operator = 'ge'
+        return param
+      }
+      if (this.form.max) {
+        param.value = [this.form.max]
+        param.operator = 'le'
+        return param
+      }
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
 
       if (this.form.min && this.form.max) {
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
         return
       }
       if (!this.form.min && !this.form.max) {
         param.value = []
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
         return
       }
       if (this.form.min) {
         param.value = [this.form.min]
         param.operator = 'ge'
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
         return
       }
       if (this.form.max) {
         param.value = [this.form.max]
         param.operator = 'le'
-        this.inDraw && this.$store.commit('addViewFilter', param)
+        !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
         return
       }
     },

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -58,7 +58,11 @@ export default {
       required: false,
       default: true
     },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -276,14 +280,17 @@ export default {
         this.handleElTagStyle()
       })
     },
-
+    getCondition() {
-    setCondition() {
       const param = {
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator
       }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
     },
     formatFilterValue() {
       if (this.value === null) return []

frontend/src/components/widget/DeWidget/DeSelectGrid.vue

@@ -58,7 +58,11 @@ export default {
       required: false,
       default: true
     },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -273,14 +277,17 @@ export default {
       }
       this.setCondition()
     },
-
+    getCondition() {
-    setCondition() {
       const param = {
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator
       }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
     },
     formatFilterValue() {
       if (this.value === null) return []

frontend/src/components/widget/DeWidget/DeSelectTree.vue

@@ -47,7 +47,11 @@ export default {
       required: false,
       default: true
     },
-    size: String
+    size: String,
+    isRelation: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -279,7 +283,7 @@ export default {
       this.setCondition()
     },
 
-    setCondition() {
+    getCondition() {
       const val = this.formatFilterValue()
 
       const param = {
@@ -288,7 +292,12 @@ export default {
         operator: this.operator,
         isTree: true
       }
-      this.inDraw && this.$store.commit('addViewFilter', param)
+      return param
+    },
+
+    setCondition() {
+      const param = this.getCondition()
+      !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
     },
     formatFilterValue() {
       const SEPARATOR = '-de-'

frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js

@@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService'
 
 const leftPanel = {
   icon: 'iconfont icon-chaxunsousuo',
-  label: '查询按钮',
+  label: 'desearchbutton.label',
   defaultClass: 'time-filter'
 }
 
@@ -24,7 +24,8 @@ const drawPanel = {
       round: false,
       plain: true,
       customRange: false,
-      filterIds: []
+      filterIds: [],
+      autoTrigger: true
     },
     value: '查询'
   },

frontend/src/directive/index.js

@@ -64,6 +64,36 @@ export const bottom2TopDrag = {
   }
 }
 
+const closePress =  {
+  inserted: function (el) {
+    el.querySelector('.el-drawer__close-btn').onmousedown = function (e) {
+      e.currentTarget.style.background = '#d2d3d4';
+    }
+    el.querySelector('.el-drawer__close-btn').onmouseup = function (e) {
+      e.currentTarget.style.background = 'none';
+    }
+  }
+}
+
+// const btnPress =  {
+//   inserted: function (el) {
+//     el.onmousedown = function () {
+//       el.style.background = '#EFF0F1';
+//     }
+//     el.onmouseenter = function () {
+//       el.style.background = '#F5F6F7 !important';
+//     }
+//     el.onmouseleave = function () {
+//       el.style.background = 'none';
+//     }
+//     el.onmouseup = function () {
+//       el.style.background = 'none';
+//     }
+//   }
+// }
+
+// #EFF0F1
+
 export default {
   install(Vue) {
     // Vue.directive('data-permission', dataPermission)
@@ -71,6 +101,8 @@ export default {
     Vue.directive('left-to-right-drag', left2RightDrag)
     Vue.directive('right-to-left-drag', right2LeftDrag)
     Vue.directive('bottom-to-top-drag', bottom2TopDrag)
+    Vue.directive('closePress', closePress)
+    // Vue.directive('btnPress', btnPress)
   }
 }
 

frontend/src/lang/en.js

@@ -1173,7 +1173,16 @@ export default {
     conditions_can_not_empty: 'Conditions can not be empty，if unnecessary，please delete the field',
     remark: 'Remark',
     remark_edit: 'Edit Remark',
-    remark_bg_color: 'Background Fill'
+    remark_bg_color: 'Background Fill',
+    quota_font_family: 'Value Font Family',
+    quota_text_style: 'Value Style',
+    quota_letter_space: 'Value Letter Space',
+    dimension_font_family: 'Name Font Family',
+    dimension_text_style: 'Name Style',
+    dimension_letter_space: 'Name Letter Space',
+    font_family: 'Font Family',
+    letter_space: 'Letter Space',
+    font_shadow: 'Font Shadow'
   },
   dataset: {
     parse_filed: 'Parse Field',
@@ -2047,6 +2056,15 @@ export default {
     min_out_max: 'The min value must be less than the max value',
     max_out_min: 'The max value must be more than the min value'
   },
+  desearchbutton: {
+    label: 'Search Button',
+    text: 'Text',
+    auto_trigger: 'Auto Trigger',
+    range: 'Ranger',
+    relative: 'Relation',
+    auto_trigger_tip: 'Automatically trigger once when entering the preview page',
+    range_tip: 'Default association all filter components'
+  },
   denumberselect: {
     label: 'Number selector',
     placeholder: 'Please select'

frontend/src/lang/tw.js

@@ -1172,7 +1172,16 @@ export default {
     conditions_can_not_empty: '字段的條件不能為空，若無條件，請直接刪除該字段',
     remark: '備註',
     remark_edit: '編輯備註',
-    remark_bg_color: '背景填充'
+    remark_bg_color: '背景填充',
+    quota_font_family: '值字體',
+    quota_text_style: '值樣式',
+    quota_letter_space: '值字間距',
+    dimension_font_family: '名稱字體',
+    dimension_text_style: '名稱樣式',
+    dimension_letter_space: '名稱字間距',
+    font_family: '字體',
+    letter_space: '字間距',
+    font_shadow: '字體陰影'
   },
   dataset: {
     parse_filed: '解析字段',
@@ -2058,6 +2067,15 @@ export default {
     min_out_max: '最小值必須小於最大值',
     max_out_min: '最大值必須大於最小值'
   },
+  desearchbutton: {
+    label: '查詢按鈕',
+    text: '名稱',
+    auto_trigger: '自動觸發',
+    range: '控製範圍',
+    relative: '關聯組件',
+    auto_trigger_tip: '進入預覽頁面自動觸發一次',
+    range_tip: '默認關聯全部過濾組件'
+  },
   denumberselect: {
     label: '數字下拉',
     placeholder: '請選擇'

frontend/src/lang/zh.js

@@ -1174,7 +1174,16 @@ export default {
     conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
     remark: '备注',
     remark_edit: '编辑备注',
-    remark_bg_color: '背景填充'
+    remark_bg_color: '背景填充',
+    quota_font_family: '值字体',
+    quota_text_style: '值样式',
+    quota_letter_space: '值字间距',
+    dimension_font_family: '名称字体',
+    dimension_text_style: '名称样式',
+    dimension_letter_space: '名称字间距',
+    font_family: '字体',
+    letter_space: '字间距',
+    font_shadow: '字体阴影'
   },
   dataset: {
     parse_filed: '解析字段',
@@ -2068,6 +2077,15 @@ export default {
     min_out_max: '最小值必须小于最大值',
     max_out_min: '最大值必须大于最小值'
   },
+  desearchbutton: {
+    label: '查询按钮',
+    text: '名称',
+    auto_trigger: '自动触发',
+    range: '控制范围',
+    relative: '关联组件',
+    auto_trigger_tip: '进入预览页面自动触发一次',
+    range_tip: '默认关联全部过滤组件'
+  },
   denumberselect: {
     label: '数字下拉',
     placeholder: '请选择'

frontend/src/layout/components/Sidebar/index.vue

@@ -1,12 +1,13 @@
 <template>
   <!-- <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}"> -->
-  <div :class="{ 'has-logo': showLogo }">
+  <div :class="{ 'has-logo': showLogo }" class="de-sidebar-container">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-menu
       :default-active="activeMenu"
       :collapse="isCollapse"
       :unique-opened="false"
       :collapse-transition="false"
+      class="de-el-menu"
       mode="vertical"
     >
       <sidebar-item
@@ -31,7 +32,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
 import variables from "@/styles/variables.scss";
@@ -39,9 +40,11 @@ import path from "path";
 import { isExternal } from "@/utils/validate";
 export default {
   components: { SidebarItem, Logo },
-
   computed: {
     ...mapGetters(["sidebar"]),
+    ...mapState({
+      isCollapse: state => state.isCollapse,
+    }),
     routes() {
       // return this.$router.options.routes
       if (this.isCollapse) {
@@ -67,14 +70,9 @@ export default {
       return variables;
     },
   },
-  data() {
-    return {
-      isCollapse: false,
-    };
-  },
   methods: {
     changeSideWidth() {
-      this.isCollapse = !this.isCollapse;
+      this.$store.commit('setIsCollapse', !this.isCollapse);
       this.$emit("changeSideWidth", this.isCollapse ? "70px" : "");
     },
     resolvePath(routePath) {
@@ -113,9 +111,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.de-sidebar-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.de-el-menu {
+  overflow-y: auto;
+  padding-bottom: 50px;
+}
 .sidebar-collapse-btn {
   height: 48px;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   border-top: 1px solid #1f232926;

frontend/src/layout/index.vue

@@ -175,13 +175,13 @@ export default {
   }
   .le-aside-container {
       .sidebar-container {
-        width: 100% !important;
+        width: 100%;
-        position: initial !important;
+        position: relative !important;
-        height: calc(100vh - 80px) !important;
+        height: 100%;
-        overflow-x: hidden !important;
+        top: 0 !important;
-        overflow-y: auto !important;
         background-color: var(--SiderBG) !important;
       }
+      overflow: hidden;
   }
   .full-height {
     height: 100vh !important;

frontend/src/main.js

@@ -23,6 +23,8 @@ import './utils/dialog'
 import DeComplexInput from '@/components/business/condition-table/DeComplexInput'
 import DeComplexSelect from '@/components/business/condition-table/DeComplexSelect'
 import DeViewSelect from '@/components/DeViewSelect'
+import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
+import TitleRemark from '@/views/chart/view/TitleRemark'
 import '@/components/canvas/custom-component' // 注册自定义组件
 
 import '@/utils/DateUtil'
@@ -90,6 +92,8 @@ Vue.component('Treeselect', Treeselect)
 Vue.component('DeComplexInput', DeComplexInput)
 Vue.component('DeComplexSelect', DeComplexSelect)
 Vue.component('DeViewSelect', DeViewSelect)
+Vue.component('RemarkEditor', RemarkEditor)
+Vue.component('TitleRemark', TitleRemark)
 Vue.config.productionTip = false
 
 import vueToPdf from 'vue-to-pdf'

frontend/src/permission.js

@@ -189,10 +189,20 @@ const filterRouter = routers => {
   })
 }
 const hasPermission = (router, user_permissions) => {
-  // 菜单要求权限 但是当前用户权限没有包含菜单权限
+  // 判断是否有符合权限 eg. user:read,user:delete
-  if (router.permission && !user_permissions.includes(router.permission)) {
+  if (router.permission && router.permission.indexOf(',') > -1) {
+    const permissions = router.permission.split(',')
+    const permissionsFilter = permissions.filter(permission => {
+      return user_permissions.includes(permission)
+    })
+    if (!permissionsFilter || permissionsFilter.length === 0) {
       return false
     }
+  } else if (router.permission && !user_permissions.includes(router.permission)) {
+    // 菜单要求权限 但是当前用户权限没有包含菜单权限
+    return false
+  }
+
   if (!filterLic(router)) {
     return false
   }

frontend/src/store/index.js

@@ -108,6 +108,8 @@ const data = {
       y: 600
     },
     scrollAutoMove: 0,
+    // 系统管理菜单是否收缩
+    isCollapse: false,
     // 视图是否编辑记录
     panelViewEditInfo: {},
     // 仪表板视图明细
@@ -151,7 +153,9 @@ const data = {
     setEditMode(state, mode) {
       state.editMode = mode
     },
-
+    setIsCollapse(state, isCollapse) {
+      state.isCollapse = isCollapse
+    },
     setCanvasStyle(state, style) {
       if (style) {
         style['selfAdaption'] = true
@@ -239,6 +243,7 @@ const data = {
         return newItem
       })
     },
+
     addViewFilter(state, data) {
       const condition = formatCondition(data)
       const vValid = valueValid(condition)

frontend/src/styles/index.scss

@@ -111,8 +111,8 @@ div:focus {
 }
 
 .de-button-dialog {
-  min-width: 250px !important;
+  min-width: 200px !important;
-  width: 30% !important;
+  width: 27% !important;
 
   .el-dialog__header {
     padding: 10px 20px !important;

frontend/src/utils/conditionUtil.js

@@ -51,8 +51,8 @@ export const formatLinkageCondition = obj => {
   return condition
 }
 
-export const buildFilterMap = panelItems => {
+export const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
-  const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
+export const buildViewKeyMap = panelItems => {
   const result = {}
   panelItems.forEach(element => {
     if (element.type === 'view') {
@@ -66,12 +66,18 @@ export const buildFilterMap = panelItems => {
       })
     }
   })
-  panelItems.forEach(element => {
+  return result
+}
+
+export const buildViewKeyFilters = (panelItems, result) => {
+  panelItems.forEach((element, index) => {
     if (element.type !== 'custom') {
       return true
     }
+
+    let param = null
     const widget = ApplicationContext.getService(element.serviceName)
-    const param = widget.getParam(element)
+    param = widget.getParam(element)
     const condition = formatCondition(param)
     const vValid = valueValid(condition)
     const filterComponentId = condition.componentId
@@ -90,3 +96,9 @@ export const buildFilterMap = panelItems => {
   })
   return result
 }
+export const buildFilterMap = panelItems => {
+  let result = buildViewKeyMap(panelItems)
+
+  result = buildViewKeyFilters(panelItems, result)
+  return result
+}

frontend/src/views/chart/chart/chart.js

@@ -61,6 +61,16 @@ export const DEFAULT_SIZE = {
   spaceSplit: 10,
   dimensionShow: true,
   quotaShow: true,
+  quotaFontFamily: 'Microsoft YaHei',
+  quotaFontIsBolder: false,
+  quotaFontIsItalic: false,
+  quotaLetterSpace: '0',
+  quotaFontShadow: false,
+  dimensionFontFamily: 'Microsoft YaHei',
+  dimensionFontIsBolder: false,
+  dimensionFontIsItalic: false,
+  dimensionLetterSpace: '0',
+  dimensionFontShadow: false,
   scatterSymbol: 'circle',
   scatterSymbolSize: 20,
   treemapWidth: 80,
@@ -147,7 +157,10 @@ export const DEFAULT_TITLE_STYLE = {
   isBolder: true,
   remarkShow: false,
   remark: '',
-  remarkBackgroundColor: '#ffffffff'
+  remarkBackgroundColor: '#ffffffff',
+  fontFamily: 'Microsoft YaHei',
+  letterSpace: '0',
+  fontShadow: false
 }
 
 export const DEFAULT_TITLE_STYLE_DARK = {
@@ -157,7 +170,13 @@ export const DEFAULT_TITLE_STYLE_DARK = {
   hPosition: 'left',
   vPosition: 'top',
   isItalic: false,
-  isBolder: true
+  isBolder: true,
+  remarkShow: false,
+  remark: '',
+  remarkBackgroundColor: '#ffffffff',
+  fontFamily: 'Microsoft YaHei',
+  letterSpace: '0',
+  fontShadow: false
 }
 
 export const DEFAULT_LEGEND_STYLE = {
@@ -968,3 +987,24 @@ export const BASE_ECHARTS_SELECT = {
     shadowBlur: 2
   }
 }
+
+export const CHART_FONT_FAMILY = [
+  { name: '微软雅黑', value: 'Microsoft YaHei' },
+  { name: '宋体', value: 'SimSun' },
+  { name: '黑体', value: 'SimHei' },
+  { name: '楷体', value: 'KaiTi' }
+]
+
+export const CHART_FONT_LETTER_SPACE = [
+  { name: '0px', value: '0' },
+  { name: '1px', value: '1' },
+  { name: '2px', value: '2' },
+  { name: '3px', value: '3' },
+  { name: '4px', value: '4' },
+  { name: '5px', value: '5' },
+  { name: '6px', value: '6' },
+  { name: '7px', value: '7' },
+  { name: '8px', value: '8' },
+  { name: '9px', value: '9' },
+  { name: '10px', value: '10' }
+]

frontend/src/views/chart/chart/util.js

@@ -66,7 +66,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -108,7 +111,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -153,7 +159,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -175,8 +184,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector-ant-v': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector-ant-v': [
@@ -187,7 +204,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -209,8 +229,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector-ant-v': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector-ant-v': [
@@ -221,7 +249,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -261,7 +292,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -299,7 +333,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -368,7 +405,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -445,7 +485,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -522,7 +565,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -598,7 +644,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -667,7 +716,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -735,7 +787,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -811,7 +866,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -866,7 +924,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -921,7 +982,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -977,7 +1041,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1030,7 +1097,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1070,7 +1140,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -1138,7 +1211,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1188,7 +1264,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1295,8 +1374,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector': [
@@ -1305,9 +1392,11 @@ export const TYPE_CONFIGS = [
         'fontSize',
         'color',
         'hPosition',
-        'vPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -1329,8 +1418,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector': [
@@ -1340,7 +1437,10 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },

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

@@ -4,7 +4,7 @@
     <span v-if="chart.type && antVRenderStatus" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
@@ -27,6 +27,7 @@ import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
 import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
 import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'ChartComponentG2',
@@ -322,6 +323,10 @@ export default {
           this.title_class.textAlign = customStyle.text.hPosition
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)

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

@@ -4,7 +4,7 @@
     <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
@@ -40,6 +40,7 @@ import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'ChartComponentS2',
@@ -322,6 +323,10 @@ export default {
           if (this.$refs.title) {
             this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
           }
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)

frontend/src/views/chart/components/component-style/TitleSelector.vue

@@ -16,6 +16,11 @@
               @input="inputOnInput($event)"
             />
           </el-form-item>
+          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
+            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
+              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
           <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
             <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -42,6 +47,14 @@
             <el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
             <el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
+          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
+            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>
         </div>
       </el-form>
     </el-col>
@@ -49,7 +62,7 @@
 </template>
 
 <script>
-import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'
 
@@ -77,7 +90,9 @@ export default {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
       fontSize: [],
       isSetting: false,
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   watch: {
@@ -108,6 +123,10 @@ export default {
         }
         if (customStyle.text) {
           this.titleForm = customStyle.text
+
+          this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
+          this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
         }
         if (!this.batchOptStatus) {
           this.titleForm.title = this.chart.title

frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue

@@ -16,6 +16,11 @@
               @input="inputOnInput($event)"
             />
           </el-form-item>
+          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
+            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
+              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
           <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
             <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -35,7 +40,14 @@
             <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
             <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
-        </div>
+          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
+            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>
 
           <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
             <el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
@@ -54,6 +66,7 @@
               <el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
             </el-form-item>
           </span>
+        </div>
       </el-form>
     </el-col>
 
@@ -78,14 +91,12 @@
 </template>
 
 <script>
-import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'
-import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
 
 export default {
   name: 'TitleSelectorAntV',
-  components: { RemarkEditor },
   props: {
     param: {
       type: Object,
@@ -110,7 +121,9 @@ export default {
       isSetting: false,
       predefineColors: COLOR_PANEL,
       showEditRemark: false,
-      tmpRemark: ''
+      tmpRemark: '',
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   computed: {
@@ -144,6 +157,10 @@ export default {
           this.titleForm.remarkShow = this.titleForm.remarkShow ? this.titleForm.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
           this.titleForm.remark = this.titleForm.remark ? this.titleForm.remark : DEFAULT_TITLE_STYLE.remark
           this.titleForm.remarkBackgroundColor = this.titleForm.remarkBackgroundColor ? this.titleForm.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
+
+          this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
+          this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
         }
         if (!this.batchOptStatus) {
           this.titleForm.title = this.chart.title

frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -3,7 +3,7 @@
     <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div
@@ -30,6 +30,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'LabelNormal',
@@ -157,8 +158,21 @@ export default {
         if (customAttr.size) {
           this.dimensionShow = customAttr.size.dimensionShow
           this.quotaShow = customAttr.size.quotaShow
+
           this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
+          this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
+          this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
+          this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
+
           this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
+          this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
+          this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
+          this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
+
           if (!this.dimensionShow) {
             this.label_space.marginTop = '0px'
           } else {
@@ -175,6 +189,10 @@ export default {
           this.title_class.textAlign = customStyle.text.hPosition
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
@@ -247,7 +265,7 @@ export default {
       } catch (err) {
         yAxis = JSON.parse(JSON.stringify(this.chart.yaxis))
       }
-      const f = yAxis[0]
+      const f = (yAxis && yAxis.length > 0) ? yAxis[0] : null
       if (f && f.formatterCfg) {
         const v = valueFormatter(value, f.formatterCfg)
         this.result = v.includes('NaN') ? value : v

frontend/src/views/chart/components/normal/LabelNormalText.vue

@@ -4,7 +4,7 @@
     <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div
@@ -31,6 +31,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'LabelNormalText',
@@ -172,8 +173,21 @@ export default {
         if (customAttr.size) {
           this.dimensionShow = customAttr.size.dimensionShow
           this.quotaShow = customAttr.size.quotaShow
+
           this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
+          this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
+          this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
+          this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
+
           this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
+          this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
+          this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
+          this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
+
           if (!this.dimensionShow) {
             this.label_space.marginTop = '0px'
           } else {
@@ -190,6 +204,10 @@ export default {
           this.title_class.textAlign = customStyle.text.hPosition
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -132,12 +132,30 @@
           <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
         </el-form-item>
         <!--gauge-end-->
-        <!--text&label-end-->
+        <!--text&label-start-->
         <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
           <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
           <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
@@ -146,6 +164,24 @@
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('spaceSplit')" />
         <el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
           <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
         </el-form-item>
@@ -265,7 +301,7 @@
 </template>
 
 <script>
-import { DEFAULT_SIZE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
 export default {
   name: 'SizeSelector',
   props: {
@@ -312,7 +348,9 @@ export default {
         { name: '50' + this.$t('chart.table_page_size_unit'), value: '50' },
         { name: '100' + this.$t('chart.table_page_size_unit'), value: '100' }
       ],
-      fontSize: []
+      fontSize: [],
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   watch: {
@@ -352,6 +390,17 @@ export default {
 
           this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
+
+          this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
+          this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
+          this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
+          this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
+          this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
+          this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
+          this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
+          this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
         }
       }
     },

frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue

@@ -321,11 +321,30 @@
       <!--gauge-end-->
 
       <el-form ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+        <!--text&label-start-->
         <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
           <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item
           v-show="showProperty('dimensionShow')"
           :label="$t('chart.dimension_show')"
@@ -346,6 +365,24 @@
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('spaceSplit')" />
         <el-form-item
           v-show="showProperty('spaceSplit')"
           :label="$t('chart.space_split')"
@@ -433,7 +470,7 @@
 </template>
 
 <script>
-import { DEFAULT_SIZE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
 
 export default {
   name: 'SizeSelectorAntV',
@@ -482,7 +519,9 @@ export default {
         { name: this.$t('chart.table_align_left'), value: 'left' },
         { name: this.$t('chart.table_align_center'), value: 'center' },
         { name: this.$t('chart.table_align_right'), value: 'right' }
-      ]
+      ],
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   watch: {
@@ -530,6 +569,17 @@ export default {
           this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
 
           this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
+
+          this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
+          this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
+          this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
+          this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
+          this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
+          this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
+          this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
+          this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
         }
       }
     },

frontend/src/views/chart/view/ChartEdit.vue

@@ -1478,7 +1478,9 @@ export default {
         this.view.resultCount = '1000'
       }
       if (switchType) {
-        this.view.senior.threshold.tableThreshold = []
+        this.view.senior.threshold = {
+          tableThreshold: []
+        }
       }
       if (switchType && (this.view.type === 'table-info' || this.chart.type === 'table-info') && this.view.xaxis.length > 0) {
         this.$message({

frontend/src/views/chart/view/TitleRemark.vue

@@ -33,6 +33,32 @@ export default {
   padding: 10px;
   border-radius: 4px;
 }
+::-webkit-scrollbar {
+  width: 0px!important;
+  height: 0px!important;
+}
+::v-deep ol {
+  display: block!important;
+  list-style-type: decimal;
+  margin-block-start: 1em!important;
+  margin-block-end: 1em!important;
+  margin-inline-start: 0px!important;
+  margin-inline-end: 0px!important;
+  padding-inline-start: 40px!important;
+}
+::v-deep ul {
+  display: block!important;
+  list-style-type: disc;
+  margin-block-start: 1em!important;
+  margin-block-end: 1em!important;
+  margin-inline-start: 0px!important;
+  margin-inline-end: 0px!important;
+  padding-inline-start: 40px!important;
+}
+::v-deep li {
+  display: list-item!important;
+  text-align: -webkit-match-parent!important;
+}
 </style>
 <style>
 .el-popover.remark-pop{

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

@@ -13,7 +13,7 @@
           </el-row>
           <el-tree
             ref="linkJumpInfoTree"
-            :data="linkJumpInfoArray"
+            :data="linkJumpInfoXArray"
             node-key="sourceFieldId"
             highlight-current
             :props="treeProp"
@@ -295,6 +295,7 @@ export default {
       },
       linkJump: null,
       linkJumpInfoArray: [],
+      linkJumpInfoXArray: [],
       mapJumpInfoArray: {},
       panelList: [],
       linkJumpInfo: null,
@@ -358,7 +359,9 @@ export default {
   methods: {
     init() {
       const chartDetails = JSON.parse(this.panelViewDetailsInfo[this.viewId])
-      const checkStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
+      const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
+      const checkJumpStr = chartDetails.type.includes('table') ? checkAllAxisStr : chartDetails.xaxis + chartDetails.xaxisExt
+
       // 获取可关联的仪表板
       groupTree({}).then(rsp => {
         this.panelList = rsp.data
@@ -367,10 +370,14 @@ export default {
       queryWithViewId(this.panelInfo.id, this.viewId).then(rsp => {
         this.linkJump = rsp.data
         this.linkJumpInfoArray = []
+        this.linkJumpInfoXArray = []
         this.linkJump.linkJumpInfoArray.forEach(linkJumpInfo => {
-          if (checkStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
+          if (checkJumpStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
             this.mapJumpInfoArray[linkJumpInfo.sourceFieldId] = linkJumpInfo
             this.linkJumpInfoArray.push(linkJumpInfo)
+            this.linkJumpInfoXArray.push(linkJumpInfo)
+          } else if (checkAllAxisStr.indexOf(linkJumpInfo.sourceFieldId) > -1) {
+            this.linkJumpInfoArray.push(linkJumpInfo)
           }
         })
         this.linkJumpInfoArray.forEach(linkJumpInfo => {
@@ -523,9 +530,9 @@ export default {
         on.forEach(itm => {
           const ele = itm.slice(1, -1)
           if (name2Auto) {
-            name2Auto.push(nameIdMap[ele])
+            name2Auto.push(nameIdMap[itm])
           }
-          name2Id = name2Id.replace(ele, nameIdMap[ele])
+          name2Id = name2Id.replace(itm, '[' + nameIdMap[ele] + ']')
         })
       }
       return name2Id

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

@@ -254,7 +254,6 @@
         @cancel-handler="cancelHandler"
       />
 
-
     </el-dialog>
 
     <el-dialog
@@ -653,6 +652,7 @@ export default {
     bus.$off('component-dialog-style', this.componentDialogStyle)
     bus.$off('previewFullScreenClose', this.previewFullScreenClose)
     bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
+    bus.$off('delete-condition', this.deleteCustomComponent)
     const elx = this.$refs.rightPanel
     elx && elx.remove()
   },
@@ -673,6 +673,19 @@ export default {
       bus.$on('component-dialog-style', this.componentDialogStyle)
       bus.$on('previewFullScreenClose', this.previewFullScreenClose)
       bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
+      bus.$on('delete-condition', this.deleteCustomComponent)
+    },
+    deleteCustomComponent(param) {
+      param && param.componentId && this.componentData.forEach(com => {
+        if (com.type === 'custom-button' && com.options.attrs.filterIds) {
+          const filterIds = com.options.attrs.filterIds
+          let len = filterIds.length
+          while (len--) {
+            if (param.componentId === filterIds[len]) { filterIds.splice(len, 1) }
+          }
+          com.options.attrs.filterIds = filterIds
+        }
+      })
     },
     loadMultiplexingViewTree() {
       queryPanelMultiplexingViewTree().then(res => {
@@ -1158,6 +1171,7 @@ export default {
       this.$store.commit('setComponentWithId', this.currentFilterCom)
       this.$store.commit('recordSnapshot', 'sureFilter')
       this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      bus.$emit('refresh-button-info')
       this.closeButton()
     },
     cancelHandler() {

frontend/src/views/panel/filter/ButtonDialog.vue

@@ -1,26 +1,29 @@
 <template>
   <div>
-    <el-form size="mini" ref="form" :model="form" label-width="100px">
+    <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="80px">
-      <el-form-item label="名称">
+      <el-form-item :label="$t('desearchbutton.text')" prop="text">
-        <el-input v-model="currentElement.options.value"></el-input>
+        <el-input v-model="currentElement.options.value" maxlength="10" show-word-limit />
       </el-form-item>
 
-      
+      <el-form-item :label="$t('desearchbutton.auto_trigger')">
-      <el-form-item label="自定义范围">
+        <el-switch v-model="myAttrs.autoTrigger" @change="autoTriggerChange" />
-        <el-switch v-model="myAttrs.customRange" @change="customRangeChange"></el-switch>
+        <el-link style="margin-left: 10px;" type="info" disabled>{{ $t('desearchbutton.auto_trigger_tip') }}</el-link>
-        <el-link style="margin-left: 10px;" type="warning" disabled>默认关联全部过滤组件</el-link>
       </el-form-item>
 
-      <el-form-item label="关联组件" v-if="myAttrs.customRange">
+      <el-form-item :label="$t('desearchbutton.range')">
-        <el-select style="width: 300px;" multiple clearable v-model="myAttrs.filterIds" placeholder="请选择活动区域">
+        <el-switch v-model="myAttrs.customRange" @change="customRangeChange" />
-          <el-option  v-for="(filter, index) in filters" :key="filter.id" :label="filter.showName" :value="filter.id" />
+        <el-link style="margin-left: 10px;" type="warning" disabled>{{ $t('desearchbutton.range_tip') }}</el-link>
+      </el-form-item>
+
+      <el-form-item v-if="myAttrs.customRange" :label="$t('desearchbutton.relative')">
+        <el-select v-model="myAttrs.filterIds" style="width: 280px;" multiple clearable>
+          <el-option v-for="(filter, index) in filters" :key="filter.id + index" :label="filter.showName" :value="filter.id" />
         </el-select>
       </el-form-item>
 
-      
       <el-form-item>
-        <el-button type="primary" @click="sure">确定</el-button>
+        <el-button type="primary" @click="sure">{{ $t('commons.confirm') }}</el-button>
-        <el-button @click="cancel">取消</el-button>
+        <el-button @click="cancel">{{ $t('commons.cancel') }}</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -35,7 +38,7 @@ export default {
   props: {
     widgetInfo: {
       type: Object,
-      default: null,
+      default: null
     },
     element: {
       type: Object,
@@ -49,14 +52,15 @@ export default {
       },
       currentElement: null,
       widget: null,
-      myAttrs: null
+      myAttrs: null,
+      rules: {
+        text: [
+          { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
+        ]
+      }
     }
   },
-  created() {
+
-    this.widget = this.widgetInfo
-    this.currentElement = JSON.parse(JSON.stringify(this.element))
-    this.myAttrs = this.currentElement.options.attrs
-  },
   computed: {
 
     ...mapState([
@@ -65,7 +69,6 @@ export default {
     filters() {
       const datas = this.componentData.filter(item => item.type === 'custom')
       datas.forEach(item => {
-
         const serviceName = item.serviceName
         const widget = ApplicationContext.getService(serviceName)
         const showName = widget.initLeftPanel().label
@@ -82,6 +85,14 @@ export default {
       return datas
     }
   },
+  watch: {
+
+  },
+  created() {
+    this.widget = this.widgetInfo
+    this.currentElement = JSON.parse(JSON.stringify(this.element))
+    this.myAttrs = this.currentElement.options.attrs
+  },
   methods: {
     sure() {
       this.$emit('sure-handler')
@@ -94,6 +105,9 @@ export default {
     },
     customRangeChange(val) {
       this.myAttrs.filterIds = []
+    },
+    autoTriggerChange(val) {
+
     }
   }
 }

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

@@ -9,7 +9,7 @@
           v-for="(widget, index) in item"
           :key="widget.widgetName+index"
           :data-id="widget.widgetName"
-          draggable
+          :draggable="widget.widgetName !== 'buttonSureWidget' || !searchButtonExist"
           :data-index="index"
           :class="'filter-widget '+ (widget.defaultClass || '')"
         >
@@ -27,7 +27,7 @@
 
 <script>
 import { ApplicationContext } from '@/utils/ApplicationContext'
-import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
+import { deepCopy } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 export default {
@@ -35,16 +35,11 @@ export default {
   data() {
     return {
       panelInfo: this.$store.state.panel.panelInfo,
-      //   widgetSubjects: {
+
-      //     '文本过滤组件': [
-      //       'mySelectWidget'
-      //     ]
-      //   }
       widgetSubjects: {
         '时间过滤组件': [
           'timeYearWidget',
           'timeMonthWidget',
-          //   'timeQuarterWidget',
           'timeDateWidget',
           'timeDateRangeWidget'
 
@@ -69,22 +64,44 @@ export default {
   computed: {
     ...mapState([
       'canvasStyleData',
-      'curCanvasScale'
+      'curCanvasScale',
-    ])
+      'componentData'
+    ]),
+    searchButtonExist() {
+      return this.componentData && this.componentData.some(component => component.type === 'custom-button' && component.serviceName === 'buttonSureWidget')
+    }
+  },
+  watch: {
+    searchButtonExist(val, old) {
+      if (val === old) return
+      if (val) {
+        this.widgetSubjects['按钮'][0].widgetName = 'buttonSureWidget'
+        this.widgetSubjects['按钮'][0].defaultClass = 'button-disable-filter'
+      } else {
+        this.widgetSubjects['按钮'][0].widgetName = 'buttonSureWidget'
+        this.widgetSubjects['按钮'][0].defaultClass = 'time-filter'
+      }
+    }
   },
   created() {
+    this.init()
+  },
+
+  methods: {
+    init() {
       for (const key in this.widgetSubjects) {
         const widgetNames = this.widgetSubjects[key]
         this.widgetSubjects[key] = widgetNames.map(widgetName => {
           const widget = ApplicationContext.getService(widgetName)
           const result = { widgetName: widgetName }
           Object.assign(result, widget.getLeftPanel())
+          if (this.searchButtonExist && widgetName === 'buttonSureWidget') {
+            result.defaultClass = 'button-disable-filter'
+          }
           return result
         })
       }
     },
-
-  methods: {
     handleDragStart(ev) {
       // 记录拖拽信息
       const dragComponentInfo = deepCopy(ApplicationContext.getService(ev.target.dataset.id).getDrawPanel())
@@ -171,6 +188,16 @@ export default {
     overflow: hidden;
   }
 
+  .button-disable-filter {
+    background-color: #ecf5ff;
+    .filter-widget-icon {
+        color: #8cc5ff;
+    }
+    .filter-widget-text {
+        color: var(--TextActive, #8cc5ff);
+    }
+  }
+
   .time-filter {
     background-color: rgba(54,133,242,.1);
     .filter-widget-icon {

frontend/src/views/system/datasource/ApiHttpRequestForm.vue

@@ -391,4 +391,9 @@ export default {
   float: right;
   margin-right: 45px;
 }
+
+::v-deep .el-tabs__nav-wrap::after,
+::v-deep .el-tabs__active-bar {
+  height: 1px !important;
+}
 </style>

frontend/src/views/system/datasource/DsConfiguration.vue

@@ -407,6 +407,7 @@
       :visible.sync="edit_api_item"
       custom-class="api-datasource-drawer"
       size="840px"
+      v-closePress
       :before-close="closeEditItem"
       direction="rtl"
     >
@@ -463,7 +464,7 @@
           </el-form-item>
 
           <div v-loading="loading">
-            <div class="row-rules">
+            <div class="row-rules mr40">
               <span>{{ $t("datasource.req_param") }}</span>
             </div>
             <!-- HTTP 请求参数 -->
@@ -981,7 +982,6 @@ export default {
     },
     closeEditItem() {
       this.active = 0;
-      console.log(1, this.$refs.apiItem);
       this.$refs.apiItem.clearValidate();
       this.edit_api_item = false;
     },
@@ -1122,14 +1122,30 @@ export default {
 <style lang="scss">
 .api-datasource-drawer {
   .el-drawer__header {
-    padding: 24px;
+    padding: 16px 24px;
     margin: 0;
     font-family: PingFang SC;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
     color: #1f2329;
+    position: relative;
     border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
   }
   .el-drawer__body {
     padding: 0 24px 81px 24px;
@@ -1144,7 +1160,7 @@ export default {
     font-weight: 500;
     line-height: 22px;
     padding-left: 10px;
-    margin: 24px 0;
+    margin: 24px 0 16px 0;
 
     &::before {
       content: "";
@@ -1161,8 +1177,10 @@ export default {
   .input-with-select {
     .el-input-group__prepend {
       background-color: #fff;
+      border-color: #bbbfc4;
       .el-select {
         width: 84px !important;
+        color: #1f2329;
       }
     }
   }
@@ -1215,6 +1233,7 @@ export default {
       line-height: 22px;
       text-align: center;
       color: #1f2329;
+      margin-top: 4px;
     }
 
     .is-process {
@@ -1244,6 +1263,18 @@ export default {
     margin-left: 0 !important;
   }
 
+  .el-form-item {
+    margin-bottom: 28px;
+  }
+
+  .el-form-item__label {
+    padding-bottom: 8px;
+  }
+
+  .mr40 {
+    margin-top: 40px;
+  }
+
   .btn {
     border-radius: 4px;
     padding: 5px 26px 5px 26px;

frontend/src/views/system/user/filterUser.vue

@@ -4,6 +4,7 @@
     :visible.sync="userDrawer"
     custom-class="user-drawer"
     size="680px"
+    v-closePress
     direction="rtl"
   >
     <div class="filter">
@@ -24,7 +25,7 @@
           @click="activeDeptChange(ele.id)"
           :class="[activeDept.includes(ele.id) ? 'active' : '']"
           :key="ele.id"
-          v-for="ele in selectDepts"
+          v-for="ele in selectDeptsCahe"
           >{{ ele.label }}</span>
         <el-popover
           placement="bottom"
@@ -42,7 +43,7 @@
               :load="loadNode"
               :lazy="true"
               :expand-on-click-node="false"
-              :data="depts"
+              :data="deptsComputed"
               :props="defaultProps"
               @node-click="handleNodeClick"
             ></el-tree>
@@ -54,8 +55,6 @@
               popper-class="tree-select"
               multiple
               :placeholder="$t('commons.please_select')"
-              @change="changeRole"
-              @remove-tag="changeRole"
               value-key="id"
             >
             <el-option
@@ -77,7 +76,7 @@
           @click="activeRoleChange(ele.id)"
           :class="[activeRole.includes(ele.id) ? 'active' : '']"
           :key="ele.id"
-          v-for="ele in rolesValue"
+          v-for="ele in rolesValueCopy"
           >{{ ele.name }}</span
         >
         <el-popover
@@ -96,7 +95,7 @@
             value-key="id"
           >
             <el-option
-              v-for="item in roles"
+              v-for="item in rolesComputed"
               :key="item.name"
               :label="item.name"
               :value="item"
@@ -126,7 +125,8 @@ import { getDeptTree, treeByDeptId } from "@/api/system/dept";
 export default {
   data() {
     return {
-      value: [],
+      roleCahe: [],
+      deptCahe: [],
       roles: [],
       status: [{
         id: 1,
@@ -140,6 +140,7 @@ export default {
       activeRole: [],
       depts: [],
       selectDepts: [],
+      selectDeptsCahe: [],
       activeDept: [],
       defaultProps: {
         children: "children",
@@ -149,6 +150,17 @@ export default {
       userDrawer: false
     };
   },
+  computed: {
+    rolesComputed() {
+      return this.roles.filter(ele => !this.activeRole.includes(ele.id))
+    },
+    rolesValueCopy() {
+      return this.roleCahe.filter(ele => this.activeRole.includes(ele.id))
+    },
+    deptsComputed() {
+      return this.depts.filter(ele => !this.activeDept.includes(ele.id))
+    }
+  },
   mounted() {
     this.initRoles();
   },
@@ -156,37 +168,53 @@ export default {
     // 获取弹窗内部门数据
     treeByDeptId() {
       treeByDeptId(0).then((res) => {
-        this.depts = res.data || [];
+        this.depts =  (res.data || []).map(ele =>  {
+        return {
+            ...ele,
+            leaf: !ele.hasChildren,
+          }
+        })
       });
     },
     changeRole() {
-      const roles = this.rolesValue.map((item) => item.id);
+      if (this.roleCahe.length > this.rolesValue.length + this.activeRole.length) {
-      this.activeRole = this.activeRole.filter((ele) => roles.includes(ele));
+        this.roleCahe = this.roleCahe.filter(ele => this.rolesValue.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
+        return;
+      }
+      const roleIdx = this.rolesValue.findIndex(ele => !this.roleCahe.map(ele => ele.id).concat(this.activeRole).includes(ele.id));
+      if (roleIdx === -1) return
+      this.activeRole.push(this.rolesValue[roleIdx].id)
+      this.roleCahe.push(this.rolesValue[roleIdx]);
+      this.rolesValue.splice(roleIdx, 1)
     },
     activeRoleChange(id) {
       const roleIndex = this.activeRole.findIndex((ele) => ele === id);
       if (roleIndex === -1) {
         this.activeRole.push(id);
+        this.rolesValue = this.rolesValue.filter((ele) => ele.id !== id);
       } else {
         this.activeRole.splice(roleIndex, 1);
+        const role = this.roleCahe.find((ele) => ele.id === id);
+        this.rolesValue.push(role);
       }
     },
     handleNodeClick({ id, label }) {
-      const deptIndex = this.selectDepts.findIndex((ele) => ele.id === id);
+      const deptIdx = this.selectDepts.findIndex((ele) => ele.id === id);
-      if (deptIndex === -1) {
+      if (deptIdx !== -1) {
-        this.selectDepts.push({ id, label });
+        this.selectDepts.splice(deptIdx, 1);
-      } else {
+        this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
-        this.selectDepts.splice(deptIndex, 1);
+        this.deptCahe = this.deptCahe.filter(ele => ele.id !== id)
-        this.changeDepts();
+        return;
       }
+      this.activeDept.push(id)
+      this.selectDeptsCahe.push({ id, label });
+      this.deptCahe.push({ id, label });
     },
     activeDeptChange(id) {
-        const deptIndex = this.activeDept.findIndex((ele) => ele === id);
+      const dept = this.deptCahe.find((ele) => ele.id === id)
-      if (deptIndex === -1) {
+      this.selectDepts.push(dept);
-        this.activeDept.push(id);
+      this.activeDept = this.activeDept.filter(ele => ele !== id)
-      } else {
+      this.selectDeptsCahe = this.selectDeptsCahe.filter(ele => ele.id !== id)
-        this.activeDept.splice(deptIndex, 1);
-      }
     },
     statusChange(id) {
         const statusIndex = this.activeStatus.findIndex((ele) => ele === id);
@@ -206,8 +234,9 @@ export default {
         return;
       }
       getDeptTree(node.data.id).then((res) => {
+        const filterDept = (res.data || []).filter(ele => !this.activeDept.includes(ele.deptId))
         resolve(
-          res.data.map((dept) => {
+          filterDept.map((dept) => {
             return this.normalizer(dept);
           })
         );
@@ -227,7 +256,21 @@ export default {
     },
     search() {
       this.userDrawer = false;
-      this.$emit('search', this.formatCondition())
+      this.$emit('search', this.formatCondition(), this.formatText())
+    },
+    formatText() {
+      const params = [];
+      if (this.activeStatus.length) {
+        let str = `状态:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
+        params.push(str.slice(0, str.length - 1 ))
+      }
+      if (this.activeDept.length) {
+        params.push(`组织:${this.selectDeptsCahe.reduce((pre,next) =>  pre.label  + '、' + next.label)}`)
+      }
+      if (this.activeRole.length) {
+        params.push(`角色:${this.rolesValueCopy.reduce((pre,next) => pre.label  + '、' +  next.labele)}`)
+      }
+      return params;
     },
     formatCondition() {
       const fildMap = {'r.role_id': this.activeRole, 'd.dept_id': this.activeDept, 'u.enabled': this.activeStatus}
@@ -259,16 +302,33 @@ export default {
 <style lang="scss">
 .user-drawer {
   .el-drawer__header {
-    padding: 16px 21px 16px 24px;
+   padding: 16px 24px;
+    margin: 0;
     font-family: PingFang SC;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
-    letter-spacing: 0px;
-    text-align: left;
     color: #1f2329;
+    position: relative;
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
     border-bottom: 1px solid rgba(187, 191, 196, 0.5);
-    margin: 0;
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
   }
 
   .el-drawer__body {
@@ -351,8 +411,9 @@ export default {
 }
 .tree-select {
   .el-select-dropdown__empty,
+  .el-scrollbar__wrap,
   .popper__arrow {
-    display: none;
+    display: none !important;
   }
 }
 

frontend/src/views/system/user/index.vue

@@ -26,9 +26,12 @@
         </el-input>
         <el-button
           class="normal btn"
-          icon="el-icon-setting"
+          icon="iconfont icon-icon-filter"
           @click="filterShow"
-          >筛选</el-button
+          >筛选<template v-if="filterTexts.length">
+            ({{ filterTexts.length }})
+          </template>
+          </el-button
         >
         <el-dropdown trigger="click" :hide-on-click="false">
           <el-button class="normal btn" icon="el-icon-setting"
@@ -54,7 +57,18 @@
         </el-dropdown>
       </el-col>
     </el-row>
-    <div class="table-container">
+    <div class="filter-texts" v-if="filterTexts.length">
+      <span class="sum">{{ paginationConfig.total }}</span>
+      <span class="title">个结果</span>
+       <el-divider direction="vertical"></el-divider>
+      <p class="text" v-for="ele in filterTexts" :key="ele">{{ ele }} <i class="el-icon-close"></i></p>
+      <el-button
+          type="text"
+          icon="el-icon-delete"
+          @click="clearFilter"
+          >{{ $t("user.create") }}</el-button>
+    </div>
+    <div class="table-container" :class="[filterTexts.length ? 'table-container-filter' : '']">
       <grid-table
         v-if="canLoadDom"
         v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
@@ -160,7 +174,7 @@
               width="321"
               :ref="'initPwd' + scope.row.userId"
               popper-class="reset-pwd"
-              trigger="hover"
+              trigger="click"
             >
               <i class="el-icon-warning"></i>
               <div class="tips">是否恢复为初始密码?</div>
@@ -207,44 +221,6 @@
         </el-table-column>
       </grid-table>
     </div>
-    <el-dialog
-      :close-on-click-modal="false"
-      :title="$t('member.edit_password')"
-      :visible.sync="editPasswordVisible"
-      width="30%"
-      :destroy-on-close="true"
-      left
-      @close="handleClose"
-    >
-      <el-form
-        ref="editPasswordForm"
-        :model="ruleForm"
-        label-position="right"
-        label-width="120px"
-        :rules="rule"
-        class="demo-ruleForm"
-        @keypress.enter.native="editUserPassword('editPasswordForm')"
-      >
-        <el-form-item :label="$t('member.new_password')" prop="newPassword">
-          <el-input
-            v-model="ruleForm.newPassword"
-            type="password"
-            autocomplete="off"
-            show-password
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="editPasswordVisible = false">{{
-          $t("commons.cancel")
-        }}</el-button>
-        <el-button
-          type="primary"
-          @click="editUserPassword('editPasswordForm')"
-          >{{ $t("commons.confirm") }}</el-button
-        >
-      </div>
-    </el-dialog>
     <keep-alive>
       <filterUser ref="filterUser" @search="filterDraw" ></filterUser>
     </keep-alive>
@@ -310,8 +286,8 @@ export default {
         total: 0,
       },
       data: [],
+      filterTexts: [],
       dialogVisible: false,
-      editPasswordVisible: false,
       form: {
         roles: [
           {
@@ -376,6 +352,9 @@ export default {
     document.removeEventListener('keypress', this.entryKey)
   },
   methods: {
+    clearFilter() {
+
+    },
     entryKey (event) {
       const keyCode = event.keyCode
       if (keyCode === 13) {
@@ -438,8 +417,9 @@ export default {
       this.paginationConfig.currentPage = currentPage;
       this.search();
     },
-    filterDraw(condition) {
+    filterDraw(condition, filterTexts = []) {
       this.cacheCondition = condition;
+      this.filterTexts = filterTexts;
       this.initSearch()
     },
     search() {
@@ -467,11 +447,6 @@ export default {
     edit(row) {
       this.$refs.userEditer.init(row);
     },
-    editPassword(row) {
-      this.editPasswordVisible = true;
-      const tempForm = Object.assign({}, row);
-      this.ruleForm = { userId: tempForm.userId };
-    },
     del(row) {
       this.$confirm(this.$t("确定删除该用户吗？"), "", {
         confirmButtonText: this.$t("commons.delete"),
@@ -499,23 +474,6 @@ export default {
         customClass: "de-message-success de-message",
       });
     },
-    editUserPassword(editPasswordForm) {
-      this.$refs[editPasswordForm].validate((valid) => {
-        if (valid) {
-          editPassword(this.ruleForm).then((res) => {
-            this.$success(this.$t("commons.modify_success"));
-            this.editPasswordVisible = false;
-            this.initSearch();
-            this.user &&
-              this.user.userId &&
-              this.user.userId === editPasswordForm.userId &&
-              window.location.reload();
-          });
-        } else {
-          return false;
-        }
-      });
-    },
     handleClose() {
       this.depts = null;
       this.formType = "add";
@@ -566,12 +524,57 @@ export default {
     margin: 0 -2px 0 4px;
   }
 }
+
+.table-container-filter {
+  height: calc(100% - 110px);
+}
+.filter-texts {
+  display: flex;
+  align-items: center;
+  margin: 17px 0;
+  font-family: 'PingFang SC';
+  font-weight: 400;
+
+  .sum {
+    color: #1F2329;;
+  }
+
+  .title {
+    color: #999999;
+    margin-left: 8px;
+  }
+
+  .text {
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 1px 22px 1px 6px;
+    display: flex;
+    align-items: center;
+    color: #0C296E;
+    font-size: 14px;
+    line-height: 22px;
+    background: rgba(51, 112, 255, 0.1);
+    border-radius: 2px;
+    margin: 0;
+    margin-right: 8px;
+    position: relative;
+    i {
+      position: absolute;
+      right: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+}
 .top-operate {
   margin-bottom: 16px;
 
   .btn {
     border-radius: 4px;
-    padding: 5px 12px 5px 12px;
+    padding: 5px 12px;
     //styleName: 中文/桌面端/正文 14 22 Regular;
     font-family: PingFang SC;
     font-size: 14px;
@@ -581,6 +584,11 @@ export default {
     text-align: center;
     border: none;
     box-sizing: border-box;
+
+
+    ::v-deep span {
+      margin-left: 5px;
+    }
   }
 
   .normal {
@@ -602,6 +610,9 @@ export default {
 
   .name-email-search {
     width: 240px;
+    ::v-deep input {
+      border-color: #bbbfc4;
+    }
   }
 }
 </style>

frontend/src/views/system/user/userEditer.vue

@@ -99,18 +99,39 @@
             :label="$t('commons.organization')"
             prop="deptId"
           >
-            <treeselect
+            <el-popover
-              ref="deptTreeSelect"
+            placement="bottom"
+            popper-class="user-popper dept"
+            width="384"
+            trigger="click"
+          >
+            <el-tree
+              v-if="dialogVisible"
+              :load="loadNode"
+              :lazy="true"
+              :expand-on-click-node="false"
+              :data="depts"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+            ></el-tree>
+
+            <el-select
+              ref="roleSelect"
               v-model="form.deptId"
-              :options="depts"
+              clearable
-              :load-options="loadDepts"
+              slot="reference"
-              :auto-load-root-options="false"
+              class="form-gender-select"
-              :placeholder="$t('user.choose_org')"
+              popper-class="tree-select"
-              :no-children-text="$t('commons.treeselect.no_children_text')"
+              :placeholder="$t('commons.please_select')"
-              :no-options-text="$t('commons.treeselect.no_options_text')"
+            >
-              :no-results-text="$t('commons.treeselect.no_results_text')"
+            <el-option
-              @open="filterData"
+              v-for="item in selectDepts"
+              :key="item.label"
+              :label="item.label"
+              :value="item.id"
             />
+            </el-select>
+            </el-popover>
           </el-form-item>
         </el-col>
       </el-row>
@@ -170,16 +191,15 @@ import { PHONE_REGEX } from "@/utils/validate";
 import { getDeptTree, treeByDeptId } from "@/api/system/dept";
 import { addUser, editUser, allRoles } from "@/api/system/user";
 import { pluginLoaded, defaultPwd } from "@/api/user";
-import {
-  LOAD_CHILDREN_OPTIONS,
-  LOAD_ROOT_OPTIONS,
-} from "@riophae/vue-treeselect";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
-  components: { Treeselect },
   data() {
     return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+        isLeaf: "leaf",
+      },
+      selectDepts: [],
       form: {
         roles: [
           {
@@ -302,7 +322,7 @@ export default {
         phonePrefix: "+86",
         roleIds: [2],
       },
-      depts: null,
+      depts: [],
       roles: [],
       roleDatas: [],
       userRoles: [],
@@ -331,7 +351,6 @@ export default {
       }
     },
     create() {
-      this.depts = null;
       this.formType = "add";
       this.form = Object.assign({}, this.defaultForm);
     },
@@ -342,7 +361,8 @@ export default {
         this.create();
         return;
       }
-      this.depts = null;
+      const { deptId:id, deptName:label }  = row.dept;
+      this.selectDepts = [{id, label}]
       this.formType = "modify";
       this.dialogVisible = true;
       this.form = Object.assign({}, row);
@@ -354,59 +374,54 @@ export default {
       if (!this.form.phonePrefix) {
         this.form.phonePrefix = '+86';
       }
-      this.initDeptTree();
     },
     initRoles() {
       allRoles().then((res) => {
         this.roles = res.data;
       });
     },
-    initDeptTree() {
+    handleNodeClick({ id, label }) {
-      treeByDeptId(this.form.deptId || 0).then((res) => {
+      const [ dept ] = this.selectDepts;
-        const results = res.data.map((node) => {
+      if (!dept || dept.id !== id) {
-          if (node.hasChildren && !node.children) {
+        this.selectDepts = [{ id, label }];
-            node.children = null;
+        this.form.deptId = id
-            // delete node.children
+        return
-          }
-          return node;
-        });
-        this.depts = results;
-      });
-    },
-    // 获取弹窗内部门数据
-    loadDepts({ action, parentNode, callback }) {
-      if (action === "LOAD_ROOT_OPTIONS" && !this.form.deptId) {
-        const _self = this;
-        treeByDeptId(0).then((res) => {
-          const results = res.data.map((node) => {
-            if (node.hasChildren && !node.children) {
-              node.children = null;
-            }
-            return node;
-          });
-          _self.depts = results;
-          callback();
-        });
       }
 
-      if (action === "LOAD_CHILDREN_OPTIONS") {
+      if (dept.id === id) {
-        const _self = this;
+        this.selectDepts = [];
-        getDeptTree(parentNode.id).then((res) => {
+        this.form.deptId = null
-          parentNode.children = res.data.map(function (obj) {
-            return _self.normalizer(obj);
-          });
-          callback();
-        });
       }
     },
-    normalizer(node) {
+    // 获取弹窗内部门数据
-      if (node.hasChildren) {
+    treeByDeptId() {
-        node.children = null;
+      treeByDeptId(0).then((res) => {
+        this.depts =  (res.data || []).map(ele =>  {
+        return {
+            ...ele,
+            leaf: !ele.hasChildren,
           }
+        })
+      });
+    },
+      loadNode(node, resolve) {
+      if (!this.depts.length) {
+        this.treeByDeptId();
+        return;
+      }
+      getDeptTree(node.data.id).then((res) => {
+        resolve(
+          res.data.map((dept) => {
+            return this.normalizer(dept);
+          })
+        );
+      });
+    },
+    normalizer(node) {
       return {
         id: node.deptId,
         label: node.name,
-        children: node.children,
+        leaf: !node.hasChildren,
       };
     },
     deleteTag(value) {
@@ -428,6 +443,7 @@ export default {
       );
     },
     reset() {
+      this.depts = [];
       this.$refs.createUserForm.resetFields();
       this.dialogVisible = false;
     },
@@ -446,21 +462,6 @@ export default {
         }
       });
     },
-    filterData(instanceId) {
-      this.$refs.roleSelect &&
-        this.$refs.roleSelect.blur &&
-        this.$refs.roleSelect.blur();
-      if (!this.depts) {
-        return;
-      }
-      const results = this.depts.map((node) => {
-        if (node.hasChildren) {
-          node.children = null;
-        }
-        return node;
-      });
-      this.depts = results;
-    },
     onCopy(e) {
       this.$success(this.$t("commons.copy_success"));
     },
@@ -571,8 +572,22 @@ export default {
   .form-gender-select {
     width: 100%;
   }
-
-  .btn {
 }
+
+</style>
+<style lang="scss">
+.tree-select {
+  display: none !important;
+}
+.user-popper {
+  background: transparent;
+  padding: 0;
+  .popper__arrow {
+    display: none;
+  }
+}
+.user-popper.dept {
+  height: 300px;
+  overflow: auto;
 }
 </style>