zhdt-miniapp/pages/sample-check-list/sample-detail/index.vue

<template>
    <view class="page">
        <view class="DrawerPage" :class="modalName=='DrawerModalL'?'show':''">
            <scroll-view scroll-y style="height: 100vh;z-index: 3">
                <cu-custom class="home-custom" bgColor=".bg-sancolor"
                           bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png"
                           :isBack="true">
                    <block slot="content">抽样单详情</block>
                </cu-custom>
                <view :style="'z-index:2;position: sticky;top:calc('+CustomBar+'px - 80rpx)' ">
                    <view class="cu-list menu">
                        <view class="cu-item" style="min-height: 80rpx">
                            <view class="content">
                                <text class="cuIcon-formfill text-black lg"></text>
                                <text class="text-black">编号：{{ sampleDetailInfo.samplingNumber }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="bg-white nav solid-bottom">
                        <view class="flex text-center">
                            <view class="cu-item flex-sub" :class="pageIndex === 0?'text-blue cur':''"
                                  @tap="pageIndex = 0">
                                抽样基本信息
                            </view>
                            <view class="cu-item flex-sub" :class="pageIndex === 1?'text-blue cur':''"
                                  @tap="pageIndex = 1">
                                抽样样品信息
                            </view>
                            <view class="cu-item flex-sub" :class="pageIndex === 2?'text-blue cur':''"
                                  @tap="pageIndex = 2">
                                现场照片
                            </view>
                        </view>
                    </view>

                </view>
                <view style="margin-bottom: 130rpx">
                    <!--基本信息-->
                    <view v-show="pageIndex === 0">
                        <view class="cu-list menu">
                            <view class="cu-bar bg-white margin-top-sm solid-bottom">
                                <view class="action">
                                    <text class="cuIcon-titles text-green"></text>
                                    <text>被抽查单位信息</text>
                                </view>
                            </view>
                            <form>
                                <view class="cu-form-group">
                                    <view class="title">单位名称</view>
                                    <view>
                                        {{ sampleDetailInfo.bySampleUnitName}}
                                    </view>
                                    <!--                        <input :disabled="input_diabled" placeholder="请输入单位名称" name="input"
                                                                   v-model="sampleDetailInfo.bySampleUnitName"></input>-->
                                </view>
                                <view class="cu-form-group ">
                                    <view class="title">单位地址</view>
                                    <input placeholder="请输入单位地址"
                                           name="input"
                                           v-model="sampleDetailInfo.bySampleAddress" disabled></input>
                                </view>
                                <view class="cu-form-group ">
                                    <view class="title">联系人</view>
                                    <input placeholder="请输入联系人" name="input"
                                           v-model="sampleDetailInfo.bySampleContactName" disabled></input>
                                </view>
                                <view class="cu-form-group ">
                                    <view class="title">电话</view>
                                    <input placeholder="请输入电话" name="input"
                                           v-model="sampleDetailInfo.bySampleContactPhone" disabled></input>
                                </view>
                            </form>
                            <view class="cu-bar bg-white margin-top-sm solid-bottom">
                                <view class="action">
                                    <text class="cuIcon-titles text-green"></text>
                                    <text>抽样单位信息</text>
                                </view>
                            </view>
                            <form>
                                <view class="cu-form-group">
                                    <view class="title">单位名称</view>
                                    <input placeholder="请输入单位名称" name="input"
                                           v-model="sampleDetailInfo.sampleUnitName" disabled></input>
                                </view>
                                <view class="cu-form-group ">
                                    <view class="title">单位地址</view>
                                    <input placeholder="请输入单位地址" name="input"
                                           v-model="sampleDetailInfo.sampleAddress" disabled></input>
                                </view>
                                <view class="cu-form-group ">
                                    <view class="title">联系人</view>
                                    <input placeholder="请输入联系人" name="input"
                                           v-model="sampleDetailInfo.sampleContactName" disabled></input>
                                </view>
                                <view class="cu-form-group">
                                    <view class="title">电话</view>
                                    <input placeholder="请输入电话" name="input"
                                           v-model="sampleDetailInfo.sampleContactPhone" disabled></input>
                                </view>
                                <view class="cu-form-group  align-start">
                                    <view class="title">备注</view>
                                    <textarea placeholder="抽样备注" name="input"
                                           v-model="sampleDetailInfo.samplingMask" disabled></textarea>
                                </view>
                            </form>

                            <!--                        <view class="padding flex flex-direction">
                                                        <button class="cu-btn bg-green  lg" @tap="toSampleInfoList(sampleDetailInfo.id)">管理样品
                                                        </button>
                                                    </view>-->

                        </view>
                    </view>
                    <view v-show="pageIndex === 1">
                        <view class="cu-bar bg-white margin-top-sm solid-bottom">
                            <view class="action">
                                <text class="cuIcon-titles text-green"></text>
                                <text>抽样基地信息</text>
                            </view>
                        </view>
                        <form>
                            <view class="cu-form-group">
                                <view class="title">抽样地点</view>
                                <input placeholder="请选择抽样地点" name="input"
                                       v-model="sampleDetailInfo.samplingAddress" disabled>
                            </view>

                        </form>
                        <view class="cu-bar bg-white margin-top-sm solid-bottom">
                            <view class="action">
                                <text class="cuIcon-titles text-green"></text>
                                <text>抽样信息</text>
                            </view>
                        </view>
                        <view class="padding-sm" style="padding-bottom: 180upx">
                            <view class="cu-list menu bg-white"
                                  v-for="(item, index) in ahSampleDetailList" :key="index">
                                <view class="cu-item">
                                    <view class="title text-black text-bold text-lg">
                                        <text class="cuIcon-titles text-green"></text>
                                        {{ index + 1 }}.{{ item.name }}
                                    </view>
                                    <view class="action">
                                        {{ item.samplingDate }}
                                    </view>
                                </view>
                                <view class="content detail padding-sm solid-bottom">
                                    <view class="text-gray">样品来源：{{ item.source }}</view>
                                    <view class="text-gray">抽样数量：{{ item.samplingNumber }}{{ item.samplingType }}</view>
                                    <view class="text-gray">抽样基数：{{ item.samplingBase }}{{ item.samplingType }}</view>
                                    <view class="text-gray">生产日期：{{ item.manufactureDate }}</view>
                                </view>
                            </view>
                            <view class="radius shadow-warp bg-white text-lg" v-if="ahSampleDetailList.length === 0">
                                <view class="cu-list menu-avatar">
                                    <view class="cu-item">
                                        <view class="content">
                                            <view class="text-sm text-center" style="justify-content: center;">
                                                <text class="text-cut text-lg">
                                                    <text class="cuIcon-warn text-yellow margin-right-xs text-xl"></text>
                                                    未查询到样本数据
                                                </text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="padding flex flex-direction padding-bottom-xl fixedFootBtn bg-white padding-top-xs" v-if="!sampleDetailInfo.commitPeopleId">
                            <button class="cu-btn bg-blue lg margin-top-sm shadow-blur" type=""  v-if="input_diabled"
                                    @tap="submitSampleSheet">确认抽样单
                            </button>
                        </view>
                    </view>
                    <view v-show="pageIndex === 2">
                        <view class="cu-list menu">
                            <view class="cu-bar bg-white margin-top-sm solid-bottom">
                                <view class="action">
                                    <text class="cuIcon-titles text-green"></text>
                                    <text>抽样单照片</text>
                                </view>
                            </view>
                            <view class="cu-form-group">
                                <view class="grid col-3 grid-square flex-sub">
                                    <view class="bg-img" @tap="ViewImage(sampleDetailInfo.sampleSheetPhoto)" v-if="sampleDetailInfo.sampleSheetPhoto">
                                        <image :src='sampleDetailInfo.sampleSheetPhoto' mode='aspectFill'></image>
                                    </view>
                                    <view class="solids"  v-if="!sampleDetailInfo.sampleSheetPhoto">
                                        <text>未上传</text>
                                    </view>
                                </view>
                            </view>
                            <view class="cu-bar bg-white margin-top-sm solid-bottom">
                                <view class="action">
                                    <text class="cuIcon-titles text-green"></text>
                                    <text>封样照片</text>
                                </view>
                            </view>
                            <view class="cu-form-group">
                                <view class="grid col-3 grid-square flex-sub">
                                    <view class="bg-img" @tap="ViewImage(sampleDetailInfo.sealingPhoto)" v-if="sampleDetailInfo.sealingPhoto">
                                        <image :src='sampleDetailInfo.sealingPhoto' mode='aspectFill'></image>
                                    </view>
                                    <view class="solids" v-if="!sampleDetailInfo.sealingPhoto">
                                        <text>未上传</text>
                                    </view>
                                </view>
                            </view>
                            <view class="cu-bar bg-white margin-top-sm solid-bottom">
                                <view class="action">
                                    <text class="cuIcon-titles text-green"></text>
                                    <text>抽样人员合影照片</text>
                                </view>
                            </view>
                            <view class="cu-form-group">
                                <view class="grid col-3 grid-square flex-sub">
                                    <view class="bg-img" @tap="ViewImage(sampleDetailInfo.groupPhoto)" v-if="sampleDetailInfo.groupPhoto">
                                        <image :src='sampleDetailInfo.groupPhoto' mode='aspectFill'></image>
                                    </view>
                                    <view class="solids" v-if="!sampleDetailInfo.groupPhoto">
                                        <text>未上传</text>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
                <view class="padding flex flex-direction padding-bottom-xl fixedFootBtn bg-white padding-top">
                    <button class="cu-btn bg-blue lg shadow-blur" type="" @tap="submitSampleSheet">确认抽样单</button>
                </view>
            </scroll-view>
        </view>
    </view>
</template>


<script>
    import { _checkModel } from "../check-model";

    export default {

        data() {
            return {
                CustomBar: this.CustomBar,
                pageIndex: 0,
                sampleDetailInfo: {},
                ahSampleDetailList: [],
            };
        },
        onLoad(options) {
            this.getSampleInfoDetail(options.id);
        },
        methods: {
            getSubXzqList(xzqdm) {
                return new Promise(resolve => {
                    _checkModel.getSubXzqList(xzqdm, res => {
                        resolve(res);
                    });
                });
            },
            getSampleInfoDetail(id) {
                _checkModel.getAhSampleSheetDetail(id, res => {
                    const {code,data,message} = res;
                    if(code === 200){
                        console.log("getAhSampleSheetDetail",data);
                        this.sampleDetailInfo = data.ahSampleSheet;
                        //查询抽样样品信息
                        this.getSampleSheetDetailData();
                    }else{
                        this.$msg(message);
                        this.input_diabled = true;
                    }

                });
            },
            submitSampleSheet(){
                uni.showModal({
                    title: "提示",
                    content: "确认完成当前抽样单",
                    cancelText: "取消",
                    confirmText: "确认",
                    success: res => {
                        if (res.confirm) {
                            _checkModel.submitSampleSheetNJB(this.sampleDetailInfo.id,res=>{
                                const {code,message} = res;
                                if(code === 200){
                                    this.$msg("确认成功");
                                    setTimeout(() => {
                                        uni.navigateTo({
                                            url: '/pages/sample-check-list/index'
                                        })
                                    }, 1500)
                                } else {
                                    this.$msg(message);
                                }
                            })
                        }
                    }})

            },

            getSampleSheetDetailData() {
                _checkModel.getSampleSheetDetailData({
                    sampleSheetId: this.sampleDetailInfo.id,
                    pageNum: 1,
                    pageSize: 100
                }, res => {
                    const { code, message, data: { records } } = res;
                    if (code === 200) {
                        this.ahSampleDetailList = records;
                    } else {
                        this.$msg(message);
                    }
                });
            },
            ViewImage(url) {
                uni.previewImage({
                    urls: [url],
                    current: url
                });
            },

        }
    };

</script>

<style scoped>
    .page {
        /*background-image: var(--gradualBlue);*/
        background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
        width: 100vw;
        overflow: hidden;
    }

    .DrawerPage .nav .cu-item.cur {
        border-bottom: 4rpx solid;
    }

    .DrawerPage .nav .cu-item.cur::after {
        content: none;
    }

    /*.nav .cu-item{
        height: 70rpx;
        line-height: 70rpx;
    }*/
    .cu-modal.drawer-modal .cu-dialog {
        min-width: 85vw;
    }

    .btDialog {
        min-height: 80vh;
    }

    .detail view {
        height: 1.8em;
        line-height: 1.8em !important;
        border: none;
        color: gray;
    }

    .tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20upx;
    }
    .fixedFootBtn {
        border-top: 1px solid #ddd;
        position: fixed;
        width: 100vw;
        bottom: 0;
        z-index: 1000;
    }
</style>