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="请选择" @change="hazardTypeModeFun()">
          <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="previewButton">确定</el-button>
      </div>
    </el-form>
    <el-dialog title="预览" class="richTextDialog" v-if="richTextDialogType" :close-on-click-modal="false" :visible.sync="richTextDialogType" append-to-body>
      <div class="button-max-box">
        <el-select v-model="previewKey" placeholder="请选择" style="margin-bottom:20px;">
          <el-option
            v-for="item in previewSetList"
            :key="item.key"
            :label="item.name"
            :value="item.key">
          </el-option>
        </el-select>
        <p class="add-button-one-90" style="margin-left:20px;" @click="rightButtonClick">确定</p>
      </div>
      <div class="text-max-box" :class="previewKey!=2?'move-text-max-box':''">
        <p class="text-max-null-p"></p>
        <div class="text-box scrollbar-box w-e-text" v-html="text"
             :style="'width:'+previewSetList[previewKey].width+'px;height:'+previewSetList[previewKey].height+'px;'">
        </div>
        <p class="text-max-null-p"></p>
      </div>
    </el-dialog>
  </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:{
        content:'',
      },
      // 表单校验
      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: '//'+this.judgmentNetworkReturnAddress()+'/base/exec',
        UEDITOR_HOME_URL: '/public/ueditor-1.4.3.3/'
      },
      materialTypeList:[],
      richTextDialogType:false,
      previewKey:0,
      previewSetList:[
        // {
        //   key:0,
        //   name:"iphone 12 pro",
        //   width:390,
        //   height:884,
        //   scale:0.203125,
        // },
        // {
        //   key:1,
        //   name:"iphone XR",
        //   width:414,
        //   height:896,
        //   scale:0.215625,
        // },
        {
          key:0,
          name:"iphone SE",
          width:375,
          height:667,
          scale:0.195312,
        },
        // {
        //   key:3,
        //   name:"Samsung Galaxy A51/71",
        //   width:412,
        //   height:914,
        //   scale:0.214583,
        // },
        {
          key:1,
          name:"Samsung Galaxy S8+",
          width:360,
          height:740,
          scale:0.1875,
        },
        // {
        //   key:5,
        //   name:"Samsung Galaxy S20",
        //   width:412,
        //   height:915,
        //   scale:0.214583,
        // },
        {
          key:2,
          name:"化学品终端",
          width:1041,
          height:725,
          scale:0.5421875,
        },
      ],
      text:"",
    }
  },
  created() {
    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: {
    hazardTypeModeFun(){
      for(let i=0;i<this.materialTypeList.length;i++){
        if(this.form.hazardTypeMode==this.materialTypeList[i].dictValue){
          this.$set(this.form,'hazardTypeModeName',this.materialTypeList[i].dictLabel);
        }
      }
    },
    //预览
    previewButton(){
      this.$set(this.form,'content',this.$refs.UEditor.text);
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$set(this,'text',this.$refs.UEditor.text);
          this.richTextDialogType = !this.richTextDialogType
        }
      });
      // if(this.$refs.UEditor.text){
      //   this.$set(this,'text',this.$refs.UEditor.text);
      //   this.richTextDialogType = !this.richTextDialogType
      // }else{
      //   this.msgError('请编辑内容')
      // }
    },
    //获取危险源类型
    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>
<style lang="scss">
  .richTextDialog{
    .el-dialog{
      width:1083px;
      .el-dialog__body{
        padding:20px;
      }
    }
    .button-max-box{
      display: flex;
      .button-null-p{
        flex:1;
      }
    }
    .text-max-box{
      display: flex;
      .text-max-null-p{
        flex:1;
      }
      .text-box{
        color:#000;
        font-size:16px;
        padding:8px;
        border:1px solid #dedede;
        font-weight:500;
      }
    }
    .move-text-max-box{
      video{
        width:100%!important;
        /*object-fit: fill;*/
        height:100%!important;
        /*display: block;*/
      }
      img{
        width:100%!important;
        height:100%!important;
        /*width:1500px;*/
        /*margin:20px 200px;*/
      }
    }
  }
  .richTextDemo{
  }
</style>