smart-app/pages/qualityInspection_fj/addInspection.vue

<template>
    <view class="bg-white">
        <cu-custom bgColor="bg-blue" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">新增巡检</block>
            <block slot="right">
                <text style="margin-right: 10rpx" @click="submitForm">保存</text>
            </block>
        </cu-custom>
        <view class="hc-tab-bar">
            <scroll-view scroll-x class="bg-white nav">
                <view class="flex text-center">
                    <block v-for="item in engineeringType">
                        <view class="cu-item flex-sub" :class="item.id === addform.engineeringType?'text-blue cur':''"
                              @tap="engineeringTypeChange(item)">
                            {{ item.label }}
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
        <view style="padding: 15px;">
            <uni-forms ref="formRef" :rules="formRules" label-width="110px" :modelValue="addform">
                <uni-forms-item label="检查日期" required name="startDate">
                    <uni-datetime-picker type="date" return-type="string" v-model="addform.startDate"/>
                </uni-forms-item>
                <uni-forms-item label="工程名称" required name="unitName">
                    <uni-easyinput v-model="addform.unitName" placeholder="请输入工程名称"/>
                </uni-forms-item>
                <uni-forms-item label="关联部位" required name="relation">
                    <view class="hc-fj-form-item-s">
                        <view class="title text-cut">{{addform.relation ? '已选择关联' : '请点击右边按钮选择' }}</view>
                        <button class="cu-btn bg-blue" @click="relationStringClick">+选择关联</button>
                    </view>
                </uni-forms-item>
                <uni-forms-item label="左/右幅" required name="aroundPicture">
                    <uni-data-select v-model="addform.aroundPicture" :localdata="aroundPictureData"/>
                </uni-forms-item>
                <uni-forms-item label="分部工程类别" required name="segmentName">
                    <uni-easyinput v-model="addform.segmentName" placeholder="请输入分部工程类别"/>
                </uni-forms-item>
                <!-- 桥梁工程 -->
                <block v-if="addform.engineeringType === 2">
                    <uni-forms-item label="分项工程名称" required name="subitemName">
                        <uni-easyinput v-model="addform.subitemName" placeholder="请输入分项工程名称"/>
                    </uni-forms-item>
                    <uni-forms-item label="缺陷所处位置" required name="startStopStake">
                        <uni-easyinput v-model="addform.startStopStake" placeholder="请输入"/>
                    </uni-forms-item>
                    <uni-forms-item label="构建编号" required name="buildNumber">
                        <uni-easyinput v-model="addform.buildNumber" placeholder="请输入"/>
                    </uni-forms-item>
                </block>
                <!-- 隧道工程 -->
                <block v-if="addform.engineeringType === 1">
                    <uni-forms-item label="分项工程桩号" required name="subitemStake">
                        <uni-easyinput v-model="addform.subitemStake" placeholder="请输入分项工程桩号"/>
                    </uni-forms-item>
                    <uni-forms-item label="缺陷起点桩号" required name="startStopStake">
                        <uni-easyinput v-model="addform.startStopStake" placeholder="请输入"/>
                    </uni-forms-item>
                    <uni-forms-item label="横坐标" required name="abscissa_1">
                        <uni-easyinput v-model="addform.abscissa_1" placeholder="请输入"/>
                    </uni-forms-item>
                    <uni-forms-item label="缺陷止点桩号" required name="stopStake">
                        <uni-easyinput v-model="addform.stopStake" placeholder="请输入"/>
                    </uni-forms-item>
                    <uni-forms-item label="横坐标" required name="abscissa_2">
                        <uni-easyinput v-model="addform.abscissa_2" placeholder="请输入"/>
                    </uni-forms-item>
                    <uni-forms-item label="长(m)" required name="dataLength">
                        <uni-easyinput v-model="addform.dataLength" placeholder="请输入"/>
                    </uni-forms-item>
                    <uni-forms-item label="宽(m)" required name="dataWidth">
                        <uni-easyinput v-model="addform.dataWidth" placeholder="请输入"/>
                    </uni-forms-item>
                    <uni-forms-item label="面积" required name="dataArea">
                        <uni-easyinput v-model="addform.dataArea" placeholder="请输入面积"/>
                    </uni-forms-item>
                </block>
                <uni-forms-item label="病害类型" required name="diseaseType" v-if="addform.engineeringType === 1">
                    <uni-data-select v-model="addform.diseaseType" :clear="false" :localdata="diseaseTypeData" @change="diseaseTypeChange"/>
                </uni-forms-item>
                <uni-forms-item label="病害类型" required name="diseaseType" v-if="addform.engineeringType === 2">
                    <uni-data-select v-model="addform.diseaseType" :clear="false" :localdata="diseaseTypeData1" @change="diseaseTypeChange"/>
                </uni-forms-item>
                <uni-forms-item label="严重程度" required name="severity">
                    <uni-data-select v-model="addform.severity" :localdata="severityData"/>
                </uni-forms-item>
                <uni-forms-item label="限制性缺陷" required name="defectType">
                    <uni-data-select v-model="addform.defectType" :localdata="defectTypeData"/>
                </uni-forms-item>
                <uni-forms-item label="病害描述" required name="hiddenDanger">
                    <uni-easyinput type="textarea" v-model="addform.hiddenDanger" :disabled="!addform.diseaseType" placeholder="请先选择病害类型"/>
                </uni-forms-item>
                <uni-forms-item label="上传照片" required name="images">
                    <view class="hc-form-up-img-box">
                        <block v-for="(item, index) in photoImages" :key="index">
                            <view class="bg-img" @click="viewImage(index)">
                                <image :src="item" mode="aspectFill"/>
                                <view class="cu-tag bg-red" @click.stop="delImg(index)">
                                    <text class='cuIcon-close'/>
                                </view>
                            </view>
                        </block>
                        <view class="solids-add" @click="chooseImageTap">
                            <text class='cuIcon-add'/>
                        </view>
                        <view class="tip-text">支持JPG/JPEG/PNG</view>
                    </view>
                </uni-forms-item>
                <uni-forms-item label="是否限期整改" required name="deadline">
                    <uni-data-checkbox v-model="addform.deadline" :localdata="[{text: '是',value: 1}, {text: '否',value: 0}]"/>
                </uni-forms-item>
                <uni-forms-item label="限期整改日期" required name="endDate">
                    <uni-datetime-picker type="date" return-type="string" v-model="addform.endDate"/>
                </uni-forms-item>
                <uni-forms-item label="施工方检查人" required name="checkName">
                    <uni-easyinput v-model="addform.checkName" placeholder="请输入施工方检查人员"/>
                </uni-forms-item>
                <uni-forms-item label="监理方检查人" required name="superCheckName">
                    <uni-easyinput v-model="addform.superCheckName" placeholder="请输入监理方检查人员"/>
                </uni-forms-item>
                <uni-forms-item label="整改人员" required name="taskflowUser">
                    <view class="flex">
                        <uni-easyinput :value="taskflowUserStr" disabled/>
                        <view class="name-btn" @click="userChange">选择+</view>
                    </view>
                </uni-forms-item>
                <uni-forms-item label="备注" name="remark">
                    <uni-easyinput v-model="addform.remark" type="textarea" placeholder="请输入备注"/>
                </uni-forms-item>
            </uni-forms>
        </view>
    </view>
</template>
<script>
import config from "../../core/api.js"
import {deepCopy} from "@/uni_modules/uni-forms/components/uni-forms/utils";

export default {
    data() {
        return {
            engineeringType: [
                {id: 1, label: '隧道工程'},
                {id: 2, label: '桥梁工程'}
            ],
            diseaseTypeData: [
                {value: 1, text: '蜂窝麻面', data: '面积小于该面总面积0.5%，深度小于10mm'},
                {value: 2, text: '错台', data: '加宽带端头错台'},
                {value: 3, text: '洞门端墙、挡土墙表面裂缝', data: '洞门挡土墙存在裂缝，裂缝宽度大于0.2mm'},
                {value: 4, text: '裂缝', data: '砼表面裂缝，环向/纵向'},
                {value: 5, text: '渗漏水', data: '洞内存在渗漏点'},
            ],
            diseaseTypeData1: [
                {value: 1, text: '蜂窝麻面', data: '面积为    m2,蜂窝总面积为所在面面积的      %。'},
                {value: 2, text: '裂缝', data: '裂缝长度L=    m,最大宽度δ=    mm，裂缝方向为         向。'},
                {value: 3, text: '模板接缝高差', data: '模板接缝处高差为    mm。'},
                {value: 4, text: '漏浆', data: '混凝土表面有    处漏浆现象。'},
                {value: 5, text: '空洞', data: '面积为    m2，深度为    mm。'},
                {value: 6, text: '钢筋外露', data: '面积为    m2。'},
                {value: 7, text: '建筑垃圾', data: '有    处未清除处理。'},
                {value: 8, text: '预埋件', data: '有    处未清除处理。'},
                {value: 9, text: '预制构件安装', data: '不平整度为    mm。'},
                {value: 10, text: '梁段间接缝', data: '高差为   mm。'},
                {value: 11, text: '梁段间色泽', data: ' 处存在差异。'},
                {value: 12, text: '梁段间错台', data: '长度为    m，高差为     mm。'},
                {value: 13, text: '主体钢结构外露涂装', data: '破损面积为     m2。'},
                {value: 14, text: '钢缆防蚀层', data: '破损面积为     m2。'},
                {value: 15, text: '湿接缝渗漏水', data: '长度为     m。'},
                {value: 16, text: '疏松', data: '面积为   m2，占所在面面积的    %，深度为   mm。'},
                {value: 17, text: '夹渣', data: '面积为   mm2。'},
                {value: 18, text: '掉皮、起砂', data: '面积为   mm2，占所在面面积的   %。'},
                {value: 19, text: '锥坡沉陷', data: '长度为   m，深度为   mm。'},
                {value: 20, text: '护坡沉陷', data: '长度为   m，深度为   mm。'},
                {value: 21, text: '内外轮廓线', data: '处不顺滑清晰。'},
                {value: 22, text: '栏杆、护栏', data: '处不牢固，   处不直顺。'},
                {value: 23, text: '沥青混凝土表面', data: '不平整密实，面积为   m2。'},
                {value: 24, text: '沥青混凝土泛油', data: '面积为    m2，占受检面面积的    %。'},
                {value: 25, text: '沥青混凝土松散', data: '面积为    m2，占受检面面积的    %。'},
                {value: 26, text: '沥青混凝土裂缝', data: '长度为    m，占受检面面积的    %。'},
                {value: 27, text: '沥青混凝土离析', data: '面积为    m2，占受检面面积的    %。'},
                {value: 28, text: '伸缩缝堵塞', data: '有   处堵塞。'},
                {value: 29, text: '伸缩缝变形', data: '有   处，长度为   m。'},
                {value: 30, text: '伸缩缝开裂', data: '有   处，长度为   m。'},
                {value: 31, text: '桥头跳车', data: '桥面与伸缩缝高差为    mm。'},
                {value: 32, text: '桥面排水不良', data: '有   处，面积为   m2。'},
                {value: 33, text: '支座安装偏歪', data: '横桥向左侧距梁中心     mm，横桥向右侧距梁中心   mm。'},
                {value: 34, text: '支座不均匀受力', data: '侧存在不均匀受力。'},
                {value: 35, text: '支座脱空', data: '面积为  /  ，高度为    mm。'},
                {value: 36, text: '支座非正常变形', data: '存在   处非正常变形。'},
                {value: 37, text: '支座未按图纸布置', data: '存在   处支座未按图纸布置'},
            ],
            aroundPictureData: [
                { value: 1, text: "左" },
                { value: 2, text: "右" },
                { value: 3, text: "全部" },
            ],
            severityData: [
                { value: 0, text: "一般" },
                { value: 1, text: "严重" },
                { value: 2, text: "轻微" },
            ],
            defectTypeData: [
                { value: 1, text: "限制性缺陷" },
                { value: 2, text: "非限制性缺陷" },
            ],
            photoFiles: [],
            photoImages: [],
            addform: {
                engineeringType: 1,
                startDate: '',
                deadline: 1,
            },
            // 校验规则
            formRules: {
                startDate: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择检查日期'
                    }]
                },
                unitName: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入工程名称'
                    }]
                },
                relation: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择关联工程部位'
                    }]
                },
                aroundPicture: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择左/右幅'
                    }]
                },
                segmentName: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入分部工程类别'
                    }]
                },
                subitemName: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入分项工程名称'
                    }]
                },
                startStopStake: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入相关数据'
                    }]
                },
                buildNumber: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入构建编号'
                    }]
                },
                subitemStake: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入分项工程桩号'
                    }]
                },
                abscissa_1: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入横坐标'
                    }]
                },
                stopStake: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入缺陷止点桩号'
                    }]
                },
                abscissa_2: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入横坐标'
                    }]
                },
                dataLength: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入长(m)'
                    }]
                },
                dataWidth: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入宽(m)'
                    }]
                },
                dataArea: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入面积'
                    }]
                },
                diseaseType: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择病害类型'
                    }]
                },
                severity: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择严重程度'
                    }]
                },
                defectType: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择限制性缺陷'
                    }]
                },
                hiddenDanger: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入病害描述'
                    }]
                },
                images: {
                    rules: [{
                        required: true,
                        errorMessage: '请上传照片'
                    }]
                },
                deadline: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择是否限期整改'
                    }]
                },
                endDate: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择限期整改日期'
                    }]
                },
                checkName: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入施工方检查人'
                    }]
                },
                superCheckName: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入监理方检查人'
                    }]
                },
                taskflowUser: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择整改人员'
                    }]
                },
            }
        }
    },
    computed: {
        taskflowUserStr() {
            const users = this.addform.taskflowUser
            if (users && users.length) {
                let str = '';
                for (let i = 0; i < users.length; i++) {
                    str += users[i].user_name;
                    if (i < users.length - 1) {
                        str += ','
                    }
                }
                return str;
            } else {
                return '请选择整改人员';
            }
        },
    },
    onLoad(e) {
        this.userid = uni.getStorageSync("userInfo").id;
        this.project = uni.getStorageSync("porject" + "_" + uni.getStorageSync("userInfo").id);
        this.addform.startDate = this.$dayjs().format('YYYY-MM-DD');
    },
    onShow() {
        //选择整改人员
        uni.$on("principal", res => {
            this.$set(this.addform, 'taskflowUser', res);
        })
        //选择关联工程部位
        uni.$on("relation", ({relation, relationId}) => {
            this.$set(this.addform, 'relation', relation);
            this.$set(this.addform, 'relationId', relationId);
        })
    },
    onReady() {
        // 设置自定义表单校验规则，必须在节点渲染完毕后执行
        this.$refs.formRef.setRules(this.formRules)
    },
    methods: {
        engineeringTypeChange({id}) {
            let startDate = this.$dayjs().format('YYYY-MM-DD');
            this.addform = {
                engineeringType: id,
                startDate: startDate,
                photoImages: [],
                deadline: 1,
            }
        },
        //上传照片
        chooseImageTap() {
            let photo_files = this.photoFiles, photo_images = this.photoImages;
            uni.chooseFile({
                count: 3,
                extension: ['.jpg', '.png', '.jpeg'],
                success: ({tempFiles, tempFilePaths}) => {
                    tempFiles.forEach(item => {
                        photo_files.push(item)
                    })
                    tempFilePaths.forEach(item => {
                        photo_images.push(item)
                    })
                    //设置数据
                    this.photoFiles = photo_files
                    this.photoImages = photo_images
                    this.addform.images = photo_files
                }
            });
        },
        //预览照片
        viewImage(index) {
            uni.previewImage({
                urls: this.photoImages,
                current: index
            });
        },
        //删除照片
        delImg(index) {
            this.photoFiles.splice(index, 1)
            this.photoImages.splice(index, 1)
            this.addform.images.splice(index, 1)
        },
        //关联工程部位
        relationStringClick() {
            //把已选值储存到全局变量
            getApp().globalData.relationId = this.addform.relationId;
            uni.navigateTo({
                url: "/pages/qualityInspection_fj/tree"
            })
        },
        //病害类型
        diseaseTypeChange(val) {
            const type = this.addform.engineeringType, index = val - 1;
            const typeData = type === 1 ? this.diseaseTypeData : this.diseaseTypeData1;
            this.addform.hiddenDanger = typeData[index].data
        },
        //选择整改人员
        userChange() {
            //把已选值储存到全局变量
            getApp().globalData.principal = this.addform.taskflowUser;
            uni.navigateTo({
                url: "/pages/constructionLog/personnel/personnel?name=" + '选择人员'
            })
        },
        //提交代码
        submitForm() {
            this.$refs.formRef.validate().then(res => {
                this.addInfoHandle();
            }).catch((e) => {
                uni.showToast({
                    title: '请完善表单信息',
                    duration: 1500,
                    icon: 'none'
                });
            })
        },
        addInfoHandle() {
            let form = deepCopy(this.addform), formData = {};
            //处理日期格式
            form.startDate = this.$dayjs(form.startDate).format('YYYY 年 MM 月 DD 日');
            form.endDate = this.$dayjs(form.endDate).format('YYYY 年 MM 月 DD 日');
            //处理人员
            let taskflowUserIds = [];
            if (form.taskflowUser) {
                form.taskflowUser.forEach(element => {
                    taskflowUserIds.push(element.id)
                });
                form.taskflowUser = JSON.stringify(form.taskflowUser);
            }
            form.taskflowUserIds = taskflowUserIds.join(',');
            delete form.images; //删除照片字段
            //处理数据
            Object.keys(form).forEach(key => {
                formData[key] = form[key];
            })
            //处理文件
            const photo_files = [];
            this.photoFiles.forEach((file, i) => {
                if(file && file.size){
                    formData['images['+i+'].file'] = file;
                }
                formData['images['+i+'].remark'] = '';
                formData['images['+i+'].type'] = '1';
                formData['images['+i+'].groupType'] = '1';
                photo_files.push({
                    name: file.name,
                    type: file.type,
                    size: file.size
                })
            })
            formData['files'] = JSON.stringify(photo_files);
            //处理合同段和用户信息
            const {id: projectId, contractId} = this.project
            formData['projectId'] = projectId;
            formData['contractId'] = contractId;
            formData['userId'] = this.userid;
            console.log('formData', formData)
            //发起请求
            const url = config.api;
            const token = uni.getStorageSync("token");
            uni.showLoading({
                title: '加载中'
            });
            uni.uploadFile({
                url: url + "/app/qualityModifyInfo/save",
                filePath: 'test', // 随便填，不为空即可
                name: 'test', // 随便填，不为空即可
                header: {
                    "Authorization": token,
                }, // 可以加access_token等
                formData: formData, // 接口参数，json格式，底层自动转为FormData的格式数据
                success: (res) => {
                    this.$prompt.none("保存成功");
                    setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        })
                    }, 500)
                }, complete() {
                    uni.hideLoading();
                }
            })
        },
        backPage() {
            uni.navigateBack({
                delta: 1
            });
        }
    }
}
</script>

<style lang="scss">
.hc-tab-bar {
    position: relative;
}
.hc-form-up-img-box {
    position: relative;
    .bg-img {
        position: relative;
        display: inline-block;
        height: 160rpx;
        width: 160rpx;
        border: 4rpx dashed #eee;
        border-radius: 4rpx;
        image {
            width: 100%;
            height: 100%;
            border-radius: 4rpx;
        }
        .cu-tag {
            position: absolute;
            right: -4rpx;
            top: -4rpx;
            padding: 8rpx;
            height: auto;
            border-radius: 0 4rpx 0 20rpx;
        }
    }
    .bg-img + .bg-img {
        margin-left: 10rpx;
    }
    .solids-add {
        display: inline-flex;
        height: 160rpx;
        width: 160rpx;
        border: 4rpx dashed #eee;
        border-radius: 4rpx;
        align-items: center;
        justify-content: center;
        text {
            color: #cfcdcd;
            font-size: 66px;
        }
    }
    .tip-text {
        color: #BBBBBB;
        margin-top: 18rpx;
        font-size: 22rpx;
    }
}
.name-btn {
    background-color: #e99d42;
    border-radius: 4px;
    font-size: 14px;
    color: #FFFFFF;
    border: 1px solid #bbbbbb;
    padding: 15rpx 20rpx;
    margin-left: 20px;
}
.name-btn-dis {
    background-color: #bbbbbb;
}
</style>