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

<template>
    <ifrm ref="ifrm">
        <!-- 安全巡检-->
        <uni-forms ref="form" err-show-type="toast">
            <uni-forms-item><input type="text" v-model="patrolRegisterValue" @confirm="patrolRegisterConfirm"
                    class="uni-input-border" placeholder="巡检点编码" /></uni-forms-item>
        </uni-forms>

        <uni-table border stripe emptyText="暂无更多数据" class="table">
            <uni-tr>
                <uni-th align="center">巡检点编码</uni-th>
                <uni-th align="center">巡检点位置</uni-th>
            </uni-tr>
            <uni-tr v-for="(item, index) in patrolRegisterList" :key="index">
                <uni-td align="center">{{ item.patrolRegister }}</uni-td>
                <uni-td align="center">{{ item.insSpot }}</uni-td>
            </uni-tr>
        </uni-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="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="!(patrolRegisterList.length > 0)"
                @click="submitClick">提交</button></view>
    </ifrm>
</template>

<script>
    import ifrm from '@/pages/index/ifrm';
    import scan from '../../mixin/scan.js';
    export default {
        mixins: [scan],
        components: {
            ifrm
        },
        data() {
            return {
                patrolRegisterValue: '',
                patrolRegisterList: [],
                uploader: [],
                parMemo: ''
            };
        },
        methods: {
            getBarCode(code) {
                this.getData(code);
            },
            patrolRegisterConfirm(e) {
                this.getBarCode(e.target.value);
            },
            getData(code) {
                if (!code) return;
                this.patrolRegisterValue = code;
                this.$ajax.request({
                    url: 'pdaLoad/getInspectionByEcCode/' + code,
                    method: 'GET',
                    success: data => {
                        console.log(data);
                        this.patrolRegisterValue = '';
                        this.patrolRegisterList = data;
                        uni.showToast({
                            title: '数据获取成功'
                        });
                    }
                });
            },
            submitClick() {
                let piList = [];
                this.patrolRegisterList.forEach(item => {
                    piList.push({
                        piId: item.piId
                    });

                });
                this.$ajax.request({
                    url: 'pdaSave/saveByInspection',
                    method: 'POST',
                    data: {
                        piList,
                        parMemo: this.parMemo
                    },
                    success: data => {
                        uni.showToast({
                            title: '巡检成功'
                        });
                        this.patrolRegisterValue = '';
                        this.patrolRegisterList = [];
                        this.uploader = []
                    }
                });
            },
            chooseImage: async function() {
                if (this.patrolRegisterList.length == 0) {
                    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.patrolRegisterList[0].piId,
                                theTag: 'SafePatrolInspection',
                                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);
            },
        },

        onNavigationBarButtonTap(btn) {
            this.$refs.ifrm.topMenuClick(btn);
        },
        onShow() {}
    };
</script>

<style scoped lang="less">
    .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>