tqApp-webView/workflow/vehicleRecord/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-tabs :list="tablist" 
                  :itemStyle="{
                    width: '330rpx',
                    height: '80rpx'
                  }"
                  :activeStyle="{
                    color:'#4573FC'
                  }"
                  lineColor="#4573FC"
                  @click="({index}) => {
                    curNow = index
                    anewQueryMyList()
                  }"
                >
                </u-tabs>
                <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.flowStatusName }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-select ref="deptAuditStatusRef"
                            :columns="deptAuditStatusList"
                            @confirm="(data) => {
                                form.flowStatus = data.value
                                form.flowStatusName = data.label
                                anewQueryMyList()
                            }">
                        </tq-select>
                    </template>

                    <!-- <template>
                        <u-cell title="总经办审核状态" :border="true" :isLink="true"
                            @click="$refs.officeAuditStatusRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.endTime">
                                    {{ form.officeAuditStatusName }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-select ref="officeAuditStatusRef"
                            :columns="officeAuditStatusList"
                            @confirm="(data) => {
                                form.officeAuditStatus = data.value
                                form.officeAuditStatusName = 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="'none'" 
								 inputAlign="right"
								/>
                                 </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">
                <!-- 状态 -->
                <view class="flowStatus">
                    <!-- 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>

                <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="6">
                        <view class="demo-layout bg-purple-light">申请人：{{ item.applyName }}</view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple">部门：{{ item.deptName }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">申请人联系电话：{{ 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.userName }}</view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple">联系人电话：{{ item.userTel }}</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="12">
                        <view class="demo-layout bg-purple">用车人数：{{ item.totalNum }}</view>
                    </u-col>
                </u-row>

                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">执行时间：{{ item.startPlanTime }} 至 {{ item.endPlanTime }}
                        </view>
                    </u-col>
                </u-row>

                <view class="hide-warp" v-if="item.openOther">
                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">起止点：{{ pointAddrParse(item.pointAddr) }}</view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="12">
                          <view class="demo-layout bg-purple-light">用车类型：{{ item.matterType }}</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.flowStatusName }}</view>
                      </u-col>
                  </u-row>
                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="12">
                          <view class="demo-layout bg-purple-light">当前审批节点：{{ item.flowNodeName }}</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.userName }}</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.vehTypeName }}</view>
                      </u-col>
                  </u-row>
                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="12">
                          <view class="demo-layout bg-purple-light">司机：{{ item.driverName }}</view>
                      </u-col>
                  </u-row>
                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="12">
                          <view class="demo-layout bg-purple-light">执行状态：{{ item.exStsName }}</view>
                      </u-col>
                  </u-row>
                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="12">
                          <view class="demo-layout bg-purple-light">评价：{{ item.evaluate }}</view>
                      </u-col>
                  </u-row>
                </view>
                <view @click="item.openOther = !item.openOther" class="open-warp">
                  {{ item.openOther?'收起':'展开' }}
                </view>


                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view style="display: flex; justify-content: center;">
                            <u-button type="primary" icon="phone" @tap="phoneCall(item.driverTel)" :plain="true"
                              color="#4573FC"
                                customStyle="width: 200rpx;height:64rpx" shape="circle"
                                text="司机"></u-button>
                            <u-button type="warning" icon="phone" @tap="phoneCall(item.applyTel)" :plain="true"
                              color="#F7A254"
                                customStyle="width:200rpx;height:64rpx" shape="circle"
                                text="申请人"></u-button>
                            <u-button type="primary" icon="phone" @tap="phoneCall(item.userTel)" :plain="true"
                              color="#4573FC"
                                customStyle="width: 200rpx;height:64rpx" shape="circle"
                                text="用车人"></u-button>
                        </view>
                    </u-col>
                </u-row>

                <u-row customStyle="margin-bottom: 10px;display: flex; justify-content: center;">
                    <u-col span="12">
                        <!-- originType 1流程申请2手动录入) flowStatus 流程状态：1.进行中、2.已完成、3.已撤销、4.不通过 -->
                        <view style="display: flex; justify-content: center;padding:0 6px;">
                            <u-button type="primary" @click="handleTakeBack(item)" :plain="true" v-if="item.flowStatus === 1 && curNow != 1"
                              color="#4573FC"
                                 shape="circle"
                                  customStyle="height:64rpx"
                                text="撤销"></u-button>
                            <u-button type="warning"  @click="handleRestartWorkflow(item)" :plain="true" v-if=" item.flowStatus === 3 && curNow != 1 && curNow != 2"
                              color="#F7A254"
                               customStyle="height:64rpx"
                                shape="circle"
                                text="重新申请"></u-button>
                         </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 { vehList, 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'),
            list: ['我的', '全部'],
            tablist: [
              { name: '我的'},
              { name: '全部'},
            ],
            curNow: 0,
            queryMyListdata: [],
            form: {
                createTimeBegin: '',//开始时间
                createTimeEnd: '', //结束时间
                applyType: '',//用车类型（字典编码：matter_type）
                applyTypeName: '',
                flowStatus: '',//部门审核状态：1.审核通过、2.审核不通过
                flowStatusName: '',
                // officeAuditStatus: '',//总经办审核状态：1.审核通过、2.审核不通过
                // officeAuditStatusName: ''
            },
            //    <!-- 状态：1.进行中、2.已完成、3.已撤销、4.不通过 -->
            deptAuditStatusList: [
                { label: '全部', value: '' },
                { label: '进行中', value: 1 },
                { label: '已完成', value: 2 },
                { label: '已撤销', value: 3 },
                { label: '不通过', value: 4 },
            ],
            // 总经办审核状态：1.审核通过、2.审核不通过
            // officeAuditStatusList: [
            //     { label: '全部', value: '' },
            //     { label: '审核通过', value: 1 },
            //     { label: '审核不通过', value: 2 },
            // ],
            pageIndex: 1,
            total: 0,
            status: 'nomore', //loading nomore loadmore
            openOther:false,
            isLoad:true
        }
    },
    onShow(option) {
      if(!this.isLoad)return;
        this.queryMyListdata = []
        this.pageIndex = 1
        this.queryMyList();
    },
    methods: {
        handleRestartWorkflow(instance) {
            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, //仅为示例
              complete: () => {
                this.isLoad = false
              }},
          );
        },
        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 vehList(obj)
            if (code == "0") {

                let list = data.map(item=>
                  {
                    return {
                      ...item,
                      openOther:false
                    }
                  }
                )
                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;
            .flowStatus{
                position: absolute;
                right: 6px;
                top: 6px;
                /deep/ .u-tag--mini{
                    height: 20px;
                    line-height: 20px;
                }
            }



        }


    }
    .hide-warp{
      width: 100%;
    }
    .open-warp{
      width: 100%;
      padding: 20rpx;
      display: flex;
      justify-content: flex-end;
      color: #4573FC;
    }

}
</style>