标签修改

src/components/education/addLecturer.vue

@@ -33,6 +33,27 @@
                      :inactive-value="2">
           </el-switch>
         </el-form-item>
+        <el-form-item label="标签"  size="small">
+          <el-tag
+            :key="tag"
+            v-for="tag in dynamicTags"
+            closable
+            :disable-transitions="false"
+            @close="handleClose(tag)">
+            {{tag}}
+          </el-tag>
+          <el-input
+            class="input-new-tag"
+            v-if="inputVisible"
+            v-model="inputValue"
+            ref="saveTagInput"
+            size="small"
+            @keyup.enter.native="handleInputConfirm"
+            @blur="handleInputConfirm"
+          >
+          </el-input>
+          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
+        </el-form-item>
         <el-form-item label="简介">
           <UE style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true" ref="ue"></UE>
         </el-form-item>
@@ -70,7 +91,11 @@
           Major:'',
           WorkYears:'',
           TeacherStatus:2,
+          LableNameList:'',
         },
+        dynamicTags: [],
+        inputVisible: false,
+        inputValue: '',
         defaultMsg: "",
         config: {
           initialFrameWidth: null,
@@ -140,7 +165,7 @@
               this.Error('请上传品牌Logo')
               return false
             }
-
+            this.addMsg.LableNameList = this.dynamicTags
 
             let content = this.$refs.ue.getUEContent();
             this.addMsg.Introduction = content;
@@ -157,6 +182,25 @@
           }
         });
       },
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      },
 
 
       getData(ID) {
@@ -169,6 +213,10 @@
           if (this.addMsg.Introduction && this.addMsg.Introduction != "") {
             this.defaultMsg = this.addMsg.Introduction;
           }
+          if( this.addMsg.LableNameList!=null){
+            this.dynamicTags = this.addMsg.LableNameList
+
+          }
         })
       },
 
@@ -250,6 +298,20 @@
     white-space: nowrap;
     margin: 5px;
   }
-
+  .addLecturer .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .addLecturer .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .addLecturer .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
 
 </style>

src/components/education/informationManage.vue

@@ -89,6 +89,22 @@
               <el-option label="下架" :value="2"></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="关联老师" prop="TeacherId">
+            <el-select class="w150" style="margin-right: 10px;" v-model="addMsg.TeacherId" size="small"
+                       placeholder="请选择" @change='changeSupplier'>
+              <el-option v-for="item in teacherList" :key="item.ID" :label="item.Name" :value="item.ID">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="头像" class="is-required" size="small">
+            <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
+            <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
+              <img v-if="!addMsg.ArticlePic || addMsg.ArticlePic==''"
+                   src="../../assets/img/default.png" style="width:80px;height:80px" alt="">
+              <img v-else style="width:80px;height:80px" :src="addMsg.ArticlePic"
+                   alt="">
+            </div>
+          </el-form-item>
           <el-form-item label="排序">
             <el-input type="number" class="w300" v-model="addMsg.Sort" size="small"></el-input>
           </el-form-item>
@@ -109,7 +125,25 @@
             <el-input type="text" class="w300" v-model="addMsg.Name" size="small"></el-input>
           </el-form-item>
           <el-form-item label="标签">
-            <el-input type="text" class="w300" v-model="addMsg.LableName" size="small"></el-input>
+            <el-tag
+              :key="index"
+              v-for="(tag,index) in addMsg.LableNameList"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)">
+              {{tag}}
+            </el-tag>
+            <el-input
+              class="input-new-tag"
+              v-if="inputVisible"
+              v-model="inputValue"
+              ref="saveTagInput"
+              size="small"
+              @keyup.enter.native="handleInputConfirm"
+              @blur="handleInputConfirm"
+            >
+            </el-input>
+            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
           </el-form-item>
           <el-form-item label="是否可以留言">
             <el-switch v-model="addMsg.IsComment" class="w300" active-color="#409EFF" :active-value="1"
@@ -124,10 +158,20 @@
       <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
       </el-button>
     </template>
+    <!-- 选择文件 -->
+    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
+      <ChooseImg  @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
   </div>
 </template>
 <script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+
   export default {
+    components: {
+      ChooseImg,
+
+    },
     data() {
       return {
         loading: false,
@@ -153,21 +197,35 @@
           Name: '', //标题
           LableName: '', //标签
           IsComment: 0, //是否可以留言，0-否，1-是
-          Describe: '' //资讯内容
+          Describe: '', //资讯内容
+          TeacherId:'',
+          LableNameList:[],//标签数组
+          ArticlePic:'',//图片
         },
         //选中IDs
         CheckedIds: [],
+        teacherList:[],//老师的选择
         rules: {
           Name: [{
             required: true,
             message: '请输入标题',
             trigger: 'change'
+          }],
+          TeacherId: [{
+            required: true,
+            message: '请选择关联老师',
+            trigger: 'change'
           }]
         },
+        inputVisible: false,
+        inputValue: '',
+        changeState:false,
+        imgType:0,
       };
     },
     created() {
       this.getList();
+      this.getTeacherList()
     },
     methods: {
       handleCurrentChange(val) {
@@ -210,6 +268,11 @@
             this.addMsg.LableName = myData.LableName;
             this.addMsg.IsComment = myData.IsComment;
             this.addMsg.Describe = myData.Describe;
+            if(myData.LableNameList !=null && myData.LableNameList.length>0){
+              this.addMsg.LableNameList = myData.LableNameList;
+            }
+            this.addMsg.TeacherId = myData.TeacherId;
+            this.addMsg.ArticlePic = myData.ArticlePic;
           } else {
             this.Error(res.data.message);
           }
@@ -227,6 +290,9 @@
         this.addMsg.LableName = '';
         this.addMsg.IsComment = 0;
         this.addMsg.Describe = '';
+        this.addMsg.LableNameList = [];
+        this.addMsg.TeacherId = '';
+        this.addMsg.ArticlePic = '';
       },
       submitform(addMsg) {
         //提交创建、修改表单
@@ -240,6 +306,10 @@
       },
       //保存
       saveMsg() {
+        if(this.addMsg.ArticlePic==''){
+          this.Error('请上传图片')
+          return false
+        }
         this.apipost("/api/Education/AddOrUpdateArticle", this.addMsg, res => {
           if (res.data.resultCode == 1) {
             this.informationShowAdd = true;
@@ -251,6 +321,17 @@
           }
         })
       },
+      getTeacherList(){
+        this.apipost("/api/Education/GetTeacherList", {}, res => {
+            if (res.data.resultCode == 1) {
+                this.teacherList = res.data.data
+            } else {
+              this.Error(res.data.message);
+            }
+        })
+      },
+      changeSupplier(val) {},
+
       dateFunction(time) {
         var zoneDate = new Date(time).toJSON();
         var date = new Date(+new Date(zoneDate) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
@@ -351,7 +432,40 @@
             this.Error(res.data.message);
           }
         })
-      }
+      },
+      handleClose(tag) {
+        this.addMsg.LableNameList.splice(this.addMsg.LableNameList.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        console.log(inputValue)
+        if (inputValue) {
+          this.addMsg.LableNameList.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      },
+      openChangeDig(num) {
+
+        this.changeState = true;
+        this.imgType=num;
+      },
+      SelectId(msg){
+        if(this.imgType==1){
+          let url  = this.getIconLink(msg.url)
+          this.addMsg.ArticlePic = url
+        }
+        this.changeState = false;
+      },
+
     },
     mounted() {
 
@@ -392,5 +506,20 @@
   .informationManage .w300 {
     width: 300px !important;
   }
+  .informationManage .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .informationManage .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .informationManage .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
 
 </style>