Skip to content

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

update入口

上级 b338af6d
显示空白字符变更
内嵌 并排
正在显示 包含 348 行增加 和 8 行删除
src/views/education/edit-entry.vue
浏览文件 @ 710a4bd2
<template>
<div class="edit-entry">
<div class="edit-entry-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<el-form
ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
class="basic-form"
>
<el-form-item label="入口名称：" prop="entryName">
<el-col :span="13">
<el-input
size="small"
v-model="formData.entryName"
placeholder="请输入名称"
style="width:83%;"
:disabled="peopleLevel == 'L3'"
></el-input>
<span class="word-num">{{(formData.entryName).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<el-form-item label="发起机构：" prop="organizationName">
<el-col :span="13">
<el-input
size="small"
v-model="formData.organizationName"
placeholder="请输入发起机构名称"
style="width:83%;"
:disabled="peopleLevel == 'L3'"
@input="changeOrganizationName"
@blur="blurName"
@focus="focusName"
></el-input>
<span class="word-num">{{(formData.organizationName).replace(/\s+/g,"").length}}/12</span>
</el-col>
<el-popover
class="popover-content"
placement="bottom"
:content="organizationContent"
v-model="visibleName"
@click="checkDefault"
>
<p @click="checkDefault">我的机构： {{ organizationContent }}</p>
</el-popover>
</el-form-item>
<el-form-item label="项目时间：" required>
<el-col :span="5">
<el-form-item prop="projectBegintime">
<el-date-picker
v-model="formData.projectBegintime"
size="small"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
style="width: 100%;"
:disabled="peopleLevel == 'L3'"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="1">~</el-col>
<el-col :span="5">
<el-form-item label prop="projectEndtime">
<el-date-picker
v-model="formData.projectEndtime"
size="small"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions1"
default-time="23:59:59"
style="width: 100%;"
:disabled="peopleLevel == 'L3'"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="项目简介：" prop="projectIntro">
<el-col :span="13">
<el-input
size="small"
type="textarea"
:autosize="{ minRows: 5}"
placeholder="请输入项目简介"
v-model="formData.projectIntro"
style="width:83%;"
:disabled="peopleLevel == 'L3'"
></el-input>
<span class="word-num">{{(formData.projectIntro).replace(/\s+/g,"").length}}/200</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="列表图片：">
<el-upload
v-model="formData.attachmentUrl1"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadListPic"
:disabled="peopleLevel == 'L3'"
>
<img
v-if="formData.attachmentUrl1"
@mouseover.stop="imgMouseOver=true && peopleLevel != 'L3'"
:src="formData.attachmentUrl1"
class="bg-img"
/>
<img
v-if="!formData.attachmentUrl1"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver"
@click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>尺寸:230*172</p>
<p>限制大小: 500Kb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
</div>
<el-form-item label="封面类型：">
<el-radio-group
size="small"
v-model="formData.type"
@change="changeCover"
:disabled="peopleLevel == 'L3'"
>
<el-radio :label="1">图片</el-radio>
<el-radio :label="2">视频</el-radio>
</el-radio-group>
</el-form-item>
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="封面文件：">
<el-upload
v-model="formData.attachmentUrl2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadCoverPic"
:disabled="peopleLevel == 'L3'"
>
<img
v-if="formData.type == 1 && formData.attachmentUrl2"
:src="formData.attachmentUrl2"
@mouseover.stop="imgMouseOver2=true && peopleLevel != 'L3'"
class="bg-img"
/>
<video
v-if="formData.type == 2 && formData.attachmentUrl2"
width="100"
controls
class="bg-video"
@mouseover.stop="imgMouseOver2=true && peopleLevel != 'L3'"
>
<source :src="formData.attachmentUrl2" type="video/mp4" />浏览器不支持mp4
</video>
<img
v-if="!formData.attachmentUrl2"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver2"
@click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false"
>
<i class="el-icon-delete"></i>
</div>
<div v-show="formData.type == 1" class="limit-text">
<p>尺寸:750*420</p>
<p>限制大小: 2.0 Mb</p>
<p>支持.jpg,.png格式</p>
</div>
<div v-show="formData.type == 2" class="limit-text">
<p></p>
<p>限制大小: 500 Mb</p>
<p>支持.mp4</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择封面</p>
</div>
</el-form>
</div>
</div>
</template>
<script>
......@@ -19,6 +214,84 @@ export default {
data() {
return {
curmbFirst: "教培项目",
curmbSecond: "项目组件",
curmbThird: "新建入口",
formData: {
entryName: "",
projectBegintime: "",
projectEndtime: "",
projectIntro: "",
type: 1,
attachmentUrl1: "",
attachmentUrl2: "",
},
pickerOptions0: {
disabledDate: time => {
if (
this.formData.projectEndtime != "" &&
this.formData.projectEndtime != null
) {
return (
time.getTime() > new Date(this.formData.projectEndtime).getTime()
);
}
}
},
pickerOptions1: {
disabledDate: time => {
return (
time.getTime() < new Date(this.formData.projectBegintime).getTime()
); //减去一天的时间代表可以选择同一天;
}
},
rules: {
projectName: [
{ required: true, message: "请输入项目名称", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: 'blur' }
],
organizationName: [
{ required: true, message: "请填写发起机构名称", trigger: "blur" },
{ min: 1, max: 12, message: "超过12个最大字数限制，请精简字数或使用简称", trigger: "blur" }
],
projectBegintime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
projectEndtime: [
{
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
projectIntro: [
{ required: true, message: "请填写项目简介", trigger: "blur" },
{ min: 1, max: 200, message: "超出可输入的最大长度", trigger: "blur" }
],
attachmentUrl1: [
{ required: true, message: "请选择列表图片", trigger: "blur" }
],
attachmentUrl2: [
{ required: true, message: "请选择封面", trigger: "blur" }
]
}
},
},
computed: {
......@@ -35,6 +308,74 @@ export default {
};
</script>
<style lang="scss">
.edit-entry {
.edit-entry-wrap {
.component-content {
background: #fff;
padding: 10px;
.basic-form {
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
img {
float: left;
}
.bg-img {
width: 84px;
height: 100px;
}
.bg-video {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
}
}
}
src/views/education/entry-manager.vue
浏览文件 @ 710a4bd2
......@@ -8,8 +8,7 @@
<el-input size="small" v-model="formInline.name" placeholder="请输入名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
</el-col>
<el-col :span="2"></el-col>
<el-col :span="2">
<el-button type="primary" size="small">查询</el-button>
</el-col>
......@@ -105,8 +104,8 @@ export default {
};
</script>
<style lang="scss">
.item-shield {
.entry-manager {
.entry-manager {
.component-content {
padding: 10px;
background: #fff;
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或