以前只知道第1种局部组件。每个页面都需要引入，注册，然后才能像2一样使用！
下面学习一下全局组件的封装方法：
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文件（后面两个名字自取），在这写要封装的内容。（样式和布局可以复制原有的源码）
<template>
<div ref="transform">
<!--1.关闭按钮-->
<div v-if="visible" class="avue-mask" @click="close"></div>
<!--2.弹窗内容-->
<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">
<!--2.1弹窗标题-->
<div class="avue-drawer__header">
<span class="avue-drawer__title">{{tableName}}</span>
</div>
<!--2.2弹窗数据表单，用子组件方式传入，可根据type类型显示对应表单，满足不同页面的表单需求-->
<div class="avue-drawer__body" style="height: calc(100% - 140px);overflow-y: auto;">
<div class="el-scrollbar__view">
<!--2.2.1会员系统-客户建议-意见建议-回复记录-->
<div v-if="type === 'messageData'">
<message-data ref="messageData" :objectData="objectData" :arrayData="arrayData"></message-data>
</div>
<!--2.2.2消息管理-消息发送-->
<div v-if="type === 'messageSend'">
<send-message ref="sendMessage" :tableName="tableName" :dataFrom="editData"></send-message>
</div>
<!--2.2.3微信中心-微信管理-模版参数-编辑弹窗-->
<div v-if="type === 'editTemplate'">
<edit-template ref="editTemplate" :editTemplateId="editTemplateId" :editTemplateTitle="editTemplateTitle"></edit-template>
</div>
</div>
</div>
<!--2.3底部右下角按钮，可根据type类型显示对应按钮，满足不同页面的按钮需求-->
<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文件（后面两个名字自取），在这写要封装子组件数据表单内容。
<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-radio v-model="editData.fsfs" label="1" border size="medium">短信</el-radio>-->
<!--<el-radio v-model="editData.fsfs" label="2" border size="medium">邮件</el-radio>-->
<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-radio v-model="editData.fsfs" label="4" border size="medium">系统消息</el-radio>-->
<!--<el-radio v-model="editData.fsfs" label="3" border size="medium">微信</el-radio>-->
</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 label="内容模板">-->
<!--<el-select style="width: 100%" v-model="editData.mbid" placeholder="请选择引入模板" @change="changeXxnr">-->
<!--<el-option-->
<!--v-for="item in TemplateList"-->
<!--:key="item.id"-->
<!--:label="item.templateName"-->
<!--:value="item.id"-->
<!--:disabled="item.disabled">-->
<!--<div style="width:200px; float: left" :title="item.templateContent">{{ item.templateName }}</div>-->
<!--<div :title="item.templateContent" style="width:100px; float: left">{{ item.templateContent }}</div>-->
<!--<!–<div style="width:100px; float: left">{{ item.school }}</div>–>-->
<!--</el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--</el-row>-->
<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" />
<!--<view-textarea v-if="show" :data="dataFrom.xxnr"></view-textarea>-->
<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-form-item label="发送内容">-->
<!---->
<!--</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>
<!--{{this.editData.jsrid}}-->
<!--<el-row>-->
<!--<el-col :span="12">-->
<!--<el-form-item label="定时发送">-->
<!--<el-switch-->
<!--v-model="dataFrom.dsfs"-->
<!--active-color="#13ce66"-->
<!--inactive-color="#ff4949">-->
<!--</el-switch>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--<el-col :span="12">-->
<!--<el-form-item label="发送时间">-->
<!--<el-date-picker-->
<!--style="width: 100%"-->
<!--v-model="dataFrom.fsrq"-->
<!--align="right"-->
<!--type="date"-->
<!--placeholder="选择日期"-->
<!--:picker-options="pickerOptions">-->
<!--</el-date-picker>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--</el-row>-->
</el-form>
</div>
<!--<percent-transition v-if="isEdit" @nodeTransitionClose="nodeTransitionClose" tableName="编辑"-->
<!--:nodeConfigDialogVisible="isEdit" :editData="editData"></percent-transition>-->
</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>
