punchClockDetail.vue

<style lang="less">
#punchClockDetail{
    overflow-x: hidden;
    >img{
        width:100%;
    }
    >.list{
        background: #fff;
        margin: 10px 0;
        padding: 10px;
        font-size: 15px;
        .v-input--radio-group{
            margin-top: 0;
            margin-bottom: -15px;
            .v-input__control{
                width:100%;
                .v-input__slot{
                    margin:0;
                    .v-input--radio-group__input{
                        >div{
                            label{
                                padding:4px 0;
                                flex-grow: 1;
                                font-size: 14px;
                            }
                            >.v-radio{
                                display:flex;
                                >div{
                                    flex-shrink: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
        >textarea{
            width:100%;
            min-height: 55px;
        }
        >.item{
            margin-top:6rpx;
            p{
                margin:0;
            }
        }
    }
    >button{
        width:calc(100% - 10px);
        margin: 0 5px;
        background:#5E9AFE;
        color:#fff;
        padding:10px 0;
        margin-bottom:5px;
    }
}
</style>
<template>
    <div id="punchClockDetail">
        <img src="./image/health.jpg" />
        <div class="list">
            <div class="tip"><span style="color:red;" v-if="status!=2">*</span>1. 目前健康状况</div>
            <v-radio-group v-model="value.sStatus" :disabled="status==2">
                <div><v-radio value="健康" label="健康"/></div>
                <div><v-radio value="有发烧、咳嗽等症状" label="有发烧、咳嗽等症状"/></div>
                <div><v-radio value="其他" label="其他"/></div>
            </v-radio-group>
        </div>
        <div class="list">
            <div class="tip"><span style="color:red;" v-if="status!=2">*</span>2. 目前所在城市</div>
            <x-address
                :disabled="status==2"
                @on-hide="logHide"
                @on-show="logShow"
                title=""
                v-model="address"
                :list="addressData" 
                @on-shadow-change="onShadowChange" 
                placeholder="请选择地址"
                :raw-value="true"
                value-text-align="left"
                :show.sync="showAddress"/>
        </div>
        <div class="list">
            <div class="tip">3. 详细地址</div>
            <span>{{value.sAddressFull}}</span>
        </div>
        <div class="list">
            <div class="tip"><span style="color:red;" v-if="status!=2">*</span>4. 是否接触过疑似或确诊的新型肺炎患者？</div>
            <v-radio-group v-model="value.bTouch" :disabled="status==2">
                <div><v-radio :value="0" label="否"/></div>
                <div><v-radio :value="1" label="是"/></div>
            </v-radio-group>
            <div class="item" v-if="value.bTouch">
                <datetime
                    :disabled="status==2"
                    title="接触日期"
                    format='YYYY-MM-DD'
                    placeholder="请选择"
                    :show.sync="isShowDate"
                    v-model="value.dTouchDate"/>
            </div>
        </div>
        <div class="list">
            <div class="tip"><span style="color:red;" v-if="status!=2">*</span>5. 体温</div>
            <xInput
                title=""
                :disabled="status==2"
                placeholder="输入体温"
                v-model="value.nTemperature"
                @on-change="inputNum('nTemperature')"
                type="number"/>
        </div>
        <div class="list">
            <div class="tip"><span style="color:red;" v-if="status!=2">*</span>6. 是否自我隔离？</div>
            <v-radio-group v-model="value.bQuarantine" :disabled="status==2">
                <div><v-radio :value="0" label="否"/></div>
                <div><v-radio :value="1" label="是"/></div>
            </v-radio-group>
        </div>
        <div class="list">
            <div class="tip"><span style="color:red;" v-if="status!=2">*</span>7. 是否就医？</div>
            <v-radio-group v-model="value.bHospital" :disabled="status==2">
                <div><v-radio :value="0" label="否"/></div>
                <div><v-radio :value="1" label="是"/></div>
            </v-radio-group>
        </div>
        <div class="list">
            <div class="tip"><span style="color:red;" v-if="status!=2">*</span>8. 自2020年1月18日至今,是否去过重点疫区【湖北、温州、台州（温岭、黄岩）】等地有过停留史？</div>
            <v-radio-group v-model="value.bHaveBeen" :disabled="status==2">
                <div><v-radio :value="0" label="否"/></div>
                <div><v-radio :value="1" label="是"/></div>
            </v-radio-group>
        </div>
        <div class="list">
            <div class="tip">9. 出行明细</div>
            <textarea :placeholder="status==2 ? '' : '请输入'" :disabled="status==2" autoHeight="true" v-model="value.sHaveBeenDetail"/>
        </div>
        <div class="list">
            <div class="tip">10. 其他情况</div>
            <textarea :placeholder="status==2 ? '' : '请输入'" :disabled="status==2" autoHeight="true" v-model="value.sRemark"/>
        </div>
        <button @click="upData" v-if="status!=2">{{btnName}}</button>

        <confirm v-model="isShowConfirm"
            title="提示"
            @on-confirm="onConfirm">
            <p style="text-align:center;">{{status==1?'修改数据会覆盖原来的数据':'补卡后不能再修改'}},是否继续?</p>
        </confirm>
    </div>
</template>

<script>
import util from "@/libs/util.js"
import {mapState} from 'vuex';
import { XAddress,ChinaAddressV4Data,Datetime,XInput,Confirm } from 'vux'

export default {
    name: 'punchClockDetail',
    components:{XAddress,Datetime,XInput,Confirm},
    data () {
        return {
            address:[],
            addressData:ChinaAddressV4Data,
            showAddress:false,
            isShowDate:false,
            isShowConfirm:false,
            value:{
                iEmploeeId:"",      //员工主键
                dCheckDate:"",      //打卡日期
                sStatus:"",         //状态
                nTemperature:'',    //体温
                sAddress:"",        //地址
                sAddressFull:"",    //详细地址
                bTouch:null,          //是否接触过
                dTouchDate:null,      //接触日期
                bQuarantine:null,     //是否自我隔离
                bHospital:null,       //是否自我就医
                bHaveBeen:null,       //是否去过疫区
                sHaveBeenDetail:"", //出行明细
                sRemark:"",         //其他情况
                tCreateTime:"",     //创建日期
                sCreateAppid:"",    //openID
                iStatus:1,
            },
            status:0,//0 新增,1 修改,2 只读,3 补卡
        }
    },
    computed:{
        ...mapState({
            hdr:state => state.healthStatistics.hdr,
        }),
        btnName(){
            if(this.status==0)return "提交";
            else if(this.status==1)return "修改";
            else return "补卡"
        }
    },
    async activated(){
        this.status = parseInt(this.$route.query.readOnly)||0

        this.value.sCreateAppid=this.$route.params.openId
        if(/^1$|^2$/.test(this.status)){
            await this.getHealthDate();
        }else{
            this.value.iEmploeeId=this.$route.params.id
            this.value.sAddressFull=this.$route.params.address
        }
        this.value.dCheckDate=this.value.tCreateTime=util.dateFormat(new Date(),"yyyy-MM-dd hh:mm:ss")
        if(this.status==3){
            this.value.dCheckDate=util.dateFormat(new Date(Number(this.$route.query.dDate)),"yyyy-MM-dd")
        }
    },
    methods:{
        async getHealthDate(){
            let res = await this.request('getStatisticalDetails',{
                data:[
                    {key:'url',value:'HealthLog'},
                    {key:'dDate',value: util.dateFormat(new Date(Number(this.$route.query.dDate)),"yyyy-MM-dd")},
                    {key:"openid",value:this.value.sCreateAppid}
                ],
                params:{},
            },'加载中',{});
            if(res && typeof(res) == 'object'){
                this.value = res[0];
                for(let x in this.value){
                    if(util.getType(this.value[x]) == 'boolean'){
                        // if(this.value[x]){
                        //     this.value[x] = 1;
                        // }else{
                        //     this.value[x] = 0;
                        // }
                        this.value[x]=this.value[x]?1:0
                    }
                }
                this.address = this.value.sAddress.split(",");
            }
        },

        inputNum(name){
            this.value[name]=parseFloat(this.value[name])
        },
        logHide(e){
            console.log(e)
        },
        logShow(e){
            console.log(e)
        },
        onShadowChange(e){
            console.log(e)
        },
        upData(){//保存数据
            if(this.checkData()){
                if(this.status>0){
                    this.isShowConfirm=true
                }else{
                    this.saveData()
                }
            }
        },
        onConfirm(){
            this.saveData()
        },
        async saveData(){
            this.value.iStatus=this.status==1?2:1
            var value=await this.request("saveHealth",{
                data:this.value,
            },"加载中",{})
            if(/^\d+$/.test(value)){
                wx.miniProgram.navigateBack()
            }else{
                this.$vux.toast.text(this.status==0?'保存':(this.status==1?'修改':'补卡')+'失败!', 'middle');
            }
        },
        checkData(){
            if(!this.value.sStatus){
                this.$vux.toast.text('健康状态必填!', 'middle');
                return false;
            }else if(this.address.length==0){
                this.$vux.toast.text('地址必填!', 'middle');
                return false;
            }else if(!(this.value.nTemperature>0)){
                this.$vux.toast.text('体温必填!', 'middle');
                return false;
            }else if(!/[01]/.test(this.value.bTouch)){
                this.$vux.toast.text('是否接触过!', 'middle');
                return false;
            }else if(!/[01]/.test(this.value.bQuarantine)){
                this.$vux.toast.text('是否自我隔离!', 'middle');
                return false;
            }else if(!/[01]/.test(this.value.bHospital)){
                this.$vux.toast.text('是否自我就医!', 'middle');
                return false;
            }else if(!/[01]/.test(this.value.bHaveBeen)){
                this.$vux.toast.text('是否去过疫区!', 'middle');
                return false;
            }
            this.value.nTemperature=parseFloat(this.value.nTemperature)
            this.value.sAddress=this.address.join(",")
            if(!this.value.bTouch){
                delete this.value.dTouchDate
            }
            return true;
        }
    },
}
</script>