3.24

代码量100

博客：1

修改的代码

<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="form" labelWidth="80px">
            <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" :value="pictureFileIdFileLists" @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" :value="videoFileIdFileLists" @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="cancel">取消</button>
        <button type="primary" style="padding:0 3em;font-size:14px"  class="button" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>


<script>
import { updateRecordsItems,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

export default {
  components: {
        piaoyiEditor
  },
  data() {
    return {
    //字典类型筛选options
    pictureFileIdFileLists:[],
    videoFileIdFileLists:[],
    form: {},
    rules: {
      }
    }
  },
onLoad(option) {
  //字典类型查询
  //上传演示详细
  this.getRecordsItemsInfo(option.id);
},
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    /* 获取上传演示详情*/
    getRecordsItemsInfo(id) {
      getRecordsItems(id).then(response => {
        this.form = response.data;
        let pictureFileIdUrls = response.data.pictureUrl;
        let pictureFileIds = response.data.pictureFileId;
        if(pictureFileIdUrls && pictureFileIds){
            this.$myUtils.editUploadEcho(baseUrl,pictureFileIdUrls,pictureFileIds,this.pictureFileIdFileLists)
        }
        let videoFileIdUrls = response.data.videoUrl;
        let videoFileIds = response.data.videoFileId;
        if(videoFileIdUrls && videoFileIds){
            this.$myUtils.editUploadEcho(baseUrl,videoFileIdUrls,videoFileIds,this.videoFileIdFileLists)
        }
        
      })
    },
//文本编辑器
itemsDescribeEditorContens(e) {
  this.form.itemsDescribe = e.html
},
// 选取文件后触发上传
pictureFileIdUploadSelect(e){
  console.log('选择文件：',e)
  let data = {name: 'file', filePath: e.tempFilePaths[0]}
  uploadFile(data).then(response => {
    if(!this.form.pictureFileId){
      this.form.pictureFileId = response.data[0].id
    }else{
      this.form.pictureFileId = this.form.pictureFileId + ","+response.data[0].id
    }
    uni.showToast({ title: "上传成功", icon: 'success' })
  })
},
//删除文件id
pictureFileIdUploadDelete(e){
  this.form.pictureFileId = this.$myUtils.editUploadDelete(this.form.pictureFileId,e.tempFile.fileId)
},
// 选取文件后触发上传
videoFileIdUploadSelect(e){
  console.log('选择文件：',e)
  let data = {name: 'file', filePath: e.tempFilePaths[0]}
  uploadFile(data).then(response => {
    if(!this.form.videoFileId){
      this.form.videoFileId = response.data[0].id
    }else{
      this.form.videoFileId = this.form.videoFileId + ","+response.data[0].id
    }
    uni.showToast({ title: "上传成功", icon: 'success' })
  })
},
//删除文件id
videoFileIdUploadDelete(e){
  this.form.videoFileId = this.$myUtils.editUploadDelete(this.form.videoFileId,e.tempFile.fileId)
},
/* 提交*/
submit() {
  this.$refs.form.validate().then(res => {
    updateRecordsItems(this.form).then(response => {
      this.$modal.msgSuccess("编辑成功")
      setTimeout(() => {
        // 返回到上一级父页面
        this.$tab.navigateBack();
      },500)
    })
  })
},
/* 取消*/
cancel(){
  this.$tab.navigateBack();
}
}
}
</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>