创建入口

src/router/router.js

@@ -24,6 +24,7 @@ const exportDownload = r => require.ensure([], () => r(require('../views/learnin
 
 const itemShield = r => require.ensure([], () => r(require('../views/education/item-shield.vue')), 'item-shield')
 const entryManager = r => require.ensure([], () => r(require('../views/education/entry-manager.vue')), 'entry-manager')
+const editEntry = r => require.ensure([], () => r(require('../views/education/edit-entry.vue')), 'edit-entry')
 
 export default [{
     path: '/',
@@ -92,6 +93,10 @@ export default [{
             path: '/entry-manager',
             component: entryManager,
         },
+        {
+            path: '/edit-entry',
+            component: editEntry,
+        },
       {
         path: '/msg-push',
         component: msgPush,

src/views/education/edit-entry.vue

@@ -2,6 +2,11 @@
   <div class="edit-entry-wrap">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
+      <div class="header-title">{{ title }}</div>
+      <div class="button-group">
+        <el-button size="small" @click="complete(0)">暂存</el-button>
+        <el-button type="primary" size="small" @click="complete(1)">完成</el-button>
+      </div>
       <el-form
         ref="formData"
         :model="formData"
@@ -194,6 +199,41 @@
           </el-form-item>
           <p class="upload-message" v-if="uploadImgMessage2">请选择封面</p>
         </div>
+        <el-form-item label="关联项目：">
+          <el-col :span="10">
+            <!-- :disabled="projectStatus == 3 || projectStatus == 4 || projectStatus == 5  || projectStatus == 6" -->
+            <el-select
+              v-model="formData.project"
+              multiple
+              collapse-tags
+              style="width: 350px"
+              placeholder="关联项目"
+              @change="changeValue"
+            >
+              <el-option
+                v-for="item in optionsProject"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              ></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="已选择：" class="check-project">
+          <el-col :span="10" class="tags-list">
+            <el-tag
+              class="tags-project"
+              v-for="tag in tagsProject"
+              v-bind:class="{'tags-project-online': tag.disabled === true }"
+              :key="tag.value"
+              closable
+              :type="tag.type"
+              style="margin-left: 10px;"
+              @close="handleCloseProject(tag)"
+            >{{tag.name}}</el-tag>
+          </el-col>
+        </el-form-item>
       </el-form>
     </div>
   </div>
@@ -212,10 +252,27 @@ export default {
     BreadCrumb
   },
   data() {
+    let checkProjectStr = (rule, value, callback) => {
+      if (value.indexOf("\\") != -1) {
+        callback(new Error("请勿输入字符“ \\ ”"));
+      } else if (value.indexOf(".") != -1) {
+        callback(new Error("请勿输入字符“ . ”"));
+      } else {
+        callback();
+      }
+    };
     return {
       curmbFirst: "教培项目",
       curmbSecond: "项目组件",
       curmbThird: "新建入口",
+      title: "",
+      projectId: null,
+      peopleLevel: null,
+      uploadImgMessage: false,
+      uploadImgMessage2: false,
+      imgMouseOver: false,
+      imgMouseOver2: false,
+      organizationContent: "云鹊医",
       formData: {
         entryName: "",
         projectBegintime: "",
@@ -224,7 +281,12 @@ export default {
         type: 1,
         attachmentUrl1: "",
         attachmentUrl2: "",
+        organizationName: "",
+        project: []
       },
+      optionsProject: [],
+      tagsProject: [],
+      visibleName: false,
       pickerOptions0: {
         disabledDate: time => {
           if (
@@ -245,7 +307,7 @@ export default {
         }
       },
       rules: {
-        projectName: [
+        entryName: [
           { required: true, message: "请输入项目名称", trigger: "blur" },
           {
             min: 2,
@@ -253,11 +315,16 @@ export default {
             message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
             trigger: "blur"
           },
-          { validator: checkProjectStr, trigger: 'blur' }
+          { validator: checkProjectStr, trigger: "blur" }
         ],
         organizationName: [
           { required: true, message: "请填写发起机构名称", trigger: "blur" },
-          { min: 1, max: 12, message: "超过12个最大字数限制，请精简字数或使用简称", trigger: "blur" }
+          {
+            min: 1,
+            max: 12,
+            message: "超过12个最大字数限制，请精简字数或使用简称",
+            trigger: "blur"
+          }
         ],
         projectBegintime: [
           {
@@ -292,27 +359,271 @@ export default {
           { required: true, message: "请选择封面", trigger: "blur" }
         ]
       }
-    },
+    };
   },
   computed: {
     ...mapGetters(["_token"])
   },
   created() {
     vm = this;
+    vm.projectId = vm.getUrlSearch(window.location.href, "projectId");
+    vm.peopleLevel = vm.getUrlSearch(window.location.href, "level");
+    vm.initTitle();
+    vm.initOption();
   },
   mounted: function() {
     commonUtil.resizeHeight();
   },
   methods: {
-  },
+    initTitle() {
+      if (vm.projectId == null) {
+        vm.title = "新建入口";
+        vm.curmbThird = "新建入口";
+      } else {
+        vm.title = "编辑入口";
+        vm.curmbThird = "编辑入口";
+      }
+    },
+    initOption() {
+      vm.optionsProject = [
+        {
+          value: 1,
+          label: "项目A"
+        },
+        {
+          value: 2,
+          label: "项目B"
+        },
+        {
+          value: 3,
+          label: "项目C"
+        }
+      ];
+    },
+    submitForm(formName) {
+      let flag = null;
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          flag = true;
+        } else {
+          console.log("error submit!!");
+          flag = false;
+        }
+      });
+      return flag;
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    //  删除图片
+    deleteImg(type) {
+      if (type == 1) {
+        vm.formData.attachmentUrl1 = "";
+        vm.imgMouseOver = false;
+      } else {
+        vm.formData.attachmentUrl2 = "";
+        vm.imgMouseOver2 = false;
+      }
+    },
+    changeCover(radio) {
+      this.formData.attachmentUrl2 = "";
+    },
+    beforeUploadListPic(file) {
+      let fileLimit = {
+        width: 230,
+        height: 172,
+        size: 0.5,
+        sizeText: "500K",
+        key: "attachmentUrl1",
+        more: "attachmentMore1",
+        show: "uploadImgMessage"
+      };
+      this.beforeAvatarUpload(file, fileLimit);
+    },
+    beforeUploadCoverPic(file) {
+      let fileLimit = {
+        width: 750,
+        height: 420,
+        size: 2,
+        sizeText: "2.0M",
+        key: "attachmentUrl2",
+        more: "attachmentMore2",
+        show: "uploadImgMessage2"
+      };
+      if (this.formData.type == 1) {
+        this.beforeAvatarUpload(file, fileLimit);
+      } else {
+        this.beforeUploadMp4(file);
+      }
+    },
+    beforeAvatarUpload(file, fileLimit) {
+      const isJPG = file.type === "image/jpeg";
+      const isPNG = file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
+      if (!isJPG && !isPNG) {
+        this.$message.error("图片不符合规范，请根据规范上传图片");
+        return;
+      }
+      if (!isLt2M) {
+        this.$message.error("图片不符合规范，请根据规范上传图片 ");
+        return;
+      }
+      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 != fileLimit.width ||
+            _this.height != fileLimit.height
+          ) {
+            vm.$message.error("图片不符合规范，请根据规范上传图片");
+          } else {
+            openLoading(vm);
+            doUpload(
+              vm,
+              file,
+              getFilePath(file, null),
+              "preview4",
+              "progress1",
+              1
+            ).then(function(path) {
+              closeLoading(vm);
+              console.log(path);
+              if (fileLimit.show == "uploadImgMessage") {
+                vm.uploadImgMessage = false;
+              } else if (fileLimit.show == "uploadImgMessage2") {
+                vm.uploadImgMessage2 = false;
+              }
+              vm.formData[fileLimit.key] = path.fullPath;
+              vm.formData[fileLimit.more] = {
+                attachmentName: path.name,
+                attachmentExt: path.ext,
+                attachmentSize: path.size
+              };
+              vm.$message.success("上传成功");
+            });
+          }
+        };
+      };
+      return isJPG && isLt2M;
+    },
+    beforeUploadMp4(file) {
+      console.log(file);
+      const isMP4 = file.type === "video/mp4";
+      const isLt = file.size / 1024 / 1024 < 500;
+      if (!isLt) {
+        this.$message.error("视频不符合规范，请根据规范上传视频");
+        return;
+      }
+      if (!isMP4) {
+        this.$message.error("视频不符合规范，请根据规范上传视频");
+      } else {
+        openLoading(vm);
+        doUpload(
+          vm,
+          file,
+          getFilePath(file, null),
+          "preview4",
+          "progress1",
+          ""
+        ).then(function(path) {
+          closeLoading(vm);
+          console.log(path);
+          vm.uploadImgMessage2 = false;
+          vm.formData.attachmentUrl2 = path.fullPath;
+          vm.$message.success("上传成功");
+        });
+      }
+    },
+    checkDefault() {
+      vm.formData.organizationName = vm.organizationContent;
+      vm.visibleName = false;
+    },
+    blurName() {
+      vm.visibleName = false;
+      setTimeout(function() {
+        // console.log('失去焦点');
+        vm.submitForm("formData");
+      }, 200);
+    },
+    focusName() {
+      let textLength = vm.formData.organizationName.length;
+      if (textLength == 0) {
+        vm.visibleName = true;
+      } else {
+        vm.visibleName = false;
+      }
+    },
+    changeOrganizationName() {
+      let textLength = vm.formData.organizationName.length;
+      console.log("文字长度", textLength);
+      if (textLength == 0) {
+        vm.visibleName = true;
+      } else {
+        vm.visibleName = false;
+      }
+    },
+    changeValue(value) {
+      this.tagsProject = [];
+      let len = 0;
+      for (let i = 0; i < value.length; i++) {
+        for (let j = 0; j < this.optionsProject.length; j++) {
+          if (value[i] == this.optionsProject[j].value) {
+            this.tagsProject[len] = {};
+            this.tagsProject[len] = this.optionsProject[j];
+            this.tagsProject[len].value = this.optionsProject[j].value;
+            this.tagsProject[len].name = this.optionsProject[j].label;
+            len++;
+          }
+        }
+      }
+      // vm.tagDrop();
+    },
+    handleCloseProject(tag) {
+      if (tag.disabled == true) {
+        return;
+      }
+      vm.tagsProject.splice(vm.tagsProject.indexOf(tag), 1);
+      vm.formData.project = [];
+      for (let j = 0; j < vm.tagsProject.length; j++) {
+        vm.formData.project[j] = vm.tagsProject[j].value;
+      }
+    },
+    complete(type) {
+      console.log('type:'+type);
+      if (type == 1) {
+        //完成
+      } else {
+        //暂存
+      }
+    }
+  }
 };
 </script>
 <style lang="scss">
 .edit-entry-wrap {
   .component-content {
-    background: #fff;
+    position: relative;
     padding: 10px;
+    background: #fff;
+    .header-title {
+      padding: 10px 12px;
+      font-size: 12px;
+      color: #449284;
+      border-bottom: 1px solid #efefef;
+    }
+    .button-group {
+      position: absolute;
+      margin-top: 10px;
+      right: 5%;
+      z-index: 999;
+    }
     .basic-form {
+      position: relative;
+      margin-top: 10px;
       .basic-item-icon {
         position: relative;
         .require {
@@ -376,6 +687,28 @@ export default {
           }
         }
       }
+      .el-popover--plain {
+        padding: 18px 20px;
+        top: 40px;
+      }
+      .check-project {
+        top: 95%;
+        right: 5%;
+        position: absolute;
+        z-index: 999;
+        .tags-list {
+          border: 1px #e8e8e8 solid;
+          height: 350px;
+          min-width: 280px;
+          overflow-y: scroll;
+          .tags-project-online {
+            color: #9aceff;
+            background-color: #f3f8fe;
+            border-color: #d5eafe;
+          }
+        }
+      }
     }
   }
 }
+</style>
\ No newline at end of file