大屏页面初始化
This commit is contained in:
36
screen-vue/src/api/bizNote.js
Normal file
36
screen-vue/src/api/bizNote.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取指标信息列表
|
||||
*/
|
||||
export function getNotesList(params) {
|
||||
return request({
|
||||
url: '/biz/notes/list',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 保存/修改
|
||||
*/
|
||||
export function getNotesSave(data) {
|
||||
return request({
|
||||
url: '/biz/notes/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
export function getNotesDelete(params) {
|
||||
return request({
|
||||
url: '/biz/notes/delete',
|
||||
method: 'post',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
@@ -103,11 +103,6 @@ const routes = [
|
||||
component: BigScreenWork
|
||||
},
|
||||
...generateBigScreenRoutes(),
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'BigScreen404',
|
||||
component: Page404
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -29,12 +29,11 @@ import * as echarts from 'echarts'
|
||||
import { getItemInfoList } from '@/api/bizApi'
|
||||
|
||||
const tabDict = [
|
||||
{ key: 'NOTE_YEAR_Y001', label: '类型' }, // 默认选项
|
||||
{ key: 'NOTE_YEAR_Y001', label: '类型' },
|
||||
{ key: 'NOTE_YEAR_Y002', label: '月份' },
|
||||
]
|
||||
|
||||
// 响应式数据
|
||||
const activeTabKey = ref(tabDict[0].key) // 默认选中第一个
|
||||
const activeTabKey = ref(tabDict[0].key)
|
||||
const indexCode = ref(activeTabKey.value)
|
||||
const tableData = ref([])
|
||||
const chartRef = ref(null)
|
||||
@@ -49,7 +48,6 @@ let seriesStatus = {
|
||||
|
||||
const currentYear = new Date().getFullYear().toString();
|
||||
|
||||
// 获取数据方法
|
||||
async function getDataList() {
|
||||
try {
|
||||
const reqParams = {
|
||||
@@ -73,7 +71,6 @@ function switchTab(tabKey) {
|
||||
getDataList()
|
||||
}
|
||||
|
||||
// 计算总数
|
||||
function calculateTotal() {
|
||||
const xAxisData = tableData.value.map(item => item.xaxis || '')
|
||||
const index01Data = tableData.value.map(item => Math.round(Number(item.index01) || 0))
|
||||
@@ -89,7 +86,6 @@ function calculateTotal() {
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染图表
|
||||
function renderChart() {
|
||||
if (!chartRef.value || tableData.value.length === 0) return
|
||||
|
||||
@@ -106,6 +102,11 @@ function renderChart() {
|
||||
const totalData = calculateTotal()
|
||||
|
||||
const option = {
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicOut',
|
||||
animationDelay: function(idx) {
|
||||
return idx * 50;
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
orient: 'horizontal',
|
||||
@@ -208,6 +209,9 @@ function renderChart() {
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
animationDelay: function(idx) {
|
||||
return idx * 30;
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -224,6 +228,9 @@ function renderChart() {
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
animationDelay: function(idx) {
|
||||
return idx * 30 + 100;
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -240,6 +247,9 @@ function renderChart() {
|
||||
fontSize: 10,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
animationDelay: function(idx) {
|
||||
return idx * 30 + 200;
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -258,6 +268,9 @@ function renderChart() {
|
||||
fontSize: 11,
|
||||
color: '#303133',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
animationDelay: function(idx) {
|
||||
return idx * 30 + 300;
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
260
screen-vue/src/views/myapp/note/form.vue
Normal file
260
screen-vue/src/views/myapp/note/form.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
ref="formRef"
|
||||
label-width="100px"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="便签主题" prop="title">
|
||||
<el-input
|
||||
v-model="formData.title"
|
||||
placeholder="请输入便签主题"
|
||||
clearable
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="便签内容" prop="content">
|
||||
<el-input
|
||||
v-model="formData.content"
|
||||
placeholder="请输入便签内容"
|
||||
clearable
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="截止时间" prop="deadline">
|
||||
<el-date-picker
|
||||
v-model="formData.deadline"
|
||||
type="datetime"
|
||||
placeholder="请选择截止时间"
|
||||
clearable
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<el-form-item label="便签分类" prop="type">
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
placeholder="请选择便签分类"
|
||||
clearable
|
||||
>
|
||||
<el-option label="工作" value="work" />
|
||||
<el-option label="生活" value="life" />
|
||||
<el-option label="学习" value="study" />
|
||||
<el-option label="其他" value="other" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="formData.startTime"
|
||||
type="datetime"
|
||||
placeholder="请选择开始时间"
|
||||
clearable
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker
|
||||
v-model="formData.endTime"
|
||||
type="datetime"
|
||||
placeholder="请选择结束时间"
|
||||
clearable
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<el-form-item label="便签级别" prop="priority">
|
||||
<el-select
|
||||
v-model="formData.priority"
|
||||
placeholder="请选择便签级别"
|
||||
clearable
|
||||
>
|
||||
<el-option label="低" value="low" />
|
||||
<el-option label="中" value="medium" />
|
||||
<el-option label="高" value="high" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<el-form-item label="便签状态" prop="ustatus">
|
||||
<el-select
|
||||
v-model="formData.ustatus"
|
||||
placeholder="请选择便签状态"
|
||||
clearable
|
||||
>
|
||||
<el-option label="待开始" value="todo" />
|
||||
<el-option label="进行中" value="doing" />
|
||||
<el-option label="已完成" value="done" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
title: '',
|
||||
content: '',
|
||||
deadline: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
priority: '',
|
||||
ustatus: '',
|
||||
type: ''
|
||||
})
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
const formRules = {
|
||||
title: [
|
||||
{ required: true, message: '请输入便签主题', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '便签主题长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入便签内容', trigger: 'blur' },
|
||||
{ min: 2, max: 500, message: '便签内容长度在 2 到 500 个字符', trigger: 'blur' }
|
||||
],
|
||||
deadline: [
|
||||
{ required: true, message: '请选择截止时间', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择便签分类', trigger: 'change' }
|
||||
],
|
||||
priority: [
|
||||
{ required: true, message: '请选择便签级别', trigger: 'change' }
|
||||
],
|
||||
ustatus: [
|
||||
{ required: true, message: '请选择便签状态', trigger: 'change' }
|
||||
],
|
||||
}
|
||||
|
||||
const validate = async () => {
|
||||
if (!formRef.value) return false
|
||||
try {
|
||||
const valid = await formRef.value.validate()
|
||||
return valid
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
validate,
|
||||
resetForm
|
||||
})
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-form-container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 0 0 20px 0;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.form-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select),
|
||||
:deep(.el-date-picker) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-textarea) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.dialog-form-container {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
634
screen-vue/src/views/myapp/note/list.vue
Normal file
634
screen-vue/src/views/myapp/note/list.vue
Normal file
@@ -0,0 +1,634 @@
|
||||
<template>
|
||||
<div class="data-manage-page">
|
||||
<div class="search-section">
|
||||
<CSearch
|
||||
@search="handleSearch"
|
||||
@reset="handleReset"
|
||||
>
|
||||
<el-form-item label="便签主题：" class="search-item">
|
||||
<el-input
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入便签主题"
|
||||
clearable
|
||||
class="search-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="便签级别：" class="search-item">
|
||||
<el-select
|
||||
v-model="searchForm.priority"
|
||||
placeholder="请选择便签级别"
|
||||
clearable
|
||||
class="search-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="(label, value) in priorityDict"
|
||||
:key="value"
|
||||
:label="label"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="便签状态：" class="search-item">
|
||||
<el-select
|
||||
v-model="searchForm.ustatus"
|
||||
placeholder="请选择便签状态"
|
||||
clearable
|
||||
class="search-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="(label, value) in statusDict"
|
||||
:key="value"
|
||||
:label="label"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</CSearch>
|
||||
</div>
|
||||
|
||||
<div class="action-section">
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd">
|
||||
新增
|
||||
</el-button>
|
||||
<div class="tag-switcher">
|
||||
<div
|
||||
v-for="(tag, key) in tagDict"
|
||||
:key="key"
|
||||
class="tag-item"
|
||||
:class="{ 'active': activeTag === key }"
|
||||
@click="handleTagChange(key)"
|
||||
>
|
||||
{{ tag }}
|
||||
<span class="tag-underline" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-wrapper">
|
||||
<div class="list-section">
|
||||
<div v-if="tableData.length === 0" class="empty-tip">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
<div v-else class="card-list">
|
||||
<el-card
|
||||
v-for="item in tableData"
|
||||
:key="item.id"
|
||||
class="list-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="card-top">
|
||||
<div class="site-main">
|
||||
<el-tooltip :content="item.title" placement="top">
|
||||
<div class="site-name">{{ item.title }}</div>
|
||||
</el-tooltip>
|
||||
|
||||
<div class="title-divider"></div>
|
||||
|
||||
<div class="meta-line">
|
||||
<span class="deadline-text">
|
||||
<el-icon size="12"><Clock /></el-icon>
|
||||
截止：{{ item.deadline || '无' }}
|
||||
</span>
|
||||
<div class="meta-tags">
|
||||
<el-tag
|
||||
:type="getPriorityTagType(item.priority)"
|
||||
size="small"
|
||||
class="priority-tag"
|
||||
>
|
||||
{{ priorityDict[item.priority] || '无级别' }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
:type="getStatusTagType(item.ustatus)"
|
||||
size="small"
|
||||
class="status-tag"
|
||||
>
|
||||
{{ statusDict[item.ustatus] || '无状态' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-divider"></div>
|
||||
|
||||
<el-tooltip :content="item.content" placement="top">
|
||||
<div class="site-text">{{ item.content }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-divider"></div>
|
||||
|
||||
<div class="card-bottom">
|
||||
<span class="card-date">创建时间：{{ item.createTime }}</span>
|
||||
<div class="card-actions">
|
||||
<el-button size="small" type="primary" @click="handleEdit(item)">
|
||||
<el-icon><Edit /></el-icon>
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(item)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination-footer">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[20, 50, 99]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PDialog
|
||||
v-model="dialogVisible"
|
||||
:loading="saveLoading"
|
||||
:title="isEdit ? '编辑数据' : '新增数据'"
|
||||
@close="handleDialogClose"
|
||||
@reset="handleDialogReset"
|
||||
@confirm="handleSave"
|
||||
>
|
||||
<VForm ref="formComponentRef" :form-data="formData" :is-edit="isEdit" />
|
||||
</PDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Edit, Delete, Clock } from '@element-plus/icons-vue'
|
||||
import { getNotesList, getNotesSave, getNotesDelete } from '@/api/bizNote'
|
||||
|
||||
import CSearch from '@/components/Search/proSearch.vue'
|
||||
import PDialog from '@/components/Dialog/proDialog.vue'
|
||||
import VForm from './form.vue'
|
||||
|
||||
const formComponentRef = ref(null)
|
||||
const saveLoading = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
const searchForm = reactive({
|
||||
title: '',
|
||||
priority: '',
|
||||
ustatus: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
|
||||
const isEdit = ref(false)
|
||||
const formData = ref({})
|
||||
const currentRow = ref({})
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
const priorityDict = {
|
||||
low: '低',
|
||||
medium: '中',
|
||||
high: '高'
|
||||
}
|
||||
|
||||
const statusDict = {
|
||||
todo: '待开始',
|
||||
doing: '进行中',
|
||||
done: '已完成'
|
||||
}
|
||||
|
||||
const tagDict = reactive({
|
||||
work: '工作',
|
||||
life: '生活',
|
||||
study: '学习',
|
||||
other: '其他'
|
||||
})
|
||||
const activeTag = ref('work')
|
||||
|
||||
const getPriorityTagType = (priority) => {
|
||||
const typeMap = {
|
||||
low: 'success',
|
||||
medium: 'warning',
|
||||
high: 'danger'
|
||||
}
|
||||
return typeMap[priority] || 'info'
|
||||
}
|
||||
|
||||
const getStatusTagType = (status) => {
|
||||
const typeMap = {
|
||||
todo: 'info',
|
||||
doing: 'primary',
|
||||
done: 'success'
|
||||
}
|
||||
return typeMap[status] || 'info'
|
||||
}
|
||||
|
||||
const handleTagChange = (tagKey) => {
|
||||
activeTag.value = tagKey
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
async function getDataList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const reqParams = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
type: activeTag.value,
|
||||
...searchForm,
|
||||
}
|
||||
const res = await getNotesList(reqParams);
|
||||
pagination.total = res.total;
|
||||
tableData.value = res.list || [];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
tableData.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
Object.assign(searchForm, {
|
||||
title: '',
|
||||
priority: '',
|
||||
ustatus: ''
|
||||
})
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
formData.value = {}
|
||||
currentRow.value = {}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
isEdit.value = true
|
||||
formData.value = { ...row }
|
||||
currentRow.value = { ...row }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleDelete = async (row) => {
|
||||
ElMessageBox.confirm('确定要删除该条便签数据吗?', '删除确认', {
|
||||
type: 'warning',
|
||||
closeOnClickModal: false,
|
||||
showClose: false
|
||||
})
|
||||
.then(async () => {
|
||||
const reqParams = {
|
||||
id: row.id
|
||||
}
|
||||
const res = await getNotesDelete(reqParams);
|
||||
ElMessage.success(res.msg || '删除成功');
|
||||
getDataList();
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.info('已取消删除数据操作');
|
||||
});
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.pageSize = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.pageNum = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleDialogClose = () => {
|
||||
formData.value = {}
|
||||
isEdit.value = false
|
||||
currentRow.value = {}
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const handleDialogReset = () => {
|
||||
if (formComponentRef.value) {
|
||||
formComponentRef.value.resetForm()
|
||||
ElMessage.info('表单已重置')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (formComponentRef.value) {
|
||||
const isValid = await formComponentRef.value.validate()
|
||||
if (!isValid) {
|
||||
ElMessage.warning('表单验证失败，请检查必填项')
|
||||
return
|
||||
}
|
||||
}
|
||||
saveLoading.value = true
|
||||
try {
|
||||
const reqParams = {
|
||||
...formData.value,
|
||||
isEdit: isEdit.value,
|
||||
id: currentRow.value?.id
|
||||
}
|
||||
const res = await getNotesSave(reqParams);
|
||||
saveLoading.value = false
|
||||
dialogVisible.value = false
|
||||
ElMessage.success(res.msg)
|
||||
getDataList()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
saveLoading.value = false
|
||||
ElMessage.error('保存失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.data-manage-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
padding: 0 0 12px 0;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.tag-switcher {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding: 4px 0;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.tag-item .tag-underline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.2s ease, width 0.2s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.tag-item.active {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag-item.active .tag-underline {
|
||||
background-color: #409eff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tag-item:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.tag-item:hover .tag-underline {
|
||||
background-color: #a0cfff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.list-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.list-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
|
||||
border-color: #409eff !important;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 6px 12px 4px;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #1f2937;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title-divider {
|
||||
height: 1px;
|
||||
background: #e5e7eb;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.meta-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.deadline-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.priority-tag, .status-tag {
|
||||
border-radius: 4px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.content-divider {
|
||||
height: 1px;
|
||||
background: #e5e7eb;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.site-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding: 8px 12px;
|
||||
background-color: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
min-height: 60px;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.site-text:hover {
|
||||
color: #409eff;
|
||||
border-color: #409eff;
|
||||
background-color: #f0f7ff;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px 8px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pagination-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.meta-line {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-tags {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -39,7 +39,7 @@ public class desktopController {
|
||||
public Result<?> getNoteList() {
|
||||
LambdaQueryWrapper<Notes> query = new LambdaQueryWrapper<Notes>()
|
||||
.notIn(Notes::getUstatus, "done")
|
||||
.orderByDesc(Notes::getCreateUser);
|
||||
.orderByDesc(Notes::getCreateTime);
|
||||
return Result.success(notesService.list(query));
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
package com.mini.mybigscreen.biz.controller;
|
||||
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import cn.hutool.core.util.StrUtil;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
|
||||
import com.mini.mybigscreen.Model.Message;
|
||||
import com.mini.mybigscreen.Model.PageResult;
|
||||
import com.mini.mybigscreen.Model.Result;
|
||||
import com.mini.mybigscreen.biz.domain.Notes;
|
||||
import com.mini.mybigscreen.biz.service.NotesService;
|
||||
import com.mini.mybigscreen.utils.PageUtil;
|
||||
import jakarta.annotation.Resource;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
@@ -15,4 +26,38 @@ import org.springframework.web.bind.annotation.RestController;
|
||||
@RequestMapping("/biz/notes")
|
||||
public class NotesController {
|
||||
|
||||
|
||||
@Resource
|
||||
private NotesService notesService;
|
||||
|
||||
|
||||
@GetMapping("list")
|
||||
public Result<?> getList(Integer pageNum, Integer pageSize,
|
||||
String title, String priority, String ustatus, String type) {
|
||||
LambdaQueryWrapper<Notes> query = new LambdaQueryWrapper<Notes>()
|
||||
.like(StrUtil.isNotBlank(title), Notes::getTitle, title)
|
||||
.eq(StrUtil.isNotBlank(priority), Notes::getPriority, priority)
|
||||
.eq(StrUtil.isNotBlank(ustatus), Notes::getUstatus, ustatus)
|
||||
.eq(StrUtil.isNotBlank(type), Notes::getType, type)
|
||||
.orderByDesc(Notes::getCreateTime);
|
||||
List<Notes> list = notesService.list(query);
|
||||
PageUtil<?> util = new PageUtil<>(pageNum, pageSize, list);
|
||||
PageResult<?> result = new PageResult<>(util.OkData(), pageNum, pageSize, list.size());
|
||||
return Result.success(result);
|
||||
}
|
||||
|
||||
@PostMapping("save")
|
||||
public Result<Message> save(@RequestBody Notes notes) {
|
||||
boolean success = notes.getIsEdit()
|
||||
? notesService.update(notes,
|
||||
new LambdaUpdateWrapper<Notes>().eq(Notes::getId, notes.getId())
|
||||
) : notesService.save(notes);
|
||||
return Result.success(new Message(notes.getIsEdit() ? "数据修改成功" : "数据新增成功", 200));
|
||||
}
|
||||
|
||||
@PostMapping("delete")
|
||||
public Result<Message> delete(String id) {
|
||||
notesService.removeById(id);
|
||||
return Result.success(new Message("数据删除成功", 200));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,8 @@ import com.baomidou.mybatisplus.annotation.IdType;
|
||||
import com.baomidou.mybatisplus.annotation.TableField;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
|
||||
import java.io.Serial;
|
||||
import java.io.Serializable;
|
||||
import java.time.LocalDateTime;
|
||||
import lombok.Getter;
|
||||
@@ -22,6 +24,7 @@ import lombok.Setter;
|
||||
@TableName("biz_home_module")
|
||||
public class HomeModule implements Serializable {
|
||||
|
||||
@Serial
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@TableField("create_time")
|
||||
|
||||
@@ -4,6 +4,8 @@ import com.baomidou.mybatisplus.annotation.IdType;
|
||||
import com.baomidou.mybatisplus.annotation.TableField;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
|
||||
import java.io.Serial;
|
||||
import java.io.Serializable;
|
||||
import java.time.LocalDateTime;
|
||||
|
||||
@@ -24,6 +26,7 @@ import lombok.Setter;
|
||||
@TableName("biz_home_user")
|
||||
public class HomeUser extends BaseEntity implements Serializable {
|
||||
|
||||
@Serial
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
|
||||
@@ -4,8 +4,12 @@ import com.baomidou.mybatisplus.annotation.IdType;
|
||||
import com.baomidou.mybatisplus.annotation.TableField;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
|
||||
import java.io.Serial;
|
||||
import java.io.Serializable;
|
||||
import java.time.LocalDateTime;
|
||||
|
||||
import com.mini.mybigscreen.Model.BaseEntity;
|
||||
import lombok.Getter;
|
||||
import lombok.Setter;
|
||||
|
||||
@@ -20,8 +24,9 @@ import lombok.Setter;
|
||||
@Getter
|
||||
@Setter
|
||||
@TableName("biz_notes")
|
||||
public class Notes implements Serializable {
|
||||
public class Notes extends BaseEntity implements Serializable {
|
||||
|
||||
@Serial
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
|
||||
@@ -4,8 +4,12 @@ import com.baomidou.mybatisplus.annotation.IdType;
|
||||
import com.baomidou.mybatisplus.annotation.TableField;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
|
||||
import java.io.Serial;
|
||||
import java.io.Serializable;
|
||||
import java.time.LocalDateTime;
|
||||
|
||||
import com.mini.mybigscreen.Model.BaseEntity;
|
||||
import lombok.Getter;
|
||||
import lombok.Setter;
|
||||
|
||||
@@ -20,8 +24,9 @@ import lombok.Setter;
|
||||
@Getter
|
||||
@Setter
|
||||
@TableName("biz_quick_login")
|
||||
public class QuickLogin implements Serializable {
|
||||
public class QuickLogin extends BaseEntity implements Serializable {
|
||||
|
||||
@Serial
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
|
||||
@@ -4,8 +4,12 @@ import com.baomidou.mybatisplus.annotation.IdType;
|
||||
import com.baomidou.mybatisplus.annotation.TableField;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
|
||||
import java.io.Serial;
|
||||
import java.io.Serializable;
|
||||
import java.time.LocalDateTime;
|
||||
|
||||
import com.mini.mybigscreen.Model.BaseEntity;
|
||||
import lombok.Getter;
|
||||
import lombok.Setter;
|
||||
|
||||
@@ -20,8 +24,9 @@ import lombok.Setter;
|
||||
@Getter
|
||||
@Setter
|
||||
@TableName("biz_warning_alert")
|
||||
public class WarningAlert implements Serializable {
|
||||
public class WarningAlert extends BaseEntity implements Serializable {
|
||||
|
||||
@Serial
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user