add form

src/assets/style/main.scss

@@ -689,6 +689,10 @@ img {
   background-color: #f5f5f5;
 }
 
+.grey-fa-bg {
+  background-color: #fafafa;
+}
+
 .black, a.black {
   color: #333;
 }

src/components/basic-form/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class='full-width'>
+    <el-form v-for='item in option.column' :key='item.label' class='form' :class='option.detail ? "grey-fa-bg" : "white-bg" '  :label-width='option.hasOwnProperty("labelWidth") ? option.labelWidth : "150px" '>
+<!--      input-->
+      <el-col v-if='item.type ==="input" '  class='full-width'>
+        <div class='flex item full-width'>
+          <el-form-item class='full-width '>
+            <template v-slot:label>
+              <div class='label white-bg full-width padding-left text-left bold'>
+                {{item.label}}
+              </div>
+            </template>
+            <div class='full-width text-left flex full-width'>
+              <input class='full-width' :placeholder= '`请输入` + item.label' :disabled='option.detail' v-model='form[item.prop]'/>
+              <el-icon v-if='!option.detail' class="padding-right">
+                <edit />
+              </el-icon>
+            </div>
+          </el-form-item>
+        </div>
+      </el-col>
+<!--textarea-->
+      <el-col v-if='item.type ==="textarea" '  class='full-width' :style='`height:` + item.rows * 35 + `px`'>
+        <div class='flex item full-width'>
+          <el-form-item class='full-width '>
+            <template v-slot:label>
+              <div class='label white-bg full-width text-left padding-left bold' :style='`height:` + item.rows * 35 + `px`'>
+                {{item.label}}
+              </div>
+            </template>
+            <div class='full-width flex flex-align-start full-height text-left full-width' style='white-space: pre-wrap;text-overflow: ellipsis;'>
+              <textarea :placeholder= '`请输入` + item.label' :disabled='option.detail' class='full-width padding-right full-height padding-top' style='line-height:20px;resize:none ' v-model='form[item.prop]'/>
+              <el-icon v-if='!option.detail' class="padding-right padding-top">
+                <edit />
+              </el-icon>
+            </div>
+          </el-form-item>
+        </div>
+      </el-col>
+<!--row-->
+      <el-col v-if='item.type === "row" ' :span='24'  class='flex full-width '>
+        <div  class='flex full-width'>
+            <div v-for='sub in item.column' :key='sub.label' class='full-width sub-item'>
+              <el-col :span='24'>
+                <div class='full-width item '>
+                  <el-form-item class='full-width'>
+                    <template v-slot:label>
+                      <div class='label white-bg full-width text-left padding-left bold'>
+                        {{sub.label}}
+                      </div>
+                    </template>
+                    <div class='full-width flex flex-center'>
+                      <input class='full-width' :placeholder= '`请输入` + sub.label' :disabled='option.detail' v-model='form[sub.prop]'>
+                      <el-icon v-if='!option.detail' class="padding-left padding-right">
+                        <edit />
+                      </el-icon>
+                    </div>
+                  </el-form-item>
+                </div>
+              </el-col>
+            </div>
+        </div>
+      </el-col>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {
+    option: Object,
+    data: Object
+  },
+  watch: {
+    data: {
+      handler (val) {
+        this.form = val
+      },
+      immediate: true
+    },
+    option: {
+      handler (val) {
+        this.$emit('change', this.form)
+      },
+      deep: true
+    }
+  },
+  data () {
+    return {
+      form: {},
+      disable: true
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.form {
+  border-right: #CCCFCE solid 1px;
+  border-left: #CCCFCE solid 1px;
+  border-bottom: #CCCFCE solid 1px;
+  .item {
+    :deep(.el-form-item--default){
+      margin-bottom: 0;
+      padding: 0;
+    }
+  }
+  .label{
+    padding-right: 10px;
+    border-right: #CCCFCE solid 1px;
+  }
+  .sub-item{
+    border-left: #CCCFCE solid 1px;
+  }
+  .sub-item:first-child{
+    border-left: none;
+  }
+}
+
+.form:first-child{
+  padding: 0;
+  border: #CCCFCE solid 1px;
+}
+</style>

src/views/recycle/index.vue

@@ -1,8 +1,11 @@
 <template>
   <div>
     <basic-container class='mt-10'>
-      <basic-step :steps='stepsTitle' style='margin-bottom: 100px'>
-      </basic-step>
+      <div>
+        <el-button @click='option.detail = !option.detail'>编辑</el-button>
+      </div>
+      <el-divider/>
+      <basic-form class='mt-20' :option='option' :data='data' @change='change'/>
     </basic-container>
   </div>
 </template>
@@ -15,15 +18,103 @@ name: '回收站',
 </route>
 
 <script>
-import basicStep from '@/components/basic-step/index.vue'
 import BasicContainer from '@/components/basic-container/main.vue'
-
+import basicForm from '@/components/basic-form/index.vue'
 export default {
   name: 'index',
-  components: { BasicContainer, basicStep },
+  components: { BasicContainer, basicForm },
   data () {
     return {
-      stepsTitle: ['全部阶段', '谋划阶段', '工程建设许可阶段', '施工许可阶段', '工程实施阶段', '竣工验收阶段', '运营阶段']
+      option: {
+        detail: true,
+        labelWidth: '200px',
+        column: [
+          {
+            label: '项目统一名称',
+            prop: 'data1',
+            type: 'input',
+            span: 24
+          },
+          {
+            type: 'row',
+            column: [
+              {
+                label: '总投资',
+                prop: 'data2',
+                type: 'textarea',
+                span: 24
+              },
+              {
+                label: '区划',
+                prop: 'data3',
+                type: 'textarea',
+                span: 24
+              }
+            ]
+          },
+          {
+            type: 'row',
+            column: [
+              {
+                label: '地市',
+                prop: 'data2',
+                type: 'textarea',
+                span: 24
+              },
+              {
+                label: '区县',
+                prop: 'data3',
+                type: 'textarea',
+                span: 24
+              }
+            ]
+          },
+          {
+            type: 'row',
+            column: [
+              {
+                label: '不含专项债的资本金',
+                prop: 'data2',
+                type: 'textarea',
+                span: 24
+              },
+              {
+                label: '项目领域',
+                prop: 'data3',
+                type: 'textarea',
+                span: 24
+              }
+            ]
+          },
+          {
+            label: '收入来源',
+            prop: 'data5',
+            type: 'textarea',
+            span: 24,
+            rows: 4
+          },
+          {
+            label: '建设内容',
+            prop: 'data6',
+            type: 'textarea',
+            span: 24,
+            rows: 2
+          }
+        ]
+      },
+      data: {
+        data1: '祥云经开区年产10GW单晶硅棒及切片标准厂房及配套基础设施建设项目',
+        data2: 'data2',
+        data3: 'data3',
+        data4: 'data4',
+        data5: '经研究，本项目位于宜良县九乡乡西北，该地具有良好的自然资源和旅游资源，旅游产业发展基础、市场氛围和周边环境良好。项目建设场址周边500米内无污染企业排污，200米内无噪声源，在地形地貌、气候气象、水文地质等方面满足项目建设选址的需要，从工程技术评价的角度来分析，建设用地条件较好。项目市政配套、交通、投资环境、社会环境等条件较好，适宜项目建设。',
+        data6: '项目位于普泪市思茅产业园区，思润公路以北， 项目用地面积： 60246叶(90.37亩），总建筑面积74483平方米， 建设医药标准生产厂房、 医药GSP仓库、 综合仓库及冷库、 医药及其他配套用房、 动力中心、 园区递路、 停车位、 水电、 污水处理等基础设施。'
+      }
+    }
+  },
+  methods: {
+    change (res) {
+      console.log(res)
     }
   }
 }