You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
247 lines
7.4 KiB
247 lines
7.4 KiB
4 months ago
|
<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>
|