update table

qianlishi 3 years ago
parent c2daeeccbe
commit f0c33529e7

@ -38,3 +38,31 @@
zoom: 1;
}
}
.el-form-item .el-form-item__label {
line-height: 28px;
}
.el-form-item__content {
line-height: 28px;
}
.el-input__icon {
line-height: 28px;
}
.el-input--suffix .el-input__inner {
height: 28px;
line-height: 28px;
}
.el-input .el-input__inner {
height: 28px;
line-height: 28px;
}
.el-button {
padding: 7px 15px;
font-size: 12px;
border-radius: 3px;
}
.el-table td {
padding: 6px 0;
}

@ -31,14 +31,7 @@
/>
</el-form-item>
</el-col>
<el-col
:xs="24"
:sm="20"
:md="4"
:lg="4"
:xl="4"
style="margin-top: 5px"
>
<el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4">
<el-button type="primary" size="mini" @click="search('form')"
>查询</el-button
>

@ -6,17 +6,35 @@
!-->
<template>
<div class="app-container">
<el-form ref="form" :model="params" :rules="rules" label-width="120px" v-permission="'reportManage:query'">
<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-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-input
v-model="params.reportCode"
size="mini"
clearable
placeholder="报表编码"
class="filter-item"
/>
</el-form-item>
</el-col>
<!-- <el-col :xs="24"
@ -32,16 +50,39 @@
</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-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-button
type="primary"
size="mini"
icon="el-icon-plus"
@click="showAddReportModel()"
v-permission="'reportManage:insert'"
>新增</el-button
>
<!--表格渲染-->
<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
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}}
@ -62,20 +103,67 @@
<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>
<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" />
<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-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"
@ -100,7 +188,10 @@
</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-input
:disabled="reportCodeDisable"
v-model="dialogForm.reportCode"
/>
</el-form-item>
</el-col>
</el-row>
@ -124,17 +215,33 @@
</el-row> -->
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="dialogForm.reportDesc" type="textarea" placeholder="请输入内容" show-word-limit />
<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="
<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" />
"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
@ -145,54 +252,58 @@
<el-button type="primary" @click="UserConfirm"></el-button>
</div>
</el-dialog>
<Share :visib="visibleForShareDialog" :reportCode="reportCodeForShareDialog" @handleClose="visibleForShareDialog = false" />
<Share
:visib="visibleForShareDialog"
:reportCode="reportCodeForShareDialog"
@handleClose="visibleForShareDialog = false"
/>
</div>
</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 { 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;
export default {
name: 'Report',
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
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
return typeData.dictionaryTypeOptions[i].text;
}
}
},
}
},
data() {
return {
params: {
reportCode: '',
reportName: '',
reportCode: "",
reportName: "",
// reportType: '',
pageNumber: 1,
pageSize: 10,
order: 'DESC',
sort: 'update_time',
order: "DESC",
sort: "update_time"
},
dialogForm: {
reportName: '',
reportCode: '',
reportName: "",
reportCode: "",
// reportType: '',
// reportGroup: '',
reportDesc: '',
reportImage: '',
reportDesc: "",
reportImage: ""
},
basicDialog: false,
listLoading: true,
@ -203,163 +314,163 @@ export default {
dictionaryGroupOptions: [], //
rules: {},
reportCodeDisable: false,
requestUrl: process.env.BASE_API + '/file/upload',
requestUrl: process.env.BASE_API + "/file/upload",
headers: {
Authorization: getToken(),
Authorization: getToken()
},
//
visibleForShareDialog: false,
reportCodeForShareDialog: '',
}
reportCodeForShareDialog: ""
};
},
mounted() {},
// beforeCreatethis
beforeCreate: function () {
typeData = this
beforeCreate: function() {
typeData = this;
},
created() {
this.queryByPage()
this.queryByPage();
},
methods: {
//
search() {
this.params.pageNumber = 1
this.queryByPage()
this.params.pageNumber = 1;
this.queryByPage();
},
//
reset(formName) {
this.$refs[formName].resetFields()
this.params.reportName = ''
this.params.reportCode = ''
this.$refs[formName].resetFields();
this.params.reportName = "";
this.params.reportCode = "";
// this.params.reportType = ''
this.params.pageNumber = 1
this.queryByPage()
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
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
this.dialogForm.reportImage = res.data.urlPath;
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
return true
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
return true;
},
//
showAddReportModel(val) {
this.basicDialog = true
this.basicDialog = true;
if (val === undefined) {
this.reportCodeDisable = false
this.reportCodeDisable = false;
this.dialogForm = {
reportName: '',
reportCode: '',
reportName: "",
reportCode: "",
// reportType: '',
reportDesc: '',
reportImage: '',
}
reportDesc: "",
reportImage: ""
};
} else {
this.dialogForm = val
this.reportCodeDisable = true
this.dialogForm = val;
this.reportCodeDisable = true;
}
},
//
share(val) {
this.reportCodeForShareDialog = val.reportCode
this.visibleForShareDialog = true
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')
path: "/bigscreen/viewer",
query: { reportCode: val.reportCode }
});
window.open(routeUrl.href, "_blank");
// }
},
//
design(val) {
var routeUrl = this.$router.resolve({
path: '/bigscreen/designer',
path: "/bigscreen/designer",
query: {
reportCode: val.reportCode,
reportId: val.id,
accessKey: val.accessKey,
},
})
window.open(routeUrl.href, '_blank')
accessKey: val.accessKey
}
});
window.open(routeUrl.href, "_blank");
// }
},
//
async delReport(val) {
const { code } = await delReport(val)
if (code != '200') return
this.queryByPage()
const { code } = await delReport(val);
if (code != "200") return;
this.queryByPage();
},
del(val) {
this.$confirm('确定删除此条数据, 是否继续?', '删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
this.$confirm("确定删除此条数据, 是否继续?", "删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.delReport(val)
this.delReport(val);
})
.catch(() => {
this.$message({
type: 'info',
message: '取消删除',
})
})
type: "info",
message: "取消删除"
});
});
},
//
closeDialog(bool) {
bool && this.search('form') //
this.$refs['userForm'].resetFields()
this.basicDialog = false
bool && this.search("form"); //
this.$refs["userForm"].resetFields();
this.basicDialog = false;
},
handleSizeChange(val) {
this.params.pageSize = val
this.queryByPage()
this.params.pageSize = val;
this.queryByPage();
},
handleCurrentChange(val) {
this.params.pageNumber = val
this.queryByPage()
this.params.pageNumber = val;
this.queryByPage();
},
//
UserConfirm() {
debugger
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
const { code } = await addReport(this.dialogForm);
if (code != "200") return;
} else {
const { code } = await editReport(this.dialogForm)
if (code != '200') return
const { code } = await editReport(this.dialogForm);
if (code != "200") return;
}
this.closeDialog(true)
this.closeDialog(true);
} else {
return
return;
}
})
},
},
}
});
}
}
};
</script>
<style>
@ -386,7 +497,4 @@ export default {
height: 30%;
display: block;
}
.query {
margin-top: 5px;
}
</style>

@ -256,15 +256,22 @@
</el-button>
</template>
</el-table-column>
<el-table-column label="操作"
width="200">
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button type="text"
size="small"
@click.native.prevent="cutOutRow(scope.$index, tableData)">删除</el-button>
<el-button type="text"
size="small"
@click="addRow(scope.row)">追加</el-button>
<el-button
type="text"
size="small"
@click.native.prevent="
cutOutRow(scope.$index, tableData)
"
>删除</el-button
>
<el-button
type="text"
size="small"
@click="addRow(scope.row)"
>追加</el-button
>
</template>
</el-table-column>
</el-table>
@ -661,9 +668,9 @@ export default {
order: "DESC",
pageNumber: this.params.pageNumber,
pageSize: this.params.pageSize,
setCode:this.query.setCode,
setCode: this.query.setCode,
setName: this.query.setName
}
};
const res = await dataSetPageList(params);
if (res.code != "200") return;
this.listLoading = true;
@ -1176,7 +1183,4 @@ export default {
overflow-y: auto;
padding: 10px;
}
.query {
margin-top: 5px;
}
</style>

Loading…
Cancel
Save