基础报表管理样式

This commit is contained in:
朱菊兰 2023-02-08 17:23:01 +08:00
parent a85c385180
commit 9530d7e889
12 changed files with 885 additions and 2 deletions

View File

@ -5,3 +5,4 @@ ENV = 'development'
# 这里修改成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'

View File

@ -5,3 +5,4 @@ ENV = 'production'
# 这里修改成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

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

@ -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'
)
}
]
} }
] ]
}, },

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -0,0 +1,8 @@
<template>
<div>预览</div>
</template>
<script>
export default {
name: 'reportView'
}
</script>