feat:仪表板主题名称双击可修改

frontend/src/api/panel/panel.js

@@ -8,7 +8,7 @@ export function deleteSubject(id) {
   })
 }
 
-export function saveSubject(data) {
+export function saveOrUpdateSubject(data) {
   return request({
     url: '/panel/subject/update',
     method: 'post',

frontend/src/lang/en.js

@@ -1313,7 +1313,9 @@ export default {
     setting: 'Setting',
     no_drill_field: 'Miss relation field',
     matrix: 'matrix',
-    suspension: 'suspension'
+    suspension: 'suspension',
+    subject_no_edit: 'System Subject Can Not Edit',
+    subject_name_not_null: 'Subject Name Can Not Be Null'
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -1316,7 +1316,9 @@ export default {
     setting: '設置',
     no_drill_field: '缺少關聯字段',
     matrix: '矩阵分布',
-    suspension: '悬浮'
+    suspension: '悬浮',
+    subject_no_edit: '系统主题不能修改',
+    subject_name_not_null: '主题名称不能为空'
   },
   plugin: {
     local_install: '本地安裝',

frontend/src/lang/zh.js

@@ -1321,7 +1321,9 @@ export default {
     setting: '设置',
     no_drill_field: '缺少关联字段',
     matrix: '矩阵分布',
-    suspension: '悬浮'
+    suspension: '悬浮',
+    subject_no_edit: '系统主题不能修改',
+    subject_name_not_null: '主题名称不能为空'
   },
   plugin: {
     local_install: '本地安装',

frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue

@@ -79,7 +79,7 @@
 
 <script>
 import SubjectTemplateItem from './SubjectTemplateItem'
-import { querySubjectWithGroup, saveSubject, deleteSubject } from '@/api/panel/panel'
+import { querySubjectWithGroup, saveOrUpdateSubject, deleteSubject } from '@/api/panel/panel'
 import { mapState } from 'vuex'
 
 export default {
@@ -142,7 +142,7 @@ export default {
         details: JSON.stringify(this.canvasStyleData)
       }
       this.slidersLoading = true
-      saveSubject(request).then(response => {
+      saveOrUpdateSubject(request).then(response => {
         this.$message({
           message: '保存成功',
           type: 'success',

frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue

@@ -46,9 +46,16 @@
       </div>
 
     </div>
-    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;">
+    <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;" @dblclick="setEdit">
       <div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;">
-        <span style="margin-top: 8px">{{ subjectItem.name }}</span>
+        <el-input
+          v-if="canEdit"
+          ref="nameInput"
+          v-model="subjectItem.name"
+          size="mini"
+          @blur="loseFocus()"
+        />
+        <span v-if="!canEdit" style="margin-top: 8px">{{ subjectItem.name }}</span>
       </div>
     </div>
   </div>
@@ -58,6 +65,7 @@
 import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
+import { saveOrUpdateSubject } from '@/api/panel/panel'
 
 export default {
   name: 'StyleTemplateItem',
@@ -72,7 +80,8 @@ export default {
       defaultSubject: {
 
       },
-      subjectItemDetails: null
+      subjectItemDetails: null,
+      canEdit: false
     }
   },
   computed: {
@@ -189,7 +198,7 @@ export default {
     },
     subjectChange() {
       this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
-      this.$store.commit('recordSnapshot','subjectChange')
+      this.$store.commit('recordSnapshot', 'subjectChange')
       bus.$emit('onSubjectChange')
     },
     templateEdit() {
@@ -197,6 +206,43 @@ export default {
     },
     handleDelete() {
       // console.log('handleDelete')
+    },
+    // 双击事件
+    setEdit() {
+      if (this.subjectItem.type === 'self') {
+        this.canEdit = true
+      } else {
+        this.$warning(this.$t('panel.subject_no_edit'))
+      }
+      // 将单元格变为输入框
+      // // 聚焦到单元格
+      setTimeout(() => {
+        this.$refs['nameInput'].focus()
+      }, 20)
+    },
+    // 当输入框失去焦点时不显示输入框
+    loseFocus() {
+      if (this.subjectItem.name && this.subjectItem.name.length > 0) {
+        const request = {
+          id: this.subjectItem.id,
+          name: this.subjectItem.name
+        }
+        saveOrUpdateSubject(request).then(response => {
+          this.$message({
+            message: '保存成功',
+            type: 'success',
+            showClose: true
+          })
+          this.canEdit = false
+        })
+      } else {
+        this.$warning(this.$t('panel.subject_name_not_null'))
+      }
+    },
+    selectChange(callback, editCell) {
+      if (!callback) {
+        editCell.edit = false
+      }
     }
   }
 }