新增语音上传

public/sy/index.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="./sy/favicon.ico">
   <title>商品溯源</title>
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_1321935_fwj9csfa5yd.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_1321935_944xvawjvfw.css">
   <script src="https://cdn.bootcss.com/tinymce/4.7.4/tinymce.min.js"></script>
 </head>
 

src/components/editTemplate/PropertyItem.vue

@@ -40,6 +40,10 @@
       v-else-if="property.type === PropertyType.Video"
       :property="property"
     />
+    <audio-Form
+      v-else-if="property.type === PropertyType.Audio"
+      :property="property"
+    />
   </div>
 </template>
 
@@ -54,6 +58,7 @@ import VideoForms from "@/components/editTemplate/form/VideoForm.vue";
 import BaseForm from "@/components/editTemplate/form/BaseForm.vue";
 import DateForm from "@/components/editTemplate/form/DateForm.vue";
 import EditorForm from "@/components/editTemplate/form/EditorForm.vue";
+import AudioForm from "@/components/editTemplate/form/AudioForm.vue";
 @Component({
   components: {
     BaseForm,
@@ -63,6 +68,7 @@ import EditorForm from "@/components/editTemplate/form/EditorForm.vue";
     EditorForm,
     PDFForms,
     VideoForms,
+    AudioForm,
   },
 })
 export default class PropertyItem extends Vue {

src/components/editTemplate/SetBar.vue

@@ -71,6 +71,16 @@
         </div>
       </set-select-item>
       <set-select-item
+        label="上传语音"
+        :selected="type === PropertyType.Audio"
+        :disabled="selectedDisabled"
+        @click.native="handleSelect(PropertyType.Audio)"
+      >
+        <div class="menu-item-example menu-item-example_up">
+          <i class="iconfont iconshangchuanwenjianbeifen"></i>
+        </div>
+      </set-select-item>
+      <set-select-item
         label="编辑器"
         :selected="type === PropertyType.Editor"
         :disabled="selectedDisabled"
@@ -186,15 +196,6 @@ export default class SetBar extends Vue {
   }
 }
 </script>
-<style type="text/css">
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>
 <style scoped lang="less">
 .set_bar {
   position: relative;

src/components/editTemplate/form/AudioForm.vue

 <template>
-  <div class=""></div>
+  <div class="base_form">
+    <div class="label">
+      <img class="pre-tag" src="../../../assets/images/template/pre-tag.png" />
+      <div class="label-text">{{ property.label }}</div>
+    </div>
+    <div>
+      <div class="up" @click="upFile">
+        <i class="iconfont iconyinpin2"></i>
+        上传音频
+      </div>
+      <div class="show" v-for="(item, index) in localObjects" :key="index">
+        <i class="iconfont iconyinpin-copy"></i>
+        <p>{{ item.name }}</p>
+        <div class="show-rigth">
+          <i class="iconfont iconxingzhuang2"></i>上传成功
+          <i class="iconfont iconshanchu1" @click="deleteAudios(index)"></i>
+        </div>
+      </div>
+    </div>
+    <input
+      type="file"
+      hidden
+      ref="inputDom"
+      accept="audio/*"
+      @change="fileChange"
+    />
+  </div>
 </template>
 
 <script>
-export default {};
+import { GO_URLS } from "@/config/URLS";
+export default {
+  props: ["property"],
+  data() {
+    return {
+      localObjects: [],
+      localHash: [], // 本地hash
+    };
+  },
+  mounted() {
+    if (this.property.value.length > 0) {
+      let hashes = [];
+      for (let index = 0; index < this.property.value.length; index++) {
+        const element = this.property.value[index];
+        hashes.push(element.value);
+      }
+      if (hashes.length === this.property.value.length) {
+        this.getAudios(hashes);
+      }
+    }
+  },
+  watch: {
+    localHash: {
+      handler(newV, oldV) {
+        this.property.value = newV;
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    deleteAudios(index) {
+      this.localHash.splice(index, 1);
+      this.localObjects.splice(index, 1);
+      this.$message({
+        type: "success",
+        message: "删除成功!",
+      });
+    },
+    // 上传文件
+    upFile() {
+      this.$refs.inputDom.click();
+    },
+    //  获取旧文件
+    async getAudios(hashes) {
+      const data = await this.$ajax({
+        type: "post",
+        params: { hashes },
+        url: GO_URLS.getFiles,
+      });
+      if (data) {
+        this.localObjects = data.data.files;
+        for (let index = 0; index < data.data.files.length; index++) {
+          const element = data.data.files[index];
+          this.localHash.push(element.hash);
+        }
+      }
+    },
+    async fileChange(e) {
+      const file = e.target.files[0];
+      if (!file) return;
+      if (file.size > 10485760) {
+        this.$message({
+          message: "上传文件超过最大限制",
+          type: "warning",
+        });
+        return;
+      }
+      const formData = new FormData();
+      formData.append("file_data", file);
+      const res = await this.$ajax({
+        type: "post",
+        url: GO_URLS.upload + `?file_type=mp3`,
+        params: formData,
+      });
+      if (res) {
+        // 上传成功
+        this.$message({
+          message: "上传成功",
+          type: "success",
+        });
+        this.localHash.push(res.data.hash);
+        this.localObjects.push(res.data);
+      }
+    },
+  },
+};
 </script>
 
-<style>
+<style lang="less" scoped>
+.base_form {
+  flex-shrink: 0;
+  padding-left: 18px;
+  font-size: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  display: flex;
+  justify-content: flex-start;
+}
+.label {
+  display: inline-block;
+  width: 150px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: #797d84;
+  line-height: 44px;
+  font-size: 14px;
+  font-weight: 300;
+  position: relative;
+}
+.pre-tag {
+  position: absolute;
+  left: -30px;
+  top: 14px;
+  display: none;
+}
+.label-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.up {
+  width: 151px;
+  height: 36px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+  line-height: 36px;
+  color: rgba(121, 125, 132, 1);
+  background: #f6f6f7;
+  border: 1px solid #f0f1f5;
+  .iconyinpin2 {
+    font-size: 24px;
+    vertical-align: sub;
+  }
+}
+.show {
+  line-height: 1;
+  padding-top: 20px;
+  padding-bottom: 4px;
+  width: 800px;
+  p {
+    font-size: 14px;
+    margin: 0;
+    display: inline-block;
+    padding: 0;
+    font-weight: 400;
+    color: #353535;
+  }
+  .iconyinpin-copy {
+    color: #33c8ff;
+    font-size: 16px;
+    margin-right: 6px;
+  }
+  .show-rigth {
+    float: right;
+    font-size: 14px;
+    .iconshanchu1 {
+      color: #b6b5ba;
+      font-size: 12px;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+    .iconxingzhuang2 {
+      margin-right: 2px;
+      color: #33c724;
+    }
+  }
+}
 </style>
\ No newline at end of file

src/components/editTemplate/form/PDFForms.vue

@@ -6,7 +6,7 @@
       <div class="label-text" :title="label">{{ label }}</div>
     </div>
     <!-- 显示区域 -->
-    <div v-if="pdfSHOW">
+    <div>
       <div class="up" @click="upFile">
         <i class="iconfont iconpdf1"></i>
         上传PDF
@@ -21,11 +21,11 @@
       </div>
     </div>
     <!-- 上传区域 -->
-    <div class="upload-area" @click="upFile" v-else>
+    <!-- <div class="upload-area" @click="upFile" v-else>
       <i class="iconfont iconpdf icon"></i>
       <p>上传PDF</p>
       <p>大小不大于10M</p>
-    </div>
+    </div> -->
     <input
       type="file"
       hidden
@@ -54,7 +54,6 @@ export default {
     // 数据回显
     if (this.property.value.length > 0) {
       this.pdfSHOW = true;
-
       let hashes = [];
       for (let index = 0; index < this.property.value.length; index++) {
         const element = this.property.value[index];
@@ -112,7 +111,6 @@ export default {
           type: "success",
         });
         this.localHash.push(res.data.hash);
-
         this.pdfSHOW = true;
         this.localObjects.push(res.data);
       }
@@ -126,7 +124,6 @@ export default {
       });
       if (data) {
         this.localObjects = data.data.files;
-
         for (let index = 0; index < data.data.files.length; index++) {
           const element = data.data.files[index];
           this.localHash.push(element.hash);

src/components/newProductList/copyGoods.vue

@@ -49,7 +49,7 @@ export default {
       newNote.evidenceName = this.name;
       for (let index = 0; index < newDetail.length; index++) {
         const element = newDetail[index];
-        console.log(element);
+      
         if (element.data && element.data.length === 0) {
           newDetail.splice(index, 1);
         }

src/entry/sy/App.vue

@@ -23,7 +23,10 @@ button {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
-
+* {
+  margin: 0;
+  padding: 0;
+}
 a:hover,
 a:visited,
 a:active,

src/plugins/Template.ts

@@ -137,6 +137,26 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       label: property.label
     };
   }
+  else if (property.type === PropertyType.Audio) {
+    let data = {}
+    if (property.value) {
+      let dd = Array.from(property.value);
+      data = (dd as any).map((value: any) => ({
+        format: "hash(hash)",
+        type: "media",
+        value: value
+      }))
+    }
+    else {
+      data = {}
+    }
+    return {
+      key: property.key,
+      type: (property.type as PropertyType.Audio),
+      data: data,
+      label: property.label
+    };
+  }
   //Video 
   else {
     return {
@@ -175,6 +195,8 @@ function formatApiProperty2Local(property: any, parent: Unit): Property {
     local.value = property.data
   } else if (property.type === PropertyType.Video) {
     local.value = property.data
+  } else if (property.type === PropertyType.Audio) {
+    local.value = property.data
   }
   return local;
 }

src/plugins/types.ts

@@ -2,7 +2,7 @@ export interface RootUnit { // 一级单元
   key: string;
   data: Array<TemplateProperty | TmplSelectProperty | UnitProperty>;
   type?: number;
-  label:string
+  label: string
 }
 
 export enum PropertyType {
@@ -14,7 +14,8 @@ export enum PropertyType {
   Select = 5, //选择
   Date = 6, //时间戳
   Editor = 7, //编辑器
-  Video = 8
+  Video = 8, //视频
+  Audio = 9 // 音频
 }
 
 //to showstatus 
@@ -32,7 +33,7 @@ export interface TemplateProperty extends Property {
 }
 
 export interface TemInputProperty extends Property {
-  type: PropertyType.Input | PropertyType.Date ;
+  type: PropertyType.Input | PropertyType.Date;
   value: string;
   data: object
 }

src/views/template/editTemplate.vue

@@ -572,6 +572,7 @@ export default class editTemplate extends Vue {
     await this.fileHandler();
     var newDetail = new Array();
     newDetail = formatApiJson(this.rootUnitList);
+    // return
     // 更新ext数据
     for (let index = 0; index < newDetail.length; index++) {
       const element = newDetail[index];