更新用户列表和添加页面

src/layout/main-layout.vue

@@ -43,7 +43,7 @@ export default {
 }
 .contain {
   height: 100%;
-  margin: 2rem 3.5rem;
+  margin: 20px 30px;
   border: 1px solid #a2a2b6;
   background: #eeeeee;
 }
@@ -56,7 +56,7 @@ export default {
 }
 .main {
   margin: 0;
-  padding: 0 2rem;
+  padding: 0;
   background: #ffffff;
 }
 </style>

src/views/userManage/user/detail.vue

@@ -1,6 +1,62 @@
 <template>
   <div id="detail">
-    <p>detail</p>
+    <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>
+        </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-item>
+            <el-form-item label="姓名">
+              <el-input v-model="form.name" 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>返回</el-button>
+              <el-button type="primary" @click="onSubmit">提交</el-button>
+            </el-col>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -9,11 +65,38 @@ export default {
   name: 'detail',
   props: {},
   components: {},
-  data: () => ({}),
+  data: () => ({
+    form: {},
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    onSubmit() {
+      console.log('submit!');
+    },
+  },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<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;
+}
+</style>

src/views/userManage/user/index.vue

@@ -1,8 +1,40 @@
 <template>
   <div id="index">
-    <el-row>
-      <el-col :span="24">
-        <el-button><el-link href="./detail">添加</el-link></el-button>
+    <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-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>
+      </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 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">
+            <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>
     </el-row>
   </div>
@@ -13,11 +45,94 @@ export default {
   name: 'index',
   props: {},
   components: {},
-  data: () => ({}),
+  data: () => ({
+    input: '',
+    formInline: {
+      card: '',
+      name: '',
+      region: '',
+    },
+    tableData: [
+      {
+        name: '王小开虎',
+        sfzh: '1234568912345689',
+        title: '测试',
+        tel: '1234568901',
+        email: '17319450324@163.com',
+        date: '2019-01-08',
+      },
+      {
+        name: '王小虎',
+        sfzh: '1234568912345689',
+        title: '测试',
+        tel: '0431-123456',
+        email: '123456@163.com',
+        date: '2019-01-08',
+      },
+    ],
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    toadd() {
+      this.$router.push({ path: './detail' });
+    },
+    onSubmit() {
+      console.log('submit!');
+    },
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+  },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<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 {
+  height: 40px;
+  width: 100%;
+  padding: 0 20px;
+  font-size: 10px;
+  line-height: 40px;
+}
+.biaoge {
+  padding: 0 20px;
+}
+/deep/.el-input__inner {
+  border-radius: 0px;
+}
+
+.el-button {
+  border-radius: 0px;
+  margin: 0 0 0 10px;
+}
+
+/deep/.el-table__header tr,
+/deep/.el-table__header th {
+  padding: 0;
+  height: 40px;
+}
+/deep/.el-table__body tr,
+/deep/.el-table__body td {
+  padding: 0;
+  height: 40px;
+}
+</style>