实现基本的模板编辑页逻辑

src/components/education/template/baseMessage.vue

@@ -8,15 +8,16 @@
       label-width="150px"
       class="basic-form"
     >
-      <el-form-item label="项目名称：" prop="projectName">
+      <el-form-item label="模板名称：" prop="openTemplateName">
         <el-col :span="13">
           <el-input
             size="small"
-            v-model="formData.projectName"
-            placeholder="请输入项目名称"
+            v-model="formData.openTemplateName"
+            placeholder="请输入模板名称"
             style="width:70%;"
+            :disabled="disabled"
           ></el-input>
-          <span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
+          <span class="word-num">{{(formData.openTemplateName).replace(/\s+/g,"").length}}/24</span>
         </el-col>
       </el-form-item>
 
@@ -31,6 +32,7 @@
             @input="changeOrganizationName"
             @blur = "blurName"
             @focus = "focusName(index)"
+            :disabled="disabled"
           ></el-input>
           <span class="word-num">{{(formData.organizationNameList[index]).replace(/\s+/g,"").length}}/16</span>
           <img @click="plusOrg(index)" class="edit-img" src="../../../assets/image/plus.png" />
@@ -46,14 +48,15 @@
         </el-popover>
       </el-form-item>
 
-      <el-form-item label="有效期：" prop="useTime" v-if="!projectManger">
+      <el-form-item label="有效期：" prop="expireDay" v-if="!projectManger">
         <el-col :span="13">
           <el-input
             size="small"
-            v-model="formData.useTime"
+            v-model="formData.expireDay"
             placeholder="请填写1-1000之间的数字"
             style="width:70%;"
             oninput = "value=value.replace(/[^\d]|^[0]/g,'')"
+            :disabled="disabled"
           ></el-input>
           <span class="day-btn">天</span>
         </el-col>
@@ -70,6 +73,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   :picker-options="pickerOptions0"
                   style="width: 100%;"
+                  :disabled="disabled"
                 ></el-date-picker>
               </el-form-item>
             </el-col>
@@ -85,19 +89,22 @@
                   :picker-options="pickerOptions1"
                   default-time="23:59:59"
                   style="width: 100%;"
+                  :disabled="disabled"
                 ></el-date-picker>
               </el-form-item>
             </el-col>
           </el-form-item>
 
-      <el-form-item label="所属学科" prop="xueke">
+      <el-form-item label="所属学科" prop="subjectLevelList">
         <el-col :span="13">
           <el-cascader
             class="subject-slelct"
-            v-model="formData.xueke"
+            v-model="formData.subjectLevelList"
             :options="options"
             :props="{ checkStrictly: true }"
-            @change="handleChange"></el-cascader>
+            @change="handleChange"
+            :disabled="disabled"
+          ></el-cascader>
         </el-col>
       </el-form-item>
 
@@ -110,6 +117,7 @@
             action="#"
             :show-file-list="false"
             :before-upload="beforeUploadListPic"
+            :disabled="disabled"
           >
             <img v-if="formData.attachmentUrl1" @mouseover.stop="imgMouseOver=true" :src="formData.attachmentUrl1" class="bg-img">
             <img
@@ -117,7 +125,7 @@
               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="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
             <div class="limit-text">
               <p>尺寸:48*48</p>
               <p>限制大小: 500Kb</p>
@@ -133,6 +141,7 @@
           size="small"
           v-model="formData.type"
           @change="changeCover"
+          :disabled="disabled"
         >
           <el-radio :label="1">图片</el-radio>
           <el-radio :label="2">视频</el-radio>
@@ -148,6 +157,7 @@
             action="#"
             :show-file-list="false"
             :before-upload="beforeUploadCoverPic"
+            :disabled="disabled"
           >
             <img
               v-if="formData.type == 1 && formData.attachmentUrl2"
@@ -169,7 +179,7 @@
               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 class="img-delete" v-show="imgMouseOver2 && !disabled" @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>
@@ -185,28 +195,30 @@
         <p class="upload-message" v-if="uploadImgMessage2">请选择封面</p>
       </div>
 
-      <el-form-item label="项目简介：" prop="projectIntro">
+      <el-form-item label="项目简介：" prop="openTemplateIntro">
         <el-col :span="13">
           <el-input
             size="small"
             type="textarea"
             :autosize="{ minRows: 5}"
             placeholder="请输入项目简介"
-            v-model="formData.projectIntro"
+            v-model="formData.openTemplateIntro"
             style="width:83%;"
+            :disabled="disabled"
           ></el-input>
-          <span class="word-num">{{(formData.projectIntro).replace(/\s+/g,"").length}}/200</span>
+          <span class="word-num">{{(formData.openTemplateIntro).replace(/\s+/g,"").length}}/200</span>
         </el-col>
       </el-form-item>
   
-      <el-form-item label="项目详情" required prop="richContent" v-if="!projectManger">
+      <el-form-item label="项目详情" required prop="openTemplateDetail" v-if="!projectManger" :class="{ueitem: disabled}">
         <vue-ueditor-wrap
           ref="ueditor"
-          v-model="formData.richContent"
+          v-model="formData.openTemplateDetail"
           :destroy="false"
           :config="ueditorConfig"
         >
         </vue-ueditor-wrap>
+        <div v-if="disabled" class="ue-warp"></div>
       </el-form-item>
     </el-form>
   </div>
@@ -220,12 +232,12 @@ import VueUeditorWrap from 'vue-ueditor-wrap'
 let vm = null;
 export default {
   props: {
-    formData: {
-      type: Object,
-      default:() => {
-        return null
-      }
-    },
+    // formData: {
+    //   type: Object,
+    //   default:() => {
+    //     return null
+    //   }
+    // },
     projectManger: {
       type: Boolean,
       default: false
@@ -253,35 +265,66 @@ export default {
       visibleName: false, //是否显示机构提示
       orgListIndex: 1,
       organizationContent: 'hcd',//机构名称
-      options: [{
-        value: 'zhinan',
-        label: '指南',
-        children: [{
-          value: 'shejiyuanze',
-          label: '设计原则',
-          children: [{
-            value: 'yizhi',
-            label: '一致'
-          }, {
-            value: 'fankui',
-            label: '反馈'
-          }, {
-            value: 'xiaolv',
-            label: '效率'
-          }, {
-            value: 'kekong',
-            label: '可控'
-          }]
-        }]
-      }],
+      options: [],
+      formData: {
+        id: "", //开放模板id    26
+        openTemplateName: "",    //开放模板名称
+        projectBegintime: "",    //模板开始时间
+        projectEndtime: "",      //模板结束时间
+        openTemplateIntro: "",   //开放模板简介
+        type: 1,               //封面类型 1图片2视频 
+        expireDay: "",         // 开放有效期
+        subjectLevelList: "",          //开放模板所属学科lsit
+        subjectId: '', //开放模板所属学科id
+        subjectName: "",       //开放模板所属学科名称
+        attachmentUrl1: "",
+        attachmentUrl2: "",
+        attachmentUrl3: "",
+        attachmentMore1: {
+          attachmentExt: "",
+          attachmentName: "",
+          attachmentSize: 0
+        },
+        attachmentMore2: {
+          attachmentExt: "",
+          attachmentName: "",
+          attachmentSize: 0
+        },
+        organizationName: "",       // 发起机构名称（多个机构拼接
+        organizationNameList: [''],  //发起机构列表
+        openTemplateDetail: ''      //开放模板详情
+      },
+      attachmentModel:[    //基础信息的图片视频
+        {
+          attachmentExt: '',// 附件格式
+          attachmentName: '',//附件名称
+          attachmentSize:'',//附件大小,
+          attachmentType: 1,//1：图片 2：视频 3：pdf
+          attachmentUrl: '',//附件链接
+          id: '', //关联唯一ID
+          kind: 1, //1：列表图片 2：封面配置 3：附件配置
+          openTemplateId: ''//开放模板id
+        },
+         {
+          attachmentExt: '',// 附件格式
+          attachmentName: '',//附件名称
+          attachmentSize:'',//附件大小,
+          attachmentType: 1,//1：图片 2：视频 3：pdf
+          attachmentUrl: '',//附件链接
+          id: '', //关联唯一ID
+          kind: 1, //1：列表图片 2：封面配置 3：附件配置
+          openTemplateId: ''//开放模板id
+        }
+      ],
+      baseobj: {},
       pickerOptions0: {
         disabledDate: time => {
           if (
-            this.formData.projectEndtime != "" &&
-            this.formData.projectEndtime != null
+            vm.formData.projectEndtime != "" &&
+            vm.formData.projectEndtime != null
           ) {
             return (
-              time.getTime() > new Date(this.formData.projectEndtime).getTime()
+              time.getTime() > new Date(vm.formData.projectEndtime).getTime()
             );
           }
         }
@@ -289,7 +332,7 @@ export default {
       pickerOptions1: {
         disabledDate: time => {
           return (
-            time.getTime() < new Date(this.formData.projectBegintime).getTime()
+            time.getTime() < new Date(vm.formData.projectBegintime).getTime()
           ); //减去一天的时间代表可以选择同一天;
         }
       },
@@ -298,7 +341,7 @@ export default {
       uploadImgMessage: false,
       uploadImgMessage2: false,
       id: 1,
-      richContent: '',
+      openTemplateDetail: '',
       ueditorConfig: {
         // 编辑器不自动被内容撑高
         autoFloatEnabled: false,
@@ -333,7 +376,7 @@ export default {
         // }
       },
       rules: {
-        projectName: [
+        openTemplateName: [
           { required: true, message: "请输入项目名称" },
           {
             min: 2,
@@ -343,7 +386,7 @@ export default {
           },
           { validator: checkProjectStr, trigger: "blur" }
         ],
-        useTime: [
+        expireDay: [
           { required: true, message: "请输入有效期", trigger: "blur" },
           { validator: checkUserTime, trigger: "blur" }
         ],
@@ -361,15 +404,16 @@ export default {
             trigger: "change"
           }
         ],
-        xueke: { required: true, message: "请选择学科", trigger: "change" },
-        projectIntro: [
+        subjectLevelList: { required: true, message: "请选择学科", trigger: "change" },
+        openTemplateIntro: [
           { required: true, message: "请填写项目简介", trigger: "blur" },
           { min: 1, max: 200, message: "超出可输入的最大长度", trigger: "blur" }
         ],
-        richContent: [
+        openTemplateDetail: [
           { required: true, message: '请填写项目详情', trigger: 'blur' }
         ]
-      }
+      },
+      disabled: false
     }
   },
   components:{
@@ -377,45 +421,67 @@ export default {
   },
   created() {
     vm = this;
+    vm.getSubjectList();
+    vm.getBaseMessage();
   },
   methods: {
+    // 获取已有的基本信息
+    getBaseMessage() {
+      let id = 26; // 开放模板id
+      // openLoading(vm);
+      vm.GET(`portal/openTemplate/getOpenTemplateInfo/${id}`).then(res => {
+        // closeLoading(vm);
+        if (res.code == "000000") {
+          this.formData = Object.assign(this.formData, res.data.portalOpenTemplateModel);
+          this.formData.attachmentUrl1 = res.data.attachmentData[0].attachmentUrl;
+          this.formData.attachmentMore1 = Object.assign(this.formData.attachmentMore1, res.data.attachmentData[0]);
+          this.formData.attachmentUrl2 = res.data.attachmentData[1].attachmentType == 1 ? res.data.attachmentData[1].attachmentUrl : '';
+          this.formData.attachmentUrl3 = res.data.attachmentData[1].attachmentType == 2 ? res.data.attachmentData[1].attachmentUrl : '';
+          this.formData.attachmentMore2 = Object.assign(this.formData.attachmentMore2, res.data.attachmentData[1]);
+          this.disabled = true;
+        } else {
+          vm.$message.info(res.message);
+        }
+      });
+    },
     // 增加发起机构
     plusOrg(index) {
-      this.formData.organizationNameList.splice(index + 1, 0, '');
+      vm.formData.organizationNameList.splice(index + 1, 0, '');
     },
     // 删除发起机构
     deleteOrg(index) {
-      this.formData.organizationNameList.splice(index, 1);
+      vm.formData.organizationNameList.splice(index, 1);
     },
     // 机构名称输入
     changeOrganizationName() {
-      let textLength = this.formData.organizationName.length;
+      let textLength = vm.formData.organizationName.length;
       // 机构输入提示显示与否
-      this.visibleName = textLength == 0;
+      vm.visibleName = textLength == 0;
     },
     // 离开机构名称焦点
     blurName() {
-      this.visibleName = false;
+      vm.visibleName = false;
       setTimeout(() => {
-        this.submitForm("formData");
+        vm.submitForm("formData");
       }, 200);
     },
     // 机构名称聚焦
     focusName(index) {
-      let textLength = this.formData.organizationNameList[index].length;
+      let textLength = vm.formData.organizationNameList[index].length;
       if (textLength == 0) {
-        this.orgListIndex = index + 1;
-        this.visibleName = true;
+        vm.orgListIndex = index + 1;
+        vm.visibleName = true;
       } else {
-        this.visibleName = false;
+        vm.visibleName = false;
       }
     },
     // 机构选择默认值
     checkDefault() {
-      this.formData.organizationNameList.splice(this.orgListIndex-1, 1, this.organizationContent);
-      this.visibleName = false;
+      vm.formData.organizationNameList.splice(vm.orgListIndex-1, 1, vm.organizationContent);
+      vm.visibleName = false;
+    },
+    handleChange(value) {
     },
-    handleChange() {},
      //上传列表图片
     beforeUploadListPic(file) {
       let fileLimit = {
@@ -425,20 +491,19 @@ export default {
         more: "attachmentMore1",
         show: "uploadImgMessage"
       };
-      this.beforeAvatarUpload(file, fileLimit);
+      vm.beforeAvatarUpload(file, fileLimit);
     },
      //上传图片校验
     beforeAvatarUpload(file, fileLimit) {
-      let vm = this;
       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("图片不符合规范，请根据规范上传图片");
+        vm.$message.error("图片不符合规范，请根据规范上传图片");
         // return;
       }
       if (!isLt2M) {
-        this.$message.error("图片不符合规范，请根据规范上传图片 ");
+        vm.$message.error("图片不符合规范，请根据规范上传图片 ");
         // return;
       }
       let _img = new FileReader();
@@ -447,10 +512,10 @@ export default {
         let image = new Image();
         image.src = theFile.target.result;
         image.onload = function() {
-          let _this = this;
+          let _vm = vm;
           if ( false
-            // _this.width != fileLimit.width ||
-            // _this.height != fileLimit.height
+            // _vm.width != fileLimit.width ||
+            // _vm.height != fileLimit.height
           ) {
             vm.$message.error("图片不符合规范，请根据规范上传图片");
           } else {
@@ -486,16 +551,16 @@ export default {
     //  删除图片
     deleteImg(type) {
       if (type == 1) {
-        this.formData.attachmentUrl1 = "";
-        this.imgMouseOver = false;
+        vm.formData.attachmentUrl1 = "";
+        vm.imgMouseOver = false;
       } else {
-        this.formData.attachmentUrl2 = "";
-        this.imgMouseOver2 = false;
+        vm.formData.attachmentUrl2 = "";
+        vm.imgMouseOver2 = false;
       }
     },
      //改变封面类型
     changeCover(radio) {
-      this.formData.attachmentUrl2 = "";
+      vm.formData.attachmentUrl2 = "";
     },
      //上传封面图片
     beforeUploadCoverPic(file) {
@@ -508,24 +573,23 @@ export default {
         more: "attachmentMore2",
         show: "uploadImgMessage2"
       };
-      if (this.formData.type == 1) {
-        this.beforeAvatarUpload(file, fileLimit);
+      if (vm.formData.type == 1) {
+        vm.beforeAvatarUpload(file, fileLimit);
       } else {
-        this.beforeUploadMp4(file);
+        vm.beforeUploadMp4(file);
       }
     },
      //上传mp4
     beforeUploadMp4(file) {
       console.log(file);
-      let vm = this;
       const isMP4 = file.type === "video/mp4";
       const isLt = file.size / 1024 / 1024 < 500;
       if (!isLt) {
-        this.$message.error("视频不符合规范，请根据规范上传视频");
+        vm.$message.error("视频不符合规范，请根据规范上传视频");
         return;
       }
       if (!isMP4) {
-        this.$message.error("视频不符合规范，请根据规范上传视频");
+        vm.$message.error("视频不符合规范，请根据规范上传视频");
       } else {
         openLoading(vm);
         doUpload(
@@ -547,27 +611,53 @@ export default {
     // 点击下一步
     nextStep() {
       let flag = true;
-      if (!this.formData.attachmentUrl1) {
-          this.uploadImgMessage = true;
+      if (!vm.formData.attachmentUrl1) {
+          vm.uploadImgMessage = true;
           flag = false;
       } else {
-        this.uploadImgMessage = false;
+        vm.uploadImgMessage = false;
       }
-      if (!this.formData.attachmentUrl2) {
-        this.uploadImgMessage2 = true;
+      if (!vm.formData.attachmentUrl2) {
+        vm.uploadImgMessage2 = true;
         flag = false;
       } else {
-        this.uploadImgMessage2 = false;
+        vm.uploadImgMessage2 = false;
       }
-      return this.submitForm('formData') && flag;
-      // console.log('====================================');
-      // console.log(this.formData);
-      // console.log('====================================');
+      // if (vm.submitForm('formData') && flag) {
+      //   vm.insertOrupdate();
+      // }
+      vm.insertOrupdate();
+    },
+    // 新增或者更新基本信息
+    insertOrupdate() {
+      vm.setSubjectId();
+      vm.formData.subjectName = vm.setSubjectName();
+      // 图片或者视频地址
+      vm.formData.attachmentMore1.attachmentUrl = vm.formData.attachmentUrl1;
+      vm.formData.attachmentMore2.attachmentUrl = vm.formData.type == 1 ? vm.formData.attachmentUrl2 : vm.formData.attachmentUrl3;
+      // 封面类型
+      vm.formData.attachmentMore2.attachmentType =  vm.formData.type;
+      vm.formData.attachmentMore2.kind =  2;
+      //整合图片视频
+      vm.attachmentModel[0] = Object.assign(vm.attachmentModel[0],vm.formData.attachmentMore1);
+      vm.attachmentModel[1] = Object.assign(vm.attachmentModel[1],vm.formData.attachmentMore2);
+      vm.baseobj.openTemplateModel = vm.formData;
+      vm.baseobj.attachmentModel = vm.attachmentModel;
+      openLoading(vm);
+      vm.POST("portal/openTemplate/insertOrUpdate", vm.baseobj).then(res => {
+        closeLoading(vm);
+        if (res.code == "000000") {
+          // 将产生的模板id：openTemplateId传给下一步
+          this.$emit('next',res.data.openTemplateModel.id);
+        } else {
+          vm.$message.info(res.message);
+        }
+      });
     },
      //表单校验
     submitForm(formName) {
       let flag = null;
-      this.$refs[formName].validate(valid => {
+      vm.$refs[formName].validate(valid => {
         if (valid) {
           flag = true;
         } else {
@@ -582,10 +672,10 @@ export default {
         vm.$message.error('请将富文本填写完整!');
         return;
       }
-      vm.editData.richContent = msg;
+      vm.editData.openTemplateDetail = msg;
       openLoading(vm);
       let req = {
-        richContent: vm.editData.richContent,
+        openTemplateDetail: vm.editData.openTemplateDetail,
         id: vm.id
       };
       vm.$axios
@@ -606,6 +696,48 @@ export default {
           vm.$message.error(error);
         });
     },
+    // 获取学科列表
+    getSubjectList() {
+      let req = {};
+      vm.GET("/portal/openTemplate/labelList", req).then(res => {
+        if (res.code == '000000') {
+          vm.changeName(res.data);
+          vm.options = res.data;
+        }
+      });
+    },
+    // 优化学科数据的属性名
+    changeName(obj) {
+      for (const item of obj) {
+        item.children = item.subList;
+        item.label = item.name;
+        item.value = item.id ? item.id : 10;
+        if (item.children && Array.isArray(item.children)) {
+          vm.changeName(item.children);
+        }
+      }
+    },
+    // 获取学科对应的label
+    setSubjectName() {
+      for (const item of vm.options) {
+        if (item.value == vm.formData.subjectLevelList[0]) {
+          if (!vm.formData.subjectLevelList[1] || vm.formData.subjectLevelList[1] == 0) {
+             return item.label;
+          } else {
+            for (const j of item.children){
+              if (j.value == vm.formData.subjectLevelList[1]) {
+                return j.label;
+              }
+            }
+          }
+        }
+         
+      }
+    },
+    // 设置学科id
+    setSubjectId() {
+      vm.formData.subjectId =  (vm.formData.subjectLevelList.length > 1)&& vm.formData.subjectLevelList[1] != 0 ? vm.formData.subjectLevelList[1] : vm.formData.subjectLevelList[0]
+    }
   }
 }
 </script>
@@ -618,7 +750,7 @@ export default {
 <style lang="scss" scoped>
 
   .base-message-wrap {
-    margin-top: 20px;
+    padding-top: 80px;
     .p_label {
       margin-left: 56px;
       font-size: 12px;
@@ -718,7 +850,23 @@ export default {
       padding: 18px 20px;
       top: 40px;
     }
-   
+    .ueitem {
+      position: relative;
+    }
+   .ue-warp {
+      position: absolute;
+      width: 80%;
+      height: 100%;
+      background: #F5F7FA;
+      opacity: 0.5;
+      top: 0;
+      z-index: 1000;
+   }
+  }
+  .el-form-item__content {
+    width: 100%;
+    height: 100%;
+    background: red;
   }
    .popover-content {
       position: relative;

src/components/education/template/selectRegion.vue

@@ -28,7 +28,7 @@
         </el-tree>
       </el-col>
       <el-col :span="11">
-        <p class="area-p">
+        <p class="area-p" @click="getScope('administrative')">
           项目范围包含下列区域所有机构和人员({{ tagsRegion.length }})
         </p>
         <el-tag
@@ -70,7 +70,7 @@ export default {
       },
       treeData: [],
       tagsRegion: [],
-      projectId: 640
+      projectId: 173
     }
   },
   created() {
@@ -105,7 +105,7 @@ export default {
           this.treeData = [];
           this.treeData[0] = administrativeAll;
           this.setTreeData(administrative);
-          this.getCheckedTree();
+          // this.getCheckedTree();
         }
       });
     },
@@ -149,12 +149,11 @@ export default {
         halfCheckedTree
       );
       //重构内容
-
       this.allSelectedKeys = allSelectedKeys;
       this.initCheckList(allSelectedKeys);
       //console.log("allSelectedKeys", allSelectedKeys);
       //改变行政范围后，更新设定机构和设定人员
-      this.updateOrganizationAndPerson(allSelectedKeys);
+      // this.updateOrganizationAndPerson(allSelectedKeys);
       this.updatedTree = true;
     },
      //v2.2教培更新
@@ -192,18 +191,21 @@ export default {
       }
     },
     //行政范围改变更新设定机构
-    updateOrganizationAndPerson(allSelectedKeys) {
-      console.log('=========================updateOrganizationAndPerson')
-      this.tableOrganization = [];
-      this.tablePerson = [];
-      this.lookedOrganization = [];
-      this.changedOrganization = [];
-      this.changedOrganization2 = [];
-    },
-    getCheckedKeys() {
-      console.log('=========================getCheckedKeys')
-      console.log(this.$refs.tree.getCheckedKeys());
-    },
+    // updateOrganizationAndPerson(allSelectedKeys) {
+    //   console.log('====================================');
+    //   console.log(allSelectedKeys);
+    //   console.log('====================================');
+    //   console.log('=========================updateOrganizationAndPerson')
+    //   this.tableOrganization = [];
+    //   this.tablePerson = [];
+    //   this.lookedOrganization = [];
+    //   this.changedOrganization = [];
+    //   this.changedOrganization2 = [];
+    // },
+    // getCheckedKeys() {
+    //   console.log('=========================getCheckedKeys')
+    //   console.log(this.$refs.tree.getCheckedKeys());
+    // },
      //添加子节点
     append(data, node) {
       console.log('=========================append')
@@ -264,6 +266,25 @@ export default {
       }
       console.log(treeKeyList);
       this.$refs.tree.setCheckedKeys(treeKeyList);
+    },
+     //设定的行政范围内容
+    getScope(type) {
+      console.log('========================getScope');
+
+      let scope = "";
+      let arr = [];
+      for (let i = 0; i < this.tagsRegion.length; i++) {
+        scope += this.tagsRegion[i].key;
+        arr.push(this.tagsRegion[i].key)
+        if (i < this.tagsRegion.length - 1) {
+          scope += "|";
+        }
+      }
+      if (scope == "") {
+        return null;
+      }
+      this.$emit('setRegion',arr);
+      return scope;
     }
   }
 }

src/components/education/template/selectTemplate.vue

@@ -205,6 +205,12 @@ import Sortable from "sortablejs";
 
 let vm = null;
 export default {
+  props: {
+    openTemplateId: {
+      type: String | Number,
+      deault: 0
+    }
+  },
   data() {
     let checkNormalInt = (rule, value, callback) => {
       const val = parseFloat(value);
@@ -216,7 +222,6 @@ export default {
       }
     };
     return {
-      idTypeProject: "",
       customError: {
         standard: {
           className: "",
@@ -239,8 +244,6 @@ export default {
           error: ""
         }
       },
-      projectId: null,
-      fileList: [],
       //选择项目组件 数据
       optionsComponent: [],
       optionsCertificate: [],
@@ -248,9 +251,9 @@ export default {
         component: [],
         configure: 2,
         certificate: "",
-        courseRequire: 0, //0：不控制 1：按课程时长配置要求
-        passExamCount: "",
-        passAverageScore: "",
+        courseRequire: 0, //模板内课程的完成是否受学习时长控制：0否1是
+        passExamCount: "", //模板中最高考试门数限制：passType=2时有值
+        passAverageScore: "", //门数限制下考试成绩的平均分限制：passType=2时有值
         passTotalLearnTime: ""
       },
       tagsComponent: [],
@@ -259,8 +262,8 @@ export default {
       showStorage: false,
       //考试数据
       formExam: {
-        certificateType: 1,
-        passType: 1,
+        certificateType: 1, //模板证书类型：1单证书2多证书
+        passType: 1,  //模板通过标准类型：1所有组件通过，2根据平均分设定，3根据项目内学习时长设定
         exam: [
           {
             examCount: 1,
@@ -298,7 +301,8 @@ export default {
           { required: false, trigger: "change", validator: checkNormalInt }
         ],
         showRules1: [{ required: true, message: "请输入门数", trigger: "blur" }]
-      }
+      },
+      disabled: true
     };
   },
   computed: {
@@ -306,7 +310,6 @@ export default {
   },
   created() {
     vm = this;
-    (this.projectId = vm.getUrlSearch(window.location.href, "projectId")),
     this.getComponentInfo();
     vm.idType = localStorage.getItem("storageIdType");
   },
@@ -360,13 +363,8 @@ export default {
      //查询组件证书信息
     getComponentInfo() {
       console.log('=================getComponentInfo');
-      let param = {};
-      let projectIdValue = vm.projectId;
-      if (projectIdValue == null) {
-        projectIdValue = 0;
-      }
       vm
-        .GET("portal/portalInfo/getComponentInfo/" + projectIdValue, param)
+        .GET("portal/openTemplate/getAllComponent")
         .then(res => {
           if (res.code == "000000") {
             //console.log(res);
@@ -392,7 +390,7 @@ export default {
           }
         });
     },
-    //项目组件信息 暂存/完成
+    //项目组件信息 暂存/完成  1暂存2保存3发布
     componentDraft(type) {
       console.log('=================componentDraft');
       let param = {
@@ -400,7 +398,7 @@ export default {
         componentIds: operationData.getComponent(vm.tagsComponent),
         // certificateId: this.formComponent.certificate,
         certificateId: [],
-        projectId: this.projectId,
+        openTemplateId: this.openTemplateId,
         type: type,
         status: this.projectStatus,
         certificateType: this.formExam.passType == 2 ? 2 : 1,
@@ -431,7 +429,7 @@ export default {
               certificateId: ruleData[o].certificateId,
               certificateName: ruleData[o].certificateName,
               examCount: ruleData[o].examCount,
-              portalProjectId: this.projectId,
+              openTemplateId: this.openTemplateId,
               rangeMax: ruleData[o].rangeMax,
               rangeMin: ruleData[o].rangeMin
             };
@@ -446,7 +444,7 @@ export default {
           }
         }
       }
-      vm.POST("portal/portalInfo/componentDraft", param).then(res => {
+      vm.POST("portal/openTemplate/componentDraft", param).then(res => {
         console.log(res);
         vm.$message({
           message: res.message,
@@ -550,6 +548,7 @@ export default {
         vm.$message("至少配置1个证书");
       }
     },
+    // 选择证书
     updateCertificate(index) {
       // console.log('optionsCertificate',vm.optionsCertificate,'index',index,'item',vm.formExam.exam[index])
       for (let i = 0; i < vm.optionsCertificate.length; i++) {
@@ -623,6 +622,7 @@ export default {
   }
 }
 .select-manager-wrap {
+  padding-top: 64px;
   .mleft60 {
     margin-left: 60px;
   }

src/components/education/template/setOrganization.vue

@@ -177,7 +177,8 @@ export default {
       formOrganization: {
         name: "",
         administrativeId: "0",
-        administrativeIdList: ["0"],
+        // administrativeIdList: ["0"],
+        administrativeIdList:[110],
         level: "-1",
         chechAll: true,
         pageNum: 1,
@@ -339,7 +340,7 @@ export default {
     },
      //获取地区select
     getRegionOption() {
-       console.log('=========================getRegionOption')
+      console.log('=========================getRegionOption')
       let req = {};
       openLoading(vm);
       vm.GET("basic-data/position/provinces", req).then(res => {

src/components/education/template/stepContent.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="step-content-compontent">
     <el-row class="step-content">
-      <el-col :span="14">
+      <el-col :span="12">
         <el-steps :active="active" simple class>
           <span class="step-num" v-bind:class="{ 'on-step': active==0 }">1</span>
           <el-step title="基础信息"></el-step>
@@ -10,7 +10,7 @@
           <el-step title="选择项目组件">3</el-step>
         </el-steps>
       </el-col>
-      <el-col :span="5" :offset="5">
+      <el-col :span="7" :offset="5">
         <el-button v-if="!fished" size="small" type="primary" @click="nextStep">下一步</el-button>
         <el-button v-if="fished" size="small" type="primary" @click="complete">完成</el-button>
       </el-col>
@@ -49,6 +49,11 @@ export default {
 <style lang="scss">
   .step-content-compontent {
     background: #fff;
+    z-index: 1001;
+    background: #fff;
+    position: fixed;
+    right: 30px;
+    left: 285px;
     .step-content {
       overflow: hidden;
       height: 60px;

src/components/education/template/templateList.vue

@@ -4,8 +4,8 @@
     <div class="list-wrap">
         <div class="template-content" :class="{clicked: item.isclick}" v-for="(item,index) of list" :key="index" @click="check(item,index)">
           <div class="title-wrap">
-            <div class="title-icon">神经内科</div>
-            <div class="title">国家基本公共卫生服务项目国家基本公共卫生</div>
+            <div class="title-icon">{{item.subjectName}}</div>
+            <div class="title">{{item.openTemplateName}}</div>
             <div class="sj" v-if="item.isclick">
               <i class="el-icon-check"></i>
             </div>
@@ -13,21 +13,21 @@
           <div class="main">
             <div class="main-title">套餐内容包含:</div>
             <ul class="clase-list">
-              <li class="clase-item">
+              <li class="clase-item" v-if="item.courseCount">
                 <span class="icon"></span>
-                <i class="icon-message">7节课程</i>
+                <i class="icon-message">{{item.courseCount}}节课程</i>
               </li>
-              <li class="clase-item">
+              <li class="clase-item" v-if="item.beforeExamCount">
                 <span class="icon"></span>
-                <i class="icon-message">7节课程</i>
+                <i class="icon-message">{{item.beforeExamCount}}次摸底考试</i>
               </li>
-              <li class="clase-item">
+              <li class="clase-item" v-if="item.afterExamCount">
                 <span class="icon"></span>
-                <i class="icon-message">7节7节课程课程</i>
+                <i class="icon-message">{{tem.afterExamCount}}次结业考试<i v-if="item.existCertificate "> (通过获结业证书)</i></i>
               </li>
               <li class="clase-item">
                 <span class="icon"></span>
-                <i class="icon-message">7节7节课程课程</i>
+                <i class="icon-message">实时在线项目数据报告</i>
               </li>
             </ul>
           </div>
@@ -50,20 +50,24 @@
     </div>
     <el-dialog title="项目详情" :visible.sync="dialogTableVisible" class="dialog-list-wrap">
       <div class="dialog-line"></div>
-      <div class="dialog-title">国家基本公共卫生服务项目国家基本公共卫生</div>
+      <div class="dialog-title">{{detailObj.openTemplateName}}</div>
       <div class="dialog-message">
         <div class="dm-title">
           <div class="dm-line"></div>
           <div class="dm-msg">基本信息</div>
         </div>
         <div class="dm-main">
-          <div class="mian-list">
+          <div class="mian-list" v-if="detailObj.openTemplateIntro">
             <div class="dm-name">内容有效期:</div>
-            <div class="dm-nr">30天</div>
+            <div class="dm-nr">{{detailObj.openTemplateIntro}}天</div>
+          </div>
+          <div class="mian-list" v-if="detailObj.subjectName">
+            <div class="dm-name">项目学科:</div>
+            <div class="dm-nr">{{detailObj.subjectName}}</div>
           </div>
-          <div class="mian-list">
+          <div class="mian-list" v-if="detailObj.organizationName">
             <div class="dm-name">已参加的机构:</div>
-            <div class="dm-nr">已参加的机构已参加的机构</div>
+            <div class="dm-nr">{{detailObj.organizationName}}</div>
           </div>
         </div>
       </div>
@@ -72,13 +76,14 @@
           <div class="dm-line"></div>
           <div class="dm-msg">项目简介</div>
         </div>
-        <div class="jjs-main">项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介</div>
+        <div class="jjs-main">{{detailObj.openTemplateIntro}}</div>
       </div>
       <div class="dialog-xq">
         <div class="dm-title">
           <div class="dm-line"></div>
           <div class="dm-msg">项目详情</div>
         </div>
+        <div class="xq-main" v-html="detailObj.openTemplateDetail"></div>
       </div>
     </el-dialog>
 
@@ -88,67 +93,68 @@
 </template>
 
 <script>
+import { openLoading, closeLoading } from "../../../utils/utils";
+let vm = null;
 export default {
   data() {
     return {
-      list: [
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        },
-        {
-           isclick: false
-        }
-      ],
+      list: [],
+      detailObj: {},
       dialogTableVisible: false
     }
   },
-  created() {},
+  created() {
+    vm = this;
+    vm.getTemplateList();
+  },
   methods: {
     // 选中
     check(item,index) {
-      item.isclick = true;
-      for (let i = 0; i<this.list.length; i++) {
+      this.list[index].isclick = true;
+      for (let i = 0; i< this.list.length; i++) {
         if (i != index) {
-          this.list[i].isclick = false
+          vm.list[i].isclick = false
         }
       }
+      vm.$emit('checkFn',item.id);
     },
     // 获取详情
-    getDetail() {
+    getDetail(item) {
+      // 
       this.dialogTableVisible = true;
+      openLoading(vm);
+      vm.GET(`portal/openTemplateProject/getOpenTemplateInfoForList/${item.id}`)
+        .then(res => {
+          closeLoading(vm);
+          if (res.code == "000000") {
+           vm.detailObj = res.data;
+          } else {
+            vm.$message.info(res.message);
+          }
+        })
+        .catch((err) => {
+          closeLoading(vm);
+          vm.$message.warning('请稍后重试');
+        });
+    },
+    getTemplateList() {
+      openLoading(vm);
+      vm.GET(`portal/openTemplateProject/getOpenTemplateList`)
+        .then(res => {
+          closeLoading(vm);
+          if (res.code == "000000") {
+            for (const item of res.data.list) {
+              item.isclick = false;
+            }
+            this.list = res.data.list;
+          } else {
+            vm.$message.info(res.message);
+          }
+        })
+        .catch((err) => {
+          closeLoading(vm);
+          vm.$message.warning('请稍后重试');
+        });
     }
   }
 }
@@ -405,6 +411,14 @@ export default {
     .dialog-xq {
       margin-top: 40px;
       padding-bottom: 30px;
+      .xq-main {
+        margin-left: 17px;
+        margin-top: 16px;
+        color: #676869;
+        img {
+          max-height: 720px;
+        }
+      }
     }
   }
 }

src/views/education/template-editor.vue

 <template>
   <div class="template-editor-wrap">
       <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
-      <div class="add-content screenSet" id="screenSet">
+      <div class="add-content screenSet" id="screenSet" v-if="editor">
+        <div class="top-lin"></div>
         <step-content
           :active="active"
           :fished="fished"
           @nextStep="nextStep"
           @complete="complete"
         />
+
         <!-- 基础组件 -->
         <base-message
           ref="baseMessage"
           v-if="active == 0 && formData"
-          :formData="formData"
           :projectManger="projectManger"
+          @next="next"
         />
 
         <!-- 选择项目组件 -->
-        <select-template v-if="active == 1" />
-
-
+        <select-template
+          ref="selectTemplate"
+          v-if="active == 1"
+          :openTemplateId="openTemplateId"
+        />
         <!-- 选择行政区 -->
         <!-- <select-region v-if="active == 1"></select-region> -->
 
@@ -27,6 +31,23 @@
         <!-- 设定机构 -->
         <!-- <set-Organization v-if="active == 0"></set-Organization> -->
       </div>
+      <div class="add-content screenSet" id="screenSet" v-else>
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="基础信息" name="first">
+            <base-message
+              ref="baseMessage"
+              :projectManger="projectManger"
+              @next="next"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="选中组件" name="second">
+            <select-template
+              ref="selectTemplate"
+              :openTemplateId="openTemplateId"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
   </div>
 </template>
 
@@ -47,34 +68,54 @@ export default {
       fished: false,
       projectManger: false,
       formData: {
-        projectName: "",
-        projectBegintime: "",
-        projectEndtime: "",
-        projectIntro: "",
-        type: 1,
-        useTime: "",
-        xueke: "",
+        openTemplateName: "",    //开放模板名称
+        projectBegintime: "",    //模板开始时间
+        projectEndtime: "",      //模板结束时间
+        openTemplateIntro: "",   //开放模板简介
+        type: 1,               //封面类型 1图片2视频 
+        expireDay: "",         // 开放有效期
+        subjectId: "",          //开放模板所属学科ID
+        subjectName: "",       //开放模板所属学科名称
         attachmentUrl1: "",
         attachmentUrl2: "",
         attachmentUrl3: "",
         attachmentMore1: {},
         attachmentMore2: {},
-        scopeType: 0,
-        organizationName: "",
-        organizationNameList: [''],
-        sendOption: 1,
-        receiveOption: 1,
-        visibleFlag: 1,
-        learnableFlag: 2,
-        authorityType: 1,
-        allowLearn: 2,
-        richContent: ''
+        organizationName: "",       // 发起机构名称（多个机构拼接
+        organizationNameList: [''],  //发起机构列表
+        openTemplateDetail: ''      //开放模板详情
       },
+      attachmentModel:[    //基础信息的图片视频
+        {
+          attachmentExt: '',// 附件格式
+          attachmentName: '',//附件名称
+          attachmentSize:'',//附件大小,
+          attachmentType: 1,//1：图片 2：视频 3：pdf
+          attachmentUrl: '',//附件链接
+          id: '', //关联唯一ID
+          kind: 1, //1：列表图片 2：封面配置 3：附件配置
+          openTemplateId: ''//开放模板id
+        },
+         {
+          attachmentExt: '',// 附件格式
+          attachmentName: '',//附件名称
+          attachmentSize:'',//附件大小,
+          attachmentType: 1,//1：图片 2：视频 3：pdf
+          attachmentUrl: '',//附件链接
+          id: '', //关联唯一ID
+          kind: 1, //1：列表图片 2：封面配置 3：附件配置
+          openTemplateId: ''//开放模板id
+        }
+      ],
+      baseobj: {}, 
       formTemplate: {
         component: [],
         configure: 2,
         certificate: ""
-      }
+      },
+      openTemplateId: 26,
+      activeName: 'first',
+      editor: true  // 是否为编辑状态
     }
   },
   components: {
@@ -85,28 +126,66 @@ export default {
     selectRegion,
     setOrganization
   },
-  created() {},
+  created() {
+    this.fished = this.active == 0 ? false : true
+  },
   methods: {
-    // 下一步
+    //用于存储基本信息
     nextStep() {
-      // let flag = this.$refs.baseMessage.nextStep();
-      // if (!flag) {
-      //   return;
-      // }
-      this.active++;
-      if (this.active == 1) {
-        this.fished = true;
+      if(this.active == 0) {
+        let flag = this.$refs.baseMessage.nextStep();
       }
     },
+    // 下一步
+    next(openTemplateId) {
+      this.openTemplateId = openTemplateId;
+      this.active = 1;
+      this.fished = true;
+    },
     complete() {
       console.log('完成');
+      //1暂存2保存3发布
+      this.$refs.selectTemplate.componentDraft(3);
+    },
+    handleClick() {
+
     }
   }
 }
 </script>
 
+<style>
+.template-editor-wrap .el-tabs__header {
+   z-index: 1001;
+  background: #fff;
+  position: fixed;
+  right: 30px;
+  left: 285px;
+}
+.template-editor-wrap .el-tabs__item {
+  width: 240px;
+  text-align: center;
+  margin-right: 20px;
+  height: 64px;
+  line-height: 64px;
+  font-size:16px;
+  font-family:PingFangSC-Medium,PingFang SC;
+  font-weight:500;
+  color:rgba(48,49,51,1);
+}
+
+</style>
 <style lang="scss" scoped>
 .template-editor-wrap {
+  .top-lin {
+    position: fixed;
+    height: 30px;
+    background: #F0F2F5;
+    right: 30px;
+    left: 285px;
+    z-index: 1001;
+    top: 125px;
+  }
   .add-content {
     background: #fff;
   }

src/views/education/template-open.vue

@@ -2,7 +2,8 @@
   <div class="template-open-wrap">
       <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
     
-      <div class="add-content screenSet" id="screenSet" style="pos">
+      <div class="add-content screenSet" id="screenSet">
+        <div class="top-lin"></div>
         <el-row class="step-content">
           <el-col :span="14">
             <el-steps :active="active" simple class>
@@ -15,12 +16,13 @@
             </el-steps>
           </el-col>
           <el-col :span="5" :offset="5">
-            <el-button v-if="active!==2" size="small" type="primary" @click="nextStep">下一步</el-button>
+            <el-button v-if="!canNext" size="small" type="info" plain>下一步</el-button>
+            <el-button v-if="active!==2 && canNext" size="small" type="primary" @click="nextStep">下一步</el-button>
             <el-button v-if="active==2" size="small" type="primary" @click="complete">完成</el-button>
           </el-col>
         </el-row>
         <div v-if="active == 0" class="tpl-main">
-           <template-list></template-list>
+           <template-list @checkFn="checkFn"></template-list>
         </div>
         <!-- 模板列表 -->
        
@@ -34,13 +36,13 @@
         />
       
          <!-- 选择学员 -->
-        <div class="second-step" v-else-if="active === 2">
+        <div class="three-step" v-else-if="active === 2">
           <el-tabs v-model="activeName" @tab-click="handleClickTabs">
             <el-tab-pane label="设定行政范围" name="first">
-              <select-region></select-region>
+              <select-region @setRegion="setRegion"></select-region>
             </el-tab-pane>
             <el-tab-pane label="设定机构" name="second">
-              <set-Organization></set-Organization>
+              <set-Organization ></set-Organization>
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -57,6 +59,7 @@ import setOrganization from "../../components/education/template/setOrganization
 import templateList from "../../components/education/template/templateList";
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
+let vm = null;
 export default {
   data() {
     return {
@@ -95,7 +98,10 @@ export default {
         configure: 2,
         certificate: ""
       },
-      activeName: "first"
+      activeName: "first",
+      canNext: false,
+      openTemplateId: '',
+      r: []//设定行政范围和设定机构相互影响的行政范围
     }
   },
   components: {
@@ -106,7 +112,9 @@ export default {
     setOrganization,
     templateList
   },
-  created() {},
+  created() {
+    vm = this;
+  },
   mounted() {
     commonUtil.resizeHeight();
   },
@@ -128,6 +136,35 @@ export default {
      //切换tabs
     handleClickTabs(tab, event) {
       // this.activeName = tab.name;
+    },
+    // 模板列表选中
+    checkFn(id) {
+      this.canNext = true;
+      this.openTemplateId = id;
+    },
+    //选中模板后点击下一步时检测(机构和进行中的项目)
+    checkSelectTemplate() {
+      openLoading(vm);
+      vm.GET(`portal/openTemplateProject/checkAfterSelectOneOpenTemplate/${vm.openTemplateId}`)
+        .then(res => {
+          closeLoading(vm);
+          if (res.code == "000000") {
+            console.log()
+          } else {
+            vm.$message.info(res.message);
+          }
+        })
+        .catch((err) => {
+          closeLoading(vm);
+          vm.$message.warning('请稍后重试');
+        });
+    },
+    // 设定行政范围和设定机构范围相互影响
+    setRegion(r) {
+      this.r = r;
+      console.log('====================================');
+      console.log(r);
+      console.log('====================================');
     }
   }
 }
@@ -135,7 +172,25 @@ export default {
 
 <style lang="scss">
 .template-open-wrap {
+  .el-step.is-simple:not(:last-of-type) .el-step__title {
+    max-width: 100%;
+  }
+  .top-lin {
+    position: fixed;
+    height: 30px;
+    background: #F0F2F5;
+    right: 30px;
+    left: 285px;
+    z-index: 1001;
+    top: 125px;
+  }
   .step-content {
+    background: #fff;
+    z-index: 1001;
+    background: #fff;
+    position: fixed;
+    right: 30px;
+    left: 285px;
     overflow: hidden;
     height: 60px;
     // margin-top: 66px;
@@ -189,7 +244,8 @@ export default {
   .add-content {
     background: #fff;
   }
-  .second-step {
+  .three-step {
+    padding-top: 64px;
     margin: 10px 0 0 20px;
     .area-p {
       margin-bottom: 15px;