fix:小程序初版

quanyawei

2023-10-27 52d463e03c1f074099ed8e8a6b7c3ddde52d2708

 pages/actionChange/components/basicInfor.vue

New file
@@ -0,0 +1,251 @@
<template>
   <view class="">
      <!-- 基础信息 -->
      <view class="workOrderDetail">
         <view class="headerCont">
            <p class="title">基本信息</p>
            <p>单号：{{ basicInfor.allocationNum }}</p>
         </view>
         <u-line color="#bbb" />
         <view>
            <view class="mainContent">
               <p class="rowTip">
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">上报时间:</text>
                        <text class="rowTipContenetAll">
                           {{ basicInfor.escalationTime ||'' }}
                        </text>
                     </view>
                  </view>
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">上报人:</text>
                        <text class="rowTipContenetAll">{{ basicInfor.escalationName ||'' }}</text>
                     </view>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">责任主体:</text>
                        <text class="rowTipContenetAll">
                           {{ unitName }}
                        </text>
                     </view>
                  </view>
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">污染分类:</text>
                        <text class="rowTipContenetAll">
                           {{ polluteType }}
                        </text>
                     </view>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">排查方式:</text>
                        <!-- this.dictObj.investigationEnum[val.investigationType] -->
                        <text class="rowTipContenetAll">
                           {{ dictObj.investigationEnum[basicInfor.investigationType] ||'' }}
                        </text>
                     </view>
                  </view>
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">整改类型:</text>
                        <text class="rowTipContenetAll">
                           <text>{{ dictObj.changeEnum[basicInfor.changeType]||'' }}</text>
                           <!-- <text>{{ basicInfor.residueDay||'' }}</text> -->
                        </text>
                     </view>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="rowTipContenet">
                     <view class="wholeLine">
                        <text class="rowTipContenetLabel">上报单位:</text>
                        <text class="rowTipContenetAll">
                           {{ escalationUnitName }}
                        </text>
                     </view>
                  </view>
               </p>
               <p class="rowTip">
                  <view class="wholeLine">
                     <text class="rowTipContenetLabel">污染位置:</text>
                     <text class="rowTipContenetAll">{{ basicInfor.pollutePosition ||'' }}</text>
                  </view>
               </p>
               <view class="formItemContent">
                  <u--form labelPosition="left" label-width="75" :border-bottom="false" ref="uForm">
                     <u-form-item border-bottom label="相关附件:" :border-bottom="false">
                        <view class="fileBox">
                           <cl-upload v-model="fileList" :add="false" :action="`''`" cloud-type="other"
                              :remove="false" />
                        </view>
                     </u-form-item>
                  </u--form>
               </view>
            </view>
         </view>
      </view>
   </view>
</template>
<script>
   export default {
      props: {
         basicInfor: {
            type: Object,
            default: () => {}
         },
      },
      data() {
         return {
            polluteList: [],
            unitList: [],
            dictObj: JSON.parse(uni.getStorageSync('dictObj') || '[]'),
            fileList: [],
            baseUrl: this.$storage.get('baseUrl'),
         }
      },
      computed: {
         unitName() {
            let data = ''
            if (this.basicInfor.unitId && this.unitList.length > 0) {
               data = this.unitList && this.unitList.find(a => Number(a.unitId) === Number(this.basicInfor.unitId))
                  .unitName
            }
            return data
         },
         escalationUnitName() {
            let data = ''
            if (this.basicInfor.unitId && this.unitList.length > 0) {
               data = this.unitList && this.unitList.find(a => Number(a.unitId) === Number(this.basicInfor
                  .escalationUnitId)).unitName
            }
            return data
         },
         polluteType() {
            let data = ''
            console.log('this.polluteList', this.polluteList)
            console.log('this.basicInfor.polluteType', this.basicInfor.polluteType)
            if (String(this.basicInfor.polluteType) && this.polluteList.length > 0) {
               data = this.polluteList.find(a => Number(a.dataKey) === Number(this.basicInfor.polluteType)).dataValue
            }
            console.log('data', data)
            return data
         }
      },
      watch: {
         basicInfor: {
            handler: function(newValue, oldValue) {
               // 响应数据变化
               this.basicInfor = newValue
            },
            deep: true
         }
      },
      onLoad: function(option) {
         //option为object类型，会序列化上个页面传递的参数
         console.log(option) //打印出上个页面传递的参数。
      },
      created() {
         this.getUnitList()
      },
      mounted() {
         // 获取责任单位list
         if (this.basicInfor.fileBaseList && this.basicInfor.fileBaseList.length > 0) {
            this.basicInfor.fileBaseList.forEach(item => {
               let name = item.fileType === 1 ? 'name.png' : ''
               this.fileList.push(`${this.baseUrl}/file/preview/${item.fileId}?${name}`) // 原图
            })
            console.log('this.basicInfor.fileList', this.basicInfor.fileBaseList)
            console.log('this.fileList', this.fileList)
         }
      },
      methods: {
         getUnitList() {
            this.$http.httpGet('/allocation/unit').then(res => {
               this.unitList = res.data
               this.getContaminateList()
            })
         },
         getContaminateList() {
            this.$http.httpGet('/allocation/contaminate').then(res => {
               this.polluteList = res.data
            })
         },
      },
   }
</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: 30.77rpx;

      .headerCont {
         display: flex;
         justify-content: space-between;
         font-size: 30.77rpx;
      }

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

         .rowTip {
            display: flex;
            padding: 5px 0;
            border-bottom: 1px dashed #bbb;

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

               .rowTipContenetLabel {
                  min-width: 144.23rpx;
                  font-size: 28.85rpx;
                  text-align: left;
               }

               .rowTipContenetAll {
                  font-size: 28.85rpx;
                  width: calc(100% - 144.23rpx);
               }
            }

            .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;
         }
      }
   }
</style>