Update index.vue

peiyanni 3 years ago
parent 3880b18d89
commit 6ca7b82e7e

@ -6,29 +6,17 @@
!-->
<template>
<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-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"
@ -44,38 +32,16 @@
</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()"
>新增</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}}
@ -96,43 +62,19 @@
<el-table-column prop="updateTime" label="更新时间" />
<el-table-column label="操作" width="200px" align="center">
<template slot-scope="scope">
<el-button type="text" @click="preview(scope.row)"></el-button>
<el-button type="text" @click="design(scope.row)"></el-button>
<el-button type="text" @click="showAddReportModel(scope.row)"
>编辑</el-button
>
<el-button type="text" @click="del(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)" 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"
@ -157,10 +99,7 @@
</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>
@ -184,33 +123,17 @@
</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>
@ -225,48 +148,48 @@
</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";
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'
var typeData
export default {
name: "Report",
name: 'Report',
components: { Dictionary },
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,
@ -277,154 +200,154 @@ 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(),
},
}
};
},
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
}
},
//
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>

Loading…
Cancel
Save