mirror of
https://github.com/kerwincui/FastBee.git
synced 2025-11-03 02:23:50 +08:00
完善前端
This commit is contained in:
@@ -50,7 +50,7 @@
|
|||||||
"jsencrypt": "3.2.1",
|
"jsencrypt": "3.2.1",
|
||||||
"mqtt": "^4.3.3",
|
"mqtt": "^4.3.3",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"quill": "1.3.7",
|
"quill": "^1.3.7",
|
||||||
"screenfull": "5.0.2",
|
"screenfull": "5.0.2",
|
||||||
"sortablejs": "1.10.2",
|
"sortablejs": "1.10.2",
|
||||||
"vue": "2.6.12",
|
"vue": "2.6.12",
|
||||||
|
|||||||
44
vue/src/api/iot/news.js
Normal file
44
vue/src/api/iot/news.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询新闻资讯列表
|
||||||
|
export function listNews(query) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/news/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询新闻资讯详细
|
||||||
|
export function getNews(newsId) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/news/' + newsId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增新闻资讯
|
||||||
|
export function addNews(data) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/news',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改新闻资讯
|
||||||
|
export function updateNews(data) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/news',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除新闻资讯
|
||||||
|
export function delNews(newsId) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/news/' + newsId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
52
vue/src/api/iot/newsCategory.js
Normal file
52
vue/src/api/iot/newsCategory.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询新闻分类列表
|
||||||
|
export function listNewsCategory(query) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/newsCategory/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询产品简短分类列表
|
||||||
|
export function listShortNewsCategory() {
|
||||||
|
return request({
|
||||||
|
url: '/iot/newsCategory/newsCategoryShortList',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询新闻分类详细
|
||||||
|
export function getNewsCategory(categoryId) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/newsCategory/' + categoryId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增新闻分类
|
||||||
|
export function addNewsCategory(data) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/newsCategory',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改新闻分类
|
||||||
|
export function updateNewsCategory(data) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/newsCategory',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除新闻分类
|
||||||
|
export function delNewsCategory(categoryId) {
|
||||||
|
return request({
|
||||||
|
url: '/iot/newsCategory/' + categoryId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -1,20 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-upload
|
<el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" name="file" :show-file-list="false" :headers="headers" style="display: none" ref="upload" v-if="this.type == 'url'">
|
||||||
:action="uploadUrl"
|
|
||||||
:before-upload="handleBeforeUpload"
|
|
||||||
:on-success="handleUploadSuccess"
|
|
||||||
:on-error="handleUploadError"
|
|
||||||
name="file"
|
|
||||||
:show-file-list="false"
|
|
||||||
:headers="headers"
|
|
||||||
style="display: none"
|
|
||||||
ref="upload"
|
|
||||||
v-if="this.type == 'url'"
|
|
||||||
>
|
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div class="editor" ref="editor" :style="styles"></div>
|
<div class="editor" ref="editor" :style="styles"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -22,251 +11,290 @@ import Quill from "quill";
|
|||||||
import "quill/dist/quill.core.css";
|
import "quill/dist/quill.core.css";
|
||||||
import "quill/dist/quill.snow.css";
|
import "quill/dist/quill.snow.css";
|
||||||
import "quill/dist/quill.bubble.css";
|
import "quill/dist/quill.bubble.css";
|
||||||
import { getToken } from "@/utils/auth";
|
import {
|
||||||
|
getToken
|
||||||
|
} from "@/utils/auth";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Editor",
|
name: "Editor",
|
||||||
props: {
|
props: {
|
||||||
/* 编辑器的内容 */
|
/* 编辑器的内容 */
|
||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
},
|
|
||||||
/* 高度 */
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
/* 最小高度 */
|
|
||||||
minHeight: {
|
|
||||||
type: Number,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
/* 只读 */
|
|
||||||
readOnly: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// 上传文件大小限制(MB)
|
|
||||||
fileSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 5,
|
|
||||||
},
|
|
||||||
/* 类型(base64格式、url格式) */
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: "url",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
|
||||||
headers: {
|
|
||||||
Authorization: "Bearer " + getToken()
|
|
||||||
},
|
|
||||||
Quill: null,
|
|
||||||
currentValue: "",
|
|
||||||
options: {
|
|
||||||
theme: "snow",
|
|
||||||
bounds: document.body,
|
|
||||||
debug: "warn",
|
|
||||||
modules: {
|
|
||||||
// 工具栏配置
|
|
||||||
toolbar: [
|
|
||||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
|
||||||
["blockquote", "code-block"], // 引用 代码块
|
|
||||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
|
||||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
|
||||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
|
||||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
|
||||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
|
||||||
[{ align: [] }], // 对齐方式
|
|
||||||
["clean"], // 清除文本格式
|
|
||||||
["link", "image", "video"] // 链接、图片、视频
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
placeholder: "请输入内容",
|
/* 高度 */
|
||||||
readOnly: this.readOnly,
|
height: {
|
||||||
},
|
type: Number,
|
||||||
};
|
default: null,
|
||||||
},
|
},
|
||||||
computed: {
|
/* 最小高度 */
|
||||||
styles() {
|
minHeight: {
|
||||||
let style = {};
|
type: Number,
|
||||||
if (this.minHeight) {
|
default: null,
|
||||||
style.minHeight = `${this.minHeight}px`;
|
},
|
||||||
}
|
/* 只读 */
|
||||||
if (this.height) {
|
readOnly: {
|
||||||
style.height = `${this.height}px`;
|
type: Boolean,
|
||||||
}
|
default: false,
|
||||||
return style;
|
},
|
||||||
|
// 上传文件大小限制(MB)
|
||||||
|
fileSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
},
|
||||||
|
/* 类型(base64格式、url格式) */
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "url",
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
data() {
|
||||||
watch: {
|
return {
|
||||||
value: {
|
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
||||||
handler(val) {
|
headers: {
|
||||||
if (val !== this.currentValue) {
|
Authorization: "Bearer " + getToken()
|
||||||
this.currentValue = val === null ? "" : val;
|
},
|
||||||
if (this.Quill) {
|
Quill: null,
|
||||||
|
currentValue: "",
|
||||||
|
options: {
|
||||||
|
theme: "snow",
|
||||||
|
bounds: document.body,
|
||||||
|
debug: "warn",
|
||||||
|
modules: {
|
||||||
|
// 工具栏配置
|
||||||
|
toolbar: [
|
||||||
|
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||||
|
["blockquote", "code-block"], // 引用 代码块
|
||||||
|
[{
|
||||||
|
list: "ordered"
|
||||||
|
}, {
|
||||||
|
list: "bullet"
|
||||||
|
}], // 有序、无序列表
|
||||||
|
[{
|
||||||
|
indent: "-1"
|
||||||
|
}, {
|
||||||
|
indent: "+1"
|
||||||
|
}], // 缩进
|
||||||
|
[{
|
||||||
|
size: ["small", false, "large", "huge"]
|
||||||
|
}], // 字体大小
|
||||||
|
[{
|
||||||
|
header: [1, 2, 3, 4, 5, 6, false]
|
||||||
|
}], // 标题
|
||||||
|
[{
|
||||||
|
color: []
|
||||||
|
}, {
|
||||||
|
background: []
|
||||||
|
}], // 字体颜色、字体背景颜色
|
||||||
|
[{
|
||||||
|
align: []
|
||||||
|
}], // 对齐方式
|
||||||
|
["clean"], // 清除文本格式
|
||||||
|
["link", "image", "video"] // 链接、图片、视频
|
||||||
|
],
|
||||||
|
},
|
||||||
|
placeholder: "请输入内容",
|
||||||
|
readOnly: this.readOnly,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styles() {
|
||||||
|
let style = {};
|
||||||
|
if (this.minHeight) {
|
||||||
|
style.minHeight = `${this.minHeight}px`;
|
||||||
|
}
|
||||||
|
if (this.height) {
|
||||||
|
style.height = `${this.height}px`;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
if (val !== this.currentValue) {
|
||||||
|
this.currentValue = val === null ? "" : val;
|
||||||
|
if (this.Quill) {
|
||||||
|
this.Quill.pasteHTML(this.currentValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.Quill = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
const editor = this.$refs.editor;
|
||||||
|
this.Quill = new Quill(editor, this.options);
|
||||||
|
// 如果设置了上传地址则自定义图片上传事件
|
||||||
|
if (this.type == 'url') {
|
||||||
|
let toolbar = this.Quill.getModule("toolbar");
|
||||||
|
toolbar.addHandler("image", (value) => {
|
||||||
|
this.uploadType = "image";
|
||||||
|
if (value) {
|
||||||
|
this.$refs.upload.$children[0].$refs.input.click();
|
||||||
|
} else {
|
||||||
|
this.quill.format("image", false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
this.Quill.pasteHTML(this.currentValue);
|
this.Quill.pasteHTML(this.currentValue);
|
||||||
}
|
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||||
}
|
const html = this.$refs.editor.children[0].innerHTML;
|
||||||
},
|
const text = this.Quill.getText();
|
||||||
immediate: true,
|
const quill = this.Quill;
|
||||||
|
this.currentValue = html;
|
||||||
|
this.$emit("input", html);
|
||||||
|
this.$emit("on-change", {
|
||||||
|
html,
|
||||||
|
text,
|
||||||
|
quill
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||||
|
this.$emit("on-text-change", delta, oldDelta, source);
|
||||||
|
});
|
||||||
|
this.Quill.on("selection-change", (range, oldRange, source) => {
|
||||||
|
this.$emit("on-selection-change", range, oldRange, source);
|
||||||
|
});
|
||||||
|
this.Quill.on("editor-change", (eventName, ...args) => {
|
||||||
|
this.$emit("on-editor-change", eventName, ...args);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 上传前校检格式和大小
|
||||||
|
handleBeforeUpload(file) {
|
||||||
|
// 校检文件大小
|
||||||
|
if (this.fileSize) {
|
||||||
|
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||||
|
if (!isLt) {
|
||||||
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
handleUploadSuccess(res, file) {
|
||||||
|
// 获取富文本组件实例
|
||||||
|
let quill = this.Quill;
|
||||||
|
// 如果上传成功
|
||||||
|
if (res.code == 200) {
|
||||||
|
// 获取光标所在位置
|
||||||
|
let length = quill.getSelection().index;
|
||||||
|
// 插入图片 res.url为服务器返回的图片地址
|
||||||
|
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
|
||||||
|
// 调整光标到最后
|
||||||
|
quill.setSelection(length + 1);
|
||||||
|
} else {
|
||||||
|
this.$message.error("图片插入失败");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleUploadError() {
|
||||||
|
this.$message.error("图片插入失败");
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init();
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.Quill = null;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
const editor = this.$refs.editor;
|
|
||||||
this.Quill = new Quill(editor, this.options);
|
|
||||||
// 如果设置了上传地址则自定义图片上传事件
|
|
||||||
if (this.type == 'url') {
|
|
||||||
let toolbar = this.Quill.getModule("toolbar");
|
|
||||||
toolbar.addHandler("image", (value) => {
|
|
||||||
this.uploadType = "image";
|
|
||||||
if (value) {
|
|
||||||
this.$refs.upload.$children[0].$refs.input.click();
|
|
||||||
} else {
|
|
||||||
this.quill.format("image", false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.Quill.pasteHTML(this.currentValue);
|
|
||||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
|
||||||
const html = this.$refs.editor.children[0].innerHTML;
|
|
||||||
const text = this.Quill.getText();
|
|
||||||
const quill = this.Quill;
|
|
||||||
this.currentValue = html;
|
|
||||||
this.$emit("input", html);
|
|
||||||
this.$emit("on-change", { html, text, quill });
|
|
||||||
});
|
|
||||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
|
||||||
this.$emit("on-text-change", delta, oldDelta, source);
|
|
||||||
});
|
|
||||||
this.Quill.on("selection-change", (range, oldRange, source) => {
|
|
||||||
this.$emit("on-selection-change", range, oldRange, source);
|
|
||||||
});
|
|
||||||
this.Quill.on("editor-change", (eventName, ...args) => {
|
|
||||||
this.$emit("on-editor-change", eventName, ...args);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 上传前校检格式和大小
|
|
||||||
handleBeforeUpload(file) {
|
|
||||||
// 校检文件大小
|
|
||||||
if (this.fileSize) {
|
|
||||||
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
|
||||||
if (!isLt) {
|
|
||||||
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
handleUploadSuccess(res, file) {
|
|
||||||
// 获取富文本组件实例
|
|
||||||
let quill = this.Quill;
|
|
||||||
// 如果上传成功
|
|
||||||
if (res.code == 200) {
|
|
||||||
// 获取光标所在位置
|
|
||||||
let length = quill.getSelection().index;
|
|
||||||
// 插入图片 res.url为服务器返回的图片地址
|
|
||||||
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
|
|
||||||
// 调整光标到最后
|
|
||||||
quill.setSelection(length + 1);
|
|
||||||
} else {
|
|
||||||
this.$message.error("图片插入失败");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleUploadError() {
|
|
||||||
this.$message.error("图片插入失败");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.editor, .ql-toolbar {
|
.editor,
|
||||||
white-space: pre-wrap !important;
|
.ql-toolbar {
|
||||||
line-height: normal !important;
|
white-space: pre-wrap !important;
|
||||||
|
line-height: normal !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quill-img {
|
.quill-img {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
||||||
content: "请输入链接地址:";
|
content: "请输入链接地址:";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||||
border-right: 0px;
|
border-right: 0px;
|
||||||
content: "保存";
|
content: "保存";
|
||||||
padding-right: 0px;
|
padding-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
||||||
content: "请输入视频地址:";
|
content: "请输入视频地址:";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||||
content: "14px";
|
content: "14px";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||||
content: "10px";
|
content: "10px";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
||||||
content: "18px";
|
content: "18px";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
||||||
content: "32px";
|
content: "32px";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||||
content: "文本";
|
content: "文本";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||||
content: "标题1";
|
content: "标题1";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||||
content: "标题2";
|
content: "标题2";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||||
content: "标题3";
|
content: "标题3";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||||
content: "标题4";
|
content: "标题4";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||||
content: "标题5";
|
content: "标题5";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||||
content: "标题6";
|
content: "标题6";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||||
content: "标准字体";
|
content: "标准字体";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
||||||
content: "衬线字体";
|
content: "衬线字体";
|
||||||
}
|
}
|
||||||
|
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
||||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||||
content: "等宽字体";
|
content: "等宽字体";
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -37,8 +37,6 @@ import VueMeta from 'vue-meta'
|
|||||||
import DictData from '@/components/DictData'
|
import DictData from '@/components/DictData'
|
||||||
// Echart
|
// Echart
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
// mqtt组件
|
|
||||||
import mqttClient from './views/iot/device/mqtt-client.vue'
|
|
||||||
// 一键复制粘贴板组件
|
// 一键复制粘贴板组件
|
||||||
import VueClipboard from 'vue-clipboard2'
|
import VueClipboard from 'vue-clipboard2'
|
||||||
|
|
||||||
@@ -61,7 +59,6 @@ Vue.component('RightToolbar', RightToolbar)
|
|||||||
Vue.component('Editor', Editor)
|
Vue.component('Editor', Editor)
|
||||||
Vue.component('FileUpload', FileUpload)
|
Vue.component('FileUpload', FileUpload)
|
||||||
Vue.component('ImageUpload', ImageUpload)
|
Vue.component('ImageUpload', ImageUpload)
|
||||||
Vue.component('mqtt-client',mqttClient)
|
|
||||||
Vue.use(VueClipboard)
|
Vue.use(VueClipboard)
|
||||||
Vue.use(directive)
|
Vue.use(directive)
|
||||||
Vue.use(plugins)
|
Vue.use(plugins)
|
||||||
|
|||||||
@@ -178,13 +178,14 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- Mqtt通讯 -->
|
<!-- Mqtt通讯 -->
|
||||||
<mqtt-client ref="mqttClient" :publish="publish" :subscribes="subscribes" @callbackEvent="mqttCallback($event)" />
|
<mqttClient ref="mqttClient" :publish="publish" :subscribes="subscribes" @callbackEvent="mqttCallback($event)" />
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
import mqttClient from './mqtt-client.vue'
|
||||||
import {
|
import {
|
||||||
listDeviceShort,
|
listDeviceShort,
|
||||||
delDevice,
|
delDevice,
|
||||||
@@ -196,6 +197,7 @@ import {
|
|||||||
export default {
|
export default {
|
||||||
name: "Device",
|
name: "Device",
|
||||||
dicts: ['iot_device_status', 'iot_is_enable'],
|
dicts: ['iot_device_status', 'iot_is_enable'],
|
||||||
|
components: {mqttClient},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 实时监测间隔
|
// 实时监测间隔
|
||||||
|
|||||||
@@ -53,8 +53,8 @@ export default {
|
|||||||
connectTimeout: 60000
|
connectTimeout: 60000
|
||||||
}
|
}
|
||||||
// 配置Mqtt地址
|
// 配置Mqtt地址
|
||||||
// let ssl_url = "wss://domain.com/mqtt"
|
let url = "wss://iot.wumei.live/mqtt"
|
||||||
let url = "ws://" + window.location.hostname + ":8083/mqtt";
|
// let url = "ws://" + window.location.hostname + ":8083/mqtt";
|
||||||
console.log("mqtt地址:", url);
|
console.log("mqtt地址:", url);
|
||||||
this.client = mqtt.connect(url, options);
|
this.client = mqtt.connect(url, options);
|
||||||
this.client.on("connect", (e) => {
|
this.client.on("connect", (e) => {
|
||||||
|
|||||||
@@ -176,10 +176,12 @@ import {
|
|||||||
cacheJsonThingsModel
|
cacheJsonThingsModel
|
||||||
} from "@/api/iot/model";
|
} from "@/api/iot/model";
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
import mqttClient from './mqtt-client.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "running-status",
|
name: "running-status",
|
||||||
dicts: ['iot_yes_no'],
|
dicts: ['iot_yes_no'],
|
||||||
|
components: {mqttClient},
|
||||||
props: {
|
props: {
|
||||||
device: {
|
device: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|||||||
363
vue/src/views/iot/news/index.vue
Normal file
363
vue/src/views/iot/news/index.vue
Normal file
@@ -0,0 +1,363 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="标题" prop="title">
|
||||||
|
<el-input v-model="queryParams.title" placeholder="请输入标题" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="置顶" prop="isTop">
|
||||||
|
<el-select v-model="queryParams.isTop" placeholder="请选择置顶" clearable size="small">
|
||||||
|
<el-option v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="广告" prop="isBanner">
|
||||||
|
<el-select v-model="queryParams.isBanner" placeholder="请选择广告" clearable size="small">
|
||||||
|
<el-option v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="分类名称" prop="categoryName">
|
||||||
|
<el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="发布" prop="status">
|
||||||
|
<el-select v-model="queryParams.status" placeholder="请选择发布" clearable size="small">
|
||||||
|
<el-option v-for="dict in dict.type.iot_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:news:add']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:news:edit']">修改</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:news:remove']">删除</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:news:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="newsList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="图片" align="center" prop="imgUrl">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image style="border-radius:5px;height:60px;width:120px;margin-bottom:-5px;" lazy :preview-src-list="[baseUrl+scope.row.imgUrl]" :src="baseUrl+scope.row.imgUrl" fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="标题" align="center" prop="title" />
|
||||||
|
<el-table-column label="作者" align="center" prop="author" />
|
||||||
|
<el-table-column label="分类" align="center" prop="categoryName">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag type="info">{{scope.row.categoryName}}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="置顶" align="center" prop="isTop">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isTop" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="广告" align="center" prop="isBanner">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isBanner" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="发布" align="center" prop="status">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag :options="dict.type.iot_yes_no" :value="scope.row.status" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<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 size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:news:edit']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:news:remove']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 添加或修改新闻资讯对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="60px">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="标题" prop="title">
|
||||||
|
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="作者" prop="author">
|
||||||
|
<el-input v-model="form.author" placeholder="请输入作者" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="摘要" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="3" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="置顶" prop="isTop">
|
||||||
|
<el-switch v-model="form.isTop" active-text="" inactive-text="" :active-value="1" :inactive-value="0"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="轮播" prop="isBanner">
|
||||||
|
<el-switch v-model="form.isBanner" active-text="" inactive-text="" :active-value="1" :inactive-value="0"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="发布" prop="status">
|
||||||
|
<el-switch v-model="form.status" active-text="" inactive-text="" :active-value="1" :inactive-value="0"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="分类" prop="categoryId">
|
||||||
|
<el-select v-model="form.categoryId" placeholder="请选择分类" @change="selectCategory">
|
||||||
|
<el-option v-for="category in categoryList" :key="category.id" :label="category.name" :value="category.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图片">
|
||||||
|
<imageUpload ref="image-upload" :value="form.imgUrl" :limit="1" :fileSize="1" @input="getImagePath($event)"></imageUpload>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="内容">
|
||||||
|
<editor v-model="form.content" :min-height="192" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
listNews,
|
||||||
|
getNews,
|
||||||
|
delNews,
|
||||||
|
addNews,
|
||||||
|
updateNews
|
||||||
|
} from "@/api/iot/news";
|
||||||
|
import {
|
||||||
|
listShortNewsCategory
|
||||||
|
} from '@/api/iot/newsCategory'
|
||||||
|
import imageUpload from "../../../components/ImageUpload/index"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "News",
|
||||||
|
dicts: ['iot_yes_no'],
|
||||||
|
components: {
|
||||||
|
imageUpload
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 新闻资讯表格数据
|
||||||
|
newsList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 分类列表
|
||||||
|
categoryList: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
title: null,
|
||||||
|
isTop: null,
|
||||||
|
isBanner: null,
|
||||||
|
categoryName: null,
|
||||||
|
status: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
baseUrl: process.env.VUE_APP_BASE_API,
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
title: [{
|
||||||
|
required: true,
|
||||||
|
message: "标题不能为空",
|
||||||
|
trigger: "blur"
|
||||||
|
}],
|
||||||
|
content: [{
|
||||||
|
required: true,
|
||||||
|
message: "内容不能为空",
|
||||||
|
trigger: "blur"
|
||||||
|
}],
|
||||||
|
categoryId: [{
|
||||||
|
required: true,
|
||||||
|
message: "分类不能为空",
|
||||||
|
trigger: "blur"
|
||||||
|
}],
|
||||||
|
author: [{
|
||||||
|
required: true,
|
||||||
|
message: "作者不能为空",
|
||||||
|
trigger: "blur"
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
|
||||||
|
// 获取分类列表
|
||||||
|
listShortNewsCategory().then(response => {
|
||||||
|
this.categoryList = response.data;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询新闻资讯列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listNews(this.queryParams).then(response => {
|
||||||
|
this.newsList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**获取上传图片的路径 */
|
||||||
|
getImagePath(data) {
|
||||||
|
this.form.imgUrl = data;
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
newsId: null,
|
||||||
|
title: null,
|
||||||
|
content: "暂无内容",
|
||||||
|
imgUrl: "",
|
||||||
|
isTop: null,
|
||||||
|
isBanner: null,
|
||||||
|
categoryId: null,
|
||||||
|
categoryName: null,
|
||||||
|
status: null,
|
||||||
|
author: null,
|
||||||
|
delFlag: null,
|
||||||
|
createBy: null,
|
||||||
|
createTime: null,
|
||||||
|
updateBy: null,
|
||||||
|
updateTime: null,
|
||||||
|
remark: null
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.newsId)
|
||||||
|
this.single = selection.length !== 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加新闻资讯";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const newsId = row.newsId || this.ids
|
||||||
|
getNews(newsId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改新闻资讯";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
console.log(this.form);
|
||||||
|
if(this.form.imgUrl==null || this.form.imgUrl==""){
|
||||||
|
this.$modal.msgError("请上传图片");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.newsId != null) {
|
||||||
|
updateNews(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addNews(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const newsIds = row.newsId || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除新闻资讯编号为"' + newsIds + '"的数据项?').then(function () {
|
||||||
|
return delNews(newsIds);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('iot/news/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `news_${new Date().getTime()}.xlsx`)
|
||||||
|
},
|
||||||
|
/** 选择分类 */
|
||||||
|
selectCategory(val) {
|
||||||
|
for (var i = 0; i < this.categoryList.length; i++) {
|
||||||
|
if (this.categoryList[i].id == val) {
|
||||||
|
this.form.categoryName = this.categoryList[i].name;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||||
228
vue/src/views/iot/newsCategory/index.vue
Normal file
228
vue/src/views/iot/newsCategory/index.vue
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="分类名称" prop="categoryName">
|
||||||
|
<el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:category:add']">新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:category:edit']">修改</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:category:remove']">删除</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['iot:category:export']">导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="分类编号" align="center" prop="categoryId" />
|
||||||
|
<el-table-column label="分类名称" align="center" prop="categoryName" />
|
||||||
|
<el-table-column label="显示顺序" align="center" prop="orderNum" />
|
||||||
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="备注" align="center" prop="remark" min-width="200" header-align="center" />
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:category:edit']">修改</el-button>
|
||||||
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['iot:category:remove']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||||
|
|
||||||
|
<!-- 添加或修改新闻分类对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="分类名称" prop="categoryName">
|
||||||
|
<el-input v-model="form.categoryName" placeholder="请输入分类名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="显示顺序" prop="orderNum">
|
||||||
|
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
listNewsCategory,
|
||||||
|
getNewsCategory,
|
||||||
|
delNewsCategory,
|
||||||
|
addNewsCategory,
|
||||||
|
updateNewsCategory
|
||||||
|
} from "@/api/iot/newsCategory";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Category",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 新闻分类表格数据
|
||||||
|
categoryList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
categoryName: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
categoryName: [{
|
||||||
|
required: true,
|
||||||
|
message: "分类名字不能为空",
|
||||||
|
trigger: "blur"
|
||||||
|
}],
|
||||||
|
orderNum: [{
|
||||||
|
required: true,
|
||||||
|
message: "显示顺序不能为空",
|
||||||
|
trigger: "blur"
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询新闻分类列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listNewsCategory(this.queryParams).then(response => {
|
||||||
|
this.categoryList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
categoryId: null,
|
||||||
|
categoryName: null,
|
||||||
|
orderNum: null,
|
||||||
|
delFlag: null,
|
||||||
|
createBy: null,
|
||||||
|
createTime: null,
|
||||||
|
updateBy: null,
|
||||||
|
updateTime: null,
|
||||||
|
remark: null
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.categoryId)
|
||||||
|
this.single = selection.length !== 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加新闻分类";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const categoryId = row.categoryId || this.ids
|
||||||
|
getNewsCategory(categoryId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改新闻分类";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.categoryId != null) {
|
||||||
|
updateNewsCategory(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addNewsCategory(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const categoryIds = row.categoryId || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除新闻分类编号为"' + categoryIds + '"的数据项?').then(function () {
|
||||||
|
return delNewsCategory(categoryIds);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('iot/newsCategory/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `category_${new Date().getTime()}.xlsx`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-row :gutter="10" class="mb8">
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:authorize:add']">新增授权码</el-button>
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:authorize:add']">生成授权码</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:authorize:edit']">修改</el-button>
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:authorize:edit']">修改</el-button>
|
||||||
@@ -94,7 +94,7 @@
|
|||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
.createNum input{
|
.createNum input{
|
||||||
width: 130px;
|
width: 260px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -223,7 +223,7 @@ export default {
|
|||||||
},
|
},
|
||||||
/** 批量新增按钮操作 */
|
/** 批量新增按钮操作 */
|
||||||
handleAdd() {
|
handleAdd() {
|
||||||
this.$prompt('输入新增授权码数量', '提示', {
|
this.$prompt('', '输入新增授权码数量', {
|
||||||
customClass: 'createNum',
|
customClass: 'createNum',
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
|
|||||||
@@ -296,10 +296,8 @@ export default {
|
|||||||
},
|
},
|
||||||
// 授权码状态修改
|
// 授权码状态修改
|
||||||
changeIsAuthorize() {
|
changeIsAuthorize() {
|
||||||
let text = this.form.isAuthorize === "1" ? "启用" : "停用";
|
let text = this.form.isAuthorize == "1" ? "启用" : "停用";
|
||||||
let _this = this;
|
this.$modal.confirm('确认要' + text + '授权码吗?').then(function () {
|
||||||
this.$modal.confirm('确认要[' + text + ']' + this.form.productName + '授权码吗?').then(function () {
|
|
||||||
_this.submitForm();
|
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.form.isAuthorize = 0;
|
this.form.isAuthorize = 0;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,314 +1,252 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
<el-form-item label="公告标题" prop="noticeTitle">
|
<el-form-item label="公告标题" prop="noticeTitle">
|
||||||
<el-input
|
<el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable @keyup.enter.native="handleQuery" />
|
||||||
v-model="queryParams.noticeTitle"
|
</el-form-item>
|
||||||
placeholder="请输入公告标题"
|
<el-form-item label="操作人员" prop="createBy">
|
||||||
clearable
|
<el-input v-model="queryParams.createBy" placeholder="请输入操作人员" clearable @keyup.enter.native="handleQuery" />
|
||||||
size="small"
|
</el-form-item>
|
||||||
@keyup.enter.native="handleQuery"
|
<el-form-item label="类型" prop="noticeType">
|
||||||
/>
|
<el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
|
||||||
</el-form-item>
|
<el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||||
<el-form-item label="操作人员" prop="createBy">
|
</el-select>
|
||||||
<el-input
|
</el-form-item>
|
||||||
v-model="queryParams.createBy"
|
<el-form-item>
|
||||||
placeholder="请输入操作人员"
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
clearable
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
size="small"
|
</el-form-item>
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="类型" prop="noticeType">
|
|
||||||
<el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable size="small">
|
|
||||||
<el-option
|
|
||||||
v-for="dict in dict.type.sys_notice_type"
|
|
||||||
:key="dict.value"
|
|
||||||
:label="dict.label"
|
|
||||||
:value="dict.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-row :gutter="10" class="mb8">
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:notice:add']">新增</el-button>
|
||||||
type="primary"
|
</el-col>
|
||||||
plain
|
<el-col :span="1.5">
|
||||||
icon="el-icon-plus"
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:notice:edit']">修改</el-button>
|
||||||
size="mini"
|
</el-col>
|
||||||
@click="handleAdd"
|
<el-col :span="1.5">
|
||||||
v-hasPermi="['system:notice:add']"
|
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:notice:remove']">删除</el-button>
|
||||||
>新增</el-button>
|
</el-col>
|
||||||
</el-col>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
plain
|
|
||||||
icon="el-icon-edit"
|
|
||||||
size="mini"
|
|
||||||
:disabled="single"
|
|
||||||
@click="handleUpdate"
|
|
||||||
v-hasPermi="['system:notice:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button
|
|
||||||
type="danger"
|
|
||||||
plain
|
|
||||||
icon="el-icon-delete"
|
|
||||||
size="mini"
|
|
||||||
:disabled="multiple"
|
|
||||||
@click="handleDelete"
|
|
||||||
v-hasPermi="['system:notice:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
<el-table-column label="序号" align="center" prop="noticeId" width="100" />
|
<el-table-column label="序号" align="center" prop="noticeId" width="100" />
|
||||||
<el-table-column
|
<el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
|
||||||
label="公告标题"
|
<el-table-column label="公告类型" align="center" prop="noticeType" width="100">
|
||||||
align="center"
|
<template slot-scope="scope">
|
||||||
prop="noticeTitle"
|
<dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType" />
|
||||||
:show-overflow-tooltip="true"
|
</template>
|
||||||
/>
|
</el-table-column>
|
||||||
<el-table-column label="公告类型" align="center" prop="noticeType" width="100">
|
<el-table-column label="状态" align="center" prop="status" width="100">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
|
<dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="状态" align="center" prop="status" width="100">
|
<el-table-column label="创建者" align="center" prop="createBy" width="100" />
|
||||||
<template slot-scope="scope">
|
<el-table-column label="创建时间" align="center" prop="createTime" width="100">
|
||||||
<dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
|
<template slot-scope="scope">
|
||||||
</template>
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column label="创建者" align="center" prop="createBy" width="100" />
|
</el-table-column>
|
||||||
<el-table-column label="创建时间" align="center" prop="createTime" width="100">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
|
||||||
</template>
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']">删除</el-button>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
</el-table-column>
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="text"
|
|
||||||
icon="el-icon-edit"
|
|
||||||
@click="handleUpdate(scope.row)"
|
|
||||||
v-hasPermi="['system:notice:edit']"
|
|
||||||
>修改</el-button>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="text"
|
|
||||||
icon="el-icon-delete"
|
|
||||||
@click="handleDelete(scope.row)"
|
|
||||||
v-hasPermi="['system:notice:remove']"
|
|
||||||
>删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<pagination
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||||
v-show="total>0"
|
|
||||||
:total="total"
|
|
||||||
:page.sync="queryParams.pageNum"
|
|
||||||
:limit.sync="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 添加或修改公告对话框 -->
|
<!-- 添加或修改公告对话框 -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
|
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="公告标题" prop="noticeTitle">
|
<el-form-item label="公告标题" prop="noticeTitle">
|
||||||
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
|
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="公告类型" prop="noticeType">
|
<el-form-item label="公告类型" prop="noticeType">
|
||||||
<el-select v-model="form.noticeType" placeholder="请选择">
|
<el-select v-model="form.noticeType" placeholder="请选择公告类型">
|
||||||
<el-option
|
<el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||||
v-for="dict in dict.type.sys_notice_type"
|
</el-select>
|
||||||
:key="dict.value"
|
</el-form-item>
|
||||||
:label="dict.label"
|
</el-col>
|
||||||
:value="dict.value"
|
<el-col :span="24">
|
||||||
></el-option>
|
<el-form-item label="状态">
|
||||||
</el-select>
|
<el-radio-group v-model="form.status">
|
||||||
</el-form-item>
|
<el-radio v-for="dict in dict.type.sys_notice_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
|
||||||
</el-col>
|
</el-radio-group>
|
||||||
<el-col :span="24">
|
</el-form-item>
|
||||||
<el-form-item label="状态">
|
</el-col>
|
||||||
<el-radio-group v-model="form.status">
|
<el-col :span="24">
|
||||||
<el-radio
|
<el-form-item label="内容">
|
||||||
v-for="dict in dict.type.sys_notice_status"
|
<editor v-model="form.noticeContent" :min-height="192" />
|
||||||
:key="dict.value"
|
</el-form-item>
|
||||||
:label="dict.value"
|
</el-col>
|
||||||
>{{dict.label}}</el-radio>
|
</el-row>
|
||||||
</el-radio-group>
|
</el-form>
|
||||||
</el-form-item>
|
<div slot="footer" class="dialog-footer">
|
||||||
</el-col>
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
<el-col :span="24">
|
<el-button @click="cancel">取 消</el-button>
|
||||||
<el-form-item label="内容">
|
</div>
|
||||||
<editor v-model="form.noticeContent" :min-height="192"/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
||||||
<el-button @click="cancel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
|
import {
|
||||||
|
listNotice,
|
||||||
|
getNotice,
|
||||||
|
delNotice,
|
||||||
|
addNotice,
|
||||||
|
updateNotice
|
||||||
|
} from "@/api/system/notice";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Notice",
|
name: "Notice",
|
||||||
dicts: ['sys_notice_status', 'sys_notice_type'],
|
dicts: ['sys_notice_status', 'sys_notice_type'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
loading: true,
|
loading: true,
|
||||||
// 选中数组
|
// 选中数组
|
||||||
ids: [],
|
ids: [],
|
||||||
// 非单个禁用
|
// 非单个禁用
|
||||||
single: true,
|
single: true,
|
||||||
// 非多个禁用
|
// 非多个禁用
|
||||||
multiple: true,
|
multiple: true,
|
||||||
// 显示搜索条件
|
// 显示搜索条件
|
||||||
showSearch: true,
|
showSearch: true,
|
||||||
// 总条数
|
// 总条数
|
||||||
total: 0,
|
total: 0,
|
||||||
// 公告表格数据
|
// 公告表格数据
|
||||||
noticeList: [],
|
noticeList: [],
|
||||||
// 弹出层标题
|
// 弹出层标题
|
||||||
title: "",
|
title: "",
|
||||||
// 是否显示弹出层
|
// 是否显示弹出层
|
||||||
open: false,
|
open: false,
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
noticeTitle: undefined,
|
noticeTitle: undefined,
|
||||||
createBy: undefined,
|
createBy: undefined,
|
||||||
status: undefined
|
status: undefined
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {
|
rules: {
|
||||||
noticeTitle: [
|
noticeTitle: [{
|
||||||
{ required: true, message: "公告标题不能为空", trigger: "blur" }
|
required: true,
|
||||||
],
|
message: "公告标题不能为空",
|
||||||
noticeType: [
|
trigger: "blur"
|
||||||
{ required: true, message: "公告类型不能为空", trigger: "change" }
|
}],
|
||||||
]
|
noticeType: [{
|
||||||
}
|
required: true,
|
||||||
};
|
message: "公告类型不能为空",
|
||||||
},
|
trigger: "change"
|
||||||
created() {
|
}]
|
||||||
this.getList();
|
}
|
||||||
},
|
};
|
||||||
methods: {
|
|
||||||
/** 查询公告列表 */
|
|
||||||
getList() {
|
|
||||||
this.loading = true;
|
|
||||||
listNotice(this.queryParams).then(response => {
|
|
||||||
this.noticeList = response.rows;
|
|
||||||
this.total = response.total;
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
// 取消按钮
|
created() {
|
||||||
cancel() {
|
|
||||||
this.open = false;
|
|
||||||
this.reset();
|
|
||||||
},
|
|
||||||
// 表单重置
|
|
||||||
reset() {
|
|
||||||
this.form = {
|
|
||||||
noticeId: undefined,
|
|
||||||
noticeTitle: undefined,
|
|
||||||
noticeType: undefined,
|
|
||||||
noticeContent: undefined,
|
|
||||||
status: "0"
|
|
||||||
};
|
|
||||||
this.resetForm("form");
|
|
||||||
},
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
handleQuery() {
|
|
||||||
this.queryParams.pageNum = 1;
|
|
||||||
this.getList();
|
|
||||||
},
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
resetQuery() {
|
|
||||||
this.resetForm("queryForm");
|
|
||||||
this.handleQuery();
|
|
||||||
},
|
|
||||||
// 多选框选中数据
|
|
||||||
handleSelectionChange(selection) {
|
|
||||||
this.ids = selection.map(item => item.noticeId)
|
|
||||||
this.single = selection.length!=1
|
|
||||||
this.multiple = !selection.length
|
|
||||||
},
|
|
||||||
/** 新增按钮操作 */
|
|
||||||
handleAdd() {
|
|
||||||
this.reset();
|
|
||||||
this.open = true;
|
|
||||||
this.title = "添加公告";
|
|
||||||
},
|
|
||||||
/** 修改按钮操作 */
|
|
||||||
handleUpdate(row) {
|
|
||||||
this.reset();
|
|
||||||
const noticeId = row.noticeId || this.ids
|
|
||||||
getNotice(noticeId).then(response => {
|
|
||||||
this.form = response.data;
|
|
||||||
this.open = true;
|
|
||||||
this.title = "修改公告";
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 提交按钮 */
|
|
||||||
submitForm: function() {
|
|
||||||
this.$refs["form"].validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
if (this.form.noticeId != undefined) {
|
|
||||||
updateNotice(this.form).then(response => {
|
|
||||||
this.$modal.msgSuccess("修改成功");
|
|
||||||
this.open = false;
|
|
||||||
this.getList();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
addNotice(this.form).then(response => {
|
|
||||||
this.$modal.msgSuccess("新增成功");
|
|
||||||
this.open = false;
|
|
||||||
this.getList();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 删除按钮操作 */
|
|
||||||
handleDelete(row) {
|
|
||||||
const noticeIds = row.noticeId || this.ids
|
|
||||||
this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项?').then(function() {
|
|
||||||
return delNotice(noticeIds);
|
|
||||||
}).then(() => {
|
|
||||||
this.getList();
|
this.getList();
|
||||||
this.$modal.msgSuccess("删除成功");
|
},
|
||||||
}).catch(() => {});
|
methods: {
|
||||||
|
/** 查询公告列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listNotice(this.queryParams).then(response => {
|
||||||
|
this.noticeList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
noticeId: undefined,
|
||||||
|
noticeTitle: undefined,
|
||||||
|
noticeType: undefined,
|
||||||
|
noticeContent: undefined,
|
||||||
|
status: "0"
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.noticeId)
|
||||||
|
this.single = selection.length != 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加公告";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const noticeId = row.noticeId || this.ids
|
||||||
|
getNotice(noticeId).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改公告";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm: function () {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.noticeId != undefined) {
|
||||||
|
updateNotice(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addNotice(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const noticeIds = row.noticeId || this.ids
|
||||||
|
this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项?').then(function () {
|
||||||
|
return delNotice(noticeIds);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
['/api/v4']: {
|
['/api/v4']: {
|
||||||
target: `http://localhost:8081`,
|
target: `http://wumei.live:8081`,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
// logLevel: 'debug',
|
// logLevel: 'debug',
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user