功能描述

富文本编辑器，常用于新闻、通知、公告等信息的发布。 功能列表：
(1) 支持图片上传到服务器
(2) 支持视频上传到服务器
(3) 支持附件上传到服务器并下载

属性props

本控件props属性有3部分组成分别为： 1.控件本身属性 2.数据源属性

1.控件本身属性

参数	必填	数据类型	默认值	可选值	说明
option	是	Object			配置选项，结构为：{module:'模块编号', key:'文档编号(即文档主键值)',action:'当前操作类型'}
imageUrl	否	String	/file/upload		图片上传地址
videoUrl	否	String	/file/upload		视频上传地址
fileUrl	否	String	/file/upload		文件上传地址
disabled	否	Boolean			是否可编辑
value/v-model	否				绑定的编辑字段

2.数据源属性见data-source数据源的props属性

例1: 新闻发布

详细例子参见源码的新闻管理（sys_news）模块

<template>
    <x-table-edit ref="table" :data-source="{head:{module:'sys_news'},workflow:{titleField: 'title'},option:{privilege:true,keyField:true,attFile:true,initRow:row=>{row.nid=getUUID();row.sysid=$project.sysid;row._uidname=getUname();row._oidname=getOidName();row._time=getTime()}},save:{noSaveFields:['_uidname','_oidname','_time']}}"
                  :dic="[{head:{module:'sys_dic'},option:{dic:{name:'sys_dic_newsType',destroy:true}},data:{option:{id:'code',label:'name'}},query:{filter:[{type:'newsType'},{_pid:{'!=':'0'}}]}}]">
        <x-query slot="query">
            <x-query-item prop="title" opt="like" label="标题："/>
        </x-query>
<!--        <x-table-column prop="status" label="状态" width="80"/>-->
        <x-table-column prop="type" label="类型" width="80">
            <template slot-scope="scope" slot="show">
                {{scope.row.type | dic('sys_dic_newsType')}}
            </template>
        </x-table-column>
        <x-table-column prop="title" label="标题"/>
        <x-table-column prop="_uidname" label="创建者" width="80"/>
        <x-table-column prop="_oidname" label="创建者部门" width="150"/>
        <x-table-column prop="_time" label="创建时间" width="200"/>

        <x-dialog-edit slot="dialog" title="信息发布" slot-scope="scope" request append-to-body destroy-on-close :close-on-click-modal="false" fullscreen>
            <el-form label-position="right" label-width="100px" inline cols="4" style="height: 100%">
                <x-form-item v-if="!$project.sysid" label="所属系统:">
                    <x-select v-model="scope.row.sysid" :disabled="scope.action" :data-source="{head:{module:'sys_system'},option:{dic:{name:'sys_system'}},data:{option:{id:'sysid',label:'name'}}}" dialog-width="300px"/>
                </x-form-item>
                <x-form-item label="类型:">
                    <x-select v-model="scope.row.type" v-rules="[{type:'required'}]" :disabled="scope.action" :data-source="{head:{module:'sys_dic'},option:{dic:{name:'sys_dic_newsType',destroy:true}},data:{option:{id:'code',label:'name'}},query:{filter:[{type:'newsType'},{_pid:{'!=':'0'}}]}}" placeholder="请选择类型"/>
                </x-form-item>
                <x-form-item label="创建者:">
                    <x-input v-model="scope.row._uidname" :disabled="true"/>
                </x-form-item>
                <x-form-item label="创建者部门:">
                    <x-input v-model="scope.row._oidname" :disabled="true"/>
                </x-form-item>
                <x-form-item label="创建时间:">
                    <x-input v-model="scope.row._time" :disabled="true"/>
                </x-form-item>
                <x-form-item label="标题:" cols="4">
                    <x-input v-model="scope.row.title" v-rules="[{type: 'required'}]" :maxlength=500 :disabled="scope.action"/>
                </x-form-item>
                <x-form-item label="内容:" cols="4" class="sys-news-quill">
                    <x-quill :option="{module:'sys_news',key:scope.row.nid,action:scope.actionType}" v-model="scope.row.content" v-rules="[{type: 'required'}]" :disabled="scope.action"/>
                </x-form-item>
            </el-form>
            <el-button v-if="scope.actionType!='add'" slot="footer" type="warning" icon="el-icon-success" @click="openSysAudit">审 核</el-button>
            <sys-audit ref="sysAudit" module="sys_news" keyField="nid"/>
        </x-dialog-edit>
    </x-table-edit>
</template>

<script>
    export default {
        name: 'SysNews',
         data() {
            return {row: {}}
        },
        methods: {
            getUUID(){
                return tools.getUUID();
            },
            getUname(){
                return tools.getUname();
            },
            getOidName(){
                return tools.getOidName();
            },
            getTime(){
                return tools.dateFormat('YYYY-mm-dd HH:MM:SS', new Date());
            },
            openSysAudit(){
                this.$refs.sysAudit.open(this.$refs.table.getCurrSelection());
            }
        }
    }
</script>