增加H5端车辆需求计划申请
This commit is contained in:
BianLzhaoMin
parent
e2d4a98659
commit
25a1849306
|
|
@ -0,0 +1,816 @@
|
|||
/* H5移动端样式 - 车辆需求计划申请 */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
font-family: 'Alibaba PuHuiTi R', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.h5-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
background: #409EFF;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-content .layui-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.h5-container {
|
||||
margin-top: 44px;
|
||||
padding: 12px;
|
||||
padding-bottom: 70px; /* 为底部固定按钮留出空间 */
|
||||
}
|
||||
|
||||
/* 表单卡片 */
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header .layui-icon {
|
||||
font-size: 18px;
|
||||
color: #409EFF;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.return-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.return-btn .layui-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.return-btn:active {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.layui-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.layui-form-label {
|
||||
width: 100px !important;
|
||||
padding: 9px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.layui-form-label.required::after {
|
||||
content: '*';
|
||||
color: red;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 100px !important;
|
||||
}
|
||||
|
||||
.layui-input,
|
||||
.layui-select,
|
||||
.layui-textarea {
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.layui-input:focus,
|
||||
.layui-select:focus,
|
||||
.layui-textarea:focus {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.layui-textarea {
|
||||
min-height: 100px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* 字符计数 */
|
||||
.char-count {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 单位输入框 */
|
||||
.input-with-unit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-unit .layui-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.input-with-unit .unit {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 单选框组 */
|
||||
.layui-form-radio {
|
||||
margin-right: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.layui-form-radio > i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.layui-form-radioed > i {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
/* 途经点提示 */
|
||||
.route-point-tip {
|
||||
margin-top: -8px;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 100px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.add-route-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-route-btn .layui-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-route-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-area {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* gap: 12px; */
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 上传按钮包装器 */
|
||||
.upload-btn-wrapper {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
/* 原生文件输入框 */
|
||||
#fileInput {
|
||||
position: absolute !important;
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
opacity: 0 !important;
|
||||
cursor: pointer !important;
|
||||
z-index: 999 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-size: 0 !important;
|
||||
pointer-events: auto !important;
|
||||
/* 确保input可以正常交互 */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: auto; /* 允许点击，然后手动触发input */
|
||||
}
|
||||
|
||||
.layui-upload-list {
|
||||
/* margin: 0; */
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 确保没有其他元素覆盖 */
|
||||
.upload-area {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-btn-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.upload-btn .layui-icon {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.upload-btn:active {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.uploader-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: flex-start; /* 确保顶部对齐 */
|
||||
}
|
||||
|
||||
.uploader-list .file-iteme {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0; /* 防止压缩 */
|
||||
}
|
||||
|
||||
/* 图片预览样式 */
|
||||
.uploader-list .file-iteme .file-preview-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 非图片文件盒子样式 */
|
||||
.uploader-list .file-iteme .file-preview-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uploader-list .file-iteme .file-preview-box .file-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.uploader-list .file-iteme .file-preview-box .file-name {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
max-height: 24px;
|
||||
}
|
||||
|
||||
.uploader-list .handle {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #ff4d4f;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.uploader-list .handle p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 保留旧的upload-file样式以兼容（如果其他地方用到） */
|
||||
.upload-file {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.upload-file img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.upload-file p {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
/* padding-left: 100px; */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.upload-tip p {
|
||||
font-size: 12px;
|
||||
color: #ff4d4f;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 无数据状态 */
|
||||
.no-data-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.no-data-container img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.no-data-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.no-data-tip {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin: 8px 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-data-container .layui-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
.no-data-container .layui-btn .layui-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 有数据时-展示 */
|
||||
.has-data-container {
|
||||
padding: 20px;
|
||||
background: #f0f7ff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #d0e7ff;
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.selected-count-text {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.selected-count-text span {
|
||||
color: #409EFF;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.has-data-container .layui-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 选择类型页面样式 */
|
||||
.select-type-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #f5f5f5;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.select-type-page .h5-container {
|
||||
padding-bottom: 70px; /* 为底部按钮留出空间 */
|
||||
}
|
||||
|
||||
/* 选择类型页面头部优化 */
|
||||
.select-type-page .h5-header {
|
||||
padding: 0 8px; /* 减小左右内边距，给右侧更多空间 */
|
||||
}
|
||||
|
||||
.select-type-page .header-left {
|
||||
flex: 0 1 auto; /* 允许缩小，但不扩展 */
|
||||
max-width: 50%; /* 限制左侧最大宽度 */
|
||||
}
|
||||
|
||||
.select-type-page .header-right {
|
||||
width: 40%;
|
||||
gap: 6px; /* 减小间距 */
|
||||
margin-left: 8px; /* 增加与左侧的间距 */
|
||||
}
|
||||
|
||||
.select-type-page .selected-count {
|
||||
font-size: 12px; /* 稍微减小字体 */
|
||||
}
|
||||
|
||||
.select-type-page .return-btn {
|
||||
margin-right: 20px;
|
||||
padding: 4px 6px; /* 减小按钮内边距 */
|
||||
font-size: 11px; /* 稍微减小字体 */
|
||||
}
|
||||
|
||||
.select-type-page .return-btn span {
|
||||
display: none; /* 在小屏幕上隐藏文字，只显示图标 */
|
||||
}
|
||||
|
||||
/* 在较大屏幕上显示返回按钮文字 */
|
||||
@media screen and (min-width: 375px) {
|
||||
.select-type-page .return-btn span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.select-type-page .header-right {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 固定在底部的提交按钮 */
|
||||
.fixed-submit-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.submit-btn-full {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 为底部按钮留出空间 */
|
||||
.h5-container {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.btn-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 999;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn-box .layui-btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-box .layui-btn.layui-btn-disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 添加的途径点 */
|
||||
.addTjd {
|
||||
margin-bottom: 12px;
|
||||
/* position: relative; */
|
||||
|
||||
}
|
||||
|
||||
.addTjdInput {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.addTjd .layui-form-label {
|
||||
/* width: 100px !important; */
|
||||
}
|
||||
|
||||
.addTjd .layui-input-block {
|
||||
|
||||
|
||||
/* margin-left: 100px !important; */
|
||||
/* padding-right: 30px; */
|
||||
}
|
||||
|
||||
.addTjd img {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.layui-form-label {
|
||||
width: 90px !important;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 90px !important;
|
||||
}
|
||||
|
||||
.route-point-tip,
|
||||
.upload-tip {
|
||||
/* padding-left: 90px; */
|
||||
}
|
||||
}
|
||||
|
||||
/* layout布局类 */
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 修复layui样式冲突 */
|
||||
.layui-form-radio {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.layui-form-radio > * {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layui-form-select dl dd {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 优化下拉选择框样式 - 工程选择 */
|
||||
.layui-form-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layui-form-select .layui-select-title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layui-form-select .layui-select-title input {
|
||||
width: 100%;
|
||||
padding-right: 30px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 下拉选项列表容器 */
|
||||
.layui-form-select dl {
|
||||
position: absolute !important;
|
||||
top: 100% !important;
|
||||
left: 0 !important;
|
||||
margin-top: 2px !important;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
z-index: 9999;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 下拉选项项 - 不强制display，让layui自己控制过滤 */
|
||||
.layui-form-select dl dd {
|
||||
width: 100% !important;
|
||||
padding: 10px 12px !important;
|
||||
white-space: normal !important;
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-all !important;
|
||||
line-height: 1.6 !important;
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: clip !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* 确保layui搜索过滤功能正常 - layui会自动添加layui-disabled类来隐藏被过滤的选项 */
|
||||
.layui-form-select dl dd.layui-disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 选项文本内容 - 允许换行 */
|
||||
.layui-form-select dl dd,
|
||||
.layui-form-select dl dd a {
|
||||
white-space: normal !important;
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-all !important;
|
||||
overflow-wrap: break-word !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 下拉选项悬停和选中状态 */
|
||||
.layui-form-select dl dd:hover,
|
||||
.layui-form-select dl dd.layui-this {
|
||||
background-color: #f0f7ff;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
/* 搜索输入框样式 - layui的搜索输入框 */
|
||||
.layui-form-select dl input[type="text"],
|
||||
.layui-form-select dl input.layui-input {
|
||||
width: 100% !important;
|
||||
padding: 8px 12px !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #e0e0e0 !important;
|
||||
border-radius: 0 !important;
|
||||
font-size: 14px !important;
|
||||
box-sizing: border-box !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
/* 确保搜索输入框可见且可交互 */
|
||||
.layui-form-select dl input[type="text"]:focus,
|
||||
.layui-form-select dl input.layui-input:focus {
|
||||
outline: none !important;
|
||||
border-bottom-color: #409EFF !important;
|
||||
}
|
||||
|
||||
/* 确保下拉列表在移动端正确显示 */
|
||||
.layui-form-select .layui-edge {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
/* 移动端下拉列表优化 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.layui-form-select dl {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.layui-form-select dl dd {
|
||||
padding: 12px 16px !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media screen and (max-width: 320px) {
|
||||
.layui-form-label {
|
||||
width: 80px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
margin-left: 80px !important;
|
||||
}
|
||||
|
||||
.route-point-tip,
|
||||
.upload-tip {
|
||||
padding-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保按钮在移动端可点击 */
|
||||
.layui-btn {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* 输入框在移动端优化 */
|
||||
input, textarea, select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* 防止iOS输入框缩放 */
|
||||
@media screen and (max-width: 768px) {
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,602 @@
|
|||
/* H5移动端样式 - 选择类型页面 */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
font-family: 'Alibaba PuHuiTi R', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.h5-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
background: #409EFF;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
min-width: 0; /* 允许flex容器缩小 */
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
min-width: 0; /* 允许缩小 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
|
||||
.header-left .layui-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0; /* 图标不缩小 */
|
||||
}
|
||||
|
||||
.header-left .header-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
min-width: 0; /* 允许flex子项缩小 */
|
||||
}
|
||||
|
||||
.selected-count {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.return-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
flex-shrink: 0; /* 防止按钮被压缩 */
|
||||
}
|
||||
|
||||
.return-btn .layui-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.return-btn span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.return-btn:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.h5-container {
|
||||
margin-top: 44px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-title .layui-icon {
|
||||
font-size: 18px;
|
||||
color: #409EFF;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 搜索卡片 */
|
||||
.search-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.search-inputs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-inputs .layui-input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
}
|
||||
|
||||
.search-inputs .layui-input:focus {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.search-btns {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-btns .layui-btn {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
/* padding: 8px 12px; */
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 列表项卡片 */
|
||||
.list-item {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list-item.selected {
|
||||
border: 2px solid #409EFF;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.list-item.selected .item-header {
|
||||
border-bottom-color: #d0e7ff;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-checkbox-wrapper {
|
||||
margin-right: 12px;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
cursor: pointer;
|
||||
margin: 0 !important;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
appearance: checkbox;
|
||||
-webkit-appearance: checkbox;
|
||||
-moz-appearance: checkbox;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.item-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-basic-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.info-row-1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-row-item-1 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.info-label {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value.name-text,
|
||||
.info-value.spec-text {
|
||||
flex: 1;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: #e6f7ff;
|
||||
color: #409EFF;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.item-body {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: '*';
|
||||
color: red;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-input .layui-input,
|
||||
.form-input .layui-textarea {
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.form-input .layui-input:focus,
|
||||
.form-input .layui-textarea:focus {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.form-input .layui-textarea {
|
||||
min-height: 60px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* 分页区域 */
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.pagination-box .layui-btn {
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pagination-box .layui-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.btn-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 999;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn-box .layui-btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state .layui-icon {
|
||||
font-size: 48px;
|
||||
color: #d9d9d9;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.form-label {
|
||||
width: 70px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 修复layui样式 */
|
||||
.layui-btn {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* 防止iOS输入框缩放 */
|
||||
@media screen and (max-width: 768px) {
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确认弹框样式 */
|
||||
.confirm-dialog-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.confirm-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.confirm-title i {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.confirm-title span {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.confirm-tip {
|
||||
padding: 12px 16px;
|
||||
background: #fff3e0;
|
||||
border-left: 3px solid #ff9800;
|
||||
margin: 0 16px 16px 16px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.confirm-tip i {
|
||||
color: #ff9800;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.confirm-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.confirm-list-header {
|
||||
padding: 12px 16px;
|
||||
background: #f5f7fa;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.confirm-list-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.confirm-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.confirm-item:hover {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.confirm-item-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.confirm-item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.confirm-item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
line-height: 1.6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.confirm-label {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.confirm-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.confirm-value.highlight {
|
||||
color: #409EFF;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: #e6f7ff;
|
||||
color: #409EFF;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.confirm-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.confirm-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.confirm-list::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.confirm-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
|
|
@ -0,0 +1,978 @@
|
|||
// H5移动端 - 车辆需求计划申请页面
|
||||
let form, laydate, layer, upload;
|
||||
let fileList = new Array();
|
||||
let addNum = 0;
|
||||
let addNums = 1;
|
||||
|
||||
// 页面初始化
|
||||
layui.use(['form', 'layer', 'laydate', 'upload'], function () {
|
||||
form = layui.form;
|
||||
layer = layui.layer;
|
||||
laydate = layui.laydate;
|
||||
upload = layui.upload;
|
||||
|
||||
// 检查是否有从选择页面返回的数据
|
||||
checkSelectedData();
|
||||
|
||||
// 初始化日期选择器
|
||||
laydate.render({
|
||||
elem: '#needTime',
|
||||
type: 'date'
|
||||
});
|
||||
|
||||
// 表单提交
|
||||
form.on('submit(formData)', function (data) {
|
||||
// 提交逻辑稍后处理
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// 计划类型切换
|
||||
form.on('radio(type)', function (data) {
|
||||
// 切换类型时清空已选数据（如果有）
|
||||
|
||||
});
|
||||
|
||||
// 字符计数
|
||||
$('#remark').on('input', function () {
|
||||
let length = $(this).val().length;
|
||||
$('#charCount').text(length);
|
||||
});
|
||||
|
||||
// 文件上传初始化 - 使用原生方式
|
||||
initFileUpload();
|
||||
|
||||
form.render();
|
||||
|
||||
// 优化下拉选择框宽度
|
||||
optimizeSelectWidth();
|
||||
|
||||
// 监听下拉框打开事件，确保宽度一致
|
||||
$(document).on('click', '.layui-form-select .layui-select-title', function () {
|
||||
setTimeout(function () {
|
||||
optimizeSelectWidth();
|
||||
// 确保搜索输入框可以正常使用
|
||||
ensureSearchInput();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 监听窗口大小改变
|
||||
$(window).on('resize', function () {
|
||||
optimizeSelectWidth();
|
||||
});
|
||||
|
||||
// 监听下拉框关闭事件
|
||||
$(document).on('click', function (e) {
|
||||
if (!$(e.target).closest('.layui-form-select').length) {
|
||||
setTimeout(function () {
|
||||
optimizeSelectWidth();
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
// 不拦截layui的搜索事件，让layui自己处理过滤
|
||||
// layui会自动处理搜索过滤，我们只需要确保样式正确
|
||||
});
|
||||
|
||||
// 优化下拉选择框宽度，使选项框与选择框宽度一致
|
||||
function optimizeSelectWidth() {
|
||||
$('.layui-form-select').each(function () {
|
||||
const $select = $(this);
|
||||
const selectWidth = $select.outerWidth();
|
||||
const $dl = $select.find('dl');
|
||||
|
||||
if ($dl.length > 0 && selectWidth > 0) {
|
||||
// 统一设置下拉列表宽度与选择框一致，在选择框下方显示
|
||||
$dl.css({
|
||||
'width': selectWidth + 'px',
|
||||
'min-width': selectWidth + 'px',
|
||||
'max-width': selectWidth + 'px',
|
||||
'left': '0px',
|
||||
'right': 'auto',
|
||||
'position': 'absolute'
|
||||
});
|
||||
|
||||
// 确保所有选项项宽度为100%，文本可以换行
|
||||
$dl.find('dd').css({
|
||||
'width': '100%',
|
||||
'box-sizing': 'border-box',
|
||||
'white-space': 'normal',
|
||||
'word-wrap': 'break-word',
|
||||
'word-break': 'break-all'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 确保搜索输入框正常显示和工作
|
||||
function ensureSearchInput() {
|
||||
// 查找所有layui搜索输入框，只确保宽度正确，不干扰layui的过滤逻辑
|
||||
$('.layui-form-select dl input[type="text"], .layui-form-select dl input.layui-input').each(function () {
|
||||
const $input = $(this);
|
||||
const $dl = $input.closest('dl');
|
||||
|
||||
// 确保搜索输入框宽度正确
|
||||
if ($dl.length > 0) {
|
||||
const dlWidth = $dl.width();
|
||||
$input.css('width', dlWidth + 'px');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 工程下拉选
|
||||
function getProList() {
|
||||
let url = dataUrl + 'backstage/carType/getProListSelected';
|
||||
ajaxRequest(url, "POST", null, false, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
setSelectData(result.data);
|
||||
}
|
||||
}, function (xhr, status, error) {
|
||||
errorFn(xhr, status, error)
|
||||
}, null);
|
||||
}
|
||||
|
||||
// 工程下拉选赋值
|
||||
function setSelectData(proList) {
|
||||
let html = '<option value="">请选择工程</option>';
|
||||
$.each(proList, function (index, item) {
|
||||
html += '<option value="' + item.id + '">' + item.name + '</option>'
|
||||
})
|
||||
$('#proId').empty().append(html);
|
||||
layui.form.render();
|
||||
}
|
||||
|
||||
// ========== 选择类型页面相关变量和函数 ==========
|
||||
let selectPageNum = 1;
|
||||
let selectPageSize = 10;
|
||||
let selectTotalPages = 1;
|
||||
let selectSelectedItems = []; // 选中的项目
|
||||
let selectAllItems = []; // 所有项目数据
|
||||
|
||||
// 选择类型 - 显示内嵌的选择页面
|
||||
function chooseFitType() {
|
||||
// 获取当前计划类型
|
||||
const type = $('input[name="type"]:checked').val() || '1';
|
||||
|
||||
// 显示选择类型页面
|
||||
$('#selectTypePage').show();
|
||||
$('.h5-container').first().hide(); // 隐藏主表单容器
|
||||
$('.fixed-submit-btn').hide(); // 隐藏提交按钮
|
||||
|
||||
// 初始化选择类型页面
|
||||
initSelectTypePage(type);
|
||||
}
|
||||
|
||||
// 初始化选择类型页面
|
||||
function initSelectTypePage(type) {
|
||||
// 重置数据
|
||||
selectPageNum = 1;
|
||||
selectSelectedItems = [];
|
||||
selectAllItems = [];
|
||||
|
||||
// 如果有已选数据，加载到选中列表
|
||||
if (currentSelectedData && currentSelectedData.length > 0) {
|
||||
selectSelectedItems = currentSelectedData.map(item => ({ ...item }));
|
||||
}
|
||||
|
||||
// 更新选中数量显示
|
||||
updateSelectSelectedCount();
|
||||
|
||||
// 加载数据
|
||||
loadSelectData(type);
|
||||
}
|
||||
|
||||
// 加载选择类型数据
|
||||
function loadSelectData(type) {
|
||||
const id = parseInt(type) === 1 ? 2 : 3;
|
||||
let url = dataUrl + "backstage/carType/getCarSelected";
|
||||
let params = {
|
||||
pageNum: selectPageNum,
|
||||
pageSize: selectPageSize,
|
||||
encryptedData: JSON.stringify({
|
||||
name: $('#selectName').val(),
|
||||
model: $('#selectModel').val(),
|
||||
id: id,
|
||||
})
|
||||
};
|
||||
|
||||
ajaxRequest(url, "GET", params, true, function () {
|
||||
// loading
|
||||
}, function (result) {
|
||||
if (result.list && result.list.length > 0) {
|
||||
selectAllItems = (result.list || []).map(item => {
|
||||
// 检查是否在预选数据中
|
||||
const preselectedItem = selectSelectedItems.find(selected => String(selected.id) === String(item.id));
|
||||
return {
|
||||
...item,
|
||||
backDate: preselectedItem ? (preselectedItem.backDate || preselectedItem.times || 0) : (item.backDate || item.times || 0),
|
||||
carSpec: preselectedItem ? (preselectedItem.carSpec || '') : (item.carSpec || ''),
|
||||
needNum: preselectedItem ? (preselectedItem.needNum || 0) : (item.needNum || 0),
|
||||
remark: preselectedItem ? (preselectedItem.remark || preselectedItem.remarks || '') : (item.remark || item.remarks || '')
|
||||
};
|
||||
});
|
||||
selectTotalPages = Math.ceil((result.total || 0) / selectPageSize);
|
||||
renderSelectList();
|
||||
updateSelectPagination();
|
||||
updateSelectSelectedCount();
|
||||
} else {
|
||||
showSelectEmptyState();
|
||||
}
|
||||
}, function (xhr, status, error) {
|
||||
errorFn(xhr, status, error);
|
||||
showSelectEmptyState();
|
||||
});
|
||||
}
|
||||
|
||||
// 渲染选择列表
|
||||
function renderSelectList() {
|
||||
if (!selectAllItems || selectAllItems.length === 0) {
|
||||
showSelectEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
selectAllItems.forEach((item, index) => {
|
||||
const idStr = String(item.id);
|
||||
const selectedItem = selectSelectedItems.find(selected => String(selected.id) === idStr);
|
||||
const isSelected = !!selectedItem;
|
||||
const itemNumber = (selectPageNum - 1) * selectPageSize + index + 1;
|
||||
|
||||
const needNum = isSelected && selectedItem.needNum ? selectedItem.needNum : (item.needNum || '');
|
||||
const backDate = isSelected && selectedItem.backDate ? selectedItem.backDate : (item.backDate || item.times || '');
|
||||
const carSpec = isSelected && selectedItem.carSpec ? selectedItem.carSpec : (item.carSpec || '');
|
||||
const remark = isSelected && selectedItem.remark ? selectedItem.remark : (item.remark || item.remarks || '');
|
||||
|
||||
html += `
|
||||
<div class="list-item ${isSelected ? 'selected' : ''}" data-id="${item.id}">
|
||||
<div class="item-header">
|
||||
<div class="item-checkbox-wrapper">
|
||||
<input type="checkbox" class="item-checkbox" ${isSelected ? 'checked' : ''}
|
||||
data-item-id="${item.id}">
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-number">${itemNumber}</div>
|
||||
<div class="item-basic-info">
|
||||
<div class="info-row info-row-1">
|
||||
<div>
|
||||
<span class="info-label">类型:</span>
|
||||
<span class="info-value type-tag">${item.type || ''}</span>
|
||||
</div>
|
||||
<div class="info-row-item-1">
|
||||
<span class="info-label">单位:</span>
|
||||
<span class="info-value">${item.unit || ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">名称:</span>
|
||||
<span class="info-value name-text">${item.name || ''}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">规格:</span>
|
||||
<span class="info-value spec-text">${item.model || ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="form-row">
|
||||
<label class="form-label required">需用量</label>
|
||||
<div class="form-input">
|
||||
<input type="number" class="layui-input" name="selectNeedNum_${item.id}"
|
||||
value="${needNum}" placeholder="请输入"
|
||||
onblur="updateSelectItemField(${item.id}, 'needNum', this.value)"
|
||||
maxlength="9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label required">使用天数</label>
|
||||
<div class="form-input">
|
||||
<input type="number" class="layui-input" name="selectBackDate_${item.id}"
|
||||
value="${backDate}" placeholder="请输入使用天数"
|
||||
onblur="updateSelectItemField(${item.id}, 'backDate', this.value)"
|
||||
maxlength="9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label">所需规格</label>
|
||||
<div class="form-input">
|
||||
<input type="text" class="layui-input" name="selectCarSpec_${item.id}"
|
||||
value="${carSpec}" placeholder="请输入所需规格"
|
||||
onblur="updateSelectItemField(${item.id}, 'carSpec', this.value)"
|
||||
maxlength="50">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label">备注</label>
|
||||
<div class="form-input">
|
||||
<textarea class="layui-textarea" name="selectRemark_${item.id}"
|
||||
placeholder="请输入备注"
|
||||
onblur="updateSelectItemField(${item.id}, 'remark', this.value)"
|
||||
maxlength="255">${remark}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
$('#selectListContainer').html(html);
|
||||
$('#selectPaginationBox').show();
|
||||
|
||||
// 绑定复选框事件
|
||||
$(document).off('change', '#selectListContainer .item-checkbox').on('change', '#selectListContainer .item-checkbox', function () {
|
||||
const $checkbox = $(this);
|
||||
const itemId = $checkbox.data('item-id');
|
||||
const checked = $checkbox.is(':checked');
|
||||
toggleSelectItem(itemId, checked);
|
||||
});
|
||||
}
|
||||
|
||||
// 切换选中状态
|
||||
function toggleSelectItem(id, checked) {
|
||||
const idStr = String(id);
|
||||
const item = selectAllItems.find(item => String(item.id) === idStr);
|
||||
if (!item) return;
|
||||
|
||||
if (checked) {
|
||||
const existingIndex = selectSelectedItems.findIndex(selected => String(selected.id) === idStr);
|
||||
if (existingIndex === -1) {
|
||||
const needNum = $(`input[name="selectNeedNum_${id}"]`).val() || item.needNum || 0;
|
||||
const backDate = $(`input[name="selectBackDate_${id}"]`).val() || item.backDate || item.times || 0;
|
||||
const carSpec = $(`input[name="selectCarSpec_${id}"]`).val() || item.carSpec || '';
|
||||
const remark = $(`textarea[name="selectRemark_${id}"]`).val() || item.remark || item.remarks || '';
|
||||
|
||||
selectSelectedItems.push({
|
||||
...item,
|
||||
needNum: needNum,
|
||||
backDate: backDate,
|
||||
carSpec: carSpec,
|
||||
remark: remark
|
||||
});
|
||||
} else {
|
||||
const needNum = $(`input[name="selectNeedNum_${id}"]`).val() || selectSelectedItems[existingIndex].needNum || 0;
|
||||
const backDate = $(`input[name="selectBackDate_${id}"]`).val() || selectSelectedItems[existingIndex].backDate || 0;
|
||||
const carSpec = $(`input[name="selectCarSpec_${id}"]`).val() || selectSelectedItems[existingIndex].carSpec || '';
|
||||
const remark = $(`textarea[name="selectRemark_${id}"]`).val() || selectSelectedItems[existingIndex].remark || '';
|
||||
|
||||
selectSelectedItems[existingIndex] = {
|
||||
...selectSelectedItems[existingIndex],
|
||||
needNum: needNum,
|
||||
backDate: backDate,
|
||||
carSpec: carSpec,
|
||||
remark: remark
|
||||
};
|
||||
}
|
||||
} else {
|
||||
selectSelectedItems = selectSelectedItems.filter(selected => String(selected.id) !== idStr);
|
||||
}
|
||||
|
||||
updateSelectSelectedCount();
|
||||
const $item = $(`.list-item[data-id="${id}"]`);
|
||||
if (checked) {
|
||||
$item.addClass('selected');
|
||||
} else {
|
||||
$item.removeClass('selected');
|
||||
}
|
||||
}
|
||||
|
||||
// 更新选择项字段
|
||||
function updateSelectItemField(id, field, value) {
|
||||
const selectedItem = selectSelectedItems.find(item => String(item.id) === String(id));
|
||||
if (selectedItem) {
|
||||
selectedItem[field] = value;
|
||||
}
|
||||
const allItem = selectAllItems.find(item => String(item.id) === String(id));
|
||||
if (allItem) {
|
||||
allItem[field] = value;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新选中数量
|
||||
function updateSelectSelectedCount() {
|
||||
$('#selectedNum').text(selectSelectedItems.length);
|
||||
}
|
||||
|
||||
// 更新分页显示
|
||||
function updateSelectPagination() {
|
||||
$('#selectPageInfo').text(`${selectPageNum}/${selectTotalPages}`);
|
||||
const $prevBtn = $('#selectPrevPage');
|
||||
const $nextBtn = $('#selectNextPage');
|
||||
|
||||
if (selectPageNum === 1) {
|
||||
$prevBtn.prop('disabled', true).addClass('layui-btn-disabled');
|
||||
} else {
|
||||
$prevBtn.prop('disabled', false).removeClass('layui-btn-disabled');
|
||||
}
|
||||
|
||||
if (selectPageNum >= selectTotalPages) {
|
||||
$nextBtn.prop('disabled', true).addClass('layui-btn-disabled');
|
||||
} else {
|
||||
$nextBtn.prop('disabled', false).removeClass('layui-btn-disabled');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示空状态
|
||||
function showSelectEmptyState() {
|
||||
$('#selectListContainer').html(`
|
||||
<div class="empty-state">
|
||||
<i class="layui-icon layui-icon-file"></i>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
`);
|
||||
$('#selectPaginationBox').hide();
|
||||
}
|
||||
|
||||
// 查询/重置
|
||||
function querySelectTable(type) {
|
||||
if (type === 1) {
|
||||
selectPageNum = 1;
|
||||
const currentType = $('input[name="type"]:checked').val() || '1';
|
||||
loadSelectData(currentType);
|
||||
} else if (type === 2) {
|
||||
$('#selectName').val('');
|
||||
$('#selectModel').val('');
|
||||
selectPageNum = 1;
|
||||
const currentType = $('input[name="type"]:checked').val() || '1';
|
||||
loadSelectData(currentType);
|
||||
}
|
||||
}
|
||||
|
||||
// 上一页
|
||||
function selectPrevPage() {
|
||||
if (selectPageNum > 1) {
|
||||
selectPageNum--;
|
||||
const currentType = $('input[name="type"]:checked').val() || '1';
|
||||
loadSelectData(currentType);
|
||||
}
|
||||
}
|
||||
|
||||
// 下一页
|
||||
function selectNextPage() {
|
||||
if (selectPageNum < selectTotalPages) {
|
||||
selectPageNum++;
|
||||
const currentType = $('input[name="type"]:checked').val() || '1';
|
||||
loadSelectData(currentType);
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭选择类型页面
|
||||
function closeSelectTypePage() {
|
||||
// 隐藏选择类型页面
|
||||
$('#selectTypePage').hide();
|
||||
// 显示主表单容器
|
||||
$('.h5-container').first().show();
|
||||
// 显示提交按钮
|
||||
$('.fixed-submit-btn').show();
|
||||
}
|
||||
|
||||
// 确认选择类型
|
||||
function confirmSelectType() {
|
||||
if (selectSelectedItems.length === 0) {
|
||||
return layer.msg('未添加数据', { icon: 7 });
|
||||
}
|
||||
|
||||
// 先同步更新所有已选项目的输入框值
|
||||
selectSelectedItems.forEach(item => {
|
||||
const needNum = $(`input[name="selectNeedNum_${item.id}"]`).val();
|
||||
const backDate = $(`input[name="selectBackDate_${item.id}"]`).val();
|
||||
const carSpec = $(`input[name="selectCarSpec_${item.id}"]`).val();
|
||||
const remark = $(`textarea[name="selectRemark_${item.id}"]`).val();
|
||||
|
||||
item.needNum = needNum || item.needNum || 0;
|
||||
item.backDate = backDate || item.backDate || item.times || 0;
|
||||
item.carSpec = carSpec || item.carSpec || '';
|
||||
item.remark = remark || item.remark || item.remarks || '';
|
||||
});
|
||||
|
||||
// 验证必填字段
|
||||
for (let i = 0; i < selectSelectedItems.length; i++) {
|
||||
const item = selectSelectedItems[i];
|
||||
if (!item.needNum || parseInt(item.needNum) === 0) {
|
||||
return layer.msg(`第${i + 1}项需用量不能为空`, { icon: 7 });
|
||||
}
|
||||
if (!item.backDate || parseInt(item.backDate) === 0) {
|
||||
return layer.msg(`第${i + 1}项使用天数不能为空`, { icon: 7 });
|
||||
}
|
||||
}
|
||||
|
||||
// 保存到currentSelectedData
|
||||
currentSelectedData = selectSelectedItems.map(item => ({
|
||||
id: item.id,
|
||||
type: item.type,
|
||||
name: item.name,
|
||||
model: item.model,
|
||||
unit: item.unit,
|
||||
needNum: item.needNum,
|
||||
backDate: item.backDate || 0,
|
||||
carSpec: item.carSpec || '',
|
||||
remark: item.remark || ''
|
||||
}));
|
||||
|
||||
// 更新显示
|
||||
if (currentSelectedData.length > 0) {
|
||||
$('#no_data_title').hide();
|
||||
$('#has_data_title').show();
|
||||
$('#selectedCountDisplay').text(currentSelectedData.length);
|
||||
} else {
|
||||
$('#no_data_title').show();
|
||||
$('#has_data_title').hide();
|
||||
}
|
||||
|
||||
// 关闭选择页面
|
||||
closeSelectTypePage();
|
||||
|
||||
layer.msg('选择成功', { icon: 1 });
|
||||
}
|
||||
|
||||
// 添加途径点
|
||||
function addTjd() {
|
||||
addNum = addNum + 1;
|
||||
addNums++;
|
||||
if (addNums > 10) {
|
||||
addNum = 10;
|
||||
addNums = 10;
|
||||
layer.msg('途径点不能超过10个!', { icon: 5 });
|
||||
return false;
|
||||
}
|
||||
let html = '<div class="layui-form-item addTjd">' +
|
||||
'<label class="layui-form-label">途经点</label>' +
|
||||
'<div class="layui-input-block">' +
|
||||
'<input class="layui-input addTjdInput" name="routePoint" autocomplete="off" maxlength="30" placeholder="输入内容">' +
|
||||
'<img style="cursor: pointer;" onclick="delTjd(this,' + addNum + ')" src="../../../images/delete_icon.png">' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
// <img style="cursor: pointer;" onclick="delTjd(this,' + addNum + ')" src="../../../images/delete_icon.png">
|
||||
let addTjdNum = $('.addTjd').length;
|
||||
if (addTjdNum === 0) {
|
||||
$('#tjd').after(html);
|
||||
} else {
|
||||
$('.addTjd').eq(addTjdNum - 1).after(html);
|
||||
}
|
||||
layui.form.render();
|
||||
}
|
||||
|
||||
// 删除途径点
|
||||
function delTjd(that, addNum) {
|
||||
addNums = addNums - 1;
|
||||
// 使用closest查找最近的.addTjd父元素
|
||||
$(that).closest('.addTjd').remove();
|
||||
}
|
||||
|
||||
// 初始化文件上传（原生方式）
|
||||
function initFileUpload() {
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
|
||||
if (!fileInput) {
|
||||
console.error('文件输入框不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 给input添加点击事件（调试用）
|
||||
fileInput.addEventListener('click', function (e) {
|
||||
|
||||
}, true);
|
||||
|
||||
// 给按钮添加点击事件 - 手动触发input
|
||||
setTimeout(function () {
|
||||
$('.upload-btn').on('click', function (e) {
|
||||
|
||||
// 阻止事件冒泡到form，避免被form的onclick阻止
|
||||
e.stopPropagation();
|
||||
|
||||
// 使用原生方式触发，确保能弹出文件选择器
|
||||
if (fileInput) {
|
||||
// 延迟一点触发，确保事件处理完成
|
||||
setTimeout(function () {
|
||||
fileInput.click();
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
|
||||
// 给包装器添加点击事件 - 手动触发input
|
||||
$('.upload-btn-wrapper').on('click', function (e) {
|
||||
|
||||
// 如果点击的不是input本身，则触发input
|
||||
if (e.target !== fileInput && !$(e.target).closest('#fileInput').length) {
|
||||
|
||||
e.stopPropagation(); // 阻止冒泡到form
|
||||
setTimeout(function () {
|
||||
fileInput.click();
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
|
||||
// 给上传区域添加点击事件（调试用）
|
||||
$('.upload-area').on('click', function (e) {
|
||||
|
||||
});
|
||||
|
||||
// 给input本身添加点击事件，确保不被form阻止
|
||||
$(fileInput).on('click', function (e) {
|
||||
|
||||
e.stopPropagation(); // 阻止冒泡到form
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// 确保input的点击事件不被阻止
|
||||
fileInput.addEventListener('click', function (e) {
|
||||
|
||||
// 阻止事件冒泡到form，避免被form的onclick阻止
|
||||
e.stopPropagation();
|
||||
// 不阻止默认行为，让浏览器正常处理
|
||||
}, false);
|
||||
|
||||
// 监听文件选择
|
||||
fileInput.addEventListener('change', function (e) {
|
||||
|
||||
const files = e.target.files;
|
||||
if (!files || files.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查已上传文件数量
|
||||
let length = $('.file-iteme').length;
|
||||
if (length >= 5) {
|
||||
layer.msg('最多上传5个附件证明', { icon: 7 });
|
||||
fileInput.value = ''; // 清空选择
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理每个文件
|
||||
Array.from(files).forEach((file, fileIndex) => {
|
||||
if (length >= 5) {
|
||||
return; // 已达到最大数量
|
||||
}
|
||||
|
||||
// 验证文件大小（10MB = 1024 * 10 KB）
|
||||
const maxSize = 1024 * 10; // 10MB
|
||||
if (file.size > maxSize * 1024) {
|
||||
layer.msg(`文件 ${file.name} 超过10MB限制`, { icon: 7 });
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证文件类型
|
||||
const allowedTypes = [
|
||||
'image/jpg', 'image/png', 'image/jpeg',
|
||||
'application/pdf',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
];
|
||||
|
||||
const fileExt = file.name.split('.').pop().toLowerCase();
|
||||
const allowedExts = ['jpg', 'png', 'jpeg', 'doc', 'docx', 'pdf', 'xlsx', 'xls'];
|
||||
|
||||
if (!allowedExts.includes(fileExt)) {
|
||||
layer.msg(`文件 ${file.name} 格式不支持`, { icon: 7 });
|
||||
return;
|
||||
}
|
||||
|
||||
const index = fileList.length; // 使用fileList的长度作为index
|
||||
|
||||
// 判断是否为图片文件
|
||||
const isImage = file.type.startsWith('image/');
|
||||
|
||||
if (isImage) {
|
||||
// 图片文件：使用FileReader读取预览
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
const result = e.target.result;
|
||||
|
||||
// 添加到文件列表
|
||||
$('#uploader-list').append(
|
||||
'<div class="file-iteme">' +
|
||||
'<div class="handle"><p>x</p></div>' +
|
||||
handleFileType(index, file, result, true) +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// 保存文件信息
|
||||
let map = new Map();
|
||||
map.index = index;
|
||||
map.file = file;
|
||||
fileList.push(map);
|
||||
|
||||
length++;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
// 非图片文件：直接显示图标，不需要FileReader
|
||||
// 添加到文件列表
|
||||
$('#uploader-list').append(
|
||||
'<div class="file-iteme">' +
|
||||
'<div class="handle"><p>x</p></div>' +
|
||||
handleFileType(index, file, null, false) +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// 保存文件信息
|
||||
let map = new Map();
|
||||
map.index = index;
|
||||
map.file = file;
|
||||
fileList.push(map);
|
||||
|
||||
length++;
|
||||
}
|
||||
});
|
||||
|
||||
// 清空input值，允许重复选择相同文件
|
||||
fileInput.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
// 处理文件类型显示
|
||||
function handleFileType(index, file, result, isImage) {
|
||||
// 获取文件扩展名
|
||||
const fileName = file.name || '';
|
||||
const fileExt = fileName.split('.').pop().toLowerCase();
|
||||
|
||||
// 根据当前页面路径计算图片路径
|
||||
const basePath = '../../../images/';
|
||||
|
||||
if (isImage && result) {
|
||||
// 图片文件：显示预览图
|
||||
return '<img class="file-preview-img" data-index="' + index + '" data-name="' + fileName + '" src="' + result + '">';
|
||||
} else {
|
||||
// 非图片文件：显示图标盒子
|
||||
let iconPath = '';
|
||||
if (fileExt === 'doc' || fileExt === 'docx') {
|
||||
iconPath = basePath + 'docx.png';
|
||||
} else if (fileExt === 'xls' || fileExt === 'xlsx') {
|
||||
iconPath = basePath + 'xlsx.png';
|
||||
} else if (fileExt === 'pdf') {
|
||||
iconPath = basePath + 'pdf.png';
|
||||
} else {
|
||||
// 默认图标
|
||||
iconPath = basePath + 'file_icon.png';
|
||||
}
|
||||
|
||||
// 截取文件名（如果太长）
|
||||
const displayName = fileName.length > 8 ? fileName.substring(0, 8) + '...' : fileName;
|
||||
|
||||
return '<div class="file-preview-box" data-index="' + index + '">' +
|
||||
'<img class="file-icon" src="' + iconPath + '" alt="' + fileExt + '">' +
|
||||
'<p class="file-name">' + displayName + '</p>' +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 删除文件
|
||||
$(document).on("click", ".file-iteme .handle", function (event) {
|
||||
event.stopPropagation();
|
||||
let imgListUp = new Array();
|
||||
// 查找data-index属性（可能在img、file-preview-img或file-preview-box上）
|
||||
const $fileItem = $(this).closest('.file-iteme');
|
||||
let index = $fileItem.find('[data-index]').attr('data-index') ||
|
||||
$(this).next().attr('data-index') ||
|
||||
$(this).next().find('[data-index]').attr('data-index');
|
||||
|
||||
$.each(fileList, function (inx, ele) {
|
||||
if (index != ele.index) {
|
||||
imgListUp.push(ele);
|
||||
}
|
||||
});
|
||||
$fileItem.remove();
|
||||
fileList.splice(0, fileList.length);
|
||||
$.each(imgListUp, function (inx, ele) {
|
||||
fileList.push(ele);
|
||||
});
|
||||
});
|
||||
|
||||
// 提交申请
|
||||
function saveData2() {
|
||||
$('#formSubmit').trigger('click');
|
||||
}
|
||||
|
||||
// 存储已选数据（用于传递给选择页面）
|
||||
let currentSelectedData = [];
|
||||
|
||||
// 检查从选择页面返回的数据
|
||||
function checkSelectedData() {
|
||||
const selectedData = sessionStorage.getItem('selectedTypeData');
|
||||
if (selectedData) {
|
||||
try {
|
||||
const data = JSON.parse(selectedData);
|
||||
if (data && data.length > 0) {
|
||||
// 保存已选数据
|
||||
currentSelectedData = data;
|
||||
// 隐藏空状态，显示已选数量
|
||||
$('#no_data_title').hide();
|
||||
$('#has_data_title').show();
|
||||
$('#selectedCountDisplay').text(data.length);
|
||||
// 清除sessionStorage（因为我们已经保存到currentSelectedData了）
|
||||
sessionStorage.removeItem('selectedTypeData');
|
||||
} else {
|
||||
// 没有数据，显示空状态
|
||||
$('#no_data_title').show();
|
||||
$('#has_data_title').hide();
|
||||
currentSelectedData = [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析选中数据失败:', e);
|
||||
sessionStorage.removeItem('selectedTypeData');
|
||||
$('#no_data_title').show();
|
||||
$('#has_data_title').hide();
|
||||
currentSelectedData = [];
|
||||
}
|
||||
} else {
|
||||
// 没有数据，显示空状态
|
||||
$('#no_data_title').show();
|
||||
$('#has_data_title').hide();
|
||||
currentSelectedData = [];
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭页面
|
||||
function closePage() {
|
||||
// H5页面返回
|
||||
if (window.history.length > 1) {
|
||||
window.history.back();
|
||||
} else {
|
||||
// 如果没有历史记录，可以跳转到首页或其他页面
|
||||
// window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
||||
getProList();
|
||||
|
||||
// 确认提交
|
||||
function submitApply() {
|
||||
// 1. 字段校验
|
||||
// 校验计划类型
|
||||
const type = $('input[name="type"]:checked').val();
|
||||
if (!type) {
|
||||
return layer.msg('请选择计划类型', { icon: 7 });
|
||||
}
|
||||
|
||||
// 校验申请工程
|
||||
const proId = $('#proId').val();
|
||||
if (!proId) {
|
||||
return layer.msg('请选择申请工程', { icon: 7 });
|
||||
}
|
||||
|
||||
// 校验需用日期
|
||||
const needTime = $('#needTime').val();
|
||||
if (!needTime) {
|
||||
return layer.msg('请选择需用日期', { icon: 7 });
|
||||
}
|
||||
|
||||
// 校验项目部分
|
||||
const projectPart = $('#projectPart').val();
|
||||
if (!projectPart || projectPart.trim() === '') {
|
||||
return layer.msg('请输入项目部分', { icon: 7 });
|
||||
}
|
||||
if (projectPart.length > 50) {
|
||||
return layer.msg('项目部分不能超过50个字符', { icon: 7 });
|
||||
}
|
||||
|
||||
// 校验计划说明
|
||||
const remark = $('#remark').val();
|
||||
if (!remark || remark.trim() === '') {
|
||||
return layer.msg('请输入计划说明', { icon: 7 });
|
||||
}
|
||||
if (remark.length > 500) {
|
||||
return layer.msg('计划说明不能超过500个字符', { icon: 7 });
|
||||
}
|
||||
|
||||
// 校验是否选择了车辆/吊车类型
|
||||
if (!currentSelectedData || currentSelectedData.length === 0) {
|
||||
return layer.msg('请至少选择一种车辆或吊车类型', { icon: 7 });
|
||||
}
|
||||
|
||||
// 校验已选数据的必填字段
|
||||
for (let i = 0; i < currentSelectedData.length; i++) {
|
||||
const item = currentSelectedData[i];
|
||||
if (!item.needNum || parseInt(item.needNum) === 0) {
|
||||
return layer.msg(`第${i + 1}项需用量不能为空`, { icon: 7 });
|
||||
}
|
||||
if (parseInt(item.needNum) > 10) {
|
||||
return layer.msg(`第${i + 1}项需用量不能超过10`, { icon: 7 });
|
||||
}
|
||||
if (!item.backDate || parseInt(item.backDate) === 0) {
|
||||
return layer.msg(`第${i + 1}项使用天数不能为空`, { icon: 7 });
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 组装途径点字符串（使用逗号拼接）
|
||||
let routePointStr = '';
|
||||
$('input[name="routePoint"]').each(function (index, item) {
|
||||
const routePoint = $(this).val();
|
||||
if (routePoint && routePoint.trim() !== '') {
|
||||
if (routePointStr !== '') {
|
||||
routePointStr += 'routePoint;' + routePoint.trim();
|
||||
} else {
|
||||
routePointStr = routePoint.trim();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 组装detailList
|
||||
const detailList = currentSelectedData.map(item => {
|
||||
return {
|
||||
modelId: item.id || item.modelId || '',
|
||||
type: item.type || '',
|
||||
name: item.name || '',
|
||||
model: item.model || '',
|
||||
unit: item.unit || '',
|
||||
carSpec: item.carSpec || '',
|
||||
needNum: item.needNum || '0',
|
||||
backDate: item.backDate || '0',
|
||||
remark: item.remark || ''
|
||||
};
|
||||
});
|
||||
|
||||
// 4. 组装params对象
|
||||
const params = {
|
||||
type: type,
|
||||
proId: proId,
|
||||
needTime: needTime,
|
||||
projectPart: projectPart.trim(),
|
||||
remark: remark.trim(),
|
||||
carWeight: $('#carWeight').val() || '',
|
||||
carStart: $('#carStart').val() || '',
|
||||
carEnd: $('#carEnd').val() || '',
|
||||
routePoint: routePointStr,
|
||||
detailList: detailList,
|
||||
applyType: '0' // 固定为0
|
||||
};
|
||||
|
||||
// 5. 打印参数（调试用）
|
||||
console.log('提交参数:', params);
|
||||
console.log('途径点字符串:', routePointStr);
|
||||
console.log('文件数量:', fileList.length);
|
||||
|
||||
// 6. 创建FormData
|
||||
let loadingMsg = layer.msg('正在提交保存,请稍等...', { icon: 16, shade: 0.01, time: '0' });
|
||||
let url = dataUrl + 'backstage/carNeedPlan/addNeedPlanData';
|
||||
let formData = new FormData();
|
||||
|
||||
// 7. 添加文件
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
formData.append("file[]", fileList[i].file);
|
||||
}
|
||||
|
||||
// 8. 添加params（转为JSON字符串）
|
||||
formData.append('params', JSON.stringify(params));
|
||||
|
||||
// 9. 调用接口
|
||||
ajaxRequestByUploadFile(url, formData, function () {
|
||||
// loading
|
||||
}, function (result) {
|
||||
layer.close(loadingMsg);
|
||||
if (result.code === 200) {
|
||||
layer.msg('提交成功', { icon: 1 }, function () {
|
||||
// 提交成功后刷新页面
|
||||
// window.location.reload();
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.msg || '提交失败', { icon: 7 });
|
||||
}
|
||||
}, function (xhr, status, error) {
|
||||
layer.close(loadingMsg);
|
||||
errorFn(xhr, status, error);
|
||||
}, null);
|
||||
}
|
||||
|
|
@ -0,0 +1,535 @@
|
|||
// H5移动端 - 选择类型页面
|
||||
let form, layer, laydate;
|
||||
let pageNum = 1;
|
||||
let pageSize = 10;
|
||||
let totalPages = 1;
|
||||
let selectedItems = []; // 选中的项目
|
||||
let allItems = []; // 所有项目数据
|
||||
let typeParam = ''; // 类型参数
|
||||
|
||||
// 页面初始化
|
||||
layui.use(['form', 'layer', 'laydate'], function () {
|
||||
form = layui.form;
|
||||
layer = layui.layer;
|
||||
laydate = layui.laydate;
|
||||
|
||||
// 获取URL参数
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
typeParam = urlParams.get('type') || '1';
|
||||
|
||||
// 检查是否有预选数据（从主页面传递过来的）
|
||||
checkPreselectedData();
|
||||
|
||||
// 初始化数据
|
||||
initData();
|
||||
});
|
||||
|
||||
// 检查预选数据（从主页面传递过来的已选数据）
|
||||
function checkPreselectedData() {
|
||||
const preselectedData = sessionStorage.getItem('preselectedTypeData');
|
||||
if (preselectedData) {
|
||||
try {
|
||||
const data = JSON.parse(preselectedData);
|
||||
if (data && data.length > 0) {
|
||||
// 将预选数据转换为selectedItems格式
|
||||
selectedItems = data.map(item => ({
|
||||
...item,
|
||||
id: item.id,
|
||||
needNum: item.needNum || 0,
|
||||
backDate: item.backDate || 0,
|
||||
carSpec: item.carSpec || '',
|
||||
remark: item.remark || ''
|
||||
}));
|
||||
console.log('预选数据已加载:', selectedItems);
|
||||
// 清除sessionStorage
|
||||
sessionStorage.removeItem('preselectedTypeData');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析预选数据失败:', e);
|
||||
sessionStorage.removeItem('preselectedTypeData');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
function initData() {
|
||||
// 加载数据
|
||||
loadData();
|
||||
}
|
||||
|
||||
// 加载数据（接口调用）
|
||||
function loadData() {
|
||||
let url = dataUrl + "backstage/carType/getCarSelected";
|
||||
let params = {
|
||||
pageNum: pageNum,
|
||||
pageSize: pageSize,
|
||||
encryptedData: JSON.stringify({
|
||||
name: $('#name').val(),
|
||||
model: $('#model').val(),
|
||||
id: parseInt(typeParam) === 1 ? 2 : 3,
|
||||
})
|
||||
};
|
||||
|
||||
ajaxRequest(url, "GET", params, true, function () {
|
||||
// loading
|
||||
}, function (result) {
|
||||
if (result.list && result.list.length > 0) {
|
||||
// 对返回的数据进行map，添加backDate和carSpec字段
|
||||
|
||||
console.log(result.list);
|
||||
allItems = (result.list || []).map(item => {
|
||||
// 检查是否在预选数据中，如果在，使用预选数据中的值
|
||||
const preselectedItem = selectedItems.find(selected => String(selected.id) === String(item.id));
|
||||
return {
|
||||
...item,
|
||||
backDate: preselectedItem ? (preselectedItem.backDate || preselectedItem.times || 0) : (item.backDate || item.times || 0),
|
||||
carSpec: preselectedItem ? (preselectedItem.carSpec || '') : (item.carSpec || ''),
|
||||
needNum: preselectedItem ? (preselectedItem.needNum || 0) : (item.needNum || 0),
|
||||
remark: preselectedItem ? (preselectedItem.remark || preselectedItem.remarks || '') : (item.remark || item.remarks || '')
|
||||
};
|
||||
});
|
||||
totalPages = Math.ceil((result.total || 0) / pageSize);
|
||||
renderList();
|
||||
updatePagination();
|
||||
// 更新选中数量显示
|
||||
updateSelectedCount();
|
||||
} else {
|
||||
showEmptyState();
|
||||
}
|
||||
}, function (xhr, status, error) {
|
||||
errorFn(xhr, status, error);
|
||||
showEmptyState();
|
||||
});
|
||||
}
|
||||
|
||||
// 查询/重置
|
||||
function queryTable(type) {
|
||||
if (type === 1) {
|
||||
// 查询
|
||||
pageNum = 1;
|
||||
loadData();
|
||||
} else if (type === 2) {
|
||||
// 重置
|
||||
$('#name').val('');
|
||||
$('#model').val('');
|
||||
pageNum = 1;
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染列表
|
||||
function renderList() {
|
||||
if (!allItems || allItems.length === 0) {
|
||||
showEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
allItems.forEach((item, index) => {
|
||||
// 检查是否在已选列表中，搜索时保持已选状态（统一转换为字符串比较）
|
||||
const idStr = String(item.id);
|
||||
const selectedItem = selectedItems.find(selected => String(selected.id) === idStr);
|
||||
const isSelected = !!selectedItem;
|
||||
const itemNumber = (pageNum - 1) * pageSize + index + 1;
|
||||
|
||||
// 如果已选中，使用已选数据中的值，否则使用当前item的值
|
||||
const needNum = isSelected && selectedItem.needNum ? selectedItem.needNum : (item.needNum || '');
|
||||
const backDate = isSelected && selectedItem.backDate ? selectedItem.backDate : (item.backDate || item.times || '');
|
||||
const carSpec = isSelected && selectedItem.carSpec ? selectedItem.carSpec : (item.carSpec || '');
|
||||
const remark = isSelected && selectedItem.remark ? selectedItem.remark : (item.remark || item.remarks || '');
|
||||
|
||||
html += `
|
||||
<div class="list-item ${isSelected ? 'selected' : ''}" data-id="${item.id}">
|
||||
<div class="item-header">
|
||||
<div class="item-checkbox-wrapper">
|
||||
<input type="checkbox" class="item-checkbox" ${isSelected ? 'checked' : ''}
|
||||
data-item-id="${item.id}">
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-number">${itemNumber}</div>
|
||||
<div class="item-basic-info">
|
||||
<div class="info-row info-row-1">
|
||||
<div>
|
||||
<span class="info-label">类型:</span>
|
||||
<span class="info-value type-tag">${item.type || ''}</span>
|
||||
</div>
|
||||
<div class="info-row-item-1">
|
||||
<span class="info-label">单位:</span>
|
||||
<span class="info-value">${item.unit || ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">名称:</span>
|
||||
<span class="info-value name-text">${item.name || ''}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">规格:</span>
|
||||
<span class="info-value spec-text">${item.model || ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<div class="form-row">
|
||||
<label class="form-label required">需用量</label>
|
||||
<div class="form-input">
|
||||
<input type="number" class="layui-input" name="needNum_${item.id}"
|
||||
value="${needNum}" placeholder="请输入"
|
||||
onblur="updateItemField(${item.id}, 'needNum', this.value)"
|
||||
maxlength="9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label required">使用天数</label>
|
||||
<div class="form-input">
|
||||
<input type="number" class="layui-input" name="backDate_${item.id}"
|
||||
value="${backDate}" placeholder="请输入使用天数"
|
||||
onblur="updateItemField(${item.id}, 'backDate', this.value)"
|
||||
maxlength="9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label">所需规格</label>
|
||||
<div class="form-input">
|
||||
<input type="text" class="layui-input" name="carSpec_${item.id}"
|
||||
value="${carSpec}" placeholder="请输入所需规格"
|
||||
onblur="updateItemField(${item.id}, 'carSpec', this.value)"
|
||||
maxlength="50">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-label">备注</label>
|
||||
<div class="form-input">
|
||||
<textarea class="layui-textarea" name="remark_${item.id}"
|
||||
placeholder="请输入备注"
|
||||
onblur="updateItemField(${item.id}, 'remark', this.value)"
|
||||
maxlength="255">${remark}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
$('#listContainer').html(html);
|
||||
$('#paginationBox').show();
|
||||
|
||||
// 使用事件委托绑定复选框事件
|
||||
$(document).off('change', '.item-checkbox').on('change', '.item-checkbox', function () {
|
||||
const $checkbox = $(this);
|
||||
const itemId = $checkbox.data('item-id');
|
||||
const checked = $checkbox.is(':checked');
|
||||
console.log('Checkbox changed:', itemId, checked);
|
||||
toggleSelect(itemId, checked);
|
||||
});
|
||||
}
|
||||
|
||||
// 切换选中状态
|
||||
function toggleSelect(id, checked) {
|
||||
console.log('toggleSelect called:', id, checked, typeof id);
|
||||
console.log('allItems length:', allItems.length);
|
||||
console.log('selectedItems before:', selectedItems.length);
|
||||
|
||||
// 统一转换为字符串进行比较，避免类型不匹配
|
||||
const idStr = String(id);
|
||||
const item = allItems.find(item => String(item.id) === idStr);
|
||||
|
||||
if (!item) {
|
||||
console.error('Item not found:', id, 'allItems:', allItems.map(i => i.id));
|
||||
return;
|
||||
}
|
||||
|
||||
if (checked) {
|
||||
// 勾选时添加到选中列表
|
||||
const existingIndex = selectedItems.findIndex(selected => String(selected.id) === idStr);
|
||||
if (existingIndex === -1) {
|
||||
// 如果不存在，添加新项
|
||||
const needNum = $(`input[name="needNum_${id}"]`).val() || item.needNum || 0;
|
||||
const backDate = $(`input[name="backDate_${id}"]`).val() || item.backDate || item.times || 0;
|
||||
const carSpec = $(`input[name="carSpec_${id}"]`).val() || item.carSpec || '';
|
||||
const remark = $(`textarea[name="remark_${id}"]`).val() || item.remark || item.remarks || '';
|
||||
|
||||
const newItem = {
|
||||
...item,
|
||||
needNum: needNum,
|
||||
backDate: backDate,
|
||||
carSpec: carSpec,
|
||||
remark: remark
|
||||
};
|
||||
|
||||
selectedItems.push(newItem);
|
||||
console.log('Added item:', newItem);
|
||||
console.log('selectedItems after add:', selectedItems);
|
||||
} else {
|
||||
// 如果已存在，更新数据（同步输入框的值）
|
||||
const needNum = $(`input[name="needNum_${id}"]`).val() || selectedItems[existingIndex].needNum || 0;
|
||||
const backDate = $(`input[name="backDate_${id}"]`).val() || selectedItems[existingIndex].backDate || 0;
|
||||
const carSpec = $(`input[name="carSpec_${id}"]`).val() || selectedItems[existingIndex].carSpec || '';
|
||||
const remark = $(`textarea[name="remark_${id}"]`).val() || selectedItems[existingIndex].remark || '';
|
||||
|
||||
selectedItems[existingIndex] = {
|
||||
...selectedItems[existingIndex],
|
||||
needNum: needNum,
|
||||
backDate: backDate,
|
||||
carSpec: carSpec,
|
||||
remark: remark
|
||||
};
|
||||
console.log('Updated item:', selectedItems[existingIndex]);
|
||||
}
|
||||
} else {
|
||||
// 取消勾选时从选中列表移除
|
||||
selectedItems = selectedItems.filter(selected => String(selected.id) !== idStr);
|
||||
console.log('Removed item, selectedItems after:', selectedItems);
|
||||
}
|
||||
|
||||
console.log('selectedItems final:', selectedItems.length, selectedItems);
|
||||
updateSelectedCount();
|
||||
updateItemClass(id, checked);
|
||||
}
|
||||
|
||||
// 更新项目字段
|
||||
function updateItemField(id, field, value) {
|
||||
// 验证
|
||||
if (field === 'needNum') {
|
||||
if (value) {
|
||||
const regex = /^(0|[1-9]\d{0,6})$/;
|
||||
if (!regex.test(value) || parseInt(value) > 10) {
|
||||
layer.msg('需用量格式不正确，最大数量只能输入10，且为正整数！', { icon: 7 });
|
||||
$(`input[name="needNum_${id}"]`).val('');
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else if (field === 'backDate') {
|
||||
if (value) {
|
||||
const regex = /^[1-9]\d{0,5}$/;
|
||||
if (!regex.test(value)) {
|
||||
layer.msg('使用天数只能输入正整数！', { icon: 7 });
|
||||
$(`input[name="backDate_${id}"]`).val('');
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else if (field === 'carSpec') {
|
||||
if (value && value.length > 50) {
|
||||
layer.msg('所需规格最多输入50位！', { icon: 7 });
|
||||
return;
|
||||
}
|
||||
} else if (field === 'remark') {
|
||||
if (value && value.length > 255) {
|
||||
layer.msg('备注最多输入255位！', { icon: 7 });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新数据
|
||||
const selectedItem = selectedItems.find(item => item.id === id);
|
||||
if (selectedItem) {
|
||||
selectedItem[field] = value;
|
||||
}
|
||||
|
||||
const allItem = allItems.find(item => item.id === id);
|
||||
if (allItem) {
|
||||
allItem[field] = value;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新选中数量
|
||||
function updateSelectedCount() {
|
||||
$('#selectedNum').text(selectedItems.length);
|
||||
}
|
||||
|
||||
// 更新项目样式
|
||||
function updateItemClass(id, checked) {
|
||||
const $item = $(`.list-item[data-id="${id}"]`);
|
||||
if (checked) {
|
||||
$item.addClass('selected');
|
||||
} else {
|
||||
$item.removeClass('selected');
|
||||
}
|
||||
}
|
||||
|
||||
// 上一页
|
||||
function prevPage() {
|
||||
if (pageNum > 1) {
|
||||
pageNum--;
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
|
||||
// 下一页
|
||||
function nextPage() {
|
||||
if (pageNum < totalPages) {
|
||||
pageNum++;
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
|
||||
// 更新分页显示
|
||||
function updatePagination() {
|
||||
$('#pageInfo').text(`${pageNum}/${totalPages}`);
|
||||
const $prevBtn = $('#prevPage');
|
||||
const $nextBtn = $('#nextPage');
|
||||
|
||||
if (pageNum === 1) {
|
||||
$prevBtn.prop('disabled', true).addClass('layui-btn-disabled');
|
||||
} else {
|
||||
$prevBtn.prop('disabled', false).removeClass('layui-btn-disabled');
|
||||
}
|
||||
|
||||
if (pageNum >= totalPages) {
|
||||
$nextBtn.prop('disabled', true).addClass('layui-btn-disabled');
|
||||
} else {
|
||||
$nextBtn.prop('disabled', false).removeClass('layui-btn-disabled');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示空状态
|
||||
function showEmptyState() {
|
||||
$('#listContainer').html(`
|
||||
<div class="empty-state">
|
||||
<i class="layui-icon layui-icon-file"></i>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
`);
|
||||
$('#paginationBox').hide();
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
function saveData2() {
|
||||
if (selectedItems.length === 0) {
|
||||
return layer.msg('未添加数据', { icon: 7 });
|
||||
}
|
||||
|
||||
// 先同步更新所有已选项目的输入框值
|
||||
selectedItems.forEach(item => {
|
||||
const needNum = $(`input[name="needNum_${item.id}"]`).val();
|
||||
const backDate = $(`input[name="backDate_${item.id}"]`).val();
|
||||
const carSpec = $(`input[name="carSpec_${item.id}"]`).val();
|
||||
const remark = $(`textarea[name="remark_${item.id}"]`).val();
|
||||
|
||||
item.needNum = needNum || item.needNum || 0;
|
||||
item.backDate = backDate || item.backDate || item.times || 0;
|
||||
item.carSpec = carSpec || item.carSpec || '';
|
||||
item.remark = remark || item.remark || item.remarks || '';
|
||||
});
|
||||
|
||||
// 验证必填字段
|
||||
for (let i = 0; i < selectedItems.length; i++) {
|
||||
const item = selectedItems[i];
|
||||
if (!item.needNum || parseInt(item.needNum) === 0) {
|
||||
return layer.msg(`第${i + 1}项需用量不能为空`, { icon: 7 });
|
||||
}
|
||||
if (!item.backDate || parseInt(item.backDate) === 0) {
|
||||
return layer.msg(`第${i + 1}项使用天数不能为空`, { icon: 7 });
|
||||
}
|
||||
}
|
||||
|
||||
// 显示确认弹框，展示已选数据
|
||||
showConfirmDialog();
|
||||
}
|
||||
|
||||
// 显示确认弹框
|
||||
function showConfirmDialog() {
|
||||
let confirmHtml = `
|
||||
<div class="confirm-dialog-content">
|
||||
<div class="confirm-title">
|
||||
<i class="layui-icon layui-icon-tips" style="color: #409EFF; font-size: 20px;"></i>
|
||||
<span style="font-size: 16px; font-weight: 600; margin-left: 8px;">确认添加数据</span>
|
||||
</div>
|
||||
<div class="confirm-tip" style="color: #ff5722; margin: 12px 0; font-size: 14px;">
|
||||
<i class="layui-icon layui-icon-about"></i>
|
||||
数据即将被添加，请仔细检查数据是否有错误！
|
||||
</div>
|
||||
<div class="confirm-list">
|
||||
<div class="confirm-list-header">
|
||||
<span>已选数据列表（共 ${selectedItems.length} 项）</span>
|
||||
</div>
|
||||
<div class="confirm-list-body">
|
||||
`;
|
||||
|
||||
selectedItems.forEach((item, index) => {
|
||||
confirmHtml += `
|
||||
<div class="confirm-item">
|
||||
<div class="confirm-item-number">${index + 1}</div>
|
||||
<div class="confirm-item-content">
|
||||
<div class="confirm-item-row">
|
||||
<span class="confirm-label">类型:</span>
|
||||
<span class="confirm-value type-badge">${item.type || ''}</span>
|
||||
<span class="confirm-label">单位:</span>
|
||||
<span class="confirm-value">${item.unit || ''}</span>
|
||||
</div>
|
||||
<div class="confirm-item-row">
|
||||
<span class="confirm-label">名称:</span>
|
||||
<span class="confirm-value">${item.name || ''}</span>
|
||||
</div>
|
||||
<div class="confirm-item-row">
|
||||
<span class="confirm-label">规格:</span>
|
||||
<span class="confirm-value">${item.model || ''}</span>
|
||||
</div>
|
||||
<div class="confirm-item-row">
|
||||
<span class="confirm-label">需用量:</span>
|
||||
<span class="confirm-value highlight">${item.needNum || 0}</span>
|
||||
<span class="confirm-label">使用天数:</span>
|
||||
<span class="confirm-value highlight">${item.backDate || 0}</span>
|
||||
</div>
|
||||
${item.carSpec ? `
|
||||
<div class="confirm-item-row">
|
||||
<span class="confirm-label">所需规格:</span>
|
||||
<span class="confirm-value">${item.carSpec}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
${item.remark ? `
|
||||
<div class="confirm-item-row">
|
||||
<span class="confirm-label">备注:</span>
|
||||
<span class="confirm-value">${item.remark}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
confirmHtml += `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 1,
|
||||
area: ['90%', '70%'],
|
||||
shadeClose: false,
|
||||
content: confirmHtml,
|
||||
btn: ['确认添加', '取消'],
|
||||
btnAlign: 'c',
|
||||
yes: function (index) {
|
||||
layer.close(index);
|
||||
// 确认后保存数据
|
||||
const dataToSave = selectedItems.map(item => ({
|
||||
id: item.id,
|
||||
type: item.type || typeParam,
|
||||
name: item.name,
|
||||
model: item.model,
|
||||
unit: item.unit,
|
||||
needNum: item.needNum,
|
||||
backDate: item.backDate || 0,
|
||||
carSpec: item.carSpec || '',
|
||||
remark: item.remark || ''
|
||||
}));
|
||||
sessionStorage.setItem('selectedTypeData', JSON.stringify(dataToSave));
|
||||
// 返回上一页
|
||||
window.history.back();
|
||||
},
|
||||
btn2: function (index) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭页面
|
||||
function closePage() {
|
||||
// window.history.back();
|
||||
window.location.href = 'http://192.168.2.140:5500/page/car_demand_plan/H5/demand_plan_apply/index.html';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>车辆需求计划申请</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../lib/layui-v2.9.18/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../../css/font.css" media="all">
|
||||
<link rel="stylesheet" href="../../../../css/car_demand_plan/H5/demand_plan_apply.css" media="all">
|
||||
<link rel="stylesheet" href="../../../../css/car_demand_plan/H5/select_type.css" media="all">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="h5-header">
|
||||
<div class="header-content">
|
||||
<i class="layui-icon layui-icon-setting"></i>
|
||||
<span class="header-title">贵送机具管理系统</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h5-container">
|
||||
<!-- 表单卡片 -->
|
||||
<div class="form-card">
|
||||
<div class="card-header">
|
||||
<i class="layui-icon layui-icon-file"></i>
|
||||
<span class="card-title">车辆需求计划申请</span>
|
||||
<!-- <button class="return-btn" onclick="closePage()">
|
||||
<i class="layui-icon layui-icon-left"></i>
|
||||
<span>返回</span>
|
||||
</button> -->
|
||||
</div>
|
||||
|
||||
<form class="layui-form" id="applyForm">
|
||||
<!-- 计划类型 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">计划类型</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" lay-filter="type" name="type" value="1" title="运输车辆" checked>
|
||||
<input type="radio" lay-filter="type" name="type" value="2" title="吊车">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请工程 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">申请工程</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="proId" id="proId" lay-verify="required" lay-search>
|
||||
<option value="">选择工程</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 需用日期 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">需用日期</label>
|
||||
<div class="layui-input-block">
|
||||
<input class="layui-input" id="needTime" autocomplete="off" name="needTime"
|
||||
lay-verify="required" readonly placeholder="选择日期">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目部分 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">项目部分</label>
|
||||
<div class="layui-input-block">
|
||||
<input class="layui-input" name="projectPart" id="projectPart" autocomplete="off"
|
||||
lay-verify="required" maxlength="50" placeholder="输入内容">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 计划说明 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label required">计划说明</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入" lay-verify="required" id="remark" name="remark"
|
||||
class="layui-textarea" maxLength="500" lay-affix="clear"></textarea>
|
||||
<div class="char-count"><span id="charCount">0</span>/500</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预计运输物品质量 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">预计运输物品质量</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="input-with-unit">
|
||||
<input class="layui-input" name="carWeight" id="carWeight" autocomplete="off" maxlength="50"
|
||||
type="number" placeholder="输入内容">
|
||||
<span class="unit">吨</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运输起点 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">运输起点</label>
|
||||
<div class="layui-input-block">
|
||||
<input class="layui-input" name="carStart" id="carStart" autocomplete="off" maxlength="50"
|
||||
placeholder="输入内容">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 运输终点 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">运输终点</label>
|
||||
<div class="layui-input-block">
|
||||
<input class="layui-input" name="carEnd" id="carEnd" autocomplete="off" maxlength="50"
|
||||
placeholder="输入内容">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 途经点 -->
|
||||
<div class="layui-form-item" id="tjd">
|
||||
<label class="layui-form-label">途经点</label>
|
||||
<div class="layui-input-block">
|
||||
<input class="layui-input" name="routePoint" autocomplete="off" maxlength="30"
|
||||
placeholder="输入内容">
|
||||
</div>
|
||||
</div>
|
||||
<div class="route-point-tip">
|
||||
<p>多个途径点请点击继续,最多10个</p>
|
||||
<div class="add-route-btn" onclick="addTjd()">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
<span>添加途径点</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传附件 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上传附件</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-area">
|
||||
<div class="layui-upload-list uploader-list" id="uploader-list"></div>
|
||||
<div class="upload-btn-wrapper">
|
||||
<input type="file" id="fileInput" multiple
|
||||
accept="image/jpg,image/png,image/jpeg,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
|
||||
<div class="upload-btn">
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-tip">
|
||||
<p>请上传运输起始点高德地图截图</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="formSubmit" class="layui-btn" lay-submit="" lay-filter="formData"
|
||||
style="display: none;"></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 申请明细卡片 -->
|
||||
<div class="form-card">
|
||||
<div class="card-header">
|
||||
<i class="layui-icon layui-icon-file"></i>
|
||||
<span class="card-title">申请明细</span>
|
||||
</div>
|
||||
<!-- 无数据时-展示 -->
|
||||
<div id="no_data_title" class="no-data-container">
|
||||
<p class="no-data-text">您还没选择需用车辆吊车类型</p>
|
||||
<p class="no-data-tip">请先添加机具类型后再执申请操作</p>
|
||||
<button class="layui-btn layui-bg-blue" onclick="chooseFitType()">
|
||||
<i class="layui-icon layui-icon-list"></i>
|
||||
<span>选择类型</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 有数据时-展示 -->
|
||||
<div id="has_data_title" class="has-data-container" style="display: none;">
|
||||
<div class="selected-info">
|
||||
<i class="layui-icon layui-icon-ok-circle" style="color: #5FB878; font-size: 20px;"></i>
|
||||
<span class="selected-count-text">已选择 <span id="selectedCountDisplay">0</span> 项</span>
|
||||
</div>
|
||||
<button class="layui-btn layui-bg-blue" onclick="chooseFitType()">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
<span>重新选择</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- 选择类型页面（内嵌，默认隐藏） -->
|
||||
<div id="selectTypePage" class="select-type-page" style="display: none;">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="h5-header">
|
||||
<div class="header-left">
|
||||
<i class="layui-icon layui-icon-setting"></i>
|
||||
<span class="header-title">贵送机具管理系统</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="selected-count">已选: <span id="selectedNum">0</span></span>
|
||||
<button class="return-btn" onclick="closeSelectTypePage()">
|
||||
<i class="layui-icon layui-icon-left"></i>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h5-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-title">
|
||||
<i class="layui-icon layui-icon-file"></i>
|
||||
<span>选择需求计划运输车辆、吊车类型</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-card">
|
||||
<div class="search-form">
|
||||
<div class="search-inputs">
|
||||
<input type="text" name="selectName" id="selectName" autocomplete="off" class="layui-input"
|
||||
lay-affix="clear" placeholder="输入名称" maxlength="30">
|
||||
<input type="text" name="selectModel" id="selectModel" autocomplete="off" class="layui-input"
|
||||
lay-affix="clear" placeholder="输入规格" maxlength="30">
|
||||
</div>
|
||||
<div class="search-btns">
|
||||
<button class="layui-btn layui-btn-primary" onclick="querySelectTable(2)">
|
||||
<i class="layui-icon layui-icon-refresh"></i> 重置
|
||||
</button>
|
||||
<button class="layui-btn layui-bg-blue" onclick="querySelectTable(1)">
|
||||
<i class="layui-icon layui-icon-search"></i> 查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<div class="list-container" id="selectListContainer">
|
||||
<!-- 列表项将通过JS动态生成 -->
|
||||
</div>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-box" id="selectPaginationBox" style="display: none;">
|
||||
<button class="layui-btn layui-btn-primary" id="selectPrevPage" onclick="selectPrevPage()">上一页</button>
|
||||
<span class="page-info" id="selectPageInfo">1/1</span>
|
||||
<button class="layui-btn layui-btn-primary" id="selectNextPage" onclick="selectNextPage()">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="btn-box">
|
||||
<button class="layui-btn layui-btn-primary cancel" onclick="closeSelectTypePage()">取消</button>
|
||||
<button class="layui-btn layui-bg-blue confirm" onclick="confirmSelectType()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 固定在底部的提交按钮 -->
|
||||
<div class="fixed-submit-btn">
|
||||
<button class="layui-btn layui-bg-blue submit-btn-full" onclick="submitApply()">
|
||||
<i class="layui-icon layui-icon-submit"></i>
|
||||
<span>确认提交</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script src="../../../../lib/jquery-3.4.1/jquery-3.7.1.min.js" charset="utf-8"></script>
|
||||
<script src="../../../../js/public.js" charset="utf-8"></script>
|
||||
<script src="../../../../lib/layui-v2.9.18/layui/layui.js" charset="utf-8"></script>
|
||||
<script src="../../../../js/car_demand_plan/H5/demand_plan_apply..js" charset="utf-8"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>选择需求计划运输车辆、吊车类型</title>
|
||||
<link rel="stylesheet" href="../../../../lib/layui-v2.9.18/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="../../../../css/font.css" media="all">
|
||||
<link rel="stylesheet" href="../../../../css/car_demand_plan/H5/select_type.css" media="all">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="h5-header">
|
||||
<div class="header-left">
|
||||
<i class="layui-icon layui-icon-setting"></i>
|
||||
<span class="header-title">贵送机具管理系统</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="selected-count">已选: <span id="selectedNum">0</span></span>
|
||||
<button class="return-btn" onclick="closePage()">
|
||||
<i class="layui-icon layui-icon-left"></i>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h5-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-title">
|
||||
<i class="layui-icon layui-icon-file"></i>
|
||||
<span>选择需求计划运输车辆、吊车类型</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-card">
|
||||
<div class="search-form">
|
||||
<div class="search-inputs">
|
||||
<input type="text" name="name" id="name" autocomplete="off" class="layui-input" lay-affix="clear"
|
||||
placeholder="输入名称" maxlength="30">
|
||||
<input type="text" name="model" id="model" autocomplete="off" class="layui-input" lay-affix="clear"
|
||||
placeholder="输入规格" maxlength="30">
|
||||
</div>
|
||||
<div class="search-btns">
|
||||
<button class="layui-btn layui-btn-primary" onclick="queryTable(2)">
|
||||
<i class="layui-icon layui-icon-refresh"></i> 重置
|
||||
</button>
|
||||
<button class="layui-btn layui-bg-blue" onclick="queryTable(1)">
|
||||
<i class="layui-icon layui-icon-search"></i> 查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<div class="list-container" id="listContainer">
|
||||
<!-- 列表项将通过JS动态生成 -->
|
||||
</div>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<div class="pagination-box" id="paginationBox" style="display: none;">
|
||||
<button class="layui-btn layui-btn-primary" id="prevPage" onclick="prevPage()">上一页</button>
|
||||
<span class="page-info" id="pageInfo">1/1</span>
|
||||
<button class="layui-btn layui-btn-primary" id="nextPage" onclick="nextPage()">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="btn-box">
|
||||
<button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
|
||||
<button class="layui-btn layui-bg-blue confirm" onclick="saveData2()">确认</button>
|
||||
</div>
|
||||
|
||||
<script src="../../../../lib/jquery-3.4.1/jquery-3.7.1.min.js" charset="utf-8"></script>
|
||||
<script src="../../../../js/public.js" charset="utf-8"></script>
|
||||
<script src="../../../../lib/layui-v2.9.18/layui/layui.js" charset="utf-8"></script>
|
||||
<script src="../../../../js/car_demand_plan/H5/select_type.js" charset="utf-8"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 830 B |
Binary file not shown.
|
After Width: | Height: | Size: 681 B |
Binary file not shown.
|
After Width: | Height: | Size: 744 B |
Loading…
Reference in New Issue