最新版本，修复bug

wzp

2022-03-08 1f478b4b033d518f6de21f931d828d2a175b2a3e

 assetMgtH5/pages/assets/scrapped.vue

@@ -1,4 +1,3 @@
<!-- 资产报废 -->
<template>
   <view>
      <view class="">
@@ -7,6 +6,41 @@
             <block slot="content">资产报废</block>
         </cu-custom>
      </view>
		
      <view class="contentBox">
         <u--form labelPosition="left">
            <u-form-item label="资产名称:" labelWidth="80"  borderBottom>
               <u--input v-model="model1.devInfo.name" border="none"></u--input>
            </u-form-item>
				
            <u-form-item label="资产编号:" labelWidth="80"  borderBottom >
               <u--input v-model="model1.devInfo.serialNumber" border="none"></u--input>
            </u-form-item>
				
         </u--form>
			
         <view class="margin-top">
            <view>拍照上传</view>
            <u-upload
                :fileList="fileList"
                @afterRead="afterRead"
                @delete="deletePic"
                multiple
                :maxCount="3"
            ></u-upload>
         </view>
			
         <view class="margin-top">
            报废原因(必填)
            <u--textarea v-model="reason" placeholder="请输入内容" ></u--textarea>
         </view>
			
         <view class="flex margin-top btnBox">
            <u-button type="primary" size="small" class="btn" @click="submit" text="报废申请"></u-button>
				
         </view>
      </view>
      <u-toast ref="uToast"></u-toast>
   </view>
</template>

@@ -14,15 +48,256 @@
   export default {
      data() {
         return {
				
            fileList:[],
            listMediaId:[],
            number:"",
            model1: {
               devInfo: {
                  id:'',
                  name: '',
                  serialNumber:"",
                  brand:'',//品牌
                  type:'',//类型
                  category:'',//类别
                  quantity:0
               },
            },
            templateId:'',//模板ID
            reason:'',//报修描述
            approvalAssetsId:'',//非必传 我的资产报修、报废、归还时填写  审批资产ID
            productCode: "" //非必传 报修报废时 填写
         }
      },
      onLoad(options) {
         this.number= options.number;
         this.getAssetsData();
         this.initTemplateData();
      },
      methods: {
         submit() {
            this.isDisabled = true;
            if (this.reason.length <= 0) {
               this.isDisabled = false;
               this.$refs.uToast.show({
                  type: 'error',
                  message: "请填写报修描述"
               });
               return;
            }
            if(this.fileList.length<=0){
               this.isDisabled = false;
               this.$refs.uToast.show({
                  type: 'error',
                  message: "请拍照上传图片！"
               });
               return;
            }
		
            this.submitApply();
         },
         
         submitApply() {
            let assets = [];
            assets.push({
               "id": this.model1.devInfo.id,
               "name": this.model1.devInfo.name,
               "serialNumber": this.model1.devInfo.serialNumber,
               "quantity": this.model1.devInfo.quantity
            })
			
            // console.log(assets);
            let data = {
               "assets": assets,
               "templateId": this.templateId,
               "reason": this.reason
            }
			
            this.$http.post('/assets/approval/submit', data)
               .then(res => {
                  // debugger;
                  if (res.data.code === 0) {
                     console.log("成功了");
                     this.reason="";
                     this.$refs.uToast.show({
                        type: 'success',
                        message: "提交成功"
                     });
                  } else {
                     this.$refs.uToast.show({
                        type: 'error',
                        message: res.data.msg
                     });
                  }
                  this.isDisabled = false;
			
               }).catch(err => {
                  this.isDisabled = false;
                  console.log(err.data)
               })
         },
			
         getAssetsData(){
            this.$http.get('/assets/approval/assetDeatail',{params:{serialNumber:this.number}})
               .then(res => {
                  // debugger;
                  if (res.data.code === 0) {
                     let data = res.data.data;
                     this.model1.devInfo.name=data.name;
                     this.model1.devInfo.serialNumber =data.serialNumber;
                     this.model1.devInfo.brand= data.brand;
                     this.model1.devInfo.type =data.typeName;
                     this.model1.devInfo.category = data.categoryName;
                     this.model1.devInfo.quantity =data.quantity;
                     this.model1.devInfo.id =data.id;
							
                     if(data["approvalAssets"])
                     {
                        this.approvalAssetsId=data.approvalAssets.id;
                     }
                     if(data["product"])
                     {
                        this.productCode=data.product.productCode;
                     }
                  }
               }).catch(err => {
                  console.log(err)
               })
         },
			
			
         // 删除图片
         deletePic(event) {
            this[`fileList`].splice(event.index, 1);
            this.listMediaId.splice(event.index,1);
            console.log(this.listMediaId.length)
         },
			
         // 新增图片
         async afterRead(event) {
            console.log(event)
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList`].length
            lists.map((item) => {
               this[`fileList`].push({
                  ...item,
                  status: 'uploading',
                  message: '上传中'
               })
            })
            for (let i = 0; i < lists.length; i++) {
               // const result = await this.uploadFilePromise(lists[i].url)
               const result = await this.uploadFile(lists[i].url)
               let item = this[`fileList`][fileListLen]
               this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
                  status: 'success',
                  message: '',
                  url: result
               }))
               fileListLen++
            }
         },
			
         //作废咯
         uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: '', // 仅为示例，非真实的接口地址
                  filePath: url,
                  name: 'file',
                  formData: {
                     user: 'test'
                  },
                  success: (res) => {
                     setTimeout(() => {
                        resolve(res.data.data)
                     }, 1000)
                  }
               });
            })
         },
			
         //上传文件
         async uploadFile(url){
            this.$http.upload('/assets/approval/upload', {
                params: {}, /* 会加在url上 */
                // #ifdef APP-PLUS || H5
                files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
                // #endif
                // #ifdef MP-ALIPAY
                fileType: 'image', // 仅支付宝小程序，且必填。
                // #endif
                filePath: url, // 要上传文件资源的路径。
                // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
                custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
                name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                // #ifdef H5 || APP-PLUS
                timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
                // #endif
                header: {},  /* 会与全局header合并，如有同名属性，局部覆盖全局 */
                formData: {}, // HTTP 请求中其他额外的 form data
                // 返回当前请求的task, options。请勿在此处修改options。非必填
                getTask: (task, options) => {
                  // task.Update((res) => {
                  //   console.log('上传进度' + res.progress);
                  //   console.log('已经上传的数据长度' + res.totalBytesSent);
                  //   console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
                  //
                  //   // 测试条件，取消上传任务。
                  //   if (res.progress > 50) {
                  //     uploadTask.abort();
                  //   }
                  // });
                }
              }).then(res => {
                 // debugger;
                // 返回的res.data 已经进行JSON.parse
               if(res.data.code===0){
                  console.log("mediaid="+res.data.data.media_id);
                  this.listMediaId.push(res.data.data.media_id);
               }
              }).catch(err => {
				
              })
         },
			
         //获取报废的模板
         initTemplateData() {
            this.$http.get('/assets/approval/getTemplate')
               .then(res => {
                  // debugger;
			
                  if (res.data.code === 0) {
                     let data = res.data.data;
                     //获取领用的模板ID
                     for (let i = 0; i < data.length; i++) {
                        if (data[i].type === 5) {
                           this.templateId = data[i].templateId;
                           break;
                        }
                     }
                     console.log('模板ID=' + this.templateId)
                  }
			
			
               }).catch(err => {
			
                  console.log(err.data)
               })
         },
      }
   }
</script>

<style>

<style lang="scss">
.contentBox {
      padding: 15px 15px 40px 15px;
   }
	
   .btnBox{
      padding: 20px 0 0 0;
      .btn{
         width: 25%;
      }
   }
</style>