SpaceOfCheng
/
admin
Observar 3
Favorito 0
Fork 0
Código Issues 0 Pull Requests 0 Versões 2 Atividade
Ver código fonte

ytj

yuantianjiao 6 anos atrás
pai
71c0d4f3e1
commit
b13390a8a4
12 arquivos alterados com 999 adições e 162 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 1
    1
      index.html
  2. 174
    0
      src/pages/system/courseManger/fiveA/add.vue
  3. 178
    0
      src/pages/system/courseManger/fiveA/edit.vue
  4. 101
    84
      src/pages/system/courseManger/fiveA/index.vue
  5. 0
    36
      src/pages/system/courseManger/fiveA/page.scss
  6. 24
    0
      src/pages/system/page.js
  7. 200
    0
      src/pages/system/systemSet/userManger/add.vue
  8. 200
    0
      src/pages/system/systemSet/userManger/edit.vue
  9. 85
    5
      src/pages/system/systemSet/userManger/index.vue
  10. 0
    36
      src/pages/system/systemSet/userManger/page.scss
  11. 1
    0
      src/store/index.js
  12. 35
    0
      src/store/user/index.js

+ 1
- 1
index.html Ver arquivo 

@@ -3,7 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 5 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_lqx0smsce7.css">
6 
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_c8w80pqou5c.css">
7 7 
     <title>城的空间后台管理系统</title>
8 8 
   </head>
9 9 
   <body>

+ 174
- 0
src/pages/system/courseManger/fiveA/add.vue Ver arquivo 

@@ -0,0 +1,174 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <form class="mainForm">
4 
+      <ul>
5 
+        <li class="flex-h">
6 
+          <span>上级课程类型：</span>
7 
+          <div class="flex-item">
8 
+            <div style="width:50%">
9 
+              <el-input
10 
+                placeholder="请输入内容"
11 
+                v-model="postData.label"
12 
+                @focus="showTree"
13 
+                readonly
14 
+                clearable>
15 
+              </el-input>
16 
+            </div>
17 
+          </div>
18 
+        </li>
19 
+        <li class="flex-h">
20 
+          <span>名称：</span>
21 
+          <div class="flex-item">
22 
+            <div style="width:50%">
23 
+              <el-input
24 
+                placeholder="请输入名称"
25 
+                v-model="postData.name"
26 
+                clearable>
27 
+              </el-input>
28 
+            </div>
29 
+          </div>
30 
+        </li>
31 
+        <li class="flex-h">
32 
+          <span>标题：</span>
33 
+          <div class="flex-item">
34 
+            <div style="width:50%">
35 
+              <el-input
36 
+                placeholder="请输入标题"
37 
+                v-model="postData.title"
38 
+                clearable>
39 
+              </el-input>
40 
+            </div>
41 
+          </div>
42 
+        </li>
43 
+        <li class="flex-h">
44 
+          <span>咨询分类：</span>
45 
+          <div class="flex-item">
46 
+            <div style="width:50%">
47 
+              <el-input
48 
+                placeholder="请输入咨询分类"
49 
+                v-model="postData.class"
50 
+                clearable>
51 
+              </el-input>
52 
+            </div>
53 
+          </div>
54 
+        </li>
55 
+        <li class="flex-h">
56 
+          <span>编码：</span>
57 
+          <div class="flex-item">
58 
+            <div style="width:50%">
59 
+              <el-input
60 
+                placeholder="请输入编码"
61 
+                v-model="postData.coding"
62 
+                clearable>
63 
+              </el-input>
64 
+            </div>
65 
+          </div>
66 
+        </li>
67 
+        <li class="flex-h">
68 
+          <span>序号：</span>
69 
+          <div class="flex-item">
70 
+            <div style="width:50%">
71 
+              <el-input
72 
+                placeholder="请输入序号"
73 
+                v-model="postData.number"
74 
+                clearable>
75 
+              </el-input>
76 
+            </div>
77 
+          </div>
78 
+        </li>
79 
+        <li class="flex-h">
80 
+          <span>课程图片：</span>
81 
+          <div class="flex-item">
82 
+            <div>
83 
+              <a class="formImg">
84 
+                <img src="" class="centerLabel contain" alt="">
85 
+                <i class="iconfont icon-quxiao"></i>
86 
+              </a>
87 
+              <el-button type="success" size="mini">上传图片</el-button>
88 
+            </div>
89 
+          </div>
90 
+        </li>
91 
+        <li style="text-align:center">
92 
+          <el-button type="primary" size="mini">保存</el-button>
93 
+          <el-button type="danger" size="mini">取消</el-button>
94 
+        </li>
95 
+      </ul>
96 
+    </form>
97 
+    <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
98 
+      <el-tree
99 
+        class="flxe-h"
100 
+        :data="treeData"
101 
+        :default-expand-all="true"
102 
+        :expand-on-click-node="false"
103 
+        @node-click="handleNodeClick"></el-tree>
104 
+    </el-dialog>
105 
+  </div>
106 
+</template>
107 
+
108 
+<script>
109 
+
110 
+export default {
111 
+  name: '',
112 
+  data () {
113 
+    return {
114 
+      postData: {
115 
+        label: '', // 父页面带入的上级类型
116 
+        name: '', // 名称
117 
+        title: '', // 标题
118 
+        class: '', // 咨询分类
119 
+        coding: '', // 编码
120 
+        number: '', // 序号
121 
+      },
122 
+      dialogTableVisible: false,
123 
+      treeData: [{
124 
+        label: '根目录',
125 
+        rank: '0',
126 
+        img: '',
127 
+        children: [{
128 
+          label: '共享课程&书吧',
129 
+          rank: '0',
130 
+          img: '',
131 
+          children: [{
132 
+            label: '健身',
133 
+            rank: '0',
134 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
135 
+          }, {
136 
+            label: '健康',
137 
+            rank: '0',
138 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
139 
+          }, {
140 
+            label: '艺术',
141 
+            rank: '0',
142 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
143 
+          }, {
144 
+            label: '社交',
145 
+            rank: '0',
146 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
147 
+          }, {
148 
+            label: '教育',
149 
+            rank: '0',
150 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
151 
+          }]
152 
+        }]
153 
+      }]
154 
+    }
155 
+  },
156 
+  components: {},
157 
+  methods: {
158 
+    showTree () {
159 
+      this.dialogTableVisible = true
160 
+    },
161 
+    handleNodeClick (node) {
162 
+      this.postData.label = node.label
163 
+      this.dialogTableVisible = false
164 
+    }
165 
+  },
166 
+  mounted () {
167 
+    this.postData.label = this.$route.query.label
168 
+  }
169 
+}
170 
+</script>
171 
+
172 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
173 
+<style lang="scss" scoped>
174 
+</style>

+ 178
- 0
src/pages/system/courseManger/fiveA/edit.vue Ver arquivo 

@@ -0,0 +1,178 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <form class="mainForm">
4 
+      <ul>
5 
+        <li class="flex-h">
6 
+          <span>上级课程类型：</span>
7 
+          <div class="flex-item">
8 
+            <div style="width:50%">
9 
+              <el-input
10 
+                placeholder="请输入内容"
11 
+                v-model="postData.label"
12 
+                @focus="showTree"
13 
+                readonly
14 
+                clearable>
15 
+              </el-input>
16 
+            </div>
17 
+          </div>
18 
+        </li>
19 
+        <li class="flex-h">
20 
+          <span>名称：</span>
21 
+          <div class="flex-item">
22 
+            <div style="width:50%">
23 
+              <el-input
24 
+                placeholder="请输入名称"
25 
+                v-model="postData.name"
26 
+                clearable>
27 
+              </el-input>
28 
+            </div>
29 
+          </div>
30 
+        </li>
31 
+        <li class="flex-h">
32 
+          <span>标题：</span>
33 
+          <div class="flex-item">
34 
+            <div style="width:50%">
35 
+              <el-input
36 
+                placeholder="请输入标题"
37 
+                v-model="postData.title"
38 
+                clearable>
39 
+              </el-input>
40 
+            </div>
41 
+          </div>
42 
+        </li>
43 
+        <li class="flex-h">
44 
+          <span>咨询分类：</span>
45 
+          <div class="flex-item">
46 
+            <div style="width:50%">
47 
+              <el-input
48 
+                placeholder="请输入咨询分类"
49 
+                v-model="postData.class"
50 
+                clearable>
51 
+              </el-input>
52 
+            </div>
53 
+          </div>
54 
+        </li>
55 
+        <li class="flex-h">
56 
+          <span>编码：</span>
57 
+          <div class="flex-item">
58 
+            <div style="width:50%">
59 
+              <el-input
60 
+                placeholder="请输入编码"
61 
+                v-model="postData.coding"
62 
+                clearable>
63 
+              </el-input>
64 
+            </div>
65 
+          </div>
66 
+        </li>
67 
+        <li class="flex-h">
68 
+          <span>序号：</span>
69 
+          <div class="flex-item">
70 
+            <div style="width:50%">
71 
+              <el-input
72 
+                placeholder="请输入序号"
73 
+                v-model="postData.number"
74 
+                clearable>
75 
+              </el-input>
76 
+            </div>
77 
+          </div>
78 
+        </li>
79 
+        <li class="flex-h">
80 
+          <span>课程图片：</span>
81 
+          <div class="flex-item">
82 
+            <div>
83 
+              <a class="formImg">
84 
+                <img src="" class="centerLabel contain" alt="">
85 
+                <i class="iconfont icon-quxiao"></i>
86 
+              </a>
87 
+              <el-button type="success" size="mini">上传图片</el-button>
88 
+            </div>
89 
+          </div>
90 
+        </li>
91 
+        <li style="text-align:center">
92 
+          <el-button type="primary" size="mini">保存</el-button>
93 
+          <el-button type="danger" size="mini">取消</el-button>
94 
+        </li>
95 
+      </ul>
96 
+    </form>
97 
+    <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
98 
+      <el-tree
99 
+        class="flxe-h"
100 
+        :data="treeData"
101 
+        :default-expand-all="true"
102 
+        :expand-on-click-node="false"
103 
+        @node-click="handleNodeClick"></el-tree>
104 
+    </el-dialog>
105 
+  </div>
106 
+</template>
107 
+
108 
+<script>
109 
+
110 
+export default {
111 
+  name: '',
112 
+  data () {
113 
+    return {
114 
+      postData: {
115 
+        label: '', // 父页面带入的上级类型
116 
+        name: '', // 名称
117 
+        title: '', // 标题
118 
+        class: '', // 咨询分类
119 
+        coding: '', // 编码
120 
+        number: '', // 序号
121 
+      },
122 
+      dialogTableVisible: false,
123 
+      treeData: [{
124 
+        label: '根目录',
125 
+        rank: '0',
126 
+        img: '',
127 
+        children: [{
128 
+          label: '共享课程&书吧',
129 
+          rank: '0',
130 
+          img: '',
131 
+          children: [{
132 
+            label: '健身',
133 
+            rank: '0',
134 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
135 
+          }, {
136 
+            label: '健康',
137 
+            rank: '0',
138 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
139 
+          }, {
140 
+            label: '艺术',
141 
+            rank: '0',
142 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
143 
+          }, {
144 
+            label: '社交',
145 
+            rank: '0',
146 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
147 
+          }, {
148 
+            label: '教育',
149 
+            rank: '0',
150 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
151 
+          }]
152 
+        }]
153 
+      }]
154 
+    }
155 
+  },
156 
+  components: {},
157 
+  methods: {
158 
+    showTree () {
159 
+      this.dialogTableVisible = true
160 
+    },
161 
+    handleNodeClick (node) {
162 
+      this.postData.label = node.label
163 
+      this.dialogTableVisible = false
164 
+    },
165 
+    init () {
166 
+      console.log('请求初始化数据')
167 
+    }
168 
+  },
169 
+  mounted () {
170 
+    this.postData.label = this.$route.query.label
171 
+    this.init()
172 
+  }
173 
+}
174 
+</script>
175 
+
176 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
177 
+<style lang="scss" scoped>
178 
+</style>

+ 101
- 84
src/pages/system/courseManger/fiveA/index.vue Ver arquivo 

@@ -1,49 +1,26 @@
1 1 
 <template>
2 2 
   <div class="subPage">
3 
+    <div class="system-table-search">
4 
+      <div class="flex-h">
5 
+      </div>
6 
+      <div class="moreFilter"></div>
7 
+    </div>
3 8 
     <div class="system-table-box">
4 
-      <el-table
5 
-        :data="tableData5"
6 
-        style="width: 100%">
7 
-        <el-table-column type="expand">
8 
-          <template slot-scope="props">
9 
-            <el-form label-position="left" inline class="demo-table-expand">
10 
-              <el-form-item label="商品名称">
11 
-                <span>{{ props.row.name }}</span>
12 
-              </el-form-item>
13 
-              <el-form-item label="所属店铺">
14 
-                <span>{{ props.row.shop }}</span>
15 
-              </el-form-item>
16 
-              <el-form-item label="商品">
17 
-                <span>{{ props.row.id }}</span>
18 
-              </el-form-item>
19 
-              <el-form-item label="店铺 ID">
20 
-                <span>{{ props.row.shopId }}</span>
21 
-              </el-form-item>
22 
-              <el-form-item label="商品分类">
23 
-                <span>{{ props.row.category }}</span>
24 
-              </el-form-item>
25 
-              <el-form-item label="店铺地址">
26 
-                <span>{{ props.row.address }}</span>
27 
-              </el-form-item>
28 
-              <el-form-item label="商品描述">
29 
-                <span>{{ props.row.desc }}</span>
30 
-              </el-form-item>
31 
-            </el-form>
32 
-          </template>
33 
-        </el-table-column>
34 
-        <el-table-column
35 
-          label="商品 ID"
36 
-          prop="id">
37 
-        </el-table-column>
38 
-        <el-table-column
39 
-          label="商品名称"
40 
-          prop="name">
41 
-        </el-table-column>
42 
-        <el-table-column
43 
-          label="描述"
44 
-          prop="desc">
45 
-        </el-table-column>
46 
-      </el-table>
9 
+      <div class="flex-h table-title">
10 
+        <span style="width:20px"></span>
11 
+        <div class="flex-item">标题</div>
12 
+        <div class="flex-item">排序</div>
13 
+        <div class="flex-item">类型图片</div>
14 
+        <div class="flex-item">操作</div>
15 
+      </div>
16 
+      <el-tree
17 
+      class="flxe-h"
18 
+      :data="data"
19 
+      :default-expand-all="true"
20 
+      :expand-on-click-node="false"
21 
+      :render-content="renderContent"
22 
+      :indent="0"
23 
+      @node-click="handleNodeClick"></el-tree>
47 24 
     </div>
48 25 
   </div>
49 26 
 </template>

@@ -58,38 +35,36 @@ export default {
58 35 
   name: '',
59 36 
   data () {
60 37 
     return {
61 
-      tableData5: [{
62 
-        id: '12987122',
63 
-        name: '好滋好味鸡蛋仔',
64 
-        category: '江浙小吃、小吃零食',
65 
-        desc: '荷兰优质淡奶，奶香浓而不腻',
66 
-        address: '上海市普陀区真北路',
67 
-        shop: '王小虎夫妻店',
68 
-        shopId: '10333'
69 
-      }, {
70 
-        id: '12987123',
71 
-        name: '好滋好味鸡蛋仔',
72 
-        category: '江浙小吃、小吃零食',
73 
-        desc: '荷兰优质淡奶，奶香浓而不腻',
74 
-        address: '上海市普陀区真北路',
75 
-        shop: '王小虎夫妻店',
76 
-        shopId: '10333'
77 
-      }, {
78 
-        id: '12987125',
79 
-        name: '好滋好味鸡蛋仔',
80 
-        category: '江浙小吃、小吃零食',
81 
-        desc: '荷兰优质淡奶，奶香浓而不腻',
82 
-        address: '上海市普陀区真北路',
83 
-        shop: '王小虎夫妻店',
84 
-        shopId: '10333'
85 
-      }, {
86 
-        id: '12987126',
87 
-        name: '好滋好味鸡蛋仔',
88 
-        category: '江浙小吃、小吃零食',
89 
-        desc: '荷兰优质淡奶，奶香浓而不腻',
90 
-        address: '上海市普陀区真北路',
91 
-        shop: '王小虎夫妻店',
92 
-        shopId: '10333'
38 
+      data: [{
39 
+        label: '根目录',
40 
+        rank: '0',
41 
+        img: '',
42 
+        children: [{
43 
+          label: '共享课程&书吧',
44 
+          rank: '0',
45 
+          img: '',
46 
+          children: [{
47 
+            label: '健身',
48 
+            rank: '0',
49 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
50 
+          }, {
51 
+            label: '健康',
52 
+            rank: '0',
53 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
54 
+          }, {
55 
+            label: '艺术',
56 
+            rank: '0',
57 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
58 
+          }, {
59 
+            label: '社交',
60 
+            rank: '0',
61 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
62 
+          }, {
63 
+            label: '教育',
64 
+            rank: '0',
65 
+            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
66 
+          }]
67 
+        }]
93 68 
       }]
94 69 
     }
95 70 
   },

@@ -102,14 +77,16 @@ export default {
102 77 
     tableSearch,
103 78 
   },
104 79 
   methods: {
105 
-    addSubCourseType (index, row) { // 添加下级课程类型
106 
-      console.log(index, row)
80 
+    handleNodeClick (node, data) { // 添加下级课程类型
81 
+      console.log(node, data)
82 
+      this.$router.push({ name: 'addFiveA', query: { label: data.label } })
107 83 
     },
108 
-    handleEdit (index, row) { // 编辑
109 
-      console.log(index, row)
84 
+    handleEdit (node, data) { // 编辑
85 
+      console.log(node, data)
86 
+      this.$router.push({ name: 'addFiveA', query: { label: data.label } })
110 87 
     },
111 
-    handleDelete (index, row) { // 删除
112 
-      console.log(index, row)
88 
+    handleDelete (node, data) { // 删除
89 
+      console.log(node, data)
113 90 
       this.$confirm('确认删除此数据?', '提示', {
114 91 
         confirmButtonText: '确定',
115 92 
         cancelButtonText: '取消',

@@ -125,12 +102,52 @@ export default {
125 102 
           message: '已取消删除'
126 103 
         })
127 104 
       })
105 
+    },
106 
+    renderContent (h, { node, data, store }) {
107 
+      // console.log(node)
108 
+      return (
109 
+        <span class="custom-tree-node">
110 
+          <div class='tree-node-item'>{node.label}</div>
111 
+          <div class='tree-node-item'>{node.data.rank}</div>
112 
+          <div class='tree-node-item'>
113 
+            <div class='tableImg'>
114 
+              <img src={node.data.img}></img>
115 
+            </div>
116 
+          </div>
117 
+          <div class='tree-node-item'>
118 
+            <el-button size="mini" type="primary" on-click={() => this.handleNodeClick(node, data)}>添加下级课程类型</el-button>
119 
+            <el-button size="mini" type="warning" on-click={() => this.handleEdit(node, data)}>编辑</el-button>
120 
+            <el-button size="mini" type="danger" on-click={() => this.handleDelete(node, data)}>删除</el-button>
121 
+          </div>
122 
+        </span>)
128 123 
     }
129 124 
   }
130 125 
 }
131 126 
 </script>
132 127
133 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
134 
-<style lang="scss" scoped>
135 
-@import "page.scss";
128 
+<style lang="scss">
129 
+.custom-tree-node {
130 
+  flex: 1;
131 
+  display: flex;
132 
+  align-items: center;
133 
+  justify-content: space-around;
134 
+  font-size: 14px;
135 
+  padding-right: 8px;
136 
+  .tree-node-item {
137 
+    width: 20%;
138 
+    text-align: center;
139 
+  }
140 
+  .tree-node-item:nth-of-type(4) {
141 
+    min-width: 22rem;
142 
+  }
143 
+}
144 
+.el-tree-node__content {
145 
+  height: auto;
146 
+}
147 
+.table-title {
148 
+  div {
149 
+    padding: 1rem;
150 
+    text-align: center;
151 
+  }
152 
+}
136 153 
 </style>

+ 0
- 36
src/pages/system/courseManger/fiveA/page.scss Ver arquivo 

@@ -1,36 +0,0 @@
1 
-
2 
-
3 
-
4 
-
5 
-
6 
-
7 
-
8 
-
9 
-
10 
-
11 
-
12 
-
13 
-
14 
-
15 
-
16 
-
17 
-
18 
-
19 
-
20 
-
21 
-
22 
-
23 
-
24 
-
25 
-
26 
-
27 
-
28 
-
29 
-
30 
-
31 
-
32 
-
33 
-
34 
-
35 
-
36 
-

+ 24
- 0
src/pages/system/page.js Ver arquivo 

@@ -3,6 +3,8 @@ import system from './index' // 系统首页
3 3
4 4 
 import systemSet from './systemSet/index' // 系统设置
5 5 
 import userManger from './systemSet/userManger/index' // 用户管理
6 
+import addUser from './systemSet/userManger/add' // 添加用户
7 
+import editUser from './systemSet/userManger/edit' // 编辑用户
6 8 
 import characterManger from './systemSet/characterManger/index' // 角色管理
7 9
8 10 
 import caseManger from './caseManger/index' // 案场管理

@@ -28,6 +30,8 @@ import channelList from './channelManager/channelList/index' // 渠道列表
28 30
29 31 
 import courseManger from './courseManger/index' // 课程管理
30 32 
 import fiveA from './courseManger/fiveA/index' // 全龄生活5A
33 
+import addFiveA from './courseManger/fiveA/add' // 全龄生活5A添加
34 
+import editFiveA from './courseManger/fiveA/edit' // 全龄生活5A编辑
31 35 
 import courseTag from './courseManger/courseTag/index' // 课程标签
32 36
33 37 
 import dataStatistics from './dataStatistics/index' // 数据统计

@@ -48,6 +52,16 @@ export default {
48 52 
           name: 'userManger',
49 53 
           component: userManger,
50 54 
           children: []
55 
+        }, { // 添加用户
56 
+          path: 'userManger/addUser',
57 
+          name: 'addUser',
58 
+          component: addUser,
59 
+          children: []
60 
+        }, { // 添加用户
61 
+          path: 'userManger/editUser',
62 
+          name: 'editUser',
63 
+          component: editUser,
64 
+          children: []
51 65 
         }, { // 角色管理
52 66 
           path: 'characterManger',
53 67 
           name: 'characterManger',

@@ -148,6 +162,16 @@ export default {
148 162 
           name: 'fiveA',
149 163 
           component: fiveA,
150 164 
           children: []
165 
+        }, { // 全龄生活5A添加
166 
+          path: 'fiveA/addFiveA',
167 
+          name: 'addFiveA',
168 
+          component: addFiveA,
169 
+          children: []
170 
+        }, { // 全龄生活5A添加
171 
+          path: 'fiveA/editFiveA',
172 
+          name: 'editFiveA',
173 
+          component: editFiveA,
174 
+          children: []
151 175 
         }, { // 课程标签
152 176 
           path: 'courseTag',
153 177 
           name: 'courseTag',

+ 200
- 0
src/pages/system/systemSet/userManger/add.vue Ver arquivo 

@@ -0,0 +1,200 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <form class="mainForm">
4 
+      <ul>
5 
+        <li class="flex-h">
6 
+          <span>用户名：</span>
7 
+          <div class="flex-item">
8 
+            <div style="width:50%">
9 
+              <el-input
10 
+                placeholder="请输入用户名"
11 
+                v-model="postData.userName"
12 
+                clearable>
13 
+              </el-input>
14 
+            </div>
15 
+          </div>
16 
+        </li>
17 
+        <li class="flex-h">
18 
+          <span>密码：</span>
19 
+          <div class="flex-item">
20 
+            <div style="width:50%">
21 
+              <el-input
22 
+                placeholder="请输入密码"
23 
+                v-model="postData.passWord"
24 
+                clearable>
25 
+              </el-input>
26 
+            </div>
27 
+          </div>
28 
+        </li>
29 
+        <li class="flex-h">
30 
+          <span>确认密码：</span>
31 
+          <div class="flex-item">
32 
+            <div style="width:50%">
33 
+              <el-input
34 
+                placeholder="请再输入一次密码"
35 
+                v-model="postData.checkPassWord"
36 
+                clearable>
37 
+              </el-input>
38 
+            </div>
39 
+          </div>
40 
+        </li>
41 
+        <li class="flex-h">
42 
+          <span>用户头像：</span>
43 
+          <div class="flex-item">
44 
+            <div>
45 
+              <a class="formImg">
46 
+                <img src="" class="centerLabel contain" alt="">
47 
+                <i class="iconfont icon-quxiao"></i>
48 
+              </a>
49 
+              <el-button type="success" size="mini">上传图片</el-button>
50 
+            </div>
51 
+          </div>
52 
+        </li>
53 
+        <li class="flex-h">
54 
+          <span>真实姓名：</span>
55 
+          <div class="flex-item">
56 
+            <div style="width:50%">
57 
+              <el-input
58 
+                placeholder="请输入真实姓名"
59 
+                v-model="postData.realName"
60 
+                clearable>
61 
+              </el-input>
62 
+            </div>
63 
+          </div>
64 
+        </li>
65 
+        <li class="flex-h">
66 
+          <span>邮箱：</span>
67 
+          <div class="flex-item">
68 
+            <div style="width:50%">
69 
+              <el-input
70 
+                placeholder="请输入邮箱"
71 
+                v-model="postData.email"
72 
+                clearable>
73 
+              </el-input>
74 
+            </div>
75 
+          </div>
76 
+        </li>
77 
+        <li class="flex-h">
78 
+          <span>工号：</span>
79 
+          <div class="flex-item">
80 
+            <div style="width:50%">
81 
+              <el-input
82 
+                placeholder="请输入工号"
83 
+                v-model="postData.number"
84 
+                clearable>
85 
+              </el-input>
86 
+            </div>
87 
+          </div>
88 
+        </li>
89 
+        <li class="flex-h">
90 
+          <span>手机号：</span>
91 
+          <div class="flex-item">
92 
+            <div style="width:50%">
93 
+              <el-input
94 
+                placeholder="请输入手机号"
95 
+                v-model="postData.mobile"
96 
+                clearable>
97 
+              </el-input>
98 
+            </div>
99 
+          </div>
100 
+        </li>
101 
+        <li class="flex-h">
102 
+          <span>用户标签：</span>
103 
+          <div class="flex-item">
104 
+            <div style="width:50%">
105 
+              <el-select v-model="postData.userLabel" placeholder="请选择">
106 
+                <el-option
107 
+                  v-for="item in userLabelList"
108 
+                  :key="item.value"
109 
+                  :label="item.label"
110 
+                  :value="item.value">
111 
+                </el-option>
112 
+              </el-select>
113 
+            </div>
114 
+          </div>
115 
+        </li>
116 
+        <li class="flex-h">
117 
+          <span>用户类型：</span>
118 
+          <div class="flex-item">
119 
+            <div style="width:50%">
120 
+              <el-select v-model="postData.userLabel" placeholder="请选择">
121 
+                <el-option
122 
+                  v-for="item in userLabelList"
123 
+                  :key="item.value"
124 
+                  :label="item.label"
125 
+                  :value="item.value">
126 
+                </el-option>
127 
+              </el-select>
128 
+            </div>
129 
+          </div>
130 
+        </li>
131 
+        <li class="flex-h">
132 
+          <span>锁定用户：</span>
133 
+          <div class="flex-item">
134 
+            <div style="width:50%">
135 
+              <el-switch
136 
+                v-model="postData.lockUser"
137 
+                active-color="#13ce66"
138 
+                inactive-color="#ff4949">
139 
+              </el-switch>
140 
+            </div>
141 
+          </div>
142 
+        </li>
143 
+        <li class="flex-h">
144 
+          <span>是否案场联系人：</span>
145 
+          <div class="flex-item">
146 
+            <div style="width:50%">
147 
+              <el-switch
148 
+                v-model="postData.linkMan"
149 
+                active-color="#13ce66"
150 
+                inactive-color="#ff4949">
151 
+              </el-switch>
152 
+            </div>
153 
+          </div>
154 
+        </li>
155 
+        <li style="text-align:center">
156 
+          <el-button type="primary" size="mini">保存</el-button>
157 
+          <el-button type="danger" size="mini">取消</el-button>
158 
+        </li>
159 
+      </ul>
160 
+    </form>
161 
+  </div>
162 
+</template>
163 
+
164 
+<script>
165 
+import { createNamespacedHelpers } from 'vuex'
166 
+const { mapState: mapUserState } = createNamespacedHelpers('user')
167 
+export default {
168 
+  name: '',
169 
+  data () {
170 
+    return {
171 
+      postData: {
172 
+        userName: '', // 用户名
173 
+        passWord: '', // 密码
174 
+        checkPassWord: '', // 确认密码
175 
+        realName: '', // 真实姓名
176 
+        email: '', // 邮箱
177 
+        number: '', // 工号
178 
+        mobile: '', // 手机号
179 
+        userLabel: '',
180 
+        lockUser: true,
181 
+        linkMan: true
182 
+      }
183 
+    }
184 
+  },
185 
+  components: {},
186 
+  computed: {
187 
+    ...mapUserState({
188 
+      userLabelList: x => x.userLabelList,
189 
+    })
190 
+  },
191 
+  methods: {
192 
+
193 
+  },
194 
+  mounted () {}
195 
+}
196 
+</script>
197 
+
198 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
199 
+<style lang="scss" scoped>
200 
+</style>

+ 200
- 0
src/pages/system/systemSet/userManger/edit.vue Ver arquivo 

@@ -0,0 +1,200 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <form class="mainForm">
4 
+      <ul>
5 
+        <li class="flex-h">
6 
+          <span>用户名：</span>
7 
+          <div class="flex-item">
8 
+            <div style="width:50%">
9 
+              <el-input
10 
+                placeholder="请输入用户名"
11 
+                v-model="postData.userName"
12 
+                clearable>
13 
+              </el-input>
14 
+            </div>
15 
+          </div>
16 
+        </li>
17 
+        <li class="flex-h">
18 
+          <span>密码：</span>
19 
+          <div class="flex-item">
20 
+            <div style="width:50%">
21 
+              <el-input
22 
+                placeholder="请输入密码"
23 
+                v-model="postData.passWord"
24 
+                clearable>
25 
+              </el-input>
26 
+            </div>
27 
+          </div>
28 
+        </li>
29 
+        <li class="flex-h">
30 
+          <span>确认密码：</span>
31 
+          <div class="flex-item">
32 
+            <div style="width:50%">
33 
+              <el-input
34 
+                placeholder="请再输入一次密码"
35 
+                v-model="postData.checkPassWord"
36 
+                clearable>
37 
+              </el-input>
38 
+            </div>
39 
+          </div>
40 
+        </li>
41 
+        <li class="flex-h">
42 
+          <span>用户头像：</span>
43 
+          <div class="flex-item">
44 
+            <div>
45 
+              <a class="formImg">
46 
+                <img src="" class="centerLabel contain" alt="">
47 
+                <i class="iconfont icon-quxiao"></i>
48 
+              </a>
49 
+              <el-button type="success" size="mini">上传图片</el-button>
50 
+            </div>
51 
+          </div>
52 
+        </li>
53 
+        <li class="flex-h">
54 
+          <span>真实姓名：</span>
55 
+          <div class="flex-item">
56 
+            <div style="width:50%">
57 
+              <el-input
58 
+                placeholder="请输入真实姓名"
59 
+                v-model="postData.realName"
60 
+                clearable>
61 
+              </el-input>
62 
+            </div>
63 
+          </div>
64 
+        </li>
65 
+        <li class="flex-h">
66 
+          <span>邮箱：</span>
67 
+          <div class="flex-item">
68 
+            <div style="width:50%">
69 
+              <el-input
70 
+                placeholder="请输入邮箱"
71 
+                v-model="postData.email"
72 
+                clearable>
73 
+              </el-input>
74 
+            </div>
75 
+          </div>
76 
+        </li>
77 
+        <li class="flex-h">
78 
+          <span>工号：</span>
79 
+          <div class="flex-item">
80 
+            <div style="width:50%">
81 
+              <el-input
82 
+                placeholder="请输入工号"
83 
+                v-model="postData.number"
84 
+                clearable>
85 
+              </el-input>
86 
+            </div>
87 
+          </div>
88 
+        </li>
89 
+        <li class="flex-h">
90 
+          <span>手机号：</span>
91 
+          <div class="flex-item">
92 
+            <div style="width:50%">
93 
+              <el-input
94 
+                placeholder="请输入手机号"
95 
+                v-model="postData.mobile"
96 
+                clearable>
97 
+              </el-input>
98 
+            </div>
99 
+          </div>
100 
+        </li>
101 
+        <li class="flex-h">
102 
+          <span>用户标签：</span>
103 
+          <div class="flex-item">
104 
+            <div style="width:50%">
105 
+              <el-select v-model="postData.userLabel" placeholder="请选择">
106 
+                <el-option
107 
+                  v-for="item in userLabelList"
108 
+                  :key="item.value"
109 
+                  :label="item.label"
110 
+                  :value="item.value">
111 
+                </el-option>
112 
+              </el-select>
113 
+            </div>
114 
+          </div>
115 
+        </li>
116 
+        <li class="flex-h">
117 
+          <span>用户类型：</span>
118 
+          <div class="flex-item">
119 
+            <div style="width:50%">
120 
+              <el-select v-model="postData.userLabel" placeholder="请选择">
121 
+                <el-option
122 
+                  v-for="item in userLabelList"
123 
+                  :key="item.value"
124 
+                  :label="item.label"
125 
+                  :value="item.value">
126 
+                </el-option>
127 
+              </el-select>
128 
+            </div>
129 
+          </div>
130 
+        </li>
131 
+        <li class="flex-h">
132 
+          <span>锁定用户：</span>
133 
+          <div class="flex-item">
134 
+            <div style="width:50%">
135 
+              <el-switch
136 
+                v-model="postData.lockUser"
137 
+                active-color="#13ce66"
138 
+                inactive-color="#ff4949">
139 
+              </el-switch>
140 
+            </div>
141 
+          </div>
142 
+        </li>
143 
+        <li class="flex-h">
144 
+          <span>是否案场联系人：</span>
145 
+          <div class="flex-item">
146 
+            <div style="width:50%">
147 
+              <el-switch
148 
+                v-model="postData.linkMan"
149 
+                active-color="#13ce66"
150 
+                inactive-color="#ff4949">
151 
+              </el-switch>
152 
+            </div>
153 
+          </div>
154 
+        </li>
155 
+        <li style="text-align:center">
156 
+          <el-button type="primary" size="mini">保存</el-button>
157 
+          <el-button type="danger" size="mini">取消</el-button>
158 
+        </li>
159 
+      </ul>
160 
+    </form>
161 
+  </div>
162 
+</template>
163 
+
164 
+<script>
165 
+import { createNamespacedHelpers } from 'vuex'
166 
+const { mapState: mapUserState } = createNamespacedHelpers('user')
167 
+export default {
168 
+  name: '',
169 
+  data () {
170 
+    return {
171 
+      postData: {
172 
+        userName: '', // 用户名
173 
+        passWord: '', // 密码
174 
+        checkPassWord: '', // 确认密码
175 
+        realName: '', // 真实姓名
176 
+        email: '', // 邮箱
177 
+        number: '', // 工号
178 
+        mobile: '', // 手机号
179 
+        userLabel: '',
180 
+        lockUser: true,
181 
+        linkMan: true
182 
+      }
183 
+    }
184 
+  },
185 
+  components: {},
186 
+  computed: {
187 
+    ...mapUserState({
188 
+      userLabelList: x => x.userLabelList,
189 
+    })
190 
+  },
191 
+  methods: {
192 
+
193 
+  },
194 
+  mounted () {}
195 
+}
196 
+</script>
197 
+
198 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
199 
+<style lang="scss" scoped>
200 
+</style>

+ 85
- 5
src/pages/system/systemSet/userManger/index.vue Ver arquivo 

@@ -3,7 +3,7 @@
3 3 
     <div class="system-table-search">
4 4 
       <div class="flex-h">
5 5 
         <div class="flex-item flex-h">
6 
-          <el-button size="mini" type="success">新增用户</el-button>
6 
+          <el-button size="mini" type="success" @click="addUser">新增用户</el-button>
7 7 
         </div>
8 8 
         <tableSearch value='请输入用户名' @exportSearchKey="searchList"></tableSearch>
9 9 
       </div>

@@ -68,7 +68,7 @@
68 68 
               <el-button
69 69 
               size="mini"
70 70 
               type="success"
71 
-              @click="handleDelete(scope.$index, scope.row)">绑定角色</el-button>
71 
+              @click="handleBind(scope.$index, scope.row)">绑定角色</el-button>
72 72 
           </template>
73 73 
         </el-table-column>
74 74 
       </el-table>

@@ -81,17 +81,68 @@
81 81 
       layout="prev, pager, next, jumper"
82 82 
       :total="100">
83 83 
     </el-pagination>
84 
+    <el-dialog title='绑定角色' :visible.sync="dialogTableVisible">
85 
+      <form class="mainForm">
86 
+        <ul>
87 
+          <li class="flex-h">
88 
+            <span>输入搜索：</span>
89 
+            <div class="flex-item">
90 
+              <div>
91 
+                <el-input
92 
+                  placeholder="请输入角色"
93 
+                  v-model="postData.searchData"
94 
+                  clearable>
95 
+                </el-input>
96 
+              </div>
97 
+            </div>
98 
+          </li>
99 
+          <li class="flex-h">
100 
+            <span>搜索结果：</span>
101 
+            <div class="flex-item">
102 
+              <div>
103 
+                <el-tag
104 
+                  v-for="tag in searchTags"
105 
+                  type='success'
106 
+                  :key="tag.name"
107 
+                  style="margin-right:1rem"
108 
+                  @click='addTag(tag)'>
109 
+                  {{tag.name}}
110 
+                  </el-tag>
111 
+              </div>
112 
+            </div>
113 
+          </li>
114 
+          <li class="flex-h">
115 
+            <span>当前角色：</span>
116 
+            <div class="flex-item">
117 
+              <div>
118 
+                <el-tag
119 
+                  v-for="tag in tags"
120 
+                  :key="tag.name"
121 
+                  style="margin-right:1rem"
122 
+                  @close="handleClose(tag)"
123 
+                  closable>
124 
+                  {{tag.name}}
125 
+                </el-tag>
126 
+              </div>
127 
+            </div>
128 
+          </li>
129 
+        </ul>
130 
+      </form>
131 
+    </el-dialog>
84 132 
   </div>
85 133 
 </template>
86 134
87 135 
 <script>
88 136 
 import tableSearch from '@/components/tableSearch/index'
89 
-
137 
+import { createNamespacedHelpers } from 'vuex'
138 
+// import {mapActions} from 'vuex'
139 
+const { mapState: mapUserState } = createNamespacedHelpers('user')
90 140 
 export default {
91 141 
   name: '',
92 142 
   data () {
93 143 
     return {
94 144 
       currentPage: 0, // 当前页码
145 
+      dialogTableVisible: false,
95 146 
       tableSearch: { // 表格搜索条件
96 147 
         key: '111', // 搜索关键字
97 148 
       },

@@ -104,12 +155,27 @@ export default {
104 155 
         userType: '1',
105 156 
         lock: true,
106 157 
         creatTime: '2018-08-08 10:00:00'
107 
-      }]
158 
+      }],
159 
+      postData: {
160 
+        searchData: ''
161 
+      },
162 
+      tags: [
163 
+        { name: '角色0' },
164 
+        { name: '角色1' },
165 
+        { name: '角色2' },
166 
+        { name: '角色3' },
167 
+        { name: '角色4' }
168 
+      ]
108 169 
     }
109 170 
   },
110 171 
   components: {
111 172 
     tableSearch,
112 173 
   },
174 
+  computed: {
175 
+    ...mapUserState({
176 
+      searchTags: x => x.roleList,
177 
+    })
178 
+  },
113 179 
   methods: {
114 180 
     handleSizeChange (val) {
115 181 
       console.log(`每页 ${val} 条`)

@@ -119,6 +185,7 @@ export default {
119 185 
     },
120 186 
     handleEdit (index, row) { // 编辑
121 187 
       console.log(index, row)
188 
+      this.$router.push({ name: 'editUser', query: { realName: row.realName } })
122 189 
     },
123 190 
     handleDelete (index, row) { // 删除
124 191 
       console.log(index, row)

@@ -138,8 +205,22 @@ export default {
138 205 
         })
139 206 
       })
140 207 
     },
208 
+    handleBind (index, row) {
209 
+      console.log(index, row)
210 
+      this.dialogTableVisible = true
211 
+    },
141 212 
     searchList (key) { // 搜索列表
142 213 
       console.log(key)
214 
+    },
215 
+    addUser () {
216 
+      this.$router.push({ name: 'addUser' })
217 
+    },
218 
+    handleClose (tag) {
219 
+      this.tags.splice(this.tags.indexOf(tag), 1)
220 
+    },
221 
+    addTag (tag) {
222 
+      this.$store.dispatch('upDateRoleList', tag)
223 
+      // $store.upDateRoleList('switch_dialog', tag)
143 224 
     }
144 225 
   }
145 226 
 }

@@ -147,5 +228,4 @@ export default {
147 228
148 229 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
149 230 
 <style lang="scss" scoped>
150 
-@import "page.scss";
151 231 
 </style>

+ 0
- 36
src/pages/system/systemSet/userManger/page.scss Ver arquivo 

@@ -1,36 +0,0 @@
1 
-
2 
-
3 
-
4 
-
5 
-
6 
-
7 
-
8 
-
9 
-
10 
-
11 
-
12 
-
13 
-
14 
-
15 
-
16 
-
17 
-
18 
-
19 
-
20 
-
21 
-
22 
-
23 
-
24 
-
25 
-
26 
-
27 
-
28 
-
29 
-
30 
-
31 
-
32 
-
33 
-
34 
-
35 
-
36 
-

+ 1
- 0
src/store/index.js Ver arquivo 

@@ -11,6 +11,7 @@ const store = new Vuex.Store({
11 11
12 12 
 export const modules = {
13 13 
   case: () => require('./case').default,
14 
+  user: () => require('./user').default,
14 15 
 }
15 16
16 17 
 Object.keys(modules).forEach((modKey) => {

+ 35
- 0
src/store/user/index.js Ver arquivo 

@@ -0,0 +1,35 @@
1 
+export default {
2 
+  namespaced: true,
3 
+  state: {
4 
+    userLabelList: [{
5 
+      value: '0',
6 
+      label: '系统用户'
7 
+    }, {
8 
+      value: '1',
9 
+      label: '主管'
10 
+    }, {
11 
+      value: '2',
12 
+      label: '销售'
13 
+    }],
14 
+    roleList: [{
15 
+      value: '0',
16 
+      name: '角色0'
17 
+    }, {
18 
+      value: '1',
19 
+      name: '角色1'
20 
+    }, {
21 
+      value: '2',
22 
+      name: '角色2'
23 
+    }]
24 
+  },
25 
+  mutations: {
26 
+    deleteRoleListItem (state, index) { // 这里的state对应着上面这个state
27 
+      state.roleList.splice(state.roleList.indexOf(index), 1) // 你还可以在这里执行其他的操作改变state
28 
+    }
29 
+  },
30 
+  actions: {
31 
+    upDateRoleList (context, index) { // 这里的context和我们使用的$store拥有相同的对象和方法
32 
+      context.commit('deleteRoleListItem', index) // 你还可以在这里触发其他的mutations方法
33 
+    }
34 
+  }
35 
+}