FE-V2-PC/src/views/comprehensive/message/labNotifyplan/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" class="addPageFormBox" :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:300px;"/>
        </el-form-item>
        <el-form-item label="发布单位" prop="company" class="form-item">
          <el-input v-model="form.company" maxLength="12" placeholder="请输入发布单位" style="width:300px;"/>
        </el-form-item>
        <el-form-item label="发布内容" prop="content" class="form-item">
          <div class="button-max-box">
            <div class="button-big-box">
              <p class="name-p" v-if="form.contentName">{{form.contentName}}</p>
              <el-upload
                class="avatar-uploader button-p"
                :action="uploadImgUrl"
                :show-file-list="false"
                :on-success="(res)=>handleAvatarSuccess(res)"
                :headers="headers"
                :before-upload="beforeAvatarUpload">
                {{form.contentName?'重新上传':'上传文件'}}
              </el-upload>
              <p class="null-p" v-if="form.contentName"></p>
              <p class="del-p" v-if="form.contentName" @click="delItem">删除</p>
            </div>
            <p class="right-text-p" @click="exportModel">下载范例</p>
          </div>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
  import { addNotifyplan,exportModel } from "@/api/laboratory/notifyplan";
  import { getToken } from "@/utils/auth";
    export default {
      name: "addPage",
      data() {
        return {
          uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
          headers: {
            Authorization: "Bearer " + getToken(),
          },
          // 表单参数
          form: {},
          // 表单校验
          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" }
            ],
            content: [
              { required: true, message: "请上传文件", trigger: "blur" }
            ],
          },
        }
      },
      created() {

      },
      mounted(){

      },
      methods: {
        //下载模板
        exportModel(){
          this.download('/laboratory/notifyplan/exportModel', {}, `计划范例.xlsx`)
        },
        //删除上传文件
        delItem(){
          this.form.content = "";
          this.form.contentName = "";
          this.$forceUpdate();
        },
        //后退
        backPage(){
          this.$parent.pageTypeClick(1);
        },
        //提交
        submitForm(){
          this.$refs["form"].validate(valid => {
            if (valid) {
              this.form.type = 2;
              this.form.contentUrl = this.form.content;
              addNotifyplan(this.form).then( response => {
                this.msgSuccess("新增成功");
                this.$parent.pageTypeClick(1);
              });
            }
          });
        },
        //上传相关
        handleAvatarSuccess(res) {
          let obj ={
            name:this.upDataName,
            url:res.data.url,
          };
          this.form.content = res.data.url;
          this.form.contentName = this.upDataName;
          this.$forceUpdate()
        },
        beforeAvatarUpload(file) {
          let type = false;
          console.log('file',file);
          if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel') {
            this.upDataName = file.name;
            type = true;
          }else{
            this.$message.error('只能上传xls或xlsx格式表格');
            type = false;
          }
          return type;
        },
      }
    }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex !important;
    flex-direction: column;
    padding:0 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;
    }
    .button-max-box{
      display: flex;
      font-size:14px;
      line-height:40px;
      font-weight:500;
      .button-big-box{
        display: flex;
        border:1px solid #e0e0e0;
        width:300px;
        border-radius:4px;
        .name-p{
          width:150px;
          margin-left:10px;
          color:#486CC2;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .button-p{
          color:#486CC2;
        }
        .null-p{
          height:12px;
          width:1px;
          background: #e0e0e0;
          margin:14px 0;
        }
        .del-p{
          width:60px;
          text-align: center;
          color:#FF3A3A;
          cursor: pointer;
        }
      }
      .right-text-p{
        margin-left:20px;
        cursor: pointer;
        color:#486CC2;
      }
    }
  }
</style>