Merge remote-tracking branch 'origin/develop' into develop

src/components/wt-card/index.vue

@@ -1,8 +1,19 @@
 <template>
   <el-card shadow="hover">
-    <div class="font-16 bold-500 flex-justify-start flex mb-10">
-      {{ title }}
+    <div class="flex flex-justify-between flex-center mb-10">
+      <div class="font-16 bold-500 flex-justify-start flex">
+        {{ title }}
+      </div>
+      <el-button
+        type="primary"
+        icon="Edit"
+        v-if="editBtn"
+        size="small"
+        @click="change"
+        >{{ btnText }}</el-button
+      >
     </div>
+    <el-divider />
     <slot></slot>
   </el-card>
 </template>
@@ -13,6 +24,24 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    editBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      btnText: '编 辑'
+    }
+  },
+  methods: {
+    change() {
+      this.btnText = this.btnText === '编 辑' ? '保 存' : '编 辑'
+      this.$emit('change', this.btnText === '编 辑')
+      if (this.btnText === '保 存') {
+        this.$emit('save')
+      }
     }
   }
 }

src/views/project/componens/info1.vue

@@ -1,6 +1,120 @@
 <template>
-  <wt-card title="基础信息">
-    <div class="flex flex-justify-start light-green-bg full-width">333</div>
+  <wt-card title="基础信息" :edit-btn="true" @change="change" @save="save">
+    <el-form class="mt-20" :disabled="disabled">
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">项目名称:</span>
+            <el-input
+              placeholder="请输入项目名称"
+              v-model="form.name"
+            ></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">总投资金额:</span>
+            <el-input
+              placeholder="请输入总投资金额"
+              v-model="form.total_amount"
+            >
+              <template #append>万元</template>
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">区县:</span>
+            <el-input placeholder="请选择区县"></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">责任单位:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">主管单位:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">责任领导:</span>
+            <el-input placeholder="请输入责任领导"></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">联系电话:</span>
+            <el-input placeholder="请输入责任领导联系电话"></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">所属领域:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">所属行业:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width" style="flex: 2">
+          <div class="flex flex-center full-width" style="width: 95%">
+            <span class="title">项目位置:</span>
+            <el-input placeholder="请选择项目位置"></el-input>
+            <el-button class="ml-10" plain type="primary">查看地图</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width" style="flex: 1">
+          <div class="flex flex-center full-width item">
+            <span class="title">项目标签:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width" style="flex: 1">
+          <div
+            class="flex flex-center flex-align-start full-width"
+            style="width: 99.3%"
+          >
+            <span class="title-textarea">建设规模:</span>
+            <el-input
+              type="textarea"
+              placeholder="请输入建设规模"
+              :rows="5"
+            ></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width" style="flex: 1">
+          <div
+            class="flex flex-center flex-align-start full-width"
+            style="width: 99.3%"
+          >
+            <span class="title-textarea">建设内容:</span>
+            <el-input
+              type="textarea"
+              placeholder="请输入建设内容"
+              :rows="5"
+            ></el-input>
+          </div>
+        </el-form-item>
+      </div>
+    </el-form>
   </wt-card>
 </template>
 
@@ -10,8 +124,52 @@ import wtCard from '@/components/wt-card/index.vue'
 export default {
   components: {
     wtCard
+  },
+  props: {
+    info: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  watch: {
+    info: {
+      handler(val) {
+        this.form = val
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      disabled: true,
+      form: {}
+    }
+  },
+  methods: {
+    save() {
+      console.log('save')
+    },
+    change(res) {
+      this.disabled = res
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.title {
+  width: 100px;
+  text-align: left;
+}
+
+.title-textarea {
+  width: 85px;
+  text-align: left;
+}
+
+.item {
+  width: 98%;
+}
+</style>

src/views/project/index.vue

@@ -12,7 +12,7 @@
     </tips-custom>
     <!--    content-->
     <div>
-      <info1 />
+      <info1 :info="detail" />
       <info2 />
       <info3 :project-id="projectId" :stage-id="stageId" />
     </div>