用戶管理更新

src/layout/layout-part/menus.vue

@@ -6,7 +6,7 @@
       <el-menu-item index="/policy/index"> <i class="el-icon-s-grid"></i>科技政策</el-menu-item>
       <el-menu-item index="/record/index"> <i class="el-icon-s-grid"></i>科技数据</el-menu-item>
       <el-menu-item index="/serve/index"> <i class="el-icon-s-grid"></i>科技服务</el-menu-item>
-      <el-menu-item index="/resource/index"> <i class="el-icon-s-grid"></i>科技资源</el-menu-item>
+      <!-- <el-menu-item index="/resource/index"> <i class="el-icon-s-grid"></i>科技资源</el-menu-item> -->
       <el-submenu index="1">
         <template v-slot:title>
           <i class="el-icon-s-grid"></i>
@@ -21,6 +21,7 @@
         </el-menu-item-group>
       </el-submenu>
       <el-menu-item index="/site/index"> <i class="el-icon-s-grid"></i>站点信息管理</el-menu-item>
+      <el-menu-item index="/user/index"> <i class="el-icon-s-grid"></i>用户管理</el-menu-item>
       <el-menu-item index="/links/index"> <i class="el-icon-attract"></i>友情链接管理</el-menu-item>
       <el-menu-item index="/supermaket/chanpinType"> <i class="el-icon-s-grid"></i>产品类型字典表</el-menu-item>
     </el-menu>

src/layout/user/mainData.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="mainData">
+    <el-row>
+      <el-col :span="24" class="mainData">
+        <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="100" 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="100" align="left"> </el-table-column>
+          <el-table-column prop="phone" label="联系电话" width="145" align="left"> </el-table-column>
+          <el-table-column prop="email" label="电子邮箱" width="170" align="left"> </el-table-column>
+          <el-table-column prop="date" label="创建时间" width="100" align="left"> </el-table-column>
+          <el-table-column label="操作" width="200" align="left">
+            <template slot-scope="scoped">
+              <el-button
+                size="mini"
+                type="primary"
+                icon="el-icon-edit"
+                @click="$router.push({ path: '/user/detail', query: { id: scoped.row.id } })"
+              ></el-button>
+              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scoped.row)"></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="total"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainData',
+  props: {
+    tableData: null,
+    total: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    handleDelete(item) {
+      this.$emit('delete', item);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+/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;
+}
+.text {
+  font-size: 16px;
+  padding: 0 0 10px 0;
+}
+.text span {
+  display: inherit;
+  text-indent: 1rem;
+}
+</style>

src/layout/user/mainForm.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="mainForm">
+    <el-row>
+      <el-col :span="24" class="linksForm">
+        <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.phone" 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-input v-model="form.name" placeholder="请输入可管理对象"></el-input>
+          </el-form-item>
+          <el-form-item label="用户简介">
+            <el-input type="textarea" v-model="form.content" 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-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainForm',
+  props: {
+    form: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    handleEdit() {
+      this.$emit('submitDate', { data: this.form, id: this.form.id });
+    },
+    handleCancel() {
+      this.$router.push({ path: '/user/index' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.linksForm {
+  margin: 20px 0 0 0;
+}
+.el-form {
+  padding: 0 200px;
+}
+</style>

src/layout/user/searchInfo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="searchInfo">
+    <el-row>
+      <el-col :span="24" class="searchInfo">
+        <el-col :span="6" class="left">
+          <span>查询身份证：</span>
+          <el-input v-model="input" placeholder="请输入身份证"></el-input>
+        </el-col>
+        <el-col :span="6" class="left">
+          <span>查询名称：</span>
+          <el-input v-model="input" placeholder="请输入名称"></el-input>
+        </el-col>
+        <el-col :span="6" 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-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'searchInfo',
+  props: {},
+  components: {},
+  data: () => ({
+    input: '',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    addData() {
+      this.$router.push({ path: '/user/detail' });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.searchInfo .left span {
+  font-size: 13px;
+  color: #393939;
+}
+.searchInfo .left .el-input {
+  width: 50%;
+}
+/deep/.searchInfo .left .el-input .el-input__inner {
+  height: 28px;
+}
+</style>

src/router/index.js

@@ -132,6 +132,17 @@ export default new Router({
       meta: { title: '网站设置' },
       component: () => import('../views/site/index.vue'),
     },
+    // 用户管理
+    {
+      path: '/user/index',
+      meta: { title: '用户设置' },
+      component: () => import('../views/user/index.vue'),
+    },
+    {
+      path: '/user/detail',
+      meta: { title: '添加用户' },
+      component: () => import('../views/user/detail.vue'),
+    },
     // 友情链接管理
     {
       path: '/links/index',

src/views/user/detail.vue

@@ -0,0 +1,45 @@
+<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">
+          <mainForm :form="form" @submitDate="updateDate"></mainForm>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import mainForm from '@/layout/user/mainForm.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    topInfo, //头部标题
+    mainForm, //用户添加管理
+  },
+  data: () => ({
+    topTitle: '用户添加',
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+</style>

src/views/user/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="index">
+    <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">
+          <searchInfo></searchInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <mainData :tableData="tableData" :total="total" @delete="deleteData"></mainData>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import searchInfo from '@/layout/user/searchInfo.vue';
+import mainData from '@/layout/user/mainData.vue';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    topInfo, //头部标题
+    searchInfo, //搜索
+    mainData, //用户列表
+  },
+  data: () => ({
+    topTitle: '用户管理',
+    tableData: [
+      {
+        name: '名稱',
+        sfzh: '220182199603257019',
+        loginName: 'jalsfjalsfj',
+        phone: '0431-12345678',
+        email: '123456789@163.com',
+        date: '2020-01-01',
+      },
+    ],
+    total: 0,
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+</style>