Skip to content

P
pica.cloud.web-education-admin
提交 09b13fda 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

添加 新建项目页面细节

上级 b1bd7b24
隐藏空白字符变更
内嵌 并排
正在显示 包含 322 行增加 和 59 行删除
src/views/education/add-manager.vue
浏览文件 @ 09b13fda
......@@ -17,45 +17,148 @@
</el-col>
<el-col :span="5" :offset="5">
<el-button>暂存</el-button>
<el-button type="primary" @click="next">下一步</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</el-col>
</el-row>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="项目名称">
<el-col :span="13">
<el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
</el-col>
</el-form-item>
<el-form-item label="项目简介">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item label="项目时间">
<el-col :span="6">
<el-date-picker
type="date"
placeholder="请选择项目时间"
v-model="form.date1"
style="width: 100%;"
></el-date-picker>
</el-col>
<el-col class="line" :span="1">~</el-col>
<el-col :span="6">
<el-time-picker
type="fixed-time"
placeholder="请选择项目时间"
v-model="form.date2"
style="width: 100%;"
></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="封面类型">
<el-radio-group v-model="form.resource">
<el-radio label="图片"></el-radio>
<el-radio label="视频"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div class="step1" v-if="active === 0">
<el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="项目名称：" prop="name">
<el-col :span="13">
<el-input v-model="formData.name" placeholder="请输入项目名称"></el-input>
</el-col>
</el-form-item>
<el-form-item label="项目时间：" required>
<el-col :span="6">
<el-form-item prop="date1">
<el-date-picker
type="date"
placeholder="请选择项目时间"
v-model="formData.date1"
style="width: 100%;"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="1">&nbsp;&nbsp;&nbsp; ~</el-col>
<el-col :span="6">
<el-form-item prop="date2">
<el-date-picker
type="date"
placeholder="请选择项目时间"
v-model="formData.date2"
style="width: 100%;"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="项目简介：" prop="desc">
<el-col :span="14">
<el-input
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入项目简介"
v-model="formData.desc"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="封面类型：" prop="type">
<el-radio-group v-model="formData.type">
<el-radio :label="1">图片</el-radio>
<el-radio :label="2">视频</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="封面图片：">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div>点击上传文件</div>
</el-upload>
<div class="upload-text">
<div class="text">分辨率：750*420</div>
<div class="text">支持jpeg，png，tif等格式</div>
</div>
</el-form-item>
<el-form-item label="可下载附件：">
<el-col :span="10">
<el-upload
class="upload-pdf"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button class="choose-button" type="primary" plain icon="el-icon-document">选择文件</el-button>
<div slot="tip" class="el-upload__tip">支持文件类型：pdf</div>
</el-upload>
</el-col>
</el-form-item>
</el-form>
</div>
<div class="step2" v-else-if="active === 1">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="设定行政范围" name="first">
<el-row :gutter="20">
<el-col class="tree" :span="12">
<el-tree :props="treeProp" :load="loadNode" lazy show-checkbox></el-tree>
</el-col>
<el-col :span="11">
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">{{tag.name}}</el-tag>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="设定机构" name="second">
<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-select v-model="formInline.region" placeholder="全部地区">
<el-option label="全部地区" value></el-option>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formInline.grade" placeholder="全部医院级别">
<el-option label="全部医院级别" value></el-option>
<el-option label="三家" value="3"></el-option>
<el-option label="二甲" value="2"></el-option>
<el-option label="一甲" value="1"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="医院名称" ></el-table-column>
<el-table-column prop="grade" label="医院级别" show-overflow-tooltip></el-table-column>
<el-table-column prop="province" label="所属省份" show-overflow-tooltip></el-table-column>
<el-table-column prop="city" label="所属城市" show-overflow-tooltip></el-table-column>
<el-table-column prop="district" label="所属区县" show-overflow-tooltip></el-table-column>
<el-table-column prop="street" label="所属街道" show-overflow-tooltip></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="设定科室" name="third">设定科室</el-tab-pane>
<el-tab-pane label="设定人员" name="fourth">设定人员</el-tab-pane>
</el-tabs>
</div>
<div class="step2" v-else-if="active === 2">
<h1>第三页</h1>
</div>
</el-main>
</div>
</template>
......@@ -68,32 +171,84 @@ export default {
},
data() {
const item = {
id: "298490",
projectName: "浙江省防控中心指空中...",
createName: "李雷",
projectBrief: "显示项目简介简介",
address: "浙江省",
startTime: "2018-12-15 15:39:23",
endTime: "2018-12-15 15:39:23",
state: "草稿"
name: "上海市第一人民医院",
grade: "二甲医院",
province: "上海市",
city: "上海市",
district: "浦东新区",
street: '-*-'
};
return {
//面包屑
curmbFirst: "教培项目",
curmbSecond: "新建项目",
tableData: Array(10).fill(item),
timingTime: "",
currentPage: 1,
form: {
//页面展示位置
active: 1,
activeName: "second",
currentPage: 2,
//基层信息 数据
imageUrl: "",
formData: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: ""
desc: "",
type: 1,
imageUrl: ""
},
fileList: [
{
name: "food.jpeg",
url:
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
}
],
//设定行政范围 数据
treeProp: {
label: "name",
children: "zones",
isLeaf: "leaf"
},
tags: [{ name: "高新区", type: "" }],
tableData: Array(10).fill(item),
//设定机构 数据
formInline: {
name: "",
region: "",
grade: ""
},
//校验工具 数据
rules: {
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
},
active: 0,
pickerOptions: {
shortcuts: [
{
......@@ -129,14 +284,118 @@ export default {
},
create() {},
methods: {
next() {
nextStep() {
if (this.active++ > 2) this.active = 0;
},
onSubmit() {
console.log("submit!");
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handleClick(tab, event) {
console.log(tab);
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: "全国" }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [
{
name: "北京市",
leaf: true
},
{
name: "上海市"
},
{
name: "重庆市"
},
{
name: "天津市"
}
];
resolve(data);
}, 500);
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
};
</script>
<style>
.avatar-uploader {
float: left;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.upload-text {
float: left;
margin-top: 50px;
margin-left: 15px;
}
.upload-text .text {
line-height: 30px;
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
.tree {
min-height: 700px;
border: 3px solid #dddddd;
}
</style>
\ No newline at end of file
src/views/education/item-manager.vue
浏览文件 @ 09b13fda
......@@ -40,10 +40,10 @@
</el-form>
<el-form :model="formInline" class="demo-form-inline">
<el-form-item>
<el-button type="primary">新建项目</el-button>
<el-button class="add-button" type="primary" @click="toPage()">新建项目</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" :header-cell-style="{background:'#FAFAFA',color:'#000'}">
<el-table v-loading="loading" :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>
......@@ -94,6 +94,7 @@ export default {
curmbFirst: "教培项目",
curmbSecond: "项目管理",
tableData: Array(10).fill(item),
loading: false,
timingTime: "",
currentPage: 1,
formInline: {
......@@ -136,6 +137,9 @@ export default {
},
create() {},
methods: {
toPage() {
this.$router.push('add-manager');
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
......@@ -183,7 +187,7 @@ export default {
.table-option span {
color: #409eff;
}
.el-form-item__content {
.add-button {
float: right;
}
/* .el-table tr>.el-table_1_column_2 .cell {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或