update 报表管理

qianlishi 3 years ago
parent f8a84768e2
commit 59c834a608

@ -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', //keyeditField'': '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>

@ -5,496 +5,222 @@
* @Last Modified time: 2021-3-13 11:04:24
!-->
<template>
<div class="app-container">
<el-form
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
>
<anji-crud ref="listPage" :option="crudOption">
<template v-slot:buttonLeftOnTable> </template>
<!--表格渲染-->
<el-table
v-loading="listLoading"
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 slot="rowButton" slot-scope="props">
<el-button type="primary" @click="customButtom(props)"></el-button>
</template>
</el-table-column> -->
<el-table-column prop="reportName" label="名称" />
<el-table-column prop="reportCode" label="报表编码" />
<!-- <el-table-column prop="reportGroup"
label="分组">
<template slot-scope="scope">
{{scope.row.reportGroup | filterPushType}}
-->
<!--自定义的卡片插槽将在编辑详情页面出现在底部新卡片-->
<!--这里可以将自定义的弹出框代码放入到page中
<template v-slot:pageSection>
<div>插入底部html片段</div>
</template>
</el-table-column> -->
<el-table-column prop="reportDesc" label="备注" />
<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>
-->
</anji-crud>
</template>
<script>
import { dataDictionary } from "@/api/common";
import { getToken } from "@/utils/auth";
import { reportPageList, addReport, editReport, delReport } from "@/api/report";
import Dictionary from "@/components/Dictionary/index";
import Share from "@/views/report/report/components/share";
var typeData;
import {
reportList,
reportAdd,
reportDeleteBatch,
reportUpdate,
reportDetail
} from "@/api/reportmanage";
export default {
name: "Report",
components: { Dictionary, Share },
filters: {
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;
}
}
}
components: {
anjiCrud: require("@/components/AnjiPlus/anji-crud/anji-crud").default
},
data() {
return {
params: {
reportCode: "",
reportName: "",
// reportType: '',
pageNumber: 1,
pageSize: 10,
order: "DESC",
sort: "update_time"
},
dialogForm: {
reportName: "",
reportCode: "",
// reportType: '',
// reportGroup: '',
reportDesc: "",
reportImage: ""
},
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() {},
// beforeCreatethis
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;
crudOption: {
// 使
title: "报表管理",
//
labelWidth: "120px",
//
queryFormFields: [
{
inputType: "input",
label: "报表名称",
field: "reportName"
},
{
inputType: "input",
label: "报表编码",
field: "reportCode"
}
},
//
share(val) {
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",
],
//
buttons: {
query: {
reportCode: val.reportCode,
reportId: val.id,
accessKey: val.accessKey
}
});
window.open(routeUrl.href, "_blank");
// }
api: reportList,
permission: "reportManage:query"
},
//
async delReport(val) {
const { code } = await delReport(val);
if (code != "200") return;
this.queryByPage();
queryByPrimarykey: {
api: reportDetail,
permission: "reportManage:detail"
},
del(val) {
this.$confirm("确定删除此条数据, 是否继续?", "删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.delReport(val);
})
.catch(() => {
this.$message({
type: "info",
message: "取消删除"
});
});
add: {
api: reportAdd,
permission: "reportManage:insert"
},
//
closeDialog(bool) {
bool && this.search("form"); //
this.$refs["userForm"].resetFields();
this.basicDialog = false;
delete: {
api: reportDeleteBatch,
permission: "reportManage:delete"
},
handleSizeChange(val) {
this.params.pageSize = val;
this.queryByPage();
edit: {
api: reportUpdate,
permission: "reportManage:update"
},
handleCurrentChange(val) {
this.params.pageNumber = val;
this.queryByPage();
customButton: {
operationWidth: "150px"
}
},
//
UserConfirm() {
debugger;
this.$refs.form.validate(async (valid, obj) => {
if (valid) {
if (this.dialogForm.id == undefined) {
const { code } = await addReport(this.dialogForm);
if (code != "200") return;
} else {
const { code } = await editReport(this.dialogForm);
if (code != "200") return;
//
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", //keyeditField'': '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>
<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>

Loading…
Cancel
Save