tqApp-webView/workflow/vehicleRepairRecord/index.vue

<template>
    <view class="registrationRecord-box">
        <view class="list-box">
            <u--form label-width="auto" ref="uForm" :model="form" labelAlign="right">
                <u-subsection :list="list" mode="subsection" :current="curNow" @change="sectionChange"></u-subsection>
                <u-cell-group customStyle="margin-top: 2px">
                    <template>
                        <u-cell title="申请时间" :border="true" :isLink="true"
                            @click="$refs.startTimeRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.startTime">
                                    <template v-if="form.createTimeEnd">
                                        {{ form.createTimeBegin }} - {{ form.createTimeEnd }}</template>
                                    <template v-else></template>
                                </u-form-item>
                            </view>
                        </u-cell>

                        <tq-calendar ref="startTimeRef"
                                   
                            @confirm="(e) => {
                                form.createTimeBegin = e[0]
                                form.createTimeEnd = e[1]
                        		anewQueryMyList()
                            }">
                        </tq-calendar>
                    </template>

                    <!-- 用车类型 -->
                    <template>
                        <u-cell title="用车类型" :border="true" :isLink="true"
                            @click="$refs.dictSelectRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.applyTypeName">
                                    {{ form.applyTypeName }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-dict-select
                            ref="dictSelectRef"
                            dictType="matter_type"
                            @confirm="(data) => {
                                form.applyType = data.dictValue
                                form.applyTypeName = data.dictLabel
                                anewQueryMyList()
                            }">
                        </tq-dict-select>
                    </template>

                    <template>
                        <u-cell title="总经办部门领导审核状态" :border="true" :isLink="true"
                            @click="$refs.deptAuditStatusRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.endTime">
                                    {{ form.deptAuditStatusName }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-select ref="deptAuditStatusRef"
                            :columns="deptAuditStatusList"
                            @confirm="(data) => {
                                form.deptAuditStatus = data.value
                                form.deptAuditStatusName = data.label
                                anewQueryMyList()
                            }">
                        </tq-select>
                    </template>

                    <template>
                        <u-cell title="分管总经办领导审核状态" :border="true" :isLink="true"
                            @click="$refs.leadDeptAuditStatusRef.show()">
                            <view slot="value">
                                <u-form-item label="" >
                                    {{ form.leadDeptAuditStatusName }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-select ref="leadDeptAuditStatusRef"
                            :columns="leadDeptAuditStatusList"
                            @confirm="(data) => {
                                form.leadDeptAuditStatus = data.value
                                form.leadDeptAuditStatusName = data.label
                                anewQueryMyList()
                            }">
                        </tq-select>
                    </template>

                    <template>
                        <u-cell title="分管总经办领导审核状态" :border="true" :isLink="true"
                            @click="$refs.manageAuditStatusRef.show()">
                            <view slot="value">
                                <u-form-item label="" >
                                    {{ form.manageAuditStatusName }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-select ref="manageAuditStatusRef"
                            :columns="manageAuditStatusList"
                            @confirm="(data) => {
                                form.manageAuditStatus = data.value
                                form.manageAuditStatusName = data.label
                                anewQueryMyList()
                            }">
                        </tq-select>
                    </template>

                    <template>
                        <u-cell title="订单号" :border="true" :isLink="false"
                            >
                            <view slot="value">
                                <u-input v-model="form.id" :type="number" placeholder="可输入订单号" clearable @confirm="anewQueryMyList" @clear="anewQueryMyList" :border="true" />
                                 </view>
                        </u-cell>
                    </template>
                </u-cell-group>
            </u--form>
        </view>
        <view class="item-list-box">
            <view class="info-box" v-for="(item, index) in queryMyListdata" :key="index">
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">单号：{{ item.id }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">申请时间：{{ item.createTime }}</view>
                    </u-col>
                </u-row>
                
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light">申请人：{{ item.applyName }}（工号：{{item.userCode||'-'}}）</view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple">电话：{{ item.applyTel }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light">车辆：{{ item.plate }}</view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light">车辆类型：{{ item.matterType }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light">车型：{{ item.vehTypeName }}</view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light">维保类型：维修</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">情况说明：{{ item.remark }}</view>
                    </u-col>
                </u-row>

               
               
                <!-- 分割 -->
                <u-divider text="" customStyle="width: 100%;margin-bottom: 4px;margin-top: -6px;"></u-divider>

                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">维修管理员审核状态：{{ item.manageAuditStatus }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">说明：{{ item.manageAuditRemark }}</view>
                    </u-col>
                </u-row>
                <!-- 分割 -->
                <u-divider text="" customStyle="width: 100%;margin-bottom: 4px;margin-top: -6px;"></u-divider>

                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">分管总经办领导审核状态：{{ item.leadDeptAuditStatus }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">说明：{{ item.leadDeptAuditRemark }}</view>
                    </u-col>
                </u-row>
             
                <!-- 分割 -->
                <u-divider text="" customStyle="width: 100%;margin-bottom: 4px;margin-top: -6px;"></u-divider>

                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">总经办部门领导审核状态：{{ item.deptAuditStatus }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">说明：{{ item.deptAuditRemark }}</view>
                    </u-col>
                </u-row>
             
             


                <!-- 评价状态：0.不需要评价、1.待评价、2.已评价 string-->
                <u-row customStyle="margin-bottom: 10px" v-if="curNow === 0&&item.evaluateStatus ==='1'">
                    <u-col span="12 ">
                        <u-button type="primary" text="出发" @click="$refs.ratePopupRef.show(item)">评价</u-button>
                    </u-col>
                </u-row>
            </view>
        </view>
        <u-loadmore :status="status" />
        <u-toast ref="uToast" />
        <u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
            monthNum="24"
            @confirm="calendarChange" @close="calendarShow = false"></u-calendar>
        <!-- 评价 -->
        <tq-rate-popup ref="ratePopupRef" @confirm="(e) => { postEvaluate(e) }"></tq-rate-popup>
    </view>
</template>
<script>
import { repairRecordList, evaluate } from "@/api/wfApi/index";
export default {
    data() {
        return {
            calendarShow: false, // 日历
            calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),// 开始时间
            calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
            defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format('YYYY-MM-DD')],
            maxDate: this.dayjs().add(365, 'day').format('YYYY-MM-DD'),
            list: ['我的', '全部'],
            curNow: 0,
            queryMyListdata: [],
            form: {
                createTimeBegin: '',//开始时间
                createTimeEnd: '', //结束时间
                applyType: '',//用车类型（字典编码：matter_type）
                applyTypeName: '',
                deptAuditStatus: '',//总经办部门领导审核状态：1.审核通过、2.审核不通过
                deptAuditStatusName: '',
                leadDeptAuditStatus: '',//分管总经办领导审核状态：1.审核通过、2.审核不通过
                leadDeptAuditStatusName: '',
                manageAuditStatus: '',//维修管理员审核状态：1.审核通过、2.审核不通过
                manageAuditStatusName: ''
            },
            //  deptAuditStatus 总经办部门领导审核状态：1.审核通过、2.审核不通过
            deptAuditStatusList: [
                { label: '全部', value: '' },
                { label: '审核通过', value: 1 },
                { label: '审核不通过', value: 2 },
            ],
            //  leadDeptAuditStatus 分管总经办领导审核状态：1.审核通过、2.审核不通过
            leadDeptAuditStatusList: [
                { label: '全部', value: '' },
                { label: '审核通过', value: 1 },
                { label: '审核不通过', value: 2 },
            ],
             //  manageAuditStatus 维修管理员审核状态：1.审核通过、2.审核不通过
             manageAuditStatusList: [
                { label: '全部', value: '' },
                { label: '审核通过', value: 1 },
                { label: '审核不通过', value: 2 },
            ],
            pageIndex: 1,
            total: 0,
            status: 'nomore' //loading nomore loadmore
        }
    },
    onShow(option) {
        this.queryMyListdata = []
        this.pageIndex = 1
        this.queryMyList();
    },
    methods: {
        calendarChange(e) {
            console.info('选择的时间', e)

            // 修改日期
            this.form.createTimeBegin = e[0]; // 开始时间
            this.form.createTimeEnd = e[e.length - 1]; // 结束时间
            this.defaultDate = [e[0], e[e.length - 1]]
            this.calendarShow = false;
            this.anewQueryMyList();
        },
        anewQueryMyList() {
            this.pageIndex = 1;
            this.queryMyListdata = [];
            this.queryMyList();
        },
        phoneCall(e) {
            uni.makePhoneCall({
                phoneNumber: e //仅为示例
            });
        },
        pointAddrParse(e) {
            let arr = JSON.parse(e)
            let arrStg = ''
            for (let item of arr) {
                arrStg += item.address + '-'
            }
            return arrStg.slice(0, -1);
        },
        sectionChange(index) {
            this.curNow = index;
            this.anewQueryMyList()
        },
        toRealMap(item) {
            let obj = {
                routeId: item.routeId,
                classId: item.classId,
                startAndEnd: item.startAndEnd
            }
            let objst = encodeURIComponent(JSON.stringify(obj))
            uni.navigateTo({
                url: '/newdriversub/setClassPlan/details?item=' + objst
            });
        },
        async queryMyList() {
            this.loading = 'loading'
            let { createTimeBegin, createTimeEnd } = this.form
            let obj = {
                ...this.form,
                pageIndex: this.pageIndex,
                pageSize: 3,
				
               createTimeBegin: createTimeBegin ? createTimeBegin + ':00':'',
                createTimeEnd: createTimeEnd ? createTimeEnd + ':59':'',
                queryType: this.curNow + 1 //查询类型:1.本人、2.全部
            }
            for (let key in obj) {
                if (obj[key] === '') delete obj[key]
            }
            let { data, code, page } = await repairRecordList(obj)
            if (code == "0") {
                
                let list = data
                this.queryMyListdata = this.queryMyListdata.concat(list)
                this.total = Number(page.totalCount)
                this.loading = 'loadmore'
                if (this.queryMyListdata.length >= this.total) {
                    this.status = 'nomore'
                }
                console.log('数据', this.queryMyListdata)
            }
        },
        // 操作
        async postEvaluate(e) {
            let { data, code, msg } = await evaluate(
                {
                    evaluate: e.textarea,
                    evaluateScore: e.rateNum,
                    systemFlowVehId: e.item.id, //任务id
                })
            if (code == "0") {
                uni.showToast({
                    title: msg || '评价成功',
                    duration: 2000
                });
                this.anewQueryMyList();
            }
        }

    },
    // 触底
    onReachBottom() {
        console.log('当前条数', this.queryMyListdata.length, '总条数', this.total)
        if (this.queryMyListdata.length >= this.total) return;
        this.pageIndex++
        this.queryMyList();
    }
}
</script>
<style lang="scss" scoped>
.registrationRecord-box {

    padding: 0 0 10rpx 0;
    overflow: unset;

    .bg-purple-light{
        word-wrap: break-word;
    }
    .list-box {
        border-radius: 10rpx;
        background: #fff;
        // padding: 20rpx;
        position: sticky;

        // align-items: center;
        // display: flex;
        top: 0px;
        width: 100%;
        z-index: 999;

        /deep/ {

            .u-form-item__body {
                padding: 0;
            }
        }

    }

    .item-list-box {
         padding: 10rpx 16rpx 0 16rpx;
        // background: #fff;
        position: relative;


        .info-box {
            margin-bottom: 20rpx;
            border: none;
            width: 100%;
            // border-radius: 20rpx;
            box-shadow: 2rpx 2rpx 5rpx rgba(169, 169, 169, 0.34901960784313724);
            // height: 150rpx;
            background-color: rgba(255, 255, 255, 1);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 20rpx;
            box-sizing: border-box;
            position: relative;

            font-size: 24rpx;




        }


    }


}
</style>