新增静态页面
This commit is contained in:
ljx120
parent
082d335b32
commit
879dc8c749
144
package-lock.json
generated
144
package-lock.json
generated
@ -9,9 +9,12 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"pinia": "^2.2.6",
|
||||
"vant": "^4.9.14",
|
||||
"vant": "^4.9.15",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.4.5"
|
||||
"vue-qrcode-reader": "^5.6.0",
|
||||
"vue-router": "^4.4.5",
|
||||
"vue3-qr-reader": "^1.0.0",
|
||||
"vue3-qrcode-reader": "^0.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.0",
|
||||
@ -1553,6 +1556,16 @@
|
||||
"integrity": "sha512-twLQ77zevtxobBOD4ToAtVmuYrpeYUh3qh+TEp+08IWhpsrIflVHqQ1F1CiPxQGL7doCdBIOOCF+1Tm833faNg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/dom-webcodecs": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmmirror.com/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz",
|
||||
"integrity": "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="
|
||||
},
|
||||
"node_modules/@types/emscripten": {
|
||||
"version": "1.39.13",
|
||||
"resolved": "https://registry.npmmirror.com/@types/emscripten/-/emscripten-1.39.13.tgz",
|
||||
"integrity": "sha512-cFq+fO/isvhvmuP/+Sl4K4jtU6E23DoivtbO4r50e3odaxAiVdbfSYRDdJ4gCdxx+3aRjhphS5ZMwIH4hFy/Cw=="
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.6.tgz",
|
||||
@ -2364,6 +2377,15 @@
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/barcode-detector": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/barcode-detector/-/barcode-detector-2.2.2.tgz",
|
||||
"integrity": "sha512-JcSekql+EV93evfzF9zBr+Y6aRfkR+QFvgyzbwQ0dbymZXoAI9+WgT7H1E429f+3RKNncHz2CW98VQtaaKpmfQ==",
|
||||
"dependencies": {
|
||||
"@types/dom-webcodecs": "^0.1.11",
|
||||
"zxing-wasm": "1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/birpc": {
|
||||
"version": "0.2.19",
|
||||
"resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
|
||||
@ -2462,6 +2484,11 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/callforth": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/callforth/-/callforth-0.3.1.tgz",
|
||||
"integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
|
||||
@ -2614,6 +2641,16 @@
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.39.0",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.39.0.tgz",
|
||||
"integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
|
||||
"hasInstallScript": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@ -3945,6 +3982,11 @@
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/jsqr": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/jsqr/-/jsqr-1.4.0.tgz",
|
||||
"integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
|
||||
},
|
||||
"node_modules/keyv": {
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
|
||||
@ -4719,6 +4761,23 @@
|
||||
"integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/rtcpeerconnection-shim": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmmirror.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
|
||||
"integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
|
||||
"dependencies": {
|
||||
"sdp": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0",
|
||||
"npm": ">=3.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rtcpeerconnection-shim/node_modules/sdp": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmmirror.com/sdp/-/sdp-2.12.0.tgz",
|
||||
"integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
|
||||
},
|
||||
"node_modules/run-applescript": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/run-applescript/-/run-applescript-7.0.0.tgz",
|
||||
@ -5160,6 +5219,11 @@
|
||||
"node": ">=v12.22.7"
|
||||
}
|
||||
},
|
||||
"node_modules/sdp": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/sdp/-/sdp-3.2.0.tgz",
|
||||
"integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.3.tgz",
|
||||
@ -5711,10 +5775,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vant": {
|
||||
"version": "4.9.14",
|
||||
"resolved": "https://registry.npmmirror.com/vant/-/vant-4.9.14.tgz",
|
||||
"integrity": "sha512-sWov3CZ6555Mb0y4j7wjR0JIpKhPZwAIYLJT9/4p823uqSdPU96bL7VgJS75cSiATIODz4QGgZrSh6sa15jJGA==",
|
||||
"hasInstallScript": true,
|
||||
"version": "4.9.15",
|
||||
"resolved": "https://registry.npmmirror.com/vant/-/vant-4.9.15.tgz",
|
||||
"integrity": "sha512-XyIAnoGu2P/dc5R2NnjIJgKwfOTTVM2FJW/8WpsZA0FUBL6Lu+KHBaAY/x3IduwbowkaCIUUPViUopI2JSjbug==",
|
||||
"dependencies": {
|
||||
"@vant/popperjs": "^1.3.0",
|
||||
"@vant/use": "^1.6.0",
|
||||
@ -7051,6 +7114,18 @@
|
||||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-qrcode-reader": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-qrcode-reader/-/vue-qrcode-reader-5.6.0.tgz",
|
||||
"integrity": "sha512-uvaJqMRgR/1tt7XWAqaRBQf0mo3gudu5fXqZmtoq+87lvmM4dublJ7StO6ssNO3FaJqssG72hPhXWoBoYWJIeg==",
|
||||
"dependencies": {
|
||||
"barcode-detector": "2.2.2",
|
||||
"webrtc-adapter": "8.2.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
|
||||
@ -7082,6 +7157,43 @@
|
||||
"typescript": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-qr-reader": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue3-qr-reader/-/vue3-qr-reader-1.0.0.tgz",
|
||||
"integrity": "sha512-BRgmR+lDPkNwgL6skSaEOGFg4Aup/FLYnOGFCV0knYHxfbAnliJN/+wr//iqD2G3EOBrXw4TPGNfj/5Wxl7wwQ==",
|
||||
"dependencies": {
|
||||
"jsqr": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-qrcode-reader": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/vue3-qrcode-reader/-/vue3-qrcode-reader-0.0.1.tgz",
|
||||
"integrity": "sha512-rTZRO2WiBrGRT6pYGMkySNMnEwD9sVlzl9kwPxQ4C0n7I4SXVu60eq8ZQHQTMJAbDTTkbuuW/5reSf+TYFJ5pQ==",
|
||||
"dependencies": {
|
||||
"callforth": "^0.3.1",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0",
|
||||
"webrtc-adapter": "7.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-qrcode-reader/node_modules/sdp": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmmirror.com/sdp/-/sdp-2.12.0.tgz",
|
||||
"integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
|
||||
},
|
||||
"node_modules/vue3-qrcode-reader/node_modules/webrtc-adapter": {
|
||||
"version": "7.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
|
||||
"integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
|
||||
"dependencies": {
|
||||
"rtcpeerconnection-shim": "^1.2.15",
|
||||
"sdp": "^2.12.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0",
|
||||
"npm": ">=3.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
|
||||
@ -7112,6 +7224,18 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/webrtc-adapter": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
|
||||
"integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
|
||||
"dependencies": {
|
||||
"sdp": "^3.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0",
|
||||
"npm": ">=3.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/whatwg-encoding": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
|
||||
@ -7339,6 +7463,14 @@
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/zxing-wasm": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/zxing-wasm/-/zxing-wasm-1.1.3.tgz",
|
||||
"integrity": "sha512-MYm9k/5YVs4ZOTIFwlRjfFKD0crhefgbnt1+6TEpmKUDFp3E2uwqGSKwQOd2hOIsta/7Usq4hnpNRYTLoljnfA==",
|
||||
"dependencies": {
|
||||
"@types/emscripten": "^1.39.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,9 +15,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"pinia": "^2.2.6",
|
||||
"vant": "^4.9.14",
|
||||
"vant": "^4.9.15",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.4.5"
|
||||
"vue-qrcode-reader": "^5.6.0",
|
||||
"vue-router": "^4.4.5",
|
||||
"vue3-qr-reader": "^1.0.0",
|
||||
"vue3-qrcode-reader": "^0.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.0",
|
||||
|
||||
189
src/components/BarScan.vue
Normal file
189
src/components/BarScan.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<script setup lang="ts">
|
||||
import { QrcodeStream } from 'vue-qrcode-reader'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
|
||||
const emit = defineEmits(['err','ok'])
|
||||
const result=ref('' as any) // 扫码结果信息
|
||||
const error=ref('' as any) // 错误信
|
||||
const scancode=ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
const onDecode = (res:any) => {
|
||||
if(res!==""){
|
||||
scancode.value=false;
|
||||
result.value=res
|
||||
emit('ok',res)
|
||||
}else{
|
||||
showToast('失败')
|
||||
}
|
||||
}
|
||||
// 检查是否调用摄像头
|
||||
const onInit = async(promise:any)=> {
|
||||
try {
|
||||
await promise
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = (error:any) => {
|
||||
const errorMessages = {
|
||||
NotAllowedError: '您需要授予相机访问权限',
|
||||
NotFoundError: '这个设备上没有摄像头',
|
||||
NotSupportedError: '所需的安全上下文(HTTPS、本地主机)',
|
||||
NotReadableError: '相机被占用',
|
||||
OverconstrainedError: '安装摄像头不合适',
|
||||
StreamApiNotSupportedError: '此浏览器不支持流API',
|
||||
InsecureContextError: '仅允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。',
|
||||
}
|
||||
|
||||
const message = errorMessages[error.name] || 'ERROR: 摄像头错误'
|
||||
showToast(error.name)
|
||||
console.log(message,error.name)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="scan">
|
||||
<qrcode-stream @error="handleError" @decode="onDecode" @init="onInit" style="height: 100vh;">
|
||||
<div>
|
||||
<div class="qr-scanner">
|
||||
<div class="box">
|
||||
<div class="line"></div>
|
||||
<div class="angle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</qrcode-stream>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
}
|
||||
.scan{
|
||||
width: 100vw;
|
||||
border-color: #585858;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.qrcode-stream-camera{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.qr-scanner {
|
||||
background-image:
|
||||
linear-gradient(0deg,
|
||||
transparent 24%,
|
||||
rgba(32, 255, 77, 0.1) 25%,
|
||||
rgba(32, 255, 77, 0.1) 26%,
|
||||
transparent 27%,
|
||||
transparent 74%,
|
||||
rgba(32, 255, 77, 0.1) 75%,
|
||||
rgba(32, 255, 77, 0.1) 76%,
|
||||
transparent 77%,
|
||||
transparent),
|
||||
linear-gradient(90deg,
|
||||
transparent 24%,
|
||||
rgba(32, 255, 77, 0.1) 25%,
|
||||
rgba(32, 255, 77, 0.1) 26%,
|
||||
transparent 27%,
|
||||
transparent 74%,
|
||||
rgba(32, 255, 77, 0.1) 75%,
|
||||
rgba(32, 255, 77, 0.1) 76%,
|
||||
transparent 77%,
|
||||
transparent);
|
||||
background-size: 3rem 3rem;
|
||||
background-position: -1rem -1rem;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
/* background-color: #1110;*/
|
||||
|
||||
/* background-color: #111; */
|
||||
}
|
||||
|
||||
.qr-scanner .box {
|
||||
width: 213px;
|
||||
height: 213px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
border: 0.1rem solid rgba(0, 255, 51, 0.2);
|
||||
/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
|
||||
}
|
||||
|
||||
.qr-scanner .line {
|
||||
height: calc(100% - 2px);
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
|
||||
border-bottom: 3px solid #00ff33;
|
||||
transform: translateY(-100%);
|
||||
animation: radar-beam 2s infinite alternate;
|
||||
animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
|
||||
.qr-scanner .box:after,
|
||||
.qr-scanner .box:before,
|
||||
.qr-scanner .angle:after,
|
||||
.qr-scanner .angle:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 3vw;
|
||||
height: 3vw;
|
||||
|
||||
border: 0.2rem solid transparent;
|
||||
}
|
||||
|
||||
.qr-scanner .box:after,
|
||||
.qr-scanner .box:before {
|
||||
top: 0;
|
||||
border-top-color: #00ff33;
|
||||
}
|
||||
|
||||
.qr-scanner .angle:after,
|
||||
.qr-scanner .angle:before {
|
||||
bottom: 0;
|
||||
border-bottom-color: #00ff33;
|
||||
}
|
||||
|
||||
.qr-scanner .box:before,
|
||||
.qr-scanner .angle:before {
|
||||
left: 0;
|
||||
border-left-color: #00ff33;
|
||||
}
|
||||
|
||||
.qr-scanner .box:after,
|
||||
.qr-scanner .angle:after {
|
||||
right: 0;
|
||||
border-right-color: #00ff33;
|
||||
}
|
||||
|
||||
@keyframes radar-beam {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,41 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,90 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
and
|
||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
||||
>Cypress Component Testing</a
|
||||
>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in <code>README.md</code>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
||||
Discord server, or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also subscribe to
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a>
|
||||
and follow the official
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
twitter account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,47 +11,66 @@ const router = createRouter({
|
||||
children:[
|
||||
{
|
||||
path: '/process',
|
||||
name: 'process',
|
||||
name: '工序项维护',
|
||||
component: () => import('../views/maintenance/m-process.vue'),
|
||||
},
|
||||
{
|
||||
path: '/requirements',
|
||||
name: 'requirements',
|
||||
name: '工艺要求维护',
|
||||
component: () => import('../views/maintenance/m-requirements.vue'),
|
||||
},
|
||||
{
|
||||
path: '/factory',
|
||||
name: 'factory',
|
||||
name: '工厂维护',
|
||||
component: () => import('../views/maintenance/m-factory.vue'),
|
||||
},
|
||||
{
|
||||
path: '/other',
|
||||
name: 'other',
|
||||
name: '其他要求项维护',
|
||||
component: () => import('../views/maintenance/m-other.vue'),
|
||||
},
|
||||
{
|
||||
path: '/quality',
|
||||
name: 'quality',
|
||||
name: '色胚质检项维护',
|
||||
component: () => import('../views/lecher/l-quality.vue'),
|
||||
},
|
||||
{
|
||||
path: '/flaws',
|
||||
name: 'flaws',
|
||||
name: '色胚质检瑕疵维护',
|
||||
component: () => import('../views/lecher/l-flaws.vue'),
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'about',
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
path: '/warehousing',
|
||||
name: '白胚入库',
|
||||
component: () => import('../views/whiteEmbryo/w-warehousing.vue'),
|
||||
},
|
||||
{
|
||||
path: '/detail',
|
||||
name: 'detail',
|
||||
component: () => import('../views/maintenance/p-details.vue'),
|
||||
path: '/level',
|
||||
name: '白胚等级维护',
|
||||
component: () => import('../views/whiteEmbryo/w-level.vue'),
|
||||
},
|
||||
{
|
||||
path: '/suppliers',
|
||||
name: '供应商维护',
|
||||
component: () => import('../views/whiteEmbryo/w-suppliers.vue'),
|
||||
},
|
||||
{
|
||||
path: '/scanCode',
|
||||
name: '扫一扫',
|
||||
component: () => import('../views/whiteEmbryo/scanCode.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/detail',
|
||||
name: 'detail',
|
||||
component: () => import('../views/maintenance/p-details.vue'),
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'about',
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
},
|
||||
{
|
||||
path: "/:catchAll(.*)",
|
||||
name: "404",
|
||||
|
||||
17
src/utils/date.ts
Normal file
17
src/utils/date.ts
Normal file
@ -0,0 +1,17 @@
|
||||
export function formatDate(time:Date|string,separator='-'){
|
||||
time=new Date(time);
|
||||
let year=time.getFullYear(),
|
||||
month=time.getMonth()+ 1,
|
||||
date=time.getDate();
|
||||
return year+separator+(month<10?'0'+month:month)+separator+(date<10?'0'+date:date);
|
||||
}
|
||||
|
||||
//时间格式化
|
||||
export function formatTime(time:Date,separator1='-',seperator2=':'){
|
||||
time=new Date(time);
|
||||
let date=formatDate(time,separator1),
|
||||
hours=time.getHours(),
|
||||
minutes=time.getMinutes(),
|
||||
seconds=time.getSeconds();
|
||||
return date+' '+(hours<10?'0'+hours:hours)+seperator2+(minutes<10?'0'+minutes:minutes)+seperator2+(seconds<10?'0'+seconds:seconds);
|
||||
}
|
||||
@ -5,9 +5,14 @@ import router from '@/router'
|
||||
const ListData =ref([] as any[])
|
||||
|
||||
onMounted(() => {
|
||||
ListData.value=[{name:'工序项维护',url:'/process'},{name:'工艺要求维护',url:'/requirements'},
|
||||
{name:'工厂维护',url:'/factory'},{name:'其他要求项维护',url:'/other'},{name:'色胚质检项维护',url:'/quality'},{name:'色胚质检瑕疵维护',url:'/flaws'}
|
||||
]
|
||||
const rout=router.getRoutes()
|
||||
rout.forEach((l:any)=>{
|
||||
if(l.name==='home'){
|
||||
l.children.forEach((m:any)=>{
|
||||
ListData.value.push({name:m.name,url:m.path})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const gotoLink = (item: any) => {
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import router from '@/router'
|
||||
|
||||
const list = ref([{list:[{}]}] as any[])
|
||||
|
||||
const onClickLeft = () =>{
|
||||
history.back()
|
||||
router.go(-1);
|
||||
}
|
||||
const onClickRight=()=>{
|
||||
list.value.push([])
|
||||
|
||||
59
src/views/whiteEmbryo/scanCode.vue
Normal file
59
src/views/whiteEmbryo/scanCode.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import BarScan from '@/components/BarScan.vue'
|
||||
import { showToast } from 'vant'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
navigator.mediaDevices.enumerateDevices().then((devices) => {
|
||||
devices.forEach((device) => {
|
||||
if (device.kind === "videoinput") {
|
||||
console.log(
|
||||
"Video input device: ",
|
||||
device.label,
|
||||
device.deviceId
|
||||
);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error enumerating devices: ", error);
|
||||
showToast("Error enumerating devices");
|
||||
});
|
||||
})
|
||||
|
||||
const onClickLeft = () =>{
|
||||
history.back()
|
||||
}
|
||||
const onClickRight=()=>{
|
||||
}
|
||||
const getResult = (val:any)=>{
|
||||
console.log(val)
|
||||
}
|
||||
const getError = (val:any)=>{
|
||||
console.log(val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sys">
|
||||
<van-nav-bar
|
||||
title="白胚入库"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
right-text="新增"
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
<BarScan @ok="getResult" @err="getError" ></BarScan>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sys{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
</style>
|
||||
129
src/views/whiteEmbryo/w-level.vue
Normal file
129
src/views/whiteEmbryo/w-level.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
const showPop = ref(false)
|
||||
const list= ref([{}] as any[])
|
||||
const form = ref({list:[{}]} as any)
|
||||
|
||||
const onClickLeft = () =>{
|
||||
history.back()
|
||||
}
|
||||
const onClickRight=()=>{
|
||||
showPop.value=true
|
||||
}
|
||||
const edit = (item:any) =>{
|
||||
console.log(item)
|
||||
showPop.value=true
|
||||
}
|
||||
const submit =()=>{
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<van-nav-bar
|
||||
title="白胚等级维护"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
right-text="新增"
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
<div class="content">
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">编号</div>
|
||||
<div class="grid-item">白胚等级</div>
|
||||
<div class="grid-item">操作</div>
|
||||
</div>
|
||||
<div class="grid-container" v-for="(item,index) in list" :key="index">
|
||||
<div class="grid-item">{{item.name}}</div>
|
||||
<div class="grid-item">{{item.id}}</div>
|
||||
<div
|
||||
class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span> <span
|
||||
style="color: red">删除
|
||||
</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="showPop" style="width: 80%" round>
|
||||
<div>
|
||||
<h3 style="text-align: center">新增</h3>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="form.name"
|
||||
name="白胚等级"
|
||||
label="白胚等级"
|
||||
colon
|
||||
label-width="5em"
|
||||
:rules="[{ required: true, message: '请填写' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div class="a-c">
|
||||
<van-button type="danger" @click="showPop=false">取消</van-button>
|
||||
<van-button type="primary" @click="submit">确认</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
.van-nav-bar{
|
||||
width: 100%;
|
||||
}
|
||||
.content{
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr 2fr;
|
||||
.grid-item{
|
||||
border: 1px solid #f2f2f2;
|
||||
text-align: center;
|
||||
::v-deep(.van-cell){
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card{
|
||||
margin: 10px 15px;
|
||||
padding: 5px;
|
||||
border: 1px solid #02a7f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.a-b{
|
||||
display:flex;
|
||||
margin-bottom:10px;
|
||||
::v-deep(.van-cell){
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
::v-deep(.van-field){
|
||||
font-size: 16px;
|
||||
}
|
||||
::v-deep(.van-field__control){
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
}
|
||||
::v-deep(.van-field__label){
|
||||
text-align: end;
|
||||
}
|
||||
.a-c{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin:15px;
|
||||
::v-deep(.van-button--normal){
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/views/whiteEmbryo/w-suppliers.vue
Normal file
142
src/views/whiteEmbryo/w-suppliers.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
const showPop = ref(false)
|
||||
const list= ref([{}] as any[])
|
||||
const form = ref({list:[{}]} as any)
|
||||
|
||||
const onClickLeft = () =>{
|
||||
history.back()
|
||||
}
|
||||
const onClickRight=()=>{
|
||||
showPop.value=true
|
||||
}
|
||||
const edit = (item:any) =>{
|
||||
console.log(item)
|
||||
showPop.value=true
|
||||
}
|
||||
const submit =()=>{
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<van-nav-bar
|
||||
title="供应商维护"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
right-text="新增"
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
<div class="content">
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">编号</div>
|
||||
<div class="grid-item">供应商名称</div>
|
||||
<div class="grid-item">分数</div>
|
||||
<div class="grid-item">操作</div>
|
||||
</div>
|
||||
<div class="grid-container" v-for="(item,index) in list" :key="index">
|
||||
<div class="grid-item">{{item.name}}</div>
|
||||
<div class="grid-item">{{item.id}}</div>
|
||||
<div class="grid-item">{{item.id}}</div>
|
||||
<div
|
||||
class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span> <span
|
||||
style="color: red">删除
|
||||
</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="showPop" style="width: 80%" round>
|
||||
<div>
|
||||
<h3 style="text-align: center">新增</h3>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="form.name"
|
||||
name="供应商名称"
|
||||
label="供应商名称"
|
||||
colon
|
||||
class="bot"
|
||||
label-width="6em"
|
||||
:rules="[{ required: true, message: '请填写' }]"
|
||||
/>
|
||||
<van-field name="状态" label="状态" colon label-width="6em">
|
||||
<template #input>
|
||||
<van-radio-group v-model="form.type1" direction="horizontal">
|
||||
<van-radio name="1">启用</van-radio>
|
||||
<van-radio name="2">禁用</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<div class="a-c">
|
||||
<van-button type="danger" @click="showPop=false">取消</van-button>
|
||||
<van-button type="primary" @click="submit">确认</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
.van-nav-bar{
|
||||
width: 100%;
|
||||
}
|
||||
.content{
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr 1.5fr 2fr;
|
||||
.grid-item{
|
||||
border: 1px solid #f2f2f2;
|
||||
text-align: center;
|
||||
::v-deep(.van-cell){
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card{
|
||||
margin: 10px 15px;
|
||||
padding: 5px;
|
||||
border: 1px solid #02a7f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.a-b{
|
||||
display:flex;
|
||||
margin-bottom:10px;
|
||||
::v-deep(.van-cell){
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
::v-deep(.van-field){
|
||||
font-size: 16px;
|
||||
}
|
||||
.bot{
|
||||
::v-deep(.van-field__control){
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
}
|
||||
}
|
||||
::v-deep(.van-field__label){
|
||||
text-align: end;
|
||||
}
|
||||
.a-c{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin:15px;
|
||||
::v-deep(.van-button--normal){
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/views/whiteEmbryo/w-warehousing.vue
Normal file
157
src/views/whiteEmbryo/w-warehousing.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import {formatDate} from '@/utils/date.ts'
|
||||
import router from '@/router'
|
||||
|
||||
const form = ref({data:formatDate(new Date()),list:[{}]} as any)
|
||||
const show = ref(false)
|
||||
const onSubmit = () =>{
|
||||
|
||||
}
|
||||
|
||||
const onClickLeft = () =>{
|
||||
router.go(-1);
|
||||
}
|
||||
const onClickRight=()=>{
|
||||
}
|
||||
const chooseDate = ()=>{
|
||||
show.value=true
|
||||
}
|
||||
const onConfirmDate = (val:any) =>{
|
||||
form.value.data = formatDate(val)
|
||||
show.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div 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: '请填写' }]"
|
||||
/>
|
||||
<div 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>
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">面料编号</div>
|
||||
<div class="grid-item">米数</div>
|
||||
<div class="grid-item">操作</div>
|
||||
</div>
|
||||
<div class="grid-container" v-for="(itemSecond,indexSecond) in item.list" :key="indexSecond">
|
||||
<div class="grid-item">面料编号</div>
|
||||
<div class="grid-item">米数</div>
|
||||
<div class="grid-item">操作</div>
|
||||
</div>
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">
|
||||
<van-button type="primary">扫一扫</van-button>
|
||||
</div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user