first
This commit is contained in:
141
pageProduct/invoicing-list/components/list-item.vue
Normal file
141
pageProduct/invoicing-list/components/list-item.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view class="item bg-fff border-r-12">
|
||||
<view class="u-flex u-text-left u-row-between border-bottom u-p-b-30">
|
||||
<view class="">
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="data.createdAt"></uni-dateformat>
|
||||
</view>
|
||||
<view class="tag">{{data.type}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-text-left u-row-left u-m-t-30">
|
||||
<view class="name">{{data.productName}}</view>
|
||||
<!-- <view class="category u-flex u-m-l-10">
|
||||
<view class="tag">分类</view>
|
||||
</view> -->
|
||||
<view class="id color-999 u-font-24 bg-gray u-m-l-10">
|
||||
ID:{{data.id}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
|
||||
<view class="u-text-right">
|
||||
<!-- <view>
|
||||
<text>总价值</text>
|
||||
<text class="u-m-l-10">3</text>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<text>单价</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<text>货品编码</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<text>供应商名称</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
</view> -->
|
||||
<view class="u-flex">
|
||||
<view class="text-ming-w">订单号</view>
|
||||
<text class="u-m-l-10 u-font-24 color-main">{{data.orderNo||''}}</text>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex u-relative">
|
||||
<view class="text-ming-w">库存</view>
|
||||
<view class="u-relative">
|
||||
<text class="u-m-l-10">{{data.leftNumber}}</text>
|
||||
<view class="u-absolute u-flex addNumber">
|
||||
<uni-icons type="arrow-right" :color="color.ColorMain" size="16"></uni-icons>
|
||||
<text class="color-main u-m-l-10">{{data.leftNumber+data.stockNumber}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="text-ming-w">剩余库存</view>
|
||||
<view class="u-m-l-10 color-main">{{data.leftNumber+data.stockNumber}}{{data.unitName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<view class="no-wrap">
|
||||
<text class="color-main font-bold" v-if="data.stockNumber>0">{{data.stockNumber}}</text>
|
||||
<text class="color-red font-bold" v-else>{{data.stockNumber}}</text>
|
||||
<text>{{data.unitName}}</text>
|
||||
</view>
|
||||
<!-- <view class="u-m-t-10">剩余库存</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="u-flex u-row-right u-m-t-20">
|
||||
<view class="u-flex u-m-r-30">
|
||||
<my-button shape="circle" height="70" type="default" @tap="del">
|
||||
<view class="u-p-l-30 u-p-r-30">
|
||||
删除
|
||||
</view>
|
||||
</my-button>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import color from '@/commons/color.js'
|
||||
|
||||
function del() {
|
||||
console.log('del');
|
||||
}
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['more'])
|
||||
|
||||
function more() {
|
||||
emits('more', props.index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.text-ming-w{
|
||||
min-width: calc(28rpx * 5);
|
||||
}
|
||||
.item {
|
||||
padding: 32rpx 32rpx 28rpx 28rpx;
|
||||
|
||||
.tag {
|
||||
color: $my-main-color;
|
||||
background-color: rgb(234, 244, 255);
|
||||
border-radius: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.id {
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.info {}
|
||||
}
|
||||
|
||||
.addNumber {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
padding-left: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
322
pageProduct/invoicing-list/invoicing-list.vue
Normal file
322
pageProduct/invoicing-list/invoicing-list.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28">
|
||||
<view class="fixed-top bg-fff u-flex u-p-l-30 u-row-between">
|
||||
<view class="u-flex ">
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="timeToggle">
|
||||
<text class="u-m-r-12 no-wrap">筛选时间</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-flex u-m-l-60 u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="showTypesToggle">
|
||||
<text class="u-m-r-12" v-if="types.active===''"> 选择类型</text>
|
||||
<text class="u-m-r-12 no-wrap color-main" v-else>{{types.list[types.active].text}}</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view style="width: 164rpx;"></view> -->
|
||||
<!-- <view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch" :style="{width:search.show?'694rpx':'164rpx'}">
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
<view class="u-flex-1 u-p-l-10"><input v-model="search.keyword" @confirm="searchConfirm" type="text"
|
||||
placeholder-style="font-size:28rpx;" placeholder="搜索" /></view>
|
||||
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view :style="{height:types.show?typesHeight:0}" class="tranistion types overflow-hide">
|
||||
<view @tap="changeTypesActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in types.list" :key="index">
|
||||
<view>{{item.text}}</view>
|
||||
<uni-icons v-if="types.active===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: types.bottomHeight+'px'}"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=" min-page bg-gray list u-p-30">
|
||||
<view class="u-flex u-m-b-30" v-if="filters.time.start&&filters.time.end">
|
||||
<view class="time-area u-font-24 color-main u-flex">
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
|
||||
<text class="u-p-l-10 u-p-r-10">至</text>
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
|
||||
<view class="u-m-l-10 u-flex" @tap="clearTime">
|
||||
<uni-icons type="clear" size="18" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="recoreds color-fff ">
|
||||
<view class="u-font-32">详情记录</view>
|
||||
<view class="u-flex u-row-between u-m-t-48">
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>变动数量</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">{{pageData.changeSum}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="pageData.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in pageData.list" :key="index">
|
||||
<list-item :data="item"></list-item>
|
||||
</view>
|
||||
<my-pagination :size="pageData.size" :totalElements="pageData.totalElements"
|
||||
@change="pageChange"></my-pagination>
|
||||
<!-- <uni-load-more :status="pageData.status" /> -->
|
||||
</template>
|
||||
<template v-if="pageData.hasAjax&&!pageData.list.length">
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-img-empty tips="暂无记录"></my-img-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
|
||||
<my-mask ref="mask" @close="hideType"></my-mask>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import color from '@/commons/color';
|
||||
import listItem from './components/list-item';
|
||||
import myMask from '@/components/my-components/my-mask'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
$getProductDetail,
|
||||
$getProductStockDetail,$getProductStockDetailSum
|
||||
} from '@/http/yskApi/goods.js'
|
||||
import {$invoicingType} from '../goodsData.js'
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
types.show = false
|
||||
maskShow()
|
||||
}
|
||||
|
||||
|
||||
// 库存分类
|
||||
const types = reactive({
|
||||
list:$invoicingType,
|
||||
active: '',
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
|
||||
function hideType() {
|
||||
types.show = false
|
||||
search.show = false
|
||||
}
|
||||
const typesHeight = computed(() => {
|
||||
return 30 * types.list.length + types.bottomHeight + 'px'
|
||||
})
|
||||
|
||||
function changeTypesActive(i) {
|
||||
types.active = i
|
||||
types.show = false
|
||||
toggleMask()
|
||||
}
|
||||
|
||||
function showTypesToggle() {
|
||||
types.show = !types.show
|
||||
maskShow()
|
||||
}
|
||||
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
pageData.query.page=page-1
|
||||
init()
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function resetQuery(){
|
||||
pageData.query.page=0
|
||||
}
|
||||
function clearTime() {
|
||||
filters.time.start = ''
|
||||
filters.time.end = ''
|
||||
resetQuery()
|
||||
init()
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
function datePickerConfirm(e) {
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
resetQuery()
|
||||
init()
|
||||
}
|
||||
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
|
||||
const mask = ref(null)
|
||||
|
||||
function toggleMask(show) {
|
||||
mask.value.toggle()
|
||||
}
|
||||
|
||||
function maskShow() {
|
||||
mask.value.open()
|
||||
}
|
||||
|
||||
function maskHide() {
|
||||
mask.value.close()
|
||||
}
|
||||
|
||||
|
||||
const pageData = reactive({
|
||||
query: {
|
||||
page: 0,
|
||||
size: 10
|
||||
},
|
||||
productId:'',
|
||||
totalElements: 0,
|
||||
list: [],
|
||||
status: 'noMore',
|
||||
hasAjax:false,
|
||||
changeSum:0
|
||||
})
|
||||
async function init() {
|
||||
const createdAt=(filters.time.start&&filters.time.end)?[filters.time.start,filters.time.end ]:[]
|
||||
const res = await $getProductStockDetail({
|
||||
...pageData.query,
|
||||
productId: pageData.productId,
|
||||
type:types.active!==''?types.list[types.active].value:'',
|
||||
createdAt
|
||||
})
|
||||
pageData.hasAjax=true
|
||||
pageData.list = res.content
|
||||
pageData.totalElements = res.totalElements
|
||||
}
|
||||
async function getSum(){
|
||||
const res = await $getProductStockDetailSum({
|
||||
productId: pageData.productId,
|
||||
})
|
||||
pageData.changeSum = res.exchange
|
||||
}
|
||||
watch(()=>types.active,(newval)=>{
|
||||
resetQuery()
|
||||
init()
|
||||
})
|
||||
|
||||
onLoad(opt => {
|
||||
pageData.productId = opt ? opt.productId : ''
|
||||
init()
|
||||
getSum()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-top {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.recoreds {
|
||||
background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
|
||||
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 32rpx 40rpx 40rpx 48rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
top: -112rpx;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 56rpx;
|
||||
width: 224rpx;
|
||||
box-shadow: 0 0 1px #666;
|
||||
height: 224rpx;
|
||||
background: linear-gradient(180deg, rgba(103, 204, 254, 0.6) 0%, rgba(144, 87, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
padding: 16rpx 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
|
||||
.search-btn {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 164rpx;
|
||||
transition: all .3s ease-in-out;
|
||||
background-color: rgb(247, 247, 247);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.types {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.time-area {
|
||||
background: #E6F0FF;
|
||||
border-radius: 100px;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.icon-arrow-down-fill {
|
||||
width: 16rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 52px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user