yn_digital_gadgets_web/src/views/planMange/monthlyPlan/addForm.vue

<template>
    <div class="monthly-add-form">
        <!-- 表单区域 -->
        <div class="form-section">
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="140px"
                size="large"
                class="month-form"
            >
                <el-form-item label="月计划执行月份:" prop="month" class="month-item">
                    <el-date-picker
                        type="month"
                        v-model="formData.month"
                        value-format="YYYY-MM"
                        placeholder="请选择月份"
                        style="width: 200px"
                        @change="onSearch"
                    />
                </el-form-item>
            </el-form>

            <!-- 搜索区域 -->
            <div class="search-section">
                <el-input
                    clearable
                    @keyup.enter="onSearch"
                    class="search-input"
                    placeholder="输入关键字"
                    v-model.trim="formData.keyword"
                >
                    <template #prefix>
                        <el-icon class="search-icon" @click="onSearch">
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
            </div>
        </div>

        <!-- 任务列表 -->
        <div class="table-section">
            <el-table
                :data="tableData"
                v-loading="loading"
                @selection-change="onSelectionChange"
                class="task-table"
                stripe
                border
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                    prop="projectName"
                    label="项目名称"
                    min-width="260"
                    align="center"
                    show-overflow-tooltip
                />
                <el-table-column
                    prop="workContent"
                    label="工作任务"
                    min-width="360"
                    show-overflow-tooltip
                    align="center"
                />
            </el-table>
        </div>
    </div>
</template>

<script setup name="MonthlyPlanAddForm">
import { ref, watch, getCurrentInstance, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { listMonthlyPlanPopupAPI } from '@/api/planMange/monthlyPlan'
import dayjs from 'dayjs'

const { proxy } = getCurrentInstance()
const formRef = ref(null)
const loading = ref(false)
const tableData = ref([])
const selectedRows = ref([])

const formData = ref({
    month: dayjs().format('YYYY-MM'), // 默认当月
    keyword: '',
})

const rules = {
    month: [{ required: true, message: '请选择计划执行月份', trigger: 'change' }],
}

// 搜索 / 刷新列表
const fetchData = async () => {
    await formRef.value.validate()
    loading.value = true
    try {
        const params = {
            planManagementMonth: formData.value.month,
            keyWord: formData.value.keyword,
        }
        const res = await listMonthlyPlanPopupAPI(params)
        tableData.value = res?.data
    } catch (e) {
        console.error('加载计划任务列表失败:', e)
        tableData.value = []
    } finally {
        loading.value = false
    }
}

const onSearch = () => {
    fetchData()
}

const onSelectionChange = (rows) => {
    selectedRows.value = rows
}

// 暴露方法给父组件：获取选中任务、触发查询、校验
defineExpose({
    getSelectedTasks: () => selectedRows.value,
    search: fetchData,
    validate: async () => {
        await formRef.value.validate()
        if (selectedRows.value.length === 0) {
            proxy.$modal.msgError('请选择项目')
            return false
        }
        return true
    },
})

onMounted(() => {
    fetchData()
})
</script>

<style scoped lang="scss">
.monthly-add-form {
    padding: 0;
    padding-bottom: 30px;

    .form-section {
        margin-bottom: 20px;

        .month-form {
            margin-bottom: 16px;

            .month-item {
                margin-bottom: 0;

                :deep(.el-form-item__label) {
                    font-weight: 500;
                    color: #303133;

                    &::before {
                        content: '*';
                        color: #f56c6c;
                        margin-right: 4px;
                    }
                }

                :deep(.el-form-item__content) {
                    margin-left: 0 !important;
                }
            }
        }

        .search-section {
            display: flex;
            justify-content: flex-start;
            margin-top: 16px;

            .search-input {
                width: 300px;

                :deep(.el-input__wrapper) {
                    border-radius: 4px;
                    box-shadow: 0 0 0 1px #dcdfe6 inset;
                    transition: all 0.3s;

                    &:hover {
                        box-shadow: 0 0 0 1px #c0c4cc inset;
                    }

                    &.is-focus {
                        box-shadow: 0 0 0 1px #409eff inset;
                    }
                }

                .search-icon {
                    color: #909399;
                    cursor: pointer;
                    font-size: 16px;
                    transition: color 0.3s;

                    &:hover {
                        color: #409eff;
                    }
                }
            }
        }
    }

    .table-section {
        .task-table {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            overflow: hidden;

            :deep(.el-table__header) {
                th {
                    padding: 12px 0;
                    font-size: 14px;
                }
            }

            :deep(.el-table__body) {
                td {
                    padding: 12px 0;
                    font-size: 14px;
                }

                tr {
                    &:hover {
                        background-color: #f5f7fa;
                    }
                }
            }

            :deep(.el-checkbox) {
                .el-checkbox__input.is-checked .el-checkbox__inner {
                    background-color: #409eff;
                    border-color: #409eff;
                }
            }
        }
    }
}
</style>