admin/src/views/project/info/info.vue

<template>
    <div class="relative p-12px">
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large">
            <el-row :gutter="60">
                <el-col :span="12">
                    <el-form-item label="项目名称：" prop="projectName">
                        <el-input v-model="formModel.projectName" clearable placeholder="项目名称" />
                    </el-form-item>
                    <el-form-item label="项目别名：" prop="projectAlias">
                        <el-input v-model="formModel.projectAlias" clearable placeholder="项目别名" />
                    </el-form-item>
                    <el-form-item label="项目编号：">
                        <el-input v-model="formModel.projectNumber" clearable placeholder="项目编号" />
                    </el-form-item>
                    <el-form-item label="公路等级：">
                        <el-select v-model="formModel.projectGrade" filterable clearable block placeholder="公路等级">
                            <el-option v-for="item in highwayGradeList" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="计划开工：" prop="planStartTime">
                        <el-date-picker v-model="formModel.planStartTime" class="block" format="YYYY 年 MM 月 DD 日" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="计划开工日期" />
                    </el-form-item>
                    <el-form-item label="实际开工：" prop="actualStartTime">
                        <el-date-picker v-model="formModel.actualStartTime" class="block" format="YYYY 年 MM 月 DD 日" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="实际开工日期" />
                    </el-form-item>
                    <el-form-item label="预算投资：">
                        <el-input v-model="formModel.estimatedAmount" clearable placeholder="项目预算投资">
                            <template #append>万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="电签类别：" prop="remarkType">
                        <div class="form-item-div">
                            <el-radio-group v-model="formModel.remarkType">
                                <el-radio :value="1">安心签</el-radio>
                                <el-radio :value="2">东方中讯</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="电签方式：">
                        <div class="form-item-div">
                            <el-radio-group v-model="formModel.approvalType">
                                <el-radio :value="1">流程审批</el-radio>
                                <el-radio :value="2">平行审批</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="计量单元：">
                        <el-select v-model="formModel.meterTemplateId" filterable clearable block placeholder="系统计量单元">
                            <el-option v-for="item in meterTemplateOption" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目概况：">
                        <el-input v-model="formModel.projectGist" :rows="7" type="textarea" placeholder="项目概况" />
                    </el-form-item>
                    <el-form-item label="内置里程：">
                        <el-radio-group v-model="formModel.radioType" class="mr-14px">
                            <el-radio-button label="总里程" value="总里程" />
                            <el-radio-button label="路面" value="路面" />
                            <el-radio-button label="路基" value="路基" />
                        </el-radio-group>
                        <el-input-number v-if="formModel.radioType === '总里程'" v-model="formModel.projectAllMileage" :min="0" />
                        <el-input-number v-if="formModel.radioType === '路面'" v-model="formModel.projectPavement" :min="0" />
                        <el-input-number v-if="formModel.radioType === '路基'" v-model="formModel.projectSubgrade" :min="0" />
                        <span class="ml-12px">公里(KM)</span>
                    </el-form-item>
                    <el-form-item label="计划完工：" prop="planEndTime">
                        <el-date-picker v-model="formModel.planEndTime" class="block" format="YYYY 年 MM 月 DD 日" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="计划完工日期" />
                    </el-form-item>
                    <el-form-item label="实际完工：" prop="actualEndTime">
                        <el-date-picker v-model="formModel.actualEndTime" class="block" format="YYYY 年 MM 月 DD 日" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="实际完工日期" />
                    </el-form-item>
                    <el-form-item label="随机数：" prop="isOpenRandomNumber">
                        <div class="form-item-div">
                            <el-radio-group v-model="formModel.isOpenRandomNumber">
                                <el-radio :value="0">不开启</el-radio>
                                <el-radio :value="1">开启</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { formValidate, getArrValue } from 'js-fast-way'
import { onMounted, ref, watch } from 'vue'
import { getDictionaryData } from '~uti/tools'
import measureApi from '~api/measure/template'

//双向绑定
const modelData = defineModel('modelValue', {
    default: {},
})

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

//监听数据
const formModel = ref({})
watch(() => modelData.value, (data) => {
    data.radioType = data.radioType || '总里程'
    formModel.value = data
}, { immediate: true, deep: true })

//监听表单数据
watch(() => formModel.value, (data) => {
    modelData.value = data
}, { deep: true })

//表单
const formRef = ref(null)
const formRules = {
    projectName: { required: true, trigger: 'blur', message: '请输入项目名称' },
    projectAlias: { required: true, trigger: 'blur', message: '请输入项目别名' },
    planStartTime: { required: true, trigger: 'blur', message: '请选择计划开工日期' },
    actualStartTime: { required: true, trigger: 'blur', message: '请选择实际开工日期' },
    remarkType: { required: true, trigger: 'blur', message: '请选择电签类别' },
}

//公路等级
const highwayGradeList = ref([])
const getHighwayGradeList = async () => {
    highwayGradeList.value = await getDictionaryData('highway_grade')
}

//系统计量单元
const meterTemplateOption = ref([])
const getBusinessUserOpinion = async () => {
    const { data } = await measureApi.queryBusinessUserOpinionList()
    meterTemplateOption.value = getArrValue(data)
}

//验证表单
const isForm = async () => {
    return await formValidate(formRef.value)
}

defineExpose({
    isForm,
})
</script>