跳转优化

lin

2024-05-14 0beea067bea14aeaa8ed0d8ee3cf4d2117f3cd2e

 subPackage/workbench/views/workLog.vue

@@ -3,17 +3,46 @@
      <view class="content bgc-ff">
         <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="90"
            :labelStyle="{fontSize:'28rpx'}">
            <u-form-item label="姓名" prop="info.name" borderBottom required>
               <u-input v-model="info.name" border="none" placeholder="请输入标题" placeholderClass="f-28 c-99"
            <u-form-item label="走访类型" prop="type" :borderBottom="false" required @click="isShowTypePicker = true">
               <u-input v-model="typeName" disabled disabledColor="#fff" border="none" placeholder="请选择"
                  placeholderClass="f-28 c-99" inputAlign="right"></u-input>
               <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <u-form-item label="重点人群类型" prop="peopleType" :borderBottom="false" required
               @click="isShowLabelPicker = true" v-if="info.type == 2">
               <u-input v-model="labelName" disabled disabledColor="#fff" border="none" placeholder="请选择"
                  placeholderClass="f-28 c-99" inputAlign="right"></u-input>
               <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item label="被访人姓名" prop="householdId" :borderBottom="false" required
               @click="isShowPopup = true">
               <u-input v-model="selectedHousehold.name" disabled disabledColor="#fff" border="none"
                  placeholder="请选择" placeholderClass="f-28 c-99" inputAlign="right"></u-input>
               <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <u-form-item label="手机号" borderBottom required v-if="info.householdId">
               <u-input v-model="selectedHousehold.phoneNumber" border="none" disabled disabledColor="#f5f5f5"
                  placeholderClass="f-28 c-99" inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="走访地址" borderBottom required v-if="info.householdId">
               <!-- <u-input v-model="address" border="none" disabled disabledColor="#f5f5f5"
                  placeholderClass="f-28 c-99" inputAlign="right"></u-input> -->
               <view class="address-content">
                  {{address}}
               </view>
            </u-form-item>
            <!-- <u-form-item label="姓名" prop="info.name" borderBottom required>
               <u-input v-model="info.name" border="none" placeholder="请输入" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="手机号" prop="phone" borderBottom  required>
               <u-input v-model="info.phone" border="none" placeholder="请输入标题"   placeholderClass="f-28 c-99"
            <u-form-item label="手机号" prop="phone" borderBottom required>
               <u-input v-model="info.phone" border="none" placeholder="请输入手机号" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="内容" borderBottom  required>
               <u-input type="textarea" v-model="info.context" border="none"  placeholderClass="f-28 c-99"
                  inputAlign="right">
            </u-form-item> -->
            <u-form-item label="内容" borderBottom required prop="context">
               <u-input type="textarea" v-model="info.context" border="none" placeholderClass="f-28 c-99"
                  inputAlign="right" placeholder="请输入内容">
               </u-input>
            </u-form-item>
            <u-form-item label="走访时间" prop="workTime" :borderBottom="false" required @click="showSelectDate = true">
@@ -43,21 +72,71 @@
      </view>

      <u-datetime-picker ref="datetimePicker" :show="showSelectDate" v-model="workTime" mode="datetime"
         :formatter="formatter" @confirm="confirmDate" @cancel="isShowPicker = false"></u-datetime-picker>
      <!-- <u-picker :show="isShowPicker" :columns="scStatus" :defaultIndex="houseIndex" @cancel="isShowPicker = false"
         @confirm="confirmHouse()"></u-picker> -->
      <view class="footer">
         <button class="footer-btn" @click="submitInfo">提交</button>
      </view>
         :formatter="formatter" @confirm="confirmDate" @cancel="showSelectDate = false"></u-datetime-picker>
      <u-picker :show="isShowTypePicker" :columns="typeList" :defaultIndex="typeIndex"
         @cancel="isShowTypePicker = false" @confirm="confirmType()" keyName="dictValue"></u-picker>
      <u-picker :show="isShowLabelPicker" :columns="labelList" :defaultIndex="labelIndex"
         @cancel="isShowLabelPicker = false" @confirm="confirmLabelType()" keyName="name"></u-picker>

      <!-- <footer-btn @click="submitInfo" :text="isEdit?'保存':'提交'" /> -->

      <button class="submit-btn" @click="submitInfo">{{isEdit?"保存":"提交"}}</button>
      <button class="list-btn" @click="navToRecord">走访记录</button>


      <u-popup :show="isShowPopup" mode="bottom" :round="10" closeable="true" @close="isShowPopup = false">
         <view class="popup-content">
            <view class="popup-title f-30">
               选择居民
            </view>
            <u-search placeholder="请输入要搜索的内容(姓名 手机号)" :showAction="true" actionText="搜索" :animation="true"
               v-model="keyword" @search="searchHousehold" @custom="searchHousehold"
               @clear="clearKeyword"></u-search>
            <scroll-view class="popup-list" :scroll-y="true">
               <view class="popup-list-item" v-for="(i,k) in houseHoldList" :key="k" @click="selectHousehold(i)">
                  <view class="flex a-i-c mb-10">
                     <text class="f-28 fw mr-20">{{i.name}}</text>
                     <text class="f-26" v-if="i.phoneNumber">{{i.phoneNumber}}</text>
                  </view>

                  <view class="f-28">
                     {{i.townStreetName}}{{i.neiName}}{{i.aoiName}}{{i.address || ""}}
                  </view>
                  <view class="check-icon" v-if="i.id == info.householdId">
                     <u-icon name="checkbox-mark" color="#017BFC" size="30"></u-icon>
                  </view>


               </view>
            </scroll-view>
         </view>
      </u-popup>


   </view>

</template>

<script>
   import {
      addWorkLog
      addWorkLog,
      getWorkLogDetail,
      updateWorkLog
   } from "@/api/workLog/workLog.js"
   import uploadMixin from "@/mixin/uploadMixin";
   import {
      bizDictionary,
      update
   } from '@/api/system/dict.js'
   import {
      getLabelListByParentId
   } from "@/api/label/label.js";
   import {
      fetchHousehold
   } from "@/api/house/household.js"
   import {
      getHouseholdDetail
   } from '@/api/house/household.js'
   export default {
      mixins: [uploadMixin],
      data() {
@@ -66,42 +145,167 @@
               images: []
            },
            info: {
               name: "",
               phone: "",
               context: ""
               // name: "",
               // phone: "",
               type: "",
               householdId: "",
               context: "",
               workTime: "",
               personType: ""
            },
            rules: {
               'name': {
               // 'name': {
               //    type: 'string',
               //    required: true,
               //    message: '请输入姓名',
               //    trigger: ['blur', 'change']
               // },
               // 'phone': {
               //    type: 'string',
               //    required: true,
               //    message: '请输入手机号',
               //    trigger: ['blur', 'change']
               // },

               type: [{
                  type: 'number',
                  required: true,
                  message: '请选择走访类型',
                  trigger: ['blur', 'change']
               }],
               // peopleType: [{
               //    type: 'number',
               //    required: true,
               //    message: '请选择重点人群类型',
               //    trigger: ['blur', 'change']
               // }],
               householdId: [{
                  type: 'string',
                  required: true,
                  message: '请输入姓名',
                  message: '请选择被访问人',
                  trigger: ['blur', 'change']
               },
               'phone': {
                  type: 'string',
                  required: true,
                  message: '请输入手机号',
                  trigger: ['blur', 'change']
               },
               'context': {
               }],
               context: [{
                  type: 'string',
                  required: true,
                  message: '请输入工作内容',
                  trigger: ['blur', 'change']
               },
               }],
            },
            showSelectDate: false,
            workTime: Number(new Date()),
            isShowPicker: false,
            houseIndex: [0]
            houseIndex: [0],
            typeList: [],
            typeName: "",
            typeIndex: [0],
            isShowTypePicker: false,
            isShowLabelPicker: false,
            labelList: [],
            labelIndex: [0],
            labelName: "",
            keyword: "",
            houseHoldList: [],
            selectedHousehold: {},
            isShowPopup: false,
            address: "",
            isEdit: false,
            id: ""
         }
      },
      onLoad() {
         let userInfo = uni.getStorageSync("userInfo");
         this.$set(this.info, "name", userInfo.real_name);
         this.$set(this.info, "phone", userInfo.phone);
      // onLoad() {
      //    let userInfo = uni.getStorageSync("userInfo");
      //    this.$set(this.info, "name", userInfo.real_name);
      //    this.$set(this.info, "phone", userInfo.phone);
      // },


      async onLoad(option) {
         await this.getTypeList();
         await this.getLabelList();
         if (option.id) {
            this.isEdit = true;
            this.id = option.id;
            setTimeout(() => {
               this.getDetail(option.id)
            }, 200)
         }
      },

      onReady() {
         //onReady 为uni-app支持的生命周期之一
         this.$refs.form.setRules(this.rules)
      },

      methods: {

         getDetail(id) {
            getWorkLogDetail({
               id
            }).then(res => {
               console.log(res);
               if (res.code == 200) {
                  let data = res.data
                  this.tyepIndex = this.$getIndex(this.typeList[0], data.type, "dictKey", "dictValue").index;
                  this.typeName = this.$getIndex(this.typeList[0], data.type, "dictKey", "dictValue").name;
                  if (data.workTime) {
                     this.workTime = Number(new Date(data.workTime))
                  }
                  // this.info.type = data.type;
                  // this.info.workTime = data.workTime;
                  // this.info.context = data.context;
                  // this.info.householdId = data.householdId;
                  // this.info.personType = data.personType;
                  console.log(typeof data.personType)
                  this.labelIndex = this.$getIndex(this.labelList[0], data.personType, "id", "name").index;
                  this.labelName = this.$getIndex(this.labelList[0], data.personType, "id", "name").name;
                  this.getHouseholdList();
                  this.getHousehold(data.householdId);
                  this.form.images = this.$setImageUrl(data.url, 2);
                  this.info.id = data.id;
                  for (let i in this.info) {
                     this.$set(this.info, i, data[i])
                  }
               }
            })
         },

         getTypeList() {
            bizDictionary({
               code: "haveType"
            }).then(res => {
               console.log(res)
               this.typeList = [res.data];
            })
         },

         getLabelList() {
            getLabelListByParentId({
               parentId: 100
            }).then(res => {
               this.labelList = [res.data];
            })
         },

         getHousehold(id) {
            getHouseholdDetail({
               id
            }).then(res => {
               console.log(res);
               this.address = res.data.currentAddress;
               this.selectedHousehold = res.data;
            })
         },

         getHouseholdList() {
            fetchHousehold({
               labelId: this.info.personType,
               searchKey: this.keyword,
               limit: 20
            }).then(res => {
               this.houseHoldList = res.data;
            })
         },

         confirmDate(e) {
            this.showSelectDate = false;
@@ -112,6 +316,48 @@
            this.houseIndex = e.indexs;
            this.info.houseCode = e.value[0];
            this.isShowPicker = false;
         },

         //选择走访类型			
         confirmType(e) {
            console.log("type==>", e);
            this.typeIndex = e.indexs;
            this.info.type = e.value[0].dictKey;
            this.typeName = e.value[0].dictValue;

            if (e.value[0].dictKey == 1) {
               this.info.personType = "";
               this.keyword = "";
               this.getHouseholdList();
            }
            this.isShowTypePicker = false;
         },

         //选择重点人群类型
         confirmLabelType(e) {
            this.labelIndex = e.indexs;
            this.info.personType = e.value[0].id;
            this.labelName = e.value[0].name;
            this.isShowLabelPicker = false;
            this.getHouseholdList();
         },

         //搜索住户
         searchHousehold() {
            this.getHouseholdList()
         },

         clearKeyword() {
            this.keyword = "";
            this.getHouseholdList()
         },

         //选择住户
         selectHousehold(item) {
            this.selectedHousehold = item;
            this.info.householdId = item.id;
            this.address = `${item.townStreetName}${item.neiName}${item.aoiName}${item.address || ""}`
            this.isShowPopup = false;
         },

         checkImages() {
@@ -132,19 +378,59 @@
         submitInfo() {
            this.$refs.form.validate().then(valid => {
               this.checkImages();
               addWorkLog(this.info).then(res => {
                  uni.showToast({
                     icon: 'success',
                     title: '提交成功',
                     success() {
                        setTimeout(() => {
                           uni.navigateBack()
                        }, 1000)
                     }
                  })
               this.info.status = 2;
               if (this.info.type == 2 && !this.info.personType) {
                  this.$showTips("请选择重点人群类型")
                  return
               }
               if (this.isEdit) {
                  this.updateWorkLogRequest()
               } else {
                  this.addWorkLogRequest()
               }
            })
         },

         addWorkLogRequest() {
            addWorkLog(this.info).then(res => {
               uni.showToast({
                  icon: 'success',
                  title: '提交成功'
               })
               setTimeout(() => {
                  uni.navigateBack()
               }, 300)
            })
         },

         updateWorkLogRequest() {
            updateWorkLog(this.info).then(res => {
               uni.showToast({
                  icon: 'success',
                  title: '提交成功',
               })
               setTimeout(() => {
                  this.reLoadPrePage()
               }, 300)
            })
         },

         //刷新上一页数据后返回
         reLoadPrePage() {
            let pages = getCurrentPages();
            let prePage = pages[pages.length - 2];
            prePage.$vm.resetParams();
            prePage.$vm.getList();
            uni.navigateBack();
         },


         navToRecord() {
            uni.navigateTo({
               url: "/subPackage/workLog/list"
            })
         }

      }
   }
</script>
@@ -204,4 +490,61 @@
         font-size: 32rpx;
      }
   }

   .popup-content {
      width: 100%;
      padding: 0 30rpx 30rpx;
      box-sizing: border-box;

      .popup-title {
         padding: 30rpx 0;
         text-align: center;
         font-weight: bold;
      }

      .popup-list {
         height: 650rpx;
      }

      .popup-list-item {
         padding: 20rpx 0;
         border-bottom: 1px solid #f1f1f1;
         position: relative;
      }

      .check-icon {
         position: absolute;
         right: 20rpx;
         top: 20rpx;
      }
   }

   .address-content {
      flex: 1;
      background-color: #F5F5F5;
      font-size: 28rpx;
      padding: 2rpx 10rpx;
   }

   .submit-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }

   .list-btn {
      width: 690rpx;
      height: 78rpx;
      line-height: 78rpx;
      background: linear-gradient(163deg, #c7d7dc 0%, #c3cdd8 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 32rpx;
      color: #fff;
      margin-top: 50rpx;
   }
</style>