wdt_erp_process_h5/pages/edt/DisposeRubbishFormDetail.vue

<template>
    <view>
        <cu-custom :backUrl="'/pages/index/index?id=apps'" :isBack="true" bgColor="bg-gradual-blue">
            <block slot="content">建筑垃圾清运处理</block>
        </cu-custom>

        <!-- First Section: 巡视工单 to 联系方式 -->
        <view class="form-section">
            <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">

                <u-form-item label="清运编号" prop="no">
                    <u--input v-model="inputForm.no" :disabled="true" placeholder="工单编号" clearable></u--input>
                </u-form-item>

                <u-form-item label="所属单位" prop="processingUnitName" :required="true">
                    <u--input v-model="inputForm.processingUnitName" :disabled="true" placeholder="所属单位" clearable></u--input>
                </u-form-item>

                <u-form-item label="清运专员" prop="clearUserName">
                    <u--input v-model="inputForm.clearUserName" :disabled="true" placeholder="清运专员" clearable></u--input>
                </u-form-item>

                <u-form-item label="联系方式" prop="clearUserMobile">
                    <u--input v-model="inputForm.clearUserMobile" :disabled="true" placeholder="联系方式" clearable></u--input>
                </u-form-item>

                <u-form-item label="处理方式" prop="disposeType" :required="true" >
                    <jp-picker v-model="inputForm.disposeType" rangeKey="label" :disabled="true" rangeValue="value" :range="[
                    { label: '转运调剂处理', value: '1' },
                    { label: '自行处理', value: '2' },
                ]" ></jp-picker>
                </u-form-item>

                <u-form-item label="垃圾站点" prop="rubbishStation">
                    <u--input v-model="inputForm.rubbishStation" :disabled="true" placeholder="垃圾站点" clearable></u--input>
                </u-form-item>


                <template>
                    <div>
                        <u-form-item
                                v-for="(item, index_workOver) in inputForm.workOverNoList"
                                :key="index_workOver"
                                :label="`巡视工单 ${index_workOver + 1}`"
                                :required="true"
                                :prop="'workOverNoList[' + index_workOver + '].no'"
                        >
                            <u--input
                                    v-model="inputForm.workOverNoList[index_workOver].no"
                                    :disabled="true"
                                    placeholder="请选择巡视工单编号">
                            </u--input>
                            <u-button type="primary" style="width: 20%" text="详情" @click="disposeWorkOver(inputForm.workOverNoList[index_workOver].id)"></u-button>
                        </u-form-item>
                    </div>
                </template>
            </u--form>
        </view>

        <!-- Second Section: 上传图片 -->
        <view class="form-section">
            <text class="u-demo-block__title">清理前照片</text>
            <view class="u-page__upload-item">
                <u-upload
                        :disabled="true"
                        :fileList="fileList1"
                        @afterRead="afterRead"
                        name="1"
                        multiple
                        :maxCount="10"
                ></u-upload>
            </view>
        </view>

        <!-- Second Section: 上传图片 -->
        <view class="form-section">
            <text class="u-demo-block__title">清理中照片</text>
            <view class="u-page__upload-item">
                <u-upload
                        :disabled="true"
                        :fileList="fileList2"
                        @afterRead="afterRead"
                        name="2"
                        multiple
                        :maxCount="10"
                ></u-upload>
            </view>
        </view>

        <!-- Second Section: 上传图片 -->
        <view class="form-section">
            <text class="u-demo-block__title">清理后照片</text>
            <view class="u-page__upload-item">
                <u-upload
                        :disabled="true"
                        :fileList="fileList3"
                        @afterRead="afterRead"
                        name="3"
                        multiple
                        :maxCount="10"
                ></u-upload>
            </view>
        </view>
        <!-- Third Section: 备注 -->
        <view class="form-section">
            <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm" >
                <u-form-item label="备注" borderBottom prop="remarks">
                    <u--textarea placeholder='请填写备注' :disabled="true" :maxlength="500" v-model="inputForm.remarks"></u--textarea>
                </u-form-item>
            </u--form>
        </view>

        <view class="form-section">
            <span style="color: #4396fd;">现场信息登记</span>
            <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">

                <u-form-item label="重量（t）" prop="weight" :required="true">
                    <u--input
                            :disabled="true"
                            v-model="inputForm.weight"
                            placeholder="重量"
                            clearable
                    ></u--input>
                </u-form-item>

                <u-form-item label="运输里程（km）" prop="transportMileage" :required="true">
                    <u--input
                            :disabled="true"
                            v-model="inputForm.transportMileage"
                            placeholder="运输里程"
                            clearable
                    ></u--input>
                </u-form-item>

                <u-form-item label="补贴（元）" prop="subsidy" :required="true">
                    <u--input
                            :disabled="true"
                            v-model="inputForm.subsidy"
                            placeholder="补贴"
                            clearable
                    ></u--input>
                </u-form-item>
            </u--form>
        </view>
        <!-- Second Section: 上传图片 -->
        <view class="form-section">
            <text style="color: black">过磅现场照片</text>
            <view class="u-page__upload-item" >
                <text class="u-demo-block__title">照片上传</text>
                <u-upload
                        :disabled="true"
                        :fileList="fileList4"
                        @afterRead="afterRead"
                        name="4"
                        multiple
                        :maxCount="10"
                ></u-upload>
            </view>
        </view>
    </view>
</template>

<script>
    import disposeRubbishService from '@/api/garbageClearance/disposeRubbishService'
    import overService from '@/api/garbageClearance/overService'
    import WorkOverChoose from './WorkOverChoose'
    import taskService from "@/api/flowable/taskService"
    import {mapState, mapMutations, mapActions} from 'vuex'
    import * as $auth from "../../common/auth";
    import { EventBus } from '@/store/eventBus.js';
    export default {
        components: {
            WorkOverChoose,
        },
        computed: mapState({
            userInfo: (state) => state.user.userInfo,
            avatar: (state) => state.user.avatar
        }),
        data () {
            return {
                disFlag: true,  // 启用动态获取处理单位则设置为false
                isProcessing: false,  // 遮罩层
                processingUnits: [],
                taskName: '',   //当前节点处理人节点名称
                fileList1: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
                nodeFlag: false,
                weighFlag: false,  // 过磅管理员看到的信息
                inputForm: {
                    programId: '',
                    programIds: [],
                    no: '',
                    processingUnit: '',
                    processingUnitName: '',
                    clearUserId: '',
                    clearUserName: '',
                    clearUserMobile: '',
                    remarks: '',
                    status: '',
                    workOverNoList: [],
                    disposeType: '',
                    rubbishStation: '',
                    weight: '',
                    transportMileage: '',
                    subsidy: '',
                },
                rules: {
                    'processingUnit': [
                        {
                            required: true,
                            message: '处理单位不能为空',
                            trigger: ['blur', 'change']
                        }
                    ],
                }
            }
        },
        // 页面加载时执行
        async created() {
        },
        props: {
            businessId: {
                type: String,
                default: ''
            },
            formReadOnly: {
                type: Boolean,
                default: false
            },
            status: {
                type: String,
                default: ''
            }
        },
        watch: {
            'businessId': {
                handler (newVal) {
                    if (this.businessId) {
                        this.init(this.businessId)
                    } else {
                        this.$nextTick(() => {
                            // this.$refs.inputForm.reset()
                        })
                    }
                },
                immediate: true,
                deep: false
            },
        },
        methods: {
            async init(id) {
                this.nodeFlag = true;
                this.inputForm.id = id;

                if (id) {
                    // 使用 await 等待查询结果
                    const data = await disposeRubbishService.queryById(id);

                    // 获取当前节点流程信息，并等待其执行完成
                    const taskName = await taskService.getTaskNameByProcInsId(data.procInsId);
                    this.taskName = taskName

                    // 恢复表单数据
                    this.inputForm = this.recover(this.inputForm, data);

                    // 处理文件列表
                    if (data.fileList1) {
                        this.fileList1 = data.fileList1.map(item => ({
                            attachmentName: item.name,
                            fileSize: item.size,
                            url: item.temporaryUrl,
                            type: item.type // 如果不需要，可以不写
                        }));
                    }

                    if (data.fileList2) {
                        this.fileList2 = data.fileList2.map(item => ({
                            attachmentName: item.name,
                            fileSize: item.size,
                            url: item.temporaryUrl,
                            type: item.type // 如果不需要，可以不写
                        }));
                    }

                    if (data.fileList3) {
                        this.fileList3 = data.fileList3.map(item => ({
                            attachmentName: item.name,
                            fileSize: item.size,
                            url: item.temporaryUrl,
                            type: item.type // 如果不需要，可以不写
                        }));
                    }
                    if (data.fileList4) {
                        this.fileList4 = data.fileList4.map(item => ({
                            attachmentName: item.name,
                            fileSize: item.size,
                            url: item.temporaryUrl,
                            type: item.type // 如果不需要，可以不写
                        }));
                    }
                }
            },

            // 显示  项目选择器
            disposeWorkOver(id) {
                uni.navigateTo({
                    url: '/pages/edt/PatrolWorkOrderForm?id='+id + '&showFlag=true'
                })

            },
        }
    }
</script>

<style>
    .form-section {
        padding: 10px 15px;
        margin-bottom: 10px;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .u-page__upload-item {
        margin-top: 10px;
    }

    .button-container {
        margin-top: 20px;
        text-align: center;
    }

    .cu-form-group .title {
        min-width: 100px;
    }
    /* 遮罩层样式 */
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.05); /* 半透明遮罩 */
        z-index: 9999; /* 确保遮罩层在最顶层 */
    }
</style>