jonhon-mes-PDA/pages/sanitation/inspection.vue

<template>
    <ifrm ref="ifrm">
        <!-- 安全巡检-->
        <uni-forms ref="form" err-show-type="toast">
            <uni-forms-item><input type="text" v-model="deviceRepairValue" @confirm="deviceRepairConfirm"
                    class="uni-input-border" placeholder="巡检点编码" /></uni-forms-item>
        </uni-forms>
        <t-table>
            <t-tr>
                <t-td>巡检点编码</t-td>
                <t-td>{{ deviceRepairObj.epInspectionPoint.patrolRegister }}</t-td>
            </t-tr>
            <t-tr>
                <t-td>巡检点位置</t-td>
                <t-td>{{ deviceRepairObj.epInspectionPoint.insSpot }}</t-td>
            </t-tr>
            <t-tr>
                <t-td>状态</t-td>
                <t-td>{{ deviceRepairObj.taskStatusText }}</t-td>
            </t-tr>
        </t-table>
        <view style="font-size: 36rpx;">巡检备注：</view>
        <uni-forms ref="form" err-show-type="toast">
            <uni-forms-item><uni-easyinput type="textarea" autoHeight v-model="deviceRepairObj.parMemo"
                    placeholder="请输入内容"></uni-easyinput></uni-forms-item>
        </uni-forms>
        <view class="photoTitleSize">{{uploader.length}}/9</view>
        <view class="showImage">
            <view v-for="(item, i) in uploader" :key="i" class="showImage-for">
                <view class="view-image">
                    <image :src="item.imageUrl" @tap="previewImage(i)" />
                </view>
                <view class="view-icon">
                    <uni-icons type='trash' size="14" color='gray' @click="removeScene(item, i)"></uni-icons>
                </view>
            </view>
            <view class="view-center" v-if="uploader.length < 9">
                <image src="../../static/images/photo.png" @click="chooseImage()"></image>
            </view>
        </view>
        <view class="buttonBox"><button class="button" type="primary"
                :disabled="!(Object.keys(deviceRepairObj).length > 2)" @click="submitClick">提交</button></view>
    </ifrm>
</template>

<script>
    import ifrm from '@/pages/index/ifrm';
    import tTable from '@/components/t-table/t-table.vue';
    import tTh from '@/components/t-table/t-th.vue';
    import tTr from '@/components/t-table/t-tr.vue';
    import tTd from '@/components/t-table/t-td.vue';
    import scan from '../../mixin/scan.js';
    export default {
        mixins: [scan],
        components: {
            ifrm,
            tTable,
            tTh,
            tTr,
            tTd
        },
        data() {
            return {
                deviceRepairValue: '',
                deviceRepairObj: {
                    epInspectionPoint: {},
                    parMemo: ''
                },
                uploader: []
            };
        },
        methods: {

            chooseImage: async function() {
                if (!this.deviceRepairObj.epiId) {
                    return uni.showToast({
                        title: '请先查询巡检点',
                        icon: 'none'
                    });
                }
                uni.chooseImage({
                    // sourceType: ['album','camera'], //album 从相册选图，camera 使用相机，默认二者都有
                    // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    count: 9,
                    success: (res) => {
                        uni.showLoading({
                            title: '上传中，请稍候'
                        });
                        var tempFilePaths = res.tempFilePaths;
                        for (var i = 0; i < tempFilePaths.length; i++) {
                            const file = res.tempFiles[i];
                            this.$uploadUtil.upload(file, {
                                theId: this.deviceRepairObj.epiId,
                                theTag: 'EpPatrolInspection',
                                subTag: 'appDoc'
                            }, tempFilePaths[i]).then((upId) => {
                                uni.hideLoading();
                                //展示图片
                                this.uploader.push({
                                    upId: upId,
                                    imageUrl: file.path
                                });
                            })

                        }
                    },
                    complete() {
                        uni.hideLoading();
                    }
                })
            },
            previewImage: function(index) {
                var imags = [];
                this.uploader.forEach(item => {
                    imags.push(item.imageUrl);
                })
                uni.previewImage({
                    current: index,
                    urls: imags
                })
            },

            removeScene(item, i) {
                //删除现场图片
                this.uploader.splice(i, 1);
                // //删除附件记录
                this.$uploadUtil.asyncDelete(item.upId).then((data) => {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'none'
                    });
                })
                // this.upIdList.splice(this.upIdList.findIndex((upId) => (upId === item.upId)), 1);
            },

            getBarCode(code) {
                this.getData(code);
            },
            deviceRepairConfirm(e) {
                this.getBarCode(e.target.value);
            },
            getData(code) {
                this.deviceRepairValue = code;
                this.$ajax.request({
                    url: 'pdaLoad/getInspectionBySan/' + code,
                    method: 'GET',
                    success: data => {
                        if (data == null) {
                            return uni.showToast({
                                icon: "none",
                                title: '此巡检位置暂无任务'
                            });
                        }
                        this.deviceRepairValue = '';
                        this.deviceRepairObj = data;
                        uni.showToast({
                            title: '数据获取成功'
                        });
                    }
                });
            },
            submitClick() {
                this.$ajax.request({
                    url: 'pdaSave/savePatrolIns',
                    method: 'POST',
                    data: this.deviceRepairObj,
                    success: data => {
                        uni.showToast({
                            title: '保存成功'
                        });
                        this.deviceRepairValue = '';
                        this.deviceRepairObj = {
                            epInspectionPoint: {},
                            parMemo: ''
                        };
                        this.uploader = []
                    }
                });
            }
        },
        onNavigationBarButtonTap(btn) {
            this.$refs.ifrm.topMenuClick(btn);
        },
        onShow() {}
    };
</script>

<style scoped lang="less">
    .uni-forms-item {
        margin-bottom: 6px !important;
    }

    .photoTitleSize {
        color: #a1a1a1;
        text-align: right;
        margin-right: 30rpx;
        margin-top: -30rpx;
    }

    .showImage {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-left: -20rpx;

        .showImage-for {

            display: flex;
            flex-direction: column;
            width: 200rpx;
            margin-left: 30rpx;
            height: 260rpx;

            .view-icon {
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-top: -10rpx;
            }

            image {
                border-width: 2rpx;
                border-color: rgb(229, 229, 229);
                border-style: solid;
                border-radius: 20rpx;
                width: 190rpx;
                height: 190rpx;
            }
        }
    }

    .view-center {
        margin: 0rpx 25rpx;

        image {
            border-width: 2rpx;
            border-color: rgb(229, 229, 229);
            border-style: solid;
            border-radius: 20rpx;
            width: 190rpx;
            height: 190rpx;
        }
    }
</style>