analysis/src/views/project/gist/create.vue

<template>
    <hc-card scrollbar is-action-btn class="create-gist">
        <template #header>
            <div class="flex-1 text-center text-[24px] font-bold">工作重点填写</div>
        </template>
        <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="left" label-width="auto" size="large">
            <el-form-item label="项目阶段:" prop="workFocusStage">
                <el-select v-model="baseForm.workFocusStage" placeholder="请选择">
                    <el-option v-for="item in projectStage" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="目标任务:" prop="targetPlan">
                <el-input v-model="baseForm.targetPlan" placeholder="请输入" clearable type="textarea" />
            </el-form-item>
        </el-form>
        <template v-for="(item, index) in workFocusEntityList" :key="index">
            <hc-card-item class="gist-detail">
                <div v-if="!formInfo.id" class="hc-form-gist-action hc-flex">
                    <div class="add hc-flex-center h-[24px] w-[24px]" @click="addGistList">
                        <hc-icon name="add" fill />
                    </div>
                    <div class="subtract hc-flex-center h-[24px] w-[24px]" @click="delGistList(index)">
                        <hc-icon name="subtract" fill />
                    </div>
                </div>
                <el-form :ref="(el) => setGistRefs(el, index)" :model="item" :rules="gistFormRules" label-position="left" label-width="auto" size="large">
                    <el-form-item label="选择年份:" prop="startYear">
                        <hc-date-year v-model="item.startYear" v-model:end="item.endYear" text1="开始年份" text2="结束年份" :disabled="!!formInfo.id" />
                    </el-form-item>
                    <el-form-item label="工作任务:" prop="workPlan">
                        <el-input v-model="item.workPlan" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                    <el-form-item label="责任单位:" prop="dutyUnit">
                        <el-input v-model="item.dutyUnit" placeholder="请输入" clearable />
                    </el-form-item>
                </el-form>
            </hc-card-item>
        </template>
        <template #action>
            <el-button v-if="formInfo.id" type="info" @click="cancelClick">取消</el-button>
            <el-button v-if="!formInfo.id" :loading="saveLoading" color="#20C98B" type="primary" class="text-white" @click="saveClick">创建工作要点</el-button>
            <el-button v-else :loading="saveLoading" type="warning" @click="saveClick">保存</el-button>
        </template>
    </hc-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
import { getDictionaryData } from '~src/utils/tools'
import mainApi from '~api/project/gist'

const props = defineProps({
    form: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['back'])

//监听权限
const formInfo = ref(props.form)
watch(() => props.form, (data) => {
    formInfo.value = data
})

//渲染完成
onMounted(() => {
    getDataApi()
})

//获取接口数据
const projectStage = ref([])
const getDataApi = async () => {
    projectStage.value = await getDictionaryData('projectStage', true)
    const form = getObjValue(formInfo.value)
    if (!isNullES(form.id)) {
        baseForm.value = {
            id: form.id,
            workFocusStage: form.workFocusStage,
            targetPlan: form.targetPlan,
        }
        workFocusEntityList.value = [{
            startYear: form.startYear,
            endYear: form.endYear,
            workPlan: form.workPlan,
            dutyUnit: form.dutyUnit,
        }]
    }
}

//基础表单
const baseFormRef = ref(null)
const baseForm = ref({ workFocusStage:null, targetPlan: '' })
const baseFormRules = {
    workFocusStage: {
        required: true,
        trigger: 'blur',
        message: '请选择项目阶段',
    },
    targetPlan: {
        required: true,
        trigger: 'blur',
        message: '请输入目标任务',
    },
}

//任务列表表单
const workFocusEntityList = ref([{}])
//处理ref
const gistRefs = ref([])
const setGistRefs = (el, index) => {
    if (el) {
        try {
            gistRefs.value[index] = el
        } catch (error) {
            gistRefs.value.push(el)
        }
    }
}
//任务列表表单
const gistFormRules = {
    startYear: {
        required: true,
        trigger: 'blur',
        message: '请选择年份',
    },
    workPlan: {
        required: true,
        trigger: 'blur',
        message: '请填写工作任务',
    },
    dutyUnit: {
        required: true,
        trigger: 'blur',
        message: '请填写责任单位',
    },
}

//新增工作重点
const addGistList = () => {
    const list = getArrValue(workFocusEntityList.value)
    list.push({})
}

//删除工作重点
const delGistList = (index) => {
    const list = deepClone(workFocusEntityList.value)
    if (list.length <= 1) {
        window.$message.warning('至少需要保留一个任务')
        return
    }
    list.splice(index, 1)
    workFocusEntityList.value = list
}

//取消
const cancelClick = () => {
    emit('back')
}

//创建 保存
const saveLoading = ref(false)
const saveClick = async () => {
    //验证基础表单
    const isForm = await formValidate(baseFormRef.value)
    //验证列表表单
    let isGistForm = true
    const refs = getArrValue(gistRefs.value)
    for (let i = 0; i < refs.length; i++) {
        const form = await formValidate(refs[i])
        if (!form) isGistForm = false
    }
    if (!isForm || !isGistForm) return
    saveLoading.value = true
    //处理表单数据
    const form = baseForm.value, gist = workFocusEntityList.value
    let newWorkForm = []
    for (let i = 0; i < gist.length; i++) {
        newWorkForm.push({
            ...form,
            ...gist[i],
        })
    }
    //发起请求
    const { error, code, msg } = await mainApi.submit({
        workFocusEntityList: newWorkForm,
    })
    //判断状态
    saveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        if (!isNullES(form.id)) {
            baseForm.value = {}
            workFocusEntityList.value = [{}]
            cancelClick()
        }
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}
</script>

<style lang="scss">
.hc-div-new-card-box.create-gist .el-card.hc-card-box.hc-new-card-box .hc-card-main .hc-card-main-body {
    padding: 14px;
    .el-scrollbar__bar.is-vertical {
        right: -16px;
    }
}
.hc-card-item-box.gist-detail {
    padding: 20px;
    background: #f7f7f7;
    border-radius: 5px;
    margin-top: 14px;
    .hc-form-gist-action {
        position: absolute;
        color: #101010;
        z-index: 999;
        right: 0;
        div {
            cursor: pointer;
            font-size: 20px;
            border-radius: 2px;
            i {
                margin-top: 1px;
            }
        }
        .add {
            background: #409eff;
            color: white;
            &:hover {
                background: #337ecc;
            }
        }
        .subtract {
            margin-left: 8px;
            background: #f56c6c;
            color: white;
            &:hover {
                background: #c45656;
            }
        }
    }
}
</style>