FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/msds/addPage.vue

<template>
  <div class="addPage">
    <div class="title-box">
      <p>{{addPropsData.id?'编辑':'新增'}}</p>
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="addPage-min safe-book-el-dialog" v-if="addType">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="化学品名称" prop="name" style="width:498px;">
          <el-input v-model="form.name" placeholder="请输入化学品名称" maxLength="20" style="width:500px;"/>
        </el-form-item>
        <el-form-item label="化学品编号" prop="code" style="width:498px;">
          <el-input v-model="form.code" placeholder="请输入化学品编号" maxLength="20" style="width:500px;"/>
        </el-form-item>
        <el-form-item label="化学品详情" prop="content" style="color:#606266;font-size:16px;font-weight:500;" class="wang-editor-form-item-box">
          <wangEditor :content="form.content" placeholder="请输入化学品详情" @change="change" :min-height="192" style="width:1000px;"/>
        </el-form-item>
      </el-form>
      <p class="bottom-button-p inquire-button-one" @click="submitForm">提交</p>
    </div>
  </div>
</template>

<script>
  import { addHazard_book, updateHazard_book } from "@/api/laboratory/hazard_book";
  export default {
    name: "addPage",
    props:{
      addPropsData:{},
    },
    data() {
      return {
        addType:false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name:[
            {required: true, message: '请输入化学品名称', trigger: 'blur'},
            { required: true, message: "请输入化学品名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          code:[
            {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() {
    },
    mounted(){
      if(this.addPropsData.id){
        this.$set(this,'form',this.addPropsData);
        this.addType=true;
      }else{
        this.addType=true;
      }
    },
    methods: {
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.content = escape(this.form.content);
            if (this.form.id != null) {
              updateHazard_book(this.form).then( response => {
                this.msgSuccess("修改成功");
                this.$parent.pageToggle(1);
              });
            } else {
              addHazard_book(this.form).then( response => {
                this.msgSuccess("新增成功");
                this.$parent.pageToggle(1);
              });
            }
          }
        });
      },
      backPage(){
        this.$parent.pageToggle(0);
      },
      change(val) {
        this.$set(this.form,'content',val);
        // this.form.content = val;
        console.log(val)
      },
    }
  }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex !important;
    flex-direction: column;
    p{
      margin:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .addPage-min{
      flex:1;
      display: flex !important;
      flex-direction: column;
      padding:20px!important;
      .bottom-button-p{
        margin:40px auto;
        line-height:40px;
        width:100px;
        text-align: center;
      }
    }
  }
</style>
<style lang="scss">
  .wang-editor-form-item-box{
    .el-form-item__content{
      z-index:0;
    }
  }
</style>