自建房扫码修改，新增自建房扫码页面，房屋详情样式修改，场所采集标签选择修改

Lou

2023-12-22 5d2924f5e45868a9c05d122c7b2a4fb7ca078811

 subPackage/workbench/views/cscj.vue

@@ -1,156 +1,155 @@
<template>

   <view class="container">

      <view class="wrap">

			
		
      <u-form labelWidth="70" :model="form" :rules="rules" ref="form">

         <view class="item">

            <!-- u-form-item v-if="!currentId" @click="showPicker = true" class="form-item" labelWidth="100" label="楼栋:"





         <u-form labelWidth="70" :model="form" :rules="rules" ref="form">

            <view class="item">

               <!-- u-form-item v-if="!currentId" @click="showPicker = true" class="form-item" labelWidth="100" label="楼栋:"

               :required="isRequired" :disabled="isDisabled" prop="buildingCode">

               <u--input border="none" disabledColor="#ffffff" v-model="form.building" placeholder="请选择">

               </u--input>

               <u-icon slot="right" name="arrow-right"></u-icon>

            </u-form-item> -->

            <view class="box-title">

               <box-title title="基础信息"></box-title>

            </view>

            <u-form-item class="form-item" labelWidth="100" label="场所名称:" :required="isRequiredPlace"

               :disabled="isDisabled" prop="placeName">

               <u--input border="none" v-model="form.placeName" placeholder="请输入">

               </u--input>

            </u-form-item>



            <u-form-item @click="popup" class="form-item" labelWidth="100" label="标签:" :required="isRequired"

               :disabled="isDisabled" prop="label">

               <u--input border="none" disabled disabledColor="#ffffff" placeholder="请选择">

               </u--input>

               <u-icon slot="right" name="arrow-right"></u-icon>

            </u-form-item>

            <view v-if="showLabelList.length" class="label" style="border-bottom:1px solid eff1f3;">

               <view v-for="(item,index) in showLabelList" :key="index" class="activeLabel">

                  <u-tag :closable="currentId?false:true" :show="!item.isClose" size="mini" @close="delTag(item)"

                     :text="item.text"></u-tag>

               <view class="box-title">

                  <box-title title="基础信息"></box-title>

               </view>

            </view>

               <u-form-item class="form-item" labelWidth="100" label="场所名称:" :required="isRequiredPlace"

                  :disabled="isDisabled" prop="placeName">

                  <u--input border="none" v-model="form.placeName" placeholder="请输入">

                  </u--input>

               </u-form-item>



            <u-form-item class="form-item" labelWidth="100" label="备注:" prop="remark">

               <u--input border="none" v-model="form.remark" placeholder="请输入">

               </u--input>

            </u-form-item>

               <u-form-item @click="popup" class="form-item" labelWidth="100" label="标签:" :required="isRequired"

                  :disabled="isDisabled" prop="label">

                  <u--input border="none" disabled disabledColor="#ffffff" placeholder="请选择">

                  </u--input>

                  <u-icon slot="right" name="arrow-right"></u-icon>

               </u-form-item>

               <view v-if="showLabelList.length" class="label" style="border-bottom:1px solid eff1f3;">

                  <view v-for="(item,index) in showLabelList" :key="index" class="activeLabel">

                     <u-tag :closable="currentId?false:true" :show="!item.isClose" size="mini"

                        @close="delTag(item)" :text="item.text"></u-tag>

                  </view>

               </view>



            <!-- <u-form-item class="form-item" labelWidth="100" label="经纬度:" prop="location">

               <u-form-item class="form-item" labelWidth="100" label="备注:" prop="remark">

                  <u--input border="none" v-model="form.remark" placeholder="请输入">

                  </u--input>

               </u-form-item>



               <!-- <u-form-item class="form-item" labelWidth="100" label="经纬度:" prop="location">

               <u--input border="none" disabled disabledColor="#ffffff" v-model="form.jwd" placeholder="请输入">

               </u--input>

            </u-form-item> -->

				
				
            <u-form-item label="经纬度:" prop="location">

               <view class="address-row flex">

                  <view class="address-content f-28" v-if="form.jwd">

                     {{form.jwd}}





               <u-form-item label="经纬度:" prop="location" labelWidth="100">

                  <view class="address-row flex">

                     <view class="address-content f-28" v-if="form.jwd">

                        {{form.jwd}}

                     </view>

                     <view class="address-content f-28" v-if="!form.jwd" style="color: #c0c4cc;">

                        请选择地址

                     </view>

                     <view class="location-btn c-main f-24" @click="getLocation()">

                        获取地址

                     </view>

                  </view>

                  <view class="address-content f-28 c-99" v-if="!form.jwd">

                     请选择地址

                  </view>

                  <view class="location-btn c-main f-24" @click="getLocation()">

                     获取地址

                  </view>

               </u-form-item>

            </view>



            <view class="item">

               <view class="box-title">

                  <box-title title="负责人信息"></box-title>

               </view>

            </u-form-item>

				
				
         </view>

               <u-form-item class="form-item" labelWidth="100" :required="isRequired" :disabled="isDisabled"

                  label="场所负责人:" prop="username">

                  <u--input border="none" v-model="form.username" placeholder="请输入">

                  </u--input>

               </u-form-item>

               <u-form-item class="form-item" labelWidth="100" :required="isRequired" :disabled="isDisabled"

                  label="手机号:" prop="phone">

                  <u--input border="none" v-model="form.phone" placeholder="请输入">

                  </u--input>

               </u-form-item>

            </view>



            <view class="item pic" v-if="(currentId && form.images.length) || !currentId ">

               <view class="box-title">

                  <box-title title="场所照片"></box-title>

               </view>

               <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"

                  :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"

                  :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"

                  uploadIcon="/static/icon/upload.png" @afterRead="afterReadImg" @delete="deletePic"

                  :disabled="currentId?true:false" :deletable="currentId?false:true">

               </u-upload>

            </view>



         </u-form>







         <view class="item">

            <view class="box-title">

               <box-title title="负责人信息"></box-title>

               <box-title title="综治网格">

                  <template slot="titleMore">

                     <view class="title-more">

                        <view class="red item"></view>

                        <view class="orange item">85.9</view>

                        <view class="green item"></view>

                     </view>

                  </template>

               </box-title>

            </view>

            <u-form-item class="form-item" labelWidth="100" :required="isRequired" :disabled="isDisabled"

               label="场所负责人:" prop="username">

               <u--input border="none" v-model="form.username" placeholder="请输入">

               </u--input>

            </u-form-item>

            <u-form-item class="form-item" labelWidth="100" :required="isRequired" :disabled="isDisabled"

               label="手机号:" prop="phone">

               <u--input border="none" v-model="form.phone" placeholder="请输入">

               </u--input>

            </u-form-item>

            <lineItem :dataInfo="comprehensiveData.basic">

            </lineItem>



            <lineItem :dataInfo="comprehensiveData.scene">

               <template v-slot:pic="{scope}">

                  <view class="image" v-if="scope.value !== ''">

                     <u--image @click="imgPreview(scope.value)" width="200rpx" height="200rpx"

                        :src="scope.value"></u--image>

                  </view>

                  <view class="" v-else>

                     {{scope.value}}

                  </view>

               </template>

            </lineItem>

         </view>



         <view class="item pic" v-if="(currentId && form.images.length) || !currentId ">





         <view class="item">

            <view class="box-title">

               <box-title title="场所照片"></box-title>

               <box-title title="公安网格">

                  <template slot="titleMore">

                     <view class="title-more">

                        <view class="red item"></view>

                        <view class="orange item">85.9</view>

                        <view class="green item"></view>

                     </view>

                  </template>

               </box-title>

            </view>

            <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"

               :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"

               :capture="uploadConfig.capture" uploadIcon="/static/icon/upload.png" @afterRead="afterReadImg"

               @delete="deletePic" :disabled="currentId?true:false" :deletable="currentId?false:true">

            </u-upload>

         </view>

            <lineItem :dataInfo="publicData.basic">

            </lineItem>



      </u-form>







      <view class="item">

         <view class="box-title">

            <box-title title="综治网格">

               <template slot="titleMore">

                  <view class="title-more">

                     <view class="red item"></view>

                     <view class="orange item">85.9</view>

                     <view class="green item"></view>

                  </view>

               </template>

            </box-title>

         </view>

         <lineItem :dataInfo="comprehensiveData.basic">

         </lineItem>



         <lineItem :dataInfo="comprehensiveData.scene">

            <template v-slot:pic="{scope}">

               <view class="image" v-if="scope.value !== ''">

                  <u--image @click="imgPreview(scope.value)" width="200rpx" height="200rpx"

                     :src="scope.value"></u--image>

               </view>

               <view class="" v-else>

            <lineItem :dataInfo="publicData.scene">

               <template v-slot:pic="{scope}">

                  {{scope.value}}

               </view>

            </template>

         </lineItem>

      </view>







      <view class="item">

         <view class="box-title">

            <box-title title="公安网格">

               <template slot="titleMore">

                  <view class="title-more">

                     <view class="red item"></view>

                     <view class="orange item">85.9</view>

                     <view class="green item"></view>

                  </view>

               </template>

            </box-title>

            </lineItem>

         </view>

         <lineItem :dataInfo="publicData.basic">

         </lineItem>



         <lineItem :dataInfo="publicData.scene">

            <template v-slot:pic="{scope}">

               {{scope.value}}

            </template>

         </lineItem>

      </view>





      <!-- <view class="bottom">

         <!-- <view class="bottom">

         <view class="btn">

            <u-button @click="submit" type="primary" text="提交" v-if="!currentId"></u-button>

         </view>

      </view> -->

        </view>

      </view>

      <footer-btn @click="submit" v-if="!currentId" />



      <uni-popup class="citys_win popup_win" ref="uniPopup" type="bottom">

@@ -165,6 +164,10 @@
         @cancel="showPicker = false"></u-picker>





      <u-picker :show="isShowCatePicker" ref="catePicker"  keyName="categoryName"  :columns="categoryList" @confirm="confirmCategory"

         @change="changeCategory"    @cancel="isShowCatePicker = false"></u-picker>





   </view>

</template>



@@ -172,7 +175,8 @@
   import uploadMixin from "@/mixin/uploadMixin";

   import lineItem from "@/subPackage/workbench/components/lineItem.vue"

   import {

      getLabelList

      getLabelList,

      getLabelCate

   } from "@/api/label/categoryLabel.js";

   import {

      getDoorplateAddressDetail,

@@ -218,8 +222,8 @@
               placeName: "",

               username: '',

               phone: '',

               lat:'',

               lng:''

               lat: '',

               lng: ''

            },

            rules: {

               // 'buildingCode': {

@@ -366,7 +370,16 @@
            showLabelList: [],

            houseCode: "",

            currentId: "",

            addressType: 2

            addressType: 2,

            isShowCatePicker: false,

            categoryList: [

               [],

               []

            ],

            categoryIndex: [],

            firstId: "",

            secondId: "",

            categoryValue:[]

         }

      },

      watch: {

@@ -391,7 +404,6 @@
         styleIsolation: 'shared', // 解除样式隔离

      },

      onLoad(option) {

         console.log(option)

         const {

            type

         } = option

@@ -413,13 +425,37 @@
               title: '详情'

            })

         }

         // this.getCategory();

			
      },

	
      onShow() {

         this.getLabel()

         // this.getLocation()

      },

		
      watch:{

			
         firstId:{

            handler(newVal,oldVal){

               if(newVal){

                  this.getCategory(2,this.firstId);

               }

            },

            immediate:true

         }

		
         // secondId:{

   //              handler(newVal,oldVal){

         //       this.getCategory(3,this.secondId);

         //    },				
         //    immediate:true

         // }  
			
      },

		
		
      methods: {



         // getBuildingDetail(params = {}) {

         //    getDoorplateAddressDetail(Object.assign(params, {

         //       stdId: this.stdId

@@ -464,6 +500,64 @@
         //       })

         //    })

         // },



         //获取分类

          getCategory(level = 1, id) {

            let params = {

               level

            }

            if (level != 1) {

               params.parentNo = id

            }

            getLabelCate(params).then(res => {

               console.log(res)

               if (res.code == 200) {

                  let index = level- 1;

                  this.$set(this.categoryList,index,res.data);

                  if(level == 1){

                     this.firstId = res.data[0].categoryNo

                  }

               }

            })

         },



            //选择分类

         confirmCategory(e) {

               console.log("confirm=>",e)

            let {indexs,value} = e;

            this.categoryIndex = indexs; 
            this.categoryValue = value;

            this.form.label = value[value.length -1].id;

            this.isShowCatePicker = false;

         },



            //切换分类

         changeCategory(e) {

            const {

               columnIndex,

               value,

               values, // values为当前变化列的数组内容

               index,

               // 微信小程序无法将picker实例传出来，只能通过ref操作

               picker = this.$refs.catePicker

            } = e

				
            console.log("change=>",e)

				
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项

            if (columnIndex === 0) {

               // picker为选择器this实例，变化第二列对应的选项

               // picker.setColumnValues(1, this.categoryList[index])

               this.firstId = e.value[columnIndex].categoryNo;

               // this.secondId = this.categoryList[1][0].categoryNo;

               // this.getCategory(2,this.firstId);

            }

            // else if ( columnIndex === 1){

               // picker.setColumnValues(2, this.categoryList[index])

               // this.secondId = e.value[columnIndex].categoryNo;

               // this.getCategory(3,this.secondId)

            // }

         },



         getBuildingDetail(params = {}) {

            let idorCodeParams = {}

@@ -530,8 +624,8 @@
                     }

                  }

               })

					
					




               this.form.jwd = `${Number(data.lng).toFixed(6)},${Number(data.lat).toFixed(6)}`



               this.form.building = arr.join("")

@@ -637,13 +731,14 @@
               }

            });

         },

			


         getLocation() {

            uni.chooseLocation({

               success: (res) => {

                  this.form.lat = res.latitude;

                  this.form.lng = res.longitude;

                  this.form.jwd = `${Number(res.latitude).toFixed(6)},${Number(res.longitude).toFixed(6)}`

                  this.form.jwd =

                     `${Number(res.latitude).toFixed(6)},${Number(res.longitude).toFixed(6)}`

               }

            })

         },

@@ -718,8 +813,10 @@
         },



         //弹出层打开

         popup() {

          popup() {

            this.$refs.uniPopup.open()

            // this.isShowCatePicker = true;

			
         },



         getLabel() {

@@ -780,10 +877,12 @@
      flex-direction: column;

      background: #f5f5f5;

      padding: 0 30rpx 20rpx 30rpx;

        .wrap{

         width:100%;

         margin-bottom:120rpx;



      .wrap {

         width: 100%;

         margin-bottom: 120rpx;

      }



      .box-title {

         padding: 10px 0;



@@ -880,20 +979,19 @@
      background-color: green;

      border-radius: 0rpx 10rpx 10rpx 0rpx;

   }

	
	




   .address-row {

      flex: 1;

      justify-content: flex-end;

      align-items: center;

   }

	


   .address-content {

      width: calc(100% - 116rpx - 20rpx);

      margin-right: 20rpx;

      text-align: right;

      width: calc(100% - 116rpx - 15rpx);

      margin-right: 15rpx;

   }

	


   .location-btn {

      width: 116rpx;

      height: 46rpx;

@@ -904,5 +1002,4 @@
      background-color: #fff;

      text-align: center;

   }

	
</style>