vue自定义封装全局组件与使用

雨点打透心脏的1/2处 2023-06-13 09:37 30阅读 0赞

以前只知道第1种局部组件。每个页面都需要引入，注册，然后才能像2一样使用！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
下面学习一下全局组件的封装方法：

## 1、注册全局组件 ##

在项目文件src→util→component.js文件，注册全局组件。

import transitionPage from '@/components/transition/index' //滑入滑出组件
    import viewTextarea from '@/components/viewTextarea/index' //模拟textarea 展示富文本信息
    export default (Vue)=>{
      Vue.component("transitionPage", transitionPage)
      Vue.component("viewTextarea", viewTextarea)
    }

## 2、封装组件 ##

在项目文件src→components→transition→index.vue文件（后面两个名字自取），在这写要封装的内容。（样式和布局可以复制原有的源码）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

<template>
      <div ref="transform">
        
        <div v-if="visible" class="avue-mask" @click="close"></div>
        
        <transition class="nametra" name="slide-fade" mode="out-in">
          <div :class="visible?'transitionOpen':'transitionClose'" class="avue-drawer__wrapper" style="background-color: white">
            <div class="avue-drawer__content">
              
              <div class="avue-drawer__header">
                <span class="avue-drawer__title">{
       {tableName}}</span>
              </div>
              
              <div class="avue-drawer__body" style="height: calc(100% - 140px);overflow-y: auto;">
                <div class="el-scrollbar__view">
                  
                  <div v-if="type === 'messageData'">
                    <message-data ref="messageData" :objectData="objectData" :arrayData="arrayData"></message-data>
                  </div>
                  
                  <div v-if="type === 'messageSend'">
                    <send-message ref="sendMessage" :tableName="tableName" :dataFrom="editData"></send-message>
                  </div>
                  
                  <div v-if="type === 'editTemplate'">
                    <edit-template ref="editTemplate" :editTemplateId="editTemplateId" :editTemplateTitle="editTemplateTitle"></edit-template>
                  </div>
                </div>
              </div>
              
              <div class="avue-drawer__footer" style="position: relative">
                <span  v-if="type === 'messageSend'" style="margin-right: 10px" class="dialog-footer">
                    <el-button type="success" size="small" @click="sendMessageSubmit('saveSend')">发送</el-button>
                </span>
                <span  v-if="type === 'messageSend'" style="margin-right: 10px" class="dialog-footer">
                    <el-button type="primary" size="small" @click="sendMessageSubmit('save')">暂存</el-button>
                </span>
                <span  v-if="(type === 'financialPro' && tableName === '新增') || (type === 'healthyPro' && tableName === '新增')
                       || (type === 'healthInvest' && tableName === '新增') "style="margin-right: 10px" class="dialog-footer">
                   <el-button type="primary" size="small" @click="keepClose('save')">保存</el-button>
                </span>
                <span v-if="type === 'nodeConfigEdit' || type === 'editTemplate' || (type === 'giftInfo' && tableName === '编辑')
                       || (type === 'reportTemplate' && confirmEnding(tableName,'编辑'))" style="margin-right: 10px" class="dialog-footer">
                   <el-button type="primary" size="small" @click="editClose">修改</el-button>
                 </span>
                 <span class="dialog-footer">
                   <el-button type="default" size="small" @click="close">关闭</el-button>
                 </span>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </template>
    
    <script>
      /*引入需要的子组件--表单内容*/
      import creatView from '@/views/hygl/syslcpz/creatView/index'
      import cbView from '@/views/hygl/syslcspdbsx/cbView/index'
      import presentPoints from '@/views/hygl/rfjfzs/presentPoints/index'
      import memberInfo from '@/views/hygl/hyjbxx/memberInfo/index'
      import financialInvest from '@/views/hygl/rfjrtzjy/financialInvest/index'
      import healthyPro from '@/views/hygl/rfjkcpxx/healthyPro/index'
      import giftInfo from '@/views/hygl/rflpzlxx/giftInfo/index'
      import messageData from '@/views/hygl/rfyjjy/components/messageData'
      import editTemplate from '@/views/mp/wxmsgtemplate/editPage/index'
        export default {
          //注册
          components: {
            messageData,
            editTemplate,
            sendMessage
          },
          //向子组件传入数据
          props: {
            //通过type来判断需要那个组件
            type:{
              type: String,
              default: '',
            },
            //弹窗的标题
            tableName:{
              type: String,
              default: ''
            },
            //传入的对象
            objectData:{
              type: Object,
              default: function () {
                return {}
              },
            },
            //传入的数组
            arrayData:{
              type:Array,
              default: function () {
                return []
              },
            },
            //传入的字符串
            editTemplateId:{
              type: String,
              default: '',
            },
            editTemplateTitle:{
              type: String,
              default: '',
            }
          },
          data() {
            return {
              visible: true
            }
          },
          created(){},
          mounted(){ },
          methods: {
           confirmEnding(str, target) {
            var start = str.length-target.length;
            var arr = str.substr(start,target.length);
            if(arr == target){
              return true;
            }
            return false;
            },
            //未编辑直接关闭窗口
            close(){
              this.visible = false
              setTimeout(() => {
                if (this.type === 'messageData'){
                  this.$emit('messageDataClose')
                }else if (this.type === 'editTemplate'){
                  this.$emit('editTemplateClose')
                }else if (this.type === 'messageSend'){
                  this.$emit('messageSendDialongClose')
                }
              }, 300);
            },
            //消息发送 保存、保存并发送
            sendMessageSubmit(data){
              this.$refs.sendMessage.submitForm()
              if (this.$refs.sendMessage.dynamicValidate) {
                var row = this.$refs.sendMessage.editData
                var wzObject = this.$refs.sendMessage.wzObject
                var fileNameUrl = this.$refs.sendMessage.fileNameUrl
                var para = {}
                if(data === 'save'){
                  para.type = 1
                }else if (data === 'saveSend'){
                  para.type = 2
                }
                para.dsfs = false
                para.fsrid = row.fsrid
                wzObject['jsrid'] = JSON.stringify(row.jsrid)
                para.wz = JSON.stringify(wzObject)
                para.fsfs = row.fsfs
                para.jsrid = []
                for (var i = 0;i<row.jsrid.length;i++){
                  let m = row.jsrid[i].length
                  para.jsrid.push(row.jsrid[i][m-1])
                }
                var fileArray = []
                Object.keys(fileNameUrl).forEach(function(key){
                  //opPlaceholder 为占位符，用来区别key和value分界线
                  //可用split（'opPlaceholder'）切割获 key value
                  fileArray.push(key+ 'opPlaceholder' +fileNameUrl[key])
                });
                para.xxfj = fileArray.join(',')
                para.xxfjmc = row.xxfjmc.join(',');
                para.jsrid = para.jsrid.join(',');
                para.xxbt = row.xxbt
                para.xxnr = row.xxnr
                row.jssj?  para.jssj = row.jssj:  para.jssj = ''
                row.kssj?  para.kssj = row.kssj:  para.kssj = ''
                row.msrid?  para.msrid = row.msrid:  para.msrid = ''
                row.csrid?  para.csrid = row.csrid:  para.csrid = ''
                row.sfjj?  para.sfjj = row.sfjj:  para.sfjj = ''
                row.sfhf?  para.sfhf = row.sfhf:  para.sfhf = ''
                row.ggxx?  para.ggxx = row.ggxx:  para.ggxx = ''
                row.yhjf?  para.yhjf = row.yhjf:  para.yhjf = ''
                if(row.dsfssj){
                  para.dsfssj = row.dsfssj
                  para.dsfs = true
                }else{
                  para.dsfssj = ''
                  para.dsfs = false
                }
                this.$emit('messageSendClose', para)
              }
            },
            //保存按钮事件，点击保存将子组件的需提交的对象数据通过this.$emit向父组件传达
            keepClose(){
              if (this.type === 'financialInvest') {
                var financialInvestData =  this.$refs.financialInvest.dataFrom//子组件的数据
                this.$emit('healthyProAddClose',financialInvestData)//向父组件传数据
              }else if (this.type === 'creatView'){
                this.$refs.creatView.submitForm()//子组件中的表单校验
                if (this.$refs.creatView.dynamicValidate) {//全部校验通过再传数据
                  var financialProData = this.$refs.creatView.dataFrom
                  this.$emit('creatViewAdd', financialProData)
                }
              }else if (this.type === 'healthyPro') {
                this.$refs.healthyPro.submitForm()
                if (this.$refs.healthyPro.dynamicValidate) {
                  var healthyProData = this.$refs.healthyPro.dataFrom//传数据前可做数据处理后再传
                  if (healthyProData.cplx.length) {
                    healthyProData.cplx = healthyProData.cplx[healthyProData.cplx.length-1]
                  } else if ( healthyProData.cplx) {
                    healthyProData.cplx =  healthyProData.cplx
                  }
                  this.$emit('healthyProAddClose', healthyProData)
                }
              }else if (this.type === 'presentPoints') {
                this.$refs.presentPoints.submitForm()
                if (this.$refs.presentPoints.dynamicValidate) {
                  this.$refs.presentPoints.changeRadioTabs()
                  var presentPoints = this.$refs.presentPoints.dataFrom
                  this.$emit('presentPointsAddClose', presentPoints)
                }
              }else if (this.type === 'memberInfo') {
                this.$refs.memberInfo.submitForm()
                if (this.$refs.memberInfo.dynamicValidate) {
                  var memberInfo = {}
                  if (this.$refs.memberInfo.addType == 1){
                    memberInfo = this.$refs.memberInfo.perDataFrom
                  }else {
                    memberInfo = this.$refs.memberInfo.mecDataFrom
                  }
                  memberInfo.hylx = this.$refs.memberInfo.addType
                  this.$emit('memberInfoAddClose', memberInfo)
                }
              }
            },
            //编辑完关闭窗口函数     //写法同保存按钮
            editClose(){
              if (this.type === 'editTemplate') {
                setTimeout(() => {
                  this.$refs.editTemplate.editSubmit()
                  this.$emit('editTemplateClose','fresh')//fresh 为编辑成功后刷新页面
                }, 300);
              }else if (this.type === 'giftInfo'){
                this.$refs.giftInfo.submitForm()
                if (this.$refs.giftInfo.dynamicValidate) {
                  var dataFrom = this.$refs.giftInfo.dataFrom
                  this.$emit('giftInfoClose',dataFrom)
                }
              }
            }
          }
        }
    </script>
    
    <style scoped>
      .transitionOpen{
        width:60%;
        /*height:100px;*/
        /*position:static;*/
        animation:mymove .3s ;
        -moz-animation:mymove .3s ; /* Firefox */
        -webkit-animation:mymove .3s ; /* Safari and Chrome */
        -o-animation:mymove .3s ; /* Opera */
        -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
      }
      @keyframes mymove
      {
        0%   {width:0px}
        100% {width:60%}
      }
      .transitionClose{
        width: 0px;
        animation:closemove .3s ;
        -moz-animation:closemove .3s ; /* Firefox */
        -webkit-animation:closemove .3s ; /* Safari and Chrome */
        -o-animation:closemove .3s ; /* Opera */
        -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
      }
      @keyframes closemove
      {
        0%   {width:60%}
        100% {width:0px}
      }
    
    </style>

## 3、全局组件中的子组件 ##

因为每个页面的表单会有不一样，所以单独作为子组件单独建立。  
在需要自定义子组件的文件目录里：src→views→admin→sysxxfsgl→sendMessage→index.vue文件（后面两个名字自取），在这写要封装子组件数据表单内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]

<template>
      <div>
          <div class="avue-from">
            <el-form ref="form" :model="editData" label-width="140px">
              <el-row>
                <el-col :span="23">
                  <el-form-item label="接收人"  prop="jsrid" :rules="[ {type: 'array', required: true, message: '请选择接收人', trigger: 'blur' }]">
                    <el-cascader
                      :disabled="show"
                      style="width: 100%"
                      :show-all-levels="false"
                      :options="options"
                      :props="props"
                      v-model="editData.jsrid"
                      clearable></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="23">
                  <el-form-item label="主题" prop="xxbt" :rules="[ { required: true, message: '请输入标题', trigger: 'blur' }]">
                    <el-input size="small" :disabled="show" v-model="editData.xxbt"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="" prop="fsfs" style="display: inline-block" :rules="[ { required: true, message: '请选择发送方式', trigger: 'blur' }]">
                    
                    
                    <el-dropdown  style="width: 200px" @command="handleCommand">
                      <el-button :disabled="show" size="small">
                        {
       {commandTitle}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu v-if="!show" style="width: 110px" slot="dropdown">
                        <el-dropdown-item command="系统消息">系统消息</el-dropdown-item>
                        <el-dropdown-item command="微信发送">微信发送</el-dropdown-item>
                        <el-dropdown-item command="手机短信">手机短信</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                    
                    
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item style="display: inline-block;width: 100%">
                    <el-upload
                      :disabled="show"
                      style="display: inline-block"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :on-progress="uploadVideoProcess"
                      accept=".doc,.docx,.pdf.xls,.xlsx,.wps"
                      action="/admin/sys-file/upload"
                      :on-change="getFile">
                      <el-button :disabled="show" size="small" icon="el-icon-link" @click="changeLoading(true)">上传附件</el-button>
                    </el-upload>
                    <el-progress v-if="processFlag === true" :stroke-width="10" :percentage="processUploadPercent" style="margin-top:-25px;margin-left:120px; width: 200px"></el-progress>
                  </el-form-item>
                </el-col>
              </el-row>
              <div>
                <template v-for="(item,index) in fileList">
                  <el-row v-if="index % 2 == 0">
                    <el-col :span="11" v-if="fileList[index].response">
                      <el-form-item style="display: inline-block;margin: 0 auto" >
                        <div class="el-upload-list__item is-success" style="margin: 0 auto">
                          <a class="el-upload-list__item-name" style="margin-top: 0" :href="fileListUrl[fileList[index].uid]" >
                            <i class="el-icon-document" />{
       { item.name}}
                          </a>
                          <label class="el-upload-list__item-status-label">
                            <i class="el-icon-upload-success el-icon-circle-check"></i>
                          </label>
                          <i v-if="!show" class="el-icon-close" @click="deleteFile(item,index)"></i>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col v-if="index+1<fileList.length && fileList[index+1].response" :span="11">
                      <el-form-item style="display: inline-block; margin: 0 auto">
                        <div class="el-upload-list__item is-success" style="margin: 0 auto">
                          <a class="el-upload-list__item-name" style="margin-top: 0" :href="fileListUrl[fileList[index+1].uid]">
                            <i class="el-icon-document" />{
       { fileList[index+1].name}}
                          </a>
                          <label class="el-upload-list__item-status-label">
                            <i class="el-icon-upload-success el-icon-circle-check"></i>
                          </label>
                          <i v-if="!show" class="el-icon-close" @click="deleteFile(item,index+1)"></i>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </template>
              </div>
              
                
                  
                    
                    
                      
                      
                      
                      
                      
                      
                      
                      
                    
                    
                  
                
              
    
              <el-row>
                <el-col :span="23">
                  <el-form-item prop="xxnr" label="" style="margin-bottom: 30px;" :rules="[ {  required: true, message: '请输入发送内容', trigger: 'blur' }]">
                    <Tinymce v-if="(editData.fsfs === '2' || editData.fsfs === '4') && !show" ref="editor" v-model="editData.xxnr" value="1" :height="270" />
                    
                    <el-input v-if="(editData.fsfs === '1' || editData.fsfs === '3') && !show" type="textarea" :autosize="{ minRows: 6, maxRows: 10}" v-model="editData.xxnr"></el-input>
                    <view-textarea v-if="show" :data="editData.xxnr"></view-textarea>
                  </el-form-item>
                  
                    
                  
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="23">
                  <el-form-item label=" ">
                    <el-checkbox-group :disabled="show" v-model="checkList" @change="changeCheckList">
                      <el-checkbox label="sfjj">紧急</el-checkbox>
                      <el-checkbox label="sfhf">需回复</el-checkbox>
                      <el-checkbox label="ggxx">公告</el-checkbox>
                      <el-checkbox label="dsfs">定时发送</el-checkbox>
                      <el-checkbox label="yhjf" >阅后即焚</el-checkbox>
                      <el-checkbox label="csz">抄送至</el-checkbox>
                      <el-checkbox label="msz">密送至</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="this.checkList.indexOf('ggxx') !== -1">
                <el-col :span="23" >
                  <el-form-item label=" ">
                    <el-date-picker
                      :disabled="show"
                      style="width: 400px"
                      v-model="dateTimeRange"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="getDateTimeRange()">
                    </el-date-picker><br/>
                    <span style="color: rgb(225,204,102)">公告日期结束后，系统自动撤回置顶</span>
                  </el-form-item>
                </el-col>
            </el-row>
              <el-row v-if="this.checkList.indexOf('dsfs') !== -1">
                <el-col :span="23">
                  <el-form-item label=" ">
                    <el-date-picker
                      :disabled="show"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      style="width: 400px"
                      v-model="editData.dsfssj"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker><br/>
                    <span style="color: rgb(225,204,102)">消息将于上述时间定时发出</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="this.checkList.indexOf('csz') !== -1">
                <el-col :span="23">
                  <el-form-item label="抄送人：">
                      <el-cascader
                        :disabled="show"
                        style="width: 100%"
                        :options="options"
                        :props="props"
                        v-model="csridArray"
                        :show-all-levels="false"
                        @change="changeCSR"></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row  v-if="this.checkList.indexOf('msz') !== -1">
                <el-col :span="23">
                  <el-form-item label="密送人：">
                      <el-cascader
                        :disabled="show"
                        style="width: 100%"
                        :options="options"
                        :props="props"
                        v-model="msridArray"
                        :show-all-levels="false"
                        clearable
                        @change="changeMSR"></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              
    
    
              
                
                  
                    
                      
                      
                      
                    
                  
                
                  
                  
                    
                      
                      
                      
                      
                      
                      
                    
                  
                
              
            </el-form>
          </div>
        
        
      </div>
    </template>
    
    <script>
      import {mapGetters,mapState} from 'vuex'
      import Tinymce from '@/components/Tinymce'
      import {exportExcel, getFileService } from '@/util/util'
      import {fetchList} from '@/api/mp/wxtexttemplate'
      import {getReceiverList} from '@/api/admin/sysxxfsgl'
      import store from '@/store'
    
      export default {
        components:{
          Tinymce
        },
        props: {
          dataFrom:{
            type: Object,
            default: function () {
              return {};
            }
          },
          editData:{
            type: Object,
            default: function () {
              return {};
            }
          },
          tableName:{
            type: String,
            default: ''
          },
        },
        data() {
          return {
            headers: {
              Authorization: 'Bearer ' + store.getters.access_token
            },
            wjmcUrl: [],
            fileName:'',
            fileList: [],
            fileListUrl: [],
            fileNameUrl: [],
            fileExist:false,
            listLoading:false,
            fileviewURL:"",
            commandTitle: '',
            editData: {},
            dealerSelect: [],
            value: '',
            receiverList: [],
            TemplateList: [],
            // props: { multiple: false },
            props: { multiple: true },
            dynamicValidate: false,
            options: [],
            checkList:[],
            processFlag:false,
            processUploadPercent: 0,
            jsrArray: [],
            csridArray: [],
            msridArray: [],
            dateTimeRange:[],
            wzObject: {},
            show: true
          }
        },
        computed: {
          ...mapGetters(['permissions']),
          ...mapState({
            userInfo: state => state.user.userInfo
          }),
          permissionList() {
            return {
              addBtn: this.vaildData(this.permissions.hygl_syslcjdpz_add, false),
              delBtn: this.vaildData(this.permissions.hygl_syslcjdpz_del, false),
              editBtn: this.vaildData(this.permissions.hygl_syslcjdpz_edit, false),
              excelBtn:this.vaildData(this.permissions.hygl_syslcjdpz_excel, false)
            };
          },
          isPermissions(){
            return [
              this.vaildData(this.permissions.hygl_syslcjdpz_add, false),
              this.vaildData(this.permissions.hygl_syslcjdpz_edit, false),
              this.vaildData(this.permissions.hygl_syslcjdpz_del, false),
              this.vaildData(this.permissions.hygl_syslcjdpz_sj, false),
              this.vaildData(this.permissions.hygl_syslcjdpz_fh, false),
              this.vaildData(this.permissions.hygl_syslcjdpz_excel, false),
              this.vaildData(this.permissions.hygl_syslcjdpz_import, false)
            ]
          }
        },
        mounted(){
          this.getReceiverList()
          if (this.confirmEnding(this.tableName,'编辑') || this.confirmEnding(this.tableName,'新增')){
            this.show = false
          }
          if (this.tableName === '新增'){
            this.editData = {
              wz:'',
              jsrid: [],
              fsfs: '4'
            }
            this.commandTitle = '系统消息'
          }else {
            this.editData = JSON.parse(JSON.stringify(this.dataFrom))
            let wz = JSON.parse(this.editData.wz)
            if (this.editData.wz.indexOf('jsrid') !== -1){
              this.editData.jsrid = JSON.parse(wz.jsrid)
            }
            if (this.editData.wz.indexOf('msridArray') !== -1){
              this.msridArray = JSON.parse(wz.msridArray)
              this.changeMSR()
            }
            if (this.editData.wz.indexOf('csridArray') !== -1){
              this.csridArray = JSON.parse(wz.csridArray)
              this.changeCSR()
            }
            this.getcheckList()
            // this.editData.jsrid = JSON.parse(this.editData.wz)
            // this.editData.jsrid = JSON.parse(this.editData.wz)
            if (this.editData.fsfs && this.editData.fsfs == 4){
              this.commandTitle = '系统消息'
            } else if (this.editData.fsfs && this.editData.fsfs == 3){
              this.commandTitle = '微信发送'
            }else if (this.editData.fsfs && this.editData.fsfs == 1){
              this.commandTitle = '手机短息'
            }
            this.dateTimeRange=[]
            this.dateTimeRange.push(this.editData.kssj)
            this.dateTimeRange.push(this.editData.jssj)
          }
          this.editData.fsrid = this.userInfo.userId
          this.getFileInfo()
          this.getReceiverList()
          // this.getTemplateList()
          this.editData.xxfjmc=[]
        },
        methods: {
          // getJSR(){
          //   let idArray = []
          //   this.jsrArray.forEach((value) => {
          //     idArray.push(value[value.length-1])
          //   })
          //   this.editData.jsrid = idArray.join(',')
          // },
          confirmEnding(str, target) {
            // 请把你的代码写在这里
            var start = str.length-target.length;
            var arr = str.substr(start,target.length);
            if(arr == target){
              return true;
            }
            return false;
          },
          getcheckList(){
            this.checkList = []
            this.editData['sfjj'] == 1?this.checkList.push('sfjj'):0
            this.editData['sfhf'] == 1?this.checkList.push('sfhf'):0
            this.editData['ggxx'] == 1?this.checkList.push('ggxx'):0
            this.editData['dsfs'] == 1?this.checkList.push('dsfs'):0
            this.editData['yhjf'] == 1?this.checkList.push('yhjf'):0
            this.editData.wz.indexOf('msridArray') !== -1?this.checkList.push('msz'):0
            this.editData.wz.indexOf('csridArray') !== -1?this.checkList.push('csz'):0
          },
          getDateTimeRange(){
            this.editData.kssj = this.dateTimeRange[0]
            this.editData.jssj = this.dateTimeRange[1]
          },
          changeCSR(){
            let idArray = []
            this.wzObject['csridArray'] = JSON.stringify(this.csridArray)
            this.csridArray.forEach((value) => {
              idArray.push(value[value.length-1])
            })
            this.editData.csrid = idArray.join(',')
          },
          changeMSR(){
            let idArray = []
            this.wzObject['msridArray'] = JSON.stringify(this.msridArray)
            this.msridArray.forEach((value) => {
              idArray.push(value[value.length-1])
            })
            this.editData.msrid = idArray.join(',')
          },
          changeCheckList(){
            this.checkList.indexOf('sfjj') !== -1? this.editData['sfjj'] = 1 : this.editData['sfjj'] = 0
            this.checkList.indexOf('sfhf') !== -1? this.editData['sfhf'] = 1 : this.editData['sfhf'] = 0
            this.checkList.indexOf('ggxx') !== -1? this.editData['ggxx'] = 1 : this.editData['ggxx'] = 0
            this.checkList.indexOf('dsfs') !== -1? this.editData['dsfs'] = 1 : this.editData['dsfs'] = 0
            this.checkList.indexOf('yhjf') !== -1? this.editData['yhjf'] = 1 : this.editData['yhjf'] = 0
            if (this.checkList.indexOf('csz') !== -1) {
              this.csz = 1
            }else {
              this.csz = 0
              this.csridArray = []
              this.changeCSR()
            }
            if (this.checkList.indexOf('msz') !== -1) {
              this.msz = 1
            }else {
              this.msz = 0
              this.msridArray = []
              this.changeMSR()
            }
          },
          //删除文件
          deleteFile(item,index){
            this.dataFrom.xxfjmc.splice(index,1);
            for(var i=0;i<this.dataFrom.xxfjmc.length;i++){
              this.editData.xxfjmc.push(this.dataFrom.xxfjmc[i])
            }
            if ( this.editData.xxfj) {
              var xxfj = []
              if (this.editData.xxfj.indexOf(',') > 0) {
                xxfj = this.editData.xxfj.split(',')
              } else {
                xxfj.push(this.editData.xxfj)
              }
              var raw=[]
              for(var i=0;i<xxfj.length;i++){
                raw.push(xxfj[i].split('opPlaceholder')[3])
              }
              raw.splice(index,1);
            }
            delete this.fileListUrl[this.fileList[index].uid];
            // this.fileNameUrl.splice(index,1);
            this.fileList.splice(index,1);
            this.fileList.forEach((value,index) => {
              this.fileNameUrl.push(value.name + 'opPlaceholder' + value.uid+ 'opPlaceholder' + raw[index])
            })
          },
          changeLoading(bool){
            this.listLoading = bool
          },
          uploadVideoProcess(event, file, fileList){
              this.processFlag = true;
              this.processUploadPercent = file.percentage.toFixed(0);
          },
          handleAvatarSuccess(res, file) {
            this.processFlag = false;
            this.processUploadPercent = 0;
            this.listLoading = false
            this.wjmcUrl.push(URL.createObjectURL(file.raw)) ;
            this.fileName = res.data.bucketName + '-' + res.data.fileName;
            this.editData.xxfjmc.push(this.fileName)
          },
          getFile:function(file, fileList) {
            // this.fileNameUrl = []
            let data = {}
            let uid = file.uid
            var fileNameUrl=[]
            data[uid] = URL.createObjectURL(file.raw)
            this.fileListUrl[uid] = URL.createObjectURL(file.raw)
            fileList.forEach((value) => {
              fileNameUrl.push(value.name + 'opPlaceholder' + value.uid+ 'opPlaceholder' + URL.createObjectURL(value.raw))
            })
            this.fileNameUrl=fileNameUrl
            this.fileList = fileList
            this.$forceUpdate();
          },
          handleCommand(command) {
            if (command === '系统消息'){
              if (this.commandTitle !== '系统消息'){
                this.commandTitle = '系统消息'
                this.editData.fsfs = '4'
              }
            } else if (command === '微信发送'){
              if (this.commandTitle !== '微信发送'){
                this.commandTitle = '微信发送'
                this.editData.fsfs = '3'
              }
            }else if (command === '手机短信'){
              if (this.commandTitle !== '手机短信'){
                this.commandTitle = '手机短信'
                this.editData.fsfs = '1'
              }
            }
          },
          // getTemplateContent(){
          //   for (var i = 0;i<this.TemplateList.length;i++){
          //     if (this.TemplateList[i].id === this.editData.mbid) {
          //       this.editData.xxnr = this.TemplateList[i].templateContent
          //       this.$forceUpdate();
          //     }
          //   }
          // },
          // changeXxnr(){
          //  if (!this.editData.xxnr){
          //    this.getTemplateContent()
          //  }else {
          //    this.$confirm('此操作覆盖现有发送内容, 是否继续?', '提示', {
          //      confirmButtonText: '确定',
          //      cancelButtonText: '取消',
          //      type: 'warning'
          //    }).then(() => {
          //      this.getTemplateContent()
          //    }).catch(() => {
          //      this.$message({
          //        type: 'info',
          //        message: '已取消'
          //      });
          //    });
          //  }
          // },
          submitForm() {
            this.$refs['form'].validate((valid) => {
              if (valid) {
                this.dynamicValidate = true
              } else {
                this.$message.error('请按提示填写必填信息！')
                this.dynamicValidate = false
              }
            });
          },
          getReceiverList(){
            getReceiverList().then(res=>{
              this.options = res.data.data
              this.options = JSON.parse(JSON.stringify(this.options).replace(/name/g, 'label'))
              this.options = JSON.parse(JSON.stringify(this.options).replace(/children[0]/g, 'label'))
              // this.options = JSON.parse(JSON.stringify(this.options).replace(/name/g, 'value'))
            })
          },
          getFileInfo(){
            this.editData.xxfj === undefined? this.editData.xxfj= '': 0
            if ( this.editData.xxfj) {
              let xxfj = []
              if(this.editData.xxfj.indexOf(',')>0){
                xxfj=this.editData.xxfj.split(',')
              }else{
                xxfj.push(this.editData.xxfj)
              }
              let fileList = []
              let fileListUrl = []
              xxfj.forEach((value, index) =>{
                fileList[index] = {name: value.split('opPlaceholder')[1], response: 1,uid:value.split('opPlaceholder')[2]}
                fileListUrl[value.split('opPlaceholder')[2]] = value.split('opPlaceholder')[3]
                // fileList[index] = {name: value.split('opPlaceholder')[0], response: 1,uid:value.split('opPlaceholder')[1]}
                // fileListUrl[value.split('opPlaceholder')[1]] = value.split('opPlaceholder')[2]
              })
              this.fileList = fileList
              this.fileListUrl = fileListUrl
            }
          },
          getTemplateList(){
            var row = {
              isAll:true
            }
            fetchList(row).then(res=>{
              this.TemplateList = res.data.data.records
            })
          },
    
          saveOrSendMessage(){
          },
    
        }
      }
    </script>
    
    <style scoped>
    
    </style>

## 4、使用全局组件 ##

<transition-page v-if="DialogVisible" @messageSendClose="messageSendClose" @messageSendDialongClose="messageSendDialongClose" :editData="editData" type="messageSend" :DialogVisible="DialogVisible" :tableName="titleName"></transition-page>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115172238945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115172802203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191203150756977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70