fuhao
/
board_publish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(预置信息界面优化):

This commit is contained in:
fuhao 2024-09-10 16:37:05 +08:00
parent ed64e47598
commit 2d8812212c
No known key found for this signature in database
2 changed files with 158 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ruoyi-ui/src/views/board/component/TextPreview.vue
View File

@ -35,7 +35,7 @@ export default {
};
},
props: {
fontStyle: {
fontFamily: {
type: String,
default: 'normal',
},
@ -73,7 +73,15 @@ export default {
},
content: {
type: String,
default: '这里是示例内容，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
default: '这里是示例内容',
},
horizontalCenter: {
type: Boolean,
default: false,
},
verticalCenter: {
type: Boolean,
default: false,
},
},
computed: {
@ -85,20 +93,19 @@ export default {
background: '#000000',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
alignItems: this.verticalCenter ? 'center' : 'flex-start',
justifyContent: this.horizontalCenter ? 'center' : 'flex-start',
};
},
textStyle() {
return {
position: 'absolute',
top: `${-this.fontY * this.scale}px`,
left: `${this.fontX * this.scale}px`,
fontStyle: this.fontStyle,
fontFamily: this.fontFamily,
whiteSpace: 'preserve-breaks',
color: this.fontColor,
fontSize: `${this.fontSize * this.scale}px`,
letterSpacing: `${this.letterSpacing * this.scale}px`,
lineHeight: `${this.lineHeight}`,
transform: `translate(${this.horizontalCenter ? this.fontX * this.scale : this.fontX}px, ${this.verticalCenter ? this.fontY * this.scale : this.fontY}px)`,
};
},
},

255
ruoyi-ui/src/views/board/content/index.vue
View File

@ -60,14 +60,14 @@
</el-row>
<el-table v-loading="loading" :data="contentList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="唯一编号" align="center" prop="id" />
<el-table-column label="内容模版名称" align="center" prop="name" />
<el-table-column label="情报板尺寸" align="center" prop="boardSizeTypeName" />
<el-table-column label="信息类型" align="center" prop="typeName" />
<el-table-column label="预置内容" align="center" prop="content" />
<el-table-column label="播放时间" align="center" prop="playTime" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="唯一编号" align="center" prop="id"/>
<el-table-column label="内容模版名称" align="center" prop="name"/>
<el-table-column label="情报板尺寸" align="center" prop="boardSizeTypeName"/>
<el-table-column label="信息类型" align="center" prop="typeName"/>
<el-table-column label="预置内容" align="center" prop="content"/>
<el-table-column label="播放时间" align="center" prop="playTime"/>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -97,85 +97,114 @@
/>
<!-- 添加或修改预置信息及模版对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="auto">
<el-form-item label="内容模版名称" prop="name">
<el-input v-model="form.name" placeholder="请输入预置信息名称" />
</el-form-item>
<el-form-item label="预置信息类型" prop="infoType">
<el-cascader
v-model="form.infoType"
:options="planTypeOptions"
:props="{lable: 'lable', value: 'id', expandTrigger:'hover', emitPath: false}"
/>
</el-form-item>
<el-form-item label="情报板尺寸" prop="boardSizeType">
<el-select
v-model="form.boardSizeType"
placeholder="请选择">
<el-option
v-for="dict in this.boardTypeOptions"
:key="dict.id"
:label="dict.name"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item label="预置内容" prop="content">
<el-input v-model="form.content" placeholder="请输入预置内容"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="字体样式" prop="fontStyle">
<el-select
v-model="form.fontStyle"
placeholder="请选择字体样式">
<el-option
v-for="dict in dict.type.font_style"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="字体颜色" prop="fontColor">
<el-select
v-model="form.fontColor"
placeholder="请选择字体颜色">
<el-option
v-for="dict in dict.type.font_color"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="字体大小" prop="fontSize">
<el-input-number :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" />
</el-form-item>
<el-form-item label="字体间距" prop="letterSpacing">
<el-input-number :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" />
</el-form-item>
<el-form-item label="字体坐标X" prop="fontPositionX">
<el-input-number v-model="form.fontPositionX" placeholder="请输入字体坐标X" />
</el-form-item>
<el-form-item label="字体坐标Y" prop="fontPositionY">
<el-input-number v-model="form.fontPositionY" placeholder="请输入字体坐标Y" />
</el-form-item>
<el-form-item label="播放时间" prop="playTime">
<el-input-number :min="0" v-model="form.playTime" placeholder="请输入播放时间" />
</el-form-item>
<text-preview
fontStyle="SongTi"
:fontSize="form.fontSize"
:letterSpacing="form.letterSpacing"
:fontX="form.fontPositionX"
:fontY="form.fontPositionY"
:backgroundWidth="bgSize.width"
:backgroundHeight="bgSize.height"
:lineHeight="1"
:content="form.content" />
<el-row :gutter="0">
<el-col :span="8">
<el-form-item label="内容模版名称" prop="name">
<el-input v-model="form.name" placeholder="请输入预置信息名称"/>
</el-form-item>
<el-form-item label="预置信息类型" prop="infoType">
<el-cascader
v-model="form.infoType"
:options="planTypeOptions"
:props="{lable: 'lable', value: 'id', expandTrigger:'hover', emitPath: false}"
/>
</el-form-item>
<el-form-item label="情报板尺寸" prop="boardSizeType">
<el-select
v-model="form.boardSizeType"
placeholder="请选择">
<el-option
v-for="dict in this.boardTypeOptions"
:key="dict.id"
:label="dict.name"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item label="预置内容" prop="content">
<el-input type="textarea" v-model="form.content" placeholder="请输入预置内容"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="字体大小" prop="fontSize">
<el-input-number :controls="false" :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" size="small" />
</el-form-item>
<el-form-item label="字体间距" prop="letterSpacing">
<el-input-number :controls="false" :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" size="small" />
</el-form-item>
<el-form-item label="字体坐标X" prop="fontPositionX">
<el-input-number :controls="false" v-model="form.fontPositionX" placeholder="请输入字体坐标X" size="small"/>
</el-form-item>
<el-form-item label="字体坐标Y" prop="fontPositionY">
<el-input-number :controls="false" v-model="form.fontPositionY" placeholder="请输入字体坐标Y" size="small"/>
</el-form-item>
<el-form-item label="播放时间" prop="playTime">
<el-input-number :controls="false" :min="0" v-model="form.playTime" placeholder="请输入播放时间" size="small"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="字体样式" prop="fontFamily">
<el-select
v-model="form.fontFamily"
placeholder="请选择字体样式">
<el-option
v-for="dict in dict.type.font_family"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="字体颜色" prop="fontColor">
<el-select
v-model="form.fontColor"
placeholder="请选择字体颜色">
<el-option
v-for="dict in dict.type.font_color"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="水平居中" prop="horizontalCenter">
<el-switch
v-model="form.horizontalCenter"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="垂直居中" prop="verticalCenter">
<el-switch
v-model="form.verticalCenter"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<text-preview
:fontFamily="form.fontFamily"
:fontSize="form.fontSize"
:fontColor="form.fontColor"
:letterSpacing="form.letterSpacing"
:fontX="form.fontPositionX"
:fontY="form.fontPositionY"
:backgroundWidth="bgSize.width"
:backgroundHeight="bgSize.height"
:lineHeight="1"
:horizontalCenter="form.horizontalCenter"
:verticalCenter="form.verticalCenter"
:content="form.content"/>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
@ -187,7 +216,7 @@
</template>
<script>
import { listContent, getContent, delContent, addContent, updateContent } from "@/api/board/content";
import {listContent, getContent, delContent, addContent, updateContent} from "@/api/board/content";
import TextPreview from "@/views/board/component/TextPreview.vue";
import {planTypeTreeSelect} from "@/api/board/plantype";
import {listBoardType} from "@/api/board/boardtype";
@ -195,7 +224,7 @@ import {listBoardType} from "@/api/board/boardtype";
export default {
name: "Content",
components: {TextPreview},
dicts: ['board_size','font_color','font_style', 'alert_type'],
dicts: ['board_size', 'font_color', 'font_family', 'alert_type'],
data() {
return {
// 遮罩层
@ -240,58 +269,58 @@ export default {
// 表单校验
rules: {
name: [
{ required: true, message: "预置信息名称不能为空", trigger: "blur" }
{required: true, message: "预置信息名称不能为空", trigger: "blur"}
],
boardSizeType: [
{ required: true, message: "情报板尺寸不能为空", trigger: "blur" }
{required: true, message: "情报板尺寸不能为空", trigger: "blur"}
],
infoType: [
{ required: true, message: "信息类型不能为空", trigger: "change" }
{required: true, message: "信息类型不能为空", trigger: "change"}
],
content: [
{ required: true, message: "预置内容不能为空", trigger: "blur" }
{required: true, message: "预置内容不能为空", trigger: "blur"}
],
previewPath: [
{ required: true, message: "预览路径不能为空", trigger: "blur" }
{required: true, message: "预览路径不能为空", trigger: "blur"}
],
fontStyle: [
{ required: true, message: "字体样式不能为空", trigger: "blur" }
{required: true, message: "字体样式不能为空", trigger: "blur"}
],
fontSize: [
{ required: true, message: "字体大小不能为空", trigger: "blur" }
{required: true, message: "字体大小不能为空", trigger: "blur"}
],
letterSpacing: [
{ required: true, message: "字体间距不能为空", trigger: "blur" }
{required: true, message: "字体间距不能为空", trigger: "blur"}
],
fontColor: [
{ required: true, message: "字体颜色不能为空", trigger: "blur" }
{required: true, message: "字体颜色不能为空", trigger: "blur"}
],
fontPositionX: [
{ required: true, message: "字体坐标X不能为空", trigger: "blur" }
{required: true, message: "字体坐标X不能为空", trigger: "blur"}
],
fontPositionY: [
{ required: true, message: "字体坐标Y不能为空", trigger: "blur" }
{required: true, message: "字体坐标Y不能为空", trigger: "blur"}
],
playTime: [
{ required: true, message: "播放时间不能为空", trigger: "blur" }
{required: true, message: "播放时间不能为空", trigger: "blur"}
],
presetType: [
{ required: false, message: "当前预置类型 1：内置模版 0：预发布信息不能为空", trigger: "change" }
{required: false, message: "当前预置类型 1：内置模版 0：预发布信息不能为空", trigger: "change"}
],
remark: [
{ required: false, message: "备注不能为空", trigger: "blur" }
{required: false, message: "备注不能为空", trigger: "blur"}
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
{required: true, message: "创建时间不能为空", trigger: "blur"}
],
updateTime: [
{ required: true, message: "更新时间不能为空", trigger: "blur" }
{required: true, message: "更新时间不能为空", trigger: "blur"}
],
createBy: [
{ required: true, message: "创建人id不能为空", trigger: "blur" }
{required: true, message: "创建人id不能为空", trigger: "blur"}
],
updateBy: [
{ required: true, message: "更新人id不能为空", trigger: "blur" }
{required: true, message: "更新人id不能为空", trigger: "blur"}
]
}
};
@ -301,10 +330,10 @@ export default {
this.getPlanTypeTree();
this.getBoardTypeList();
},
computed:{
computed: {
bgSize() {
if (!this.form.boardSize) {
return {width: 320, height:160}
return {width: 320, height: 160}
}
let [height, width] = this.form.boardSize.split("*").map(Number);
return {width, height}
@ -334,7 +363,7 @@ export default {
infoType: null,
content: null,
previewPath: null,
fontStyle: null,
fontFamily: null,
fontSize: null,
letterSpacing: null,
fontColor: null,
@ -346,7 +375,9 @@ export default {
createTime: null,
updateTime: null,
createBy: null,
updateBy: null
updateBy: null,
horizontalCenter: true,
verticalCenter: true,
};
this.resetForm("form");
},
@ -363,7 +394,7 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
@ -405,7 +436,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除预置信息及模版编号为"' + ids + '"的数据项？').then(function() {
this.$modal.confirm('是否确认删除预置信息及模版编号为"' + ids + '"的数据项？').then(function () {
return delContent(ids);
}).then(() => {
this.getList();