FE-V2-PC/src/views/comprehensive/message/labNotify/addPage.vue

<template>
  <div class="addPage">
    <div class="title-p">
      <p>发布</p>
      <p class="reset-button-one" @click="backPage">关闭</p>
      <p class="inquire-button-one"@click="submitForm">确定</p>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="title" class="form-item">
        <el-input v-model="form.title" maxLength="30" placeholder="请输入通知标题" style="width:330px;"/>
      </el-form-item>
      <el-form-item label="发布单位" prop="company" class="form-item">
        <el-input v-model="form.company" maxLength="12" placeholder="请输入发布单位" style="width:330px;"/>
      </el-form-item>
      <el-form-item label="类型" prop="notifyType" class="form-item">
        <el-radio-group v-model="form.notifyType">
          <el-radio :label="1" style="margin:0 20px;">工作通知</el-radio>
          <el-radio :label="2">校院通知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="执行日期" prop="executionTime" class="form-item" v-if="form.notifyType==1">
        <el-date-picker
          :clearable="false"
          v-model="form.executionTime"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="请选择执行日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="摘要" prop="conAbstract" class="form-item">
        <el-input type="textarea" v-model="form.conAbstract"
                  :rows="6" maxLength="250" placeholder="请输入内容"
                  style="width:720px;"/>
      </el-form-item>
      <el-form-item label="内容" prop="content" class="form-item" style="width:800px;">
        <UEditor ref="UEditor" :content="form.content" :min-height="192" />
        <!--<wangEditor :content="form.content" @change="change" :min-height="192"/>-->
        <!--<Editor ref="UEditor" :content="form.content" :min-height="192" />-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { addNotifyplan } from "@/api/laboratory/notifyplan";
  export default {
    name: "addPage",
    data() {
      return {
        // 表单参数
        form: {
          content:"",
        },
        // 表单校验
        rules: {
          title: [
            { required: true, message: "请输入通知标题", trigger: "blur" },
            { required: true, message: "请输入通知标题", validator: this.spaceJudgment, trigger: "blur" }
          ],
          company: [
            { required: true, message: "请输入发布单位", trigger: "blur" },
            { required: true, message: "请输入发布单位", validator: this.spaceJudgment, trigger: "blur" }
          ],
          notifyType: [
            { required: true, message: "请选择发布类型", trigger: "blur" }
          ],
          conAbstract: [
            { required: true, message: "请输入摘要", trigger: "blur" },
            { required: true, message: "请输入摘要", validator: this.spaceJudgment, trigger: "blur" }
          ],
          content: [
            { required: true, message: "请输入内容", trigger: "blur" },
            { required: true, message: "请输入内容", validator: this.spaceJudgmentHTML, trigger: "blur" }
          ],
        },
      }
    },
    created() {
      this.getList();
    },
    mounted(){

    },
    methods: {
      change(val) {
        this.$set(this.form,'content',val);
        // this.form.content = val;
        console.log(val)
      },
      backPage(){
        this.$parent.pageTypeClick(1);
      },
      submitForm(){
        this.$set(this.form,'content',this.$refs.UEditor.text);
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.type = 1;
            this.form.content = escape(this.form.content);
            // this.form.content = encodeURI(this.form.content);
            addNotifyplan(this.form).then( response => {
              this.msgSuccess("新增成功");
              this.$parent.pageTypeClick(1);
            });
          }
        });

      }
    }
  }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex !important;
    flex-direction: column;
    padding:11px 20px 20px!important;
    *{
      margin:0;
    }
    .title-p{
      display: flex;
      border-bottom:1px solid #E0E0E0;
      margin-bottom:30px;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        color:#0045AF;
        font-size:18px;
      }
      p:nth-child(2){
        font-size:14px;
        margin:20px 20px 0 0;
      }
      p:nth-child(3){
        font-size:14px;
        margin:20px 0 0;
      }
    }
    .form-item{
      margin-bottom:30px;
    }
  }
</style>