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

update 报表管理

Browse Source
qianlishi 3 years ago
parent f8a84768e2
commit 59c834a608
2 changed files with 203 additions and 698 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,221 +0,0 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-3-13 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-3-13 11:04:24
!-->
<template>
<anji-crud ref="listPage" :option="crudOption">
<template v-slot:buttonLeftOnTable>
</template>
<!--
<template slot="rowButton" slot-scope="props">
<el-button type="primary" @click="customButtom(props)">行按钮</el-button>
</template>
-->
<!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
<!--这里可以将自定义的弹出框代码，放入到page中
<template v-slot:pageSection>
<div>插入底部html片段</div>
</template>
-->
</anji-crud>
</template>
<script>
import { reportList, reportAdd, reportDeleteBatch, reportUpdate, reportDetail } from '@/api/reportmanage'
export default {
name: 'Report',
components: {
anjiCrud: require('@/components/AnjiPlus/anji-crud/anji-crud').default,
},
data() {
return {
crudOption: {
// 使用菜单做为页面标题
title: '报表管理',
// 详情页中输入框左边文字宽度
labelWidth: '120px',
// 查询表单条件
queryFormFields: [
{
inputType: 'input',
label: '报表名称',
field: 'reportName'
},
{
inputType: 'input',
label: '报表编码',
field: 'reportCode'
},
],
// 操作按钮
buttons: {
query: {
api: reportList,
permission: 'reportManage:query'
},
queryByPrimarykey: {
api: reportDetail,
permission: 'reportManage:detail'
},
add: {
api: reportAdd,
permission: 'reportManage:insert'
},
delete: {
api: reportDeleteBatch,
permission: 'reportManage:delete'
},
edit: {
api: reportUpdate,
permission: 'reportManage:update'
},
},
// 表格列
columns: [
{
label: '',
field: 'id',
primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
tableHide: true, // 表格中不显示
editHide: true, // 编辑弹框中不显示
},
{
label: '报表名称',//名称
placeholder: '',
field: 'reportName',
editField: 'reportName',
inputType: 'input',
rules: [
{ min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
],
disabled: false,
},
{
label: '报表编码',//报表编码
placeholder: '',
field: 'reportCode',
editField: 'reportCode',
inputType: 'input',
rules: [
{ min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
],
disabled: 'disableOnEdit',
},
{
label: '分组',//分组,暂时不展示出来
placeholder: '',
field: 'reportGroup',
tableHide: true,
editHide: true,
editField: 'reportGroup',
inputType: 'input',
rules: [
{ min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
],
disabled: false,
defaultValue: 'default'
},
{
label: '报表类型',//报表类型-目前仅支持大屏报表，暂时不展示出来
placeholder: '',
field: 'reportType',
editField: 'reportType',
tableHide: true,
editHide: true,
inputType: 'anji-select',
anjiSelectOption: {
dictCode: 'REPORT_TYPE',
},
rules: [
{ min: 1, max: 20, message: '不超过20个字符', trigger: 'blur' }
],
disabled: true,
defaultValue: 'report_screen'
},
{
label: '描述',//报表描述
placeholder: '',
field: 'reportDesc',
editField: 'reportDesc',
inputType: 'input',
rules: [
{ min: 1, max: 255, message: '不超过255个字符', trigger: 'blur' }
],
disabled: false,
},
{
label: '状态',//0--已禁用 1--已启用 DIC_NAME=ENABLE_FLAG
placeholder: '',
field: 'enableFlag',
fieldTableRowRenderer: (row) => {
return this.getDictLabelByCode('ENABLE_FLAG', row['enableFlag'])
},
colorStyle: {
0: 'table-danger', //key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
1: 'table-success',
},
editField: 'enableFlag',
inputType: 'anji-select',
anjiSelectOption: {
dictCode: 'ENABLE_FLAG',
},
rules: [
],
disabled: false,
defaultValue: 1
},
{
label: '删除标记',//0--未删除 1--已删除 DIC_NAME=DELETE_FLAG
placeholder: '',
field: 'deleteFlag',
editHide: true,
editField: 'deleteFlag',
tableHide: true,
inputType: 'input',
rules: [
],
disabled: false,
},
{
label: '报表缩略图',//报表缩略图
placeholder: '',
field: 'reportImage',
editField: 'reportImage',
inputType: 'anji-upload',
tableHide: true,
anjiUpload: {
limit: 1, // 文件大小 Number 类型
},
},
],
// 弹出框表单对应的值有改动时
// formData 整个表单，通过编辑打开弹出框，根据主键查询数据时，fieldName, fieldVal, fieldExtend为空
// fieldName 触发修改的input name
// fieldVal input最新值
// fieldExtend 对于select型的扩展值
formChange: (formData, fieldName, fieldVal, fieldExtend) => {
if (fieldName == 'reportImage') {
const fileIdList = []
fieldVal.forEach(el => {
if (el.fileId) {
fileIdList.push(el.fileId)
}
})
formData['reportImage'] = fileIdList.join(',')
}
}
},
}
},
created() { },
methods: {
handleOpenDialog1() {
alert('自定义按钮1点击事件')
}
}
}
</script>

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

@ -5,496 +5,222 @@
* @Last Modified time: 2021-3-13 11:04:24 * @Last Modified time: 2021-3-13 11:04:24
!--> !-->
<template> <template>
<div class="app-container"> <anji-crud ref="listPage" :option="crudOption">
<el-form <template v-slot:buttonLeftOnTable> </template>
ref="form"
:model="params"
:rules="rules"
label-width="120px"
v-permission="'reportManage:query'"
>
<!-- 搜索 -->
<el-row :gutter="10">
<el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
<el-form-item label="名称">
<el-input
v-model="params.reportName"
size="mini"
clearable
placeholder="名称"
class="filter-item"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
<el-form-item label="报表编码">
<el-input
v-model="params.reportCode"
size="mini"
clearable
placeholder="报表编码"
class="filter-item"
/>
</el-form-item>
</el-col>
<!-- <el-col :xs="24"
:sm="20"
:md="12"
:lg="6"
:xl="4">
<el-form-item label="报表类型"
size="mini">
<Dictionary v-model="params.reportType"
:updata-dict="params.reportType"
:dict-key="'REPORT_TYPE'" />
</el-form-item>
</el-col> -->
<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
>
<el-button type="danger" size="mini" @click="reset('form')"
>重置</el-button
>
</el-col>
</el-row>
</el-form>
<el-button
type="primary"
size="mini"
icon="el-icon-plus"
@click="showAddReportModel()"
v-permission="'reportManage:insert'"
>新增</el-button
>
<!--表格渲染--> <!--
<el-table <template slot="rowButton" slot-scope="props">
v-loading="listLoading" <el-button type="primary" @click="customButtom(props)">行按钮</el-button>
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="报表类型">
<template slot-scope="scope">
{{scope.row.reportType | reportTableType}}
</template> </template>
</el-table-column> --> -->
<el-table-column prop="reportName" label="名称" /> <!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
<el-table-column prop="reportCode" label="报表编码" /> <!--这里可以将自定义的弹出框代码，放入到page中
<!-- <el-table-column prop="reportGroup" <template v-slot:pageSection>
label="分组"> <div>插入底部html片段</div>
<template slot-scope="scope">
{{scope.row.reportGroup | filterPushType}}
</template> </template>
</el-table-column> --> -->
<el-table-column prop="reportDesc" label="备注" /> </anji-crud>
<el-table-column prop="createBy" label="创建人" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column prop="updateBy" label="更新人" />
<el-table-column prop="updateTime" label="更新时间" />
<el-table-column label="操作" width="200px" align="center">
<template slot-scope="scope">
<el-button
type="text"
@click="share(scope.row)"
v-permission="'bigScreenManage:share'"
>分享</el-button
>
<el-button
type="text"
@click="preview(scope.row)"
v-permission="'bigScreenManage:view'"
>预览</el-button
>
<el-button
type="text"
@click="design(scope.row)"
v-permission="'bigScreenManage:design'"
>设计</el-button
>
<el-button
type="text"
@click="showAddReportModel(scope.row)"
v-permission="'reportManage:update'"
>编辑</el-button
>
<el-button
type="text"
@click="del(scope.row)"
v-permission="'reportManage:delete'"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="block">
<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"
/>
</div>
<!--表单组件-->
<el-dialog
title="项目基础配置"
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-col :xs="24"
:sm="20"
:md="6"
:lg="6"
:xl="6"> -->
<!-- <el-form-item label="报表类型">
<el-select v-model="dialogForm.reportType"
placeholder="报表类型"
clearable>
<el-option v-for="item in dictionaryTypeOptions"
:key="item.id"
:label="item.text"
:value="item.id" />
</el-select>
</el-form-item> -->
<!-- </el-col> -->
<el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
<el-form-item label="名称" prop="reportName">
<el-input v-model="dialogForm.reportName" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12">
<el-form-item label="报表编码" prop="reportCode">
<el-input
:disabled="reportCodeDisable"
v-model="dialogForm.reportCode"
/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :xs="24"
:sm="20"
:md="6"
:lg="6"
:xl="6">
<el-form-item label="分组">
<el-select v-model="dialogForm.reportGroup"
placeholder="请选择"
clearable>
<el-option v-for="item in dictionaryGroupOptions"
:key="item.id"
:label="item.text"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="dialogForm.reportDesc"
type="textarea"
placeholder="请输入内容"
show-word-limit
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="缩略图">
<el-upload
class="avatar-uploader"
:action="requestUrl"
:headers="headers"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="dialogForm.reportImage"
:src="
dialogForm.reportImage == null
? require('../../../assets/images/charts.jpg')
: dialogForm.reportImage
"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="basicDialog = false">取消</el-button>
<el-button type="primary" @click="UserConfirm">保存</el-button>
</div>
</el-dialog>
<Share
:visib="visibleForShareDialog"
:reportCode="reportCodeForShareDialog"
@handleClose="visibleForShareDialog = false"
/>
</div>
</template> </template>
<script> <script>
import { dataDictionary } from "@/api/common"; import {
import { getToken } from "@/utils/auth"; reportList,
import { reportPageList, addReport, editReport, delReport } from "@/api/report"; reportAdd,
import Dictionary from "@/components/Dictionary/index"; reportDeleteBatch,
import Share from "@/views/report/report/components/share"; reportUpdate,
var typeData; reportDetail
} from "@/api/reportmanage";
export default { export default {
name: "Report", name: "Report",
components: { Dictionary, Share }, components: {
filters: { anjiCrud: require("@/components/AnjiPlus/anji-crud/anji-crud").default
filterPushType(val) {
for (var i = 0; i < typeData.dictionaryGroupOptions.length; i++) {
if (typeData.dictionaryGroupOptions[i].id == val) {
return typeData.dictionaryGroupOptions[i].text;
}
}
},
reportTableType(val) {
for (var i = 0; i < typeData.dictionaryTypeOptions.length; i++) {
if (typeData.dictionaryTypeOptions[i].id == val) {
return typeData.dictionaryTypeOptions[i].text;
}
}
}
}, },
data() { data() {
return { return {
params: { crudOption: {
reportCode: "", // 使用菜单做为页面标题
reportName: "", title: "报表管理",
// reportType: '', // 详情页中输入框左边文字宽度
pageNumber: 1, labelWidth: "120px",
pageSize: 10, // 查询表单条件
order: "DESC", queryFormFields: [
sort: "update_time" {
}, inputType: "input",
dialogForm: { label: "报表名称",
reportName: "", field: "reportName"
reportCode: "", },
// reportType: '', {
// reportGroup: '', inputType: "input",
reportDesc: "", label: "报表编码",
reportImage: "" field: "reportCode"
},
basicDialog: false,
listLoading: true,
list: null,
totalCount: 0,
totalPage: 0,
dictionaryTypeOptions: [], // 报表类型
dictionaryGroupOptions: [], // 报表分组
rules: {},
reportCodeDisable: false,
requestUrl: process.env.BASE_API + "/file/upload",
headers: {
Authorization: getToken()
},
// 分享
visibleForShareDialog: false,
reportCodeForShareDialog: ""
};
},
mounted() {},
// 在生命周期 beforeCreate里面改变this指向
beforeCreate: function() {
typeData = this;
},
created() {
this.queryByPage();
},
methods: {
// 查询
search() {
this.params.pageNumber = 1;
this.queryByPage();
},
// 重置
reset(formName) {
this.$refs[formName].resetFields();
this.params.reportName = "";
this.params.reportCode = "";
// this.params.reportType = ''
this.params.pageNumber = 1;
this.queryByPage();
},
async queryByPage() {
const res = await reportPageList(this.params);
if (res.code != "200") return;
this.listLoading = true;
this.list = res.data.records;
this.list.forEach(value => {
value["reportNameCode"] =
value.reportName + "[" + value.reportCode + "]";
});
this.totalCount = res.data.total;
this.totalPage = res.data.pages;
this.listLoading = false;
},
handleAvatarSuccess(res) {
this.dialogForm.reportImage = res.data.urlPath;
},
beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
return true;
},
// 打开模态框
showAddReportModel(val) {
this.basicDialog = true;
if (val === undefined) {
this.reportCodeDisable = false;
this.dialogForm = {
reportName: "",
reportCode: "",
// reportType: '',
reportDesc: "",
reportImage: ""
};
} else {
this.dialogForm = val;
this.reportCodeDisable = true;
} }
}, ],
// 分享 // 操作按钮
share(val) { buttons: {
this.reportCodeForShareDialog = val.reportCode;
this.visibleForShareDialog = true;
},
// 预览
preview(val) {
var routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportCode: val.reportCode }
});
window.open(routeUrl.href, "_blank");
// }
},
// 设计
design(val) {
var routeUrl = this.$router.resolve({
path: "/bigscreen/designer",
query: { query: {
reportCode: val.reportCode, api: reportList,
reportId: val.id, permission: "reportManage:query"
accessKey: val.accessKey
}
});
window.open(routeUrl.href, "_blank");
// }
}, },
// 删除 queryByPrimarykey: {
async delReport(val) { api: reportDetail,
const { code } = await delReport(val); permission: "reportManage:detail"
if (code != "200") return;
this.queryByPage();
}, },
del(val) { add: {
this.$confirm("确定删除此条数据, 是否继续?", "删除", { api: reportAdd,
confirmButtonText: "确定", permission: "reportManage:insert"
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.delReport(val);
})
.catch(() => {
this.$message({
type: "info",
message: "取消删除"
});
});
}, },
// 关闭模态框 delete: {
closeDialog(bool) { api: reportDeleteBatch,
bool && this.search("form"); // 点确定关闭弹窗的时候才会刷新列表 permission: "reportManage:delete"
this.$refs["userForm"].resetFields();
this.basicDialog = false;
}, },
handleSizeChange(val) { edit: {
this.params.pageSize = val; api: reportUpdate,
this.queryByPage(); permission: "reportManage:update"
}, },
handleCurrentChange(val) { customButton: {
this.params.pageNumber = val; operationWidth: "150px"
this.queryByPage(); }
}, },
// 提交 // 表格列
UserConfirm() { columns: [
debugger; {
this.$refs.form.validate(async (valid, obj) => { label: "",
if (valid) { field: "id",
if (this.dialogForm.id == undefined) { primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
const { code } = await addReport(this.dialogForm); tableHide: true, // 表格中不显示
if (code != "200") return; editHide: true // 编辑弹框中不显示
} else { },
const { code } = await editReport(this.dialogForm); {
if (code != "200") return; label: "报表名称", //名称
placeholder: "",
field: "reportName",
editField: "reportName",
inputType: "input",
rules: [
{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
],
disabled: false
},
{
label: "报表编码", //报表编码
placeholder: "",
field: "reportCode",
editField: "reportCode",
inputType: "input",
rules: [
{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
],
disabled: "disableOnEdit"
},
{
label: "分组", //分组,暂时不展示出来
placeholder: "",
field: "reportGroup",
tableHide: true,
editHide: true,
editField: "reportGroup",
inputType: "input",
rules: [
{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
],
disabled: false,
defaultValue: "default"
},
{
label: "报表类型", //报表类型-目前仅支持大屏报表，暂时不展示出来
placeholder: "",
field: "reportType",
editField: "reportType",
tableHide: true,
editHide: true,
inputType: "anji-select",
anjiSelectOption: {
dictCode: "REPORT_TYPE"
},
rules: [
{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
],
disabled: true,
defaultValue: "report_screen"
},
{
label: "描述", //报表描述
placeholder: "",
field: "reportDesc",
editField: "reportDesc",
inputType: "input",
rules: [
{ min: 1, max: 255, message: "不超过255个字符", trigger: "blur" }
],
disabled: false
},
{
label: "状态", //0--已禁用 1--已启用 DIC_NAME=ENABLE_FLAG
placeholder: "",
field: "enableFlag",
fieldTableRowRenderer: row => {
return this.getDictLabelByCode("ENABLE_FLAG", row["enableFlag"]);
},
colorStyle: {
0: "table-danger", //key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
1: "table-success"
},
editField: "enableFlag",
inputType: "anji-select",
anjiSelectOption: {
dictCode: "ENABLE_FLAG"
},
rules: [],
disabled: false,
defaultValue: 1
},
{
label: "删除标记", //0--未删除 1--已删除 DIC_NAME=DELETE_FLAG
placeholder: "",
field: "deleteFlag",
editHide: true,
editField: "deleteFlag",
tableHide: true,
inputType: "input",
rules: [],
disabled: false
},
{
label: "报表缩略图", //报表缩略图
placeholder: "",
field: "reportImage",
editField: "reportImage",
inputType: "anji-upload",
tableHide: true,
anjiUpload: {
limit: 1 // 文件大小 Number 类型
}
} }
this.closeDialog(true); ],
} else { // 弹出框表单对应的值有改动时
return; // formData 整个表单，通过编辑打开弹出框，根据主键查询数据时，fieldName, fieldVal, fieldExtend为空
// fieldName 触发修改的input name
// fieldVal input最新值
// fieldExtend 对于select型的扩展值
formChange: (formData, fieldName, fieldVal, fieldExtend) => {
if (fieldName == "reportImage") {
const fileIdList = [];
fieldVal.forEach(el => {
if (el.fileId) {
fileIdList.push(el.fileId);
} }
}); });
formData["reportImage"] = fileIdList.join(",");
}
}
}
};
},
created() {},
methods: {
handleOpenDialog1() {
alert("自定义按钮1点击事件");
} }
} }
}; };
</script> </script>
<style>
.avatar-uploader .el-upload {
/*border: 1px dashed #d9d9d9;*/
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 30%;
height: 30%;
display: block;
}
</style>

Write Preview
Loading…
Cancel
Save