ss-oa-manage-web/src/views/OKR/Analysis/index.vue

<template>
  <div>
    <el-row class="mb-10px flex justify-between items-start">
      <el-tree-select
        v-model="searchForm.nodeId"
        :data="peroidList"
        :props="defaultProps"
        :render-after-expand="false"
        :default-expand-all="false"
        check-strictly
        style="width: 300px"
        @change="nodeChange"
      />
      <div class="flex justify-end flex-1">
        <el-button type="info" @click="handleExport">导出</el-button>
        <el-popover
          ref="countRef"
          placement="left"
          :title="`${currentNode?.nodeName} 数据汇总`"
          trigger="click"
          width="500px"
          v-model:visible="showCountPop"
        >
          <template #reference><el-button>数据汇总</el-button></template>
          <el-table :data="countInfo" stripe>
            <el-table-column prop="keyResultShowName" label="项目名称" />
            <el-table-column prop="currentValue" label="当前值" width="90" />
            <el-table-column prop="targetValue" label="预期值" width="90" />
            <el-table-column label="完成度" width="150">
              <template #default="{ row }">
                <el-progress
                  :percentage="parseInt((row.currentValue / row.targetValue) * 100) || 0"
                  :color="customColors"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-popover>
        <el-button type="primary" @click="openDrawer(1, currentNode.nodeId, currentNode.nodeName)">
          节点笔谈
        </el-button>
      </div>
    </el-row>

    <el-table
      id="okrAnalysisTable"
      :data="originList"
      border
      :span-method="objectSpanMethod"
      :show-summary="!!tableKeywords"
      @cell-click="handleClickCell"
    >
      <el-table-column prop="objectInfo.objectiveName" label="目标">
        <template #default="{ row }">
          {{ row.objectInfo.objectiveName }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="objectiveId" label="占比" width="100px">
        <template #default> 0 </template>
      </el-table-column> -->
      <el-table-column prop="keyResultShowName">
        <template #header>
          <div class="flex items-center justify-center">
            <div class="flex-1 mr-10px">
              <el-input
                v-if="showTableSearch"
                v-model="tableKeywords"
                placeholder="请输入关键字"
                size="small"
                style="width: 100%"
                clearable
                @change="handleTableFilter"
              />
              <div v-else>关键成果</div>
            </div>
            <el-button type="primary" size="small" @click="handleFilterTableClick">
              {{ showTableSearch ? '取消' : '筛选' }}
            </el-button>
          </div>
        </template>
        <template #default="{ row }">
          {{ row.sourceName ? `【${row.sourceName}】` : '' }} {{ row.keyResultShowName }}
        </template>
      </el-table-column>
      <el-table-column prop="targetValue" label="目标值" width="100px" />
      <el-table-column prop="currentValue" label="当前进度" width="100px" />
      <el-table-column label="开始日期" width="120px">
        <template #default>
          {{ currentNode.startTime }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="完成状态" width="100px">
        <template #default="{ row }">
          <el-tag v-if="row.currentValue >= row.targetValue" type="success">完成</el-tag>
          <el-tag v-else type="danger">未完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="muis" label="差值" width="100px">
        <template #default="{ row }">
          <span
            :style="{
              color: row.targetValue >= row.currentValue ? 'red' : '#333',
              'font-weight': row.targetValue >= row.currentValue ? 'bold' : '500'
            }"
          >
            {{ parseInt(row.targetValue - row.currentValue) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="complete" label="完成度" width="200px">
        <template #default="{ row }">
          <el-progress :percentage="parseInt(row.progress)" :color="customColors" />
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束日期" width="120px">
        <template #default>
          {{ currentNode.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="objectInfo.progress" label="目标完成度" width="100px" align="center">
        <template #default="{ row }">
          {{ parseInt(row.objectInfo.progress) }}%
          <!-- <el-progress :percentage="parseInt(row.objectInfo.progress)" :color="customColors" /> -->
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      v-if="showDrawer"
      v-model="showDrawer"
      :title="drawerTitle"
      size="60vw"
      direction="rtl"
      append-to-body
      destroy-on-close
    >
      <el-tabs v-model="currentType" @tab-click="searchCommentList()">
        <el-tab-pane
          v-for="item in commentTypeOptions"
          :key="item.id"
          :label="item.label"
          :name="item.id"
        >
          <div v-if="item.id == currentType">
            <div v-if="addNewComment">
              <div class="flex justify-between items-center">
                <div>
                  <el-button size="small" @click="addNewComment = false"> 取消 </el-button>
                  <el-button type="primary" size="small" @click="handleSaveComment">
                    发布
                  </el-button>
                </div>
              </div>
              <div class="mt-10px" v-if="addNewComment">
                <Editor
                  v-model:modelValue="form.commentValue"
                  height="300px"
                  :toolbarConfig="toolbarConfig"
                />
              </div>
            </div>
            <el-button v-else type="primary" size="small" @click="handleInsertComment">
              新增
            </el-button>
            <div
              v-for="(it, index) in commentList"
              :key="it.commentId"
              class="border-b-1"
              style="padding: 10px 5px"
            >
              <div
                class="flex items-center justify-between overflow-hidden text-16px"
                style="line-height: 30px"
              >
                <div class="flex items-center">
                  <el-avatar
                    shape="circle"
                    style="
                      background-color: var(--el-color-primary-light-3);
                      width: 30px;
                      height: 30px;
                    "
                    fit="fill"
                  >
                    <span class="text-12px">{{ it.creatorName.slice(-2) }}</span>
                  </el-avatar>
                  <div class="ml-10px text-16px">{{ it.creatorName }}</div>
                </div>
              </div>
              <div class="ml-10px" v-dompurify-html="it.content"></div>
              <div
                class="ml-10px mt-10px flex items-center justify-between text-12px"
                style="line-height: 20px; color: #aaa"
              >
                <div class="flex items-center">
                  <div class="flex items-center mr-50px">
                    <el-button link @click="good(it)">
                      <Icon
                        icon="fa:thumbs-o-up"
                        :size="16"
                        :color="it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'"
                      />
                    </el-button>
                    <span
                      class="ml-5px"
                      :style="{
                        color: it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'
                      }"
                      >{{ it.likeCount }}</span
                    >
                  </div>
                  <div class="flex items-center mr-50px">
                    <el-button link @click="showChildComment(index)">
                      <Icon icon="ep:chat-dot-square" :size="16" color="#333" />
                    </el-button>
                    <span class="ml-5px" style="color: #333">{{ it.commentCount }}</span>
                  </div>
                </div>
                <div class="ml-10px text-13px text-gray-400">
                  {{ formatDate(it.createTime, 'YYYY-MM-DD HH:mm') }}
                </div>
              </div>
              <!-- 评论 -->
              <div
                v-if="showCommentIndex == index"
                class="bg-gray-100 pl-10px pr-10px pt-5px pb-5px"
                style="margin: 10px 10px 0 10px; border-radius: 4px"
                label="笔谈"
              >
                <div
                  v-for="subComment in it.children.sort((a, b) => a.createTime - b.createTime)"
                  :key="subComment.commentId"
                  class="text-14px"
                  style="line-height: 24px"
                >
                  <span class="font-bold">{{ subComment.creatorName }}：</span>
                  <span>
                    {{ subComment.content }}
                  </span>
                </div>
                <div class="mt-10px relative">
                  <!-- <el-input
                        v-model="form.commentValue"
                        placeholder="请输入评论"
                        type="textarea"
                        :autosize="{ minRows: 4 }"
                        clearable
                        size="small"
                        style="width: 100%"
                      /> -->
                  <el-mention
                    v-model="form.commentValue"
                    type="textarea"
                    :autosize="{ minRows: 4 }"
                    :options="employeeOptions"
                    style="width: 100%"
                    size="small"
                    whole
                    placeholder="请输入内容"
                    @select="handleMention"
                  >
                    <template #label="scope">
                      <div class="flex items-center justify-between h-full">
                        <span class="text-14px text-dark-700">{{ scope.item.name }}</span>
                        <span class="text-12px text-gray-400">{{ scope.item.dept }}</span>
                      </div>
                    </template>
                  </el-mention>
                  <el-button
                    type="primary"
                    size="small"
                    style="position: absolute; right: 2px; bottom: 2px"
                    @click="handleSendCommnet(index)"
                  >
                    发布
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script setup name="Analysis">
import { listToTree, findNode } from '@/utils/tree'
import { formatDate } from '@/utils/formatTime'
import { getAllNodeTree, getAllOkrPage, getOkrStatisticsTotal } from '@/api/okr/okr'
import { getEmployeeSimpleList } from '@/api/pers/employee'
import { cloneDeep } from 'lodash-es'
import {
  getCommentTypeOptions,
  createComment,
  getCommentPage,
  likeComment
} from '@/api/okr/comment'
import { exportTableWithVue } from '@/utils'

const message = useMessage()
const defaultProps = {
  value: 'nodeId',
  label: 'nodeName',
  children: 'children'
}
const searchForm = ref({
  nodeId: undefined
})

const currentNode = ref(undefined)
const showDrawer = ref(false)
const drawerTitle = ref('详情')

const customColors = [
  { color: 'rgb(196, 86.4, 86.4)', percentage: 20 },
  { color: 'rgb(196, 86.4, 86.4)', percentage: 40 },
  { color: 'rgb(237.5, 189.9, 118.5)', percentage: 60 },
  { color: 'rgb(159.5, 206.5, 255)', percentage: 80 },
  { color: 'rgb(179, 224.5, 156.5)', percentage: 100 }
]

const peroidList = ref([])

const showTableSearch = ref(false)
const tableKeywords = ref('')

handleSearchPeroid()
getOptions()

// 当前是否是叶子节点
// 如果不是叶子节点，则表格数据不可修改
const isCurrentLeafNode = ref(false)

function handleSearchPeroid() {
  getAllNodeTree().then((resp) => {
    if (resp.nodeId) {
      peroidList.value = listToTree(resp?.tree || [], {
        id: 'nodeId',
        pid: 'parentId',
        children: 'children'
      })
      nodeChange(resp.nodeId)
      currentNode.value = (resp.tree || []).find((item) => item.nodeId === resp.nodeId)
    } else {
      message.warning('请先创建节点数据')
    }
  })
}
const showCountPop = ref(false)
function nodeChange(nodeId) {
  if (nodeId) {
    showTableSearch.value = false
    tableKeywords.value = ''
    searchForm.value.nodeId = nodeId
    getOkrList()
    getCountInfo()
    currentNode.value = findNode(peroidList.value, (node) => {
      return node.nodeId == nodeId
    })
    searchForm.value.creatorId = currentNode.value.creatorId
    if (!currentNode.value.children || currentNode.value.children.length == 0) {
      isCurrentLeafNode.value = true
    } else {
      isCurrentLeafNode.value = false
    }
  }
}

const originList = ref([])
const defaultTableList = ref([])
const spanObj = ref([])
function getOkrList() {
  getAllOkrPage(searchForm.value).then((resp) => {
    originList.value = []
    spanObj.value = []
    if (resp && resp.length) {
      resp.map((o) => {
        if (o.keyResults && o.keyResults.length) {
          const arr = o.keyResults.map((k, index) => {
            spanObj.value.push(index == 0 ? o.keyResults.length : 0)
            const obj = cloneDeep(o)
            delete obj.keyResults
            return {
              ...k,
              objectInfo: obj
            }
          })
          originList.value = [...originList.value, ...arr]
        }
      })
      defaultTableList.value = [...originList.value]
    }
  })
}

const countInfo = ref([])
function getCountInfo() {
  getOkrStatisticsTotal({ nodeId: searchForm.value.nodeId }).then(async (resp) => {
    countInfo.value = resp || []
    // await nextTick(() =)
    showCountPop.value = true
  })
}

function objectSpanMethod({ column, rowIndex }) {
  if (['目标', '目标完成度'].includes(column.label)) {
    let _row = spanObj.value[rowIndex]
    let _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

function handleClickCell(row, column) {
  if (column.property === 'keyResultShowName') {
    openDrawer(2, row.keyResultId, `${row.sourceName} ${row.keyResultShowName}`)
  } else if (column.property === 'objectInfo.objectiveName') {
    openDrawer(3, row.objectInfo.objectiveId, row.objectInfo.objectiveName)
  }
}

const commentTypeOptions = ref([])
const currentType = ref(1) // 默认评论类型为1
function getOptions() {
  getCommentTypeOptions().then((resp) => {
    commentTypeOptions.value = (resp || []).sort((pre, cur) => pre.sort - cur.sort)
    currentType.value = resp[0].id
  })
  getEmployeeSimpleList({ status: 0 }).then((resp) => {
    employeeOptions.value = resp.map((item) => ({
      ...item,
      label: item.name,
      value: item.name
    }))
  })
}

const commentList = ref([])
const commentInfo = ref({
  businessType: undefined,
  businessId: undefined,
  commentType: undefined,
  pageSize: -1
})
function openDrawer(type, id, name) {
  showDrawer.value = true
  drawerTitle.value = `【${name}】笔谈`
  commentInfo.value = {
    businessType: type,
    businessId: id,
    commentType: currentType.value,
    pageSize: -1
  }
  searchCommentList()
}

function searchCommentList() {
  commentInfo.value.commentType = currentType.value
  getCommentPage(commentInfo.value).then((resp) => {
    // commentList.value = resp.list
    commentList.value = listToTree(resp.list, {
      id: 'commentId',
      pid: 'parentId',
      children: 'children'
    })
  })
}

const showCommentIndex = ref(-1)
function showChildComment(index) {
  showCommentIndex.value = showCommentIndex.value == index ? -1 : index
}

function good(item) {
  likeComment(item.commentId).then(() => {
    message.success('点赞成功')
    searchCommentList()
  })
}

const form = ref({
  commentValue: '',
  mentionedUserIdList: []
})
const employeeOptions = ref([])

function handleMention(item) {
  form.value.mentionedUserIdList.push(item.id)
}

function handleSendCommnet(idx) {
  try {
    // 过滤掉删除的用户，方式为遍历mentionedUserIdList，查找评论中是否有对应的用户名
    const userList = [...form.value.mentionedUserIdList]
    const arr = []
    userList.map((item) => {
      if (form.value.commentValue.indexOf(`@${item.name}`) != -1) {
        arr.push(item.id)
        // 然后移除对应的用户名，防止有多个
        form.value.commentValue = form.value.commentValue.replace(`@${item.name}`, '')
      }
    })
    const data = {
      businessType: commentInfo.value.businessType,
      businessId: commentInfo.value.businessId,
      commentType: currentType.value,
      content: form.value.commentValue,
      mentionedUserIdList: arr,
      parentId: commentList.value[idx].commentId
    }
    createComment(data)
      .then(() => {
        message.success('创建成功')
        searchCommentList()
      })
      .finally(() => {
        form.value.commentValue = ''
      })
  } catch (error) {
    console.log(error)
    message.error('创建失败')
  }
}

const addNewComment = ref(false)
function handleInsertComment() {
  addNewComment.value = true
  form.value.commentValue = commentTypeOptions.value.find(
    (item) => item.id == currentType.value
  ).remark
}

const toolbarConfig = {
  toolbarKeys: [
    'bold', // 加粗
    'underline', // 下划线
    'italic', // 斜体
    'color', // 文字颜色
    'bgColor', // 背景色
    'fontSize', // 字号
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'insertTable', // 插入表格
    'insertLink', // 插入链接
    'undo' // 撤销
  ]
}

function handleSaveComment() {
  addNewComment.value = false
  try {
    const data = {
      businessType: commentInfo.value.businessType,
      businessId: commentInfo.value.businessId,
      commentType: currentType.value,
      content: form.value.commentValue,
      mentionedUserIdList: form.value.mentionedUserIdList
    }
    createComment(data)
      .then(() => {
        message.success('创建成功')
        searchCommentList()
      })
      .finally(() => {
        form.value.commentValue = ''
      })
  } catch (error) {
    message.error('创建失败')
  }
}

function handleExport() {
  exportTableWithVue('#okrAnalysisTable', `OKR分析报表-${currentNode.value.nodeName}`)
}

function handleTableFilter() {
  console.log('tableKeywords', tableKeywords.value)

  if (tableKeywords.value) {
    originList.value = defaultTableList.value.filter(
      (item) =>
        item.keyResultName.includes(tableKeywords.value) ||
        item.sourceName.includes(tableKeywords.value)
    )
  } else {
    originList.value = [...defaultTableList.value]
  }
}

function handleFilterTableClick() {
  showTableSearch.value = !showTableSearch.value
  if (!showTableSearch.value) {
    tableKeywords.value = ''
    originList.value = [...defaultTableList.value]
  }
}
</script>

<style lang="scss" scoped></style>