6 changed files with 134 additions and 11 deletions
@ -0,0 +1,98 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%"> |
||||
|
<div style="margin:20px"> |
||||
|
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="任务名称" name="id"> |
||||
|
<a-select v-model:value="form.id" :options="idOptions" placeholder="请选择" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="项目开始日期" name="scheduledStartTime"> |
||||
|
<a-date-picker v-model:value="form.scheduledStartTime" placeholder="请选择" valueFormat="YYYY-MM-DD" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="项目结束日期" name="scheduledEndTime"> |
||||
|
<a-date-picker v-model:value="form.scheduledEndTime" placeholder="请选择" valueFormat="YYYY-MM-DD"/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</a-form> |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { message } from 'ant-design-vue'; |
||||
|
import { getPlanNames, updateScheduledTime } from './projectPlan.api'; |
||||
|
export default { |
||||
|
setup(props, { emit }) { |
||||
|
const title = ref('新增'); |
||||
|
const formRef = ref(); |
||||
|
const visible = ref(false); |
||||
|
const form = reactive({ |
||||
|
scheduledStartTime: '', |
||||
|
scheduledEndTime: '', |
||||
|
id: null, |
||||
|
projectId: null, |
||||
|
}); |
||||
|
//下拉框 |
||||
|
const idOptions = ref([]); |
||||
|
const showModal = async (projectId) => { |
||||
|
visible.value = true; |
||||
|
form.projectId = projectId; |
||||
|
const res = await getPlanNames(projectId); |
||||
|
idOptions.value = res; |
||||
|
}; |
||||
|
const rules = { |
||||
|
id: [{ required: true, message: '请选择' }], |
||||
|
scheduledStartTime: [{ required: true, message: '请选择' }], |
||||
|
scheduledEndTime: [{ required: true, message: '请选择' }], |
||||
|
}; |
||||
|
const handleOk = () => { |
||||
|
formRef.value.validate().then((valid) => { |
||||
|
if (valid) { |
||||
|
let params = {}; |
||||
|
for (let i in form) { |
||||
|
params[i] = form[i]; |
||||
|
} |
||||
|
updateScheduledTime(params).then((_) => { |
||||
|
message.success('修改成功'); |
||||
|
emit('success'); |
||||
|
closeModal(); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
const closeModal = () => { |
||||
|
formRef.value.resetFields(); |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
return { |
||||
|
visible, |
||||
|
title, |
||||
|
form, |
||||
|
showModal, |
||||
|
handleOk, |
||||
|
idOptions, |
||||
|
formRef, |
||||
|
closeModal, |
||||
|
rules, |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可选样式调整 */ |
||||
|
.ant-modal-body { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue