文件夹改名
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]] Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0 Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33 Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83] Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6 Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
This commit is contained in:
liyang
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,44 @@
|
||||
<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>
|
||||
@@ -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>
|
||||
230
src/views/demo/business/table/1/componnets/PageMain/index.vue
Normal file
230
src/views/demo/business/table/1/componnets/PageMain/index.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<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>
|
||||
80
src/views/demo/business/table/1/index.vue
Normal file
80
src/views/demo/business/table/1/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<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>
|
||||
import { BusinessTable1List } from '@api/demo.business.table.1'
|
||||
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 {
|
||||
filename: __filename,
|
||||
table: [],
|
||||
loading: false,
|
||||
page: {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 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: '开始请求模拟表格数据'
|
||||
})
|
||||
BusinessTable1List({
|
||||
...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>
|
||||
Reference in New Issue
Block a user