ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update index.vue

Browse Source
peiyanni 3 years ago
parent 3880b18d89
commit 6ca7b82e7e
1 changed files with 114 additions and 191 deletions
Show Stats Download Patch File Download Diff File

305
report-ui/src/views/report/report/index.vue
Unescape Escape View File

@ -6,29 +6,17 @@
!--> !-->
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form ref="form" :model="params" :rules="rules" label-width="120px"> <el-form ref="form" :model="params" :rules="rules" label-width="120px" v-permission="'reportManage:query'">
<!-- 搜索 --> <!-- 搜索 -->
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4"> <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input <el-input v-model="params.reportName" size="mini" clearable placeholder="名称" class="filter-item" />
v-model="params.reportName"
size="mini"
clearable
placeholder="名称"
class="filter-item"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4"> <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
<el-form-item label="报表编码"> <el-form-item label="报表编码">
<el-input <el-input v-model="params.reportCode" size="mini" clearable placeholder="报表编码" class="filter-item" />
v-model="params.reportCode"
size="mini"
clearable
placeholder="报表编码"
class="filter-item"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :xs="24" <!-- <el-col :xs="24"
@ -44,38 +32,16 @@
</el-form-item> </el-form-item>
</el-col> --> </el-col> -->
<el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4" class="query"> <el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4" class="query">
<el-button type="primary" size="mini" @click="search('form')" <el-button type="primary" size="mini" @click="search('form')">查询</el-button>
>查询</el-button <el-button type="danger" size="mini" @click="reset('form')">重置</el-button>
>
<el-button type="danger" size="mini" @click="reset('form')"
>重置</el-button
>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-button <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddReportModel()" v-permission="'reportManage:insert'">新增</el-button>
type="primary"
size="mini"
icon="el-icon-plus"
@click="showAddReportModel()"
>新增</el-button
>
<!--表格渲染--> <!--表格渲染-->
<el-table <el-table v-loading="listLoading" border :data="list" element-loading-text="Loading" class="mt10" style="width: 100%">
v-loading="listLoading" <el-table-column align="center" label="序号" type="index" min-width="40" />
border
:data="list"
element-loading-text="Loading"
class="mt10"
style="width: 100%"
>
<el-table-column
align="center"
label="序号"
type="index"
min-width="40"
/>
<!-- <el-table-column label="报表类型"> <!-- <el-table-column label="报表类型">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.reportType | reportTableType}} {{scope.row.reportType | reportTableType}}
@ -96,43 +62,19 @@
<el-table-column prop="updateTime" label="更新时间" /> <el-table-column prop="updateTime" label="更新时间" />
<el-table-column label="操作" width="200px" align="center"> <el-table-column label="操作" width="200px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="preview(scope.row)">预览</el-button> <el-button type="text" @click="preview(scope.row)" v-permission="'bigScreenManage:view'">预览</el-button>
<el-button type="text" @click="design(scope.row)">设计</el-button> <el-button type="text" @click="design(scope.row)" v-permission="'bigScreenManage:design'">设计</el-button>
<el-button type="text" @click="showAddReportModel(scope.row)" <el-button type="text" @click="showAddReportModel(scope.row)" v-permission="'reportManage:update'">编辑</el-button>
>编辑</el-button <el-button type="text" @click="del(scope.row)" v-permission="'reportManage:delete'">删除</el-button>
>
<el-button type="text" @click="del(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block"> <div class="block">
<el-pagination <el-pagination :total="totalCount" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" :current-page="params.pageNumber" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
:total="totalCount"
:page-sizes="[10, 20, 50, 100]"
:page-size="params.pageSize"
:current-page="params.pageNumber"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog <el-dialog title="项目基础配置" width="50%" :close-on-click-modal="false" center :visible.sync="basicDialog" @close="closeDialog">
title="项目基础配置" <el-form ref="userForm" :model="dialogForm" :rules="rules" size="small" style="min-height:200px" label-width="100px">
width="50%"
:close-on-click-modal="false"
center
:visible.sync="basicDialog"
@close="closeDialog"
>
<el-form
ref="userForm"
:model="dialogForm"
:rules="rules"
size="small"
style="min-height:200px"
label-width="100px"
>
<el-row :gutter="10"> <el-row :gutter="10">
<!-- <el-col :xs="24" <!-- <el-col :xs="24"
:sm="20" :sm="20"
@ -157,10 +99,7 @@
</el-col> </el-col>
<el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12"> <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
<el-form-item label="报表编码" prop="reportCode"> <el-form-item label="报表编码" prop="reportCode">
<el-input <el-input :disabled="reportCodeDisable" v-model="dialogForm.reportCode" />
:disabled="reportCodeDisable"
v-model="dialogForm.reportCode"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -184,33 +123,17 @@
</el-row> --> </el-row> -->
<el-col :span="24"> <el-col :span="24">
<el-form-item label="备注"> <el-form-item label="备注">
<el-input <el-input v-model="dialogForm.reportDesc" type="textarea" placeholder="请输入内容" show-word-limit />
v-model="dialogForm.reportDesc"
type="textarea"
placeholder="请输入内容"
show-word-limit
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="缩略图"> <el-form-item label="缩略图">
<el-upload <el-upload class="avatar-uploader" :action="requestUrl" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
class="avatar-uploader" <img v-if="dialogForm.reportImage" :src="
:action="requestUrl"
:headers="headers"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="dialogForm.reportImage"
:src="
dialogForm.reportImage == null dialogForm.reportImage == null
? require('../../../assets/images/charts.jpg') ? require('../../../assets/images/charts.jpg')
: dialogForm.reportImage : dialogForm.reportImage
" " class="avatar" />
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
@ -225,48 +148,48 @@
</template> </template>
<script> <script>
import { dataDictionary } from "@/api/common"; import { dataDictionary } from '@/api/common'
import { getToken } from "@/utils/auth"; import { getToken } from '@/utils/auth'
import { reportPageList, addReport, editReport, delReport } from "@/api/report"; import { reportPageList, addReport, editReport, delReport } from '@/api/report'
import Dictionary from "@/components/Dictionary/index"; import Dictionary from '@/components/Dictionary/index'
var typeData; var typeData
export default { export default {
name: "Report", name: 'Report',
components: { Dictionary }, components: { Dictionary },
filters: { filters: {
filterPushType(val) { filterPushType(val) {
for (var i = 0; i < typeData.dictionaryGroupOptions.length; i++) { for (var i = 0; i < typeData.dictionaryGroupOptions.length; i++) {
if (typeData.dictionaryGroupOptions[i].id == val) { if (typeData.dictionaryGroupOptions[i].id == val) {
return typeData.dictionaryGroupOptions[i].text; return typeData.dictionaryGroupOptions[i].text
} }
} }
}, },
reportTableType(val) { reportTableType(val) {
for (var i = 0; i < typeData.dictionaryTypeOptions.length; i++) { for (var i = 0; i < typeData.dictionaryTypeOptions.length; i++) {
if (typeData.dictionaryTypeOptions[i].id == val) { if (typeData.dictionaryTypeOptions[i].id == val) {
return typeData.dictionaryTypeOptions[i].text; return typeData.dictionaryTypeOptions[i].text
} }
} }
} },
}, },
data() { data() {
return { return {
params: { params: {
reportCode: "", reportCode: '',
reportName: "", reportName: '',
// reportType: '', // reportType: '',
pageNumber: 1, pageNumber: 1,
pageSize: 10, pageSize: 10,
order: "DESC", order: 'DESC',
sort: "update_time" sort: 'update_time',
}, },
dialogForm: { dialogForm: {
reportName: "", reportName: '',
reportCode: "", reportCode: '',
// reportType: '', // reportType: '',
// reportGroup: '', // reportGroup: '',
reportDesc: "", reportDesc: '',
reportImage: "" reportImage: '',
}, },
basicDialog: false, basicDialog: false,
listLoading: true, listLoading: true,
@ -277,154 +200,154 @@ export default {
dictionaryGroupOptions: [], // 报表分组 dictionaryGroupOptions: [], // 报表分组
rules: {}, rules: {},
reportCodeDisable: false, reportCodeDisable: false,
requestUrl: process.env.BASE_API + "/file/upload", requestUrl: process.env.BASE_API + '/file/upload',
headers: { headers: {
Authorization: getToken() Authorization: getToken(),
} },
}; }
}, },
mounted() {}, mounted() {},
// 在生命周期 beforeCreate里面改变this指向 // 在生命周期 beforeCreate里面改变this指向
beforeCreate: function() { beforeCreate: function () {
typeData = this; typeData = this
}, },
created() { created() {
this.queryByPage(); this.queryByPage()
}, },
methods: { methods: {
// 查询 // 查询
search() { search() {
this.params.pageNumber = 1; this.params.pageNumber = 1
this.queryByPage(); this.queryByPage()
}, },
// 重置 // 重置
reset(formName) { reset(formName) {
this.$refs[formName].resetFields(); this.$refs[formName].resetFields()
this.params.reportName = ""; this.params.reportName = ''
this.params.reportCode = ""; this.params.reportCode = ''
// this.params.reportType = '' // this.params.reportType = ''
this.params.pageNumber = 1; this.params.pageNumber = 1
this.queryByPage(); this.queryByPage()
}, },
async queryByPage() { async queryByPage() {
const res = await reportPageList(this.params); const res = await reportPageList(this.params)
if (res.code != "200") return; if (res.code != '200') return
this.listLoading = true; this.listLoading = true
this.list = res.data.records; this.list = res.data.records
this.list.forEach(value => { this.list.forEach((value) => {
value["reportNameCode"] = value['reportNameCode'] =
value.reportName + "[" + value.reportCode + "]"; value.reportName + '[' + value.reportCode + ']'
}); })
this.totalCount = res.data.total; this.totalCount = res.data.total
this.totalPage = res.data.pages; this.totalPage = res.data.pages
this.listLoading = false; this.listLoading = false
}, },
handleAvatarSuccess(res) { handleAvatarSuccess(res) {
this.dialogForm.reportImage = res.data.urlPath; this.dialogForm.reportImage = res.data.urlPath
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg"; const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2
return true; return true
}, },
// 打开模态框 // 打开模态框
showAddReportModel(val) { showAddReportModel(val) {
this.basicDialog = true; this.basicDialog = true
if (val === undefined) { if (val === undefined) {
this.reportCodeDisable = false; this.reportCodeDisable = false
this.dialogForm = { this.dialogForm = {
reportName: "", reportName: '',
reportCode: "", reportCode: '',
// reportType: '', // reportType: '',
reportDesc: "", reportDesc: '',
reportImage: "" reportImage: '',
}; }
} else { } else {
this.dialogForm = val; this.dialogForm = val
this.reportCodeDisable = true; this.reportCodeDisable = true
} }
}, },
// 预览 // 预览
preview(val) { preview(val) {
var routeUrl = this.$router.resolve({ var routeUrl = this.$router.resolve({
path: "/bigscreen/viewer", path: '/bigscreen/viewer',
query: { reportCode: val.reportCode } query: { reportCode: val.reportCode },
}); })
window.open(routeUrl.href, "_blank"); window.open(routeUrl.href, '_blank')
// } // }
}, },
// 设计 // 设计
design(val) { design(val) {
var routeUrl = this.$router.resolve({ var routeUrl = this.$router.resolve({
path: "/bigscreen/designer", path: '/bigscreen/designer',
query: { query: {
reportCode: val.reportCode, reportCode: val.reportCode,
reportId: val.id, reportId: val.id,
accessKey: val.accessKey accessKey: val.accessKey,
} },
}); })
window.open(routeUrl.href, "_blank"); window.open(routeUrl.href, '_blank')
// } // }
}, },
// 删除 // 删除
async delReport(val) { async delReport(val) {
const { code } = await delReport(val); const { code } = await delReport(val)
if (code != "200") return; if (code != '200') return
this.queryByPage(); this.queryByPage()
}, },
del(val) { del(val) {
this.$confirm("确定删除此条数据, 是否继续?", "删除", { this.$confirm('确定删除此条数据, 是否继续?', '删除', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning" type: 'warning',
}) })
.then(() => { .then(() => {
this.delReport(val); this.delReport(val)
}) })
.catch(() => { .catch(() => {
this.$message({ this.$message({
type: "info", type: 'info',
message: "取消删除" message: '取消删除',
}); })
}); })
}, },
// 关闭模态框 // 关闭模态框
closeDialog(bool) { closeDialog(bool) {
bool && this.search("form"); // 点确定关闭弹窗的时候才会刷新列表 bool && this.search('form') // 点确定关闭弹窗的时候才会刷新列表
this.$refs["userForm"].resetFields(); this.$refs['userForm'].resetFields()
this.basicDialog = false; this.basicDialog = false
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.params.pageSize = val; this.params.pageSize = val
this.queryByPage(); this.queryByPage()
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.params.pageNumber = val; this.params.pageNumber = val
this.queryByPage(); this.queryByPage()
}, },
// 提交 // 提交
UserConfirm() { UserConfirm() {
debugger; debugger
this.$refs.form.validate(async (valid, obj) => { this.$refs.form.validate(async (valid, obj) => {
if (valid) { if (valid) {
if (this.dialogForm.id == undefined) { if (this.dialogForm.id == undefined) {
const { code } = await addReport(this.dialogForm); const { code } = await addReport(this.dialogForm)
if (code != "200") return; if (code != '200') return
} else { } else {
const { code } = await editReport(this.dialogForm); const { code } = await editReport(this.dialogForm)
if (code != "200") return; if (code != '200') return
} }
this.closeDialog(true); this.closeDialog(true)
} else { } else {
return; return
} }
}); })
} },
} },
}; }
</script> </script>
<style> <style>

Write Preview
Loading…
Cancel
Save