fix:立行立改Uniapp小程序新建项目

quanyawei

2023-10-20 d8b41fff43a2cee6a8f714ffa807623b15803786

 pages/actionChange/components/rectificationInfor.vue

New file
@@ -0,0 +1,263 @@
<template>
   <view class="">
      <!-- 整改信息 -->
      <view class="workOrderDetail">
         <view class="headerCont">
            <p class="title">整改信息</p>
         </view>
         <u-line color="#bbb" />
         <view>
            <view class="mainContent">
               <u--form labelPosition="left" label-width="70" :model="form" :border-bottom="false" :rules="rules"
                  ref="uForm">
                  <view class="formItemContent">
                     <u-form-item label="是否整改:" required :border-bottom="false">
                        <view class="" v-if="pageState">
                           {{ dictObj.yesOrNo[basicInfor.isChange] ||''}}
                        </view>
                        <u-radio-group v-else v-model="form.isChange" @change="radioGroupChange">
                           <u-radio :key="index" v-for="(item, index) in list"
                              :custom-style="{marginRight: '8px'}" :label="item.name" :name="item.value" />
                        </u-radio-group>
                     </u-form-item>
                  </view>
                  <view class="formItemContent">
                     <u-form-item label="整改人:" prop="changeName" :border-bottom="false" required>
                        <view class="" v-if="pageState">
                           {{ basicInfor.changeName ||''}}
                        </view>
                        <u-input v-else v-model="form.changeName" border="none" placeholder="请输入" type="text" />
                     </u-form-item>
                  </view>
                  <view class="formItemContent">
                     <u-form-item label="整改反馈" prop="changeDescribe" :border-bottom="false" required>
                        <view class="" v-if="pageState">
                           {{ basicInfor.changeDescribe ||''}}
                        </view>
                        <u--textarea v-else v-model="form.changeDescribe" border="none" placeholder="请输入内容" />
                     </u-form-item>
                  </view>
						
                  <view class="formItemContent">
                     <u-form-item label="相关附件" :border-bottom="false">
                        <view class="fileBox" v-if="pageState">
                           <cl-upload v-model="fileList" :add="false" :action="`''`" cloud-type="other"
                              :remove="false" />
                        </view>
                        <view class="fileBox" v-else>
                           <fileUpload class="rowTipContenetAll" :sys-code="sysCode"
                              @handleFile="handleFile" />
                        </view>
                     </u-form-item>
                  </view>
               </u--form>
            </view>
         </view>
      </view>
   </view>
</template>
<script>
   import fileUpload from '../components/fileUpload.vue'
   export default {
      components: {
         fileUpload
      },
      props: {
         basicInfor: {
            type: Object,
            default: () => {}
         },
      },
      watch: {
         basicInfor: {
            handler: function(newValue, oldValue) {
               // 响应数据变化
               this.basicInfor = newValue
            },
            deep: true
         }
      },
      computed: {
         pageState() {
            return this.basicInfor.pageState === 'view' || this.basicInfor.state >= 30
         }
      },
      data() {
         return {
            sysCode: '1010202',
            list: [{
                  name: '是',
                  value: 0,
               },
               {
                  name: '否',
                  value: 1,
               },
            ],
            form: {
               isChange: 0,
               changeName: '',
               changeDescribe: '',
            },
            dictObj: this.$storage.getJson('dictObj'),
            fileList: [],
            fileBaseList: [],
            baseUrl: this.$storage.get('baseUrl'),
            rules: {
               'changeName': {
                  required: true,
                  message: '请输入',
                  trigger: ['blur', 'change']
               },
               'changeDescribe': {
                  required: true,
                  message: '请输入',
                  trigger: ['blur', 'change']
               },
            }
         }
      },
      onLoad: function(option) {
         //option为object类型，会序列化上个页面传递的参数
         console.log(option) //打印出上个页面传递的参数。
      },
      onReady() {
         //onReady 为uni-app支持的生命周期之一
         this.$refs.uForm.setRules(this.rules)
      },
      mounted() {
         if (this.basicInfor.fileChangeList && this.basicInfor.fileChangeList.length > 0) {
            this.basicInfor.fileChangeList.forEach(item => {
               let name = item.fileType === 1 ? 'name.png' : 'name.mp4'
               this.fileList.push(`${this.baseUrl}/file/preview/${item.fileId}?${name}`) // 原图
            })
            console.log('this.fileList', this.basicInfor.fileBaseList)
            console.log('this.fileList', this.fileList)
         }
      },
      methods: {
         radioGroupChange(e) {
            console.log('radioGroupe，e', e)
         },
         handleFile(data) {
            this.fileBaseList = data
            this.form.fileChangeList = this.fileBaseList
         },
         formVali() {
            return new Promise((resolve, reject) => {
               if (!this.pageState) {
                  this.$refs.uForm.validate().then(res => {
                        resolve(true)
                     })
                     .catch(errors => {
                        reject(false)
                        uni.$u.toast('校验失败')
                     })
               } else {
                  resolve(true)
               }

            });

         }
      },
   }
</script>

<style scoped lang="scss">
   /deep/.u-line {
      margin: 19.23rpx 0px !important;
   }

   .workOrderDetail {
      border: 1px solid #bbb;
      border-radius: 5px;
      min-height: 288.46rpx;
      margin: 19.23rpx;
      padding: 19.23rpx;
      color: #101010;
      font-weight: 700;
      font-size: 26.92rpx;

      .headerCont {
         display: flex;
         justify-content: space-between;
         font-size: 15px;
      }

      .mainContent {
         margin-bottom: 10px;
         font-weight: 500;

         .rowTip {
            padding: 8px 0;
            border-bottom: 1px dashed #bbb;

            .wholeLine {
               display: flex;
               width: 100%;
               align-items: center;

               .rowTipContenetLabel {
                  min-width: 125rpx;
               }
            }

            .rowTipContenetAll {
               width: calc(100% - 125rpx; );
            }

            .rowTipContenet {
               width: 50%;
               text-align: left;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;

               .butsName {
                  display: inline-block;
                  margin-left: 19.23rpx;
                  color: #1990ff;
               }
            }
         }

         .rowTipContenet_right {
            text-align: right !important;
         }
      }
   }

   .formItemContent {
      /deep/.u-form-item {
         padding: 8px 0;
         border-bottom: 1px dashed #bbb;
      }

      /deep/.u-form-item__body,
      /deep/.u-textarea {
         padding: 0 !important;
      }

      /deep/.u-form-item__body__left__content__label,
      /deep/.u-radio__text {
         font-size: 13px !important;
      }
   }

   .fileBox {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      position: relative;
      width: 100%;
      height: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
   }
</style>