diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 0c3b8a8293..bf683a80d9 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -759,7 +759,7 @@ export default {
     elementMouseDown(e) {
       // private 设置当前组件数据及状态
       this.$store.commit('setClickComponentStatus', true)
-      if (this.element.component !== 'v-text' && this.element.component !== 'de-rich-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range' && this.element.component !== 'de-date') {
+      if (this.element.component !== 'de-frame' && this.element.component !== 'v-text' && this.element.component !== 'de-rich-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range' && this.element.component !== 'de-date') {
         e.preventDefault()
       }
       // 阻止冒泡事件
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index 23ec89cc24..dfc68d2a41 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -2,7 +2,7 @@
   <el-row ref="mainPlayer" style="width: 100%;height: 100%">
     <div v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url" class="video-container">
       <video :ref="'player-'+element.id" class="centered-video" name="centeredVideo" :loop="pOption.loop" :controls="inScreen" muted />
-      <div v-if="editMode==='edit'" class="stream-mask edit-mask" />
+      <div v-if="editMode==='edit'" class="stream-mask edit-mask-stream" />
       <div v-if="mobileLayoutStatus" class="stream-mask">
         <span style="opacity: 0.7;">
           <span style="color: lightgray;">{{ $t('panel.stream_mobile_tips') }}</span>
@@ -177,7 +177,7 @@ export default {
     justify-content: center;
   }
 
-  .edit-mask{
+  .edit-mask-stream{
     opacity: 0;
   }
 
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index e0643d2f80..bb6b9fd515 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -501,13 +501,17 @@ export default {
         const customStyleChart = JSON.parse(this.chart.customStyle)
         const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
         const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
-        // 组件样式-背景设置
-        customStyleChart.background = customStylePanel.background
+        if (customStyleChart.background) {
+          // 组件样式-背景设置
+          customStyleChart.background = customStylePanel.background
+        }
         // 图形属性-颜色设置
         if (this.chart.type.includes('table')) {
           customAttrChart.color = customAttrPanel.tableColor
         } else {
-          customAttrChart.color = customAttrPanel.color
+          customAttrChart.color['value'] = customAttrPanel.color['value']
+          customAttrChart.color['colors'] = customAttrPanel.color['colors']
+          customAttrChart.color['alpha'] = customAttrPanel.color['alpha']
         }
         this.chart = {
           ...this.chart,
@@ -854,6 +858,9 @@ export default {
         this.chart.stylePriority = param.viewInfo.stylePriority
         this.sourceCustomAttrStr = this.chart.customAttr
         this.sourceCustomStyleStr = this.chart.customStyle
+        if (this.componentViewsData[this.chart.id]) {
+          this.componentViewsData[this.chart.id]['title'] = this.chart.title
+        }
         this.mergeScale()
       }
     }
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index fcf325d86f..5872783eed 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -148,7 +148,7 @@ export function checkViewTitle(opt, id, tile) {
     const curPanelViewsData = store.state.componentViewsData
     const curComponentViewNames = []
     store.state.componentData.forEach(item => {
-      if (item.type === 'view' && item.propValue && item.propValue.viewId) {
+      if (item.type === 'view' && item.propValue && item.propValue.viewId && curPanelViewsData[item.propValue.viewId]) {
         // 更新时自己的title不加入比较
         if ((opt === 'update' && id !== item.propValue.viewId) || opt === 'new') {
           curComponentViewNames.push(curPanelViewsData[item.propValue.viewId].title)
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index cf053feefc..b9b9933ebd 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -117,11 +117,11 @@ export default {
     // console.log('aaaaaa')
     const { horizontal, vertical } = this.element.style
     this.$set(this.element.style, 'horizontal', horizontal || 'left')
-    this.$set(this.element.style, 'vertical', vertical || 'top')
+    this.$set(this.element.style, 'vertical', vertical || 'center')
   },
   methods: {
     handlerPositionChange(val) {
-      const { horizontal = 'left', vertical = 'top' } = val
+      const { horizontal = 'left', vertical = 'center' } = val
       this.titleStyle = {
         width: '100%',
         textAlign: horizontal
diff --git a/frontend/src/components/widget/DeWidget/TitlePostion.vue b/frontend/src/components/widget/DeWidget/TitlePostion.vue
index f2ac85e4e6..9b115c7616 100644
--- a/frontend/src/components/widget/DeWidget/TitlePostion.vue
+++ b/frontend/src/components/widget/DeWidget/TitlePostion.vue
@@ -9,14 +9,14 @@
         <el-form-item :label="$t('chart.text_h_position')" class="form-item">
           <el-radio-group v-model="styleInfo.horizontal" size="mini">
             <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-            <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+            <el-radio-button :disabled="styleInfo.vertical === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
             <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <el-form-item v-if="showVertical" :label="$t('chart.text_v_position')" class="form-item">
           <el-radio-group v-model="styleInfo.vertical" size="mini">
             <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-            <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+            <el-radio-button :disabled="styleInfo.horizontal === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
           </el-radio-group>
         </el-form-item>
 
diff --git a/frontend/src/views/msg/setting.vue b/frontend/src/views/msg/setting.vue
index 751b1d0339..3c67fb69b7 100644
--- a/frontend/src/views/msg/setting.vue
+++ b/frontend/src/views/msg/setting.vue
@@ -24,9 +24,7 @@
 
               <div>
                 <span v-for="channel in msg_channels" :key="channel.msgChannelId" class="auth-span">
-                  <!-- <a href="javascript:;" @click="clickAuth(node,channel)">
-                    <svg-icon style="width: 25px;height: 25px" :icon-class="checkBoxStatus(node, channel)?'lock_open':'lock_closed'" />
-                  </a> -->
+
                   <el-checkbox v-if="data.children && data.children.length > 0" v-model="data.check_all_map[channel.msgChannelId]" :indeterminate="data.indeterminate_map[channel.msgChannelId]" @change="parentBoxChange(node, channel)" />
                   <el-checkbox v-else v-model="data.check_map[channel.msgChannelId]" @change="childBoxChange(node, channel)" />
 
@@ -150,17 +148,7 @@ export default {
       const nodeId = node.id
       return this.setting_data[nodeId] && this.setting_data[nodeId].some(item => item.channelId === channel.msgChannelId && item.enable)
     },
-    clickAuth(node, channel) {
-      // const status = this.checkBoxStatus(nodeId, channel)
-      const param = {
-        typeId: node.data.id,
-        channelId: channel.msgChannelId
-      }
-      updateSetting(param).then(res => {
-        this.loadSettingData()
-        // node.checked = true
-      })
-    },
+
     nodeClick(data, node) {
     },
     getAllKidId(node, ids) {
@@ -190,7 +178,7 @@ export default {
         enable
       }
       batchUpdate(param).then(res => {
-        this.loadSettingData()
+        this.loadSettingData(this.loadTreeData)
       })
     },
     childBoxChange(node, channel) {
@@ -224,7 +212,7 @@ export default {
         channelId: channelId
       }
       updateSetting(param).then(res => {
-        this.loadSettingData()
+        this.loadSettingData(this.loadTreeData)
       })
     }
   }
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
index 79c710b340..b14dfee476 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
@@ -6,7 +6,7 @@
         width="400"
         trigger="click"
       >
-        <color-selector :source-type="sourceType" :chart="chart" @onColorChange="onColorChange" />
+        <color-selector :chart="chart" :property-inner="propertyInner" @onColorChange="onColorChange" />
         <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
       </el-popover>
     </div>
@@ -29,6 +29,14 @@ export default {
       required: false
     }
   },
+  data() {
+    return {
+      propertyInner: [
+        'value',
+        'alpha'
+      ]
+    }
+  },
   methods: {
     onColorChange(colorForm) {
       this.$emit('onColorChange', colorForm)
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index 16b5dd6242..e6a6bad477 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -158,7 +158,7 @@ export default {
     },
     chartBackground() {
       let style = {}
-      if (this.subjectItemDetails) {
+      if (this.subjectItemDetails && this.subjectItemDetails.chart.customStyle.background) {
         style = {
           background: this.subjectItemDetails.chart.customStyle.background.color,
           opacity: this.subjectItemDetails.chart.customStyle.background.alpha / 100
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 8f8ac300e1..0516c57943 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -274,6 +274,7 @@
       <Preview
         v-if="previewVisible"
         :in-screen="!previewVisible"
+        :panel-info="panelInfo"
         :show-type="canvasStyleData.selfAdaption?'full':'width'"
         :canvas-style-data="canvasStyleData"
         :component-data="componentData"
diff --git a/frontend/src/views/system/datasource/DriverForm.vue b/frontend/src/views/system/datasource/DriverForm.vue
index 9b5c2fdd4b..4a8f04b38a 100644
--- a/frontend/src/views/system/datasource/DriverForm.vue
+++ b/frontend/src/views/system/datasource/DriverForm.vue
@@ -1,16 +1,15 @@
 <template>
   <layout-content>
     <template v-slot:header>
-      <el-icon name="back" class="back-button" @click.native="backToList"/>
+      <el-icon name="back" class="back-button" @click.native="backToList" />
       {{
         params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('driver.show_info') : $t('driver.modify')
       }}
-      <el-button v-if="canEdit"  size="mini"   style="float: right;"type="primary" @click="save">{{ $t('commons.save') }}
+      <el-button v-if="canEdit" size="mini" style="float: right;"type="primary" @click="save">{{ $t('commons.save') }}
       </el-button>
-      <el-button v-else size="mini"  style="float: right;" type="primary" @click="changeEdit">{{ $t('commons.edit') }}
+      <el-button v-else size="mini" style="float: right;" type="primary" @click="changeEdit">{{ $t('commons.edit') }}
       </el-button>
 
-
     </template>
     <div>
 
@@ -24,16 +23,17 @@
         label-position="right"
       >
         <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="driverForm.name" autocomplete="off"/>
+          <el-input v-model="driverForm.name" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('commons.description')">
-          <el-input v-model="driverForm.desc" autocomplete="off"/>
+          <el-input v-model="driverForm.desc" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('datasource.type')" prop="type">
           <el-select
             v-model="driverForm.type"
             :placeholder="$t('datasource.please_choose_type')"
             class="select-width"
+            style="width: 100%"
             disabled
             filterable
           >
@@ -46,27 +46,26 @@
           </el-select>
         </el-form-item>
 
-<!--        <el-form-item :label="$t('driver.driver')" >-->
-<!--          <el-select-->
-<!--            v-model="driverForm.driverClass"-->
-<!--            :placeholder="$t('driver.please_choose_driver')"-->
-<!--            class="select-width"-->
-<!--            filterable-->
-<!--          >-->
-<!--            <el-option-->
-<!--              v-for="item in driverClassList"-->
-<!--              :key="item"-->
-<!--              :label="item"-->
-<!--              :value="item"-->
-<!--            />-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('driver.driver')" >-->
+        <!--          <el-select-->
+        <!--            v-model="driverForm.driverClass"-->
+        <!--            :placeholder="$t('driver.please_choose_driver')"-->
+        <!--            class="select-width"-->
+        <!--            filterable-->
+        <!--          >-->
+        <!--            <el-option-->
+        <!--              v-for="item in driverClassList"-->
+        <!--              :key="item"-->
+        <!--              :label="item"-->
+        <!--              :value="item"-->
+        <!--            />-->
+        <!--          </el-select>-->
+        <!--        </el-form-item>-->
 
         <el-form-item :label="$t('driver.driver')" prop="driverClass">
-          <el-input v-model="driverForm.driverClass" autocomplete="off"/>
+          <el-input v-model="driverForm.driverClass" autocomplete="off" />
         </el-form-item>
 
-
       </el-form>
 
       <el-upload
@@ -83,16 +82,16 @@
         :headers="headers"
         style="float: right;"
       >
-        <el-button size="mini" type="primary"  style="float: right;" :disabled="uploading">
+        <el-button size="mini" type="primary" style="float: right;" :disabled="uploading">
           <span v-if="!uploading" style="font-size: 12px;">{{ $t('dataset.upload_file') }}</span>
           <span v-if="uploading" style="font-size: 12px;"><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
         </el-button>
       </el-upload>
-    <fu-table :data="driverFiles">
-      <el-table-column prop="fileName" :label="$t('driver.file_name')"/>
-<!--      <el-table-column prop="version" :label="$t('driver.version')"/>-->
-      <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix/>
-    </fu-table>
+      <fu-table :data="driverFiles">
+        <el-table-column prop="fileName" :label="$t('driver.file_name')" />
+        <!--      <el-table-column prop="version" :label="$t('driver.version')"/>-->
+        <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
+      </fu-table>
 
     </div>
   </layout-content>
@@ -102,13 +101,13 @@
 import LayoutContent from '@/components/business/LayoutContent'
 import i18n from '@/lang/index'
 import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import DsConfiguration from "@/views/system/datasource/DsConfiguration";
+import DsConfiguration from '@/views/system/datasource/DsConfiguration'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import {deleteDriverFile, listDriverDetails, updateDriver} from "@/api/system/datasource";
-import {delUser} from "@/api/system/user";
-import {$alert} from "@/utils/message";
-import store from "@/store";
-import {getToken} from "@/utils/auth";
+import { deleteDriverFile, listDriverDetails, updateDriver } from '@/api/system/datasource'
+import { delUser } from '@/api/system/user'
+import { $alert } from '@/utils/message'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
 
 const token = getToken()
 
@@ -138,7 +137,7 @@ export default {
     return {
       disabled: false,
       driverForm: {
-        id:'',
+        id: '',
         name: '',
         desc: '',
         type: '',
@@ -147,12 +146,12 @@ export default {
       datasourceType: {},
       driverClassList: [],
       rule: {
-        name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
-          {min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
-        desc: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
-          {min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
-        type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}],
-        driverClass: [{required: true, message: i18n.t('driver.please_set_driverClass'), trigger: 'blur'}]
+        name: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
+          { min: 2, max: 50, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
+        desc: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
+          { min: 2, max: 200, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
+        type: [{ required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur' }],
+        driverClass: [{ required: true, message: i18n.t('driver.please_set_driverClass'), trigger: 'blur' }]
       },
       canEdit: false,
       driverFiles: [],
@@ -179,7 +178,6 @@ export default {
   mounted() {
   },
 
-
   methods: {
     beforeUpload(file) {
       this.uploading = true
@@ -191,7 +189,7 @@ export default {
     uploadFail(response, file, fileList) {
       let myError = response.toString()
       myError = myError.replace('Error: ', '')
-      if(myError.indexOf('AuthenticationException') >= 0){
+      if (myError.indexOf('AuthenticationException') >= 0) {
         const message = i18n.t('login.tokenError')
         $alert(message, () => {
           store.dispatch('user/logout').then(() => {
@@ -211,13 +209,13 @@ export default {
         showClose: true
       })
     },
-    deleteDriverFile(row){
+    deleteDriverFile(row) {
       deleteDriverFile(row).then(res => {
         this.$success(this.$t('commons.delete_success'))
         this.listDriverDetails()
       })
     },
-    listDriverDetails(){
+    listDriverDetails() {
       listDriverDetails(this.driverForm.id).then(res => {
         this.driverFiles = res.data
         this.driverClassList = []
@@ -231,11 +229,11 @@ export default {
       this.formType = 'modify'
       this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
     },
-    save(){
+    save() {
       this.$refs.driverForm.validate(valid => {
-          if (!valid) {
-            return false
-          }
+        if (!valid) {
+          return false
+        }
         updateDriver(this.driverForm).then(res => {
           this.$success(i18n.t('commons.success'))
           this.canEdit = false
@@ -256,13 +254,13 @@ export default {
 }
 </script>
 <style scoped>
-.el-input {
+/* .el-input {
   width: 300px;
 }
 
 .el-select {
   width: 300px;
-}
+} */
 
 .ms-http-input {
   width: 500px;
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index 693bcfa323..1b0dddac48 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -1,7 +1,7 @@
 <template>
   <layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')">
     <template v-slot:header>
-      <el-icon name="back" class="back-button" @click.native="backToList"/>
+      <el-icon name="back" class="back-button" @click.native="backToList" />
       {{
         params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType == 'add' ? $t('datasource.create') : $t('datasource.modify')
       }}
@@ -18,19 +18,20 @@
         label-position="right"
       >
         <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="form.name" autocomplete="off"/>
+          <el-input v-model="form.name" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('commons.description')" prop="desc">
-          <el-input v-model="form.desc" autocomplete="off"/>
+          <el-input v-model="form.desc" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('datasource.type')" prop="type">
           <el-select
             v-model="form.type"
             :placeholder="$t('datasource.please_choose_type')"
             class="select-width"
+            style="width: 100%"
             :disabled="formType=='modify' || (formType==='add' && params && !!params.type)"
-            @change="changeType()"
             filterable
+            @change="changeType()"
           >
             <el-option
               v-for="item in dsTypes"
@@ -41,11 +42,12 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item  v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
+        <el-form-item v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
           <el-select
             v-model="form.configuration.customDriver"
             :placeholder="$t('driver.please_choose_driver')"
             class="select-width"
+            style="width: 100%"
             filterable
           >
             <el-option
@@ -58,27 +60,35 @@
           </el-select>
         </el-form-item>
 
-      <ds-configuration ref="dsConfig" v-if="!datasourceType.isPlugin" :datasource-type='datasourceType' :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"></ds-configuration>
-      <plugin-com ref="pluginDsConfig" v-if="datasourceType.isPlugin"  :component-name="datasourceType.type" :obj="{form, disabled }" />
-
+        <ds-configuration v-if="!datasourceType.isPlugin" ref="dsConfig" :datasource-type="datasourceType" :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit" />
+        <plugin-com v-if="datasourceType.isPlugin" ref="pluginDsConfig" :component-name="datasourceType.type" :obj="{form, disabled }" />
 
       </el-form>
 
-
       <div v-if="canEdit" slot="footer" class="dialog-footer">
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
-                   @click="validaDatasource">{{ $t('commons.validate') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          @click="validaDatasource"
+        >{{ $t('commons.validate') }}
         </el-button>
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)" type="primary"
-                   @click="save">{{ $t('commons.save') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          type="primary"
+          @click="save"
+        >{{ $t('commons.save') }}
         </el-button>
       </div>
       <div v-else slot="footer" class="dialog-footer">
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
-                   @click="validaDatasource">{{ $t('commons.validate') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          @click="validaDatasource"
+        >{{ $t('commons.validate') }}
         </el-button>
-        <el-button v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)" type="primary"
-                   @click="changeEdit">{{ $t('commons.edit') }}
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          type="primary"
+          @click="changeEdit"
+        >{{ $t('commons.edit') }}
         </el-button>
       </div>
     </div>
@@ -96,10 +106,10 @@ import {
   checkApiDatasource,
   listDriverByType
 } from '@/api/system/datasource'
-import {$confirm} from '@/utils/message'
+import { $confirm } from '@/utils/message'
 import i18n from '@/lang/index'
 import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import DsConfiguration from "@/views/system/datasource/DsConfiguration";
+import DsConfiguration from '@/views/system/datasource/DsConfiguration'
 import PluginCom from '@/views/system/plugin/PluginCom'
 
 export default {
@@ -143,10 +153,10 @@ export default {
       },
       datasourceType: {},
       rule: {
-        name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
-          {min: 2, max: 25, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
-        desc: [{min: 2, max: 50, message: i18n.t('datasource.input_limit_2_50'), trigger: 'blur'}],
-        type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}],
+        name: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
+          { min: 2, max: 25, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
+        desc: [{ min: 2, max: 50, message: i18n.t('datasource.input_limit_2_50'), trigger: 'blur' }],
+        type: [{ required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur' }],
         'configuration.dataBase': [{
           required: true,
           message: i18n.t('datasource.please_input_data_base'),
@@ -167,9 +177,9 @@ export default {
           message: i18n.t('datasource.please_input_password'),
           trigger: 'blur'
         }],
-        'configuration.host': [{required: true, message: i18n.t('datasource.please_input_host'), trigger: 'blur'}],
-        'configuration.url': [{required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur'}],
-        'configuration.port': [{required: true, message: i18n.t('datasource.please_input_port'), trigger: 'blur'}],
+        'configuration.host': [{ required: true, message: i18n.t('datasource.please_input_host'), trigger: 'blur' }],
+        'configuration.url': [{ required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur' }],
+        'configuration.port': [{ required: true, message: i18n.t('datasource.please_input_port'), trigger: 'blur' }],
         'configuration.initialPoolSize': [{
           required: true,
           message: i18n.t('datasource.please_input_initial_pool_size'),
@@ -200,8 +210,8 @@ export default {
           message: i18n.t('datasource.please_input_connect_timeout'),
           trigger: 'blur'
         }],
-        'url': [{required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur'}],
-        'dataPath': [{required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'blur'}]
+        'url': [{ required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur' }],
+        'dataPath': [{ required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'blur' }]
       },
       schemas: [],
       canEdit: false,
@@ -216,9 +226,9 @@ export default {
         request: {
           headers: [{}],
           body: {
-            "type": "",
-            "raw": "",
-            "kvs": []
+            'type': '',
+            'raw': '',
+            'kvs': []
           }
         },
         fields: []
@@ -232,25 +242,25 @@ export default {
         request: {
           headers: [],
           body: {
-            "type": "",
-            "raw": "",
-            "kvs": []
+            'type': '',
+            'raw': '',
+            'kvs': []
           },
           authManager: {}
         },
         fields: []
       },
-      reqOptions: [{id: 'GET', label: 'GET'}, {id: 'POST', label: 'POST'}],
+      reqOptions: [{ id: 'GET', label: 'GET' }, { id: 'POST', label: 'POST' }],
       loading: false,
-      responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
+      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
       api_table_title: '',
       api_step2_active_name: 'first',
       fieldTypes: [
-        {label: this.$t('dataset.text'), value: 0},
-        {label: this.$t('dataset.time'), value: 1},
-        {label: this.$t('dataset.value'), value: 2},
-        {label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3},
-        {label: this.$t('dataset.location'), value: 5}
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.time'), value: 1 },
+        { label: this.$t('dataset.value'), value: 2 },
+        { label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
+        { label: this.$t('dataset.location'), value: 5 }
       ],
       height: 500,
       disabledNext: false,
@@ -288,7 +298,6 @@ export default {
         connectTimeout: 5,
         customDriver: 'default'
       }
-
     },
     changeEdit() {
       this.canEdit = true
@@ -328,15 +337,15 @@ export default {
         return
       }
       let repeat = false
-      let repeatDsName = []
+      const repeatDsName = []
       this.tData.forEach(item => {
         if (item.id === this.form.type) {
           item.children.forEach(child => {
             if (this.formType === 'modify' && child.id === this.form.id) {
               return
             }
-            let configuration = JSON.parse(child.configuration)
-            if(!configuration){
+            const configuration = JSON.parse(child.configuration)
+            if (!configuration) {
               return
             }
             switch (this.form.type) {
@@ -378,16 +387,16 @@ export default {
         }
       })
 
-      let status = null;
-      if(this.datasourceType.isPlugin){
-        status = this.$refs['pluginDsConfig'].callPluginInner({methodName: 'validate'})
-      }else {
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
+      } else {
         this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
           status = valid
         })
       }
-      if(!status){
-        return;
+      if (!status) {
+        return
       }
 
       this.$refs.dsForm.validate(valid => {
@@ -462,19 +471,19 @@ export default {
         this.$message.error(i18n.t('datasource.port_no_less_then_0'))
         return
       }
-      let status = null;
-      if(this.datasourceType.isPlugin){
-        status = this.$refs['pluginDsConfig'].callPluginInner({methodName: 'validate'})
-      }else {
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
+      } else {
         this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
           status = valid
-          if(!valid){
+          if (!valid) {
             return
           }
         })
       }
-      if(!status){
-        return;
+      if (!status) {
+        return
       }
       this.$refs.dsForm.validate(valid => {
         if (valid) {
@@ -523,15 +532,15 @@ export default {
     changeType(init) {
       for (let i = 0; i < this.dsTypes.length; i++) {
         if (this.dsTypes[i].type === this.form.type) {
-          if(this.form.type !== 'api' && !init){
+          if (this.form.type !== 'api' && !init) {
             this.form.configuration.extraParams = this.dsTypes[i].extraParams
             this.form.configuration.customDriver = 'default'
           }
           this.datasourceType = this.dsTypes[i]
-          if(this.datasourceType.isJdbc){
+          if (this.datasourceType.isJdbc) {
             listDriverByType(this.datasourceType.type).then(res => {
               this.driverList = []
-              this.driverList.push({id: 'default', name: 'Default', driverClass:'Default'})
+              this.driverList.push({ id: 'default', name: 'Default', driverClass: 'Default' })
               this.driverList = this.driverList.concat(res.data)
             })
           }
@@ -554,7 +563,7 @@ export default {
             }
           })
         } else {
-          let index = this.form.apiConfiguration.indexOf(this.apiItem)
+          const index = this.form.apiConfiguration.indexOf(this.apiItem)
           for (let i = 0; i < this.form.apiConfiguration.length; i++) {
             if (i !== index && this.form.apiConfiguration[i].name === this.apiItem.name) {
               hasRepeatName = true
@@ -652,13 +661,13 @@ export default {
 }
 </script>
 <style scoped>
-.el-input {
+/* .el-input {
   width: 300px;
 }
 
 .el-select {
   width: 300px;
-}
+} */
 
 .ms-http-input {
   width: 500px;