feat: 【表现形式】添加修改表现形式、重命名

src/views/template/components/WordsManager.vue

@@ -43,7 +43,7 @@
         :placeholder="levelObj.placeholder"
       />
       <div
-        v-if="wordType !== DataType.Unit"
+        v-if="wordType !== DataType.Unit && flag !== FLAG_UPDATE"
         @click="handleClickFieldType"
         style="text-align:left;display:flex;justify-content:space-between;padding:16px;color:#999999;font-size:14px;"
       >
@@ -57,7 +57,11 @@
       @back="showOptions = false"
       @confirmWordType="confirmWordType"
     ></add-option>
-    <more-action :show.sync="showMoreAction" :menuList="menuList" @cb="callbackFromMoreAction"></more-action>
+    <more-action
+      :show.sync="showMoreAction"
+      :menuList="menuList"
+      @cb="callbackFromMoreAction"
+    ></more-action>
   </div>
 </template>
 <script lang="ts">
@@ -76,6 +80,11 @@ import { TEMPLATETYPE, DataType } from '@/const/enum';
 import WordItem from './WordItem.vue';
 import AddOption from './AddOption.vue';
 import { IData, TemplateDataItem } from '@/const/interface';
+
+const FLAG_UPDATE = 'update';
+const FLAG_BEFORE = 'before';
+const FLAG_AFTER = 'after';
+
 @Component({
   components: {
     WordItem,
@@ -91,7 +100,11 @@ export default class Add extends Vue {
   private wordType: DataType = DataType.Unit;
   private readonly DataType: any = DataType;
   private wordName: string = '';
+
   private flag: string = '';
+  private FLAG_UPDATE = FLAG_UPDATE;
+  private isModifyForm = false;
+
   private options: string[] = [];
   private activeName = 0;
   private addOptionPropOption = [] as string[];
@@ -101,32 +114,51 @@ export default class Add extends Vue {
   private show: boolean = false;
 
   private showMoreAction: boolean = false;
-  private currentAction: {index: number; parentIndex: number} = {
+  private currentAction: { index: number; parentIndex: number } = {
     index: -1,
     parentIndex: -1,
   };
-  private menuList: any[] = [
-    {
-      icon: 'zaishangtianjia',
-      text: '在上添加',
-      callback: this.addBefore.bind(this),
-    },
-    {
-      icon: 'zaixiatianjia',
-      text: '在下添加',
-      callback: this.addAfter.bind(this),
-    },
-    {
-      icon: 'shanchu4',
-      text: '删除',
-      callback: this.delWord.bind(this),
-    },
-    {
-      icon: 'shanchu4',
-      text: '编辑',
-      callback: this.updateWord.bind(this),
-    },
-  ];
+
+  get menuList() {
+    const list = [
+      {
+        icon: 'zaishangtianjia2x',
+        text: '在上添加',
+        callback: this.addBefore.bind(this),
+      },
+      {
+        icon: 'zaixiatianjia2x',
+        text: '在下添加',
+        callback: this.addAfter.bind(this),
+      },
+      {
+        icon: 'shanchu2x',
+        text: '删除',
+        callback: this.delWord.bind(this),
+      },
+      {
+        icon: 'zhongmingming2x',
+        text: '重命名',
+        callback: this.rename.bind(this),
+      },
+      {
+        isField: true,
+        icon: 'xiugaibianxianxingshi2x',
+        text: '修改表现形式',
+        callback: this.modifyForm.bind(this),
+      },
+    ];
+    return list.filter((item: any) => {
+      if (this.currentAction.parentIndex === -1) {
+        // 如果是标题
+        return !item.isField;
+      } else {
+        // 如果是字段
+        return true;
+      }
+    });
+  }
+
   private readonly typeObj: any = {
     [DataType.Input]: '单行文本',
     [DataType.Image]: '图片',
@@ -231,6 +263,7 @@ export default class Add extends Vue {
     this.showMoreAction = true;
     this.currentAction = { index, parentIndex };
   }
+
   private resolveAction(flag: string = '') {
     const { index, parentIndex } = this.currentAction;
     const wordType = parentIndex === -1 ? DataType.Unit : DataType.Input;
@@ -238,13 +271,13 @@ export default class Add extends Vue {
     this.preAddWord({ wordType, word }, flag);
   }
   private addBefore() {
-    this.resolveAction('before');
+    this.resolveAction(FLAG_BEFORE);
   }
   private addAfter() {
-    this.resolveAction('after');
+    this.resolveAction(FLAG_AFTER);
   }
-  private updateWord() {
-    this.resolveAction('update');
+  private rename() {
+    this.resolveAction(FLAG_UPDATE);
   }
   private async delWord() {
     const { index, parentIndex } = this.currentAction;
@@ -261,47 +294,80 @@ export default class Add extends Vue {
     return tempWords.splice(index, 1);
   }
 
-  private handleClickFieldType(){
-    const clickedField = this.currentWords[this.currentAction.index] as TemplateDataItem;
-    if(this.flag === "update"){
+  // 返回当前选中的项
+  private getFocusedItem(parentIndex: number, index: number) {
+    if (parentIndex === -1) {
+      // 当前点击的是标题
+      return this.words[index];
+    } else {
+      // 当前点击的是字段
+      return this.words[parentIndex].data[index];
+    }
+  }
+
+  // 修改表现形式
+  private modifyForm() {
+    this.isModifyForm = true;
+    const clickedField = this.getFocusedItem(
+      this.currentAction.parentIndex,
+      this.currentAction.index
+    );
+    this.activeName = clickedField.type;
+    this.addOptionPropOption = clickedField.options ? clickedField.options : [];
+    this.showOptions = true;
+  }
+
+  private handleClickFieldType() {
+    if (this.flag === FLAG_UPDATE) {
       this.activeName = this.wordType;
       this.addOptionPropOption = this.options;
-    }else{
+    } else {
       this.activeName = this.wordType;
       this.addOptionPropOption = [];
     }
     this.showOptions = true;
   }
 
-  private callbackFromMoreAction(action: any){
-    action();    
+  private callbackFromMoreAction(action: any) {
+    action();
   }
-  
+
   private confirmWordType({ type = DataType.Input, options }: any) {
-    this.wordType = type;
-    this.options = options;
+    // 若是由直接修改表现形式而弹出add-options组件，确认完表现形式后，是直接修改当前项的值。
+    if (this.isModifyForm) {
+      const currentItem = this.getFocusedItem(
+        this.currentAction.parentIndex,
+        this.currentAction.index
+      );
+      currentItem.type = type;
+      currentItem.options = options;
+    } else {
+      // 如果不是修改表现形式，则是由对话框中点击字段类型而弹出add-options组件，若确认完表现形式，则是修改对话框中字段类型的值。
+      this.wordType = type;
+      this.options = options;
+    }
     this.showOptions = false;
   }
   get levelObj(): any {
     if (this.wordType === DataType.Unit) {
       return {
-        title: '添加标题',
+        title: this.flag === FLAG_UPDATE ? '更新标题' : '添加标题',
         placeholder: '一级标题名称',
         toast: '标题至少2个汉字',
       };
     }
     return {
-      title: '添加字段',
+      title: this.flag === FLAG_UPDATE ? '更新字段' : '添加字段',
       placeholder: '字段名称',
       toast: '字段至少2个汉字',
     };
   }
-  
+
   private preAddWord({ wordType, word }: any, flag: string = '') {
     this.show = true;
     this.wordType = wordType;
     this.currentWords = word ? word.data : this.words;
-    if (flag === 'update') {
+    if (flag === FLAG_UPDATE) {
       const { index, parentIndex } = this.currentAction;
       const currentWord =
         parentIndex === -1
@@ -332,11 +398,11 @@ export default class Add extends Vue {
       tempData = { ...tempData, options: this.options };
     }
     let { index } = this.currentAction;
-    if (this.flag === 'update') {
+    if (this.flag === FLAG_UPDATE) {
       this.currentWords.splice(index, 1, tempData);
-    } else if (this.flag === 'before') {
+    } else if (this.flag === FLAG_BEFORE) {
       this.currentWords.splice(index, 0, tempData);
-    } else if (this.flag === 'after') {
+    } else if (this.flag === FLAG_AFTER) {
       this.currentWords.splice(++index, 0, tempData);
     } else {
       this.currentWords.push(tempData);