Hooke / muse-ui-test

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
906d3b0a 1 parent fa8d967f

add 讲师管理页面测试

Inline Side-by-side
Showing 6 changed files with 492 additions and 8 deletions
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
10 "dependencies": { 10 "dependencies": {
11 "axios": "^0.18.0", 11 "axios": "^0.18.0",
12 "core-js": "^2.6.5", 12 "core-js": "^2.6.5",
13 + "element-ui": "^2.8.2",
13 "jquery": "^3.4.1", 14 "jquery": "^3.4.1",
14 "lodash": "^4.17.11", 15 "lodash": "^4.17.11",
15 "moment": "^2.24.0", 16 "moment": "^2.24.0",
......
...@@ -3,9 +3,11 @@ function versions () { ...@@ -3,9 +3,11 @@ function versions () {
3 var u = navigator.userAgent; 3 var u = navigator.userAgent;
4 var android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 4 var android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
5 var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 5 var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
6 + var mobile = !!u.match(/AppleWebKit.*Mobile.*/)
6 return { 7 return {
7 android, 8 android,
8 - ios 9 + ios,
10 + mobile
9 } 11 }
10 } 12 }
11 13
......
...@@ -10,6 +10,11 @@ import Message from 'muse-ui-message'; ...@@ -10,6 +10,11 @@ import Message from 'muse-ui-message';
10 import Loading from 'muse-ui-loading'; 10 import Loading from 'muse-ui-loading';
11 import NProgress from 'muse-ui-progress'; 11 import NProgress from 'muse-ui-progress';
12 12
13 +import ElementUI from 'element-ui';
14 +import 'element-ui/lib/theme-chalk/index.css';
15 +// Vue.use(ElementUI);
16 +Vue.use(ElementUI, { zIndex: 99999999 });
17 +
13 Vue.config.productionTip = false 18 Vue.config.productionTip = false
14 19
15 Vue.use(MuseUI); 20 Vue.use(MuseUI);
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
63 </mu-menu> 63 </mu-menu>
64 </mu-appbar> 64 </mu-appbar>
65 <div :class="['main-contain', {'is-open': side_show}]"> 65 <div :class="['main-contain', {'is-open': side_show}]">
66 - <div v-if="default_list_title !== '首页'" style="text-align: left; margin-left: 20px; margin-bottom: 20px;"> 66 + <div v-if="default_list_title !== '首页'" style="text-align: left; padding-left: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,.15);">
67 {{default_list_title}} 67 {{default_list_title}}
68 </div> 68 </div>
69 <div v-if="default_list_title === '首页'" style="background-color: #FFFFFF;"> 69 <div v-if="default_list_title === '首页'" style="background-color: #FFFFFF;">
......
1 <template lang="html"> 1 <template lang="html">
2 - <div class=""> 2 + <div style="background-color: #FFFFFF;">
3 - 维护我的介绍信息；讲师首页显示我的介绍； 3 + <!-- 维护我的介绍信息；讲师首页显示我的介绍；
4 可以更改自己的登录密码； 4 可以更改自己的登录密码；
5 可以更改手机号码； 5 可以更改手机号码；
6 <br/> 6 <br/>
7 "培训机构维护机构的介绍信息； 7 "培训机构维护机构的介绍信息；
8 - 培训机构详情页显示的介绍详情；" 8 + 培训机构详情页显示的介绍详情；" -->
9 + <mu-tabs :value.sync="tab_active" inverse color="#2196f3" indicator-color="#2196f3" full-width>
10 + <mu-tab>基本信息</mu-tab>
11 + <mu-tab>我的简介</mu-tab>
12 + <mu-tab>账户安全</mu-tab>
13 + <mu-tab>实名认证</mu-tab>
14 + <mu-tab>邀请注册</mu-tab>
15 + </mu-tabs>
16 + <mu-container style="padding: 15px 24px 24px;">
17 + <div v-if="tab_active === 0">
18 + <mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
19 + <mu-form-item label="登录账号">
20 + <p>u934567893</p>
21 + </mu-form-item>
22 + <mu-form-item prop="name" label="姓名" :rules="usernameRules">
23 + <mu-text-field v-model="form.name"></mu-text-field>
24 + </mu-form-item>
25 + <mu-form-item prop="gender" label="性别" help-text="必填">
26 + <mu-radio v-model="form.gender" value="male" label="男"></mu-radio>
27 + <mu-radio v-model="form.gender" value="female" label="女"></mu-radio>
28 + </mu-form-item>
29 + <mu-form-item prop="age" label="出生年">
30 + <mu-text-field v-model="form.age"></mu-text-field>
31 + </mu-form-item>
32 + <mu-form-item prop="address" label="居住地">
33 + <mu-text-field v-model="form.address"></mu-text-field>
34 + </mu-form-item>
35 + <!-- <mu-row align-items="center">
36 + <div style="color: rgba(0,0,0,.54); width: 85px;">
37 + <div class="mu-form-item-label" style="width: 100px;">出生年</div>
38 + </div>
39 + <mu-col span="6">
40 + <mu-date-input icon="today" v-model="form.age" label="选择年份" type="year" label-float></mu-date-input>
41 + </mu-col>
42 + </mu-row> -->
43 + </mu-form>
44 + <mu-flex>
45 + <p style="font-size: 0.9rem;">讲师本人联系信息</p>
46 + </mu-flex>
47 + <mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
48 + <mu-row gutter>
49 + <mu-col span="6">
50 + <mu-form-item prop="concacts" label="手机" help-text="必填">
51 + <mu-text-field v-model="form.concacts"></mu-text-field>
52 + </mu-form-item>
53 + </mu-col>
54 + <mu-col span="6">
55 + <mu-form-item prop="tel" label="微信" help-text="必填">
56 + <mu-text-field v-model="form.tel"></mu-text-field>
57 + </mu-form-item>
58 + </mu-col>
59 + </mu-row>
60 + <mu-row gutter>
61 + <mu-col span="6">
62 + <mu-form-item prop="wexin" label="QQ" help-text="必填">
63 + <mu-text-field v-model="form.wexin"></mu-text-field>
64 + </mu-form-item>
65 + </mu-col>
66 + <mu-col span="6">
67 + <mu-form-item prop="qq" label="讲师邮箱" help-text="必填">
68 + <mu-text-field v-model="form.qq"></mu-text-field>
69 + </mu-form-item>
70 + </mu-col>
71 + </mu-row>
72 + </mu-form>
73 + <mu-flex>
74 + <p style="font-size: 0.9rem;">对外公开联系人信息</p>
75 + </mu-flex>
76 + <mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
77 + <mu-row gutter>
78 + <mu-col span="6">
79 + <mu-form-item prop="concacts" label="联系人">
80 + <mu-text-field v-model="form.concacts"></mu-text-field>
81 + </mu-form-item>
82 + </mu-col>
83 + <mu-col span="6">
84 + <mu-form-item prop="tel" label="手机">
85 + <mu-text-field v-model="form.tel"></mu-text-field>
86 + </mu-form-item>
87 + </mu-col>
88 + </mu-row>
89 + <mu-row gutter>
90 + <mu-col span="6">
91 + <mu-form-item prop="wexin" label="微信">
92 + <mu-text-field v-model="form.wexin"></mu-text-field>
93 + </mu-form-item>
94 + </mu-col>
95 + <mu-col span="6">
96 + <mu-form-item prop="qq" label="QQ">
97 + <mu-text-field v-model="form.qq"></mu-text-field>
98 + </mu-form-item>
99 + </mu-col>
100 + </mu-row>
101 + </mu-form>
102 + </div>
103 + <div v-if="tab_active === 1">
104 + 111
105 + </div>
106 + </mu-container>
9 </div> 107 </div>
10 </template> 108 </template>
11 109
12 <script> 110 <script>
111 +import util from 'assets/js/util';
112 +
13 export default { 113 export default {
114 + mounted () {
115 + },
116 + data () {
117 + return {
118 + tab_active: 0,
119 + label_position: util.versions().mobile ? 'top' : 'right',
120 + usernameRules: [
121 + { validate: (val) => !!val, message: '必须填写用户名' },
122 + { validate: (val) => val.length >= 3, message: '用户名长度大于3' }
123 + ],
124 + form: {
125 + name: '',
126 + gender: '',
127 + age: '',
128 + address: '',
129 + concacts: '',
130 + tel: '',
131 + weixin: '',
132 + qq: ''
133 + }
134 + }
135 + }
14 } 136 }
15 </script> 137 </script>
16 138
......
1 <template lang="html"> 1 <template lang="html">
2 <div class=""> 2 <div class="">
3 - "管理讲师的相关信息； 3 + <!-- "管理讲师的相关信息；
4 对讲师信息能做增删改操作； 4 对讲师信息能做增删改操作；
5 - 对讲师可以实现查询名称；" 5 + 对讲师可以实现查询名称；" -->
6 +
7 + <mu-container style="margin-top: 10px;">
8 + <el-form :inline="true" ref="form" :model="form" label-width="80px">
9 + <el-form-item label="讲师名称">
10 + <el-input v-model="form.name" placeholder="请输入讲师名称"></el-input>
11 + </el-form-item>
12 + <el-form-item v-if="!is_mobile">
13 + <el-button @click="submit">查询</el-button>
14 + </el-form-item>
15 + <el-form-item style="float: right;">
16 + <el-button v-if="!is_mobile" type="primary" @click="add" icon="el-icon-plus">新增</el-button>
17 + <el-button v-else @click="add">新增</el-button>
18 + </el-form-item>
19 + <div style="clear: both;"></div>
20 + </el-form>
21 + <mu-paper :z-depth="1">
22 + <mu-data-table :columns="columns" :data="list" stripe>
23 + <template slot-scope="scope">
24 + <td class="is-center">{{scope.row.name}}</td>
25 + <td class="is-center">{{scope.row.intro}}</td>
26 + <td class="is-left">
27 + <p v-for="(v,k) in scope.row.tag" :key="k" class="table-tag">{{v}}</p>
28 + </td>
29 + <td class="is-center">
30 + {{formatter(scope.row.books)}}
31 + </td>
32 + <td class="is-center">
33 + <span @click="edit(scope.row)" class="opt-btn" style="margin-right: 8px;">编辑</span>
34 + <span @click="deleteBtn(scope.row)" class="opt-btn">删除</span>
35 + </td>
36 + </template>
37 + </mu-data-table>
38 + </mu-paper>
39 + <mu-flex class="flex-wrapper" justify-content="end" style="margin-top: 15px;">
40 + <mu-flex class="flex-demo" justify-content="center" >
41 + <mu-pagination :total="100" :current.sync="current" :page-size="10" :page-count="5"></mu-pagination>
42 + </mu-flex>
43 + </mu-flex>
44 +
45 + <mu-dialog title="编辑讲师信息" :width="body_width" :max-width="body_width" :open.sync="openSimple" :dialog-class="is_mobile ? 'mobile-dialog' : 'no-mobile-dialog'" :esc-press-close="false" :overlay-close="false">
46 + <mu-form ref="form" :model="validateForm" class="mu-demo-form" :label-position="label_position">
47 + <mu-form-item label="名称" prop="username" :rules="usernameRules">
48 + <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
49 + </mu-form-item>
50 + <mu-form-item label="简介" prop="password">
51 + <mu-text-field v-model="validateForm.password" prop="password"></mu-text-field>
52 + </mu-form-item>
53 + <mu-form-item label="标签" prop="username" class="form-tag">
54 + <el-select v-model="multi.value1" multiple style="width: 100%;" placeholder="请选择">
55 + <el-option
56 + v-for="(val, index) in org_tags"
57 + :key="index"
58 + :label="val"
59 + :value="val">
60 + </el-option>
61 + </el-select>
62 + </mu-form-item>
63 + <mu-form-item label="作品" prop="password">
64 + <el-tag
65 + :key="k"
66 + v-for="(v, k) in books_tags"
67 + closable
68 + :disable-transitions="false"
69 + @close="handleClose(v)">
70 + {{v}}
71 + </el-tag>
72 + <el-input
73 + class="input-new-tag"
74 + v-if="inputVisible"
75 + v-model="inputValue"
76 + ref="saveTagInput"
77 + size="small"
78 + @keyup.enter.native="handleInputConfirm"
79 + @blur="handleInputConfirm"
80 + >
81 + </el-input>
82 + <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新作品</el-button>
83 + </mu-form-item>
84 + </mu-form>
85 + <mu-button slot="actions" color="primary" @click="closeSimpleDialog">确认</mu-button>
86 + <mu-button slot="actions" @click="closeSimpleDialog">关闭</mu-button>
87 + </mu-dialog>
88 +
89 + <mu-dialog title="提示" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="openAlert">
90 + 是否删除该讲师信息?
91 + <mu-button slot="actions" color="primary" @click="closeAlertDialog">取消</mu-button>
92 + <mu-button slot="actions" @click="closeAlertDialog">确认</mu-button>
93 + </mu-dialog>
94 +
95 + <mu-dialog title="新增讲师信息" :width="body_width" :max-width="body_width" :open.sync="openAddDialog" :dialog-class="is_mobile ? 'mobile-dialog' : 'no-mobile-dialog'" :esc-press-close="false" :overlay-close="false">
96 + <mu-form ref="form" :model="validateForm" class="mu-demo-form" :label-position="label_position">
97 + <mu-form-item label="名称" prop="username" :rules="usernameRules">
98 + <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
99 + </mu-form-item>
100 + <mu-form-item label="简介" prop="password">
101 + <mu-text-field v-model="validateForm.password" prop="password"></mu-text-field>
102 + </mu-form-item>
103 + <mu-form-item label="标签" prop="username">
104 + <el-select v-model="multi.value2" multiple style="width: 100%;" placeholder="请选择">
105 + <el-option
106 + v-for="(val, index) in org_tags"
107 + :key="index"
108 + :label="val"
109 + :value="val">
110 + </el-option>
111 + </el-select>
112 + </mu-form-item>
113 + <mu-form-item label="作品" prop="password">
114 + <el-input
115 + class="input-new-tag"
116 + v-if="inputVisible"
117 + v-model="inputValue"
118 + ref="saveTagInput"
119 + size="small"
120 + @keyup.enter.native="handleInputConfirm"
121 + @blur="handleInputConfirm"
122 + >
123 + </el-input>
124 + <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新作品</el-button>
125 + </mu-form-item>
126 + </mu-form>
127 + <mu-button slot="actions" color="primary" @click="closeAddDialog">确认</mu-button>
128 + <mu-button slot="actions" @click="closeAddDialog">关闭</mu-button>
129 + </mu-dialog>
130 + </mu-container>
6 </div> 131 </div>
7 </template> 132 </template>
8 133
9 <script> 134 <script>
135 +import util from 'assets/js/util';
136 +
10 export default { 137 export default {
138 + mounted () {
139 + },
140 + data () {
141 + return {
142 + is_mobile: util.versions().mobile,
143 + body_width: util.versions().mobile ? $('body').width() - 15 : $('body').width() * 0.5,
144 + body_max_width: $('body').width() - 10,
145 + label_position: util.versions().mobile ? 'top' : 'right',
146 + form: {
147 + name: ''
148 + },
149 + sort: {
150 + name: '',
151 + order: 'asc'
152 + },
153 + openSimple: false,
154 + openAddDialog: false,
155 + columns: [
156 + { title: '名称', name: 'name', width: '150', align: 'center' },
157 + { title: '简介', name: 'intro', align: 'center' },
158 + { title: '标签', name: 'tag', align: 'center' },
159 + { title: '作品', name: 'books', align: 'center' },
160 + { title: '操作', name: 'edit', width: '150', align: 'center' }
161 + ],
162 + list: [
163 + {
164 + name: '周大福',
165 + intro: '易学大师、国学讲师、辟谷导师、风水实战派专家',
166 + tag: ['健康养生', '国学文化', '易经风水', '健康养生', '国学文化', '易经风水'],
167 + books: ['易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术', '道家秘传养生功法']
168 + },
169 + {
170 + name: '明德',
171 + intro: '易学大师、国学讲师、辟谷导师、风水实战派专家',
172 + tag: ['互联网+'],
173 + books: []
174 + }
175 + ],
176 + usernameRules: [
177 + { validate: (val) => !!val, message: '必须填写用户名' },
178 + { validate: (val) => val.length >= 3, message: '用户名长度大于3' }
179 + ],
180 + passwordRules: [
181 + { validate: (val) => !!val, message: '必须填写密码' },
182 + { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10' }
183 + ],
184 + argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议' }],
185 + validateForm: {
186 + username: '',
187 + password: '',
188 + isAgree: false
189 + },
190 + teacher_tags: ['健康养生', '国学文化', '易经风水', '健康养生', '国学文化', '易经风水'],
191 + books_tags: ['易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术'],
192 + inputVisible: false,
193 + inputValue: '',
194 + current: 1,
195 + openAlert: false,
196 + org_tags: [
197 + '健康养生', '国学文化', '易经风水', '易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术', '健康养生', '国学文化', '易经风水', '易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术'
198 + ],
199 + multi: {
200 + value1: ['健康养生', '国学文化', '易经风水'],
201 + value2: [],
202 + value3: []
203 + }
204 + }
205 + },
206 + methods: {
207 + handleSortChange ({ name, order }) {
208 + this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
209 + },
210 + edit (v) {
211 + //
212 + this.openSimple = true;
213 + // setTimeout(() => {
214 + // let tag_wrapper_width = $('.form-tag').find('.mu-form-item-content').width();
215 + // let tag_width = $('.form-tag .mu-form-item-content').find('.el-tag').outerWidth();
216 + // let tag_number = $('.form-tag .mu-form-item-content').children('.el-tag').length;
217 + // let tag_add_width = $('.form-tag .mu-form-item-content').find('.button-new-tag').outerWidth();
218 + // console.warn(tag_wrapper_width);
219 + // console.warn(tag_width * tag_number + tag_add_width);
220 + // }, 500)
221 + },
222 + deleteBtn (v) {
223 + console.warn(0);
224 + this.openAlert = true;
225 + },
226 + closeSimpleDialog () {
227 + this.openSimple = false;
228 + },
229 + closeAddDialog () {
230 + this.openAddDialog = false;
231 + },
232 + formatter (v) {
233 + if (_.isNil(v)) {
234 + return ''
235 + } else {
236 + let temp = ''
237 + _.each(v, w => {
238 + temp += `《${w}》`
239 + });
240 + return String(temp).length > 30 ? String(temp).substr(0, 30) + '...' : String(temp).substr(0, 30)
241 + }
242 + },
243 + submit () {
244 + this.$refs.form.validate().then((result) => {
245 + console.warn('form valid: ', result)
246 + });
247 + },
248 + clear () {
249 + this.$refs.form.clear();
250 + this.validateForm = {
251 + username: '',
252 + password: '',
253 + isAgree: false
254 + };
255 + },
256 + handleClose (tag) {
257 + this.books_tags.splice(this.books_tags.indexOf(tag), 1);
258 + },
259 + showInput () {
260 + this.inputVisible = true;
261 + this.$nextTick(_ => {
262 + this.$refs.saveTagInput.$refs.input.focus();
263 + });
264 + },
265 + handleInputConfirm () {
266 + let inputValue = this.inputValue;
267 + if (inputValue) {
268 + this.books_tags.push(inputValue);
269 + }
270 + this.inputVisible = false;
271 + this.inputValue = '';
272 + },
273 + openAlertDialog () {
274 + this.openAlert = true;
275 + },
276 + closeAlertDialog () {
277 + this.openAlert = false;
278 + },
279 + inputBlur (v) {
280 + console.warn();
281 + },
282 + add () {
283 + this.openAddDialog = true;
284 + },
285 + selectChange (v) {
286 + },
287 + selectClick () {
288 + console.warn(0);
289 + // $('.mu-option.is-selected .mu-item').css('color', '#2196f3')
290 + // $('.mu-option .mu-item').css('color', 'rgba(0,0,0,.87)')
291 + }
292 + }
11 } 293 }
12 </script> 294 </script>
13 295
14 -<style lang="css" scoped> 296 +<style lang="less" scoped>
297 +.demo-button {
298 + margin: 6px 8px;
299 +}
300 +
301 +/deep/.mu-table th {
302 + border-right: 1px solid #ffffff;
303 + word-wrap: break-word;
304 + vertical-align: middle;
305 + white-space: normal;
306 + overflow: hidden;
307 + user-select: none;
308 + min-width: 0;
309 + box-sizing: border-box;
310 + vertical-align: middle;
311 + position: relative;
312 +}
313 +
314 +/deep/.mu-table th.is-sortable .mu-table-sort-icon {
315 + opacity: .6;
316 +}
317 +
318 +.container {
319 + max-width: 95%;
320 +}
321 +
322 +.table-tag {
323 + color: #ff6900;
324 + border: 1px solid #ff6900;
325 + border-radius: 8%;
326 + display: inline-block;
327 + padding: 1px 2px;
328 + margin: 5px 5px 5px 0;
329 +}
330 +.opt-btn:hover {
331 + cursor: pointer;
332 + color: #2196f3;
333 +}
334 +
335 +/deep/.mobile-dialog {
336 + height: 80%;
337 + overflow: scroll;
338 +}
339 +/deep/.no-mobile-dialog {
340 +}
341 +.el-tag {
342 + margin-top: 10px;
343 + margin-right: 10px;
344 +}
345 +.el-tag+.el-tag{
346 + margin-right: 10px;
347 +}
348 +.button-new-tag {
349 + margin-top: 10px;
350 + height: 32px;
351 + line-height: 30px;
352 + padding-top: 0;
353 + padding-bottom: 0;
354 +}
355 +.input-new-tag {
356 + width: 90px;
357 + margin-right: 10px;
358 + margin-top: 10px;
359 + vertical-align: bottom;
360 +}
361 +/deep/.mu-secondary-text-color {
362 + color: #2196f3;
363 +}
364 +/deep/.el-select {
365 + input {
366 + padding: 20px;
367 + }
368 +}
15 </style> 369 </style>
......