diff --git a/backend/src/main/resources/db/migration/V18__area_mapping.sql b/backend/src/main/resources/db/migration/V18__area_mapping.sql
index 6e114370af..f6f04ae661 100644
--- a/backend/src/main/resources/db/migration/V18__area_mapping.sql
+++ b/backend/src/main/resources/db/migration/V18__area_mapping.sql
@@ -2945,22 +2945,6 @@ SET FOREIGN_KEY_CHECKS = 1;
 ALTER TABLE `dataset_table_field` MODIFY COLUMN `origin_name` LONGTEXT;
 
 
-/*
- Navicat Premium Data Transfer
-
- Source Server         : local
- Source Server Type    : MySQL
- Source Server Version : 50730
- Source Host           : 127.0.0.1:3306
- Source Schema         : dataease
-
- Target Server Type    : MySQL
- Target Server Version : 50730
- File Encoding         : 65001
-
- Date: 29/07/2021 11:55:10
-*/
-
 SET NAMES utf8mb4;
 SET FOREIGN_KEY_CHECKS = 0;
 
@@ -2984,17 +2968,113 @@ CREATE TABLE `dataset_table_function` (
 BEGIN;
 INSERT INTO `dataset_table_function` VALUES (1, 'ABS', 'ABS(x)', 'mysql', 2, '返回x的绝对值');
 INSERT INTO `dataset_table_function` VALUES (2, 'PI', 'PI()', 'mysql', 2, '返回圆周率π，默认显示6位小数');
-INSERT INTO `dataset_table_function` VALUES (3, 'CHAR_LENGTH', 'CHAR_LENGTH(str)', 'mysql', 4, '计算字符串字符个数');
-INSERT INTO `dataset_table_function` VALUES (4, 'TRIM', 'TRIM(s)', 'mysql', 4, '返回字符串s删除了两边空格之后的字符串');
-INSERT INTO `dataset_table_function` VALUES (5, 'REPLACE', 'REPLACE(s,s1,s2)', 'mysql', 4, '返回一个字符串，用字符串s2替代字符串s中所有的字符串s1');
-INSERT INTO `dataset_table_function` VALUES (6, 'SUBSTRING', 'SUBSTRING(s,n,len)', 'mysql', 4, '获取从字符串s中的第n个位置开始长度为len的字符串');
-INSERT INTO `dataset_table_function` VALUES (7, 'IF', 'IF(expr,v1,v2)', 'mysql', 5, '如果expr是TRUE则返回v1，否则返回v2');
-INSERT INTO `dataset_table_function` VALUES (8, 'IFNULL', 'IFNULL(v1,v2)', 'mysql', 5, '如果v1不为NULL，则返回v1，否则返回v2');
-INSERT INTO `dataset_table_function` VALUES (9, 'FLOOR', 'FLOOR(x)', 'mysql', 2, '返回不大于x的最大整数');
-INSERT INTO `dataset_table_function` VALUES (10, 'ROUND', 'ROUND(x)', 'mysql', 2, '返回离x最近的整数');
-INSERT INTO `dataset_table_function` VALUES (11, 'ROUND', 'ROUND(x,y)', 'mysql', 2, '保留x小数点后y位的值，但截断时要进行四舍五入');
-INSERT INTO `dataset_table_function` VALUES (12, 'ABS', 'ABS(x)', 'doris', 2, '返回x的绝对值');
-INSERT INTO `dataset_table_function` VALUES (13, 'SUBSTR', 'SUBSTR(char, position, substring_length)', 'oracle', 4, '获取从字符串char中的第position个位置开始长度为substring_lenght的字符串');
+INSERT INTO `dataset_table_function` VALUES (3, 'SQRT', 'SQRT(x)', 'mysql', 2, '返回非负数的x的二次方根');
+INSERT INTO `dataset_table_function` VALUES (4, 'MOD', 'MOD(x,y)', 'mysql', 2, '返回x被y除后的余数');
+INSERT INTO `dataset_table_function` VALUES (5, 'CEIL', 'CEIL(x)', 'mysql', 2, '返回不小于x的最小整数');
+INSERT INTO `dataset_table_function` VALUES (6, 'FLOOR', 'FLOOR(x)', 'mysql', 2, '返回不大于x的最大整数');
+INSERT INTO `dataset_table_function` VALUES (7, 'ROUND', 'ROUND(x)', 'mysql', 2, '返回离x最近的整数');
+INSERT INTO `dataset_table_function` VALUES (8, 'ROUND', 'ROUND(x,y)', 'mysql', 2, '保留x小数点后y位的值，但截断时要进行四舍五入');
+INSERT INTO `dataset_table_function` VALUES (9, 'SIGN', 'SIGN(x)', 'mysql', 2, '返回参数x的符号，-1表示负数，0表示0，1表示正数');
+INSERT INTO `dataset_table_function` VALUES (10, 'POW', 'POW(x,y)', 'mysql', 2, '返回x的y次乘方的值');
+INSERT INTO `dataset_table_function` VALUES (11, 'EXP', 'EXP(x)', 'mysql', 2, '返回e的x乘方后的值');
+INSERT INTO `dataset_table_function` VALUES (12, 'LOG', 'LOG(x)', 'mysql', 2, '返回x的自然对数，x相对于基数e的对数');
+INSERT INTO `dataset_table_function` VALUES (13, 'LOG10', 'LOG10(x)', 'mysql', 2, '返回x的基数为10的对数');
+INSERT INTO `dataset_table_function` VALUES (14, 'RADIANS', 'RADIANS(x)', 'mysql', 2, '返回x由角度转化为弧度的值');
+INSERT INTO `dataset_table_function` VALUES (15, 'DEGREES', 'DEGREES(x)', 'mysql', 2, '返回x由弧度转化为角度的值');
+INSERT INTO `dataset_table_function` VALUES (16, 'SIN', 'SIN(x)', 'mysql', 2, '返回x的正弦，其中x为给定的弧度值');
+INSERT INTO `dataset_table_function` VALUES (17, 'ASIN', 'ASIN(x)', 'mysql', 2, '返回x的反正弦值');
+INSERT INTO `dataset_table_function` VALUES (18, 'COS', 'COS(x)', 'mysql', 2, '返回x的余弦，其中x为给定的弧度值');
+INSERT INTO `dataset_table_function` VALUES (19, 'ACOS', 'ACOS(x)', 'mysql', 2, '返回x的反余弦值');
+INSERT INTO `dataset_table_function` VALUES (20, 'TAN', 'TAN(x)', 'mysql', 2, '返回x的正切，其中x为给定的弧度值');
+INSERT INTO `dataset_table_function` VALUES (21, 'ATAN', 'ATAN(x)', 'mysql', 2, '返回x的反正切值');
+INSERT INTO `dataset_table_function` VALUES (22, 'COT', 'COT(x)', 'mysql', 2, '返回给定弧度值x的余切');
+INSERT INTO `dataset_table_function` VALUES (23, 'CHAR_LENGTH', 'CHAR_LENGTH(str)', 'mysql', 4, '计算字符串字符个数');
+INSERT INTO `dataset_table_function` VALUES (24, 'TRIM', 'TRIM(s)', 'mysql', 4, '返回字符串s删除了两边空格之后的字符串');
+INSERT INTO `dataset_table_function` VALUES (25, 'LTRIM', 'LTRIM(s)', 'mysql', 4, '返回字符串s，其左边所有空格被删除');
+INSERT INTO `dataset_table_function` VALUES (26, 'RTRIM', 'RTRIM(s)', 'mysql', 4, '返回字符串s，其右边所有空格被删除');
+INSERT INTO `dataset_table_function` VALUES (27, 'REPLACE', 'REPLACE(s,s1,s2)', 'mysql', 4, '返回一个字符串，用字符串s2替代字符串s中所有的字符串s1');
+INSERT INTO `dataset_table_function` VALUES (28, 'SUBSTRING', 'SUBSTRING(s,n,len)', 'mysql', 4, '获取从字符串s中的第n个位置开始长度为len的字符串');
+INSERT INTO `dataset_table_function` VALUES (29, 'CONCAT', 'CONCAT(s1,s2，...)', 'mysql', 4, '返回连接参数产生的字符串，一个或多个待拼接的内容，任意一个为NULL则返回值为NULL');
+INSERT INTO `dataset_table_function` VALUES (30, 'INSERT', 'INSERT(s1,x,len,s2)', 'mysql', 4, '返回字符串s1，其子字符串起始于位置x，被字符串s2取代len个字符');
+INSERT INTO `dataset_table_function` VALUES (31, 'LOWER', 'LOWER(str)', 'mysql', 4, '将str中的字母全部转换成小写');
+INSERT INTO `dataset_table_function` VALUES (32, 'UPPER', 'UPPER(str)', 'mysql', 4, '将字符串中的字母全部转换成大写');
+INSERT INTO `dataset_table_function` VALUES (33, 'LEFT', 'LEFT(s,n)', 'mysql', 4, '返回字符串s从最左边开始的n个字符');
+INSERT INTO `dataset_table_function` VALUES (34, 'RIGHT', 'RIGHT(s,n)', 'mysql', 4, '返回字符串s从最右边开始的n个字符');
+INSERT INTO `dataset_table_function` VALUES (35, 'REPEAT', 'REPEAT(s,n)', 'mysql', 4, '返回一个由重复字符串s组成的字符串，字符串s的数目等于n');
+INSERT INTO `dataset_table_function` VALUES (36, 'SPACE', 'SPACE(n)', 'mysql', 4, '返回一个由n个空格组成的字符串');
+INSERT INTO `dataset_table_function` VALUES (37, 'REVERSE', 'REVERSE(s)', 'mysql', 4, '将字符串s反转');
+INSERT INTO `dataset_table_function` VALUES (38, 'CURDATE', 'CURDATE()', 'mysql', 3, '将当前日期按照\"YYYY-MM-DD\"或者\"YYYYMMDD\"格式的值返回，具体格式根据函数用在字符串或是数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (39, 'CURRENT_DATE', 'CURRENT_DATE()', 'mysql', 3, '将当前日期按照\"YYYY-MM-DD\"或者\"YYYYMMDD\"格式的值返回，具体格式根据函数用在字符串或是数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (40, 'NOW', 'NOW()', 'mysql', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (41, 'SYSDATE', 'SYSDATE()', 'mysql', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (42, 'LOCALTIME', 'LOCALTIME()', 'mysql', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (43, 'CURRENT_TIMESTAMP', 'CURRENT_TIMESTAMP()', 'mysql', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (44, 'UNIX_TIMESTAMP', 'UNIX_TIMESTAMP()', 'mysql', 3, '返回一个格林尼治标准时间1970-01-01 00:00:00到现在的秒数');
+INSERT INTO `dataset_table_function` VALUES (45, 'UNIX_TIMESTAMP', 'UNIX_TIMESTAMP(date)', 'mysql', 3, '返回一个格林尼治标准时间1970-01-01 00:00:00到指定时间的秒数');
+INSERT INTO `dataset_table_function` VALUES (46, 'FROM_UNIXTIME', 'FROM_UNIXTIME(date)', 'mysql', 3, '把UNIX时间戳转换为普通格式的时间');
+INSERT INTO `dataset_table_function` VALUES (47, 'CASE', 'CASE expr WHEN v1 THEN r1 [WHEN v2 THEN v2] [ELSE rn] END', 'mysql', 3, '如果expr等于某个vn，则返回对应位置THEN后面的结果，如果与所有值都不想等，则返回ELSE后面的rn');
+INSERT INTO `dataset_table_function` VALUES (48, 'IF', 'IF(expr,v1,v2)', 'mysql', 5, '如果expr是TRUE则返回v1，否则返回v2');
+INSERT INTO `dataset_table_function` VALUES (49, 'IFNULL', 'IFNULL(v1,v2)', 'mysql', 5, '如果v1不为NULL，则返回v1，否则返回v2');
+INSERT INTO `dataset_table_function` VALUES (50, 'ABS', 'ABS(x)', 'doris', 2, '返回x的绝对值');
+INSERT INTO `dataset_table_function` VALUES (51, 'PI', 'PI()', 'doris', 2, '返回圆周率π，默认显示6位小数');
+INSERT INTO `dataset_table_function` VALUES (52, 'SQRT', 'SQRT(x)', 'doris', 2, '返回非负数的x的二次方根');
+INSERT INTO `dataset_table_function` VALUES (53, 'MOD', 'MOD(x,y)', 'doris', 2, '返回x被y除后的余数');
+INSERT INTO `dataset_table_function` VALUES (54, 'CEIL', 'CEIL(x)', 'doris', 2, '返回不小于x的最小整数');
+INSERT INTO `dataset_table_function` VALUES (55, 'FLOOR', 'FLOOR(x)', 'doris', 2, '返回不大于x的最大整数');
+INSERT INTO `dataset_table_function` VALUES (56, 'ROUND', 'ROUND(x)', 'doris', 2, '返回离x最近的整数');
+INSERT INTO `dataset_table_function` VALUES (57, 'ROUND', 'ROUND(x,y)', 'doris', 2, '保留x小数点后y位的值，但截断时要进行四舍五入');
+INSERT INTO `dataset_table_function` VALUES (58, 'SIGN', 'SIGN(x)', 'doris', 2, '返回参数x的符号，-1表示负数，0表示0，1表示正数');
+INSERT INTO `dataset_table_function` VALUES (59, 'POW', 'POW(x,y)', 'doris', 2, '返回x的y次乘方的值');
+INSERT INTO `dataset_table_function` VALUES (60, 'EXP', 'EXP(x)', 'doris', 2, '返回e的x乘方后的值');
+INSERT INTO `dataset_table_function` VALUES (61, 'LOG', 'LOG(x)', 'doris', 2, '返回x的自然对数，x相对于基数e的对数');
+INSERT INTO `dataset_table_function` VALUES (62, 'LOG10', 'LOG10(x)', 'doris', 2, '返回x的基数为10的对数');
+INSERT INTO `dataset_table_function` VALUES (63, 'RADIANS', 'RADIANS(x)', 'doris', 2, '返回x由角度转化为弧度的值');
+INSERT INTO `dataset_table_function` VALUES (64, 'DEGREES', 'DEGREES(x)', 'doris', 2, '返回x由弧度转化为角度的值');
+INSERT INTO `dataset_table_function` VALUES (65, 'SIN', 'SIN(x)', 'doris', 2, '返回x的正弦，其中x为给定的弧度值');
+INSERT INTO `dataset_table_function` VALUES (66, 'ASIN', 'ASIN(x)', 'doris', 2, '返回x的反正弦值');
+INSERT INTO `dataset_table_function` VALUES (67, 'COS', 'COS(x)', 'doris', 2, '返回x的余弦，其中x为给定的弧度值');
+INSERT INTO `dataset_table_function` VALUES (68, 'ACOS', 'ACOS(x)', 'doris', 2, '返回x的反余弦值');
+INSERT INTO `dataset_table_function` VALUES (69, 'TAN', 'TAN(x)', 'doris', 2, '返回x的正切，其中x为给定的弧度值');
+INSERT INTO `dataset_table_function` VALUES (70, 'ATAN', 'ATAN(x)', 'doris', 2, '返回x的反正切值');
+INSERT INTO `dataset_table_function` VALUES (71, 'COT', 'COT(x)', 'doris', 2, '返回给定弧度值x的余切');
+INSERT INTO `dataset_table_function` VALUES (72, 'CHAR_LENGTH', 'CHAR_LENGTH(str)', 'doris', 4, '计算字符串字符个数');
+INSERT INTO `dataset_table_function` VALUES (73, 'TRIM', 'TRIM(s)', 'doris', 4, '返回字符串s删除了两边空格之后的字符串');
+INSERT INTO `dataset_table_function` VALUES (74, 'LTRIM', 'LTRIM(s)', 'doris', 4, '返回字符串s，其左边所有空格被删除');
+INSERT INTO `dataset_table_function` VALUES (75, 'RTRIM', 'RTRIM(s)', 'doris', 4, '返回字符串s，其右边所有空格被删除');
+INSERT INTO `dataset_table_function` VALUES (76, 'REPLACE', 'REPLACE(s,s1,s2)', 'doris', 4, '返回一个字符串，用字符串s2替代字符串s中所有的字符串s1');
+INSERT INTO `dataset_table_function` VALUES (77, 'SUBSTRING', 'SUBSTRING(s,n,len)', 'doris', 4, '获取从字符串s中的第n个位置开始长度为len的字符串');
+INSERT INTO `dataset_table_function` VALUES (78, 'CONCAT', 'CONCAT(s1,s2，...)', 'doris', 4, '返回连接参数产生的字符串，一个或多个待拼接的内容，任意一个为NULL则返回值为NULL');
+INSERT INTO `dataset_table_function` VALUES (79, 'INSERT', 'INSERT(s1,x,len,s2)', 'doris', 4, '返回字符串s1，其子字符串起始于位置x，被字符串s2取代len个字符');
+INSERT INTO `dataset_table_function` VALUES (80, 'LOWER', 'LOWER(str)', 'doris', 4, '将str中的字母全部转换成小写');
+INSERT INTO `dataset_table_function` VALUES (81, 'UPPER', 'UPPER(str)', 'doris', 4, '将字符串中的字母全部转换成大写');
+INSERT INTO `dataset_table_function` VALUES (82, 'LEFT', 'LEFT(s,n)', 'doris', 4, '返回字符串s从最左边开始的n个字符');
+INSERT INTO `dataset_table_function` VALUES (83, 'RIGHT', 'RIGHT(s,n)', 'doris', 4, '返回字符串s从最右边开始的n个字符');
+INSERT INTO `dataset_table_function` VALUES (84, 'REPEAT', 'REPEAT(s,n)', 'doris', 4, '返回一个由重复字符串s组成的字符串，字符串s的数目等于n');
+INSERT INTO `dataset_table_function` VALUES (85, 'SPACE', 'SPACE(n)', 'doris', 4, '返回一个由n个空格组成的字符串');
+INSERT INTO `dataset_table_function` VALUES (86, 'REVERSE', 'REVERSE(s)', 'doris', 4, '将字符串s反转');
+INSERT INTO `dataset_table_function` VALUES (87, 'CURDATE', 'CURDATE()', 'doris', 3, '将当前日期按照\"YYYY-MM-DD\"或者\"YYYYMMDD\"格式的值返回，具体格式根据函数用在字符串或是数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (88, 'CURRENT_DATE', 'CURRENT_DATE()', 'doris', 3, '将当前日期按照\"YYYY-MM-DD\"或者\"YYYYMMDD\"格式的值返回，具体格式根据函数用在字符串或是数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (89, 'NOW', 'NOW()', 'doris', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (90, 'SYSDATE', 'SYSDATE()', 'doris', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (91, 'LOCALTIME', 'LOCALTIME()', 'doris', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (92, 'CURRENT_TIMESTAMP', 'CURRENT_TIMESTAMP()', 'doris', 3, '返回当前日期和时间值，格式为\"YYYY_MM-DD HH:MM:SS\"或\"YYYYMMDDHHMMSS\"，具体格式根据函数用在字符串或数字语境中而定');
+INSERT INTO `dataset_table_function` VALUES (93, 'UNIX_TIMESTAMP', 'UNIX_TIMESTAMP()', 'doris', 3, '返回一个格林尼治标准时间1970-01-01 00:00:00到现在的秒数');
+INSERT INTO `dataset_table_function` VALUES (94, 'UNIX_TIMESTAMP', 'UNIX_TIMESTAMP(date)', 'doris', 3, '返回一个格林尼治标准时间1970-01-01 00:00:00到指定时间的秒数');
+INSERT INTO `dataset_table_function` VALUES (95, 'FROM_UNIXTIME', 'FROM_UNIXTIME(date)', 'doris', 3, '把UNIX时间戳转换为普通格式的时间');
+INSERT INTO `dataset_table_function` VALUES (96, 'CASE', 'CASE expr WHEN v1 THEN r1 [WHEN v2 THEN v2] [ELSE rn] END', 'doris', 3, '如果expr等于某个vn，则返回对应位置THEN后面的结果，如果与所有值都不想等，则返回ELSE后面的rn');
+INSERT INTO `dataset_table_function` VALUES (97, 'IF', 'IF(expr,v1,v2)', 'doris', 5, '如果expr是TRUE则返回v1，否则返回v2');
+INSERT INTO `dataset_table_function` VALUES (98, 'IFNULL', 'IFNULL(v1,v2)', 'doris', 5, '如果v1不为NULL，则返回v1，否则返回v2');
+INSERT INTO `dataset_table_function` VALUES (99, 'SUBSTR', 'SUBSTR(char, position, substring_length)', 'oracle', 4, '获取从字符串char中的第position个位置开始长度为substring_lenght的字符串');
+INSERT INTO `dataset_table_function` VALUES (100, 'REPLACE', 'REPLACE(X,old,new)', 'oracle', 4, '在X中查找old，并替换成new');
+INSERT INTO `dataset_table_function` VALUES (101, 'TRIM', 'TRIM([TRIM_STR  FROM]X)', 'oracle', 4, '把X的两边截去trim_str字符串，缺省截去空格');
+INSERT INTO `dataset_table_function` VALUES (102, 'LOWER', 'LOWER(X)', 'oracle', 4, 'X转换成小写');
+INSERT INTO `dataset_table_function` VALUES (103, 'UPPER', 'UPPER(X)', 'oracle', 4, 'X转换成大写');
+INSERT INTO `dataset_table_function` VALUES (104, 'LENGTH', 'LENGTH(X)', 'oracle', 4, '返回X的长度');
+INSERT INTO `dataset_table_function` VALUES (105, 'ABS', 'ABS(value)', 'oracle', 2, '返回value的绝对值');
+INSERT INTO `dataset_table_function` VALUES (106, 'CEIL', 'CEIL(value)', 'oracle', 2, '返回大于等于value的最小整数');
+INSERT INTO `dataset_table_function` VALUES (107, 'FLOOR', 'FLOOR(value)', 'oracle', 2, '返回小于等于value的最大整数');
+INSERT INTO `dataset_table_function` VALUES (108, 'ROUND', 'ROUND(value,n)', 'oracle', 2, '对value进行四舍五入，保存小数点右侧的n位。如果n省略的话，相当于n=0的情况');
 COMMIT;
 
 SET FOREIGN_KEY_CHECKS = 1;
+
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index fd39afd240..7b39cf585a 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -4,7 +4,9 @@
     :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     class="component"
     @click="handleClick"
+    @mousedown="elementMouseDown"
   >
+    <edit-bar v-if="config === curComponent" @showViewDetails="showViewDetails" />
     <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"
@@ -16,6 +18,7 @@
     />
 
     <component
+      ref="wrapperChild"
       :is="config.component"
       v-else
       :out-style="config.style"
@@ -33,8 +36,10 @@ import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'
 import { mapState } from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
+import EditBar from '@/components/canvas/components/Editor/EditBar'
+
 export default {
-  components: { DeOutWidget },
+  components: { DeOutWidget, EditBar },
   mixins: [mixins],
   props: {
     config: {
@@ -60,7 +65,8 @@ export default {
   },
   computed: {
     ...mapState([
-      'canvasStyleData'
+      'canvasStyleData',
+      'curComponent'
     ])
   },
   mounted() {
@@ -94,6 +100,20 @@ export default {
       Object.keys(events).forEach(event => {
         this[event](events[event])
       })
+    },
+    elementMouseDown(e) {
+      debugger
+      // private 设置当前组件数据及状态
+      this.$store.commit('setClickComponentStatus', true)
+      if (this.config.component !== 'v-text' && this.config.component !== 'rect-shape' && this.config.component !== 'de-input-search' && this.config.component !== 'de-number-range') {
+        e.preventDefault()
+      }
+      // 阻止冒泡事件
+      e.stopPropagation()
+      this.$store.commit('setCurComponent', { component: this.config, index: this.index })
+    },
+    showViewDetails(){
+      this.$refs.wrapperChild.openChartDetailsDialog();
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
new file mode 100644
index 0000000000..872b0cfc6b
--- /dev/null
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="bar-main">
+    <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+    <i v-if="activeModel==='edit'" class="icon iconfont icon-shezhi" @click.stop="showViewDetails" />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import eventBus from '@/components/canvas/utils/eventBus'
+
+export default {
+
+  props: {
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 当前模式 preview 预览 edit 编辑，
+    activeModel: {
+      type: String,
+      required: false,
+      default: 'preview'
+    }
+  },
+  data() {
+    return {
+      componentType: null,
+      editFilter: [
+        'view',
+        'custom'
+      ]
+    }
+  },
+  computed: mapState([
+    'menuTop',
+    'menuLeft',
+    'menuShow',
+    'curComponent',
+    'componentData',
+    'canvasStyleData'
+  ]),
+  methods: {
+    showViewDetails() {
+      this.$emit('showViewDetails')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .bar-main{
+    position: absolute;
+    right: 0px;
+    float:right;
+    z-index: 2;
+    border-radius:2px;
+    padding-left: 5px;
+    padding-right: 2px;
+    cursor:pointer!important;
+    background-color: #0a7be0;
+  }
+  .bar-main i{
+    color: white;
+    float: right;
+    margin-right: 3px;
+  }
+
+</style>
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 5b8fcbd1c9..9b6728fbf5 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="canvasInfoTemp" :style="customStyle" class="bg">
+  <div id="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
     <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
       {{ $t('panel.panelNull') }}
     </el-row>
@@ -121,6 +121,8 @@ export default {
       return this.componentDataShow
     },
     ...mapState([
+      'isClickComponent',
+      'curComponent',
       'componentData',
       'canvasStyleData'
     ])
@@ -204,6 +206,17 @@ export default {
     },
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
+    },
+    deselectCurComponent(e) {
+      debugger
+      if (!this.isClickComponent) {
+        this.$store.commit('setCurComponent', { component: null, index: null })
+      }
+    },
+    handleMouseDown() {
+      // console.log('handleMouseDown123')
+
+      this.$store.commit('setClickComponentStatus', false)
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index b647626b30..e3ba326800 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -275,6 +275,7 @@ export default {
         // 第一次变化 不需要 重置边界 待改进
         if (this.changeIndex++ > 0) {
           this.resizeParentBounds()
+          this.$store.state.styleChangeTimes++
         }
         // this.changeScale()
       },
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 1b1efa03dc..00cf67d92c 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -8,7 +8,7 @@
       'rect-shape'
     ]"
   >
-    <i v-if="requestStatus==='success'" style="right:25px;position: absolute;z-index: 2" class="icon iconfont icon-fangda" @click.stop="openChartDetailsDialog" />
+    <!--    <i v-if="requestStatus==='success'" style="right:25px;position: absolute;z-index: 2" class="icon iconfont icon-fangda" @click.stop="openChartDetailsDialog" />-->
     <div v-if="requestStatus==='error'" class="chart-error-class">
       <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
         {{ message }},{{ $t('chart.chart_show_error') }}
@@ -66,6 +66,10 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    componentIndex: {
+      type: Number,
+      required: false
     }
   },
   data() {
@@ -128,7 +132,6 @@ export default {
     this.getData(this.element.propValue.viewId)
   },
   mounted() {
-
   },
   methods: {
     mergeStyle() {
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index d69856e896..f679a7883e 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -127,7 +127,7 @@ export default {
     tokenError: 'Token error, please login again',
     username_error: 'Please enter the correct ID',
     password_error: 'The password can not be less than 8 digits',
-    re_login: 'Login again'
+    login_again: 'Login again'
   },
   commons: {
     no_target_permission: 'No permission',
@@ -334,7 +334,9 @@ export default {
     input_pwd: 'Please input password',
     message_box: {
       alert: 'Alert',
-      confirm: 'Confirm'
+      confirm: 'Confirm',
+      ok: 'Confirm',
+      cancel: 'Cancel'
     }
   },
   documentation: {
@@ -752,7 +754,6 @@ export default {
     chart_funnel: 'Funnel',
     chart_radar: 'Radar',
     chart_gauge: 'Gauge',
-    chart_map: 'Map',
     dateStyle: 'Date Style',
     datePattern: 'Date Format',
     y: 'Year',
@@ -821,11 +822,6 @@ export default {
     drag_block_funnel_split: 'Funnel Split',
     drag_block_radar_length: 'Branch Length',
     drag_block_radar_label: 'Branch Label',
-    stack_item: 'Stack Item',
-    map_range: 'Map range',
-    select_map_range: 'Please select map range',
-    area: 'Area',
-    placeholder_field: 'Drag Field To Here',
     axis_label_rotate: 'Label Rotate'
   },
   dataset: {
@@ -980,19 +976,7 @@ export default {
     right_join: 'RIGHT JOIN',
     inner_join: 'INNER JOIN',
     full_join: 'FULL JOIN',
-    can_not_union_diff_datasource: 'Union dataset must have same data source',
-    operator: 'Operator',
-    d_q_trans: 'Dimension/Quota Transform',
-    add_calc_field: 'Create calc field',
-    input_name: 'Please input name',
-    field_exp: 'Field Expression',
-    data_type: 'Data Type',
-    click_ref_field: 'Click Quote Field',
-    click_ref_function: 'Click Quote Function',
-    field_manage: 'Field Manage',
-    edit_calc_field: 'Edit calc field',
-    calc_field: 'Calc Field',
-    show_sql: 'Show SQL'
+    can_not_union_diff_datasource: 'Union dataset must have same data source'
   },
   datasource: {
     datasource: 'Data Source',
@@ -1306,54 +1290,5 @@ export default {
     i18n_msg_type_dataset_sync_faild: 'Dataset synchronization failed',
     i18n_msg_type_all: 'All type',
     channel_inner_msg: 'On site news'
-  },
-  denumberrange: {
-    label: 'Number range',
-    split_placeholder: 'To',
-    please_key_min: 'Please key min value',
-    please_key_max: 'Please key max value',
-    out_of_min: 'The min value cannot be less than the min integer -2³²',
-    out_of_max: 'The max value cannot be more than the max integer 2³²-1',
-    must_int: 'Please key interger',
-    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'
-  },
-  denumberselect: {
-    label: 'Number selector',
-    placeholder: 'Please select'
-  },
-  deinputsearch: {
-    label: 'Text search',
-    placeholder: 'Please key keyword'
-  },
-  detextselect: {
-    label: 'Text selector',
-    placeholder: 'Please select'
-  },
-  detextgridselect: {
-    label: 'Text list',
-    placeholder: 'Please select'
-  },
-  denumbergridselect: {
-    label: 'Number list',
-    placeholder: 'Please select'
-  },
-  dedaterange: {
-    label: 'Date range',
-    to_placeholder: 'End date',
-    from_placeholder: 'Start date',
-    split_placeholder: 'To'
-  },
-  dedate: {
-    label: 'Date',
-    placeholder: 'Please select date'
-  },
-  deyearmonth: {
-    label: 'Month',
-    placeholder: 'Please select month'
-  },
-  deyear: {
-    label: 'Year',
-    placeholder: 'Please select year'
   }
 }
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 21a06c5527..3c57b6c6b2 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -109,25 +109,25 @@ export default {
   navbar: {
     dashboard: '首頁',
     github: '項目地址',
-    logOut: '退出登陸',
+    logOut: '退出登錄',
     profile: '個人中心',
     theme: '換膚',
     size: '佈局大小'
   },
   login: {
-    title: '系統登陸',
+    title: '系統登錄',
     welcome: '歡迎使用',
-    logIn: '登陸',
+    logIn: '登錄',
     username: '帳號',
     password: '密碼',
     any: '任意字符',
-    thirdparty: '第三方登陸',
+    thirdparty: '第三方登錄',
     thirdpartyTips: '本地不能模擬，請結合自己業務進行模擬！！！',
-    expires: '登陸信息過期，請重新登陸',
-    tokenError: '信息錯誤，請重新登陸',
+    expires: '登錄信息過期，請重新登錄',
+    tokenError: '信息錯誤，請重新登錄',
     username_error: '請輸入正確的 ID',
     password_error: '密碼不小於 8 位',
-    re_login: '重新登陸'
+    login_again: '重新登錄'
   },
   commons: {
     no_target_permission: '沒有權限',
@@ -184,7 +184,7 @@ export default {
     prompt: '提示',
     operating: '操作',
     input_limit: '長度在 {0} 到 {1} 個字符',
-    login: '登陸',
+    login: '登錄',
     welcome: '一站式開源數據分析平臺',
     username: '姓名',
     password: '密碼',
@@ -256,7 +256,7 @@ export default {
     remove: '移除',
     remove_cancel: '移除取消',
     remove_success: '移除成功',
-    tips: '認證信息已過期，請重新登陸',
+    tips: '認證信息已過期，請重新登錄',
     not_performed_yet: '尚未執行',
     incorrect_input: '輸入內容不正確',
     delete_confirm: '請輸入以下內容，確認刪除：',
@@ -334,7 +334,9 @@ export default {
     input_pwd: '請輸入密碼',
     message_box: {
       alert: '警告',
-      confirm: '確認'
+      confirm: '確認',
+      ok: '確認',
+      cancel: '取消'
     }
   },
   documentation: {
@@ -752,7 +754,6 @@ export default {
     chart_funnel: '漏鬥圖',
     chart_radar: '雷達圖',
     chart_gauge: '儀表盤',
-    chart_map: '地圖',
     dateStyle: '日期顯示',
     datePattern: '日期格式',
     y: '年',
@@ -821,11 +822,6 @@ export default {
     drag_block_funnel_split: '漏鬥分層',
     drag_block_radar_length: '分支長度',
     drag_block_radar_label: '分支標簽',
-    map_range: '地圖範圍',
-    select_map_range: '請選擇地圖範圍',
-    area: '地區',
-    stack_item: '堆疊項',
-    placeholder_field: '拖動字段至此處',
     axis_label_rotate: '標簽角度'
   },
   dataset: {
@@ -980,19 +976,7 @@ export default {
     right_join: '右連接',
     inner_join: '內連接',
     full_join: '全連接',
-    can_not_union_diff_datasource: '被關聯數據集必須與當前數據集的數據源一致',
-    operator: '操作',
-    d_q_trans: '維度/指標轉換',
-    add_calc_field: '新建计算字段',
-    input_name: '請輸入名稱',
-    field_exp: '字段表達式',
-    data_type: '數據類型',
-    click_ref_field: '點擊引用字段',
-    click_ref_function: '點擊引用函數',
-    field_manage: '字段管理',
-    edit_calc_field: '編輯計算字段',
-    calc_field: '計算字段',
-    show_sql: '顯示SQL'
+    can_not_union_diff_datasource: '被關聯數據集必須與當前數據集的數據源一致'
   },
   datasource: {
     datasource: '數據源',
@@ -1145,7 +1129,7 @@ export default {
     lineHeight: '行高',
     letterSpacing: '字間距',
     textAlign: '左右對齊',
-    opacity: '不透明度',
+    opacity: '透明度',
     verticalAlign: '上下對齊',
     text_align_left: '左對齊',
     text_align_center: '左右居中',
@@ -1184,9 +1168,9 @@ export default {
   },
   display: {
     logo: '頭部系統 Logo',
-    loginLogo: '登陸頁面頭部 Logo',
-    loginImage: '登陸頁面右側圖片',
-    loginTitle: '登陸頁面標題',
+    loginLogo: '登錄頁面頭部 Logo',
+    loginImage: '登錄頁面右側圖片',
+    loginTitle: '登錄頁面標題',
     title: '系統名稱',
     advice_size: '建議圖片大小'
   },
@@ -1306,54 +1290,5 @@ export default {
     i18n_msg_type_dataset_sync_faild: '數據集同步失敗',
     i18n_msg_type_all: '全部類型',
     channel_inner_msg: '站內消息'
-  },
-  denumberrange: {
-    label: '數值區間',
-    split_placeholder: '至',
-    please_key_min: '請輸入最小值',
-    please_key_max: '請輸入最大值',
-    out_of_min: '最小值不能小于最小整數-2³²',
-    out_of_max: '最大值不能大于最大整數2³²-1',
-    must_int: '請輸入整數',
-    min_out_max: '最小值必須小于最大值',
-    max_out_min: '最大值必須大于最小值'
-  },
-  denumberselect: {
-    label: '數字下拉',
-    placeholder: '請選擇'
-  },
-  deinputsearch: {
-    label: '文本搜索',
-    placeholder: '請輸入關鍵字'
-  },
-  detextselect: {
-    label: '文本下拉',
-    placeholder: '請選擇'
-  },
-  detextgridselect: {
-    label: '文本列表',
-    placeholder: '請選擇'
-  },
-  denumbergridselect: {
-    label: '數字列表',
-    placeholder: '請選擇'
-  },
-  dedaterange: {
-    label: '日期範圍',
-    to_placeholder: '結束日期',
-    from_placeholder: '開始日期',
-    split_placeholder: '至'
-  },
-  dedate: {
-    label: '日期',
-    placeholder: '請選擇日期'
-  },
-  deyearmonth: {
-    label: '年月',
-    placeholder: '請選擇年月'
-  },
-  deyear: {
-    label: '年份',
-    placeholder: '請選擇年份'
   }
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b542905147..6d94326ab0 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -127,7 +127,7 @@ export default {
     tokenError: '登陆信息错误，请重新登录',
     username_error: '请输入正确的 ID',
     password_error: '密码不小于 8 位',
-    re_login: '重新登录'
+    login_again: '重新登录'
   },
   commons: {
     no_target_permission: '没有权限',
@@ -334,7 +334,9 @@ export default {
     input_pwd: '请输入密码',
     message_box: {
       alert: '警告',
-      confirm: '确认'
+      confirm: '确认',
+      ok: '确认',
+      cancel: '取消'
     }
   },
   documentation: {
@@ -752,7 +754,6 @@ export default {
     chart_funnel: '漏斗图',
     chart_radar: '雷达图',
     chart_gauge: '仪表盘',
-    chart_map: '地图',
     dateStyle: '日期显示',
     datePattern: '日期格式',
     y: '年',
@@ -821,11 +822,6 @@ export default {
     drag_block_funnel_split: '漏斗分层',
     drag_block_radar_length: '分支长度',
     drag_block_radar_label: '分支标签',
-    map_range: '地图范围',
-    select_map_range: '请选择地图范围',
-    area: '地区',
-    stack_item: '堆叠项',
-    placeholder_field: '拖动字段至此处',
     axis_label_rotate: '标签角度'
   },
   dataset: {
@@ -980,19 +976,7 @@ export default {
     right_join: '右连接',
     inner_join: '内连接',
     full_join: '全连接',
-    can_not_union_diff_datasource: '被关联数据集必须与当前数据集的数据源一致',
-    operator: '操作',
-    d_q_trans: '维度/指标转换',
-    add_calc_field: '新建计算字段',
-    input_name: '请输入名称',
-    field_exp: '字段表达式',
-    data_type: '数据类型',
-    click_ref_field: '点击引用字段',
-    click_ref_function: '点击引用函数',
-    field_manage: '字段管理',
-    edit_calc_field: '编辑计算字段',
-    calc_field: '计算字段',
-    show_sql: '显示SQL'
+    can_not_union_diff_datasource: '被关联数据集必须与当前数据集的数据源一致'
   },
   datasource: {
     datasource: '数据源',
@@ -1025,7 +1009,8 @@ export default {
     oracle_service_name: '服务名',
     get_schema: '获取 Schema',
     schema: '数据库 Schema',
-    please_choose_schema: '请选择数据库 Schema'
+    please_choose_schema: '请选择数据库 Schema',
+    edit_datasource_msg: '修改数据源信息，可能会导致改数据源下的数据集不可用，确认修改？'
   },
   pblink: {
     key_pwd: '请输入密码打开链接',
@@ -1146,7 +1131,7 @@ export default {
     lineHeight: '行高',
     letterSpacing: '字间距',
     textAlign: '左右对齐',
-    opacity: '不透明度',
+    opacity: '透明度',
     verticalAlign: '上下对齐',
     text_align_left: '左对齐',
     text_align_center: '左右居中',
@@ -1308,54 +1293,5 @@ export default {
     i18n_msg_type_dataset_sync_faild: '数据集同步失败',
     i18n_msg_type_all: '全部类型',
     channel_inner_msg: '站内消息'
-  },
-  denumberrange: {
-    label: '数值区间',
-    split_placeholder: '至',
-    please_key_min: '请输入最小值',
-    please_key_max: '请输入最大值',
-    out_of_min: '最小值不能小于最小整数-2³²',
-    out_of_max: '最大值不能大于最大整数2³²-1',
-    must_int: '请输入整数',
-    min_out_max: '最小值必须小于最大值',
-    max_out_min: '最大值必须大于最小值'
-  },
-  denumberselect: {
-    label: '数字下拉',
-    placeholder: '请选择'
-  },
-  deinputsearch: {
-    label: '文本搜索',
-    placeholder: '请输入关键字'
-  },
-  detextselect: {
-    label: '文本下拉',
-    placeholder: '请选择'
-  },
-  detextgridselect: {
-    label: '文本列表',
-    placeholder: '请选择'
-  },
-  denumbergridselect: {
-    label: '数字列表',
-    placeholder: '请选择'
-  },
-  dedaterange: {
-    label: '日期范围',
-    to_placeholder: '结束日期',
-    from_placeholder: '开始日期',
-    split_placeholder: '至'
-  },
-  dedate: {
-    label: '日期',
-    placeholder: '请选择日期'
-  },
-  deyearmonth: {
-    label: '年月',
-    placeholder: '请选择年月'
-  },
-  deyear: {
-    label: '年份',
-    placeholder: '请选择年份'
   }
 }
diff --git a/frontend/src/utils/message.js b/frontend/src/utils/message.js
index fd72e88a30..74f3daa4de 100644
--- a/frontend/src/utils/message.js
+++ b/frontend/src/utils/message.js
@@ -9,8 +9,8 @@ export const $alert = (message, callback, options) => {
 
 export const $confirm = (message, callback, options = {}) => {
   const defaultOptions = {
-    confirmButtonText: i18n.t('common.button.ok'),
-    cancelButtonText: i18n.t('common.button.cancel'),
+    confirmButtonText: i18n.t('commons.message_box.ok'),
+    cancelButtonText: i18n.t('commons.message_box.cancel'),
     type: 'warning',
     ...options
   }
diff --git a/frontend/src/utils/request.js b/frontend/src/utils/request.js
index 814f8d5030..23b2a1f7dd 100644
--- a/frontend/src/utils/request.js
+++ b/frontend/src/utils/request.js
@@ -16,7 +16,7 @@ const LinkTokenKey = Config.LinkTokenKey
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 10000 // request timeout
+  timeout: 20000 // request timeout
 })
 
 // request interceptor
@@ -52,10 +52,6 @@ service.interceptors.request.use(
   }
 )
 
-const defaultOptions = {
-  confirmButtonText: i18n.t('login.re_login')
-}
-
 const checkAuth = response => {
   // 请根据实际需求修改
 
@@ -66,7 +62,10 @@ const checkAuth = response => {
       store.dispatch('user/logout').then(() => {
         location.reload()
       })
-    }, defaultOptions)
+    }, {
+      confirmButtonText: i18n.t('login.login_again'),
+      showClose: false
+    })
   }
 
   if (response.headers['authentication-status'] === 'invalid') {
@@ -75,6 +74,9 @@ const checkAuth = response => {
       store.dispatch('user/logout').then(() => {
         location.reload()
       })
+    }, {
+      confirmButtonText: i18n.t('login.login_again'),
+      showClose: false
     })
   }
   // token到期后自动续命 刷新token
diff --git a/frontend/src/views/chart/chart/radar/radar.js b/frontend/src/views/chart/chart/radar/radar.js
index 07e3f81a83..cf1e9b37a1 100644
--- a/frontend/src/views/chart/chart/radar/radar.js
+++ b/frontend/src/views/chart/chart/radar/radar.js
@@ -43,7 +43,8 @@ export function baseRadarOption(chart_option, chart) {
         data: [
           {
             value: y.data,
-            name: y.name
+            name: y.name,
+            label: y.label
           }
         ]
       }
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
index 452e725755..9fab06d9e5 100644
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@@ -26,10 +26,10 @@
         </el-form-item>
 
         <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host">
-          <el-input v-model="form.configuration.host" autocomplete="off" :disabled="formType=='modify'" />
+          <el-input v-model="form.configuration.host" autocomplete="off"  />
         </el-form-item>
         <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase">
-          <el-input v-model="form.configuration.dataBase" autocomplete="off" :disabled="formType=='modify'" />
+          <el-input v-model="form.configuration.dataBase" autocomplete="off"  />
         </el-form-item>
 
         <el-form-item v-if="form.type=='oracle'" :label="$t('datasource.oracle_connection_type')" prop="configuration.connectionType">
@@ -38,7 +38,7 @@
         </el-form-item>
 
         <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username">
-          <el-input v-model="form.configuration.username" autocomplete="off" :disabled="formType=='modify'" />
+          <el-input v-model="form.configuration.username" autocomplete="off"  />
         </el-form-item>
         <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password">
           <el-input v-model="form.configuration.password" autocomplete="off" show-password />
@@ -53,7 +53,7 @@
         </el-form-item>
 
         <el-form-item v-if="form.type=='oracle'" :label="$t('datasource.schema')">
-          <el-select filterable v-model="form.configuration.schema" :placeholder="$t('datasource.please_choose_schema')" class="select-width" :disabled="formType=='modify'">
+          <el-select filterable v-model="form.configuration.schema" :placeholder="$t('datasource.please_choose_schema')" class="select-width">
             <el-option
               v-for="item in schemas"
               :key="item"
@@ -79,6 +79,8 @@
 <script>
 import LayoutContent from '@/components/business/LayoutContent'
 import { addDs, editDs, getSchema, validateDs } from '@/api/system/datasource'
+import { $confirm } from '@/utils/message'
+
 export default {
   name: 'DsForm',
   components: { LayoutContent },
@@ -105,7 +107,8 @@ export default {
       },
       allTypes: [{ name: 'mysql', label: 'MySQL', type: 'jdbc' }, { name: 'oracle', label: 'Oracle', type: 'jdbc' }],
       schemas: [],
-      canEdit: false
+      canEdit: false,
+      originConfiguration: {}
     }
   },
 
@@ -140,6 +143,7 @@ export default {
     edit(row) {
       this.formType = 'modify'
       this.form = Object.assign({}, row)
+      this.originConfiguration = this.form.configuration
       this.form.configuration = JSON.parse(this.form.configuration)
     },
 
@@ -156,11 +160,21 @@ export default {
           const method = this.formType === 'add' ? addDs : editDs
           const form = JSON.parse(JSON.stringify(this.form))
           form.configuration = JSON.stringify(form.configuration)
-          method(form).then(res => {
-            this.$success(this.$t('commons.save_success'))
-            this.refreshTree()
-            this.backToList()
-          })
+          if(this.formType !== 'add' && this.originConfiguration !== form.configuration) {
+            $confirm(this.$t('datasource.edit_datasource_msg'), () => {
+              method(form).then(res => {
+                this.$success(this.$t('commons.save_success'))
+                this.refreshTree()
+                this.backToList()
+              })
+            })
+          }else {
+            method(form).then(res => {
+              this.$success(this.$t('commons.save_success'))
+              this.refreshTree()
+              this.backToList()
+            })
+          }
         } else {
           return false
         }