1

src/components/sale/active/activeType-from.vue

+<template>
+  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale" class="addactivetype">
+    <q-card style="width: 450px;max-width:500px;">
+      <q-card-section>
+        <div class="text-h6">{{(saveObj&&saveObj.Id>0)?"修改班次":"新增班次"}}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="row wrap">
+          <div class="col-12">
+            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.TypeName" ref="Name"
+              class="col-12 q-pb-lg" label="活动类型名称" :rules="[val => !!val || '请填写活动类型名称']" />
+          </div>
+        </div>
+        <div class="row wrap">
+          <div class="col-12">
+             <q-uploader :style="{ backgroundImage: 'url(' + msg.CoverImage + ')' }" style="width:auto;height:500px;background-repeat:no-repeat;background-size:cover; border:1px solid #eee" flat
+              hide-upload-btn max-files="1" label="封面图" accept=".jpg, image/*" :factory="uploadFile" auto-upload>
+            </q-uploader>
+          </div>
+        </div>
+        <div class="row wrap">
+           <div class="q-mt-lg q-mb-sm">标签</div>
+          <div class="col-12 q-gutter-sm row">
+            <el-tag :key="index" v-for="(tag,index) 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>
+          </div>
+        </div>
+        <div class="row wrap">
+            <div class="q-mt-lg q-mb-sm">简介</div>
+          <div class="col-12">
+             <Ueditor
+                :value="ueditor.value"
+                :config="ueditor.config"
+                @input="setVal"
+                ref="ue"
+               no-margin
+               :isShowInsertImage="false"
+               :isShowAttachment="false"
+                :isShowVoice="false"
+            ></Ueditor>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeRuleForm" />
+        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" @click="saveRule" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import {
+    UploadSelfFile
+  } from "../../../api/common/common";
+  import Ueditor from "../../editor/UeEditor";
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      },
+    },
+    components: { Ueditor },
+    data() {
+      return {
+        msg: {
+          Id: 0,
+          TypeName: "",
+         CoverImage:"",
+
+        },
+        persistent: true,
+        dynamicTags: [], //标签数组
+        inputVisible: false,
+        inputValue: '',
+        ueditor: {
+        value: "",
+        config: {
+          initialFrameWidth: null,
+          initialFrameHeight: 20,
+          autoHeightEnabled: true,
+          enableContextMenu: false
+        }
+      },
+      }
+    },
+    
+    created() {},
+    mounted() {
+        console.log(93,this.saveObj)
+      if (this.saveObj && this.saveObj.Id > 0) {
+       this.msg.Id=this.saveObj.Id
+       this.msg.CoverImage=this.saveObj.CoverImage
+       this.dynamicTags=this.saveObj.LableNameList
+       this.msg.TypeName=this.saveObj.TypeName
+       this.msg.TypeContent=this.saveObj.TypeContent
+        this.setVal(this.msg.TypeContent);
+      }
+    },
+    methods: {
+       uploadFile(files) {
+        UploadSelfFile("course", files[0], res => {
+          if (res.Code == 1) {
+            this.msg.CoverImage = res.FileUrl;
+          }
+        });
+      },
+      //保存信息
+      saveRule() {
+        this.$refs.Name.validate();
+        this.$refs.School_Ids.validate();
+        this.$refs.StartTime.validate();
+        this.$refs.EndTime.validate();
+        if (!this.$refs.Name.hasError &&
+          !this.$refs.School_Ids.hasError &&
+          !this.$refs.StartTime.hasError &&
+          !this.$refs.EndTime.hasError) {
+          if (this.schoolArr && this.schoolArr.length > 0) {
+            this.msg.School_Ids = this.schoolArr.map(item => item.SId).toString();
+          } else {
+            this.msg.School_Ids = "";
+          }
+          SetFrequency(this.msg).then(res => {
+            if (res.Code == 1) {
+              this.$emit('success');
+              this.closeRuleForm();
+            }
+          })
+        }
+      },
+      //关闭窗口
+      closeRuleForm() {
+        this.$emit('close');
+        this.persistent = false
+      },
+    //   标签
+        handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      },
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+      //删除标签
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+    //   富文本
+      setVal(val) {
+      this.msg.TypeContent = val;
+      this.ueditor.value = decodeURIComponent(val);
+     
+    },
+    },
+  }
+
+</script>
+<style  scoped>
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+    margin-right: 5px;
+  }
+
+ .el-tag {
+    margin-right: 5px;
+  }
+ .el-form-item__content {
+    line-height: 0;
+  }
+  .el-button{
+      line-height: 30px;
+      padding-top: 0;
+      padding-bottom: 0;
+      height: 32px;
+      margin-top: 8px;
+  }
+</style>