hazardousWaste_app/pages/uniqueCode/myUniqueCode/detail.vue

<!-- 唯一码详情 -->
<template>
    <uv-skeletons :loading="loading" :skeleton="skeleton">
        <view class=" content">
            <!-- 唯一码展示 -->
            <uni-list>
                <uni-list-item v-for="item in uniqueCodeList" :key="item.id" clickable class="material-card">
                    <template v-slot:body>
                        <p style="display: flex; flex-direction: column; width: 100%;">
                            <!-- 编码、状态行 -->
                            <view class="flex-center">
                                <p class="title">编号：{{ item.code }}</p>
                                <p class="status">{{ getStatusName(item.status) }}</p>
                            </view>
                            <!-- 内容行 -->
                            <view class="text ">
                                <p>RFID：
                                    <span v-if="item.rfidCode">{{ item.remark }}</span>
                                    <span v-else style="color: #999;">未绑定RFID</span>
                                </p>
                                <p>生成时间：
                                    <span>{{ item?.createTime }}</span>
                                </p>
                                <!-- 备注行-->
                                <view class="flex-center qrCode">
                                    <p>备注：
                                        <span v-if="item.remark">{{ item.remark }}</span>
                                        <span v-else style="color: #999;">未填写</span>
                                    </p>
                                    <view @click="toViewQrCode">
                                        <uv-image src="../../../static/qrcode.png" width="40rpx" height="40rpx"
                                            style="margin-top:10rpx" />
                                    </view>
                                </view>
                            </view>
                        </p>
                    </template>
                </uni-list-item>
            </uni-list>
            <!-- 物料列表 -->
            <view class="remarkLine">
                <p>物料列表</p>
                <p class="btn-link" @click="toEdit">修改</p>
            </view>
            <view>
                <uni-forms ref="materialFormRef" :modelValue="materialList" class="form">
                    <view v-for="(item, idx) in materialList" :key="item.id" class="material-card"
                        style="padding: 24rpx; margin-bottom: 16rpx;">
                        <view style="display: flex; flex-direction: column; width: 100%;">
                            <!-- 标题行 -->
                            <view class="title">{{ item.materialName }} ({{ item.materialCode }})</view>

                            <!--小标题行  简称/型号/规格/类型 -->
                            <view class="subTitle">
                                <span v-if="item.materialShortName">{{ item.materialShortName }} / </span>
                                <span v-if="item.model">{{ item.model }} / </span>
                                <span v-if="item.specification">{{ item.specification }} / </span>
                                <span v-if="item.typeName">{{ item.typeName }} </span>
                            </view>

                            <!-- 数量行 -->
                            <view class="tag">
                                <uni-tag :text="getTypeParentNames(item.typeParentNames) || ''" type="error" />
                                <p class="tag-form">
                                    <uni-forms-item :name="`material.${idx}.quantity`">
                                        <uni-easyinput v-model="materialList[idx].quantity" :disabled="true"
                                            type="number" :clearable="false" />
                                    </uni-forms-item>
                                    <span style=" margin-left: 8rpx; width: 16px;">{{ item.unitName }}</span>
                                </p>
                            </view>
                            <!-- 备注行 -->
                            <view class="remark">
                                <uni-forms-item :name="`material.${idx}.remark`" label="备注：">
                                    <uni-easyinput type="text" v-model="materialList[idx].remark"
                                        :disabled="true" :clearable="false" :inputBorder="false"
                                        placeholder="请填写备注信息" />
                                </uni-forms-item>
                            </view>
                        </view>
                    </view>
                </uni-forms>
            </view>

            <!-- 底部按钮 -->
            <view class="bottom">
                <uv-button type="primary" text="唯一码打印"></uv-button>
                <uv-button type="success" text="溯源" @click="toTraceability"></uv-button>
            </view>
        </view>
    </uv-skeletons>
    <uv-modal ref="modalRef" :title="none" class="qrCodeModal" width="480rpx" :showConfirmButton="false">
        <qr-code-modal :detail="materialList" />
    </uv-modal>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { detailUniqueCode } from '@/api/uniqueCode'
import { getTypeParentNames, getStatusName, getDetail } from '../until';
import QrCodeModal from './QrCodeModal.vue';

const modalRef = ref()
// 路径参数
const pathParams = ref('')
// 物料列表数组
const materialList = ref([])
// 唯一码数组
const uniqueCodeList = ref([])
// 详情数据
const detail = ref([])
// 骨架屏开关
const loading = ref(true)
// 骨架屏样式
const skeleton = [{
    type: 'line',
    num: 3,
    gap: '20rpx',
    style: ['width: 200rpx;marginBottom: 50rpx;marginTop:50rpx;padding:24rpx', 'height: 100rpx;', 'width: 500rpx;'],
}]
const toViewQrCode = () => {
    modalRef.value.open()

}
// 详情：唯一码
const getDetailInfo = () => {
    detailUniqueCode({ id: pathParams.value.id }).then((res) => {
        if (res.code == 200) {
            // ! 写成数组原因 为了适应可多个物料生成唯一码
            materialList.value = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial), qrCode: res.data.qrCode, code: res.data.code, qrCodeMark: res.data.remark }]
            uniqueCodeList.value = [res.data]

        } else {
            materialList.value = []
            uniqueCodeList.value = []
            uni.showToast({ title: '暂无数据', icon: 'none' })
        }
        loading.value = false
    })

}

// 修改：唯一码的物料信息
const toEdit = () => {
    uni.setStorageSync('app_material', [{ ...materialList.value?.[0], uniqueCodeRemark: uniqueCodeList.value?.[0].remark }]);
    uni.navigateTo({
        url: `/pages/uniqueCode/issueUniqueCode/index?code=${pathParams.value.code}&id=${pathParams.value.id}&materialId=${materialList.value?.[0].id}`,
    });

}
// 溯源
const toTraceability = () => {

}
// 接收id 且修改标题
onLoad((options) => {
    if (!options.id) {
        loading.value = false
        uni.showToast({ title: '参数错误,无唯一码ID', icon: 'none' })
        return
    }
    pathParams.value = options
    getDetailInfo()
})
onShow(() => {
    uni.setNavigationBarTitle({ title: pathParams.value.code })
})

</script>
<style scoped lang="scss">
.remarkLine {
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
    padding: 8rpx 24rpx;
    margin-bottom: 4rpx;
    min-height: 40rpx;
    margin-top: 16rpx;

    span {
        font-size: 14px;
    }

    p {
        font-weight: 700;
        font-size: 14px;

    }

    .btn-link {
        font-weight: 500;
        color: #3c9cff;

    }
}

::v-deep .form {
    .title {
        color: #424242;
    }

    .tag {
        .uni-tag {
            display: flex;
            align-items: center;
            height: calc(25px - 6px);

        }

        .tag-form {
            display: flex;
            align-items: center;
        }

        .uni-forms-item {
            margin-bottom: 0;
            align-items: center;

            .uni-easyinput__content,
            .uni-easyinput__content-input {
                height: 25px;
                width: 80px;
            }
        }

    }

    .remark {
        .uni-forms-item {
            margin-bottom: 0;
            margin-top: 16rpx;
            display: flex;
            align-items: center;

            .is-disabled {
                background-color: #fff !important;
            }

            .uni-forms-item__label {
                color: #212121;
                height: 40rpx;
            }

            .uni-easyinput__content-input {
                height: 40rpx;

                .uni-input-wrapper {
                    text-align: right;
                }
            }

            .uni-input-placeholder {
                text-align: right;
                font-size: 13px;

            }
        }
    }

    .uni-input-input {
        color: #616161
    }

}

// 底部按钮
.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;
    }
}

::v-deep.qrCodeModal {
    .uv-modal__content {
        display: block;
        padding: 24rpx;

    }
}
</style>