<template>
|
<view>
|
<view class="content bgc-ff">
|
|
<view class="top item flex j-c-s-b a-i-c" @click="onScan()">
|
<view class="flex a-i-c">
|
<u-icon name="/static/icon/nav-05.png" width="90rpx" height="90rpx"></u-icon>
|
<text class="f-28 ml-10">扫码获取信息</text>
|
</view>
|
<u-icon name="arrow-right" size="20"></u-icon>
|
</view>
|
|
<u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="90"
|
:labelStyle="{fontSize:'28rpx'}">
|
|
<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="#ffffff"
|
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"
|
inputAlign="right"></u-input>
|
</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--textarea v-model="info.context" border="none" placeholderClass="f-28 c-99" inputAlign="right"
|
placeholder="请输入内容"></u--textarea>
|
</u-form-item>
|
<u-form-item label="走访时间" prop="workTime" :borderBottom="false" required @click="showSelectDate = true">
|
<u-input v-model="info.workTime" disabled disabledColor="#ffffff" 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="houseCode" :borderBottom="false" required
|
@click="isShowScStatus = true">
|
<u-input v-model="info.scStatus" 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>
|
</view>
|
<view class="upload bgc-ff">
|
<view class="f-28">走访图片</view>
|
<view class="mt-20">
|
<u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
|
:capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
|
<view class="upload-item upload-icon flex_base">
|
<u-icon name="/static/icon/upload.png" width="60rpx" height="60rpx"></u-icon>
|
</view>
|
</u-upload>
|
</view>
|
</view>
|
|
<u-datetime-picker ref="datetimePicker" :show="showSelectDate" v-model="workTime" mode="datetime"
|
: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" ref="uPicker" @change="changeHandler" :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,
|
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() {
|
return {
|
form: {
|
images: []
|
},
|
info: {
|
// name: "",
|
// phone: "",
|
type: "",
|
householdId: "",
|
context: "",
|
workTime: "",
|
personType: ""
|
},
|
rules: {
|
// '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: '请选择被访问人',
|
trigger: ['blur', 'change']
|
}],
|
context: [{
|
type: 'string',
|
required: true,
|
message: '请输入工作内容',
|
trigger: ['blur', 'change']
|
}],
|
},
|
showSelectDate: false,
|
workTime: Number(new Date()),
|
isShowPicker: false,
|
houseIndex: [0],
|
typeList: [],
|
typeName: "",
|
typeIndex: [0],
|
isShowTypePicker: false,
|
isShowLabelPicker: false,
|
labelList: [],
|
labelListTwo: [],
|
labelIndex: [0],
|
labelName: "",
|
keyword: "",
|
houseHoldList: [],
|
selectedHousehold: {},
|
isShowPopup: false,
|
address: "",
|
isEdit: false,
|
id: "",
|
houseCode: ''
|
}
|
},
|
// 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: {
|
|
onScan() {
|
uni.scanCode({
|
success: (res) => {
|
let obj = this.getUrlParams(res.result);
|
this.getHouseType(obj.stdId);
|
}
|
})
|
},
|
|
|
getUrlParams(url) {
|
let urlStr = url.split('?')[1]
|
let obj = {};
|
let paramsArr = urlStr.split('&')
|
for (let i = 0, len = paramsArr.length; i < len; i++) {
|
let arr = paramsArr[i].split('=')
|
obj[arr[0]] = arr[1];
|
}
|
return obj
|
},
|
|
getHouseType(code) {
|
this.houseCode = code
|
this.getHouseholdList();
|
},
|
|
|
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.labelName = data.labelName
|
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: 1000
|
}).then(res => {
|
// this.labelList = [res.data];
|
// this.labelListTwo = res.data
|
this.labelList.push(res.data)
|
this.labelList.push(res.data[0].children)
|
})
|
},
|
|
getHousehold(id) {
|
getHouseholdDetail({
|
id
|
}).then(res => {
|
console.log(res);
|
this.address = res.data.currentAddress;
|
this.selectedHousehold = res.data;
|
this.houseCode = res.data.houseCode
|
this.getHouseholdList();
|
})
|
},
|
|
getHouseholdList() {
|
if (!this.houseCode) {
|
return
|
}
|
fetchHousehold({
|
labelId: this.info.personType,
|
searchKey: this.keyword,
|
houseCode: this.houseCode,
|
limit: 20
|
}).then(res => {
|
this.houseHoldList = res.data;
|
for (var i = 0; i < this.houseHoldList.length; i++) {
|
if (this.houseHoldList[i].address === null) {
|
this.houseHoldList[i].address = ''
|
}
|
|
if (this.houseHoldList[i].aoiName === null) {
|
this.houseHoldList[i].aoiName = ''
|
}
|
|
if (this.houseHoldList[i].neiName === null) {
|
this.houseHoldList[i].neiName = ''
|
}
|
|
if (this.houseHoldList[i].townStreetName === null) {
|
this.houseHoldList[i].townStreetName = ''
|
}
|
}
|
})
|
},
|
|
confirmDate(e) {
|
this.showSelectDate = false;
|
this.info.workTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
},
|
|
confirmHouse(e) {
|
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();
|
// },
|
// 回调参数为包含columnIndex、value、values
|
confirmLabelType(e) {
|
console.log('confirm', e)
|
// this.show = false
|
this.labelIndex = e.indexs;
|
if (e.value[2]) {
|
this.info.personType = e.value[2].id;
|
this.labelName = e.value[2].name;
|
} else {
|
this.info.personType = e.value[1].id;
|
this.labelName = e.value[1].name;
|
}
|
this.isShowLabelPicker = false;
|
this.getHouseholdList();
|
},
|
|
changeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
if (columnIndex === 0) {
|
console.log("****************", e)
|
// picker为选择器this实例，变化第二列对应的选项
|
picker.setColumnValues(1, value[0].children)
|
// picker为选择器this实例，变化第二列对应的选项
|
if (value[0].hasChildren) {
|
picker.setColumnValues(2, value[0].children[0].children)
|
}
|
}
|
if (columnIndex === 1) {
|
console.log("*******1*********", e)
|
// picker为选择器this实例，变化第二列对应的选项
|
if (value[1].hasChildren) {
|
picker.setColumnValues(2, value[1].children)
|
}
|
}
|
},
|
|
|
//搜索住户
|
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() {
|
if (this.form.images.length) {
|
this.$set(this.info, "url", this.setImages())
|
}
|
},
|
|
setImages() {
|
let urls = [];
|
for (let i of this.form.images) {
|
urls.push(i.name);
|
}
|
return urls.join(",")
|
},
|
|
|
submitInfo() {
|
this.$refs.form.validate().then(valid => {
|
this.checkImages();
|
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>
|
|
<style lang="less">
|
page {
|
background-color: #F5F5F5;
|
}
|
|
.content {
|
margin: 20rpx 30rpx;
|
padding: 0 30rpx;
|
|
|
}
|
|
.top {
|
padding: 20rpx !important;
|
}
|
|
|
|
.row {
|
padding: 20rpx 0;
|
border-bottom: 1px solid
|
}
|
|
.location-btn {
|
width: 116rpx;
|
height: 46rpx;
|
line-height: 46rpx;
|
border-radius: 4rpx;
|
border: 1px solid currentColor;
|
padding: 0;
|
background-color: #fff;
|
}
|
|
.upload {
|
margin: 0 30rpx;
|
padding: 30rpx;
|
|
.upload-item {
|
width: 140rpx;
|
height: 140rpx;
|
border: 1px solid #EEEEEE;
|
}
|
}
|
|
.footer {
|
width: 100%;
|
padding: 30rpx;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 10;
|
box-sizing: border-box;
|
|
.footer-btn {
|
width: 100%;
|
height: 78rpx;
|
line-height: 78rpx;
|
background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
|
border-radius: 8rpx;
|
color: #fff;
|
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>
|
