From 72f7b8206f856f70fa873136cf5c3e14e58bb235 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sat, 9 Oct 2021 11:16:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=90=8D=E7=A7=B0=E5=8F=8C=E5=87=BB=E5=8F=AF=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/panel/panel.js               |  2 +-
 frontend/src/lang/en.js                       |  4 +-
 frontend/src/lang/tw.js                       |  4 +-
 frontend/src/lang/zh.js                       |  4 +-
 .../SubjectSetting/PreSubject/Slider.vue      |  4 +-
 .../PreSubject/SubjectTemplateItem.vue        | 54 +++++++++++++++++--
 6 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index ac246adbda..c745ced6e9 100644
--- a/frontend/src/api/panel/panel.js
+++ b/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',
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 386c6339d5..5695ca0a3f 100644
--- a/frontend/src/lang/en.js
+++ b/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',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index e0cd84d60a..1f7e77877c 100644
--- a/frontend/src/lang/tw.js
+++ b/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: '本地安裝',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b7727345ce..d06f275f86 100644
--- a/frontend/src/lang/zh.js
+++ b/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: '本地安装',
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
index fb852f5afb..f26f152376 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
+++ b/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',
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index ba37438f4e..397fd21e6d 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/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
+      }
     }
   }
 }