模板部分
<a-modal :visible="stateLi.visible" title="新增任务" destroyOnClose width="50%" :ok-button-props="{ disabled: btnLoading }"
@cancel="stateLi.visible = false" @ok="handlerSubmit">
<a-form ref="formRef" :model="stateLi.taskFromList">
<div v-for="(item, index) in stateLi.taskFromList" :key="index" class="form-item">
<div class="form-content">
<a-row>
<a-col :span="24">
<a-form-item label="任务名称" :name="[index, 'taskName']" :rules="{ required: true, message: '请输入任务名称!' }">
<a-input v-model:value="stateLi.taskFromList[index].taskName" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="里程碑" :name="[index, 'milepostId']" :rules="{ required: true, message: '请选择里程碑!' }">
<a-select v-model:value="stateLi.taskFromList[index].milepostId" showSearch
:options="stateLi.milepostList" :field-names="{ label: 'milepostName', value: 'milepostId' }"
@focus="getMilepostList" @change="handlerMilepostIdChange(index)" :filter-option="(input, option) => {
return option.milepostName.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="父级任务">
<a-tree-select v-model:value="stateLi.taskFromList[index].parentId" allowClear showSearch
:tree-data="stateLi.parentListMap[index]" :field-names="{ label: 'taskName', value: 'taskId' }"
:filter-option="(input, option) => {
return option.taskName.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="任务优先级" :name="[index, 'priority']" :rules="{ required: true, message: '请选择任务优先级!' }">
<a-select v-model:value="stateLi.taskFromList[index].priority" showSearch :options="[
{ label: '最高', value: 'HIGHEST' },
{ label: '高', value: 'HIGH' },
{ label: '中', value: 'MEDIUM' },
{ label: '低', value: 'LOW' },
{ label: '最低', value: 'LOWEST' }
]" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="依赖任务">
<a-select v-model:value="stateLi.taskFromList[index].taskDependency" allowClear showSearch
:options="stateLi.taskList" :field-names="{ label: 'taskName', value: 'taskId' }" :filter-option="(input, option) => {
return option.taskName.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="预计投入工时" :name="[index, 'workingHours']"
:rules="{ required: true, message: '请输入预计投入工时!' }">
<a-input v-model:value="stateLi.taskFromList[index].workingHours" type="number" suffix="小时" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="任务负责人" :name="[index, 'taskOwner']" :rules="{ required: true, message: '请选择任务负责人!' }">
<a-select v-model:value="stateLi.taskFromList[index].taskOwner" showSearch
:options="stateLi.taskParticipantList" :field-names="{ label: 'name', value: 'name' }" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="任务类型" :name="[index, 'taskType']" :rules="{ required: true, message: '请选择任任务类型!' }">
<a-select v-model:value="stateLi.taskFromList[index].taskType" showSearch :options="[
{ label: '主任务', value: '主任务' },
{ label: '辅助任务', value: '辅助任务' },
{ label: '其他任务', value: '其他任务' }
]" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="任务开始时间" :name="[index, 'startTime']" :rules="{ required: true, message: '请选择任务开始时间!' }">
<a-date-picker v-model:value="stateLi.taskFromList[index].startTime" valueFormat="YYYY-MM-DD" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="任务结束时间" :name="[index, 'endTime']" :rules="{ required: true, message: '请选择任务结束时间!' }">
<a-date-picker v-model:value="stateLi.taskFromList[index].endTime" valueFormat="YYYY-MM-DD" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="审核员" :name="[index, 'assessor']" :rules="{ required: true, message: '请选择审核员!' }">
<a-select v-model:value="stateLi.taskFromList[index].assessor" showSearch
:options="stateLi.taskParticipantList" :field-names="{ label: 'name', value: 'id' }" :filter-option="(input, option) => {
return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="是否必须提交输出物" :name="[index, 'output']"
:rules="{ required: true, message: '请选择是否必须提交输出物!' }">
<a-select v-model:value="stateLi.taskFromList[index].output" showSearch :options="[
{ label: '是', value: '是' },
{ label: '否', value: '否' }
]" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="任务参与人" :name="[index, 'taskParticipantList']"
:rules="{ required: true, message: '请选择任务参与人!' }">
<a-select v-model:value="stateLi.taskFromList[index].taskParticipantList" showSearch mode="multiple"
:options="stateLi.taskParticipantList" :field-names="{ label: 'name', value: 'name' }" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="备注">
<a-textarea v-model:value="stateLi.taskFromList[index].description" />
</a-form-item>
</a-col>
</a-row>
</div>
<a class="del" @click="handlerDeleteFormItem(index)">删除</a>
</div>
</a-form>
<a-button type="primary" ghost class="add-btn" @click="handlerAddFormItem">
<plus-outlined />
添加
</a-button>
</a-modal>
数据部分
const stateLi = reactive({
visible: false,
taskFromList: [],
})
//动态添加的对象
const taskFromListItem = {
taskName: undefined,
milepostId: undefined,
taskDependency: undefined,
priority: undefined,
taskOwner: undefined,
taskType: undefined,
assessor: undefined,
startTime: undefined,
endTime: undefined,
taskParticipantList: [],
description: undefined,
workingHours: undefined,
output: undefined,
parentId: undefined
}
方法
//添加·
function handlerAddFormItem() {
stateLi.taskFromList.push({ ...taskFromListItem })
}
//删除
function handlerDeleteFormItem(index) {
stateLi.taskFromList.splice(index, 1)
const data = {}
for (let k in stateLi.parentListMap) {
if (k < index) {
data[k] = stateLi.parentListMap[k]
} else if (k > index) {
data[k - 1] = stateLi.parentListMap[k]
}
}
stateLi.parentListMap = data
}
//校验并提交
function handlerSubmit() {
formRef.value.validate().then(data => {
btnLoading.value = true
post(`xxxxxxx`, {
taskFromList: Object.values(stateLi.taskFromList)
})
.then(({ message: errMsg, code }) => {
if (code !== 200) {
message.error(errMsg)
}
stateLi.visible = false
getTableData()
})
.finally(() => {
btnLoading.value = false
})
})
}