447 lines
16 KiB
HTML
447 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>立项申请 - OA系统</title>
|
||
<!-- Element UI CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 统一布局样式 -->
|
||
<link rel="stylesheet" href="unified-layout.css">
|
||
<!-- 美化样式 -->
|
||
<link rel="stylesheet" href="enhanced-styles.css">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||
background: #f0f2f5;
|
||
overflow: hidden;
|
||
}
|
||
.layout-container {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.navbar {
|
||
height: 50px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||
}
|
||
.navbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.logo {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #409EFF;
|
||
}
|
||
.nav-menu {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.nav-item {
|
||
padding: 8px 16px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: background 0.3s;
|
||
}
|
||
.nav-item:hover {
|
||
background: #ecf5ff;
|
||
color: #409EFF;
|
||
}
|
||
.nav-item.active {
|
||
background: #409EFF;
|
||
}
|
||
.navbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.main-container {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.app-main {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f0f2f5;
|
||
}
|
||
.sidebar {
|
||
width: 210px;
|
||
background: #fff;
|
||
border-right: 1px solid #e6e6e6;
|
||
overflow-y: auto;
|
||
}
|
||
.el-menu {
|
||
border-right: none;
|
||
}
|
||
.menu-item {
|
||
padding: 12px 24px;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #303133;
|
||
}
|
||
.menu-item:hover {
|
||
background: #ecf5ff;
|
||
color: #409EFF;
|
||
}
|
||
.menu-item.active {
|
||
background: #409EFF;
|
||
color: #fff;
|
||
}
|
||
.content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
margin: 10px;
|
||
border-radius: 4px;
|
||
}
|
||
.page-header {
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.page-title {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
.page-desc {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
.form-card {
|
||
background: white;
|
||
border-radius: 4px;
|
||
padding: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.form-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
.form-section-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.form-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-item {
|
||
flex: 1;
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.form-label .required {
|
||
color: #ff4d4f;
|
||
margin-right: 4px;
|
||
}
|
||
.form-input,
|
||
.form-select {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
.form-input:focus,
|
||
.form-select:focus {
|
||
outline: none;
|
||
border-color: #409EFF;
|
||
}
|
||
.form-textarea {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
min-height: 100px;
|
||
resize: vertical;
|
||
}
|
||
.upload-area {
|
||
border: 2px dashed #d9d9d9;
|
||
border-radius: 4px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: border-color 0.3s;
|
||
}
|
||
.upload-area:hover {
|
||
border-color: #409EFF;
|
||
}
|
||
.file-list {
|
||
margin-top: 16px;
|
||
}
|
||
.file-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
background: #f5f5f5;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.file-name {
|
||
flex: 1;
|
||
color: #333;
|
||
}
|
||
.file-size {
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin: 0 12px;
|
||
}
|
||
.btn-remove {
|
||
color: #ff4d4f;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
margin-top: 24px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
.btn {
|
||
padding: 8px 24px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn-primary {
|
||
background: #409EFF;
|
||
color: white;
|
||
}
|
||
.btn-primary:hover {
|
||
background: #66b1ff;
|
||
}
|
||
.btn-default {
|
||
background: white;
|
||
color: #333;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
.btn-default:hover {
|
||
border-color: #409EFF;
|
||
color: #409EFF;
|
||
}
|
||
</style>
|
||
<!-- Vue.js -->
|
||
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
|
||
<!-- Element UI JS -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
|
||
<div class="layout-container">
|
||
<div class="navbar"></div>
|
||
|
||
<div class="main-container">
|
||
<div class="sidebar">
|
||
<div class="menu-item active" onclick="window.location.href='project-initiation.html'">立项申请</div>
|
||
<div class="menu-item" onclick="window.location.href='project-list.html'">项目查询</div>
|
||
<div class="menu-item" onclick="window.location.href='project-approval.html'">审核管理</div>
|
||
<div class="menu-item" onclick="window.location.href='project-bidding.html'">投标管理</div>
|
||
<div class="menu-item" onclick="window.location.href='project-contract.html'">合同管理</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="page-header">
|
||
<div class="page-title">项目立项申请</div>
|
||
<div class="page-desc">填写项目基本信息，提交后由经营管理部及总经理依次审核</div>
|
||
</div>
|
||
|
||
<div class="form-card">
|
||
<form id="initiationForm">
|
||
<div class="form-section">
|
||
<div class="form-section-title">基本信息</div>
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>项目编号
|
||
</label>
|
||
<input type="text" class="form-input" value="25-1" readonly>
|
||
<div style="font-size: 12px; color: #999; margin-top: 4px;">自动生成：年份+序号</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>项目名称
|
||
</label>
|
||
<input type="text" class="form-input" placeholder="请输入项目名称" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>客户名称
|
||
</label>
|
||
<input type="text" class="form-input" placeholder="请输入客户名称" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>服务内容
|
||
</label>
|
||
<select class="form-select" required>
|
||
<option value="">请选择服务内容</option>
|
||
<option value="1">结算审计、概算编制及审核、清单控制价编制及审核</option>
|
||
<option value="2">工程咨询</option>
|
||
<option value="3">跟踪审计</option>
|
||
<option value="4">项目管理</option>
|
||
<option value="5">工程监理</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">
|
||
<span class="required">*</span>预计金额（元）
|
||
</label>
|
||
<input type="number" class="form-input" placeholder="请输入预计金额" required>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">联系人</label>
|
||
<input type="text" class="form-input" placeholder="请输入联系人">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">联系电话</label>
|
||
<input type="tel" class="form-input" placeholder="请输入联系电话">
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">预计完成时间</label>
|
||
<input type="date" class="form-input">
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<label class="form-label">项目描述</label>
|
||
<textarea class="form-textarea" placeholder="请输入项目描述"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="form-section-title">附件上传</div>
|
||
<div class="upload-area" onclick="document.getElementById('fileInput').click()">
|
||
<div style="font-size: 48px; margin-bottom: 8px;">📎</div>
|
||
<div style="color: #666;">点击上传或拖拽文件到此处</div>
|
||
<div style="font-size: 12px; color: #999; margin-top: 8px;">支持PDF、Word、Excel等格式，单个文件不超过50MB</div>
|
||
<input type="file" id="fileInput" multiple style="display: none;" onchange="handleFileSelect(event)">
|
||
</div>
|
||
<div class="file-list" id="fileList"></div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-default" onclick="resetForm()">重置</button>
|
||
<button type="button" class="btn btn-default" onclick="saveDraft()">保存草稿</button>
|
||
<button type="submit" class="btn btn-primary">提交审核</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const selectedFiles = [];
|
||
|
||
function handleFileSelect(event) {
|
||
const files = Array.from(event.target.files);
|
||
files.forEach(file => {
|
||
if (file.size > 50 * 1024 * 1024) {
|
||
CommonUtils.showMessage('文件大小不能超过50MB：' + file.name, 'error');
|
||
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 = `
|
||
<span class="file-name">${file.name}</span>
|
||
<span class="file-size">${formatFileSize(file.size)}</span>
|
||
<span class="btn-remove" onclick="removeFile('${file.name}')">删除</span>
|
||
`;
|
||
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 resetForm() {
|
||
CommonUtils.confirm('确认重置表单？', () => {
|
||
document.getElementById('initiationForm').reset();
|
||
selectedFiles.length = 0;
|
||
document.getElementById('fileList').innerHTML = '';
|
||
});
|
||
}
|
||
|
||
function saveDraft() {
|
||
CommonUtils.showMessage('草稿已保存');
|
||
}
|
||
|
||
document.getElementById('initiationForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
CommonUtils.confirm('确认提交立项申请？提交后将进入审核流程。', () => {
|
||
CommonUtils.showMessage('提交成功！等待审核');
|
||
setTimeout(() => {
|
||
window.location.href = 'project-list.html';
|
||
}, 1000);
|
||
});
|
||
});
|
||
</script>
|
||
<script src="common.js"></script>
|
||
<script src="unified-layout.js"></script>
|
||
<script>
|
||
initUnifiedLayout('project');
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|