Compare commits
	
		
			37 Commits
		
	
	
		
			03c573d5b2
			...
			projects/l
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 10219fd841 | |||
| 74a2a3b8e5 | |||
| c3b4223e5b | |||
| 070e01c2c4 | |||
| 2665b6a0b0 | |||
| a71fb90e6a | |||
| ac85c83cf9 | |||
| c2e987aee4 | |||
| 0e4ed597cd | |||
| 3e7914ac91 | |||
| 9c19a6197a | |||
| 074b35b6a6 | |||
| 9be57ad750 | |||
| f7313c5911 | |||
| a7e81ad8fb | |||
| 32cbf9076f | |||
| 9a411cc663 | |||
|  | 445a88e540 | ||
|  | 2b355aaf8f | ||
| f60a46ed1d | |||
| 2688896660 | |||
|  | 4a67e226e1 | ||
|  | 11ee0d6541 | ||
| 98b3237c9a | |||
|  | 46aaa47e07 | ||
| ca0f62b2eb | |||
| 5534104e87 | |||
| b72fe1bfed | |||
| f4493bde1c | |||
|  | d682ecc91c | ||
|  | 2b76ef7d23 | ||
| 9ec13b35b8 | |||
| 7acccd3de0 | |||
| e40f45a79a | |||
| 77083a84a1 | |||
| 9f53ea6981 | |||
| 8f634d012c | 
							
								
								
									
										2
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										2
									
								
								.env.dev
									
									
									
									
									
								
							| @@ -1,7 +1,7 @@ | ||||
| ### | ||||
|  # @Author: Do not edit | ||||
|  # @Date: 2023-08-29 09:40:39 | ||||
|  # @LastEditTime: 2023-09-18 10:44:07 | ||||
|  # @LastEditTime: 2023-10-16 09:22:52 | ||||
|  # @LastEditors: DY | ||||
|  # @Description:  | ||||
| ###  | ||||
|   | ||||
| @@ -75,7 +75,7 @@ | ||||
|     "vue-count-to": "1.0.13", | ||||
|     "vue-cropper": "0.5.8", | ||||
|     "vue-meta": "^2.4.0", | ||||
|     "vue-plugin-hiprint": "^0.0.54-fix", | ||||
|     "vue-plugin-hiprint": "0.0.54-fix", | ||||
|     "vue-quill-editor": "^3.0.6", | ||||
|     "vue-router": "3.4.9", | ||||
|     "vue-video-player": "^5.0.2", | ||||
|   | ||||
							
								
								
									
										
											BIN
										
									
								
								public/static/videos/login.webm
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								public/static/videos/login.webm
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| @@ -1,3 +1,10 @@ | ||||
| /* | ||||
|  * @Author: Do not edit | ||||
|  * @Date: 2023-08-28 15:30:53 | ||||
|  * @LastEditTime: 2023-10-13 17:08:33 | ||||
|  * @LastEditors: DY | ||||
|  * @Description:  | ||||
|  */ | ||||
| import request from '@/utils/request' | ||||
|  | ||||
| // 创建产线目前生产产品表 主要为更新 | ||||
| @@ -35,11 +42,11 @@ export function getLineBindProductLog(id) { | ||||
| } | ||||
|  | ||||
| // 获得产线目前生产产品表 主要为更新分页 | ||||
| export function getLineBindProductLogPage(query) { | ||||
| export function getLineBindProductLogPage(data) { | ||||
|   return request({ | ||||
|     url: '/base/line-bind-product-log/page', | ||||
|     method: 'get', | ||||
|     params: query | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
|   | ||||
							
								
								
									
										15
									
								
								src/assets/icons/svg/changelogo.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										15
									
								
								src/assets/icons/svg/changelogo.svg
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,15 @@ | ||||
| <?xml version="1.0" encoding="UTF-8"?> | ||||
| <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||
|     <title>状态切换备份 3</title> | ||||
|     <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||
|         <g id="icon和插图" transform="translate(-877.000000, -246.000000)"> | ||||
|             <g id="状态切换备份-3" transform="translate(885.000000, 254.000000) rotate(-270.000000) translate(-885.000000, -254.000000) translate(877.000000, 246.000000)"> | ||||
|                 <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect> | ||||
|                 <g id="错误" transform="translate(0.000000, 0.000000)" fill-rule="nonzero"> | ||||
|                     <rect id="矩形" fill="#000000" opacity="0" x="0" y="6.4293957e-15" width="16" height="16"></rect> | ||||
|                     <path d="M8,1 C11.85,1 15,4.15 15,8 C15,11.85 11.85,15 8,15 C4.15,15 1,11.85 1,8 C1,4.15 4.15,1 8,1 Z M8,2.19926499 C4.80249503,2.19926499 2.18635461,4.80959575 2.18635461,8 C2.18635461,11.1904043 4.80249503,13.800735 8,13.800735 C11.197505,13.800735 13.8136454,11.1904043 13.8136454,8 C13.8136454,4.80959575 11.197505,2.19926499 8,2.19926499 Z M9.18342887,4.39602962 C9.42080763,4.39602962 9.61773566,4.56921978 9.65474747,4.7961346 L9.66099805,4.87359881 L9.66052938,9.97276858 L10.1621026,9.47231604 C10.3071657,9.32725295 10.5223305,9.29501672 10.6985498,9.37560733 L10.7713701,9.41705393 L10.837514,9.47231606 C11.0033004,9.63810246 11.0217211,9.89545015 10.8927761,10.0815835 L10.837514,10.1477274 L9.52115984,11.4640816 C9.38457467,11.600698 9.17913638,11.6415719 9.00066062,11.5676398 C8.84450229,11.5029526 8.73591407,11.3615296 8.71120699,11.1977853 L8.70585968,11.1264012 L8.70585968,4.87359881 C8.70585968,4.60984463 8.91967469,4.39602962 9.18342887,4.39602962 Z M6.99933939,4.43236016 C7.15549771,4.49704738 7.26408594,4.63847045 7.28879302,4.80221473 L7.29414032,4.87359881 L7.29414032,11.1264012 C7.29414032,11.2530604 7.24382515,11.374532 7.15426356,11.4640936 C7.06470196,11.5536552 6.94323037,11.6039704 6.81657114,11.6039704 C6.68991191,11.6039704 6.56844032,11.5536552 6.47887872,11.4640936 C6.40722945,11.3924443 6.36069788,11.3003726 6.34495123,11.2015604 L6.33900196,11.1264012 L6.33858601,6.02634681 L5.83789738,6.52768395 C5.69283427,6.67274705 5.47766955,6.70498329 5.30145018,6.62439268 L5.22862992,6.58294608 L5.162486,6.52768394 C4.9966996,6.36189754 4.97827889,6.10454984 5.10722387,5.91841648 L5.162486,5.85227257 L6.47884017,4.53591839 C6.61542534,4.39930202 6.82086362,4.35842813 6.99933939,4.43236016 Z" id="形状结合" fill="#0B58FF"></path> | ||||
|                 </g> | ||||
|             </g> | ||||
|         </g> | ||||
|     </g> | ||||
| </svg> | ||||
| After Width: | Height: | Size: 2.7 KiB | 
							
								
								
									
										14
									
								
								src/assets/icons/svg/icon-upload.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										14
									
								
								src/assets/icons/svg/icon-upload.svg
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,14 @@ | ||||
| <?xml version="1.0" encoding="UTF-8"?> | ||||
| <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||
|     <title>上传</title> | ||||
|     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65"> | ||||
|         <g id="上传_Resources/Button" transform="translate(-12.000000, -9.000000)"> | ||||
|             <g id="上传" transform="translate(12.000000, 9.000000)"> | ||||
|                 <g id="upload" transform="translate(0.875000, 0.875000)" fill="currentColor" fill-rule="nonzero"> | ||||
|                     <path d="M5.80371094,0.138085937 C5.8953125,0.046484375 6.01699219,0 6.13867188,0 C6.26035156,0 6.38066406,0.046484375 6.47363281,0.138085937 L8.60371094,2.26953125 C8.78828125,2.45410156 8.78828125,2.75351562 8.60371094,2.93808594 C8.51484375,3.02695312 8.39589844,3.07617188 8.27011719,3.07617188 C8.14433594,3.07617188 8.02539062,3.02695312 7.93652344,2.93808594 L6.61171875,1.61328125 L6.61171875,9.51289062 C6.61171875,9.77402344 6.39980469,9.9859375 6.13867188,9.9859375 C5.87753906,9.9859375 5.665625,9.77402344 5.665625,9.51289062 L5.665625,1.61328125 L4.34082031,2.93808594 C4.15625,3.12265625 3.85683594,3.12265625 3.67363281,2.93808594 C3.4890625,2.75351562 3.4890625,2.45410156 3.67226563,2.26953125 L5.80371094,0.138085937 Z M11.7769531,7.88046875 C11.5158203,7.88046875 11.3039063,8.09238281 11.3039063,8.35351563 L11.3039063,11.025 C11.3039063,11.1794922 11.178125,11.3066406 11.0222656,11.3066406 L1.22636719,11.3066406 C1.071875,11.3066406 0.944726562,11.1808594 0.944726562,11.025 L0.944726562,8.35214844 C0.944726562,8.09101563 0.7328125,7.87910156 0.471679688,7.87910156 C0.210546875,7.87910156 0,8.09238281 0,8.35214844 L0,11.3996094 C0,11.8685547 0.381445313,12.2486328 0.849023437,12.2486328 L11.4009766,12.2486328 C11.8699219,12.2486328 12.25,11.8671875 12.25,11.3996094 L12.25,8.35214844 C12.25,8.09238281 12.0380859,7.88046875 11.7769531,7.88046875 Z" id="Shape"></path> | ||||
|                 </g> | ||||
|                 <rect id="Rectangle-49" x="0" y="0" width="14" height="14"></rect> | ||||
|             </g> | ||||
|         </g> | ||||
|     </g> | ||||
| </svg> | ||||
| After Width: | Height: | Size: 2.1 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/default-file-icon.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/default-file-icon.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.6 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/login-bg.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/login-bg.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 137 KiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/images/tuple.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/images/tuple.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 944 B | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/logo/cnbm.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/assets/logo/cnbm.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.9 KiB | 
| @@ -1,10 +1,13 @@ | ||||
| /* ===== PC DESIGN ===== */ | ||||
| $W: 1000; | ||||
| $W: 1080; | ||||
| $H: 1920; | ||||
| $picW: 438; | ||||
| $picH: 560; | ||||
| $formW: 320; | ||||
| // $picW: 438; | ||||
| // $picH: 560; | ||||
| $picW: 1080; | ||||
| $picH: 1118; | ||||
| $formW: 420; | ||||
| $tabW: $formW / 2; | ||||
| // $rowH: 56; | ||||
| $rowH: 56; | ||||
| $buttonH: 50; | ||||
|  | ||||
| @@ -15,6 +18,7 @@ $containerBgImage: '../assets/images/bg.png'; | ||||
| $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; | ||||
| @@ -22,7 +26,8 @@ $contentBgColor: #ffffff; | ||||
| // container-content-pic | ||||
| $picWidth: round($picW / $H * 100) * 1vw; | ||||
| $picHeight: inherit; | ||||
| $picImage: '../assets/images/pic.png'; | ||||
| // $picImage: '../assets/images/pic.png'; | ||||
| $picImage: '../assets/images/login-bg.png'; | ||||
| // container-content-field | ||||
| $fieldWidth: $contentWidth - $picWidth; | ||||
| $fieldHeight: inherit; | ||||
| @@ -34,231 +39,310 @@ $buttonHeight: $buttonH * 1px; | ||||
|  | ||||
| // - - - - - 页面基础设置 | ||||
| .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; | ||||
|     background-color: #ffffff; | ||||
|     box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07); | ||||
|     border-radius: 20px; | ||||
|     // 定位 | ||||
|     position: relative; | ||||
|     .pic { | ||||
|       // 元素 | ||||
|       width: $picWidth; | ||||
|       height: $picHeight; | ||||
|       background-image: url($picImage); | ||||
|       background-repeat: no-repeat; | ||||
|       background-size: cover; | ||||
|       border-radius: 20px 0 0 20px; | ||||
|       // 定位 | ||||
|       position: absolute; | ||||
|       top: 0; | ||||
|       left: 0; | ||||
|     } | ||||
|     .field { | ||||
|       width: $fieldWidth; | ||||
|       height: $fieldHeight; | ||||
|       // 定位 | ||||
|       position: absolute; | ||||
|       top: 0; | ||||
|       left: $picWidth; | ||||
|       display:flex; | ||||
|       justify-content: center; | ||||
|       align-items: center; | ||||
|       .pc-title{ width: 100%; clear: both;} | ||||
|       .mobile-title, | ||||
|       .mobile-switch { | ||||
|         display: none; | ||||
|       } | ||||
|       .form { | ||||
|         box-sizing: border-box; | ||||
|         width: $formWidth; | ||||
|         // - - - tab | ||||
|         :deep(.el-tabs__content) { | ||||
|           padding: 20px 0 0; | ||||
|         } | ||||
|         :deep(.el-tabs__item) { | ||||
|           // 元素 | ||||
|           width: $tabWidth; | ||||
|           height: $rowHeight; | ||||
|           padding: 0; | ||||
|           // 文字 | ||||
|           line-height: $rowHeight; | ||||
|           color: #666666; | ||||
|         } | ||||
|         :deep(.el-tabs__item.is-active) { | ||||
|           font-weight: bold; | ||||
|           color: #2F53EB; | ||||
|         } | ||||
|         :deep(.el-tabs__active-bar) { | ||||
|           height: 3px; | ||||
|           border-radius: 2px; | ||||
|         } | ||||
|         // - - - input | ||||
|         :deep(.el-input__inner) { | ||||
|           // 元素 | ||||
|           width: 100%; | ||||
|           height: $rowHeight; | ||||
|           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: 20px; | ||||
|           color: #FFFFFF; | ||||
|         } | ||||
|         .button-active { | ||||
|           background: #2F53EB; | ||||
|           box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2); | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   .footer { | ||||
|     // 元素 | ||||
|     height: 16px; | ||||
|     line-height: 16px; | ||||
|     font-size: 12px; | ||||
|     color: #8c8c8c; | ||||
|     // 定位 | ||||
|     position: absolute; | ||||
|     bottom: 30px; | ||||
|     a, | ||||
|     a:hover, | ||||
|     a:active { | ||||
|       color: inherit; | ||||
|       text-decoration: none; | ||||
|     } | ||||
|   } | ||||
| 	.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 16px 40px rgba(0, 0, 0, 0.07); | ||||
| 		// border-radius: 20px; | ||||
| 		// 定位 | ||||
| 		position: relative; | ||||
| 		display: flex; | ||||
|  | ||||
| 		.pic { | ||||
| 			// 元素 | ||||
| 			width: $picWidth; | ||||
| 			height: $picHeight; | ||||
| 			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 { | ||||
| 			// background: #ccc3; | ||||
| 			position: relative; | ||||
| 			padding-top: 196px; | ||||
| 			flex: 1; | ||||
| 			display: flex; | ||||
| 			flex-direction: column; | ||||
| 			// justify-content: center; | ||||
| 			align-items: center; | ||||
| 			.pc-title { | ||||
| 				width: 100%; | ||||
| 				text-align: center; | ||||
| 				clear: both; | ||||
| 				position: relative; | ||||
| 				top: -36px; | ||||
|  | ||||
| 				// h3.title { | ||||
| 				// 	position: relative; | ||||
|  | ||||
| 				// 	&::before { | ||||
| 				// 		content: ''; | ||||
| 				// 		background: url($cnbmLogo) 100% / 100% no-repeat; | ||||
| 				// 		height: 48px; | ||||
| 				// 		width: 48px; | ||||
| 				// 		position: absolute; | ||||
| 				// 		left: 0px; | ||||
| 				// 		top: 4px; | ||||
| 				// 		display: inline-block; | ||||
| 				// 	} | ||||
| 				// } | ||||
| 			} | ||||
| 			.mobile-title, | ||||
| 			.mobile-switch { | ||||
| 				display: none; | ||||
| 			} | ||||
| 			.form { | ||||
| 				margin-top: 32px; | ||||
| 				box-sizing: border-box; | ||||
| 				// width: $formWidth; | ||||
| 				width: 100%; | ||||
| 				// - - - tab | ||||
| 				:deep(.el-tabs__nav) { | ||||
| 					// background: #f0f3; | ||||
| 				} | ||||
| 				:deep(.el-tabs__content) { | ||||
| 					padding: 20px 0 0; | ||||
| 				} | ||||
| 				:deep(.el-tabs__item) { | ||||
| 					user-select: none; | ||||
| 					// 元素 | ||||
| 					width: $tabWidth; | ||||
| 					height: $rowHeight; | ||||
| 					padding: 0; | ||||
| 					// 文字 | ||||
| 					line-height: $rowHeight; | ||||
| 					color: #666666; | ||||
| 					font-size: 18px; | ||||
| 					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; | ||||
| 					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: 20px; | ||||
| 					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: 66px; | ||||
| 			color: #262626; | ||||
| 			font-size: 18px; | ||||
| 		} | ||||
| 		:deep(.el-checkbox__label) { | ||||
| 			font-size: 18px; | ||||
| 			line-height: 14px; | ||||
| 		} | ||||
| 	} | ||||
|  | ||||
| 	.footer { | ||||
| 		user-select: none; | ||||
| 		// 元素 | ||||
| 		height: 16px; | ||||
| 		line-height: 16px; | ||||
| 		font-size: 12px; | ||||
| 		color: #8c8c8c; | ||||
| 		// 定位 | ||||
| 		position: absolute; | ||||
| 		bottom: 30px; | ||||
| 		a, | ||||
| 		a:hover, | ||||
| 		a:active { | ||||
| 			color: inherit; | ||||
| 			text-decoration: none; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  | ||||
| // - - - - - PC 最小尺寸设置 | ||||
| @media screen and (min-width: 599px) and (max-width: 1366px) { | ||||
|   .container { | ||||
|     .content { | ||||
|       width: 710px; | ||||
|       height: 397px; | ||||
|       .pic { | ||||
|         width: 314px; | ||||
|       } | ||||
|       .field { | ||||
|         width: calc(710px - 314px); | ||||
|         left: 314px; | ||||
|         .form { | ||||
|           width: 320px; | ||||
|           :deep(.el-input__inner) { | ||||
|             width: 320px; | ||||
|             height: 56px; | ||||
|           } | ||||
|           .button { | ||||
|             height: 50px; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 	.container { | ||||
| 		min-width: 599px; | ||||
| 		.content { | ||||
| 			// width: 710px; | ||||
| 			// height: 397px; | ||||
| 			width: 100%; | ||||
| 			height: 100%; | ||||
| 			.pic { | ||||
| 				// width: 314px; | ||||
| 				display: none; | ||||
| 			} | ||||
| 			.field { | ||||
| 				// 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; | ||||
| 					} | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  | ||||
| /* ===== MOBILE DESIGN ===== */ | ||||
| $mobileW: 375; | ||||
| @@ -273,115 +357,142 @@ $mobileButtonH: 48; | ||||
| $mobileContainerBgImage: '../assets/images/bg-mobile.png'; | ||||
| // container-content | ||||
| $mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw; | ||||
| $mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth; | ||||
| $mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * | ||||
| 	$mobileContentWidth; | ||||
| // container-content-field-form | ||||
| $mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw; | ||||
| $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: 17px; | ||||
|     font-family: PingFang SC; | ||||
|     font-weight: bold; | ||||
|     .logo { | ||||
|       display: none; | ||||
|     } | ||||
| 	.container { | ||||
| 		// 元素 | ||||
| 		background-image: url($mobileContainerBgImage); | ||||
| 		min-width: 280px; | ||||
| 		min-height: 568px; | ||||
| 		// 文字 | ||||
| 		font-size: 14px; | ||||
| 		font-family: PingFang SC; | ||||
| 		font-weight: bold; | ||||
| 		.logo { | ||||
| 			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 { | ||||
|         // 元素 | ||||
|         width: inherit; | ||||
|         min-height: inherit; | ||||
|         // 定位 | ||||
|         left: 0; | ||||
|         display: flex; | ||||
|         flex-direction: column; | ||||
|         .mobile-title { | ||||
|           // 元素 | ||||
|           margin: 0 0 20px; | ||||
|           display: block; | ||||
|         } | ||||
|         .form { | ||||
|           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; | ||||
|           } | ||||
|         } | ||||
|         .mobile-switch { | ||||
|           display: block; | ||||
|           line-height: 20px; | ||||
|           font-size: 14px; | ||||
|           font-weight: 400; | ||||
|           color: #595959; | ||||
| 		.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; | ||||
|           .icon { | ||||
|             width: 14px; | ||||
|             height: 14px; | ||||
|             display: inline-block; | ||||
|             background-image: url($iconBgImage); | ||||
|             background-size: cover; | ||||
|           } | ||||
|         } | ||||
|         .mobile-switch:hover { | ||||
|           cursor: pointer; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     .footer { | ||||
|       // 元素 | ||||
|       font-size: 12px; | ||||
|       font-family: PingFang SC; | ||||
|       font-weight: 400; | ||||
|       line-height: 17px; | ||||
|       color: #333333; | ||||
|       opacity: 0.6; | ||||
|       // 定位 | ||||
|       position: absolute; | ||||
|       bottom: 20px; | ||||
|     } | ||||
|   } | ||||
| 					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: 12px; | ||||
| 			font-family: PingFang SC; | ||||
| 			font-weight: 400; | ||||
| 			line-height: 17px; | ||||
| 			color: #333333; | ||||
| 			opacity: 0.6; | ||||
| 			// 定位 | ||||
| 			// position: absolute; | ||||
| 			bottom: -32px; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|   | ||||
| @@ -10,6 +10,8 @@ | ||||
| 		ref="form" | ||||
| 		:model="form" | ||||
| 		:label-width="`${labelWidth}px`" | ||||
| 		:size="size" | ||||
| 		:label-position="labelPosition" | ||||
| 		v-loading="formLoading"> | ||||
| 		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> | ||||
| 			<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> | ||||
| @@ -46,23 +48,6 @@ | ||||
| 						:placeholder="`请选择${col.label}`" | ||||
| 						value-format="timestamp" | ||||
| 						v-bind="col.bind"></el-date-picker> | ||||
| 					<el-upload | ||||
| 						class="upload-in-dialog" | ||||
| 						v-if="col.upload" | ||||
| 						:file-list="uploadedFileList" | ||||
| 						:action="col.url" | ||||
| 						:on-success="handleUploadSuccess" | ||||
| 						v-bind="col.bind"> | ||||
| 						<el-button | ||||
| 							size="small" | ||||
| 							type="primary" | ||||
| 							:disabled="col.bind?.disabled || false"> | ||||
| 							点击上传 | ||||
| 						</el-button> | ||||
| 						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips"> | ||||
| 							{{ col.uploadTips || '只能上传jpg/png文件,大小不超过2MB' }} | ||||
| 						</div> | ||||
| 					</el-upload> | ||||
| 					<el-switch | ||||
| 						v-if="col.switch" | ||||
| 						v-model="form[col.prop]" | ||||
| @@ -74,6 +59,47 @@ | ||||
| 						:key="col.key" | ||||
| 						:is="col.subcomponent" | ||||
| 						:inlineStyle="col.style"></component> | ||||
|  | ||||
| 					<div | ||||
| 						class="upload-area" | ||||
| 						:class="uploadOpen ? '' : 'height-48'" | ||||
| 						ref="uploadArea" | ||||
| 						v-if="col.upload"> | ||||
| 						<span class="close-icon" :class="uploadOpen ? 'open' : ''"> | ||||
| 							<el-button | ||||
| 								type="text" | ||||
| 								icon="el-icon-arrow-right" | ||||
| 								@click="handleFilesOpen" /> | ||||
| 						</span> | ||||
| 						<!-- :file-list="uploadedFileList" --> | ||||
| 						<el-upload | ||||
| 							class="upload-in-dialog" | ||||
| 							v-if="col.upload" | ||||
| 							:action="uploadUrl" | ||||
| 							:headers="uploadHeaders" | ||||
| 							:show-file-list="false" | ||||
| 							icon="el-icon-upload2" | ||||
| 							:before-upload="beforeUpload" | ||||
| 							:on-success="handleUploadSuccess" | ||||
| 							v-bind="col.bind"> | ||||
| 							<el-button size="mini" :disabled="col.bind?.disabled || false"> | ||||
| 								<svg-icon | ||||
| 									icon-class="icon-upload" | ||||
| 									style="color: inherit"></svg-icon> | ||||
| 								上传文件 | ||||
| 							</el-button> | ||||
| 							<div class="el-upload__tip" slot="tip" v-if="col.uploadTips"> | ||||
| 								{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }} | ||||
| 							</div> | ||||
| 						</el-upload> | ||||
|  | ||||
| 						<uploadedFile | ||||
| 							class="file" | ||||
| 							v-for="file in form[col.prop] || []" | ||||
| 							:file="file" | ||||
| 							:key="file.fileUrl" | ||||
| 							@delete="handleDeleteFile(file)" /> | ||||
| 					</div> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| @@ -81,6 +107,9 @@ | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { getAccessToken } from '@/utils/auth'; | ||||
| import tupleImg from '@/assets/images/tuple.png'; | ||||
|  | ||||
| /** | ||||
|  * 找到最长的label | ||||
|  * @param {*} options | ||||
| @@ -99,6 +128,47 @@ function findMaxLabelWidth(rows) { | ||||
| 	return max; | ||||
| } | ||||
|  | ||||
| const uploadedFile = { | ||||
| 	name: 'UploadedFile', | ||||
| 	props: ['file'], | ||||
| 	data() { | ||||
| 		return {}; | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		handleDelete() { | ||||
| 			this.$emit('delete', this.file); | ||||
| 		}, | ||||
| 	}, | ||||
| 	mounted() {}, | ||||
| 	render: function (h) { | ||||
| 		return ( | ||||
| 			<div | ||||
| 				title={this.file.fileName} | ||||
| 				style={{ | ||||
| 					background: `url(${tupleImg}) no-repeat`, | ||||
| 					backgroundSize: '14px', | ||||
| 					backgroundPosition: '0 55%', | ||||
| 					paddingLeft: '20px', | ||||
| 					paddingRight: '24px', | ||||
| 					textOverflow: 'ellipsis', | ||||
| 					whiteSpace: 'nowrap', | ||||
| 					overflow: 'hidden', | ||||
| 					cursor: 'pointer', | ||||
| 					display: 'inline-block', | ||||
| 				}}> | ||||
| 				{this.file.fileName} | ||||
| 				<el-button | ||||
| 					type="text" | ||||
| 					icon="el-icon-close" | ||||
| 					style="float: right; position: relative; top: 2px; left: 8px; z-index: 100" | ||||
| 					class="dialog__upload_component__close" | ||||
| 					onClick={this.handleDelete} | ||||
| 				/> | ||||
| 			</div> | ||||
| 		); | ||||
| 	}, | ||||
| }; | ||||
|  | ||||
| export default { | ||||
| 	name: 'DialogForm', | ||||
| 	model: { | ||||
| @@ -106,7 +176,7 @@ export default { | ||||
| 		event: 'update', | ||||
| 	}, | ||||
| 	emits: ['update'], | ||||
| 	components: {}, | ||||
| 	components: { uploadedFile }, | ||||
| 	props: { | ||||
| 		rows: { | ||||
| 			type: Array, | ||||
| @@ -119,14 +189,30 @@ export default { | ||||
| 		disabled: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		} | ||||
| 		}, | ||||
| 		hasFile: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 		labelPosition: { | ||||
| 			type: String, | ||||
| 			default: 'right', | ||||
| 		}, | ||||
| 		size: { | ||||
| 			type: String, | ||||
| 			default: '', | ||||
| 		}, | ||||
| 	}, | ||||
| 	data() { | ||||
| 		return { | ||||
| 			uploadOpen: false, | ||||
| 			form: {}, | ||||
| 			formLoading: true, | ||||
| 			optionListOf: {}, | ||||
| 			uploadedFileList: [], | ||||
| 			dataLoaded: false, | ||||
| 			uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() }, | ||||
| 			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers,url都是固定的 | ||||
| 		}; | ||||
| 	}, | ||||
| 	computed: { | ||||
| @@ -136,21 +222,10 @@ export default { | ||||
| 			return max * 20; | ||||
| 			// return max * 20 + 'px'; | ||||
| 		}, | ||||
| 		form: { | ||||
| 			get() { | ||||
| 				// if (this.dataLoaded) return this.dataForm; | ||||
| 				// else return {} | ||||
| 				return this.dataForm; | ||||
| 			}, | ||||
| 			set(val) { | ||||
| 				console.log('set form', val); | ||||
| 			}, | ||||
| 		}, | ||||
| 	}, | ||||
| 	watch: { | ||||
| 		rows: { | ||||
| 			handler() { | ||||
| 				console.log('watch triggered!'); | ||||
| 				this.$nextTick(() => { | ||||
| 					this.handleOptions('watch'); | ||||
| 				}); | ||||
| @@ -158,6 +233,16 @@ export default { | ||||
| 			deep: true, | ||||
| 			immediate: false, | ||||
| 		}, | ||||
| 		dataForm: { | ||||
| 			handler(val) { | ||||
| 				this.form = JSON.parse(JSON.stringify(val)); | ||||
| 				if (this.hasFile) { | ||||
| 					this.form.files = this.form.files ?? []; | ||||
| 				} | ||||
| 			}, | ||||
| 			deep: true, | ||||
| 			immediate: true, | ||||
| 		}, | ||||
| 	}, | ||||
| 	mounted() { | ||||
| 		// 处理 options | ||||
| @@ -273,23 +358,29 @@ export default { | ||||
| 		beforeUpload() {}, | ||||
| 		// 上传前的验证规则可通过 bind 属性传入 | ||||
| 		handleUploadSuccess(response, file, fileList) { | ||||
| 			console.log( | ||||
| 				'[dialogForm:handleUploadSuccess]', | ||||
| 				response, | ||||
| 				file, | ||||
| 				fileList, | ||||
| 				this.form | ||||
| 			); | ||||
| 			// 保存原始文件名 | ||||
| 			if ('fileNames' in this.form) this.form.fileNames.push(file.name); | ||||
| 			// 保存完整地址 | ||||
| 			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data); | ||||
| 			this.form.files.push({ | ||||
| 				fileName: file.name, | ||||
| 				fileUrl: response.data, | ||||
| 				fileType: 2, | ||||
| 			}); | ||||
| 			this.$modal.msgSuccess('上传成功'); | ||||
| 			this.$emit('update', this.form); | ||||
| 		}, | ||||
|  | ||||
| 		getFileName(fileUrl) { | ||||
| 			return fileUrl.split('/').pop(); | ||||
| 		}, | ||||
|  | ||||
| 		handleFilesOpen() { | ||||
| 			this.uploadOpen = !this.uploadOpen; | ||||
| 		}, | ||||
|  | ||||
| 		handleDeleteFile(file) { | ||||
| 			this.form.files = this.form.files.filter( | ||||
| 				(item) => item.fileUrl != file.fileUrl | ||||
| 			); | ||||
| 			this.$emit('update', this.form); | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
| @@ -299,4 +390,52 @@ export default { | ||||
| .el-select { | ||||
| 	width: 100%; | ||||
| } | ||||
|  | ||||
| .upload-area { | ||||
| 	// background: #ccc; | ||||
| 	// display: grid; | ||||
| 	// grid-auto-rows: 34px; | ||||
| 	// grid-template-columns: repeat(6, minmax(32px, max-content)); | ||||
| 	// gap: 8px; | ||||
| 	// align-items: center; | ||||
| 	position: relative; | ||||
| 	overflow: hidden; | ||||
| 	transition: height 0.3s ease-out; | ||||
| } | ||||
|  | ||||
| .upload-in-dialog { | ||||
| 	// display: inline-block; | ||||
| 	margin-right: 24px; | ||||
| 	// background: #ccc; | ||||
| 	position: relative; | ||||
| 	// top: -13px; | ||||
| 	float: left; | ||||
| } | ||||
|  | ||||
| .close-icon { | ||||
| 	// background: #ccc; | ||||
| 	position: absolute; | ||||
| 	top: 0; | ||||
| 	right: 12px; | ||||
| 	z-index: 100; | ||||
| 	transition: transform 0.3s ease-out; | ||||
| } | ||||
|  | ||||
| .close-icon.open { | ||||
| 	transform: rotateZ(90deg); | ||||
| } | ||||
| </style> | ||||
|  | ||||
| <style> | ||||
| .dialog__upload_component__close { | ||||
| 	color: #ccc; | ||||
| } | ||||
| .dialog__upload_component__close:hover { | ||||
| 	/* color: #777; */ | ||||
| 	color: red; | ||||
| } | ||||
|  | ||||
| .height-48 { | ||||
| 	height: 35px !important; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -6,7 +6,9 @@ | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| 	<div ref="dataBoard" class=""></div> | ||||
| 	<div ref="dataBoard" class="data-board"> | ||||
| 		<el-button type="text" @click="goback" class="go-back--btn">返回</el-button> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| @@ -24,39 +26,42 @@ export default { | ||||
| 			mainFooter: null, // dom | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted() { | ||||
| 		this.$nextTick(() => { | ||||
| 			this.modify(); | ||||
| 		}); | ||||
| 	}, | ||||
| 	activated() { | ||||
| 		this.modify(); | ||||
| 	}, | ||||
| 	deactivated() { | ||||
| 		this.recover(); | ||||
| 	}, | ||||
| 	beforeDestroy() { | ||||
| 		this.recover(); | ||||
| 	}, | ||||
| 	// mounted() { | ||||
| 	// 	this.$nextTick(() => { | ||||
| 	// 		this.modify(); | ||||
| 	// 	}); | ||||
| 	// }, | ||||
| 	// activated() { | ||||
| 	// 	this.modify(); | ||||
| 	// }, | ||||
| 	// deactivated() { | ||||
| 	// 	this.recover(); | ||||
| 	// }, | ||||
| 	// beforeDestroy() { | ||||
| 	// 	this.recover(); | ||||
| 	// }, | ||||
| 	methods: { | ||||
| 		modify() { | ||||
| 			// 在这个页面临时修改下父类的margin,结束时需还原 | ||||
| 			this.appMain = document.querySelector('.app-main'); | ||||
| 			// this.appMain.style.minHeight = 'calc(100vh - 90px)'; | ||||
| 			this.appMain.style.margin = 0; | ||||
| 			// 在这个页面临时删除 main-footer 元素,结束时需还原 | ||||
| 			// this.mainFooter = document.querySelector('.main-footer').cloneNode(true); | ||||
| 			// document.querySelector('.main-footer').remove(); | ||||
|             this.$refs.dataBoard.classList.add('data-board'); | ||||
| 		}, | ||||
| 		recover() { | ||||
|             this.$refs.dataBoard.classList.remove('data-board'); | ||||
| 			this.$nextTick(() => { | ||||
| 				this.appMain.style.margin = this.parentStyle.margin; | ||||
| 				// this.appMain.style.minHeight = this.parentStyle.minHeight; | ||||
| 				// this.appMain.insertAdjacentElement('afterend', this.mainFooter); | ||||
| 			}); | ||||
| 		}, | ||||
| 		// modify() { | ||||
| 		// 	// 在这个页面临时修改下父类的margin,结束时需还原 | ||||
| 		// 	this.appMain = document.querySelector('.app-main'); | ||||
| 		// 	// this.appMain.style.minHeight = 'calc(100vh - 90px)'; | ||||
| 		// 	this.appMain.style.margin = 0; | ||||
| 		// 	// 在这个页面临时删除 main-footer 元素,结束时需还原 | ||||
| 		// 	// this.mainFooter = document.querySelector('.main-footer').cloneNode(true); | ||||
| 		// 	// document.querySelector('.main-footer').remove(); | ||||
|         //     this.$refs.dataBoard.classList.add('data-board'); | ||||
| 		// }, | ||||
| 		// recover() { | ||||
|         //     this.$refs.dataBoard.classList.remove('data-board'); | ||||
| 		// 	this.$nextTick(() => { | ||||
| 		// 		this.appMain.style.margin = this.parentStyle.margin; | ||||
| 		// 		// this.appMain.style.minHeight = this.parentStyle.minHeight; | ||||
| 		// 		// this.appMain.insertAdjacentElement('afterend', this.mainFooter); | ||||
| 		// 	}); | ||||
| 		// }, | ||||
| 		goback() { | ||||
| 			this.$router.go(-1); | ||||
| 		} | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
| @@ -71,4 +76,25 @@ export default { | ||||
| 	background: url('../../../assets/images/DataBoard.png') 100% 100% / contain | ||||
| 		no-repeat; | ||||
| } | ||||
|  | ||||
| .go-back--btn { | ||||
| 	position: fixed; | ||||
| 	top: 28px; | ||||
| 	left: 24px; | ||||
| 	color: #fff; | ||||
| 	font-size: 18px; | ||||
| 	letter-spacing: 6px; | ||||
|  | ||||
| 	&:hover { | ||||
| 		text-decoration: underline; | ||||
| 	} | ||||
|  | ||||
| 	&::after { | ||||
| 		content: "\2BAA"; | ||||
| 		position: absolute; | ||||
| 		top: 6px; | ||||
| 		right: -26px; | ||||
| 		font-size: 24px; | ||||
| 	} | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -38,7 +38,7 @@ | ||||
| 			@close="cancel" | ||||
| 			@cancel="cancel" | ||||
| 			@confirm="submitForm"> | ||||
| 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | ||||
| 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> | ||||
| 		</base-dialog> | ||||
|  | ||||
| 		<!-- 抽屉 详情 --> | ||||
|   | ||||
| @@ -36,7 +36,7 @@ | ||||
| 							v-if="showForm" | ||||
| 							ref="form" | ||||
| 							:disabled="mode.includes('detail')" | ||||
| 							:dataForm="form" | ||||
| 							v-model="form" | ||||
| 							:rows="formRows" /> | ||||
| 					</div> | ||||
|  | ||||
|   | ||||
| @@ -38,7 +38,7 @@ | ||||
| 			@close="cancel" | ||||
| 			@cancel="cancel" | ||||
| 			@confirm="submitForm"> | ||||
| 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | ||||
| 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows"/> | ||||
| 		</base-dialog> | ||||
|  | ||||
| 		<!-- 抽屉 详情 --> | ||||
|   | ||||
| @@ -38,7 +38,7 @@ | ||||
| 			@close="cancel" | ||||
| 			@cancel="cancel" | ||||
| 			@confirm="submitForm"> | ||||
| 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | ||||
| 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> | ||||
| 		</base-dialog> | ||||
| 	</div> | ||||
| </template> | ||||
|   | ||||
| @@ -36,7 +36,7 @@ | ||||
| 							v-if="showForm" | ||||
| 							ref="form" | ||||
| 							:disabled="mode.includes('detail')" | ||||
| 							:dataForm="form" | ||||
| 							v-model="form" | ||||
| 							:rows="formRows" /> | ||||
| 					</div> | ||||
|  | ||||
| @@ -151,7 +151,7 @@ export default { | ||||
| 				name: '', | ||||
| 				plcParamName: '', | ||||
| 				unit: '', | ||||
| 				collection: '', | ||||
| 				collection: 1, | ||||
| 				minValue: '', | ||||
| 				maxValue: '', | ||||
| 				defaultValue: '', | ||||
| @@ -370,7 +370,7 @@ export default { | ||||
| 				name: '', | ||||
| 				plcParamName: '', | ||||
| 				unit: '', | ||||
| 				collection: '', | ||||
| 				collection: 1, | ||||
| 				minValue: '', | ||||
| 				maxValue: '', | ||||
| 				defaultValue: '', | ||||
|   | ||||
| @@ -38,7 +38,7 @@ | ||||
| 			@close="cancel" | ||||
| 			@cancel="cancel" | ||||
| 			@confirm="submitForm"> | ||||
| 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | ||||
| 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> | ||||
| 		</base-dialog> | ||||
|  | ||||
| 		<!-- 抽屉 详情 --> | ||||
|   | ||||
| @@ -38,7 +38,7 @@ | ||||
| 			@close="cancel" | ||||
| 			@cancel="cancel" | ||||
| 			@confirm="submitForm"> | ||||
| 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | ||||
| 			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> | ||||
| 		</base-dialog> | ||||
| 	</div> | ||||
| </template> | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2023-09-13 09:02:25 | ||||
|  * @LastEditTime: 2023-10-08 15:39:38 | ||||
|  * @LastEditTime: 2023-10-16 14:56:58 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
|   | ||||
| @@ -1,8 +1,12 @@ | ||||
| <template> | ||||
|   <div class="app-container"> | ||||
|     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|     <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" /> | ||||
|     <balance-chart ref="lineChart" /> | ||||
|     <div v-if="tableData.length"> | ||||
|       <base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" /> | ||||
|       <SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" /> | ||||
|       <balance-chart ref="lineChart" /> | ||||
|     </div> | ||||
|     <div v-else class="no-data-bg"></div> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| @@ -89,7 +93,7 @@ export default { | ||||
|         }, | ||||
|         { | ||||
|           type: 'button', | ||||
|           btnName: '搜索', | ||||
|           btnName: '查询', | ||||
|           name: 'search', | ||||
|           color: 'primary', | ||||
|         } | ||||
| @@ -144,11 +148,6 @@ export default { | ||||
|       // this.listQuery.lineId = '1672847052717821953' | ||||
|       // this.listQuery.startTime = '1693497600000'; | ||||
|       // this.listQuery.endTime = '1693843200000'; | ||||
|       this.tableData.splice(0) | ||||
|       this.xData.splice(0) | ||||
|       this.yData.splice(0) | ||||
|       this.tableProps.splice(0) | ||||
|       this.spanArr.splice(0) | ||||
|       this.urlOptions.getDataListURL(this.listQuery).then(res => { | ||||
|         console.log(res) | ||||
|         let arr = [ | ||||
| @@ -228,11 +227,17 @@ export default { | ||||
|           this.listQuery.lineId = val.lineIds | ||||
|           this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined; | ||||
|           this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined; | ||||
|           if (val.time) { | ||||
|           if (val.time && val.lineIds) { | ||||
|             this.tableData = [] | ||||
|             this.xData = [] | ||||
|             this.yData = [] | ||||
|             this.tableProps = [] | ||||
|             this.spanArr = [] | ||||
|             this.timeList = [] | ||||
|             this.getData() | ||||
|           } else { | ||||
|             this.$message({ | ||||
|               message: '请选择时间', | ||||
|               message: '请选择产线和时间', | ||||
|               type: 'warning' | ||||
|             }); | ||||
|           } | ||||
|   | ||||
| @@ -1,8 +1,12 @@ | ||||
| <template> | ||||
|   <div class="app-container"> | ||||
|     <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|     <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" /> | ||||
|     <line-chart ref="lineChart" /> | ||||
|     <div v-if="tableData.length"> | ||||
|       <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" /> | ||||
|       <SearchBar :formConfigs="[{ label: '产品产量对比图', type: 'title' }]" /> | ||||
|       <line-chart ref="lineChart" /> | ||||
|     </div> | ||||
|     <div v-else class="no-data-bg"></div> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| @@ -72,7 +76,7 @@ export default { | ||||
| 				{ | ||||
| 					type: 'datePicker', | ||||
| 					label: '时间', | ||||
| 					dateType: 'datetime', | ||||
| 					dateType: 'month', | ||||
| 					format: 'yyyy-MM-dd', | ||||
| 					valueFormat: 'yyyy-MM-dd HH:mm:ss', | ||||
| 					rangeSeparator: '-', | ||||
| @@ -82,7 +86,7 @@ export default { | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| 					btnName: '搜索', | ||||
| 					btnName: '查询', | ||||
| 					name: 'search', | ||||
| 					color: 'primary', | ||||
| 				} | ||||
| @@ -101,6 +105,8 @@ export default { | ||||
| 			this.optionArrUrl.forEach((item, index) => { | ||||
| 				item(params).then((response) => { | ||||
| 					this.formConfig[index].selectOptions = response.data.list | ||||
|           // this.formConfig[0].defaultSelect = response.data.list[0].id | ||||
|           this.$set(this.formConfig[0], 'defaultSelect', response.data.list[0].id) | ||||
| 				}); | ||||
| 			}); | ||||
|     }, | ||||
| @@ -112,11 +118,13 @@ export default { | ||||
|         let arr = [ | ||||
|           	{ | ||||
|               prop: 'lineName', | ||||
|           		label: '产线' | ||||
|           		label: '产线', | ||||
|               fixed: 'left' | ||||
|           	}, | ||||
|             { | ||||
|               prop: 'sum', | ||||
|               label: '合计' | ||||
|               label: '合计', | ||||
|               fixed: 'left' | ||||
|             }, | ||||
|             { | ||||
|               prop: res.data ? res.data.nameData[0].name : undefined, | ||||
| @@ -220,7 +228,6 @@ export default { | ||||
|       }); | ||||
|     }, | ||||
|     buttonClick(val) { | ||||
|       // console.log(val) | ||||
| 			switch (val.btnName) { | ||||
|         case 'search': | ||||
|           this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined | ||||
|   | ||||
							
								
								
									
										422
									
								
								src/views/core/base/equipment/components/AssetsUpload.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										422
									
								
								src/views/core/base/equipment/components/AssetsUpload.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,422 @@ | ||||
| <!--  | ||||
|     filename: AssetsUpload.vue | ||||
|     author: liubin | ||||
|     date: 2023-10-12 16:40:14 | ||||
|     description: 上传资料/图片 组件 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| 	<div class="assets-upload"> | ||||
| 		<section class="operations"> | ||||
| 			<el-button type="text" class="expand-btn" @click="expand = !expand"> | ||||
| 				<i class="el-icon-folder-opened" v-if="expand"></i> | ||||
| 				<i class="el-icon-folder" v-else></i> | ||||
| 				展开 | ||||
| 			</el-button> | ||||
| 			<!-- <div class="preview-btn"> | ||||
| 				<i class="el-icon-view"></i> | ||||
| 				预览 | ||||
| 			</div> --> | ||||
| 		</section> | ||||
| 		<section | ||||
| 			class="file-area" | ||||
| 			:style="{ | ||||
| 				height: expand ? 'auto' : isPicMode ? '180px' : '152px', | ||||
| 				gap: isPicMode ? '0 24px' : '24px', | ||||
| 				gridAutoRows: isPicMode ? '180px' : '152px', | ||||
| 			}"> | ||||
| 			<el-upload | ||||
| 				class="equipment-upload" | ||||
| 				:style="{ marginBottom: isPicMode ? '48px' : '24px' }" | ||||
| 				:disabled="disabled" | ||||
| 				drag | ||||
| 				:action="uploadUrl" | ||||
| 				:headers="headers" | ||||
| 				multiple | ||||
| 				:show-file-list="false" | ||||
| 				:before-upload="beforeUpload" | ||||
| 				:on-success="handleSuccess"> | ||||
| 				<i class="el-icon-upload"></i> | ||||
| 				<div class="el-upload__text"> | ||||
| 					<span>将文件拖到此处或</span> | ||||
| 					<em>点击上传</em> | ||||
| 				</div> | ||||
| 				<div class="el-upload__tip" slot="tip"> | ||||
| 					{{ | ||||
| 						isPicMode ? '仅支持上传 .jpg .png 格式文件, 且' : '' | ||||
| 					}}文件大小不超过2MB | ||||
| 				</div> | ||||
| 			</el-upload> | ||||
| 			<!-- <div | ||||
| 				class="file-list__item" | ||||
| 				v-for="n in 9" | ||||
| 				:key="n" | ||||
| 				:style="{ | ||||
| 					display: n > 4 && !expand ? 'none' : 'block', | ||||
| 				}" | ||||
| 				:data-name="n" | ||||
| 				:class="{ 'default-icon': !isPicMode }"> | ||||
| 				<i class="el-icon-delete"></i> | ||||
| 			</div> --> | ||||
| 			<div | ||||
| 				class="file-list__item" | ||||
| 				v-for="(file, index) in files" | ||||
| 				:key="file.fileName" | ||||
| 				:style="{ | ||||
| 					background: isPicMode | ||||
| 						? `url(${file.fileUrl}) no-repeat` | ||||
| 						: `url(${defaultBg}) no-repeat`, | ||||
| 					backgroundSize: isPicMode ? '100% 100%' : '64px', | ||||
| 					backgroundPosition: isPicMode ? '0% 0%' : 'center', | ||||
| 				}" | ||||
| 				:data-name="file.fileName"> | ||||
| 				<el-button | ||||
| 					v-if="!disabled" | ||||
| 					type="text" | ||||
| 					class="el-icon-delete" | ||||
| 					style="padding: 0" | ||||
| 					@click="(e) => handleDelete(file)" /> | ||||
| 			</div> | ||||
| 		</section> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { getAccessToken } from '@/utils/auth'; | ||||
| import defaultBg from '../../../../../assets/images/default-file-icon.png'; | ||||
|  | ||||
| function checkSize(file, message) { | ||||
| 	const isLt2M = file.size / 1024 / 1024 < 2; | ||||
| 	if (!isLt2M) { | ||||
| 		message.error('上传文件大小不能超过 2MB!'); | ||||
| 	} | ||||
| 	return isLt2M; | ||||
| } | ||||
|  | ||||
| function checkPic(file, message) { | ||||
| 	const isJPG = file.type === 'image/jpeg'; | ||||
| 	const isPNG = file.type === 'image/png'; | ||||
| 	const isPic = isJPG || isPNG; | ||||
| 	if (!isPic) { | ||||
| 		message.error('上传图片只能是 JPG/PNG 格式!'); | ||||
| 	} | ||||
| 	return isPic; | ||||
| } | ||||
|  | ||||
| export default { | ||||
| 	name: 'AssetsUpload', | ||||
| 	components: {}, | ||||
| 	model: { | ||||
| 		prop: 'dataSource', | ||||
| 		event: 'update', | ||||
| 	}, | ||||
| 	props: { | ||||
| 		type: { | ||||
| 			type: String, | ||||
| 			default: 'image', | ||||
| 		}, | ||||
| 		dataSource: { | ||||
| 			type: Array, | ||||
| 			default: () => [], | ||||
| 		}, | ||||
| 		equipmentId: { | ||||
| 			type: String, | ||||
| 			default: '', | ||||
| 		}, | ||||
| 		isPicMode: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 		disabled: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 	}, | ||||
| 	emits: ['update-filelist'], | ||||
| 	data() { | ||||
| 		return { | ||||
| 			defaultBg, | ||||
| 			expand: false, | ||||
| 			headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部 | ||||
| 			fileList: [], | ||||
| 			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', | ||||
| 			files: [ | ||||
| 				// 服务器返回的结构 | ||||
| 				// { | ||||
| 				// 	fileName: 'sf.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: | ||||
| 				// 		'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	fileName: 'sddf.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	fileName: 'jjj.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: | ||||
| 				// 		'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	fileName: 'asdfasdf.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: | ||||
| 				// 		'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	fileName: 'asdkj.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: | ||||
| 				// 		'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	fileName: 'lkasjdf.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: | ||||
| 				// 		'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	fileName: 'asdf.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: | ||||
| 				// 		'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	fileName: 'afdffff.docs', | ||||
| 				// 	fileType: 'asset', | ||||
| 				// 	fileUrl: | ||||
| 				// 		'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg', | ||||
| 				// }, | ||||
| 			], | ||||
| 			updateTimer: null, | ||||
| 		}; | ||||
| 	}, | ||||
| 	watch: { | ||||
| 		dataSource: { | ||||
| 			handler(val) { | ||||
| 				this.files = JSON.parse(JSON.stringify(val)); | ||||
| 			}, | ||||
| 			immediate: true, | ||||
| 			deep: true, | ||||
| 		}, | ||||
| 	}, | ||||
| 	mounted() {}, | ||||
| 	methods: { | ||||
| 		// handle success, per file! | ||||
| 		handleSuccess(response, file, fileList) { | ||||
| 			this.$notify({ | ||||
| 				title: '成功', | ||||
| 				message: '上传成功! 点击确认保存上传结果', | ||||
| 				type: 'success', | ||||
| 			}); | ||||
| 			if ( | ||||
| 				response == null || | ||||
| 				!('data' in response) || | ||||
| 				response.data == null || | ||||
| 				response.data.trim() == '' | ||||
| 			) { | ||||
| 				this.$message.error('上传出错了!'); | ||||
| 				return; | ||||
| 			} | ||||
| 			this.files.push({ | ||||
| 				fileName: file.name, | ||||
| 				fileUrl: response.data, | ||||
| 				fileType: this.isPicMode ? 1 : 2, | ||||
| 			}); | ||||
| 			// debugger; | ||||
|  | ||||
| 			// 延时更新 | ||||
| 			if (this.updateTimer) { | ||||
| 				clearTimeout(this.updateTimer); | ||||
| 			} | ||||
| 			this.updateTimer = setTimeout(() => { | ||||
| 				// console.log('[AssetsUpload] 更新上传列表'); | ||||
| 				this.emitFilelist(); | ||||
| 				clearTimeout(this.updateTimer); | ||||
| 				this.updateTimer = null; | ||||
| 			}, 500); | ||||
| 		}, | ||||
|  | ||||
| 		emitFilelist() { | ||||
| 			this.$emit('update', this.files); | ||||
| 		}, | ||||
|  | ||||
| 		handleRemove(file, fileList) { | ||||
| 			debugger; | ||||
| 		}, | ||||
|  | ||||
| 		handleDelete(file) { | ||||
| 			// fileName fileType 都可能一样,但 fileUrl 一定不一样 | ||||
| 			this.files = this.files.filter((item) => item.fileUrl != file.fileUrl); | ||||
| 			this.$notify({ | ||||
| 				title: '成功', | ||||
| 				message: '删除成功! 需点击确认保存删除结果', | ||||
| 				type: 'success', | ||||
| 			}); | ||||
| 			this.emitFilelist(); | ||||
| 		}, | ||||
|  | ||||
| 		beforeUpload(file) { | ||||
| 			if (this.isPicMode) { | ||||
| 				return checkPic(file, this.$message) && checkSize(file, this.$message); | ||||
| 			} | ||||
| 			return checkSize(file, this.$message); | ||||
| 		}, | ||||
|  | ||||
| 		handleUpload() { | ||||
| 			switch (this.type) { | ||||
| 				case 'image': | ||||
| 					break; | ||||
| 				case 'asset': | ||||
| 					break; | ||||
| 			} | ||||
| 		}, | ||||
| 		updateFileList(appendFilelist) { | ||||
| 			// Array | ||||
| 			this.$emit('update-filelist', this.appendFilelist); | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .assets-upload { | ||||
| 	position: relative; | ||||
| } | ||||
|  | ||||
| .operations { | ||||
| 	position: absolute; | ||||
| 	top: -36px; | ||||
| 	right: 0; | ||||
| 	display: flex; | ||||
| 	align-items: center; | ||||
| } | ||||
|  | ||||
| .expand-btn, | ||||
| .preview-btn { | ||||
| 	font-size: 14px; | ||||
| 	line-height: 1.2; | ||||
| 	display: inline-block; | ||||
| 	padding-left: 20px; | ||||
| 	cursor: pointer; | ||||
| 	z-index: 1000; | ||||
| } | ||||
|  | ||||
| .expand-btn { | ||||
| 	margin-right: 12px; | ||||
| } | ||||
|  | ||||
| .preview-btn { | ||||
| 	color: #ccc; | ||||
| } | ||||
|  | ||||
| .expand-btn, | ||||
| .preview-btn:hover, | ||||
| .preview-btn.active { | ||||
| 	// color: #0042d0; | ||||
| 	color: #0b58ff; | ||||
| } | ||||
|  | ||||
| :deep(.equipment-upload) { | ||||
| 	.el-upload-dragger { | ||||
| 		width: 188px; | ||||
| 		height: 128px; | ||||
| 	} | ||||
|  | ||||
| 	.el-icon-upload { | ||||
| 		margin: 12px 0; | ||||
| 		font-size: 48px; | ||||
| 	} | ||||
|  | ||||
| 	.el-upload__text { | ||||
| 		font-size: 12px; | ||||
| 		line-height: 2px; | ||||
| 		display: flex; | ||||
| 		flex-direction: column; | ||||
|  | ||||
| 		em { | ||||
| 			margin-top: 12px; | ||||
| 		} | ||||
| 	} | ||||
|  | ||||
| 	.el-upload__tip { | ||||
| 		font-size: 12px; | ||||
| 		line-height: 1.5; | ||||
| 		color: #d1d1d1; | ||||
| 		margin: 0 0 12px; | ||||
| 		transform: translateY(-12px); | ||||
| 		user-select: none; | ||||
| 	} | ||||
| } | ||||
|  | ||||
| .equipment-upload { | ||||
| 	margin-bottom: 24px; | ||||
| } | ||||
|  | ||||
| .file-list { | ||||
| 	padding: 12px; | ||||
| 	border: 1px solid #ccc; | ||||
| } | ||||
|  | ||||
| // custom | ||||
| .file-area { | ||||
| 	display: grid; | ||||
| 	grid-template-columns: repeat(auto-fill, 188px); | ||||
| 	grid-auto-rows: 152px; | ||||
| 	gap: 48px 24px; | ||||
| 	overflow: hidden; | ||||
| } | ||||
|  | ||||
| .file-list__item { | ||||
| 	height: 128px; | ||||
| 	background-color: #fff; | ||||
| 	border: 1px dashed #d9d9d9; | ||||
| 	border-radius: 6px; | ||||
| 	-webkit-box-sizing: border-box; | ||||
| 	box-sizing: border-box; | ||||
| 	text-align: center; | ||||
| 	cursor: pointer; | ||||
| 	position: relative; | ||||
| 	// overflow: hidden; | ||||
|  | ||||
| 	&:hover { | ||||
| 		.el-icon-delete { | ||||
| 			display: block; | ||||
| 		} | ||||
| 	} | ||||
|  | ||||
| 	.el-icon-delete { | ||||
| 		color: #ccc; | ||||
| 		position: absolute; | ||||
| 		top: 8px; | ||||
| 		right: 8px; | ||||
| 		display: none; | ||||
|  | ||||
| 		&:hover { | ||||
| 			color: rgb(210, 41, 41); | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  | ||||
| .file-list__item:hover { | ||||
| 	border-color: #0b58ff; | ||||
| } | ||||
|  | ||||
| .file-list__item::after { | ||||
| 	content: attr(data-name); | ||||
| 	position: absolute; | ||||
| 	left: 0; | ||||
| 	bottom: -26px; | ||||
| 	font-size: 14px; | ||||
| 	line-height: 2; | ||||
| 	color: #616161; | ||||
| } | ||||
|  | ||||
| .default-icon { | ||||
| 	background: url(../../../../../assets/images/default-file-icon.png) no-repeat; | ||||
| 	background-position: center; | ||||
| 	background-size: 64px; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										313
									
								
								src/views/core/base/equipment/components/DialogForm.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										313
									
								
								src/views/core/base/equipment/components/DialogForm.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,313 @@ | ||||
| <!--  | ||||
|     filename: dialogForm.vue | ||||
|     author: liubin | ||||
|     date: 2023-08-15 10:32:36 | ||||
|     description: 弹窗的表单组件 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| 	<el-form | ||||
| 		ref="form" | ||||
| 		:model="form" | ||||
| 		:label-width="`${labelWidth}px`" | ||||
| 		:size="size" | ||||
| 		:label-position="labelPosition" | ||||
| 		v-loading="formLoading"> | ||||
| 		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> | ||||
| 			<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> | ||||
| 				<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules"> | ||||
| 					<el-input | ||||
| 						v-if="col.input" | ||||
| 						v-model="form[col.prop]" | ||||
| 						@change="$emit('update', form)" | ||||
| 						:placeholder="`请输入${col.label}`" | ||||
| 						v-bind="col.bind" /> | ||||
| 					<el-input | ||||
| 						v-if="col.textarea" | ||||
| 						type="textarea" | ||||
| 						v-model="form[col.prop]" | ||||
| 						@change="$emit('update', form)" | ||||
| 						:placeholder="`请输入${col.label}`" | ||||
| 						v-bind="col.bind" /> | ||||
| 					<el-select | ||||
| 						v-if="col.select" | ||||
| 						v-model="form[col.prop]" | ||||
| 						:placeholder="`请选择${col.label}`" | ||||
| 						@change="$emit('update', form)" | ||||
| 						v-bind="col.bind"> | ||||
| 						<el-option | ||||
| 							v-for="opt in optionListOf[col.prop]" | ||||
| 							:key="opt.value" | ||||
| 							:label="opt.label" | ||||
| 							:value="opt.value" /> | ||||
| 					</el-select> | ||||
| 					<el-date-picker | ||||
| 						v-if="col.datetime" | ||||
| 						v-model="form[col.prop]" | ||||
| 						type="datetime" | ||||
| 						:placeholder="`请选择${col.label}`" | ||||
| 						value-format="timestamp" | ||||
| 						v-bind="col.bind"></el-date-picker> | ||||
| 					<el-upload | ||||
| 						class="upload-in-dialog" | ||||
| 						v-if="col.upload" | ||||
| 						:file-list="uploadedFileList" | ||||
| 						:action="col.url" | ||||
| 						:on-success="handleUploadSuccess" | ||||
| 						v-bind="col.bind"> | ||||
| 						<el-button | ||||
| 							size="small" | ||||
| 							type="primary" | ||||
| 							:disabled="col.bind?.disabled || false"> | ||||
| 							点击上传 | ||||
| 						</el-button> | ||||
| 						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips"> | ||||
| 							{{ col.uploadTips || '只能上传jpg/png文件,大小不超过2MB' }} | ||||
| 						</div> | ||||
| 					</el-upload> | ||||
| 					<el-switch | ||||
| 						v-if="col.switch" | ||||
| 						v-model="form[col.prop]" | ||||
| 						active-color="#0b58ff" | ||||
| 						inactive-color="#e1e1e1" | ||||
| 						v-bind="col.bind"></el-switch> | ||||
| 					<component | ||||
| 						v-if="col.subcomponent" | ||||
| 						:key="col.key" | ||||
| 						:is="col.subcomponent" | ||||
| 						v-bind="col.bind" | ||||
| 						:inlineStyle="col.style"></component> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 	</el-form> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| /** | ||||
|  * 找到最长的label | ||||
|  * @param {*} options | ||||
|  */ | ||||
| function findMaxLabelWidth(rows) { | ||||
| 	let max = 0; | ||||
| 	rows.forEach((row) => { | ||||
| 		row.forEach((opt) => { | ||||
| 			// debugger; | ||||
| 			if (!opt.label) return 0; | ||||
| 			if (opt.label.length > max) { | ||||
| 				max = opt.label.length; | ||||
| 			} | ||||
| 		}); | ||||
| 	}); | ||||
| 	return max; | ||||
| } | ||||
|  | ||||
| export default { | ||||
| 	name: 'DialogForm', | ||||
| 	model: { | ||||
| 		prop: 'dataForm', | ||||
| 		event: 'update', | ||||
| 	}, | ||||
| 	emits: ['update'], | ||||
| 	components: {}, | ||||
| 	props: { | ||||
| 		rows: { | ||||
| 			type: Array, | ||||
| 			default: () => [], | ||||
| 		}, | ||||
| 		dataForm: { | ||||
| 			type: Object, | ||||
| 			default: () => ({}), | ||||
| 		}, | ||||
| 		disabled: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 		labelPosition: { | ||||
| 			type: String, | ||||
| 			default: 'right', | ||||
| 		}, | ||||
| 		size: { | ||||
| 			type: String, | ||||
| 			default: '', | ||||
| 		}, | ||||
| 	}, | ||||
| 	data() { | ||||
| 		return { | ||||
| 			formLoading: true, | ||||
| 			optionListOf: {}, | ||||
| 			uploadedFileList: [], | ||||
| 			dataLoaded: false, | ||||
| 		}; | ||||
| 	}, | ||||
| 	computed: { | ||||
| 		labelWidth() { | ||||
| 			let max = findMaxLabelWidth(this.rows); | ||||
| 			// 每个汉字占20px | ||||
| 			return max * 20; | ||||
| 			// return max * 20 + 'px'; | ||||
| 		}, | ||||
| 		form: { | ||||
| 			get() { | ||||
| 				// if (this.dataLoaded) return this.dataForm; | ||||
| 				// else return {} | ||||
| 				return this.dataForm; | ||||
| 			}, | ||||
| 			set(val) { | ||||
| 				console.log('set form', val); | ||||
| 			}, | ||||
| 		}, | ||||
| 	}, | ||||
| 	watch: { | ||||
| 		rows: { | ||||
| 			handler() { | ||||
| 				console.log('watch triggered!'); | ||||
| 				this.$nextTick(() => { | ||||
| 					this.handleOptions('watch'); | ||||
| 				}); | ||||
| 			}, | ||||
| 			deep: true, | ||||
| 			immediate: false, | ||||
| 		}, | ||||
| 	}, | ||||
| 	mounted() { | ||||
| 		// 处理 options | ||||
| 		this.handleOptions(); | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		/** 模拟透传 ref  */ | ||||
| 		validate(cb) { | ||||
| 			return this.$refs.form.validate(cb); | ||||
| 		}, | ||||
| 		resetFields(args) { | ||||
| 			return this.$refs.form.resetFields(args); | ||||
| 		}, | ||||
| 		// getCode | ||||
| 		async getCode(url) { | ||||
| 			const response = await this.$axios(url); | ||||
| 			return response.data; | ||||
| 		}, | ||||
| 		async handleOptions(trigger = 'monuted') { | ||||
| 			console.log('[dialogForm:handleOptions]'); | ||||
| 			const promiseList = []; | ||||
| 			this.rows.forEach((cols) => { | ||||
| 				cols.forEach((opt) => { | ||||
| 					if (opt.value && !this.form[opt.prop]) { | ||||
| 						// 默认值 | ||||
| 						this.form[opt.prop] = opt.value; | ||||
| 					} | ||||
|  | ||||
| 					if (opt.options) { | ||||
| 						this.$set(this.optionListOf, opt.prop, opt.options); | ||||
| 					} else if (opt.url) { | ||||
| 						// 如果有 depends,则暂时先不获取,注册一个watcher | ||||
| 						if (opt.depends) { | ||||
| 							console.log('[handleOptions] setting watch'); | ||||
| 							this.$watch( | ||||
| 								() => this.form[opt.depends], | ||||
| 								(id) => { | ||||
| 									console.log('<', opt.depends, '>', 'changed', id); | ||||
| 									if (id == null) return; | ||||
| 									// 清空原有选项 | ||||
| 									this.form[opt.prop] = null; | ||||
| 									// 获取新的选项 | ||||
| 									this.$axios({ | ||||
| 										url: `${opt.url}?id=${id}`, | ||||
| 									}).then((res) => { | ||||
| 										this.$set( | ||||
| 											this.optionListOf, | ||||
| 											opt.prop, | ||||
| 											res.data.map((item) => ({ | ||||
| 												label: item[opt.labelKey ?? 'name'], | ||||
| 												value: item[opt.valueKey ?? 'id'], | ||||
| 											})) | ||||
| 										); | ||||
| 									}); | ||||
| 								}, | ||||
| 								{ | ||||
| 									immediate: true, | ||||
| 								} | ||||
| 							); | ||||
| 							return; | ||||
| 						} | ||||
| 						// 如果是下拉框,或者新增模式下的输入框,才去请求 | ||||
| 						if (opt.select || (opt.input && !this.form?.id)) { | ||||
| 							promiseList.push(async () => { | ||||
| 								const response = await this.$axios(opt.url, { | ||||
| 									method: opt.method ?? 'get', | ||||
| 								}); | ||||
| 								console.log('[dialogForm:handleOptions:response]', response); | ||||
| 								if (opt.select) { | ||||
| 									// 处理下拉框选项 | ||||
| 									const list = | ||||
| 										'list' in response.data | ||||
| 											? response.data.list | ||||
| 											: response.data; | ||||
| 									this.$set( | ||||
| 										this.optionListOf, | ||||
| 										opt.prop, | ||||
| 										list.map((item) => ({ | ||||
| 											label: item[opt.labelKey ?? 'name'], | ||||
| 											value: item[opt.valueKey ?? 'id'], | ||||
| 										})) | ||||
| 									); | ||||
| 								} else if (opt.input) { | ||||
| 									console.log('setting code: ', response.data); | ||||
| 									// 处理输入框数据 | ||||
| 									this.form[opt.prop] = response.data; | ||||
| 								} | ||||
| 							}); | ||||
| 						} | ||||
| 					} | ||||
| 				}); | ||||
| 			}); | ||||
|  | ||||
| 			console.log('[dialogForm:handleOptions] done!'); | ||||
|  | ||||
| 			// 如果是 watch 触发的,不需要执行进一步的请求 | ||||
| 			if (trigger == 'watch') { | ||||
| 				this.formLoading = false; | ||||
| 				return; | ||||
| 			} | ||||
| 			try { | ||||
| 				await Promise.all(promiseList.map((fn) => fn())); | ||||
| 				this.formLoading = false; | ||||
| 				this.dataLoaded = true; | ||||
| 				// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf) | ||||
| 			} catch (error) { | ||||
| 				console.log('[dialogForm:handleOptions:error]', error); | ||||
| 				this.formLoading = false; | ||||
| 			} | ||||
| 			if (!promiseList.length) this.formLoading = false; | ||||
| 		}, | ||||
| 		// 上传成功的特殊处理 | ||||
| 		beforeUpload() {}, | ||||
| 		// 上传前的验证规则可通过 bind 属性传入 | ||||
| 		handleUploadSuccess(response, file, fileList) { | ||||
| 			console.log( | ||||
| 				'[dialogForm:handleUploadSuccess]', | ||||
| 				response, | ||||
| 				file, | ||||
| 				fileList, | ||||
| 				this.form | ||||
| 			); | ||||
| 			// 保存原始文件名 | ||||
| 			if ('fileNames' in this.form) this.form.fileNames.push(file.name); | ||||
| 			// 保存完整地址 | ||||
| 			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data); | ||||
| 			this.$modal.msgSuccess('上传成功'); | ||||
| 		}, | ||||
|  | ||||
| 		getFileName(fileUrl) { | ||||
| 			return fileUrl.split('/').pop(); | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .el-date-editor, | ||||
| .el-select { | ||||
| 	width: 100%; | ||||
| } | ||||
| </style> | ||||
| @@ -1,32 +0,0 @@ | ||||
| <!--  | ||||
|     filename: EquipmentAssets.vue | ||||
|     author: liubin | ||||
|     date: 2023-08-22 11:11:18 | ||||
|     description: 设备资产 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|     <div class="equipment-assets"></div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|     name: "EquipmentAssets", | ||||
|     components: {}, | ||||
|     props: {}, | ||||
|     data() { | ||||
|         return {} | ||||
|     }, | ||||
|     computed: {}, | ||||
|     methods: {}, | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .equipment-assets { | ||||
|     background: #f1f1f1; | ||||
|     padding: 12px; | ||||
|     min-height: 128px; | ||||
|     margin-top: 8px; | ||||
| } | ||||
| </style> | ||||
| @@ -29,23 +29,28 @@ | ||||
| 				<section v-for="(section, index) in sections" :key="section.key"> | ||||
| 					<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle> | ||||
|  | ||||
| 					<div class="form-part" v-if="section.key == 'base'"> | ||||
| 					<div | ||||
| 						class="form-part" | ||||
| 						v-if="section.key == 'base'" | ||||
| 						style="margin-bottom: 32px"> | ||||
| 						<el-skeleton v-if="!showForm" animated /> | ||||
| 						<DialogForm | ||||
| 						<EquipmentInfoForm | ||||
| 							key="drawer-dialog-form" | ||||
| 							v-if="showForm" | ||||
| 							ref="form" | ||||
| 							:dataForm="form" | ||||
| 							:rows="formRows" /> | ||||
| 							:disabled="mode.includes('detail')" | ||||
| 							:sync-filelist="syncFileListFlag" | ||||
| 							v-model="form" /> | ||||
| 					</div> | ||||
|  | ||||
| 					<div v-if="section.key == 'attrs'" style="margin-top: 12px"> | ||||
| 						<base-table | ||||
| 							v-loading="attrListLoading" | ||||
| 							:table-props="section.props" | ||||
| 							:page="section.pageNo || 1" | ||||
| 							:limit="section.pageSize || 10" | ||||
| 							:page="attrQuery?.params.pageNo || 1" | ||||
| 							:limit="attrQuery?.params.pageSize || 10" | ||||
| 							:table-data="list" | ||||
| 							:add-button-show="mode.includes('detail') ? null : '添加属性'" | ||||
| 							@emitButtonClick="handleAddAttr" | ||||
| 							@emitFun="handleEmitFun"> | ||||
| 							<method-btn | ||||
| 								v-if="section.tableBtn" | ||||
| @@ -54,27 +59,31 @@ | ||||
| 								:method-list="tableBtn" | ||||
| 								@clickBtn="handleTableBtnClick" /> | ||||
| 						</base-table> | ||||
|  | ||||
| 						<!-- 分页组件 --> | ||||
| 						<pagination | ||||
| 							v-show="total > 0" | ||||
| 							:total="total" | ||||
| 							:page.sync="attrQuery.params.pageNo" | ||||
| 							:limit.sync="attrQuery.params.pageSize" | ||||
| 							@pagination="getAttrList" /> | ||||
| 					</div> | ||||
| 				</section> | ||||
| 			</div> | ||||
|  | ||||
| 			<div class="drawer-body__footer"> | ||||
| 				<el-button style="margin-right: 10px" @click="handleCancel"> | ||||
| 					返回 | ||||
| 				</el-button> | ||||
| 				<el-button style="" @click="handleCancel">取消</el-button> | ||||
| 				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit"> | ||||
| 					编辑 | ||||
| 				</el-button> | ||||
| 				<span v-else> | ||||
| 					<el-button type="primary" @click="handleSave">保存</el-button> | ||||
| 					<!-- sections的第二项必须是 属性列表  --> | ||||
| 					<el-button | ||||
| 				<el-button v-else type="primary" @click="handleConfirm">确定</el-button> | ||||
| 				<!-- sections的第二项必须是 属性列表  --> | ||||
| 				<!-- <el-button | ||||
| 						v-if="sections[1].allowAdd" | ||||
| 						type="primary" | ||||
| 						@click="handleAddAttr"> | ||||
| 						添加属性 | ||||
| 					</el-button> | ||||
| 				</span> | ||||
| 					</el-button> --> | ||||
| 			</div> | ||||
| 		</div> | ||||
|  | ||||
| @@ -99,11 +108,13 @@ | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import DialogForm from '@/components/DialogForm'; | ||||
| import DialogForm from './DialogForm'; | ||||
| import EquipmentInfoForm from './EquipmentInfoForm.vue'; | ||||
|  | ||||
| const SmallTitle = { | ||||
| 	name: 'SmallTitle', | ||||
| 	props: ['size'], | ||||
| 	components: {}, | ||||
| 	data() { | ||||
| 		return {}; | ||||
| 	}, | ||||
| @@ -127,12 +138,13 @@ const SmallTitle = { | ||||
| }; | ||||
|  | ||||
| export default { | ||||
| 	components: { SmallTitle, DialogForm }, | ||||
| 	components: { SmallTitle, DialogForm, EquipmentInfoForm }, | ||||
| 	props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段 | ||||
| 	data() { | ||||
| 		return { | ||||
| 			visible: false, | ||||
| 			showForm: false, | ||||
| 			btnLoading: false, | ||||
| 			total: 0, | ||||
| 			form: {}, | ||||
| 			list: [], | ||||
| @@ -161,10 +173,16 @@ export default { | ||||
| 					}, | ||||
| 				], | ||||
| 			], | ||||
| 			attrQuery: null, // 属性列表的请求 | ||||
| 			attrQuery: { | ||||
| 				params: { | ||||
| 					pageNo: 1, | ||||
| 					pageSize: 10, | ||||
| 				}, | ||||
| 			}, // 属性列表的请求 | ||||
| 			infoQuery: null, // 基本信息的请求 | ||||
| 			attrFormSubmitting: false, | ||||
| 			attrListLoading: false, | ||||
| 			syncFileListFlag: null, | ||||
| 		}; | ||||
| 	}, | ||||
| 	computed: { | ||||
| @@ -175,15 +193,19 @@ export default { | ||||
| 						// 重置图片的位置 | ||||
| 						return { | ||||
| 							...col, | ||||
| 							bind: { | ||||
| 								...col.bind, | ||||
| 							}, | ||||
| 							style: { | ||||
| 								left: 0, | ||||
| 								right: 'unset' | ||||
| 							} | ||||
| 						} | ||||
| 								right: 'unset', | ||||
| 							}, | ||||
| 						}; | ||||
| 					} | ||||
| 					return { | ||||
| 						...col, | ||||
| 						bind: { | ||||
| 							...col.bind, | ||||
| 							// 详情 模式下,禁用各种输入 | ||||
| 							disabled: this.mode == 'detail', | ||||
| 						}, | ||||
| @@ -208,9 +230,52 @@ export default { | ||||
| 				this.$axios(query).then(({ data }) => { | ||||
| 					if (section.key == 'base') { | ||||
| 						this.form = data; | ||||
| 						// this.form = { | ||||
| 						// 	code: 'gj', | ||||
| 						// 	name: '下片机', | ||||
| 						// 	enName: 'unload', | ||||
| 						// 	abbr: '', | ||||
| 						// 	equipmentTypeId: 21084, | ||||
| 						// 	remark: '备注', | ||||
| 						// 	id: '1712367395052384257', | ||||
| 						// 	createTime: 1697095176000, | ||||
| 						// 	enterTime: 0, | ||||
| 						// 	productionTime: 0, | ||||
| 						// 	files: [ | ||||
| 						// 		{ | ||||
| 						// 			fileName: '测试.xlsx', | ||||
| 						// 			fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0108%2F0f0c6f30j00r5cle9000sc000hs00gtc.jpg&thumbnail=660x2147483647&quality=80&type=jpg', | ||||
| 						// 			fileType: 1 | ||||
| 						// 		}, | ||||
| 						// 		{ | ||||
| 						// 			fileName: '测试2.xlsx', | ||||
| 						// 			fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0415%2F2cd23619j00racb96000kc000hs00hsc.jpg&thumbnail=660x2147483647&quality=80&type=jpg', | ||||
| 						// 			fileType: 1 | ||||
| 						// 		}, | ||||
| 						// 		{ | ||||
| 						// 			fileName: '测试3.xlsx', | ||||
| 						// 			fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1fea91a0-d088-409e-b145-e0e61254b28b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=2e0fe7d1de7f54adff3007efe133d67c', | ||||
| 						// 			fileType: 1 | ||||
| 						// 		}, | ||||
| 						// 		{ | ||||
| 						// 			fileName: '测试4.xlsx', | ||||
| 						// 			fileUrl: 'https://pics5.baidu.com/feed/b7003af33a87e950cdfb4b4546eed044faf2b40d.jpeg?token=1d7484cfe4b014dd201f8c8725cab945', | ||||
| 						// 			fileType: 2 | ||||
| 						// 		}, | ||||
| 						// 		{ | ||||
| 						// 			fileName: '测试5.xlsx', | ||||
| 						// 			fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe3500876-9c46-4b70-8d37-4799520cdd13%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=4abc1df930e62730e5361a7d3765e0f2', | ||||
| 						// 			fileType: 2 | ||||
| 						// 		}, | ||||
| 						// 	], | ||||
| 						// 	tvalue: 0, | ||||
| 						// 	processingTime: 0, | ||||
| 						// 	manufacturer: '', | ||||
| 						// 	spec: '', | ||||
| 						// 	description: '描述', | ||||
| 						// }; | ||||
| 						this.showForm = true; | ||||
| 						this.infoQuery = query; | ||||
| 						console.log('setting form: ', this.form, data); | ||||
| 					} else if (section.key == 'attrs') { | ||||
| 						this.attrQuery = query; | ||||
| 						this.list = data.list; | ||||
| @@ -231,6 +296,24 @@ export default { | ||||
| 					break; | ||||
| 			} | ||||
| 		}, | ||||
| 		async handleConfirm() { | ||||
| 			this.btnLoading = true; | ||||
| 			this.syncFileListFlag = Math.random(); | ||||
|  | ||||
| 			this.$nextTick(async () => { | ||||
| 				const { code, data } = await this.$axios({ | ||||
| 					url: this.sections[0].urlUpdate, | ||||
| 					method: 'put', | ||||
| 					data: this.form, | ||||
| 				}); | ||||
| 				if (code == 0) { | ||||
| 					this.$modal.msgSuccess('更新成功'); | ||||
| 				} | ||||
|  | ||||
| 				this.btnLoading = false; | ||||
| 				this.handleCancel(); | ||||
| 			}); | ||||
| 		}, | ||||
|  | ||||
| 		handleEmitFun(val) { | ||||
| 			console.log('handleEmitFun', val); | ||||
| @@ -273,7 +356,7 @@ export default { | ||||
|  | ||||
| 		// 开启编辑 | ||||
| 		toggleEdit() { | ||||
| 			this.mode = 'edit'; | ||||
| 			this.$emit('update-mode', 'edit'); | ||||
| 		}, | ||||
|  | ||||
| 		// 新增属性 | ||||
| @@ -331,33 +414,44 @@ export default { | ||||
| 		}, | ||||
|  | ||||
| 		// 提交属性表 | ||||
| 		async submitAttrForm() { | ||||
| 			this.$refs['attrForm'].validate((valid) => { | ||||
| 		submitAttrForm() { | ||||
| 			this.$refs['attrForm'].validate(async (valid) => { | ||||
| 				if (!valid) { | ||||
| 					return; | ||||
| 				} | ||||
| 			}); | ||||
| 			console.log('this.attrform', this.attrForm); | ||||
| 			const isEdit = this.attrForm.id != null; | ||||
| 			this.attrFormSubmitting = true; | ||||
| 			const res = await this.$axios({ | ||||
| 				url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate, | ||||
| 				method: isEdit ? 'put' : 'post', | ||||
| 				data: this.attrForm, | ||||
| 			}); | ||||
|  | ||||
| 			if (res.code == 0) { | ||||
| 				this.closeAttrForm(); | ||||
| 				this.$message({ | ||||
| 					message: `${isEdit ? '更新' : '创建'}成功`, | ||||
| 					type: 'success', | ||||
| 					duration: 1500, | ||||
| 					onClose: () => { | ||||
| 						this.getAttrList(); | ||||
| 					}, | ||||
| 				}); | ||||
| 			} | ||||
| 			this.attrFormSubmitting = false; | ||||
| 				try { | ||||
| 					const isEdit = this.attrForm.id != null; | ||||
| 					this.attrFormSubmitting = true; | ||||
| 					const res = await this.$axios({ | ||||
| 						url: isEdit | ||||
| 							? this.sections[1].urlUpdate | ||||
| 							: this.sections[1].urlCreate, | ||||
| 						method: isEdit ? 'put' : 'post', | ||||
| 						data: this.attrForm, | ||||
| 					}); | ||||
|  | ||||
| 					if (res.code == 0) { | ||||
| 						this.closeAttrForm(); | ||||
| 						this.$message({ | ||||
| 							message: `${isEdit ? '更新' : '创建'}成功`, | ||||
| 							type: 'success', | ||||
| 							duration: 1500, | ||||
| 							onClose: () => { | ||||
| 								this.getAttrList(); | ||||
| 							}, | ||||
| 						}); | ||||
| 					} | ||||
| 					this.attrFormSubmitting = false; | ||||
| 				} catch (err) { | ||||
| 					this.$message({ | ||||
| 						message: err, | ||||
| 						type: 'error', | ||||
| 						duration: 1500, | ||||
| 					}); | ||||
| 					this.attrFormSubmitting = false; | ||||
| 				} | ||||
| 			}); | ||||
| 		}, | ||||
|  | ||||
| 		closeAttrForm() { | ||||
|   | ||||
							
								
								
									
										337
									
								
								src/views/core/base/equipment/components/EquipmentInfoForm.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										337
									
								
								src/views/core/base/equipment/components/EquipmentInfoForm.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,337 @@ | ||||
| <!--  | ||||
|     filename: dialogForm.vue | ||||
|     author: liubin | ||||
|     date: 2023-08-15 10:32:36 | ||||
|     description: 弹窗的表单组件 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| 	<el-form | ||||
| 		class="equipment-info-form" | ||||
| 		ref="form" | ||||
| 		:model="form" | ||||
| 		label-width="200px" | ||||
| 		label-position="top" | ||||
| 		v-loading="formLoading"> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item | ||||
| 					label="设备名称" | ||||
| 					prop="name" | ||||
| 					:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"> | ||||
| 					<el-input | ||||
| 						v-model="form.name" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入设备名称"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="设备编码" prop="code" :rules="[]"> | ||||
| 					<el-input | ||||
| 						v-model="form.code" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入设备编码"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="英文名称" prop="enName" :rules="[]"> | ||||
| 					<el-input | ||||
| 						v-model="form.enName" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入英文名称"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="缩写" prop="abbr" :rules="[]"> | ||||
| 					<el-input | ||||
| 						v-model="form.abbr" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入名称缩写"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="设备类型" prop="equipmentTypeId" :rules="[]"> | ||||
| 					<el-select | ||||
| 						v-model="form.equipmentTypeId" | ||||
| 						:disabled="disabled" | ||||
| 						filterable | ||||
| 						placeholder="请选择设备类型"> | ||||
| 						<el-option | ||||
| 							v-for="eqType in eqTypeList" | ||||
| 							:key="eqType.id" | ||||
| 							:label="eqType.name" | ||||
| 							:value="eqType.id"></el-option> | ||||
| 					</el-select> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="备注" prop="remark" :rules="[]"> | ||||
| 					<el-input | ||||
| 						v-model="form.remark" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入备注"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="生产日期" prop="productionTime" :rules="[]"> | ||||
| 					<el-date-picker | ||||
| 						v-model="form.enterTime" | ||||
| 						:disabled="disabled" | ||||
| 						type="datetime" | ||||
| 						placeholder="请选择生产日期" | ||||
| 						value-format="timestamp"></el-date-picker> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="进场日期" prop="enterTime" :rules="[]"> | ||||
| 					<el-date-picker | ||||
| 						v-model="form.enterTime" | ||||
| 						:disabled="disabled" | ||||
| 						type="datetime" | ||||
| 						placeholder="请选择进场日期" | ||||
| 						value-format="timestamp"></el-date-picker> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item | ||||
| 					label="设备TT值" | ||||
| 					prop="tvalue" | ||||
| 					:rules="[ | ||||
| 						{ required: true, message: '不能为空', trigger: 'blur' }, | ||||
| 						{ | ||||
| 							type: 'number', | ||||
| 							message: '请输入正确的数字值', | ||||
| 							trigger: 'blur', | ||||
| 							transform: (val) => Number(val), | ||||
| 						}, | ||||
| 					]"> | ||||
| 					<el-input | ||||
| 						v-model="form.tvalue" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入设备TT值"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item | ||||
| 					label="产品加工时间(s)" | ||||
| 					prop="processingTime" | ||||
| 					:rules="[ | ||||
| 						{ required: true, message: '不能为空', trigger: 'blur' }, | ||||
| 						{ | ||||
| 							type: 'number', | ||||
| 							message: '请输入正确的数字值', | ||||
| 							trigger: 'blur', | ||||
| 							transform: (val) => Number(val), | ||||
| 						}, | ||||
| 					]"> | ||||
| 					<el-input | ||||
| 						v-model="form.processingTime" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入产品加工时间"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="制造商" prop="manufacturer" :rules="[]"> | ||||
| 					<el-input | ||||
| 						v-model="form.manufacturer" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入制造商"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="8"> | ||||
| 				<el-form-item label="设备规格" prop="spec" :rules="[]"> | ||||
| 					<el-input | ||||
| 						v-model="form.spec" | ||||
| 						:disabled="disabled" | ||||
| 						placeholder="请输入设备规格"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<!-- 功能描述  --> | ||||
| 			<el-col> | ||||
| 				<el-form-item label="功能描述" prop="description" :rules="[]"> | ||||
| 					<el-input | ||||
| 						type="textarea" | ||||
| 						:disabled="disabled" | ||||
| 						v-model="form.description" | ||||
| 						placeholder="请填写功能描述"></el-input> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<!-- 上传资料  --> | ||||
| 			<el-col> | ||||
| 				<el-form-item label="上传资料" prop="assets" :rules="[]"> | ||||
| 					<AssetsUpload v-model="form.assets" :disabled="disabled" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<!-- 上传图片  --> | ||||
| 			<el-col> | ||||
| 				<el-form-item label="上传图片" prop="pics" :rules="[]"> | ||||
| 					<AssetsUpload | ||||
| 						:is-pic-mode="true" | ||||
| 						v-model="form.pics" | ||||
| 						:disabled="disabled" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 	</el-form> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import AssetsUpload from './AssetsUpload.vue'; | ||||
|  | ||||
| export default { | ||||
| 	name: 'EquipmentInfoForm', | ||||
|  | ||||
| 	model: { | ||||
| 		prop: 'dataForm', | ||||
| 		event: 'update', | ||||
| 	}, | ||||
|  | ||||
| 	emits: ['update'], | ||||
|  | ||||
| 	components: { AssetsUpload }, | ||||
|  | ||||
| 	props: { | ||||
| 		dataForm: { | ||||
| 			type: Object, | ||||
| 			default: () => ({}), | ||||
| 		}, | ||||
| 		disabled: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 		syncFilelist: { | ||||
| 			type: Number, | ||||
| 			default: null, | ||||
| 			required: false, | ||||
| 		}, | ||||
| 	}, | ||||
|  | ||||
| 	data() { | ||||
| 		return { | ||||
| 			formLoading: false, | ||||
| 			form: { | ||||
| 				name: '', | ||||
| 				code: '', | ||||
| 				enName: '', | ||||
| 				abbr: '', | ||||
| 				equipmentTypeId: '', | ||||
| 				remark: '', | ||||
| 				productionTime: '', | ||||
| 				enterTime: '', | ||||
| 				tvalue: '', | ||||
| 				processingTime: '', | ||||
| 				manufacturer: '', | ||||
| 				spec: '', | ||||
| 				description: '', | ||||
| 				assets: [], | ||||
| 				pics: [], | ||||
| 			}, | ||||
| 			eqTypeList: [], | ||||
| 			dataLoaded: false, | ||||
| 		}; | ||||
| 	}, | ||||
|  | ||||
| 	watch: { | ||||
| 		dataForm: { | ||||
| 			handler(val) { | ||||
| 				// debugger; | ||||
| 				this.form = JSON.parse(JSON.stringify(val)); | ||||
| 				this.form.assets = | ||||
| 					this.form.files?.filter((item) => item.fileType == '2') || []; | ||||
| 				this.form.pics = | ||||
| 					this.form.files?.filter((item) => item.fileType == '1') || []; | ||||
| 				delete this.form.files; | ||||
| 			}, | ||||
| 			immediate: true, | ||||
| 			deep: true, | ||||
| 		}, | ||||
| 		syncFilelist: { | ||||
| 			handler(val) { | ||||
| 				if (val != null) { | ||||
| 					this.updateForm(); | ||||
| 				} | ||||
| 			}, | ||||
| 			immediate: true, | ||||
| 		}, | ||||
| 	}, | ||||
|  | ||||
| 	mounted() { | ||||
| 		this.getEqTypeList(); | ||||
| 	}, | ||||
|  | ||||
| 	methods: { | ||||
| 		updateForm() { | ||||
| 			console.log('update form ==> '); | ||||
| 			this.form.files = [...this.form.assets, ...this.form.pics]; | ||||
| 			delete this.form.assets; | ||||
| 			delete this.form.pics; | ||||
| 			this.$emit('update', this.form); | ||||
| 		}, | ||||
|  | ||||
| 		async getEqTypeList() { | ||||
| 			this.formLoading = true; | ||||
| 			const { code, data } = await this.$axios( | ||||
| 				'/base/equipment-type/page?pageNo=1&pageSize=100' | ||||
| 			); | ||||
| 			// debugger; | ||||
| 			if (code == 0) { | ||||
| 				this.eqTypeList = data.list; | ||||
| 			} | ||||
| 			this.formLoading = false; | ||||
| 		}, | ||||
|  | ||||
| 		/** 模拟透传 ref  */ | ||||
| 		validate(cb) { | ||||
| 			return this.$refs.form.validate(cb); | ||||
| 		}, | ||||
| 		resetFields(args) { | ||||
| 			return this.$refs.form.resetFields(args); | ||||
| 		}, | ||||
| 		// getCode | ||||
| 		async getCode(url) { | ||||
| 			const response = await this.$axios(url); | ||||
| 			return response.data; | ||||
| 		}, | ||||
| 		// 上传成功的特殊处理 | ||||
| 		beforeUpload() {}, | ||||
| 		// 上传前的验证规则可通过 bind 属性传入 | ||||
| 		handleUploadSuccess(response, file, fileList) { | ||||
| 			console.log( | ||||
| 				'[dialogForm:handleUploadSuccess]', | ||||
| 				response, | ||||
| 				file, | ||||
| 				fileList, | ||||
| 				this.form | ||||
| 			); | ||||
| 			// 保存原始文件名 | ||||
| 			if ('fileNames' in this.form) this.form.fileNames.push(file.name); | ||||
| 			// 保存完整地址 | ||||
| 			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data); | ||||
| 			this.$modal.msgSuccess('上传成功'); | ||||
| 		}, | ||||
|  | ||||
| 		getFileName(fileUrl) { | ||||
| 			return fileUrl.split('/').pop(); | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .el-date-editor, | ||||
| .el-select { | ||||
| 	width: 100%; | ||||
| } | ||||
| </style> | ||||
| @@ -1,111 +0,0 @@ | ||||
| <!--  | ||||
|     filename: EquipmentPics.vue | ||||
|     author: liubin | ||||
|     date: 2023-08-18 16:29:39 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| 	<div class="equipment-pics"> | ||||
| 		<div v-for="(url, idx) in images" :key="url"> | ||||
| 			<img :src="url" :alt="url" /> | ||||
| 			<figure class="big-img" :style="inlineStyle"> | ||||
| 				<img :src="url" :alt="url" /> | ||||
| 				<figcaption>{{ desc[idx] }}</figcaption> | ||||
| 			</figure> | ||||
| 		</div> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
| 	name: 'EquipmentPics', | ||||
| 	components: {}, | ||||
| 	props: { | ||||
| 		inlineStyle: { | ||||
| 			type: Object, | ||||
| 			default: () => ({}), | ||||
| 		}, | ||||
| 	}, | ||||
| 	data() { | ||||
| 		return { | ||||
| 			desc: [ | ||||
| 				'车间设备 - 1', | ||||
| 				'车间设备 - 2', | ||||
| 				'车间设备 - 3', | ||||
| 				'车间设备 - 4', | ||||
| 				'车间设备 - 5', | ||||
| 				'车间设备 - 6', | ||||
| 				'车间设备 - 7', | ||||
| 				'车间设备 - 8', | ||||
| 				'车间设备 - 9', | ||||
| 				'车间设备 - 10', | ||||
| 				'车间设备 - 11', | ||||
| 				'车间设备 - 12', | ||||
| 			], | ||||
| 			images: Array(10) | ||||
| 				.fill(1) | ||||
| 				.map((_, index) => require(`../assets/eq${index + 1}.jpg`)), | ||||
| 		}; | ||||
| 	}, | ||||
| 	methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .equipment-pics { | ||||
| 	// background: #cfcfcf; | ||||
| 	padding: 12px; | ||||
| 	// margin: 8px; | ||||
| 	display: flex; | ||||
| 	overflow-x: auto; | ||||
| } | ||||
|  | ||||
| .equipment-pics > div { | ||||
| 	height: 100px; | ||||
| 	position: relative; | ||||
| 	cursor: pointer; | ||||
| } | ||||
|  | ||||
| .equipment-pics > div:not(:last-child) { | ||||
| 	margin-right: 12px; | ||||
| } | ||||
|  | ||||
| .equipment-pics > div > img { | ||||
| 	height: 95%; | ||||
| } | ||||
|  | ||||
| .equipment-pics > div > figure { | ||||
| 	display: none; | ||||
| 	position: fixed; | ||||
| 	// inset: 0; | ||||
| 	// margin: auto; | ||||
| 	top: 0; | ||||
| 	right: 0; | ||||
| 	// width: 640px; | ||||
| 	// height: 480px; | ||||
| 	background: #000; | ||||
| 	overflow: hidden; | ||||
| 	padding: 8px 8px 0; | ||||
| } | ||||
|  | ||||
| .equipment-pics > div:hover > figure { | ||||
| 	margin: 0; | ||||
| 	display: flex; | ||||
| 	flex-direction: column; | ||||
| 	align-items: center; | ||||
| 	justify-content: center; | ||||
| } | ||||
|  | ||||
| .equipment-pics > div > figure > img { | ||||
| 	flex: 1; | ||||
| } | ||||
|  | ||||
| .equipment-pics > div > figure > figcaption { | ||||
| 	height: 24px; | ||||
| 	margin-top: 8px; | ||||
| 	font-size: 18px; | ||||
| 	line-height: 1; | ||||
| 	color: #fff; | ||||
| } | ||||
| </style> | ||||
| @@ -36,13 +36,17 @@ | ||||
| 			:dialogVisible="open" | ||||
| 			@close="cancel" | ||||
| 			@cancel="cancel" | ||||
| 			width="60%" | ||||
| 			@confirm="submitForm"> | ||||
| 			<DialogForm | ||||
| 				v-if="open" | ||||
| 				key="index-dialog-form" | ||||
| 				ref="form" | ||||
| 				:dataForm="form" | ||||
| 				:rows="rows" /> | ||||
| 				label-position="top" | ||||
| 				size="small" | ||||
| 				v-model="form" | ||||
| 				:rows="computedRows" | ||||
| 				:has-file="true" /> | ||||
| 		</base-dialog> | ||||
|  | ||||
| 		<!-- 设备 详情 - 编辑 --> | ||||
| @@ -50,12 +54,13 @@ | ||||
| 			v-if="editVisible" | ||||
| 			ref="drawer" | ||||
| 			:mode="editMode" | ||||
| 			@update-mode="editMode = $event" | ||||
| 			:data-id="form.id" | ||||
| 			:sections="[ | ||||
| 				{ | ||||
| 					name: '基本信息', | ||||
| 					key: 'base', | ||||
| 					rows: rows, | ||||
| 					rows: computedRows, | ||||
| 					url: '/base/equipment/get', | ||||
| 					urlUpdate: '/base/equipment/update', | ||||
| 					urlCreate: '/base/equipment/create', | ||||
| @@ -93,17 +98,14 @@ | ||||
| 				}, | ||||
| 			]" | ||||
| 			@refreshDataList="getList" | ||||
| 			@cancel="editVisible = false" | ||||
| 			@destroy="editVisible = false" /> | ||||
| 			@cancel="cancelEdit" | ||||
| 			@destroy="cancelEdit" /> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import moment from 'moment'; | ||||
| import basicPageMixin from '@/mixins/lb/basicPageMixin'; | ||||
| import { getAccessToken } from '@/utils/auth'; | ||||
| import EquipmentPics from './components/EquipmentPics'; | ||||
| import EquipmentAssets from './components/EquipmentAssets'; | ||||
| import EquipmentDrawer from './components/EquipmentDrawer'; | ||||
|  | ||||
| import { | ||||
| @@ -115,6 +117,7 @@ import { | ||||
| 	exportEquipmentExcel, | ||||
| } from '@/api/base/equipment'; | ||||
| import Editor from '@/components/Editor'; | ||||
| import AssetsUpload from './components/AssetsUpload.vue'; | ||||
|  | ||||
| export default { | ||||
| 	name: 'Equipment', | ||||
| @@ -127,6 +130,12 @@ export default { | ||||
| 		return { | ||||
| 			searchBarKeys: ['name', 'code'], | ||||
| 			tableBtn: [ | ||||
| 				this.$auth.hasPermi(`base:equipment:update`) | ||||
| 					? { | ||||
| 							type: 'detail', | ||||
| 							btnName: '详情', | ||||
| 					  } | ||||
| 					: undefined, | ||||
| 				this.$auth.hasPermi('base:equipment:update') | ||||
| 					? { | ||||
| 							type: 'edit', | ||||
| @@ -139,12 +148,6 @@ export default { | ||||
| 							btnName: '删除', | ||||
| 					  } | ||||
| 					: undefined, | ||||
| 				this.$auth.hasPermi(`base:equipment:update`) | ||||
| 					? { | ||||
| 							type: 'detail', | ||||
| 							btnName: '详情', | ||||
| 					  } | ||||
| 					: undefined, | ||||
| 			].filter((v) => v), | ||||
| 			tableProps: [ | ||||
| 				{ | ||||
| @@ -155,7 +158,7 @@ export default { | ||||
| 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
| 				}, | ||||
| 				{ prop: 'name', label: '设备名称' }, | ||||
| 				{ width: 256, prop: 'code', label: '检测编码' }, | ||||
| 				{ width: 256, prop: 'code', label: '设备编码' }, | ||||
| 				{ prop: 'equipmentType', label: '设备类型' }, | ||||
| 				{ prop: 'enName', label: '英文名称' }, | ||||
| 				{ prop: 'abbr', label: '缩写' }, | ||||
| @@ -208,6 +211,13 @@ export default { | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '', | ||||
| 					btnName: '导出', | ||||
| 					name: 'export', | ||||
| 					plain: true, | ||||
| 					color: 'primary', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '', | ||||
| 					btnName: '新增', | ||||
| @@ -215,12 +225,6 @@ export default { | ||||
| 					plain: true, | ||||
| 					color: 'success', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '', | ||||
| 					btnName: '导出', | ||||
| 					name: 'export', | ||||
| 					color: 'warning', | ||||
| 				}, | ||||
| 			], | ||||
| 			rows: [ | ||||
| 				[ | ||||
| @@ -239,8 +243,6 @@ export default { | ||||
| 						prop: 'code', | ||||
| 						url: '/base/equipment/getCode', | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						input: true, | ||||
| 						label: '英文名称', | ||||
| @@ -250,6 +252,8 @@ export default { | ||||
| 						// 	disabled: true, // some condition, like detail mode... | ||||
| 						// } | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						input: true, | ||||
| 						label: '缩写', | ||||
| @@ -259,13 +263,15 @@ export default { | ||||
| 						// 	disabled: true, // some condition, like detail mode... | ||||
| 						// } | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
|  | ||||
| 					{ | ||||
| 						select: true, | ||||
| 						label: '设备类型', | ||||
| 						prop: 'equipmentTypeId', | ||||
| 						url: '/base/equipment-type/page?pageNo=1&pageSize=100', | ||||
| 						bind: { | ||||
| 							filterable: true, | ||||
| 						}, | ||||
| 					}, | ||||
| 					// { | ||||
| 					// 	select: true, | ||||
| @@ -286,8 +292,6 @@ export default { | ||||
| 						label: '进厂日期', | ||||
| 						prop: 'enterTime', | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						input: true, | ||||
| 						prop: 'tvalue', | ||||
| @@ -302,11 +306,14 @@ export default { | ||||
| 							}, | ||||
| 						], | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						input: true, | ||||
| 						label: '产品加工时间', | ||||
| 						label: '产品加工时间(s)', | ||||
| 						prop: 'processingTime', | ||||
| 						rules: [ | ||||
| 							{ required: true, message: '不能为空', trigger: 'blur' }, | ||||
| 							{ | ||||
| 								type: 'number', | ||||
| 								message: '请输入正确的数字值', | ||||
| @@ -315,8 +322,7 @@ export default { | ||||
| 							}, | ||||
| 						], | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
|  | ||||
| 					{ | ||||
| 						input: true, | ||||
| 						label: '制造商', | ||||
| @@ -337,40 +343,79 @@ export default { | ||||
| 						prop: 'description', | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						upload: true, | ||||
| 						label: '上传资料', | ||||
| 						prop: 'uploadFiles', | ||||
| 						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 | ||||
| 						bind: { | ||||
| 							headers: { Authorization: 'Bearer ' + getAccessToken() }, | ||||
| 							'show-file-list': false, | ||||
| 						}, | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						diy: true, | ||||
| 						key: 'eq-assets', | ||||
| 						label: '设备资料', | ||||
| 						prop: 'fileNames', | ||||
| 						subcomponent: EquipmentAssets, | ||||
| 					}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						diy: true, | ||||
| 						key: 'eq-pics', | ||||
| 						label: '设备图片', | ||||
| 						prop: 'fileUrls', | ||||
| 						subcomponent: EquipmentPics, | ||||
| 						pictures: async () => { | ||||
| 							// some async request | ||||
| 							return []; | ||||
| 						}, | ||||
| 					}, | ||||
| 				], | ||||
| 				// [ | ||||
| 				// 	{ | ||||
| 				// 		assetUpload: true, | ||||
| 				// 		label: '上传资料', | ||||
| 				// 		fieldName: 'assets', | ||||
| 				// 		subcomponent: AssetsUpload | ||||
| 				// 	}, | ||||
| 				// ], | ||||
| 				// [ | ||||
| 				// 	{ | ||||
| 				// 		assetUpload: true, | ||||
| 				// 		label: '上传图片', | ||||
| 				// 		fieldName: 'images', | ||||
| 				// 		subcomponent: AssetsUpload | ||||
| 				// 	}, | ||||
| 				// ], | ||||
| 				// [ | ||||
| 				// 	{ | ||||
| 				// 		upload: true, | ||||
| 				// 		label: '上传资料', | ||||
| 				// 		prop: 'uploadFiles', | ||||
| 				// 		url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 | ||||
| 				// 		uploadFnName: 'assetsUpload', // 上传方法名 | ||||
| 				// 		bind: { | ||||
| 				// 			headers: { Authorization: 'Bearer ' + getAccessToken() }, | ||||
| 				// 			'show-file-list': false, | ||||
| 				// 		}, | ||||
| 				// 	}, | ||||
| 				// 	{ | ||||
| 				// 		diy: true, | ||||
| 				// 		key: 'eq-assets', | ||||
| 				// 		label: '设备资料', | ||||
| 				// 		prop: 'fileNames', | ||||
| 				// 		subcomponent: EquipmentAssets, | ||||
| 				// 	}, | ||||
| 				// ], | ||||
| 				// [ | ||||
| 				// { | ||||
| 				// 		upload: true, | ||||
| 				// 		label: '上传图片', | ||||
| 				// 		prop: 'uploadImages', | ||||
| 				// 		url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 | ||||
| 				// 		uploadFnName: 'imagesUpload', // 上传方法名 | ||||
| 				// 		bind: { | ||||
| 				// 			headers: { Authorization: 'Bearer ' + getAccessToken() }, | ||||
| 				// 			'show-file-list': false, | ||||
| 				// 		}, | ||||
| 				// 	}, | ||||
| 				// 	{ | ||||
| 				// 		diy: true, | ||||
| 				// 		key: 'eq-pics', | ||||
| 				// 		label: '设备图片', | ||||
| 				// 		prop: 'fileUrls', | ||||
| 				// 		subcomponent: EquipmentPics, | ||||
| 				// 		pictures: async () => { | ||||
| 				// 			// some async request | ||||
| 				// 			return []; | ||||
| 				// 		}, | ||||
| 				// 	}, | ||||
| 				// ], | ||||
| 				// [ | ||||
| 				// 	{ | ||||
| 				// 		diy: true, | ||||
| 				// 		key: 'eq-pics', | ||||
| 				// 		label: '设备图片', | ||||
| 				// 		prop: 'fileUrls', | ||||
| 				// 		subcomponent: EquipmentPics, | ||||
| 				// 		pictures: async () => { | ||||
| 				// 			// some async request | ||||
| 				// 			return []; | ||||
| 				// 		}, | ||||
| 				// 	}, | ||||
| 				// ], | ||||
| 			], | ||||
| 			editVisible: false, | ||||
| 			editMode: 'edit', // 'edit', 'detail' | ||||
| @@ -399,11 +444,49 @@ export default { | ||||
| 			form: { | ||||
| 				id: null, | ||||
| 			}, | ||||
| 			showUploadComponents: false, // 是否显示上传组件 | ||||
| 		}; | ||||
| 	}, | ||||
| 	created() { | ||||
| 		this.getList(); | ||||
| 	}, | ||||
| 	computed: { | ||||
| 		computedRows() { | ||||
| 			return this.showUploadComponents | ||||
| 				? [ | ||||
| 						...this.rows, | ||||
| 						[ | ||||
| 							{ | ||||
| 								assetUpload: true, | ||||
| 								key: 'eq-assets', // 用于区分不同的上传组件 | ||||
| 								label: '上传资料', | ||||
| 								fieldName: 'assets', | ||||
| 								subcomponent: AssetsUpload, | ||||
| 								prop: 'uploadedAssets', | ||||
| 								default: [], | ||||
| 								bind: { | ||||
| 									'is-pic-mode': false, | ||||
| 								}, | ||||
| 							}, | ||||
| 						], | ||||
| 						[ | ||||
| 							{ | ||||
| 								assetUpload: true, | ||||
| 								key: 'eq-pics', // 用于区分不同的上传组件 | ||||
| 								label: '上传图片', | ||||
| 								fieldName: 'images', | ||||
| 								subcomponent: AssetsUpload, | ||||
| 								// prop: '', | ||||
| 								// default: [], | ||||
| 								bind: { | ||||
| 									'is-pic-mode': true, | ||||
| 								}, | ||||
| 							}, | ||||
| 						], | ||||
| 				  ] | ||||
| 				: this.rows; | ||||
| 		}, | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		/** 查询列表 */ | ||||
| 		getList() { | ||||
| @@ -420,6 +503,10 @@ export default { | ||||
| 			this.open = false; | ||||
| 			this.reset(); | ||||
| 		}, | ||||
| 		cancelEdit() { | ||||
| 			this.showUploadComponents = false; | ||||
| 			this.editVisible = false; | ||||
| 		}, | ||||
| 		/** 表单重置 */ | ||||
| 		reset() { | ||||
| 			this.form = { | ||||
| @@ -445,11 +532,13 @@ export default { | ||||
| 		handleAdd() { | ||||
| 			this.reset(); | ||||
| 			this.open = true; | ||||
| 			this.showUploadComponents = false; | ||||
| 			this.title = '添加设备'; | ||||
| 		}, | ||||
| 		/** 修改按钮操作 */ | ||||
| 		handleUpdate(row) { | ||||
| 			this.reset(); | ||||
| 			this.showUploadComponents = true; | ||||
| 			const id = row.id; | ||||
| 			getEquipment(id).then((response) => { | ||||
| 				this.form = response.data; | ||||
| @@ -516,6 +605,7 @@ export default { | ||||
| 		viewDetail(id) { | ||||
| 			this.reset(); | ||||
| 			this.editMode = 'detail'; | ||||
| 			this.showUploadComponents = true; | ||||
| 			this.form.id = id; | ||||
| 			this.editVisible = true; | ||||
| 			this.$nextTick(() => { | ||||
| @@ -524,11 +614,11 @@ export default { | ||||
| 		}, | ||||
| 		// overwrite basicPageMixin 里的 处理表格按钮 方法 | ||||
| 		handleTableBtnClick({ data, type }) { | ||||
| 			console.log('[handleTableBtnClick]', data, type); | ||||
| 			switch (type) { | ||||
| 				case 'edit': | ||||
| 					this.reset(); | ||||
| 					this.editMode = 'edit'; | ||||
| 					this.showUploadComponents = true; | ||||
| 					this.form.id = data.id; | ||||
| 					this.editVisible = true; | ||||
| 					this.$nextTick(() => { | ||||
|   | ||||
| @@ -37,7 +37,12 @@ | ||||
| 			@close="cancel" | ||||
| 			@cancel="cancel" | ||||
| 			@confirm="submitForm"> | ||||
| 			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> | ||||
| 			<DialogForm | ||||
| 				v-if="open" | ||||
| 				ref="form" | ||||
| 				v-model="form" | ||||
| 				:rows="rows" | ||||
| 				:has-file="true" /> | ||||
| 		</base-dialog> | ||||
| 	</div> | ||||
| </template> | ||||
| @@ -55,7 +60,7 @@ import { | ||||
| 	exportEquipmentTypeExcel, | ||||
| } from '@/api/base/equipmentType'; | ||||
|  | ||||
| import { getAccessToken } from '@/utils/auth'; | ||||
| // import { getAccessToken } from '@/utils/auth'; | ||||
|  | ||||
| export default { | ||||
| 	name: 'EquipmentType', | ||||
| @@ -86,9 +91,9 @@ export default { | ||||
| 					width: 180, | ||||
| 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
| 				}, | ||||
| 				{ prop: 'name', label: '设备类型名称',  }, | ||||
| 				{ prop: 'code', label: '检测类型编码',  }, | ||||
| 				{ prop: 'remark', label: '备注',  }, | ||||
| 				{ prop: 'name', label: '设备类型名称' }, | ||||
| 				{ prop: 'code', label: '检测类型编码' }, | ||||
| 				{ prop: 'remark', label: '备注' }, | ||||
| 			], | ||||
| 			searchBarFormConfig: [ | ||||
| 				{ | ||||
| @@ -149,15 +154,13 @@ export default { | ||||
| 						prop: 'parentId', | ||||
| 						url: '/base/equipment-type/page?pageNo=1&pageSize=100', | ||||
| 					}, | ||||
| 					{}, | ||||
| 				], | ||||
| 				[ | ||||
| 					{ | ||||
| 						upload: true, | ||||
| 						label: '上传资料', | ||||
| 						prop: 'uploadFiles', | ||||
| 						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 | ||||
| 						bind: { | ||||
| 							headers: { Authorization: 'Bearer ' + getAccessToken() }, | ||||
| 							'show-file-list': false, | ||||
| 						}, | ||||
| 						prop: 'files', | ||||
| 					}, | ||||
| 				], | ||||
| 				[{ input: true, label: '备注', prop: 'remark' }], | ||||
| @@ -209,8 +212,6 @@ export default { | ||||
| 				name: undefined, | ||||
| 				parentId: undefined, | ||||
| 				remark: undefined, | ||||
| 				fileNames: [], | ||||
| 				fileUrls: [], | ||||
| 			}; | ||||
| 			this.resetForm('form'); | ||||
| 		}, | ||||
| @@ -236,6 +237,25 @@ export default { | ||||
| 			const id = row.id; | ||||
| 			getEquipmentType(id).then((response) => { | ||||
| 				this.form = response.data; | ||||
| 				// this.form = { | ||||
| 				// 	code: 'SBLX20230925184444000041', | ||||
| 				// 	name: '测试131', | ||||
| 				// 	remark: '测试可删除', | ||||
| 				// 	id: '1706258479729336322', | ||||
| 				// 	files: [ | ||||
| 				// 		{ fileName: '1.png', fileUrl: '', fileType: 2 }, | ||||
| 				// 		{ fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 }, | ||||
| 				// 		{ fileName: '2.txt', fileUrl: '', fileType: 2 }, | ||||
| 				// 		{ fileName: '1.rar', fileUrl: '', fileType: 2 }, | ||||
| 				// 		{ fileName: '1.kkk', fileUrl: '', fileType: 2 }, | ||||
| 				// 		{ fileName: 'test.file', fileUrl: '', fileType: 2 }, | ||||
| 				// 		{ fileName: '222', fileUrl: '', fileType: 2 }, | ||||
| 				// 		{ fileName: 'g', fileUrl: '', fileType: 2 }, | ||||
| 				// 	], | ||||
| 				// 	createTime: 1695638697000, | ||||
| 				// 	parentId: '1701869972319584257', | ||||
| 				// }; | ||||
| 				// debugger; | ||||
| 				this.open = true; | ||||
| 				this.title = '修改设备类型'; | ||||
| 			}); | ||||
| @@ -267,7 +287,7 @@ export default { | ||||
| 		handleDelete(row) { | ||||
| 			const id = row.id; | ||||
| 			this.$modal | ||||
| 				.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?') | ||||
| 				.confirm('是否确认删除设备类型"' + row.name + '"?') | ||||
| 				.then(function () { | ||||
| 					return deleteEquipmentType(id); | ||||
| 				}) | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2021-11-18 14:16:25 | ||||
|  * @LastEditors: zwq | ||||
|  * @LastEditTime: 2023-08-01 16:59:06 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2023-10-16 11:16:48 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| @@ -12,21 +12,30 @@ | ||||
| 		ref="dataForm" | ||||
| 		@keyup.enter.native="dataFormSubmit()" | ||||
| 		label-width="80px"> | ||||
| 		<el-form-item label="工厂编码" prop="code"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.code" | ||||
| 				clearable | ||||
| 				placeholder="请输入工厂编码" /> | ||||
| 		</el-form-item> | ||||
| 		<el-form-item label="工厂名称" prop="name"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.name" | ||||
| 				clearable | ||||
| 				placeholder="请输入工厂名称" /> | ||||
| 		</el-form-item> | ||||
| 		<el-form-item label="地址" prop="address"> | ||||
| 			<el-input v-model="dataForm.address" clearable placeholder="请输入地址" /> | ||||
| 		</el-form-item> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="工厂编码" prop="code"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.code" | ||||
| 						clearable | ||||
| 						placeholder="请输入工厂编码" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="工厂名称" prop="name"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.name" | ||||
| 						clearable | ||||
| 						placeholder="请输入工厂名称" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="地址" prop="address"> | ||||
| 					<el-input v-model="dataForm.address" clearable placeholder="请输入地址" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		<!-- <el-form-item label="启用状态" prop="enabled"> | ||||
| 			<el-select | ||||
| 				v-model="dataForm.enabled" | ||||
| @@ -38,9 +47,12 @@ | ||||
| 					:value="dict.value" /> | ||||
| 			</el-select> | ||||
| 		</el-form-item> --> | ||||
| 		<el-form-item label="备注" prop="remark"> | ||||
| 			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | ||||
| 		</el-form-item> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="备注" prop="remark"> | ||||
| 					<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 	</el-form> | ||||
| </template> | ||||
|  | ||||
|   | ||||
| @@ -29,7 +29,7 @@ | ||||
| 			@cancel="handleCancel" | ||||
| 			@confirm="handleConfirm" | ||||
| 			:before-close="handleCancel" | ||||
| 			width="70%"> | ||||
| 			width="50%"> | ||||
| 			<add-or-update | ||||
| 				ref="addOrUpdate" | ||||
| 				@refreshDataList="successSubmit"></add-or-update> | ||||
| @@ -51,7 +51,7 @@ const tableProps = [ | ||||
| 	{ | ||||
| 		prop: 'code', | ||||
| 		label: '工厂编码' | ||||
| 	}, | ||||
| 	},																																																																						 | ||||
| 	{ | ||||
| 		prop: 'name', | ||||
| 		label: '工厂名称' | ||||
|   | ||||
| @@ -2,15 +2,14 @@ | ||||
|  * @Author: zwq | ||||
|  * @Date: 2023-08-02 15:12:42 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2023-10-10 16:49:03 | ||||
|  * @LastEditTime: 2023-10-13 16:35:03 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| 	<div class="app-container"> | ||||
| 		<search-bar | ||||
| 			:formConfigs="formConfig" | ||||
| 			ref="searchBarForm" | ||||
| 			@headBtnClick="buttonClick" /> | ||||
| 			:formConfigs="[{ label: '产线在制产品', type: 'title' }]" | ||||
| 			ref="searchBarForm" /> | ||||
| 		<base-table | ||||
| 			v-loading="dataListLoading" | ||||
| 			:table-props="tableProps" | ||||
| @@ -36,20 +35,17 @@ import { getProductPage } from '@/api/core/base/product'; | ||||
| const tableProps = [ | ||||
| 	{ | ||||
| 		prop: 'lineName', | ||||
| 		label: '产线', | ||||
| 		align: 'center', | ||||
| 		label: '产线' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'productName', | ||||
| 		label: '在制产品', | ||||
| 		align: 'center', | ||||
| 		list: [], | ||||
| 		subcomponent: selectProduct, | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'recordTime', | ||||
| 		label: '开始时间', | ||||
| 		align: 'center', | ||||
| 		filter: parseTime, | ||||
| 	}, | ||||
| ]; | ||||
| @@ -63,14 +59,14 @@ export default { | ||||
| 			}, | ||||
| 			tableProps, | ||||
| 			tableData: [], | ||||
| 			formConfig: [ | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| 					btnName: '同步', | ||||
| 					name: 'search', | ||||
| 					color: 'primary', | ||||
| 				}, | ||||
| 			], | ||||
| 			// formConfig: [ | ||||
| 			// 	{ | ||||
| 			// 		type: 'button', | ||||
| 			// 		btnName: '同步', | ||||
| 			// 		name: 'search', | ||||
| 			// 		color: 'primary', | ||||
| 			// 	}, | ||||
| 			// ], | ||||
| 		}; | ||||
| 	}, | ||||
| 	components: {}, | ||||
|   | ||||
| @@ -2,12 +2,11 @@ | ||||
|  * @Author: zwq | ||||
|  * @Date: 2023-08-03 14:09:18 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2023-10-10 16:54:09 | ||||
|  * @LastEditTime: 2023-10-13 16:47:25 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| 	<div class="tableInner"> | ||||
| 		<el-input readonly v-model="list.productName" style="width: 50%;" ></el-input> | ||||
| 		<el-popover | ||||
|     placement="top" | ||||
|     title="切换在制产品" | ||||
| @@ -28,8 +27,11 @@ | ||||
| 					确定 | ||||
| 				</el-button> | ||||
| 			</div> | ||||
| 			<el-button type="text" slot="reference">切换</el-button> | ||||
| 			<el-button type="text" slot="reference"> | ||||
| 				<svg-icon icon-class="changelogo"/> | ||||
| 			</el-button> | ||||
| 		</el-popover> | ||||
| 		<el-input readonly v-model="list.productName" style="width: 50%;margin-left: 5px" ></el-input> | ||||
| 	</div> | ||||
| </template> | ||||
| <script> | ||||
| @@ -61,6 +63,7 @@ export default { | ||||
| 			switchLineBindProduct(data).then((response) => { | ||||
| 				this.$modal.msgSuccess('修改成功'); | ||||
| 				this.visible = false; | ||||
| 				this.list.productName = this.list.string.split('+')[1] | ||||
| 				this.$emit('emitData'); | ||||
| 			}); | ||||
| 		}, | ||||
|   | ||||
| @@ -28,24 +28,20 @@ import { getProductPage } from '@/api/core/base/product'; | ||||
| const tableProps = [ | ||||
| 	{ | ||||
| 		prop: 'productionLineName', | ||||
| 		label: '产线', | ||||
| 		align: 'center', | ||||
| 		label: '产线' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'productName', | ||||
| 		label: '在制产品', | ||||
| 		align: 'center', | ||||
| 		label: '在制产品' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'startTime', | ||||
| 		label: '开始时间', | ||||
| 		align: 'center', | ||||
| 		filter: parseTime, | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'endTime', | ||||
| 		label: '结束时间', | ||||
| 		align: 'center', | ||||
| 		filter: parseTime, | ||||
| 	}, | ||||
| ]; | ||||
| @@ -86,7 +82,8 @@ export default { | ||||
| 					rangeSeparator: '-', | ||||
| 					startPlaceholder: '开始时间', | ||||
| 					endPlaceholder: '结束时间', | ||||
| 					param: 'createTime', | ||||
| 					param: 'startTime', | ||||
| 					valueFormat: 'timestamp' | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| @@ -126,7 +123,7 @@ export default { | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.listQuery.productionLineId = val.productionLineId; | ||||
| 					this.listQuery.productId = val.productId; | ||||
| 					this.listQuery.createTime = val.createTime; | ||||
| 					this.listQuery.startTime = val.startTime; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'reset': | ||||
|   | ||||
| @@ -43,7 +43,7 @@ | ||||
| 							<el-form-item label="产品类型" prop="typeDictValue"> | ||||
| 								<el-select | ||||
| 									v-model="dataForm.typeDictValue" | ||||
|                   style="width: 100%" | ||||
| 									style="width: 100%" | ||||
| 									:disabled="isdetail" | ||||
| 									placeholder="请选择产品类型"> | ||||
| 									<el-option | ||||
| @@ -58,7 +58,7 @@ | ||||
| 							<el-form-item label="单位" prop="unitDictValue"> | ||||
| 								<el-select | ||||
| 									v-model="dataForm.unitDictValue" | ||||
|                   style="width: 100%" | ||||
| 									style="width: 100%" | ||||
| 									:disabled="isdetail" | ||||
| 									placeholder="请选择单位"> | ||||
| 									<el-option | ||||
| @@ -83,8 +83,8 @@ | ||||
| 							<el-form-item label="单位平方数" prop="area"> | ||||
| 								<el-input | ||||
| 									:disabled="isdetail" | ||||
|                   v-model="dataForm.area" | ||||
|                   placeholder="请输入单位平方数" /> | ||||
| 									v-model="dataForm.area" | ||||
| 									placeholder="请输入单位平方数" /> | ||||
| 							</el-form-item> | ||||
| 						</el-col> | ||||
| 					</el-row> | ||||
| @@ -111,6 +111,8 @@ | ||||
| 						:table-props="tableProps" | ||||
| 						:page="listQuery.pageNo" | ||||
| 						:limit="listQuery.pageSize" | ||||
| 						:add-button-show="isdetail ? null : '添加属性'" | ||||
| 						@emitButtonClick="addNew()" | ||||
| 						:table-data="productAttributeList"> | ||||
| 						<method-btn | ||||
| 							v-if="!isdetail" | ||||
| @@ -123,15 +125,15 @@ | ||||
| 					<pagination | ||||
| 						v-show="listQuery.total > 0" | ||||
| 						:total="listQuery.total" | ||||
| 						:page.sync="listQuery.current" | ||||
| 						:limit.sync="listQuery.size" | ||||
| 						:page.sync="listQuery.pageNo" | ||||
| 						:limit.sync="listQuery.pageSize" | ||||
| 						:page-sizes="[5, 10, 15]" | ||||
| 						@pagination="getList" /> | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
|  | ||||
| 		<div style="position: absolute; bottom: 24px; right: 24px"> | ||||
| 		<!-- <div style="position: absolute; bottom: 24px; right: 24px"> | ||||
| 			<el-button style="margin-right: 10px" @click="goback()">返回</el-button> | ||||
| 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | ||||
| 				编辑 | ||||
| @@ -145,6 +147,14 @@ | ||||
| 					添加属性 | ||||
| 				</el-button> | ||||
| 			</span> | ||||
| 		</div> --> | ||||
|  | ||||
| 		<div class="drawer-body__footer"> | ||||
| 			<el-button style="" @click="goback()">取消</el-button> | ||||
| 			<el-button v-if="isdetail" type="primary" @click="goEdit()"> | ||||
| 				编辑 | ||||
| 			</el-button> | ||||
| 			<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button> | ||||
| 		</div> | ||||
|  | ||||
| 		<product-attr-add | ||||
| @@ -250,12 +260,12 @@ export default { | ||||
| 					}, | ||||
| 				], | ||||
| 				area: [ | ||||
| 					// { | ||||
| 					// 	type: 'float', | ||||
| 					// 	message: '单位平方数为浮点类型', | ||||
| 					// 	trigger: 'blur', | ||||
| 					// 	transfom: 'val => Float(val)', | ||||
| 					// }, | ||||
| 					{ | ||||
| 						type: 'number', | ||||
| 						message: '请输入正确的数值', | ||||
| 						trigger: 'change', | ||||
| 						transform: (val) => Number(val), | ||||
| 					}, | ||||
| 				], | ||||
| 				processTime: [ | ||||
| 					{ | ||||
| @@ -263,12 +273,12 @@ export default { | ||||
| 						message: '完成单位产品用时不能为空', | ||||
| 						trigger: 'blur', | ||||
| 					}, | ||||
| 					// { | ||||
| 					// 	type: 'number', | ||||
| 					// 	message: '完成单位产品用时为浮点类型', | ||||
| 					// 	trigger: 'blur', | ||||
| 					// 	transfom: 'val => Number(val)', | ||||
| 					// }, | ||||
| 					{ | ||||
| 						type: 'number', | ||||
| 						message: '请输入正确的数值', | ||||
| 						trigger: 'blur', | ||||
| 						transform: (val) => Number(val), | ||||
| 					}, | ||||
| 				], | ||||
| 			}, | ||||
| 			isdetail: false, | ||||
| @@ -277,6 +287,7 @@ export default { | ||||
| 	methods: { | ||||
| 		initData() { | ||||
| 			this.productAttributeList.splice(0); | ||||
| 			this.listQuery.total = 0; | ||||
| 		}, | ||||
| 		init(id, isdetail) { | ||||
| 			this.initData(); | ||||
| @@ -304,12 +315,10 @@ export default { | ||||
|  | ||||
| 		getList() { | ||||
| 			// 获取产品的属性列表 | ||||
| 			const params = { | ||||
| 				pageSize: 10, | ||||
| 				pageNo: 1, | ||||
| 			getProductAttrPage({ | ||||
| 				...this.listQuery, | ||||
| 				productId: this.dataForm.id, | ||||
| 			}; | ||||
| 			getProductAttrPage(params).then((response) => { | ||||
| 			}).then((response) => { | ||||
| 				this.productAttributeList = response.data.list; | ||||
| 				this.listQuery.total = response.data.total; | ||||
| 			}); | ||||
| @@ -390,6 +399,8 @@ export default { | ||||
| <style scoped> | ||||
| .drawer >>> .el-drawer { | ||||
| 	border-radius: 8px 0 0 8px; | ||||
| 	display: flex; | ||||
| 	flex-direction: column; | ||||
| } | ||||
|  | ||||
| .drawer >>> .el-form-item__label { | ||||
| @@ -400,14 +411,20 @@ export default { | ||||
| 	margin: 0; | ||||
| 	padding: 32px 32px 24px; | ||||
| 	border-bottom: 1px solid #dcdfe6; | ||||
| 	margin-bottom: 30px; | ||||
| } | ||||
| .drawer >>> .el-drawer__body { | ||||
| 	flex: 1; | ||||
| 	height: 1px; | ||||
| 	display: flex; | ||||
| 	flex-direction: column; | ||||
| } | ||||
|  | ||||
| .drawer >>> .content { | ||||
| 	padding: 0 24px 30px; | ||||
| 	padding: 30px 24px; | ||||
| 	flex: 1; | ||||
| 	display: flex; | ||||
| 	flex-direction: column; | ||||
| 	height: 100%; | ||||
| 	/* height: 100%; */ | ||||
| } | ||||
|  | ||||
| .drawer >>> .visual-part { | ||||
| @@ -422,4 +439,10 @@ export default { | ||||
| .drawer >>> .attr-list { | ||||
| 	padding: 0 16px; | ||||
| } | ||||
|  | ||||
| .drawer-body__footer { | ||||
| 	display: flex; | ||||
| 	justify-content: flex-end; | ||||
| 	padding: 18px; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2023-08-01 14:55:51 | ||||
|  * @LastEditors: zwq | ||||
|  * @LastEditTime: 2023-08-03 15:22:53 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2023-10-13 10:27:00 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| @@ -50,30 +50,25 @@ import { | ||||
| const tableProps = [ | ||||
| 	{ | ||||
| 		prop: 'code', | ||||
| 		label: '产品编码', | ||||
| 		align: 'center', | ||||
| 		label: '产品编码' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'name', | ||||
| 		label: '产品名称', | ||||
| 		align: 'center', | ||||
| 		label: '产品名称' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'specifications', | ||||
| 		label: '规格', | ||||
| 		align: 'center', | ||||
| 		label: '规格' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'unitDictValue', | ||||
| 		label: '单位', | ||||
| 		align: 'center', | ||||
| 		subcomponent: unitDict, | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'createTime', | ||||
| 		label: '创建时间', | ||||
| 		align: 'center', | ||||
| 		filter: parseTime, | ||||
| 		filter: parseTime | ||||
| 	}, | ||||
| ]; | ||||
|  | ||||
| @@ -127,14 +122,14 @@ export default { | ||||
| 					name: 'search', | ||||
| 					color: 'primary', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| 					btnName: '重置', | ||||
| 					name: 'reset', | ||||
| 				}, | ||||
| 				// { | ||||
| 				// 	type: 'separate', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	type: 'button', | ||||
| 				// 	btnName: '重置', | ||||
| 				// 	name: 'reset', | ||||
| 				// }, | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
|   | ||||
| @@ -7,53 +7,84 @@ | ||||
| --> | ||||
| <template> | ||||
| 	<el-form | ||||
| 		class="dialog-inner__form" | ||||
| 		:model="dataForm" | ||||
| 		:rules="dataRule" | ||||
| 		ref="dataForm" | ||||
| 		@keyup.enter.native="dataFormSubmit()" | ||||
| 		label-width="90px"> | ||||
| 		<el-form-item label="产线编码" prop="code"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.code" | ||||
| 				clearable | ||||
| 				placeholder="请输入产线编码" /> | ||||
| 		</el-form-item> | ||||
| 		<el-form-item label="产线名称" prop="name"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.name" | ||||
| 				clearable | ||||
| 				placeholder="请输入产线名称" /> | ||||
| 		</el-form-item> | ||||
|     <el-form-item prop="factoryId" label="工厂名称"> | ||||
|       <el-select | ||||
|       v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂"> | ||||
|         <el-option | ||||
|           v-for="item in urlOptions.optionArr.arr0" | ||||
|           :key="item.id" | ||||
|           :label="item.name" | ||||
|           :value="item.id" | ||||
|         > | ||||
|         </el-option> | ||||
|       </el-select> | ||||
|     </el-form-item> | ||||
| 		<el-form-item label="产线TT值(h)" prop="tvalue"> | ||||
| 			<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" /> | ||||
| 		</el-form-item> | ||||
| 		<el-form-item label="额外编码" prop="externalCode"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.externalCode" | ||||
| 				clearable | ||||
| 				placeholder="请输入额外编码" /> | ||||
| 		</el-form-item> | ||||
| 		<el-form-item label="描述" prop="description"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.description" | ||||
| 				type="textarea" | ||||
| 				placeholder="请输入内容" /> | ||||
| 		</el-form-item> | ||||
| 		<el-form-item label="备注" prop="remark"> | ||||
| 			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | ||||
| 		</el-form-item> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="产线编码" prop="code"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.code" | ||||
| 						clearable | ||||
| 						placeholder="请输入产线编码" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="产线名称" prop="name"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.name" | ||||
| 						clearable | ||||
| 						placeholder="请输入产线名称" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item prop="factoryId" label="工厂名称"> | ||||
| 					<el-select | ||||
| 						v-model="dataForm.factoryId" | ||||
| 						filterable | ||||
| 						clearable | ||||
| 						placeholder="请选择工厂"> | ||||
| 						<el-option | ||||
| 							v-for="item in urlOptions.optionArr.arr0" | ||||
| 							:key="item.id" | ||||
| 							:label="item.name" | ||||
| 							:value="item.id"></el-option> | ||||
| 					</el-select> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="产线TT值(h)" prop="tvalue"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.tvalue" | ||||
| 						clearable | ||||
| 						placeholder="请输入每小时下片数量" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="额外编码" prop="externalCode"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.externalCode" | ||||
| 						clearable | ||||
| 						placeholder="请输入额外编码" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="备注" prop="remark"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.remark" | ||||
| 						clearable | ||||
| 						placeholder="请输入备注" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
|  | ||||
| 		<el-row> | ||||
| 			<el-col> | ||||
| 				<el-form-item label="描述" prop="description"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.description" | ||||
| 						type="textarea" | ||||
| 						placeholder="请输入内容" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 	</el-form> | ||||
| </template> | ||||
|  | ||||
| @@ -65,22 +96,20 @@ import { | ||||
| 	getProductionLine, | ||||
| 	getCode, | ||||
| } from '@/api/core/base/productionLine'; | ||||
| import { | ||||
| 	getFactoryPage, | ||||
| } from '@/api/core/base/factory'; | ||||
| import { getFactoryPage } from '@/api/core/base/factory'; | ||||
|  | ||||
| export default { | ||||
| 	mixins: [basicAdd], | ||||
| 	data() { | ||||
| 		return { | ||||
| 			urlOptions: { | ||||
|         getOption: true, | ||||
| 			  isGetCode: true, | ||||
|         codeURL: getCode, | ||||
| 				getOption: true, | ||||
| 				isGetCode: true, | ||||
| 				codeURL: getCode, | ||||
| 				createURL: createProductionLine, | ||||
| 				updateURL: updateProductionLine, | ||||
| 				infoURL: getProductionLine, | ||||
|         optionArrUrl: [getFactoryPage], | ||||
| 				optionArrUrl: [getFactoryPage], | ||||
| 			}, | ||||
| 			dataForm: { | ||||
| 				id: undefined, | ||||
| @@ -99,13 +128,26 @@ export default { | ||||
| 				name: [ | ||||
| 					{ required: true, message: '产线名称不能为空', trigger: 'blur' }, | ||||
| 				], | ||||
|         factoryId: [ | ||||
| 				factoryId: [ | ||||
| 					{ required: true, message: '工厂不能为空', trigger: 'change' }, | ||||
| 				], | ||||
| 				tvalue: [ | ||||
| 					{ | ||||
| 						type: 'number', | ||||
| 						message: '请输入正确的数字', | ||||
| 						trigger: 'change', | ||||
| 						transform: (val) => Number(val), | ||||
| 					}, | ||||
| 				], | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 	methods: { | ||||
| 	}, | ||||
| 	methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .dialog-inner__form >>> .el-select { | ||||
| 	width: 100%; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -29,7 +29,7 @@ | ||||
| 			@cancel="handleCancel" | ||||
| 			@confirm="handleConfirm" | ||||
| 			:before-close="handleCancel" | ||||
| 			width="70%"> | ||||
| 			width="50%"> | ||||
| 			<add-or-update | ||||
| 				ref="addOrUpdate" | ||||
| 				@refreshDataList="successSubmit"></add-or-update> | ||||
| @@ -52,45 +52,37 @@ import { | ||||
| const tableProps = [ | ||||
| 	{ | ||||
| 		prop: 'code', | ||||
| 		label: '产线编码', | ||||
| 		align: 'center', | ||||
| 		label: '产线编码' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'name', | ||||
| 		label: '产线名称', | ||||
| 		align: 'center', | ||||
| 		label: '产线名称' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'factoryName', | ||||
| 		label: '工厂', | ||||
| 		align: 'center', | ||||
| 		label: '工厂' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'externalCode', | ||||
| 		label: '额外编码', | ||||
| 		align: 'center', | ||||
| 		label: '额外编码' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'status', | ||||
| 		label: '当前状态', | ||||
| 		align: 'center', | ||||
| 		filter: codeFilter('lineStatus'), | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'description', | ||||
| 		label: '描述', | ||||
| 		align: 'center', | ||||
| 		label: '描述' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'remark', | ||||
| 		label: '备注', | ||||
| 		align: 'center', | ||||
| 		label: '备注' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'createTime', | ||||
| 		label: '创建时间', | ||||
| 		align: 'center', | ||||
| 		filter: parseTime, | ||||
| 		filter: parseTime | ||||
| 	}, | ||||
| ]; | ||||
|  | ||||
| @@ -132,14 +124,14 @@ export default { | ||||
| 					name: 'search', | ||||
| 					color: 'primary', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| 					btnName: '重置', | ||||
| 					name: 'reset', | ||||
| 				}, | ||||
| 				// { | ||||
| 				// 	type: 'separate', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	type: 'button', | ||||
| 				// 	btnName: '重置', | ||||
| 				// 	name: 'reset', | ||||
| 				// }, | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
| @@ -173,7 +165,7 @@ export default { | ||||
| 		getDataList() { | ||||
| 			this.dataListLoading = true; | ||||
| 			this.urlOptions.getDataListURL(this.listQuery).then((response) => { | ||||
| 				this.total = response.data.total; | ||||
| 				this.listQuery.total = response.data.total; | ||||
| 				this.getStatus(response.data.list); | ||||
| 				this.dataListLoading = false; | ||||
| 			}); | ||||
| @@ -195,7 +187,7 @@ export default { | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10;.7 | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.listQuery.name = val.name; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
|   | ||||
| @@ -2,7 +2,7 @@ | ||||
|  * @Author: zwq | ||||
|  * @Date: 2023-08-01 13:52:10 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2023-09-21 10:48:54 | ||||
|  * @LastEditTime: 2023-10-16 13:40:00 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| @@ -12,33 +12,45 @@ | ||||
| 		ref="dataForm" | ||||
| 		@keyup.enter.native="dataFormSubmit()" | ||||
| 		label-width="90px"> | ||||
| 		<el-form-item label="工段编码" prop="code"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.code" | ||||
| 				clearable | ||||
| 				placeholder="请输入工段编码" /> | ||||
| 		</el-form-item> | ||||
| 		<el-form-item label="工段名称" prop="name"> | ||||
| 			<el-input | ||||
| 				v-model="dataForm.name" | ||||
| 				clearable | ||||
| 				placeholder="请输入工段名称" /> | ||||
| 		</el-form-item> | ||||
|     <el-form-item prop="productionLineId" label="产线"> | ||||
|       <el-select | ||||
|       v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线"> | ||||
|         <el-option | ||||
|           v-for="item in urlOptions.optionArr.arr0" | ||||
|           :key="item.id" | ||||
|           :label="item.name" | ||||
|           :value="item.id" | ||||
|         > | ||||
|         </el-option> | ||||
|       </el-select> | ||||
|     </el-form-item> | ||||
| 		<el-form-item label="排序" prop="sort"> | ||||
| 			<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" /> | ||||
| 		</el-form-item> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="工段编码" prop="code"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.code" | ||||
| 						clearable | ||||
| 						placeholder="请输入工段编码" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="工段名称" prop="name"> | ||||
| 					<el-input | ||||
| 						v-model="dataForm.name" | ||||
| 						clearable | ||||
| 						placeholder="请输入工段名称" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-row :gutter="20"> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item prop="productionLineId" label="产线"> | ||||
| 					<el-select | ||||
| 					v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线"> | ||||
| 						<el-option | ||||
| 							v-for="item in urlOptions.optionArr.arr0" | ||||
| 							:key="item.id" | ||||
| 							:label="item.name" | ||||
| 							:value="item.id" | ||||
| 						> | ||||
| 						</el-option> | ||||
| 					</el-select> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 			<el-col :span="12"> | ||||
| 				<el-form-item label="排序" prop="sort"> | ||||
| 					<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" /> | ||||
| 				</el-form-item> | ||||
| 			</el-col> | ||||
| 		</el-row> | ||||
| 		<el-form-item label="备注" prop="remark"> | ||||
| 			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> | ||||
| 		</el-form-item> | ||||
|   | ||||
| @@ -29,7 +29,7 @@ | ||||
| 			@cancel="handleCancel" | ||||
| 			@confirm="handleConfirm" | ||||
| 			:before-close="handleCancel" | ||||
| 			width="70%"> | ||||
| 			width="50%"> | ||||
| 			<add-or-update | ||||
| 				ref="addOrUpdate" | ||||
| 				@refreshDataList="successSubmit"></add-or-update> | ||||
| @@ -50,34 +50,28 @@ import { | ||||
| const tableProps = [ | ||||
| 	{ | ||||
| 		prop: 'code', | ||||
| 		label: '工段编码', | ||||
| 		align: 'center', | ||||
| 		label: '工段编码' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'name', | ||||
| 		label: '工段名称', | ||||
| 		align: 'center', | ||||
| 		label: '工段名称' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'productionLineName', | ||||
| 		label: '产线', | ||||
| 		align: 'center', | ||||
| 		label: '产线' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'sort', | ||||
| 		label: '排序', | ||||
| 		align: 'center', | ||||
| 		label: '排序' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'remark', | ||||
| 		label: '备注', | ||||
| 		align: 'center', | ||||
| 		label: '备注' | ||||
| 	}, | ||||
| 	{ | ||||
| 		prop: 'createTime', | ||||
| 		label: '创建时间', | ||||
| 		align: 'center', | ||||
| 		filter: parseTime, | ||||
| 		filter: parseTime | ||||
| 	}, | ||||
| ]; | ||||
|  | ||||
| @@ -119,14 +113,14 @@ export default { | ||||
| 					name: 'search', | ||||
| 					color: 'primary', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| 					btnName: '重置', | ||||
| 					name: 'reset', | ||||
| 				}, | ||||
| 				// { | ||||
| 				// 	type: 'separate', | ||||
| 				// }, | ||||
| 				// { | ||||
| 				// 	type: 'button', | ||||
| 				// 	btnName: '重置', | ||||
| 				// 	name: 'reset', | ||||
| 				// }, | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: Do not edit | ||||
|  * @Date: 2023-08-29 14:59:29 | ||||
|  * @LastEditTime: 2023-10-09 09:08:08 | ||||
|  * @LastEditTime: 2023-10-16 15:10:42 | ||||
|  * @LastEditors: DY | ||||
|  * @Description:  | ||||
| --> | ||||
| @@ -12,6 +12,7 @@ | ||||
| 			ref="searchBarForm" | ||||
| 			@headBtnClick="buttonClick" /> | ||||
| 		<base-table | ||||
| 			v-if="showData.length" | ||||
| 			class="right-aside" | ||||
| 			v-loading="dataListLoading" | ||||
| 			:table-props="tableProps" | ||||
| @@ -22,6 +23,7 @@ | ||||
| 			@selection-change="selectChange" | ||||
| 			> | ||||
| 		</base-table> | ||||
| 		<div v-else class="no-data-bg"></div> | ||||
| 		<pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| @@ -117,6 +119,7 @@ export default { | ||||
|         pageNo: 1, | ||||
|         total: 1, | ||||
|       }, | ||||
| 			fileName: '', | ||||
|       exportLoading: false, | ||||
|       dataListLoading: false, | ||||
| 			dialogVisible: false, | ||||
| @@ -194,7 +197,8 @@ export default { | ||||
| 					type: 'button', | ||||
| 					btnName: '导出', | ||||
| 					name: 'export', | ||||
| 					color: 'warning', | ||||
| 					color: 'primary', | ||||
| 					plain: true | ||||
| 				} | ||||
| 			], | ||||
| 		}; | ||||
| @@ -207,6 +211,7 @@ export default { | ||||
| 		test() { | ||||
| 			var target = document.getElementsByClassName("right-aside")[0] | ||||
| 			target.style.background = '#FFFFFF' | ||||
| 			var that = this | ||||
| 			setTimeout(() => { | ||||
| 				html2canvas(target).then(function(canvas) { | ||||
| 						var contentWidth = canvas.width | ||||
| @@ -242,7 +247,7 @@ export default { | ||||
| 							} | ||||
| 						} | ||||
|  | ||||
| 						pdf.save('产线统计自动报表.pdf') | ||||
| 						pdf.save(that.fileName + '产线产量.pdf') | ||||
| 				}) | ||||
| 			}, 300) | ||||
| 		}, | ||||
| @@ -285,7 +290,7 @@ export default { | ||||
|       try { | ||||
|         FileSaver.saveAs(new Blob([exportTableOut], { | ||||
|           type: 'application/octet-stream' | ||||
|         }), '产线统计自动报表.xlsx') | ||||
|         }), this.fileName + '产线产量.xlsx') | ||||
|       } catch (e) { | ||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||
|       } | ||||
| @@ -310,6 +315,9 @@ export default { | ||||
| 					this.listQuery.reportType = val.reportType ? val.reportType : undefined; | ||||
| 					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined; | ||||
| 					this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined; | ||||
| 					if (val.timeVal && val.timeVal.length > 0) { | ||||
| 						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_' | ||||
|           } | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| @@ -327,7 +335,7 @@ export default { | ||||
| 					item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月' | ||||
| 					return item | ||||
| 				}); | ||||
|         this.total = response.data.total; | ||||
|         this.listQuery.total = response.data.total; | ||||
|         this.dataListLoading = false; | ||||
| 				this.showData = this.tableData | ||||
|       }); | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: Do not edit | ||||
|  * @Date: 2023-08-29 14:59:29 | ||||
|  * @LastEditTime: 2023-10-09 15:14:42 | ||||
|  * @LastEditTime: 2023-10-16 15:18:23 | ||||
|  * @LastEditors: DY | ||||
|  * @Description:  | ||||
| --> | ||||
| @@ -12,6 +12,7 @@ | ||||
| 			ref="searchBarForm" | ||||
| 			@headBtnClick="buttonClick" /> | ||||
| 		<base-table | ||||
| 			v-if="showData.length" | ||||
| 			class="right-aside" | ||||
| 			v-loading="dataListLoading" | ||||
| 			:table-props="tableProps" | ||||
| @@ -29,6 +30,7 @@ | ||||
| 				:method-list="tableBtn" | ||||
| 				@clickBtn="handleClick" /> | ||||
| 		</base-table> | ||||
| 		<div v-else class="no-data-bg"></div> | ||||
| 		<pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| @@ -110,7 +112,7 @@ export default { | ||||
| 			showData: [], | ||||
| 			tableData: [], | ||||
| 			selectedList: [], | ||||
| 			fileName: [], | ||||
| 			fileName: '', | ||||
| 			formConfig: [ | ||||
| 				{ | ||||
| 					type: 'select', | ||||
| @@ -145,7 +147,8 @@ export default { | ||||
| 					type: 'button', | ||||
| 					btnName: '导出', | ||||
| 					name: 'export', | ||||
| 					color: 'warning', | ||||
| 					color: 'primary', | ||||
| 					plain: true | ||||
| 				} | ||||
| 			], | ||||
| 		}; | ||||
| @@ -156,7 +159,7 @@ export default { | ||||
| 		} | ||||
| 		// const time = new Date() | ||||
| 		// this.formConfig[1].defaultSelect = [time, time] | ||||
| 		// this.getDataList() | ||||
| 		this.getDataList() | ||||
| 		this.getPdLineList() | ||||
| 	}, | ||||
| 	methods: { | ||||
| @@ -199,7 +202,7 @@ export default { | ||||
| 							} | ||||
| 						} | ||||
|  | ||||
| 						pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_产线产量.pdf') | ||||
| 						pdf.save(that.fileName + '产线产量.pdf') | ||||
| 				}) | ||||
| 			}, 300) | ||||
| 		}, | ||||
| @@ -222,7 +225,7 @@ export default { | ||||
|       try { | ||||
|         FileSaver.saveAs(new Blob([exportTableOut], { | ||||
|           type: 'application/octet-stream' | ||||
|         }), this.fileName[0] + '-' + this.fileName[1] + '_产线产量.xlsx') | ||||
|         }), this.fileName + '产线产量.xlsx') | ||||
|       } catch (e) { | ||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||
|       } | ||||
| @@ -265,17 +268,10 @@ export default { | ||||
| 					this.listQuery.proLineId = val.line ? val.line : undefined; | ||||
| 					this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined; | ||||
| 					this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined; | ||||
| 					console.log('nihc 你好', val.timeVal) | ||||
| 					if (val.timeVal && val.timeVal.length > 0) { | ||||
| 						this.fileName[0] = val.timeVal[0].slice(0, 10) | ||||
| 						this.fileName[1] = val.timeVal[1].slice(0, 10) | ||||
|             this.getDataList(); | ||||
|           } else { | ||||
|             this.$message({ | ||||
|               message: '请选择时间', | ||||
|               type: 'warning' | ||||
|             }); | ||||
| 						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_' | ||||
|           } | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| @@ -289,7 +285,7 @@ export default { | ||||
|       this.dataListLoading = true; | ||||
|       this.urlOptions.getDataListURL(this.listQuery).then(response => { | ||||
|         this.tableData = response.data; | ||||
|         this.total = response.data.total; | ||||
|         this.listQuery.total = response.data.length; | ||||
|         this.dataListLoading = false; | ||||
| 				this.showData = this.tableData | ||||
|       }); | ||||
|   | ||||
| @@ -11,13 +11,14 @@ | ||||
| 			ref="search-bar" /> | ||||
| 		<el-skeleton v-if="initing" :rows="6" animated /> | ||||
| 		<!-- :span-method="mergeColumnHandler" --> | ||||
| 		<div v-else :class="{ 'no-data-bg': !tableData || tableData.length == 0 }"> | ||||
| 		<base-table | ||||
| 			v-else | ||||
| 		v-if="tableData && tableData.length > 0" | ||||
| 			:table-props="tableProps" | ||||
| 			:table-data="tableData" | ||||
| 			@emitFun="handleEmitFun"></base-table> | ||||
| 		<!-- :page="queryParams.pageNo" | ||||
| 			:limit="queryParams.pageSize" --> | ||||
| 			@emitFun="handleEmitFun" | ||||
| 		/> | ||||
| 		</div> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| @@ -65,10 +66,10 @@ export default { | ||||
| 						label: times.slice(0, 10) + ' ' + times.slice(11), | ||||
| 						align: 'center', | ||||
| 						children: [ | ||||
| 							{ prop: times + '_in', label: '投入数量', align: 'center' }, | ||||
| 							{ prop: times + '_out', label: '产出数量', align: 'center' }, | ||||
| 							{ prop: times + '_junk', label: '报废数量', align: 'center' }, | ||||
| 							{ prop: times + '_area', label: '产出面积', align: 'center' } | ||||
| 							{ prop: times + '_in', label: '投入数量' }, | ||||
| 							{ prop: times + '_out', label: '产出数量' }, | ||||
| 							{ prop: times + '_junk', label: '报废数量' }, | ||||
| 							{ prop: times + '_area', label: '产出面积' } | ||||
| 						] | ||||
| 					} | ||||
| 					this.arr.push(subprop) | ||||
| @@ -149,14 +150,14 @@ export default { | ||||
|           { | ||||
|             prop: 'proLineName', | ||||
|             label: '生产线', | ||||
|             align: 'center', | ||||
| 						fixed: 'left' | ||||
| 						fixed: 'left', | ||||
| 						showOverflowTooltip: true | ||||
|           }, | ||||
|           { | ||||
|             prop: 'spec', | ||||
|             label: '产品规格', | ||||
|             align: 'center', | ||||
| 						fixed: 'left' | ||||
| 						fixed: 'left', | ||||
| 						showOverflowTooltip: true | ||||
|           } | ||||
| 				] | ||||
| 				this.buildProps(res.data.nameData); | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: Do not edit | ||||
|  * @Date: 2023-08-29 14:59:29 | ||||
|  * @LastEditTime: 2023-10-08 10:51:49 | ||||
|  * @LastEditTime: 2023-10-16 15:19:04 | ||||
|  * @LastEditors: DY | ||||
|  * @Description:  | ||||
| --> | ||||
| @@ -13,6 +13,7 @@ | ||||
| 			ref="searchBarForm" | ||||
| 			@headBtnClick="buttonClick" /> | ||||
| 		<base-table | ||||
| 			v-if="showData.length" | ||||
| 			class="right-aside" | ||||
| 			v-loading="dataListLoading" | ||||
| 			:table-props="tableProps" | ||||
| @@ -30,6 +31,7 @@ | ||||
| 				:method-list="tableBtn" | ||||
| 				@clickBtn="handleClick" /> | ||||
| 		</base-table> | ||||
| 		<div v-else class="no-data-bg"></div> | ||||
| 		<pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| @@ -129,6 +131,7 @@ export default { | ||||
| 			tableBtn: [], | ||||
| 			tableData: [], | ||||
| 			showData: [], | ||||
| 			fileName: '', | ||||
| 			formConfig: [ | ||||
| 				{ | ||||
| 					type: 'select', | ||||
| @@ -187,7 +190,8 @@ export default { | ||||
| 					type: 'button', | ||||
| 					btnName: '导出', | ||||
| 					name: 'export', | ||||
| 					color: 'warning', | ||||
| 					color: 'primary', | ||||
| 					plain: true | ||||
| 				} | ||||
| 			], | ||||
| 		}; | ||||
| @@ -200,6 +204,7 @@ export default { | ||||
| 		test() { | ||||
| 			var target = document.getElementsByClassName("right-aside")[0] | ||||
| 			target.style.background = '#FFFFFF' | ||||
| 			var that = this | ||||
| 			setTimeout(() => { | ||||
| 				html2canvas(target).then(function(canvas) { | ||||
| 						var contentWidth = canvas.width | ||||
| @@ -235,7 +240,7 @@ export default { | ||||
| 							} | ||||
| 						} | ||||
|  | ||||
| 						pdf.save('工段统计自动报表.pdf') | ||||
| 						pdf.save(that.fileName + '工段统计.pdf') | ||||
| 				}) | ||||
| 			}, 300) | ||||
| 		}, | ||||
| @@ -258,7 +263,7 @@ export default { | ||||
|       try { | ||||
|         FileSaver.saveAs(new Blob([exportTableOut], { | ||||
|           type: 'application/octet-stream' | ||||
|         }), '工段统计自动报表.xlsx') | ||||
|         }), this.fileName + '工段统计.xlsx') | ||||
|       } catch (e) { | ||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||
|       } | ||||
| @@ -307,6 +312,9 @@ export default { | ||||
| 					this.listQuery.reportType = val.reportType ? val.reportType : undefined; | ||||
| 					this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined; | ||||
| 					this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined; | ||||
| 					if (val.timeVal && val.timeVal.length > 0) { | ||||
| 						this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_' | ||||
|           } | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| @@ -325,7 +333,7 @@ export default { | ||||
| 					return item | ||||
| 				}); | ||||
| 				this.showData = this.tableData | ||||
|         this.total = response.data.total; | ||||
|         this.listQuery.total = response.data.total; | ||||
|         this.dataListLoading = false; | ||||
|       }); | ||||
|     }, | ||||
|   | ||||
| @@ -3,15 +3,20 @@ | ||||
| 		<search-bar | ||||
| 			:formConfigs="formConfig" | ||||
| 			ref="searchBarForm" | ||||
| 			@select-changed="handleSearchBarChanged" | ||||
| 			@headBtnClick="buttonClick" /> | ||||
| 		<base-table | ||||
| 			v-if="showData.length" | ||||
| 			class="right-aside" | ||||
| 			v-loading="dataListLoading" | ||||
| 			:table-props="tableProps" | ||||
| 			:table-data="showData" | ||||
| 			:page="listQuery.pageNo" | ||||
| 			:limit="listQuery.pageSize" | ||||
| 			:selectWidth="55" | ||||
| 			:table-data="showData" | ||||
| 			@selection-change="selectChange" | ||||
| 		/> | ||||
| 		<div v-else class="no-data-bg"></div> | ||||
| 		<pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| @@ -45,38 +50,31 @@ import html2canvas from 'html2canvas' | ||||
| const tableProps = [ | ||||
| 	{ | ||||
|     prop: 'proLineName', | ||||
| 		label: '产线名称', | ||||
| 		align: 'center', | ||||
| 		label: '产线名称' | ||||
| 	}, | ||||
|   { | ||||
|     prop: 'sectionName', | ||||
|     label: '工段名称', | ||||
|     align: 'center', | ||||
|     label: '工段名称' | ||||
|   }, | ||||
|   { | ||||
|     prop: 'inputNum', | ||||
|     label: '进片数量/片', | ||||
|     align: 'center', | ||||
|     label: '进片数量/片' | ||||
|   }, | ||||
|   { | ||||
|     prop: 'outputNum', | ||||
|     label: '出片数量/片', | ||||
|     align: 'center', | ||||
|     label: '出片数量/片' | ||||
|   }, | ||||
|   { | ||||
|     prop: 'lossNum', | ||||
|     label: '损耗数量/片', | ||||
|     align: 'center', | ||||
|     label: '损耗数量/片' | ||||
|   }, | ||||
|   { | ||||
|     prop: 'lossArea', | ||||
|     label: '损耗面积/m²', | ||||
|     align: 'center', | ||||
|     label: '损耗面积/m²' | ||||
|   }, | ||||
|   { | ||||
|     prop: 'lossRate', | ||||
|     label: '损耗比例/%', | ||||
|     align: 'center', | ||||
|     label: '损耗比例/%' | ||||
|   } | ||||
| ]; | ||||
|  | ||||
| @@ -110,6 +108,7 @@ export default { | ||||
|           param: 'proLineId', | ||||
| 					defaultSelect: '', | ||||
| 					filterable: true, | ||||
| 					onchange: true, | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'select', | ||||
| @@ -132,15 +131,20 @@ export default { | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| 					btnName: '搜索', | ||||
| 					btnName: '查询', | ||||
| 					name: 'search', | ||||
| 					color: 'primary', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'separate', | ||||
| 				}, | ||||
| 				{ | ||||
| 					type: 'button', | ||||
| 					btnName: '导出', | ||||
| 					name: 'export', | ||||
| 				}, | ||||
| 					color: 'primary', | ||||
| 					plain: true | ||||
| 				} | ||||
| 			], | ||||
| 		}; | ||||
| 	}, | ||||
| @@ -151,9 +155,39 @@ export default { | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		/** 根据产线获取工段 */ | ||||
| 		async getWorksectionById(lineId) { | ||||
| 			const { code, data } = await this.$axios({ | ||||
| 				url: '/base/workshop-section/listByParentId', | ||||
| 				method: 'get', | ||||
| 				params: { | ||||
| 					id: lineId, | ||||
| 				}, | ||||
| 			}); | ||||
| 			if (code == 0) { | ||||
| 				this.formConfig[1].selectOptions = data.map((item) => { | ||||
| 					return { | ||||
| 						name: item.name, | ||||
| 						id: item.id, | ||||
| 					}; | ||||
| 				}); | ||||
| 			} | ||||
| 		}, | ||||
| 		handleSearchBarChanged({ param, value }) { | ||||
| 			if (!value) { | ||||
| 				this.formConfig[1].selectOptions = []; | ||||
| 				return; | ||||
| 			} | ||||
| 			switch (param) { | ||||
| 				case 'proLineId': | ||||
| 					this.getWorksectionById(value); | ||||
| 					break; | ||||
| 			} | ||||
| 		}, | ||||
| 		test() { | ||||
| 			var target = document.getElementsByClassName("right-aside")[0] | ||||
| 			target.style.background = '#FFFFFF' | ||||
| 			var that = this | ||||
| 			setTimeout(() => { | ||||
| 				html2canvas(target).then(function(canvas) { | ||||
| 						var contentWidth = canvas.width | ||||
| @@ -189,7 +223,7 @@ export default { | ||||
| 							} | ||||
| 						} | ||||
|  | ||||
| 						pdf.save('工段统计数据查询报表.pdf') | ||||
| 						pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_工段统计.pdf') | ||||
| 				}) | ||||
| 			}, 300) | ||||
| 		}, | ||||
| @@ -212,7 +246,7 @@ export default { | ||||
|       try { | ||||
|         FileSaver.saveAs(new Blob([exportTableOut], { | ||||
|           type: 'application/octet-stream' | ||||
|         }), '工段统计数据查询报表.xlsx') | ||||
|         }), this.fileName[0] + '-' + this.fileName[1] + '_工段统计.xlsx') | ||||
|       } catch (e) { | ||||
|         if (typeof console !== 'undefined') console.log(e, exportTableOut) | ||||
|       } | ||||
| @@ -293,10 +327,9 @@ export default { | ||||
|           this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined | ||||
|           this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined | ||||
|           this.listQuery.endTime = val.timeSlot ? new Date(val.timeSlot[1]).getTime() : undefined | ||||
| 					this.fileName[0] = val.timeSlot[0] | ||||
| 					this.fileName[1] = val.timeSlot[1] | ||||
| 					console.log('wfjmmki文件名称', this.fileName) | ||||
| 					if (val.timeSlot) { | ||||
| 					if (val.timeSlot && val.timeSlot.length > 0) { | ||||
| 						this.fileName[0] = val.timeSlot[0].slice(0, 10) | ||||
| 						this.fileName[1] = val.timeSlot[1].slice(0, 10) | ||||
|             this.getDataList() | ||||
|           } else { | ||||
|             this.$message({ | ||||
| @@ -315,7 +348,14 @@ export default { | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					if (val.timeSlot && val.timeSlot.length > 0) { | ||||
| 						this.handleExport(); | ||||
|           } else { | ||||
|             this.$message({ | ||||
|               message: '请选择时间', | ||||
|               type: 'warning' | ||||
|             }); | ||||
|           } | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
|   | ||||
| @@ -125,7 +125,31 @@ export default { | ||||
|       this.$emit('submit', this.queryParams) | ||||
|     }, | ||||
|     exportData() { | ||||
|       this.$emit('exportD') | ||||
|       let name | ||||
|       if (this.queryParams.objId) { | ||||
|         name = this.getObjName(this.objList, this.queryParams.objId) | ||||
|       } else { | ||||
|         this.$modal.msgWarning("对象不能为空") | ||||
|         return false | ||||
|       } | ||||
|       this.$emit('exportD', {name: name}) | ||||
|     }, | ||||
|     // 递归取对象name | ||||
|     getObjName(list, id) { | ||||
|       let _this = this | ||||
|       for (let i = 0; i < list.length; i++) { | ||||
|         let a = list[i] | ||||
|         if (a.id === id) { | ||||
|           return a.name | ||||
|         } else { | ||||
|           if (a.children && a.children.length > 0) { | ||||
|             let res = _this.getObjName(a.children, id) | ||||
|             if (res) { | ||||
|               return res | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     transformTime(timeStamp) {// 本月最后一天 | ||||
|       let year = moment(timeStamp).format('YYYY') | ||||
|   | ||||
| @@ -100,9 +100,10 @@ export default { | ||||
|       } | ||||
|       this.chartData = this.list | ||||
|     }, | ||||
|     exportData() { | ||||
|     exportData(val) { | ||||
|       if (this.list.length > 0) { | ||||
|         var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table")) | ||||
|         let fileName = val.name + "同比分析.xlsx" | ||||
|         var wbout = XLSX.write(wb, { | ||||
|             bookType: "xlsx", | ||||
|             bookSST: true, | ||||
| @@ -111,7 +112,7 @@ export default { | ||||
|         try { | ||||
|             FileSaver.saveAs( | ||||
|             new Blob([wbout], { type: "application/octet-stream" }), | ||||
|             "同比分析.xlsx" | ||||
|             fileName | ||||
|             ) | ||||
|         } catch (e) { | ||||
|             if (typeof console !== "undefined") console.log(e, wbout); | ||||
|   | ||||
| @@ -43,7 +43,7 @@ export default { | ||||
| 					eq.okQuantity, | ||||
| 					eq.nokQuantity, | ||||
| 					eq.totalQuantity, | ||||
| 					eq.passRate.toFixed(4), | ||||
| 					eq.passRate?.toFixed(4), | ||||
| 				]); | ||||
| 			}); | ||||
| 			return { | ||||
|   | ||||
| @@ -29,7 +29,10 @@ | ||||
| 							@emitFun="handleEmitFun"></base-table> | ||||
| 					</el-tab-pane> | ||||
| 					<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph"> | ||||
| 						<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;"> | ||||
| 						<div | ||||
| 							v-if="activeName == 'graph'" | ||||
| 							class="graph" | ||||
| 							style="height: 40vh; display: flex; flex-direction: column"> | ||||
| 							<div class="blue-title">各设备加工数量</div> | ||||
| 							<LineChart v-if="list && list.length" :list="list" /> | ||||
| 							<div v-else class="no-data-bg"></div> | ||||
| @@ -87,6 +90,7 @@ export default { | ||||
| 					rangeSeparator: '-', | ||||
| 					startPlaceholder: '开始日期', | ||||
| 					endPlaceholder: '结束日期', | ||||
| 					defaultTime: ['00:00:00', '23:59:59'], | ||||
| 					param: 'recordTime', | ||||
| 					defaultSelect: [ | ||||
| 						new Date(y, m, d) | ||||
| @@ -246,7 +250,9 @@ export default { | ||||
| 	created() { | ||||
| 		this.fillLineOptions(); | ||||
| 		this.fillProductOptions(); | ||||
| 		this.getList(); | ||||
| 	}, | ||||
| 	mounted() { | ||||
| 		this.$refs['search-bar'].headBtnClick('search'); | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		handleTabClick(tab, event) { | ||||
| @@ -307,12 +313,16 @@ export default { | ||||
| 		}, | ||||
|  | ||||
| 		handleSearchBarBtnClick(btn) { | ||||
| 			console.log('handleSearchBarBtnClick', btn); | ||||
| 			// debugger; | ||||
| 			switch (btn.btnName) { | ||||
| 				case 'search': | ||||
| 					this.queryParams.lineId = btn.lineId; | ||||
| 					this.queryParams.productId = btn.productId; | ||||
| 					this.queryParams.recordTime = btn.recordTime ? btn.recordTime.map(time => moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')) : null; | ||||
| 					this.queryParams.recordTime = btn.recordTime | ||||
| 						? btn.recordTime.map((time) => | ||||
| 								moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss') | ||||
| 						  ) | ||||
| 						: null; | ||||
| 					this.$nextTick(() => { | ||||
| 						this.getList(); | ||||
| 					}); | ||||
| @@ -388,7 +398,7 @@ export default { | ||||
| 	font-size: 14px; | ||||
|  | ||||
| 	&::before { | ||||
| 		content: ""; | ||||
| 		content: ''; | ||||
| 		position: absolute; | ||||
| 		left: 0; | ||||
| 		top: 6px; | ||||
| @@ -398,5 +408,4 @@ export default { | ||||
| 		background: #0b58ff; | ||||
| 	} | ||||
| } | ||||
|  | ||||
| </style> | ||||
|   | ||||
| @@ -14,7 +14,7 @@ import * as echarts from 'echarts'; | ||||
|  *  | ||||
|  * https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params | ||||
|  */ | ||||
| function renderItem(params, api) { } | ||||
| // function renderItem(params, api) { } | ||||
|  | ||||
| export default class Gantt { | ||||
|     constructor(el) { | ||||
|   | ||||
| @@ -74,7 +74,7 @@ | ||||
|  | ||||
| <script> | ||||
| import LineChart from './components/lineChart.vue'; | ||||
| import response from './response.json'; | ||||
| // import response from './response.json'; | ||||
|  | ||||
| export default { | ||||
| 	name: 'SGProduction', | ||||
|   | ||||
| @@ -1,497 +0,0 @@ | ||||
| <!DOCTYPE html> | ||||
| <html lang="en"> | ||||
|  | ||||
| <head> | ||||
| 	<meta charset="UTF-8" /> | ||||
| 	<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||
| 	<title>Document</title> | ||||
| </head> | ||||
|  | ||||
| <body> | ||||
| 	<div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div> | ||||
|  | ||||
| 	<script src="./echarts.js"></script> | ||||
| 	<script> | ||||
| 		function getStartTime(timestamp) { | ||||
| 			return new Date(new Date(timestamp).toLocaleDateString()).getTime(); | ||||
| 		} | ||||
|  | ||||
| 		function renderItem(params, api) { | ||||
| 			var categoryIndex = api.value(0); | ||||
| 			var start = api.coord([api.value(1), categoryIndex]); | ||||
| 			var end = api.coord([api.value(2), categoryIndex]); | ||||
| 			console.log(` | ||||
|                     categoryIndex: ${categoryIndex}, | ||||
|                     start: ${start}, | ||||
|                     end: ${end}, | ||||
|                     api.value0: ${api.value(0)} | ||||
|                     api.value1: ${api.value(1)} | ||||
|                     api.value2: ${api.value(2)} | ||||
|                     params.coordSys: ${JSON.stringify(params.coordSys)} | ||||
|                     api.size: ${api.size([0, 1])} | ||||
|                     api.style(): ${JSON.stringify(api.style())} | ||||
|                 `); | ||||
|  | ||||
| 			var height = api.size([0, 1])[1] * 2; | ||||
| 			// 用一个矩形去截取另一个矩形 | ||||
| 			var rectShape = echarts.graphic.clipRectByRect( | ||||
| 				// 被截取矩形 | ||||
| 				{ | ||||
| 					x: start[0], | ||||
| 					y: start[1] - height / 2, | ||||
| 					width: end[0] - start[0], | ||||
| 					height: height, | ||||
| 				}, | ||||
| 				// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行... | ||||
| 				// 截取矩形 | ||||
| 				{ | ||||
| 					// 截取掉grid以外的部分,实质是计算方块的偏移量 | ||||
| 					x: params.coordSys.x, // {number} grid rect 的 x | ||||
| 					// y: params.coordSys.y, // {number} grid rect 的 y | ||||
| 					y: params.coordSys.y - 16, // {number} grid rect 的 y,并多减掉 16 个单位 | ||||
| 					// width: end[0] - start[0], | ||||
| 					width: params.coordSys.width, // {number} grid rect 的 width | ||||
| 					height: params.coordSys.height, // {number} grid rect 的 height | ||||
| 				} | ||||
| 			); | ||||
| 			console.log(`------------- ${JSON.stringify(rectShape)} -------------- `) | ||||
| 			return ( | ||||
| 				rectShape && { | ||||
| 					type: 'rect', | ||||
| 					transition: ['shape'], | ||||
| 					shape: rectShape, | ||||
| 					style: api.style(), | ||||
| 				} | ||||
| 			); | ||||
| 		} | ||||
|  | ||||
| 		function getXaxisRange(startTime) { | ||||
| 			return Array(24) | ||||
| 				.fill(startTime) | ||||
| 				.map((item, index) => { | ||||
| 					return new Date(item + index * 3600 * 1000) | ||||
| 						.toLocaleTimeString() | ||||
| 						.split(':') | ||||
| 						.slice(0, 2) | ||||
| 						.join(':'); | ||||
| 				}); | ||||
| 		} | ||||
|  | ||||
| 		function getTodayStart(today) { | ||||
| 			const [y, m, d] = [ | ||||
| 				today.getFullYear(), | ||||
| 				today.getMonth(), | ||||
| 				today.getDate(), | ||||
| 			]; | ||||
| 			return new Date(y, m, d).getTime(); | ||||
| 		} | ||||
|  | ||||
| 		/** 颜色配置 */ | ||||
| 		const types = [ | ||||
| 			{ name: '运行', color: '#288AFF' }, | ||||
| 			{ name: '故障', color: '#FC9C91' }, | ||||
| 			{ name: '计划停机', color: '#FFDC94' }, | ||||
| 			{ name: '空白', color: '#F2F4F9' }, | ||||
| 		]; | ||||
|  | ||||
| 		const option = { | ||||
| 			tooltip: { | ||||
| 				trigger: 'item', | ||||
| 				axisPointer: { | ||||
| 					type: 'none', | ||||
| 					// label: { | ||||
| 					// 	backgroundColor: '#6a7985', | ||||
| 					// }, | ||||
| 				}, | ||||
| 				formatter: (params) => { | ||||
| 					// console.log('formatter', params) | ||||
| 					// return ` | ||||
| 					// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div> | ||||
| 					// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;"> | ||||
| 					//     <span>${params[0].seriesName}</span> | ||||
| 					//     <span>${params[0].name}</span> | ||||
| 					// </div> | ||||
| 					// ` | ||||
| 					return ` | ||||
| 						<div style="display: flex; align-items: center; justify-content: space-between"> | ||||
| 						<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1> | ||||
|                         <h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2> | ||||
|                         </div> | ||||
| 						<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div> | ||||
|                         ` | ||||
| 				} | ||||
| 			}, | ||||
| 			grid: [ | ||||
| 				{ | ||||
| 					id: 0, | ||||
| 					top: 10, | ||||
| 					left: 128, | ||||
| 					right: 64, | ||||
| 					height: 56, | ||||
| 				}, | ||||
| 				// { | ||||
| 				// 	id: 1, | ||||
| 				// 	top: 80, | ||||
| 				// 	height: 56, | ||||
| 				// }, | ||||
| 				// ***************** 添加第二个grid ***************** | ||||
| 				{ | ||||
| 					id: 1, | ||||
| 					top: 180, | ||||
| 					left: 128, | ||||
| 					right: 64, | ||||
| 					height: 56 | ||||
| 				} | ||||
| 			], | ||||
| 			xAxis: [ | ||||
| 				{ | ||||
| 					id: 'asdf', | ||||
| 					gridIndex: 0, | ||||
| 					axisTick: { | ||||
| 						alignWithLabel: true, | ||||
| 						inside: true, | ||||
| 					}, | ||||
| 					type: 'time', | ||||
| 					min: getTodayStart(new Date()), // <=== | ||||
| 					max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <=== | ||||
| 					splitNumber: 10, | ||||
| 					axisLabel: { | ||||
| 						margin: 12, | ||||
| 						// rotate: -15, | ||||
| 						formatter: function (val) { | ||||
| 							return new Date(val) | ||||
| 								.toLocaleTimeString() | ||||
| 								.split(':') | ||||
| 								.slice(0, 2) | ||||
| 								.join(':'); | ||||
| 						}, | ||||
| 					}, | ||||
| 					boundaryGap: false, | ||||
| 					// data: getXaxisRange(getTodayStart(new Date())), | ||||
| 				}, | ||||
| 				{ | ||||
| 					id: 'asdff', | ||||
| 					gridIndex: 0, | ||||
| 					axisLabel: { show: false }, | ||||
| 					axisLine: { show: false }, | ||||
| 				}, | ||||
| 				// ***************** 添加第二个 xAxis ***************** | ||||
| 				{ | ||||
| 					id: 'asdfjk', | ||||
| 					gridIndex: 1, | ||||
| 					axisTick: { | ||||
| 						alignWithLabel: true, | ||||
| 						inside: true, | ||||
| 					}, | ||||
| 					type: 'time', | ||||
| 					min: getTodayStart(new Date()), // <=== | ||||
| 					max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <=== | ||||
| 					splitNumber: 10, | ||||
| 					axisLabel: { | ||||
| 						margin: 12, | ||||
| 						// rotate: -15, | ||||
| 						formatter: function (val) { | ||||
| 							return new Date(val) | ||||
| 								.toLocaleTimeString() | ||||
| 								.split(':') | ||||
| 								.slice(0, 2) | ||||
| 								.join(':'); | ||||
| 						}, | ||||
| 					}, | ||||
| 					boundaryGap: false, | ||||
| 					// data: getXaxisRange(getTodayStart(new Date())), | ||||
| 				}, | ||||
| 				{ | ||||
| 					id: 'fjkd', | ||||
| 					gridIndex: 1, | ||||
| 					axisLabel: { show: false }, | ||||
| 					axisLine: { show: false }, | ||||
| 				}, | ||||
| 			], | ||||
| 			yAxis: [ | ||||
| 				// 主y轴 | ||||
| 				{ | ||||
| 					id: 0, | ||||
| 					gridIndex: 0, | ||||
| 					type: 'value', | ||||
| 					splitLine: { show: false }, | ||||
| 					name: '设备1', | ||||
| 					nameLocation: 'center', | ||||
| 					nameGap: 56, | ||||
| 					nameRotate: 0, | ||||
| 					nameTextStyle: { | ||||
| 						fontSize: 18, | ||||
| 					}, | ||||
| 					axisLine: { | ||||
| 						show: true, | ||||
| 						lineStyle: {}, | ||||
| 					}, | ||||
| 					axisLabel: { show: false }, | ||||
| 					axisTick: { show: false }, | ||||
| 				}, | ||||
| 				// 辅y轴 | ||||
| 				{ | ||||
| 					id: 1, | ||||
| 					gridIndex: 0, | ||||
| 					type: 'value', | ||||
| 					splitLine: { show: false }, | ||||
| 					axisLabel: { show: false }, | ||||
| 					axisTick: { show: false }, | ||||
| 				}, | ||||
| 				// ***************** 添加第二个 yAxis ***************** | ||||
| 				{ | ||||
| 					id: 2, | ||||
| 					gridIndex: 1, | ||||
| 					type: 'value', | ||||
| 					splitLine: { show: false }, | ||||
| 					name: '设备1', | ||||
| 					nameLocation: 'center', | ||||
| 					nameGap: 56, | ||||
| 					nameRotate: 0, | ||||
| 					nameTextStyle: { | ||||
| 						fontSize: 18, | ||||
| 					}, | ||||
| 					axisLine: { | ||||
| 						show: true, | ||||
| 						lineStyle: {}, | ||||
| 					}, | ||||
| 					axisLabel: { show: false }, | ||||
| 					axisTick: { show: false }, | ||||
| 				}, | ||||
| 				// 辅y轴 | ||||
| 				{ | ||||
| 					id: 3, | ||||
| 					gridIndex: 1, | ||||
| 					type: 'value', | ||||
| 					splitLine: { show: false }, | ||||
| 					axisLabel: { show: false }, | ||||
| 					axisTick: { show: false }, | ||||
| 				}, | ||||
| 			], | ||||
| 			series: [ | ||||
| 				{ | ||||
| 					// 沉默的背景 | ||||
| 					xAxisIndex: 0, | ||||
| 					yAxisIndex: 0, | ||||
| 					type: 'custom', | ||||
| 					renderItem: renderItem, | ||||
| 					silent: true, | ||||
| 					itemStyle: { | ||||
| 						opacity: 0.8, | ||||
| 					}, | ||||
| 					encode: { | ||||
| 						x: [1, 2], | ||||
| 						y: 0, | ||||
| 					}, | ||||
| 					data: [ | ||||
| 						{ | ||||
| 							name: '无数据', | ||||
| 							value: [0, 1696694400000, 1696780800000, 0], | ||||
| 							tooltip: { show: false }, | ||||
| 							// silent: true, | ||||
| 							// animation: false, | ||||
| 							// universalTransition: { enable: false }, | ||||
| 							// hoverAnimation: false, | ||||
| 							// selectMode: true, | ||||
| 							// select: { disabled: true }, | ||||
| 							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } }, | ||||
| 							// z: 0, | ||||
| 							// zlevel: 0, | ||||
| 							// emphasis: { disabled: true }, | ||||
| 							itemStyle: { | ||||
| 								color: '#ccc', | ||||
| 								opacity: 0.3, | ||||
| 							} | ||||
| 						} | ||||
| 					] | ||||
| 				}, | ||||
| 				{ | ||||
| 					name: '设备1', | ||||
| 					xAxisIndex: 0, | ||||
| 					yAxisIndex: 0, | ||||
| 					type: 'custom', | ||||
| 					renderItem: renderItem, | ||||
| 					itemStyle: { | ||||
| 						opacity: 0.8, | ||||
| 					}, | ||||
| 					encode: { | ||||
| 						x: [1, 2], | ||||
| 						y: 0, | ||||
| 					}, | ||||
| 					data: [ | ||||
| 						{ | ||||
| 							name: '运行', | ||||
| 							value: [0, 1696694400000, 1696699400000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[0].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '运行', | ||||
| 							value: [0, 1696730000000, 1696734040450, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[0].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '故障', | ||||
| 							value: [0, 1696737040000, 1696754040450, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[1].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '计划停机', | ||||
| 							value: [0, 1696755000000, 1696759000000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[2].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '运行', | ||||
| 							value: [0, 1696759000000, 1696769000000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[0].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '计划停机', | ||||
| 							value: [0, 1696769400000, 1696779000000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[2].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 					], | ||||
| 				}, | ||||
| 				// ***************** 添加第二个设备 ***************** | ||||
| 				{ | ||||
| 					// 沉默的背景 | ||||
| 					xAxisIndex: 2, | ||||
| 					yAxisIndex: 2, | ||||
| 					type: 'custom', | ||||
| 					renderItem: renderItem, | ||||
| 					silent: true, | ||||
| 					itemStyle: { | ||||
| 						opacity: 0.8, | ||||
| 					}, | ||||
| 					encode: { | ||||
| 						x: [1, 2], | ||||
| 						y: 0, | ||||
| 					}, | ||||
| 					data: [ | ||||
| 						{ | ||||
| 							name: '无数据', | ||||
| 							value: [0, 1696694400000, 1696780800000, 0], | ||||
| 							tooltip: { show: false }, | ||||
| 							// silent: true, | ||||
| 							// animation: false, | ||||
| 							// universalTransition: { enable: false }, | ||||
| 							// hoverAnimation: false, | ||||
| 							// selectMode: true, | ||||
| 							// select: { disabled: true }, | ||||
| 							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } }, | ||||
| 							// z: 0, | ||||
| 							// zlevel: 0, | ||||
| 							// emphasis: { disabled: true }, | ||||
| 							itemStyle: { | ||||
| 								color: '#ccc', | ||||
| 								opacity: 0.3, | ||||
| 							} | ||||
| 						} | ||||
| 					] | ||||
| 				}, | ||||
| 				{ | ||||
| 					name: '设备2', | ||||
| 					xAxisIndex: 2, | ||||
| 					yAxisIndex: 2, | ||||
| 					type: 'custom', | ||||
| 					renderItem: renderItem, | ||||
| 					itemStyle: { | ||||
| 						opacity: 0.8, | ||||
| 					}, | ||||
| 					encode: { | ||||
| 						x: [1, 2], | ||||
| 						y: 0, | ||||
| 					}, | ||||
| 					data: [ | ||||
| 						{ | ||||
| 							name: '运行', | ||||
| 							value: [0, 1696694400000, 1696699400000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[0].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 							// showBackground: true, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '运行', | ||||
| 							value: [0, 1696730000000, 1696734040450, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[0].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '故障', | ||||
| 							value: [0, 1696737040000, 1696754040450, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[1].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '计划停机', | ||||
| 							value: [0, 1696755000000, 1696759000000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[2].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '运行', | ||||
| 							value: [0, 1696759000000, 1696769000000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[0].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 						{ | ||||
| 							name: '计划停机', | ||||
| 							value: [0, 1696769400000, 1696779000000, 0], | ||||
| 							itemStyle: { | ||||
| 								normal: { | ||||
| 									color: types[2].color, | ||||
| 								}, | ||||
| 							}, | ||||
| 						}, | ||||
| 					], | ||||
| 				}, | ||||
| 			], | ||||
| 		}; | ||||
|  | ||||
| 		const el = document.getElementById('app'); | ||||
| 		const myChart = echarts.init(el); | ||||
|  | ||||
| 		console.log('mychart', myChart); | ||||
| 		myChart.setOption(option); | ||||
| 	</script> | ||||
| </body> | ||||
|  | ||||
| </html> | ||||
| @@ -1,81 +1,238 @@ | ||||
| <template xmlns=""> | ||||
|   <div class="container"> | ||||
|     <div class="logo"></div> | ||||
|     <!-- 登录区域 --> | ||||
|     <div class="content"> | ||||
|       <!-- 配图 --> | ||||
|       <div class="pic"></div> | ||||
|       <!-- 表单 --> | ||||
|       <div class="field"> | ||||
|         <!-- [移动端]标题 --> | ||||
|         <h2 class="mobile-title"> | ||||
|           <h3 class="title">芋道后台管理系统</h3> | ||||
|         </h2> | ||||
| 	<div class="container"> | ||||
| 		<div class="logo"></div> | ||||
| 		<!-- 登录区域 --> | ||||
| 		<div class="content"> | ||||
| 			<!-- 配图 --> | ||||
| 			<div class="pic"> | ||||
| 				<div | ||||
| 					class="welcome" | ||||
| 					style=" | ||||
| 						position: absolute; | ||||
| 						top: 15%; | ||||
| 						left: 20%; | ||||
| 						user-select: none; | ||||
| 						display: flex; | ||||
| 						flex-direction: column; | ||||
| 						align-items: flex-start; | ||||
| 					"> | ||||
| 					<strong | ||||
| 						style=" | ||||
| 							letter-spacing: 1px; | ||||
| 							font-family: Arial, Helvetica, sans-serif; | ||||
| 							font-weight: 500; | ||||
| 							font-size: 88px; | ||||
| 						"> | ||||
| 						<span style="color: #26b9de">Wel</span> | ||||
| 						<span style="color: #fff">come</span> | ||||
| 					</strong> | ||||
| 					<p | ||||
| 						style=" | ||||
| 							margin: 0; | ||||
| 							font-size: 26px; | ||||
| 							letter-spacing: 1px; | ||||
| 							color: #26b9de; | ||||
| 							opacity: 75%; | ||||
| 						"> | ||||
| 						<span | ||||
| 							style=" | ||||
| 								display: inline-block; | ||||
| 								height: 20px; | ||||
| 								width: 20px; | ||||
| 								margin-left: 8px; | ||||
| 								margin-right: 12px; | ||||
| 								border-radius: 100%; | ||||
| 								background: #26b9de; | ||||
| 							"></span> | ||||
| 						产线生产监控系统 | ||||
| 					</p> | ||||
| 				</div> | ||||
| 				<video | ||||
| 					src="/static/videos/login.webm" | ||||
| 					muted | ||||
| 					autoplay | ||||
| 					loop | ||||
| 					style=" | ||||
| 						user-select: none; | ||||
| 						position: absolute; | ||||
| 						top: 28%; | ||||
| 						width: 100%; | ||||
| 						height: 70%; | ||||
| 					"></video> | ||||
| 			</div> | ||||
| 			<!-- 表单 --> | ||||
| 			<div class="field"> | ||||
| 				<!-- [移动端]标题 --> | ||||
| 				<h2 class="mobile-title"> | ||||
| 					<h3 class="title">中建材智能自动化研究院有限公司</h3> | ||||
| 				</h2> | ||||
| 				<h2 class="pc-title" style=""> | ||||
| 					<h3 | ||||
| 						class="title" | ||||
| 						style=" | ||||
| 							margin: 0; | ||||
| 							margin-left: 32px; | ||||
| 							font-weight: 400; | ||||
| 							user-select: none; | ||||
| 							color: #000; | ||||
| 							font-size: 36px; | ||||
| 							line-height: 54px; | ||||
| 							letter-spacing: 2px; | ||||
| 						"> | ||||
| 						<img | ||||
| 							src="../assets/logo/cnbm.png" | ||||
| 							alt="cnbm_logo" | ||||
| 							style=" | ||||
| 								height: 48px; | ||||
| 								width: 48px; | ||||
| 								position: relative; | ||||
| 								top: 12px; | ||||
| 								right: 8px; | ||||
| 							" /> | ||||
| 						<span>中建材智能自动化研究院有限公司</span> | ||||
| 					</h3> | ||||
| 					<h3 | ||||
| 						class="sub-title" | ||||
| 						style=" | ||||
| 							margin: 0; | ||||
| 							margin-left: 32px; | ||||
| 							font-weight: 400; | ||||
| 							user-select: none; | ||||
| 							color: #000; | ||||
| 							font-size: 36px; | ||||
| 							line-height: 54px; | ||||
| 							letter-spacing: 2px; | ||||
| 						"> | ||||
| 						产线生产监控系统 | ||||
| 					</h3> | ||||
| 				</h2> | ||||
|  | ||||
|         <!-- 表单 --> | ||||
|         <div class="form-cont"> | ||||
|           <el-tabs class="form" v-model="loginForm.loginType" style=" float:none;"> | ||||
|             <el-tab-pane label="账号密码登录" name="uname"> | ||||
|             </el-tab-pane> | ||||
|             <el-tab-pane label="短信验证码登录" name="sms"> | ||||
|             </el-tab-pane> | ||||
|           </el-tabs> | ||||
|           <div> | ||||
|             <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form"> | ||||
|               <el-form-item prop="tenantName" v-if="tenantEnable"> | ||||
|                 <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'> | ||||
|                   <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" /> | ||||
|                 </el-input> | ||||
|               </el-form-item> | ||||
|               <!-- 账号密码登录 --> | ||||
|               <div v-if="loginForm.loginType === 'uname'"> | ||||
|                 <el-form-item prop="username"> | ||||
|                   <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> | ||||
|                     <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> | ||||
|                   </el-input> | ||||
|                 </el-form-item> | ||||
|                 <el-form-item prop="password"> | ||||
|                   <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" | ||||
|                     @keyup.enter.native="getCode"> | ||||
|                     <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> | ||||
|                   </el-input> | ||||
|                 </el-form-item> | ||||
|                 <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox> | ||||
|               </div> | ||||
| 				<!-- 表单 --> | ||||
| 				<div class="form-cont"> | ||||
| 					<el-tabs | ||||
| 						class="form" | ||||
| 						v-model="loginForm.loginType" | ||||
| 						style="float: none"> | ||||
| 						<el-tab-pane label="账号密码登录" name="uname"></el-tab-pane> | ||||
| 						<el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane> | ||||
| 					</el-tabs> | ||||
| 					<div style=""> | ||||
| 						<el-form | ||||
| 							ref="loginForm" | ||||
| 							:model="loginForm" | ||||
| 							:rules="LoginRules" | ||||
| 							class="login-form"> | ||||
| 							<el-form-item prop="tenantName" v-if="tenantEnable"> | ||||
| 								<el-input | ||||
| 									v-model="loginForm.tenantName" | ||||
| 									type="text" | ||||
| 									auto-complete="off" | ||||
| 									placeholder="租户"> | ||||
| 									<!-- <svg-icon | ||||
| 										slot="prefix" | ||||
| 										icon-class="tree" | ||||
| 										class="el-input__icon input-icon" /> --> | ||||
| 								</el-input> | ||||
| 							</el-form-item> | ||||
| 							<!-- 账号密码登录 --> | ||||
| 							<div v-if="loginForm.loginType === 'uname'"> | ||||
| 								<el-form-item prop="username"> | ||||
| 									<el-input | ||||
| 										v-model="loginForm.username" | ||||
| 										type="text" | ||||
| 										auto-complete="off" | ||||
| 										placeholder="账号"> | ||||
| 										<!-- <svg-icon | ||||
| 											slot="prefix" | ||||
| 											icon-class="user" | ||||
| 											class="el-input__icon input-icon" /> --> | ||||
| 									</el-input> | ||||
| 								</el-form-item> | ||||
| 								<el-form-item prop="password"> | ||||
| 									<el-input | ||||
| 										v-model="loginForm.password" | ||||
| 										type="password" | ||||
| 										auto-complete="off" | ||||
| 										placeholder="密码" | ||||
| 										@keyup.enter.native="getCode"> | ||||
| 										<!-- <svg-icon | ||||
| 											slot="prefix" | ||||
| 											icon-class="password" | ||||
| 											class="el-input__icon input-icon" /> --> | ||||
| 									</el-input> | ||||
| 								</el-form-item> | ||||
| 								<el-checkbox | ||||
| 									v-model="loginForm.rememberMe" | ||||
| 									style="margin: 0 0 25px 0"> | ||||
| 									记住密码 | ||||
| 								</el-checkbox> | ||||
| 							</div> | ||||
|  | ||||
|               <!-- 短信验证码登录 --> | ||||
|               <div v-if="loginForm.loginType === 'sms'"> | ||||
|                 <el-form-item prop="mobile"> | ||||
|                   <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号"> | ||||
|                     <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" /> | ||||
|                   </el-input> | ||||
|                 </el-form-item> | ||||
|                 <el-form-item prop="mobileCode"> | ||||
|                   <el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" placeholder="短信验证码" | ||||
|                     class="sms-login-mobile-code-prefix" @keyup.enter.native="handleLogin"> | ||||
|                     <template> | ||||
|                       <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> | ||||
|                     </template> | ||||
|                     <template slot="append"> | ||||
|                       <span v-if="mobileCodeTimer <= 0" class="getMobileCode" @click="getSmsCode" | ||||
|                         style="cursor: pointer;">获取验证码</span> | ||||
|                       <span v-if="mobileCodeTimer > 0" class="getMobileCode">{{ mobileCodeTimer }}秒后可重新获取</span> | ||||
|                     </template> | ||||
|                   </el-input> | ||||
|                 </el-form-item> | ||||
|               </div> | ||||
| 							<!-- 短信验证码登录 --> | ||||
| 							<div v-if="loginForm.loginType === 'sms'"> | ||||
| 								<el-form-item prop="mobile"> | ||||
| 									<el-input | ||||
| 										v-model="loginForm.mobile" | ||||
| 										type="text" | ||||
| 										auto-complete="off" | ||||
| 										placeholder="请输入手机号"> | ||||
| 										<!-- <svg-icon | ||||
| 											slot="prefix" | ||||
| 											icon-class="phone" | ||||
| 											class="el-input__icon input-icon" /> --> | ||||
| 									</el-input> | ||||
| 								</el-form-item> | ||||
| 								<el-form-item prop="mobileCode"> | ||||
| 									<el-input | ||||
| 										v-model="loginForm.mobileCode" | ||||
| 										type="text" | ||||
| 										auto-complete="off" | ||||
| 										placeholder="短信验证码" | ||||
| 										class="sms-login-mobile-code-prefix" | ||||
| 										@keyup.enter.native="handleLogin"> | ||||
| 										<!-- <template> | ||||
| 											<svg-icon | ||||
| 												slot="prefix" | ||||
| 												icon-class="password" | ||||
| 												class="el-input__icon input-icon" /> | ||||
| 										</template> --> | ||||
| 										<template slot="suffix"> | ||||
| 											<span | ||||
| 												v-if="mobileCodeTimer <= 0" | ||||
| 												class="getMobileCode" | ||||
| 												@click="getSmsCode" | ||||
| 												style=" | ||||
| 													cursor: pointer; | ||||
| 													color: #0b58ff; | ||||
| 													font-size: 18px; | ||||
| 													line-height: 66px; | ||||
| 													padding-right: 12px; | ||||
| 												"> | ||||
| 												获取验证码 | ||||
| 											</span> | ||||
| 											<span v-if="mobileCodeTimer > 0" class="getMobileCode"> | ||||
| 												{{ mobileCodeTimer }}秒后可重新获取 | ||||
| 											</span> | ||||
| 										</template> | ||||
| 									</el-input> | ||||
| 								</el-form-item> | ||||
| 							</div> | ||||
|  | ||||
|               <!-- 下方的登录按钮 --> | ||||
|               <el-form-item style="width:100%;"> | ||||
|                 <el-button :loading="loading" size="medium" type="primary" style="width:100%;" | ||||
|                   @click.native.prevent="getCode"> | ||||
|                   <span v-if="!loading">登 录</span> | ||||
|                   <span v-else>登 录 中...</span> | ||||
|                 </el-button> | ||||
|               </el-form-item> | ||||
| 							<!-- 下方的登录按钮 --> | ||||
| 							<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px"> | ||||
| 								<el-button | ||||
| 									:loading="loading" | ||||
| 									size="medium" | ||||
| 									type="primary" | ||||
| 									style="width: 100%; height: 66px; font-size: 18px;" | ||||
| 									@click.native.prevent="getCode"> | ||||
| 									<span v-if="!loading">登 录</span> | ||||
| 									<span v-else>登 录 中...</span> | ||||
| 								</el-button> | ||||
| 							</el-form-item> | ||||
|  | ||||
|               <!--  社交登录 --> | ||||
|               <!-- <el-form-item style="width:100%;"> | ||||
| 							<!--  社交登录 --> | ||||
| 							<!-- <el-form-item style="width:100%;"> | ||||
|                   <div class="oauth-login" style="display:flex"> | ||||
|                     <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)"> | ||||
|                       <img :src="item.img" height="25px" width="25px" alt="登录" > | ||||
| @@ -83,265 +240,305 @@ | ||||
|                     </div> | ||||
|                 </div> | ||||
|               </el-form-item> --> | ||||
|             </el-form> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
| 						</el-form> | ||||
| 					</div> | ||||
| 				</div> | ||||
|  | ||||
|     <!-- 图形验证码 --> | ||||
|     <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }" | ||||
|       @success="handleLogin" /> | ||||
| 				<!-- footer --> | ||||
| 				<div class="footer"> | ||||
| 					Copyright © 2023 中建材智能自动化院 All Rights Reserved. | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
|  | ||||
|     <!-- footer --> | ||||
|     <div class="footer"> | ||||
|       Copyright © 2023 中建材智能自动化院 All Rights Reserved. | ||||
|     </div> | ||||
|   </div> | ||||
| 		<!-- 图形验证码 --> | ||||
| 		<Verify | ||||
| 			ref="verify" | ||||
| 			:captcha-type="'blockPuzzle'" | ||||
| 			:img-size="{ width: '400px', height: '200px' }" | ||||
| 			@success="handleLogin" /> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import { sendSmsCode, socialAuthRedirect } from "@/api/login"; | ||||
| import { getTenantIdByName } from "@/api/system/tenant"; | ||||
| import { SystemUserSocialTypeEnum } from "@/utils/constants"; | ||||
| import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi"; | ||||
| import { sendSmsCode, socialAuthRedirect } from '@/api/login'; | ||||
| import { getTenantIdByName } from '@/api/system/tenant'; | ||||
| import { SystemUserSocialTypeEnum } from '@/utils/constants'; | ||||
| import { getCaptchaEnable, getTenantEnable } from '@/utils/ruoyi'; | ||||
| import { | ||||
|   getPassword, | ||||
|   getRememberMe, getTenantName, | ||||
|   getUsername, | ||||
|   removePassword, removeRememberMe, removeTenantName, | ||||
|   removeUsername, | ||||
|   setPassword, setRememberMe, setTenantId, setTenantName, | ||||
|   setUsername | ||||
| } from "@/utils/auth"; | ||||
| 	getPassword, | ||||
| 	getRememberMe, | ||||
| 	getTenantName, | ||||
| 	getUsername, | ||||
| 	removePassword, | ||||
| 	removeRememberMe, | ||||
| 	removeTenantName, | ||||
| 	removeUsername, | ||||
| 	setPassword, | ||||
| 	setRememberMe, | ||||
| 	setTenantId, | ||||
| 	setTenantName, | ||||
| 	setUsername, | ||||
| } from '@/utils/auth'; | ||||
|  | ||||
| import Verify from '@/components/Verifition/Verify'; | ||||
| import { resetUserPwd } from "@/api/system/user"; | ||||
| import { resetUserPwd } from '@/api/system/user'; | ||||
|  | ||||
| export default { | ||||
|   name: "Login", | ||||
|   components: { | ||||
|     Verify | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       codeUrl: "", | ||||
|       captchaEnable: true, | ||||
|       tenantEnable: true, | ||||
|       mobileCodeTimer: 0, | ||||
|       loginForm: { | ||||
|         loginType: "uname", | ||||
|         username: "admin", | ||||
|         password: "admin123", | ||||
|         captchaVerification: "", | ||||
|         mobile: "", | ||||
|         mobileCode: "", | ||||
|         rememberMe: false, | ||||
|         tenantName: "技术中心", | ||||
|       }, | ||||
|       scene: 21, | ||||
| 	name: 'Login', | ||||
| 	components: { | ||||
| 		Verify, | ||||
| 	}, | ||||
| 	data() { | ||||
| 		return { | ||||
| 			codeUrl: '', | ||||
| 			captchaEnable: true, | ||||
| 			tenantEnable: true, | ||||
| 			mobileCodeTimer: 0, | ||||
| 			loginForm: { | ||||
| 				loginType: 'uname', | ||||
| 				username: 'admin', | ||||
| 				password: 'admin123', | ||||
| 				captchaVerification: '', | ||||
| 				mobile: '', | ||||
| 				mobileCode: '', | ||||
| 				rememberMe: false, | ||||
| 				tenantName: '技术中心', | ||||
| 			}, | ||||
| 			scene: 21, | ||||
|  | ||||
|       LoginRules: { | ||||
|         username: [ | ||||
|           { required: true, trigger: "blur", message: "用户名不能为空" } | ||||
|         ], | ||||
|         password: [ | ||||
|           { required: true, trigger: "blur", message: "密码不能为空" } | ||||
|         ], | ||||
|         mobile: [ | ||||
|           { required: true, trigger: "blur", message: "手机号不能为空" }, | ||||
|           { | ||||
|             validator: function (rule, value, callback) { | ||||
|               if (/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(value) === false) { | ||||
|                 callback(new Error("手机号格式错误")); | ||||
|               } else { | ||||
|                 callback(); | ||||
|               } | ||||
|             }, trigger: "blur" | ||||
|           } | ||||
|         ], | ||||
|         tenantName: [ | ||||
|           { required: true, trigger: "blur", message: "租户不能为空" }, | ||||
|           { | ||||
|             validator: (rule, value, callback) => { | ||||
|               // debugger | ||||
|               getTenantIdByName(value).then(res => { | ||||
|                 const tenantId = res.data; | ||||
|                 if (tenantId && tenantId >= 0) { | ||||
|                   // 设置租户 | ||||
|                   setTenantId(tenantId) | ||||
|                   callback(); | ||||
|                 } else { | ||||
|                   callback('租户不存在'); | ||||
|                 } | ||||
|               }); | ||||
|             }, | ||||
|             trigger: 'blur' | ||||
|           } | ||||
|         ] | ||||
|       }, | ||||
|       loading: false, | ||||
|       redirect: undefined, | ||||
|       // 枚举 | ||||
|       SysUserSocialTypeEnum: SystemUserSocialTypeEnum, | ||||
|     }; | ||||
|   }, | ||||
|   created() { | ||||
|     // 租户开关 | ||||
|     this.tenantEnable = getTenantEnable(); | ||||
|     if (this.tenantEnable) { | ||||
|       getTenantIdByName(this.loginForm.tenantName).then(res => { // 设置租户 | ||||
|         const tenantId = res.data; | ||||
|         if (tenantId && tenantId >= 0) { | ||||
|           setTenantId(tenantId) | ||||
|         } | ||||
|       }); | ||||
|     } | ||||
|     // 验证码开关 | ||||
|     this.captchaEnable = getCaptchaEnable(); | ||||
|     // 重定向地址 | ||||
|     this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined; | ||||
|     this.getCookie(); | ||||
|   }, | ||||
|   methods: { | ||||
|     getCode() { | ||||
|       // 情况一,未开启:则直接登录 | ||||
|       if (!this.captchaEnable) { | ||||
|         this.handleLogin({}) | ||||
|         return; | ||||
|       } | ||||
| 			LoginRules: { | ||||
| 				username: [ | ||||
| 					{ required: true, trigger: 'blur', message: '用户名不能为空' }, | ||||
| 				], | ||||
| 				password: [ | ||||
| 					{ required: true, trigger: 'blur', message: '密码不能为空' }, | ||||
| 				], | ||||
| 				mobile: [ | ||||
| 					{ required: true, trigger: 'blur', message: '手机号不能为空' }, | ||||
| 					{ | ||||
| 						validator: function (rule, value, callback) { | ||||
| 							if ( | ||||
| 								/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test( | ||||
| 									value | ||||
| 								) === false | ||||
| 							) { | ||||
| 								callback(new Error('手机号格式错误')); | ||||
| 							} else { | ||||
| 								callback(); | ||||
| 							} | ||||
| 						}, | ||||
| 						trigger: 'blur', | ||||
| 					}, | ||||
| 				], | ||||
| 				tenantName: [ | ||||
| 					{ required: true, trigger: 'blur', message: '租户不能为空' }, | ||||
| 					{ | ||||
| 						validator: (rule, value, callback) => { | ||||
| 							// debugger | ||||
| 							getTenantIdByName(value).then((res) => { | ||||
| 								const tenantId = res.data; | ||||
| 								if (tenantId && tenantId >= 0) { | ||||
| 									// 设置租户 | ||||
| 									setTenantId(tenantId); | ||||
| 									callback(); | ||||
| 								} else { | ||||
| 									callback('租户不存在'); | ||||
| 								} | ||||
| 							}); | ||||
| 						}, | ||||
| 						trigger: 'blur', | ||||
| 					}, | ||||
| 				], | ||||
| 			}, | ||||
| 			loading: false, | ||||
| 			redirect: undefined, | ||||
| 			// 枚举 | ||||
| 			SysUserSocialTypeEnum: SystemUserSocialTypeEnum, | ||||
| 		}; | ||||
| 	}, | ||||
| 	created() { | ||||
| 		// 租户开关 | ||||
| 		this.tenantEnable = getTenantEnable(); | ||||
| 		if (this.tenantEnable) { | ||||
| 			getTenantIdByName(this.loginForm.tenantName).then((res) => { | ||||
| 				// 设置租户 | ||||
| 				const tenantId = res.data; | ||||
| 				if (tenantId && tenantId >= 0) { | ||||
| 					setTenantId(tenantId); | ||||
| 				} | ||||
| 			}); | ||||
| 		} | ||||
| 		// 验证码开关 | ||||
| 		this.captchaEnable = getCaptchaEnable(); | ||||
| 		// 重定向地址 | ||||
| 		this.redirect = this.$route.query.redirect | ||||
| 			? decodeURIComponent(this.$route.query.redirect) | ||||
| 			: undefined; | ||||
| 		this.getCookie(); | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		getCode() { | ||||
| 			// 情况一,未开启:则直接登录 | ||||
| 			if (!this.captchaEnable) { | ||||
| 				this.handleLogin({}); | ||||
| 				return; | ||||
| 			} | ||||
|  | ||||
|       // 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行登录 | ||||
|       // 弹出验证码 | ||||
|       this.$refs.verify.show() | ||||
|     }, | ||||
|     getCookie() { | ||||
|       const username = getUsername(); | ||||
|       const password = getPassword(); | ||||
|       const rememberMe = getRememberMe(); | ||||
|       const tenantName = getTenantName(); | ||||
|       this.loginForm = { | ||||
|         ...this.loginForm, | ||||
|         username: username ? username : this.loginForm.username, | ||||
|         password: password ? password : this.loginForm.password, | ||||
|         rememberMe: rememberMe ? getRememberMe() : false, | ||||
|         tenantName: tenantName ? tenantName : this.loginForm.tenantName, | ||||
|       }; | ||||
|     }, | ||||
|     handleLogin(captchaParams) { | ||||
|       this.$refs.loginForm.validate(valid => { | ||||
|         if (valid) { | ||||
|           this.loading = true; | ||||
|           // 设置 Cookie | ||||
|           if (this.loginForm.rememberMe) { | ||||
|             setUsername(this.loginForm.username) | ||||
|             setPassword(this.loginForm.password) | ||||
|             setRememberMe(this.loginForm.rememberMe) | ||||
|             setTenantName(this.loginForm.tenantName) | ||||
|           } else { | ||||
|             removeUsername() | ||||
|             removePassword() | ||||
|             removeRememberMe() | ||||
|             removeTenantName() | ||||
|           } | ||||
|           this.loginForm.captchaVerification = captchaParams.captchaVerification | ||||
|           // 发起登陆 | ||||
|           // console.log("发起登录", this.loginForm); | ||||
|           this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => { | ||||
|             this.$router.push({ path: this.redirect || "/" }).catch(() => { | ||||
|             }); | ||||
|           }).catch(() => { | ||||
|             this.loading = false; | ||||
|           }); | ||||
|         } | ||||
|       }); | ||||
|     }, | ||||
|     async doSocialLogin(socialTypeEnum) { | ||||
|       // 设置登录中 | ||||
|       this.loading = true; | ||||
|       let tenant = false; | ||||
|       if (this.tenantEnable) { | ||||
|         await this.$prompt('请输入租户名称', "提示", { | ||||
|           confirmButtonText: "确定", | ||||
|           cancelButtonText: "取消" | ||||
|         }).then(async ({ value }) => { | ||||
|           await getTenantIdByName(value).then(res => { | ||||
|             const tenantId = res.data; | ||||
|             tenant = true | ||||
|             if (tenantId && tenantId >= 0) { | ||||
|               setTenantId(tenantId) | ||||
|             } | ||||
|           }); | ||||
|         }).catch(() => { | ||||
|           // 取消登录按钮 loading状态 | ||||
|           this.loading = false; | ||||
| 			// 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行登录 | ||||
| 			// 弹出验证码 | ||||
| 			this.$refs.verify.show(); | ||||
| 		}, | ||||
| 		getCookie() { | ||||
| 			const username = getUsername(); | ||||
| 			const password = getPassword(); | ||||
| 			const rememberMe = getRememberMe(); | ||||
| 			const tenantName = getTenantName(); | ||||
| 			this.loginForm = { | ||||
| 				...this.loginForm, | ||||
| 				username: username ? username : this.loginForm.username, | ||||
| 				password: password ? password : this.loginForm.password, | ||||
| 				rememberMe: rememberMe ? getRememberMe() : false, | ||||
| 				tenantName: tenantName ? tenantName : this.loginForm.tenantName, | ||||
| 			}; | ||||
| 		}, | ||||
| 		handleLogin(captchaParams) { | ||||
| 			this.$refs.loginForm.validate((valid) => { | ||||
| 				if (valid) { | ||||
| 					this.loading = true; | ||||
| 					// 设置 Cookie | ||||
| 					if (this.loginForm.rememberMe) { | ||||
| 						setUsername(this.loginForm.username); | ||||
| 						setPassword(this.loginForm.password); | ||||
| 						setRememberMe(this.loginForm.rememberMe); | ||||
| 						setTenantName(this.loginForm.tenantName); | ||||
| 					} else { | ||||
| 						removeUsername(); | ||||
| 						removePassword(); | ||||
| 						removeRememberMe(); | ||||
| 						removeTenantName(); | ||||
| 					} | ||||
| 					this.loginForm.captchaVerification = | ||||
| 						captchaParams.captchaVerification; | ||||
| 					// 发起登陆 | ||||
| 					// console.log("发起登录", this.loginForm); | ||||
| 					this.$store | ||||
| 						.dispatch( | ||||
| 							this.loginForm.loginType === 'sms' ? 'SmsLogin' : 'Login', | ||||
| 							this.loginForm | ||||
| 						) | ||||
| 						.then(() => { | ||||
| 							this.$router.push({ path: this.redirect || '/' }).catch(() => {}); | ||||
| 						}) | ||||
| 						.catch(() => { | ||||
| 							this.loading = false; | ||||
| 						}); | ||||
| 				} | ||||
| 			}); | ||||
| 		}, | ||||
| 		async doSocialLogin(socialTypeEnum) { | ||||
| 			// 设置登录中 | ||||
| 			this.loading = true; | ||||
| 			let tenant = false; | ||||
| 			if (this.tenantEnable) { | ||||
| 				await this.$prompt('请输入租户名称', '提示', { | ||||
| 					confirmButtonText: '确定', | ||||
| 					cancelButtonText: '取消', | ||||
| 				}) | ||||
| 					.then(async ({ value }) => { | ||||
| 						await getTenantIdByName(value).then((res) => { | ||||
| 							const tenantId = res.data; | ||||
| 							tenant = true; | ||||
| 							if (tenantId && tenantId >= 0) { | ||||
| 								setTenantId(tenantId); | ||||
| 							} | ||||
| 						}); | ||||
| 					}) | ||||
| 					.catch(() => { | ||||
| 						// 取消登录按钮 loading状态 | ||||
| 						this.loading = false; | ||||
|  | ||||
|           return false | ||||
|         }); | ||||
|       } else { | ||||
|         tenant = true | ||||
|       } | ||||
|       if (tenant) { | ||||
|         // 计算 redirectUri | ||||
|         const redirectUri = location.origin + '/social-login?' | ||||
|           + encodeURIComponent('type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/")); // 重定向不能丢 | ||||
|         // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback'; | ||||
|         // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback'; | ||||
|         // 进行跳转 | ||||
|         socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => { | ||||
|           // console.log(res.url); | ||||
|           window.location.href = res.data; | ||||
|         }); | ||||
|       } | ||||
|     }, | ||||
|     /** ========== 以下为升级短信登录 ========== */ | ||||
|     getSmsCode() { | ||||
|       if (this.mobileCodeTimer > 0) return; | ||||
|       this.$refs.loginForm.validate(valid => { | ||||
|         if (!valid) return; | ||||
|         sendSmsCode(this.loginForm.mobile, this.scene, this.loginForm.uuid, this.loginForm.code).then(res => { | ||||
|           this.$modal.msgSuccess("获取验证码成功") | ||||
|           this.mobileCodeTimer = 60; | ||||
|           let msgTimer = setInterval(() => { | ||||
|             this.mobileCodeTimer = this.mobileCodeTimer - 1; | ||||
|             if (this.mobileCodeTimer <= 0) { | ||||
|               clearInterval(msgTimer); | ||||
|             } | ||||
|           }, 1000); | ||||
|         }); | ||||
|       }); | ||||
|     } | ||||
|   } | ||||
| 						return false; | ||||
| 					}); | ||||
| 			} else { | ||||
| 				tenant = true; | ||||
| 			} | ||||
| 			if (tenant) { | ||||
| 				// 计算 redirectUri | ||||
| 				const redirectUri = | ||||
| 					location.origin + | ||||
| 					'/social-login?' + | ||||
| 					encodeURIComponent( | ||||
| 						'type=' + | ||||
| 							socialTypeEnum.type + | ||||
| 							'&redirect=' + | ||||
| 							(this.redirect || '/') | ||||
| 					); // 重定向不能丢 | ||||
| 				// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback'; | ||||
| 				// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback'; | ||||
| 				// 进行跳转 | ||||
| 				socialAuthRedirect( | ||||
| 					socialTypeEnum.type, | ||||
| 					encodeURIComponent(redirectUri) | ||||
| 				).then((res) => { | ||||
| 					// console.log(res.url); | ||||
| 					window.location.href = res.data; | ||||
| 				}); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** ========== 以下为升级短信登录 ========== */ | ||||
| 		getSmsCode() { | ||||
| 			if (this.mobileCodeTimer > 0) return; | ||||
| 			this.$refs.loginForm.validate((valid) => { | ||||
| 				if (!valid) return; | ||||
| 				sendSmsCode( | ||||
| 					this.loginForm.mobile, | ||||
| 					this.scene, | ||||
| 					this.loginForm.uuid, | ||||
| 					this.loginForm.code | ||||
| 				).then((res) => { | ||||
| 					this.$modal.msgSuccess('获取验证码成功'); | ||||
| 					this.mobileCodeTimer = 60; | ||||
| 					let msgTimer = setInterval(() => { | ||||
| 						this.mobileCodeTimer = this.mobileCodeTimer - 1; | ||||
| 						if (this.mobileCodeTimer <= 0) { | ||||
| 							clearInterval(msgTimer); | ||||
| 						} | ||||
| 					}, 1000); | ||||
| 				}); | ||||
| 			}); | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
| <style lang="scss" scoped> | ||||
| @import "~@/assets/styles/login.scss"; | ||||
|  | ||||
| @import '~@/assets/styles/login.scss'; | ||||
|  | ||||
| .oauth-login { | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   cursor: pointer; | ||||
| 	display: flex; | ||||
| 	align-items: center; | ||||
| 	cursor: pointer; | ||||
| } | ||||
|  | ||||
| .oauth-login-item { | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   margin-right: 10px; | ||||
| 	display: flex; | ||||
| 	align-items: center; | ||||
| 	margin-right: 10px; | ||||
| } | ||||
|  | ||||
| .oauth-login-item img { | ||||
|   height: 25px; | ||||
|   width: 25px; | ||||
| 	height: 25px; | ||||
| 	width: 25px; | ||||
| } | ||||
|  | ||||
| .oauth-login-item span:hover { | ||||
|   text-decoration: underline red; | ||||
|   color: red; | ||||
| 	text-decoration: underline red; | ||||
| 	color: red; | ||||
| } | ||||
|  | ||||
| .sms-login-mobile-code-prefix { | ||||
|   :deep(.el-input__prefix) { | ||||
|     top: 22%; | ||||
|   } | ||||
| }</style> | ||||
| 	:deep(.el-input__prefix) { | ||||
| 		top: 22%; | ||||
| 	} | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -77,7 +77,6 @@ export default { | ||||
| 					label: '设备名称', | ||||
| 				}, | ||||
| 				{ | ||||
| 					width: 128, | ||||
| 					prop: 'equipmentCode', | ||||
| 					label: '设备编码', | ||||
| 				}, | ||||
| @@ -117,6 +116,7 @@ export default { | ||||
| 				{ | ||||
| 					_action: 'params-monitor', | ||||
| 					label: '操作', | ||||
| 					width: 56, | ||||
| 					subcomponent: { | ||||
| 						props: ['injectData'], | ||||
| 						render: function (h) { | ||||
| @@ -124,10 +124,10 @@ export default { | ||||
| 							return h( | ||||
| 								'el-button', | ||||
| 								{ | ||||
| 									class: 'iconfont icon-detail', | ||||
| 									props: { type: 'text' }, | ||||
| 									on: { | ||||
| 										click: function () { | ||||
| 											console.log('inejctdata', _this.injectData); | ||||
| 											_this.$emit('emitData', { | ||||
| 												action: _this.injectData._action, | ||||
| 												// value: _this.injectData.id, | ||||
| @@ -135,8 +135,8 @@ export default { | ||||
| 											}); | ||||
| 										}, | ||||
| 									}, | ||||
| 								}, | ||||
| 								'查看详情' | ||||
| 								} | ||||
| 								// '查看详情' | ||||
| 							); | ||||
| 						}, | ||||
| 					}, | ||||
|   | ||||
| @@ -42,7 +42,7 @@ | ||||
| 			<DialogForm | ||||
| 				v-if="open" | ||||
| 				ref="form" | ||||
| 				:dataForm="form" | ||||
| 				v-model="form" | ||||
| 				:rows="[ | ||||
| 					[ | ||||
| 						{ | ||||
|   | ||||
| @@ -40,7 +40,7 @@ | ||||
| 			<DialogForm | ||||
| 				v-if="open" | ||||
| 				ref="form" | ||||
| 				:dataForm="form" | ||||
| 				v-model="form" | ||||
| 				:rows="[ | ||||
| 					[ | ||||
| 						{ | ||||
|   | ||||
| @@ -64,6 +64,7 @@ export default { | ||||
| 				name: item.inspectionContent, | ||||
| 				type: 'bar', | ||||
| 				barCategoryGap: 12, | ||||
| 				barWidth: 20, | ||||
| 				data: [], | ||||
| 			}; | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user