基础报表管理样式
This commit is contained in:
parent
a85c385180
commit
9530d7e889
@ -4,4 +4,5 @@ ENV = 'development'
|
||||
# base api
|
||||
# 这里修改成api服务器地址
|
||||
VUE_APP_BASE_API = '/api'
|
||||
VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
|
||||
VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
|
||||
VUE_APP_REPORT_DESIGN_URL = 'http://hfxny.mes.picaiba.com/ureport/designer'
|
||||
@ -4,4 +4,5 @@ ENV = 'production'
|
||||
# base api
|
||||
# 这里修改成api服务器地址
|
||||
VUE_APP_BASE_API = '/api'
|
||||
VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
|
||||
VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
|
||||
VUE_APP_REPORT_DESIGN_URL = 'http://hfxny.mes.picaiba.com/ureport/designer'
|
||||
BIN
src/assets/basic/report.png
Normal file
BIN
src/assets/basic/report.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
@ -577,6 +577,65 @@ export const routes = [
|
||||
title: '设备配置'
|
||||
},
|
||||
component: () => import('../views/basicConfig/deviceConfig')
|
||||
},
|
||||
{
|
||||
path: 'reportManagement',
|
||||
name: 'reportManagement',
|
||||
meta: {
|
||||
title: '报表管理'
|
||||
},
|
||||
component: () => import('../views/basicConfig/reportManagement'),
|
||||
redirect: '/basicConfig/reportManagement/reportList',
|
||||
children: [
|
||||
{
|
||||
path: 'reportList',
|
||||
name: 'reportList',
|
||||
meta: {
|
||||
title: '报表列表'
|
||||
},
|
||||
component: () =>
|
||||
import('../views/basicConfig/reportManagement/reportList')
|
||||
},
|
||||
{
|
||||
path: 'reportListDetail',
|
||||
name: 'reportListDetail',
|
||||
hidden: true,
|
||||
meta: {
|
||||
title: '报表列表明细'
|
||||
},
|
||||
component: () =>
|
||||
import('../views/basicConfig/reportManagement/reportListDetail')
|
||||
},
|
||||
{
|
||||
path: 'reportView',
|
||||
name: 'reportView',
|
||||
meta: {
|
||||
title: '报表预览'
|
||||
},
|
||||
component: () =>
|
||||
import('../views/basicConfig/reportManagement/reportView')
|
||||
},
|
||||
{
|
||||
path: 'reportDesign',
|
||||
name: 'reportDesign',
|
||||
meta: {
|
||||
title: '报表设计'
|
||||
},
|
||||
component: () =>
|
||||
import('../views/basicConfig/reportManagement/reportDesign')
|
||||
},
|
||||
{
|
||||
path: 'reportClassification',
|
||||
name: 'reportClassification',
|
||||
meta: {
|
||||
title: '报表分类'
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
'../views/basicConfig/reportManagement/reportClassification'
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
83
src/views/basicConfig/components/reportClassAdd.vue
Normal file
83
src/views/basicConfig/components/reportClassAdd.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
|
||||
<el-form-item label="报表分类名" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ReportClassAdd',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: '',
|
||||
name: ''
|
||||
},
|
||||
isEdit: false, //是否是编辑
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入报表分类名', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
if (id) {
|
||||
this.isEdit = true
|
||||
this.form.id = id
|
||||
// getAccount({ id }).then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// this.form.account = res.data.account
|
||||
// this.form.password = res.data.password
|
||||
// this.form.name = res.data.name
|
||||
// this.form.proLineId = res.data.proLineId
|
||||
// this.form.role = res.data.role
|
||||
// this.form.enabled = res.data.enabled
|
||||
// }
|
||||
// })
|
||||
} else {
|
||||
this.isEdit = false
|
||||
this.form.id = ''
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.isEdit) {
|
||||
//编辑
|
||||
// accountUpdate({ ...this.form }).then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// this.$message({
|
||||
// message: '操作成功',
|
||||
// type: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
// this.$emit('successSubmit')
|
||||
// }
|
||||
// })
|
||||
this.$emit('successSubmit')
|
||||
} else {
|
||||
// addAccount({ ...this.form }).then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// this.$message({
|
||||
// message: '操作成功',
|
||||
// type: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
// this.$emit('successSubmit')
|
||||
// }
|
||||
// })
|
||||
this.$emit('successSubmit')
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.form.resetFields()
|
||||
this.isEdit = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
82
src/views/basicConfig/components/reportNameEdit.vue
Normal file
82
src/views/basicConfig/components/reportNameEdit.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
|
||||
<el-form-item label="报表名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="报表分类" prop="type">
|
||||
<el-select v-model="form.type" placeholder="报表分类" style="width: 100%">
|
||||
<el-option
|
||||
v-for="(item, i) in typeList"
|
||||
:key="i"
|
||||
:label="item.dataName"
|
||||
:value="item.dataName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ReportNameEdit',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: '',
|
||||
name: ''
|
||||
},
|
||||
typeList: [
|
||||
{ dataName: '能源', id: 1 },
|
||||
{ dataName: '订单', id: 2 },
|
||||
{ dataName: '设备', id: 3 },
|
||||
{ dataName: '人员', id: 4 }
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入报表分类名', trigger: 'blur' }
|
||||
],
|
||||
type: [{ required: true, message: '请选择分类', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
if (id) {
|
||||
this.form.id = id
|
||||
// getAccount({ id }).then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// this.form.account = res.data.account
|
||||
// this.form.password = res.data.password
|
||||
// this.form.name = res.data.name
|
||||
// this.form.proLineId = res.data.proLineId
|
||||
// this.form.role = res.data.role
|
||||
// this.form.enabled = res.data.enabled
|
||||
// }
|
||||
// })
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
//编辑
|
||||
// accountUpdate({ ...this.form }).then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// this.$message({
|
||||
// message: '操作成功',
|
||||
// type: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
// this.$emit('successSubmit')
|
||||
// }
|
||||
// })
|
||||
this.$emit('successSubmit')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.form.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
68
src/views/basicConfig/reportManagement.vue
Normal file
68
src/views/basicConfig/reportManagement.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="report-management">
|
||||
<el-menu
|
||||
:default-active="activeName"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-menu-item index="reportList">报表列表</el-menu-item>
|
||||
<el-menu-item index="reportDesign">报表设计</el-menu-item>
|
||||
<el-menu-item index="reportClassification">报表分类</el-menu-item>
|
||||
</el-menu>
|
||||
<section>
|
||||
<router-view />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ReportManagement',
|
||||
data() {
|
||||
return {
|
||||
activeName: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.activeName = this.$route.name
|
||||
},
|
||||
methods: {
|
||||
handleSelect(name) {
|
||||
this.$router.push({ name: name })
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (val) {
|
||||
this.activeName = val.name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.report-management {
|
||||
.el-menu {
|
||||
background-color: #f2f4f9;
|
||||
}
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 8px;
|
||||
.el-menu-item {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
width: 32.7%;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
color: rgba(22, 22, 22, 0.65);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
188
src/views/basicConfig/reportManagement/reportClassification.vue
Normal file
188
src/views/basicConfig/reportManagement/reportClassification.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<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>
|
||||
39
src/views/basicConfig/reportManagement/reportDesign.vue
Normal file
39
src/views/basicConfig/reportManagement/reportDesign.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div id="reportDesign" class="reportDesign">
|
||||
<iframe :src="url" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ReportDesign',
|
||||
data() {
|
||||
return {
|
||||
// url: ''
|
||||
// url: process.env.VUE_APP_REPORT_DESIGN_URL
|
||||
// url: 'http://hfxny.mes.picaiba.com/ureport/designer'
|
||||
url: 'http://tft.mes.picaiba.com/ureport/designer'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const vm = this
|
||||
// const { name } = this.$route.query
|
||||
// this.url += name ? '?_u=db:' + this.$route.query.name : ''
|
||||
const ifream = document.getElementById('reportDesign')
|
||||
ifream.onload = function () {
|
||||
console.log('加载完成')
|
||||
vm.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.reportDesign {
|
||||
margin: 0px 16px 0 16px;
|
||||
width: 98.5%;
|
||||
height: calc(100vh - 205px);
|
||||
.mainIframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
src/views/basicConfig/reportManagement/reportList.vue
Normal file
139
src/views/basicConfig/reportManagement/reportList.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="reoprtManager">
|
||||
<div class="report">
|
||||
<div class="imgBox">
|
||||
<img
|
||||
src="./../../../assets/basic/report.png"
|
||||
alt=""
|
||||
width="355px"
|
||||
height="314px"
|
||||
/>
|
||||
</div>
|
||||
<div class="numBox">
|
||||
<div>
|
||||
<div class="reportNum">
|
||||
<div class="num">6</div>
|
||||
<div class="text">
|
||||
<p class="font">全部报表</p>
|
||||
<p class="letter">Reports</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail" @click="toDetail">了解详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reportDesc" v-for="(item, i) in reportList" :key="i">
|
||||
<div>
|
||||
<div class="reportNum">
|
||||
<div class="num">{{ item.num }}</div>
|
||||
<div class="text">
|
||||
<p class="font">{{ item.name }}</p>
|
||||
<p class="letter">Reports</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail" @click="bbb">了解详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ReportList',
|
||||
data() {
|
||||
return {
|
||||
totalReports: 6,
|
||||
reportList: [
|
||||
{ num: 2, name: '能源报表' },
|
||||
{ num: 2, name: '订单报表' },
|
||||
{ num: 1, name: '设备报表' },
|
||||
{ num: 1, name: '人员报表' },
|
||||
{ num: 1, name: '质量报表' },
|
||||
{ num: 0, name: '产线报表' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toDetail() {
|
||||
this.$router.push({
|
||||
path: '/basicConfig/reportManagement/reportListDetail'
|
||||
})
|
||||
},
|
||||
bbb() {
|
||||
this.$router.push({ path: '/basicConfig/reportManagement/reportDesign' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.reoprtManager {
|
||||
padding-left: 16px;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: calc(100vh - 210px);
|
||||
align-content: flex-start;
|
||||
overflow: auto;
|
||||
.report {
|
||||
width: 768px;
|
||||
height: 456px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
margin: 0 16px 16px 0;
|
||||
position: relative;
|
||||
.imgBox {
|
||||
display: inline-block;
|
||||
width: 480px;
|
||||
height: 100%;
|
||||
padding: 80px 0 0 80px;
|
||||
}
|
||||
.numBox {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
top: 120px;
|
||||
}
|
||||
}
|
||||
.reportDesc {
|
||||
width: 376px;
|
||||
height: 456px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
padding-top: 120px;
|
||||
margin: 0 16px 16px 0;
|
||||
}
|
||||
.reportNum {
|
||||
.num {
|
||||
display: inline-block;
|
||||
font-size: 80px;
|
||||
font-weight: 600;
|
||||
color: #161616;
|
||||
margin-right: 36px;
|
||||
}
|
||||
.text {
|
||||
display: inline-block;
|
||||
.font {
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.letter {
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #0b58ff;
|
||||
border-radius: 4px;
|
||||
margin: 139px auto 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
src/views/basicConfig/reportManagement/reportListDetail.vue
Normal file
215
src/views/basicConfig/reportManagement/reportListDetail.vue
Normal file
@ -0,0 +1,215 @@
|
||||
<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="180"
|
||||
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-name-edit ref="reportNameEdit" @successSubmit="successSubmit" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tableHeight } from '@/utils/index'
|
||||
import ReportNameEdit from './../components/reportNameEdit.vue'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '报表名称'
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '报表分类'
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '添加时间'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'view',
|
||||
btnName: '预览'
|
||||
},
|
||||
{
|
||||
type: 'design',
|
||||
btnName: '设计'
|
||||
},
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: '编辑'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: '删除'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'ReportListDetail',
|
||||
components: { ReportNameEdit },
|
||||
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.type = '分类' + i
|
||||
obj.time = '2023-2-8 13:59:59'
|
||||
obj.id = i + 1
|
||||
arr.push(obj)
|
||||
}
|
||||
this.tableData = arr
|
||||
this.total = 30
|
||||
},
|
||||
handleClick(val) {
|
||||
switch (val.type) {
|
||||
case 'view':
|
||||
this.$router.push({
|
||||
path: '/basicConfig/reportManagement/reportView'
|
||||
})
|
||||
break
|
||||
case 'design':
|
||||
this.$router.push({
|
||||
path: '/basicConfig/reportManagement/reportDesign'
|
||||
})
|
||||
break
|
||||
case 'edit':
|
||||
this.addOrEditTitle = '编辑'
|
||||
this.centervisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.reportNameEdit.init(val.data.id)
|
||||
})
|
||||
break
|
||||
default:
|
||||
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.$router.push({
|
||||
path: '/basicConfig/reportManagement/reportDesign'
|
||||
})
|
||||
}
|
||||
},
|
||||
handleCancel() {
|
||||
this.$refs.reportNameEdit.formClear()
|
||||
this.centervisible = false
|
||||
this.addOrEditTitle = ''
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$refs.reportNameEdit.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>
|
||||
8
src/views/basicConfig/reportManagement/reportView.vue
Normal file
8
src/views/basicConfig/reportManagement/reportView.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div>预览</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'reportView'
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user