Compare commits
15 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
3e7ba1f519 | ||
|
4d87bcbd5b | ||
9f45efb1de | |||
890f9f4fb7 | |||
|
d290da2b80 | ||
d0ee6eb354 | |||
|
2403dc64ef | ||
292b795bd1 | |||
|
2d1126512c | ||
0769e77c53 | |||
4ece565d5a | |||
|
53caddfa1e | ||
|
c5f4949678 | ||
|
e1bb664c53 | ||
|
d25abf3b18 |
10
.eslintrc.js
@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-27 16:41:40
|
||||
* @LastEditTime: 2023-12-28 13:39:09
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
@ -12,6 +19,7 @@ module.exports = {
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'vue/multi-word-component-names': 'off'
|
||||
}
|
||||
}
|
||||
|
637
package-lock.json
generated
@ -8,7 +8,12 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.5",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"simple-keyboard": "^3.7.47",
|
||||
"simple-keyboard-layouts": "^3.3.55",
|
||||
"vant": "^2.13.2",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
@ -26,7 +31,7 @@
|
||||
"eslint-plugin-import": "^2.25.3",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^5.1.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"less": "^4.0.0",
|
||||
"less-loader": "^8.0.0",
|
||||
"lint-staged": "^11.1.2",
|
||||
|
34
src/App.vue
@ -1,13 +1,29 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-27 16:41:40
|
||||
* @LastEditTime: 2024-02-18 09:26:27
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div id="app">
|
||||
<nav>
|
||||
<!-- <nav>
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</nav>
|
||||
</nav> -->
|
||||
<!-- <HomeView v-if="!$route.meta.keepAlive" /> -->
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import HomeView from '@/views/HomeView.vue'
|
||||
|
||||
export default {
|
||||
// components: { HomeView }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
@ -15,18 +31,6 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
37
src/api/login.js
Normal file
@ -0,0 +1,37 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-11-20 11:05:00
|
||||
* @LastEditTime: 2024-01-09 09:50:55
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
import { getRefreshToken } from '@/utils/auth'
|
||||
|
||||
// 用户登陆
|
||||
export function loginUser (data) {
|
||||
return request({
|
||||
url: '/system/auth/login',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 使用租户名,获得租户编号
|
||||
export function getTenantIdByName (name) {
|
||||
return request({
|
||||
url: '/system/tenant/get-id-by-name',
|
||||
method: 'get',
|
||||
params: {
|
||||
name
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新访问令牌
|
||||
export function refreshToken () {
|
||||
return request({
|
||||
url: '/system/auth/refresh-token?refreshToken=' + getRefreshToken(),
|
||||
method: 'post'
|
||||
})
|
||||
}
|
107
src/api/quality.js
Normal file
@ -0,0 +1,107 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-11-20 11:05:00
|
||||
* @LastEditTime: 2024-04-22 09:03:11
|
||||
* @LastEditors: DY
|
||||
* @Description: 质量和报废
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 质量管理
|
||||
export function qualityManage (data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-record/qualityManage',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 报废管理
|
||||
export function createScrap (data) {
|
||||
return request({
|
||||
url: '/base/quality-scrap-log/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有产线列表
|
||||
export function lineList (data) {
|
||||
return request({
|
||||
url: '/base/core-production-line/listAll',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 根据产线获得工段
|
||||
export function workshopSectionListByLine (data) {
|
||||
return request({
|
||||
url: '/base/core-workshop-section/listByParentId',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有工单列表
|
||||
export function workOrderList (data) {
|
||||
return request({
|
||||
url: '/base/core-work-order/listbyfilter',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有报废原因列表
|
||||
export function scrapDetList (data) {
|
||||
return request({
|
||||
url: '/base/quality-scrap-det/listAll',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 创建质量检查信息
|
||||
export function createInspection (data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-record/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 撤销质量检查信息
|
||||
export function deleteByCancel (query) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-record/deleteByCancel',
|
||||
method: 'delete',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得所有报废日志列表
|
||||
export function scrapLogList (data) {
|
||||
return request({
|
||||
url: '/base/quality-scrap-log/page',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得安灯权限
|
||||
export function authList (data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn-auth/get',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 重置按钮
|
||||
export function resetBtn (data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-record/resetBtn',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
BIN
src/assets/1.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/2.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/back.png
Normal file
After Width: | Height: | Size: 6.1 KiB |
BIN
src/assets/bg.png
Normal file
After Width: | Height: | Size: 60 KiB |
BIN
src/assets/cancel.png
Normal file
After Width: | Height: | Size: 374 B |
BIN
src/assets/cancel1.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/cancel2.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/form1.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/form2.png
Normal file
After Width: | Height: | Size: 914 B |
BIN
src/assets/form3.png
Normal file
After Width: | Height: | Size: 673 B |
BIN
src/assets/form4.png
Normal file
After Width: | Height: | Size: 793 B |
BIN
src/assets/form5.png
Normal file
After Width: | Height: | Size: 692 B |
BIN
src/assets/form6.png
Normal file
After Width: | Height: | Size: 918 B |
BIN
src/assets/form7.png
Normal file
After Width: | Height: | Size: 595 B |
BIN
src/assets/home.png
Normal file
After Width: | Height: | Size: 6.2 KiB |
BIN
src/assets/home_bg.png
Normal file
After Width: | Height: | Size: 413 KiB |
BIN
src/assets/icon.png
Normal file
After Width: | Height: | Size: 673 B |
BIN
src/assets/login-bg.png
Normal file
After Width: | Height: | Size: 45 KiB |
BIN
src/assets/modal.png
Normal file
After Width: | Height: | Size: 84 KiB |
BIN
src/assets/mountain.png
Normal file
After Width: | Height: | Size: 29 KiB |
BIN
src/assets/quality-bg.png
Normal file
After Width: | Height: | Size: 250 KiB |
BIN
src/assets/quality.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/record.png
Normal file
After Width: | Height: | Size: 6.2 KiB |
BIN
src/assets/refresh.png
Normal file
After Width: | Height: | Size: 336 B |
BIN
src/assets/reset.png
Normal file
After Width: | Height: | Size: 349 B |
BIN
src/assets/scrap.png
Normal file
After Width: | Height: | Size: 48 KiB |
571
src/assets/styles/login.scss
Normal file
@ -0,0 +1,571 @@
|
||||
/* ===== PC DESIGN ===== */
|
||||
$W: 1080;
|
||||
$H: 1920;
|
||||
// $picW: 438;
|
||||
// $picH: 560;
|
||||
$picW: 1080;
|
||||
$picH: 1118;
|
||||
$formW: 420;
|
||||
$tabW: $formW / 2;
|
||||
// $rowH: 56;
|
||||
$rowH: 56;
|
||||
$buttonH: 50;
|
||||
|
||||
// container
|
||||
$containerBgColor: #e6ebf2;
|
||||
$containerBgImage: '../assets/bg.png';
|
||||
// container-logo
|
||||
$logoWidth: 417px;
|
||||
$logoHeight: 64px;
|
||||
// $logoImage: '../assets/logo/login-logo.png';
|
||||
// $cnbmLogo: '../assets/logo/cnbm.png';
|
||||
// container-content
|
||||
$contentWidth: round($W / $H * 100) * 1vw;
|
||||
$contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
|
||||
$contentBgColor: #ffffff;
|
||||
// container-content-pic
|
||||
$picWidth: round($picW / $H * 100) * 1vw;
|
||||
$picHeight: inherit;
|
||||
// $picImage: '../assets/images/pic.png';
|
||||
$picImage: '../assets/login-bg.png';
|
||||
// container-content-field
|
||||
$fieldWidth: $contentWidth - $picWidth;
|
||||
$fieldHeight: inherit;
|
||||
// container-content-field-form
|
||||
$formWidth: $formW * 1px;
|
||||
$tabWidth: $tabW * 1px;
|
||||
$rowHeight: $rowH * 1px;
|
||||
$buttonHeight: $buttonH * 1px;
|
||||
|
||||
// 1080px 高度为基准的 1px
|
||||
$base1px: 0.15vh; // 1px / 1080px;
|
||||
|
||||
// - - - - - 页面基础设置
|
||||
.container {
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// 元素
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
min-width: 1080px;
|
||||
min-height: 620px;
|
||||
background-color: $containerBgColor;
|
||||
// background-image: url($containerBgImage);
|
||||
background-size: cover;
|
||||
// 定位
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// 文字
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
.logo {
|
||||
// 元素
|
||||
width: $logoWidth;
|
||||
height: $logoHeight;
|
||||
// background-image: url($logoImage);
|
||||
// background-size: contain;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
margin-left: -$logoWidth/2;
|
||||
}
|
||||
.content {
|
||||
// 元素
|
||||
// width: $contentWidth;
|
||||
// height: $contentHeight;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
// box-shadow: 0px calc(16 * 0.12vh) 40px rgba(0, 0, 0, 0.07);
|
||||
// border-radius: 20px;
|
||||
// 定位
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.pic {
|
||||
flex: 3;
|
||||
width: 1px;
|
||||
min-width: 800px;
|
||||
// 元素
|
||||
// width: $picWidth;
|
||||
height: $picHeight;
|
||||
// height: 10vh;
|
||||
background-image: url($picImage);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: #f003;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
position: relative;
|
||||
margin-top: 14vh;
|
||||
flex: 2;
|
||||
// width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.pc-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
position: relative;
|
||||
top: calc(-32 * $base1px);
|
||||
height: calc(128 * $base1px);
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-left: calc(18px * 0.12vh);
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
color: #000;
|
||||
font-size: calc(28 * 0.12vh);
|
||||
line-height: calc(40 * 0.12vh);
|
||||
letter-spacing: calc(2 * 0.12vh);
|
||||
|
||||
.cnbm_logo {
|
||||
height: calc(160 * 0.12vh);
|
||||
width: calc(182 * 0.12vh);
|
||||
position: relative;
|
||||
top: calc(8 * 0.12vh);
|
||||
right: calc(8 * 0.12vh);
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin: 0;
|
||||
margin-left: calc(28 * 0.12vh);
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
color: #000;
|
||||
font-size: calc(28 * 0.12vh);
|
||||
line-height: calc(48 * 0.12vh);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-title,
|
||||
.mobile-switch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-cont {
|
||||
// height: 560px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer {
|
||||
user-select: none;
|
||||
// 元素
|
||||
margin: calc(12 * 0.12vh) 0;
|
||||
height: calc(16 * 0.12vh);
|
||||
line-height: calc(16 * 0.12vh);
|
||||
font-size: calc(12 * 0.12vh);
|
||||
color: #8c8c8c;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
:deep(.el-tabs__item) {
|
||||
user-select: none;
|
||||
// 元素
|
||||
width: $tabWidth;
|
||||
// height: $rowHeight;
|
||||
height: calc(54 * 0.12vh);
|
||||
padding: 0;
|
||||
// 文字
|
||||
line-height: $rowHeight;
|
||||
color: #666666;
|
||||
font-size: calc(14 * 0.12vh);
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
font-weight: 500;
|
||||
color: #2f53eb;
|
||||
}
|
||||
:deep(.el-tabs__active-bar) {
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
// 元素
|
||||
width: 100%;
|
||||
// height: $rowHeight;
|
||||
height: calc(72 * 0.12vh);
|
||||
background: #f5f5f5;
|
||||
border: 0;
|
||||
border-radius: 28px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
line-height: 19px;
|
||||
color: #262626;
|
||||
}
|
||||
.code:deep(.el-input__inner) {
|
||||
padding: 0 24px;
|
||||
// 文字
|
||||
text-align: left;
|
||||
}
|
||||
:deep(.el-input__inner::-webkit-input-placeholder) {
|
||||
/* WebKit browsers */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
:deep(.el-input__inner:-moz-placeholder) {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
:deep(.el-input__inner::-moz-placeholder) {
|
||||
/* Mozilla Firefox 19+ */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
opacity: 1;
|
||||
}
|
||||
:deep(.el-input__inner:-ms-input-placeholder) {
|
||||
/* Internet Explorer 10+ */
|
||||
font-weight: 400;
|
||||
color: #8c8c8c !important;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
position: relative;
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $rowHeight;
|
||||
box-sizing: border-box;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
// 文字
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #2f53eb;
|
||||
span {
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-form-item__error) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
height: $buttonHeight;
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 20px;
|
||||
// 文字
|
||||
line-height: 26px;
|
||||
font-size: calc(18 * 0.12vh);
|
||||
color: #ffffff;
|
||||
}
|
||||
.button-active {
|
||||
background: #2f53eb;
|
||||
box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
// 元素
|
||||
width: 420px;
|
||||
height: calc(52 * 0.12vh);
|
||||
// height: 66px;
|
||||
color: #262626;
|
||||
font-size: calc(14 * 0.12vh);
|
||||
}
|
||||
:deep(.el-checkbox__label) {
|
||||
font-size: calc(14 * 0.12vh);
|
||||
line-height: calc(12 * 0.12vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// - - - - - PC 最小尺寸设置
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
.content {
|
||||
.field {
|
||||
flex: initial;
|
||||
// width: 800px;
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 1024px) {
|
||||
.container {
|
||||
.content {
|
||||
.field {
|
||||
margin-top: 16vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 1024px) {
|
||||
.container {
|
||||
.content {
|
||||
.field {
|
||||
margin-top: 8vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 599px) and (max-width: 1366px) {
|
||||
.container {
|
||||
// min-width: 599px;
|
||||
min-width: 42vw;
|
||||
|
||||
.content {
|
||||
// width: 710px;
|
||||
// height: 397px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.pic {
|
||||
// width: 314px;
|
||||
display: none;
|
||||
}
|
||||
.field {
|
||||
// margin-top: 6vh;
|
||||
// width: calc(710px - 314px);
|
||||
// left: 314px;
|
||||
// justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.pc-title {
|
||||
h3 {
|
||||
font-size: 2.4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
// width: 320px;
|
||||
:deep(.el-input__inner) {
|
||||
width: 320px;
|
||||
height: 56px;
|
||||
}
|
||||
.button {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (max-height: 1080px) {
|
||||
// .container {
|
||||
// .field {
|
||||
// transform: scale(0.74);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
/* ===== MOBILE DESIGN ===== */
|
||||
$mobileW: 375;
|
||||
$mobileH: 812;
|
||||
$mobileContentW: 327;
|
||||
$mobileContentH: 376;
|
||||
$mobileFormW: 280;
|
||||
$mobileRowH: 48;
|
||||
$mobileButtonH: 48;
|
||||
|
||||
// container
|
||||
$mobileContainerBgImage: '../assets/images/bg-mobile.png';
|
||||
// container-content
|
||||
$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
|
||||
$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 *
|
||||
$mobileContentWidth;
|
||||
// container-content-field-form
|
||||
$mobileFormWidth: round($mobileFormW / $mobileW * 100) * 1vw;
|
||||
$mobileRowHeight: $mobileRowH * 1px;
|
||||
$mobileButtonHeight: $mobileButtonH * 1px;
|
||||
$iconBgImage: '../assets/images/icon.png';
|
||||
|
||||
// - - - - - 移动端设置
|
||||
@media screen and (max-width: 599px) {
|
||||
.container {
|
||||
// 元素
|
||||
background-image: url($mobileContainerBgImage);
|
||||
min-width: 280px;
|
||||
min-height: 568px;
|
||||
// 文字
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pc-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
// 元素
|
||||
width: $mobileContentWidth;
|
||||
height: $mobileContentHeight;
|
||||
min-width: 250px;
|
||||
min-height: 340px;
|
||||
// 定位
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pic {
|
||||
display: none;
|
||||
}
|
||||
.field {
|
||||
padding: 0;
|
||||
// 元素
|
||||
width: inherit;
|
||||
min-height: inherit;
|
||||
// 定位
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mobile-title {
|
||||
// 元素
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin: 0;
|
||||
width: $mobileFormWidth;
|
||||
// - - - tab
|
||||
:deep(.el-tabs__header) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 0;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
height: $mobileRowHeight;
|
||||
line-height: 24px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $mobileRowHeight;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
height: $mobileButtonHeight;
|
||||
line-height: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
:deep(.el-input__inner) {
|
||||
height: $mobileRowHeight;
|
||||
line-height: 24px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
:deep(#button-form-item) {
|
||||
margin: 0 !important;
|
||||
button {
|
||||
// 元素
|
||||
height: $mobileRowHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mobile-switch {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
margin: 0;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background-image: url($iconBgImage);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.mobile-switch:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
// 元素
|
||||
font-size: calc(12 * 0.12vh);
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
color: #333333;
|
||||
opacity: 0.6;
|
||||
// 定位
|
||||
// position: absolute;
|
||||
bottom: -calc(32 * 0.12vh);
|
||||
}
|
||||
}
|
||||
}
|
BIN
src/assets/sub-right.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/transparent.png
Normal file
After Width: | Height: | Size: 65 KiB |
BIN
src/assets/xcac.png
Normal file
After Width: | Height: | Size: 5.2 KiB |
16
src/main.js
@ -1,9 +1,25 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-27 16:41:40
|
||||
* @LastEditTime: 2024-03-28 10:45:26
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import Vant from 'vant'
|
||||
import 'vant/lib/index.css'
|
||||
import axios from 'axios'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$http = axios
|
||||
|
||||
Vue.use(Vant)
|
||||
Vue.use(ElementUI)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
|
@ -1,12 +1,28 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-27 16:41:40
|
||||
* @LastEditTime: 2024-01-29 10:04:05
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import LoginView from '../views/Login.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'login',
|
||||
component: LoginView,
|
||||
meta: {
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
@ -17,6 +33,21 @@ const routes = [
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
|
||||
},
|
||||
{
|
||||
path: '/quality',
|
||||
name: 'quality',
|
||||
component: () => import('../views/Quality.vue')
|
||||
},
|
||||
{
|
||||
path: '/scrap',
|
||||
name: 'scrap',
|
||||
component: () => import('../views/Scrap.vue')
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
name: 'scrapList',
|
||||
component: () => import('../views/ScrapList.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
48
src/utils/auth.js
Normal file
@ -0,0 +1,48 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-01-09 09:55:17
|
||||
* @LastEditTime: 2024-01-29 16:56:22
|
||||
* @LastEditors: DY
|
||||
* @Description: cookie
|
||||
*/
|
||||
|
||||
// ========== 租户相关 ==========
|
||||
|
||||
const TenantIdKey = 'TENANT_ID'
|
||||
// const TenantNameKey = 'TENANT_NAME'
|
||||
|
||||
export function setTenantId (username) {
|
||||
localStorage.setItem(TenantIdKey, username)
|
||||
}
|
||||
|
||||
export function getTenantId () {
|
||||
return localStorage.getItem(TenantIdKey)
|
||||
}
|
||||
|
||||
const AccessTokenKey = 'ACCESS_TOKEN'
|
||||
const RefreshTokenKey = 'REFRESH_TOKEN'
|
||||
|
||||
// ========== Token 相关 ==========
|
||||
|
||||
export function getAccessToken () {
|
||||
return localStorage.getItem(AccessTokenKey)
|
||||
}
|
||||
|
||||
export function getUserId () {
|
||||
return localStorage.getItem('UserId')
|
||||
}
|
||||
|
||||
export function getRefreshToken () {
|
||||
return localStorage.getItem(RefreshTokenKey)
|
||||
}
|
||||
|
||||
export function setToken (token) {
|
||||
localStorage.setItem(AccessTokenKey, token.accessToken)
|
||||
localStorage.setItem(RefreshTokenKey, token.refreshToken)
|
||||
localStorage.setItem('UserId', token.userId)
|
||||
}
|
||||
|
||||
export function removeToken () {
|
||||
localStorage.removeItem(AccessTokenKey)
|
||||
localStorage.removeItem(RefreshTokenKey)
|
||||
}
|
107
src/utils/request.js
Normal file
@ -0,0 +1,107 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-11-20 11:02:29
|
||||
* @LastEditTime: 2024-04-22 09:39:49
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import axios from 'axios'
|
||||
import { getTenantId, getAccessToken, getRefreshToken, setToken } from '@/utils/auth'
|
||||
import { refreshToken } from '@/api/login'
|
||||
import { MessageBox } from 'element-ui'
|
||||
|
||||
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: 'http://192.168.0.33:48082/admin-api',
|
||||
// baseURL: 'http://192.168.1.104:48082/admin-api',
|
||||
// baseURL: 'http://192.168.1.78:48082/admin-api',
|
||||
timeout: 30000,
|
||||
withCredentials: false
|
||||
})
|
||||
|
||||
// 是否显示重新登录
|
||||
export const isRelogin = { show: false }
|
||||
// 是否正在刷新中
|
||||
let isRefreshToken = false
|
||||
// 请求队列
|
||||
let requestList = []
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(config => {
|
||||
// 设置租户
|
||||
const tenantId = getTenantId()
|
||||
config.headers['tenant-id'] = tenantId
|
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false
|
||||
if (getAccessToken() && !isToken) {
|
||||
config.headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
}
|
||||
return config
|
||||
})
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(async res => {
|
||||
// return Promise.reject(error)
|
||||
// 访问令牌过期
|
||||
if (res.data.code === 401) {
|
||||
if (!isRefreshToken) {
|
||||
isRefreshToken = true
|
||||
// 1. 如果获取不到刷新令牌,则只能执行登出操作
|
||||
if (!getRefreshToken()) {
|
||||
return handleAuthorized()
|
||||
}
|
||||
// 2. 进行刷新访问令牌
|
||||
try {
|
||||
const refreshTokenRes = await refreshToken()
|
||||
// 2.1 刷新成功,则回放队列的请求 + 当前请求
|
||||
// if (refreshTokenRes.data.code === 0) {
|
||||
setToken(refreshTokenRes.data.data)
|
||||
requestList.forEach(cb => cb())
|
||||
return service(res.config)
|
||||
// } else {
|
||||
// return handleAuthorized()
|
||||
// }
|
||||
} catch (e) { // 为什么需要 catch 异常呢?刷新失败时,请求因为 Promise.reject 触发异常。
|
||||
// 2.2 刷新失败,只回放队列的请求
|
||||
requestList.forEach(cb => cb())
|
||||
// 提示是否要登出。即不回放当前请求!不然会形成递归
|
||||
return handleAuthorized()
|
||||
} finally {
|
||||
requestList = []
|
||||
isRefreshToken = false
|
||||
}
|
||||
} else {
|
||||
// 添加到队列,等待刷新获取到新的令牌
|
||||
return new Promise(resolve => {
|
||||
requestList.push(() => {
|
||||
res.config.headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
resolve(service(res.config))
|
||||
})
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
// if (res.dat)
|
||||
})
|
||||
|
||||
function handleAuthorized () {
|
||||
if (!isRelogin.show) {
|
||||
isRelogin.show = true
|
||||
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
|
||||
confirmButtonText: '重新登录',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
isRelogin.show = false
|
||||
location.href = ''
|
||||
}).catch(() => {
|
||||
isRelogin.show = false
|
||||
})
|
||||
}
|
||||
// return Promise.reject(new Error('无效的会话,或者会话已过期,请重新登录。'))
|
||||
}
|
||||
|
||||
export default service
|
51
src/utils/time.js
Normal file
@ -0,0 +1,51 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-01-29 15:33:10
|
||||
* @LastEditTime: 2024-01-29 15:39:34
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
// 日期格式化(通用)
|
||||
export function parseTime (time, pattern) {
|
||||
if (arguments.length === 0 || !time) {
|
||||
return null
|
||||
}
|
||||
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||
let date
|
||||
if (typeof time === 'object') {
|
||||
date = time
|
||||
} else {
|
||||
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
|
||||
time = parseInt(time)
|
||||
} else if (typeof time === 'string') {
|
||||
// const reg1 = new RegExp(/-/gm)
|
||||
// const reg2 = new RegExp(/\.\d{3}/gm)
|
||||
// time = time.replace(reg1, '/').replace('T', ' ').replace(reg2, '')
|
||||
}
|
||||
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||
time = time * 1000
|
||||
}
|
||||
date = new Date(time)
|
||||
}
|
||||
const formatObj = {
|
||||
y: date.getFullYear(),
|
||||
m: date.getMonth() + 1,
|
||||
d: date.getDate(),
|
||||
h: date.getHours(),
|
||||
i: date.getMinutes(),
|
||||
s: date.getSeconds(),
|
||||
a: date.getDay()
|
||||
}
|
||||
const timeStr = format.replace(/{([ymdhisa])+}/g, (result, key) => {
|
||||
let value = formatObj[key]
|
||||
// Note: getDay() returns 0 on Sunday
|
||||
if (key === 'a') {
|
||||
return ['日', '一', '二', '三', '四', '五', '六'][value]
|
||||
}
|
||||
if (result.length > 0 && value < 10) {
|
||||
value = '0' + value
|
||||
}
|
||||
return value || 0
|
||||
})
|
||||
return timeStr
|
||||
}
|
@ -1,18 +1,93 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-27 16:41:40
|
||||
* @LastEditTime: 2024-01-29 16:35:29
|
||||
* @LastEditors: DY
|
||||
* @Description: 首页
|
||||
-->
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<van-row style="width: 100%" type="flex" justify="space-between">
|
||||
<van-col span="20"></van-col>
|
||||
<van-col span="4" style="text-align: right">
|
||||
<img class="homeIcon" @click="goback" src="./../assets/back.png" alt="">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<div class="centerDiv">
|
||||
<div class="img1" @click="toQuality">
|
||||
<p class="title">质量收集器</p>
|
||||
</div>
|
||||
<div class="img" @click="toScrap">
|
||||
<p class="title">报废管理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
HelloWorld
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goback () {
|
||||
window.electronAPI.closeWindow()
|
||||
},
|
||||
toQuality () {
|
||||
this.$router.push({
|
||||
path: 'quality'
|
||||
})
|
||||
},
|
||||
toScrap () {
|
||||
this.$router.push({
|
||||
path: 'list'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
/* width: 175px;
|
||||
height: 45px; */
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
line-height: 45px;
|
||||
letter-spacing: 3px;
|
||||
margin-top: 395px;
|
||||
}
|
||||
.img {
|
||||
width: 428px;
|
||||
height: 607px;
|
||||
background-image: url('./../assets/scrap.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.img1 {
|
||||
width: 428px;
|
||||
height: 607px;
|
||||
background-image: url('./../assets/quality.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.centerDiv {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 80vh;
|
||||
gap: 18px;
|
||||
}
|
||||
.home {
|
||||
background-image: url('./../assets/home_bg.png');
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding-top: 10px;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
272
src/views/Login.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-28 11:21:53
|
||||
* @LastEditTime: 2024-04-10 11:10:56
|
||||
* @LastEditors: DY
|
||||
* @Description: 登陆
|
||||
-->
|
||||
<template>
|
||||
<div class="login">
|
||||
<van-row style="width: 100%; height: 15px; padding-top: 5px" type="flex" justify="space-between">
|
||||
<van-col span="20"></van-col>
|
||||
<van-col span="4" style="text-align: right">
|
||||
<img class="homeIcon" @click="goback" src="./../assets/back.png" alt="">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row type="flex" justify="space-around">
|
||||
<van-col span="12">
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<span>Wel</span>
|
||||
<span style="color: white">come</span>
|
||||
<p
|
||||
style="
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
color: #26b9de;
|
||||
opacity: 75%;
|
||||
">
|
||||
<span
|
||||
style="
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-left: 8px;
|
||||
margin-right: 2px;
|
||||
border-radius: 100%;
|
||||
background: #26b9de;
|
||||
"></span>
|
||||
向世界先进水平挑战,为人类社会文明做贡献
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<img class="modalImg" src="./../assets/modal.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<div class="right">
|
||||
<div>
|
||||
<img class="xcacImg" src="./../assets/xcac.png" alt="">
|
||||
<p class="xc">许昌安彩新能源科技有限公司</p>
|
||||
</div>
|
||||
<div class="form">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
placeholder="用户名 / 手机号"
|
||||
style="margin-bottom: 16px"
|
||||
@focus="focusInput($event)"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="密码"
|
||||
@focus="focusInput1($event)"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
<div style="margin-top: 36px; border-radius: 3px">
|
||||
<van-button block type="info" native-type="submit">提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<div class="mountain">
|
||||
<p style="margin-top: 80px; color: #3196E7">{{'版权所有:中建材智能自动化有限公司版本' + '\u3000' +'版本:1.0'}}</p>
|
||||
</div>
|
||||
<SimpleKeyboard
|
||||
style="position: fixed; bottom: 0"
|
||||
v-show="simpleShow"
|
||||
v-model="inputValue"
|
||||
ref="keyboardClass"
|
||||
keyboardClass="keyboardClass"
|
||||
@on-change="onChange"
|
||||
@on-key-press="onKeyPress"
|
||||
@close="simpleShow = false"
|
||||
:input="inputValue"
|
||||
:maxLength="30"
|
||||
/>
|
||||
<SimpleKeyboard
|
||||
style="position: fixed; bottom: 0"
|
||||
v-show="simpleShow1"
|
||||
v-model="inputValue1"
|
||||
ref="keyboardClass1"
|
||||
keyboardClass="keyboardClass1"
|
||||
@on-change="onChange1"
|
||||
@on-key-press="onKeyPress1"
|
||||
@close="simpleShow1 = false"
|
||||
:input="inputValue1"
|
||||
:maxLength="30"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { loginUser, getTenantIdByName } from '@/api/login'
|
||||
import { setTenantId, setToken } from '@/utils/auth'
|
||||
import SimpleKeyboard from './components/simpleKeyboard.vue'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { SimpleKeyboard },
|
||||
data () {
|
||||
return {
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
tenantName: '技术中心',
|
||||
simpleShow: false,
|
||||
simpleShow1: false,
|
||||
input: null,
|
||||
inputEle: null,
|
||||
inputEle1: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputValue: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (value) {
|
||||
this.username = value
|
||||
}
|
||||
},
|
||||
inputValue1: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (value) {
|
||||
this.password = value
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 租户
|
||||
getTenantIdByName(this.tenantName).then((res) => {
|
||||
// 设置租户
|
||||
const tenantId = res.data.data
|
||||
if (tenantId && tenantId >= 0) {
|
||||
setTenantId(tenantId)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goback () {
|
||||
window.electronAPI.closeWindow()
|
||||
},
|
||||
focusInput1 (e) {
|
||||
this.inputEle1 = e.srcElement
|
||||
this.simpleShow1 = true
|
||||
this.simpleShow = false
|
||||
},
|
||||
focusInput (e) {
|
||||
this.inputEle = e.srcElement
|
||||
this.simpleShow1 = false
|
||||
this.simpleShow = true
|
||||
},
|
||||
onChange1 (input) {
|
||||
this.inputValue1 = input
|
||||
this.$set(this.password, input)
|
||||
// 解决当输入框为密码输入框时,切换显示/隐藏密码,光标在开头问题,注意:element-ui版本号需为2.15.2及以上
|
||||
this.inputEle1.focus()
|
||||
},
|
||||
onChange (input) {
|
||||
this.inputValue = input
|
||||
this.$set(this.username, input)
|
||||
// 解决当输入框为密码输入框时,切换显示/隐藏密码,光标在开头问题,注意:element-ui版本号需为2.15.2及以上
|
||||
this.inputEle.focus()
|
||||
},
|
||||
onKeyPress1 (button) {
|
||||
console.log('onKeyPress', button)
|
||||
},
|
||||
onKeyPress (button) {
|
||||
console.log('onKeyPress', button)
|
||||
},
|
||||
onSubmit (values) {
|
||||
loginUser(values).then(res => {
|
||||
console.log(res.data)
|
||||
if (res.data.code === 0) {
|
||||
setToken(res.data.data)
|
||||
this.$router.push({
|
||||
path: 'home'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(res.data.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form {
|
||||
width: 332px;
|
||||
margin: 45px auto;
|
||||
}
|
||||
.xc {
|
||||
/* width: 342px;
|
||||
height: 32px; */
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.xcacImg {
|
||||
height: 46px;
|
||||
width: 130px;
|
||||
margin: 80px 148px 0;
|
||||
}
|
||||
.right {
|
||||
background-image: url('./../assets/transparent.png');
|
||||
height: 534px;
|
||||
width: 458px;
|
||||
margin-top: 100px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.modalImg {
|
||||
margin-top: 55px;
|
||||
margin-left: 55px;
|
||||
text-align: left;
|
||||
}
|
||||
.title {
|
||||
/* width: 297px; */
|
||||
/* height: 59px; */
|
||||
padding-top: 100px;
|
||||
padding-left: 115px;
|
||||
text-align: left;
|
||||
font-size: 66px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #1BD1FF;
|
||||
line-height: 58px;
|
||||
}
|
||||
.left {
|
||||
margin: 0;
|
||||
}
|
||||
.mountain {
|
||||
background-image: url('./../assets/mountain.png');
|
||||
height: 131px;
|
||||
width: 100vw;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.login {
|
||||
background-image: url('./../assets/login-bg.png');
|
||||
height: 100vh;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
372
src/views/Quality.vue
Normal file
@ -0,0 +1,372 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-01-09 13:48:42
|
||||
* @LastEditTime: 2024-04-22 09:33:28
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="quality">
|
||||
<van-row type="flex" justify="space-between">
|
||||
<van-col span="5" style="text-align: left">
|
||||
<h2>质量管理器</h2>
|
||||
</van-col>
|
||||
<van-col span="4" style="text-align: right">
|
||||
<img class="homeIcon" @click="toHome" src="./../assets/home.png" alt="">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row gutter="10" style="margin-top: -20px;">
|
||||
<van-col span="12">
|
||||
<van-dropdown-menu >
|
||||
<van-dropdown-item v-model="listQuery.productionLineId" :options="lineArray" @change="getSection" />
|
||||
</van-dropdown-menu>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="listQuery.sectionId" :options="sectionArray" @change="getQuality()" />
|
||||
</van-dropdown-menu>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<!-- <div class="count"> -->
|
||||
<van-row gutter="10">
|
||||
<van-col span="12">
|
||||
<div class="count">本班次合计数量:{{ count }}</div>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-row gutter="10" style="font-size: 9px">
|
||||
<van-col span="8">
|
||||
<div class="count" @click="getQuality">
|
||||
<img style="width: 15px; height: 15px" src="./../assets/refresh.png" alt="">
|
||||
<span style="margin-left: 10px">刷 新</span>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="count" :style="[{ background: isCancel ? '#FFA927' : '#FFFFFF' }]" @click="isCancel = !isCancel">
|
||||
<img style="width: 15px; height: 15px" src="./../assets/cancel.png" alt="">
|
||||
<span style="margin-left: 10px">撤 销</span>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div v-show="showReset" class="count" @click="reset">
|
||||
<img style="width: 15px; height: 15px" src="./../assets/reset.png" alt="">
|
||||
<span style="margin-left: 10px">重 置</span>
|
||||
</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<el-scrollbar class="scollbar" ref="scrollbar" style="height: 100%" >
|
||||
<el-backtop target=".scollbar .el-scrollbar__wrap" :visibility-height="10" :bottom="20">
|
||||
<i class="el-icon-caret-top" />
|
||||
</el-backtop>
|
||||
<div class="content" v-for="(item, index) in typeList" :key="index">
|
||||
<van-row type="flex" align="center" style="margin-left: -20px">
|
||||
<van-col span="1">
|
||||
<img style="width: 20px; height: 20px;" src="./../assets/icon.png" alt="">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<p style="text-align: left; color: #276BFF">{{ item[0].typeName }}</p>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row type="flex">
|
||||
<van-col span="6" v-for="it in item" :key="it.id">
|
||||
<div :class=" isCancel ? 'flexCancelItem' : 'flexItem'">
|
||||
<!-- <div class="flexItem"> -->
|
||||
<!-- <div> -->
|
||||
<div class="contain">
|
||||
<div class="leftDiv">{{ it.count }}</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<!-- <div> -->
|
||||
<div class="rightDiv" @click="addRecord(it)">{{ it.detContent }}</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<!-- <div class="ext"></div> -->
|
||||
<!-- <el-backtop target=".quality" :visibility-height="10" :bottom="10">
|
||||
<i class="el-icon-caret-top" />
|
||||
</el-backtop> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { qualityManage, createInspection, deleteByCancel, authList, resetBtn } from '@/api/quality'
|
||||
import { getUserId } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
name: 'Quality',
|
||||
data () {
|
||||
return {
|
||||
isCancel: false,
|
||||
lineArray: [],
|
||||
sectionArray: [],
|
||||
listQuery: {
|
||||
productionLineId: '',
|
||||
sectionId: ''
|
||||
},
|
||||
count: 0,
|
||||
typeList: [],
|
||||
showReset: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getLine()
|
||||
},
|
||||
methods: {
|
||||
reset () {
|
||||
resetBtn(this.listQuery).then(res => {
|
||||
if (res.data.data === true) {
|
||||
this.typeList.forEach(item => {
|
||||
item.forEach(it => {
|
||||
it.count = 0
|
||||
})
|
||||
})
|
||||
this.count = 0
|
||||
this.$message.success('重置完成!')
|
||||
} else {
|
||||
this.typeList = []
|
||||
this.count = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
addRecord (value) {
|
||||
const now = new Date() // 创建一个表示当前时间的Date对象
|
||||
const formattedTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
|
||||
// console.log(formattedTime)
|
||||
if (!this.isCancel) {
|
||||
createInspection({
|
||||
...this.listQuery,
|
||||
inspectionDetId: value.detId,
|
||||
checkTime: formattedTime
|
||||
}).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
// this.typeList.forEach(element => {
|
||||
// element.forEach(el => {
|
||||
// el.active = false
|
||||
// })
|
||||
// })
|
||||
// value.active = true
|
||||
// this.$set(value, 'active', true)
|
||||
value.count++
|
||||
this.count++
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (value.count > 0) {
|
||||
deleteByCancel({
|
||||
...this.listQuery,
|
||||
inspectionDetId: value.detId,
|
||||
checkTime: formattedTime
|
||||
}).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
// this.typeList.forEach(element => {
|
||||
// element.forEach(el => {
|
||||
// el.active = false
|
||||
// })
|
||||
// })
|
||||
// value.active = true
|
||||
// this.$set(value, 'active', true)
|
||||
value.count--
|
||||
this.count--
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('数量小于0,不可操作')
|
||||
}
|
||||
}
|
||||
},
|
||||
toHome () {
|
||||
this.$router.push({
|
||||
path: 'home'
|
||||
})
|
||||
},
|
||||
getQuality () {
|
||||
// qualityManage().then(res => {
|
||||
qualityManage(this.listQuery).then(res => {
|
||||
if (JSON.stringify(res.data.data) !== '{}') {
|
||||
this.typeList = Object.values(res.data.data)
|
||||
this.count = this.typeList[0][0].sunCount
|
||||
if (this.typeList[0][0]?.resetMethod === 1) {
|
||||
this.resetMethod = true
|
||||
}
|
||||
} else {
|
||||
this.typeList = []
|
||||
this.count = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
getLine () {
|
||||
authList({ userId: getUserId() }).then(res => {
|
||||
if (res && res?.data?.data?.datas?.length > 0) {
|
||||
this.lineArray = res.data.data.datas.map(item => {
|
||||
item.text = item.name
|
||||
item.value = item.id
|
||||
return item
|
||||
})
|
||||
this.listQuery.productionLineId = this.lineArray[0].value
|
||||
this.getSection(this.listQuery.productionLineId)
|
||||
} else {
|
||||
this.lineArray = []
|
||||
this.listQuery.productionLineId = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
getSection (value) {
|
||||
const temp = this.lineArray.filter(item => {
|
||||
return item.id === value
|
||||
})
|
||||
this.sectionArray = temp[0].children.map(it => {
|
||||
return {
|
||||
text: it.name,
|
||||
value: it.id
|
||||
}
|
||||
})
|
||||
if (this.sectionArray.length > 0) {
|
||||
this.listQuery.sectionId = this.sectionArray[0].value
|
||||
this.getQuality()
|
||||
} else {
|
||||
this.listQuery.sectionId = ''
|
||||
}
|
||||
// workshopSectionListByLine({ id: this.listQuery.productionLineId }).then(res => {
|
||||
// this.sectionArray = res.data.data.map(item => {
|
||||
// return {
|
||||
// text: item.name,
|
||||
// value: item.id
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flexItem {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
width: 226px;
|
||||
line-height: 72px;
|
||||
box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
|
||||
/* background-color: #FFFFFF; */
|
||||
background-image: url('./../assets/2.png');
|
||||
background-size: 100%;
|
||||
}
|
||||
.flexItem:active {
|
||||
background-image: url('./../assets/1.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.flexCancelItem {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
width: 226px;
|
||||
line-height: 72px;
|
||||
box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
|
||||
/* background-color: #FFFFFF; */
|
||||
background-image: url('./../assets/cancel1.png');
|
||||
background-size: 100%;
|
||||
}
|
||||
.flexCancelItem:active {
|
||||
background-image: url('./../assets/cancel2.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.flexActive {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
width: 226px;
|
||||
line-height: 72px;
|
||||
box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
|
||||
/* background-color: #456DFF; */
|
||||
background-image: url('./../assets/1.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.rightDiv {
|
||||
border-radius: 7px;
|
||||
/* height: 72px; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
width: 140px;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
/* text-align: justify; */
|
||||
text-overflow: ellipsis;
|
||||
/* background-color: #276BFF; */
|
||||
}
|
||||
/* .rightDiv::after {
|
||||
content: "...";
|
||||
} */
|
||||
.contain {
|
||||
border-radius: 7px 36px 36px 7px;
|
||||
height: 72px;
|
||||
width: 80px;
|
||||
line-height: 72px;
|
||||
/* background-color: #FFFFFF; */
|
||||
/* margin: 5px 0 5px 0; */
|
||||
}
|
||||
.leftDiv {
|
||||
border-radius: 7px 36px 36px 7px;
|
||||
/* background-color: #456DFF; */
|
||||
height: 72px;
|
||||
width: 77px;
|
||||
color: white;
|
||||
line-height: 72px;
|
||||
/* margin: 5px 0 5px 0; */
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
/* height: 40px; */
|
||||
/* display: flex; */
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
opacity: 0.7;
|
||||
backdrop-filter: blur(50px);
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-top: 7px;
|
||||
padding: 0 20px 20px 20px;
|
||||
box-sizing: border-box;
|
||||
/* overflow: scroll;
|
||||
height: 100%; */
|
||||
}
|
||||
.count {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
opacity: 0.7;
|
||||
backdrop-filter: blur(50px);
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.homeIcon {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
}
|
||||
.quality {
|
||||
background-image: url('./../assets/quality-bg.png');
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 20px 20px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
596
src/views/Scrap.vue
Normal file
@ -0,0 +1,596 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-01-09 13:49:03
|
||||
* @LastEditTime: 2024-04-22 09:36:10
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="scrap">
|
||||
<!-- <div style="float: right" type="primary" size="small" plain @click="goback()">
|
||||
<img class="homeIcon" src="./../assets/home.png" alt="">
|
||||
</div>
|
||||
<div style="height: 60px;">
|
||||
<h2>报废管理</h2>
|
||||
</div> -->
|
||||
<!-- <van-row type="flex" class="search" justify="center">
|
||||
<el-input v-model="form.data" @focus="onInputFocus('form.data',form.data)" ref="searchInput" placeholder="请输入关键词" >
|
||||
</el-input>
|
||||
</van-row> -->
|
||||
<van-row type="flex" justify="space-between">
|
||||
<van-col span="5" style="text-align: left">
|
||||
<h2>报废管理</h2>
|
||||
</van-col>
|
||||
<van-col span="4" style="text-align: right">
|
||||
<img class="homeIcon" @click="goback" src="./../assets/home.png" alt="">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div class="whiteForm">
|
||||
<el-form-item label="工单选择" prop="workOrderId">
|
||||
<div slot="label" class="labelDiv">
|
||||
<img class="formLabelIcon" src="./../assets/form1.png" alt="">
|
||||
工单选择
|
||||
</div>
|
||||
<el-select v-model="ruleForm.workOrderId" filterable clearable @focus="focusInput($event)" placeholder="请选择工单" style="width: 100%; display: block">
|
||||
<el-option v-for="(item, index) in workOrderList" :key="index" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="whiteForm">
|
||||
<el-form-item label="报废数量" prop="num">
|
||||
<div slot="label" class="labelDiv">
|
||||
<img class="formLabelIcon" src="./../assets/form2.png" alt="">
|
||||
报废数量
|
||||
</div>
|
||||
<el-input v-model="ruleForm.num" @focus="showNumber" clearable controls-position="right" :min="0" placeholder="请输入报废数量" style="width: 100%; display: block"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<van-number-keyboard
|
||||
v-model="ruleForm.num"
|
||||
:show="show"
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
<el-form-item label="报废原因" prop="detName" class="reson">
|
||||
<div slot="label" class="labelDiv">
|
||||
<img class="formLabelIcon" src="./../assets/form3.png" alt="">
|
||||
报废原因
|
||||
</div>
|
||||
<br>
|
||||
<div class="resonDiv">
|
||||
<el-checkbox-group v-model="ruleForm.detName" style="width: 100%; display: block; text-align: left">
|
||||
<el-checkbox v-for="(item, index) in scrapList" :key="index" :label="item.id" :name="item.id">{{ item.content }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div class="whiteForm">
|
||||
<el-form-item label="产线" prop="lineId">
|
||||
<div slot="label" class="labelDiv">
|
||||
<img class="formLabelIcon" src="./../assets/form4.png" alt="">
|
||||
产线
|
||||
</div>
|
||||
<el-select v-model="ruleForm.lineId" filterable clearable placeholder="请选择产线" @focus="focusInput1($event)" style="width: 100%; display: block" @change="getSection">
|
||||
<el-option v-for="(item, index) in lineArray" :key="index" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="whiteForm">
|
||||
<el-form-item label="工段" prop="sectionId">
|
||||
<div slot="label" class="labelDiv">
|
||||
<img class="formLabelIcon" src="./../assets/form5.png" alt="">
|
||||
工段
|
||||
</div>
|
||||
<el-select v-model="ruleForm.sectionId" filterable clearable placeholder="请选择产线" @focus="focusInput2($event)" style="width: 100%; display: block">
|
||||
<el-option v-for="(item, index) in sectionArray" :key="index" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div class="whiteForm">
|
||||
<el-form-item label="时间" prop="logTime">
|
||||
<div slot="label" class="labelDiv">
|
||||
<img class="formLabelIcon" src="./../assets/form6.png" alt="">
|
||||
时间
|
||||
</div>
|
||||
<div class="timeDiv">
|
||||
<el-date-picker type="datetime" placeholder="选择日期" value-format="timestamp" v-model="ruleForm.logTime" style="width: 100%;">
|
||||
</el-date-picker>
|
||||
<div style="margin-right: 10px" @click="refresh">
|
||||
<i class="el-icon-refresh-right" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="whiteForm">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<div slot="label" class="labelDiv">
|
||||
<img class="formLabelIcon" src="./../assets/form7.png" alt="">
|
||||
备注
|
||||
</div>
|
||||
<el-input v-model="ruleForm.remark" @focus="focusInput3($event)" placeholder="请输入备注"></el-input>
|
||||
<!-- <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.logTime" style="width: 100%;"></el-date-picker> -->
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item>
|
||||
<!-- <el-button @click="resetForm('ruleForm')">取消</el-button> -->
|
||||
<!-- <el-button :disabled="disabled" type="primary" @click="submitForm('ruleForm')"> <i class="el-icon-sub"></i>11</el-button> -->
|
||||
<el-button class="subButton" icon="el-icon-circle-check" :disabled="disabled" type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<SimpleKeyboard
|
||||
v-show="simpleShow"
|
||||
v-model="inputValue"
|
||||
ref="keyboardClass"
|
||||
keyboardClass="keyboardClass"
|
||||
@on-change="onChange"
|
||||
@on-key-press="onKeyPress"
|
||||
@close="simpleShow = false"
|
||||
:input="inputValue"
|
||||
:maxLength="30"
|
||||
/>
|
||||
<SimpleKeyboard
|
||||
v-show="simpleShow1"
|
||||
v-model="inputValue1"
|
||||
ref="keyboardClass1"
|
||||
keyboardClass="keyboardClass1"
|
||||
@on-change="onChange1"
|
||||
@on-key-press="onKeyPress1"
|
||||
@close="simpleShow1 = false"
|
||||
:input="inputValue1"
|
||||
:maxLength="30"
|
||||
/>
|
||||
<SimpleKeyboard
|
||||
v-show="simpleShow2"
|
||||
v-model="inputValue2"
|
||||
ref="keyboardClass2"
|
||||
keyboardClass="keyboardClass2"
|
||||
@on-change="onChange2"
|
||||
@on-key-press="onKeyPress2"
|
||||
@close="simpleShow2 = false"
|
||||
:input="inputValue2"
|
||||
:maxLength="30"
|
||||
/>
|
||||
<SimpleKeyboard
|
||||
v-show="simpleShow3"
|
||||
v-model="inputValue3"
|
||||
ref="keyboardClass3"
|
||||
keyboardClass="keyboardClass3"
|
||||
@on-change="onChange3"
|
||||
@on-key-press="onKeyPress3"
|
||||
@close="simpleShow3 = false"
|
||||
:input="inputValue3"
|
||||
:maxLength="30"
|
||||
/>
|
||||
<!-- <KeysInput ref="keysInput" @input="updateInputValue" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { workOrderList, scrapDetList, createScrap, authList } from '@/api/quality'
|
||||
import SimpleKeyboard from './components/simpleKeyboard.vue'
|
||||
import { getUserId } from '@/utils/auth'
|
||||
// import KeysInput from './components/keyboard'
|
||||
|
||||
export default {
|
||||
components: { SimpleKeyboard },
|
||||
data () {
|
||||
return {
|
||||
// form: {
|
||||
// data: '11'
|
||||
// },
|
||||
ruleForm: {
|
||||
workOrderId: '',
|
||||
num: '',
|
||||
detId: '',
|
||||
detName: [],
|
||||
lineId: undefined,
|
||||
sectionId: undefined,
|
||||
remark: undefined,
|
||||
source: 1,
|
||||
logTime: new Date().getTime()
|
||||
},
|
||||
show: false,
|
||||
simpleShow: false,
|
||||
simpleShow1: false,
|
||||
simpleShow2: false,
|
||||
simpleShow3: false,
|
||||
input: null,
|
||||
inputEle: null,
|
||||
inputEle1: null,
|
||||
inputEle2: null,
|
||||
inputEle3: null,
|
||||
// field: '',
|
||||
workOrderList: [],
|
||||
lineArray: [],
|
||||
scrapList: [],
|
||||
sectionArray: [],
|
||||
disabled: true,
|
||||
subIconUrl: require('@/assets/sub-right.png'),
|
||||
rules: {
|
||||
// workOrderId: [
|
||||
// { required: true, message: '请选择工单', trigger: 'change' }
|
||||
// ],
|
||||
// num: [
|
||||
// { required: true, message: '请输入报废数量', trigger: 'blur' }
|
||||
// ],
|
||||
// detName: [
|
||||
// { required: true, message: '请选择报废原因', trigger: 'change' }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
ruleForm: {
|
||||
handler (val) {
|
||||
console.log('场次', val)
|
||||
if (val.workOrderId && val.num && val.detName.length > 0) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
// immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputValue: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (value) {
|
||||
this.ruleForm.workOrderId = value
|
||||
// this.$emit('inputChange', value, this.field)
|
||||
}
|
||||
},
|
||||
inputValue1: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (value) {
|
||||
this.ruleForm.lineId = value
|
||||
}
|
||||
},
|
||||
inputValue2: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (value) {
|
||||
this.ruleForm.sectionId = value
|
||||
}
|
||||
},
|
||||
inputValue3: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (value) {
|
||||
this.ruleForm.remark = value
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDict()
|
||||
this.ruleForm = {
|
||||
workOrderId: '',
|
||||
num: '',
|
||||
detId: '',
|
||||
detName: [],
|
||||
lineId: undefined,
|
||||
sectionId: undefined,
|
||||
remark: undefined,
|
||||
source: 1,
|
||||
logTime: new Date().getTime()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInputFocus (event, value) {
|
||||
// 当前input获取焦点时,显示键盘
|
||||
console.log('122', event, value)
|
||||
this.$refs.keysInput.showKeyboard = true
|
||||
// 传入绑定值(字符串)
|
||||
this.$refs.keysInput.key = event
|
||||
// 传入当前值
|
||||
this.$refs.keysInput.setKeyboardInput(value)
|
||||
},
|
||||
updateInputValue (value) {
|
||||
console.log('123232', value)
|
||||
// 根据key 回写input值
|
||||
const parameter = value.key.split('.')
|
||||
console.log('122', parameter)
|
||||
if (parameter.length === 1) {
|
||||
value.key = value.value
|
||||
} else {
|
||||
// let par0 = parameter[0]
|
||||
// let par1 = parameter[1]
|
||||
// par0.par1 = value.value
|
||||
}
|
||||
},
|
||||
refresh () {
|
||||
this.ruleForm.logTime = new Date().getTime()
|
||||
},
|
||||
getSection (value) {
|
||||
const temp = this.lineArray.filter(item => {
|
||||
return item.id === value
|
||||
})
|
||||
this.sectionArray = temp[0].children
|
||||
if (this.sectionArray.length > 0) {
|
||||
this.ruleForm.sectionId = this.sectionArray[0].id
|
||||
} else {
|
||||
this.ruleForm.sectionId = ''
|
||||
}
|
||||
// workshopSectionListByLine({ id: this.ruleForm.lineId }).then(res => {
|
||||
// this.sectionArray = res.data.data
|
||||
// })
|
||||
},
|
||||
inputFun () {
|
||||
this.$emit('input')
|
||||
},
|
||||
showNumber () {
|
||||
this.show = true
|
||||
this.simpleShow = false
|
||||
this.simpleShow1 = false
|
||||
this.simpleShow2 = false
|
||||
this.simpleShow3 = false
|
||||
},
|
||||
focusInput (e) {
|
||||
this.inputEle = e.srcElement
|
||||
// 关闭所有keyboard
|
||||
// const arr = document.querySelectorAll('.hg-theme-default')
|
||||
// arr.forEach((ele) => {
|
||||
// ele.style.visibility = 'hidden'
|
||||
// })
|
||||
// // 打开当前输入框的keyboard
|
||||
// const currentKeyborad = this.$refs[this.keyboardClass]
|
||||
// currentKeyborad.$el.style.visibility = 'visible'
|
||||
this.simpleShow = true
|
||||
this.simpleShow1 = false
|
||||
this.simpleShow2 = false
|
||||
this.simpleShow3 = false
|
||||
this.show = false
|
||||
// this.$emit('focus')
|
||||
},
|
||||
focusInput1 (e) {
|
||||
this.inputEle1 = e.srcElement
|
||||
this.simpleShow1 = true
|
||||
this.simpleShow = false
|
||||
this.simpleShow2 = false
|
||||
this.simpleShow3 = false
|
||||
this.show = false
|
||||
},
|
||||
focusInput2 (e) {
|
||||
this.inputEle2 = e.srcElement
|
||||
this.simpleShow2 = true
|
||||
this.simpleShow1 = false
|
||||
this.simpleShow = false
|
||||
this.simpleShow3 = false
|
||||
this.show = false
|
||||
},
|
||||
focusInput3 (e) {
|
||||
this.inputEle3 = e.srcElement
|
||||
this.simpleShow3 = true
|
||||
this.simpleShow2 = false
|
||||
this.simpleShow1 = false
|
||||
this.simpleShow = false
|
||||
this.show = false
|
||||
},
|
||||
onChange1 (input) {
|
||||
this.inputValue1 = input
|
||||
this.$set(this.ruleForm, 'lineId', input)
|
||||
// 解决当输入框为密码输入框时,切换显示/隐藏密码,光标在开头问题,注意:element-ui版本号需为2.15.2及以上
|
||||
this.inputEle1.focus()
|
||||
},
|
||||
onChange2 (input) {
|
||||
this.inputValue2 = input
|
||||
this.$set(this.ruleForm, 'sectionId', input)
|
||||
// 解决当输入框为密码输入框时,切换显示/隐藏密码,光标在开头问题,注意:element-ui版本号需为2.15.2及以上
|
||||
this.inputEle2.focus()
|
||||
},
|
||||
onChange3 (input) {
|
||||
this.inputValue3 = input
|
||||
// this.$set(this.ruleForm, 'remark', input)
|
||||
// 解决当输入框为密码输入框时,切换显示/隐藏密码,光标在开头问题,注意:element-ui版本号需为2.15.2及以上
|
||||
this.inputEle3.focus()
|
||||
},
|
||||
onChange (input) {
|
||||
this.inputValue = input
|
||||
this.$set(this.ruleForm, 'workOrderId', input)
|
||||
console.log('输出', input)
|
||||
// 解决当输入框为密码输入框时,切换显示/隐藏密码,光标在开头问题,注意:element-ui版本号需为2.15.2及以上
|
||||
// this.inputEle.focus()
|
||||
},
|
||||
onKeyPress3 (button) {
|
||||
console.log('onKeyPress', button)
|
||||
},
|
||||
onKeyPress2 (button) {
|
||||
console.log('onKeyPress', button)
|
||||
},
|
||||
onKeyPress1 (button) {
|
||||
console.log('onKeyPress', button)
|
||||
},
|
||||
onKeyPress (button) {
|
||||
console.log('onKeyPress', button)
|
||||
},
|
||||
onInput (value) {
|
||||
console.log('value', value, this.ruleForm.num)
|
||||
},
|
||||
onDelete () {
|
||||
// Toast('删除');
|
||||
},
|
||||
goback () {
|
||||
// this.$router.go(-1)
|
||||
this.$router.push({
|
||||
path: 'home'
|
||||
})
|
||||
},
|
||||
async getDict () {
|
||||
const workRes = await workOrderList()
|
||||
this.workOrderList = workRes?.data?.data
|
||||
// await lineList().then(res => {
|
||||
// this.lineArray = res?.data?.data.map(item => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// id: item.id
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
await authList({ userId: getUserId() }).then(res => {
|
||||
// console.log('res', res.data.data)
|
||||
if (res && res?.data?.data?.datas.length > 0) {
|
||||
this.lineArray = res.data.data.datas
|
||||
this.ruleForm.lineId = this.lineArray[0].id
|
||||
this.getSection(this.ruleForm.lineId)
|
||||
} else {
|
||||
this.lineArray = []
|
||||
}
|
||||
})
|
||||
const scrapRes = await scrapDetList()
|
||||
this.scrapList = scrapRes?.data?.data
|
||||
// this.scrapList.push({
|
||||
// content: '其他',
|
||||
// id: '10086'
|
||||
// })
|
||||
},
|
||||
submitForm (formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.ruleForm.detId = this.ruleForm.detName.join(',')
|
||||
createScrap(this.ruleForm).then(res => {
|
||||
console.log(res.data)
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
message: '提交成功!',
|
||||
type: 'success'
|
||||
})
|
||||
this.$router.push({
|
||||
path: 'list'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(res.data.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm (formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.labelDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
}
|
||||
.formLabelIcon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.timeDiv {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.subButton {
|
||||
background-color: #456DFF;
|
||||
width: 168px;
|
||||
height: 56px;
|
||||
box-shadow: 0px 16px 16px 0px rgba(25,70,170,0.31);
|
||||
border-radius: 31px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.el-checkbox {
|
||||
background: #EDF0FD;
|
||||
box-shadow: 0px 6px 8px 0px #D2D9E8, inset 0px 6px 6px 0px #FFFFFF;
|
||||
width: 206px;
|
||||
height: 56px;
|
||||
border-radius: 7px;
|
||||
line-height: 56px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.reson {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px !important;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.el-checkbox__label {
|
||||
padding-right: 10px !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 160px;
|
||||
line-height: 1;
|
||||
}
|
||||
.demo-ruleForm .reson .el-form-item__content {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
.resonDiv {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.whiteForm {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
}
|
||||
.el-form-item {
|
||||
margin: 0;
|
||||
}
|
||||
.demo-ruleForm .reson .el-form-item__label {
|
||||
border: none;
|
||||
}
|
||||
.demo-ruleForm .el-form-item__label {
|
||||
color: #276BFF;
|
||||
border-right: 1px solid #000000;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
margin: 11px 0;
|
||||
}
|
||||
.homeIcon {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
}
|
||||
.scrap {
|
||||
background-image: url('./../assets/quality-bg.png');
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
/* font-size: 20px; */
|
||||
}
|
||||
</style>
|
156
src/views/ScrapList.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-29 10:01:55
|
||||
* @LastEditTime: 2024-03-28 09:07:41
|
||||
* @LastEditors: DY
|
||||
* @Description: 报废列表
|
||||
-->
|
||||
<template>
|
||||
<div class="list">
|
||||
<van-row type="flex" justify="space-between">
|
||||
<van-col span="5" style="text-align: left">
|
||||
<h2>报废管理</h2>
|
||||
</van-col>
|
||||
<!-- <van-col span="4">
|
||||
<img class="homeIcon" @click="goback" src="./../assets/record.png" alt="">
|
||||
</van-col> -->
|
||||
<van-col span="8" style="text-align: right">
|
||||
<img class="homeIcon" @click="toScrap" src="./../assets/record.png" alt="">
|
||||
<img class="homeIcon" @click="goback" src="./../assets/home.png" alt="">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:header-cell-style="{ background: 'rgba(210, 220, 242, 1)', color: '#000', height: '33px' }"
|
||||
show-header
|
||||
max-height="600"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
type="index" label="序号" width="60" />
|
||||
<el-table-column v-for="(item, index) in tableProps" :key="index" :prop="item.prop" :label="item.label" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageNo"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { scrapLogList } from '@/api/quality'
|
||||
import { parseTime } from '@/utils/time'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'scrapTime',
|
||||
label: '报废时间'
|
||||
},
|
||||
{
|
||||
prop: 'lineName',
|
||||
label: '产线名称'
|
||||
},
|
||||
{
|
||||
prop: 'sectionName',
|
||||
label: '工段名称'
|
||||
},
|
||||
{
|
||||
prop: 'workOrderName',
|
||||
label: '工单名称'
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: '报废数量'
|
||||
},
|
||||
{
|
||||
prop: 'detContent',
|
||||
label: '报废原因'
|
||||
},
|
||||
{
|
||||
prop: 'sources',
|
||||
label: '来源'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ScrapList',
|
||||
data () {
|
||||
return {
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange (val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
this.listQuery.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.listQuery.pageNo = val
|
||||
this.getList()
|
||||
console.log(`当前页: ${val}`)
|
||||
},
|
||||
getList () {
|
||||
scrapLogList(this.listQuery).then(res => {
|
||||
if (res && res?.data?.code === 0) {
|
||||
this.tableData = res.data.data.list.map(item => {
|
||||
item.sources = item.source === 1 ? '平板端' : '网页端'
|
||||
item.scrapTime = parseTime(item.logTime)
|
||||
return item
|
||||
})
|
||||
this.total = res.data.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
goback () {
|
||||
this.$router.push({
|
||||
path: 'home'
|
||||
})
|
||||
},
|
||||
toScrap () {
|
||||
this.$router.push({
|
||||
path: 'scrap'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
.el-table__row--even {
|
||||
background-color: #f9fafc; /* 偶数行背景颜色 */
|
||||
}
|
||||
.el-table__row--odd {
|
||||
background-color: #a76c6c; /* 奇数行背景颜色 */
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 15px;
|
||||
float: right;
|
||||
}
|
||||
.list {
|
||||
background-image: url('./../assets/quality-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 20px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
53
src/views/components/HomePage.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-29 10:01:55
|
||||
* @LastEditTime: 2024-01-07 22:26:39
|
||||
* @LastEditors: DY
|
||||
* @Description: 首页
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
首页
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
.workDiv {
|
||||
background-color: #F2F2F2;
|
||||
font-size: 12px;
|
||||
width: 90%;
|
||||
padding: 5px 0 10px 10px;
|
||||
}
|
||||
.swipeDiv {
|
||||
padding: 10px;
|
||||
margin-bottom:20px;
|
||||
text-align: left;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.my-swipe .van-swipe-item {
|
||||
// color: #fff;
|
||||
// font-size: 20px;
|
||||
// line-height: 150px;
|
||||
margin: 0 10px;
|
||||
text-align: left;
|
||||
// background-color: #39a9ed;
|
||||
}
|
||||
.hello {
|
||||
background-color: #F7F7F7;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
176
src/views/components/SKeyboard.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div :class="keyboardClass"></div>
|
||||
</template>
|
||||
<script>
|
||||
import Keyboard from 'simple-keyboard'
|
||||
import 'simple-keyboard/build/css/index.css'
|
||||
import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文字库
|
||||
export default {
|
||||
name: 'SimpleKeyboard',
|
||||
props: {
|
||||
keyboardClass: {
|
||||
default: 'simple-keyboard',
|
||||
type: String
|
||||
},
|
||||
maxLength: { default: '' }
|
||||
},
|
||||
data: () => ({
|
||||
keyboard: null,
|
||||
displayDefault: {
|
||||
'{bksp}': 'backspace',
|
||||
'{lock}': '切换',
|
||||
'{enter}': '> enter',
|
||||
'{tab}': 'tab',
|
||||
'{shift}': 'shift',
|
||||
'{change}': '中文',
|
||||
'{space}': ' ',
|
||||
'{clear}': '清空',
|
||||
'{close}': '关闭'
|
||||
}
|
||||
}),
|
||||
mounted () {
|
||||
this.keyboard = new Keyboard(this.keyboardClass, {
|
||||
onChange: this.onChange,
|
||||
onKeyPress: this.onKeyPress,
|
||||
layoutCandidates: layout.layoutCandidates,
|
||||
layout: {
|
||||
// 默认布局
|
||||
default: [
|
||||
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
'{tab} q w e r t y u i o p [ ] \\',
|
||||
"{lock} a s d f g h j k l ; ' {enter}",
|
||||
'{shift} z x c v b n m , . / {clear}',
|
||||
'{change} {space} {close}'
|
||||
],
|
||||
// shift布局
|
||||
shift: [
|
||||
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
|
||||
'{tab} Q W E R T Y U I O P { } |',
|
||||
'{lock} A S D F G H J K L : " {enter}',
|
||||
'{shift} Z X C V B N M < > ? {clear}',
|
||||
'{change} {space} {close}'
|
||||
]
|
||||
},
|
||||
// 按钮展示文字
|
||||
display: this.displayDefault,
|
||||
// 按钮样式
|
||||
buttonTheme: [
|
||||
{
|
||||
class: 'hg-red close',
|
||||
buttons: '{close}'
|
||||
},
|
||||
{
|
||||
class: 'change',
|
||||
buttons: '{change}'
|
||||
}
|
||||
],
|
||||
// 输入限制长度
|
||||
maxLength: this.maxLength
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onChange (input) {
|
||||
this.$emit('on-change', input) // 输入值向外传递
|
||||
},
|
||||
// 重写清空按钮
|
||||
onChangeKey () {
|
||||
this.keyboard.setInput('')
|
||||
this.$emit('empty')
|
||||
},
|
||||
// @focus 触发时赋值 封装组件调用
|
||||
onChangeFocus (value) {
|
||||
this.keyboard.setInput(value)
|
||||
},
|
||||
// 点击键盘
|
||||
onKeyPress (button, $event) {
|
||||
// 点击关闭
|
||||
if (button === '{close}') {
|
||||
// 子组件调用父组件的关闭按钮方法
|
||||
this.$parent.closekeyboard()
|
||||
return false
|
||||
} else if (button === '{change}') {
|
||||
// 切换中英文输入法
|
||||
if (this.keyboard.options.layoutCandidates !== null) {
|
||||
this.$set(this.displayDefault, '{change}', '英文')
|
||||
// 切换至英文
|
||||
this.keyboard.setOptions({
|
||||
layoutCandidates: null,
|
||||
display: this.displayDefault
|
||||
})
|
||||
} else {
|
||||
// 切换至中文
|
||||
this.$set(this.displayDefault, '{change}', '中文')
|
||||
this.keyboard.setOptions({
|
||||
layoutCandidates: layout.layoutCandidates,
|
||||
display: this.displayDefault
|
||||
})
|
||||
}
|
||||
} else if (button === '{clear}') {
|
||||
this.onChangeKey()
|
||||
} else {
|
||||
const value = $event.target.offsetParent.parentElement.children[0].children[0].value
|
||||
// 输入框有默认值时,覆写
|
||||
if (value) {
|
||||
this.keyboard.setInput(value)
|
||||
}
|
||||
this.$emit('on-key-press', button)
|
||||
}
|
||||
if (button === '{shift}' || button === '{lock}') this.handleShift()
|
||||
},
|
||||
// 切换shift/默认布局
|
||||
handleShift () {
|
||||
const currentLayout = this.keyboard.options.layoutName
|
||||
const shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less"> //这块样式可以根据自己的需求调整
|
||||
@deep: ~'>>>';
|
||||
.hg-candidate-box{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
font-size: 42px;
|
||||
background: rgba(256, 256, 256);
|
||||
z-index: 9999;
|
||||
.hg-candidate-box-list{
|
||||
.hg-candidate-box-list-item{
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.hg-rows{
|
||||
width: 100% !important;
|
||||
.hg-row {
|
||||
height: 50px;
|
||||
.hg-button{
|
||||
height: 50px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.hg-theme-default {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
.hg-button {
|
||||
&.hg-red {
|
||||
background: #3e87db;
|
||||
color: white;
|
||||
&.close {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
&.change {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
74
src/views/components/keyboard.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-04-03 15:01:04
|
||||
* @LastEditTime: 2024-04-07 15:14:39
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div v-show="showKeyboard" >
|
||||
<SimpleKeyboard ref="refSimpleKeyboard" class="Keyboard" @onChange="onChangeKeyboard" @empty="empty" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SimpleKeyboard from './SKeyboard.vue'
|
||||
export default {
|
||||
name: 'Keyboard',
|
||||
components: {
|
||||
SimpleKeyboard
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showKeyboard: false, // 键盘默认隐藏
|
||||
value: '',
|
||||
key: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
key (val) {
|
||||
this.key = val
|
||||
if (this.showKeyboard) {
|
||||
this.showKeyboard = false
|
||||
setTimeout(() => {
|
||||
this.showKeyboard = true
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// inpuit获取焦点显示虚拟键盘
|
||||
onInputFocus (res) {
|
||||
this.showKeyboard = true
|
||||
},
|
||||
// 给输入框赋值
|
||||
onChangeKeyboard (input) {
|
||||
this.$emit('input', { value: input, key: this.key })
|
||||
},
|
||||
// 隐藏键盘 父组件调用
|
||||
closeInputFocus () {
|
||||
this.showKeyboard = false
|
||||
},
|
||||
// 隐藏键盘 子组件调用
|
||||
closekeyboard () {
|
||||
this.showKeyboard = false
|
||||
},
|
||||
// 清空输入框
|
||||
empty () {
|
||||
this.$emit('input', { value: '', key: this.key })
|
||||
},
|
||||
// 给虚拟键盘赋当前输入框的值
|
||||
setKeyboardInput (input) {
|
||||
console.log('给虚拟键盘赋当前输入框的值', input)
|
||||
this.$refs.refSimpleKeyboard.onChangeFocus(input)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 键盘样式
|
||||
.Keyboard{
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
160
src/views/components/simpleKeyboard.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div :class="keyboardClass"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Keyboard from 'simple-keyboard'
|
||||
import 'simple-keyboard/build/css/index.css'
|
||||
import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法
|
||||
|
||||
export default {
|
||||
name: 'SimpleKeyboard',
|
||||
props: {
|
||||
keyboardClass: {
|
||||
default: 'simple-keyboard',
|
||||
type: String
|
||||
},
|
||||
input: {
|
||||
default: ''
|
||||
},
|
||||
maxLength: { default: '' }
|
||||
},
|
||||
data: () => ({
|
||||
keyboard: null,
|
||||
displayDefault: {
|
||||
'{bksp}': 'backspace',
|
||||
'{lock}': 'caps',
|
||||
'{enter}': '> enter',
|
||||
'{tab}': 'tab',
|
||||
'{shift}': 'shift',
|
||||
'{change}': '英文',
|
||||
'{space}': ' ',
|
||||
'{clear}': '清空',
|
||||
'{close}': '关闭'
|
||||
}
|
||||
}),
|
||||
mounted () {
|
||||
this.keyboard = new Keyboard(this.keyboardClass, {
|
||||
onChange: this.onChange,
|
||||
onKeyPress: this.onKeyPress,
|
||||
layoutCandidates: layout.layoutCandidates,
|
||||
layout: {
|
||||
// 默认布局
|
||||
default: [
|
||||
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
'{tab} q w e r t y u i o p [ ] \\',
|
||||
"{lock} a s d f g h j k l ; ' {enter}",
|
||||
'{shift} z x c v b n m , . / {clear}',
|
||||
'{change} {space} {close}'
|
||||
],
|
||||
// shift布局
|
||||
shift: [
|
||||
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
|
||||
'{tab} Q W E R T Y U I O P { } |',
|
||||
'{lock} A S D F G H J K L : " {enter}',
|
||||
'{shift} Z X C V B N M < > ? {clear}',
|
||||
'{change} {space} {close}'
|
||||
]
|
||||
},
|
||||
// 按钮展示文字
|
||||
display: this.displayDefault,
|
||||
// 按钮样式
|
||||
buttonTheme: [
|
||||
{
|
||||
class: 'hg-red close',
|
||||
buttons: '{close}'
|
||||
},
|
||||
{
|
||||
class: 'change',
|
||||
buttons: '{change}'
|
||||
}
|
||||
],
|
||||
// 输入限制长度
|
||||
maxLength: this.maxLength
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onChange (input) {
|
||||
this.keyboard.setInput(input)
|
||||
this.$emit('on-change', input)
|
||||
console.log('nihc', input)
|
||||
},
|
||||
// 点击键盘
|
||||
onKeyPress (button, $event) {
|
||||
// 点击关闭
|
||||
if (button === '{close}') {
|
||||
// const keyboard = $event.path[3]
|
||||
// keyboard.style.visibility = 'hidden'
|
||||
this.$emit('close')
|
||||
return false
|
||||
} else if (button === '{change}') {
|
||||
// 切换中英文输入法
|
||||
if (this.keyboard.options.layoutCandidates !== null) {
|
||||
this.$set(this.displayDefault, '{change}', '中文')
|
||||
// 切换至英文
|
||||
this.keyboard.setOptions({
|
||||
layoutCandidates: null,
|
||||
display: this.displayDefault
|
||||
})
|
||||
} else {
|
||||
// 切换至中文
|
||||
this.$set(this.displayDefault, '{change}', '英文')
|
||||
this.keyboard.setOptions({
|
||||
layoutCandidates: layout.layoutCandidates,
|
||||
display: this.displayDefault
|
||||
})
|
||||
}
|
||||
} else if (button === '{clear}') {
|
||||
this.keyboard.clearInput()
|
||||
} else {
|
||||
const value =
|
||||
$event.target.offsetParent.parentElement.children[0].children[0]
|
||||
.value
|
||||
// 输入框有默认值时,覆写
|
||||
if (value) {
|
||||
this.keyboard.setInput(value)
|
||||
}
|
||||
this.$emit('on-key-press', button)
|
||||
}
|
||||
if (button === '{shift}' || button === '{lock}') this.handleShift()
|
||||
},
|
||||
// 切换shift/默认布局
|
||||
handleShift () {
|
||||
const currentLayout = this.keyboard.options.layoutName
|
||||
const shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
input (input) {
|
||||
this.keyboard.setInput(input)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@deep: ~'>>>';
|
||||
.hg-theme-default {
|
||||
width: 100%;
|
||||
margin-top: -10px;
|
||||
z-index: 1;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
.hg-button {
|
||||
&.hg-red {
|
||||
background: #db3e5d;
|
||||
color: white;
|
||||
&.close {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
&.change {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,4 +1,25 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-12-27 16:41:40
|
||||
* @LastEditTime: 2024-01-09 10:20:47
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
transpileDependencies: true,
|
||||
publicPath: './',
|
||||
// 配置代理服务器
|
||||
devServer: {
|
||||
// proxy: {
|
||||
// '/api': {
|
||||
// target: 'http://192.168.0.33:48082',
|
||||
// ws: true,
|
||||
// changeOrigin: true,
|
||||
// pathRewrite: {
|
||||
// '^/portapi': ''
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
})
|
||||
|