3.23

程式碼量：50

部落格：1

一些模板測試程式碼uniapp(新增)

<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="form" labelWidth="80px">
    <!-- <uni-forms-item label="訪客記錄id" name="recordsId"
    >
      <uni-easyinput v-model="form.recordsId" placeholder="請輸入訪客記錄id" />
    </uni-forms-item>
    <uni-forms-item label="類目id" name="itemsId"
    >
      <uni-easyinput v-model="form.itemsId" placeholder="請輸入類目id" />
    </uni-forms-item> -->
  <uni-forms-item label="描述內容" name="itemsDescribe"
  >
    <piaoyiEditor :values="form.itemsDescribe" @changes="itemsDescribeEditorContens" :maxlength="3000" :readOnly="false"/>
  </uni-forms-item>
  <uni-forms-item label="圖片檔案" name="pictureFileId"
  >
    <uni-file-picker limit="9" @delete="pictureFileIdUploadDelete" @select="pictureFileIdUploadSelect" title="最多選擇9張圖片"></uni-file-picker>
  </uni-forms-item>
  <uni-forms-item label="影片檔案" name="videoFileId"
  >
    <uni-file-picker limit="5" file-mediatype="all" @delete="videoFileIdUploadDelete" @select="videoFileIdUploadSelect" title="最多選擇5個檔案"></uni-file-picker>
  </uni-forms-item>
      </uni-forms>
      <view class="button-group">
        <button type="default" style="padding:0 3em;font-size:14px"  class="button" @click="reset">重置</button>
        <button type="primary" style="padding:0 3em;font-size:14px"  class="button" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>


<script>
    import { addRecordsItems,getRecordsItems,listRecordsItems } from "@/api/business/recordsItems";
    import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
    import { uploadFile } from "@/api/common";
    import config from '@/config';
    const baseUrl = config.baseUrl

  // import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"

export default {
components: {
    // zxzUniDataSelect
      piaoyiEditor,
},
data() {
  return {
    //字典型別篩選options
    form: {},
    rules: {
    }
  }
},
onLoad(option) {
  //字典型別查詢
},
onReady() {
  this.$refs.form.setRules(this.rules)
},
methods: {
      //文字編輯器
      itemsDescribeEditorContens(e) {
        this.form.itemsDescribe = e.html
      },
      // 選取檔案後觸發上傳
      pictureFileIdUploadSelect(e){
        console.log('選擇檔案：',e)
        let data = {name: 'file', filePath: e.tempFilePaths[0]}
        uploadFile(data).then(response => {
          var res = this.$myUtils.addUploadData(response,this.form.pictureFileId,this.form.pictureFileIdTempFilePath,e.tempFilePaths[0])
          this.form.pictureFileId = res.fileId
          this.form.pictureFileIdTempFilePath = res.fileIdTempFilePath
          uni.showToast({ title: "上傳成功", icon: 'success' })
        })
      },
      //刪除檔案
      pictureFileIdUploadDelete(e){
        var arr = this.$myUtils.addUploadDelete(this.form.pictureFileIdTempFilePath,this.form.pictureFileId,e.tempFilePath)
        if(arr.length>0){
          this.form.pictureFileId = arr.join(",");
        }else{
          this.form.pictureFileId = ""
        }
      },
      // 選取檔案後觸發上傳
      videoFileIdUploadSelect(e){
        console.log('選擇檔案：',e)
        let data = {name: 'file', filePath: e.tempFilePaths[0]}
        uploadFile(data).then(response => {
          var res = this.$myUtils.addUploadData(response,this.form.videoFileId,this.form.videoFileIdTempFilePath,e.tempFilePaths[0])
          this.form.videoFileId = res.fileId
          this.form.videoFileIdTempFilePath = res.fileIdTempFilePath
          uni.showToast({ title: "上傳成功", icon: 'success' })
        })
      },
      //刪除檔案
      videoFileIdUploadDelete(e){
        var arr = this.$myUtils.addUploadDelete(this.form.videoFileIdTempFilePath,this.form.videoFileId,e.tempFilePath)
        if(arr.length>0){
          this.form.videoFileId = arr.join(",");
        }else{
          this.form.videoFileId = ""
        }
      },
  /* 提交*/
  submit() {
    console.log(this.form)
    this.$refs.form.validate().then(res => {
      addRecordsItems(this.form).then(response => {
        this.$modal.msgSuccess("新增成功")
        setTimeout(() => {
          // 返回到上一級父頁面
          this.$tab.navigateBack();
        },500)
      })
    })
  },
  /* 表單重置*/
  reset(){
    this.form = {};
  }
}
}
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }
  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }
</style>