From b0573fdf179746fdedd0496e290fc428c03dfa97 Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Tue, 11 Mar 2025 18:22:40 +0800
Subject: [PATCH] sc

---
 .../OKR/Management/Components/DialogWait.vue  | 246 +++++++++++++
 .../OKR/Management/Components/WaitTarget.vue  | 348 ++++++++++++++++++
 src/views/OKR/Management/index.vue            |   5 +-
 3 files changed, 598 insertions(+), 1 deletion(-)
 create mode 100644 src/views/OKR/Management/Components/DialogWait.vue
 create mode 100644 src/views/OKR/Management/Components/WaitTarget.vue

diff --git a/src/views/OKR/Management/Components/DialogWait.vue b/src/views/OKR/Management/Components/DialogWait.vue
new file mode 100644
index 0000000..68cfb2e
--- /dev/null
+++ b/src/views/OKR/Management/Components/DialogWait.vue
@@ -0,0 +1,246 @@
+<template>
+  <Dialog :title="title" v-model="show" :width="formType == 'create' ? '700px' : '1000px'">
+    <div class="flex items-baseline">
+      <el-form
+        :model="form"
+        ref="formRef"
+        :disabled="formType == 'do'"
+        :rules="rules"
+        label-width="80px"
+        class="flex-1"
+      >
+        <el-row :gutter="20">
+          <el-col :span="24" :offset="0">
+            <el-form-item label="标题" prop="title">
+              <el-input v-model="form.title" placeholder="请输入待办标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容" prop="content">
+              <Editor
+                v-model:modelValue="form.content"
+                height="400px"
+                :disabled="formType == 'do'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item label="优先级" prop="priority">
+              <el-select v-model="form.priority" placeholder="选择优先级" filterable>
+                <el-option
+                  v-for="item in props.priorityOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <el-form-item label="完成状态" prop="status">
+              <el-select v-model="form.status" placeholder="选择完成状态" filterable>
+                <el-option
+                  v-for="item in props.statusOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item label="截止日期" prop="dueDate">
+              <el-date-picker
+                v-model="form.dueDate"
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <el-form-item label="执行人" prop="executorIds">
+              <el-select
+                v-model="form.executorIds"
+                placeholder="选择执行人，可多选"
+                multiple
+                clearable
+                filterable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in employeeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div v-if="formType != 'create'" class="w-350px ml-10px h-full">
+        <div class="mb-10px" v-if="formType == 'do'">
+          <Editor
+            v-model:modelValue="form.followUpContent"
+            height="150px"
+            :toolbarConfig="toolbarConfig"
+          />
+          <el-button class="absolute" style="right: 20px; top: 195px" type="primary" @click="addDo">
+            更新进度
+          </el-button>
+        </div>
+        <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">
+                今天成交了15个
+              </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">
+                下午跟进了100条线索
+              </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">
+                上午跟进了100条线索
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </div>
+    </div>
+
+    <template #footer v-if="formType != 'do'">
+      <span>
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" :disabled="formLoading" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
+  </Dialog>
+</template>
+
+<script setup name="DialogWait">
+const props = defineProps({
+  priorityOptions: {
+    type: Array,
+    default: () => [
+      { label: '高', value: 1 },
+      { label: '中', value: 2 },
+      { label: '低', value: 3 }
+    ]
+  },
+  statusOptions: {
+    type: Array,
+    default: () => [
+      { label: '未完成', value: 1, tagType: 'warning' },
+      { label: '已关闭', value: 2, tagType: 'success' }
+    ]
+  }
+})
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const toolbarConfig = {
+  toolbarKeys: []
+}
+
+const show = ref(false)
+const title = ref('')
+const formType = ref('create')
+
+const form = ref({})
+const formLoading = ref(false)
+const rules = ref({
+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  dueDate: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
+  executorIds: [{ required: true, message: '请选择执行人', trigger: 'change' }]
+})
+
+async function open(type, id) {
+  show.value = true
+  title.value = { create: '新增待办', update: '修改待办', do: '更新待办进度' }[type]
+  formType.value = type
+  resetForm()
+  if (id) {
+    formLoading.value = true
+    try {
+      // 模拟表单数据
+      form.value = {
+        title: '2025年1月20日，张三成交了15个',
+        content: '今天成交了15个',
+        priority: 1,
+        status: 1,
+        dueDate: '2025-01-20',
+        executorIds: [1, 2]
+      }
+      // form.value = await KpiApi.getKpiDetail(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  getOptions()
+}
+
+function getOptions() {
+  employeeOptions.value = [
+    { id: 1, name: '张三' },
+    { id: 2, name: '李四' },
+    { id: 3, name: '王五' }
+  ]
+}
+
+function resetForm() {
+  form.value = {
+    title: undefined,
+    content: undefined,
+    priority: 1,
+    status: 1,
+    dueDate: undefined,
+    executorIds: []
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const formRef = ref()
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+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
+  }
+}
+
+const employeeOptions = ref([])
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/OKR/Management/Components/WaitTarget.vue b/src/views/OKR/Management/Components/WaitTarget.vue
new file mode 100644
index 0000000..829d2fc
--- /dev/null
+++ b/src/views/OKR/Management/Components/WaitTarget.vue
@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <el-form :model="searchForm" inline label-width="0" @submit.prevent="searchList">
+      <el-form-item>
+        <el-input v-model="searchForm.title" placeholder="输入标题" />
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="searchForm.priority" placeholder="选择优先级" clearable filterable>
+          <el-option
+            v-for="item in priorityOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="searchForm.status" placeholder="选择完成状态" clearable filterable>
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="searchList"> 搜索</el-button>
+        <el-button type="primary" @click="handleAdd"> 新增</el-button>
+      </el-form-item>
+    </el-form>
+    <div>
+      <Icon icon="ep:info-filled" />
+      <span>开发注意：</span>
+      <div>列表排序 1 状态按照未完成在前、已关闭在后， 2优先级根据高中低排序 3截止日期正序</div>
+      <div>
+        表格全部操作按钮：创建人(修改、删除、催办->微信通知)、执行人(跟进);且与完成状态相关
+      </div>
+    </div>
+    <el-tabs v-model="tabIndex" @tab-click="searchList">
+      <el-tab-pane :name="1">
+        <template #label>
+          <el-badge :value="9" :max="99">
+            <el-tooltip content="截止日在今日及之前的未关闭事项" placement="top" effect="dark">
+              <Icon icon="ep:question-filled" />
+            </el-tooltip>
+            <span>今日截止</span>
+          </el-badge>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane :name="2">
+        <template #label>
+          <el-tooltip content="需要我执行的全部事项" placement="top" effect="dark">
+            <Icon icon="ep:question-filled" />
+          </el-tooltip>
+          <span>我的待办</span>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane :name="3">
+        <template #label>
+          <el-badge :value="3" :max="99">
+            <el-tooltip content="指派他人去办的事项" placement="top" effect="dark">
+              <Icon icon="ep:question-filled" />
+            </el-tooltip>
+            <span>催办事项</span>
+          </el-badge>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane :name="4">
+        <template #label>
+          <el-badge :value="999" :max="99">
+            <el-tooltip content="特指OKR中@我的消息" placement="top" effect="dark">
+              <Icon icon="ep:question-filled" />
+            </el-tooltip>
+            <span>通知我的</span>
+          </el-badge>
+        </template>
+        <el-table :data="mentionedList">
+          <el-table-column type="index" width="50" />
+          <el-table-column prop="content" label="okr标题" />
+          <el-table-column prop="createUserName" label="创建人" />
+          <el-table-column prop="createDate" label="创建日期" />
+          <el-table-column fixed="right" label="操作" width="140">
+            <template #default="{ row }">
+              <el-button style="padding: 0" type="primary" text @click="handleShow(row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-table v-if="tabIndex != 4" :data="tableList">
+      <el-table-column type="index" width="50" />
+      <el-table-column prop="title" label="标题" />
+      <el-table-column prop="priority" label="优先级">
+        <template #default="{ row }">
+          <el-tag :type="priorityFilter(row.priority)">
+            {{ priorityNameFilter(row.priority) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createUserName" label="创建人" />
+      <el-table-column prop="createDate" label="创建日期" />
+      <el-table-column prop="executorNames" label="执行人" />
+      <el-table-column prop="dueDate" label="截止日期" />
+      <el-table-column label="状态">
+        <template #default="{ row }">
+          <el-tag :type="statusFilter(row.status)">{{ statusNameFilter(row.status) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="completeDate" label="关闭日期" />
+      <el-table-column fixed="right" label="操作" width="140">
+        <template #default="{ row }">
+          <el-button
+            v-if="row.executorIds.includes(currentUserId) && row.status == 1"
+            style="padding: 0; margin-right: 10px"
+            type="primary"
+            text
+            @click="handleDo(row)"
+          >
+            跟进
+          </el-button>
+          <el-button
+            v-if="row.createUserId == currentUserId && row.status == 1"
+            style="padding: 0; margin-right: 10px; margin-left: 0"
+            type="primary"
+            text
+            @click="handleEdit(row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            v-if="!row.executorIds.includes(currentUserId) && row.status == 1"
+            style="padding: 0; margin-right: 10px; margin-left: 0"
+            type="primary"
+            text
+            @click="handleNotice(row)"
+          >
+            催办
+          </el-button>
+          <el-button
+            v-if="row.createUserId == currentUserId && row.status == 1"
+            style="padding: 0; margin-right: 10px; margin-left: 0"
+            type="danger"
+            text
+            @click="handleDelete(row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      v-model:limit="searchForm.pageSize"
+      v-model:page="searchForm.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <DialogWait ref="waitDialogRef" @success="getList" />
+  </div>
+</template>
+
+<script setup name="WaitTarget">
+import { useUserStore } from '@/store/modules/user'
+import DialogWait from './DialogWait.vue'
+
+const userStore = useUserStore()
+const currentUserId = userStore.getUser.id
+
+const message = useMessage()
+
+const searchForm = ref({
+  title: undefined,
+  status: undefined,
+  priority: undefined,
+  pageNo: 1,
+  pageSize: 50
+})
+
+const statusOptions = [
+  { label: '未完成', value: 1, tagType: 'warning' },
+  { label: '已关闭', value: 2, tagType: 'success' }
+]
+
+const statusFilter = (status) => {
+  return statusOptions.find((item) => item.value === status)?.tagType
+}
+
+const statusNameFilter = (status) => {
+  return statusOptions.find((item) => item.value === status)?.label
+}
+
+const priorityOptions = [
+  { label: '高', value: 1, tagType: 'danger' },
+  { label: '中', value: 2, tagType: 'warning' },
+  { label: '低', value: 3, tagType: 'info' }
+]
+
+const priorityFilter = (priority) => {
+  return priorityOptions.find((item) => item.value === priority)?.tagType
+}
+
+const priorityNameFilter = (priority) => {
+  return priorityOptions.find((item) => item.value === priority)?.label
+}
+
+const tabIndex = ref(1)
+
+onMounted(() => {
+  searchList()
+})
+
+function searchList() {
+  searchForm.value.pageNo = 1
+  getList()
+}
+
+const loading = ref(false)
+const tableList = ref([])
+const mentionedList = ref([])
+const total = ref(0)
+function getList() {
+  loading.value = true
+  try {
+    // 用settimeout模拟网络请求
+    setTimeout(() => {
+      loading.value = false
+      if (tabIndex.value == 4) {
+        mentionedList.value = [
+          {
+            id: 1,
+            content: '我是老六@张三',
+            createUserName: '王二',
+            createDate: '2025-03-07'
+          }
+        ]
+      } else {
+        const list = [
+          {
+            id: 1,
+            title: '今日跟进数量达到100',
+            description: '今日成交数量达到10',
+            priority: 1,
+            createUserId: 1,
+            createUserName: '系统',
+            createDate: '2025-03-07',
+            executorIds: ['1818599239840960512'],
+            executorNames: '张三',
+            dueDate: '2025-03-07',
+            status: 1,
+            completeDate: ''
+          },
+          {
+            id: 2,
+            title: '今日跟进数量达到100',
+            description: '今日成交数量达到10',
+            priority: 1,
+            createUserId: '1818599239840960512',
+            createUserName: '张三',
+            createDate: '2025-03-07',
+            executorIds: ['1818599239840960512', '123'],
+            executorNames: '张三，李四',
+            dueDate: '2025-02-07',
+            status: 1,
+            completeDate: ''
+          },
+          {
+            id: 3,
+            title: '今日跟进数量达到100',
+            description: '今日成交数量达到10',
+            priority: 1,
+            createUserId: '1818599239840960512',
+            createUserName: '张三',
+            createDate: '2025-03-07',
+            executorIds: ['1818599239840960512'],
+            executorNames: '张三',
+            dueDate: '2025-03-17',
+            status: 2,
+            completeDate: '2025-03-07'
+          },
+          {
+            id: 2,
+            title: '今日跟进数量达到100',
+            description: '今日成交数量达到10',
+            priority: 1,
+            createUserId: '1818599239840960512',
+            createUserName: '张三',
+            createDate: '2025-03-07',
+            executorIds: ['123'],
+            executorNames: '李四',
+            dueDate: '2025-02-07',
+            status: 1,
+            completeDate: ''
+          }
+        ]
+        tableList.value = list.filter((item) => {
+          if (tabIndex.value == 1) {
+            return item.status == 1
+          } else {
+            return item
+          }
+        })
+      }
+      total.value = 1
+    }, 1000)
+    // getWaitTargetList(searchForm.value).then((res) => {
+    //   tableList.value = res.data
+    //   total.value = res.total
+    //   loading.value = false
+    // })
+  } catch (error) {}
+}
+
+function handleDo(row) {
+  waitDialogRef.value.open('do', row.id)
+}
+
+const waitDialogRef = ref()
+function handleAdd() {
+  waitDialogRef.value.open('create')
+}
+
+function handleEdit(row) {
+  waitDialogRef.value.open('update', row.id)
+}
+
+function handleDelete(row) {
+  console.log(row)
+}
+
+function handleNotice(row) {
+  console.log(row)
+
+  message.confirm('即将发送微信通知提醒执行人，是否继续？').then(() => {
+    message.success('发送成功')
+  })
+}
+
+function handleShow(row) {
+  console.log(row)
+  message.success('打开okr详情页')
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/OKR/Management/index.vue b/src/views/OKR/Management/index.vue
index 6b1d3c4..39c9b08 100644
--- a/src/views/OKR/Management/index.vue
+++ b/src/views/OKR/Management/index.vue
@@ -11,7 +11,9 @@
       <el-tab-pane label="我负责的" name="0">
         <MyDuty v-if="tabIndex == 0" />
       </el-tab-pane>
-      <el-tab-pane label="我的待办" name="1">我的待办</el-tab-pane>
+      <el-tab-pane label="待办事项" name="1">
+        <WaitTarget v-if="tabIndex == 1" />
+      </el-tab-pane>
       <el-tab-pane label="全部目标" name="2">
         <AllTarget v-if="tabIndex == 2" />
       </el-tab-pane>
@@ -40,6 +42,7 @@
 import AllTarget from './Components/AllTarget.vue'
 import MyDuty from './Components/MyDuty.vue'
 import ObjectList from './Components/ObjectList.vue'
+import WaitTarget from './Components/WaitTarget.vue'
 
 const tabIndex = ref('0')
 const height = ref(innerHeight - 115)