vue 中同一个页面中 ，在一个全局放大图片组件，多次操作放大后，另一个组件表单元素不可编辑

//受 全局ts-image-viewer 放大控件影响，导致表单元素不能编辑了，很怪异的问题，    原因分析，全局图片放大组件在操作后，影响另一个全局组件的内部属性，
 
本来的写法没有使用 form 包裹 表元素input，  会出现这样的问题
 
在改为 ui控件 form 包裹后，可以使用form的    注册代码和重置表单元素的功能（如下 如上 几行代码）， 至此再无此问题
（如下）
fields.forEach(v => this.form.getFieldDecorator(v))

            // 当 model 发生改变时，为表单设置值
            this.$watch('editValue', () => {
            let obj = pick(this.editValue, fields)
            this.model && this.form.setFieldsValue(obj)
            })
（如上）
 
 
<ts-image-viewer
        :urlList="imgList"
        :initialIndex="imgIndex"
        v-if="visibleImg"
        @close="
        () => {
            this.visibleImg = false
        }
        "
    ></ts-image-viewer>
  </div>

</template>

<script>
import QuillEditor from '../../../../components/Editor/QuillEditorForm'
import {TsImageViewer } from '@/components'
 
 
 
改为 vue ant  form 控件，
 
 // 防止表单未注册
            fields.forEach(v => this.form.getFieldDecorator(v))

            // 当 model 发生改变时，为表单设置值
            this.$watch('editValue', () => {
            let obj = pick(this.editValue, fields)
            this.model && this.form.setFieldsValue(obj)
            })
//这几行代码很重要
 
 
<template>
  <div>
    <a-modal id="ReportList"
     :visible="visible"
     :title="title"
     :confirmLoading="loading"
     @cancel="() => {
       $emit('cancel')
     }">
      <a-spin :spinning="loading">
        <div>
            <span class="noteSpan">* </span>
            <span>巡查记录</span>
            <span class="noteCont" v-show="hasTextData"> ( 请填写巡查记录 )</span>
 
            <!--  v-if="visible" 该指令 可保证组件初始化，不会遗留上次编辑的内容-->
                <!-- v-model="overallHtmlValue" -->
　　　　
            <a-form :form="form" ref="dataForm">
                <a-form-item label="">
                   <QuillEditor
                    v-if="visible"
                    class="quillHeight"
                    :value="overallHtmlValue"
                    isEditorChange="1"

 

                    :class="overallDisabled?'quillbackcolor':''"
                    :editorOption="editorOption"
                    @changeCallBack="overallChange"
                ></QuillEditor>
                </a-form-item>
            </a-form>
 
            <!-- <QuillEditor
                v-if="visible"
                class="quillHeight"
                :value="overallHtmlValue"
                isEditorChange="1"

 

                :class="overallDisabled?'quillbackcolor':''"
                :editorOption="editorOption"
                @changeCallBack="overallChange"
            ></QuillEditor> -->
 
        </div>
        <div>
            <span>现场图片</span><span style="color:#9f9c9c"> ( 支持格式：.png、.jpg（ .jpeg）、 .bmp ，支持同时上传多张图片 )</span>
           <!-- :fileArray="showUpModel.fileArray" 为上传数组图片 -->
           <UpFile
            v-if="visible"
            :fileStyleCont="showUpModel.fileStyleCont"
            :fileStyleArr="showUpModel.fileStyleArr"
            :fileArray="showUpModel.fileArray"
            :upText="showUpModel.upText"
            @upFileData="getFileData"
            @getFlag="getFlag"
           >
           </UpFile>

 

        </div>
      </a-spin>
      <template slot="footer">
        <a-button @click="cancel">取消</a-button>
        <a-button  type="primary"  
        :diabled="disabledFlag"
        @click="saveOk" >{{title==='替换'?'替换':'保存'}}</a-button>
      </template>
    </a-modal>
  </div>

 

</template>

 

<script>
import QuillEditor from '../../../../components/Editor/QuillEditorForm'
import UpFile from '@/components/UpFile/UpFile'
const fields = ['overallHtmlValue']
  export default {
    components: {
      QuillEditor,
      UpFile
    },
    props: {
      visible: {
        // 组件显示
        type: Boolean,
        default: false,
      },
      title: {
        // 模块名称
        type: String,
        default: "",
      },
      width: {
        // 窗口宽度
        type: Number,
        default: 60,
      },
      loading: {
        type: Boolean,
        default: () => false,
      },
      RiskPointId: {
        // 风险点id
        type: String,
        default: "",
      },
      editValue:{
        type: String,
        default: "",
      },
      text:{//文本内容
           type: String,
            default: "",
        },
        VueUploadModels:{
            type:Array,
            default:[]
        },
      siteId: {
        // 工点id
        type: String,
        default: "",
      },
       disabledFlag: {
        type: Boolean,
        default: false
      },
     
    },
    data() {
        return {
            form: this.$form.createForm(this),
            editorOption: {
                debug: 'info',
                placeholder: '请输入',
                modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ align: [] }],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    [{ indent: '-1' }, { indent: '+1' }],
                    [{ script: 'sub' }, { script: 'super' }],
                    [{ font: [] }],
                    ,
                    [{ size: ['small', false, 'large', 'huge'] }],
                    [{ color: [] }, { background: [] }]
                ]
                }
            },
            hasTextData:false,
            overallDisabled:false,
            overallHtmlValue:'',//内容
            overallHtml: '',//内容html
            overallText: '',
           
            showUpModel:{
                btnTitle:'上传',//按钮名字
                fileStyleCont:'文件支持.doc， 不能超过100M',//格式描述
                fileStyleArr:['.png','.jpg','.jpeg','.bmp',
                'PNG','JPG','JPEG','BMP'
                ],//写你自己的上传文件类型,注意大小写都要写
                fileArray:[],//替换时显示使用
                upText:'上传现场图片',//上传按钮文本
            },
            fileData:[],//文件对象
            flag:false,//判断是否进行了图片操作(删除和上传)
        }
    },
    watch:{
        // editValue(newName, oldName) {
        //     console.log('newname',newName)
        //     if(this.title==="替换"){
        //         this.overallHtmlValue = newName;
        //         this.overallHtml = newName;//内容html
        //         this.overallText = this.text;
        //     }else{
        //         this.overallHtmlValue = '';
        //          this.overallHtml = '';//内容html
        //         this.overallText = '';
        //     }
        // }
    },
    created(){
            // 防止表单未注册
            fields.forEach(v => this.form.getFieldDecorator(v))

 

            // 当 model 发生改变时，为表单设置值
            this.$watch('editValue', () => {
            let obj = pick(this.editValue, fields)
            this.model && this.form.setFieldsValue(obj)
            })
       
        if(this.title==="替换"){
            this.overallHtmlValue = this.editValue;
            this.overallHtml = this.editValue;//内容html
            this.overallText = this.text;
            this.showUpModel.fileArray = this.VueUploadModels;//回显图片
        }else{
            this.overallHtmlValue = '';
            this.overallHtml = '';//内容html
            this.overallText = '';
        }
    },
    methods: {
        overallChange(html, text) {
            this.overallHtml = html //给父级传htmlStr
            this.overallText = text //给父级传内容
            console.log('text',text)
            if(this.overallText.length===0||this.overallText==='\n'){
                this.hasTextData = true;
            }else{
                this.hasTextData = false;
            }
        },
        // 上传图片
        // <!-- 上传后回调事件 -->
        getFileData(fileData){
            // console.log('fileData',fileData)
            this.fileData = fileData;
        },
        getFlag(e){
          this.flag = e;
        },
       cancel(){
        this.$emit('cancel')
        this.overallHtml = '';
        this.overallText = '';
       },
        saveOk(){
            // 如果没有填写不能保存
            if(this.overallText.length===0||this.overallText==='\n'){
                this.hasTextData = true;
                return
            }
              var obj =
                  {
                      htmlValue:this.overallHtml,//回传两个参数  1标签内容 2 文本内容
                      textValue:this.overallText,
                      // fileArray:this.fileData,//图片数组
                  };
            if(this.title==='替换'){
                if(this.flag){
                  obj.fileArray = this.fileData//操作了图片，回传的对象，
                }else{
                  obj.fileArray = [];
                  this.VueUploadModels.forEach(item => {
                    var objItem = item.response;
                    var itemData = {
                        FileId: objItem.FileId,
                        FileNewName: objItem.FileNewName,
                        FileOldName: objItem.FileOldName,
                        FileSize: objItem.FileSize,
                        FileType: objItem.FileType,
                        Url: objItem.Url
                    };
                    obj.fileArray .push(itemData)
                  });
                }
            }else{
              obj.fileArray = this.fileData
            }
            // return
            this.$emit('submit',obj)
            this.overallHtmlValue = "";
            //保存后就清空
            this.overallHtml = '';
            this.overallText = '';
               
        },
    },
   
  }
</script>
<style>
    .quillHeight .quill-editor {
        height: 258px!important;
    }
</style>
<style scoped>
    .noteSpan,.noteCont {
        color:red;
    }
    .titleSpan {
        margin-left:6px;
        margin-right:6px;
    }
    .quillHeight {
        margin-top:10px;
        width:100%;
        height: 300px;
    }
    .quillbackcolor {
        background-color: #ddd;
    }
</style>
posted @ 2022-02-22 18:04  天堂花草  阅读(192)  评论(0)    收藏  举报