hazardousWaste_app/pages/warehousing/Declaration/components/detail.vue

<template>
    <!-- 自定义导航栏 -->
    <navigation :title="pathParams.billNo" :back-url="backUrl">
        <template #right>
            <view class="right-btn flex align-center justify-center ">
                <uv-image @tap="onPrinter" src="../../../../static/printer.png" width="20px" height="20px"
                    style="margin-top:10rpx" />
                <uv-image v-if="detailInfo.status != '9'" @tap="toEditOrAway('2')" src="../../../../static/edit.png"
                    class="ml-24" width="20px" height="20px" style="margin-top:10rpx" />
            </view>
        </template>
    </navigation>
    <view class="contentBox">
        <view class="detailInfo mb-2">
            <view class="line title">
                <p> 申报单号：{{ detailInfo?.billNo }}</p>
                <text>{{ getLabel(declareType, detailInfo?.status) }}</text>

            </view>
            <p class="line content">联系人：
                <text> {{ detailInfo?.contactName || '-' }}</text>
            </p>
            <p class="line content">联系电话：
                <text> {{ detailInfo?.contactPhone || '-' }}</text>
            </p>
            <p class="line content">地址：
                <text>{{ detailInfo?.address || '-' }}</text>
            </p>
            <p class="line content">交付时间：
                <text>{{ detailInfo?.deliveryTime ? detailInfo?.deliveryTime === '0' ? '15天' :
                    detailInfo?.deliveryTime === '1' ? '立即' : '其他' : '-' }}</text>
            </p>
            <p class="line content">申报时间：
                <text>{{ detailInfo?.createTime || '-' }}</text>
            </p>
            <view class="detailInfo mb-2 mt-4">
                <view class="line title">
                    <p> 打卡图片</p>
                </view>
                <view class="line">
                    <uv-upload :fileList="detailInfo?.fileList" name="3" multiple
                        :maxCount="detailInfo?.fileList?.length" :previewFullImage="true"></uv-upload>
                </view>
            </view>
        </view>
        <!-- 物料列表 -只读 -->

        <material-list ref="materialRef" isEdit="3" :extendData="{ billType: detailInfo?.billType }"
            :pathParams="{ billNo: detailInfo?.billNo }" backStr="declarationDetail"
            :formData="{ material: detailInfo.itemList }" />

        <!-- 底部按钮 -->
        <view :class="detailInfo.status == '9' ? 'bottom1' : 'bottom'">
            <uv-button type="error" v-if="detailInfo.status != '9'" text="作废" @tap="toObsolete"></uv-button>
            <uv-button type="primary" text="申报单转入库单" @tap="toEditOrAway('1')"></uv-button>
        </view>
    </view>
</template>
<script setup>
import _ from 'lodash';
import { ref, computed } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { objectToQuery, getLabel, declareType, removeStorage } from '../../../until';
import { declareBillDetail, declareBillVoid } from '@/api/declaration';
import MaterialList from '../../../components/MaterialList.vue';
import Navigation from '../../../components/Navigation.vue';
// ref:返回路径
const backUrl = ref('')
// 数据：路径参数
const pathParams = ref('')
// 数据：详情
const detailInfo = ref('')
// type
const OPERATE_CONFIG = {
    declaration: {
        back: '/pages/warehousing/Declaration/my',
        backType: 'declaration_detail',

    },
    my: {
        back: '/pages/warehousing/Declaration/my',
        backType: 'declaration_detail'
    },
}

// 打印
const onPrinter = () => { }
// 获取详情 
const getDetailInfo = () => {
    declareBillDetail({ billNo: pathParams.value.billNo }).then((res) => {
        const fileList = _.map(res.data?.fileList, (i) => ({ ...i, url: i.fileUrl, name: i?.fileName, }))
        detailInfo.value = { ...res.data, fileList: fileList }

    })
}
// 作废
const toObsolete = () => {
    declareBillVoid({
        id: detailInfo.value.id
    }).then((res) => {
        console.log();
        if (res.code == 200) {
            uni.showToast({
                title: '申报单作废成功',
                mask: true,
                icon: 'success',
            })
            getDetailInfo()
        }

    })
}
const setStorage = () => {
    removeStorage()
    uni.setStorageSync('app_material', detailInfo.value.itemList)
    uni.setStorageSync('app_declaration', detailInfo.value)
}

/**
 * 路径跳转操作 编辑、转为入库单
 * @param {any} type - 类型标识，1 转为入库单   2 编辑
 */
const toEditOrAway = (key) => {
    const query = objectToQuery(pathParams.value)
    setStorage()

    if (key === '1') {
        uni.navigateTo({
            url: `/pages/warehousing/stockIn/create${query}`
        });
    } else {

        uni.navigateTo({
            url: `/pages/warehousing/Declaration/create${query}`
        });
    }

}
// 接收路径参数
onLoad((options) => {
    pathParams.value = options;
    const { type } = options;
    let queryStr = objectToQuery(options);
    let query = { ...options }
    if (!options.billNo) {
        uni.showToast({ title: '参数错误,无唯一码ID', icon: 'none' })
        return
    }

    if (type != 'my') {
        const { billNo, ...restParams } = options;
        queryStr = objectToQuery(restParams);
    }
    backUrl.value = OPERATE_CONFIG?.[pathParams.value.type]?.back + `${queryStr}`
    getDetailInfo()
})

</script>
<style scoped lang="scss">
// 底部按钮
.bottom {
    position: fixed;
    bottom: 0;
    height: 60rpx;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .uv-button-wrapper {
        width: 50%;
        border-radius: 0;
    }
}

.line {
    display: flex;
    background-color: #fff;
    align-items: center;
    padding: 6rpx 20rpx;
    justify-content: space-between;

}

.title {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    border-bottom: 0.5px solid #ECEFF1;
    font-size: 13px;
}

.content {
    font-weight: 500;
    font-size: 13px;
}

.bottom1 {
    position: fixed;
    bottom: 0;
    height: 60rpx;
    font-size: 14px;
    display: flex;
    align-items: center;
    // justify-content: center;
    width: 100%;

    .uv-button-wrapper {
        width: 100%;
        border-radius: 0;
    }
}
</style>