基础报表管理样式 #2
@ -4,4 +4,5 @@ ENV = 'development'
|
|||||||
# base api
|
# base api
|
||||||
# 这里修改成api服务器地址
|
# 这里修改成api服务器地址
|
||||||
VUE_APP_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
|
# base api
|
||||||
# 这里修改成api服务器地址
|
# 这里修改成api服务器地址
|
||||||
VUE_APP_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: '设备配置'
|
title: '设备配置'
|
||||||
},
|
},
|
||||||
component: () => import('../views/basicConfig/deviceConfig')
|
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