工作重点创建

src/views/project/admin/create.vue

@@ -151,13 +151,13 @@
                     </hc-card>
                 </div>
                 <div class="action-box">
-                    <el-button type="info" @click="addClick">
+                    <el-button type="info">
                         <span class="text-white">取消</span>
                     </el-button>
-                    <el-button color="#20C98B" type="primary" @click="addClick">
+                    <el-button color="#20C98B" type="primary">
                         <span class="text-white">创建</span>
                     </el-button>
-                    <el-button type="warning" @click="addClick">
+                    <el-button type="warning">
                         <span class="text-white">保存</span>
                     </el-button>
                 </div>

src/views/project/gist/create.vue

@@ -1,12 +1,208 @@
 <template>
-    <div>创建工作要点</div>
+    <div class="hc-layout-box create-tips">
+        <hc-card title="有标题的卡片" :scrollbar="true">
+            <template #header>
+                <div class="project-title">工作重点填写</div>
+            </template>
+            <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules" label-position="left">
+                <div class="hc-form-item">
+                    <el-form-item label="选择项目项目阶段:" prop="key1">
+                        <el-select
+                            v-model="baseForm.key1"
+                            placeholder="请选择"
+                        >
+                            <el-option
+                                v-for="item in stateOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div class="hc-form-item">
+                    <el-form-item label="目标任务:" prop="key2">
+                        <el-input v-model="baseForm.key2" placeholder="请输入" clearable type="textarea" />
+                    </el-form-item>
+                </div>
+                <div v-for="(item, index) in yearDetails" :key="index" class="year-detail">
+                    <hc-card>
+                        <el-form :inline="true" :model="item" label-width="auto" :rules="yearFormRules" class="mt-3" label-position="left">
+                            <div class="hc-form-item">
+                                <el-form-item label="选择年份:" prop="key1">
+                                    <el-date-picker
+                                        v-model="item.key1"
+                                        type="year"
+                                        range
+                                        placeholder="开始年份"
+                                    />
+                                    <span>-</span>
+                                    <el-date-picker
+                                        v-model="item.key2"
+                                        type="year"
+                                        range
+                                        placeholder="结束年份"
+                                    />
+                                </el-form-item>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="工作任务:" prop="key3">
+                                    <el-input v-model="item.key3" placeholder="请输入" clearable type="textarea" />
+                                </el-form-item>
+                            </div>
+                            <div class="hc-form-item">
+                                <el-form-item label="责任单位:" prop="key4">
+                                    <el-input v-model="item.key4" placeholder="请输入" clearable />
+                                </el-form-item>
+                            </div>
+                        </el-form>
+                    </hc-card>
+                    <div>
+                        <div>
+                            <el-button @click="addYearDeatil(item, index)">
+                                +
+                            </el-button>
+                        </div>
+                        <div>
+                            <el-button @click="deleteYearDeatil(item, index)">
+                                -
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+            </el-form>
+            <div class="action-box">
+                <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>
+            </div>
+        </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: '请选择项目阶段',
+    },
+    key2: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入目标任务',
+    },
+    key4: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择项目类型',
+    },
+    role: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择角色',
+    },
+}
+//项目阶段
+const stateOptions = ref([
+{
+    value: '1',
+    label: '紧盯重大项目，推动交通投资稳进',
+  },
+  {
+    value: '2',
+    label: '深化战略研究，优化交通规划体系',
+  },
+  {
+    value: '3',
+    label: '锚定战略目标，强化交通支撑引领作用',
+  },
+])
 
+
+const yearFormRules = {
+    key1: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择年份',
+    },
+
+}
+//增加年份数据
+const yearDetails = ref([
+    {
+        key1:'',
+        key2: '',
+        key3:'',
+        key4:'',
+    
+    },
+])
+const addYearDeatil = (item, index)=>{
+    yearDetails.value.splice(index, 0, {
+        key1:'',
+        key2: '',
+        key3:'',
+        key4:'',
+    })
+   
+}
+const deleteYearDeatil = (item, index)=>{
+    console.log(yearDetails.value)
+    yearDetails.value.splice( index, 1)
+}
 </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: 280px;
+    display: flex;
+
+}
+.action-box{
+ 
+ text-align: center;
+ width: 100%;
+}
+</style>
 
+<style>
+.create-tips .el-card.hc-card-box.hc-new-card-box .hc-card-header-box{
+    justify-content: center;
+}
+.create-tips .el-card.hc-card-box.hc-new-card-box .hc-card-header-box .hc-card-header{
+    flex:none
+}
 </style>