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

<template>
  <el-dialog
    v-if="show"
    v-model="show"
    width="900px"
    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"> {{ title }} </div>
        <div class="flex items-center">
          <el-button type="primary" link :disabled="formLoading" @click="handleSave">
            保存
          </el-button>
          <el-button link @click="show = false"> 关闭 </el-button>
        </div>
      </div>
    </template>
    <template #default>
      <div class="dialog-okr-body">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="0">
          <el-row :gutter="10">
            <el-col :span="4" :offset="0">
              <el-form-item prop="parentId">
                <el-tree-select
                  v-model="form.parentId"
                  :data="parentNodeList"
                  check-strictly
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                  placeholder="父节点"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="请输入节点名称" />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item prop="createTime">
                <el-date-picker
                  v-model="form.createTime"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="开始日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item prop="endTime">
                <el-date-picker
                  v-model="form.endTime"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="截止日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item prop="executor">
                <el-select
                  v-model="form.executor"
                  placeholder="选择执行人，可多选"
                  multiple
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in userOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item prop="persission">
                <el-select v-model="form.persission" placeholder="选择权限" clearable filterable>
                  <el-option label="公开" :value="0" />
                  <el-option label="仅上级可见" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="relative">
          <el-button
            v-if="okrKey === 'okr'"
            style="position: absolute; right: 10px; top: 10px"
            type="primary"
            size="small"
            @click="addObjective"
          >
            添加目标
          </el-button>
          <el-button
            v-else-if="okrKey === 'childNode'"
            style="position: absolute; right: 10px; top: 10px"
            type="primary"
            size="small"
            @click="addChildNode"
          >
            添加子节点
          </el-button>
          <el-tabs v-model="okrKey">
            <el-tab-pane label="目标/关键成果" name="okr">
              <div>
                <div
                  class="flex items-center w-full"
                  v-for="(item, i) in objectList"
                  :key="item.id"
                >
                  <div class="flex-1 w-100px">
                    <div class="flex items-center">
                      <el-tag type="success" class="mr-10px">O{{ i + 1 }}</el-tag>
                      <el-input v-model="item.name" placeholder="目标名称" class="flex-1 w-150px" />
                      <el-select
                        v-model="item.objExecutor"
                        placeholder="选择执行人，可多选"
                        multiple
                        clearable
                        filterable
                        style="min-width: 240px; margin-left: 10px"
                      >
                        <el-option
                          v-for="it in userOptions"
                          :key="it.id"
                          :label="it.name"
                          :value="it.id"
                        />
                      </el-select>
                      <el-select
                        v-model="item.persission"
                        placeholder="选择权限"
                        clearable
                        filterable
                        style="width: 120px; margin-left: 10px"
                      >
                        <el-option label="公开" :value="0" />
                        <el-option label="仅上级可见" :value="1" />
                      </el-select>
                      <div class="ml-10px">
                        <el-button type="primary" text @click="AddKR">新增关键成果</el-button>
                        <el-button type="danger" text @click="removeObj">删除目标</el-button>
                      </div>
                    </div>
                    <div style="background: #f0f3fa; padding-bottom: 15px">
                      <div class="ml-50px" v-for="(kr, index) in item.children" :key="kr.id">
                        <div class="flex flex-1 items-center pb-5px pt-5px">
                          <el-tag class="mr-10px">KR{{ index + 1 }}</el-tag>
                          <el-select
                            v-model="kr.id"
                            placeholder="选择或输入"
                            filterable
                            :props="{ value: 'id', label: 'name' }"
                            allow-create
                            :reserve-keyword="false"
                            class="flex-1 w-150px"
                          >
                            <el-option
                              v-for="it in item.children"
                              :key="it.id"
                              :label="it.name"
                              :value="it.id"
                            />
                          </el-select>
                          <el-button type="danger" text @click="removeKR">删除关键成果</el-button>
                        </div>
                        <div class="mt-5px flex items-center">
                          <el-tree-select
                            v-model="kr.sourceId"
                            :data="sourceOptions"
                            :props="defaultProps"
                            check-strictly
                            clearable
                            filterable
                            node-key="sourceId"
                            placeholder="请选择渠道"
                          />
                          <el-radio-group v-model="kr.targetType" class="ml-10px">
                            <el-radio-button label="value">目标值</el-radio-button>
                            <el-radio-button label="radio">是/否</el-radio-button>
                          </el-radio-group>

                          <el-input
                            v-if="kr.targetType === 'value'"
                            v-model="kr.targetNum"
                            type="number"
                            placeholder="目标值"
                            class="ml-10px"
                            style="width: 100px"
                          />

                          <el-select
                            v-model="kr.objExecutor"
                            placeholder="选择执行人，可多选"
                            multiple
                            clearable
                            filterable
                            style="min-width: 240px; margin-left: 10px"
                          >
                            <el-option
                              v-for="it in userOptions"
                              :key="it.id"
                              :label="it.name"
                              :value="it.id"
                            />
                          </el-select>
                          <el-select
                            v-model="kr.persission"
                            placeholder="选择权限"
                            clearable
                            filterable
                            style="width: 120px; margin-left: 10px"
                          >
                            <el-option label="公开" :value="0" />
                            <el-option label="仅上级可见" :value="1" />
                          </el-select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="w-100px"></div> -->
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="子节点" name="childNode">
              <el-table :data="childNodeList">
                <el-table-column label="名称">
                  <template #default="{ row }">
                    <el-input v-model="row.name" placeholder="子节点名称" />
                  </template>
                </el-table-column>
                <el-table-column label="开始日期" width="160px">
                  <template #default="{ row }">
                    <el-date-picker
                      v-model="row.createTime"
                      type="date"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      placeholder="选择日期时间"
                      style="width: 130px"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="截止日期" width="160px">
                  <template #default="{ row }">
                    <el-date-picker
                      v-model="row.endTime"
                      type="date"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      placeholder="选择日期时间"
                      style="width: 130px"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="权限" width="160px">
                  <template #default="{ row }">
                    <el-select v-model="row.permission" placeholder="请选择" style="width: 130px">
                      <el-option label="公开" :value="0" />
                      <el-option label="仅上级可见" :value="1" />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="执行人" width="300px">
                  <template #default="{ row }">
                    <el-select
                      v-model="row.executor"
                      placeholder="选择执行人，可多选"
                      multiple
                      clearable
                      filterable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in userOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="删除" :width="100">
                  <template #default="{ $index }">
                    <el-button type="danger" text @click="removeChildNode($index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="DialogOkrInfo">
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const show = ref(false)

watch(
  () => show.value,
  (newValue, oldValue) => {
    if (oldValue && !newValue) {
      emit('close')
    }
  }
)

const title = ref('')
const formType = ref('create')

const form = ref({})
const formLoading = ref(false)
const rules = ref({})

const okrKey = ref('okr')

const parentNodeList = ref([
  {
    id: 1,
    label: '寻驾全年目标',
    children: [
      { id: 2, label: '1月' },
      { id: 3, label: '2月' },
      { id: 4, label: '3月' },
      { id: 5, label: '4月' },
      { id: 6, label: '5月' },
      { id: 7, label: '6月' },
      { id: 8, label: '7月' },
      { id: 9, label: '8月' },
      { id: 10, label: '9月' },
      { id: 11, label: '10月' },
      { id: 12, label: '11月' },
      { id: 13, label: '12月' }
    ]
  }
])

const childNodeList = ref([{}])

const userOptions = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵六' }
])
const defaultProps = {
  children: 'children',
  label: 'sourceName',
  value: 'sourceId',
  isLeaf: 'leaf'
}
const sourceOptions = ref([])
const objectList = ref([
  {
    nodeId: 2,
    name: '1月销售任务概述，例：销售额100万，成交率15%',
    objExecutor: [1, 2],
    id: 'a1',
    children: [
      {
        id: 'a1-1',
        name: '销售额',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-2',
        name: '成交数',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-3',
        name: '成交率',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-4',
        name: '本月抖音运营投入相较上月少10%',
        isSystem: false,
        targetNum: 0,
        targetValue: false,
        targetType: 'radio'
      }
    ]
  },
  {
    nodeId: 3,
    name: '1月运营目标',
    objExecutor: [1, 2],
    id: 'a2',
    children: [
      {
        id: 'a2-1',
        name: '销售额',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a2-2',
        name: '成交数',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-3',
        name: '成交率',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a1-4',
        name: '本月抖音运营投入相较上月少10%',
        isSystem: false,
        targetNum: 0,
        targetValue: false,
        targetType: 'radio'
      }
    ]
  },
  {
    nodeId: 4,
    name: '1月主播任务',
    objExecutor: [1, 2],
    id: 'a3',
    children: [
      {
        id: 'a3-1',
        name: '销售额',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a3-2',
        name: '成交数',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a3-3',
        name: '成交率',
        isSystem: true,
        targetNum: 10000,
        targetValue: false,
        targetType: 'value'
      },
      {
        id: 'a3-4',
        name: '本月抖音运营投入相较上月少10%',
        isSystem: false,
        targetNum: 0,
        targetValue: false,
        targetType: 'radio'
      }
    ]
  }
])

async function open(type, val) {
  show.value = true
  title.value = type == 'update' ? '修改Okr' : '新增Okr'
  formType.value = type
  resetForm()
  if (val) {
    formLoading.value = true
    try {
      // form.value = await KpiApi.getKpiDetail(val)
    } finally {
      formLoading.value = false
    }
  }
  // getOptions()
}
function resetForm() {
  form.value = {
    parentId: '',
    name: '',
    createTime: '',
    endTime: '',
    executor: []
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const formRef = ref()
/** 提交表单 */
const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调

function addObjective() {
  objectList.value.push({
    name: '',
    objExecutor: [],
    children: []
  })
}

function AddKR() {
  objectList.value.push({
    name: '',
    objExecutor: [],
    children: []
  })
}

function removeObj() {
  objectList.value.pop()
}

function removeKR() {
  objectList.value.pop()
}

function addChildNode() {
  childNodeList.value.push({})
}

function removeChildNode(idx) {
  childNodeList.value.splice(idx, 1)
}

async function handleSave() {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    if (formType.value === 'create') {
      // await KpiApi.createKpi(form.value)
      message.success(t('common.createSuccess'))
    } else {
      // await KpiApi.updateKpi(form.value)
      message.success(t('common.updateSuccess'))
    }
    show.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</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-body {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 1064px;
    height: calc(94vh - 85px);
  }
}
</style>