189 lines
4.2 KiB
Vue
189 lines
4.2 KiB
Vue
<template>
|
|
<div class="report-classification">
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@headBtnClick="buttonClick"
|
|
/>
|
|
<base-table
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:table-props="tableProps"
|
|
:table-data="tableData"
|
|
:max-height="tableH"
|
|
>
|
|
<method-btn
|
|
v-if="tableBtn.length"
|
|
slot="handleBtn"
|
|
:width="80"
|
|
label="操作"
|
|
:method-list="tableBtn"
|
|
@clickBtn="handleClick"
|
|
/>
|
|
</base-table>
|
|
<pagination
|
|
:page.sync="listQuery.current"
|
|
:limit.sync="listQuery.size"
|
|
:total="total"
|
|
@pagination="getList()"
|
|
/>
|
|
<!-- 新增 -->
|
|
<base-dialog
|
|
:dialogTitle="addOrEditTitle"
|
|
:dialogVisible="centervisible"
|
|
@cancel="handleCancel"
|
|
@confirm="handleConfirm"
|
|
:before-close="handleCancel"
|
|
>
|
|
<report-class-add ref="reportClass" @successSubmit="successSubmit" />
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { tableHeight } from '@/utils/index'
|
|
import ReportClassAdd from './../components/reportClassAdd.vue'
|
|
const tableProps = [
|
|
{
|
|
prop: 'name',
|
|
label: '报表分类名'
|
|
}
|
|
]
|
|
const tableBtn = [
|
|
{
|
|
type: 'edit',
|
|
btnName: '编辑'
|
|
},
|
|
{
|
|
type: 'delete',
|
|
btnName: '删除'
|
|
}
|
|
]
|
|
export default {
|
|
name: 'ReportClassification',
|
|
components: { ReportClassAdd },
|
|
data() {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'input',
|
|
label: '关键字',
|
|
placeholder: '报表分类名',
|
|
param: 'name',
|
|
width: 300
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary'
|
|
},
|
|
{
|
|
type: 'separate'
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '新增',
|
|
name: 'add',
|
|
color: 'success',
|
|
plain: true
|
|
}
|
|
],
|
|
tableProps,
|
|
tableData: [],
|
|
tableBtn,
|
|
tableH: tableHeight(330),
|
|
total: 0,
|
|
listQuery: {
|
|
current: 1,
|
|
size: 20
|
|
},
|
|
centervisible: false,
|
|
addOrEditTitle: '' //新增编辑弹出框的title
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = tableHeight(265)
|
|
})
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
let arr = []
|
|
for (let i = 0; i < 30; i++) {
|
|
let obj = {}
|
|
obj.name = '分类名' + i
|
|
obj.id = i + 1
|
|
arr.push(obj)
|
|
}
|
|
this.tableData = arr
|
|
this.total = 30
|
|
},
|
|
handleClick(val) {
|
|
console.log(val)
|
|
if (val.type === 'edit') {
|
|
this.addOrEditTitle = '编辑'
|
|
this.$nextTick(() => {
|
|
this.$refs.reportClass.init(val.data.id)
|
|
})
|
|
this.centervisible = true
|
|
} else {
|
|
this.$confirm('确认删除报表分类名"' + val.data.name + '"吗？', {
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
// maintainManageDelete({ id: val.data.id }).then((res) => {
|
|
// console.log(res)
|
|
// this.$message({
|
|
// message: '工单删除成功',
|
|
// type: 'success',
|
|
// duration: 1500,
|
|
// onClose: () => {}
|
|
// })
|
|
// this.listQuery.current = 1
|
|
// this.getList()
|
|
// })
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
},
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
this.listQuery.name = val.name
|
|
this.listQuery.current = 1
|
|
this.getList()
|
|
break
|
|
default:
|
|
this.addOrEditTitle = '新增'
|
|
this.centervisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.reportClass.init()
|
|
})
|
|
}
|
|
},
|
|
handleCancel() {
|
|
this.$refs.reportClass.formClear()
|
|
this.centervisible = false
|
|
this.addOrEditTitle = ''
|
|
},
|
|
handleConfirm() {
|
|
this.$refs.reportClass.submitForm()
|
|
},
|
|
successSubmit() {
|
|
this.handleCancel()
|
|
this.getList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.report-classification {
|
|
height: calc(100vh - 203px);
|
|
padding: 12px 16px;
|
|
margin: 0px 16px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|