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

表格示例完成

Browse Source 
Former-commit-id: cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly cb061e9cb3f1d290e3a776a8b88d834226d668be [formerly fcef20ff04bd08ab432bc47ac75fb4e6483c2851 [formerly fa46aa095a6a2e8317207d6ab9862cc7f4b56339]]]]]
Former-commit-id: 12745f3af51dabcf235c449e6f8b47ea0658b4c2
Former-commit-id: 020118a1c207454660f1e83e35dd834ac9493b74
Former-commit-id: d205e48a791b6afe1222c08943206ee238e92de8 [formerly dc747e67590f1042a5ac7b01ee86d4a9509cd920]
Former-commit-id: 867a148b7da027dc469ef8e1964f593e6abfe86b
Former-commit-id: d348819675978bf97305d79863fd72de108adad3
Former-commit-id: 8c8bcd05152b184547b8903de19a63ef262ed12c
Former-commit-id: 375bf4f1cbce6b86e82e86bedf7951d0d800f97f
Former-commit-id: 4b70e86cd638b19ed13371c86fa4b7be17528ae7
This commit is contained in:
liyang
2018-08-07 13:46:04 +08:00
parent cad41fd8af
commit e199d83c79
6 changed files with 191 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/mock/demo/business/table/1/index.js
View File

@@ -8,7 +8,7 @@ Mock.mock('/api/demo/business/table/1', ({ body }) => {
return Mock.mock( return Mock.mock(
{ {
page, page,
'list|30': [{ 'list|20': [{
'key': '@guid', 'key': '@guid',
'value|1': [10, 100, 200, 500], 'value|1': [10, 100, 200, 500],
'type': '@boolean', 'type': '@boolean',

20
src/pages/demo/business/table/1/componnets/PageHeader/index.vue
View File

@@ -12,11 +12,11 @@
v-model="form.type" v-model="form.type"
placeholder="状态选择" placeholder="状态选择"
style="width: 100px;"> style="width: 100px;">
<el-option label="状态 1" value="1"></el-option> <el-option label="状态 1" value="1"/>
<el-option label="状态 2" value="2"></el-option> <el-option label="状态 2" value="2"/>
<el-option label="状态 3" value="3"></el-option> <el-option label="状态 3" value="3"/>
<el-option label="状态 4" value="4"></el-option> <el-option label="状态 4" value="4"/>
<el-option label="状态 5" value="5"></el-option> <el-option label="状态 5" value="5"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -24,7 +24,7 @@
<el-input <el-input
v-model="form.user" v-model="form.user"
placeholder="用户" placeholder="用户"
style="width: 80px;"/> style="width: 100px;"/>
</el-form-item> </el-form-item>
<el-form-item label="卡密" prop="key"> <el-form-item label="卡密" prop="key">
@@ -44,7 +44,7 @@
<el-form-item> <el-form-item>
<el-button <el-button
type="primary" type="primary"
@click="submitForm"> @click="handleFormSubmit">
<d2-icon name="search"/> <d2-icon name="search"/>
查询 查询
</el-button> </el-button>
@@ -52,7 +52,7 @@
<el-form-item> <el-form-item>
<el-button <el-button
@click="resetForm"> @click="handleFormReset">
<d2-icon name="refresh"/> <d2-icon name="refresh"/>
重置 重置
</el-button> </el-button>
@@ -78,7 +78,7 @@ export default {
} }
}, },
methods: { methods: {
submitForm () { handleFormSubmit () {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
this.$emit('submit', this.form) this.$emit('submit', this.form)
@@ -91,7 +91,7 @@ export default {
} }
}) })
}, },
resetForm () { handleFormReset () {
this.$refs.form.resetFields() this.$refs.form.resetFields()
} }
} }

254
src/pages/demo/business/table/1/componnets/PageMain/index.vue
View File

@@ -1,99 +1,149 @@
<template> <template>
<el-table <div>
:data="currentTableData" <el-form
size="mini" :inline="true"
stripe size="mini">
style="width: 100%"> <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-column label="卡密" :show-overflow-tooltip="true"> <el-table
<template slot-scope="scope"> :data="currentTableData"
{{scope.row.key}} v-loading="loading"
</template> size="mini"
</el-table-column> stripe
style="width: 100%;"
@selection-change="handleSelectionChange">
<el-table-column label="面值" width="60" align="center"> <el-table-column
<template slot-scope="scope"> type="selection"
<el-tag width="55">
size="mini" </el-table-column>
type="success">
{{scope.row.value}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="50" align="center"> <el-table-column label="卡密" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
<boolean-control {{scope.row.key}}
:value="scope.row.type" </template>
@change="(val) => { </el-table-column>
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"> <el-table-column label="面值" width="60" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<boolean-control-mini <el-tag
:value="scope.row.type" size="mini"
@change="(val) => { type="success">
handleSwitchChange(val, scope.$index) {{scope.row.value}}
}"> </el-tag>
<d2-icon </template>
name="check-circle" </el-table-column>
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"> <el-table-column label="状态" width="50" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.admin}} <boolean-control
</template> :value="scope.row.type"
</el-table-column> @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="管理员备注" :show-overflow-tooltip="true"> <el-table-column label="状态" width="50" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.adminNote}} <boolean-control-mini
</template> :value="scope.row.type"
</el-table-column> @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="150" :show-overflow-tooltip="true"> <el-table-column label="管理员" width="60">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.dateTimeCreat}} {{scope.row.admin}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="使用状态" width="100" align="center"> <el-table-column label="管理员备注" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag {{scope.row.adminNote}}
size="mini" </template>
:type="scope.row.used ? 'info' : ''"> </el-table-column>
{{scope.row.used ? '已使用' : '未使用'}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="使用时间" width="150" :show-overflow-tooltip="true"> <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.dateTimeUse}} {{scope.row.dateTimeCreat}}
</template> </template>
</el-table-column> </el-table-column>
</el-table> <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> </template>
<script> <script>
@@ -107,11 +157,15 @@ export default {
props: { props: {
tableData: { tableData: {
default: () => [] default: () => []
},
loading: {
default: false
} }
}, },
data () { data () {
return { return {
currentTableData: [] currentTableData: [],
multipleSelection: []
} }
}, },
watch: { watch: {
@@ -130,8 +184,34 @@ export default {
type: val 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> </script>

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

@@ -5,7 +5,8 @@
@submit="handleSubmit" @submit="handleSubmit"
ref="header"/> ref="header"/>
<demo-page-main <demo-page-main
:table-data="table"/> :table-data="table"
:loading="loading"/>
<demo-page-footer <demo-page-footer
slot="footer" slot="footer"
:current="page.current" :current="page.current"
@@ -27,6 +28,7 @@ export default {
data () { data () {
return { return {
table: [], table: [],
loading: false,
page: { page: {
current: 1, current: 1,
size: 100, size: 100,
@@ -41,29 +43,32 @@ export default {
message: `当前第${val.current}页 共${val.total}条 每页${val.size}条` message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
}) })
this.page = val this.page = val
// nextTick 只是为了优化示例中 notify 的显示
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.header.submitForm() this.$refs.header.handleFormSubmit()
}) })
}, },
handleSubmit (form) { handleSubmit (form) {
this.loading = true
this.$notify({ this.$notify({
title: '开始请求表格数据' title: '开始请求模拟表格数据'
}) })
this.$axios.post('/api/demo/business/table/1', { this.$axios.post('/api/demo/business/table/1', {
...form, ...form,
page: this.page page: this.page
}) })
.then(res => { .then(res => {
console.log('res', res) this.loading = false
this.$notify({ this.$notify({
title: '表格数据请求完毕' title: '模拟表格数据请求完毕'
}) })
this.table = res.list this.table = res.list
this.page = res.page this.page = res.page
}) })
.catch(err => { .catch(err => {
this.loading = false
this.$notify({ this.$notify({
title: '表格数据请求异常' title: '模拟表格数据请求异常'
}) })
console.log('err', err) console.log('err', err)
}) })

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

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