123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333 |
- <!--新增危险源-->
- <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="危险源类型1:" prop="hazardTypeMode">
- <el-select v-model="form.hazardTypeMode" placeholder="请选择" @change="hazardTypeChange()">
- <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: {
- hazardTypeChange(){
- let self=this;
- this.materialTypeList.forEach(function(item) {
- if(self.form.hazardTypeMode==item.dictValue){
- self.form.hazardTypeModeName=item.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.hazardTypeModeName=response.data.hazardTypeModeName
- 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>
|