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

<template>
  <div>
    <div class="flex items-center justify-between">
      <el-row>
        <el-tree-select
          v-model="searchForm.nodeId"
          :data="peroidList"
          :props="defaultProps"
          :render-after-expand="false"
          default-expand-all
          style="width: 400px"
          @change="handleSearchOkr"
        />
      </el-row>
      <el-row>
        <el-button type="success" @click="handleUpdateProcess">更新进度</el-button>
      </el-row>
    </div>

    <OkrTable ref="okrTableRef" @row-click="handleShowOkr" />
    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
    <DialogOkrInfo ref="dialogOkrInfo" />
  </div>
</template>

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

const message = useMessage()

const defaultProps = {
  value: 'nodeId',
  label: 'nodeName',
  children: 'children'
}

const okrTableRef = ref(null)
const searchForm = ref({
  nodeId: 4
})

const peroidList = ref([])

onMounted(() => {
  handleSearchPeroid()
  getOkrList()
})

async function handleSearchPeroid() {
  peroidList.value = [
    {
      nodeId: 1,
      nodeName: '2025年寻驾okr',
      startDate: '2022-01-01',
      endDate: '2022-01-31',
      children: [
        {
          nodeId: 2,
          nodeName: '1月',
          startDate: '2022-01-01',
          endDate: '2022-01-31',
          children: [
            {
              nodeId: 3,
              nodeName: '第1周',
              startDate: '2022-01-01',
              endDate: '2022-01-31',
              children: [
                {
                  nodeId: 4,
                  nodeName: '仇山河',
                  startDate: '2022-01-01',
                  endDate: '2022-01-31'
                }
              ]
            },
            {
              nodeId: 5,
              nodeName: '第2周',
              startDate: '2022-02-01',
              endDate: '2022-02-28',
              children: [
                {
                  nodeId: 6,
                  nodeName: '仇山河',
                  startDate: '2022-02-01',
                  endDate: '2022-02-28'
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

// function handleSelectPeroid(row) {
//   searchForm.value.peroidName = row.name
//   searchForm.value.nodeId = row.id
//   handleSearchOkr()
// }

function handleSearchOkr() {
  console.log(searchForm.value)
}

async function getOkrList() {
  const list = [
    {
      id: 1,
      name: '销售成交额达到1000万，总体成交率15%',
      process: 60,
      type: '目标',
      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: '目标',
      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: '目标',
      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(list)
  })
}

const dialogOkrInfo = ref(null)
// function handleAddNode() {
//   dialogOkrInfo.value.open('create', null)
// }

function handleEditOkr() {
  dialogOkr.value.close()
  dialogOkrInfo.value.open('update', 1)
}

function handleUpdateProcess() {
  message.success('更新进度成功')
  getOkrList()
}

const dialogOkr = ref(null)
function handleShowOkr(row) {
  dialogOkr.value.open(row.id)
}
</script>

<style lang="scss" scoped>
:deep(.el-overlay-dialog) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>