395 lines
7.9 KiB
Vue
395 lines
7.9 KiB
Vue
<template>
|
|
<view class="all-view">
|
|
<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
|
|
<view class="left-father" @click="goBack">
|
|
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
|
|
<view style="font-size: 30rpx;">采购单</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab-view" :style="{top:`${uni.getStorageSync('moveHeight')+40}px`}">
|
|
<view class="tab" :style="tabtargetindex===index?{fontWeight:`600`,color:`black`}:{}"
|
|
v-for="(item,index) in tabarray" :key="index" @click="changeTab(index)">
|
|
{{ item }}
|
|
</view>
|
|
<view class="tab-view-target" :style="{left:`${11 + tabtargetindex * 18.4}%` }">
|
|
|
|
</view>
|
|
</view>
|
|
<view :style="{height:`${uni.getStorageSync('moveHeight') + 98}px`}"></view>
|
|
<view class="card-view" v-for="(item,index) in cardlist" :key="index" @click="gotoDeatil(item)">
|
|
<view class="card-top">
|
|
<view class="card-top-left">
|
|
<image class="card-mark" src="https://www.focusnu.com/media/directive/index/buylist.png" />
|
|
<view>
|
|
<view class="card-id">
|
|
{{ item.cgdNo }}
|
|
</view>
|
|
<view class="card-time">
|
|
采购日期：{{ item.qgDate }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-top-right">
|
|
<view class="">
|
|
<text class="card-money">
|
|
￥
|
|
</text>
|
|
|
|
<text class="card-price">
|
|
{{ item.totalPrice }}
|
|
</text>
|
|
|
|
</view>
|
|
<view class="card-price-ex">
|
|
订单金额
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-middle">
|
|
|
|
</view>
|
|
<view class="card-end">
|
|
<view class="card-name">
|
|
机构名称：{{ item.departName }}
|
|
</view>
|
|
<view class="card-tags"
|
|
:style="{borderColor:`${tagstype[item.status].color}`,color:`${tagstype[item.status].color}`}">
|
|
{{ tagstype[item.status].name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
style="position: fixed;left:0;top: 50%;transform: translateY(-50%);width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 999;"
|
|
v-if="!cardlist.length">
|
|
<image style="height: 220rpx;width: 350rpx;"
|
|
src="https://www.focusnu.com/media/directive/index/jigouyaoqing.png" />
|
|
<view style="color: #8E96AD;margin-top: 20rpx;">
|
|
暂无采购单
|
|
</view>
|
|
</view>
|
|
<view class="card-view-finally">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, nextTick } from 'vue';
|
|
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
|
import { getEmployeesOrgRela, getCgdListByGysId, queryCgdList } from './api.js'
|
|
|
|
|
|
const gysId = ref("")
|
|
onLoad((options : Record<string, string | undefined>) => {
|
|
gysId.value = options?.id;
|
|
getChdList()
|
|
})
|
|
|
|
|
|
const pageNo = ref(1);
|
|
const status = ref<string | number>("");
|
|
const getChdList = () => {
|
|
stopget.value = false;
|
|
let data = {
|
|
gysId: gysId.value,
|
|
pageNo: pageNo.value,
|
|
status: status.value
|
|
}
|
|
|
|
queryCgdList(data).then((res : any) => {
|
|
if (res.success) {
|
|
res.result.records.forEach((element:any)=>{
|
|
if(element.status==9){
|
|
element.status = 3
|
|
}
|
|
})
|
|
cardlist.value = res.result.records
|
|
|
|
} else {
|
|
cardlist.value = [];
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: 'none', // 必须写 none 才是文字提示
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const tagstype = ref([
|
|
{
|
|
name: `待确认`,
|
|
color: `#0074E1`
|
|
},
|
|
{
|
|
name: `拣货中`,
|
|
color: `#F03232`
|
|
},
|
|
{
|
|
name: `已完成`,
|
|
color: `#222222`
|
|
},
|
|
{
|
|
name: `已作废`,
|
|
color: `red`
|
|
},
|
|
])
|
|
const cardlist = ref([])
|
|
const tabarray = [`全部`, `待确认`, `拣货中`, `已完成`,`已作废`]
|
|
// 选中的序列号
|
|
const tabtargetindex = ref(0)
|
|
// 切换标签
|
|
const changeTab = (index : number) => {
|
|
tabtargetindex.value = index;
|
|
changeArray()
|
|
}
|
|
|
|
onPullDownRefresh(() => {
|
|
try {
|
|
changeArray()
|
|
} finally {
|
|
uni.stopPullDownRefresh() // 👈 必须手动关闭
|
|
}
|
|
})
|
|
|
|
const stopget = ref(false)
|
|
|
|
onReachBottom(() => {
|
|
|
|
if (!stopget.value) {
|
|
pageNo.value++
|
|
let data = {
|
|
gysId: gysId.value,
|
|
pageNo: pageNo.value,
|
|
status: status.value
|
|
}
|
|
|
|
queryCgdList(data).then((res : any) => {
|
|
if (res.success) {
|
|
res.result.records.forEach((element:any)=>{
|
|
if(element.status==9){
|
|
element.status = 3
|
|
}
|
|
})
|
|
cardlist.value.push(...res.result.records)
|
|
if (res.result.records.length != 10) {
|
|
stopget.value = true
|
|
}
|
|
// cardlist.value = res.result.records
|
|
} else {
|
|
cardlist.value = [];
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: 'none', // 必须写 none 才是文字提示
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
})
|
|
const changeArray = () => {
|
|
if(tabtargetindex.value==4){
|
|
status.value = 9
|
|
}else if (tabtargetindex.value) {
|
|
status.value = Number(tabtargetindex.value) - 1
|
|
} else {
|
|
status.value = ""
|
|
}
|
|
pageNo.value = 1;
|
|
getChdList()
|
|
}
|
|
const goBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
|
|
const gotoDeatil = (item : any) => {
|
|
// item.gysId = gysId.value
|
|
const str = encodeURIComponent(JSON.stringify(item))
|
|
uni.navigateTo({
|
|
url: `/pages/yuangongindex/purchaseorderdetail?item=${str}`
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.all-view {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-color: #F5F5F7;
|
|
}
|
|
|
|
.title-back {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 70rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding-bottom: 20rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
|
|
.left-father {
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
.back-img {
|
|
width: 45rpx;
|
|
height: 40rpx;
|
|
margin-left: 40rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-view {
|
|
width: 100%;
|
|
height: 110rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
padding: 0 4%;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 100;
|
|
|
|
.tab {
|
|
width: 20%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
margin-top: 10rpx;
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.tab-view-target {
|
|
position: absolute;
|
|
bottom: 14rpx;
|
|
left: 13.5%;
|
|
width: 4.5%;
|
|
height: 9.3rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #0074E1;
|
|
transition: left 0.2s linear;
|
|
}
|
|
}
|
|
|
|
.card-view {
|
|
margin-left: 4%;
|
|
width: 92%;
|
|
height: 230rpx;
|
|
background-color: #fff;
|
|
margin-top: 25rpx;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
|
|
.card-top {
|
|
width: 100%;
|
|
height: 56%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
align-items: center;
|
|
|
|
.card-top-left {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.card-mark {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
margin-right: 13rpx;
|
|
}
|
|
|
|
.card-id {
|
|
color: #222222;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.card-time {
|
|
color: #888888;
|
|
font-size: 23rpx;
|
|
margin-left: 2rpx;
|
|
}
|
|
}
|
|
|
|
.card-top-right {
|
|
text-align: right;
|
|
margin-right: 10rpx;
|
|
|
|
.card-money {
|
|
font-weight: 600;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.card-price {
|
|
font-weight: 600;
|
|
font-size: 43rpx;
|
|
margin-left: -6rpx;
|
|
}
|
|
|
|
.card-price-ex {
|
|
font-size: 23rpx;
|
|
color: #888888;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-middle {
|
|
margin-top: 8rpx;
|
|
background-color: #f9f9f9;
|
|
height: 2rpx;
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
.card-end {
|
|
height: 32%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.card-name {
|
|
margin-top: 7rpx;
|
|
color: #555555;
|
|
margin-left: 40rpx;
|
|
font-size: 26rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
width: 70%;
|
|
}
|
|
|
|
.card-tags {
|
|
position: absolute;
|
|
right: 25rpx;
|
|
bottom: 10rpx;
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
border: 2rpx red solid;
|
|
border-radius: 15rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 27rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-view-finally {
|
|
height: 25rpx;
|
|
|
|
}
|
|
</style> |