sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'hotfix/mock-suit'

Browse Source 
Former-commit-id: e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly e0594bb6a7fcd66196985094a5c30b2f1d56e00d [formerly 3233bbf8231b1e63f7c978ae1214ed48224eafc9 [formerly 937e9349ba90ec03e639e8d63539a7f384c385d3]]]]]
Former-commit-id: 473c82c143373f5f21f3e12772ad96b12039bb84
Former-commit-id: b158a89addbc07d8a29e73197d7425d6343d45e4
Former-commit-id: 74f425887c251da3e748588971a9c551ad0e7c00 [formerly 266c889c322fbdc108ff0b7a749571e02353375f]
Former-commit-id: 384dfc188d100face6f5f3b7947adb3675fa9d2b
Former-commit-id: 33becace2f0f845ae5797e2e1a732fac9a6dfa9b
Former-commit-id: 661e031b1ca40b556fcdd0a988844ab890181372
Former-commit-id: 43f6dc48ec6c87ac463610a05ff7e547569c5484
Former-commit-id: d5fda10a9e425941d452926776ba6004044a0617
This commit is contained in:
liyang
2018-12-13 10:30:04 +08:00
parent 96cc681731 56223d9195
commit b2d52bb33c
18 changed files with 421 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/demo.business.issues.142.js
View File

@@ -2,7 +2,7 @@ import request from '@/plugin/axios'
export function get (id) {
return request({
url: '/demo/business/issues/142',
url: '/demo/business/issues/142/detail',
method: 'get',
params: {
id

8
src/api/demo.business.table.1.js
View File

@@ -1,9 +1,9 @@
import request from '@/plugin/axios'
export function BusinessTable1List (data) {
export function BusinessTable1List (params) {
return request({
url: '/demo/business/table/1',
method: 'post',
data
url: '/demo/business/table/1/fetch',
method: 'get',
params
})
}

43
src/components/d2-icon-select/index.vue
View File

@@ -1,13 +1,20 @@
<template>
<div>
<span>
<el-popover
ref="pop"
v-model="pop"
:placement="placement"
width="300"
trigger="click">
<div class="header d2-clearfix d2-mb-10" v-if="clearable">
<el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button>
<div class="d2-clearfix d2-mb-10" v-if="clearable">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
class="d2-fr"
@click="selectIcon()">
清空
</el-button>
</div>
<el-input
v-model="searchText"
@@ -15,20 +22,20 @@
placeholder="搜索 比如 'plus'"
prefix-icon="el-icon-search">
</el-input>
<el-collapse v-if="!searchMode" class="group" v-model="collapseActive">
<el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="class">
<el-row class="class-row">
<el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
<el-collapse v-if="!searchMode" class="d2-icon-select--group" v-model="collapseActive">
<el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="d2-icon-select--class">
<el-row class="d2-icon-select--class-row">
<el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
<i :class="'fa fa-' + iconName"></i>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
<div v-if="searchMode" class="group">
<div class="class" v-for="(item, index) in iconFilted" :key="index">
<div class="class-title">{{item.title}}</div>
<el-row class="class-row">
<el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
<div v-if="searchMode" class="d2-icon-select--group">
<div class="d2-icon-select--class" v-for="(item, index) in iconFilted" :key="index">
<div class="d2-icon-select--class-title">{{item.title}}</div>
<el-row class="d2-icon-select--class-row">
<el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
<i :class="'fa fa-' + iconName"></i>
</el-col>
</el-row>
@@ -55,7 +62,7 @@
</template>
{{value ? value : placeholder}}
</el-button>
</div>
</span>
</template>
<script>
@@ -159,22 +166,22 @@ export default {
</script>
<style lang="scss" scoped>
.group {
.d2-icon-select--group {
max-height: 400px;
overflow-x: hidden;
overflow-y: scroll;
border-top: none;
border-bottom: none;
.class {
.class-title {
.d2-icon-select--class {
.d2-icon-select--class-title {
line-height: 30px;
text-align: center;
background-color: $color-bg;
border-radius: 4px;
margin: 10px 0px;
}
.class-row {
.class-col {
.d2-icon-select--class-row {
.d2-icon-select--class-col {
line-height: 40px;
text-align: center;
color: $color-text-sub;

186
src/components/d2-icon-svg-select/index.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<span>
<el-popover
ref="pop"
v-model="pop"
:placement="placement"
width="300"
trigger="click">
<div
class="d2-clearfix d2-mb-10"
v-if="clearable">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
class="d2-fr"
@click="selectIcon()">
清空
</el-button>
</div>
<el-input
v-model="searchText"
:clearable="true"
placeholder="搜索 比如 'plus'"
prefix-icon="el-icon-search">
</el-input>
<el-row class="d2-icon-svg-select--group">
<el-col
v-for="(item, index) in iconFilted"
:key="index"
class="d2-icon-svg-select--item"
:span="4"
@click.native="selectIcon(item)">
<d2-icon-svg :name="item"/>
</el-col>
</el-row>
</el-popover>
<!-- 允许用户输入 -->
<el-input
v-if="userInput"
v-model="currentValue"
v-bind="bind"
style="max-width: 240px;">
<template v-if="value" slot="prepend">
<d2-icon-svg
class="d2-icon-svg-select--input-preview"
:name="value"/>
</template>
<el-button v-popover:pop slot="append">
<i class="fa fa-list"></i>
</el-button>
</el-input>
<!-- 不允许用户输入 -->
<el-button v-popover:pop v-if="!userInput">
<span flex="dir:left main:center cross:center">
<d2-icon-svg
v-if="value"
class="d2-icon-svg-select--input-preview d2-mr-10"
:name="value"/>
<span>{{value ? value : placeholder}}</span>
</span>
</el-button>
</span>
</template>
<script>
export default {
name: 'd2-icon-svg-select',
props: {
// 值
value: {
type: String,
required: false,
default: ''
},
// 占位符
placeholder: {
type: String,
required: false,
default: '请选择'
},
// 弹出界面的方向
placement: {
type: String,
required: false,
default: 'right'
},
// 是否可清空
clearable: {
type: Boolean,
required: false,
default: true
},
// 是否允许用户输入
userInput: {
type: Boolean,
required: false,
default: false
},
// 是否在选择后自动关闭
autoClose: {
type: Boolean,
required: false,
default: true
}
},
data () {
return {
// 绑定弹出框
pop: false,
// 组件内输入框的值
currentValue: '',
// 搜索的文字
searchText: ''
}
},
computed: {
// 输入框上绑定的设置
bind () {
return {
placeholder: this.placeholder,
clearable: this.clearable,
...this.$attrs
}
},
// 是否在搜索
searchMode () {
return !!this.searchText
},
// 过滤后的图标
iconFilted () {
return this.$IconSvg.filter(icon => icon.indexOf(this.searchText) >= 0)
}
},
watch: {
value (value) {
this.currentValue = value
},
currentValue (value) {
this.selectIcon(value)
}
},
created () {
this.currentValue = this.value
},
methods: {
selectIcon (iconName = '') {
this.$emit('input', iconName)
if (iconName && this.autoClose) {
this.pop = false
}
}
}
}
</script>
<style lang="scss" scoped>
.d2-icon-svg-select--input-preview {
height: 14px;
width: 14px;
display: block;
}
.d2-icon-svg-select--group {
max-height: 400px;
overflow-x: hidden;
overflow-y: scroll;
margin-top: 10px;
}
.d2-icon-svg-select--item {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: $color-text-sub;
svg {
height: 20px;
width: 20px;
}
&:hover {
color: $color-text-main;
background-color: $color-bg;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px $color-border-1;
}
}
</style>

3
src/components/index.js
View File

@@ -12,8 +12,9 @@ Vue.component('d2-page-cover', () => import('./d2-page-cover'))
Vue.component('d2-count-up', () => import('./d2-count-up'))
Vue.component('d2-highlight', () => import('./d2-highlight'))
Vue.component('d2-icon', () => import('./d2-icon'))
Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
Vue.component('d2-icon-svg-select', () => import('./d2-icon-svg-select/index.vue'))
Vue.component('d2-markdown', () => import('./d2-markdown'))
Vue.component('d2-mde', () => import('./d2-mde'))
Vue.component('d2-module-index-banner', () => import('./d2-module-index-banner'))

5
src/menu/modules/demo-components.js
View File

@@ -67,9 +67,10 @@ export default {
icon: 'star',
children: [
{ path: `${pre}icon/icon`, title: '图标组件' },
{ path: `${pre}icon/list`, title: 'FontAwesome' },
{ path: `${pre}icon/icon-svg`, title: 'svg 图标组件' },
{ path: `${pre}icon/select`, title: '图标选择器' },
{ path: `${pre}icon/svg`, title: 'SVG图标组件' }
{ path: `${pre}icon/select-svg`, title: 'svg 图标选择器' },
{ path: `${pre}icon/list`, title: 'FontAwesome' }
]
},
{

30
src/mock/api/demo.business.issues.142.js
View File

@@ -1,6 +1,3 @@
import Mock from 'mockjs'
import qs from 'qs'
const db = [
{ id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' },
{ id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' },
@@ -8,19 +5,16 @@ const db = [
{ id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' }
]
Mock.mock(RegExp('/api/demo/business/issues/142' + '.*'), 'get', ({ url, type, body }) => {
// 解析
const options = {
params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''),
body: qs.parse(body),
url: qs.parse(url.split('?')[0])
}
// 返回数据
return Mock.mock(
{
code: 0,
msg: '获取数据成功',
data: db.find(e => e.id === options.params.id)
export default [
{
path: '/api/demo/business/issues/142/detail.*',
method: 'get',
handle ({ params }) {
return {
code: 0,
msg: '获取数据成功',
data: db.find(e => e.id === params.id)
}
}
)
})
}
]

37
src/mock/api/demo.business.table.1.js
View File

@@ -1,18 +1,17 @@
import Mock from 'mockjs'
Mock.mock('/api/demo/business/table/1', ({ body }) => {
// 这是通过 post 传来的参数
body = JSON.parse(body)
const { page } = body
page.total = 1000
return Mock.mock(
{
code: 0,
msg: '获取数据成功',
data: {
page,
'list|20': [
{
export default [
{
path: '/api/demo/business/table/1/fetch.*',
method: 'get',
handle ({ params, Repeat }) {
let { pageSize } = params
return {
code: 0,
msg: '获取数据成功',
data: {
page: {
total: 1000
},
list: Repeat(pageSize, {
'key': '@guid',
'value|1': [10, 100, 200, 500],
'type': '@boolean',
@@ -21,9 +20,9 @@ Mock.mock('/api/demo/business/table/1', ({ body }) => {
'dateTimeCreat': '@datetime',
'used': '@boolean',
'dateTimeUse': '@datetime'
}
]
})
}
}
}
)
})
}
]

38
src/mock/api/demo.plugins.mock.ajax.js
View File

@@ -1,19 +1,23 @@
import Mock from 'mockjs'
Mock.mock('/api/demo/plugins/mock/ajax', {
code: 0,
msg: '获取数据成功',
data: {
'list|4-10': [
{
'id|+1': 1,
'name': '@CNAME',
'star|1-5': '★',
'delFlag|1': [0, 1],
'creatDate': '@DATE',
'address': '@CITY',
'zip': '@ZIP'
export default [
{
path: '/api/demo/plugins/mock/ajax',
method: 'get',
handle ({ Repeat }) {
return {
code: 0,
msg: '获取数据成功',
data: {
list: Repeat('4-10', {
'id|+1': 1,
'name': '@CNAME',
'star|1-5': '★',
'delFlag|1': [0, 1],
'creatDate': '@DATE',
'address': '@CITY',
'zip': '@ZIP'
})
}
}
]
}
}
})
]

62
src/mock/api/sys.login.js
View File

@@ -1,43 +1,31 @@
import Mock from 'mockjs'
const userDB = [
{
username: 'admin',
password: 'admin',
uuid: 'admin-uuid',
name: '管理员'
},
{
username: 'editor',
password: 'editor',
uuid: 'editor-uuid',
name: '编辑'
},
{
username: 'user1',
password: 'user1',
uuid: 'user1-uuid',
name: '用户1'
}
{ username: 'admin', password: 'admin', uuid: 'admin-uuid', name: '管理员' },
{ username: 'editor', password: 'editor', uuid: 'editor-uuid', name: '编辑' },
{ username: 'user1', password: 'user1', uuid: 'user1-uuid', name: '用户1' }
]
Mock.mock('/api/login', 'post', ({ url, type, body }) => {
const bodyObj = JSON.parse(body)
const user = userDB.find(e => e.username === bodyObj.username && e.password === bodyObj.password)
if (user) {
return {
code: 0,
msg: '登录成功',
data: {
...user,
token: 'd787syv8dys8cas80d9s0a0d8f79ads56f7s4d56f879a8as89fd980s7dg'
export default [
{
path: '/api/login',
method: 'post',
handle ({ body }) {
const user = userDB.find(e => e.username === body.username && e.password === body.password)
if (user) {
return {
code: 0,
msg: '登录成功',
data: {
...user,
token: '8dfhassad0asdjwoeiruty'
}
}
} else {
return {
code: 401,
msg: '用户名或密码错误',
data: {}
}
}
}
} else {
return {
code: 401,
msg: '用户名或密码错误',
data: {}
}
}
})
]

73
src/mock/d2-mock/index.js Normal file
View File

@@ -0,0 +1,73 @@
import Mock from 'mockjs'
import qs from 'qs'
import withCredentials from './patch/withCredentials'
/* 补丁 */
withCredentials(Mock)
/* Mock 默认配置 */
Mock.setup({ timeout: '200-300' })
/* 扩展 [生成器] */
const Generator = (prop, template) => {
const obj = {}
obj[prop] = [template]
return Mock.mock(obj)
}
/* 扩展 [循环] */
const Repeat = (num, itemTemplate) => Generator(`data|${num}`, itemTemplate).data
const CustomExtends = {
Generator,
Repeat,
Mock,
Random: Mock.Random
}
const extend = (prop, value) => {
CustomExtends[prop] = value
}
/* 装配配置组 */
const wired = ({ url, type, body }) => ({
method: type,
params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''),
body: JSON.parse(body),
url: qs.parse(url.split('?')[0]),
...CustomExtends
})
const setup = (path, method, handle) => {
Mock.mock(
RegExp(path),
method,
typeof handle === 'function' ? o => handle(wired(o)) : handle
)
}
const load = (collection) => {
collection.map(({ path, method, handle }) => {
if (method === '*') {
method = [
'get',
'head',
'post',
'put',
'delete',
'connect',
'options',
'trace',
'patch'
]
}
if (typeof method === 'string' && method.indexOf('|') > -1) method = method.split('|')
if (method instanceof Array) {
method.map(item => setup(path, item, handle))
} else {
setup(path, method, handle)
}
})
}
export default { setup, load, extend }

8
src/mock/d2-mock/patch/withCredentials.js Normal file
View File

@@ -0,0 +1,8 @@
export default function (Mock) {
// http://cnine.me/note/FrontEnd/mock-lose-cookies-dbg.html
Mock.XHR.prototype.__send = Mock.XHR.prototype.send
Mock.XHR.prototype.send = function () {
if (this.custom.xhr) this.custom.xhr.withCredentials = this.withCredentials || false
this.__send.apply(this, arguments)
}
}

21
src/mock/index.js
View File

@@ -1,19 +1,10 @@
import Mock from 'mockjs'
import d2Mock from './d2-mock'
// 解决 Mock 情况下，携带 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
Mock.XHR.prototype.send = function () {
if (this.custom.xhr) {
this.custom.xhr.withCredentials = this.withCredentials || false
}
this.proxy_send(...arguments)
}
// 导入所有的接口
const req = context => context.keys().map(context)
req(require.context('./api/', true, /\.js$/))
const options = req(require.context('./api/', true, /\.js$/))
.filter(e => e.default)
.map(e => e.default)
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
timeout: '300-600'
options.forEach(option => {
d2Mock.load(option)
})

2
src/pages/demo/business/table/1/componnets/PageFooter/index.vue
View File

@@ -3,7 +3,7 @@
:current-page="current"
:page-size="size"
:total="total"
:page-sizes="[100, 200, 300, 400]"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
style="margin: -10px;"
@size-change="handleSizeChange"

16
src/pages/demo/business/table/1/index.vue
View File

@@ -9,9 +9,9 @@
:loading="loading"/>
<demo-page-footer
slot="footer"
:current="page.current"
:size="page.size"
:total="page.total"
:current="page.pageCurrent"
:size="page.pageSize"
:total="page.pageTotal"
@change="handlePaginationChange"/>
</d2-container>
</template>
@@ -32,9 +32,9 @@ export default {
table: [],
loading: false,
page: {
current: 1,
size: 100,
total: 0
pageCurrent: 1,
pageSize: 10,
pageTotal: 0
}
}
},
@@ -57,7 +57,7 @@ export default {
})
BusinessTable1List({
...form,
page: this.page
...this.page
})
.then(res => {
this.loading = false
@@ -65,7 +65,7 @@ export default {
title: '模拟表格数据请求完毕'
})
this.table = res.list
this.page = res.page
this.page.pageTotal = res.page.total
})
.catch(err => {
this.loading = false

0
src/pages/demo/components/icon/svg.vue → src/pages/demo/components/icon/icon-svg.vue
View File

25
src/pages/demo/components/icon/select-svg.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<d2-container :filename="filename">
<template slot="header">svg 图标选择器</template>
<div class="d2-mb">
<p class="d2-mt-0 d2-mb-10">一般用法 | {{icon || '未选择'}}</p>
<d2-icon-svg-select v-model="icon"/>
</div>
<div class="d2-mb">
<p class="d2-mt-0 d2-mb-10">用户可以输入 | {{icon2 || '未选择'}}</p>
<d2-icon-svg-select v-model="icon2" :user-input="true"/>
</div>
</d2-container>
</template>
<script>
export default {
data () {
return {
filename: __filename,
icon: '',
icon2: ''
}
}
}
</script>

5
src/router/modules/components.js
View File

@@ -31,9 +31,10 @@ export default {
{ path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE'), meta: { ...meta, title: 'markdown编辑器' } },
{ path: 'highlight', name: `${pre}highlight`, component: () => import('@/pages/demo/components/highlight'), meta: { ...meta, title: '代码高亮组件' } },
{ path: 'icon/icon', name: `${pre}icon-icon`, component: () => import('@/pages/demo/components/icon/icon.vue'), meta: { ...meta, title: '图标组件' } },
{ path: 'icon/icon-svg', name: `${pre}icon-icon-svg`, component: () => import('@/pages/demo/components/icon/icon-svg.vue'), meta: { ...meta, title: 'svg 图标' } },
{ path: 'icon/select', name: `${pre}icon-select`, component: () => import('@/pages/demo/components/icon/select.vue'), meta: { ...meta, title: '图标选择器' } },
{ path: 'icon/select-svg', name: `${pre}icon-select-svg`, component: () => import('@/pages/demo/components/icon/select-svg.vue'), meta: { ...meta, title: 'svg 图标选择器' } },
{ path: 'icon/list', name: `${pre}icon-list`, component: () => import('@/pages/demo/components/icon/list.vue'), meta: { ...meta, title: '图标列表' } },
{ path: 'icon/select', name: `${pre}icon-select`, component: () => import('@/pages/demo/components/icon/select.vue'), meta: { ...meta, title: '图表选择器组件' } },
{ path: 'icon/svg', name: `${pre}icon-svg`, component: () => import('@/pages/demo/components/icon/svg.vue'), meta: { ...meta, title: 'svg 图标' } },
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/components/index'), meta: { ...meta, title: '组件首页' } },
{ path: 'json-tree', name: `${pre}json-tree`, component: () => import('@/pages/demo/components/json-tree'), meta: { ...meta, title: 'JSON 展示' } },
{ path: 'layout/grid', name: `${pre}layout-grid`, component: () => import('@/pages/demo/components/layout/grid.vue'), meta: { ...meta, title: '拖拽网格布局' } },