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 @@
"dependencies": {
"axios": "^0.18.0",
"core-js": "^2.6.5",
"element-ui": "^2.8.2",
"jquery": "^3.4.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
......
......@@ -3,9 +3,11 @@ function versions () {
var u = navigator.userAgent;
var android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var mobile = !!u.match(/AppleWebKit.*Mobile.*/)
return {
android,
ios
ios,
mobile
}
}
......
......@@ -10,6 +10,11 @@ import Message from 'muse-ui-message';
import Loading from 'muse-ui-loading';
import NProgress from 'muse-ui-progress';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
Vue.use(ElementUI, { zIndex: 99999999 });
Vue.config.productionTip = false
Vue.use(MuseUI);
......
......@@ -63,7 +63,7 @@
</mu-menu>
</mu-appbar>
<div :class="['main-contain', {'is-open': side_show}]">
<div v-if="default_list_title !== '首页'" style="text-align: left; margin-left: 20px; margin-bottom: 20px;">
<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);">
{{default_list_title}}
</div>
<div v-if="default_list_title === '首页'" style="background-color: #FFFFFF;">
......
<template lang="html">
<div class="">
维护我的介绍信息；讲师首页显示我的介绍；
<div style="background-color: #FFFFFF;">
<!-- 维护我的介绍信息；讲师首页显示我的介绍；
可以更改自己的登录密码；
可以更改手机号码；
<br/>
"培训机构维护机构的介绍信息；
培训机构详情页显示的介绍详情；"
培训机构详情页显示的介绍详情；" -->
<mu-tabs :value.sync="tab_active" inverse color="#2196f3" indicator-color="#2196f3" full-width>
<mu-tab>基本信息</mu-tab>
<mu-tab>我的简介</mu-tab>
<mu-tab>账户安全</mu-tab>
<mu-tab>实名认证</mu-tab>
<mu-tab>邀请注册</mu-tab>
</mu-tabs>
<mu-container style="padding: 15px 24px 24px;">
<div v-if="tab_active === 0">
<mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
<mu-form-item label="登录账号">
<p>u934567893</p>
</mu-form-item>
<mu-form-item prop="name" label="姓名" :rules="usernameRules">
<mu-text-field v-model="form.name"></mu-text-field>
</mu-form-item>
<mu-form-item prop="gender" label="性别" help-text="必填">
<mu-radio v-model="form.gender" value="male" label="男"></mu-radio>
<mu-radio v-model="form.gender" value="female" label="女"></mu-radio>
</mu-form-item>
<mu-form-item prop="age" label="出生年">
<mu-text-field v-model="form.age"></mu-text-field>
</mu-form-item>
<mu-form-item prop="address" label="居住地">
<mu-text-field v-model="form.address"></mu-text-field>
</mu-form-item>
<!-- <mu-row align-items="center">
<div style="color: rgba(0,0,0,.54); width: 85px;">
<div class="mu-form-item-label" style="width: 100px;">出生年</div>
</div>
<mu-col span="6">
<mu-date-input icon="today" v-model="form.age" label="选择年份" type="year" label-float></mu-date-input>
</mu-col>
</mu-row> -->
</mu-form>
<mu-flex>
<p style="font-size: 0.9rem;">讲师本人联系信息</p>
</mu-flex>
<mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="concacts" label="手机" help-text="必填">
<mu-text-field v-model="form.concacts"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="tel" label="微信" help-text="必填">
<mu-text-field v-model="form.tel"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="wexin" label="QQ" help-text="必填">
<mu-text-field v-model="form.wexin"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="qq" label="讲师邮箱" help-text="必填">
<mu-text-field v-model="form.qq"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
</mu-form>
<mu-flex>
<p style="font-size: 0.9rem;">对外公开联系人信息</p>
</mu-flex>
<mu-form :model="form" class="mu-demo-form" :label-position="label_position" label-width="100">
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="concacts" label="联系人">
<mu-text-field v-model="form.concacts"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="tel" label="手机">
<mu-text-field v-model="form.tel"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
<mu-row gutter>
<mu-col span="6">
<mu-form-item prop="wexin" label="微信">
<mu-text-field v-model="form.wexin"></mu-text-field>
</mu-form-item>
</mu-col>
<mu-col span="6">
<mu-form-item prop="qq" label="QQ">
<mu-text-field v-model="form.qq"></mu-text-field>
</mu-form-item>
</mu-col>
</mu-row>
</mu-form>
</div>
<div v-if="tab_active === 1">
111
</div>
</mu-container>
</div>
</template>
<script>
import util from 'assets/js/util';
export default {
mounted () {
},
data () {
return {
tab_active: 0,
label_position: util.versions().mobile ? 'top' : 'right',
usernameRules: [
{ validate: (val) => !!val, message: '必须填写用户名' },
{ validate: (val) => val.length >= 3, message: '用户名长度大于3' }
],
form: {
name: '',
gender: '',
age: '',
address: '',
concacts: '',
tel: '',
weixin: '',
qq: ''
}
}
}
}
</script>
......
<template lang="html">
<div class="">
"管理讲师的相关信息；
<!-- "管理讲师的相关信息；
对讲师信息能做增删改操作；
对讲师可以实现查询名称；"
对讲师可以实现查询名称；" -->
<mu-container style="margin-top: 10px;">
<el-form :inline="true" ref="form" :model="form" label-width="80px">
<el-form-item label="讲师名称">
<el-input v-model="form.name" placeholder="请输入讲师名称"></el-input>
</el-form-item>
<el-form-item v-if="!is_mobile">
<el-button @click="submit">查询</el-button>
</el-form-item>
<el-form-item style="float: right;">
<el-button v-if="!is_mobile" type="primary" @click="add" icon="el-icon-plus">新增</el-button>
<el-button v-else @click="add">新增</el-button>
</el-form-item>
<div style="clear: both;"></div>
</el-form>
<mu-paper :z-depth="1">
<mu-data-table :columns="columns" :data="list" stripe>
<template slot-scope="scope">
<td class="is-center">{{scope.row.name}}</td>
<td class="is-center">{{scope.row.intro}}</td>
<td class="is-left">
<p v-for="(v,k) in scope.row.tag" :key="k" class="table-tag">{{v}}</p>
</td>
<td class="is-center">
{{formatter(scope.row.books)}}
</td>
<td class="is-center">
<span @click="edit(scope.row)" class="opt-btn" style="margin-right: 8px;">编辑</span>
<span @click="deleteBtn(scope.row)" class="opt-btn">删除</span>
</td>
</template>
</mu-data-table>
</mu-paper>
<mu-flex class="flex-wrapper" justify-content="end" style="margin-top: 15px;">
<mu-flex class="flex-demo" justify-content="center" >
<mu-pagination :total="100" :current.sync="current" :page-size="10" :page-count="5"></mu-pagination>
</mu-flex>
</mu-flex>
<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">
<mu-form ref="form" :model="validateForm" class="mu-demo-form" :label-position="label_position">
<mu-form-item label="名称" prop="username" :rules="usernameRules">
<mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
</mu-form-item>
<mu-form-item label="简介" prop="password">
<mu-text-field v-model="validateForm.password" prop="password"></mu-text-field>
</mu-form-item>
<mu-form-item label="标签" prop="username" class="form-tag">
<el-select v-model="multi.value1" multiple style="width: 100%;" placeholder="请选择">
<el-option
v-for="(val, index) in org_tags"
:key="index"
:label="val"
:value="val">
</el-option>
</el-select>
</mu-form-item>
<mu-form-item label="作品" prop="password">
<el-tag
:key="k"
v-for="(v, k) in books_tags"
closable
:disable-transitions="false"
@close="handleClose(v)">
{{v}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新作品</el-button>
</mu-form-item>
</mu-form>
<mu-button slot="actions" color="primary" @click="closeSimpleDialog">确认</mu-button>
<mu-button slot="actions" @click="closeSimpleDialog">关闭</mu-button>
</mu-dialog>
<mu-dialog title="提示" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="openAlert">
是否删除该讲师信息?
<mu-button slot="actions" color="primary" @click="closeAlertDialog">取消</mu-button>
<mu-button slot="actions" @click="closeAlertDialog">确认</mu-button>
</mu-dialog>
<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">
<mu-form ref="form" :model="validateForm" class="mu-demo-form" :label-position="label_position">
<mu-form-item label="名称" prop="username" :rules="usernameRules">
<mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
</mu-form-item>
<mu-form-item label="简介" prop="password">
<mu-text-field v-model="validateForm.password" prop="password"></mu-text-field>
</mu-form-item>
<mu-form-item label="标签" prop="username">
<el-select v-model="multi.value2" multiple style="width: 100%;" placeholder="请选择">
<el-option
v-for="(val, index) in org_tags"
:key="index"
:label="val"
:value="val">
</el-option>
</el-select>
</mu-form-item>
<mu-form-item label="作品" prop="password">
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新作品</el-button>
</mu-form-item>
</mu-form>
<mu-button slot="actions" color="primary" @click="closeAddDialog">确认</mu-button>
<mu-button slot="actions" @click="closeAddDialog">关闭</mu-button>
</mu-dialog>
</mu-container>
</div>
</template>
<script>
import util from 'assets/js/util';
export default {
mounted () {
},
data () {
return {
is_mobile: util.versions().mobile,
body_width: util.versions().mobile ? $('body').width() - 15 : $('body').width() * 0.5,
body_max_width: $('body').width() - 10,
label_position: util.versions().mobile ? 'top' : 'right',
form: {
name: ''
},
sort: {
name: '',
order: 'asc'
},
openSimple: false,
openAddDialog: false,
columns: [
{ title: '名称', name: 'name', width: '150', align: 'center' },
{ title: '简介', name: 'intro', align: 'center' },
{ title: '标签', name: 'tag', align: 'center' },
{ title: '作品', name: 'books', align: 'center' },
{ title: '操作', name: 'edit', width: '150', align: 'center' }
],
list: [
{
name: '周大福',
intro: '易学大师、国学讲师、辟谷导师、风水实战派专家',
tag: ['健康养生', '国学文化', '易经风水', '健康养生', '国学文化', '易经风水'],
books: ['易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术', '道家秘传养生功法']
},
{
name: '明德',
intro: '易学大师、国学讲师、辟谷导师、风水实战派专家',
tag: ['互联网+'],
books: []
}
],
usernameRules: [
{ validate: (val) => !!val, message: '必须填写用户名' },
{ validate: (val) => val.length >= 3, message: '用户名长度大于3' }
],
passwordRules: [
{ validate: (val) => !!val, message: '必须填写密码' },
{ validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10' }
],
argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议' }],
validateForm: {
username: '',
password: '',
isAgree: false
},
teacher_tags: ['健康养生', '国学文化', '易经风水', '健康养生', '国学文化', '易经风水'],
books_tags: ['易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术'],
inputVisible: false,
inputValue: '',
current: 1,
openAlert: false,
org_tags: [
'健康养生', '国学文化', '易经风水', '易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术', '健康养生', '国学文化', '易经风水', '易经风水大智慧', '智者人生课程体系', '易经风水与帝王之术'
],
multi: {
value1: ['健康养生', '国学文化', '易经风水'],
value2: [],
value3: []
}
}
},
methods: {
handleSortChange ({ name, order }) {
this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
},
edit (v) {
//
this.openSimple = true;
// setTimeout(() => {
// let tag_wrapper_width = $('.form-tag').find('.mu-form-item-content').width();
// let tag_width = $('.form-tag .mu-form-item-content').find('.el-tag').outerWidth();
// let tag_number = $('.form-tag .mu-form-item-content').children('.el-tag').length;
// let tag_add_width = $('.form-tag .mu-form-item-content').find('.button-new-tag').outerWidth();
// console.warn(tag_wrapper_width);
// console.warn(tag_width * tag_number + tag_add_width);
// }, 500)
},
deleteBtn (v) {
console.warn(0);
this.openAlert = true;
},
closeSimpleDialog () {
this.openSimple = false;
},
closeAddDialog () {
this.openAddDialog = false;
},
formatter (v) {
if (_.isNil(v)) {
return ''
} else {
let temp = ''
_.each(v, w => {
temp += `《${w}》`
});
return String(temp).length > 30 ? String(temp).substr(0, 30) + '...' : String(temp).substr(0, 30)
}
},
submit () {
this.$refs.form.validate().then((result) => {
console.warn('form valid: ', result)
});
},
clear () {
this.$refs.form.clear();
this.validateForm = {
username: '',
password: '',
isAgree: false
};
},
handleClose (tag) {
this.books_tags.splice(this.books_tags.indexOf(tag), 1);
},
showInput () {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm () {
let inputValue = this.inputValue;
if (inputValue) {
this.books_tags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
openAlertDialog () {
this.openAlert = true;
},
closeAlertDialog () {
this.openAlert = false;
},
inputBlur (v) {
console.warn();
},
add () {
this.openAddDialog = true;
},
selectChange (v) {
},
selectClick () {
console.warn(0);
// $('.mu-option.is-selected .mu-item').css('color', '#2196f3')
// $('.mu-option .mu-item').css('color', 'rgba(0,0,0,.87)')
}
}
}
</script>
<style lang="css" scoped>
<style lang="less" scoped>
.demo-button {
margin: 6px 8px;
}
/deep/.mu-table th {
border-right: 1px solid #ffffff;
word-wrap: break-word;
vertical-align: middle;
white-space: normal;
overflow: hidden;
user-select: none;
min-width: 0;
box-sizing: border-box;
vertical-align: middle;
position: relative;
}
/deep/.mu-table th.is-sortable .mu-table-sort-icon {
opacity: .6;
}
.container {
max-width: 95%;
}
.table-tag {
color: #ff6900;
border: 1px solid #ff6900;
border-radius: 8%;
display: inline-block;
padding: 1px 2px;
margin: 5px 5px 5px 0;
}
.opt-btn:hover {
cursor: pointer;
color: #2196f3;
}
/deep/.mobile-dialog {
height: 80%;
overflow: scroll;
}
/deep/.no-mobile-dialog {
}
.el-tag {
margin-top: 10px;
margin-right: 10px;
}
.el-tag+.el-tag{
margin-right: 10px;
}
.button-new-tag {
margin-top: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-right: 10px;
margin-top: 10px;
vertical-align: bottom;
}
/deep/.mu-secondary-text-color {
color: #2196f3;
}
/deep/.el-select {
input {
padding: 20px;
}
}
</style>
......