418 lines
14 KiB
HTML
418 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>成果提交 - OA系统</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: #f5f5f5;
|
||
max-width: 414px;
|
||
margin: 0 auto;
|
||
min-height: 100vh;
|
||
padding-bottom: 60px;
|
||
}
|
||
.header {
|
||
background: #1890ff;
|
||
color: white;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.header-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
.content {
|
||
padding: 16px;
|
||
background: #ffffff;
|
||
min-height: calc(100vh - 44px - 60px);
|
||
}
|
||
.card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.project-item {
|
||
padding: 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
.project-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.project-item:active {
|
||
background: #f5f5f5;
|
||
}
|
||
.project-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
}
|
||
.project-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
.project-number {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 4px;
|
||
}
|
||
.work-content {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
.work-content-label {
|
||
color: #999;
|
||
margin-right: 8px;
|
||
}
|
||
.btn-submit {
|
||
color: #1890ff;
|
||
font-size: 14px;
|
||
padding: 6px 12px;
|
||
border: 1px solid #1890ff;
|
||
border-radius: 4px;
|
||
background: white;
|
||
cursor: pointer;
|
||
}
|
||
.form-item {
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.form-input,
|
||
.form-select {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.form-input:focus,
|
||
.form-select:focus {
|
||
outline: none;
|
||
border-color: #1890ff;
|
||
}
|
||
.form-textarea {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
min-height: 100px;
|
||
font-family: inherit;
|
||
resize: vertical;
|
||
}
|
||
.file-upload {
|
||
border: 2px dashed #e5e5e5;
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: border-color 0.3s;
|
||
}
|
||
.file-upload:active {
|
||
border-color: #1890ff;
|
||
}
|
||
.file-upload-icon {
|
||
font-size: 32px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.file-upload-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
.file-list {
|
||
margin-top: 12px;
|
||
}
|
||
.file-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
background: #f5f5f5;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.file-name {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
.file-size {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-left: 8px;
|
||
}
|
||
.btn-remove {
|
||
background: #ff4d4f;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 4px 12px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
.btn-submit-form {
|
||
width: 100%;
|
||
padding: 14px;
|
||
background: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
margin-top: 16px;
|
||
}
|
||
.bottom-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
max-width: 414px;
|
||
background: white;
|
||
border-top: 1px solid #e5e5e5;
|
||
display: flex;
|
||
padding: 8px 0;
|
||
z-index: 100;
|
||
}
|
||
.nav-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 8px;
|
||
color: #666;
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
.nav-item.active {
|
||
color: #1890ff;
|
||
}
|
||
.nav-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header-title">成果提交</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="card-title">我的项目</div>
|
||
<div class="project-item" onclick="showOutputForm('25-1')">
|
||
<div class="project-header">
|
||
<div>
|
||
<div class="project-name">XX工程项目</div>
|
||
<div class="project-number">项目编号：25-1</div>
|
||
</div>
|
||
</div>
|
||
<div class="work-content">
|
||
<span class="work-content-label">工作内容：</span>
|
||
<span>文本、估算、出报告</span>
|
||
</div>
|
||
<div style="text-align: right; margin-top: 12px;">
|
||
<button class="btn-submit">提交成果 →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-item" onclick="showOutputForm('25-2')">
|
||
<div class="project-header">
|
||
<div>
|
||
<div class="project-name">YY工程项目</div>
|
||
<div class="project-number">项目编号：25-2</div>
|
||
</div>
|
||
</div>
|
||
<div class="work-content">
|
||
<span class="work-content-label">工作内容：</span>
|
||
<span>跟踪审计</span>
|
||
</div>
|
||
<div style="text-align: right; margin-top: 12px;">
|
||
<button class="btn-submit">提交成果 →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" id="output-form" style="display: none;">
|
||
<div class="card-title">成果提交</div>
|
||
<div class="form-item">
|
||
<label class="form-label">项目编号</label>
|
||
<input type="text" class="form-input" value="25-1" disabled id="projectNo">
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">项目名称</label>
|
||
<input type="text" class="form-input" value="XX工程项目" disabled id="projectName">
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">成果类型 <span style="color: #ff4d4f;">*</span></label>
|
||
<select class="form-select" id="outputType">
|
||
<option value="">请选择成果类型</option>
|
||
<option value="draft">初稿</option>
|
||
<option value="reconciliation">对账</option>
|
||
<option value="final">最终成果</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">成果金额 <span style="color: #ff4d4f;">*</span></label>
|
||
<input type="number" class="form-input" placeholder="请输入成果金额" id="outputAmount">
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">成果附件</label>
|
||
<div class="file-upload" onclick="document.getElementById('fileInput').click()">
|
||
<div class="file-upload-icon">📎</div>
|
||
<div class="file-upload-text">点击上传文件（单文件不超过10MB）</div>
|
||
<input type="file" id="fileInput" style="display: none;" multiple onchange="handleFileSelect(event)">
|
||
</div>
|
||
<div class="file-list" id="fileList"></div>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">完成情况说明</label>
|
||
<textarea class="form-textarea" placeholder="请输入完成情况说明（可选）" id="outputDescription"></textarea>
|
||
</div>
|
||
<button class="btn-submit-form" onclick="submitOutput()">提交审核</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-nav">
|
||
<a href="todo.html" class="nav-item">
|
||
<div class="nav-icon">📋</div>
|
||
<div>待办</div>
|
||
</a>
|
||
<a href="message.html" class="nav-item">
|
||
<div class="nav-icon">🔔</div>
|
||
<div>消息</div>
|
||
</a>
|
||
<a href="project.html" class="nav-item">
|
||
<div class="nav-icon">📁</div>
|
||
<div>项目</div>
|
||
</a>
|
||
<a href="output.html" class="nav-item active">
|
||
<div class="nav-icon">📝</div>
|
||
<div>成果</div>
|
||
</a>
|
||
<a href="profile.html" class="nav-item">
|
||
<div class="nav-icon">👤</div>
|
||
<div>我的</div>
|
||
</a>
|
||
</div>
|
||
|
||
<script>
|
||
const selectedFiles = [];
|
||
|
||
function showOutputForm(projectNo) {
|
||
const form = document.getElementById('output-form');
|
||
form.style.display = 'block';
|
||
form.scrollIntoView({ behavior: 'smooth' });
|
||
|
||
// 根据项目编号设置项目信息
|
||
if (projectNo === '25-1') {
|
||
document.getElementById('projectNo').value = '25-1';
|
||
document.getElementById('projectName').value = 'XX工程项目';
|
||
} else if (projectNo === '25-2') {
|
||
document.getElementById('projectNo').value = '25-2';
|
||
document.getElementById('projectName').value = 'YY工程项目';
|
||
}
|
||
}
|
||
|
||
function handleFileSelect(event) {
|
||
const files = Array.from(event.target.files);
|
||
files.forEach(file => {
|
||
if (file.size > 10 * 1024 * 1024) {
|
||
alert('文件大小不能超过10MB：' + file.name);
|
||
return;
|
||
}
|
||
selectedFiles.push(file);
|
||
addFileToList(file);
|
||
});
|
||
}
|
||
|
||
function addFileToList(file) {
|
||
const fileList = document.getElementById('fileList');
|
||
const fileItem = document.createElement('div');
|
||
fileItem.className = 'file-item';
|
||
fileItem.innerHTML = `
|
||
<div>
|
||
<div class="file-name">${file.name}</div>
|
||
<div class="file-size">${formatFileSize(file.size)}</div>
|
||
</div>
|
||
<button class="btn-remove" onclick="removeFile('${file.name}')">删除</button>
|
||
`;
|
||
fileList.appendChild(fileItem);
|
||
}
|
||
|
||
function removeFile(fileName) {
|
||
const index = selectedFiles.findIndex(f => f.name === fileName);
|
||
if (index > -1) {
|
||
selectedFiles.splice(index, 1);
|
||
}
|
||
event.target.closest('.file-item').remove();
|
||
}
|
||
|
||
function formatFileSize(bytes) {
|
||
if (bytes < 1024) return bytes + ' B';
|
||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
|
||
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
|
||
}
|
||
|
||
function submitOutput() {
|
||
const outputType = document.getElementById('outputType').value;
|
||
const outputAmount = document.getElementById('outputAmount').value;
|
||
|
||
if (!outputType) {
|
||
alert('请选择成果类型');
|
||
return;
|
||
}
|
||
|
||
if (!outputAmount) {
|
||
alert('请输入成果金额');
|
||
return;
|
||
}
|
||
|
||
if (confirm('确认提交成果？')) {
|
||
alert('提交成功！等待审核');
|
||
// 重置表单
|
||
document.getElementById('output-form').style.display = 'none';
|
||
document.getElementById('outputType').value = '';
|
||
document.getElementById('outputAmount').value = '';
|
||
document.getElementById('outputDescription').value = '';
|
||
document.getElementById('fileList').innerHTML = '';
|
||
selectedFiles.length = 0;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|