forestry-wx/src/plant/packaging/detail/models/print-info-page.vue

<template>
    <z-paging ref="paging" bgcolor="#F7F7F7" v-model="list" @query="query" safe-area-inset-bottom scroll-with-animation>
        <template #top>
            <ut-navbar title="包装任务详情" :fixed="false" border></ut-navbar>
        </template>
        <view class="d-flex a-c pd3-30-24-0 f-s-30 f-w-5">
            <view class="pd2-20-36 card-item-box mr-10 active">{{ form?.refType == '2' ? '打印详情' : '关联详情' }}</view>
            <view @click="changeTebs" class="pd2-20-36 card-item-box">包装任务信息</view>
        </view>
        <view class="bg-fff pd-24">
            <view class="detail-info-card p-rtv mb-40">
                <pack-card :item="form" :dict="dict">
                    <view class="pd-20"></view>
                </pack-card>
                <view class="btn-card-wrapper d-flex a-c j-sb">
                    <view class="btn-bottom-bt ls-style" @click.stop="goPrint({ packId: form?.id, autoRelationId: form?.autoRelationId, unit: form?.unit, printedCount: form?.actualCount - form?.printCount }, '/plant/print/print-self/index')">
                        <image class="w-32 h-32 mr-8" src="https://yujin-szyy.oss-cn-chengdu.aliyuncs.com/szyy/images-plt/print-codes/btn_zxdy_icon.png" mode="widthFix" />
                        <span>自行打印</span>
                    </view>
                    <view class="btn-bottom-bt ss-style" @click="goPrint({ packId: form?.id, autoRelationId: form?.autoRelationId, unit: form?.unit, printedCount: form?.actualCount - form?.printCount }, '/plant/export-print/export/index')">
                        <image class="w-32 h-32 mr-8" src="https://yujin-szyy.oss-cn-chengdu.aliyuncs.com/szyy/images-plt/print-codes/dczsm_icon.png" mode="widthFix" />
                        <span>导出追溯码</span>
                    </view>
                    <view class="btn-bottom-bt fs-style" @click="showFeatureUnavailable()">
                        <image class="w-32 h-32 mr-8" src="https://yujin-szyy.oss-cn-chengdu.aliyuncs.com/szyy/images-plt/print-codes/btn_zrdd_icon.png" mode="widthFix" />
                        <span>找人代打</span>
                    </view>
                </view>
            </view>
            <view class="d-flex a-c pd2-10-0 j-ed" @click="$u.route({ url: '/tools/view-html/index', params: { url: 'https://yujin-szyy.oss-cn-chengdu.aliyuncs.com/szyy/template/pack_print_type.html', title: '打印方式的区别' } })">
                <up-icon size="28rpx" name="question-circle" color="#999"></up-icon>
                <span class="c-#999 f-s-24">三种打印方式的区别？怎么选择？</span>
            </view>
            <view class="mb-20">
                <ut-tabs v-model="printType" :tabs="tabs" @change="onRefresh"></ut-tabs>
            </view>
            <view>
                <template v-for="(item, index) in list" :key="index">
                    <template v-if="item?.printType == '1'">
                        <view class="mb-20 pd-20 bg-#F7F7F7 b-radius">
                            <view class="f-s-28 pd2-4-0">
                                <span class="c-#666">打印数量：</span>
                                <span class="c-#333 f-w-5">{{ item?.printCount }}</span>
                            </view>
                            <view class="f-s-28 pd2-4-0 d-flex">
                                <span class="c-#666">打印码值：</span>
                                <view class="flex1 ov-hd c-#333 f-w-5">
                                    <view>{{ item?.traceCodeStart }} 至</view>
                                    <view>{{ item?.traceCodeEnd }}</view>
                                </view>
                            </view>
                            <view class="d-flex f-s-24 c-#666">
                                <view class="flex1 ov-hd">打印人：{{ item?.createByName || '-' }}</view>
                                <view class="pr-100">打印时间：{{ item?.createTime || '-' }}</view>
                            </view>
                            <view class="pt-20 d-flex">
                                <view class="flex1"></view>
                                <view class="d-flex a-c">
                                    <up-button @click="clickAllPrint(item)" :customStyle="formItemBtnListStyle" class="ml-20" color="#18BECA">全部打印</up-button>
                                    <up-button @click="$u.route({ url: '/plant/print/print-range/index', params: item })" :customStyle="formItemBtnListStyle" class="ml-20" color="#37A954">区间打印</up-button>
                                </view>
                            </view>
                        </view>
                    </template>
                    <template v-if="item?.printType == '2'">
                        <view class="mb-20 pd-20 bg-#F7F7F7 b-radius">
                            <view class="f-s-24 c-#333 f-w-5">{{ selectDictLabel(pt_code_export_type, item?.extraInfo?.fileType) }}</view>
                            <view class="f-s-28 pd2-4-0">
                                <span class="c-#666">导出数量：</span>
                                <span class="c-#333 f-w-5">{{ item?.printCount }}</span>
                            </view>
                            <view class="f-s-28 pd2-4-0 d-flex">
                                <span class="c-#666">导出码值：</span>
                                <view class="flex1 ov-hd c-#333 f-w-5">
                                    <view>{{ item?.traceCodeStart }} 至</view>
                                    <view>{{ item?.traceCodeEnd }}</view>
                                </view>
                            </view>
                            <view class="d-flex f-s-24 c-#666">
                                <view class="flex1 ov-hd">导出人：{{ item?.createByName || '-' }}</view>
                                <view class="pr-100">导出时间：{{ item?.createTime || '-' }}</view>
                            </view>
                            <view class="pt-20 d-flex">
                                <view class="flex1"></view>
                                <view class="d-flex a-c">
                                    <up-button @click="$u.route({ url: '/plant/export-print/export/index', params: item })" :customStyle="formItemBtnListStyle" color="#18BECA">重新导出</up-button>
                                </view>
                            </view>
                        </view>
                    </template>
                    <template></template>
                </template>
            </view>
        </view>
    </z-paging>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import PackCard from '@/plant/models/pack-card.vue';
import { formItemBtnListStyle } from '@/assets/styles/uview-plus';
import { showFeatureUnavailable } from '@/utils/common';

const paging = ref<any>(null);
const props = defineProps({
    packId: {
        type: String,
        default: '',
    },
    form: {
        type: Object,
        default: () => null,
    },
    dict: {
        type: Object,
        default: () => null,
    },
});
const printType = ref('1');
const { pt_pack_ref_type, pt_code_export_type } = toRefs(props?.dict);
const emit = defineEmits(['changeTebs']);
const tabs = reactive([
    { label: '打印记录', value: '1' },
    { label: '导出记录', value: '2' },
    { label: '找人代打记录', value: '3' },
]);
const changeTebs = () => {
    emit('changeTebs', 'pack');
};
const list = ref([]);
const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        packId: props.packId,
        printType: printType.value,
    };
    const res = await useClientRequest.get('/plt-api/app/printLog/list', params);
    if (res && res?.rows) {
        const { rows } = res;
        paging.value?.complete(rows);
    }
};
const onRefresh = () => {
    try {
        paging.value?.reload();
    } catch (error) {
        console.error('刷新列表失败:', error);
    }
};
const clickAllPrint = async (item: any) => {
    try {
        const res = await uni.showModal({
            title: '全部打印提示',
            content: '您确认需要再次打印该条记录的全部追溯码吗？',
            confirmColor: '#37A954',
        });
        if (res.confirm) {
            uni.$u.route({ type: 'navigateTo', url: '/plant/print/print-all/index', params: item });
        }
    } catch (error) {
        console.error('全部打印失败:', error);
    }
};
const goPrint = async (params: any, url: string) => {
    if (!params?.printedCount) {
        uni.showModal({
            title: '提示',
            content: '没有可打印的追溯码了哦~',
            showCancel: false,
            confirmColor: '#37A954',
        });
        return;
    }
    try {
        uni.$u.route({ type: 'navigateTo', url: url || '/plant/print/print-self/index', params });
    } catch (error) {
        console.error('跳转打印页面失败:', error);
    }
};
onMounted(() => {
    uni.$on('refreshPackTaskDetail', () => {
        onRefresh();
    });
});
</script>
<style lang="scss" scoped>
.card-item-box {
    color: #999;
    border-radius: 10rpx 10rpx 0 0;

    &.active {
        color: $u-primary;
        background-color: #fff;
    }
}
.detail-info-card {
    border-radius: 16rpx;
    border: 1rpx solid #9dd5ab;
}
.btn-bottom-bt {
    width: 208rpx;
    height: 74rpx;
    border-radius: 8rpx;
    border: 1px solid #000;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-card-wrapper {
    position: absolute;
    left: 20rpx;
    bottom: -37rpx;
    right: 20rpx;
    z-index: 10;
}
.ls-style {
    background-color: #e3fbea;
    box-shadow: inset 0 0 10px #d2f3da;
    border-color: #9bd4a9;
    color: #37a954;
}
.ss-style {
    background-color: #e5fdff;
    box-shadow: inset 0 0 10px #c7f5f8;
    border-color: #93e8ee;
    color: #18beca;
}
.fs-style {
    background-color: #fffaf3;
    box-shadow: inset 0 0 10px #ffeed7;
    border-color: #ffd499;
    color: #fc8834;
}
</style>