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

<template>
    <hc-card scrollbar is-action-btn class="create-project">
        <template #header>
            <div class="flex-1 text-center text-[24px] font-bold">项目信息填写</div>
        </template>
        <el-form :model="baseForm" label-width="auto" :rules="baseFormRules" size="large">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="项目名称:" prop="key1">
                        <el-input v-model="baseForm.key1" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="建设规模:" prop="key2">
                        <el-input v-model="baseForm.key2" placeholder="请输入" clearable>
                            <template #append>
                                <el-select v-model="unitSelect" placeholder="单位" style="width: 80px">
                                    <el-option label="公里" value="1" />
                                    <el-option label="无" value="2" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目阶段:" prop="key3">
                        <el-select v-model="baseForm.key3" placeholder="请选择">
                            <el-option v-for="item in stateOptions" :key="item.id" :label="item.dictValue" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目类型:" prop="key4">
                        <el-select v-model="baseForm.key4" placeholder="请选择">
                            <el-option v-for="item in typeOptions" :key="item.id" :label="item.dictValue" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="开工年:" prop="key5">
                        <el-date-picker ref="startYearRef" v-model="baseForm.key5" class="block" type="year" placeholder="请选择" value-format="YYYY" @change="startYearChange" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="完工年:" prop="key6">
                        <el-date-picker ref="endYearRef" v-model="baseForm.key6" class="block" type="year" placeholder="请选择" value-format="YYYY" @change="endYearChange" @blur="endYearBlur" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="牵头单位:" prop="key7">
                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="配合单位:" prop="key8">
                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任单位:" prop="key9">
                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <hc-card-item class="year-detail mt-3">
            <template #header>
                <el-select v-model="selectYear" placeholder="选择年份" class="select-year w-[100px]">
                    <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </template>
            <el-form :model="yearForm" label-width="auto" :rules="yearFormRules" class="mt-3" label-position="left" size="large">
                <el-form-item label="全年计划投资:" prop="key1" class="w-100">
                    <el-input
                        v-model="yearForm.key1" placeholder="请输入" clearable
                        :formatter="formatInput"
                    >
                        <template #append>亿元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="预计完成投资额:" prop="key1">
                    <div class="quarter-box w-full flex">
                        <div class="flex">
                            <el-input v-model="yearForm.key2" placeholder="请输入" clearable :formatter="formatInput">
                                <template #prepend>一季度</template>
                                <template #append>亿元</template>
                            </el-input>
                        </div>
                        <div class="ml-[40px] flex">
                            <el-input v-model="yearForm.key3" placeholder="请输入" clearable :formatter="formatInput">
                                <template #prepend>二季度</template>
                                <template #append>亿元</template>
                            </el-input>
                        </div>
                        <div class="ml-[40px] flex">
                            <el-input v-model="yearForm.key4" placeholder="请输入" clearable :formatter="formatInput">
                                <template #prepend>三季度</template>
                                <template #append>亿元</template>
                            </el-input>
                        </div>
                        <div class="ml-[40px] flex">
                            <el-input v-model="yearForm.key5" placeholder="请输入" clearable :formatter="formatInput">
                                <template #prepend>四季度</template>
                                <template #append>亿元</template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="全年目标:" prop="key6">
                    <el-input v-model="yearForm.key6" placeholder="请输入" clearable type="textarea" />
                </el-form-item>
            </el-form>
            <el-form :model="yearForm" label-width="auto" :rules="yearFormRules" class="mt-3" label-position="left">
                <div class="hc-form-item-title">各季度工作计划:</div>
                <el-form-item label="一季度:" prop="key7">
                    <el-input v-model="yearForm.key7" placeholder="请输入" clearable type="textarea" />
                </el-form-item>
                <el-form-item label="二季度:" prop="key8">
                    <el-input v-model="yearForm.key8" placeholder="请输入" clearable type="textarea" />
                </el-form-item>
                <el-form-item label="三季度:" prop="key8">
                    <el-input v-model="yearForm.key8" placeholder="请输入" clearable type="textarea" />
                </el-form-item>
                <el-form-item label="四季度:" prop="key10">
                    <el-input v-model="yearForm.key10" placeholder="请输入" clearable type="textarea" />
                </el-form-item>
            </el-form>
        </hc-card-item>
        <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 { computed, onMounted, ref, watch } from 'vue'
import { isNullES } from 'js-fast-way'
import { getDictionary } from '~api/dictbiz'
   import { arrToKey, formValidate, getArrValue, getObjValue, isArrItem } from 'js-fast-way'

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)
    getProStation()
    getProType()
})

const baseForm = ref({ key1:'', key2: '', key3:'', key4:'', key5:'', key6:'', key7:'', key8:'', key9:'' })
const baseFormRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: '请输入项目名称',
    },
    key3: {
        required: true,
        trigger: 'blur',
        message: '请选择项目阶段',
    },
    key4: {
        required: true,
        trigger: 'blur',
        message: '请选择项目类型',
    },
    role: {
        required: true,
        trigger: 'blur',
        message: '请选择角色',
    },
}
const unitSelect = ref('')

//项目阶段
const stateOptions = ref([])

const getProStation = async () => {
    const { error, code, data } = await getDictionary({ code:'projectStage' })
        if (!error && code === 200) {
            stateOptions.value = getArrValue(data) 
        } else {
            stateOptions.value = []
        }   
    
}
//项目类型
const typeOptions = ref([])
const getProType = async () => {
    const { error, code, data } = await getDictionary({ code:'projectType' })
        if (!error && code === 200) {
            typeOptions.value = getArrValue(data)
        } else {
            typeOptions.value = []
        }   
    
  }
  const endYearRef = ref(null)
  const startYearRef = ref(null)
//开始年
const startYearChange = (val) => {
    baseForm.value.key5 = val
    endYearRef.value?.focus()
    endYearRef.value?.handleOpen()
    startYearRef.value?.handleClose()
}

//结束年
const endYearChange = (val) => {
    if (isNullES(val)) {
        baseForm.value.key5 = ''
    }
    baseForm.value.key6 = val

}
//失去焦点
const endYearBlur = () => {
    if (isNullES(baseForm.value.key5) || isNullES(baseForm.value.key6)) {
        baseForm.value.key5 = ''
        baseForm.value.key6 = ''
        window.$message.warning('请重新选择完整的范围年份')
    } 

  let years = []
  let startYear = baseForm.value.key5
  let endYear = baseForm.value.key6
  for (let year = startYear; year <= endYear; year++) {
    years.push(
        {
            value:year,
            label:year,
        },
    )
  }
  yearOptions.value = years
}
//选择年份
const yearOptions = ref([])
const selectYear = ref('')

const yearForm = ref({ key1:'', key2: '', key3:'', key4:'', key5:'', key6:'', key7:'', key8:'', key9:'', key10:'' })
const yearFormRules = {}
const formatInput = (value)=>{
  // 如果输入为空，则直接返回空字符串
  if (!value) {
        return ''
      }
      // 使用正则表达式匹配输入是否合法
      const regExp = /^\d+(\.\d{0,2})?$/
      if (regExp.test(value)) {
        return value // 如果输入合法，则返回原始值
      } else {
        // 如果输入不合法，则移除非法字符，并返回处理后的值
        return value.slice(0, -1)
      } 
}


//监听
watch(() => [
yearForm.value.key2,
yearForm.value.key3,
yearForm.value.key4,
yearForm.value.key5,
], ([key2, key3, key4, key5]) => {
    yearForm.value.key1 = Number(key2) + Number(key3) + Number(key4) + Number(key5)
},
{ immediate:true }),
{ deep:true }


//取消
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">
.create-project .el-card .el-card__body .hc-card-main-body {
    padding: 14px;
    .el-scrollbar__bar.is-vertical {
        right: -16px;
    }
}
.hc-card-item-box.year-detail {
    padding: 20px;
    background: #f7f7f7;
    border-radius: 5px;
    .hc-card-item-header {
        border-bottom: 1px solid #ecebeb;
        padding-bottom: 16px;
        .item-header {
            justify-content: center;
        }
    }
    .hc-form-item-title {
        position: relative;
        padding: 10px 0;
        margin-bottom: 14px;
    }
}
.quarter-box {
    position: relative;
    justify-content: space-around;
}
.form-text {
    white-space: nowrap;
    color:var(--el-text-color-regular) ;
    font-size: var(--el-form-label-font-size);
}
</style>