创建项目页面

src/views/project/admin/create.vue

@@ -1,12 +1,314 @@
 <template>
-    <div>创建项目</div>
+    <div class="hc-layout-box create-project">
+        <hc-card title="有标题的卡片" :scrollbar="true">
+            <template #header>
+                <div class="project-title">项目信息填写</div>
+            </template>
+            <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
+                <div class="hc-form-item">
+                    <el-form-item label="项目名称:" prop="key1">
+                        <el-input v-model="baseForm.key1" placeholder="请输入" clearable />
+                    </el-form-item>
+                    <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>
+                </div>
+                <div class="hc-form-item">
+                    <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>
+                    </el-form-item>
+                    <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>
+                    </el-form-item>
+                    <el-form-item label="开工年:" prop="key5">
+                        <el-date-picker
+                            v-model="baseForm.key5"
+                            type="year"
+                            placeholder="请选择"
+                        />
+                    </el-form-item>
+                    <el-form-item label="完工年:" prop="key6">
+                        <el-date-picker
+                            v-model="baseForm.key6"
+                            type="year"
+                            placeholder="请选择"
+                        />
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="牵头单位:" prop="key7">
+                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
+                    </el-form-item>
+                    <el-form-item label="配合单位:" prop="key8">
+                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
+                    </el-form-item>
+                    <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>
+                        </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 class="action-box">
+                    <el-button type="info" @click="addClick">
+                        <span class="text-white">取消</span>
+                    </el-button>
+                    <el-button color="#20C98B" type="primary" @click="addClick">
+                        <span class="text-white">创建</span>
+                    </el-button>
+                    <el-button type="warning" @click="addClick">
+                        <span class="text-white">保存</span>
+                    </el-button>
+                </div>
+            </el-form>
+        </hc-card>
+    </div>
 </template>
 
 <script setup>
+import { ref, watch } from 'vue'
+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([
+{
+    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 selectYear = ref('')
+
+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;
+}
+.year-detail{
+    padding: 40px;
+    height: 600px;
+}
+.quarter-box{
+    display: flex;
+    justify-content: space-around;
+    width: 80%;
+
+}
+.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>
 

src/views/project/ledger.vue

@@ -1,11 +1,89 @@
 <template>
-    <div>项目台账</div>
+    <div class="hc-layout-box">
+        <hc-card :scrollbar="true" action-size="lg" class="ledger-page">
+            <el-tabs
+                v-model="editableTabsValue"
+                type="card"
+                class="demo-tabs"
+            >
+                <template #add-icon>
+                    1111
+                </template>
+                <el-tab-pane
+                    key="1"
+                    label="项目资料"
+                    name="1"
+                />
+                <el-tab-pane
+                    key="2"
+                    class="tab-right"
+                    label="工作要点"
+                    name="2"
+                />
+            </el-tabs>
+        </hc-card>
+    </div>
 </template>
 
 <script setup>
+   import { ref, watch } from 'vue'
 
+const editableTabsValue = ref('2')
 </script>
 
 <style scoped lang="scss">
+   .hc-layout-box{
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
 
+}
+</style>
+
+<style>
+.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
+    width: 147px;
+    
+    border-color: rgb(187, 187, 187);
+    border-width: 1px 0px 1px 1px;
+    border-style: solid;
+    font-size: 14px;
+    padding: 0px;
+    text-align: center;
+    line-height: 20px;
+    font-weight: bold;
+    background: rgb(32, 201, 139);
+    color:white;
+    font-size: larger;
+}
+.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__nav{
+    border:none;
+}
+.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__item{
+    width: 147px;
+    
+    border-color: rgb(187, 187, 187);
+
+    border-style: solid;
+    font-size: 14px;
+    padding: 0px;
+    text-align: center;
+    line-height: 20px;
+    font-weight: bold;
+    background:#F9F9F9;
+    color:black;
+    font-size: larger;
+}
+.ledger-page .el-tabs--card>.el-tabs__header #tab-2{
+    border-radius: 0px 10px 0px 0px;
+}
+.ledger-page .el-tabs--card>.el-tabs__header #tab-1{
+        border-radius: 10px 0px 0px;
+}
 </style>