发送内容通用组件

针对一信通平台发送短信内容的通用组件

安装

npm install --save flag-ui-sendcontent

依赖

 1. vue
 2. element-ui
 3. vue的prototype上需要注入$http(axios)提供接口调用
 4. vue的prototype上需要注入$alert(element UI)

使用说明

引入

import SendContent from 'flag-ui-sendcontent'

组件概况

组件参数说明

|传入参数 | 类型 |是否必填|默认 | 说明 | |:-------------------|:-------|:-----:|:------:|:----------------------------------------| |config |Object |是 |基本信息配置 |发送内容基本信息具体见下表 | |tpldata |Object |否 |null |发送模板对象需要.sync双向绑定,具体对象内容看下表 | |urls |Object |否 |null |请求路径对象 | |fileUrl |Object |是 |null |动态发送时，所上传的动态数据表的模版下载 |

详细参数说明

{
	//基本信息
	config: {
		title: '发送内容(控件label)',
		spSign: '[企业签名]',
		isLongText: false, //是否长短信,
        disableEdit: true //是否将输入框置灰,默认为true
	},
	//模板内容
	tpldata: {
		id: '模板id',
		text: '模板内容'
	},
	//请求的url参数
	urls: {
		sensitive: '敏感词url',
		dynDataUpload: 'http://10.0.0.194:8085/dynamicdata/upload',
        dynDataTplDownload: '/notexist'
	}，
	//动态模版下载url
	fileUrls: {
		//文件导入
    	import: API_SERVER + '/mdn/mdn-file/import',
		//下载导入文件模版CSVG格式，TXT格式，Xls格式，Xlsx格式
		downloadTplCsv: API_SERVER + '/common/download-file?filePath=/ext/smms/dynDataTemplate.csv',
		downloadTplTxt: API_SERVER + '/common/download-file?filePath=/ext/smms/dynDataTemplate.txt',
		downloadTplXls: API_SERVER + '/common/download-file?filePath=/ext/smms/dynDataTemplate.xls',
		downloadTplXlsx: API_SERVER + '/common/download-file?filePath=/ext/smms/dynDataTemplate.xlsx',
		//下载前缀downloadPrefix: API_SERVER + '/common/download-file?filePath='
	}
}

传出参数说明

|参数 | 类型 | 是否必填 |默认 | 说明 | |:-------------:|:-------:|:-----------:|:--------:|:------------------| |v-model |Object |是 |{} |双向绑定传出内容对象 |

	{
		text: '内容',
		isValid: true,
		dynData: {},
        sensitiveMatchList: [{type:'匹配类型：1 提醒类 2 禁止类', word:'敏感词'}],
		textTemplateId: '如果选中的是模板编辑传出模板id',
		sendNum: '发送条数'
	}

组件事件说明

|参数 | 类型 | 是否必填 |默认 | 说明 | |:-------------:|:-------:|:-----------:|:--------:|:------------------| |preview |Event |否 | |预览事件 | |chooseTpl |Event |否 | |选择模板事件 |

事例

<template>
	<div>
		<SendContent v-model="ctx" :config="config" @preview="preview" @chooseTpl="chooseTpl" :urls="{sensitive:'/sensitive-word/match'}"
        						 :tpldata.sync="tplData" :fileUrls="fileUrl"></SendContent>
	</div>
</template>
<script>
	import SendContent from 'flag-ui-sendcontent'

	export default {
		data() {
			return {
				ctx: {
					text:'这个是发送内容'
				},
				config: {
					title:'发送内容',
					spSign: '[xxdfd]',
					isLongText: false
				},
				tplData:{
					id: '10136654637'
					text:'您好，{姓名,5}！您的{手机号码,11}正在进行验证验证码是：{验证码,4}'
				}
			}
		},
		components: {
			SendContent
		}
	}
</script>

组件变更记录

2017-08-28

• 修改动态数据插入,敏感词提示
• 添加预览功能,样式修改

2017-09-04

• 预览长短信增加分条显示- 增加过滤内容中的空格选项
• 模版输入框最大长度限制

2017-10-18 v0.0.19

动态文件bugfix

2017-10-25 v0.0.23

新增参数config.disableEdit，控制textarea置灰

• v0.0.24 bugfix

2018-01-29 v0.0.27