Compare commits

...

15 Commits
master ... zjl

Author SHA1 Message Date
helloDy
3e7ba1f519 质量 2024-04-22 09:43:02 +08:00
helloDy
4d87bcbd5b bug 2024-03-29 08:49:43 +08:00
gtz
9f45efb1de flex 2024-01-30 16:30:33 +08:00
gtz
890f9f4fb7 Merge branch 'dy' of git.picaiba.com:mt-fe-group/xc-pad into dy 2024-01-30 16:25:43 +08:00
helloDy
d290da2b80 字体 2024-01-30 16:25:15 +08:00
gtz
d0ee6eb354 Merge branch 'dy' of git.picaiba.com:mt-fe-group/xc-pad into dy 2024-01-30 14:52:46 +08:00
helloDy
2403dc64ef bud 2024-01-30 14:46:05 +08:00
gtz
292b795bd1 Merge branch 'dy' of git.picaiba.com:mt-fe-group/xc-pad into dy 2024-01-30 09:00:32 +08:00
helloDy
2d1126512c 产线工段 2024-01-30 08:59:46 +08:00
gtz
0769e77c53 1 2024-01-29 18:39:20 +08:00
gtz
4ece565d5a 1 2024-01-29 18:38:19 +08:00
helloDy
53caddfa1e 改动 2024-01-29 18:02:09 +08:00
helloDy
c5f4949678 报废管理 2024-01-17 17:08:55 +08:00
helloDy
e1bb664c53 request 2024-01-11 10:35:52 +08:00
helloDy
d25abf3b18 mes 平板端 2024-01-10 17:58:43 +08:00
51 changed files with 3386 additions and 239 deletions

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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
View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/back.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/assets/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/cancel.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 374 B

BIN
src/assets/cancel1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/cancel2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/form1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/form2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 914 B

BIN
src/assets/form3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

BIN
src/assets/form4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 793 B

BIN
src/assets/form5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 692 B

BIN
src/assets/form6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 918 B

BIN
src/assets/form7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 595 B

BIN
src/assets/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/assets/home_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 413 KiB

BIN
src/assets/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

BIN
src/assets/login-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/modal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

BIN
src/assets/mountain.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/quality-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

BIN
src/assets/quality.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/record.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/assets/refresh.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 B

BIN
src/assets/reset.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 B

BIN
src/assets/scrap.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/transparent.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

BIN
src/assets/xcac.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -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,

View File

@ -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
View 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
View 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
View 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
}

View File

@ -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
View 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-ui2.15.2
this.inputEle1.focus()
},
onChange (input) {
this.inputValue = input
this.$set(this.username, input)
// /element-ui2.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
View 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
View 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-ui2.15.2
this.inputEle1.focus()
},
onChange2 (input) {
this.inputValue2 = input
this.$set(this.ruleForm, 'sectionId', input)
// /element-ui2.15.2
this.inputEle2.focus()
},
onChange3 (input) {
this.inputValue3 = input
// this.$set(this.ruleForm, 'remark', input)
// /element-ui2.15.2
this.inputEle3.focus()
},
onChange (input) {
this.inputValue = input
this.$set(this.ruleForm, 'workOrderId', input)
console.log('输出', input)
// /element-ui2.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
View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -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': ''
// }
// }
// }
}
})