144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
Vue
<template>
|
|
<div class="monthly-add-form">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
:rules="rules"
|
|
label-width="auto"
|
|
size="large"
|
|
class="month-form"
|
|
>
|
|
<el-row :gutter="12" align="middle">
|
|
<el-col :span="8">
|
|
<el-form-item label="计划执行月份" prop="month">
|
|
<el-date-picker
|
|
v-model="formData.month"
|
|
type="month"
|
|
value-format="YYYY-MM"
|
|
placeholder="请选择月份"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<el-form-item prop="keyword" class="keyword-item">
|
|
<el-input
|
|
placeholder="输入关键字"
|
|
clearable
|
|
v-model.trim="formData.keyword"
|
|
@keyup.enter="onSearch"
|
|
style="width: 240px"
|
|
>
|
|
<template #suffix>
|
|
<el-icon @click="onSearch" style="cursor: pointer">
|
|
<Search />
|
|
</el-icon>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<!-- 任务列表 -->
|
|
<el-table
|
|
border
|
|
:data="tableData"
|
|
v-loading="loading"
|
|
@selection-change="onSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column align="center" prop="projectName" label="项目名称" min-width="260" />
|
|
<el-table-column align="center" prop="workTask" label="工作任务" min-width="360" />
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="MonthlyPlanAddForm">
|
|
import { ref, watch, getCurrentInstance } from 'vue'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
|
const props = defineProps({
|
|
// 初始查询参数（比如从父页面传入当前月份）
|
|
defaultMonth: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
// 加载任务列表的方法，由父组件传入
|
|
loadTaskList: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
})
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const formRef = ref(null)
|
|
const loading = ref(false)
|
|
const tableData = ref([])
|
|
const selectedRows = ref([])
|
|
|
|
const formData = ref({
|
|
month: props.defaultMonth || '',
|
|
keyword: '',
|
|
})
|
|
|
|
const rules = {
|
|
month: [{ required: true, message: '请选择计划执行月份', trigger: 'change' }],
|
|
}
|
|
|
|
// 搜索 / 刷新列表
|
|
const fetchData = async () => {
|
|
if (!props.loadTaskList) return
|
|
await formRef.value.validate()
|
|
loading.value = true
|
|
try {
|
|
const params = {
|
|
month: formData.value.month,
|
|
keyword: formData.value.keyword,
|
|
}
|
|
const res = await props.loadTaskList(params)
|
|
tableData.value = res?.rows || res?.data?.rows || res?.data || []
|
|
} catch (e) {
|
|
console.error('加载计划任务列表失败:', e)
|
|
tableData.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const onSearch = () => {
|
|
fetchData()
|
|
}
|
|
|
|
const onSelectionChange = (rows) => {
|
|
selectedRows.value = rows
|
|
}
|
|
|
|
// 默认月份变化时，同步到表单
|
|
watch(
|
|
() => props.defaultMonth,
|
|
(val) => {
|
|
if (val) formData.value.month = val
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
// 暴露方法给父组件：获取选中任务、触发查询、校验
|
|
defineExpose({
|
|
getSelectedTasks: () => selectedRows.value,
|
|
search: fetchData,
|
|
validate: () => formRef.value.validate(),
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.monthly-add-form {
|
|
.month-form {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.keyword-item :deep(.el-form-item__content) {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
</style>
|