feat: ✨ 路由调整 菜单调整 删除无用演示
This commit is contained in:
FairyEver
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<d2-module-index-menu :menu="menu"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menu from '@/menu/modules/demo-business'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
menu,
|
||||
banner: {
|
||||
title: 'DEMOS',
|
||||
subTitle: '提供借鉴和参考的页面'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<d2-container
|
||||
type="card"
|
||||
class="page">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
class="page--form">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input type="textarea" v-model="form.address"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import base from './mixins/index'
|
||||
export default {
|
||||
mixins: [
|
||||
base
|
||||
],
|
||||
// 第一次进入或从其他组件对应路由进入时触发
|
||||
beforeRouteEnter (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
next(async instance => {
|
||||
if (from.name === 'demo-business-issues-142') {
|
||||
await instance.getFormData(id)
|
||||
instance.saveDataToDb()
|
||||
} else {
|
||||
instance.loadDataFromDb(to)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 在同一组件对应的多个路由间切换时触发
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
this.loadDataFromDb(to)
|
||||
next()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 表单变化的时候更新持久化
|
||||
form: {
|
||||
handler () {
|
||||
this.saveDataToDb()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageGet'
|
||||
]),
|
||||
// 将页面数据同步到持久化存储
|
||||
saveDataToDb () {
|
||||
this.pageSet({ instance: this, user: true })
|
||||
},
|
||||
// 从持久化存储恢复数据到页面
|
||||
async loadDataFromDb (to) {
|
||||
const instance = {
|
||||
$route: {
|
||||
fullPath: to.fullPath
|
||||
},
|
||||
$data: {}
|
||||
}
|
||||
const data = await this.pageGet({
|
||||
instance,
|
||||
user: true
|
||||
})
|
||||
for (const key in data) {
|
||||
this[key] = data[key]
|
||||
}
|
||||
this.$message.success('loadDataFromDb')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
.page--form {
|
||||
max-width: 460px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<d2-container
|
||||
type="card"
|
||||
class="page">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
class="page--form">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input type="textarea" v-model="form.address"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import base from './mixins/index'
|
||||
export default {
|
||||
mixins: [
|
||||
base
|
||||
],
|
||||
// 第一次进入或从其他组件对应路由进入时触发
|
||||
beforeRouteEnter (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
next(instance => {
|
||||
instance.resetFormData()
|
||||
instance.getFormData(id)
|
||||
})
|
||||
} else {
|
||||
next(new Error('未指定ID'))
|
||||
}
|
||||
},
|
||||
// 在同一组件对应的多个路由间切换时触发
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
this.resetFormData()
|
||||
this.getFormData(id)
|
||||
next()
|
||||
} else {
|
||||
next(new Error('未指定ID'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
.page--form {
|
||||
max-width: 460px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="card">
|
||||
<d2-crud
|
||||
v-bind="crud"
|
||||
@edit="({ index, row }) => goToEditPage('demo-business-issues-142-edit', row.id)"
|
||||
@edit-cache-db="({ index, row }) => goToEditPage('demo-business-issues-142-edit-cache-db', row.id)"
|
||||
style="margin: -15px 0;"/>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="issue #142"
|
||||
link="https://github.com/d2-projects/d2-admin/issues/142"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
crud: {
|
||||
columns: [
|
||||
{ title: '姓名', key: 'name', width: 100 },
|
||||
{ title: '地址', key: 'address' }
|
||||
],
|
||||
data: [],
|
||||
options: {
|
||||
border: true,
|
||||
size: 'mini'
|
||||
},
|
||||
rowHandle: {
|
||||
align: 'center',
|
||||
width: 240,
|
||||
custom: [
|
||||
{
|
||||
text: '无缓存编辑',
|
||||
size: 'mini',
|
||||
emit: 'edit'
|
||||
},
|
||||
{
|
||||
text: '带缓存编辑 DB',
|
||||
size: 'mini',
|
||||
emit: 'edit-cache-db'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 请求表格数据
|
||||
async getTableData () {
|
||||
try {
|
||||
const res = await this.$api.DEMO_BUSINESS_ISSUE_142_LIST()
|
||||
this.crud.data = res.list
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 跳转到编辑页面
|
||||
goToEditPage (name, id) {
|
||||
this.$router.push({
|
||||
name,
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,47 +0,0 @@
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
address: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// [业务逻辑] 重置表单
|
||||
resetFormData () {
|
||||
this.form = {
|
||||
name: '',
|
||||
address: ''
|
||||
}
|
||||
},
|
||||
// [业务逻辑] 根据 id 获取数据
|
||||
async getFormData (id) {
|
||||
// 重置表单
|
||||
this.resetFormData()
|
||||
// 请求数据
|
||||
try {
|
||||
const res = await this.$api.DEMO_BUSINESS_ISSUE_142_DETAIL(id)
|
||||
const { name, address } = res
|
||||
this.form = { name, address }
|
||||
this.$message.success('getFormData')
|
||||
} catch (error) {
|
||||
console.log('error', error)
|
||||
}
|
||||
},
|
||||
// [业务逻辑] 提交
|
||||
handleSubmit () {
|
||||
this.$notify({
|
||||
title: 'Submit',
|
||||
message: '提交了表单',
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
<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>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<el-pagination
|
||||
:current-page="current"
|
||||
:page-size="size"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
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>
|
||||
@@ -1,99 +0,0 @@
|
||||
<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>
|
||||
@@ -1,230 +0,0 @@
|
||||
<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: [],
|
||||
downloadColumns: [
|
||||
{ label: '卡密', prop: 'key' },
|
||||
{ label: '面值', prop: 'value' },
|
||||
{ label: '状态', prop: 'type' },
|
||||
{ label: '管理员', prop: 'admin' },
|
||||
{ label: '管理员备注', prop: 'adminNote' },
|
||||
{ label: '创建时间', prop: 'dateTimeCreat' },
|
||||
{ label: '使用状态', prop: 'used' },
|
||||
{ label: '使用时间', prop: 'dateTimeUse' }
|
||||
]
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
downloadDataTranslate (data) {
|
||||
return data.map(row => ({
|
||||
...row,
|
||||
type: row.type ? '禁用' : '正常',
|
||||
used: row.used ? '已使用' : '未使用'
|
||||
}))
|
||||
},
|
||||
handleDownloadXlsx (data) {
|
||||
this.$export.excel({
|
||||
title: 'D2Admin 表格示例',
|
||||
columns: this.downloadColumns,
|
||||
data: this.downloadDataTranslate(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.$message('导出表格成功')
|
||||
})
|
||||
},
|
||||
handleDownloadCsv (data) {
|
||||
this.$export.csv({
|
||||
title: 'D2Admin 表格示例',
|
||||
columns: this.downloadColumns,
|
||||
data: this.downloadDataTranslate(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.$message('导出CSV成功')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,81 +0,0 @@
|
||||
<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.pageCurrent"
|
||||
:size="page.pageSize"
|
||||
:total="page.pageTotal"
|
||||
@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: {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handlePaginationChange (val) {
|
||||
this.$notify({
|
||||
title: '分页变化',
|
||||
message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
|
||||
})
|
||||
this.page = {
|
||||
pageCurrent: val.current,
|
||||
pageSize: val.size,
|
||||
pageTotal: val.total
|
||||
}
|
||||
// nextTick 只是为了优化示例中 notify 的显示
|
||||
await this.$nextTick()
|
||||
this.$refs.header.handleFormSubmit()
|
||||
},
|
||||
handleSubmit (form) {
|
||||
this.loading = true
|
||||
this.$notify({
|
||||
title: '开始请求模拟表格数据'
|
||||
})
|
||||
this.$api.DEMO_BUSINESS_TABLE_1_LIST({
|
||||
...form,
|
||||
...this.page
|
||||
})
|
||||
.then(res => {
|
||||
this.loading = false
|
||||
this.$notify({
|
||||
title: '模拟表格数据请求完毕'
|
||||
})
|
||||
this.table = res.list
|
||||
this.page.pageTotal = res.page.total
|
||||
})
|
||||
.catch(err => {
|
||||
this.loading = false
|
||||
this.$notify({
|
||||
title: '模拟表格数据请求异常'
|
||||
})
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<d2-module-index-menu :menu="menu"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menu from '@/menu/modules/demo-charts'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
menu,
|
||||
banner: {
|
||||
title: 'CHARTS',
|
||||
subTitle: '图表示例'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,8 +12,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/charts/list/_data/china'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/plugins/charts/_data/china'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,8 +12,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/charts/list/_data/beijing'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/plugins/charts/_data/beijing'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,8 +12,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/charts/list/_data/china'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/plugins/charts/_data/china'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
@@ -12,7 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
Reference in New Issue
Block a user