hac/src/views/program/annual/form.vue

<template>
    <HcCard actionUi="text-center">
        <HcCardItem class="hc-program-annual-form-card-item">
            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                <div>
                    <el-form-item label="预算名称" prop="name" class="w-1/2">
                        <el-input v-model="formModel.name" placeholder="请输入预算名称" />
                    </el-form-item>
                    <el-form-item label="预算起止时间" prop="time" class="ml-6">
                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="合同" prop="key1">
                        <el-tooltip content="年度合同指标">
                            <el-input v-model="formModel.key1" placeholder="年度合同指标" />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="利润" prop="key2">
                        <el-tooltip content="年度利润指标">
                            <el-input v-model="formModel.key2" placeholder="年度利润指标" />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="预算" prop="key3">
                        <el-tooltip content="总经营预算">
                            <el-input v-model="formModel.key3" placeholder="总经营预算" disabled>
                                <template #append>元</template>
                            </el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="工资" prop="key4">
                        <el-tooltip content="人员成本">
                            <el-input v-model="formModel.key4" placeholder="人员成本" disabled>
                                <template #append>元</template>
                            </el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="综合" prop="key5">
                        <el-tooltip content="管理支出">
                            <el-input v-model="formModel.key5" placeholder="管理支出" disabled>
                                <template #append>元</template>
                            </el-input>
                        </el-tooltip>
                    </el-form-item>
                </div>
            </el-form>
        </HcCardItem>

        222
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()

//顶部表单数据
const formRef = ref(null)
const formModel = ref({
    key1: '', key2: '', key3: '', key4: '', key5: '',
})
const formRules = {}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr, query}) => {
    betweenTime.value = arr
    //formModel.value.betweenTime = query
}


//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'key', name: '编号', width: '90', align: 'center'},
    {key: 'key1', name: '计划名称'},
    {key: 'key2', name: '计划类型', width: '120', align: 'center'},
    {key: 'key3', name: '计划起止日期', width: '220', align: 'center'},
    {key: 'key4', name: '计划数量', width: '120', align: 'center'},
    {key: 'key5', name: '已完成计划', width: '120', align: 'center'},
    {key: 'key6', name: '未完成计划', width: '100', align: 'center'},
    {key: 'key8', name: '计划制定人', width: '100', align: 'center'},
    {key: 'action', name: '操作', width: '130', align: 'center'},
]
const tableData = ref([
    {id: 1, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
    {id: 2, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
    {id: 3, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
    {id: 4, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
])


//返回
const goBackClick = () => {
    router.back()
}

//提交保存
const saveClick = () => {

}
</script>

<style lang="scss" scoped>
.hc-program-annual-form-card-item {
    height: auto;
}
</style>

<style lang="scss">

</style>