基本用户信息更新-企业用户信息管理-没做

src/layout/main-layout.vue

@@ -58,5 +58,6 @@ export default {
   margin: 0;
   padding: 0;
   background: #ffffff;
+  min-height: 550px;
 }
 </style>

src/layout/top.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col class="info">
+        <el-col :span="1" class="home">
+          <i class="el-icon-s-home"></i>
+        </el-col>
+        <el-col :span="23">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }"> 我的主页</el-breadcrumb-item>
+            <el-breadcrumb-item>{{ topTitle }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'top',
+  props: {
+    topTitle: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  height: 40px;
+  line-height: 40px;
+}
+.home {
+  text-align: center;
+}
+/deep/.el-breadcrumb {
+  line-height: 40px;
+}
+</style>

src/router/index.js

@@ -23,13 +23,25 @@ export default new Router({
       path: '/userManage/companyInfo/index',
       component: () => import('../views//userManage/companyInfo/index.vue'),
     },
+    {
+      path: '/userManage/companyInfo/detail',
+      component: () => import('../views//userManage/companyInfo/detail.vue'),
+    },
     {
       path: '/userManage/companyType/index',
       component: () => import('../views//userManage/companyType/index.vue'),
     },
+    {
+      path: '/userManage/companyType/detail',
+      component: () => import('../views//userManage/companyType/detail.vue'),
+    },
     {
       path: '/userManage/expertInfo/index',
-      component: () => import('../views//userManage/expertInfo/index.vue'),
+      component: () => import('../views/userManage/expertInfo/index.vue'),
+    },
+    {
+      path: '/userManage/expertInfo/detail',
+      component: () => import('../views/userManage/expertInfo/detail.vue'),
     },
   ],
 });

src/views/userManage/companyInfo/detail.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-form ref="form" :model="form" label-width="150px">
+            <el-form-item label="企业，单位类别名称">
+              <el-input v-model="form.title" placeholder="请输入企业，单位类别名称"></el-input>
+            </el-form-item>
+            <el-form-item label="企业，单位类别编号">
+              <el-input v-model="form.num" placeholder="请输入企业，单位类别编号"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleCancel">取消</el-button>
+              <el-button type="primary" @click="handleEdit">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/top.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    topInfo, //头部标题
+  },
+  data: () => ({
+    topTitle: '企业,单位类别添加',
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleEdit() {
+      this.handleCancel();
+    },
+    handleCancel() {
+      this.$router.push({ path: './index' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-form {
+  padding: 0 200px;
+}
+</style>

src/views/userManage/companyInfo/index.vue

@@ -1,19 +1,193 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="search">
+          <el-col :span="8" class="left">
+            <span>查询企业、单位类别名称：</span>
+            <el-input v-model="input" placeholder="请输入企业，单位类别名称"></el-input>
+          </el-col>
+          <el-col :span="8" class="left">
+            <span>查询企业、单位类别编码：</span>
+            <el-input v-model="input" placeholder="请输入企业，单位类别编码"></el-input>
+          </el-col>
+          <el-col :span="8" class="right">
+            <el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
+            <el-button size="mini" type="success" icon="el-icon-check" @click="addData()">添加企业，单位类别</el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-table :data="tableData" style="width: 100%" border>
+            <el-table-column prop="title" label="类别名称" align="left"> </el-table-column>
+            <el-table-column prop="num" label="类别编码" align="left"> </el-table-column>
+            <el-table-column label="操作" align="left">
+              <template slot-scope="scoped">
+                <el-button size="mini" type="primary" icon="el-icon-view" @click="openDialog(scoped.$index)"></el-button>
+                <el-button size="mini" type="primary" icon="el-icon-edit" @click="addData(scoped.$index)"></el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scoped.$index, tableData)"></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="1"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="详细信息" :visible.sync="dialog">
+      <el-col :span="24" class="dataInfo">
+        <el-col :span="24"> 企业、单位类别名称：{{ info.title }} </el-col>
+        <el-col :span="24"> 企业、单位类别编码：{{ info.num }} </el-col>
+      </el-col>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import topInfo from '@/layout/top.vue';
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    topInfo, //头部标题
+  },
+  data: () => ({
+    topTitle: '企业信息管理',
+    input: '',
+    tableData: [
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '十条数据',
+        num: '01',
+      },
+    ],
+    currentPage: 1,
+    dialog: false,
+    info: {},
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    addData(index) {
+      if (index !== undefined) {
+        let data = this.tableData[index];
+      } else {
+        this.form = {};
+      }
+      this.$router.push({ path: './detail' });
+    },
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    openDialog(index) {
+      if (index !== undefined) {
+        let data = JSON.parse(JSON.stringify(this.tableData[index]));
+        data[`index`] = index;
+        this.$set(this, `info`, data);
+      }
+      this.dialog = true;
+    },
+  },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+}
+.search .left span {
+  font-size: 13px;
+  color: #393939;
+}
+.search .left .el-input {
+  width: 50%;
+}
+/deep/.search .left .el-input .el-input__inner {
+  height: 28px;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+/deep/.el-table th {
+  padding: 5px 0;
+  background: #f2f2f2;
+}
+/deep/.el-table td {
+  padding: 5px 0;
+}
+/deep/.el-table tr {
+  background: #f9f9f9;
+}
+/deep/.el-table tr:nth-child(2n) {
+  background: #fff;
+}
+.page {
+  text-align: center;
+  padding: 30px 0;
+}
+/deep/ .el-dialog__body {
+  min-height: 300px;
+}
+.dataInfo .el-col {
+  font-size: 18px;
+  padding: 0 0 20px 0;
+}
+</style>

src/views/userManage/companyType/detail.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-form ref="form" :model="form" label-width="150px">
+            <el-form-item label="企业，单位类别名称">
+              <el-input v-model="form.title" placeholder="请输入企业，单位类别名称"></el-input>
+            </el-form-item>
+            <el-form-item label="企业，单位类别编号">
+              <el-input v-model="form.num" placeholder="请输入企业，单位类别编号"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleCancel">取消</el-button>
+              <el-button type="primary" @click="handleEdit">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/top.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    topInfo, //头部标题
+  },
+  data: () => ({
+    topTitle: '企业,单位类别添加',
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleEdit() {
+      this.handleCancel();
+    },
+    handleCancel() {
+      this.$router.push({ path: './index' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-form {
+  padding: 0 200px;
+}
+</style>

src/views/userManage/companyType/index.vue

@@ -1,73 +1,114 @@
 <template>
   <div id="index">
-    <el-row class="main">
-      <el-col :span="24" class="top">
-        <!-- <el-button><el-link href="./detail">添加</el-link></el-button> -->
-        <el-col :span="1" class="home">
-          <i class="el-icon-s-home"></i>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
         </el-col>
-        <el-col :span="23">
-          <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/' }"> 我的主页</el-breadcrumb-item>
-            <el-breadcrumb-item>企业单位、管理类别</el-breadcrumb-item>
-          </el-breadcrumb>
+        <el-col :span="24" class="search">
+          <el-col :span="8" class="left">
+            <span>查询企业、单位类别名称：</span>
+            <el-input v-model="input" placeholder="请输入企业，单位类别名称"></el-input>
+          </el-col>
+          <el-col :span="8" class="left">
+            <span>查询企业、单位类别编码：</span>
+            <el-input v-model="input" placeholder="请输入企业，单位类别编码"></el-input>
+          </el-col>
+          <el-col :span="8" class="right">
+            <el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
+            <el-button size="mini" type="success" icon="el-icon-check" @click="addData()">添加企业，单位类别</el-button>
+          </el-col>
         </el-col>
-      </el-col>
-      <el-col :span="22" class="sousuo">
-        查询企业类别、名称 <el-input v-model="input" placeholder="请输入企业类别、名称" size="mini" style="width:200px"></el-input>
-
-        查询企业类别、编码<el-input v-model="input" placeholder="请输入企业类别、编码" size="mini" style="width:200px;margin-left: 10px"></el-input>
-        <el-button type="primary" icon="el-icon-search" @click="onSubmit" size="mini">查询</el-button>
-        <el-button type="success" icon="el-icon-check" @click="toadd()" size="mini">添加企业、单位类别</el-button>
-      </el-col>
-      <el-col :span="24" class="biaoge">
-        <el-table :data="tableData" style="width: 100%" border>
-          <el-table-column prop="name" label="类别名称" align="center"> </el-table-column>
-          <el-table-column prop="code" label="类别编码" align="center"> </el-table-column>
-          <el-table-column label="操作" width="180" align="center">
-            <el-button type="text" size="mini" icon="el-icon-edit" @click="onSubmit"></el-button>
-            <el-button type="text" size="mini" icon="el-icon-document" @click="onSubmit"></el-button>
-            <el-button type="text" size="mini" icon="el-icon-delete" @click="onSubmit"></el-button>
-          </el-table-column>
-        </el-table>
-        <el-col class="page" :span="24">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            layout="total,  prev, pager, next, jumper"
-            :total="1"
-          >
-          </el-pagination>
+        <el-col :span="24" class="main">
+          <el-table :data="tableData" style="width: 100%" border>
+            <el-table-column prop="title" label="类别名称" align="left"> </el-table-column>
+            <el-table-column prop="num" label="类别编码" align="left"> </el-table-column>
+            <el-table-column label="操作" align="left">
+              <template slot-scope="scoped">
+                <el-button size="mini" type="primary" icon="el-icon-view" @click="openDialog(scoped.$index)"></el-button>
+                <el-button size="mini" type="primary" icon="el-icon-edit" @click="addData(scoped.$index)"></el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scoped.$index, tableData)"></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="1"
+            >
+            </el-pagination>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
+    <el-dialog title="详细信息" :visible.sync="dialog">
+      <el-col :span="24" class="dataInfo">
+        <el-col :span="24"> 企业、单位类别名称：{{ info.title }} </el-col>
+        <el-col :span="24"> 企业、单位类别编码：{{ info.num }} </el-col>
+      </el-col>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import topInfo from '@/layout/top.vue';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    topInfo, //头部标题
+  },
   data: () => ({
-    currentPage: 1,
+    topTitle: '企业,单位类别管理',
     input: '',
-    formInline: {
-      card: '',
-      name: '',
-      region: '',
-    },
     tableData: [
       {
-        name: '',
-        code: '',
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
       },
       {
-        name: '王小虎',
-        code: '',
+        title: '机构团体',
+        num: '01',
+      },
+      {
+        title: '高校院所',
+        num: '01',
+      },
+      {
+        title: '十条数据',
+        num: '01',
       },
     ],
+    currentPage: 1,
+    dialog: false,
+    info: {},
   }),
   created() {},
   computed: {},
@@ -78,17 +119,24 @@ export default {
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
     },
-    toadd() {
+    addData(index) {
+      if (index !== undefined) {
+        let data = this.tableData[index];
+      } else {
+        this.form = {};
+      }
       this.$router.push({ path: './detail' });
     },
-    onSubmit() {
-      console.log('submit!');
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
     },
-    handleEdit(index, row) {
-      console.log(index, row);
-    },
-    handleDelete(index, row) {
-      console.log(index, row);
+    openDialog(index) {
+      if (index !== undefined) {
+        let data = JSON.parse(JSON.stringify(this.tableData[index]));
+        data[`index`] = index;
+        this.$set(this, `info`, data);
+      }
+      this.dialog = true;
     },
   },
 };
@@ -97,49 +145,49 @@ export default {
 <style lang="less" scoped>
 .top {
   height: 40px;
-  width: 100%;
-  border-bottom: 1px solid #e5e5e5;
   background-color: #f5f5f5;
 }
-.home {
-  font-size: 15px;
-  padding: 10px 0px 0px 20px;
-}
-
-/deep/.el-breadcrumb {
-  font-size: 14px;
-  line-height: 3;
-}
-.sousuo {
+.search {
   height: 40px;
-  width: 100%;
-  padding: 0 20px;
-  font-size: 10px;
   line-height: 40px;
+  padding: 0 15px;
 }
-.biaoge {
-  padding: 0 20px;
+.search .left span {
+  font-size: 13px;
+  color: #393939;
 }
-/deep/.el-input__inner {
-  border-radius: 0px;
+.search .left .el-input {
+  width: 50%;
 }
-
-.el-button {
-  border-radius: 0px;
-  margin: 0 0 0 10px;
+/deep/.search .left .el-input .el-input__inner {
+  height: 28px;
 }
-
-/deep/.el-table__header tr,
-/deep/.el-table__header th {
-  padding: 0;
-  height: 40px;
+.main {
+  width: 97%;
+  margin: 0 15px;
 }
-/deep/.el-table__body tr,
-/deep/.el-table__body td {
-  padding: 0;
-  height: 40px;
+/deep/.el-table th {
+  padding: 5px 0;
+  background: #f2f2f2;
+}
+/deep/.el-table td {
+  padding: 5px 0;
+}
+/deep/.el-table tr {
+  background: #f9f9f9;
+}
+/deep/.el-table tr:nth-child(2n) {
+  background: #fff;
 }
 .page {
   text-align: center;
+  padding: 30px 0;
+}
+/deep/ .el-dialog__body {
+  min-height: 300px;
+}
+.dataInfo .el-col {
+  font-size: 18px;
+  padding: 0 0 20px 0;
 }
 </style>

src/views/userManage/expertInfo/detail.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-form ref="form" :model="form" label-width="150px">
+            <el-form-item label="企业，单位类别名称">
+              <el-input v-model="form.title" placeholder="请输入企业，单位类别名称"></el-input>
+            </el-form-item>
+            <el-form-item label="企业，单位类别编号">
+              <el-input v-model="form.num" placeholder="请输入企业，单位类别编号"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleCancel">取消</el-button>
+              <el-button type="primary" @click="handleEdit">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/top.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    topInfo, //头部标题
+  },
+  data: () => ({
+    topTitle: '专家智慧库',
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleEdit() {
+      this.handleCancel();
+    },
+    handleCancel() {
+      this.$router.push({ path: './index' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-form {
+  padding: 0 200px;
+}
+</style>

src/views/userManage/user/detail.vue

@@ -3,57 +3,20 @@
     <el-row>
       <el-col :span="24" class="info">
         <el-col :span="24" class="top">
-          <el-col :span="1" class="home">
-            <i class="el-icon-s-home"></i>
-          </el-col>
-          <el-col :span="23" class="title">
-            <el-breadcrumb separator-class="el-icon-arrow-right">
-              <el-breadcrumb-item :to="{ path: '/' }"> 我的主页</el-breadcrumb-item>
-              <el-breadcrumb-item>用户添加</el-breadcrumb-item>
-            </el-breadcrumb>
-          </el-col>
+          <topInfo :topTitle="topTitle"></topInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <el-form ref="form" :model="form" label-width="100px">
-            <el-form-item label="身份证号">
-              <el-input v-model="form.sfzh" placeholder="请输入联系身份证号"></el-input>
+          <el-form ref="form" :model="form" label-width="150px">
+            <el-form-item label="企业，单位类别名称">
+              <el-input v-model="form.title" placeholder="请输入企业，单位类别名称"></el-input>
             </el-form-item>
-            <el-form-item label="姓名">
-              <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
+            <el-form-item label="企业，单位类别编号">
+              <el-input v-model="form.num" placeholder="请输入企业，单位类别编号"></el-input>
             </el-form-item>
-            <el-form-item label="登录名称">
-              <el-input v-model="form.loginName" placeholder="请输入登录名称"></el-input>
-            </el-form-item>
-            <el-form-item label="联系电话">
-              <el-input v-model="form.tel" placeholder="请输入联系电话"></el-input>
-            </el-form-item>
-            <el-form-item label="E-mail">
-              <el-input v-model="form.email" placeholder="请输入email"></el-input>
-            </el-form-item>
-            <el-form-item label="地址">
-              <el-input v-model="form.address" placeholder="请输入联系地址"></el-input>
-            </el-form-item>
-            <el-form-item label="角色">
-              <el-radio-group v-model="form.jiaose">
-                <el-radio label="普通成员"></el-radio>
-                <el-radio label="平台管理员"></el-radio>
-                <el-radio label="企业管理员"></el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="可管理对象">
-              <el-select v-model="form.duixiang" placeholder="请选择管理对象">
-                <el-option label="对象一" value="shanghai"></el-option>
-                <el-option label="对象二" value="beijing"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="用户简介">
-              <el-input type="textarea" v-model="form.content"></el-input>
-            </el-form-item>
-            <el-col class="btn">
-              <!-- <el-button type="primary" icon="el-icon-back" @click="$router.push({ path: '/userManage/user/index' })">返回</el-button> -->
-              <el-button type="primary" @click="handleCancel">取消</el-button>
+            <el-form-item>
+              <el-button @click="handleCancel">取消</el-button>
               <el-button type="primary" @click="handleEdit">提交</el-button>
-            </el-col>
+            </el-form-item>
           </el-form>
         </el-col>
       </el-col>
@@ -62,39 +25,24 @@
 </template>
 
 <script>
+import topInfo from '@/layout/top.vue';
 export default {
   name: 'detail',
   props: {},
-  components: {},
+  components: {
+    topInfo, //头部标题
+  },
   data: () => ({
-    form: {
-      sfzh: '',
-      name: '',
-      title: '',
-      tel: '',
-      email: '',
-      date: '',
-    },
+    topTitle: '企业,单位类别添加',
+    form: {},
   }),
   created() {},
   computed: {},
   methods: {
     handleEdit() {
-      let chData = this.form;
-      console.log(chData);
-      const { index, ...form } = chData;
-      if (index !== undefined) {
-        this.$set(this.tableData, `${index}`, form);
-        this.$set(this.tableData, `${index}`, form);
-        this.$message.success('修改成功');
-      } else {
-        // this.tableData.push(form);
-        console.log(form);
-      }
       this.handleCancel();
     },
     handleCancel() {
-      this.form = {};
       this.$router.push({ path: './index' });
     },
   },
@@ -102,24 +50,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.top {
-  height: 40px;
-  width: 100%;
-  border-bottom: 1px solid #e5e5e5;
-  background-color: #f5f5f5;
-}
-.home {
-  font-size: 15px;
-  padding: 10px 0px 0px 20px;
-}
-/deep/.el-breadcrumb {
-  font-size: 14px;
-  line-height: 3;
-}
-.main {
-  padding: 20px;
-}
-.btn {
-  text-align: center;
+.el-form {
+  padding: 0 200px;
 }
 </style>

src/views/userManage/user/index.vue

@@ -1,118 +1,127 @@
 <template>
   <div id="index">
-    <el-row class="main">
-      <el-col :span="24" class="top">
-        <!-- <el-button><el-link href="./detail">添加</el-link></el-button> -->
-        <el-col :span="1" class="home">
-          <i class="el-icon-s-home"></i>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
         </el-col>
-        <el-col :span="23">
-          <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/' }"> 我的主页</el-breadcrumb-item>
-            <el-breadcrumb-item>专家智库</el-breadcrumb-item>
-          </el-breadcrumb>
+        <el-col :span="24" class="search">
+          <el-col :span="8" class="left">
+            <span>查询身份证：</span>
+            <el-input v-model="input" placeholder="请输入身份证"></el-input>
+          </el-col>
+          <el-col :span="8" class="left">
+            <span>查询名称：</span>
+            <el-input v-model="input" placeholder="请输入名称"></el-input>
+          </el-col>
+          <el-col :span="8" class="right">
+            <el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
+            <el-button size="mini" type="success" icon="el-icon-check" @click="addData()">添加用户</el-button>
+          </el-col>
         </el-col>
-      </el-col>
-      <el-col :span="22" class="sousuo">
-        查询身份证 <el-input v-model="input" placeholder="查询身份证" size="mini" style="width:200px"></el-input>
-
-        查询名称<el-input v-model="input" placeholder="查询名称" size="mini" style="width:200px;margin-left: 10px"></el-input>
-        <el-button type="primary" icon="el-icon-search" @click="onSubmit" size="mini">查询</el-button>
-        <el-button type="success" icon="el-icon-check" @click="openDialog()" size="mini">添加用户</el-button>
-      </el-col>
-      <el-col :span="24" class="biaoge">
-        <el-table :data="tableData" style="width: 100%" border>
-          <el-table-column label="序号" type="index" width="50" align="center"> </el-table-column>
-          <el-table-column prop="name" label="姓名" width="100" align="center"> </el-table-column>
-          <el-table-column prop="sfzh" label="身份证号" width="160" align="center"> </el-table-column>
-          <el-table-column prop="title" label="登陆名称" width="100" align="center"> </el-table-column>
-          <el-table-column prop="tel" label="联系电话" width="120" align="center"> </el-table-column>
-          <el-table-column prop="email" label="电子邮箱" width="208" align="center"> </el-table-column>
-          <el-table-column prop="date" label="创建时间" width="120" align="center"> </el-table-column>
-          <el-table-column label="操作" width="180" align="center">
-            <template slot-scope="scoped">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="openDialog(scoped.$index)"></el-button>
-
-              <el-button type="text" size="mini" icon="el-icon-document" @click="openDialogs(scoped.$index.tableData)"></el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click.prevent="deleteRow(scoped.$index.tableData)"> </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-dialog title="详情页" :visible.sync="dialog" width="30%">
-          <el-col>
-            <el-col :span="24"> 姓名 </el-col>
-            <el-col :span="24">身份证号</el-col>
-            <el-col :span="24">登陆名称</el-col>
-            <el-col :span="24">联系电话</el-col>
-            <el-col :span="24">联系电话</el-col>
-            <el-col :span="24">电子邮箱</el-col>
-            <el-col :span="24">创建时间</el-col>
+        <el-col :span="24" class="main">
+          <el-table :data="tableData" style="width: 100%" border>
+            <el-table-column label="序号" type="index" width="50" align="left"> </el-table-column>
+            <el-table-column prop="name" label="名称" width="80" align="left"> </el-table-column>
+            <el-table-column prop="sfzh" label="身份证号" width="180" align="left"> </el-table-column>
+            <el-table-column prop="loginName" label="登录名称" width="80" align="left"> </el-table-column>
+            <el-table-column prop="tel" label="联系电话" width="120" align="left"> </el-table-column>
+            <el-table-column prop="email" label="邮箱" align="left"> </el-table-column>
+            <el-table-column prop="date" label="创建时间" align="left"> </el-table-column>
+            <el-table-column label="操作" align="left">
+              <template slot-scope="scoped">
+                <el-button size="mini" type="primary" icon="el-icon-view" @click="openDialog(scoped.$index)"></el-button>
+                <el-button size="mini" type="primary" icon="el-icon-edit" @click="addData(scoped.$index)"></el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scoped.$index, tableData)"></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="1"
+            >
+            </el-pagination>
           </el-col>
-          <el-button>取 消</el-button>
-          <el-button type="primary">确 定</el-button>
-        </el-dialog>
+        </el-col>
       </el-col>
     </el-row>
+    <el-dialog title="详细信息" :visible.sync="dialog">
+      <el-col :span="24" class="dataInfo">
+        <el-col :span="24"> 姓名：{{ info.name }} </el-col>
+        <el-col :span="24"> 身份证号：{{ info.sfzh }} </el-col>
+        <el-col :span="24"> 登录名称：{{ info.loginName }} </el-col>
+        <el-col :span="24"> 联系电话：{{ info.tel }} </el-col>
+        <el-col :span="24"> 邮箱：{{ info.email }} </el-col>
+        <el-col :span="24"> 创建时间：{{ info.date }} </el-col>
+      </el-col>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import topInfo from '@/layout/top.vue';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    topInfo, //头部标题
+  },
   data: () => ({
-    dialog: false,
-    currentPage: 1,
+    topTitle: '用户管理',
     input: '',
     tableData: [
       {
-        name: '王小开虎',
-        sfzh: '1234568912345689',
-        title: '测试',
-        tel: '1234568901',
+        name: '测试人员',
+        sfzh: '220182199603257019',
+        loginName: '测试人员',
+        tel: '17319450324',
+        email: '17319450324@163.com',
+        date: '2019-01-10',
+      },
+      {
+        name: '十条数据',
+        sfzh: '220182199603257019',
+        loginName: '测试人员',
+        tel: '17319450324',
         email: '17319450324@163.com',
-        date: '2019-01-08',
+        date: '2019-01-10',
       },
     ],
+    currentPage: 1,
+    dialog: false,
+    info: {},
   }),
   created() {},
   computed: {},
   methods: {
-    openDialogs(index) {
-      this.dialog = true;
-    },
-    openDialog(index) {
-      if (index !== undefined) {
-        let data = JSON.parse(JSON.stringify(this.tableData[index]));
-        data[`index`] = index;
-        this.$set(this, `form`, data);
-        this.$router.push({ path: './detail' });
-      } else {
-        this.form = {};
-        this.$router.push({ path: './detail' });
-      }
-    },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
     },
+    addData(index) {
+      if (index !== undefined) {
+        let data = this.tableData[index];
+      } else {
+        this.form = {};
+      }
+      this.$router.push({ path: './detail' });
+    },
     deleteRow(index, rows) {
       rows.splice(index, 1);
     },
-    // toadd() {
-    //   this.$router.push({ path: './detail' });
-    // },
-    onSubmit() {
-      console.log('submit!');
-    },
-    handleEdit(index, row) {
-      console.log(index, row);
-    },
-    handleDelete(index, row) {
-      console.log(index, row);
+    openDialog(index) {
+      if (index !== undefined) {
+        let data = JSON.parse(JSON.stringify(this.tableData[index]));
+        data[`index`] = index;
+        this.$set(this, `info`, data);
+      }
+      this.dialog = true;
     },
   },
 };
@@ -121,49 +130,49 @@ export default {
 <style lang="less" scoped>
 .top {
   height: 40px;
-  width: 100%;
-  border-bottom: 1px solid #e5e5e5;
   background-color: #f5f5f5;
 }
-.home {
-  font-size: 15px;
-  padding: 10px 0px 0px 20px;
-}
-
-/deep/.el-breadcrumb {
-  font-size: 14px;
-  line-height: 3;
-}
-.sousuo {
+.search {
   height: 40px;
-  width: 100%;
-  padding: 0 20px;
-  font-size: 10px;
   line-height: 40px;
+  padding: 0 15px;
 }
-.biaoge {
-  padding: 0 20px;
+.search .left span {
+  font-size: 13px;
+  color: #393939;
 }
-/deep/.el-input__inner {
-  border-radius: 0px;
+.search .left .el-input {
+  width: 50%;
 }
-
-.el-button {
-  border-radius: 0px;
-  margin: 0 0 0 10px;
+/deep/.search .left .el-input .el-input__inner {
+  height: 28px;
 }
-
-/deep/.el-table__header tr,
-/deep/.el-table__header th {
-  padding: 0;
-  height: 40px;
+.main {
+  width: 97%;
+  margin: 0 15px;
 }
-/deep/.el-table__body tr,
-/deep/.el-table__body td {
-  padding: 0;
-  height: 40px;
+/deep/.el-table th {
+  padding: 5px 0;
+  background: #f2f2f2;
+}
+/deep/.el-table td {
+  padding: 5px 0;
+}
+/deep/.el-table tr {
+  background: #f9f9f9;
+}
+/deep/.el-table tr:nth-child(2n) {
+  background: #fff;
 }
 .page {
   text-align: center;
+  padding: 30px 0;
+}
+/deep/ .el-dialog__body {
+  min-height: 300px;
+}
+.dataInfo .el-col {
+  font-size: 18px;
+  padding: 0 0 20px 0;
 }
 </style>