明树Git Lab

Commit 9d98e887 authored by yangyajing's avatar yangyajing

项目管理页面开发

parent 912d46dc
Pipeline #103863 passed with stage
in 11 seconds
import axios from "axios";
import { ElMessage } from "element-plus";
axios.interceptors.request.use(function (config) {
let token = "8681f75e775447f7903708c55a35634e";
if (token) {
config.headers.Authorization = token;
}
return config;
}, (err) => {
return Promise.reject(err);
});
axios.interceptors.response.use(response => {
return response.data;
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 401:
err.msg = "请先登录";
break;
}
} else {
err.msg = "网络连接错误";
}
return Promise.reject(err);
});
let baseUrl = "http://10.40.8.9:3000"
export function $get ({ url, params = {}, callback }) {
return axios({
method: "get",
url: baseUrl + url,
params
}).then(response => {
callback && callback(response.data);
return response;
}).catch((err) => {
ElMessage.error(err);
});
};
export function $post ({ url, data = {}, callback }) {
return axios.post(baseUrl + url, data).then((response) => {
if (response.code === 0) {
callback && callback(response.data);
} else {
ElMessage.error(response.message);
}
return response;
}).catch((err) => {
console.log(err);
ElMessage.error(err.msg || "操作失败");
if (err && err.response && err.response.status === 401) {
store.commit("clearUserInfo");
router.replace("/login");
}
});
};
...@@ -72,7 +72,7 @@ const router = useRouter(); ...@@ -72,7 +72,7 @@ const router = useRouter();
// 计算菜单路由 // 计算菜单路由
const menuRoutes = computed(() => { const menuRoutes = computed(() => {
const mainRoute = router.options.routes.find((route) => route.path === "/"); const mainRoute = router.options.routes.find((route) => route.path === "/");
return mainRoute?.children || []; return mainRoute?.children && mainRoute?.children.filter(route => !route.meta || route.meta.showInMenu !== false ) || [];
}); });
// 处理退出登录 // 处理退出登录
...@@ -92,6 +92,10 @@ const handleLogout = () => { ...@@ -92,6 +92,10 @@ const handleLogout = () => {
} }
/* 选中菜单项样式 */ /* 选中菜单项样式 */
.el-menu-item{
color: #666;
background-color: #fff;
}
.el-menu-item.is-active { .el-menu-item.is-active {
background-color: #ecf3fd; background-color: #ecf3fd;
color: #3d84ee; color: #3d84ee;
......
...@@ -7,8 +7,11 @@ import * as ElIcons from '@element-plus/icons' ...@@ -7,8 +7,11 @@ import * as ElIcons from '@element-plus/icons'
import router from './router' import router from './router'
import "./assets/fonts/font.less"; // 字体样式 import "./assets/fonts/font.less"; // 字体样式
import "../public/iconFont/iconfont.css"; // 图标字体样式 import "../public/iconFont/iconfont.css"; // 图标字体样式
import { $get, $post } from "@/data/https.js";
const app = createApp(App) const app = createApp(App)
app.config.globalProperties.$get = $get;
app.config.globalProperties.$post = $post;
for (const [key, component] of Object.entries(ElIcons)) { for (const [key, component] of Object.entries(ElIcons)) {
app.component(key, component) app.component(key, component)
} }
......
...@@ -22,6 +22,23 @@ const routes = [ ...@@ -22,6 +22,23 @@ const routes = [
component: () => import('@/views/homePage/index.vue'), component: () => import('@/views/homePage/index.vue'),
meta: { menuName: '数据大屏', icon: 'home' } meta: { menuName: '数据大屏', icon: 'home' }
}, },
{
path: '/projectManage',
name: '项目管理',
title: 'projectManage',
component: () => import('@/views/managePage/projectManage.vue'),
meta: { menuName: '项目管理', icon: 'Management' }
},
{
path: '/addProject',
name: '新增项目',
title: 'addProject',
component: () => import('@/views/managePage/addProject.vue'),
meta: {
menuName: '新增项目',
showInMenu: false // 不在菜单中显示
}
}
] ]
} }
] ]
......
<template>
<div class="add-project-container">
<div class="add-project-header">
<div class="header-left"></div>
<div class="header-right">
<el-button type="default" @click="backClick">返回</el-button>
<el-button type="primary" @click="saveClick">保存</el-button>
</div>
</div>
<div class="add-project-content">
<el-tabs v-model="tabActiveName">
<el-tab-pane label="项目基本信息" name="项目基本信息">
<div class="tab-content">
<el-form :model="formData" :label-width="190">
<el-collapse v-model="activeCollapse">
<el-collapse-item title="项目基本信息" name="项目基本信息">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称">
<el-input v-model="formData.projectName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目编号">
<el-input v-model="formData.projectCode" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否再决策">
<el-radio-group v-model="formData.sfzjc">
<el-radio value="1"></el-radio>
<el-radio value="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目外文名称">
<el-input v-model="formData.projectForeignName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否能建联合体项目">
<el-radio-group v-model="formData.sfnjlhtxm">
<el-radio value="1"></el-radio>
<el-radio value="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申报单位">
<el-input v-model="formData.applicationUnit" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主业/非主业">
<el-radio-group v-model="formData.zyfzy">
<el-radio value="1"></el-radio>
<el-radio value="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="直属企业">
<el-input v-model="formData.zsqy" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否能建重大或重要投资">
<el-radio-group v-model="formData.sfnjzdhzytz">
<el-radio value="1"></el-radio>
<el-radio value="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否自主决策">
<el-radio-group v-model="formData.sfzzjc">
<el-radio value="1"></el-radio>
<el-radio value="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="财务报表类型">
<el-select v-model="formData.financialStatementType" placeholder="请选择">
<el-option label="1" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="政府审批(核准、备案)级别">
<el-select v-model="formData.zfsphzbajb" placeholder="请选择">
<el-option label="1" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否履行标前预审程序">
<el-radio-group v-model="formData.sflxbqyscx">
<el-radio value="1"></el-radio>
<el-radio value="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="项目所在地" name="项目所在地">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="境内/外">
<el-select v-model="formData.domesticOrOverseas" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="省(境内)/洲际(境外)">
<el-select v-model="formData.sjnzjjw" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="地市(境内)/国家(境外)">
<el-select v-model="formData.cityOrCountry" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区县(境内)/国家(境外)">
<el-select v-model="formData.qxjngjjw" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目区域">
<el-select v-model="formData.xmqy" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否一带一路沿线国家">
<el-select v-model="formData.sfydylyxgj" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="计量币种" name="计量币种">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="币种">
<el-select v-model="formData.bizhong" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="汇率">
<el-input v-model="formData.huilv" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="实施时间" name="实施时间">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="项目建设期">
<el-input
v-model="formData.xmjsqy"
placeholder="请输入"
type="number"
>
<template #append></template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="运营年限">
<el-input
v-model="formData.yynxn"
placeholder="请输入"
type="number"
>
<template #append></template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目合作期">
<el-input
v-model="formData.xmhzqn"
placeholder="请输入"
type="number"
>
<template #append></template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6"></el-col>
<el-col :span="6">
<el-form-item label="项目开工时间(预计)">
<el-date-picker
v-model="formData.xmkgsjyj"
type="date"
placeholder="请选择"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="项目交工时间(预计)">
<el-date-picker
v-model="formData.xmjgsjyj"
type="date"
placeholder="请选择"
/>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="决策及批复信息" name="决策及批复信息">
<div class="tab-content">
<el-form :model="formData" :label-width="190">
<el-collapse v-model="activeCollapse">
<el-collapse-item title="投资分类" name="投资分类">
<el-row :gutter="20">
<el-col :span="6">
<div class="col-title">投资属性分类</div>
<el-form-item label="一级分类">
<el-select v-model="formData.tzsxyjfl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
<el-form-item label="二级分类">
<el-select v-model="formData.tzsxejfl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
<el-form-item label="投资板块">
<el-select v-model="formData.tzbk" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
<el-form-item label="细分板块">
<el-select v-model="formData.subsector" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<div class="col-title">投资目的分类</div>
<el-form-item label="一级分类">
<el-select v-model="formData.tzmdyjfl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
<el-form-item label="二级分类">
<el-select v-model="formData.tzmdejfl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
<el-form-item label="四新分类">
<el-select v-model="formData.sxfl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-row :gutter="20">
<el-col :span="12">
<div class="col-title">投资指南分类</div>
<el-form-item label="一级分类">
<el-select v-model="formData.tzznyjfl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
<el-form-item label="二级分类">
<el-select v-model="formData.tzznejfl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
<el-form-item label="投资指南分类概述">
<el-input v-model="formData.tzznflgs" type="textarea" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="国民经济行业">
<el-select v-model="formData.gmjjhy" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="特别关注、特别监管类等信息" name="特别关注、特别监管类等信息">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="是否需报国家发展改革委和商务部核准">
<el-select v-model="formData.sfxbgjfzggwhswbhz" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否国家领导见签">
<el-select v-model="formData.sfgjldjq" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否境内特别监管类">
<el-select v-model="formData.sfjntbjgl" placeholder="请选择">
<el-option label="1" value="1" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="项目公司落实批复信息" name="项目公司落实批复信息">
<div class="tab-content">
<el-collapse v-model="activeCollapse">
<el-collapse-item title="建设规模(实物量指标)" name="建设规模(实物量指标)">
<div class="tab-handle">
<el-button type="primary" size="small" @click="addSwlzb">新增</el-button>
</div>
<el-table :data="swlzbData" style="width: 100%" empty-text="暂无数据">
<el-table-column type="index" width="50" />
<el-table-column prop="name" label="指标名称">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="count" label="数量">
<template #default="scope">
<el-input v-model="scope.row.count" type="number" />
</template>
</el-table-column>
<el-table-column prop="unit" label="单位">
<template #default="scope">
<el-input v-model="scope.row.unit" />
</template>
</el-table-column>
<el-table-column prop="mark" label="补充说明">
<template #default="scope">
<el-input v-model="scope.row.mark" type="textarea" />
</template>
</el-table-column>
<el-table-column label="操作" width="90">
<template #default="scope">
<el-button link type="danger" size="small" @click="deleteSwlzb(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<el-collapse-item title="股东信息" name="股东信息">
<div class="tab-handle">
<el-button type="primary" size="small" @click="addGdxx">新增</el-button>
</div>
<el-table :data="gdxxData" style="width: 100%" empty-text="暂无数据">
<el-table-column type="index" width="50" />
<el-table-column prop="type" label="股东类型">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="请选择">
<el-option label="1" value="1"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="name" label="股东名称">
<template #default="scope">
<el-select v-model="scope.row.name" placeholder="请选择">
<el-option label="1" value="1"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="percent" label="持股比例(%)">
<template #default="scope">
<el-input v-model="scope.row.percent" type="number" />
</template>
</el-table-column>
<el-table-column prop="cze" label="出资额(万元)">
<template #default="scope">
<el-input v-model="scope.row.cze" type="number" />
</template>
</el-table-column>
<el-table-column prop="yjzczb" label="应缴注册资本(万元)">
<template #default="scope">
<el-input v-model="scope.row.yjzczb" type="number" />
</template>
</el-table-column>
<el-table-column prop="ycxmzbj" label="应出项目资本金(万元)">
<template #default="scope">
<el-input v-model="scope.row.ycxmzbj" type="number" />
</template>
</el-table-column>
<el-table-column prop="hzfqk" label="合作方情况">
<template #default="scope">
<el-input v-model="scope.row.hzfqk" />
</template>
</el-table-column>
<el-table-column prop="mark" label="备注">
<template #default="scope">
<el-input v-model="scope.row.mark" />
</template>
</el-table-column>
<el-table-column label="操作" width="90">
<template #default="scope">
<el-button link type="danger" size="small" @click="deleteGdxx(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<el-collapse-item title="项目必要性及可行性" name="项目必要性及可行性">
<el-form :model="formData" :label-width="150">
<el-form-item label="建设内容及规模">
<el-input v-model="formData.jsnrjgm" type="textarea" />
</el-form-item>
<el-form-item label="项目必要性">
<el-input v-model="formData.xmbyx" type="textarea" />
</el-form-item>
<el-form-item label="项目可行性">
<el-input v-model="formData.xmkxx" type="textarea" />
</el-form-item>
<el-form-item label="其他说明">
<el-input v-model="formData.qtsm" type="textarea" />
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
<el-tab-pane label="项目合法合规性附件" name="项目合法合规性附件">
<div class="tab-content">
<el-collapse v-model="activeCollapse">
<el-collapse-item title="立项资料" name="立项资料">
<el-form :model="formData" :label-width="150">
<el-form-item label="相关支撑材料">
<el-upload
v-model:file-list="zcclFileList"
class="upload-demo"
action=""
:show-file-list="false"
>
<el-button type="default">上传</el-button>
</el-upload>
<el-button type="default">删除选中文件</el-button>
</el-form-item>
</el-form>
<el-table :data="zcclData" style="width: 100%" empty-text="暂无数据">
<el-table-column type="selection" width="55" />
<el-table-column prop="fileName" label="文件名" />
<el-table-column prop="fileTime" label="上传时间" />
<el-table-column prop="fileSize" label="大小" />
<el-table-column fixed="right" label="操作" width="90">
<template #default="scope">
<el-button link type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
<el-tab-pane label="全生命周期策划文件" name="全生命周期策划文件">全生命周期策划文件</el-tab-pane>
<el-tab-pane label="项目绩效评价" name="项目绩效评价">项目绩效评价</el-tab-pane>
<el-tab-pane label="目标责任书考核" name="目标责任书考核">目标责任书考核</el-tab-pane>
<el-tab-pane label="后评价" name="后评价">后评价</el-tab-pane>
<el-tab-pane label="重大事项上报" name="重大事项上报">重大事项上报</el-tab-pane>
<el-tab-pane label="投资分析" name="投资分析">投资分析</el-tab-pane>
<el-tab-pane label="投资检查" name="投资检查">投资检查</el-tab-pane>
<el-tab-pane label="投资回收" name="投资回收">投资回收</el-tab-pane>
<el-tab-pane label="管理费上缴" name="管理费上缴">管理费上缴</el-tab-pane>
<el-tab-pane label="PPP整改方案" name="PPP整改方案">PPP整改方案</el-tab-pane>
<el-tab-pane label="项目结束/暂停(备案资料)" name="项目结束/暂停(备案资料)">项目结束/暂停(备案资料)</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
// tab相关
const tabActiveName = ref("项目基本信息");
const activeCollapse = reactive([
"项目基本信息","项目所在地", "计量币种", "实施时间", "投资分类", "特别关注、特别监管类等信息",
"建设规模(实物量指标)", "股东信息", "项目必要性及可行性", "立项资料"
]);
// 获取资源库数据
const getResourceData = () => {
proxy.$post({
url: "/api/resource/listResourceAll",
data: {
page: 1,
pagesize: 1000
},
callback: (data) => {}
});
};
onMounted(() => {
getResourceData();
})
const formData = reactive({});
// 建设规模(实物量指标)
const swlzbData = reactive([]);
const addSwlzb = () => {
swlzbData.push({});
};
const deleteSwlzb = (index) => {
swlzbData.splice(index, 1);
};
// 股东信息
const gdxxData = reactive([]);
const addGdxx = () => {
gdxxData.push({});
};
const deleteGdxx = (index) => {
gdxxData.splice(index, 1);
};
// 支撑材料
const zcclFileList = reactive([]);
const zcclData = reactive([]);
// 返回列表页
const backClick = () => {
router.push("/projectManage");
}
// 保存数据
const saveClick = () => {
proxy.$post({
url: "/api/project/createProject",
data: formData,
callback: (data) => {
router.push("/projectManage");
}
})
};
</script>
<style lang="less">
.add-project{
&-container{
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.el-collapse-item__header{
color: var(--el-color-primary);
}
}
&-header{
margin: 10px 0;
display: flex;
justify-content: space-between;
}
&-content{
flex: 1;
height: 0;
.el-tabs{
height: 100%;
}
.el-tab-pane{
height: 100%;
.tab-content{
height: 100%;
overflow: auto;
padding: 0 10px;
.col-title{
font-weight: bold;
text-align: center;
}
.tab-handle{
display: flex;
justify-content: flex-end;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="project-manage-container">
<div class="project-manage-header">
<div class="header-left"></div>
<div class="header-right">
<el-button type="primary" @click="addProject">新增</el-button>
</div>
</div>
<div class="project-manage-content">
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%"
empty-text="暂无数据" height="100%"
>
<el-table-column type="index" width="50" />
<el-table-column prop="projectName" label="项目名称" />
<el-table-column prop="projectCode" label="项目编号" />
<el-table-column fixed="right" label="操作" min-width="120">
<template #default="scope">
<el-button link type="primary" size="small">查看</el-button>
<el-button link type="primary" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="page-wrap">
<el-pagination background layout="prev, pager, next" :total="1000" />
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const getProjectData = () => {
proxy.$post({
url: "/api/project/listProject",
data: {
page: 1,
pagesize: 10,
attributes: []
},
callback: (data) => {
tableData.value = data.rows;
}
})
};
const addProject = () => {
router.push("/addProject");
};
onMounted(() => {
getProjectData();
})
</script>
<style scoped lang="less">
.project-manage{
&-container{
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.tab-content{
padding: 10px 15px;
}
}
&-header{
display: flex;
justify-content: space-between;
}
&-content{
flex: 1;
height: 0;
display: flex;
flex-direction: column;
.table-wrap{
margin: 15px 0;
flex: 1;
height: 0;
}
.page-wrap{
display: flex;
justify-content: flex-end;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment