Skip to content

P
pica-admin-IM
提交 2c9eca17 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

新增项目管理测试页面

上级 86d55313
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 487 行增加 和 91 行删除
.vscode/settings.json
浏览文件 @ 2c9eca17
{ {
"editor.fontSize": 18 "editor.fontSize": 15
} }
\ No newline at end of file
package-lock.json
浏览文件 @ 2c9eca17
此差异已折叠。
src/router/router.js
浏览文件 @ 2c9eca17
import App from '../App' import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'index') const index = r => require.ensure([], () => r(require('../views/index')), 'index')
const projectManage = r => require.ensure([], () => r(require('../views/projectManage')), 'projectManage')
const addProject = r => require.ensure([], () => r(require('../views/addProject')), 'addProject')
export default [{ export default [{
path: '/', path: '/',
component: App, component: App,
...@@ -17,6 +18,14 @@ export default [{ ...@@ -17,6 +18,14 @@ export default [{
{ {
path: '/home', path: '/home',
component: index component: index
},
{
path: '/project-manage',
component: projectManage
},
{
path: '/add-project',
component: addProject
} }
] ]
}] }]
src/style/common.scss
浏览文件 @ 2c9eca17
...@@ -5,14 +5,14 @@ img { ...@@ -5,14 +5,14 @@ img {
user-select: none; user-select: none;
} }
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, { body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
font-style: normal; font-style: normal;
text-decoration: none; text-decoration: none;
border: none; border: none;
color: #333; // color: #333;
font-weight: normal; font-weight: normal;
font-family: "PingFangSC", "Microsoft Yahei"; font-family: "PingFangSC", "Microsoft Yahei";
box-sizing: border-box; box-sizing: border-box;
......
src/views/addProject.vue 0 → 100644
浏览文件 @ 2c9eca17
<template>
<el-container style="height: 100%; border: 1px solid #eee">
<v-header></v-header>
<v-slidebar></v-slidebar>
<div class="main-container">
<el-main>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="基础信息"></el-step>
<el-step title="选择范围"></el-step>
<el-step title="选择项目组件"></el-step>
</el-steps>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="项目名称：">
<el-input v-model="formInline.name" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="项目时间：">
<el-date-picker
v-model="formInline.date"
type="daterange"
unlink-panels
range-separator="~"
start-placeholder="请选择开始时间"
end-placeholder="请选择结束时间"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd hh:mm:ss"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" plain>重置</el-button>
</el-form-item>
</el-form>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="发布状态：">
<el-select v-model="formInline.type" placeholder="请选择发布状态">
<el-option label="状态1" value="shanghai"></el-option>
<el-option label="状态2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form :model="formInline" class="demo-form-inline">
<el-form-item>
<el-button type="primary">新建项目</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" :header-cell-style="{background:'#FAFAFA',color:'#000'}">
<el-table-column prop="id" label="ID编号" width="140"></el-table-column>
<el-table-column prop="projectName" label="项目名称" width="120"></el-table-column>
<el-table-column prop="createName" label="创建人"></el-table-column>
<el-table-column prop="projectBrief" label="项目简介"></el-table-column>
<el-table-column prop="address" label="所属地区"></el-table-column>
<el-table-column prop="startTime" label="项目开始时间"></el-table-column>
<el-table-column prop="endTime" label="项目结束时间"></el-table-column>
<el-table-column prop="state" label="状态"></el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button class="title" type="text" size="small">编辑</el-button>
<el-button class="title" type="text" size="small">发布</el-button>
<el-button class="title" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
></el-pagination>
</el-main>
</div>
</el-container>
</template>
<script>
import VHeader from "./layout/header.vue";
import VSlidebar from "./layout/slidebar.vue";
export default {
components: {
VHeader,
VSlidebar
},
data() {
const item = {
id: "298490",
projectName: "浙江省防控中心指空中...",
createName: "李雷",
projectBrief: "显示项目简介简介",
address: "浙江省",
startTime: "2018-12-15 15:39:23",
endTime: "2018-12-15 15:39:23",
state: "草稿"
};
// form = {
// name: '',
// };
return {
tableData: Array(10).fill(item),
timingTime: "",
currentPage: 1,
formInline: {
name: "",
date: "",
type: ""
},
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
}
};
}
};
</script>
<style>
.label-row {
padding-top: 10px;
}
.main-container {
width: 100%;
margin-left: 200px;
margin-top: 80px;
}
.title {
color: #409eff;
}
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.table-option span {
color: #409eff;
}
.el-form-item__content {
float: right;
}
/* .el-table tr>.el-table_1_column_2 .cell {
color: #409eff
} */
.el-table .cell {
color: #929292;
}
.el-table th > .cell {
font-weight: bold;
color: #000;
}
</style>
\ No newline at end of file
src/views/projectManage.vue 0 → 100644
浏览文件 @ 2c9eca17
<template>
<el-container style="height: 100%; border: 1px solid #eee">
<v-header></v-header>
<v-slidebar></v-slidebar>
<div class="main-container">
<el-main>
<el-header
style="text-align: left; font-size: 12px; background-color:#fff; border-bottom: 1px solid #fff;"
>
<h3 class="title">项目管理</h3>
</el-header>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="项目名称：">
<el-input v-model="formInline.name" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="项目时间：">
<el-date-picker
v-model="formInline.date"
type="daterange"
unlink-panels
range-separator="~"
start-placeholder="请选择开始时间"
end-placeholder="请选择结束时间"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd hh:mm:ss"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" plain>重置</el-button>
</el-form-item>
</el-form>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="发布状态：">
<el-select v-model="formInline.type" placeholder="请选择发布状态">
<el-option label="状态1" value="shanghai"></el-option>
<el-option label="状态2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-form :model="formInline" class="demo-form-inline">
<el-form-item>
<el-button type="primary">新建项目</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" :header-cell-style="{background:'#FAFAFA',color:'#000'}">
<el-table-column prop="id" label="ID编号" width="140"></el-table-column>
<el-table-column prop="projectName" label="项目名称" width="120"></el-table-column>
<el-table-column prop="createName" label="创建人"></el-table-column>
<el-table-column prop="projectBrief" label="项目简介"></el-table-column>
<el-table-column prop="address" label="所属地区"></el-table-column>
<el-table-column prop="startTime" label="项目开始时间"></el-table-column>
<el-table-column prop="endTime" label="项目结束时间"></el-table-column>
<el-table-column prop="state" label="状态"></el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button class="title" type="text" size="small">编辑</el-button>
<el-button class="title" type="text" size="small">发布</el-button>
<el-button class="title" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
></el-pagination>
</el-main>
</div>
</el-container>
</template>
<script>
import VHeader from "./layout/header.vue";
import VSlidebar from "./layout/slidebar.vue";
import { create } from "domain";
export default {
components: {
VHeader,
VSlidebar
},
data() {
const item = {
id: "298490",
projectName: "浙江省防控中心指空中...",
createName: "李雷",
projectBrief: "显示项目简介简介",
address: "浙江省",
startTime: "2018-12-15 15:39:23",
endTime: "2018-12-15 15:39:23",
state: "草稿"
};
// form = {
// name: '',
// };
return {
tableData: Array(10).fill(item),
timingTime: "",
currentPage: 1,
formInline: {
name: "",
date: "",
type: ""
},
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
}
};
},
create() {},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.handleCurrentChange(this.currentPage);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
//需要判断是否检索
if (!this.flag) {
this.currentChangePage(this.tableDataEnd);
} else {
this.currentChangePage(this.filterTableDataEnd);
}
}, //组件自带监控当前页码
currentChangePage(list) {
let from = (this.currentPage - 1) * this.pageSize;
let to = this.currentPage * this.pageSize;
this.tableDataEnd = [];
for (; from < to; from++) {
if (list[from]) {
this.tableDataEnd.push(list[from]);
}
}
}
}
};
</script>
<style>
.label-row {
padding-top: 10px;
}
.main-container {
width: 100%;
margin-left: 200px;
margin-top: 80px;
}
.title {
color: #409eff;
}
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.table-option span {
color: #409eff;
}
.el-form-item__content {
float: right;
}
/* .el-table tr>.el-table_1_column_2 .cell {
color: #409eff
} */
.el-table .cell {
color: #929292;
}
.el-table th > .cell {
font-weight: bold;
color: #000;
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或