ss-oa-manage-web/src/views/OKR/Management/Components/DialogOkr.vue

<template>
  <el-dialog
    v-if="show"
    v-model="show"
    width="94vw"
    class="dialog-okr"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="dialog-okr-header">
        <div class="flex-1 flex items-center" style="line-height: 50px">
          <div class="dialog-okr-title">
            <Icon icon="ep:circle-check-filled" color="#30d1fc" :size="14" />
            <span>目标</span>
          </div>
          <el-divider direction="vertical" />
          <span class="text-14px ml-0.25">ork落地</span>
          <div class="ml-20px text-14px">
            <span>【节点】</span>
            <span>寻驾全年目标 -> 1月</span>
          </div>
        </div>
        <div class="flex items-center">
          <el-button link @click="emit('edit')">
            <el-tooltip content="编辑" placement="top" effect="dark">
              <Icon icon="ep:edit" :size="16" />
            </el-tooltip>
          </el-button>

          <el-button link @click="show = false">
            <el-tooltip content="关闭" placement="top" effect="dark">
              <Icon icon="ep:close" :size="16" />
            </el-tooltip>
          </el-button>
        </div>
      </div>
    </template>
    <template #default>
      <div class="dialog-okr-body">
        <div class="dialog-okr-content pr-10px">
          <div class="dialog-okr-content-detail">
            <div class="detail-basic-title">
              <div class="basic-title-item">
                <div class="basic-title-label">创建人</div>
                <div class="basic-title-value">张三</div>
              </div>
              <div class="basic-title-item">
                <div class="basic-title-label">执行人</div>
                <div class="basic-title-value">张三、李四</div>
              </div>
              <div class="basic-title-item">
                <div class="basic-title-label">目标数</div>
                <div class="basic-title-value">3</div>
              </div>
              <div class="basic-title-item" style="min-width: 200px">
                <div class="basic-title-label">总体进度</div>
                <el-progress :percentage="60" :stroke-width="8" />
              </div>
            </div>
            <div class="flex detail-basic-info">
              <span>开始日期：2025-01-01</span>
              <span>截止日期：2025-01-31</span>
              <span>最新更新时间：2025-01-15</span>
            </div>
          </div>
          <div class="flex" style="position: relative; flex: 1; height: 100px">
            <el-tabs v-model="workIndex" style="flex: 1">
              <el-tab-pane label="目标/关键成果" name="okr">
                <div class="content-wrap">
                  <OkrTable ref="okrTableRef" />
                </div>
              </el-tab-pane>
            </el-tabs>
            <el-button class="sav-btn" type="primary" @click="handleSaveProcess">
              保存并更新
            </el-button>
          </div>
        </div>
        <div class="dialog-okr-side pl-10px">
          <el-tabs v-model="sideIndex" style="flex: 1; height: 100%">
            <el-tab-pane label="子节点" name="subNode">
              <div class="overflow-y-auto" style="height: calc(100% - 50px)">
                <div
                  v-for="index in 12"
                  :key="index"
                  class="border-b-1 child-item"
                  style="padding: 10px 5px; cursor: pointer"
                  @click="handleChildItem"
                >
                  <div
                    class="flex justify-between items-center overflow-hidden text-16px"
                    style="line-height: 30px"
                  >
                    <div class="child-label">【节点】子节点{{ index }}</div>
                    <el-progress
                      type="line"
                      :percentage="0"
                      :stroke-width="6"
                      style="width: 120px"
                    />
                  </div>
                  <div class="ml-10px flex items-center text-13px" style="line-height: 30px">
                    <span>目标数：</span>
                    <span style="color: #aaa">4</span>
                    <el-divider direction="vertical" style="margin: 0 20px" />
                    <div
                      class="flex-1 overflow-hidden h-30px"
                      style="text-overflow: ellipsis; white-space: nowrap"
                    >
                      <span>执行人：</span>
                      <span style="color: #aaa">张三、李四、王二</span>
                    </div>
                  </div>
                  <div
                    class="ml-10px flex items-center text-12px"
                    style="line-height: 20px; color: #aaa"
                  >
                    <span>开始日期：2025-01-01</span>
                    <el-divider direction="vertical" style="margin: 0 20px" />
                    <span>截止日期：2025-01-31</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="评论" name="conclusion">
              <div class="relative overflow-y-auto" style="height: calc(100% - 50px)">
                <div class="flex justify-between items-center">
                  <el-select
                    v-if="addNewComment"
                    v-model="form.commentType"
                    filterable
                    size="small"
                    style="width: 120px"
                    @change="getCommentTemplate"
                  >
                    <el-option label="总结" :value="1" />
                    <el-option label="日报" :value="2" />
                    <el-option label="周报" :value="3" />
                    <el-option label="月报" :value="4" />
                    <!-- <el-option label="评论" :value="5" disabled /> -->
                  </el-select>

                  <div v-if="addNewComment">
                    <el-button size="small" @click="addNewComment = false"> 取消 </el-button>
                    <el-button type="primary" size="small" @click="handleSaveComment">
                      发布
                    </el-button>
                  </div>
                  <el-button v-else type="primary" size="small" @click="handleInsertComment">
                    新增评论
                  </el-button>
                </div>
                <div class="mt-10px" v-if="addNewComment">
                  <Editor
                    v-model:modelValue="form.commentValue"
                    height="300px"
                    :toolbarConfig="toolbarConfig"
                  />
                </div>
                <div v-for="index in 12" :key="index" 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">门庆</span>
                      </el-avatar>
                      <div class="ml-10px text-16px">西门庆</div>
                    </div>
                    <div class="ml-10px text-13px text-gray-400">01-01 12:15</div>
                  </div>
                  <div class="ml-10px" v-dompurify-html="commentListVal"></div>
                  <div
                    class="ml-10px mt-10px flex items-center text-12px"
                    style="line-height: 20px; color: #aaa"
                  >
                    <div class="flex items-center mr-50px">
                      <el-button link @click="good(index)">
                        <Icon icon="fa:thumbs-o-up" :size="16" />
                      </el-button>
                      <span class="ml-5px">6</span>
                    </div>
                    <div class="flex items-center mr-50px">
                      <el-button link @click="showComment(index)">
                        <Icon icon="ep:chat-dot-square" :size="16" />
                      </el-button>
                      <span class="ml-5px">1</span>
                    </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 class="text-14px" style="line-height: 24px">
                      <span class="font-bold">武大郎：</span>
                      <span>
                        大官人，你要脆饼不要，卖完最后一个我要回家了，我家婆娘熬了鸡汤给我补身子
                      </span>
                    </div>
                    <div class="text-14px" style="line-height: 24px">
                      <span class="font-bold">潘金莲：</span>
                      <span>西门大官人，我要给你生猴子❥(^_-)</span>
                    </div>
                    <div class="text-14px" style="line-height: 24px">
                      <span class="font-bold">武二郎：</span>
                      <span>如同天上降魔主，真乃人间太岁</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-button
                        type="primary"
                        size="small"
                        style="position: absolute; right: 2px; bottom: 2px"
                        @click="handleSendCommnet"
                      >
                        发布
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="进度历史" name="history">
              <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
                <el-timeline class="ml-10px">
                  <el-timeline-item placement="bottom" timestamp="2025-01-20" color="#30d1fc">
                    <div>张三</div>
                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
                      进度变化：40% -> 60%
                      （节点进度是读取目标进度计算的，目标进度根据关键成果计算，关键成果在提交跟新时会有）
                    </div>
                  </el-timeline-item>
                  <el-timeline-item placement="bottom" timestamp="2025-01-15" color="#30d1fc">
                    <div>张三</div>
                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
                      更新节点
                    </div>
                  </el-timeline-item>
                  <el-timeline-item placement="bottom" timestamp="2025-01-01" color="#30d1fc">
                    <div>张三</div>
                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
                      创建节点
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="DialogOkr">
import OkrTable from './OkrTable.vue'

const emit = defineEmits(['edit'])

const show = ref(false)

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

const workIndex = ref('okr')
const okrList = ref([])
const sideIndex = ref('subNode')

const okrTableRef = ref(null)

async function open(id) {
  show.value = true
  // 获取数据详情
  console.log(id)
  okrList.value = [
    {
      id: 1,
      name: '销售成交额达到1000万，总体成交率15%',
      process: 60,
      type: 'object',
      children: [
        {
          id: 11,
          type: 'keyresult',
          channelName: '抖音',
          target: '线索目标',
          targetType: 'value',
          isSystem: true,
          targetNum: 10000,
          targetValue: false,
          currentNum: 5000,
          currentValue: false,
          process: 60,
          users: '张三、李四'
        },
        {
          id: 12,
          type: 'keyresult',
          channelName: '抖音',
          target: '成交数',
          isSystem: true,
          targetType: 'value',
          targetNum: 2500,
          targetValue: false,
          currentNum: 500,
          currentValue: false,
          process: 60,
          users: '张三、李四'
        }
      ]
    },
    {
      id: 2,
      name: '运营消耗预算控制在20万以内，获得10万条线索',
      process: 80,
      type: 'object',
      children: [
        {
          id: 21,
          type: 'keyresult',
          target: '本月抖音运营投入相较上月少10%',
          targetType: 'radio',
          isSystem: false,
          targetNum: 0,
          targetValue: false,
          currentNum: 0,
          currentValue: false,
          process: 0,
          users: ''
        },
        {
          id: 22,
          type: 'keyresult',
          target: '累计输出作品',
          process: 15,
          users: '',
          isSystem: false,
          targetType: 'value',
          targetNum: 200,
          targetValue: false,
          currentNum: 30,
          currentValue: false
        }
      ]
    },
    {
      id: 3,
      name: '目标3',
      process: 40,
      type: 'object',
      children: [
        {
          id: 31,
          type: 'keyresult',
          target: '关键成果1',
          process: 100,
          users: '',
          isSystem: false,
          targetType: 'radio',
          targetNum: 0,
          targetValue: false,
          currentNum: 0,
          currentValue: true
        },
        {
          id: 22,
          type: 'keyresult',
          target: '关键成果2',
          process: 15,
          users: '',
          isSystem: false,
          targetType: 'value',
          targetNum: 200,
          targetValue: false,
          currentNum: 30,
          currentValue: false
        }
      ]
    }
  ]
  nextTick(() => {
    okrTableRef.value.prepareData(okrList.value)
  })
}

function close() {
  show.value = false
}

defineExpose({ open, close })

function handleSaveProcess() {
  console.log(okrList.value)
}

function handleChildItem() {
  console.log('handleChildItem')
}

const addNewComment = ref(false)
const form = ref({
  commentValue: '',
  commentType: 1
})
function handleInsertComment() {
  addNewComment.value = true
  form.value = {
    commentValue: '',
    commentType: 1
  }
  getCommentTemplate()
}

function getCommentTemplate() {
  form.value.commentValue = `<h2 style=\"text-align: start;\">一、工作概况</h2><p> &nbsp; &nbsp;</p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数：</li><li>有效沟通数：</li><li>销售成果</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p><br></p>`
}

function handleSaveComment() {
  addNewComment.value = false
}

const commentListVal = ref(
  `<h2 style=\"text-align: start;\">一、工作概况</h2><p> &nbsp; 刷牙洗脸吃饭穿鞋出门开车上班捣台球&nbsp;</p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数：666</li><li>有效沟通数：123</li><li>销售成果：今日成交20，本月成交120，距离目标还差888</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p>无<br></p>`
)

function good(index) {
  console.log(index)
}

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

function handleSendCommnet() {
  console.log(form.value.commentValue)
}
</script>

<style lang="scss" scoped>
.dialog-okr {
  .dialog-okr-header {
    display: flex;
    height: 51px;
    min-height: 51px;
    vertical-align: middle;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.25rem;
    .dialog-okr-title {
      display: flex;
      margin-right: 5px;
      align-items: center;
      background: rgba(48, 209, 252, 0.1);
      border-radius: 3px;
      padding: 0 10px;
      line-height: 24px;
      span {
        color: #2a344b;
        font-size: 12px;
        margin-left: 6px;
      }
    }
  }
  .dialog-okr-body {
    display: flex;
    background: #f0f3fa;
    overflow: hidden;
    min-width: 1064px;
    height: calc(94vh - 85px);
    .dialog-okr-content {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 70%;
      flex: auto;
      min-width: 700px;
      background: #fff;
      margin: 0 1px 0 0;
      justify-content: space-between;
      overflow-y: hidden !important;
      .dialog-okr-content-detail {
        position: relative;
        margin-bottom: 30px;
        overflow-y: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        .detail-basic-title {
          display: flex;
          font-size: 14px;
          margin-bottom: 16px;
          .basic-title-item {
            margin-right: 50px;
            .basic-title-label {
              color: #aaa;
              margin-bottom: 6px;
            }
            .basic-title-value {
              color: #2a344b;
              font-size: 14px;
            }
          }
        }
        .detail-basic-info {
          font-size: 14px;
          color: #aaa;
          span {
            margin-right: 40px;
          }
        }
      }
      .content-wrap {
        overflow-y: auto;
        max-height: calc(100% - 70px);
      }
    }
    .dialog-okr-side {
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      width: 30%;
      overflow: hidden;
      min-width: 364px;
      max-width: 500px;
      background: #fff;
      margin: 0;
      .child-item:hover {
        background: #f0f3fa;
      }
    }
  }
}

.sav-btn {
  position: absolute;
  right: 10px;
  top: 0;
  width: auto;
}
</style>