Browse Source

修改的一版,细节待优化

yls 1 year ago
parent
commit
d9402ecf18

BIN
src/assets/imgs/0531/上传.png


BIN
src/assets/imgs/0531/地图.png


BIN
src/assets/imgs/0531/头像.png


BIN
src/assets/imgs/0531/标题装饰.png


BIN
src/assets/imgs/0531/缩放.png


+ 83 - 32
src/assets/styles/index.scss

@@ -39,7 +39,7 @@ ul,li {
 .list-detail {
   height: 100%;
   header {
-    height: 150px;
+    height: 10px;
     margin-bottom: 0;  /* 取消与下一个兄弟元素之间的距离 */
     background-color: var(--color-1);
     display: flex;
@@ -70,47 +70,98 @@ ul,li {
     }
   }
   main {
-    height: calc(100% - 170px);
+    height: calc(100% - 50px);
     background-color: var(--color-1);
     box-sizing: border-box;
     padding: 20px;
-    .el-table {
-      height: calc(100% - 60px);
-    }
-    .el-form-item {
+    .detail-main {
       box-sizing: border-box;
-      width: 30.75%;
-      margin-bottom: 25px;
-      &:not(:nth-child(4n)) {
-        margin-right: 15%;
+      width: calc(100% - 60px);
+      height: calc(100% - 70px);
+      margin: 35px 25px 35px 35px;
+      padding-right: 10px;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+    }
+  }
+
+}
+//详情页小标题
+.detail-sub-title {
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  font-family: YSBTH;
+  font-style: italic;
+  color: #585858;
+  margin-bottom: 20px;
+  &::before {
+    display: block;
+    content: '';
+    width: 7px;
+    height: 7px;
+    margin-right: 8px;
+    background: #00B368;
+  }
+}
+
+//详情页底部操作栏
+.button-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background-color: #fff;
+  box-shadow: 2px 0px 4px rgb(0 0 0 / 20%);
+  text-align: center;
+  &>button {
+    margin: 15px 10px 0;
+  }
+}
+
+// 详情页一般表单样式
+.form-detail {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  .el-form-item {
+    box-sizing: border-box;
+    width: 22.75%;
+    margin-bottom: 25px;
+    &:not(:nth-child(4n)) {
+      margin-right: 3%;
+    }
+    .el-form-item__label {
+      margin-bottom: 13px !important;
+      font-size: 16px;
+      color: var(--text-color-4);
+    }
+    &:not(.item-row) .el-form-item__content {
+      height: 36px;
+      div {
+        width: 100%;
+        height: 100%;
       }
-      .el-form-item__label {
-        margin-bottom: 13px !important;
+      .el-input__inner {
         font-size: 16px;
-        color: var(--text-color-4);
       }
-      &:not(.item-row) .el-form-item__content {
-        height: 36px;
-        div {
-          width: 100%;
-          height: 100%;
-        }
-        .el-input__inner {
-          font-size: 16px;
-        }
-      }
-      .el-date-editor>.el-input__wrapper {
-        width: 94% !important;
-      }
-      &.item-row {
-        width: 100%;
-        margin-right: 0;
-        .el-textarea__inner {
-          font-size: 16px;
-        }
+    }
+    .el-date-editor>.el-input__wrapper {
+      width: 94% !important;
+    }
+    &.item-row {
+      width: 100%;
+      margin-right: 0;
+      .el-textarea__inner {
+        font-size: 16px;
       }
     }
   }
+
 }
 // 详情页标题
 .detail-part-title {

+ 6 - 0
src/router/index.js

@@ -22,6 +22,12 @@ const router = createRouter({
           component: () => import('../views/zjdlx/Detail.vue'),
           meta: { menuId: '2-1' },
         },
+        {
+          path: 'homestead_selectionCheck',
+          name: 'HomesteadSelectionCheck',
+          component: () => import('../views/zjdlx/Check.vue'),
+          meta: { menuId: '2-1' },
+        },
       ]
     }
   ]

+ 278 - 0
src/views/zjdlx/Check.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class="list-detail">
+        <header>
+            <div class="header-row">
+                <h1>审核项目</h1>
+            </div>
+            <img src="../../assets/imgs/0531/标题装饰.png" alt="">
+        </header>
+        <main>
+            <div class="detail-main">
+                <el-tabs  v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="card">
+                    <el-tab-pane name="first">
+                        <template #label>
+                           <span class="custom-tabs-label">
+                              <img src="../../assets/imgs/0531/项目信息-未选中.png" v-if="activeName !== 'first'" alt="">
+                              <img src="../../assets/imgs/0531/项目信息-选中.png" v-if="activeName === 'first'" alt="">
+                              <span> 项目信息</span>
+                           </span>
+                        </template>
+                        <el-row :gutter="24">
+                            <el-col :span="7" class="card-descriptions">
+                                <el-card shadow="never">
+                                    <el-descriptions title="" :column="1"  direction="vertical" >
+                                        <el-descriptions-item label="项目名称:">XXXXXXXX项目</el-descriptions-item>
+                                        <el-descriptions-item label="年份:">2023</el-descriptions-item>
+                                        <el-descriptions-item label="行业领域:">蔬菜</el-descriptions-item>
+                                        <el-descriptions-item label="所属街镇:">中兴镇</el-descriptions-item>
+                                        <el-descriptions-item label="建设周期(月):">2</el-descriptions-item>
+                                        <el-descriptions-item label="建设规模(亩):">52</el-descriptions-item>
+                                        <el-descriptions-item label="建设用地性质:">农用地</el-descriptions-item>
+                                        <el-descriptions-item label="实施地址:">崇明区江南镇XXXXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="建设内容:">xxxxxxxxxxxxxxxxxxxxxxxxxx</el-descriptions-item>
+                                    </el-descriptions>
+                                </el-card>
+                            </el-col>
+                            <el-divider direction="vertical" border-style="dashed" />
+                            <el-col :span="7" class="card-descriptions">
+                                <el-card shadow="never">
+                                    <el-descriptions title="" :column="1"  direction="vertical" >
+                                        <el-descriptions-item label="总投资:">XXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="中央(万元):">2023</el-descriptions-item>
+                                        <el-descriptions-item label="市级(万元):">XXXXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="区级(万元):">XXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="镇级(万元):">XXXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="自筹(万元):">XXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="二类(万元):">XXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="乡镇负责人:">XXXXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="乡镇负责人联系方式:">XXXXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="实施单位负责人:">XXXXXXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="实施单位负责人联系方式:">XXXXXXXXXX</el-descriptions-item>
+                                    </el-descriptions>
+                                </el-card>
+                            </el-col>
+                            <el-divider direction="vertical" border-style="dashed" />
+                            <el-col :span="7" class="card-descriptions">
+                                <el-card shadow="never">
+                                    <el-descriptions title="" :column="1"  direction="vertical" >
+                                        <el-descriptions-item label="项目单位净资产是否符合申报要求:">是</el-descriptions-item>
+                                        <el-descriptions-item label="是否符合区域内农业有关规划:">是</el-descriptions-item>
+                                        <el-descriptions-item label="有无市级财政扶持的在建项目:">是</el-descriptions-item>
+                                        <el-descriptions-item label="项目批复文号:">XXXXXX</el-descriptions-item>
+                                        <el-descriptions-item label="项目位置:">
+                                            <img src="../../assets/imgs/0531/地图.png" width="200" height="160" alt="">
+                                        </el-descriptions-item>
+
+                                    </el-descriptions>
+                                </el-card>
+                            </el-col>
+                        </el-row>
+                    </el-tab-pane>
+                    <el-tab-pane name="second">
+                        <template #label>
+                            <span class="custom-tabs-label">
+                              <img src="../../assets/imgs/0531/单位信息-未选中.png" v-if="activeName !== 'second'" alt="">
+                              <img src="../../assets/imgs/0531/单位信息-选中.png" v-if="activeName === 'second'" alt="">
+                              <span> 单位信息</span>
+                            </span>
+                        </template>
+                    </el-tab-pane>
+                </el-tabs>
+                <div class="detail-sub-title">附件信息</div>
+                <el-col :span="24" class="card-shadow">
+                    <el-card shadow="never" style=" margin: 20px auto;">
+                        <el-row :gutter="24">
+                            <el-col :span="4">
+                                <img src="../../assets/imgs/0531/pdf.png" alt="" width="60" height="61">
+                            </el-col>
+                            <el-col :span="16">
+                                <el-descriptions title="" :column="1">
+                                    <el-descriptions-item label="文件名称:">1.20230419总汇:崇明区新村乡食用菌生产基地建设项目pdf</el-descriptions-item>
+                                    <el-descriptions-item label="文件类型:">项目初步设计报告文本</el-descriptions-item>
+                                    <el-descriptions-item label="上传时间:">2023-04-19</el-descriptions-item>
+                                </el-descriptions>
+                            </el-col>
+                            <el-col :span="4">
+                                <el-button class="btn-default">预览</el-button>
+                                <el-button class="btn-default">下载</el-button>
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                    <el-card shadow="never" style=" margin: 20px auto;">
+                        <el-row :gutter="24">
+                            <el-col :span="4">
+                                <img src="../../assets/imgs/0531/pdf.png" alt="" width="60" height="61">
+                            </el-col>
+                            <el-col :span="16">
+                                <el-descriptions title="" :column="1">
+                                    <el-descriptions-item label="文件名称:">22上年度审计报告.pdf</el-descriptions-item>
+                                    <el-descriptions-item label="文件类型:">上年度审计报告</el-descriptions-item>
+                                    <el-descriptions-item label="上传时间:">2023-04-19</el-descriptions-item>
+                                </el-descriptions>
+                            </el-col>
+                            <el-col :span="4">
+                                <el-button class="btn-default">预览</el-button>
+                                <el-button class="btn-default">下载</el-button>
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                    <el-card shadow="never" style=" margin: 20px auto;">
+                        <el-row :gutter="24">
+                            <el-col :span="4">
+                                <img src="../../assets/imgs/0531/Microsoft-Excel.png" alt="" width="60" height="61">
+                            </el-col>
+                            <el-col :span="16">
+                                <el-descriptions title="" :column="1">
+                                    <el-descriptions-item label="文件名称:">3.2慧聪投资估算表V6-20230419(1).xlsx</el-descriptions-item>
+                                    <el-descriptions-item label="文件类型:">投资估算表(excel)</el-descriptions-item>
+                                    <el-descriptions-item label="上传时间:">2023-04-19</el-descriptions-item>
+                                </el-descriptions>
+                            </el-col>
+                            <el-col :span="4">
+                                <el-button class="btn-default">预览</el-button>
+                                <el-button class="btn-default">下载</el-button>
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                </el-col>
+                <div class="detail-sub-title">流程信息</div>
+                    <el-card shadow="always" style=" margin: 20px auto;">
+                    <el-row :gutter="24">
+                        <el-col :span="2">
+                            <img src="../../assets/imgs/0531/头像.png" alt="" width="60" height="61">
+                        </el-col>
+                        <el-col :span="4">
+                            <el-row>
+                                <h3>王文</h3>
+                            </el-row>
+                            <h8>区农委产业科</h8>
+                        </el-col>
+                        <el-col :span="14">
+                            <el-descriptions title="" :column="1" >
+                                <el-descriptions-item label="接收人:">李二</el-descriptions-item>
+                                <el-descriptions-item label="审核时间:">2023-05-31  08:28:45 【流程审核】</el-descriptions-item>
+                                <el-descriptions-item label="审核备注:">XXXXXXXXX</el-descriptions-item>
+                            </el-descriptions>
+                        </el-col>
+                    </el-row>
+                </el-card>
+                    <el-card shadow="always" style=" margin: 20px auto;">
+                    <el-row :gutter="24">
+                        <el-col :span="2">
+                            <img src="../../assets/imgs/0531/头像.png" alt="" width="60" height="61">
+                        </el-col>
+                        <el-col :span="4">
+                            <el-row>
+                                <h3>王文</h3>
+                            </el-row>
+                            <h8>区农委产业科</h8>
+                        </el-col>
+                        <el-col :span="14">
+                            <el-descriptions title="" :column="1" >
+                                <el-descriptions-item label="接收人:">李二</el-descriptions-item>
+                                <el-descriptions-item label="审核时间:">2023-05-31  08:28:45 【流程审核】</el-descriptions-item>
+                                <el-descriptions-item label="审核备注:">XXXXXXXXX</el-descriptions-item>
+                            </el-descriptions>
+                        </el-col>
+                    </el-row>
+                </el-card >
+                    <el-card shadow="always" style=" margin: 20px auto;">
+                        <el-row :gutter="24">
+                            <el-col :span="2">
+                                <img src="../../assets/imgs/0531/头像.png" alt="" width="60" height="61">
+                            </el-col>
+                            <el-col :span="4">
+                                <el-row>
+                                    <h3>王文</h3>
+                                </el-row>
+                                <h8>区农委产业科</h8>
+                            </el-col>
+                            <el-col :span="14">
+                                <el-descriptions title="" :column="1" >
+                                    <el-descriptions-item label="接收人:">李二</el-descriptions-item>
+                                    <el-descriptions-item label="审核时间:">2023-05-31  08:28:45 【流程审核】</el-descriptions-item>
+                                    <el-descriptions-item label="审核备注:">XXXXXXXXX</el-descriptions-item>
+                                </el-descriptions>
+                            </el-col>
+                            <el-col :span="4">
+                                <img src="../../assets/imgs/0531/审核通过.png" alt="" heignt="80" width="80" class="stamp">
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                <div class="detail-sub-title">审核信息</div>
+                <el-form :model="form.basicInfo"  :rules="formRules.basicInfo" label-position="top" ref="basicInfo" class="form-detail">
+                    <el-form-item label="审核意见" prop="constructionContent" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.basicInfo.constructionContent" placeholder="请输入审核建议"></el-input>
+                    </el-form-item>
+                </el-form>
+                <div style="text-align: center;">
+                    <el-button type="primary" class="button-detail">审核通过</el-button>
+                    <el-button type="danger" class="button-detail">审核不通过</el-button>
+                    <el-button class="button-detail" @click="close">返 回</el-button>
+                </div>
+            </div>
+        </main>
+    </div>
+</template>
+
+<script setup>
+    import { reactive, ref } from 'vue'
+    import {useRoute, useRouter} from "vue-router";
+    const activeName = ref('first')
+    const router = useRouter()
+    const route = useRoute()
+
+    const form = reactive({
+        basicInfo: {
+            apiName: '',
+            apiClass: '',
+            apiDes: '',
+        },
+    })
+    const formRules = reactive({
+        basicInfo: {
+            constructionContent: { required: true, message: '请输入审核建议', trigger: 'blur' },
+        },
+    })
+
+    function close() {
+        router.push({
+            name: route.name.slice(0,-5)
+        })
+    }
+</script>
+
+<style lang="scss" scoped>
+    :deep(.card-shadow){
+        .el-card__body{
+            border: 1px solid var(--color-bg-1) ;
+        }
+    }
+    :deep(.card-descriptions) {
+        .el-card {
+            border: none
+        }
+    }
+    .el-divider--vertical{
+        height:12cm;		//更改竖向分割线长度
+    }
+    :deep(.el-tabs__header) {
+        width: fit-content;
+        margin: 20px auto;
+    .el-tabs__item {
+        border: 1px solid #DDD !important;
+
+    &.is-active {
+         background: var(--color-bg-1);
+         color: var(--color-1);
+     }
+
+    }
+    .custom-tabs-label {
+    &.is-active {
+         background: var(--color-bg-1);
+         color: var(--color-1);
+     }
+    }
+    }
+</style>

+ 384 - 8
src/views/zjdlx/Detail.vue

@@ -3,25 +3,401 @@
         <header>
             <div class="header-row">
                 <h1>新增项目</h1>
-                <div class="input-range">
-                    <el-button type="primary" class="btn-default">导入Excel</el-button>
-                    <el-button type="primary" class="btn-default">提交</el-button>
-                    <el-button type="primary" class="btn-default">保存</el-button>
-                    <el-button type="primary" class="btn-default">返回</el-button>
-                </div>
             </div>
+            <img src="../../assets/imgs/0531/标题装饰.png" alt="">
         </header>
         <main>
-            <span class="detail-part-title">基本信息</span>
+            <div class="detail-main">
+                <div class="detail-sub-title">项目信息</div>
+                <el-form :model="form.basicInfo"  :rules="formRules.basicInfo" label-position="top" ref="basicInfo" class="form-detail">
+                    <el-form-item label="项目名称" prop="entryName">
+                        <el-input v-model="form.basicInfo.entryName" placeholder="请输入项目名称" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="年份" prop="year">
+                        <el-select v-model="form.basicInfo.year" placeholder="选择年份" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="行业领域" prop="industrySector">
+                        <el-select v-model="form.basicInfo.industrySector" placeholder="请选择行业领域" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="所属街镇" prop="streetTown">
+                        <el-select v-model="form.basicInfo.streetTown" placeholder="请选择所属街镇" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="建设周期(月)" prop="constructionCycle">
+                        <el-input v-model="form.basicInfo.constructionCycle" placeholder="请输入建设周期(最长24个月)" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="建设规模(亩)" prop="constructionScale">
+                        <el-input v-model="form.basicInfo.constructionScale" placeholder="请输入建设规模" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="建设用地性质" prop="constructionLand">
+                        <el-input v-model="form.basicInfo.constructionLand" placeholder="请输入建设用地性质" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="实施地址" prop="implementationAddress">
+                        <el-input v-model="form.basicInfo.implementationAddress" placeholder="请输入实施地址" clearable></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="总投资(万元)" prop="totalInvestment">
+                        <el-input v-model="form.basicInfo.totalInvestment" placeholder="请输入总投资" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="中央(万元)" prop="centre">
+                        <el-input v-model="form.basicInfo.centre" placeholder="请输入中央财政金额" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="市级(万元)" prop="municipalLevel">
+                        <el-input v-model="form.basicInfo.municipalLevel" placeholder="请输入市级财政金额" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="区级(万元)" prop="districtLevel">
+                        <el-input v-model="form.basicInfo.districtLevel" placeholder="请输入区级财政金额" clearable></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="镇级(万元)" prop="townLevel">
+                        <el-input v-model="form.basicInfo.townLevel" placeholder="请输入镇级财政金额" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="自筹(万元)" prop="raiseIndependently">
+                        <el-input v-model="form.basicInfo.raiseIndependently" placeholder="、请输入自筹资金" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="二类(万元)" prop="classII">
+                        <el-input v-model="form.basicInfo.classII" placeholder="请输入二类费用" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="乡镇负责人" prop="townshipHead">
+                        <el-input v-model="form.basicInfo.townshipHead" placeholder="请输入乡镇负责人" clearable></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="乡镇负责人联系方式" prop="townshipLeadersContact">
+                        <el-input v-model="form.basicInfo.townshipLeadersContact" placeholder="请输入乡镇负责人联系方式" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="实施单位负责人" prop="implementationUnitPerson">
+                        <el-input v-model="form.basicInfo.implementationUnitPerson" placeholder="请输入实施单位负责人" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="实施单位负责人联系方式" prop="implementationUnitContact">
+                        <el-input v-model="form.basicInfo.implementationUnitContact" placeholder="请输入实施单位负责人联系方式" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="项目单位净资产是否符合申报要求" prop="assetsOfTheProjectUnit">
+                        <el-select v-model="form.basicInfo.assetsOfTheProjectUnit" placeholder="请选择" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="是否符合区域内农业相关规划" prop="agriculturalRelatedPlanning">
+                        <el-select v-model="form.basicInfo.agriculturalRelatedPlanning" placeholder="请选择" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="有无市级财政扶持的在建项目" prop="withFinancialSupport">
+                        <el-select v-model="form.basicInfo.withFinancialSupport" placeholder="请选择" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="项目批复文件" prop="projectApprovalDocuments">
+                        <el-input v-model="form.basicInfo.projectApprovalDocuments" placeholder="若有市级财政扶持的在建项目请填写批复文号" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="备注" prop="remark">
+                        <el-select v-model="form.basicInfo.remark" placeholder="请选择备注" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="空间位置" prop="spatialPosition">
+                        <el-input v-model="form.basicInfo.spatialPosition" placeholder="" clearable>
+                            <template #append>
+                                <el-button type="primary" class="btn-default">请绘制项目位置</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="建设内容" prop="constructionContent" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.basicInfo.constructionContent" placeholder="请输入建设内容"></el-input>
+                    </el-form-item>
+                </el-form>
+                <div class="detail-sub-title">单位信息</div>
+                <el-form :model="form.basicInfo" :rules="formRules.basicInfo" label-position="top" ref="basicInfo" class="form-detail">
+                    <el-form-item label="单位名称" prop="apiName">
+                        <el-input v-model="form.basicInfo.apiName" placeholder="请选择" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="单位代码" prop="unitName">
+                        <el-input v-model="form.basicInfo.unitName" placeholder="请选择" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="注册时间" prop="registrationTime">
+                        <el-input v-model="form.basicInfo.registrationTime" placeholder="若有市级财政扶持的在建项目请填写批复文号" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="营业执照" prop="businessLicense">
+                        <el-input v-model="form.basicInfo.businessLicense" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="联系人" prop="contacts">
+                        <el-input v-model="form.basicInfo.contacts" placeholder="请输入联系人" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="联系电话" prop="telephone">
+                        <el-input v-model="form.basicInfo.telephone" placeholder="请输入联系电话" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="电子邮件" prop="email">
+                        <el-input v-model="form.basicInfo.email" placeholder="请输入电子邮件" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="通讯地址" prop="address">
+                        <el-input v-model="form.basicInfo.address" placeholder="请输入通讯地址" clearable></el-input>
+                    </el-form-item>
+                </el-form>
+                <div class="detail-sub-title">附件信息</div>
+                <el-form :model="form.basicInfo" :rules="formRules.basicInfo" label-position="top" ref="basicInfo" class="form-detail">
+                    <el-form-item label="项目初步设计报告文本" prop="projectPreliminaryDesignReportText">
+                        <el-input v-model="form.basicInfo.projectPreliminaryDesignReportText" placeholder="" clearable>
+                            <template #append >
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="上年度审计报告" prop="lastYearAuditReport">
+                        <el-input v-model="form.basicInfo.lastYearAuditReport" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="投资估算表(excel)" prop="investmentEstimationTable">
+                        <el-input v-model="form.basicInfo.investmentEstimationTable" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="项目单位自筹资金承诺书" prop="letterOfCommitment">
+                        <el-input v-model="form.basicInfo.letterOfCommitment" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="镇农业主管部门出具的带动证明(就业或增收)" prop="drivingproof">
+                        <el-input v-model="form.basicInfo.drivingproof" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="真实性承诺及信用承诺(后附)" prop="creditCommitment">
+                        <el-input v-model="form.basicInfo.creditCommitment" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="近三年财政支持项目一览表(后附)" prop="projectSchedule">
+                        <el-input v-model="form.basicInfo.projectSchedule" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="土地流转协议" prop="landTransferAgreement">
+                        <el-input v-model="form.basicInfo.landTransferAgreement" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="区位图" prop="areaMap">
+                        <el-input v-model="form.basicInfo.areaMap" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="现状图" prop="currentSituationMap">
+                        <el-input v-model="form.basicInfo.currentSituationMap" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="规划图" prop="planningMap">
+                        <el-input v-model="form.basicInfo.planningMap" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="相关设计图" prop="relatedDesignDrawings">
+                        <el-input v-model="form.basicInfo.relatedDesignDrawings" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="环评相关材料" prop="environmentalImpactAssessmentRelatedMaterials">
+                        <el-input v-model="form.basicInfo.environmentalImpactAssessmentRelatedMaterials" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="绩效目标表" prop="performanceObjectiveTable">
+                        <el-input v-model="form.basicInfo.performanceObjectiveTable" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="是否涉及设施农业用地" prop="agriculturalLand">
+                        <el-select v-model="form.basicInfo.agriculturalLand" placeholder="是(需要上传相关材料)" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="项目单位自筹资金承诺书" prop="fundingCommitmentLetter">
+                        <el-input v-model="form.basicInfo.fundingCommitmentLetter" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="其它材料" prop="otherMaterials">
+                        <el-input v-model="form.basicInfo.otherMaterials" placeholder="" clearable>
+                            <template #append>
+                                <img src="../../assets/imgs/0531/上传.png" alt="" width="12" height="12">
+                                <el-button type="primary" class="btn-default">上传</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-form>
+                <div style="text-align: center;">
+                    <el-button type="primary" class="button-detail">提 交</el-button>
+                    <el-button type="primary" class="button-detail">保 存</el-button>
+                    <el-button class="button-detail" @click="close">返 回</el-button>
+                </div>
+            </div>
         </main>
     </div>
 </template>
 
 <script setup>
 
+    import {reactive} from "@vue/reactivity";
+    import {useRoute, useRouter} from "vue-router";
+    const router = useRouter()
+    const route = useRoute()
+    import createEnum from "../../utils/data/create-enum";
+
+    const form = reactive({
+        basicInfo: {
+            apiName: '',
+            apiClass: '',
+            apiDes: '',
+        },
+    })
+    const select_class = createEnum([
+        {value: 1, label: '111'},
+        {value: 2, label: '222'},
+        {value: 3, label: '333'},
+        {value: 4, label: '444'},
+        {value: 5, label: '555'},
+        {value: 6, label: '666'}
+    ])
+    function close() {
+        router.push({
+            name: route.name.slice(0,-6)
+        })
+    }
+    const formRules = reactive({
+        basicInfo: {
+            entryName: { required: true, message: '请输入项目名称', trigger: 'blur' },
+            year: { required: true, message: '请选择年份', trigger: 'change' },
+            industrySector: { required: true, message: '请选择行业领域', trigger: 'change' },
+            streetTown: { required: true, message: '请选择所属街道', trigger: 'change' },
+
+            constructionCycle: { required: true, message: '请输入建设周期', trigger: 'blur' },
+            constructionScale:  { required: true, message: '请输入建设规模', trigger: 'blur' },
+            constructionLand:  { required: true, message: '请输入建设用地性质', trigger: 'blur' },
+            implementationAddress:  { required: true, message: '请输入实施地址', trigger: 'blur' },
+
+            totalInvestment: { required: true, message: '请输入总投资', trigger: 'blur' },
+            centre:  { required: true, message: '请输入中央财政金额', trigger: 'blur' },
+            municipalLevel:  { required: true, message: '请输入市级财政金额', trigger: 'blur' },
+            districtLevel:  { required: true, message: '请输入区级财政金额', trigger: 'blur' },
+
+            townLevel: { required: true, message: '请输入镇级财政金额', trigger: 'blur' },
+            raiseIndependently:  { required: true, message: '请输入自筹资金', trigger: 'blur' },
+            classII:  { required: true, message: '请输入二类费用', trigger: 'blur' },
+            townshipHead:  { required: true, message: '请输入乡镇负责人', trigger: 'blur' },
+
+            townshipLeadersContact: { required: true, message: '请输入乡镇负责人联系方式', trigger: 'blur' },
+            implementationUnitPerson:  { required: true, message: '请输入实施单位负责人', trigger: 'blur' },
+            implementationUnitContact:  { required: true, message: '请输入实施单位负责人联系方式', trigger: 'blur' },
+            assetsOfTheProjectUnit:  { required: true, message: '请选择是否符合申报要求', trigger: 'change' },
+
+            agriculturalRelatedPlanning: { required: true, message: '请选择是否符合有关规划', trigger: 'change' },
+            withFinancialSupport:  { required: true, message: '请选择是否有扶持', trigger: 'change' },
+
+            spatialPosition: { required: true, message: '请绘制项目位置', trigger: 'change' },
+
+            constructionContent: { required: true, message: '请输入建设内容', trigger: 'blur' },
+
+            apiName: { required: true, message: '请输入单位名称', trigger: 'blur' },
+            unitName:  { required: true, message: '请输入单位代码', trigger: 'blur' },
+            registrationTime:  { required: true, message: '请输入注册时间', trigger: 'blur' },
+            businessLicense:  { required: true, message: '请上传营业执照', trigger: 'change' },
+
+            contacts: { required: true, message: '请输入联系人', trigger: 'blur' },
+            telephone:  { required: true, message: '请输入联系电话', trigger: 'blur' },
+            email:  { required: true, message: '请输入电子邮件', trigger: 'blur' },
+            address:  { required: true, message: '请输入通讯地址', trigger: 'blur' },
+
+            projectPreliminaryDesignReportText:  { required: true, message: '请上传文件', trigger: 'change' },
+            lastYearAuditReport:  { required: true, message: '请上传文件', trigger: 'change' },
+            investmentEstimationTable:  { required: true, message: '请上传文件', trigger: 'change' },
+            letterOfCommitment:  { required: true, message: '请上传文件', trigger: 'change' },
+
+
+            creditCommitment:  { required: true, message: '请上传文件', trigger: 'change' },
+            projectSchedule:  { required: true, message: '请上传文件', trigger: 'change' },
+            landTransferAgreement:  { required: true, message: '请上传文件', trigger: 'change' },
+
+            areaMap:  { required: true, message: '请上传文件', trigger: 'change' },
+            currentSituationMap:  { required: true, message: '请上传文件', trigger: 'change' },
+            planningMap:  { required: true, message: '请上传文件', trigger: 'change' },
+
+
+
+            performanceObjectiveTable:  { required: true, message: '请上传文件', trigger: 'change' },
+            agriculturalLand:  { required: true, message: '请上传文件', trigger: 'change' },
+            fundingCommitmentLetter:  { required: true, message: '请上传文件', trigger: 'change' },
+
+        },
+    })
 
 </script>
 
 <style scoped>
-
+    :deep(.el-input-group__append)  {
+        background-color: #00b368;
+        color: #fff;
+        padding: 0;
+}
 </style>

+ 21 - 7
src/views/zjdlx/Index.vue

@@ -62,7 +62,7 @@
         <el-table-column fixed="right" label="操作" min-width="130">
           <template #default="scope">
             <el-button link type="primary" @click="toEdit()">编辑</el-button>
-
+            <el-button link type="primary" @click="toCheck()">审核</el-button>
             <el-popconfirm title="确认提交此条?" @confirm="toSave()">
               <template #reference>
                 <el-button link type="primary">提交</el-button>
@@ -186,34 +186,38 @@
               <div style="text-align: right;">
                 <el-button class="btn-default" style="padding-right:10px">批量下载</el-button>
               </div>
-              <el-col :span="24">
+              <el-col>
                 <el-card shadow="never" style=" margin: 20px auto;">
-                  <el-row>
+                  <el-row :span="24">
                     <el-col :span="4">
                       <img src="../../assets/imgs/0531/Microsoft-Excel.png" alt="" width="60" height="61">
                     </el-col>
-                    <el-col :span="20">
+                    <el-col :span="12">
                       <el-descriptions title="" :column="1">
                         <el-descriptions-item label="项目名称:">崇明区新村乡食用菌</el-descriptions-item>
                         <el-descriptions-item label="建设地点:">崇明区 新村乡新洲园艺场</el-descriptions-item>
                         <el-descriptions-item label="建设内容:">水肥一体化灌溉系统</el-descriptions-item>
                       </el-descriptions>
+                    </el-col>
+                    <el-col :span="8">
                       <el-button class="btn-default">预览</el-button>
                       <el-button class="btn-default">下载</el-button>
                     </el-col>
                   </el-row>
                 </el-card>
                 <el-card shadow="never" style=" margin: 20px auto;">
-                  <el-row>
+                  <el-row :span="24">
                     <el-col :span="4">
                       <img src="../../assets/imgs/0531/pdf.png" alt="" width="60" height="61">
                     </el-col>
-                    <el-col :span="20">
+                    <el-col :span="12">
                       <el-descriptions title="" :column="1">
                         <el-descriptions-item label="项目名称:">崇明区新村乡食用菌</el-descriptions-item>
                         <el-descriptions-item label="建设地点:">崇明区 新村乡新洲园艺场</el-descriptions-item>
                         <el-descriptions-item label="建设内容:">水肥一体化灌溉系统</el-descriptions-item>
                       </el-descriptions>
+                    </el-col>
+                    <el-col :span="8">
                       <el-button class="btn-default">预览</el-button>
                       <el-button class="btn-default">下载</el-button>
                     </el-col>
@@ -295,6 +299,15 @@ function toAdd() {
   })
 }
 
+function toCheck() {
+  router.push({
+    name: 'HomesteadSelectionCheck',
+    params: {
+      type: 'check'
+    }
+  })
+}
+
 function toEdit(row) {
   router.push({
     name: 'HomesteadSelectionDetail',
@@ -374,7 +387,8 @@ function toSave(){
       color: var(--color-1);
     }
   }
-}.demo-search-div >>> .el-divider--vertical{
+}
+.demo-search-div >>> .el-divider--vertical{
    height: 80px;
    vertical-align: text-top;
  }