tqApp-webView/workflow/recordCost/index.vue

<template>
    <view class="registrationRecord-box">
        <!-- 头部筛选 -->
        <view class="page-head">

            <u-tabs :list="tablist"
                :itemStyle="{
                width: '330rpx',
                height: '80rpx'
            }"
                :activeStyle="{
                color: '#4573FC'
            }"
                lineWidth="40"
                lineColor="#4573FC"
                @click="({ index }) => {
                curNow = index
                anewQueryMyList()
            }">
            </u-tabs>


            <u-row>
                <u-col :span="12" style="padding: 16rpx 24rpx;">
                    <view>
                        <view class="input-wapper">
                            <u--input
                                v-model="form.queryName"
                                :disabled="false"
                                :clearable="true"
                                placeholder="请输入申请单号或车牌号"
                                prefixIcon="search"
                                shape="circle"
                                prefixIconStyle="font-size: 22px;color: #909399"
                                inputAlign="center"
                                fontSize="28rpx"
                                disabledColor="#F2F2F2"
                                border="none"
                                :customStyle="{
                height: '62rpx',
                padding: '4rpx 28rpx',
                background: '#F2F2F2'
            }"
                                @confirm="anewQueryMyList">
                            </u--input>
                        </view>
                    </view>
                </u-col>

            </u-row>
            <view class="list-box">
                <u--form label-width="auto" ref="uForm" :model="form" labelAlign="right">
                    <u-cell-group customStyle="margin-top: 2px">
                        <template>

                            <u-cell title="审核状态" :border="true" :isLink="true"
                                @click="$refs.deptAuditStatusRef.show()">
                                <view slot="value">
                                    <u-form-item label="" prop="form.endTime">
                                        {{ form.flowStatusName }}
                                    </u-form-item>
                                </view>
                            </u-cell>
                            <tq-select ref="deptAuditStatusRef"
                                :columns="auditStatusList"
                                @confirm="(data) => {
                form.flowStatus = data.value
                form.flowStatusName = data.label
                anewQueryMyList()
            }">
                            </tq-select>
                        </template>
                    </u-cell-group>

                </u--form>
            </view>
        </view>
        <view class="box-container" v-for="(item, index) in queryMyListdata" :key="index">
            <view class="box-head">
                <view>申请单号：{{ item.id }}</view>
                <view>
                    <!-- flowStatus 流程状态：1.进行中、2.已完成、3.已撤销、4.不通过  success / info / warning / error-->

                    <u-tag v-if="item.flowStatus === 1" :text="item.flowStatusName" plain size="mini"></u-tag>
                    <u-tag v-if="item.flowStatus === 2" :text="item.flowStatusName" type="success" plain
                        size="mini"></u-tag>
                    <u-tag v-if="item.flowStatus === 3" :text="item.flowStatusName" borderColor="#909399"
                        color="#909399" plain
                        size="mini"></u-tag>
                    <u-tag v-if="item.flowStatus === 4" :text="item.flowStatusName" type="error" plain
                        size="mini"></u-tag>
                </view>
            </view>
            <view class="box-body" @click="handleDetaisl(item)">
                <!-- arrow-right -->
                <u-icon class="arrow-right" v-if="item.originType * 1 === 1" name="arrow-right" color="#909399" size="28"></u-icon>
                <u-row>
                    <u-col :span="12">

                        <view class="item">
                            <view class="label">申请人：</view>
                            <view class="value">{{ renderItem(item, 'createByName', '--') }}</view>
                        </view>
                        <view class="item">
                            <view class="label">申请时间：</view>
                            <view class="value">{{ renderItem(item, 'createTime', '--') }}</view>
                        </view>
                        <view class="item">
                            <view class="label">车牌号：</view>
                            <view class="value">{{ renderItem(item, 'plate', '--') }}</view>
                        </view>
                        <view class="item">
                            <view class="label">费用类别：</view>
                            <view class="value">{{ renderItem(item, 'costTypeName', '--') }}</view>
                        </view>
                        <view class="item">
                            <view class="label">交易金额：</view>
                            <view class="value">{{ renderItem(item, 'price', '--') }}</view>
                        </view>


                    </u-col>

                </u-row>
            </view>

            <view class="box-footer">
                   <!-- originType 1流程申请2手动录入) flowStatus 流程状态：1.进行中、2.已完成、3.已撤销、4.不通过 -->
                <u-row style="justify-content: flex-end;">
                    <u-col :span="4" v-if="item.originType * 1 === 1 && item.flowStatus === 1 && curNow != 1"
                        style="padding: 20rpx 30rpx;">
                        <u-button type="info" :custom-style="{
                width: '100%',
                height: '28px',
            }" @click="handleTakeBack(item)">撤销
                        </u-button>
                    </u-col>
                    <u-col :span="4" v-if="item.originType * 1 === 1 && item.flowStatus === 3 && curNow != 1 && curNow != 2"
                        style="padding: 20rpx 30rpx;">
                        <u-button type="primary" :custom-style="{
                width: '100%',
                height: '28px',
            }" @click="handleRestartWorkflow(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 { recordlist, evaluate, recordtaskOperate } 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'),
            tablist: [
                { name: '我的记录' },
                { name: '全部记录' },
            ],
            curNow: 0,
            queryMyListdata: [],
            form: {
                queryName: '',
                createTimeBegin: '',//开始时间
                createTimeEnd: '', //结束时间
                applyType: '',//用车类型（字典编码：matter_type）
                applyTypeName: '',
                flowStatus: '',//总经办部门领导审核状态：1.审核通过、2.审核不通过
                flowStatusName: '',
                // leadDeptAuditStatus: '',//分管总经办领导审核状态：1.审核通过、2.审核不通过
                // leadDeptAuditStatusName: '',
                // manageAuditStatus: '',//维修管理员审核状态：1.审核通过、2.审核不通过
                // manageAuditStatusName: ''
            },
            //    流程状态：1.进行中、2.已完成、3.已撤销、4.不通过 
            auditStatusList: [
                { label: '全部', value: '' },
                { label: '进行中', value: 1 },
                { label: '已完成', value: 2 },
                { label: '已撤销', value: 3 },
                { label: '不通过', value: 4 },
            ],

            pageIndex: 1,
            total: 0,
            status: 'nomore' //loading nomore loadmore
        }
    },
    onShow(option) {
        this.queryMyListdata = []
        this.pageIndex = 1
        this.queryMyList();
    },
    methods: {
        // http://tq.5000v.com:8025/workflow/mobile/dealTask?definitionId=system_cost:3:eb004fdf-4f0d-11ef-86fb-005056bb2bc2&category=undefined&taskId=&withDealTask=false&processInstanceId=61aef549-4f18-11ef-86fb-005056bb2bc2&fromMobile=true&authtoken=eyJhbGciOiJIUzUxMiJ9.eyJjbGllbnQiOiJUUS1IVy1NT0JJTEUiLCJsb2dpbl91c2VyX2tleSI6IjFkMTY1OGYzLThhOWMtNDM5Yy04Yzk3LTYwMjQyMDg2MzUyOCJ9.C0QYkgPxsjTPLOFTwrK6xjlzLLGMInzChQ7M1Rm6IupwLEI8HA1EK0HKm6y1IfWekmiybOyc3WSx838sRem-aQ
        handleDetaisl(instance){
            uni.navigateTo({
                url: `/pages/flow/diboot?routes=/workflow/mobile/dealTask&Id=${instance.procDefId}&processInstanceId=${instance.processInstanceId}&defaultTitle=${instance.companyName}&name=${instance.companyName}&withDealTask=false&fromMobile=true`,
            })
        },
        handleRestartWorkflow(instance) {
            // http://localhost:9529/workflow/mobile/startFlow?id=system_cost%3A1%3A0cc5fb50-3dd3-11ef-80a8-000c29425992&processInstanceId=7455d6f9-4018-11ef-80a8-000c29425992&defaultTitle=%E8%B4%B9%E7%94%A8%E6%B5%81%E7%A8%8B_admin_20240712&name=%E9%87%8D%E6%96%B0%E5%8F%91%E8%B5%B7%E3%80%90%E8%B4%B9%E7%94%A8%E6%B5%81%E7%A8%8B%E3%80%91&restart=true
            // instance = {
            //     "procDefId": "system_cost:1:0cc5fb50-3dd3-11ef-80a8-000c29425992",
            //     "companyName": "重新发起【费用流程】",
            //     "id": "7455d6f9-4018-11ef-80a8-000c29425992"
            // }
            uni.navigateTo({
                url: `/pages/flow/diboot?routes=/workflow/mobile/startFlow&id=${instance.procDefId}&processInstanceId=${instance.processInstanceId}&defaultTitle=${instance.companyName}&name=${instance.companyName}&restart=true`,
            })
        },
        handleTakeBack({ processInstanceId }) { //撤销
            uni.showModal({
                title: '',
                content: `确认撤销？`,
                showCancel: true,
                confirmText: '确定',
                success: async (res) => {
                    if (res.confirm) {
                        let { code } = await recordtaskOperate({
                            processInstanceId,
                            taskOperate: 'cancel',
                            validTask: false,
                        })
                        if (code == 0) {
                            uni.showToast({
                                title: '取消成功',
                                icon: 'none',
                            })
                            this.anewQueryMyList()
                        }
                    }
                }
            })
        },
        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:00:00' : '',
                createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
                queryType: this.curNow + 1 //查询类型:1.本人、2.全部
            }
            for (let key in obj) {
                if (obj[key] === '') delete obj[key]
            }
            let { data, code, page } = await recordlist(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;

    .page-head {
        background: #fff;
    }

    .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 0 0 0;
        // 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;




        }


    }


}

.box-container {
    background: #fff;
    margin: 20rpx 10rpx;
    border-radius: 10rpx;
    font-size: 24rpx;

    .box-head {
        border-bottom: 1px solid #ddd;
        padding: 20rpx;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box-body {
        padding: 20rpx;
        display: flex;
        align-items: center;
        position: relative;
        .arrow-right{
            position: absolute;
            right: 10rpx;
            opacity: 0.6;
        }
        .item {
            margin: 4rpx;
            display: flex;

            .label {}

            .value {
                flex: 1;
            }
        }
    }

    .box-footer {
        border-top: 1px solid #ddd;
        // padding: 20rpx;
    }
}

.primary {
    color: $uni-color-primary;
}
</style>