提交基础页面
This commit is contained in:
zhoulingpo
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="reportTable">
|
||||
<el-button type="primary" size="big">添加报告</el-button>
|
||||
<el-button type="success" size="big" @click="deleteAll">批量删除</el-button>
|
||||
<div class="table">
|
||||
<vxe-table :data="processTable" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="500"
|
||||
ref="xTable" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="labelOneName" :title="tagsForm.tags01.name"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="labelTwoName" :title="tagsForm.tags02.name"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="labelThreeName" :title="tagsForm.tags03.name"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="createDate" title="上传时间"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="text" class="del-btn" @click="reportDelete(row.id)">删除</el-button>
|
||||
<!-- <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
@size-change="handleLogSizeChange"
|
||||
@current-change="handleLogCurrentChange"
|
||||
:current-page="qLog.pageNo"
|
||||
:page-sizes="[5, 10, 20]"
|
||||
:page-size="qLog.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'reportTable',
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: new Array([]),
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
processTable: [],
|
||||
total: 0,
|
||||
qLog: {
|
||||
pageSize: 10,
|
||||
pageNo: 1
|
||||
},
|
||||
copyTableData: [],
|
||||
checkIds: [],
|
||||
tagsForm: {
|
||||
tags01: {
|
||||
name: '',
|
||||
parentId: '0',
|
||||
type: '1',
|
||||
id: '',
|
||||
childList: [
|
||||
// {name: '无', type: '1', id: '', parentId: ''},
|
||||
]
|
||||
},
|
||||
tags02: {
|
||||
name: '',
|
||||
parentId: '0',
|
||||
type: '2',
|
||||
id: '',
|
||||
childList: [
|
||||
// {name: '无', type: '2', id: '', parentId: ''},
|
||||
]
|
||||
},
|
||||
tags03: {
|
||||
name: '',
|
||||
parentId: '0',
|
||||
type: '3',
|
||||
id: '',
|
||||
childList: [
|
||||
// {name: '无', type: '3', id: '', parentId: ''},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value () {
|
||||
this.total = this.value.length
|
||||
this.processTable = this.value.slice(0, 9)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// this.copyTableData = JSON.parse(JSON.stringify(this.tableData))
|
||||
this.labelList()
|
||||
},
|
||||
methods: {
|
||||
pageChage (current) {
|
||||
setTimeout(() => {
|
||||
current = current || this.qLog.pageNo
|
||||
this.qLog.pageNo = current
|
||||
this.processTable = this.value.slice(this.qLog.pageSize * (current - 1), this.qLog.pageSize * current)
|
||||
// console.log(this.pages.size, this.pages.size * (current - 1), this.pages.size * this.pages.current, this.list)
|
||||
if (this.processTable.length < 1 && current > 1) {
|
||||
this.pageChage(current - 1)
|
||||
return false
|
||||
}
|
||||
})
|
||||
this.total = this.value.length
|
||||
},
|
||||
handleLogSizeChange (val) {
|
||||
this.qLog.pageSize = val
|
||||
this.qLog.pageNo = 1
|
||||
this.pageChage(1)
|
||||
},
|
||||
handleLogCurrentChange (val) {
|
||||
this.qLog.pageSize = val
|
||||
this.qLog.pageNo = 1
|
||||
this.pageChage(1)
|
||||
},
|
||||
// 标签列表
|
||||
labelList () {
|
||||
this.$api.report.labelList().then(({ data }) => {
|
||||
if (!data.labelOne.childList.length) {
|
||||
data.labelOne.childList = [{ name: '', id: '', parentId: this.tagsForm.tags01.id, type: '1' }]
|
||||
}
|
||||
if (!data.labelTwo.childList.length) {
|
||||
data.labelTwo.childList = [{ name: '', id: '', parentId: this.tagsForm.tags02.id, type: '2' }]
|
||||
}
|
||||
if (!data.labelThree.childList.length) {
|
||||
data.labelThree.childList = [{ name: '', id: '', parentId: this.tagsForm.tags03.id, type: '3' }]
|
||||
}
|
||||
this.tagsForm.tags01 = data.labelOne
|
||||
this.tagsForm.tags02 = data.labelTwo
|
||||
this.tagsForm.tags03 = data.labelThree
|
||||
})
|
||||
},
|
||||
selectAllEvent ({ checked }) {
|
||||
const records = this.$refs.xTable.getCheckboxRecords()
|
||||
this.checkIds = records.map(item => {
|
||||
return item.id
|
||||
})
|
||||
},
|
||||
selectChangeEvent ({ checked }) {
|
||||
const records = this.$refs.xTable.getCheckboxRecords()
|
||||
this.checkIds = records.map(item => {
|
||||
return item.id
|
||||
})
|
||||
},
|
||||
deleteAll () {
|
||||
this.reportDelete(this.checkIds)
|
||||
},
|
||||
reportDelete (id) {
|
||||
// 删除报告 假删除
|
||||
if (typeof id === 'string') {
|
||||
this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$emit('updateTable', this.value.filter(item => item.id !== id))
|
||||
})
|
||||
} else {
|
||||
if (Array.isArray(id)) {
|
||||
this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$emit('updateTable', this.value.filter(item => id.indexOf(item.id) === -1))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.reportTable{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user