update table

qianlishi 3 years ago
parent c2daeeccbe
commit f0c33529e7

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

@ -6,17 +6,35 @@
!--> !-->
<template> <template>
<div class="app-container"> <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-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 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-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 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-form-item>
</el-col> </el-col>
<!-- <el-col :xs="24" <!-- <el-col :xs="24"
@ -32,16 +50,39 @@
</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> <el-button type="primary" size="mini" @click="search('form')"
<el-button type="danger" size="mini" @click="reset('form')"></el-button> >查询</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 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
<el-table-column align="center" label="序号" type="index" min-width="40" /> 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="报表类型"> <!-- <el-table-column label="报表类型">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.reportType | reportTableType}} {{scope.row.reportType | reportTableType}}
@ -62,20 +103,67 @@
<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="share(scope.row)" v-permission="'bigScreenManage:share'"></el-button> <el-button
<el-button type="text" @click="preview(scope.row)" v-permission="'bigScreenManage:view'"></el-button> type="text"
<el-button type="text" @click="design(scope.row)" v-permission="'bigScreenManage:design'"></el-button> @click="share(scope.row)"
<el-button type="text" @click="showAddReportModel(scope.row)" v-permission="'reportManage:update'"></el-button> v-permission="'bigScreenManage:share'"
<el-button type="text" @click="del(scope.row)" v-permission="'reportManage:delete'"></el-button> >分享</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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block"> <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> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog title="项目基础配置" width="50%" :close-on-click-modal="false" center :visible.sync="basicDialog" @close="closeDialog"> <el-dialog
<el-form ref="userForm" :model="dialogForm" :rules="rules" size="small" style="min-height:200px" label-width="100px"> 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-row :gutter="10">
<!-- <el-col :xs="24" <!-- <el-col :xs="24"
:sm="20" :sm="20"
@ -100,7 +188,10 @@
</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 :disabled="reportCodeDisable" v-model="dialogForm.reportCode" /> <el-input
:disabled="reportCodeDisable"
v-model="dialogForm.reportCode"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -124,17 +215,33 @@
</el-row> --> </el-row> -->
<el-col :span="24"> <el-col :span="24">
<el-form-item label="备注"> <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-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="缩略图"> <el-form-item label="缩略图">
<el-upload class="avatar-uploader" :action="requestUrl" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <el-upload
<img v-if="dialogForm.reportImage" :src=" 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 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>
@ -145,54 +252,58 @@
<el-button type="primary" @click="UserConfirm"></el-button> <el-button type="primary" @click="UserConfirm"></el-button>
</div> </div>
</el-dialog> </el-dialog>
<Share :visib="visibleForShareDialog" :reportCode="reportCodeForShareDialog" @handleClose="visibleForShareDialog = false" /> <Share
:visib="visibleForShareDialog"
:reportCode="reportCodeForShareDialog"
@handleClose="visibleForShareDialog = false"
/>
</div> </div>
</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";
import Share from '@/views/report/report/components/share' import Share from "@/views/report/report/components/share";
var typeData var typeData;
export default { export default {
name: 'Report', name: "Report",
components: { Dictionary, Share }, components: { Dictionary, Share },
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,
@ -203,163 +314,163 @@ 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()
}, },
// //
visibleForShareDialog: false, visibleForShareDialog: false,
reportCodeForShareDialog: '', reportCodeForShareDialog: ""
} };
}, },
mounted() {}, mounted() {},
// beforeCreatethis // beforeCreatethis
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;
} }
}, },
// //
share(val) { share(val) {
this.reportCodeForShareDialog = val.reportCode this.reportCodeForShareDialog = val.reportCode;
this.visibleForShareDialog = true this.visibleForShareDialog = 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>
@ -386,7 +497,4 @@ export default {
height: 30%; height: 30%;
display: block; display: block;
} }
.query {
margin-top: 5px;
}
</style> </style>

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

Loading…
Cancel
Save