<template>
<div>
<van-pull-refresh v-model="isLoading"
success-text="刷新成功"
@refresh="onRefresh"
:disabled="isRefreshDisable"
>
<mt-header title="人工网点申领" v-if="showNav()">
<div slot="left" @click="goBack">
<mt-button icon="back"></mt-button>
</div>
</mt-header>
<div>
<div class="flex_center top_info" >
<div>
<div class="netType_div"
:style="{background: (dataInfo.netType == 1 ? '#13C2C2': '#1890FF')}"
>
<span style="margin: 0 auto">{{routerDetail.netTypeName}}</span>
</div>
<div class="netNameTitle">{{routerDetail.netName || '未知'}}</div>
</div>
<div>
<div><span class="manualPel">申领人</span></div>
<div class="netNameTitle"><span>{{routerDetail.telephone || '未知'}}</span></div>
</div>
</div>
<div class="listTitle"><span class="listTitle_span">药具申领</span></div>
<div
class="list-data"
v-infinite-scroll="loadMore"
:infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
v-show="!noDataShow"
ref="mc1"
>
<div class="content" v-for="item in detailInfo" :key="item.id">
<div class="title_bor">
<div class="title">
{{item.medicalName}}
</div>
<!--<div class="leftManual">
还可申领
<span style="color: #1890FF;margin: 0px 2px">{{item.available}}</span>
<span>{{item.unit}}</span>
</div>-->
</div>
<div class="details">
<div class="item">
<label class="item-left">生产厂家</label>
<label class="item-right">{{item.factoryName || '--'}}</label>
</div>
<div class="item">
<label class="item-left">类型</label>
<label class="item-right">{{item.breedName || '--'}}</label>
</div>
<div class="item">
<label class="item-left">规格</label>
<label class="item-right">{{item.specs || '--'}}</label>
</div>
<div class="flex_center">
<div class="item">
<label class="item-left">库存数量</label>
<label class="item-right">{{item.unit || '0'}} </label>
</div>
<!--<div class="item">
<label class="item-left">已申领</label>
<label class="item-right">{{item.received || 0}} {{item.receivedUnit}}</label>
</div>-->
<div class="item">
<div class="item-left del" @click="delSingleNumber(item)">-</div> <!--@click="delNumber(item)"-->
<input type="number" class="item_input" v-model="item.applyNumber" > <!--@keyup="changeNumber(item)"-->
<div class="item-right add" @click="addSingleNumber(item)">+</div> <!--@click="addNumber(item)"-->
</div>
</div>
<!--class="item-right add sub"-->
<div class="sub" @click="singleSub(item)" v-log="['药具领取', '确定按钮']">申请领取</div>
</div>
</div>
</div>
<div class="loading" v-if="loading">
<span id="load-text">{{loadText}}</span>
</div>
<!-- <div class="sumi_medical" v-if="!noDataShow">
<mt-button type="primary" style="width: 200px" @click="onSubmit">申领药具</mt-button>
</div>-->
<div v-if="noDataShow">
<NoData>
<template v-slot:content>
<span>该网点暂时没有可领用的药具，请与网点管理员联系</span>
</template>
</NoData>
</div>
<div>
<van-dialog v-model="showForm" show-cancel-button @confirm="confireForm" @cancel="closeForm">
<div style="padding: 8px">
<div style="font-weight: bold;padding: 7px" slot="title">输入领取人信息</div>
<!-- @change="changeIdCard"-->
<van-form ref="pform" :show-error-message="true">
<van-field
v-model="formData.idCard"
name="idCard"
class="res_input"
placeholder="请输入领取人身份证号码(必填)"
:rules="[
{ required: true, message: '请输入身份证号' },
{ validator: idCardValidator, message: '请输入正确的身份证号' }
]"
/>
<van-field
v-model="formData.residentName"
name="residentName"
class="res_input"
placeholder="请输入领取人姓名(必填)"
:rules="[{ required: true, message: '请填写姓名' }]"
/>
</van-form>
</div>
</van-dialog>
</div>
</div>
</van-pull-refresh>
</div>
</template>
<script>
import {
addManualMedicalRecord,
addLossReport,
getUserInfoByIdCard, getReClaimList
} from "../utils/api";
import NoData from './component/noData';
import { Toast,Indicator } from 'mint-ui';
import {receiveWay} from "../utils/dictionaries";
import {idCardValidator} from '../utils/common'
export default {
components: {NoData},
data() {
return {
loading: false,
detailInfo: [],
loadText:'加载中...',
noDataShow: false,
sessionInfo: {},
routerDetail: {},
param: {
pageIndex: 0,
pageSize: 10
},
dataInfo: {},
showForm: false,
hasError: false,
formData:{
idCard: undefined,
residentName: undefined
},
isLoading: false,
isRefreshDisable: false,
scrollTop: 0
}
},
watch: {
scrollTop(newval) {
if (newval> 0) {
this.isRefreshDisable = true
} else {
this.isRefreshDisable = false
}
}
},
mounted() {
this.$nextTick(() => {
const list = this.$refs.mc1
list.addEventListener('scroll', () => {
this.scrollTop = list.scrollTop
})
})
},
created() {
this.routerDetail = this.$route.query
// if (this.routerDetail.resource == 1) {
// this.showForm = true
// let AppPeople = JSON.parse(window.localStorage.getItem('AppPeople'))
// if (AppPeople) {
// this.formData.residentName = AppPeople.residentName
// this.formData.idCard = AppPeople.idCard
// }
// } else {
// this.showForm = false
// }
// this.sessionInfo = JSON.parse(window.sessionStorage.getItem('mobileTokenIno'))
},
methods: {
idCardValidator,
//刷新
onRefresh() {
this.isLoading = true
this.loading = true
this.param.pageIndex = 1
this.getRecordInfo()
},
getRecordInfo(callBack) {
let par = {
id: this.routerDetail.id,
...this.param
}
getReClaimList(par).then(({data = {}}) => {
const {dataList = []} = data.data
dataList.forEach(item => {
item['applyNumber'] = 0
item['availableCopy'] = item.available
})
if (this.isLoading) { //刷新时先赋空
this.detailInfo = []
}
this.detailInfo = this.detailInfo.concat(dataList)
if (this.detailInfo.length == 0) {
this.noDataShow = true
} else {
this.noDataShow = false
}
if (dataList.length < this.param.pageSize) {
this.loadText = '暂无更多数据'
} else {
this.loading = false
}
this.isLoading = false
// callBack && callBack()
}).catch(res => {
Toast({
message: '系统异常，请联系客服！',
duration: 2000
});
this.loading = false
}).finally(() => {
this.loading = false
this.isLoading = false
})
},
loadMore() {
this.loading = true
this.param.pageIndex += 1
this.getRecordInfo()
},
changeIdCard() {
let result = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(this.formData.idCard)
if (result) {
let par = {
idCard: this.formData.idCard
}
getUserInfoByIdCard(par).then(({data}) => {
this.formData.residentName = data.data.residentName
})
}
},
confireForm() {
this.$refs.pform.validate(['residentName', 'idCard']).then(() => {
window.localStorage.setItem('AppPeople', JSON.stringify(this.formData))
}).catch((err) => {
this.showForm = true
console.log(err)
})
},
closeForm() {
this.$router.push({path:'/'})
},
delNumber(val) {
this.detailInfo.forEach(item => {
if (item.id == val.id) {
if (item.applyNumber > 0) {
item.applyNumber --
} else {
item.applyNumber = 0
}
}
})
let ava = 0
let availab = 0
this.detailInfo.forEach(item => {
if (val.breedId == item.breedId) {
ava += (+item.applyNumber)
if (val.id != item.id) {
availab+= (+item.applyNumber)
}
}
})
this.detailInfo.forEach(item => {
if (val.breedId == item.breedId) {
item.available = val.availableCopy - ava
if(item.available <= 0) {
item.available = 0
if (val.id == item.id) {
item.applyNumber = val.availableCopy - availab
}
}
}
})
},
delSingleNumber(val) {
this.detailInfo.forEach(item => {
if (item.id == val.id) {
if (item.applyNumber > 0) {
item.applyNumber --
}
}
})
},
addNumber(val) {
this.detailInfo.forEach(item => {
if (item.id == val.id ) {
if (item.applyNumber < val.availableCopy) {
item.applyNumber ++
} else {
item.applyNumber = val.availableCopy
}
}
})
let ava = 0
let availab = 0
this.detailInfo.forEach(item => {
if (val.breedId == item.breedId) {
ava += (+item.applyNumber)
if (val.id != item.id) {
availab+= (+item.applyNumber)
}
}
})
this.detailInfo.forEach(item => {
if (val.breedId == item.breedId) {
item.available = val.availableCopy - ava
if(item.available <=0) {
item.available = 0
if (val.id == item.id) {
item.applyNumber = val.availableCopy - availab
}
}
}
})
},
addSingleNumber(val) {
this.detailInfo.forEach(item => {
if (item.id == val.id ) {
item.applyNumber ++
}
})
},
changeNumber(val) {
this.detailInfo.forEach(item => {
if (item.id == val.id ) {
if (item.applyNumber > val.availableCopy) {
item.applyNumber = val.availableCopy
}
if (item.applyNumber < 0) {
item.applyNumber = 0
}
}
})
let ava = 0
let availab = 0
this.detailInfo.forEach(item => {
if (val.breedId == item.breedId) {
ava += (+item.applyNumber)
if (val.id != item.id) {
availab += (+item.applyNumber)
}
}
})
this.detailInfo.forEach(item => {
if (val.breedId == item.breedId) {
item.available = val.availableCopy - ava
if(item.available <=0) {
item.available = 0
if (val.id == item.id) {
item.applyNumber = val.availableCopy - availab
}
}
}
})
},
onSubmit() {
let avali = 0
let info = JSON.parse(window.sessionStorage.getItem('mobileTokenIno'))
const {phone = '', userId =''} = info
this.detailInfo.forEach(item => {
avali += (+item.applyNumber)
item['telephone'] = phone
item['networkId'] = this.routerDetail.id
item['receiveWay'] = receiveWay[1].id
item['produceDate'] = item.produceDate + ' '+'00:00:00'
item['expireDate'] = item.expireDate + ' '+'00:00:00'
})
let result = []
for (let i= 0; i< this.detailInfo.length; i++) {
if (this.detailInfo[i].applyNumber != '' &&
this.detailInfo[i].applyNumber != null &&
typeof this.detailInfo[i].applyNumber != 'undefined' &&
this.detailInfo[i].applyNumber != '0'
) {
result.push(this.detailInfo[i])
}
}
if (avali == 0) {
return Toast({
message: '请先输入数量！',
duration: 2000
});
}
let par = {
dataList: result
}
addManualMedicalRecord(par).then(({data}) => {
if (data.code == 'SUCCESS') {
this.$uweb.trackEvent('药具领取结果', '成功')
this.$router.push({path:"/manualSuccess",query:{info: data.data}});
} else {
this.$uweb.trackEvent('药具领取结果', '失败')
Toast({
message: `${data.msg}`,
duration: 2000
});
}
})
},
//单条确认申领
singleSub(record) {
if (+record.applyNumber >0) {
Indicator.open()
// let info = JSON.parse(window.sessionStorage.getItem('mobileTokenIno'))
// const {phone = '', userId =''} = info
// let res = {idCard: undefined, residentName: undefined}
// if (this.routerDetail.resource == 1) {
// res.idCard = this.formData.idCard
// res.residentName = this.formData.residentName
// } else {
// res.idCard = this.routerDetail.idCar
// res.residentName = this.routerDetail.residentName
// }
const {updated, applyNumber, id, ...others} = record
let par = {
...others,
telephone : this.routerDetail.telephone,
idCar: this.routerDetail.idCar,
networkId: this.routerDetail.networkId,
receiveWay: receiveWay[0].id,
anewNumber: +record.applyNumber,
number: this.routerDetail.number,
produceDate: record.produceDate,
expireDate: record.expireDate,
residentName: this.routerDetail.residentName,
createDate: this.routerDetail.createDate,
resource: 1,
lossAuditStatus: 0,
id: this.routerDetail.id
}
console.log(JSON.stringify(par))
addLossReport(par).then(({data}) => {
if (data.code == 'SUCCESS') {
Indicator.close()
this.$notify({ type: 'success', message: '申请成功！' ,className: 'toastIndex',});
this.$router.push({path:"/collectRecords",query:{}});
// 成功通知
} else {
Indicator.close()
this.$notify({ type: 'danger', message: '申请失败！' , className: 'toastIndex',});
}
}).catch(() => {
Indicator.close()
})
} else {
Toast({
message: `请输入领取数量`,
duration: 2000
});
}
},
goBack() {
window.history.go(-1)
},
},
beforeDestroy() {
this.detailInfo = []
}
}
</script>
<style scoped lang="less">
.content {
width: 90%;
margin: 20px auto 0px;
padding: 10px;
border: 1px solid #F3F3F3;
border-radius: 1rem;
box-shadow: darkgrey 0px 2px 20px -10px;
.title {
font-weight: bold;
line-height: 1.5;
font-size: 14px!important;
padding: 0px 0px 3px 0px;
/*width: 70%;*/
}
.leftManual {
font-size: 12px;
color: #595959;
}
.sub {
background: #1bd09f;
/*width: 70px;*/
color: #F3F3F3!important;
padding: 5px 10px;
border-radius: 5px;
text-align: center;
margin: 10px 0px 0px 0px;
}
}
.manualPel {
color: #595959;
font-size: 12px;
}
.content .title_bor {
border-bottom: 1px solid #F3F3F3;
}
.content .details .item {
line-height: 24px;
.del {
font-size: 26px;
display: inline-block;
padding: 0px 8px;
}
.item_input {
width: 40px;
background: #F5F5F5;
border-radius: 4px;
border: 0px;
line-height: 24px;
text-align: center;
}
.add {
font-size: 26px;
display: inline-block;
/*padding: 0px 8px;*/
}
.sub {
margin-left: 60px!important;
background: #26a2ff;
color: #F3F3F3!important;
padding: 3px 10px;
border-radius: 5px;
}
}
.content .details .item .item-right {
/*float: right;*/
font-size: 12px;
margin-left: 8px;
color: #262626;
}
.content .details .item .item-left {
color: #595959;
font-size: 12px;
}
.list-data{
/*height: calc(100% - 40px);*/
max-height: calc(100vh - 180px);
overflow-y: auto;
margin-bottom: 10px;
}
.loading{
height: 80px;
width: 100%;
text-align: center;
}
.listTitle {
margin: 20px 0px 0px 12px;
.listTitle_span {
font-weight: 600;
font-size: 16px;
}
}
.top_info {
border: 1px solid #F3F3F3;
border-radius: 0px 0px 16px 16px;
padding: 12px;
box-shadow: darkgrey 0px 2px 20px -10px;
}
.netType_div {
text-align: center;
color: white;
border-radius: 8px 2px;
padding: 4px 9px;
width: 95px;
font-size: 10px
}
.netNameTitle {
font-size: 14px!important;
font-weight: 500;
margin-top: 11px
}
.sumi_medical {
position: fixed;
z-index: 2;
left: calc(50% - 100px);
bottom: 20px;
}
</style>
<style lang="less">
.res_input {
input[type=text], input[type=date] {
background: #fff;
padding: 1.375rem 0.75rem!important;
}
}
</style>
<style lang="less">
.van-pull-refresh__track {
height: 100vh!important;
}
</style>