优化若干功能

This commit is contained in:
2026-09-09 17:02:29 +08:00
parent fef0233cc4
commit 2f238875e1
16 changed files with 609 additions and 68 deletions
@@ -73,16 +73,46 @@
<span v-if="reminderLoading" class="reminder-loading">加载中…</span>
</span>
</div>
<div v-if="schedule.content" class="meta-row">
<span class="meta-label">备注</span>
<span class="meta-content">{{ schedule.content }}</span>
</div>
<div class="meta-row">
<span class="meta-label">创建时间</span>
<span>{{ formatDateTime(schedule.create_time) }}</span>
</div>
</div>
<!-- 备注:创建 / 修改 / 完成后都可编辑更新(完成后常需补充内容) -->
<div class="detail-remark">
<div class="remark-header">
<span class="remark-title">备注</span>
<span v-if="editable" class="remark-tip">完成后仍可补充更新</span>
</div>
<el-input
v-if="editable"
v-model="remarkText"
type="textarea"
:rows="3"
maxlength="2000"
show-word-limit
placeholder="补充说明(可选)"
/>
<pre v-else-if="remarkText" class="remark-view">{{ remarkText }}</pre>
<div v-if="editable" class="remark-actions">
<el-button
size="small"
type="primary"
:disabled="!remarkDirty"
:loading="remarkSaving"
@click="saveRemark"
>保存备注</el-button
>
<el-button
v-if="remarkDirty"
size="small"
@click="resetRemark"
>取消</el-button
>
</div>
</div>
<!-- 相关图片:可选择文件上传,也可在抽屉打开时直接 Ctrl+V 粘贴截图 -->
<div class="detail-images">
<div class="images-header">
@@ -173,7 +203,7 @@ import {
RefreshLeft
} from "@element-plus/icons-vue";
import { uploadFile } from "@/api/file";
import { updateScheduleImages } from "@/api/oaSchedule";
import { updateScheduleContent, updateScheduleImages } from "@/api/oaSchedule";
import { getReminderDetail, finishReminder } from "@/api/reminder";
const props = defineProps({
@@ -297,15 +327,52 @@ const previewList = computed(() =>
imageList.value.map(img => resolveUrl(img.url))
);
// ---------- 备注:创建 / 修改 / 完成后都可编辑 ----------
const remarkText = ref("");
const remarkSaving = ref(false);
const remarkDirty = computed(
() => remarkText.value !== (props.schedule?.content || "")
);
watch(
() => props.schedule,
schedule => {
// 未编辑备注时跟随日程内容回显,避免覆盖用户正在输入的未保存内容
if (!remarkDirty.value) {
remarkText.value = schedule?.content || "";
}
imageList.value = parseImages(schedule?.images);
loadReminderInfo(schedule?.reminder_id);
},
{ immediate: true }
);
function resetRemark() {
remarkText.value = props.schedule?.content || "";
}
async function saveRemark() {
const id = props.schedule?.id;
if (!id) {
return;
}
remarkSaving.value = true;
try {
const res = await updateScheduleContent(id, remarkText.value);
if (res?.code === 200) {
ElMessage.success("备注已保存");
// 通知父组件刷新,刷新后 watch 会以最新内容回显(此时已与输入一致,不再脏)
emit("changed", id);
} else {
ElMessage.error(res?.msg || "保存失败");
}
} catch {
ElMessage.error("保存失败");
} finally {
remarkSaving.value = false;
}
}
// ---------- 绑定提醒的状态回显与反馈 ----------
const reminderInfo = ref(null);
const reminderLoading = ref(false);
@@ -553,6 +620,45 @@ function formatDateTime(value) {
word-break: break-all;
}
/* 备注编辑区:独立于元信息,创建 / 修改 / 完成后都可更新 */
.detail-remark {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #f2f4f8;
}
.remark-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.remark-title {
font-size: 14px;
color: #303133;
}
.remark-tip {
font-size: 12px;
color: #c0c4cc;
}
.remark-view {
margin: 0;
font-size: 14px;
color: #303133;
white-space: pre-wrap;
word-break: break-all;
font-family: inherit;
}
.remark-actions {
margin-top: 10px;
display: flex;
gap: 8px;
}
.reminder-status {
display: flex;
align-items: center;
@@ -645,6 +751,18 @@ html.dark & {
.meta-label {
color: var(--el-text-color-secondary);
}
.detail-remark {
border-top-color: var(--el-border-color-lighter);
}
.remark-title {
color: var(--el-text-color-primary);
}
.remark-tip {
color: var(--el-text-color-placeholder);
}
.remark-view {
color: var(--el-text-color-primary);
}
.detail-images {
border-top-color: var(--el-border-color-lighter);
}
@@ -11,9 +11,6 @@
<el-radio-button value="calendar">日历</el-radio-button>
<el-radio-button value="list">列表</el-radio-button>
</el-radio-group>
<el-button type="primary" :icon="Plus" @click="openCreate()"
>新建日程</el-button
>
</div>
</div>