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

Merge branch 'feature/business-search-table-1' into develop

Browse Source 
Former-commit-id: 4462086fa67806fd34cfa27f022b43f3444d6757 [formerly 4462086fa67806fd34cfa27f022b43f3444d6757 [formerly 4462086fa67806fd34cfa27f022b43f3444d6757 [formerly 4462086fa67806fd34cfa27f022b43f3444d6757 [formerly 0aae823060161fd83a6ca9b96d82e8bd48790212 [formerly 19cccf41150dd4543872d93a1d85e04b3d426f71]]]]]
Former-commit-id: 16cc21345148c2ae7f233390fb5128e8212164ce
Former-commit-id: ea5c68aabd65935acd5dc4f17eb13274a1e341ac
Former-commit-id: a5f9835af47e6815664ab9a6774e0eb1ee81d081 [formerly 5bdee375d367fd80af8238b76f8260e1f6b9833c]
Former-commit-id: 1bffe34c649e42947db415759f83c52b52de4afe
Former-commit-id: 71eeaf3b6c377b3ff0da79ecda4119f65dca3964
Former-commit-id: 7c33ce5b4b9db9239c763760589e60345e8dc4f1
Former-commit-id: 5930c55236230f40ef79293e806c1b9aa312b8f8
Former-commit-id: 6478c83c0ffd5c07fe56e5b59744a1fd720ca638
This commit is contained in:
liyang
2018-08-07 13:46:48 +08:00
parent 524b92ce8c e199d83c79
commit 71efce3a34
15 changed files with 645 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/menu/index.js
View File

@@ -8,6 +8,8 @@ import demoCharts from './modules/demo-charts'
import demoElement from './modules/demo-element'
// 试验台
import demoPlayground from './modules/demo-playground'
// 示例
import demoBusiness from './modules/demo-business'
// 菜单 侧边栏
export const menuAside = [
@@ -15,7 +17,8 @@ export const menuAside = [
demoPlugins,
demoCharts,
demoElement,
demoPlayground
demoPlayground,
demoBusiness
]
// 菜单 顶栏
@@ -26,7 +29,6 @@ export const menuHeader = [
icon: 'home'
},
{
path: '/demo',
title: '功能',
icon: 'puzzle-piece',
children: [
@@ -51,5 +53,6 @@ export const menuHeader = [
]
}
]
}
},
demoBusiness
]

15
src/menu/modules/demo-business.js Normal file
View File

@@ -0,0 +1,15 @@
export default {
path: '/demo/business',
title: '示例',
icon: 'flask',
children: (pre => [
{ path: `${pre}index`, title: '示例首页', icon: 'home' },
{
title: '表格',
icon: 'table',
children: [
{ path: `${pre}table/1`, title: '表格 1' }
]
}
])('/demo/business/')
}

23
src/mock/demo/business/table/1/index.js Normal file
View File

@@ -0,0 +1,23 @@
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(
{
page,
'list|20': [{
'key': '@guid',
'value|1': [10, 100, 200, 500],
'type': '@boolean',
'admin': '@cname',
'adminNote': '@cparagraph(0.5)',
'dateTimeCreat': '@datetime',
'used': '@boolean',
'dateTimeUse': '@datetime'
}]
}
)
})

2
src/mock/register.js
View File

@@ -2,6 +2,8 @@ import Mock from 'mockjs'
import '@/mock/ajax-demo'
import '@/mock/demo/business/table/1'
import '@/mock/login'
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留

1
src/pages/demo/business/index/image/icon.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
ba00e3c1f32cf9369968e9ce1a5d9e6164f3c07c

9
src/pages/demo/business/index/index.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<d2-container>
<d2-page-cover
title="图表"
sub-title="集成图表组件">
<img src="./image/icon.png">
</d2-page-cover>
</d2-container>
</template>

85
src/pages/demo/business/table/1/componnets/BooleanControl/index.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<el-popover
:placement="popoverPlacement"
:title="popoverTitle"
:width="popoverWidth"
trigger="hover">
<el-switch
v-model="currentValue"
:active-color="activeColor"
:inactive-color="inactiveColor"
:active-text="activeText"
:inactive-text="inactiveText"
:disabled="disabled"
@change="handleChange">
</el-switch>
<span slot="reference">
<slot v-if="value" name="active"/>
<slot v-else name="inactive"/>
</span>
</el-popover>
</template>
<script>
export default {
props: {
value: {
default: false
},
popoverPlacement: {
default: 'left'
},
popoverTitle: {
default: '修改'
},
popoverWidth: {
default: '150'
},
activeColor: {
default: '#67C23A'
},
inactiveColor: {
default: '#F56C6C'
},
activeText: {
default: '正常'
},
inactiveText: {
default: '禁用'
}
},
data () {
return {
currentValue: false,
disabled: false
}
},
watch: {
value: {
handler (val) {
this.currentValue = val
},
immediate: true
}
},
methods: {
handleChange (val) {
this.disabled = true
this.$message({
message: '正在发送请求',
type: 'info'
})
// 请将 setTimeout 修改为您的异步请求
setTimeout(() => {
this.disabled = false
this.$message({
message: '修改成功',
type: 'success'
})
this.$emit('change', val)
// 如果修改失败的话需要在这里手动将 currentValue 复原
}, 1000)
}
}
}
</script>

64
src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<span slot="reference">
<d2-icon
v-if="disabled"
name="hourglass-start"
style="font-size: 14px; line-height: 32px; color: #909399;"/>
<span @click="handleClick">
<slot
v-if="!disabled && value"
name="active"/>
<slot
v-if="!disabled && !value"
name="inactive"/>
</span>
</span>
</template>
<script>
export default {
props: {
value: {
default: false
}
},
data () {
return {
currentValue: false,
disabled: false
}
},
watch: {
value: {
handler (val) {
this.currentValue = val
},
immediate: true
}
},
methods: {
handleClick () {
// 这里先赋值是为了和 TypeControl 使用一样的 handleChange
this.currentValue = !this.currentValue
this.handleChange(this.currentValue)
},
handleChange (val) {
this.disabled = true
this.$message({
message: '正在发送请求',
type: 'info'
})
// 请将 setTimeout 修改为您的异步请求
setTimeout(() => {
this.disabled = false
this.$message({
message: '修改成功',
type: 'success'
})
this.$emit('change', val)
// 如果修改失败的话需要在这里手动将 currentValue 复原
}, 1000)
}
}
}
</script>

44
src/pages/demo/business/table/1/componnets/PageFooter/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<el-pagination
:current-page="current"
:page-size="size"
:total="total"
:page-sizes="[100, 200, 300, 400]"
layout="total, sizes, prev, pager, next, jumper"
style="margin: -10px;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</template>
<script>
export default {
props: {
current: {
default: 0
},
size: {
default: 0
},
total: {
default: 0
}
},
methods: {
handleSizeChange (val) {
this.$emit('change', {
current: this.current,
size: val,
total: this.total
})
},
handleCurrentChange (val) {
this.$emit('change', {
current: val,
size: this.size,
total: this.total
})
}
}
}
</script>

99
src/pages/demo/business/table/1/componnets/PageHeader/index.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<el-form
:inline="true"
:model="form"
:rules="rules"
ref="form"
size="mini"
style="margin-bottom: -18px;">
<el-form-item label="状态" prop="type">
<el-select
v-model="form.type"
placeholder="状态选择"
style="width: 100px;">
<el-option label="状态 1" value="1"/>
<el-option label="状态 2" value="2"/>
<el-option label="状态 3" value="3"/>
<el-option label="状态 4" value="4"/>
<el-option label="状态 5" value="5"/>
</el-select>
</el-form-item>
<el-form-item label="用户" prop="user">
<el-input
v-model="form.user"
placeholder="用户"
style="width: 100px;"/>
</el-form-item>
<el-form-item label="卡密" prop="key">
<el-input
v-model="form.key"
placeholder="卡密"
style="width: 120px;"/>
</el-form-item>
<el-form-item label="备注" prop="note">
<el-input
v-model="form.note"
placeholder="备注"
style="width: 120px;"/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="handleFormSubmit">
<d2-icon name="search"/>
查询
</el-button>
</el-form-item>
<el-form-item>
<el-button
@click="handleFormReset">
<d2-icon name="refresh"/>
重置
</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data () {
return {
form: {
type: '1',
user: 'FairyEver',
key: '',
note: ''
},
rules: {
type: [ { required: true, message: '请选择一个状态', trigger: 'change' } ],
user: [ { required: true, message: '请输入用户', trigger: 'change' } ]
}
}
},
methods: {
handleFormSubmit () {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit('submit', this.form)
} else {
this.$notify.error({
title: '错误',
message: '表单校验失败'
})
return false
}
})
},
handleFormReset () {
this.$refs.form.resetFields()
}
}
}
</script>

217
src/pages/demo/business/table/1/componnets/PageMain/index.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<div>
<el-form
:inline="true"
size="mini">
<el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
<el-button-group>
<el-button
type="primary"
size="mini"
:disabled="currentTableData.length === 0"
@click="handleDownloadXlsx(currentTableData)">
xlsx
</el-button>
<el-button
type="primary"
size="mini"
:disabled="currentTableData.length === 0"
@click="handleDownloadCsv(currentTableData)">
csv
</el-button>
</el-button-group>
</el-form-item>
<el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
<el-button-group>
<el-button
type="primary"
size="mini"
:disabled="multipleSelection.length === 0"
@click="handleDownloadXlsx(multipleSelection)">
xlsx
</el-button>
<el-button
type="primary"
size="mini"
:disabled="multipleSelection.length === 0"
@click="handleDownloadCsv(multipleSelection)">
csv
</el-button>
</el-button-group>
</el-form-item>
</el-form>
<el-table
:data="currentTableData"
v-loading="loading"
size="mini"
stripe
style="width: 100%;"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="卡密" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.key}}
</template>
</el-table-column>
<el-table-column label="面值" width="60" align="center">
<template slot-scope="scope">
<el-tag
size="mini"
type="success">
{{scope.row.value}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="50" align="center">
<template slot-scope="scope">
<boolean-control
:value="scope.row.type"
@change="(val) => {
handleSwitchChange(val, scope.$index)
}">
<d2-icon
name="check-circle"
style="font-size: 20px; line-height: 32px; color: #67C23A;"
slot="active"/>
<d2-icon
name="times-circle"
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
slot="inactive"/>
</boolean-control>
</template>
</el-table-column>
<el-table-column label="状态" width="50" align="center">
<template slot-scope="scope">
<boolean-control-mini
:value="scope.row.type"
@change="(val) => {
handleSwitchChange(val, scope.$index)
}">
<d2-icon
name="check-circle"
style="font-size: 20px; line-height: 32px; color: #67C23A;"
slot="active"/>
<d2-icon
name="times-circle"
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
slot="inactive"/>
</boolean-control-mini>
</template>
</el-table-column>
<el-table-column label="管理员" width="60">
<template slot-scope="scope">
{{scope.row.admin}}
</template>
</el-table-column>
<el-table-column label="管理员备注" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.adminNote}}
</template>
</el-table-column>
<el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.dateTimeCreat}}
</template>
</el-table-column>
<el-table-column label="使用状态" width="100" align="center">
<template slot-scope="scope">
<el-tag
size="mini"
:type="scope.row.used ? 'info' : ''">
{{scope.row.used ? '已使用' : '未使用'}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.dateTimeUse}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import BooleanControl from '../BooleanControl'
import BooleanControlMini from '../BooleanControlMini'
export default {
components: {
BooleanControl,
BooleanControlMini
},
props: {
tableData: {
default: () => []
},
loading: {
default: false
}
},
data () {
return {
currentTableData: [],
multipleSelection: []
}
},
watch: {
tableData: {
handler (val) {
this.currentTableData = val
},
immediate: true
}
},
methods: {
handleSwitchChange (val, index) {
const oldValue = this.currentTableData[index]
this.$set(this.currentTableData, index, {
...oldValue,
type: val
})
// 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
},
handleSelectionChange (val) {
this.multipleSelection = val
},
handleDownloadXlsx (data) {
const columns = [
{ label: '卡密', prop: 'key' }
]
this.$export.excel({
columns,
data
})
.then(() => {
this.$message('导出表格成功')
})
},
handleDownloadCsv (data) {
const columns = [
{ label: '卡密', prop: 'key' }
]
this.$export.csv({
columns,
data
})
.then(() => {
this.$message('导出CSV成功')
})
}
}
}
</script>

78
src/pages/demo/business/table/1/index.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<d2-container>
<demo-page-header
slot="header"
@submit="handleSubmit"
ref="header"/>
<demo-page-main
:table-data="table"
:loading="loading"/>
<demo-page-footer
slot="footer"
:current="page.current"
:size="page.size"
:total="page.total"
@change="handlePaginationChange"/>
</d2-container>
</template>
<script>
export default {
// name 值和本页的 $route.name 一致才可以缓存页面
name: 'demo-business-table-1',
components: {
'DemoPageHeader': () => import('./componnets/PageHeader'),
'DemoPageMain': () => import('./componnets/PageMain'),
'DemoPageFooter': () => import('./componnets/PageFooter')
},
data () {
return {
table: [],
loading: false,
page: {
current: 1,
size: 100,
total: 0
}
}
},
methods: {
handlePaginationChange (val) {
this.$notify({
title: '分页变化',
message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
})
this.page = val
// nextTick 只是为了优化示例中 notify 的显示
this.$nextTick(() => {
this.$refs.header.handleFormSubmit()
})
},
handleSubmit (form) {
this.loading = true
this.$notify({
title: '开始请求模拟表格数据'
})
this.$axios.post('/api/demo/business/table/1', {
...form,
page: this.page
})
.then(res => {
this.loading = false
this.$notify({
title: '模拟表格数据请求完毕'
})
this.table = res.list
this.page = res.page
})
.catch(err => {
this.loading = false
this.$notify({
title: '模拟表格数据请求异常'
})
console.log('err', err)
})
}
}
}
</script>

1
src/pages/demo/playground/env/index.vue vendored
View File

@@ -18,4 +18,3 @@ export default {
}
}
</script>

2
src/pages/error-page-404/page.vue
View File

@@ -10,7 +10,7 @@
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.page-404 {
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
background-blend-mode: multiply,multiply;
height: 100%;
display: flex;

2
src/router/routes.js.REMOVED.git-id
View File

@@ -1 +1 @@
0fa9b5a2bdc57841e4f19831dc3e2a913399a280
b3aa52d67ec41a212ff824829e2d713f2c21111c