207 lines
4.8 KiB
Vue
207 lines
4.8 KiB
Vue
<script setup lang="ts">
|
||
import {ref} from 'vue'
|
||
import { formatDate } from '../../utils/date';
|
||
|
||
const form = ref({data:formatDate(new Date()),list:[{}]} as any)
|
||
const show = ref(false)
|
||
const onSubmit = () =>{
|
||
|
||
}
|
||
|
||
const onClickLeft = () =>{
|
||
uni.navigateBack()
|
||
}
|
||
const onClickRight=()=>{
|
||
}
|
||
const chooseDate = ()=>{
|
||
show.value=true
|
||
}
|
||
const onConfirmDate = (val:any) =>{
|
||
form.value.data = formatDate(val)
|
||
show.value = false
|
||
}
|
||
const h5ScanCode = ref(false);
|
||
function scanCode() {
|
||
// #ifdef H5
|
||
h5ScanCode.value = true;
|
||
// #endif
|
||
// #ifndef H5
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: res.result,
|
||
});
|
||
|
||
// TODO
|
||
},
|
||
faile: (err) => {
|
||
console.log("err", err);
|
||
},
|
||
});
|
||
// #endif
|
||
}
|
||
function handleSuccess(res) {
|
||
h5ScanCode.value = false;
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: res,
|
||
});
|
||
}
|
||
function handleFail(err) {
|
||
uni.showModal({
|
||
title: err.errName,
|
||
content: err.errMsg,
|
||
complete: () => {
|
||
h5ScanCode.value = false;
|
||
},
|
||
});
|
||
}
|
||
function handleClose() {
|
||
h5ScanCode.value = false;
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<view class="flex">
|
||
<van-nav-bar
|
||
title="白胚入库"
|
||
left-text="返回"
|
||
left-arrow
|
||
right-text="新增"
|
||
@click-left="onClickLeft"
|
||
@click-right="onClickRight"
|
||
/>
|
||
<van-form @submit="onSubmit">
|
||
<van-cell-group inset>
|
||
<van-field
|
||
v-model="form.data"
|
||
name="入库日期"
|
||
label="入库日期"
|
||
colon
|
||
class="bor"
|
||
label-width="5em"
|
||
readonly
|
||
@click="chooseDate()"
|
||
:rules="[{ required: true, message: '请填写' }]"
|
||
/>
|
||
<van-field
|
||
v-model="form.gys"
|
||
name="供应商名"
|
||
label="供应商名"
|
||
colon
|
||
class="bor"
|
||
label-width="5em"
|
||
readonly
|
||
:rules="[{ required: true, message: '请填写' }]"
|
||
/>
|
||
<van-field
|
||
v-model="form.mlmc"
|
||
name="面料名称"
|
||
label="面料名称"
|
||
colon
|
||
class="bor"
|
||
label-width="5em"
|
||
readonly
|
||
:rules="[{ required: true, message: '请填写' }]"
|
||
/>
|
||
<view class="content">
|
||
<template v-for="(item,index) in form.list" :key="index">
|
||
<van-field
|
||
v-model="item.bpdj"
|
||
name="白胚等级"
|
||
label="白胚等级"
|
||
colon
|
||
class="bor"
|
||
label-width="5em"
|
||
readonly
|
||
:rules="[{ required: true, message: '请填写' }]"
|
||
>
|
||
<template #button>
|
||
<van-icon name="add" color="red" size="25" @click="form.list.push([])" v-if="index===0"/>
|
||
<van-icon name="clear" color="red" size="25" @click="form.list.splice(index,1)" v-else/>
|
||
</template>
|
||
</van-field>
|
||
<view class="grid-container">
|
||
<view class="grid-item">面料编号</view>
|
||
<view class="grid-item">米数</view>
|
||
<view class="grid-item">操作</view>
|
||
</view>
|
||
<view class="grid-container" v-for="(itemSecond,indexSecond) in item.list" :key="indexSecond">
|
||
<view class="grid-item">面料编号</view>
|
||
<view class="grid-item">米数</view>
|
||
<view class="grid-item">操作</view>
|
||
</view>
|
||
<view class="grid-container">
|
||
<view class="grid-item">
|
||
<van-button type="primary" @click="scanCode">扫一扫</van-button>
|
||
<cshaptx4869-scancode
|
||
v-if="h5ScanCode"
|
||
@success="handleSuccess"
|
||
@fail="handleFail"
|
||
@close="handleClose"
|
||
></cshaptx4869-scancode>
|
||
</view>
|
||
<view class="grid-item"></view>
|
||
<view class="grid-item"></view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</van-cell-group>
|
||
<view style="margin: 16px;">
|
||
<van-button round block type="primary" native-type="submit">
|
||
提交
|
||
</van-button>
|
||
</view>
|
||
</van-form>
|
||
<view class="floot">
|
||
<view style="display: flex;align-items: center;justify-content: space-around;">
|
||
<p>总匹数：2 匹</p>
|
||
<p>总匹数：2 匹</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<van-calendar v-model:show="show" @confirm="onConfirmDate" :min-date="new Date(2010, 0, 1)" :max-date="new Date(2050, 0, 31)"/>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.flex{
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
.van-nav-bar{
|
||
width: 100%;
|
||
}
|
||
.content{
|
||
flex: 1;
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: 2fr 2fr 1fr;
|
||
.grid-item{
|
||
border: 1px solid #f2f2f2;
|
||
text-align: center;
|
||
::v-deep .van-cell {
|
||
padding: 0 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .van-field {
|
||
font-size: 16px;
|
||
}
|
||
.bor{
|
||
::v-deep .van-field__control {
|
||
border: 1px solid #d7d7d7;
|
||
text-align: center;
|
||
}
|
||
}
|
||
::v-deep .van-button--normal{
|
||
padding: 5px 8px;
|
||
height: 30px;
|
||
}
|
||
</style>
|