143 lines
4.6 KiB
Vue
143 lines
4.6 KiB
Vue
<!-- 唯一码 -->
|
||
<template>
|
||
<view class="content">
|
||
<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>
|
||
<uv-image src="../../../static/qrcode.png" width="40rpx" height="40rpx"
|
||
style="margin-top:10rpx" />
|
||
</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>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { getStatusName } from '../until';
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import { getUniqueCodeList, delUniqueCode } from '@/api/uniqueCode'
|
||
|
||
const queryParams = ref({
|
||
code:''
|
||
})
|
||
|
||
const pagingRef = ref(null)
|
||
|
||
// 删除的数据
|
||
const delItem = ref(null)
|
||
// 删除弹框相关
|
||
const alertDialog = ref(null)
|
||
const isDialog = ref(false)
|
||
// 唯一码列表
|
||
const uniqueCodeList = ref([])
|
||
|
||
// 列表：唯一码
|
||
const getMaterialList = () => {
|
||
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/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 => {
|
||
console.log(res, '11');
|
||
dialogClose()
|
||
})
|
||
}
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.topSearch {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.containerBox {
|
||
// padding: 0 12rpx;
|
||
padding-top: 60px;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.zp-l-text-rpx {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style> |