first
This commit is contained in:
369
pageInvoicing/category-management/add-products.vue
Normal file
369
pageInvoicing/category-management/add-products.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<view class="min-page bg-gray u-p-30 u-font-28 color-333">
|
||||
|
||||
<view class=" ">
|
||||
<uni-forms ref="refform" label-position="left" :model="form" label-align="left" label-width="300"
|
||||
:rules="rules">
|
||||
<view class="">
|
||||
<text class="">货品信息</text>
|
||||
</view>
|
||||
<view class="form">
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="name">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">货品名称</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
||||
placeholder="填写货品名称"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10 u-p-t-10">
|
||||
<uni-forms-item required label="" name="code">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">货品编码</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1 ">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.code"
|
||||
placeholder="填写货品编码"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10 u-p-t-10">
|
||||
<uni-forms-item required label="" name="category">
|
||||
<template #label>
|
||||
<view class="u-text-left ">
|
||||
<text class="color-333 u-font-28">货品类别</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<picker @change="categoryChange" :value="categoryCurrent" range-key="name"
|
||||
:range="category">
|
||||
<view class=" u-flex u-row-between u-relative ">
|
||||
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
|
||||
<!-- <view>
|
||||
<text class="" v-if="form.category!==''">{{category[form.category].name}}</text>
|
||||
<text class="color-999 " v-else>选择分类</text>
|
||||
</view> -->
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.category"
|
||||
placeholder="未分类"></uni-easyinput>
|
||||
</view>
|
||||
<uni-icons type="right" size="18" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
</picker>
|
||||
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="unit">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">计量单位</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.unit"
|
||||
placeholder="填写计量单位"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">入库数量</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput type="digit" :inputBorder="false" paddingNone v-model="form.inNumber"
|
||||
placeholder="选填"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="unit">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">总价值</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex">
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput type="digit" :inputBorder="false" paddingNone v-model="form.allPrice"
|
||||
placeholder="选填"></uni-easyinput>
|
||||
</view>
|
||||
<view class="u-p-l-30">元</view>
|
||||
</view>
|
||||
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class=" u-p-b-10">
|
||||
<uni-forms-item required label="" name="price">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">平均单价</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput type="digit" :inputBorder="false" paddingNone v-model="form.price"
|
||||
placeholder="0"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32">
|
||||
<text class="">供应商信息（选填）</text>
|
||||
</view>
|
||||
<div class="form">
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" >
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">供应商名称</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.supplierShopName"
|
||||
placeholder="填写供应商名称"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" >
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">联系人</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.supplierName"
|
||||
placeholder="填写联系人"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class=" u-p-b-10">
|
||||
<uni-forms-item required label="" name="name">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">联系电话</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.supplierPhone"
|
||||
placeholder="填写联系号码"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view style="height: 200rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed-b u-flex u-row-right">
|
||||
<view><my-button shape="circle" type="cancel" height="56" @tap="cancel">
|
||||
<view class="u-p-r-30 u-p-l-30 color-999">取消</view>
|
||||
</my-button></view>
|
||||
<view class="u-m-l-30"><my-button shape="circle" height="56" @tap="submit">
|
||||
<view class="u-p-r-30 u-p-l-30">保存</view>
|
||||
</my-button></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import myButton from '../../components/my-components/my-button';
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
const units = reactive({
|
||||
list: [{
|
||||
name: '件',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '杯',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '个',
|
||||
value: 3
|
||||
}
|
||||
],
|
||||
current: ''
|
||||
})
|
||||
const category = reactive([{
|
||||
name: '分类1',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '分类2',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '分类3',
|
||||
value: 3
|
||||
}
|
||||
])
|
||||
let categoryCurrent = ref('')
|
||||
|
||||
function categoryChange(e) {
|
||||
console.log(e);
|
||||
categoryCurrent.value = e.detail.value
|
||||
form.category = category[e.detail.value].name
|
||||
}
|
||||
|
||||
function unitChange(e) {
|
||||
units.current = e.detail.value
|
||||
form.unit = units.list[e.detail.value].name
|
||||
}
|
||||
|
||||
const refform = ref(null)
|
||||
const form = reactive({
|
||||
name: '',
|
||||
code: '',
|
||||
category: '',
|
||||
price: 0,
|
||||
inNumber: 0,
|
||||
unit: '',
|
||||
number: 0,
|
||||
inNumber: 0,
|
||||
allPrice:0,
|
||||
supplierShopName:'',
|
||||
supplierName:'',
|
||||
supplierPhone:'',
|
||||
})
|
||||
// 校验规则
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '菜品名称不能为空'
|
||||
}]
|
||||
},
|
||||
code: {
|
||||
rules: [{
|
||||
required: true,
|
||||
}]
|
||||
},
|
||||
category: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择菜品分类'
|
||||
}]
|
||||
},
|
||||
price: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入价格'
|
||||
}]
|
||||
},
|
||||
unit: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择单位'
|
||||
}]
|
||||
},
|
||||
price: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请填写下单数量'
|
||||
}]
|
||||
},
|
||||
}
|
||||
|
||||
function submit() {
|
||||
refform.value.validate(res => {
|
||||
console.log(res)
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
const page = reactive({
|
||||
type: 'add'
|
||||
})
|
||||
function cancel(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
onLoad(opt => {
|
||||
if (JSON.stringify(opt) != '{}' && opt.hasOwnProperty('type')) {
|
||||
page.type = opt.type
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: page.type === 'add' ? '添加货品' : '编辑货品'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form {
|
||||
margin-top: 32rpx;
|
||||
background-color: #fff;
|
||||
padding: 32rpx 24rpx 32rpx 24rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.u-text-left {
|
||||
min-width: 160rpx;
|
||||
}
|
||||
|
||||
// background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item .uni-forms-item__label {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
|
||||
::v-deep.uni-easyinput__placeholder-class {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item__error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-b {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding-top: 28rpx;
|
||||
padding-right: 28rpx;
|
||||
padding-left: 28rpx;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 44rpx);
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
69
pageInvoicing/category-management/category-management.vue
Normal file
69
pageInvoicing/category-management/category-management.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="min-page bg-gray">
|
||||
<template v-if="page.list.length">
|
||||
<view class="u-m-b-28 " v-for="(item,index) in page.list" :key="index">
|
||||
<list-item @more="moreShow"></list-item>
|
||||
</view>
|
||||
<uni-load-more :status="page.status" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="暂无出库记录"></my-empty>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="u-fix bottom">
|
||||
<my-button shape="circle" type="primary" @tap="toAddCategory">添加类别</my-button>
|
||||
</view>
|
||||
<my-action-sheet @itemClick="sheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js'
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import myActionSheet from '@/components/my-components/my-action-sheet';
|
||||
import myEmpty from '../components/empty.vue';
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import listItem from './components/list-item';
|
||||
const page = reactive({
|
||||
list: [1, 2],
|
||||
status: 'noMore'
|
||||
})
|
||||
let refMoreSheet = ref(null)
|
||||
const actionSheet = reactive({
|
||||
list: ['编辑', '删除']
|
||||
})
|
||||
|
||||
function moreShow() {
|
||||
refMoreSheet.value.open()
|
||||
}
|
||||
|
||||
function toAddCategory() {
|
||||
go.to('PAGES_CATEGORY_CONTROL_EDIT')
|
||||
}
|
||||
|
||||
function sheetClick(e) {
|
||||
if (e === 0) {
|
||||
return go.to('PAGES_CATEGORY_CONTROL_EDIT', {
|
||||
title: '分类：测试分类',
|
||||
type:'edit',
|
||||
id: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.min-page {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: calc(env(safe-area-inset-bottom) + 84rpx);
|
||||
left: 110rpx;
|
||||
right: 110rpx;
|
||||
}
|
||||
</style>
|
||||
120
pageInvoicing/category-management/components/list-item.vue
Normal file
120
pageInvoicing/category-management/components/list-item.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
|
||||
<view class="item bg-fff border-r-12 u-font-28">
|
||||
<view class="">
|
||||
<view class="">食物</view>
|
||||
</view>
|
||||
<view class="u-font-24 u-flex u-m-t-10">
|
||||
<view class="u-m-r-10">炒面</view>
|
||||
<view class="u-m-r-10">米饭</view>
|
||||
<view>鸡蛋</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-flex u-row-right u-m-t-20">
|
||||
<view class="u-flex ">
|
||||
<my-button shape="circle" height="56" type="cancel" @tap="toRcored">
|
||||
<view class="color-999">查看记录</view>
|
||||
</my-button>
|
||||
</view>
|
||||
<view class="u-flex u-m-l-30">
|
||||
<my-button shape="circle" height="56" 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'
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
function toRcored(){
|
||||
go.to('PAGES_CATEGORY_MAN_RECORDS',{
|
||||
title:'分类：测试分类',
|
||||
id:1
|
||||
})
|
||||
}
|
||||
function retract() {
|
||||
console.log('retract');
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该记录?删除后，将恢复改动前的数量',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['more'])
|
||||
|
||||
function more() {
|
||||
emits('more', props.index)
|
||||
}
|
||||
|
||||
let state = reactive({
|
||||
showRemark: false
|
||||
})
|
||||
|
||||
function toggleRemark() {
|
||||
state.showRemark = !state.showRemark
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item {
|
||||
padding: 32rpx 32rpx 28rpx 28rpx;
|
||||
|
||||
.title-min-width {
|
||||
min-width: 132rpx;
|
||||
}
|
||||
|
||||
.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%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.icon-up {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
62
pageInvoicing/category-management/edit-category.vue
Normal file
62
pageInvoicing/category-management/edit-category.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="u-p-30 bg-gray min-page color-333 u-font-28">
|
||||
<view class="border-r-12 bg-fff u-p-30">
|
||||
<view>
|
||||
<view>类别名称</view>
|
||||
<view class="u-m-t-16 u-p-b-10 border-bottom">
|
||||
<uni-easyinput paddingNone :inputBorder="false" v-model="value"
|
||||
placeholder="填写类别名称"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<view>类别名称</view>
|
||||
<view class="u-m-t-16 u-m-t-10">
|
||||
<uni-easyinput type="textarea" v-model="value" placeholder="填写类别描述内容"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="">
|
||||
<my-button shape="circle" type="primary">保存</my-button>
|
||||
</view>
|
||||
<view class="u-m-t-20">
|
||||
<my-button type="cancel">
|
||||
<view class="color-999">取消</view>
|
||||
</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
|
||||
const page = reactive({
|
||||
type: 'add'
|
||||
})
|
||||
onLoad(opt => {
|
||||
if (JSON.stringify(opt) != '{}' && opt.hasOwnProperty('type')) {
|
||||
page.type = opt.type
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: page.type==='add'?'添加类别':'编辑类别'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom {
|
||||
padding: 84rpx 80rpx;
|
||||
}
|
||||
</style>
|
||||
210
pageInvoicing/category-management/look-records.vue
Normal file
210
pageInvoicing/category-management/look-records.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28">
|
||||
<view class="fixed-top bg-fff 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">筛选时间</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="toggleMask">
|
||||
<text class="u-m-r-12">类型</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</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}}</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">0</view>
|
||||
</view>
|
||||
<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">0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<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">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="page.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="亲，你还没有记录哦~"></my-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 myEmpty from '../components/empty.vue';
|
||||
import myMask from '@/components/my-components/my-mask'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
|
||||
const page=reactive({
|
||||
list:[]
|
||||
})
|
||||
|
||||
|
||||
const types = reactive({
|
||||
list: ['全部', '入库', '出库', '清点'],
|
||||
active: 0,
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
|
||||
function hideType() {
|
||||
types.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
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function clearTime() {
|
||||
filters.time = ''
|
||||
filters.end = ''
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
|
||||
const mask = ref(null)
|
||||
|
||||
function toggleMask(show) {
|
||||
types.show = !types.show
|
||||
mask.value.toggle()
|
||||
}
|
||||
|
||||
onLoad(opt => {
|
||||
console.log(opt);
|
||||
uni.setNavigationBarTitle({
|
||||
title: opt.title || ''
|
||||
})
|
||||
})
|
||||
</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%);
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
240
pageInvoicing/category-management/warehouse-entry.vue
Normal file
240
pageInvoicing/category-management/warehouse-entry.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="min-page bg-gray u-p-30 u-font-28 color-333">
|
||||
|
||||
<view class="form color-333 u-font-32">
|
||||
<view class="u-flex border">
|
||||
<view class="u-flex-1 u-p-l-24">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
||||
placeholder="请输入货品编码"></uni-easyinput>
|
||||
</view>
|
||||
<view class="u-p-l-30">
|
||||
<image src="/pageInvoicing/static/images/icon-saoma.svg" class="icon-saoma" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex border u-m-t-32">
|
||||
<view class="label">货品名称</view>
|
||||
<view class="u-flex-1 u-p-l-32">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
||||
placeholder="请输入货品编码"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex border u-m-t-32">
|
||||
<view class="label">入库数量</view>
|
||||
<view class="u-flex-1 u-p-l-32">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
||||
placeholder="请输入货品编码"></uni-easyinput>
|
||||
</view>
|
||||
<view class="u-p-r-24 u-p-l-24">单位</view>
|
||||
</view>
|
||||
<view class="u-flex border u-m-t-32">
|
||||
<view class="label">总价值</view>
|
||||
<view class="u-flex-1 u-p-l-32">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
||||
placeholder="请输入货品编码"></uni-easyinput>
|
||||
</view>
|
||||
<view class="u-p-r-24 u-p-l-24">元</view>
|
||||
</view>
|
||||
<view class="u-flex border u-m-t-32">
|
||||
<view class="label">单价</view>
|
||||
<view class="u-flex-1 u-p-l-32 u-p-r-32">
|
||||
单价 元/单位
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom ">
|
||||
<view class=""><my-button shape="circle" @tap="submit">
|
||||
<view >保存</view>
|
||||
</my-button></view>
|
||||
<view class="u-m-t-10"><my-button shape="circle" type="cancel" @tap="cancel">
|
||||
<view class="color-999">取消</view>
|
||||
</my-button></view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import myButton from '../../components/my-components/my-button';
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
const units = reactive({
|
||||
list: [{
|
||||
name: '件',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '杯',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '个',
|
||||
value: 3
|
||||
}
|
||||
],
|
||||
current: ''
|
||||
})
|
||||
const category = reactive([{
|
||||
name: '分类1',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '分类2',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '分类3',
|
||||
value: 3
|
||||
}
|
||||
])
|
||||
let categoryCurrent = ref('')
|
||||
|
||||
function categoryChange(e) {
|
||||
console.log(e);
|
||||
categoryCurrent.value = e.detail.value
|
||||
form.category = category[e.detail.value].name
|
||||
}
|
||||
|
||||
function unitChange(e) {
|
||||
units.current = e.detail.value
|
||||
form.unit = units.list[e.detail.value].name
|
||||
}
|
||||
|
||||
const refform = ref(null)
|
||||
const form = reactive({
|
||||
name: '',
|
||||
code: '',
|
||||
category: '',
|
||||
price: 0,
|
||||
inNumber: 0,
|
||||
unit: '',
|
||||
number: 0,
|
||||
inNumber: 0,
|
||||
allPrice: 0,
|
||||
supplierShopName: '',
|
||||
supplierName: '',
|
||||
supplierPhone: '',
|
||||
})
|
||||
// 校验规则
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '菜品名称不能为空'
|
||||
}]
|
||||
},
|
||||
code: {
|
||||
rules: [{
|
||||
required: true,
|
||||
}]
|
||||
},
|
||||
category: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择菜品分类'
|
||||
}]
|
||||
},
|
||||
price: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入价格'
|
||||
}]
|
||||
},
|
||||
unit: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择单位'
|
||||
}]
|
||||
},
|
||||
price: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请填写下单数量'
|
||||
}]
|
||||
},
|
||||
}
|
||||
|
||||
function submit() {
|
||||
refform.value.validate(res => {
|
||||
console.log(res)
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
const page = reactive({
|
||||
type: 'add'
|
||||
})
|
||||
|
||||
function cancel() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
onLoad(opt => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.u-text-left {
|
||||
min-width: 160rpx;
|
||||
}
|
||||
|
||||
// background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item .uni-forms-item__label {
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
::v-deep.uni-easyinput__placeholder-class {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item__error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-top: 84rpx;
|
||||
padding-right: 80rpx;
|
||||
padding-left: 80rpx;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #F9F9F9;
|
||||
}
|
||||
|
||||
.icon-saoma {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 84rpx;
|
||||
min-width: 190rpx;
|
||||
text-align: left;
|
||||
font-size: 32rpx;
|
||||
padding-left: 24rpx;
|
||||
padding-right: 24rpx;
|
||||
line-height: 84rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
29
pageInvoicing/components/empty.vue
Normal file
29
pageInvoicing/components/empty.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<image :src="img" mode="" class="img"></image>
|
||||
<view class="tips">{{tips}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props= defineProps({
|
||||
tips:{
|
||||
type:String,
|
||||
default:'暂无数据'
|
||||
},
|
||||
img:{
|
||||
type:String,
|
||||
default:'/pageInvoicing/static/images/icon-empty.svg'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img{
|
||||
width: 326rpx;
|
||||
height: 336rpx;
|
||||
}
|
||||
.tips{
|
||||
margin-top: 74rpx;
|
||||
}
|
||||
</style>
|
||||
89
pageInvoicing/index/components/product-item.vue
Normal file
89
pageInvoicing/index/components/product-item.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="item bg-fff border-r-12">
|
||||
<view class="u-flex u-text-left u-row-left">
|
||||
<view class="name">名称</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:1234
|
||||
</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>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<view class="color-main font-bold">22</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="toRcored">查看记录</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'
|
||||
function toRcored(){
|
||||
go.to('PAGES_TYPE_RECORD',{
|
||||
title:'测试分类',
|
||||
id:1
|
||||
})
|
||||
}
|
||||
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">
|
||||
.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 {}
|
||||
}
|
||||
</style>
|
||||
300
pageInvoicing/index/index - 副本.vue
Normal file
300
pageInvoicing/index/index - 副本.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<view class="mask position-all" v-if="maskShow" @tap="hideTop"></view>
|
||||
<view class="u-font-28 color-333 min-page bg-gray">
|
||||
<view class="top u-fixed">
|
||||
<view class="u-flex menus u-m-t-50 u-row-between">
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center" @tap="toPage(item.page)"
|
||||
v-for="(item,index) in menus.list" :key="index">
|
||||
<image :src="item.icon" class="menus-icon" mode=""></image>
|
||||
<view class="u-font-28 color-333 u-m-t-16">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class=" u-relative u-m-t-22 u-p-b-22">
|
||||
<view class="u-flex u-row-between u-p-30 u-relative">
|
||||
<view class="u-flex" @tap="showStatusToggle">
|
||||
<text class="u-m-r-12">货品类别</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view style="width: 486rpx;"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch"
|
||||
:style="{width:search.show?'694rpx':'486rpx'}">
|
||||
<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="搜索货品ID/货品编码" /></view>
|
||||
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="{height:status.show?statusHeight:0}" class="tranistion status overflow-hide">
|
||||
<view @tap="changeStatusActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in status.list" :key="index">
|
||||
<view>{{item}}</view>
|
||||
<uni-icons v-if="status.active===index" type="checkmarkempty"
|
||||
:color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: status.bottomHeight+'px'}"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list" :style="{'padding-top':topHeight+'px'}">
|
||||
<template v-if="product.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in product.list" :key="index">
|
||||
<product-item @more="moreShow"></product-item>
|
||||
</view>
|
||||
<view style="height: 200rpx;"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="亲，你还没有类别哦~"></my-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-fixed bottom bg-fff ">
|
||||
<view class="u-flex u-abso">
|
||||
<view class="u-flex-1">
|
||||
<my-button @tap="addProduct" bgColor="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain
|
||||
type="primary">添加货品</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="ruKu">入库</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<my-action-sheet @itemClick="sheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import color from '@/commons/color.js';
|
||||
import myEmpty from '../components/empty.vue';
|
||||
import productItem from './components/product-item.vue';
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import myActionSheet from '@/components/my-components/my-action-sheet';
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import {
|
||||
reactive,
|
||||
computed,
|
||||
ref
|
||||
} from 'vue';
|
||||
function addProduct(){
|
||||
go.to('PAGES_CATEGORY_MAN_ADD_PRO')
|
||||
}
|
||||
function ruKu(){
|
||||
go.to('PAGES_CATEGORY_MAN_RUKU')
|
||||
}
|
||||
let refMoreSheet = ref(null)
|
||||
const actionSheet = reactive({
|
||||
list: ['编辑', '清点', '入库', '出库', '删除']
|
||||
})
|
||||
|
||||
function moreShow() {
|
||||
console.log(refMoreSheet.value);
|
||||
refMoreSheet.value.open()
|
||||
}
|
||||
function sheetClick(index){
|
||||
console.log(index);
|
||||
}
|
||||
const product = reactive({
|
||||
list: new Array(1).fill(1)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let topHeight = ref(155)
|
||||
|
||||
const maskShow = computed(() => {
|
||||
return status.show || search.show
|
||||
})
|
||||
|
||||
function hideTop() {
|
||||
status.show = false
|
||||
search.show = false
|
||||
}
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
status.show = false
|
||||
}
|
||||
|
||||
const status = reactive({
|
||||
list: ['全部', '未分类'],
|
||||
active: 0,
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
const statusHeight = computed(() => {
|
||||
return 30 * status.list.length + status.bottomHeight + 'px'
|
||||
})
|
||||
|
||||
function changeStatusActive(i) {
|
||||
status.active = i
|
||||
status.show = false
|
||||
}
|
||||
|
||||
function showStatusToggle() {
|
||||
status.show = !status.show
|
||||
}
|
||||
|
||||
let allHeight = ref(0)
|
||||
|
||||
function getTop() {
|
||||
let selectorQuery = uni.createSelectorQuery();
|
||||
selectorQuery.select('.top').boundingClientRect((rects) => {
|
||||
console.log(rects);
|
||||
topHeight.value = rects.height
|
||||
}).exec()
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
getTop()
|
||||
})
|
||||
|
||||
|
||||
|
||||
const menus = reactive({
|
||||
list: [{
|
||||
icon: '/pageInvoicing/static/images/icon-in.svg',
|
||||
name: '入库记录',
|
||||
page: 'PAGES_STORAGE_RECORD'
|
||||
},
|
||||
{
|
||||
icon: '/pageInvoicing/static/images/icon-out.svg',
|
||||
name: '出库记录',
|
||||
page: 'PAGES_OUTBOUND_RECORD'
|
||||
},
|
||||
{
|
||||
icon: '/pageInvoicing/static/images/icon-order.svg',
|
||||
name: '清点记录',
|
||||
page: 'PAGES_INVENTORY_RECORD'
|
||||
},
|
||||
{
|
||||
icon: '/pageInvoicing/static/images/icon-category.svg',
|
||||
name: '类别管理',
|
||||
page: 'PAGES_CATEGORY_MAN'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
function toPage(page) {
|
||||
go.to(page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.top {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
/* #ifdef H5 */
|
||||
top: 44px;
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
|
||||
/* #endif */
|
||||
.menus {
|
||||
padding: 0 44rpx;
|
||||
}
|
||||
|
||||
.lh30 {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.menus-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.icon-arrow-down-fill {
|
||||
width: 16rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 68rpx;
|
||||
|
||||
.u-abso {
|
||||
bottom: 84rpx;
|
||||
left: 28rpx;
|
||||
right: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
308
pageInvoicing/index/index.vue
Normal file
308
pageInvoicing/index/index.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view class="mask position-all" v-if="maskShow" @tap="hideTop"></view>
|
||||
<view class="u-font-28 color-333 min-page bg-gray">
|
||||
<view class="top u-fixed">
|
||||
<view class="u-flex menus u-m-t-50 u-row-between">
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center" @tap="toPage(item.page)"
|
||||
v-for="(item,index) in menus.list" :key="index">
|
||||
<image :src="item.icon" class="menus-icon" mode=""></image>
|
||||
<view class="u-font-28 color-333 u-m-t-16">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class=" u-relative u-m-t-22 u-p-b-22">
|
||||
<view class="u-flex u-row-between u-p-30 u-relative">
|
||||
<view class="u-flex" @tap="showStatusToggle">
|
||||
<text class="u-m-r-12">货品类别</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view style="width: 486rpx;"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch"
|
||||
:style="{width:search.show?'694rpx':'486rpx'}">
|
||||
<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="搜索货品ID/货品编码" /></view>
|
||||
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="{height:status.show?statusHeight:0}" class="tranistion status overflow-hide">
|
||||
<view @tap="changeStatusActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in status.list" :key="index">
|
||||
<view>{{item}}</view>
|
||||
<uni-icons v-if="status.active===index" type="checkmarkempty"
|
||||
:color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: status.bottomHeight+'px'}"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list" :style="{'padding-top':topHeight+'px'}">
|
||||
<template v-if="product.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in product.list" :key="index">
|
||||
<product-item @more="moreShow"></product-item>
|
||||
</view>
|
||||
<view style="height: 200rpx;"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="亲，你还没有类别哦~"></my-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-fixed bottom bg-fff ">
|
||||
<view class="u-flex u-abso">
|
||||
<view class="u-flex-1">
|
||||
<my-button @tap="addProduct" bgColor="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain
|
||||
type="primary">添加货品</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="ruKu">入库</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<my-action-sheet @itemClick="sheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import color from '@/commons/color.js';
|
||||
import myEmpty from '../components/empty.vue';
|
||||
import productItem from './components/product-item.vue';
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import myActionSheet from '@/components/my-components/my-action-sheet';
|
||||
import {$getStockOperate} from '@/http/yskApi/invoicing.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import {
|
||||
reactive,
|
||||
computed,
|
||||
ref
|
||||
} from 'vue';
|
||||
function addProduct(){
|
||||
go.to('PAGES_CATEGORY_MAN_ADD_PRO')
|
||||
}
|
||||
function ruKu(){
|
||||
go.to('PAGES_CATEGORY_MAN_RUKU')
|
||||
}
|
||||
let refMoreSheet = ref(null)
|
||||
const actionSheet = reactive({
|
||||
list: ['编辑', '清点', '入库', '出库', '删除']
|
||||
})
|
||||
|
||||
function moreShow() {
|
||||
console.log(refMoreSheet.value);
|
||||
refMoreSheet.value.open()
|
||||
}
|
||||
function sheetClick(index){
|
||||
console.log(index);
|
||||
}
|
||||
const product = reactive({
|
||||
list: new Array(1).fill(1)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let topHeight = ref(155)
|
||||
|
||||
const maskShow = computed(() => {
|
||||
return status.show || search.show
|
||||
})
|
||||
|
||||
function hideTop() {
|
||||
status.show = false
|
||||
search.show = false
|
||||
}
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
status.show = false
|
||||
}
|
||||
|
||||
const status = reactive({
|
||||
list: ['全部', '未分类'],
|
||||
active: 0,
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
const statusHeight = computed(() => {
|
||||
return 30 * status.list.length + status.bottomHeight + 'px'
|
||||
})
|
||||
|
||||
function changeStatusActive(i) {
|
||||
status.active = i
|
||||
status.show = false
|
||||
}
|
||||
|
||||
function showStatusToggle() {
|
||||
status.show = !status.show
|
||||
}
|
||||
|
||||
let allHeight = ref(0)
|
||||
|
||||
function getTop() {
|
||||
let selectorQuery = uni.createSelectorQuery();
|
||||
selectorQuery.select('.top').boundingClientRect((rects) => {
|
||||
console.log(rects);
|
||||
topHeight.value = rects.height
|
||||
}).exec()
|
||||
}
|
||||
|
||||
|
||||
onReady(() => {
|
||||
getTop()
|
||||
})
|
||||
|
||||
|
||||
|
||||
const menus = reactive({
|
||||
list: [{
|
||||
icon: '/pageInvoicing/static/images/icon-in.svg',
|
||||
name: '入库记录',
|
||||
page: 'PAGES_STORAGE_RECORD'
|
||||
},
|
||||
{
|
||||
icon: '/pageInvoicing/static/images/icon-out.svg',
|
||||
name: '出库记录',
|
||||
page: 'PAGES_OUTBOUND_RECORD'
|
||||
},
|
||||
{
|
||||
icon: '/pageInvoicing/static/images/icon-order.svg',
|
||||
name: '清点记录',
|
||||
page: 'PAGES_INVENTORY_RECORD'
|
||||
},
|
||||
{
|
||||
icon: '/pageInvoicing/static/images/icon-category.svg',
|
||||
name: '类别管理',
|
||||
page: 'PAGES_CATEGORY_MAN'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
function toPage(page) {
|
||||
go.to(page)
|
||||
}
|
||||
onLoad(()=>{
|
||||
$getStockOperate({
|
||||
page:0,
|
||||
size:10,
|
||||
createdAt:[]
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.top {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
/* #ifdef H5 */
|
||||
top: 44px;
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
|
||||
/* #endif */
|
||||
.menus {
|
||||
padding: 0 44rpx;
|
||||
}
|
||||
|
||||
.lh30 {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.menus-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.icon-arrow-down-fill {
|
||||
width: 16rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 68rpx;
|
||||
|
||||
.u-abso {
|
||||
bottom: 84rpx;
|
||||
left: 28rpx;
|
||||
right: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
pageInvoicing/inventory-records/components/list-item.vue
Normal file
163
pageInvoicing/inventory-records/components/list-item.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
|
||||
<view class="item bg-fff border-r-12 u-m-t-20">
|
||||
<view class="u-flex u-row-between border-bottom u-p-b-30">
|
||||
<view class="">2024-07-24 14:23:09</view>
|
||||
<view class="">东风</view>
|
||||
</view>
|
||||
<view class="u-flex u-text-left u-row-left u-m-t-30">
|
||||
<view class="name">名称</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:1234
|
||||
</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 class="u-flex">
|
||||
<view class="title-min-width">货品编码</view>
|
||||
<text class="u-m-l-10 ">12</text>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-relative u-flex">
|
||||
<view class="title-min-width">库存</view>
|
||||
<text class="u-m-l-10">2</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">3</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="title-min-width">剩余库存</view>
|
||||
<text class="u-m-l-10 color-main">2</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<view class="color-main font-bold">+22</view>
|
||||
<view class="u-m-t-10">清点数量</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info u-flex u-p-l-24 u-m-t-24 u-row-between" >
|
||||
<view class="u-flex u-text-right">
|
||||
<view class="title-min-width">备注</view>
|
||||
<text class="u-m-l-10 color-999">2</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="u-flex u-m-t-24 u-row-center">
|
||||
<view class="u-flex" @tap="toggleRemark">
|
||||
<view class="u-m-r-10 color-666">手动出库明细</view>
|
||||
<view class="icon-down tranistion-1" :class="{'icon-up':state.showRemark}">
|
||||
<uni-icons type="right" size="16" color="#666"></uni-icons>
|
||||
</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="删除">
|
||||
<view class="u-p-l-30 u-p-r-30 color-333">
|
||||
删除
|
||||
</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'
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
|
||||
function retract() {
|
||||
console.log('retract');
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该记录?删除后，将恢复改动前的数量',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['more'])
|
||||
|
||||
function more() {
|
||||
emits('more', props.index)
|
||||
}
|
||||
|
||||
let state = reactive({
|
||||
showRemark: false
|
||||
})
|
||||
|
||||
function toggleRemark() {
|
||||
state.showRemark = !state.showRemark
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item {
|
||||
padding: 32rpx 32rpx 28rpx 28rpx;
|
||||
|
||||
.title-min-width {
|
||||
min-width: 132rpx;
|
||||
}
|
||||
|
||||
.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%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.icon-up {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
265
pageInvoicing/inventory-records/inventory-records.vue
Normal file
265
pageInvoicing/inventory-records/inventory-records.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<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">筛选时间</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 486rpx;"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch"
|
||||
:style="{width:search.show?'694rpx':'486rpx'}">
|
||||
<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="搜索货品ID/名称/编码" /></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}}</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">0</view>
|
||||
</view>
|
||||
<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">0</view>
|
||||
</view>
|
||||
<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">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="page.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
|
||||
<list-item></list-item>
|
||||
</view>
|
||||
<uni-load-more :status="page.status" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="暂无出库记录"></my-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 myEmpty from '../components/empty';
|
||||
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
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
types.show=false
|
||||
maskShow()
|
||||
}
|
||||
|
||||
const page=reactive({
|
||||
list:[1,2],
|
||||
status:'noMore'
|
||||
})
|
||||
|
||||
|
||||
const types = reactive({
|
||||
list: ['全部', '未分类'],
|
||||
active: 0,
|
||||
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()
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function clearTime() {
|
||||
filters.time.start = ''
|
||||
filters.time.end = ''
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
onLoad(opt => {
|
||||
})
|
||||
</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>
|
||||
168
pageInvoicing/outbound-record/components/list-item.vue
Normal file
168
pageInvoicing/outbound-record/components/list-item.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="font-bold color-333">2024-07-24 14:23:09</view>
|
||||
<view class="item bg-fff border-r-12 u-m-t-20">
|
||||
|
||||
<view class="u-flex u-text-left border-bottom u-p-b-30">
|
||||
<view class="">手动出库</view>
|
||||
<view class="u-m-l-10 u-m-r-10">|</view>
|
||||
<view class="">东风</view>
|
||||
</view>
|
||||
<view class="u-flex u-text-left u-row-left u-m-t-30">
|
||||
<view class="name">名称</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:1234
|
||||
</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 class="u-flex">
|
||||
<view class="title-min-width">使用量</view>
|
||||
<text class="u-m-l-10 color-red">12</text>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="title-min-width">成本</view>
|
||||
<text class="u-m-l-10">1.00元</text>
|
||||
</view>
|
||||
<!-- <view class="u-m-t-10 u-relative">
|
||||
<text>库存</text>
|
||||
<text class="u-m-l-10">2</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">3</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="title-min-width">剩余库存</view>
|
||||
<text class="u-m-l-10 color-main">2</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<!-- <view class="color-main font-bold">+22</view> -->
|
||||
<!-- <view class="u-m-t-10">剩余库存</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between" v-if="state.showRemark">
|
||||
<view class="u-flex u-text-right">
|
||||
<view class="title-min-width">出库备注</view>
|
||||
<text class="u-m-l-10 color-999">2</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24 u-row-center" >
|
||||
<view class="u-flex" @tap="toggleRemark">
|
||||
<view class="u-m-r-10 color-666">手动出库明细</view>
|
||||
<view class="icon-down tranistion-1" :class="{'icon-up':state.showRemark}">
|
||||
<uni-icons type="right" size="16" color="#666"></uni-icons>
|
||||
</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="retract">
|
||||
撤回操作
|
||||
</my-button>
|
||||
</view>
|
||||
<!-- <view class="u-flex">
|
||||
<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
|
||||
</view> -->
|
||||
</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'
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
|
||||
function retract() {
|
||||
console.log('retract');
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定撤回此该出库?撤回后，将恢复改动前的数量',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['more'])
|
||||
|
||||
function more() {
|
||||
emits('more', props.index)
|
||||
}
|
||||
|
||||
let state = reactive({
|
||||
showRemark:false
|
||||
})
|
||||
function toggleRemark(){
|
||||
state.showRemark=!state.showRemark
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item {
|
||||
padding: 32rpx 32rpx 28rpx 28rpx;
|
||||
|
||||
.title-min-width {
|
||||
min-width: 132rpx;
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.icon-up{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
280
pageInvoicing/outbound-record/outbound-record.vue
Normal file
280
pageInvoicing/outbound-record/outbound-record.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<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">筛选时间</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">货品类别</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}}</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">0</view>
|
||||
</view>
|
||||
<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">0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<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">0</view>
|
||||
</view>
|
||||
<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">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="page.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
|
||||
<list-item></list-item>
|
||||
</view>
|
||||
<uni-load-more :status="page.status" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="暂无出库记录"></my-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 myEmpty from '../components/empty';
|
||||
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
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
types.show=false
|
||||
maskShow()
|
||||
}
|
||||
|
||||
const page=reactive({
|
||||
list:[1,2],
|
||||
status:'noMore'
|
||||
})
|
||||
|
||||
|
||||
const types = reactive({
|
||||
list: ['全部', '未分类'],
|
||||
active: 0,
|
||||
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
|
||||
if(types.show){
|
||||
maskShow()
|
||||
}else{
|
||||
maskHide()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function clearTime() {
|
||||
filters.time.start = ''
|
||||
filters.time.end = ''
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
onLoad(opt => {
|
||||
})
|
||||
</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>
|
||||
1
pageInvoicing/static/images/icon-arrow-down-fill.svg
Normal file
1
pageInvoicing/static/images/icon-arrow-down-fill.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="8.42" height="4.945" viewBox="0 0 8.42 4.945"><defs><style>.a{fill:#333;}</style></defs><path class="a" d="M230.634,368.187a.7.7,0,0,0-.513-.187l-7,.047a.7.7,0,0,0-.513.187.676.676,0,0,0,0,.979l3.5,3.5c.047.047.14.093.187.14l.047.047a.731.731,0,0,0,.746-.14l3.5-3.546A.735.735,0,0,0,230.634,368.187Z" transform="translate(-222.4 -368)"/></svg>
|
||||
|
After Width: | Height: | Size: 390 B |
1
pageInvoicing/static/images/icon-category.svg
Normal file
1
pageInvoicing/static/images/icon-category.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#23c46f;stroke:#707070;}.b{clip-path:url(#a);}.c{fill:#ee936b;}</style><clipPath id="a"><rect class="a" width="32" height="32" transform="translate(313 104)"/></clipPath></defs><g class="b" transform="translate(-313 -104)"><g transform="translate(180.216 10.146)"><path class="c" d="M593.867,105.8a1.049,1.049,0,0,1-.717-.28l-8.5-8.39a1.068,1.068,0,0,1,1.439-1.579l8.492,8.39a1.065,1.065,0,0,1,.07,1.509A1.054,1.054,0,0,1,593.867,105.8Z" transform="translate(-432.612 0)"/><path class="c" d="M317.357,124.955h-5.7a2.492,2.492,0,0,1-2.489-2.489v-5.7a1.068,1.068,0,1,1,2.135,0v5.692a.358.358,0,0,0,.357.357h5.692a1.069,1.069,0,0,1,0,2.139Zm-4.985,12.8h-12.8a1.068,1.068,0,0,1,0-2.135h12.8a1.068,1.068,0,1,1,0,2.135Zm0-6.4h-12.8a1.068,1.068,0,0,1,0-2.135h12.8a1.068,1.068,0,1,1,0,2.135Z" transform="translate(-156.812 -19.715)"/><path class="c" d="M159.827,124.662H138.489A2.49,2.49,0,0,1,136,122.173V97.989a2.49,2.49,0,0,1,2.489-2.489h14.268a1.068,1.068,0,0,1,0,2.135H138.489a.354.354,0,0,0-.357.357v24.184a.354.354,0,0,0,.357.357h21.338a.354.354,0,0,0,.357-.357V105.091a1.068,1.068,0,1,1,2.135,0v17.082A2.49,2.49,0,0,1,159.827,124.662Z" transform="translate(0 -0.223)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
pageInvoicing/static/images/icon-empty.svg
Normal file
1
pageInvoicing/static/images/icon-empty.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="162.885" height="167.944" viewBox="0 0 162.885 167.944"><defs><style>.a,.b,.c{fill:#4a68cc;}.a{opacity:0.1;}.b{opacity:0.5;}.c{opacity:0.2;}</style></defs><g transform="translate(-102.4 -97.28)"><path class="a" d="M102.4,854.917c0,5.587,36.237,10.117,80.937,10.117s80.937-4.53,80.937-10.117S228.037,844.8,183.337,844.8,102.4,849.33,102.4,854.917Z" transform="translate(0 -599.811)"/><path class="b" d="M116.736,152.519a3.035,3.035,0,1,0,3.035-3.035A3.112,3.112,0,0,0,116.736,152.519ZM276.788,242.46c-3.844,1.012-4.654,1.821-5.564,5.564-1.012-3.844-1.821-4.654-5.564-5.564,3.743-1.012,4.654-1.821,5.564-5.564C272.134,240.639,272.944,241.55,276.788,242.46ZM133.632,141.9c-4.957,1.315-5.969,2.327-7.284,7.284-1.315-4.957-2.327-5.969-7.284-7.284,4.957-1.315,5.969-2.428,7.284-7.284C127.561,139.569,128.674,140.581,133.632,141.9Zm121.4-17.4c-3.035.809-3.642,1.416-4.452,4.452-.809-3.035-1.416-3.642-4.452-4.452,3.035-.809,3.642-1.416,4.452-4.452C251.293,123.079,252,123.686,255.036,124.495Zm13.051-15.58c-7.891,2.023-9.51,3.743-11.635,11.635-2.023-7.891-3.743-9.51-11.635-11.635,7.891-2.023,9.51-3.743,11.635-11.635C258.476,105.07,260.2,106.79,268.087,108.915Z" transform="translate(-11.503)"/><path class="c" d="M419.84,679.117v.809l6.677,6.171,25.6-12.444-23.168,14.872v7.284l3.743-3.642v0l3.743,3.642,19.829-24.281v-.809Z" transform="translate(-254.714 -460.129)"/><path class="b" d="M301.843,252.852v-.2c0-.2-.1-.3-.1-.506v-.1L279.99,195.286A23.264,23.264,0,0,0,257.834,179.2H208.361A23.264,23.264,0,0,0,186.2,195.286l-21.752,56.757v.1a.912.912,0,0,0-.1.506v40.873a23.273,23.273,0,0,0,23.269,23.269h91.054a23.273,23.273,0,0,0,23.269-23.269V253.055C301.843,252.953,301.843,252.953,301.843,252.852ZM191.87,197.411a.1.1,0,0,1,.1-.1,17.027,17.027,0,0,1,16.39-12.039h49.371a17.279,17.279,0,0,1,16.491,11.938.1.1,0,0,0,.1.1l20.133,52.609H248.223a2.981,2.981,0,0,0-3.035,3.035,12.14,12.14,0,1,1-24.281,0,2.981,2.981,0,0,0-3.035-3.035H171.737Zm103.9,96.112a17.185,17.185,0,0,1-17.2,17.2H187.52a17.185,17.185,0,0,1-17.2-17.2V256.09H215.14a18.153,18.153,0,0,0,35.814,0h44.819Z" transform="translate(-49.71 -65.733)"/><path class="c" d="M304.531,311.521a5.009,5.009,0,0,1-5.059-5.059V296.345H253.44l16.592-43.3.1-.2a10.2,10.2,0,0,1,9.712-7.082h49.371a10.2,10.2,0,0,1,9.712,7.082l.1.2,16.592,43.3H309.59v10.117a5.009,5.009,0,0,1-5.059,5.059Z" transform="translate(-121.195 -119.141)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
1
pageInvoicing/static/images/icon-in.svg
Normal file
1
pageInvoicing/static/images/icon-in.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#fff;stroke:#707070;}.b{clip-path:url(#a);}.c{fill:#07b485;}</style><clipPath id="a"><rect class="a" width="32" height="32" transform="translate(30 104)"/></clipPath></defs><g class="b" transform="translate(-30 -104)"><path class="c" d="M4.11,9.558.222,5.4A.833.833,0,0,1,.25,4.24l4.081-4A.829.829,0,0,1,5.492,1.421L2.778,4.082h8.049a.828.828,0,1,1,0,1.656H2.809L5.324,8.427a.831.831,0,0,1-.605,1.4A.836.836,0,0,1,4.11,9.558Z" transform="translate(40.452 121.625)"/><path class="c" d="M30.688,13.774,16.419.382a1.154,1.154,0,0,0-1.386,0L.764,13.774a.9.9,0,1,0,1.229,1.307l.4-.377V26.464a4.21,4.21,0,0,0,4.211,4.2H24.846a4.211,4.211,0,0,0,4.211-4.2V23.531a.9.9,0,1,0-1.793,0v2.933a2.415,2.415,0,0,1-2.419,2.405H6.605a2.414,2.414,0,0,1-2.418-2.405V13.02L15.725,2.19,27.263,13.02v5.235a.9.9,0,1,0,1.793,0V14.705l.4.377a.9.9,0,1,0,1.229-1.307" transform="translate(30.275 104.594)"/><rect class="c" width="9.012" height="1.971" rx="0.986" transform="translate(41.324 114.728)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
pageInvoicing/static/images/icon-order.svg
Normal file
1
pageInvoicing/static/images/icon-order.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#db43a8;stroke:#707070;}.b{clip-path:url(#a);}.c{fill:#579efc;}</style><clipPath id="a"><rect class="a" width="32" height="32" transform="translate(219 104)"/></clipPath></defs><g class="b" transform="translate(-219 -104)"><g transform="translate(219.084 106.59)"><path class="c" d="M13.907,26.775H4.646a1.026,1.026,0,0,1-1.023-1.023V3.1A1.008,1.008,0,0,1,4.646,2.074H25.227A1.017,1.017,0,0,1,26.25,3.1v9.261a1.023,1.023,0,1,0,2.045,0V2.059A2.059,2.059,0,0,0,26.236,0H3.594a2.059,2.059,0,0,0-2.06,2.06v24.7a2.059,2.059,0,0,0,2.06,2.06h10.3A1.027,1.027,0,0,0,14.915,27.8a1,1,0,0,0-1.008-1.023Zm15.987.187-2.679-2.679a.77.77,0,0,0-.619-.2A.968.968,0,0,0,25.573,25.1a.77.77,0,0,0,.2.619L28.454,28.4a1.089,1.089,0,0,0,.821.418A.968.968,0,0,0,30.3,27.8a1.375,1.375,0,0,0-.4-.835Z" transform="translate(0)"/><path class="c" d="M152.658,227.734a6.179,6.179,0,1,0,6.179,6.179,6.178,6.178,0,0,0-6.179-6.179Zm0,10.3A4.142,4.142,0,0,1,149.014,236a4.122,4.122,0,1,1,7.677-2.088,4.148,4.148,0,0,1-4.033,4.119Zm1.037-16.448H137.189a1.011,1.011,0,0,1-1.008-1.008v-.029a1.011,1.011,0,0,1,1.008-1.008H153.7a1.011,1.011,0,0,1,1.008,1.008v.029a1,1,0,0,1-1.008,1.008Zm-.058,4.119H137.132a1.011,1.011,0,0,1-1.008-1.008v-.029a1.011,1.011,0,0,1,1.008-1.008h16.506a1.011,1.011,0,0,1,1.008,1.008v.029A1.021,1.021,0,0,1,153.637,225.7Zm-10.24,4.1h-6.208a1.011,1.011,0,0,1-1.008-1.008v-.029a1.011,1.011,0,0,1,1.008-1.008H143.4a1.011,1.011,0,0,1,1.008,1.008v.029A1,1,0,0,1,143.4,229.808Z" transform="translate(-130.801 -213.36)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
pageInvoicing/static/images/icon-out.svg
Normal file
1
pageInvoicing/static/images/icon-out.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#fff;stroke:#707070;}.b{clip-path:url(#a);}.c{fill:#ff9f2e;}</style><clipPath id="a"><rect class="a" width="32" height="32" transform="translate(124 104)"/></clipPath></defs><g class="b" transform="translate(-124 -104)"><path class="c" d="M30.688,13.774,16.419.382a1.154,1.154,0,0,0-1.386,0L.764,13.774a.9.9,0,1,0,1.229,1.307l.4-.377V26.464a4.21,4.21,0,0,0,4.211,4.2H24.846a4.211,4.211,0,0,0,4.211-4.2V23.531a.9.9,0,1,0-1.793,0v2.933a2.415,2.415,0,0,1-2.419,2.405H6.605a2.414,2.414,0,0,1-2.418-2.405V13.02L15.725,2.19,27.263,13.02v5.235a.9.9,0,1,0,1.793,0V14.705l.4.377a.9.9,0,1,0,1.229-1.307" transform="translate(124.275 104.594)"/><path class="c" d="M285.37,441.4a.894.894,0,0,1,1.264,0l3.689,3.691a.894.894,0,0,1,.193.971.881.881,0,0,1-.862.74h-12.37a.894.894,0,1,1,0-1.788h10.433l-2.348-2.348a.894.894,0,0,1,0-1.264" transform="translate(-143.488 -320.57)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1020 B |
1
pageInvoicing/static/images/icon-saoma.svg
Normal file
1
pageInvoicing/static/images/icon-saoma.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="17.196" height="15.968" viewBox="0 0 17.196 15.968"><defs><style>.a{fill:#318afe;}</style></defs><g transform="translate(0 0)"><path class="a" d="M80.571,481.147H64.6a.614.614,0,0,1,0-1.228H80.571a.614.614,0,0,1,0,1.228Z" transform="translate(-63.989 -472.551)"/><path class="a" d="M612.2,645.591h-3.687a.614.614,0,0,1,0-1.228H612.2a.613.613,0,0,0,.614-.614v-3.07a.614.614,0,0,1,1.228,0v3.07A1.842,1.842,0,0,1,612.2,645.591Z" transform="translate(-597.46 -629.623)"/><path class="a" d="M100.9,645.591h-3.07a1.843,1.843,0,0,1-1.842-1.842v-3.07a.614.614,0,1,1,1.228,0v3.07a.615.615,0,0,0,.614.614h3.07a.614.614,0,1,1,0,1.228Z" transform="translate(-95.37 -629.623)"/><path class="a" d="M96.6,101.51a.613.613,0,0,1-.614-.614v-3.07a1.843,1.843,0,0,1,1.842-1.842h3.07a.614.614,0,1,1,0,1.228h-3.07a.617.617,0,0,0-.614.614v3.07A.613.613,0,0,1,96.6,101.51Z" transform="translate(-95.37 -95.983)"/><path class="a" d="M613.428,101.51a.613.613,0,0,1-.614-.614v-3.07a.615.615,0,0,0-.614-.614h-3.687a.614.614,0,0,1,0-1.228H612.2a1.843,1.843,0,0,1,1.842,1.842v3.07A.608.608,0,0,1,613.428,101.51Z" transform="translate(-597.46 -95.984)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
122
pageInvoicing/storage-record/components/list-item.vue
Normal file
122
pageInvoicing/storage-record/components/list-item.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<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="">2024-07-24 14:23:09</view>
|
||||
<view class="">东风</view>
|
||||
</view>
|
||||
<view class="u-flex u-text-left u-row-left u-m-t-30">
|
||||
<view class="name">名称</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:1234
|
||||
</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-m-t-10 u-relative">
|
||||
<text>库存</text>
|
||||
<text class="u-m-l-10">2</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">3</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<text>剩余库存</text>
|
||||
<text class="u-m-l-10 color-main">2</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<view class="color-main font-bold">+22</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">
|
||||
.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>
|
||||
266
pageInvoicing/storage-record/storage-record.vue
Normal file
266
pageInvoicing/storage-record/storage-record.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<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">筛选时间</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">货品类别</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}}</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">0</view>
|
||||
</view>
|
||||
<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">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="page.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
|
||||
<list-item></list-item>
|
||||
</view>
|
||||
<uni-load-more :status="page.status" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="暂无入库记录"></my-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 myEmpty from '../components/empty';
|
||||
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
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
types.show=false
|
||||
maskShow()
|
||||
}
|
||||
|
||||
const page=reactive({
|
||||
list:[1,2],
|
||||
status:'noMore'
|
||||
})
|
||||
|
||||
|
||||
const types = reactive({
|
||||
list: ['全部', '未分类'],
|
||||
active: 0,
|
||||
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()
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function clearTime() {
|
||||
filters.time.start = ''
|
||||
filters.time.end = ''
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
onLoad(opt => {
|
||||
})
|
||||
</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>
|
||||
210
pageInvoicing/type-record/type-record.vue
Normal file
210
pageInvoicing/type-record/type-record.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28">
|
||||
<view class="fixed-top bg-fff 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">筛选时间</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="toggleMask">
|
||||
<text class="u-m-r-12">类型</text>
|
||||
<image src="/pageInvoicing/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</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}}</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>入库数量（2）</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>出库数量（2）</view>
|
||||
<view class="u-font-32 u-m-t-10 font-bold">0</view>
|
||||
</view>
|
||||
<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">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="page.list.length">
|
||||
<view class="u-m-b-28 u-m-t-28" v-for="(item,index) in page.list" :key="index">
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="" style="margin-top: 150rpx;">
|
||||
<my-empty tips="亲，你还没有记录哦~"></my-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 myEmpty from '../components/empty.vue';
|
||||
import myMask from '@/components/my-components/my-mask'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
|
||||
const page=reactive({
|
||||
list:[]
|
||||
})
|
||||
|
||||
|
||||
const types = reactive({
|
||||
list: ['全部', '入库', '出库', '清点'],
|
||||
active: 0,
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
|
||||
function hideType() {
|
||||
types.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
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function clearTime() {
|
||||
filters.time = ''
|
||||
filters.end = ''
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
|
||||
const mask = ref(null)
|
||||
|
||||
function toggleMask(show) {
|
||||
types.show = !types.show
|
||||
mask.value.toggle()
|
||||
}
|
||||
|
||||
onLoad(opt => {
|
||||
console.log(opt);
|
||||
uni.setNavigationBarTitle({
|
||||
title: opt.title || ''
|
||||
})
|
||||
})
|
||||
</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%);
|
||||
}
|
||||
}
|
||||
|
||||
.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