fix: 添加文本数组类型

src/components/editTemplate/form/JSONForm.vue

@@ -49,6 +49,14 @@ export default class JsonForm extends Vue {
     key: '',
     value: ''
   }];
+
+  @Watch('jsons')
+  jsonsChange() {
+
+    // this.property.value =
+  }
+
+
   mounted() {
     console.log(this.property);
   }

src/components/editTemplate/form/TextArrayForm.vue

 <template>
-  <base-form
-      :label="property.label"
-      :watchValue="property.value"
-      :showInput="false"
-      class="array-form"
-  >
+  <div class="array-form">
+    <div class="label">
+      <img class="pre-tag" src="../../../assets/images/template/pre-tag.png" />
+      <div class="label-text" :title="property.label">{{ property.label }}</div>
+    </div>
     <div class="lists">
       <div
           class="list"
@@ -12,6 +11,7 @@
           :key="index"
       >
         <input
+            @change="change"
             class="input"
             type="text"
             v-model="item.value"
@@ -26,11 +26,11 @@
         <i class="iconfont icontianjia"></i>
       </div>
     </div>
-  </base-form>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue} from "vue-property-decorator";
+import { Component, Prop, Vue, Watch} from "vue-property-decorator";
 import BaseForm from "./BaseForm.vue";
 import {Property} from "@/plugins/types2";
 @Component({
@@ -40,10 +40,27 @@ import {Property} from "@/plugins/types2";
 })
 export default class TextArray extends Vue {
   @Prop() property!: Property;
+
   public array = [{
     value: ''
   }];
 
+  @Watch('array')
+  public arrayChange() {
+    this.property.value = this.array.map(item => String(item.value));
+  }
+
+  mounted() {
+    if (!Array.isArray(this.property.value)) return;
+    this.array = this.property.value.map((value: string) => {
+      return {value};
+    })
+  }
+
+  change() {
+    this.property.value = this.array.map(item => String(item.value));
+  }
+
   public add() {
     this.array.push({
       value: ''
@@ -58,8 +75,33 @@ export default class TextArray extends Vue {
 </script>
 
 <style scoped lang="less">
+.label {
+  display: inline-block;
+  width: 150px; /* 104 - 18 */
+  flex-shrink: 0;
+  height: 44px;
+  cursor: pointer;
+  line-height: 44px;
+  color: #797d84; /* todo ui图颜色不一致 */
+  font-size: 14px;
+  font-weight: 300;
+  position: relative;
+}
+.pre-tag {
+  position: absolute;
+  left: -30px;
+  top: 14px;
+  display: none;
+}
 .array-form {
+  flex-shrink: 0;
+  padding-left: 18px;
+  line-height: 65px;
   height: auto;
+  font-size: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 .list {
   display: flex;
@@ -73,6 +115,26 @@ export default class TextArray extends Vue {
   flex-shrink: 0;
   height: 44px;
   width: 770px;
+  box-sizing: border-box;
+  min-height: 44px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6; /* todo 边框、背景色ui图颜色不一致 */
+  outline: none;
+  padding-left: 24px;
+  font-size: 14px;
+  font-weight: 300;
+  &::-webkit-input-placeholder {
+    color: #bababa;
+  }
+  &::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #bababa;
+  }
+
+  &:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #bababa;
+  }
 }
 
 .del {

src/plugins/Template.ts

@@ -56,7 +56,7 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       },
     };
   } else if (property.type === PropertyType.Image) {
-    let data = {}
+    let data = [];
     if (property.value && property.value !== '') {
       let dd = Array.from(property.value);
       data = dd.map((value: any) => ({
@@ -66,7 +66,11 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       }))
     }
     else {
-      data = {}
+      data.push({
+        format: "hash(hash)",
+        type: "image",
+        value: ''
+      })
     }
     return {
       key: property.key,
@@ -75,7 +79,7 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       label: property.label
     };
   } else if (property.type === PropertyType.File) {
-    let data = {}
+    let data = []
     if (property.value) {
       let dd = Array.from(property.value);
       data = (dd as any).map((value: any) => ({
@@ -85,7 +89,11 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       }))
     }
     else {
-      data = {}
+      data.push({
+        format: "hash(hash)",
+        type: "file",
+        value: ''
+      })
     }
     return {
       key: property.key,
@@ -118,7 +126,7 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
     };
 
   } else if (property.type === PropertyType.Video) {
-    let data = {}
+    let data = []
     if (property.value) {
       let dd = Array.from(property.value);
       data = (dd as any).map((value: any) => ({
@@ -128,7 +136,11 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       }))
     }
     else {
-      data = {}
+      data.push({
+        format: "hash(hash)",
+        type: "media",
+        value: ''
+      })
     }
     return {
       key: property.key,
@@ -138,7 +150,7 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
     };
   }
   else if (property.type === PropertyType.Audio) {
-    let data = {}
+    let data = []
     if (property.value) {
       let dd = Array.from(property.value);
       data = (dd as any).map((value: any) => ({
@@ -148,7 +160,11 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       }))
     }
     else {
-      data = {}
+      data.push({
+        format: "hash(hash)",
+        type: "media",
+        value: ''
+      })
     }
     return {
       key: property.key,
@@ -157,7 +173,26 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       label: property.label
     };
   }
-  //Video 
+  else if (property.type === PropertyType.TextArray) {
+    let data = (property.value as [string])?.map((item:string) => {
+      return {
+        format: "string",
+        type: "text",
+        value: item
+      }
+    }) || [{
+      format: "string",
+      type: "text",
+      value: ''
+    }]
+    return {
+      key: property.key,
+      type: (property.type as PropertyType.TextArray),
+      data: data,
+      label: property.label
+    };
+  }
+  //Video
   else {
     return {
       data: {
@@ -197,6 +232,8 @@ function formatApiProperty2Local(property: any, parent: Unit): Property {
     local.value = property.data
   } else if (property.type === PropertyType.Audio) {
     local.value = property.data
+  } else if (property.type === PropertyType.TextArray) {
+    local.value = property.data.map((item: {value: string}) => item.value);
   }
   return local;
 }