DeXun/GEAR-OA
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 调整样式更紧凑

Browse Source
This commit is contained in:
砂糖
2025-09-18 16:22:49 +08:00
parent 5c6e2bfb3c
commit 6561eaf933
27 changed files with 1205 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gear-ui3/src/views/info/construction/index.vue
View File

@@ -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"

10
gear-ui3/src/views/info/express/index.vue
View File

@@ -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>

155
gear-ui3/src/views/info/feedback/index.vue
View File

@@ -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;
}