|
|
@@ -1,14 +1,16 @@
|
|
|
<template>
|
|
|
- <div class="hc-layout-box create-project">
|
|
|
- <hc-card title="有标题的卡片" :scrollbar="true" is-action-btn>
|
|
|
- <template #header>
|
|
|
- <div class="project-title">项目信息填写</div>
|
|
|
- </template>
|
|
|
- <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
|
|
|
- <div class="hc-form-item">
|
|
|
+ <hc-card scrollbar is-action-btn class="create-project">
|
|
|
+ <template #header>
|
|
|
+ <div class="text-[24px] font-bold">项目信息填写</div>
|
|
|
+ </template>
|
|
|
+ <el-form :model="baseForm" label-width="auto" :rules="baseFormRules">
|
|
|
+ <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>
|
|
|
@@ -19,168 +21,116 @@
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- </div>
|
|
|
- <div class="hc-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.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
+ <el-select v-model="baseForm.key3" placeholder="请选择">
|
|
|
+ <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</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.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
+ <el-select v-model="baseForm.key4" placeholder="请选择">
|
|
|
+ <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
<el-form-item label="开工年:" prop="key5">
|
|
|
- <el-date-picker
|
|
|
- v-model="baseForm.key5"
|
|
|
- type="year"
|
|
|
- placeholder="请选择"
|
|
|
- />
|
|
|
+ <el-date-picker v-model="baseForm.key5" class="block" type="year" placeholder="请选择" />
|
|
|
</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
<el-form-item label="完工年:" prop="key6">
|
|
|
- <el-date-picker
|
|
|
- v-model="baseForm.key6"
|
|
|
- type="year"
|
|
|
- placeholder="请选择"
|
|
|
- />
|
|
|
+ <el-date-picker v-model="baseForm.key6" class="block" type="year" placeholder="请选择" />
|
|
|
</el-form-item>
|
|
|
- </div>
|
|
|
- <div class="hc-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>
|
|
|
- </div>
|
|
|
- <div class="year-detail">
|
|
|
- <hc-card>
|
|
|
- <div class="text-center">
|
|
|
- <el-select
|
|
|
- v-model="selectYear"
|
|
|
- placeholder="选择年份"
|
|
|
- style="width: 250px;"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in yearOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ </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">
|
|
|
+ <el-form-item label="全年计划投资:" prop="key1" class="w-100">
|
|
|
+ <el-input v-model="yearForm.key1" placeholder="请输入" clearable>
|
|
|
+ <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>
|
|
|
+ <template #prepend>一季度</template>
|
|
|
+ <template #append>亿元</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="ml-[40px] flex">
|
|
|
+ <el-input v-model="yearForm.key3" placeholder="请输入" clearable>
|
|
|
+ <template #prepend>二季度</template>
|
|
|
+ <template #append>亿元</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="ml-[40px] flex">
|
|
|
+ <el-input v-model="yearForm.key4" placeholder="请输入" clearable>
|
|
|
+ <template #prepend>三季度</template>
|
|
|
+ <template #append>亿元</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="ml-[40px] flex">
|
|
|
+ <el-input v-model="yearForm.key5" placeholder="请输入" clearable>
|
|
|
+ <template #prepend>四季度</template>
|
|
|
+ <template #append>亿元</template>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
- <el-form :inline="true" :model="yearForm" label-width="auto" :rules="yearFormRules" class="mt-3" label-position="left">
|
|
|
- <div class="hc-form-item w-100">
|
|
|
- <el-form-item label="全年计划投资:" prop="key1">
|
|
|
- <el-input v-model="yearForm.key1" placeholder="请输入" clearable>
|
|
|
- <template #append>亿元</template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="hc-form-item">
|
|
|
- <el-form-item label="预计完成投资额:" prop="key1">
|
|
|
- <div class="quarter-box">
|
|
|
- <div class="flex">
|
|
|
- <span class="form-text">一季度</span>
|
|
|
- <el-input v-model="yearForm.key2" placeholder="请输入" clearable>
|
|
|
- <template #append>亿元</template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="ml-4 flex">
|
|
|
- <span class="form-text">二季度</span>
|
|
|
- <el-input v-model="yearForm.key3" placeholder="请输入" clearable>
|
|
|
- <template #append>亿元</template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="ml-4 flex">
|
|
|
- <span class="form-text">三季度</span>
|
|
|
- <el-input v-model="yearForm.key4" placeholder="请输入" clearable>
|
|
|
- <template #append>亿元</template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="ml-4 flex">
|
|
|
- <span class="form-text">四季度</span>
|
|
|
- <el-input v-model="yearForm.key5" placeholder="请输入" clearable>
|
|
|
- <template #append>亿元</template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="hc-form-item">
|
|
|
- <el-form-item label="全年目标:" prop="key6">
|
|
|
- <el-input v-model="yearForm.key6" placeholder="请输入" clearable type="textarea" />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="hc-form-item">
|
|
|
- <el-form-item label="各季度工作计划:" />
|
|
|
- </div>
|
|
|
- <div class="flex">
|
|
|
- <span class="form-text">一季度：</span> <el-input v-model="yearForm.key7" placeholder="请输入" clearable type="textarea" />
|
|
|
- </div>
|
|
|
- <div class="mt-2 flex">
|
|
|
- <span class="form-text">二季度：</span> <el-input v-model="yearForm.key8" placeholder="请输入" clearable type="textarea" />
|
|
|
- </div>
|
|
|
- <div class="mt-2 flex">
|
|
|
- <span class="form-text">三季度：</span> <el-input v-model="yearForm.key9" placeholder="请输入" clearable type="textarea" />
|
|
|
- </div>
|
|
|
- <div class="mt-2 flex">
|
|
|
- <span class="form-text">四季度：</span> <el-input v-model="yearForm.key10" placeholder="请输入" clearable type="textarea" />
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </hc-card>
|
|
|
- </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>
|
|
|
- <template #action>
|
|
|
- <el-button type="info">
|
|
|
- <span class="text-white">取消</span>
|
|
|
- </el-button>
|
|
|
- <el-button color="#20C98B" type="primary">
|
|
|
- <span class="text-white">创建</span>
|
|
|
- </el-button>
|
|
|
- <el-button type="warning">
|
|
|
- <span class="text-white">保存</span>
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </hc-card>
|
|
|
- </div>
|
|
|
+ <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="key10">
|
|
|
+ <el-input v-model="yearForm.key10" placeholder="请输入" clearable type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </hc-card-item>
|
|
|
+ <template #action>
|
|
|
+ <el-button type="info">取消</el-button>
|
|
|
+ <el-button color="#20C98B" type="primary" class="text-white">创建</el-button>
|
|
|
+ <el-button type="warning">保存</el-button>
|
|
|
+ </template>
|
|
|
+ </hc-card>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch } from 'vue'
|
|
|
-const baseForm = ref({
|
|
|
- key1:'',
|
|
|
- key2: '',
|
|
|
- key3:'',
|
|
|
- key4:'',
|
|
|
- key5:'',
|
|
|
- key6:'',
|
|
|
- key7:'',
|
|
|
- key8:'',
|
|
|
- key9:'',
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
+import { ref } from 'vue'
|
|
|
+const baseForm = ref({ key1:'', key2: '', key3:'', key4:'', key5:'', key6:'', key7:'', key8:'', key9:'' })
|
|
|
const baseFormRules = {
|
|
|
key1: {
|
|
|
required: true,
|
|
|
@@ -204,111 +154,51 @@ const baseFormRules = {
|
|
|
},
|
|
|
}
|
|
|
const unitSelect = ref('')
|
|
|
+
|
|
|
//项目阶段
|
|
|
-const stateOptions = ref([
|
|
|
-{
|
|
|
- value: '1',
|
|
|
- label: '新开工项目',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2',
|
|
|
- label: '建成项目',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '3',
|
|
|
- label: '在建项目',
|
|
|
- },
|
|
|
+const stateOptions = ref([{ value: '1', label: '新开工项目' }, { value: '2', label: '建成项目' }, { value: '3', label: '在建项目' }])
|
|
|
|
|
|
-])
|
|
|
//项目类型
|
|
|
+const typeOptions = ref([{ value: '1', label: '铁路' }, { value: '2', label: '高速公路' }, { value: '3', label: '在建项目' }])
|
|
|
|
|
|
-const typeOptions = ref([
|
|
|
-{
|
|
|
- value: '1',
|
|
|
- label: '铁路',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2',
|
|
|
- label: '高速公路',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '3',
|
|
|
- label: '在建项目',
|
|
|
- },
|
|
|
-
|
|
|
-])
|
|
|
//选择年份
|
|
|
-const yearOptions = ref([
|
|
|
-{
|
|
|
- value: '2021',
|
|
|
- label: '2021',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2022',
|
|
|
- label: '2022',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2023',
|
|
|
- label: '2023',
|
|
|
- },
|
|
|
-])
|
|
|
+const yearOptions = ref([{ value: '2021', label: '2021' }, { value: '2022', label: '2022' }, { value: '2023', label: '2023' }])
|
|
|
const selectYear = ref('')
|
|
|
|
|
|
-const yearForm = ref({
|
|
|
- key1:'',
|
|
|
- key2: '',
|
|
|
- key3:'',
|
|
|
- key4:'',
|
|
|
- key5:'',
|
|
|
- key6:'',
|
|
|
- key7:'',
|
|
|
- key8:'',
|
|
|
- key9:'',
|
|
|
-})
|
|
|
-const yearFormRules = {
|
|
|
-
|
|
|
-}
|
|
|
+const yearForm = ref({ key1:'', key2: '', key3:'', key4:'', key5:'', key6:'', key7:'', key8:'', key9:'' })
|
|
|
+const yearFormRules = {}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
-.hc-layout-box{
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.project-title{
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
+<style lang="scss">
|
|
|
+.create-project .el-card .el-card__body .hc-card-main-body {
|
|
|
+ padding: 14px;
|
|
|
+ .el-scrollbar__bar.is-vertical {
|
|
|
+ right: -16px;
|
|
|
+ }
|
|
|
}
|
|
|
-.year-detail{
|
|
|
- padding: 40px;
|
|
|
- height: 600px;
|
|
|
+.hc-card-item-box.year-detail {
|
|
|
+ padding: 20px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ .hc-card-item-header {
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ .item-header {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-form-item-title {
|
|
|
+ position: relative;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
-.quarter-box{
|
|
|
- display: flex;
|
|
|
+.quarter-box {
|
|
|
+ position: relative;
|
|
|
justify-content: space-around;
|
|
|
- width: 80%;
|
|
|
-
|
|
|
}
|
|
|
-.form-text{
|
|
|
+.form-text {
|
|
|
white-space: nowrap;
|
|
|
color:var(--el-text-color-regular) ;
|
|
|
font-size: var(--el-form-label-font-size);
|
|
|
}
|
|
|
-.action-box{
|
|
|
-
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-<style>
|
|
|
-.create-project .el-card.hc-card-box.hc-new-card-box .hc-card-header-box{
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-.create-project .el-card.hc-card-box.hc-new-card-box .hc-card-header-box .hc-card-header{
|
|
|
- flex:none
|
|
|
-}
|
|
|
</style>
|
|
|
-
|
