hazardousWaste_app/pages/warehousing/uniqueCode/myUniqueCode/index.vue

<!-- 唯一码 -->
<template>
    <navigation title="唯一码" back-url="pages/warehousing/index"></navigation>
    <view class="contentBox">
        <view class="topSearch">
            <uni-easyinput type="text" v-model="queryParams.code" prefixIcon="search" :inputBorder="false"
                @iconClick="getMaterialList" placeholder="请输入关键词搜索" />

        </view>

        <!-- 唯一码列表  -->
        <z-paging ref="pagingRef" class="containerBox" v-model="uniqueCodeList" @query="getMaterialList">
            <uni-list>
                <uni-list-item v-for="item in uniqueCodeList" :key="item.id" clickable class="material-card"
                    @longpress="() => handleItemLongPress(item, index)" @click="toDetail(item)">
                    <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.stop="getDetailInfo(item)">
                                        <uv-image src="../../../../static/qrcode.png" width="40rpx" height="40rpx"
                                            style="margin-top:10rpx" />
                                    </view>
                                </view>
                            </view>
                        </p>
                    </template>
                </uni-list-item>
            </uni-list>
        </z-paging>
        <view>

            <uni-popup ref="alertDialog" type="center">
                <uni-popup-dialog type="error" v-if="isDialog" cancelText="取消" confirmText="确认" title="是否需要删除该唯一码？"
                    @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
            </uni-popup>
        </view>
        <!-- 唯一码图形显示弹窗 -->
        <uv-modal ref="modalRef" :title="none" class="qrCodeModal" :showConfirmButton="false">
            <qr-code-modal :detail="materialList" />
        </uv-modal>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import QrCodeModal from './QrCodeModal.vue';
import { getStatusName, getDetail } from '../until';
import Navigation from '../../../components/Navigation.vue';
import { getUniqueCodeList, delUniqueCode, detailUniqueCode } from '@/api/uniqueCode'

const queryParams = ref({
    code: ''
})

const pagingRef = ref(null)
// 开关：唯一码图形
const modalRef = ref()
// 删除的数据
const delItem = ref(null)
// 删除弹框相关
const alertDialog = ref(null)
const isDialog = ref(false)
// 唯一码列表
const uniqueCodeList = ref([])
// 物料列表数组
const materialList = ref({
    material: []
})
// 列表：唯一码
const getMaterialList = (pageNo, pageSize) => {
    queryParams.value.pageNum = pageNo
    console.log(pageNo, pageSize, queryParams.value)
    getUniqueCodeList(queryParams.value).then(res => {
        res.rows.forEach(e => {
            e.showMore = false;
        });
        pagingRef.value.complete(res.rows)
    }).catch(res => {
        pagingRef.value.complete(false)
    })
}

onShow(() => {
    pagingRef.value?.reload?.()
})

// 详情：唯一码
const toDetail = (val) => {
    uni.navigateTo({
        url: `/pages/warehousing/uniqueCode/myUniqueCode/detail?id=${val.id}&code=${val.code}`,
    });
}

// 删除弹窗：显示 长按事件
const handleItemLongPress = (val) => {
    alertDialog.value.open()
    isDialog.value = true
    delItem.value = val
}
//删除弹窗：关闭
const dialogClose = () => {
    alertDialog.value.close()
    isDialog.value = false
}
//删除弹窗：确认
const dialogConfirm = () => {
    console.log(delItem.value.id, 'delItem.value.id');
    delUniqueCode({ ids: [delItem.value.id] }).then(res => {
        dialogClose()
    })
}
// 详情：唯一码
const getDetailInfo = (row) => {
    detailUniqueCode({ id: row.id }).then((res) => {
        if (res.code == 200) {
            materialList.value.material = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial), qrCode: res.data.qrCode, code: res.data.code, uniqueCodeRemark: res.data.remark }]
            setTimeout(() => {
                modalRef.value.open()
            }, 300)
        }
    })
}

</script>
<style scoped lang="scss">
.topSearch {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 99;
    padding: 8rpx 16rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.containerBox {
    padding-top: 100px !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .zp-l-text-rpx {
        font-size: 12px;
    }
}

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

    }
}
</style>