sc
This commit is contained in:
qsh
347
src/views/OKR/Wait/Components/DialogWait.vue
Normal file
347
src/views/OKR/Wait/Components/DialogWait.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<Dialog :title="title" v-model="show" :width="formType == 'create' ? '750px' : '1100px'">
|
||||
<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="completeStatus">
|
||||
<el-select v-model="form.completeStatus" 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="endDate">
|
||||
<el-date-picker
|
||||
v-model="form.endDate"
|
||||
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="userList">
|
||||
<el-select
|
||||
v-model="form.userList"
|
||||
placeholder="选择执行人，可多选"
|
||||
multiple
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in employeeOptions"
|
||||
:key="item.id"
|
||||
:disabled="item.status == 1"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="8" :offset="0">
|
||||
<el-form-item prop="notifyType">
|
||||
<template #label>
|
||||
<el-tooltip
|
||||
content="新增待办时会立刻发送消息通知执行人，若后续无需再次提醒，频率可选择“不提醒”"
|
||||
placement="top"
|
||||
effect="dark"
|
||||
>
|
||||
<Icon icon="ep:info-filled" :size="12" />
|
||||
</el-tooltip>
|
||||
<span>提醒频率</span>
|
||||
</template>
|
||||
<el-select v-model="form.notifyType" placeholder="选择提醒频率">
|
||||
<el-option label="不提醒" value="1" />
|
||||
<el-option label="单次提醒" value="2" />
|
||||
<el-option label="循环提醒" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0" v-if="form.notifyType != 1">
|
||||
<el-form-item label="提醒时间" prop="remindTime" class="wait-form">
|
||||
<el-input
|
||||
v-if="form.notifyType == 2"
|
||||
v-model="form.notifyBeforeTime"
|
||||
placeholder="输入小时数"
|
||||
min="0"
|
||||
type="number"
|
||||
>
|
||||
<template #prepend>
|
||||
<span>提前</span>
|
||||
</template>
|
||||
<template #append> 小时 </template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-else-if="form.notifyType == 3"
|
||||
v-model="form.intervalTime"
|
||||
placeholder="输入小时数"
|
||||
min="0"
|
||||
type="number"
|
||||
>
|
||||
<template #prepend>
|
||||
<span>每</span>
|
||||
</template>
|
||||
<template #append> 小时 </template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" :offset="0" v-if="form.notifyType == 3">
|
||||
<el-form-item label="首次提醒" prop="firstNotifyTime">
|
||||
<el-time-picker
|
||||
v-model="form.firstNotifyTime"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
style="width: 100%"
|
||||
:picker-options="enableTimeRange"
|
||||
placeholder="选择时间点"
|
||||
/>
|
||||
</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
|
||||
v-for="item in followList"
|
||||
:key="item.followId"
|
||||
placement="bottom"
|
||||
:timestamp="formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')"
|
||||
color="#30d1fc"
|
||||
>
|
||||
<div class="font-bold" style="font-size: 16px">{{ item.followUserName }}</div>
|
||||
<div v-dompurify-html="item.content"></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">
|
||||
import {
|
||||
createWait,
|
||||
updateWait,
|
||||
getWaitDetail,
|
||||
getFollowWaitPage,
|
||||
followWait
|
||||
} from '@/api/okr/wait'
|
||||
import { getEmployeeSimpleList } from '@/api/pers/employee'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
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 enableTimeRange = {
|
||||
selectableRange: '07:00 - 22:00'
|
||||
}
|
||||
|
||||
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' }],
|
||||
endDate: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
|
||||
userList: [{ required: true, message: '请选择执行人', trigger: 'change' }]
|
||||
})
|
||||
|
||||
const followList = ref([])
|
||||
|
||||
function open(type, id) {
|
||||
show.value = true
|
||||
title.value = { create: '新增待办', update: '修改待办', do: '更新待办进度' }[type]
|
||||
formType.value = type
|
||||
resetForm()
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
// 表单数据
|
||||
getWaitDetail(id).then((info) => {
|
||||
form.value = {
|
||||
...info,
|
||||
endDate: formatDate(info.endDate, 'YYYY-MM-DD'),
|
||||
userList: info.userIdList
|
||||
}
|
||||
})
|
||||
getFollowList(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
getOptions()
|
||||
}
|
||||
|
||||
function getFollowList(id) {
|
||||
// 跟进数据
|
||||
getFollowWaitPage({
|
||||
workId: id
|
||||
}).then((data) => {
|
||||
followList.value = data
|
||||
})
|
||||
}
|
||||
|
||||
function getOptions() {
|
||||
getEmployeeSimpleList().then((data) => {
|
||||
employeeOptions.value = data
|
||||
})
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
title: undefined,
|
||||
content: undefined,
|
||||
priority: '1',
|
||||
completeStatus: '1',
|
||||
endDate: undefined,
|
||||
userList: [],
|
||||
notifyType: '3',
|
||||
remindTime: 12,
|
||||
firstNotifyTime: '09:00'
|
||||
}
|
||||
}
|
||||
|
||||
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 createWait(form.value)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await updateWait(form.value)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
show.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const employeeOptions = ref([])
|
||||
|
||||
function addDo() {
|
||||
followWait({
|
||||
workId: form.value.workId,
|
||||
content: form.value.followUpContent
|
||||
}).then(() => {
|
||||
message.success('跟进成功')
|
||||
getFollowList(form.value.workId)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wait-form {
|
||||
:deep(.el-input-group__prepend) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
:deep(.el-input-group__append) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
297
src/views/OKR/Wait/index.vue
Normal file
297
src/views/OKR/Wait/index.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<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.completeStatus"
|
||||
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>
|
||||
<el-tabs v-model="tabIndex" @tab-change="searchList">
|
||||
<el-tab-pane :name="1">
|
||||
<template #label>
|
||||
<el-badge :value="tabCount.dayEndAgentWorkNum" :max="99" :show-zero="false">
|
||||
<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="tabCount.urgeAgentWorkNum" :max="99" :show-zero="false">
|
||||
<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="tabCount.notifyNum" :max="99" :show-zero="false">
|
||||
<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="creatorName" label="创建人" />
|
||||
<el-table-column prop="createTime" label="创建日期" :formatter="dateFormatter" />
|
||||
<el-table-column prop="userNameStr" label="执行人" />
|
||||
<el-table-column prop="endDate" label="截止日期" :formatter="dateFormatter" />
|
||||
<el-table-column label="状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusFilter(row.completeStatus)">{{
|
||||
statusNameFilter(row.completeStatus)
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="completedDate" label="关闭日期" :formatter="dateFormatter" />
|
||||
<el-table-column fixed="right" label="操作" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row.userIdList.includes(currentUserId) && row.completeStatus == 1"
|
||||
style="padding: 0; margin-right: 10px"
|
||||
type="primary"
|
||||
text
|
||||
@click="handleDo(row)"
|
||||
>
|
||||
跟进
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="!row.userIdList.includes(currentUserId) && row.completeStatus == 1"
|
||||
style="padding: 0; margin-right: 10px; margin-left: 0"
|
||||
type="primary"
|
||||
text
|
||||
@click="handleNotice(row)"
|
||||
>
|
||||
催办
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.creator == currentUserId && row.completeStatus == 1"
|
||||
style="padding: 0; margin-right: 10px; margin-left: 0"
|
||||
type="primary"
|
||||
text
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.creator == currentUserId && row.completeStatus == 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 { dateFormatter } from '@/utils/formatTime'
|
||||
import DialogWait from './Components/DialogWait.vue'
|
||||
|
||||
import { getWaitPage, deleteWait, getWaitCount, urgeWait } from '@/api/okr/wait'
|
||||
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
const currentUserId = userStore.getUser.id
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const searchForm = ref({
|
||||
title: undefined,
|
||||
completeStatus: 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(() => {
|
||||
if (route?.query?.type) {
|
||||
tabIndex.value = Number(route.query.type)
|
||||
} else {
|
||||
tabIndex.value = 1
|
||||
}
|
||||
searchList()
|
||||
})
|
||||
|
||||
function searchList() {
|
||||
searchForm.value.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const tabCount = ref({
|
||||
dayEndAgentWorkNum: 0,
|
||||
myAgentWorkNum: 0,
|
||||
urgeAgentWorkNum: 0,
|
||||
notifyNum: 0
|
||||
})
|
||||
function getTabCount() {
|
||||
getWaitCount({
|
||||
title: searchForm.value.title,
|
||||
priority: searchForm.value.priority
|
||||
}).then((res) => {
|
||||
tabCount.value = res
|
||||
})
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const tableList = ref([])
|
||||
const mentionedList = ref([])
|
||||
const total = ref(0)
|
||||
function getList() {
|
||||
loading.value = true
|
||||
try {
|
||||
searchForm.value.queryType = tabIndex.value
|
||||
getWaitPage(searchForm.value).then((res) => {
|
||||
tableList.value = res.list
|
||||
total.value = res.total
|
||||
loading.value = false
|
||||
})
|
||||
getTabCount()
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
function handleDo(row) {
|
||||
waitDialogRef.value.open('do', row.workId)
|
||||
}
|
||||
|
||||
const waitDialogRef = ref()
|
||||
function handleAdd() {
|
||||
waitDialogRef.value.open('create')
|
||||
}
|
||||
|
||||
function handleEdit(row) {
|
||||
waitDialogRef.value.open('update', row.workId)
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
message.confirm('确定删除待办事项吗？').then(() => {
|
||||
deleteWait(row.workId).then(() => {
|
||||
message.success('删除成功')
|
||||
getList()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleNotice(row) {
|
||||
message.confirm('即将发送微信通知提醒执行人，是否继续？').then(() => {
|
||||
urgeWait(row.workId).then(() => {
|
||||
message.success('发送成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function handleShow(row) {
|
||||
console.log(row)
|
||||
message.success('打开okr详情页')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user