申请记录页面

wjt

2024-06-20 a81784463f06d04e3b94b6ae6b03f12927973808

 policy/reportDetails/reportDetails.vue

@@ -1,6 +1,53 @@
<template>
   <view>
		
   <view class="page-box">
      <view class="box">
         <view class="form">
            <view class="form-item">
               <view class="label">执法主题</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法对象</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法时间</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法类型</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法人员</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
            <view class="form-item">
               <view class="label">执法部门</view>
               <view class="input">24年5月份消防突击检查</view>
            </view>
         </view>
      </view>
      <view class="box">
         <view class="form-input">
            <view class="form-input-item">
               <view class="form-label require">执法结果</view>
               <u-textarea count v-model="form.reasoon" maxlength="500"></u-textarea>
            </view>
            <view class="form-input-item">
               <view class="form-label require">执法照片</view>
               <view>
                  <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                     :maxCount="10"></u-upload>
               </view>
            </view>
         </view>
      </view>
      <view class="down">
         <view class="button">
            上报记录
         </view>
      </view>
   </view>
</template>

@@ -8,15 +55,65 @@
   export default {
      data() {
         return {
				
            form: {
               reasoon: ''
            },
            fileList1: []
         }
      },
      methods: {
			
         // 删除图片
         deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1)
         },
         // 新增图片
         async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList${event.name}`].length
            lists.map((item) => {
               this[`fileList${event.name}`].push({
                  ...item,
                  status: 'uploading',
                  message: '上传中'
               })
            })
            for (let i = 0; i < lists.length; i++) {
               const result = await this.uploadFilePromise(lists[i].url)
               let item = this[`fileList${event.name}`][fileListLen]
               this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                  status: 'success',
                  message: '',
                  url: result
               }))
               fileListLen++
            }
         },
         uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
                  filePath: url,
                  name: 'file',
                  formData: {
                     user: 'test'
                  },
                  success: (res) => {
                     setTimeout(() => {
                        resolve(res.data.data)
                     }, 1000)
                  }
               });
            })
         },
      }
   }
</script>

<style>

   page {
      background-color: #F4F4F4;
   }
</style>
<style lang="scss" scoped>
   @import "./reportDetails.scss";
</style>