注释了全部前端文件包

feature/lxh
李炫好 1 month ago
parent 45bf601850
commit 0769663fe0

@ -1,7 +1,13 @@
# 定义语言为node_js
language: node_js language: node_js
# 定义node_js版本为10.15.0
node_js: node_js:
- 10.15.0 - 10.15.0
# 缓存yarn
cache: yarn cache: yarn
# 定义脚本
script: script:
# 运行yarn
- yarn - yarn
- yarn run lint --no-fix && yarn run build # 运行yarn run lint --no-fix && yarn run build
- yarn run lint --no-fix && yarn run build

@ -1,6 +1,9 @@
// 导出一个对象用于配置Babel
module.exports = { module.exports = {
// 使用@vue/app预设
presets: [ presets: [
'@vue/app', '@vue/app',
// 使用@babel/preset-env预设并设置useBuiltIns为entry
[ [
'@babel/preset-env', '@babel/preset-env',
{ {
@ -8,9 +11,10 @@ module.exports = {
} }
] ]
] ]
// if your use import on Demand, Use this code // 如果你的项目中使用了按需加载,可以使用以下代码
// , // ,
// plugins: [ // plugins: [
// // 使用import插件配置ant-design-vue库的路径和样式
// [ 'import', { // [ 'import', {
// 'libraryName': 'ant-design-vue', // 'libraryName': 'ant-design-vue',
// 'libraryDirectory': 'es', // 'libraryDirectory': 'es',

@ -11,16 +11,23 @@ import bootstrap from './core/bootstrap'
import './core/use' import './core/use'
import './permission' // permission control import './permission' // permission control
import './utils/filter' // global filter import './utils/filter' // global filter
import './utils/directive' // 全局指令
// 设置Vue的生产提示为false
Vue.config.productionTip = false Vue.config.productionTip = false
// mount axios Vue.$http and this.$http // 挂载axios Vue.$http和this.$http
Vue.use(VueAxios) Vue.use(VueAxios)
// 创建Vue实例
new Vue({ new Vue({
// 路由
router, router,
// 状态管理
store, store,
// 创建时调用bootstrap函数
created () { created () {
bootstrap() bootstrap()
}, },
// 渲染App组件
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')

@ -1,11 +1,14 @@
<template> <template>
<!-- 定义一个div元素用于显示404页面 -->
<div> <div>
404 page 404 page
</div> </div>
</template> </template>
<script> <script>
// Vue
export default { export default {
//
name: '404' name: '404'
} }
</script> </script>

@ -1,17 +1,24 @@
<template> <template>
<!-- 定义一个页面视图不显示标题 -->
<page-view :title="false"> <page-view :title="false">
<!-- 引入banner组件 -->
<banner/> <banner/>
<!-- 引入page1组件 -->
<page1/> <page1/>
</page-view> </page-view>
</template> </template>
<script> <script>
// PageView
import { PageView } from '../layouts' import { PageView } from '../layouts'
// Banner
import Banner from './home/Banner' import Banner from './home/Banner'
// Page1
import Page1 from './home/Page1' import Page1 from './home/Page1'
export default { export default {
//
name: 'Home', name: 'Home',
//
components: { components: {
PageView, PageView,
Banner, Banner,

@ -1,17 +1,27 @@
<template> <template>
<!-- 定义一个卡片列表的容器 -->
<div class="card-list" ref="content"> <div class="card-list" ref="content">
<!-- 使用Ant Design Vue的List组件设置网格布局 -->
<a-list <a-list
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}" :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
:dataSource="dataSource" :dataSource="dataSource"
> >
<!-- 使用List组件的renderItem插槽自定义列表项的渲染 -->
<a-list-item slot="renderItem" slot-scope="item"> <a-list-item slot="renderItem" slot-scope="item">
<!-- 使用Ant Design Vue的Card组件设置可hover效果 -->
<a-card :hoverable="true" @click="joinExam(item.id)"> <a-card :hoverable="true" @click="joinExam(item.id)">
<!-- 使用Card组件的meta插槽自定义卡片头部 -->
<a-card-meta> <a-card-meta>
<!-- 设置卡片标题 -->
<div style="margin-bottom: 3px" slot="title">{{ item.title }}</div> <div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
<!-- 设置卡片头像 -->
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar | imgSrcFilter" size="large" /> <a-avatar class="card-avatar" slot="avatar" :src="item.avatar | imgSrcFilter" size="large" />
<!-- 设置卡片描述 -->
<div class="meta-content" slot="description">{{ item.content }}</div> <div class="meta-content" slot="description">{{ item.content }}</div>
</a-card-meta> </a-card-meta>
<!-- 使用Card组件的actions插槽自定义卡片底部 -->
<template class="ant-card-actions" slot="actions"> <template class="ant-card-actions" slot="actions">
<!-- 设置卡片底部内容 -->
<a>满分{{ item.score }}</a> <a>满分{{ item.score }}</a>
<a>限时{{ item.elapse }}分钟</a> <a>限时{{ item.elapse }}分钟</a>
</template> </template>
@ -34,6 +44,7 @@ export default {
} }
}, },
methods: { methods: {
//
joinExam (id) { joinExam (id) {
const routeUrl = this.$router.resolve({ const routeUrl = this.$router.resolve({
path: `/exam/${id}` path: `/exam/${id}`
@ -65,15 +76,18 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
//
.card-avatar { .card-avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 48px; border-radius: 48px;
} }
//
.ant-card-actions { .ant-card-actions {
background: #f7f9fa; background: #f7f9fa;
//
li { li {
float: left; float: left;
text-align: center; text-align: center;
@ -81,16 +95,19 @@ export default {
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
width: 50%; width: 50%;
//
&:not(:last-child) { &:not(:last-child) {
border-right: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;
} }
//
a { a {
color: rgba(0, 0, 0, .45); color: rgba(0, 0, 0, .45);
line-height: 22px; line-height: 22px;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
//
&:hover { &:hover {
color: #1890ff; color: #1890ff;
} }
@ -98,6 +115,7 @@ export default {
} }
} }
//
.new-btn { .new-btn {
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
@ -105,6 +123,7 @@ export default {
height: 188px; height: 188px;
} }
//
.meta-content { .meta-content {
position: relative; position: relative;
overflow: hidden; overflow: hidden;

@ -1,9 +1,14 @@
<template> <template>
<!-- 使用a-card组件设置bordered属性为false表示无边框 -->
<a-card :bordered="false"> <a-card :bordered="false">
<!-- 定义一个id为toolbar的div用于放置按钮 -->
<div id="toolbar"> <div id="toolbar">
<!-- 新建按钮点击时调用createQuestionModal的create方法 -->
<a-button type="primary" icon="plus" @click="$refs.createQuestionModal.create()"></a-button>&nbsp; <a-button type="primary" icon="plus" @click="$refs.createQuestionModal.create()"></a-button>&nbsp;
<!-- 全量刷新按钮点击时调用loadAll方法 -->
<a-button type="primary" icon="reload" @click="loadAll()"></a-button> <a-button type="primary" icon="reload" @click="loadAll()"></a-button>
</div> </div>
<!-- 使用BootstrapTable组件设置columnsdataoptions属性 -->
<BootstrapTable <BootstrapTable
ref="table" ref="table"
:columns="columns" :columns="columns"
@ -11,9 +16,13 @@
:options="options" :options="options"
/> />
<!-- ref是为了方便用this.$refs.modal直接引用下同 --> <!-- ref是为了方便用this.$refs.modal直接引用下同 -->
<!-- 创建问题模态框设置ref为createQuestionModal监听ok事件 -->
<step-by-step-question-modal ref="createQuestionModal" @ok="handleOk" /> <step-by-step-question-modal ref="createQuestionModal" @ok="handleOk" />
<!-- 更新问题模态框设置ref为questionUpdateModal监听ok事件 -->
<summernote-update-modal ref="questionUpdateModal" @ok="handleOk" /> <summernote-update-modal ref="questionUpdateModal" @ok="handleOk" />
<!-- 查看问题模态框设置ref为modalView监听ok事件 -->
<question-view-modal ref="modalView" @ok="handleOk" /> <question-view-modal ref="modalView" @ok="handleOk" />
<!-- 编辑问题模态框设置ref为modalEdit监听ok事件 -->
<question-edit-modal ref="modalEdit" @ok="handleOk" /> <question-edit-modal ref="modalEdit" @ok="handleOk" />
</a-card> </a-card>
</template> </template>
@ -36,7 +45,8 @@ export default {
QuestionEditModal QuestionEditModal
}, },
data () { data () {
const that = this // 便bootstrap-tablemethods const that = this
// 便bootstrap-tablemethods
return { return {
// //
columns: [ columns: [
@ -44,7 +54,8 @@ export default {
title: '序号', title: '序号',
field: 'serial', field: 'serial',
formatter: function (value, row, index) { formatter: function (value, row, index) {
return index + 1 // 1 return index + 1
// 1
} }
}, },
{ {
@ -81,7 +92,8 @@ export default {
}, },
events: { events: {
'click .question-score': function (e, value, row, index) { 'click .question-score': function (e, value, row, index) {
const $element = $(e.target) // html const $element = $(e.target)
// html
$element.html('<input type="text" value="' + value + '">') $element.html('<input type="text" value="' + value + '">')
} }
} }
@ -98,8 +110,10 @@ export default {
}, },
events: { events: {
'click .question-level': function (e, value, row, index) { 'click .question-level': function (e, value, row, index) {
const $element = $(e.target) // html const $element = $(e.target)
if ($element.children().length > 0) return // // html
if ($element.children().length > 0) return
//
getQuestionSelection().then(res => { getQuestionSelection().then(res => {
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
@ -134,8 +148,10 @@ export default {
}, },
events: { events: {
'click .question-type': function (e, value, row, index) { 'click .question-type': function (e, value, row, index) {
const $element = $(e.target) // html const $element = $(e.target)
if ($element.children().length > 0) return // // html
if ($element.children().length > 0) return
//
getQuestionSelection().then(res => { getQuestionSelection().then(res => {
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
@ -170,8 +186,10 @@ export default {
}, },
events: { events: {
'click .question-category': function (e, value, row, index) { 'click .question-category': function (e, value, row, index) {
const $element = $(e.target) // html const $element = $(e.target)
if ($element.children().length > 0) return // // html
if ($element.children().length > 0) return
//
getQuestionSelection().then(res => { getQuestionSelection().then(res => {
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
@ -179,7 +197,8 @@ export default {
const categories = res.data.categories const categories = res.data.categories
let inner = '<select>' let inner = '<select>'
for (let i = 0; i < categories.length; i++) { for (let i = 0; i < categories.length; i++) {
if (categories[i].name === value) { // if (categories[i].name === value) {
//
// //
inner += '<option value ="' + categories[i].id + '" name="' + categories[i].description + '" selected="selected">' + categories[i].name + '</option>' inner += '<option value ="' + categories[i].id + '" name="' + categories[i].description + '" selected="selected">' + categories[i].name + '</option>'
} else { } else {
@ -221,7 +240,8 @@ export default {
} }
} }
], ],
tableData: [], // bootstrap-table tableData: [],
// bootstrap-table
// custom bootstrap-table // custom bootstrap-table
options: { options: {
search: true, search: true,
@ -234,8 +254,10 @@ export default {
idTable: 'advancedTable', idTable: 'advancedTable',
// http://www.itxst.com/bootstrap-table-events/tutorial.html // http://www.itxst.com/bootstrap-table-events/tutorial.html
// onClickRow: that.clickRow, // onClickRow: that.clickRow,
// onClickCell: that.clickCell // // onClickCell: that.clickCell
onDblClickCell: that.dblClickCell // //
onDblClickCell: that.dblClickCell
//
} }
} }
}, },
@ -353,4 +375,4 @@ export default {
} }
} }
} }
</script> </script>

@ -1,4 +1,5 @@
<template> <template>
<!-- 新建规则模态框 -->
<a-modal <a-modal
title="新建规则" title="新建规则"
:width="640" :width="640"
@ -7,13 +8,17 @@
@ok="handleSubmit" @ok="handleSubmit"
@cancel="handleCancel" @cancel="handleCancel"
> >
<!-- 加载中 -->
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<!-- 表单 -->
<a-form :form="form"> <a-form :form="form">
<!-- 描述 -->
<a-form-item <a-form-item
label="描述" label="描述"
:labelCol="labelCol" :labelCol="labelCol"
:wrapperCol="wrapperCol" :wrapperCol="wrapperCol"
> >
<!-- 输入框 -->
<a-input v-decorator="['desc', {rules: [{required: true, min: 5, message: ''}]}]" /> <a-input v-decorator="['desc', {rules: [{required: true, min: 5, message: ''}]}]" />
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -25,24 +30,31 @@
export default { export default {
data () { data () {
return { return {
//
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 7 } sm: { span: 7 }
}, },
//
wrapperCol: { wrapperCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 13 } sm: { span: 13 }
}, },
//
visible: false, visible: false,
//
confirmLoading: false, confirmLoading: false,
//
form: this.$form.createForm(this) form: this.$form.createForm(this)
} }
}, },
methods: { methods: {
//
add () { add () {
this.visible = true this.visible = true
}, },
//
handleSubmit () { handleSubmit () {
const { form: { validateFields } } = this const { form: { validateFields } } = this
this.confirmLoading = true this.confirmLoading = true
@ -59,6 +71,7 @@ export default {
} }
}) })
}, },
//
handleCancel () { handleCancel () {
this.visible = false this.visible = false
} }

@ -181,15 +181,18 @@ export default {
that.checks = res.data.checks that.checks = res.data.checks
that.judges = res.data.judges that.judges = res.data.judges
// examradioschecksjudgesthischeckedtrue // examradioschecksjudgesthischeckedtrue
for (let i = 0; i < exam.radios.length; i++) { // for (let i = 0; i < exam.radios.length; i++) {
//
that.defaultRadios.push(exam.radios[i].name) that.defaultRadios.push(exam.radios[i].name)
} }
that.handleRadioChange(that.defaultRadios) that.handleRadioChange(that.defaultRadios)
for (let i = 0; i < exam.checks.length; i++) { // for (let i = 0; i < exam.checks.length; i++) {
//
that.defaultChecks.push(exam.checks[i].name) that.defaultChecks.push(exam.checks[i].name)
} }
that.handleCheckChange(that.defaultChecks) that.handleCheckChange(that.defaultChecks)
for (let i = 0; i < exam.judges.length; i++) { // for (let i = 0; i < exam.judges.length; i++) {
//
that.defaultJudges.push(exam.judges[i].name) that.defaultJudges.push(exam.judges[i].name)
} }
that.handleJudgeChange(that.defaultJudges) that.handleJudgeChange(that.defaultJudges)
@ -266,7 +269,8 @@ export default {
handleRadioChange (values) { handleRadioChange (values) {
console.log(values) console.log(values)
// //
for (let i = 0; i < this.radios.length; i++) { // for (let i = 0; i < this.radios.length; i++) {
//
// id // id
const name = this.radios[i].name const name = this.radios[i].name
// //
@ -291,7 +295,8 @@ export default {
handleCheckChange (values) { handleCheckChange (values) {
console.log(values) console.log(values)
// //
for (let i = 0; i < this.checks.length; i++) { // for (let i = 0; i < this.checks.length; i++) {
//
// id // id
const name = this.checks[i].name const name = this.checks[i].name
// //
@ -316,12 +321,14 @@ export default {
handleJudgeChange (values) { handleJudgeChange (values) {
console.log(values) console.log(values)
// //
for (let i = 0; i < this.judges.length; i++) { // for (let i = 0; i < this.judges.length; i++) {
//
// id // id
const name = this.judges[i].name const name = this.judges[i].name
// //
let checked = false let checked = false
for (let j = 0; j < values.length; j++) { // for (let j = 0; j < values.length; j++) {
//
const value = values[j] const value = values[j]
if (name === value) { if (name === value) {
// //

@ -87,8 +87,10 @@ export default {
}, },
updated () { updated () {
//
this.initSummernote('summernote-question-name-edit') this.initSummernote('summernote-question-name-edit')
this.initSummernote('summernote-question-desc-edit') this.initSummernote('summernote-question-desc-edit')
//
this.setSummernoteContent('summernote-question-name-edit', this.name) this.setSummernoteContent('summernote-question-name-edit', this.name)
this.setSummernoteContent('summernote-question-desc-edit', this.desc) this.setSummernoteContent('summernote-question-desc-edit', this.desc)
}, },

@ -1,4 +1,5 @@
<template> <template>
<!-- 创建考试模态框 -->
<a-modal <a-modal
title="创建考试" title="创建考试"
:width="640" :width="640"
@ -6,15 +7,19 @@
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@cancel="handleCancel" @cancel="handleCancel"
> >
<!-- 加载中 -->
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<!-- 步骤条 -->
<a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small"> <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
<a-step title="考试描述"/> <a-step title="考试描述"/>
<a-step title="每题分数"/> <a-step title="每题分数"/>
<a-step title="选择题目"/> <a-step title="选择题目"/>
</a-steps> </a-steps>
<!-- 表单 -->
<a-form :form="form"> <a-form :form="form">
<!-- step1 --> <!-- step1 -->
<div v-show="currentStep === 0"> <div v-show="currentStep === 0">
<!-- 考试名称 -->
<a-form-item <a-form-item
label="考试名称" label="考试名称"
:labelCol="labelCol" :labelCol="labelCol"
@ -22,6 +27,7 @@
> >
<a-input v-decorator="['name', {rules: [{required: true}]}]"/> <a-input v-decorator="['name', {rules: [{required: true}]}]"/>
</a-form-item> </a-form-item>
<!-- 考试限时 -->
<a-form-item <a-form-item
label="考试限时" label="考试限时"
:labelCol="labelCol" :labelCol="labelCol"
@ -34,6 +40,7 @@
/> />
分钟 分钟
</a-form-item> </a-form-item>
<!-- 考试简述 -->
<a-form-item <a-form-item
label="考试简述" label="考试简述"
:labelCol="labelCol" :labelCol="labelCol"
@ -41,6 +48,7 @@
> >
<a-textarea :rows="2" v-decorator="['desc', {rules: [{required: true}]}]"></a-textarea> <a-textarea :rows="2" v-decorator="['desc', {rules: [{required: true}]}]"></a-textarea>
</a-form-item> </a-form-item>
<!-- 考试封面 -->
<a-form-item <a-form-item
label="考试封面" label="考试封面"
:labelCol="labelCol" :labelCol="labelCol"
@ -50,7 +58,9 @@
<div id="summernote-exam-avatar-create"></div> <div id="summernote-exam-avatar-create"></div>
</a-form-item> </a-form-item>
</div> </div>
<!-- step2 -->
<div v-show="currentStep === 1"> <div v-show="currentStep === 1">
<!-- 单选题 -->
<a-form-item <a-form-item
label="单选题" label="单选题"
:labelCol="labelCol" :labelCol="labelCol"
@ -64,6 +74,7 @@
</a-form-item> </a-form-item>
<!-- 多选题 -->
<a-form-item <a-form-item
label="多选题" label="多选题"
:labelCol="labelCol" :labelCol="labelCol"
@ -77,6 +88,7 @@
</a-form-item> </a-form-item>
<!-- 判断题 -->
<a-form-item <a-form-item
label="判断题" label="判断题"
:labelCol="labelCol" :labelCol="labelCol"
@ -90,8 +102,9 @@
</a-form-item> </a-form-item>
</div> </div>
<!-- step3 -->
<div v-show="currentStep === 2"> <div v-show="currentStep === 2">
<!-- 选择单选题 -->
<a-form-item <a-form-item
label="选择单选题" label="选择单选题"
:labelCol="labelCol" :labelCol="labelCol"
@ -113,6 +126,7 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<!-- 选择多选题 -->
<a-form-item <a-form-item
label="选择多选题" label="选择多选题"
:labelCol="labelCol" :labelCol="labelCol"
@ -134,6 +148,7 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<!-- 选择判断题 -->
<a-form-item <a-form-item
label="选择判断题" label="选择判断题"
:labelCol="labelCol" :labelCol="labelCol"
@ -157,9 +172,13 @@
</div> </div>
</a-form> </a-form>
</a-spin> </a-spin>
<!-- 底部按钮 -->
<template slot="footer"> <template slot="footer">
<!-- 上一步 -->
<a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }"></a-button> <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }"></a-button>
<!-- 取消 -->
<a-button key="cancel" @click="handleCancel"></a-button> <a-button key="cancel" @click="handleCancel"></a-button>
<!-- 下一步 -->
<a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)"> <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">
{{ currentStep === 2 && '完成' || '下一步' }} {{ currentStep === 2 && '完成' || '下一步' }}
</a-button> </a-button>

@ -1,4 +1,5 @@
<template> <template>
<!-- 分步对话框 -->
<a-modal <a-modal
title="分步对话框" title="分步对话框"
:width="640" :width="640"
@ -6,15 +7,19 @@
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@cancel="handleCancel" @cancel="handleCancel"
> >
<!-- 加载中 -->
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<!-- 步骤条 -->
<a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small"> <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
<a-step title="基本信息" /> <a-step title="基本信息" />
<a-step title="配置规则属性" /> <a-step title="配置规则属性" />
<a-step title="设定调度周期" /> <a-step title="设定调度周期" />
</a-steps> </a-steps>
<!-- 表单 -->
<a-form :form="form"> <a-form :form="form">
<!-- step1 --> <!-- step1 -->
<div v-show="currentStep === 0"> <div v-show="currentStep === 0">
<!-- 规则名称 -->
<a-form-item <a-form-item
label="规则名称" label="规则名称"
:labelCol="labelCol" :labelCol="labelCol"
@ -22,6 +27,7 @@
> >
<a-input v-decorator="['name', {rules: [{required: true}]}]" /> <a-input v-decorator="['name', {rules: [{required: true}]}]" />
</a-form-item> </a-form-item>
<!-- 规则描述 -->
<a-form-item <a-form-item
label="规则描述" label="规则描述"
:labelCol="labelCol" :labelCol="labelCol"
@ -31,6 +37,7 @@
</a-form-item> </a-form-item>
</div> </div>
<div v-show="currentStep === 1"> <div v-show="currentStep === 1">
<!-- 监控对象 -->
<a-form-item <a-form-item
label="监控对象" label="监控对象"
:labelCol="labelCol" :labelCol="labelCol"
@ -42,6 +49,7 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<!-- 规则模板 -->
<a-form-item <a-form-item
label="规则模板" label="规则模板"
:labelCol="labelCol" :labelCol="labelCol"
@ -53,6 +61,7 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<!-- 规则类型 -->
<a-form-item <a-form-item
label="规则类型" label="规则类型"
:labelCol="labelCol" :labelCol="labelCol"
@ -66,6 +75,7 @@
</div> </div>
<div v-show="currentStep === 2"> <div v-show="currentStep === 2">
<!-- 开始时间 -->
<a-form-item <a-form-item
label="开始时间" label="开始时间"
:labelCol="labelCol" :labelCol="labelCol"
@ -73,6 +83,7 @@
> >
<a-date-picker v-decorator="['time', {rules: [{ type: 'object', required: true, message: 'Please select time!' }]}]" style="width: 100%" /> <a-date-picker v-decorator="['time', {rules: [{ type: 'object', required: true, message: 'Please select time!' }]}]" style="width: 100%" />
</a-form-item> </a-form-item>
<!-- 调度周期 -->
<a-form-item <a-form-item
label="调度周期" label="调度周期"
:labelCol="labelCol" :labelCol="labelCol"
@ -87,9 +98,13 @@
<!-- step1 end --> <!-- step1 end -->
</a-form> </a-form>
</a-spin> </a-spin>
<!-- 底部按钮 -->
<template slot="footer"> <template slot="footer">
<!-- 上一步 -->
<a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }" >上一步</a-button> <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }" >上一步</a-button>
<!-- 取消 -->
<a-button key="cancel" @click="handleCancel"></a-button> <a-button key="cancel" @click="handleCancel"></a-button>
<!-- 下一步 -->
<a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">{{ currentStep === 2 && '' || '' }}</a-button> <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">{{ currentStep === 2 && '' || '' }}</a-button>
</template> </template>
</a-modal> </a-modal>
@ -98,6 +113,7 @@
<script> <script>
import pick from 'lodash.pick' import pick from 'lodash.pick'
//
const stepForms = [ const stepForms = [
['name', 'desc'], ['name', 'desc'],
['target', 'template', 'type'], ['target', 'template', 'type'],
@ -108,23 +124,31 @@ export default {
name: 'StepByStepModal', name: 'StepByStepModal',
data () { data () {
return { return {
//
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 7 } sm: { span: 7 }
}, },
//
wrapperCol: { wrapperCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 13 } sm: { span: 13 }
}, },
//
visible: false, visible: false,
//
confirmLoading: false, confirmLoading: false,
//
currentStep: 0, currentStep: 0,
//
mdl: {}, mdl: {},
//
form: this.$form.createForm(this) form: this.$form.createForm(this)
} }
}, },
methods: { methods: {
//
edit (record) { edit (record) {
this.visible = true this.visible = true
const { form: { setFieldsValue } } = this const { form: { setFieldsValue } } = this
@ -132,6 +156,7 @@ export default {
setFieldsValue(pick(record, [])) setFieldsValue(pick(record, []))
}) })
}, },
//
handleNext (step) { handleNext (step) {
const { form: { validateFields } } = this const { form: { validateFields } } = this
const currentStep = step + 1 const currentStep = step + 1
@ -144,7 +169,7 @@ export default {
}) })
return return
} }
// last step //
this.confirmLoading = true this.confirmLoading = true
validateFields((errors, values) => { validateFields((errors, values) => {
console.log('errors:', errors, 'val:', values) console.log('errors:', errors, 'val:', values)
@ -159,11 +184,13 @@ export default {
} }
}) })
}, },
//
backward () { backward () {
this.currentStep-- this.currentStep--
}, },
//
handleCancel () { handleCancel () {
// clear form & currentStep //
this.visible = false this.visible = false
this.currentStep = 0 this.currentStep = 0
} }

@ -1,22 +1,29 @@
<template> <template>
<!-- 创建问题模态框 -->
<a-modal title="创建问题" :width="800" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel"> <a-modal title="创建问题" :width="800" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
<!-- 加载中 -->
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<!-- 步骤条 -->
<a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small"> <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
<a-step title="问题内容" /> <a-step title="问题内容" />
<a-step title="问题分类" /> <a-step title="问题分类" />
<a-step title="问题选项" /> <a-step title="问题选项" />
</a-steps> </a-steps>
<!-- 表单 -->
<a-form :form="form"> <a-form :form="form">
<!-- step1 --> <!-- step1 -->
<div v-show="currentStep === 0"> <div v-show="currentStep === 0">
<!-- 题干 -->
<a-form-item label="题干" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="题干" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div id="summernote-question-name"></div> <div id="summernote-question-name"></div>
</a-form-item> </a-form-item>
<!-- 解析 -->
<a-form-item label="解析" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="解析" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div id="summernote-question-desc"></div> <div id="summernote-question-desc"></div>
</a-form-item> </a-form-item>
</div> </div>
<div v-show="currentStep === 1"> <div v-show="currentStep === 1">
<!-- 题型 -->
<a-form-item label="题型" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="题型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select v-decorator="['type', {rules: [{required: true}]}]" placeholder="请选择题型" style="width: 100%"> <a-select v-decorator="['type', {rules: [{required: true}]}]" placeholder="请选择题型" style="width: 100%">
<a-select-option v-for="typeObj in types" :value="typeObj.id" :key="typeObj.id"> <a-select-option v-for="typeObj in types" :value="typeObj.id" :key="typeObj.id">
@ -25,6 +32,7 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<!-- 归类 -->
<a-form-item label="归类" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="归类" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select v-decorator="['category', { rules: [{required: true}]}]" placeholder="请选择分类" style="width: 100%"> <a-select v-decorator="['category', { rules: [{required: true}]}]" placeholder="请选择分类" style="width: 100%">
<a-select-option v-for="category in categories" :value="category.id" :key="category.id"> <a-select-option v-for="category in categories" :value="category.id" :key="category.id">
@ -33,6 +41,7 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<!-- 难度 -->
<a-form-item label="难度" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-form-item label="难度" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select v-decorator="['level', { rules: [{required: true}]}]" placeholder="请选择难度" style="width: 100%"> <a-select v-decorator="['level', { rules: [{required: true}]}]" placeholder="请选择难度" style="width: 100%">
<a-select-option v-for="level in levels" :value="level.id" :key="level.id"> <a-select-option v-for="level in levels" :value="level.id" :key="level.id">
@ -52,6 +61,7 @@
/> />
</a-form-item> </a-form-item>
<!-- 设置答案 -->
<a-form-item label="设置答案" :labelCol="labelCol" :wrapperCol="wrapperCol" enterButton="Search"> <a-form-item label="设置答案" :labelCol="labelCol" :wrapperCol="wrapperCol" enterButton="Search">
<!-- 注意这里要按照单选多选和判断进行区分 --> <!-- 注意这里要按照单选多选和判断进行区分 -->
<!-- 单选 --> <!-- 单选 -->
@ -101,15 +111,17 @@
</a-form> </a-form>
</a-spin> </a-spin>
<template slot="footer"> <template slot="footer">
<!-- 上一步 -->
<a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }"></a-button> <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }"></a-button>
<!-- 取消 -->
<a-button key="cancel" @click="handleCancel"></a-button> <a-button key="cancel" @click="handleCancel"></a-button>
<!-- 下一步 -->
<a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)"> <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">
{{ currentStep === 2 && '完成' || '下一步' }} {{ currentStep === 2 && '完成' || '下一步' }}
</a-button> </a-button>
</template> </template>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import '../../../plugins/summernote' import '../../../plugins/summernote'
import $ from 'jquery' import $ from 'jquery'

@ -1,8 +1,13 @@
<template> <template>
<!-- 定义一个模态框组件 -->
<a-modal :title="title" :width="600" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel"> <a-modal :title="title" :width="600" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
<!-- 定义一个div元素id为divId -->
<div :id="divId"></div> <div :id="divId"></div>
<!-- 定义模态框的底部按钮 -->
<template slot="footer"> <template slot="footer">
<!-- 定义一个完成按钮点击时调用handleUpdate方法 -->
<a-button key="update" @click="handleUpdate"></a-button> <a-button key="update" @click="handleUpdate"></a-button>
<!-- 定义一个关闭按钮点击时调用handleCancel方法 -->
<a-button key="cancel" @click="handleCancel"></a-button> <a-button key="cancel" @click="handleCancel"></a-button>
</template> </template>
</a-modal> </a-modal>
@ -19,17 +24,21 @@ export default {
return { return {
confirmLoading: false, confirmLoading: false,
visible: false, visible: false,
divId: 'summernote-id', // id divId: 'summernote-id',
// id
record: {}, record: {},
key: '', // key: '',
content: '', // //
content: '',
//
title: '', title: '',
fn: Function fn: Function
} }
}, },
updated () { updated () {
this.initSummernote(this.divId) this.initSummernote(this.divId)
$('#' + this.divId).summernote('code', this.content) // $('#' + this.divId).summernote('code', this.content)
//
}, },
methods: { methods: {
initSummernote (divId) { initSummernote (divId) {
@ -61,12 +70,14 @@ export default {
return $('#' + divId).summernote('code', content) return $('#' + divId).summernote('code', content)
}, },
edit (divId, record, key, title, fn) { edit (divId, record, key, title, fn) {
this.divId = divId // id this.divId = divId
// id
this.visible = true this.visible = true
// data // data
Object.assign(this.record, record) Object.assign(this.record, record)
this.key = key this.key = key
this.content = this.record[key] // key this.content = this.record[key]
// key
this.title = title this.title = title
this.fn = fn // this.fn = fn //
}, },

@ -1,14 +1,19 @@
<template> <template>
<!-- 编辑封面模态框 -->
<a-modal title="编辑封面" :width="400" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel"> <a-modal title="编辑封面" :width="400" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
<!-- 提示信息 -->
<p>截图直接粘贴到下面即可建议图片不要大于80*80</p> <p>截图直接粘贴到下面即可建议图片不要大于80*80</p>
<!-- summernote编辑器 -->
<div id="summernote-exam-avatar"></div> <div id="summernote-exam-avatar"></div>
<!-- 模态框底部按钮 -->
<template slot="footer"> <template slot="footer">
<!-- 完成按钮 -->
<a-button key="update" @click="handleUpdate"></a-button> <a-button key="update" @click="handleUpdate"></a-button>
<!-- 关闭按钮 -->
<a-button key="cancel" @click="handleCancel"></a-button> <a-button key="cancel" @click="handleCancel"></a-button>
</template> </template>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { examUpdate } from '@api/exam' import { examUpdate } from '@api/exam'
import '../../../plugins/summernote' import '../../../plugins/summernote'

@ -1,5 +1,7 @@
<template> <template>
<!-- 定义一个div容器 -->
<div> <div>
<!-- 引入BootstrapTable组件并设置ref属性为tablecolumns属性为columnsdata属性为dataoptions属性为options -->
<BootstrapTable <BootstrapTable
ref="table" ref="table"
:columns="columns" :columns="columns"
@ -15,7 +17,8 @@ import $ from 'jquery'
export default { export default {
data () { data () {
const that = this // 便bootstrap-tablemethods const that = this
// 便bootstrap-tablemethods
return { return {
columns: [ columns: [
{ {
@ -42,7 +45,8 @@ export default {
return '<button type="button" class="btn btn-success mybtn">Success</button>' return '<button type="button" class="btn btn-success mybtn">Success</button>'
}, },
events: { events: {
'click .mybtn': function (e, value, row, index) { // dblclick 'click .mybtn': function (e, value, row, index) {
// dblclick
that.clickRow(row, value, index) that.clickRow(row, value, index)
} }
} }
@ -88,8 +92,10 @@ export default {
idTable: 'advancedTable', idTable: 'advancedTable',
// http://www.itxst.com/bootstrap-table-events/tutorial.html // http://www.itxst.com/bootstrap-table-events/tutorial.html
// onClickRow: that.clickRow, // onClickRow: that.clickRow,
// onClickCell: that.clickCell, // // onClickCell: that.clickCell,
onDblClickCell: that.dblClickCell // //
onDblClickCell: that.dblClickCell
//
} }
} }
}, },
@ -102,23 +108,33 @@ export default {
}, },
/** /**
* 单元格双击事件 * 单元格双击事件
*
* @param field 字段名如idnameprice等 * @param field 字段名如idnameprice等
*
* @param value 字段值 如Item 1$1等 * @param value 字段值 如Item 1$1等
*
* @param row 一行的值{"id":3,"name":"Item 3","price":"$3"} * @param row 一行的值{"id":3,"name":"Item 3","price":"$3"}
*
* @param $element 行所在的dom元素可以动态往里面加入页面元素比如双击可编辑或者弹出富文本框等 * @param $element 行所在的dom元素可以动态往里面加入页面元素比如双击可编辑或者弹出富文本框等
*/ */
dblClickCell (field, value, row, $element) { dblClickCell (field, value, row, $element) {
console.log($element.text()) // console.log($element.text())
console.log($element.html()) // //
console.log($element.html())
//
const p = $('<p>弹框出现前修改内容</p>') const p = $('<p>弹框出现前修改内容</p>')
$element.append(p) $element.append(p)
console.log($element.text()) // console.log($element.text())
row[field] = $element.text() // //
row[field] = $element.text()
//
alert(field + ':' + row + ', ' + JSON.stringify(row)) alert(field + ':' + row + ', ' + JSON.stringify(row))
const index = $element.parent().attr('data-index') // id便datarows const index = $element.parent().attr('data-index')
// id便datarows
row[field] = '弹框出现后修改内容' row[field] = '弹框出现后修改内容'
this.data.rows[index] = row this.data.rows[index] = row
this.$refs.table._initTable() // this.$refs.table._initTable()
//
} }
} }
} }

@ -1,12 +1,16 @@
<template> <template>
<div> <div>
<!-- 富文本编辑器 -->
<div id="summernote"></div> <div id="summernote"></div>
<!-- 查看富文本内容按钮 -->
<button @click="getContent()"></button> <button @click="getContent()"></button>
<!-- 设置富文本内容按钮 -->
<button @click="setContent()"></button> <button @click="setContent()"></button>
</div> </div>
</template> </template>
<script> <script>
// summernote
import '../../plugins/summernote' import '../../plugins/summernote'
import $ from 'jquery' import $ from 'jquery'
@ -14,24 +18,34 @@ export default {
name: 'NoteDemo', name: 'NoteDemo',
data () { data () {
return { return {
//
richContent: '' richContent: ''
} }
}, },
methods: { methods: {
//
getContent () { getContent () {
console.log($('#summernote').summernote('code')) console.log($('#summernote').summernote('code'))
}, },
//
setContent () { setContent () {
$('#summernote').summernote('code', 'hello world!') $('#summernote').summernote('code', 'hello world!')
} }
}, },
mounted () { mounted () {
// summernote
$('#summernote').summernote({ $('#summernote').summernote({
//
lang: 'zh-CN', lang: 'zh-CN',
//
placeholder: '请输入内容', placeholder: '请输入内容',
//
height: 300, height: 300,
//
width: 600, width: 600,
// html
htmlMode: true, htmlMode: true,
//
toolbar: [ toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']], ['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']], ['fontsize', ['fontsize']],
@ -41,13 +55,17 @@ export default {
['insert', ['link', 'picture']], ['insert', ['link', 'picture']],
['mybutton', ['myVideo']] ['mybutton', ['myVideo']]
], ],
//
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'], fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],
//
fontNames: [ fontNames: [
'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
'Tahoma', 'Times New Roman', 'Verdana' 'Tahoma', 'Times New Roman', 'Verdana'
], ],
//
callbacks: { callbacks: {
//
onSubmit: function () { onSubmit: function () {
this.richContent = $('#summernote').summernote('code') this.richContent = $('#summernote').summernote('code')
} }

@ -84,18 +84,28 @@ export default {
data () { data () {
return { return {
customActiveKey: 'tab1', customActiveKey: 'tab1',
// tab
loginBtn: false, loginBtn: false,
//
// login type: 0 email, 1 username, 2 telephone // login type: 0 email, 1 username, 2 telephone
loginType: 0, loginType: 0,
// 0 email, 1 username, 2 telephone
requiredTwoStepCaptcha: false, requiredTwoStepCaptcha: false,
//
stepCaptchaVisible: false, stepCaptchaVisible: false,
//
form: this.$form.createForm(this), form: this.$form.createForm(this),
//
state: { state: {
time: 60, time: 60,
//
loginBtn: false, loginBtn: false,
//
// login type: 0 email, 1 username, 2 telephone // login type: 0 email, 1 username, 2 telephone
loginType: 0, loginType: 0,
// 0 email, 1 username, 2 telephone
smsSendBtn: false smsSendBtn: false
//
} }
} }
}, },
@ -110,7 +120,8 @@ export default {
// this.requiredTwoStepCaptcha = true // this.requiredTwoStepCaptcha = true
}, },
methods: { methods: {
...mapActions(['Login', 'Logout']), // Vuexstore/modules/user.js ...mapActions(['Login', 'Logout']),
// Vuexstore/modules/user.js
// handler // handler
handleUsernameOrEmail (rule, value, callback) { handleUsernameOrEmail (rule, value, callback) {
const { state } = this const { state } = this
@ -140,20 +151,29 @@ export default {
const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha'] const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha']
validateFields(validateFieldsKey, { force: true }, (err, values) => { validateFields(validateFieldsKey, { force: true }, (err, values) => {
console.log(values) // console.log(values)
//
if (!err) { if (!err) {
const loginParams = {} // const loginParams = {}
//
// delete loginParams.username // delete loginParams.username
// loginParams[!state.loginType ? 'email' : 'username'] = values.username // loginParams[!state.loginType ? 'email' : 'username'] = values.username
loginParams.loginType = state.loginType // 0 email, 1 username loginParams.loginType = state.loginType
loginParams.userInfo = values.username // emailusernameuserinfo // 0 email, 1 username
loginParams.password = values.password // loginParams.userInfo = values.username
// emailusernameuserinfo
loginParams.password = values.password
//
console.log(loginParams) console.log(loginParams)
Login(loginParams) // Login(loginParams)
.then((res) => this.loginSuccess(res)) // //
.catch(err => this.requestFailed(err)) // .then((res) => this.loginSuccess(res))
//
.catch(err => this.requestFailed(err))
//
.finally(() => { .finally(() => {
state.loginBtn = false // state.loginBtn = false
//
}) })
} else { } else {
setTimeout(() => { setTimeout(() => {
@ -228,21 +248,26 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
//
.user-layout-login { .user-layout-login {
//
label { label {
font-size: 14px; font-size: 14px;
} }
//
.getCaptcha { .getCaptcha {
display: block; display: block;
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
//
.forge-password { .forge-password {
font-size: 14px; font-size: 14px;
} }
//
button.login-button { button.login-button {
padding: 0 15px; padding: 0 15px;
font-size: 16px; font-size: 16px;
@ -250,11 +275,13 @@ export default {
width: 100%; width: 100%;
} }
//
.user-login-other { .user-login-other {
text-align: left; text-align: left;
margin-top: 24px; margin-top: 24px;
line-height: 22px; line-height: 22px;
//
.item-icon { .item-icon {
font-size: 24px; font-size: 24px;
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
@ -263,11 +290,13 @@ export default {
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
//
&:hover { &:hover {
color: #1890ff; color: #1890ff;
} }
} }
//
.register { .register {
float: right; float: right;
} }

@ -100,18 +100,21 @@ import { mixinDevice } from '../../utils/mixin.js'
import { getSmsCaptcha } from '../../api/login' import { getSmsCaptcha } from '../../api/login'
import { register } from '../../api/user' import { register } from '../../api/user'
//
const levelNames = { const levelNames = {
0: '低', 0: '低',
1: '低', 1: '低',
2: '中', 2: '中',
3: '强' 3: '强'
} }
//
const levelClass = { const levelClass = {
0: 'error', 0: 'error',
1: 'error', 1: 'error',
2: 'warning', 2: 'warning',
3: 'success' 3: 'success'
} }
//
const levelColor = { const levelColor = {
0: '#ff0000', 0: '#ff0000',
1: '#ff0000', 1: '#ff0000',
@ -128,28 +131,39 @@ export default {
state: { state: {
time: 60, time: 60,
//
smsSendBtn: false, smsSendBtn: false,
//
passwordLevel: 0, passwordLevel: 0,
//
passwordLevelChecked: false, passwordLevelChecked: false,
//
percent: 10, percent: 10,
//
progressColor: '#FF0000' progressColor: '#FF0000'
//
}, },
registerBtn: false registerBtn: false
//
} }
}, },
computed: { computed: {
//
passwordLevelClass () { passwordLevelClass () {
return levelClass[this.state.passwordLevel] return levelClass[this.state.passwordLevel]
}, },
//
passwordLevelName () { passwordLevelName () {
return levelNames[this.state.passwordLevel] return levelNames[this.state.passwordLevel]
}, },
//
passwordLevelColor () { passwordLevelColor () {
return levelColor[this.state.passwordLevel] return levelColor[this.state.passwordLevel]
} }
}, },
methods: { methods: {
//
handlePasswordLevel (rule, value, callback) { handlePasswordLevel (rule, value, callback) {
let level = 0 let level = 0
@ -180,6 +194,7 @@ export default {
} }
}, },
//
handlePasswordCheck (rule, value, callback) { handlePasswordCheck (rule, value, callback) {
const password = this.form.getFieldValue('password') const password = this.form.getFieldValue('password')
console.log('value', value) console.log('value', value)
@ -192,6 +207,7 @@ export default {
callback() callback()
}, },
//
handlePhoneCheck (rule, value, callback) { handlePhoneCheck (rule, value, callback) {
console.log('handlePhoneCheck, rule:', rule) console.log('handlePhoneCheck, rule:', rule)
console.log('handlePhoneCheck, value', value) console.log('handlePhoneCheck, value', value)
@ -200,6 +216,7 @@ export default {
callback() callback()
}, },
//
handlePasswordInputClick () { handlePasswordInputClick () {
if (!this.isMobile()) { if (!this.isMobile()) {
this.state.passwordLevelChecked = true this.state.passwordLevelChecked = true
@ -208,6 +225,7 @@ export default {
this.state.passwordLevelChecked = false this.state.passwordLevelChecked = false
}, },
//
handleSubmit () { handleSubmit () {
const { form: { validateFields }, $router, $message } = this const { form: { validateFields }, $router, $message } = this
validateFields({ force: true }, (err, values) => { validateFields({ force: true }, (err, values) => {
@ -225,6 +243,7 @@ export default {
}) })
}, },
//
getCaptcha (e) { getCaptcha (e) {
e.preventDefault() e.preventDefault()
const { form: { validateFields }, state, $message, $notification } = this const { form: { validateFields }, state, $message, $notification } = this
@ -262,6 +281,7 @@ export default {
} }
) )
}, },
//
requestFailed (err) { requestFailed (err) {
this.$notification['error']({ this.$notification['error']({
message: '错误', message: '错误',
@ -272,6 +292,7 @@ export default {
} }
}, },
watch: { watch: {
//
'state.passwordLevel' (val) { 'state.passwordLevel' (val) {
console.log(val) console.log(val)
} }
@ -279,46 +300,57 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less">
//
.user-register { .user-register {
//
&.error { &.error {
color: #ff0000; color: #ff0000;
} }
//
&.warning { &.warning {
color: #ff7e05; color: #ff7e05;
} }
//
&.success { &.success {
color: #52c41a; color: #52c41a;
} }
} }
//
.user-layout-register { .user-layout-register {
// addon
.ant-input-group-addon:first-child { .ant-input-group-addon:first-child {
background-color: #fff; background-color: #fff;
} }
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
//
.user-layout-register { .user-layout-register {
//
& > h3 { & > h3 {
font-size: 16px; font-size: 16px;
margin-bottom: 20px; margin-bottom: 20px;
} }
//
.getCaptcha { .getCaptcha {
display: block; display: block;
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
//
.register-button { .register-button {
width: 50%; width: 50%;
} }
//
.login { .login {
float: right; float: right;
line-height: 40px; line-height: 40px;

@ -1,12 +1,16 @@
<template> <template>
<!-- 定义一个result组件并传入isSuccesscontenttitledescription四个属性 -->
<result <result
:isSuccess="true" :isSuccess="true"
:content="false" :content="false"
:title="email" :title="email"
:description="description"> :description="description">
<!-- 定义一个slot用于放置操作按钮 -->
<template slot="action"> <template slot="action">
<!-- 定义一个查看邮箱的按钮 -->
<a-button size="large" type="primary">查看邮箱</a-button> <a-button size="large" type="primary">查看邮箱</a-button>
<!-- 定义一个返回首页的按钮并绑定点击事件 -->
<a-button size="large" style="margin-left: 8px" @click="goHomeHandle"></a-button> <a-button size="large" style="margin-left: 8px" @click="goHomeHandle"></a-button>
</template> </template>
@ -23,11 +27,14 @@ export default {
}, },
data () { data () {
return { return {
//
description: '激活邮件已发送到你的邮箱中邮件有效期为24小时。请及时登录邮箱点击邮件中的链接激活帐户。', description: '激活邮件已发送到你的邮箱中邮件有效期为24小时。请及时登录邮箱点击邮件中的链接激活帐户。',
//
form: {} form: {}
} }
}, },
computed: { computed: {
// email
email () { email () {
const v = this.form && this.form.email || 'xxx' const v = this.form && this.form.email || 'xxx'
const title = `你的账户:${v} 注册成功` const title = `你的账户:${v} 注册成功`
@ -35,9 +42,11 @@ export default {
} }
}, },
created () { created () {
//
this.form = this.$route.params this.form = this.$route.params
}, },
methods: { methods: {
//
goHomeHandle () { goHomeHandle () {
this.$router.push({ name: 'login' }) this.$router.push({ name: 'login' })
} }

@ -37,30 +37,44 @@ module.exports = {
// 链式调用webpack配置 // 链式调用webpack配置
chainWebpack: (config) => { chainWebpack: (config) => {
// 设置路径别名
// 设置路径别名 // 设置路径别名
config.resolve.alias config.resolve.alias
// 设置@符号指向src目录
.set('@$', resolve('src')) .set('@$', resolve('src'))
// 设置@api符号指向src/api目录
.set('@api', resolve('src/api')) .set('@api', resolve('src/api'))
// 设置@assets符号指向src/assets目录
.set('@assets', resolve('src/assets')) .set('@assets', resolve('src/assets'))
// 设置@comp符号指向src/components目录
.set('@comp', resolve('src/components')) .set('@comp', resolve('src/components'))
// 设置@views符号指向src/views目录
.set('@views', resolve('src/views')) .set('@views', resolve('src/views'))
// 设置@layout符号指向src/layout目录
.set('@layout', resolve('src/layout')) .set('@layout', resolve('src/layout'))
// 设置@static符号指向src/static目录
.set('@static', resolve('src/static')) .set('@static', resolve('src/static'))
// 设置jquery符号指向node_modules/jquery/src/jquery目录
.set('jquery', resolve('node_modules/jquery/src/jquery')) .set('jquery', resolve('node_modules/jquery/src/jquery'))
// 配置svg规则 // 配置svg规则
const svgRule = config.module.rule('svg') // 定义svgRule变量值为config.module.rule('svg')
svgRule.uses.clear() const svgRule = config.module.rule('svg')
svgRule // 清空svgRule的uses
svgRule.uses.clear()
// 定义svgRule的oneOf('inline')匹配resourceQuery(/inline/)使用vue-svg-icon-loader
svgRule
.oneOf('inline') .oneOf('inline')
.resourceQuery(/inline/) .resourceQuery(/inline/)
.use('vue-svg-icon-loader') .use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader') .loader('vue-svg-icon-loader')
.end() .end()
.end() .end()
// 定义svgRule的oneOf('external')使用file-loader
.oneOf('external') .oneOf('external')
.use('file-loader') .use('file-loader')
.loader('file-loader') .loader('file-loader')
// 设置file-loader的options
.options({ .options({
name: 'assets/[name].[hash:8].[ext]' name: 'assets/[name].[hash:8].[ext]'
}) })

Loading…
Cancel
Save