Skip to content

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

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

上级 58ca12e3
显示空白字符变更
内嵌 并排
正在显示 包含 205 行增加 和 141 行删除
src/style/global.scss
浏览文件 @ 67cb46c3
......@@ -108,3 +108,15 @@
.white{
color: #fff;
}
.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 = {
// apiUrl: 'https://test1-api.yunqueyi.com/',
// webPageUrl: 'https://test1-phome.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/',
webPageUrl: 'https://uat-phome.yunqueyi.com/',
qiniuUrl: "http://localhost:10201/contents/admin/qiniu/token",
......
src/views/education/add-manager.vue
浏览文件 @ 67cb46c3
<template>
<div class="main-container">
<div class="add-manager-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<el-row class="step-content">
<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>
<el-step title="基础信息"></el-step>
<span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>
......@@ -14,12 +14,12 @@
</el-col>
<el-col :span="5" :offset="5">
<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" 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" class="button-white" @click="nextStep">完成</el-button>
</el-col>
</el-row>
<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-col :span="13">
<el-input v-model="formData.name" placeholder="请输入项目名称"></el-input>
......@@ -66,20 +66,21 @@
</el-form-item>
<el-form-item label="封面图片：">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
v-model="formData.coverUrl"
class="bg-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
: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>
<div>点击上传文件</div>
</el-upload>
<div class="upload-text">
<div class="text">分辨率：750*420</div>
<div class="text">支持jpeg，png，tif等格式</div>
<div class="limit-text">
<p>尺寸大小:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<el-form-item label="可下载附件：">
<el-col :span="10">
......@@ -249,7 +250,7 @@
</el-tabs>
</div>
<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-col :span="20">
<el-select
......@@ -301,9 +302,10 @@
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { doUpload, getFilePath } from "../../utils/qiniuUtil";
import { returnData } from "../mock";
import { setTimeout } from "timers";
let vm = null;
export default {
components: {
BreadCrumb
......@@ -333,7 +335,7 @@ export default {
curmbSecond: "新建项目",
//页面展示位置
stepData: [true, false, false],
active: 1,
active: 0,
activeName: "first",
//基层信息 数据
imageUrl: "",
......@@ -343,7 +345,7 @@ export default {
date2: "",
desc: "",
type: 1,
imageUrl: ""
coverUrl: ""
},
fileList: [
{
......@@ -511,16 +513,12 @@ export default {
};
},
created() {
vm = this;
this.changeOnStep(this.active);
this.initOrganization();
this.initPerson();
let that = this;
this.$nextTick(function() {
this.$refs.multipleOrganization.toggleAllSelection();
this.$refs.multipleDepartment.toggleAllSelection();
this.$refs.multiplePerson.toggleAllSelection();
});
this.$nextTick(function() {});
},
methods: {
//表单校验
......@@ -551,18 +549,33 @@ export default {
this.stepData = [false, false, true];
}
},
//选择范围选中所有table被选中
checkAllTable() {
this.$nextTick(function() {
this.$refs.multipleOrganization.toggleAllSelection();
this.$refs.multipleDepartment.toggleAllSelection();
this.$refs.multiplePerson.toggleAllSelection();
});
},
//点击下一步
nextStep() {
if (this.active == 0) {
let formName = "formData";
let checkTyep = this.submitForm(formName);
console.log("判断移动" + checkTyep);
if (checkTyep === true) {
let removeState = this.submitForm(formName);
console.log("判断移动" + removeState);
if (removeState === true) {
//移动到第二页 选择范围
this.active++;
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];
}
},
......@@ -572,13 +585,38 @@ export default {
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
if (!isJPG && !isPNG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
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;
},
handleRemove(file, fileList) {
......@@ -791,15 +829,34 @@ export default {
};
</script>
<style lang="scss">
.main-container {
.add-manager-wrap {
background: #fff;
.rim {
border: 1px solid #dddddd;
}
.step-content {
overflow: hidden;
height: 60px;
margin-top: 80px;
border-bottom: 1px solid #efefef;
margin-top: 66px;
padding-top: 15px;
border-bottom: 1px solid #fff;
.is-text {
display: none;
}
.is-finish {
color: #c0c4cc;
.el-steps--simple {
background: #fff;
}
.button-green {
color: #ffffff;
background: #449284;
border-color: #bfdad5;
border-radius: 2px;
}
.button-white {
color: #606266;
background: #ffffff;
border-color: #ecedf1;
border-radius: 2px;
}
.step-num {
display: block;
......@@ -812,15 +869,51 @@ export default {
text-align: center;
color: #b8babe;
}
.is-finish {
color: #c0c4cc;
}
.on-step {
color: #747476;
border-color: #747476;
}
}
.first-step {
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 {
margin: 10px 0 0 20px;
.department {
margin-top: 20px;
border: 1px solid #dddddd;
}
.el-tabs__nav-wrap::after {
display: none;
}
......@@ -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>
\ No newline at end of file
src/views/education/item-manager.vue
浏览文件 @ 67cb46c3
......@@ -8,22 +8,14 @@
<el-input v-model="formInline.name" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="项目时间：">
<el-date-picker
v-model="formInline.startDates"
type="date"
placeholder="请选择开始时间"
></el-date-picker>
<el-date-picker
v-model="formInline.endDate"
type="date"
placeholder="请选择结束时间"
></el-date-picker>
<el-date-picker v-model="formInline.startDates" 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-button type="primary">查询</el-button>
</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>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
......@@ -44,14 +36,14 @@
: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="createdId" 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="createdName" 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="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 prop="projectBegintime" label="项目开始时间"></el-table-column>
<el-table-column prop="projectEndtime" label="项目结束时间"></el-table-column>
<el-table-column prop="projectStatus" 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>
......@@ -60,21 +52,25 @@
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
:total="totalRows"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
let vm = null;
export default {
components: {
BreadCrumb
......@@ -93,7 +89,14 @@ export default {
return {
curmbFirst: "教培项目",
curmbSecond: "项目管理",
tableData: Array(10).fill(item),
searchParam: {
name: "",
status: "",
pageNo: 1,
pageSize: 15
},
tableData: [],
totalRows: 0,
loading: false,
timingTime: "",
currentPage: 1,
......@@ -136,11 +139,27 @@ export default {
}
};
},
create() {},
created() {
vm = this;
this.getProjectList();
},
methods: {
toPage() {
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) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或