<template>
<div class="main-wrapper">
<!-- 头部搜索等 -->
<div class="box-head">
<el-form ref="searchform" :model="searchform" :inline="true">
<el-form-item label="统计期">
<el-select v-model="searchform.statisticalPeriod" placeholder="请选择" size="mini" clearable>
<el-option label="2019" value="2019年" />
<el-option label="2018" value="2018年" />
<el-option label="2017" value="2017年" />
</el-select>
<el-select v-model="searchform.quarter" placeholder="请选择" size="mini" clearable>
<el-option label="一季度" value="1" />
<el-option label="二季度" value="2" />
<el-option label="三季度" value="3" />
<el-option label="四季度" value="4" />
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<!-- <el-select v-model="form.region" placeholder="请选择" size="mini">
<el-option label="1111" value></el-option>
</el-select>-->
<!-- <el-input placeholder="请输入企业名称" v-model="searchform.companyName" size="mini" clearable></el-input> -->
<el-select
v-model="searchform.companyName"
filterable
placeholder="请选择"
size="mini"
clearable
@change="selectCompanyName"
>
<el-option
v-for="item in restaurants"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="search">搜索</el-button>
<el-button type="primary" size="mini" @click="add">添加</el-button>
<el-button type="primary" size="mini" @click="_reportimport">导入</el-button>
<!-- <el-upload
class="upload-demo"
ref="upload"
action="http://115.239.137.3:9000/enterprise/report/import"
:show-file-list="false"
:file-list="fileArr"
:before-upload="beforeUploadFile"
style="display: inline"
:on-success="handleSuccess"
>
<el-button type="primary" style="margin-bottom:15px;margin-left: 10px;" size="mini">导入</el-button>
</el-upload>-->
<el-button type="primary" size="mini" @click="_reportexport">导出</el-button>
<el-button type="primary" size="mini" @click="_reportdownload">模板下载</el-button>
</el-form-item>
</el-form>
</div>
<!-- 表格部分 -->
<el-table :data="records" border style="width: 100%" size="mini" fit>
<!-- <el-table-column prop="statisticalPeriod" label="统计期" align="center"></el-table-column> -->
<el-table-column label="统计期" align="center">
<template slot-scope="scope">
<span>{{ scope.row.statisticalPeriod }}</span>
<span>({{ QUARTER[scope.row.quarter] }})</span>
<!-- <el-button type="primary" size="small" @click="edit(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>-->
</template>
</el-table-column>
<el-table-column prop="companyName" label="企业名称" align="center" />
<el-table-column prop="productValue" label="产值" align="center" />
<el-table-column prop="revenue" label="税收" align="center" />
<el-table-column prop="workNumber" label="从业人员数" align="center" />
<el-table-column prop="assets" label="固定资产" align="center" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="edit(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-left:20px"
:current-page="currentPage"
:page-sizes="pagesizes"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
<!-- 弹框 新增/编辑 -->
<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="closeDialog">
<el-form
ref="ruleForm"
label-width="100px"
label-position="right"
:model="form"
:rules="formrules"
>
<el-form-item label="统计期:" prop="statisticalPeriod">
<el-select v-model="form.statisticalPeriod" placeholder="请选择" size="mini" clearable>
<el-option label="2019" value="2019年" />
<el-option label="2018" value="2018年" />
<el-option label="2017" value="2017年" />
</el-select>
</el-form-item>
<el-form-item label="统计季度:" prop="quarter">
<el-select v-model="form.quarter" placeholder="请选择" size="mini" clearable>
<el-option label="一季度" value="1" />
<el-option label="二季度" value="2" />
<el-option label="三季度" value="3" />
<el-option label="四季度" value="4" />
</el-select>
</el-form-item>
<el-form-item label="企业名称:" prop="companyName">
<!-- <el-select v-model="form.companyName" placeholder="请选择" size="mini">
<el-option label="1111" value></el-option>
</el-select>-->
<!-- <el-input placeholder="请输入企业名称" v-model="form.companyName" size="mini" clearable></el-input> -->
<el-select
v-model="form.companyName"
filterable
placeholder="请选择"
size="mini"
clearable
@change="AddselectCompanyName"
>
<el-option
v-for="items in restaurants"
:key="items.id"
:label="items.name"
:value="items.name"
/>
</el-select>
</el-form-item>
<el-form-item label="企业产值:" prop="productValue">
<el-input v-model="form.productValue" placeholder="请输入产值" size="mini" />
</el-form-item>
<el-form-item label="企业税收:" prop="revenue">
<el-input v-model="form.revenue" placeholder="请输入税收" size="mini" />
</el-form-item>
<el-form-item label="从业人员数:" prop="workNumber">
<el-input v-model="form.workNumber" placeholder="请输入人数" size="mini" />
</el-form-item>
<el-form-item label="固定资产:" prop="assets">
<el-input v-model="form.assets" placeholder="请输入资产" size="mini" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</div>
</el-dialog>
<!-- 导入弹框 -->
<el-dialog title="导入" :visible.sync="daorudialogFormVisible" @close="daorucloseDialog">
<el-form
ref="daoruForm"
label-width="100px"
label-position="right"
:model="daoru"
:rules="daorurules"
>
<el-form-item label="统计期" prop="statisticalPeriod">
<el-select v-model="daoru.statisticalPeriod" placeholder="请选择" size="mini" clearable>
<el-option label="2019" value="2019年" />
<el-option label="2018" value="2018年" />
<el-option label="2017" value="2017年" />
</el-select>
</el-form-item>
<el-form-item label="统计季度" prop="quarter">
<el-select v-model="daoru.quarter" placeholder="请选择" size="mini" clearable>
<el-option label="一季度" value="1" />
<el-option label="二季度" value="2" />
<el-option label="三季度" value="3" />
<el-option label="四季度" value="4" />
</el-select>
</el-form-item>
<!-- <el-upload
class="upload-demo"
ref="upload"
action="http://115.239.137.3:9000/enterprise/report/import"
:show-file-list="false"
:file-list="fileArr"
:before-upload="beforeUploadFile"
style="display: inline"
:on-success="handleSuccess"
>
<el-button type="primary" style="margin-bottom:15px;margin-left: 10px;" size="mini">导入</el-button>
</el-upload>-->
<el-form-item>
<el-upload
ref="upload"
class="upload-demo"
:action="daoruUrls"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileArr"
:on-success="handleSuccess"
:before-upload="beforeUploadFile"
:auto-upload="false"
:data="daoru"
:limit="1"
:on-exceed="onexceed"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
@click="daorusubmitForm('daoruForm')"
>导入</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
</el-upload>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import {
reportList,
reportCheck,
reportadd,
reportview,
reportupdate,
reportdelete,
reportcompanies,
reportdownload,
reportexport,
reportimport
} from '../../api/dashboard'
import { mapGetters } from 'vuex'
export default {
name: 'Index',
components: {},
computed: {
...mapGetters(['parkId'])
},
data() {
return {
searchform: {
companyName: '',
quarter: '',
statisticalPeriod: ''
},
form: {
statisticalPeriod: '',
quarter: '',
companyName: '',
productValue: '',
revenue: '',
workNumber: '',
assets: '',
id: ''
},
formrules: {
statisticalPeriod: [
{ required: true, message: '请选择统计期', trigger: 'change' }
],
quarter: [{ required: true, message: '请选择季度', trigger: 'change' }],
companyName: [
{ required: true, message: '请选择企业名称', trigger: 'change' }
],
productValue: [
{ required: true, message: '请输入产值', trigger: 'blur' }
],
revenue: [{ required: true, message: '请输入税收', trigger: 'blur' }],
workNumber: [
{ required: true, message: '请输入从业人员数', trigger: 'blur' }
],
assets: [{ required: true, message: '请输入固定资产', trigger: 'blur' }]
},
QUARTER: {
'1': '一季度',
'2': '二季度',
'3': '三季度',
'4': '四季度'
},
records: [],
dialogFormVisible: false, // 弹框
restaurants: [], // 企业名称
saveError: false,
currentPage: 1,
pagesize: 10,
pagesizes: [5, 10, 20, 30],
total: 0,
// 导入
daorudialogFormVisible: false, // 导入弹框
fileArr: [], // 导入文件列表
daoruUrls: '', // 导入请求接口地址
daoru: {
// 导入表单
statisticalPeriod: '',
quarter: ''
},
daorurules: {
// 导入验证规则
statisticalPeriod: [
{ required: true, message: '请选择统计期', trigger: 'change' }
],
quarter: [{ required: true, message: '请选择季度', trigger: 'change' }]
}
}
},
created() {
this._reportList()
},
mounted() {
this._reportcompanies()
},
methods: {
handleSizeChange(pagesize) {
this.pagesize = pagesize
this._reportList()
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this._reportList()
},
// 企业下拉
_reportcompanies() {
reportcompanies(this.parkId).then(res => {
this.restaurants = res.data.data
})
},
selectCompanyName(item) {
// console.log("item", item);
},
AddselectCompanyName(item) {
// console.log("item", item);
},
// 企业下拉end
// 企业信息-校验
_reportCheck(callback) {
reportCheck({
statisticalPeriod: this.form.statisticalPeriod,
quarter: this.form.quarter,
companyName: this.form.companyName,
parkId: this.parkId
}).then(res => {
console.log('res校验', res)
if (res.data.status == 400) {
this.saveError = true
} else {
this.saveError = false
}
callback(this.saveError)
})
},
// 列表
_reportList() {
reportList({
current: this.currentPage,
size: this.pagesize,
companyName: this.searchform.companyName,
quarter: this.searchform.quarter,
statisticalPeriod: this.searchform.statisticalPeriod,
parkId: this.parkId
}).then(res => {
// console.log("res", res);
if (res.status == 200) {
this.records = res.data.data.records || []
this.total = res.data.data.total
}
})
},
add() {
this.dialogFormVisible = true
this.form.id = ''
this.form.statisticalPeriod = ''
this.form.quarter = ''
this.form.companyName = ''
this.form.productValue = '0'
this.form.revenue = '0'
this.form.workNumber = '0'
this.form.assets = '0'
this.form.parkId = this.parkId
this.$nextTick(() => {
// this.$refs["ruleForm"].clearValidate();//移除表单项的校验结果
this.$refs['ruleForm'].resetFields() // 初始值并移除校验结果
})
},
edit(index, row) {
this.dialogFormVisible = true
this.$nextTick(() => {
// this.$refs["ruleForm"].clearValidate();//移除表单项的校验结果
this.$refs['ruleForm'].resetFields() // 初始值并移除校验结果
})
reportview(row.id).then(res => {
this.form = res.data.data
})
},
// 保存
submitForm(form) {
console.log(form, this.$refs[form])
this.$refs[form].validate(valid => {
if (valid) {
console.log('form', this.form)
if (this.form.id) {
// 编辑
reportupdate(this.form).then(res => {
if (res.data.status == 200) {
this.$message({
message: '修改成功',
type: 'success'
})
this.dialogFormVisible = false
this._reportList()
} else {
this.$message({
message: '修改失败',
type: 'error'
})
}
})
} else {
console.log('添加')
// 添加
this._reportCheck(saveError => {
// console.log(111, saveError);
if (saveError) {
this.$message({
message: '统计期和企业名称的直报已经存在',
type: 'error'
})
} else {
reportadd(this.form).then(res => {
if (res.data.status == 200) {
this.$message({
message: '添加成功',
type: 'success'
})
this.dialogFormVisible = false
this._reportList()
} else {
console.log(1111111111)
this.$message({
message: '添加失败',
type: 'error'
})
}
})
}
})
}
} else {
console.log('error submit!!')
return false
}
})
},
// 删除
del(index, row) {
this.$confirm('是否确定删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
reportdelete(row.id)
.then(res => {
// console.log(res);
if (res.data.status == 200) {
this.$message({
message: '删除成功',
type: 'success'
})
this._reportList()
}
})
.catch(e => e)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 关闭添加/编辑弹框
closeDialog() {
this.dialogFormVisible = false
},
// 搜索
search() {
// console.log(this.searchform);
this.currentPage = 1
this._reportList()
},
// 模板下载
_reportdownload() {
// reportdownload({}).then(res => {
// // console.log("res", res);
// });
// window.open("http://115.239.137.3:9000/enterprise/report/download");
const urls = process.env.BASE_API + '/report/download'
window.open(urls)
},
// 导出
_reportexport() {
// reportexport().then(res => {
// this.restaurants = res.data.data;
// });
// window.open("http://61.174.54.120:9000/enterprise/report/export");
const urls = process.env.BASE_API + '/report/export?parkId=' + this.parkId
window.open(urls)
},
// 导入
// 导入弹框显示
_reportimport() {
// reportimport().then(res => {
// // console.log("res", res);
// });
// file，parkId ，quarter ，statisticalPeriod
this.daorudialogFormVisible = true
// 清空表单
this.daoru.statisticalPeriod = ''
this.daoru.quarter = ''
this.daoru.parkId = this.parkId
this.fileArr = []
// this.daoruUrls = "http://115.239.137.3:9000/enterprise/report/import";
this.daoruUrls = process.env.BASE_API + '/report/import'
this.$nextTick(() => {
this.$refs['daoruForm'].resetFields() // 初始值并移除校验结果
})
},
// 导入确认
daorusubmitForm(form) {
console.log('111', this.fileArr)
// console.log("form", form, this.$refs[form]);
this.$refs[form].validate(valid => {
this.$refs.upload.submit()
})
},
// 导入关闭
daorucloseDialog() {
this.daorudialogFormVisible = false
},
// 导入之前
beforeUploadFile(file) {
console.log('上传之前', file)
console.log('daoru', this.daoru)
const isLt10M = file.size / 1024 / 1024 < 10
const isText = file.type === 'application/vnd.ms-excel'
const isTextComputer =
file.type ===
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (!isLt10M) {
this.$message.error('上传文件大小不能超过10MB!')
return false
}
if (!isText && !isTextComputer) {
this.$message.error('上传文件类型必须为excel!')
return false
}
},
// 导入成功
handleSuccess: function(res, file, fileList) {
console.log('成功', res, file, fileList)
const _this = this
console.log(res)
if (res.success === true) {
_this.$alert('上传成功', '提示', {
confirmButtonText: '确定',
callback: action => {
this.currentPage = 1
this._reportList()
this.daorudialogFormVisible = false
}
})
} else {
_this.$alert('上传失败，请稍后再试', '提示', {
confirmButtonText: '确定',
callback: action => {
this.daorudialogFormVisible = false
this.fileArr = []
}
})
}
},
// 删除文件
handleRemove(file, fileList) {
console.log('file删除', file, fileList)
},
// 选中文件
handlePreview(file) {
// this.fileArr = file;
console.log('file选中', file)
},
// 文件限制
onexceed(files, fileList) {
this.$message({
message: '最多只能上传一个文件',
type: 'error'
})
console.log('files, fileList', files, fileList)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.main-wrapper {
width: 100%;
min-height: calc(100vh - 84px);
padding: 12px;
border-top: 1px solid #ddd;
label {
font-weight: normal;
}
}
</style>
标签：console,log,form,res,element,导入,ui,file,message From： https://www.cnblogs.com/Byme/p/16881361.html