提交 49e14f50 编写于 作者: KK's avatar KK

富文本调整

上级 6b3d802f
<template>
<div class="app-mob-rich-text-editor" @click="open">
<div v-html="reValue"></div>
<ion-icon class="app-mob-rich-text-editor-icon" v-if="!reValue" name="options-outline" @click="open"></ion-icon>
<ion-icon class="app-mob-rich-text-editor-icon" v-if="!reValue" name="options-outline" @click.stop="open"></ion-icon>
</div>
</template>
<script lang = 'ts'>
import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
import { Vue, Component, Prop, Model, Watch,Provide } from 'vue-property-decorator';
import { Environment } from '@/environments/environment';
import qs from 'qs';
@Component({})
export default class AppRichTextEditor extends Vue {
......@@ -37,6 +39,92 @@ export default class AppRichTextEditor extends Vue {
this.$emit("change", value);
}
/**
* 上传params
*
* @type {Array<any>}
* @memberof AppRichTextEditor
*/
public upload_params: Array<any> = [];
/**
* 导出params
*
* @type {Array<any>}
* @memberof AppRichTextEditor
*/
public export_params:any ;
/**
* 上传参数
*
* @type {string}
* @memberof AppRichTextEditor
*/
@Prop() public uploadparams?: any;
/**
* 下载参数
*
* @type {string}
* @memberof AppRichTextEditor
*/
@Prop() public exportparams?: any;
/**
* 视图参数
*
* @type {*}
* @memberof AppRichTextEditor
*/
@Prop() public viewparams!: any;
/**
* 视图上下文
*
* @type {*}
* @memberof AppRichTextEditor
*/
@Prop() public context!: any;
/**
* 表单数据
*
* @type {string}
* @memberof AppRichTextEditor
*/
@Prop() public data!: string;
/**
* 上传文件路径
*
* @memberof AppMobFileUpload
*/
public uploadUrl = Environment.BaseUrl + Environment.UploadFile;
/**
* 下载文件路径
*
* @memberof AppMobFileUpload
*/
public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
/**
* 文件列表
*
* @memberof AppMobFileUpload
*/
@Provide() public files: Array<any> = [];
/**
* 开发模式文件数组
*
* @private
* @type {Array<any>}
* @memberof AppMobFileUpload
*/
private devFiles: Array<any> = [];
/**
* 打开富文本
*
......@@ -44,7 +132,7 @@ export default class AppRichTextEditor extends Vue {
* @memberof AppRichTextEditor
*/
public open(){
this.openPopupModal({ viewname: 'app-rich-text', title: 'app-rich-text'},{},{value:this.value});
this.openPopupModal({ viewname: 'app-rich-text', title: 'app-rich-text'},{},{value:this.value,uploadUrl:this.uploadUrl,export_params:this.export_params});
}
/**
......@@ -60,6 +148,43 @@ export default class AppRichTextEditor extends Vue {
}
}
/**
* 数据处理
*
* @private
* @memberof AppMobFileUpload
*/
private dataProcess(): void {
const { context: uploadContext, param: uploadParam }
= this.$viewTool.formatNavigateParam(this.uploadparams, {}, this.context, this.viewparams, JSON.parse(this.data));
const { context: exportContext, param: exportParam }
= this.$viewTool.formatNavigateParam(this.exportparams, {}, this.context, this.viewparams, JSON.parse(this.data));
this.export_params ={exportParamStr: qs.stringify(exportParam, { delimiter: '&' }),exportContextStr:qs.stringify(exportContext, { delimiter: '&' })};
let _uploadUrl = `${Environment.BaseUrl}${Environment.UploadFile}`;
const uploadContextStr: string = qs.stringify(uploadContext, { delimiter: '&' });
const uploadParamStr: string = qs.stringify(uploadParam, { delimiter: '&' });
if (!Object.is(uploadContextStr, '') ) {
_uploadUrl = `${_uploadUrl}?${uploadContextStr}`;
}
if(!Object.is(uploadParamStr, '')){
_uploadUrl += `&${uploadParamStr}`;
}
this.uploadUrl = _uploadUrl;
}
/**
* 生命周期
*
* @private
* @memberof AppMobFileUpload
*/
public mounted(){
this.dataProcess();
}
}
</script>
<style lang="less">
......
......@@ -65,7 +65,7 @@ export default class AppRichTextEditor extends Vue {
* @type {string}
* @memberof AppRichTextEditor
*/
public uploadUrl = Environment.UploadFile;
protected uploadUrl :string = "";
/**
* 下载路径
......@@ -75,6 +75,14 @@ export default class AppRichTextEditor extends Vue {
*/
public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
/**
* 下载参数
*
* @type {string}
* @memberof AppRichTextEditor
*/
public export_params:any = {};
/**
* 双向绑定值
*
......@@ -90,7 +98,22 @@ export default class AppRichTextEditor extends Vue {
* @memberof AppRichTextEditor
*/
public mounted() {
this.resloutValue = JSON.parse(this._viewparams).value?JSON.parse(this._viewparams).value:"";
this.getParms();
}
/**
* 获取模态参数
*
* @type {string}
* @memberof AppRichTextEditor
*/
public getParms(){
let parm :any= JSON.parse(this._viewparams);
if(parm){
this.resloutValue = parm.value?parm.value:"";
this.uploadUrl = parm.uploadUrl?parm.uploadUrl:"";
this.export_params = parm.export_params?parm.export_params:{};
}
}
/**
......@@ -143,6 +166,7 @@ export default class AppRichTextEditor extends Vue {
* @memberof AppRichTextEditor
*/
protected afterRead(file: any, detail: any): void {
alert(this.uploadUrl)
const params = new FormData();
params.append("file", file.file, file.file.name);
const config = {
......@@ -171,12 +195,16 @@ export default class AppRichTextEditor extends Vue {
* @memberof AppRichTextEditor
*/
private dataProcess(file: any): void {
let _uploadUrl = `${Environment.BaseUrl}${Environment.UploadFile}`;
this.uploadUrl = _uploadUrl;
console.log(file);
let _downloadUrl = `${this.downloadUrl}/${file.id}`;
file.isImage = true;
if (!Object.is(this.export_params.exportContextStr, '')) {
_downloadUrl = `${_downloadUrl}?${this.export_params.exportContextStr}`;
}
if(!Object.is(this.export_params.exportParamStr, '')){
_downloadUrl += `&${this.export_params.exportParamStr}`;
}
file.url = _downloadUrl;
this.resloutValue = this.resloutValue + '<img src="' + file.url + '" alt="">';
this.resloutValue = this.resloutValue + '<img src="' + file.url + '" alt="'+file.filename+'">';
}
}
</script>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册