You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
11 KiB
498 lines
11 KiB
<template> |
|
<view class="view"> |
|
<scroll-view scroll-y class="content"> |
|
|
|
<!-- 标题输入 --> |
|
<view class="block"> |
|
<view> |
|
<text style="color: #f8285a; margin-right: 4px">*</text> |
|
标题 |
|
</view> |
|
<view class="value"> |
|
<uni-easyinput |
|
v-model="jobInfoDetail.title" |
|
placeholder="请输入标题" |
|
:inputBorder="false" |
|
:clearable="false" |
|
:autoHeight="true" |
|
:adjust-position="true" |
|
cursorSpacing="32" |
|
/> |
|
</view> |
|
</view> |
|
<!-- 日期选择 --> |
|
<view class="block"> |
|
<view> |
|
<text style="color: #f8285a; margin-right: 4px">*</text> |
|
日期 |
|
</view> |
|
<view class="value" @tap="showCalendar('jobDate')"> |
|
<text v-if="jobInfoDetail.jobDate" class="input-value">{{ jobInfoDetail.jobDate }}</text> |
|
<text v-else class="input-value" style="color: #808080">请选择日期</text> |
|
<u-icon name="arrow-right"></u-icon> |
|
</view> |
|
</view> |
|
<uni-calendar |
|
ref="calendarRef" |
|
:insert="false" |
|
@confirm="confirmCalendar" |
|
/> |
|
<!-- 汇报人 --> |
|
<view class="block"> |
|
<view> |
|
<text style="color: #f8285a; margin-right: 4px">*</text> |
|
汇报人 |
|
</view> |
|
<view class="value"> |
|
<uni-easyinput |
|
v-model="jobInfoDetail.jobName" |
|
placeholder="请输入汇报人" |
|
:inputBorder="false" |
|
:clearable="false" |
|
:autoHeight="true" |
|
:adjust-position="true" |
|
cursorSpacing="32" |
|
/> |
|
</view> |
|
</view> |
|
|
|
<!-- 汇报内容 --> |
|
<view class="block content-block"> |
|
<view> |
|
<text style="color: #f8285a; margin-right: 4px">*</text> |
|
汇报内容 |
|
</view> |
|
<view class="content-wrap"> |
|
<sp-editor |
|
:html="jobInfoDetail.content" |
|
:toolbar-config="{ |
|
excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'], |
|
iconSize: '18px' |
|
}" |
|
:max-length="5000" |
|
:min-height="300" |
|
:placeholder="'请输入汇报内容'" |
|
@init="initEditor" |
|
@input="inputOver" |
|
@upinImage="upinImage" |
|
@overMax="overMax" |
|
@addLink="addLink" |
|
@exportHtml="exportHtml" |
|
/> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<!-- 底部按钮 --> |
|
<view class="operation"> |
|
<button class="btn delete" @tap="handleDelete">删除</button> |
|
<button class="btn save" @tap="handleSave">保存</button> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { JobInfoApi } from '@/api/jobinfo/index.js' |
|
import { uploadFile } from '@/api/system/file.js' |
|
|
|
export default { |
|
// In data section |
|
data() { |
|
return { |
|
id: '', |
|
// 选择器 |
|
// 日历控件 |
|
calendar: { |
|
// 做表单中键的缓存用 |
|
key: null |
|
}, |
|
jobInfoDetail: { |
|
title: '', |
|
jobDate: '', |
|
jobName: '靖宇', |
|
content: '' |
|
} |
|
} |
|
}, |
|
|
|
|
|
|
|
// ... keep other existing methods ... |
|
onLoad(options) { |
|
if (options.id) { |
|
this.id = options.id |
|
this.getjobInfoDetail() |
|
} |
|
}, |
|
// 添加 onReady 生命周期 |
|
onReady() { |
|
|
|
}, |
|
methods: { |
|
/** |
|
* 显示日历 |
|
* @param {Object} key 表单中需要赋值的键 |
|
*/ |
|
showCalendar(key) { |
|
this.$refs.calendarRef.open() |
|
this.calendar = { |
|
key |
|
} |
|
}, |
|
/** |
|
* 日历选中之后的回调 |
|
* @param {Object} e |
|
*/ |
|
confirmCalendar(e) { |
|
this.jobInfoDetail[this.calendar.key] = e.fulldate |
|
this.closeCalendar() |
|
}, |
|
/** |
|
* 关闭日历 |
|
*/ |
|
closeCalendar() { |
|
this.calendar = { |
|
key: null |
|
} |
|
}, |
|
// 获取详情数据 |
|
async getjobInfoDetail() { |
|
try { |
|
console.log(JobInfoApi) |
|
const res = await JobInfoApi.getJobInfo(this.id) |
|
if (res.code === 0) { |
|
this.jobInfoDetail = { |
|
...res.data, |
|
jobDate: this.formatTime(res.data.jobDate) |
|
} |
|
|
|
// 使用 nextTick 确保组件已渲染 |
|
|
|
} |
|
} catch (error) { |
|
console.log(error) |
|
|
|
} |
|
}, |
|
|
|
// 打开日期选择器 |
|
openDatePicker() { |
|
uni.showDatePicker({ |
|
current: this.jobInfoDetail.jobDate, |
|
success: (res) => { |
|
this.jobInfoDetail.jobDate = this.formatTime(res.date) |
|
} |
|
}) |
|
}, |
|
|
|
// 编辑器初始化完成 |
|
initEditor(ctx) { |
|
this.ctx = ctx |
|
// 如果有内容，设置到编辑器 |
|
if (this.jobInfoDetail.content) { |
|
this.ctx.setContents({ |
|
html: this.jobInfoDetail.content |
|
}) |
|
} |
|
}, |
|
|
|
// 编辑器内容变化 |
|
inputOver(e) { |
|
this.jobInfoDetail.content = e.html |
|
}, |
|
|
|
// 上传图片 |
|
upinImage(tempFiles, editorCtx) { |
|
uni.showLoading({ title: '上传中...' }) |
|
console.log('上传文件',tempFiles) |
|
console.log('上传文件',editorCtx) |
|
// 这里应该调用你的图片上传API |
|
// 示例代码，需要替换为实际的上传逻辑 |
|
tempFiles.forEach(async (item) => { |
|
uni.showLoading({ |
|
title: '上传中请稍后', |
|
mask: true |
|
}) |
|
|
|
console.log('上传item',item) |
|
const res = await uploadFile({ name: `file`, filePath: item.tempFilePath }) |
|
console.log('返回图片',res) |
|
editorCtx.insertImage({ |
|
src: res.data.url, |
|
width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑 |
|
success: function () { |
|
uni.hideLoading() |
|
} |
|
}) |
|
}) |
|
}, |
|
|
|
// 超出最大长度 |
|
overMax() { |
|
uni.showToast({ |
|
title: '内容超出最大长度限制', |
|
icon: 'none' |
|
}) |
|
}, |
|
|
|
// 添加链接 |
|
addLink(e) { |
|
// 可以在这里处理链接添加逻辑 |
|
console.log('添加链接', e) |
|
}, |
|
|
|
// 导出HTML |
|
exportHtml(e) { |
|
this.jobInfoDetail.content = e.html |
|
}, |
|
|
|
// 保存方法修改 |
|
async handleSave() { |
|
if (!this.validateForm()) return |
|
|
|
try { |
|
// 获取最新的HTML内容 |
|
if (this.ctx) { |
|
this.ctx.getContents({ |
|
success: async (res) => { |
|
this.jobInfoDetail.content = res.html |
|
|
|
// 执行保存逻辑 |
|
await this.saveContent() |
|
} |
|
}) |
|
} else { |
|
// 如果编辑器未初始化，直接保存 |
|
await this.saveContent() |
|
} |
|
} catch (error) { |
|
uni.hideLoading() |
|
uni.showToast({ |
|
title: '保存失败', |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
|
|
// 抽取保存逻辑为单独方法 |
|
async saveContent() { |
|
uni.showLoading({ title: '保存中...' }) |
|
|
|
// 根据是否有ID判断是新增还是更新 |
|
const saveApi = this.id ? |
|
JobInfoApi.updateJobInfo : |
|
JobInfoApi.createJobInfo |
|
|
|
const result = await saveApi(this.jobInfoDetail) |
|
uni.hideLoading() |
|
|
|
if (result.code === 0) { |
|
uni.showToast({ |
|
title: '保存成功', |
|
icon: 'success' |
|
}) |
|
setTimeout(() => { |
|
uni.navigateBack() |
|
}, 1500) |
|
} |
|
}, |
|
// 删除 |
|
handleDelete() { |
|
if (!this.id) { |
|
uni.navigateBack() |
|
return |
|
} |
|
|
|
uni.showModal({ |
|
title: '提示', |
|
content: '确定要删除此工作汇报吗？', |
|
success: async (res) => { |
|
if (res.confirm) { |
|
try { |
|
uni.showLoading({ title: '删除中...' }) |
|
const result = await JobInfoApi.deleteJobInfo(this.id) |
|
uni.hideLoading() |
|
|
|
if (result.code === 0) { |
|
uni.showToast({ |
|
title: '删除成功', |
|
icon: 'success' |
|
}) |
|
setTimeout(() => { |
|
uni.navigateBack() |
|
}, 1500) |
|
} |
|
} catch (error) { |
|
uni.hideLoading() |
|
uni.showToast({ |
|
title: '删除失败', |
|
icon: 'none' |
|
}) |
|
} |
|
} |
|
} |
|
}) |
|
}, |
|
|
|
// 格式化时间 |
|
formatTime(time) { |
|
if (!time) return '' |
|
const date = new Date(time) |
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` |
|
}, |
|
|
|
// 表单验证 |
|
validateForm() { |
|
const { title, jobDate, content } = this.jobInfoDetail |
|
if (!title) { |
|
uni.showToast({ title: '请输入标题', icon: 'none' }) |
|
return false |
|
} |
|
if (!jobDate) { |
|
uni.showToast({ title: '请选择日期', icon: 'none' }) |
|
return false |
|
} |
|
if (!content) { |
|
uni.showToast({ title: '请输入汇报内容', icon: 'none' }) |
|
return false |
|
} |
|
|
|
return true |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.view { |
|
height: 100vh; |
|
display: flex; |
|
flex-direction: column; |
|
background: #fff; |
|
|
|
} |
|
.content { |
|
flex: 1; |
|
padding: 12px; |
|
padding-bottom: calc(156rpx + 12px); // 修改底部内边距 |
|
display: flex; |
|
flex-direction: column; |
|
gap: 12px; |
|
height: calc(100vh - 156rpx - 12px); |
|
overflow-y: auto; |
|
background: #F9F9F9; |
|
} |
|
.block { |
|
display: flex; |
|
flex-flow: row nowrap; |
|
background-color: #fff; |
|
padding: 12px; |
|
border-radius: 8px; |
|
justify-content: space-between; |
|
align-items: center; |
|
gap: 12px; |
|
margin-bottom: 12px; // 添加底部间距 |
|
|
|
&:last-child { |
|
margin-bottom: 0; // 最后一个block不需要底部间距 |
|
} |
|
|
|
.value { |
|
flex: 1; |
|
display: flex; |
|
flex-flow: row nowrap; |
|
justify-content: space-between; |
|
gap: 4px; |
|
|
|
.input-value { |
|
flex: 1; |
|
text-align: right; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
cursor: auto; |
|
display: block; |
|
font-family: UICTFontTextStyleBody; |
|
height: 1.4rem; |
|
min-height: 1.4rem; |
|
overflow: hidden; |
|
} |
|
} |
|
} |
|
|
|
.content-block { |
|
flex-direction: column; |
|
align-items: flex-start; |
|
|
|
.content-wrap { |
|
width: 100%; |
|
margin-top: 12px; |
|
} |
|
} |
|
|
|
::v-deep .uni-easyinput__content-input { |
|
flex: 1; |
|
text-align: right; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
cursor: auto; |
|
display: block; |
|
font-family: UICTFontTextStyleBody; |
|
height: 1.4rem; |
|
min-height: 1.4rem; |
|
overflow: hidden; |
|
padding-right: 0; |
|
} |
|
|
|
::v-deep .uni-easyinput__placeholder-class { |
|
flex: 1; |
|
text-align: right; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
cursor: auto; |
|
display: block; |
|
font-family: UICTFontTextStyleBody; |
|
height: 1.4rem; |
|
min-height: 1.4rem; |
|
font-size: 14px; |
|
overflow: hidden; |
|
} |
|
|
|
.operation { |
|
height: 112rpx; // 调整实际按钮区域高度 |
|
position: fixed; |
|
left: 0; |
|
right: 0; |
|
bottom: 34px; |
|
padding: 12px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 12px; |
|
background: #FFFFFF; |
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); |
|
margin-top: 12px; // 添加顶部间距 |
|
|
|
.btn { |
|
flex: 1; |
|
height: 88rpx; |
|
line-height: 88rpx; |
|
font-size: 28rpx; |
|
border-radius: 8px; |
|
text-align: center; |
|
} |
|
|
|
.delete { |
|
background: #F8285A; |
|
color: #fff; |
|
} |
|
|
|
.save { |
|
background: #17C653; |
|
color: #fff; |
|
} |
|
} |
|
|
|
::v-deep .editor-container { |
|
border-radius: 8px; |
|
background-color: var(--LightMode-Grey-Grey-100, #F9F9F9); |
|
} |
|
</style> |