382 lines
13 KiB
Vue
382 lines
13 KiB
Vue
<template>
|
|
<internal-detail-page :title="$route.query.title" :content-padding="0" :loading="loading">
|
|
<a-form :form="form">
|
|
<a-row>
|
|
<!--动态标题-->
|
|
<a-col :span="12">
|
|
<a-form-item :label="$t('standardRegulationLibrary.dynamicMessage.dynamicHeading')"
|
|
:labelCol="labelCol"
|
|
:wrapperCol="wrapperCol">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.dynamicMessage.dynamicHeading')"
|
|
:maxLength="50"
|
|
v-decorator="['dynamicHeading', validatorRules.dynamicHeading]" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<!--动态分类-->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
:label="$t('standardRegulationLibrary.dynamicMessage.dynamicCataloging')">
|
|
<j-dict-select-tag v-decorator="['dynamicClassification', validatorRules.dynamicClassification]"
|
|
dict-code="dynamic_news_type"
|
|
:placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.dynamicMessage.dynamicCataloging')" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<!--来源-->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
:label="$t('standardRegulationLibrary.dynamicMessage.source')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.dynamicMessage.source')"
|
|
:maxLength="50"
|
|
v-decorator="['source', validatorRules.source]" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<!--推送范围-->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol"
|
|
:wrapperCol="wrapperCol"
|
|
:label="$t('standardRegulationLibrary.dynamicMessage.pushRange')">
|
|
<user-selection v-decorator="['pushRange', validatorRules.pushRange]"
|
|
type="checkbox"
|
|
:name-str="modal.pushRange_dictText"
|
|
:placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.dynamicMessage.pushRange')" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<!--推送范围-->
|
|
<!--<a-form-item :labelCol="lineLabelCol"-->
|
|
<!-- :wrapperCol="lineWrapperCol"-->
|
|
<!-- :label="$t('standardRegulationLibrary.dynamicMessage.pushRange')">-->
|
|
<!-- <user-selection v-decorator="['pushRange', validatorRules.pushRange]"-->
|
|
<!-- type="checkbox"-->
|
|
<!-- :name-str="modal.pushRange_dictText"-->
|
|
<!-- :placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.dynamicMessage.pushRange')" />-->
|
|
<!--</a-form-item>-->
|
|
<!--动态详情-->
|
|
<a-form-item v-if="needWriteDynamicDetails"
|
|
:labelCol="lineLabelCol"
|
|
:wrapperCol="lineWrapperCol"
|
|
:label="$t('standardRegulationLibrary.dynamicMessage.dynamicDetails')">
|
|
<u-editor :content="ueContent" :config="config" ref="uEditor" @editor-onChange="uEditorChange" />
|
|
</a-form-item>
|
|
<!--资料文本-->
|
|
<a-form-item :labelCol="lineLabelCol"
|
|
:wrapperCol="lineWrapperCol"
|
|
:label="$t('standardRegulationLibrary.dynamicMessage.dataText')">
|
|
<j-upload v-decorator="['dataText', validatorRules.dataText]"
|
|
return-id
|
|
:number="0"
|
|
:file-type="fileType"
|
|
:multiple="true" />
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<div class="bottom-operate-box">
|
|
<!--取消-->
|
|
<a-button type="primary" ghost :loading="loading" @click="handleCancel">{{ $t('cancel') }}</a-button>
|
|
<!--保存-->
|
|
<a-button type="primary" :loading="loading" @click="handleSave" v-has="'dynamicMessage:save'">{{
|
|
$t('preservation')
|
|
}}
|
|
</a-button>
|
|
<!--发布-->
|
|
<a-button type="primary" :loading="loading" @click="handlePublish" v-has="'dynamicMessage:release'">{{
|
|
$t('release')
|
|
}}
|
|
</a-button>
|
|
</div>
|
|
</internal-detail-page>
|
|
</template>
|
|
|
|
<script>
|
|
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
|
|
import UserSelection from '../../../components/selection/UserSelection.vue'
|
|
import UEditor from '../../../components/uEditor/UEditor.vue'
|
|
import { saveDynamicMessage, getDynamicMessageById, releaseDynamicMessage } from '../../../api/standardRegulationLibraryApi.js'
|
|
|
|
// 本系统限制可以上传的文件格式
|
|
const CAN_UPLOAD_FILE_TYPE = 'pdf,docx,doc,xlsx,xls,ppt,pptx,jpg,jpeg,png'
|
|
|
|
export default {
|
|
name: 'DynamicMessageFormPage',
|
|
components: { UEditor, InternalDetailPage, UserSelection },
|
|
data () {
|
|
return {
|
|
form: this.$form.createForm(this),
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 6 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 16 }
|
|
},
|
|
lineLabelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 3 }
|
|
},
|
|
lineWrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 20 }
|
|
},
|
|
ueContent: '',
|
|
// UE编辑器配置
|
|
config: {
|
|
// 可以在此处定义工具栏的内容
|
|
toolbars: [
|
|
[
|
|
'undo', // 撤销
|
|
'redo', // 重做
|
|
'bold', // 加粗
|
|
'italic', // 斜体
|
|
'underline', // 下划线
|
|
'strikethrough', // 删除线
|
|
'subscript', // 下标
|
|
'superscript', // 上标
|
|
'fontborder', // 字符边框
|
|
'fontfamily', // 字体
|
|
'fontsize', // 字号
|
|
'forecolor', // 字体颜色
|
|
// 'backcolor', // 背景色
|
|
'paragraph', // 段落格式
|
|
'customstyle', // 自定义标题
|
|
'indent', // 首行缩进
|
|
'justifyleft', // 居左对齐
|
|
'fullscreen', // 全屏
|
|
'justifyright', // 居右对齐
|
|
'justifycenter', // 居中对齐
|
|
'justifyjustify', // 两端对齐
|
|
'lineheight', // 行间距,
|
|
'rowspacingtop', // 段前距
|
|
'rowspacingbottom', // 段后距
|
|
'directionalityltr', // 从左向右输入
|
|
'directionalityrtl', // 从右向左输入
|
|
'cleardoc', // 清空文档
|
|
'formatmatch', // 格式刷
|
|
'removeformat', // 清除格式
|
|
'source', // 源代码
|
|
'blockquote', // 引用
|
|
'pasteplain', // 纯文本粘贴模式
|
|
'selectall', // 全选
|
|
'horizontal', // 分隔线
|
|
'time', // 时间
|
|
'date', // 日期
|
|
'link', // 超链接
|
|
'unlink', // 取消链接
|
|
// 'background', // 背景
|
|
// 'simpleupload', // 单图上传
|
|
'imagenone', // 默认
|
|
'imageleft', // 左浮动
|
|
'imageright', // 右浮动
|
|
'imagecenter', // 居中
|
|
'touppercase', // 字母大写
|
|
'tolowercase', // 字母小写
|
|
'emotion', // 表情
|
|
'spechars', // 特殊字符
|
|
'searchreplace', // 查询替换
|
|
'insertunorderedlist', // 无序列表
|
|
'insertorderedlist', // 有序列表
|
|
'pagebreak', // 分页
|
|
'insertframe', // 插入Iframe
|
|
'charts', // 图表
|
|
'edittip ', // 编辑提示
|
|
'autotypeset', // 自动排版
|
|
'drafts', // 从草稿箱加载
|
|
'inserttable', // 插入表格
|
|
'deletetable', // 删除表格,
|
|
'insertparagraphbeforetable', // ”表格前插入行”
|
|
'insertrow', // 前插入行
|
|
'insertcol', // 前插入列
|
|
'mergeright', // 右合并单元格
|
|
'mergedown', // 下合并单元格
|
|
'deleterow', // 删除行
|
|
'deletecol', // 删除列
|
|
'splittorows', // 拆分成行
|
|
'splittocols', // 拆分成列
|
|
'splittocells', // 完全拆分单元格
|
|
'inserttitle', // 插入标题
|
|
'deletecaption', // 删除表格标题,
|
|
'mergecells', // 合并多个单元格
|
|
'edittable', // 表格属性
|
|
'edittd' // 单元格属性
|
|
]
|
|
],
|
|
autoHeightEnabled: false,
|
|
autoFloatEnabled: false,
|
|
initialContent: '', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
|
|
autoClearinitialContent: true, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
|
|
initialFrameWidth: '100%',
|
|
elementPathEnabled: false,
|
|
initialFrameHeight: 300,
|
|
maximumWords: 4000,
|
|
BaseUrl: '',
|
|
UEDITOR_HOME_URL: '/ueditor/',
|
|
editTableIndex: 1
|
|
},
|
|
fileType: CAN_UPLOAD_FILE_TYPE,
|
|
validatorRules: {
|
|
// 动态标题
|
|
dynamicHeading: {
|
|
rules: [{
|
|
required: true,
|
|
message: this.$t('pleaseEnter') + this.$t('standardRegulationLibrary.dynamicMessage.dynamicHeading')
|
|
}],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 动态分类
|
|
dynamicClassification: {
|
|
rules: [{
|
|
required: true,
|
|
message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.dynamicMessage.dynamicCataloging')
|
|
}],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 来源
|
|
source: {
|
|
rules: [{
|
|
required: true,
|
|
message: this.$t('pleaseEnter') + this.$t('standardRegulationLibrary.dynamicMessage.source')
|
|
}],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 推送范围
|
|
pushRange: {
|
|
rules: [{
|
|
required: false,
|
|
message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.dynamicMessage.pushRange')
|
|
}],
|
|
validateTrigger: 'change'
|
|
},
|
|
// 资料文本
|
|
dataText: {
|
|
rules: [{
|
|
required: false,
|
|
message: this.$t('uploadFile.pleaseUpload') + this.$t('standardRegulationLibrary.dynamicMessage.dataText')
|
|
}],
|
|
validateTrigger: 'change'
|
|
}
|
|
},
|
|
loading: false,
|
|
modal: {},
|
|
needWritePushRange: true, // 是否需要填写推送范围
|
|
needWriteDynamicDetails: true // 是否需要填写动态详情
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.$route.query.id) {
|
|
this.initFormData()
|
|
}
|
|
},
|
|
methods: {
|
|
initFormData () {
|
|
this.loading = true
|
|
getDynamicMessageById({ id: this.$route.query.id, type: 'edit' }).then(res => {
|
|
if (res.success) {
|
|
this.modal = res.result || {}
|
|
this.$nextTick(() => {
|
|
this.fileType = CAN_UPLOAD_FILE_TYPE
|
|
this.needWritePushRange = true
|
|
this.form.setFieldsValue(this.modal)
|
|
this.ueContent = this.modal.dynamicDetails
|
|
this.$refs.uEditor.setContent(this.ueContent)
|
|
})
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 获取表格内容
|
|
uEditorChange (val) {
|
|
console.log('--------------uEditorChange------------', val)
|
|
this.ueContent = val
|
|
},
|
|
handleSave () {
|
|
this.form.validateFields((errors, values) => {
|
|
if (!errors) {
|
|
const formData = Object.assign(this.modal, values)
|
|
formData.dynamicDetails = this.ueContent
|
|
this.loading = true
|
|
saveDynamicMessage(formData).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.$router.go(-1)
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleCatalogingChange (value) {
|
|
this.fileType = CAN_UPLOAD_FILE_TYPE
|
|
this.needWritePushRange = true
|
|
this.needWriteDynamicDetails = true
|
|
},
|
|
handlePublish () {
|
|
this.form.validateFields((errors, values) => {
|
|
if (!errors) {
|
|
const formData = Object.assign(this.modal, values)
|
|
formData.dynamicDetails = this.ueContent
|
|
this.loading = true
|
|
releaseDynamicMessage(formData).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.$router.go(-1)
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleCancel () {
|
|
this.$router.go(-1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
/deep/ .edui-default .edui-editor {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/deep/ .edui-default .edui-toolbar {
|
|
line-height: 20px;
|
|
}
|
|
|
|
.bottom-operate-box {
|
|
height: 52px;
|
|
padding: 10px 32px;
|
|
text-align: right;
|
|
|
|
.ant-btn {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
.ant-form {
|
|
height: calc(100% - 52px);
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
padding: 32px 0;
|
|
|
|
/deep/ .ant-form-item-label {
|
|
margin-right: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
</style>
|