ruoyi-miniapp/sub/owner/job-detail.vue

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