FE-V2-PC/src/views/hazardManagement/hazard/addLaboratory.vue

<!--新增危险源-->
<template>
  <div class="addLaboratory scrollbar-box" v-if="getType">
    <!--<p class="title-p color_one">添加危险源</p>-->
    <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="120px">
      <el-form-item label="危险源名称：" prop="chName" style="margin-bottom:40px;">
        <el-input
          v-model="form.chName"
          maxlength="20"
          placeholder="请输入危险源名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="型号：" prop="code" style="margin-bottom:40px;">
        <el-input
          v-model="form.code"
          maxlength="10"
          placeholder="请输入型号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="危险源类型：" prop="hazardTypeMode">
        <el-select v-model="form.hazardTypeMode" placeholder="请选择">
          <el-option :label="item.dictLabel" :value="item.dictValue" v-for="(item,index) in materialTypeList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详情：" prop="content">
        <UEditor ref="UEditor" :content="form.content" :min-height="192" />
        <!--<ueditortwo :config=config ref="ueditor"></ueditortwo>-->
      </el-form-item>
      <div class="button-box">
        <el-button class="color_99" @click="leftButtonClick">取消</el-button>
        <el-button class="color_ff back_one" @click="rightButtonClick">确定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getHazard, addHazard, updateHazard } from "@/api/laboratory/hazard";
import { dangerList, gasCategoryList } from '@/api/gasManage3_0/gasManage'
export default {
  props:{
    hazardId: null,
  },
  name: 'addLaboratory',
  data() {
    return {
      getType:false,
      form:{},
      // 表单校验
      rules: {
        chName: [
          { 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: "change" },
          { required: true, message: "请编辑详情", validator: this.spaceJudgmentHTML, trigger: "blur" }
        ],
        hazardTypeMode: [
          { required: true, message: "请选择危险源类型", trigger: "change" },
          { required: true, message: "请选择危险源类型", validator: this.spaceJudgmentHTML, trigger: "blur" }
        ],


      },
      config: {
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        initialContent: '请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent: true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 450,
        BaseUrl: '',
        // serverUrl: '//192.168.1.8:9300/exec',
        //serverUrl: '//180.76.134.43:30002/base/exec',
        serverUrl: '//'+process.env.VUE_APP_BASE_API+'/base/exec',
        UEDITOR_HOME_URL: '/public/ueditor-1.4.3.3/'
      },
      materialTypeList:[],
    }
  },
  created() {
    // this.reset();
    console.log(this.form.content)
    this.form.id = this.hazardId
    if(this.form.id){
      this.handleUpdate()
    }else{
      this.getType = true;
    }

    this.getDicts("combustibility").then(response => {
      this.combustibilitys= response.data;
    })
  },
  methods: {
    //获取危险源类型
    dangerList(){
      let _this=this;
      dangerList().then( response => {
        let res=response.rows;
        _this.materialTypeList=res;
      });
    },
    leftButtonClick(){
      this.$parent.offLaboratoryButton();
    },
    rightButtonClick(){
      this.$set(this.form,'content',this.$refs.UEditor.text||"");
      this.form.content = this.$refs.UEditor.text;
      this.submitForm()
    },
    /** 修改按钮操作 */
    handleUpdate() {
      getHazard(this.form.id).then(response => {
        this.form = response.data;
        this.form.hazardTypeMode=response.data.hazardTypeMode+''
        this.form.content = unescape(response.data.content);
        this.getType = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.content = escape(this.form.content);
          // this.form.ignitionPoint = this.form.ignitionPoint + '℃';
          if (this.form.id != null) {
            updateHazard(this.form).then(response => {
              if(response.code = 200){
                this.msgSuccess("修改成功");
                this.$parent.clickPageTypeOne()
              }
            });
          } else {
            addHazard(this.form).then(response => {
              if(response.code = 200){
                this.msgSuccess("新增成功");
                this.$parent.clickPageTypeOne()
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    this.dangerList();
  }
}
</script>

<style lang="scss" scoped>
.addLaboratory{
  padding:40px 20px;
  .button-box{
    margin:0 auto;
    width:220px;
    display: flex;
    p{
      cursor:pointer;
      width: 100px;
      height:40px;
      line-height:40px;
      font-size:14px;
      text-align: center;
    }
    p:nth-child(1){
      margin-right:20px;
      color:#999;
      background:#e0e0e0;
      border-radius:4px;
    }
    p:nth-child(2){
      color:#fff;
      border-radius:4px;
    }
  }
}
</style>