zjugis_OA/client/src/views/OaSystem/personnelManagement/dailyCenter/editorDetail.vue

<template>
  <div class="editorDetailBox">
    <div class="formBox">
      <el-form ref="form" :model="formData" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item class="label-item" label="日志日期">
              <div class="write-date">
                {{ props.writeData?.date ?? moment().format('YYYY-MM-DD') }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item class="label-item report" label="接收人" required>
              <ReportReceive :onChange="getReceiveUserIds" key="daily" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="height: calc(100% - 120px)">
          <el-col :span="24" style="height: 100%">
            <el-form-item class="label-item" label="今日工作" required>
              <el-input
                type="textarea"
                rows="9"
                v-model="formData.reportContent"
                resize="none"
                style="width: 100%"
                :show-word-limit="true"
                @input="getReportContent"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <AmountOfWork
      :onChange="getWorkTimeList"
      :initialData="formData.weeklyWorkloadList"
      :nowDate="writeData?.date"
    />
    <div class="footBox" v-if="isUpDate">
      <el-button type="primary" @click="sendReportHandle(false)">更新</el-button>
    </div>
    <div class="footBox" v-else>
      <el-button type="primary" @click="sendReportHandle(true)">暂存</el-button>
      <el-button type="primary" @click="sendReportHandle(false)">发送</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import request from '@/config/axios'
import AmountOfWork from '../components/AmountOfWork.vue'
import ReportReceive from '../components/ReportReceive.vue'
import { getUserInfo } from '@/utils/tool'
import moment from 'moment'
import PubsubService from '@/utils/PubsubService'

defineOptions({ name: 'EditorDetail' })
interface IProp {
  writeData: any
}
const props = defineProps<IProp>()
const { writeData } = toRefs(props)
const isUpDate = ref(false) // 是否是更新日志
const updateLogId = ref('') // 更新日志id

onMounted(() => {
  if (!writeData.value?.date) {
    writeData.value.date = moment().format('YYYY-MM-DD')
  }
  initLog()
})

watch(
  () => [writeData.value?.date, writeData.value?.isLog?.id],
  () => {
    initLog()
  }
)

const initLog = () => {
  if (writeData.value?.isLog) {
    const { reportContent, workload, receiveIds } = writeData.value.isLog
    formData.value.reportContent = reportContent
    formData.value.weeklyWorkloadList = workload
    formData.value.receiveUserIds = receiveIds
    isUpDate.value = true
  } else {
    formData.value.reportContent = ''
    formData.value.weeklyWorkloadList = []
    formData.value.receiveUserIds = []
    isUpDate.value = false
    // 发布更新日志接收人事件
    PubsubService.publish('init-report-receive', {})
  }
  // 如果是暂存数据回填
  if (writeData.value?.isLog?.isTemp) {
    isUpDate.value = false
  }
}

const formData = ref<{
  fillingDate: any
  receiveUserIds: string[]
  reportContent: string
  weeklyWorkloadList: any[]
}>({
  fillingDate: writeData.value.date,
  receiveUserIds: [],
  reportContent: '',
  weeklyWorkloadList: []
})

// 接收人数据改变时触发
const getReceiveUserIds = (list) => {
  formData.value.receiveUserIds = list
}

// 工作内容改变时触发
const getReportContent = (val) => {
  formData.value.reportContent = val
}

// 工作量分配改变时触发
const getWorkTimeList = (val) => {
  formData.value.weeklyWorkloadList = val
}

// 获取用户信息
const userInfo = getUserInfo()

// 提交（暂存）
const message = useMessage()
const sendReportHandle = async (isTemp) => {
  // if (formData.value.receiveUserIds.length === 0) {
  //   message.warning('请选择接收人')
  //   return
  // }
  // if (formData.value.weeklyWorkloadList.length === 0) {
  //   message.warning('请对工作量进行分配')
  //   return
  // }
  const params: any = {
    userId: userInfo.id ?? '',
    deptId: userInfo.deptId ?? '',
    reportStartDate: moment(writeData.value.date).valueOf(),
    reportEndDate: moment(writeData.value.date).valueOf(),
    receiveUserIds: formData.value.receiveUserIds,
    // receiveUserIds: ['ea81aaf2-74fe-429f-acaa-25a9a898abcf'],
    reportType: 'daily',
    reportContent: formData.value.reportContent,
    isTemp,
    weeklyWorkloadList: formData.value.weeklyWorkloadList,
    reportYear: writeData.value.year, // 报告年份
    reportMonth: writeData.value.month, // 月份
    reportWeek: writeData.value.week, // 周
    reportDay: writeData.value.dayOfWeek // 天
  }
  // 如果是更新的话要传一下报告id(需求禁止更新，代码先留着)
  if (isUpDate.value) {
    const reportId = writeData.value?.isLog?.id ?? updateLogId.value ?? ''
    params.reportId = reportId
  }
  // console.log('提交（暂存）~~~~~~~~~~~~~~~~~~~', params)
  // return
  const result: any = await request.postOriginal({
    url: '/adm/report/add-report-info',
    data: params
  })
  // console.log('提交（暂存）~~~~~~~result~~~~~~', result)
  if (result?.msg && !isTemp) {
    message.success('日志发送成功')
    // 发布提交（暂存）事件
    PubsubService.publish('sendReportHandle-init', {})
    // 禁止更新
    // isUpDate.value = true
    // if (isUpDate.value) {
    //   updateLogId.value = result?.data ?? ''
    // }
  } else if (result?.msg && isTemp) {
    message.success('日志暂存成功')
    // 发布提交（暂存）事件
    PubsubService.publish('sendReportHandle-init', {})
  } else {
    message.error('日志发送失败')
  }
}
</script>

<style lang="scss" scoped>
.editorDetailBox {
  width: 100%;
  height: 100%;
  .formBox {
    width: 100%;
    .label-item {
      .el-form-item__label {
        font-weight: 400 !important;
        font-size: 16px !important;
      }
      .write-date {
        width: 90%;
        border: 1px solid #dee0e3;
        border-radius: 4px;
        text-align: center;
      }
    }
    .report {
      width: 100%;

      :deep(.el-form-item__content) {
        > div:first-child {
          width: 100%;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .footBox {
    // height: 100%;
    margin-top: 20px;
    text-align: right;
  }
}
</style>