合并

src/layout/institution/detailInfo.vue

@@ -0,0 +1,121 @@
+<template>
+  <div id="detailInfo">
+    <el-row>
+      <el-col :span="24">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+          <el-form-item label="金融机构名称" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="机构logo" prop="logo">
+            <el-input v-model="ruleForm.logo"></el-input>
+            <el-upload
+              action="https://jsonplaceholder.typicode.com/posts/"
+              list-type="picture-card"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+            >
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="dialogImageUrl" alt="" />
+            </el-dialog>
+          </el-form-item>
+          <el-form-item label="机构简称">
+            <el-input v-model="ruleForm.abbreviation"></el-input>
+          </el-form-item>
+          <el-form-item label="机构英文名称">
+            <el-input v-model="ruleForm.english_name"></el-input>
+          </el-form-item>
+          <el-form-item label="所属行业	">
+            <el-select v-model="ruleForm.profession" placeholder="请选择所属行业">
+              <el-option label="行业1" value="hangye1"></el-option>
+              <el-option label="行业2" value="hangye2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="机构类型	">
+            <el-select v-model="ruleForm.nature" placeholder="请选择机构类型">
+              <el-option label="类型1" value="leixing1"></el-option>
+              <el-option label="类型2" value="leixing2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="组织形式">
+            <el-input v-model="ruleForm.form"></el-input>
+          </el-form-item>
+          <el-form-item label="机构官网网址">
+            <el-input v-model="ruleForm.website"></el-input>
+          </el-form-item>
+          <el-form-item label="法定代表人">
+            <el-input v-model="ruleForm.representative"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话">
+            <el-input v-model="ruleForm.contact_number"></el-input>
+          </el-form-item>
+          <el-form-item label="所属地区">
+            <el-select v-model="ruleForm.belong_addr" placeholder="请选择所属地区">
+              <el-option label="地区1" value="diqu1"></el-option>
+              <el-option label="地区2" value="diqu2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="办公地址">
+            <el-input v-model="ruleForm.business_addr"></el-input>
+          </el-form-item>
+          <el-form-item label="注册地址">
+            <el-input v-model="ruleForm.registered_addr"></el-input>
+          </el-form-item>
+          <el-form-item label="创立时间">
+            <el-col :span="11">
+              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.establish_time" style="width: 100%;"></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="组织机构号码">
+            <el-input v-model="ruleForm.code"></el-input>
+          </el-form-item>
+          <el-form-item label="管理资金规模">
+            <el-input v-model="ruleForm.size"></el-input>
+          </el-form-item>
+          <el-form-item label="注册资本">
+            <el-input v-model="ruleForm.registered_capital"></el-input>
+          </el-form-item>
+          <el-form-item label="实缴资金">
+            <el-input v-model="ruleForm.contributed_capital"></el-input>
+          </el-form-item>
+          <el-form-item label="机构简介">
+            <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+            <el-button @click="resetForm('ruleForm')">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'detailInfo',
+  props: {
+    ruleForm: null,
+  },
+  components: {},
+  data: () => ({
+    rules: {
+      name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+      logo: [{ required: true, message: '请上传机构logo', trigger: 'blur' }],
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    submitForm(ruleForm) {
+      this.$emit('submitForm', { data: this.form });
+    },
+    resetForm() {
+      this.$emit('resetForm');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/layout/institution/newsInfo.vue

@@ -29,7 +29,11 @@ export default {
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    handleClick(id) {
+      this.$emit('handleClick', id);
+    },
+  },
 };
 </script>
 

src/views/financial/detail.vue

@@ -1,18 +1,40 @@
 <template>
   <div id="detail">
-    <p>detail</p>
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="top">
+          头部
+        </el-col>
+        <el-col :span="24">
+          <detailInfo :ruleForm="ruleForm" @submitForm="submitForm" @resetForm="resetForm"></detailInfo>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import detailInfo from '@/layout/institution/detailInfo.vue';
 export default {
   name: 'detail',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    detailInfo, //提交
+  },
+  data: () => ({
+    ruleForm: {},
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    submitForm(form) {
+      console.log(form);
+      this.resetForm();
+    },
+    resetForm() {
+      this.$router.push({ path: '/financial/index' });
+    },
+  },
 };
 </script>
 

src/views/financial/index.vue

@@ -3,13 +3,13 @@
     <el-row>
       <el-col :span="24" class="debt">
         <el-col :span="24" class="top">
-          <topInfo :topTitle="topTitle" @clickBtn="clickBtn"></topInfo>
+          <topInfo :topTitle="topTitle"></topInfo>
         </el-col>
         <el-col :span="24" class="search">
           <searchInfo></searchInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <newsInfo :debtTable="debtTable"></newsInfo>
+          <newsInfo :debtTable="debtTable" @handleClick="handleClick"></newsInfo>
         </el-col>
       </el-col>
     </el-row>
@@ -41,9 +41,8 @@ export default {
   created() {},
   computed: {},
   methods: {
-    clickBtn() {
-      console.log('你好');
-      this.$router.push({ path: '/financial/detail' });
+    handleClick(id) {
+      this.$router.push({ path: '/financial/detail', query: { id: id } });
     },
   },
 };