|
|
<div id="app" v-cloak>
|
|
|
<el-tabs tab-position="left">
|
|
|
<el-tab-pane label="主题颜色">
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<span>主要颜色</span>
|
|
|
</div>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="5">
|
|
|
<div class="bg-success" style="border-radius: 4px;padding: 20px;color: #ffffff">Success
|
|
|
<div class="value">#67C23A</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="5">
|
|
|
<div class="bg-warning" style="border-radius: 4px;padding: 20px;color: #ffffff">Warning
|
|
|
<div class="value">#E6A23C</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="5">
|
|
|
<div class="bg-danger" style="border-radius: 4px;padding: 20px;color: #ffffff">Danger
|
|
|
<div class="value">#F56C6C</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="5">
|
|
|
<div class="bg-info" style="border-radius: 4px;padding: 20px;color: #ffffff">Info
|
|
|
<div class="value">#909399</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<span>中性色</span>
|
|
|
</div>
|
|
|
<el-row>
|
|
|
<el-col :span="5">
|
|
|
<div>
|
|
|
<div class="bg-text-primary"
|
|
|
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #303133">
|
|
|
主要文字
|
|
|
<div class="value">#303133</div>
|
|
|
</div>
|
|
|
<div class="bg-text-regular"
|
|
|
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #606266">
|
|
|
常规文字
|
|
|
<div class="value">#606266</div>
|
|
|
</div>
|
|
|
<div class="bg-text-secondary"
|
|
|
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #909399">
|
|
|
次要文字
|
|
|
<div class="value">#909399</div>
|
|
|
</div>
|
|
|
<div class="bg-text-placeholder"
|
|
|
style="border-radius: 4px;padding: 20px;color: #ffffff;margin: 5px;background: #C0C4CC">
|
|
|
占位文字
|
|
|
<div class="value">#C0C4CC</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="1">
|
|
|
<div style="width: 20px;height: 10px"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="5">
|
|
|
<div>
|
|
|
<div class="bg-border-base"
|
|
|
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">一级边框
|
|
|
<div class="value">#DCDFE6</div>
|
|
|
</div>
|
|
|
<div class="bg-border-light"
|
|
|
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">二级边框
|
|
|
<div class="value">#E4E7ED</div>
|
|
|
</div>
|
|
|
<div class="bg-border-lighter"
|
|
|
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">三级边框
|
|
|
<div class="value">#EBEEF5</div>
|
|
|
</div>
|
|
|
<div class="bg-border-extra-light"
|
|
|
style="border-radius: 4px;padding: 20px;color: #303133;margin: 5px;">四级边框
|
|
|
<div class="value">#F2F6FC</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="介绍说明">
|
|
|
|
|
|
<h4>主要框架</h4>
|
|
|
|
|
|
<ol style="line-height: 40px;padding-left: 20px;" type="1">
|
|
|
<li>
|
|
|
<el-tag>SpringBoot v2.1.2.RELEASE</el-tag>
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>Freemarker v2.1.2.RELEASE</el-tag> Html模板引擎
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>pagehelper v1.2.5</el-tag> 分页插件、提供便捷的分页功能
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>dozer v5.5.1</el-tag> 对象复制拷贝
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>logback v1.2.3</el-tag> 日志框架
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>jQuery v3.2.1</el-tag> 前端JavaScript框架（保留），打包进base.min.js，但请尽量勿使用jQuery直接操作Dom
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>Vue v2.5.17</el-tag> DOM渲染引擎
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>ElementUI v2.8.2</el-tag> 前端UI框架，提供统一风格控件
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>Maven</el-tag> 后端构建管理工具
|
|
|
</li>
|
|
|
<li>
|
|
|
<el-tag>JDK 8+</el-tag> SpringBoot2.x开始不再支持JDK 7及以下，所以请将JDk升级到8+
|
|
|
</li>
|
|
|
</ol>
|
|
|
|
|
|
<h4></h4>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="Ajax调用">
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
|
|
|
<el-button type="primary" @click="doAjax">调用AJAX</el-button>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<p>ajax.example({}).then(function (response) {</p>
|
|
|
<p style="text-indent: 2em;">if (response.errors.length > 0) {</p>
|
|
|
<p style="text-indent: 4em;">nav.e(response.errors[0].message);</p>
|
|
|
<p style="text-indent: 2em;">} else {</p>
|
|
|
<p style="text-indent: 4em;">nav.i("Ajax调用成功!");</p>
|
|
|
<p style="text-indent: 2em;">}</p>
|
|
|
<p>})</p>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<el-upload
|
|
|
style="width: 300px;"
|
|
|
name="file"
|
|
|
class="upload-demo"
|
|
|
action="upload"
|
|
|
:http-request="handleUpload"
|
|
|
multiple
|
|
|
:limit="3"
|
|
|
:file-list="fileList">
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
|
|
</el-upload>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<p>ajax.fileUpload(req.file).then(function (response) {</p>
|
|
|
<p style="text-indent: 2em;">if (response.errors.length > 0) {</p>
|
|
|
<p style="text-indent: 4em;">req.onError();</p>
|
|
|
<p style="text-indent: 4em;">nav.e(response.errors[0].message);</p>
|
|
|
<p style="text-indent: 2em;">} else {</p>
|
|
|
<p style="text-indent: 4em;">req.onSuccess();</p>
|
|
|
<p style="text-indent: 4em;">nav.i("文件上传成功!");</p>
|
|
|
<p style="text-indent: 2em;">}</p>
|
|
|
<p>})</p>
|
|
|
</el-card>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="自定义工具">
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<el-button type="primary" @click="this.nav.i('消息')">普通消息</el-button>
|
|
|
<el-button type="primary" @click="this.nav.e('错误')">错误消息</el-button>
|
|
|
<el-button type="primary" @click="this.nav.s('成功')">成功消息</el-button>
|
|
|
<el-button type="primary" @click="this.nav.w('警告')">警告消息</el-button>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<el-button type="primary" @click="this.nav.tip.show('加载中')">加载提示框</el-button>
|
|
|
<el-button type="primary" @click="this.nav.tip.close()">关闭提示框</el-button>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<el-button type="primary" @click="this.nav.bar.show()">加载提示条</el-button>
|
|
|
<el-button type="primary" @click="this.nav.bar.finish()">成功</el-button>
|
|
|
<el-button type="primary" @click="this.nav.bar.error()">失败</el-button>
|
|
|
</el-card>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="Freemarker">
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
|
|
|
<div slot="header">
|
|
|
<span>占位输出</span>
|
|
|
</div>
|
|
|
|
|
|
<p>正常输出
|
|
|
<el-tag>${r'${hello}'}</el-tag>
|
|
|
</p>
|
|
|
|
|
|
<p>HTML输出
|
|
|
<el-tag>${r"${'<a>a标签</a>'?html}"}</el-tag>
|
|
|
</p>
|
|
|
|
|
|
<p>$表达式
|
|
|
<el-tag>${r"${r'${hello}'}"}</el-tag>
|
|
|
</p>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
|
|
|
<div slot="header">
|
|
|
<span>条件输出</span>
|
|
|
</div>
|
|
|
|
|
|
<p>${'<#if status == 0>'}</p>
|
|
|
|
|
|
<p class="text-indent">status is 0</p>
|
|
|
|
|
|
<p>${'<#elseif status ==1>'}</p>
|
|
|
|
|
|
<p class="text-indent">status = 1</p>
|
|
|
|
|
|
<p>${'<#else>'}</p>
|
|
|
|
|
|
<p class="text-indent">status != 0 && status !=1</p>
|
|
|
|
|
|
<p>${'</#if>'}</p>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
|
|
|
<div slot="header">
|
|
|
<span>遍历集合</span>
|
|
|
</div>
|
|
|
|
|
|
<p>${'<#list citys as city>'}</p>
|
|
|
|
|
|
<p class="text-indent">${r' ${city_index} --> ${city}'}</p>
|
|
|
|
|
|
<p>${'</#list>'}</p>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="UI常用组件" >
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>1、表单控件集合及验证</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
|
|
|
<el-form-item label="活动名称" prop="name">
|
|
|
<el-input v-model="form.name"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="活动区域" prop="region">
|
|
|
<el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
<el-option label="区域一" value="shanghai"></el-option>
|
|
|
<el-option label="区域二" value="beijing"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="活动时间" required>
|
|
|
<el-col :span="11">
|
|
|
<el-form-item prop="date1">
|
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
|
|
|
style="width: 100%;"></el-date-picker>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col style="text-align: center" :span="2">-</el-col>
|
|
|
<el-col :span="11">
|
|
|
<el-form-item prop="date2">
|
|
|
<el-time-picker placeholder="选择时间" v-model="form.date2"
|
|
|
style="width: 100%;"></el-time-picker>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="即时配送" prop="delivery">
|
|
|
<el-switch v-model="form.delivery"></el-switch>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="活动性质" prop="type">
|
|
|
<el-checkbox-group v-model="form.type">
|
|
|
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
|
|
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
|
|
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
|
|
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="特殊资源" prop="resource">
|
|
|
<el-radio-group v-model="form.resource">
|
|
|
<el-radio label="线上品牌商赞助"></el-radio>
|
|
|
<el-radio label="线下场地免费"></el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="活动形式" prop="desc">
|
|
|
<el-input type="textarea" v-model="form.desc"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
|
|
|
<el-button @click="resetForm('form')">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
</el-card>
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>2、表格数据</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-table
|
|
|
ref="multipleTable"
|
|
|
:data="tableData"
|
|
|
tooltip-effect="dark"
|
|
|
:default-sort="{prop: 'date', order: 'descending'}"
|
|
|
style="width: 100%">
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
width="50">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
label="日期"
|
|
|
width="100">
|
|
|
<template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="name"
|
|
|
label="姓名"
|
|
|
width="70">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="address"
|
|
|
label="地址"
|
|
|
width="100">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
@click="handleEdit(scope.$index, scope.row)">编辑
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="danger">删除
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>3、分页</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-pagination
|
|
|
background
|
|
|
layout="prev, pager, next, jumper"
|
|
|
:total="1000">
|
|
|
</el-pagination>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 700px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>4、按钮</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button>默认按钮</el-button>
|
|
|
<el-button type="primary">主要按钮</el-button>
|
|
|
<el-button type="success">成功按钮</el-button>
|
|
|
<el-button type="info">信息按钮</el-button>
|
|
|
<el-button type="warning">警告按钮</el-button>
|
|
|
<el-button type="danger">危险按钮</el-button>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button plain>朴素按钮</el-button>
|
|
|
<el-button type="primary" plain>主要按钮</el-button>
|
|
|
<el-button type="success" plain>成功按钮</el-button>
|
|
|
<el-button type="info" plain>信息按钮</el-button>
|
|
|
<el-button type="warning" plain>警告按钮</el-button>
|
|
|
<el-button type="danger" plain>危险按钮</el-button>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button round>圆角按钮</el-button>
|
|
|
<el-button type="primary" round>主要按钮</el-button>
|
|
|
<el-button type="success" round>成功按钮</el-button>
|
|
|
<el-button type="info" round>信息按钮</el-button>
|
|
|
<el-button type="warning" round>警告按钮</el-button>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button type="danger" round>危险按钮</el-button>
|
|
|
<el-button type="primary" :loading="true">加载中</el-button>
|
|
|
<el-button icon="el-icon-search" circle></el-button>
|
|
|
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
|
<el-button type="success" icon="el-icon-check" circle></el-button>
|
|
|
<el-button type="info" icon="el-icon-message" circle></el-button>
|
|
|
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
|
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button disabled>默认按钮</el-button>
|
|
|
<el-button type="primary" disabled>主要按钮</el-button>
|
|
|
<el-button type="success" disabled>成功按钮</el-button>
|
|
|
<el-button type="info" disabled>信息按钮</el-button>
|
|
|
<el-button type="warning" disabled>警告按钮</el-button>
|
|
|
<el-button type="danger" disabled>危险按钮</el-button>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button plain disabled>朴素按钮</el-button>
|
|
|
<el-button type="primary" plain disabled>主要按钮</el-button>
|
|
|
<el-button type="success" plain disabled>成功按钮</el-button>
|
|
|
<el-button type="info" plain disabled>信息按钮</el-button>
|
|
|
<el-button type="warning" plain disabled>警告按钮</el-button>
|
|
|
<el-button type="danger" plain disabled>危险按钮</el-button>
|
|
|
</el-row>
|
|
|
|
|
|
<el-button type="text">文字按钮</el-button>
|
|
|
<el-button type="text" disabled>文字按钮</el-button>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button type="primary" icon="el-icon-edit"></el-button>
|
|
|
<el-button type="primary" icon="el-icon-share"></el-button>
|
|
|
<el-button type="primary" icon="el-icon-delete"></el-button>
|
|
|
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
|
|
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button-group>
|
|
|
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
|
|
|
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
|
|
</el-button-group>
|
|
|
<el-button-group>
|
|
|
<el-button type="primary" icon="el-icon-edit"></el-button>
|
|
|
<el-button type="primary" icon="el-icon-share"></el-button>
|
|
|
<el-button type="primary" icon="el-icon-delete"></el-button>
|
|
|
</el-button-group>
|
|
|
|
|
|
</el-row>
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button>默认按钮</el-button>
|
|
|
<el-button size="medium">中等按钮</el-button>
|
|
|
<el-button size="small">小型按钮</el-button>
|
|
|
<el-button size="mini">超小按钮</el-button>
|
|
|
</el-row>
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button round>默认按钮</el-button>
|
|
|
<el-button size="medium" round>中等按钮</el-button>
|
|
|
<el-button size="small" round>小型按钮</el-button>
|
|
|
<el-button size="mini" round>超小按钮</el-button>
|
|
|
</el-row>
|
|
|
|
|
|
</el-card>
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>5、Link 文字链接</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
|
|
|
<el-link type="primary">主要链接</el-link>
|
|
|
<el-link type="success">成功链接</el-link>
|
|
|
<el-link type="warning">警告链接</el-link>
|
|
|
<el-link type="danger">危险链接</el-link>
|
|
|
<el-link type="info">信息链接</el-link>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-link disabled>默认链接</el-link>
|
|
|
<el-link type="primary" disabled>主要链接</el-link>
|
|
|
<el-link type="success" disabled>成功链接</el-link>
|
|
|
<el-link type="warning" disabled>警告链接</el-link>
|
|
|
<el-link type="danger" disabled>危险链接</el-link>
|
|
|
<el-link type="info" disabled>信息链接</el-link>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-link :underline="false">无下划线</el-link>
|
|
|
<el-link>有下划线</el-link>
|
|
|
<el-link icon="el-icon-edit">编辑</el-link>
|
|
|
<el-link>查看<i class="el-icon-view el-icon--right"></i></el-link>
|
|
|
</el-row>
|
|
|
|
|
|
</el-card>
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>6、Tabs 标签页</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-tabs tab-position="left" style="height: 200px;">
|
|
|
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
|
|
|
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
|
|
|
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
|
|
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
|
|
|
<p>
|
|
|
Tabs位置共有4个位置分别为：
|
|
|
<el-tag>
|
|
|
<span>top</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<span>right</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<span>bottom</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<span>left</span>
|
|
|
</el-tag>
|
|
|
</p>
|
|
|
</el-card>
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>7、弹框、对话框、通知</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-button
|
|
|
plain
|
|
|
@click="showNotify">
|
|
|
通知
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
plain
|
|
|
@click="showMessageBox">
|
|
|
消息Box
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
plain
|
|
|
@click="showConfirmBox">
|
|
|
消息确认Box
|
|
|
</el-button>
|
|
|
|
|
|
<el-popover
|
|
|
placement="top-start"
|
|
|
title="标题"
|
|
|
width="200"
|
|
|
trigger="hover"
|
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
|
|
<el-button slot="reference">hover 激活</el-button>
|
|
|
</el-popover>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
<el-button @click="dialogVisible = true">对话框Dialog</el-button>
|
|
|
|
|
|
<el-dialog
|
|
|
title="提示"
|
|
|
:visible.sync="dialogVisible"
|
|
|
width="30%">
|
|
|
<span>这是一段信息</span>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>6、其他小控件</h3>
|
|
|
</div>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-switch
|
|
|
:value="true"
|
|
|
active-color="#13ce66"
|
|
|
inactive-color="#ff4949">
|
|
|
</el-switch>
|
|
|
|
|
|
<el-switch
|
|
|
:value="false"
|
|
|
active-color="#13ce66"
|
|
|
inactive-color="#ff4949">
|
|
|
</el-switch>
|
|
|
|
|
|
<el-slider></el-slider>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-tag>标签一</el-tag>
|
|
|
<el-tag type="success">标签二</el-tag>
|
|
|
<el-tag type="info">标签三</el-tag>
|
|
|
<el-tag type="warning">标签四</el-tag>
|
|
|
<el-tag type="danger">标签五</el-tag>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-tag closable>标签一</el-tag>
|
|
|
<el-tag closable type="success">标签二</el-tag>
|
|
|
<el-tag closable type="info">标签三</el-tag>
|
|
|
<el-tag closable type="warning">标签四</el-tag>
|
|
|
<el-tag closable type="danger">标签五</el-tag>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
<el-tag closable>默认标签</el-tag>
|
|
|
<el-tag size="medium" closable>中等标签</el-tag>
|
|
|
<el-tag size="small" closable>小型标签</el-tag>
|
|
|
<el-tag size="mini" closable>超小标签</el-tag>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;word-spacing: 30px;">
|
|
|
<el-badge :value="12" class="item">
|
|
|
<el-button size="small">评论</el-button>
|
|
|
</el-badge>
|
|
|
<el-badge :value="3" class="item">
|
|
|
<el-button size="small">回复</el-button>
|
|
|
</el-badge>
|
|
|
<el-badge :value="1" class="item" type="primary">
|
|
|
<el-button size="small">评论</el-button>
|
|
|
</el-badge>
|
|
|
<el-badge :value="2" class="item" type="warning">
|
|
|
<el-button size="small">回复</el-button>
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge is-dot class="item">数据查询</el-badge>
|
|
|
<el-badge is-dot class="item">
|
|
|
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
|
|
|
</el-badge>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;word-spacing: 30px;">
|
|
|
<el-badge :value="200" :max="99" class="item">
|
|
|
<el-button size="small">评论（最大值）</el-button>
|
|
|
</el-badge>
|
|
|
<el-badge :value="100" :max="10" class="item">
|
|
|
<el-button size="small">回复（最大值）</el-button>
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge value="new" class="item">
|
|
|
<el-button size="small">评论</el-button>
|
|
|
</el-badge>
|
|
|
<el-badge value="hot" class="item">
|
|
|
<el-button size="small">回复</el-button>
|
|
|
</el-badge>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-alert
|
|
|
style="margin-bottom: 10px"
|
|
|
title="成功提示的文案"
|
|
|
type="success"
|
|
|
show-icon>
|
|
|
</el-alert>
|
|
|
<el-alert
|
|
|
style="margin-bottom: 10px"
|
|
|
title="消息提示的文案"
|
|
|
type="info"
|
|
|
show-icon>
|
|
|
</el-alert>
|
|
|
<el-alert
|
|
|
style="margin-bottom: 10px"
|
|
|
title="警告提示的文案"
|
|
|
type="warning"
|
|
|
show-icon>
|
|
|
</el-alert>
|
|
|
<el-alert
|
|
|
style="margin-bottom: 10px"
|
|
|
title="错误提示的文案"
|
|
|
type="error"
|
|
|
show-icon>
|
|
|
</el-alert>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-breadcrumb separator="/">
|
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
|
|
|
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
|
|
|
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<el-dropdown>
|
|
|
<span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
|
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
|
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
|
|
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
|
|
|
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
|
|
|
<el-dropdown split-button type="primary">
|
|
|
默认尺寸
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
|
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
|
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
|
|
<el-dropdown-item>双皮奶</el-dropdown-item>
|
|
|
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
|
|
|
<el-dropdown size="medium" split-button type="primary">
|
|
|
中等尺寸
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
|
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
|
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
|
|
<el-dropdown-item>双皮奶</el-dropdown-item>
|
|
|
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
|
|
|
<el-dropdown size="small" split-button type="primary">
|
|
|
小型尺寸
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
|
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
|
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
|
|
<el-dropdown-item>双皮奶</el-dropdown-item>
|
|
|
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
|
|
|
<el-dropdown size="mini" split-button type="primary">
|
|
|
超小尺寸
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
|
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
|
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
|
|
<el-dropdown-item>双皮奶</el-dropdown-item>
|
|
|
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</el-row>
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<span>头上一片晴天，心中一个想念</span>
|
|
|
<el-divider content-position="left">少年包青天</el-divider>
|
|
|
<span>饿了别叫妈, 叫饿了么</span>
|
|
|
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
|
|
<span>为了无法计算的价值</span>
|
|
|
<el-divider content-position="right">阿里云</el-divider>
|
|
|
</el-row>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px;">
|
|
|
<span>雨纷纷</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<span>旧故里</span>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<span>草木深</span>
|
|
|
</el-row>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="常见问题">
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>1、页面初始化前闪现源代码</h3>
|
|
|
</div>
|
|
|
|
|
|
<p>${'<style type="text/css">'?html}</p>
|
|
|
|
|
|
<p>${'[v-cloak] {'?html}</p>
|
|
|
|
|
|
<p class="text-indent">${'display: none;'?html}</p>
|
|
|
|
|
|
<p>${'}'?html}</p>
|
|
|
|
|
|
<p>${'</style>'?html}</p>
|
|
|
|
|
|
|
|
|
<p>${'<div id="app" v-cloak>'?html}</p>
|
|
|
|
|
|
<p>${'...'?html}</p>
|
|
|
|
|
|
<p>${'</div>'?html}</p>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>2、为什么Long类型返回json字符串变为String</h3>
|
|
|
</div>
|
|
|
|
|
|
<p>因为Long可支持的长度比JavaScript中Number支持的位数更多，所以当Long数值很大时转为Json再转为Number就会丢失精度，造成难以发现的Bug，所以本系统默认处理了该问题。</p>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>3、Date类型格式化问题</h3>
|
|
|
</div>
|
|
|
|
|
|
<p>默认启用全局Date格式化
|
|
|
<el-tag>yyyy-MM-dd HH:mm:ss</el-tag>
|
|
|
，需要关闭请在
|
|
|
<el-tag>application-*</el-tag>
|
|
|
中关闭。
|
|
|
</p>
|
|
|
|
|
|
<p>对于个别返回结果的Date格式化可以通过注解方式
|
|
|
<el-tag>@JsonFormat(pattern = "yyyy-MM-dd")</el-tag>
|
|
|
</p>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>4、权限问题</h3>
|
|
|
</div>
|
|
|
|
|
|
<p>1、本系统启用自定义Token来控制权限，任何访问都会有一个全局Token,任何一处都可以通过<el-tag>LocalData.getToken()</el-tag>来获取
|
|
|
当前访问对象的Token。其中Token充当着访问对象的通行证，其中包含访问对象的<el-tag>用户ID</el-tag>、<el-tag>用户名</el-tag>、
|
|
|
<el-tag>可访问资源</el-tag>等信息。
|
|
|
</p>
|
|
|
|
|
|
<p>2、对于未登录对象会提供临时(访客)<el-tag>LocalData.getTempToken()</el-tag>(有限的权限)来提供访问系统。</p>
|
|
|
|
|
|
<p>3、如果系统存在Task等定时任务时，是不存在访问对象，通过<el-tag>LocalData.getSystemToken()</el-tag>来获取系统层的Token来操作系统。</p>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="box-card" style="width: 600px;margin: 20px">
|
|
|
<div slot="header">
|
|
|
<h3>5、Token配置</h3>
|
|
|
</div>
|
|
|
|
|
|
<p>Springboot环境配置文件<b>application-*</b>中配置了系统中需要验证权限和不需要验证的url。而需要验证权限的URl会在<el-tag>SecurityConfig.getAuthorization()</el-tag>
|
|
|
方法中通过Parameter或Cookies中获取当前访问对象的登录信息，从而为当前访问对象组装Token对象。
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</el-card>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
<style>
|
|
|
#app {
|
|
|
padding: 20px;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
<script>
|
|
|
var app = new Vue({
|
|
|
el: "#app",
|
|
|
data: {
|
|
|
fileList: [],
|
|
|
|
|
|
form: {
|
|
|
name: '',
|
|
|
region: '',
|
|
|
date1: '',
|
|
|
date2: '',
|
|
|
delivery: false,
|
|
|
type: [],
|
|
|
resource: '',
|
|
|
desc: ''
|
|
|
},
|
|
|
|
|
|
tableData: [{
|
|
|
date: '2016-05-03',
|
|
|
name: '王小虎',
|
|
|
address: '上海市'
|
|
|
}, {
|
|
|
date: '2016-05-02',
|
|
|
name: '王小虎',
|
|
|
address: '上海市'
|
|
|
}, {
|
|
|
date: '2016-05-04',
|
|
|
name: '王小虎',
|
|
|
address: '上海市'
|
|
|
}],
|
|
|
multipleSelection: [],
|
|
|
|
|
|
rules: {
|
|
|
name: [
|
|
|
{required: true, message: '请输入活动名称', trigger: 'blur'},
|
|
|
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
|
|
],
|
|
|
region: [
|
|
|
{required: true, message: '请选择活动区域', trigger: 'change'}
|
|
|
],
|
|
|
date1: [
|
|
|
{type: 'date', required: true, message: '请选择日期', trigger: 'change'}
|
|
|
],
|
|
|
date2: [
|
|
|
{type: 'date', required: true, message: '请选择时间', trigger: 'change'}
|
|
|
],
|
|
|
type: [
|
|
|
{type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
|
|
|
],
|
|
|
resource: [
|
|
|
{required: true, message: '请选择活动资源', trigger: 'change'}
|
|
|
],
|
|
|
desc: [
|
|
|
{required: true, message: '请填写活动形式', trigger: 'blur'}
|
|
|
]
|
|
|
},
|
|
|
|
|
|
dialogVisible: false
|
|
|
},
|
|
|
methods: {
|
|
|
doAjax: function () {
|
|
|
ajax.example({}).then(function (response) {
|
|
|
if (response.errors.length > 0) {
|
|
|
nav.e(response.errors[0].message);
|
|
|
} else {
|
|
|
nav.i("Ajax调用成功!");
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
handleUpload: function (req) {
|
|
|
ajax.fileUpload(req.file).then(function (response) {
|
|
|
if (response.errors.length > 0) {
|
|
|
req.onError();
|
|
|
nav.e(response.errors[0].message);
|
|
|
} else {
|
|
|
req.onSuccess();
|
|
|
nav.i("文件上传成功!");
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
submitForm: function (formName) {
|
|
|
this.$refs[formName].validate(function (valid) {
|
|
|
if (valid) {
|
|
|
alert('submit!');
|
|
|
} else {
|
|
|
console.log('error submit!!');
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
resetForm: function (formName) {
|
|
|
this.$refs[formName].resetFields();
|
|
|
},
|
|
|
handleEdit: function (index, row) {
|
|
|
nav.i("编辑");
|
|
|
},
|
|
|
|
|
|
showNotify: function () {
|
|
|
this.$notify.info({
|
|
|
title: '消息',
|
|
|
message: '这是一条消息的提示消息'
|
|
|
});
|
|
|
},
|
|
|
showMessageBox: function () {
|
|
|
this.$alert('这是一段内容', '标题名称', {
|
|
|
confirmButtonText: '确定',
|
|
|
callback: function (action) {
|
|
|
console.log(action)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
showConfirmBox: function () {
|
|
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(function () {
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '删除成功!'
|
|
|
});
|
|
|
}.bind(this)).catch(function () {
|
|
|
this.$message({
|
|
|
type: 'info',
|
|
|
message: '已取消删除'
|
|
|
});
|
|
|
}.bind(this));
|
|
|
},
|
|
|
},
|
|
|
created: function () {
|
|
|
},
|
|
|
mounted: function () {
|
|
|
},
|
|
|
watch: {}
|
|
|
})
|
|
|
</script>
|
