<template>
<div>
<div>
<
el-form ref="form" :mod
el="form" lab
el-width="80px">
<
el-form
-item lab
el="">
标题
<
el-input v
-mod
el="form
.title" style="width: 200px"></
el-input>
创建人
<
el-input v
-mod
el="form
.r
esname" style="width: 200px"></
el-input>
创建时间
<
el-date-picker
v
-mod
el="startEndTime"
type="
datetimerange"
range
-separator="至"
start
-placeholder="开始日期"
end
-placeholder="结束日期"
>
</
el-date-picker>
<
el-button type="primary" @click="findBulletinAll">搜索</
el-button>
</
el-form
-item>
<
el-form
-item>
<
el-button type="primary" @click="openSaveDialog()"
>新增公告</
el-button
>
</
el-form
-item>
</
el-form>
</div>
<div>
<
el-table :data="tableData" style="width: 100%">
<
el-table
-column prop="title" lab
el="标题"> </
el-table
-column>
<
el-table
-column prop="content" lab
el="内容">
<template slot
-scope="scope">
{{ scope
.row
.content
.substring(0,
6) }}
...
</template>
</
el-table
-column>
<
el-table
-column prop="userName" lab
el="创建人"> </
el-table
-column>
<
el-table
-column prop="createTime" lab
el="创建时间">
<template slot
-scope="scope">
{{ formatTime(scope
.row
.createTime) }}
</template>
</
el-table
-column>
<
el-table
-column prop="pic" lab
el="封面">
<template slot
-scope="scope">
<img
v
-bind:src="scope
.row
.pic"
alt=""
style="width: 100px; height: 80px"
/>
</template>
</
el-table
-column>
<
el-table
-column prop="" lab
el="操作">
<template slot
-scope="scope">
<
el-button
type="primary"
circle
@click="openUp
dateDialog(scope
.row
.id)"
>编辑</
el-button
>
<
el-button type="danger" circle @click="d
eleteById(scope
.row
.id)"
>删除</
el-button
>
</template>
</
el-table
-column>
</
el-table>
</div>
<div>
<!
-- 新增
-->
<
el-dialog title="输入反馈信息" :v
isible
.sync="dialogFormV
isible">
<
el-form :mod
el="saveForm" ref="formRef">
<
el-form
-item lab
el="封面">
<
el-upload
class="avatar
-uploader"
action="http://localhost:8081/file/upload"
:show
-file
-l
ist="false"
:on
-succ
ess="handleAvatarSucc
essSave"
:before
-upload="beforeAvatarUpload"
style="width: 200px"
>
<img v
-if="saveForm
.pic" :src="saveForm
.pic" class="avatar" />
<i v
-else class="
el-icon
-plus avatar
-uploader
-icon"></i>
</
el-upload>
</
el-form
-item>
<
el-form
-item lab
el="标题">
<
el-input v
-mod
el="saveForm
.title" autocomplete="off"></
el-input>
</
el-form
-item>
<
el-form
-item lab
el="内容">
<
el-input v
-mod
el="saveForm
.content" autocomplete="off"></
el-input>
</
el-form
-item>
</
el-form>
<div slot="footer" class="dialog
-footer">
<
el-button @click="dialogFormV
isible = false">取 消</
el-button>
<
el-button type="primary" @click="saveBulletin">确 定</
el-button>
</div>
</
el-dialog>
</div>
<div>
<!
-- 修改
-->
<
el-dialog title="输入反馈信息" :v
isible
.sync="dialogFormV
isible2">
<
el-form :mod
el="up
dateForm" ref="formRef">
<
el-form
-item lab
el="封面">
<
el-upload
class="avatar
-uploader"
action="http://localhost:8081/file/upload"
:show
-file
-l
ist="false"
:on
-succ
ess="handleAvatarSucc
essUp
date"
:before
-upload="beforeAvatarUpload"
style="width: 200px"
>
<img v
-if="up
dateForm
.pic" :src="up
dateForm
.pic" class="avatar" />
<i v
-else class="
el-icon
-plus avatar
-uploader
-icon"></i>
</
el-upload>
</
el-form
-item>
<
el-form
-item lab
el="标题">
<
el-input v
-mod
el="up
dateForm
.title" autocomplete="off"></
el-input>
</
el-form
-item>
<
el-form
-item lab
el="内容">
<
el-input
v
-mod
el="up
dateForm
.content"
autocomplete="off"
></
el-input>
</
el-form
-item>
</
el-form>
<div slot="footer" class="dialog
-footer">
<
el-button @click="dialogFormV
isible2 = false">取 消</
el-button>
<
el-button type="primary" @click="up
dateById">确 定</
el-button>
</div>
</
el-dialog>
</div>
<!
-- 分页组件
-->
<
el-pagination
background
layout="prev, pager, next"
:total="total"
:page
-size="pag
eSize"
:current
-page="pageNum"
@current
-change="handlePageChange"
></
el-pagination>
</div>
</template>
<script>
import { findBulletinAll } from "@/api/admin";
import { d
eleteById } from "@/api/admin";
import { saveOrUp
dateBulletin } from "@/api/admin";
import { findBulletinById } from "@/api/admin";
export default {
name: "adminBulletin",
data() {
return {
dialogFormV
isible: false,
dialogFormV
isible2: false,
pageNum: 1,
pag
eSize:
6,
total: 0,
pic: "",
startEndTime: "",
form: {
startTime: "",
endTime: "",
title: "",
r
esname: "",
page: "",
size: "",
},
tableData: [],
saveForm: {
userId: localStorage
.getItem("userId"),
pic: "",
title: "",
content: "",
},
up
dateForm: {
id: "",
userId: localStorage
.getItem("userId"),
pic: "",
title: "",
content: "",
},
};
},
created() {
th
is.findBulletinAll();
},
methods: {
findBulletinAll() {
console
.log(th
is.form);
th
is.form
.page = th
is.pageNum;
th
is.form
.size = th
is.pag
eSize;
th
is.form
.startTime = th
is.format
Date(th
is.startEndTime[0]);
th
is.form
.endTime = th
is.format
Date(th
is.startEndTime[1]);
findBulletinAll(th
is.form)
.then((r
esp) => {
console
.log(r
esp
.data
.data
.l
ist
.l
ist);
th
is.tableData = r
esp
.data
.data
.l
ist
.l
ist;
th
is.total = r
esp
.data
.total;
});
},
openSaveDialog() {
th
is.dialogFormV
isible = true;
},
saveBulletin() {
saveOrUp
dateBulletin(th
is.saveForm)
.then((r
esp) => {
if (r
esp
.data
.code == 200) {
th
is.$m
essage
.succ
ess(r
esp
.data
.m
essage);
}
else {
th
is.$m
essage
.error(r
esp
.data
.m
essage);
}
location
.r
eload();
});
},
openUp
dateDialog(id) {
th
is.dialogFormV
isible2 = true;
findBulletinById(id)
.then((r
esp) => {
th
is.up
dateForm = r
esp
.data
.data
.bulletin;
th
is.pic = r
esp
.data
.data
.bulletin
.pic;
});
},
up
dateById() {
saveOrUp
dateBulletin(th
is.up
dateForm)
.then((r
esp) => {
if (r
esp
.data
.code == 200) {
th
is.$m
essage
.succ
ess(r
esp
.data
.m
essage);
}
else {
th
is.$m
essage
.error(r
esp
.data
.m
essage);
}
location
.r
eload();
});
},
d
eleteById(id) {
d
eleteById(id)
.then((r
esp) => {
if (r
esp
.data
.code == 200) {
th
is.$m
essage
.succ
ess(r
esp
.data
.m
essage);
}
else {
th
is.$m
essage
.error(r
esp
.data
.m
essage);
}
location
.r
eload();
});
},
handlePageChange(page) {
th
is.pageNum = page;
th
is.findBulletinAll();
},
format
Date(
date) {
if (!
date) return "";
const year =
date.getFullYear();
const month = (
date.getMonth() + 1)
.toString()
.padStart(2, "0");
const day =
date.get
Date()
.toString()
.padStart(2, "0");
const hours =
date.getHours()
.toString()
.padStart(2, "0");
const minut
es =
date.getMinut
es()
.toString()
.padStart(2, "0");
const seconds =
date.getSeconds()
.toString()
.padStart(2, "0");
return `${year}
-${month}
-${day} ${hours}:${minut
es}:${seconds}`;
},
formatTime(tim
eStr) {
const
date = new
Date(tim
eStr);
const year =
date.getFullYear();
const month = String(
date.getMonth() + 1)
.padStart(2, "0");
const day = String(
date.get
Date())
.padStart(2, "0");
const hours = String(
date.getHours())
.padStart(2, "0");
const minut
es = String(
date.getMinut
es())
.padStart(2, "0");
const seconds = String(
date.getSeconds())
.padStart(2, "0");
return `${year}
-${month}
-${day} ${hours}:${minut
es}:${seconds}`;
},
//图片回显
handleAvatarSucc
essSave(r
es) {
th
is.saveForm
.pic = r
es.data
.url;
},
//图片回显
handleAvatarSucc
essUp
date(r
es) {
th
is.up
dateForm
.pic = r
es.data
.url;
},
//设置文件格式
beforeAvatarUpload(file) {
const
isLt2M = file
.size / 1024 / 1024 < 10;
if (!
isLt2M) {
th
is.$m
essage
.error("上传头像图片大小不能超过 2MB!");
}
return
isLt2M;
},
},
};
</script>
美化，风格统一，很漂亮那种
Element UI 中的日期选择器问题及解决方案
在使用Element UI的项目中，遇到el-date-picker组件无法选择日期的问题，点击后报date.getHours is not a function错误。原因是通过render函数渲染的el-date-picker元素中，this.value初始为'undefined'字符串，导致错误。解决方法是在内部修改value值，但此做法违反Vue最佳实践。寻求完美解决方案，避免后续可能出现的json存储回显问题。
扫一扫
2778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
