✨ feat: 调整样式更紧凑
This commit is contained in:
@@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div class="dashboard-cards">
|
||||
<!-- 循环渲染4个统计卡片,通过index控制特殊样式:第三张无数值、第四张无图表 -->
|
||||
<el-card v-for="(card, index) in dataCards" :key="index" class="stats-card">
|
||||
<div class="card-header">
|
||||
<div class="card-info">
|
||||
<h3 class="card-title">{{ card.title }}</h3>
|
||||
<!-- 第三个卡片不显示value -->
|
||||
<p class="card-value">{{ card.value }}</p>
|
||||
<!-- 第三张卡片(库存排行)不显示数值,用v-if控制显隐 -->
|
||||
<p class="card-value" v-if="index !== 2">{{ card.value }}</p>
|
||||
</div>
|
||||
<!-- 右侧图标:通过动态组件渲染,颜色绑定卡片配置 -->
|
||||
<el-icon class="card-icon" :style="{ color: card.color }">
|
||||
<component :is="card.icon" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- 第四个卡片不显示图表 -->
|
||||
<!-- 第四张卡片(系统状态)不显示图表,用v-if控制显隐 -->
|
||||
<div class="chart-container" v-if="index !== 3">
|
||||
<div :ref="el => chartRefs[index] = el" class="chart"></div>
|
||||
</div>
|
||||
@@ -20,185 +22,226 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 1. 导入依赖:图标、接口、echarts、Vue工具函数
|
||||
import { ShoppingCart, Box, List, Monitor } from '@element-plus/icons-vue';
|
||||
import { overview } from '@/api/oa/dashboard';
|
||||
import * as echarts from 'echarts';
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
|
||||
// 2. 图表颜色生成函数:支持透明度,适配折线图区域填充
|
||||
const getColor = (index, alpha = 1) => {
|
||||
const colors = [
|
||||
`rgba(59, 130, 246, ${alpha})`,
|
||||
`rgba(34, 197, 94, ${alpha})`,
|
||||
`rgba(234, 179, 8, ${alpha})`,
|
||||
`rgba(168, 85, 247, ${alpha})`
|
||||
`rgba(59, 130, 246, ${alpha})`, // 蓝色(订单总量)
|
||||
`rgba(245, 158, 11, ${alpha})`, // 黄色(薪资成本)
|
||||
`rgba(34, 197, 94, ${alpha})`, // 绿色(库存排行)
|
||||
`rgba(168, 85, 247, ${alpha})` // 紫色(系统状态)
|
||||
];
|
||||
return colors[index % colors.length];
|
||||
};
|
||||
|
||||
// 3. 初始化图表函数:仅处理前3张有图表的卡片,避免空引用
|
||||
const initCharts = () => {
|
||||
nextTick(() => {
|
||||
// 只初始化前3个卡片的图表
|
||||
dataCards.value.slice(0, 3).forEach((card, index) => {
|
||||
const chart = echarts.init(chartRefs.value[index]);
|
||||
// 判断是否为第三个图表(index=2),使用柱状图配置
|
||||
const isBarChart = index === 2;
|
||||
|
||||
const chartDom = chartRefs.value[index];
|
||||
if (!chartDom) return; // 防止DOM未渲染导致报错
|
||||
|
||||
const chart = echarts.init(chartDom);
|
||||
const isBarChart = index === 2; // 第三张用柱状图,其余用折线图
|
||||
|
||||
// 图表配置:紧凑化优化(隐藏坐标轴、压缩网格、调整柱子宽度)
|
||||
const option = {
|
||||
animation: false,
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
animation: false, // 关闭动画提升性能
|
||||
grid: { left: 0, right: 0, top: 0, bottom: 0 }, // 占满容器
|
||||
xAxis: { type: 'category', show: false }, // 隐藏X轴
|
||||
yAxis: { type: 'value', show: false }, // 隐藏Y轴
|
||||
series: [{
|
||||
data: card.chartData,
|
||||
type: isBarChart ? 'bar' : 'line', // 第三个图表用柱状图,其他用折线图
|
||||
smooth: !isBarChart, // 柱状图不需要平滑效果
|
||||
showSymbol: false,
|
||||
lineStyle: !isBarChart ? { // 折线图样式(柱状图不需要)
|
||||
color: getColor(index)
|
||||
} : undefined,
|
||||
// 柱状图颜色配置
|
||||
itemStyle: isBarChart ? {
|
||||
color: getColor(index)
|
||||
} : undefined,
|
||||
// 折线图区域填充(柱状图不需要)
|
||||
type: isBarChart ? 'bar' : 'line',
|
||||
smooth: !isBarChart, // 折线图平滑,柱状图不需要
|
||||
showSymbol: false, // 隐藏数据点
|
||||
// 折线图样式:细线更紧凑
|
||||
lineStyle: !isBarChart ? { color: getColor(index), width: 1.5 } : undefined,
|
||||
// 柱状图样式:调整宽度+小圆角
|
||||
itemStyle: isBarChart ? { color: getColor(index), borderRadius: 2 } : undefined,
|
||||
barWidth: isBarChart ? '65%' : undefined, // 柱子占比65%,减少间距
|
||||
// 折线图区域填充:增强视觉不占空间
|
||||
areaStyle: !isBarChart ? {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: getColor(index, 0.2)
|
||||
}, {
|
||||
offset: 1,
|
||||
color: getColor(index, 0.1)
|
||||
}])
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: getColor(index, 0.2) },
|
||||
{ offset: 1, color: getColor(index, 0.05) }
|
||||
])
|
||||
} : undefined
|
||||
}]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
// 监听窗口resize,确保图表自适应
|
||||
window.addEventListener('resize', () => chart.resize());
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 4. 卡片数据初始化:默认值+接口待填充字段
|
||||
const dataCards = ref([
|
||||
{
|
||||
title: '本周订单总量',
|
||||
value: '2,384',
|
||||
icon: ShoppingCart,
|
||||
color: '#3B82F6', // blue-500
|
||||
color: '#3B82F6',
|
||||
chartData: [30, 40, 20, 50, 40, 60, 70]
|
||||
},
|
||||
{
|
||||
title: '本周薪资成本',
|
||||
value: '48',
|
||||
icon: List,
|
||||
color: '#F59E0B', // yellow-500
|
||||
color: '#F59E0B',
|
||||
chartData: [20, 40, 30, 50, 40, 60, 50]
|
||||
},
|
||||
{
|
||||
title: '库存排行',
|
||||
// 第三个卡片不需要value
|
||||
value: '-',
|
||||
value: '-', // 第三张卡片默认隐藏数值
|
||||
icon: Box,
|
||||
color: '#10B981', // green-500
|
||||
color: '#10B981',
|
||||
chartData: [40, 30, 50, 40, 60, 50, 70]
|
||||
},
|
||||
{
|
||||
title: '系统状态',
|
||||
value: '正常',
|
||||
icon: Monitor,
|
||||
color: '#8B5CF6', // purple-500
|
||||
// 第四个卡片不需要图表数据
|
||||
chartData: []
|
||||
color: '#8B5CF6',
|
||||
chartData: [] // 第四张卡片无图表数据
|
||||
}
|
||||
]);
|
||||
|
||||
// 5. 图表DOM引用:存储前3张卡片的图表容器
|
||||
const chartRefs = ref([]);
|
||||
|
||||
// 6. 页面挂载:请求接口数据+初始化图表
|
||||
onMounted(() => {
|
||||
overview().then(res => {
|
||||
dataCards.value[0].value = res.data.orderStatistics.weekOrderCount;
|
||||
dataCards.value[0].chartData = res.data.orderStatistics.weeklyTrend.map(item => item.value);
|
||||
overview()
|
||||
.then(res => {
|
||||
// 填充订单总量数据
|
||||
dataCards.value[0].value = res.data.orderStatistics.weekOrderCount;
|
||||
dataCards.value[0].chartData = res.data.orderStatistics.weeklyTrend.map(item => item.value);
|
||||
|
||||
dataCards.value[1].value = res.data.salaryStatistics.weekSalary;
|
||||
dataCards.value[1].chartData = res.data.salaryStatistics.weeklyTrend.map(item => item.value);
|
||||
// 填充薪资成本数据
|
||||
dataCards.value[1].value = res.data.salaryStatistics.weekSalary;
|
||||
dataCards.value[1].chartData = res.data.salaryStatistics.weeklyTrend.map(item => item.value);
|
||||
|
||||
// 处理库存排行数据
|
||||
dataCards.value[2].chartData = res.data.stockRanking.map(item => item.quantity);
|
||||
|
||||
initCharts();
|
||||
})
|
||||
})
|
||||
// 填充库存排行图表数据(无数值)
|
||||
dataCards.value[2].chartData = res.data.stockRanking.map(item => item.quantity);
|
||||
|
||||
// 数据更新后初始化图表
|
||||
initCharts();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('仪表盘数据请求失败:', err);
|
||||
// 失败时仍初始化默认图表,避免页面空白
|
||||
initCharts();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
// 1. 卡片容器:网格布局紧凑化
|
||||
.dashboard-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
gap: 0.75rem; // 间距从1.5rem减至0.75rem(减少50%)
|
||||
margin-bottom: 1.25rem; // 底部外间距从2rem减至1.25rem
|
||||
padding: 0 0.5rem; // 轻微左右内边距,避免贴边
|
||||
}
|
||||
|
||||
// 2. 单个卡片:整体压缩
|
||||
.stats-card {
|
||||
border-radius: 0.5rem !important;
|
||||
border-radius: 0.375rem !important; // 圆角从0.5rem减至0.375rem
|
||||
backdrop-filter: blur(4px);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 0.75rem !important; // 内边距从1.5rem减至0.75rem(减少50%)
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); // 弱化阴影
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.2s ease; // 缩短过渡时间
|
||||
|
||||
// hover效果:轻微放大,不占用过多空间
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
transform: scale(1.01); // 放大比例从1.02减至1.01
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 卡片头部:垂直压缩
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.4rem; // 头部与图表间距从1rem减至0.4rem
|
||||
}
|
||||
|
||||
// 4. 标题+数值容器:行高压缩
|
||||
.card-info {
|
||||
// 用于包裹标题和值
|
||||
line-height: 1.15; // 减少垂直占用
|
||||
}
|
||||
|
||||
// 5. 卡片标题:字体缩小+间距压缩
|
||||
.card-title {
|
||||
color: #6B7280; // gray-500
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.25rem;
|
||||
color: #6B7280;
|
||||
font-size: 0.725rem; // 字体从0.875rem减至0.725rem
|
||||
margin-bottom: 0.1rem; // 与数值间距从0.25rem减至0.1rem
|
||||
font-weight: 500;
|
||||
margin: 0 0 0.1rem 0; // 清除默认margin
|
||||
}
|
||||
|
||||
// 6. 卡片数值:字体缩小+行高优化
|
||||
.card-value {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.15rem; // 字体从1.5rem减至1.15rem
|
||||
font-weight: 600;
|
||||
line-height: 1.25; // 避免换行
|
||||
color: #1F2937;
|
||||
margin: 0; // 清除默认margin
|
||||
}
|
||||
|
||||
// 7. 卡片图标:尺寸缩小+位置优化
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.15rem; // 图标从1.5rem减至1.15rem
|
||||
margin-top: 0.05rem; // 轻微上移,与标题对齐
|
||||
}
|
||||
|
||||
// 8. 图表容器:高度压缩
|
||||
.chart-container {
|
||||
height: 3rem;
|
||||
height: 2.2rem; // 图表高度从3rem减至2.2rem(减少27%)
|
||||
width: 100%;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
margin-top: 0.15rem; // 顶部微小间距,避免贴边
|
||||
overflow: hidden; // 防止图表溢出
|
||||
}
|
||||
|
||||
// 第四个卡片没有图表,调整一下底部边距
|
||||
// 9. 图表DOM:占满容器
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 10. 特殊卡片处理:第四张无图表,清除底部间距
|
||||
.stats-card:nth-child(4) .card-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
// 11. 特殊卡片处理:第三张无数值,图标居中
|
||||
.stats-card:nth-child(3) .card-header {
|
||||
align-items: center; // 避免顶部留白
|
||||
}
|
||||
|
||||
// 12. 响应式适配:小屏幕保持紧凑
|
||||
@media (max-width: 1200px) {
|
||||
.dashboard-cards {
|
||||
gap: 0.6rem; // 进一步缩小间距
|
||||
}
|
||||
.card-title {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.card-value {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="60px">
|
||||
<el-form-item label="汇报标题" prop="reportTitle">
|
||||
<el-input
|
||||
v-model="queryParams.reportTitle"
|
||||
|
||||
@@ -115,8 +115,8 @@
|
||||
|
||||
<el-table v-loading="loading" :data="expressList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column label="物流编号" align="center" prop="expressCode"/>
|
||||
<el-table-column label="数据状态" align="center" prop="status">
|
||||
<el-table-column label="物流号" align="center" prop="expressCode"/>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status===0" type="warning">未确认</el-tag>
|
||||
<el-tag v-if="scope.row.status===1" type="primary">进行中</el-tag>
|
||||
@@ -139,9 +139,9 @@
|
||||
<ExpressRemainTime :planDate="scope.row.planDate" :status="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="对方姓名" align="center" prop="supplyName"/>
|
||||
<el-table-column label="对方姓名" align="center" prop="supplyName" width="90"/>
|
||||
<el-table-column label="负责人" align="center" prop="ownerName"/>
|
||||
<el-table-column label="负责人手机" align="center" prop="ownerPhone"/>
|
||||
<el-table-column label="手机号" align="center" prop="ownerPhone"/>
|
||||
<el-table-column label="计划到货时间" align="center" prop="planDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{parseTime(scope.row.planDate,'{y}-{m}-{d}')}}</span>
|
||||
@@ -152,7 +152,7 @@
|
||||
<span>{{scope.row.updateTime}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物流公司标识" align="center" prop="expressType">
|
||||
<el-table-column label="物流公司" align="center" prop="expressType" width="90">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="oa_express_type" :value="scope.row.expressType"/>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="message-view-page">
|
||||
<el-row>
|
||||
<!-- 左侧:消息列表 -->
|
||||
<el-col :span="8" class="message-list" v-loading = "loading">
|
||||
<el-col :span="8" class="message-list" v-loading="loading">
|
||||
<el-card class="list-container">
|
||||
<pagination
|
||||
:total="total"
|
||||
@@ -10,48 +10,42 @@
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<div
|
||||
v-for="(msg, index) in messageList"
|
||||
:key="msg.feedbackId"
|
||||
class="message-item"
|
||||
:class="{ 'unread': msg.state === 0 }"
|
||||
@click="handleSelectMessage(msg)"
|
||||
>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<div>
|
||||
<div class="message-title">
|
||||
<!-- 已读/未读标记,这里用一个简单的小圆点来表示,也可以根据需求改成文字或图标 -->
|
||||
<span class="state-dot"></span>
|
||||
<span>{{ msg.title }}</span>
|
||||
</div>
|
||||
<div class="message-brief">{{ msg.state === 0 ? '点击查看' : '已读' }}</div>
|
||||
<div
|
||||
v-for="(msg, index) in messageList"
|
||||
:key="msg.feedbackId"
|
||||
class="message-item"
|
||||
:class="{ 'unread': msg.state === 0 }"
|
||||
@click="handleSelectMessage(msg)"
|
||||
>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<div>
|
||||
<div class="message-title">
|
||||
<span class="state-dot"></span>
|
||||
<span>{{ msg.title }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-button icon="Delete" @click="handleDel(msg)" circle></el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-brief">{{ msg.state === 0 ? '点击查看' : '已读' }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-button icon="Delete" @click="handleDel(msg)" size="mini"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧:显示消息详情或空状态 -->
|
||||
<el-col :span="16" class="message-detail" v-loading="msgLoading">
|
||||
<!-- 在右上角放置一个圆形加号按钮,点击后打开对话框 -->
|
||||
<div class="add-feedback-btn">
|
||||
<el-button
|
||||
circle
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
@click="dialogVisible = true"
|
||||
size="medium"
|
||||
></el-button>
|
||||
</div>
|
||||
|
||||
<!-- 详情内容 -->
|
||||
<el-card v-if="selectedMessage" class="detail-container">
|
||||
<!-- 用 v-html 展示富文本内容 -->
|
||||
<div v-html="selectedMessage.content"></div>
|
||||
</el-card>
|
||||
<div v-else class="detail-empty">
|
||||
@@ -64,27 +58,28 @@
|
||||
<el-dialog
|
||||
title="新增反馈"
|
||||
v-model="dialogVisible"
|
||||
width="800px"
|
||||
width="600px"
|
||||
@close="resetForm"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
label-width="70px"
|
||||
:rules="rules"
|
||||
status-icon
|
||||
size="small"
|
||||
>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="反馈内容">
|
||||
<editor v-model="form.content" :min-height="192"/>
|
||||
<editor v-model="form.content" :min-height="160"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleAddFeedback">提交</el-button>
|
||||
<el-button size="small" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button size="small" type="primary" @click="handleAddFeedback">提交</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -98,28 +93,19 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
messageList: [],
|
||||
// 当前选中的消息
|
||||
selectedMessage: null,
|
||||
|
||||
// 分页查询参数
|
||||
queryParams: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
},
|
||||
total: 0,
|
||||
loading:false,
|
||||
masLoading:false,
|
||||
// 新增反馈对话框的显示控制
|
||||
loading: false,
|
||||
msgLoading: false,
|
||||
dialogVisible: false,
|
||||
|
||||
// 表单数据
|
||||
form: {
|
||||
title: "",
|
||||
content: "",
|
||||
// 你可以根据实际需求添加更多字段
|
||||
},
|
||||
|
||||
// 表单校验规则(示例)
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: "请输入标题", trigger: "blur"},
|
||||
@@ -135,57 +121,42 @@ export default {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 处理删除
|
||||
handleDel(row){
|
||||
handleDel(row) {
|
||||
delFeedback(row.feedbackId).then(res => {
|
||||
this.$message.success("删除成功!");
|
||||
this.getList();
|
||||
this.selectedMessage=null;
|
||||
this.selectedMessage = null;
|
||||
})
|
||||
},
|
||||
// 获取反馈列表
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listFeedback(this.queryParams).then((res) => {
|
||||
// 这里根据你的后端返回结构进行赋值
|
||||
this.messageList = res.rows;
|
||||
this.total = res.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 选中某条消息
|
||||
handleSelectMessage(msg) {
|
||||
this.msgLoading = true;
|
||||
this.selectedMessage = msg;
|
||||
// 将消息状态改为已读
|
||||
if (msg.state === 0) {
|
||||
msg.state = 1
|
||||
toRead(msg).then((res) => {
|
||||
})
|
||||
toRead(msg).then((res) => {})
|
||||
}
|
||||
this.msgLoading = false;
|
||||
// 设置当前选中的消息
|
||||
|
||||
},
|
||||
|
||||
// 提交新增反馈
|
||||
handleAddFeedback() {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (!valid) return; // 如果表单校验不通过,直接return
|
||||
// 调用新增API
|
||||
if (!valid) return;
|
||||
addFeedback(this.form).then((res) => {
|
||||
// 假设请求成功后需要刷新列表
|
||||
this.$message.success("反馈新增成功!");
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
}).catch(err => {
|
||||
// 错误处理
|
||||
this.$message.error(err.message || "新增失败");
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 对话框关闭时重置表单
|
||||
resetForm() {
|
||||
this.$refs.formRef && this.$refs.formRef.resetFields();
|
||||
},
|
||||
@@ -195,21 +166,23 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.message-view-page {
|
||||
padding: 20px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
height: 600px; /* 根据需要自行调整 */
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
.message-item {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 4px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.message-item:hover {
|
||||
@@ -218,58 +191,84 @@ export default {
|
||||
|
||||
/* 未读消息红点 */
|
||||
.message-item.unread .state-dot {
|
||||
background-color: #fa5555; /* 未读的红色小圆点 */
|
||||
background-color: #fa5555;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 小圆点标记 */
|
||||
.state-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #cccccc; /* 已读时的灰色小圆点 */
|
||||
margin-right: 8px;
|
||||
background-color: #cccccc;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.message-brief {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 右侧详情 */
|
||||
.message-detail {
|
||||
padding-left: 20px;
|
||||
position: relative; /* 为了定位“加号按钮” */
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 在右上角放置一个圆形加号按钮 */
|
||||
/* 加号按钮 */
|
||||
.add-feedback-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
height: 600px; /* 根据需要自行调整 */
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.detail-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 600px; /* 根据需要自行调整 */
|
||||
height: 500px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 对话框底部按钮居中或居右,可自行调整 */
|
||||
/* 对话框样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__footer {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -161,6 +161,7 @@ getCookie()
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-image: url('@/assets/images/back.jpg');
|
||||
|
||||
/* 亮色主题变量 */
|
||||
--color-bg-primary: #f5f7fa;
|
||||
@@ -198,6 +199,10 @@ getCookie()
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 60%;
|
||||
border-radius: 6px;
|
||||
background: var(--color-bg-form);
|
||||
padding: 25px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 25px 25px 5px 25px;
|
||||
}
|
||||
|
||||
@@ -217,7 +222,7 @@ getCookie()
|
||||
border-radius: 6px;
|
||||
background: var(--color-bg-form);
|
||||
padding: 25px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.el-input {
|
||||
height: 40px;
|
||||
|
||||
@@ -8,23 +8,23 @@
|
||||
<el-input v-model="queryParams.incomeType" placeholder="请输入收入类型" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button size="small" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button size="small" icon="Refresh" @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="Plus" @click="handleAdd">新增</el-button>
|
||||
<el-button size="small" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
|
||||
<el-button size="small" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
|
||||
<el-button size="small" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
<el-button size="small" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
@@ -16,14 +16,15 @@
|
||||
<el-input v-model="queryParams.type" placeholder="请输入类型" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button size="small" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@@ -32,6 +33,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
@@ -41,6 +43,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
@@ -50,6 +53,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" size="small" v-show="showSearch" label-width="60px">
|
||||
<el-form-item label="薪酬类型" prop="paymentType">
|
||||
<el-radio-group v-model="queryParams.paymentType" @change="getList">
|
||||
<el-radio-button label="hourly">计时</el-radio-button>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="container flex items-center justify-between gap-4">
|
||||
<!-- 日期选择 -->
|
||||
<div class="date-filter flex items-center gap-2">
|
||||
<el-radio-group v-model="selectedDateRange">
|
||||
<el-radio-group v-model="selectedDateRange" size="small">
|
||||
<el-radio-button v-for="btn in dateButtons" :key="btn.value" :label="btn.value">
|
||||
{{ btn.label }}
|
||||
</el-radio-button>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
|
||||
<el-form :model="queryParams" ref="queryRef" size="small" :inline="true" v-show="showSearch" label-width="60px">
|
||||
<el-form-item label="员工" prop="employeeName">
|
||||
<user-select v-model="queryParams.employeeId" placeholder="请选择员工" />
|
||||
</el-form-item>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" size="small" v-show="showSearch" label-width="60px">
|
||||
<el-form-item label="订单编号" prop="orderId">
|
||||
<el-select style="width: 150px;" clearable v-model="queryParams.orderId" placeholder="请选择订单编号" filterable :loading="loading">
|
||||
<el-option v-for="item in orderList" :key="item.orderId" :value="item.orderId" :label="item.orderCode"/>
|
||||
|
||||
@@ -18,14 +18,15 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button size="small" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@@ -34,6 +35,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
@@ -43,6 +45,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
@@ -52,6 +55,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
|
||||
@@ -18,14 +18,15 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button size="small" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@@ -34,6 +35,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
@@ -43,6 +45,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
@@ -52,6 +55,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" size="small" v-show="showSearch" label-width="60px">
|
||||
<el-form-item label="采购编号" prop="detailCode">
|
||||
<el-input
|
||||
v-model="queryParams.detailCode"
|
||||
@@ -44,6 +44,7 @@
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@@ -52,6 +53,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
@@ -61,6 +63,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
@@ -70,6 +73,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="供货商类型" prop="typeId">
|
||||
<el-select
|
||||
size="small"
|
||||
style="width: 180px;"
|
||||
v-model="queryParams.typeId"
|
||||
placeholder="请选择供货商类型"
|
||||
@@ -32,14 +33,15 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button size="small" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
icon="Plus"
|
||||
@@ -48,6 +50,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
@@ -57,6 +60,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
@@ -66,6 +70,7 @@
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
plain
|
||||
icon="Download"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" size="small" v-show="showSearch">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" size="small" v-show="showSearch">
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input
|
||||
v-model="queryParams.postCode"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" :inline="true" label-width="68px">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
|
||||
Reference in New Issue
Block a user