Skip to content

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

开始对接借口 完成图片上传组件

上级 58ca12e3
隐藏空白字符变更
内嵌 并排
正在显示 包含 205 行增加 和 141 行删除
src/style/global.scss
浏览文件 @ 67cb46c3
...@@ -107,4 +107,16 @@ ...@@ -107,4 +107,16 @@
} }
.white{ .white{
color: #fff; color: #fff;
} }
\ No newline at end of file .button-green {
color: #ffffff;
background: #449284;
border-color: #bfdad5;
border-radius: 2px;
}
.button-white {
color: #606266;
background: #ffffff;
border-color: #ecedf1;
border-radius: 2px;
}
src/utils/envConfig.js
浏览文件 @ 67cb46c3
...@@ -13,7 +13,7 @@ export const envConfig = { ...@@ -13,7 +13,7 @@ export const envConfig = {
// apiUrl: 'https://test1-api.yunqueyi.com/', // apiUrl: 'https://test1-api.yunqueyi.com/',
// webPageUrl: 'https://test1-phome.yunqueyi.com/' // webPageUrl: 'https://test1-phome.yunqueyi.com/'
//baseUrl: 'https://uat-sc.yunqueyi.com/', //baseUrl: 'https://uat-sc.yunqueyi.com/',
baseUrl: 'http://localhost:11905/portal', baseUrl: 'http://10.177.15.169:11905/portal/',
apiUrl: 'https://uat-api.yunqueyi.com/', apiUrl: 'https://uat-api.yunqueyi.com/',
webPageUrl: 'https://uat-phome.yunqueyi.com/', webPageUrl: 'https://uat-phome.yunqueyi.com/',
qiniuUrl: "http://localhost:10201/contents/admin/qiniu/token", qiniuUrl: "http://localhost:10201/contents/admin/qiniu/token",
......
src/views/education/add-manager.vue
浏览文件 @ 67cb46c3
<template> <template>
<div class="main-container"> <div class="add-manager-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<el-row class="step-content"> <el-row class="step-content">
<el-col :span="14"> <el-col :span="14">
<el-steps :active="active" simple style="background: #F0F2F5;"> <el-steps :active="active" simple class>
<span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span> <span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span>
<el-step title="基础信息"></el-step> <el-step title="基础信息"></el-step>
<span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span> <span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>
...@@ -14,12 +14,12 @@ ...@@ -14,12 +14,12 @@
</el-col> </el-col>
<el-col :span="5" :offset="5"> <el-col :span="5" :offset="5">
<el-button size="small">暂存</el-button> <el-button size="small">暂存</el-button>
<el-button v-if="active<2" size="small" type="primary" @click="nextStep">下一步</el-button> <el-button v-if="active<2" size="small" class="button-green" @click="nextStep">下一步</el-button>
<el-button v-if="active>=2" size="small" type="primary" @click="nextStep">完成</el-button> <el-button v-if="active>=2" size="small" class="button-white" @click="nextStep">完成</el-button>
</el-col> </el-col>
</el-row> </el-row>
<div class="first-step" v-if="active === 0"> <div class="first-step" v-if="active === 0">
<el-form ref="formData" :model="formData" :rules="rules" label-width="100px"> <el-form ref="formData" :model="formData" :rules="rules" label-width="150px">
<el-form-item label="项目名称：" prop="name"> <el-form-item label="项目名称：" prop="name">
<el-col :span="13"> <el-col :span="13">
<el-input v-model="formData.name" placeholder="请输入项目名称"></el-input> <el-input v-model="formData.name" placeholder="请输入项目名称"></el-input>
...@@ -66,20 +66,21 @@ ...@@ -66,20 +66,21 @@
</el-form-item> </el-form-item>
<el-form-item label="封面图片："> <el-form-item label="封面图片：">
<el-upload <el-upload
class="avatar-uploader" v-model="formData.coverUrl"
action="https://jsonplaceholder.typicode.com/posts/" class="bg-uploader"
action="#"
:show-file-list="false" :show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
> >
<img v-if="imageUrl" :src="imageUrl" class="avatar"> <img v-if="formData.coverUrl" :src="formData.coverUrl" class="bg-img">
<img v-if="!formData.coverUrl" class="bg-img" src="../../assets/image/small.png">
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div>点击上传文件</div> <div class="limit-text">
<p>尺寸大小:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload> </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>
<el-form-item label="可下载附件："> <el-form-item label="可下载附件：">
<el-col :span="10"> <el-col :span="10">
...@@ -249,7 +250,7 @@ ...@@ -249,7 +250,7 @@
</el-tabs> </el-tabs>
</div> </div>
<div class="step2" v-else-if="active === 2"> <div class="step2" v-else-if="active === 2">
<el-form ref="formData" :model="formComponent" :rules="rulesComponent"> <el-form ref="formData" label-width="150px" :model="formComponent" :rules="rulesComponent">
<el-form-item label="选择组件："> <el-form-item label="选择组件：">
<el-col :span="20"> <el-col :span="20">
<el-select <el-select
...@@ -301,9 +302,10 @@ ...@@ -301,9 +302,10 @@
</template> </template>
<script> <script>
import BreadCrumb from "../../components/breadcrumb.vue"; import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain"; import { doUpload, getFilePath } from "../../utils/qiniuUtil";
import { returnData } from "../mock"; import { returnData } from "../mock";
import { setTimeout } from "timers"; import { setTimeout } from "timers";
let vm = null;
export default { export default {
components: { components: {
BreadCrumb BreadCrumb
...@@ -333,7 +335,7 @@ export default { ...@@ -333,7 +335,7 @@ export default {
curmbSecond: "新建项目", curmbSecond: "新建项目",
//页面展示位置 //页面展示位置
stepData: [true, false, false], stepData: [true, false, false],
active: 1, active: 0,
activeName: "first", activeName: "first",
//基层信息 数据 //基层信息 数据
imageUrl: "", imageUrl: "",
...@@ -343,7 +345,7 @@ export default { ...@@ -343,7 +345,7 @@ export default {
date2: "", date2: "",
desc: "", desc: "",
type: 1, type: 1,
imageUrl: "" coverUrl: ""
}, },
fileList: [ fileList: [
{ {
...@@ -511,16 +513,12 @@ export default { ...@@ -511,16 +513,12 @@ export default {
}; };
}, },
created() { created() {
vm = this;
this.changeOnStep(this.active); this.changeOnStep(this.active);
this.initOrganization(); this.initOrganization();
this.initPerson(); this.initPerson();
let that = this; this.$nextTick(function() {});
this.$nextTick(function() {
this.$refs.multipleOrganization.toggleAllSelection();
this.$refs.multipleDepartment.toggleAllSelection();
this.$refs.multiplePerson.toggleAllSelection();
});
}, },
methods: { methods: {
//表单校验 //表单校验
...@@ -551,18 +549,33 @@ export default { ...@@ -551,18 +549,33 @@ export default {
this.stepData = [false, false, true]; this.stepData = [false, false, true];
} }
}, },
//选择范围选中所有table被选中
checkAllTable() {
this.$nextTick(function() {
this.$refs.multipleOrganization.toggleAllSelection();
this.$refs.multipleDepartment.toggleAllSelection();
this.$refs.multiplePerson.toggleAllSelection();
});
},
//点击下一步 //点击下一步
nextStep() { nextStep() {
if (this.active == 0) { if (this.active == 0) {
let formName = "formData"; let formName = "formData";
let checkTyep = this.submitForm(formName); let removeState = this.submitForm(formName);
console.log("判断移动" + checkTyep); console.log("判断移动" + removeState);
if (checkTyep === true) { if (removeState === true) {
//移动到第二页 选择范围
this.active++; this.active++;
this.stepData = [false, true, false]; this.stepData = [false, true, false];
this.checkAllTable();
}
} else if (this.active == 1) {
let removeState = true;
if (removeState === true) {
//移动到第三页 选择项目组件
this.active++;
this.stepData = [false, false, true];
} }
}
if (this.active == 1) {
//this.stepData = [false, true, false]; //this.stepData = [false, true, false];
} }
}, },
...@@ -572,13 +585,38 @@ export default { ...@@ -572,13 +585,38 @@ export default {
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg"; const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) { if (!isJPG && !isPNG) {
this.$message.error("上传头像图片只能是 JPG 格式!"); this.$message.error("上传头像图片只能是 JPG 格式!");
} }
if (!isLt2M) { if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!"); this.$message.error("上传头像图片大小不能超过 2MB!");
} }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if (_this.width != 750 || _this.height != 420) {
vm.$message.info("上传图片宽度不合适，请重新上传");
} else {
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
vm.componentList.imageUrl = path.fullPath;
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M; return isJPG && isLt2M;
}, },
handleRemove(file, fileList) { handleRemove(file, fileList) {
...@@ -791,36 +829,91 @@ export default { ...@@ -791,36 +829,91 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.main-container { .add-manager-wrap {
background: #fff;
.rim {
border: 1px solid #dddddd;
}
.step-content { .step-content {
overflow: hidden; overflow: hidden;
height: 60px; height: 60px;
margin-top: 80px; margin-top: 66px;
border-bottom: 1px solid #efefef; padding-top: 15px;
} border-bottom: 1px solid #fff;
.is-finish { .is-text {
color: #c0c4cc; display: none;
} }
.step-num { .el-steps--simple {
display: block; background: #fff;
font-size: 12px; }
border: 2px solid #b8babe; .button-green {
border-radius: 50%; color: #ffffff;
width: 25px; background: #449284;
height: 20px; border-color: #bfdad5;
line-height: 15px; border-radius: 2px;
text-align: center; }
color: #b8babe; .button-white {
} color: #606266;
.on-step { background: #ffffff;
color: #747476; border-color: #ecedf1;
border-color: #747476; border-radius: 2px;
}
.step-num {
display: block;
font-size: 12px;
border: 2px solid #b8babe;
border-radius: 50%;
width: 25px;
height: 20px;
line-height: 15px;
text-align: center;
color: #b8babe;
}
.is-finish {
color: #c0c4cc;
}
.on-step {
color: #747476;
border-color: #747476;
}
} }
.first-step { .first-step {
margin-top: 20px; margin-top: 20px;
.bg-uploader {
img {
float: left;
}
.bg-img {
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
.choose-button {
background: #fff;
color: #409eff;
border: 1px solid #409eff;
}
} }
.second-step { .second-step {
margin: 10px 0 0 20px; margin: 10px 0 0 20px;
.department {
margin-top: 20px;
border: 1px solid #dddddd;
}
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
display: none; display: none;
} }
...@@ -856,64 +949,4 @@ export default { ...@@ -856,64 +949,4 @@ export default {
} }
} }
} }
.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;
}
.rim {
border: 1px solid #dddddd;
}
.department {
margin-top: 20px;
// min-height: 700px;
border: 1px solid #dddddd;
}
.is-text {
display: none;
}
.choose-button {
background: #fff;
color: #409eff;
border: 1px solid #409eff;
}
.el-upload--text {
background: #f5f5f5;
}
</style> </style>
\ No newline at end of file
src/views/education/item-manager.vue
浏览文件 @ 67cb46c3
...@@ -8,22 +8,14 @@ ...@@ -8,22 +8,14 @@
<el-input v-model="formInline.name" placeholder="审批人"></el-input> <el-input v-model="formInline.name" placeholder="审批人"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="项目时间："> <el-form-item label="项目时间：">
<el-date-picker <el-date-picker v-model="formInline.startDates" type="date" placeholder="请选择开始时间"></el-date-picker>
v-model="formInline.startDates" <el-date-picker v-model="formInline.endDate" type="date" placeholder="请选择结束时间"></el-date-picker>
type="date"
placeholder="请选择开始时间"
></el-date-picker>
<el-date-picker
v-model="formInline.endDate"
type="date"
placeholder="请选择结束时间"
></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary">查询</el-button> <el-button type="primary">查询</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" plain>重置</el-button> <el-button type="default" plain>重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
...@@ -44,14 +36,14 @@ ...@@ -44,14 +36,14 @@
:data="tableData" :data="tableData"
:header-cell-style="{background:'#FAFAFA',color:'#000'}" :header-cell-style="{background:'#FAFAFA',color:'#000'}"
> >
<el-table-column prop="id" label="ID编号" width="140"></el-table-column> <el-table-column prop="createdId" label="ID编号" width="140"></el-table-column>
<el-table-column prop="projectName" label="项目名称" width="120"></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="createdName" label="创建人"></el-table-column>
<el-table-column prop="projectBrief" label="项目简介"></el-table-column> <el-table-column prop="projectIntro" label="项目简介"></el-table-column>
<el-table-column prop="address" 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="projectBegintime" label="项目开始时间"></el-table-column>
<el-table-column prop="endTime" label="项目结束时间"></el-table-column> <el-table-column prop="projectEndtime" label="项目结束时间"></el-table-column>
<el-table-column prop="state" label="状态"></el-table-column> <el-table-column prop="projectStatus" label="状态"></el-table-column>
<el-table-column fixed="right" label="操作" width="200"> <el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button class="title" type="text" size="small">编辑</el-button> <el-button class="title" type="text" size="small">编辑</el-button>
...@@ -60,21 +52,25 @@ ...@@ -60,21 +52,25 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination <div class="pagination">
@size-change="handleSizeChange" <el-pagination
@current-change="handleCurrentChange" background
:current-page="currentPage" @size-change="handleSizeChange"
:page-sizes="[100, 200, 300, 400]" @current-change="handleCurrentChange"
:page-size="100" :current-page="searchParam.pageNo"
layout="total, sizes, prev, pager, next, jumper" :page-sizes="[15, 30, 50, 100]"
:total="400" :page-size="searchParam.pageSize"
></el-pagination> layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import BreadCrumb from "../../components/breadcrumb.vue"; import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain"; import { create } from "domain";
let vm = null;
export default { export default {
components: { components: {
BreadCrumb BreadCrumb
...@@ -93,7 +89,14 @@ export default { ...@@ -93,7 +89,14 @@ export default {
return { return {
curmbFirst: "教培项目", curmbFirst: "教培项目",
curmbSecond: "项目管理", curmbSecond: "项目管理",
tableData: Array(10).fill(item), searchParam: {
name: "",
status: "",
pageNo: 1,
pageSize: 15
},
tableData: [],
totalRows: 0,
loading: false, loading: false,
timingTime: "", timingTime: "",
currentPage: 1, currentPage: 1,
...@@ -136,11 +139,27 @@ export default { ...@@ -136,11 +139,27 @@ export default {
} }
}; };
}, },
create() {}, created() {
vm = this;
this.getProjectList();
},
methods: { methods: {
toPage() { toPage() {
this.$router.push("add-manager"); this.$router.push("add-manager");
}, },
//查询项目列表
getProjectList() {
console.log("数据请求");
let req = {
token: ""
};
vm.GET("portalInfo/getProjectList", req).then(res => {
if (res.code == "000000") {
vm.tableData = res.data.data;
vm.totalRows = res.data.data.length;
}
});
},
handleSizeChange(val) { handleSizeChange(val) {
console.log(`每页 ${val} 条`); console.log(`每页 ${val} 条`);
this.pageSize = val; this.pageSize = val;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或