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="top" label-width="auto" size="large">
            <el-form-item label="选择项目阶段:" prop="key1">
                <el-select v-model="baseForm.key1" 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="key2">
                <el-input v-model="baseForm.key2" placeholder="请输入" clearable type="textarea" />
            </el-form-item>
        </el-form>
        <template v-for="(item, index) in baseForm.gistList" :key="index">
            <hc-card-item class="gist-detail">
                <div 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="key1">
                        <hc-date-year v-model="item.key1" v-model:end="item.key1" />
                    </el-form-item>
                    <el-form-item label="工作任务:" prop="key3">
                        <el-input v-model="item.key3" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                    <el-form-item label="责任单位:" prop="key4">
                        <el-input v-model="item.key4" 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" color="#20C98B" type="primary" class="text-white" @click="createClick">创建</el-button>
            <el-button type="warning" @click="saveClick">保存</el-button>
        </template>
    </hc-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { deepClone, getArrValue, getRandom, 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(() => {
    console.log(formInfo.value)
    getDataApi()
})

//获取接口数据
const projectStage = ref([])
const getDataApi = async () => {
    projectStage.value = await getDictionaryData('projectStage', true)
}

const baseFormRef = ref(null)
const baseForm = ref({
    key1:'', key2: '',
    gistList: [{ key3: '111' }],
})
const baseFormRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: '请选择项目阶段',
    },
    key2: {
        required: true,
        trigger: 'blur',
        message: '请输入目标任务',
    },
}

//处理ref
const gistRefs = ref([])
const setGistRefs = (el, index) => {
    if (el) {
        try {
            gistRefs.value[index] = el
        } catch (error) {
            gistRefs.value.push(el)
        }
    }
}
const gistFormRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: '请选择年份',
    },
}

//新增工作重点
const addGistList = () => {
    const list = getArrValue(baseForm.value.gistList)
    list.push({ id: getRandom() })
}

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


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

//创建
const createClick = () => {
    const form = formInfo.value
    if (isNullES(form.id)) cancelClick()
    console.log('创建')
}

//保存
const saveClick = () => {
    const form = formInfo.value
    if (isNullES(form.id)) cancelClick()
    console.log('保存')
}
</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>