update入口

src/views/education/edit-entry.vue

 <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

@@ -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;
   }