|
|
@@ -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>
|
|
|
|
