<template>
|
<div class="app-container">
|
<div class="hand">
|
<PageTitle title="企业管理"></PageTitle>
|
<div class='searchBar'>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<span style='white-space: nowrap'>公司名称:</span>
|
<el-input v-model="searchParams.companyName"></el-input>
|
</el-col>
|
<el-col :span="6">
|
<span style='white-space: nowrap'>证书编号:</span>
|
<el-input v-model="searchParams.certificateNum"></el-input>
|
</el-col>
|
<el-col :span="6">
|
<span style='white-space: nowrap'>工艺类型:</span>
|
<el-select clearable v-model="searchParams.technologyType" style="width: 100%" @change='getAllCompany()'>
|
<el-option v-for='(item,index) in techTypeList' :label="item.technologyName" :value="item.id" :key='index'></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="6">
|
<span style='white-space: nowrap'>许可证状态:</span>
|
<el-select clearable v-model="searchParams.validityState" style="width: 100%" @change='getAllCompany()'>
|
<el-option label="正常在期(非临期)" :value="4"></el-option>
|
<el-option label="30天内到期" :value="1"></el-option>
|
<el-option label="31~60天内到期" :value="2"></el-option>
|
<el-option label="61~90天内到期" :value="3"></el-option>
|
<el-option label="已到期" :value="0"></el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row style='margin-top: 20px'>
|
<el-col style='display: flex;align-items: center;justify-content: end'>
|
<el-button v-stop-re-click type="primary" size="medium" icon="el-icon-search" @click="getAllCompany()">查询</el-button>
|
<el-button v-stop-re-click type="primary" size="medium" icon="el-icon-search" @click="resetSearch()" style="margin: 0 0 0 10px">重置</el-button>
|
<el-button v-stop-re-click type="primary" size="medium" icon="el-icon-plus" @click="addCompany" style="margin: 0 10px">新增</el-button>
|
<el-button v-stop-re-click icon="el-icon-upload" size="medium" type="primary" style='margin-left: 0' @click="uploadDialog = true">导入</el-button>
|
<el-button v-stop-re-click v-if='pageStatus==1' icon="el-icon-download" size="medium" type="primary" @click="handleDownload" style='margin-left: 10px'>导出</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class='wholeProvince'>
|
全疆共计危险化学品生产与经营企业<span style='color: red'>{{provinceInfo.enterpriseNum}}</span>家,含重大危险源<span style='color: blue'>{{provinceInfo.majorHazardSourceNum}}</span>个,预计:许可证30天内到期企业共<span class='underline redColor' @click='getSearchData(1)'>{{provinceInfo.oneMonthEnterpriseNum}}</span>家,31~60天内到期企业<span class='underline yellowColor' @click='getSearchData(2)'>{{provinceInfo.twoMonthEnterpriseNum}}</span>家,61~90天内到期企业<span class='underline blueColor' @click='getSearchData(3)'>{{provinceInfo.threeMonthEnterpriseNum}}</span>家。
|
</div>
|
<div v-if='pageStatus == 1'>
|
<el-row class='filter-bar'>
|
<el-col :span='4'>
|
<el-select clearable v-model="search.city" style="width: 100%" @change="changeCity">
|
<el-option v-for='(item,index) in areaInfo' :label="item.label" :value="item.label" :key='index'></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span='20' class='city-info'>
|
许可证到期提醒:本市许可证30天内到期企业<span class='underline redColor' @click='filterData(1)'>{{oneMonthCity}}</span>家,60天内到期企业<span class='underline yellowColor' @click='filterData(2)'>{{twoMonthCity}}</span>家,90天内到期企业<span class='underline blueColor' @click='filterData(3)'>{{threeMonthCity}}</span>家。
|
</el-col>
|
</el-row>
|
<el-table class="areaSheet" :data="tableRowData" :span-method="objectSpanMethod" :cell-class-name="tableRowClassName" @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" border :header-cell-style="{ background: '#f4f4f4' }" style="width: 100%; margin-top: 20px">
|
<el-table-column prop="area" label="区县" align='center'></el-table-column>
|
<el-table-column prop="enterpriseNum" label="企业总数" align='center'></el-table-column>
|
<el-table-column prop="companyName" label="企业名称" align='center'>
|
<template slot-scope="scope">
|
<span style='color: #11abff;text-decoration: underline;cursor: pointer' @click='viewDetails(scope.row)'>{{ scope.row.companyName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="validityState" label="许可证状态" align='center'>
|
<template slot-scope="scope">
|
{{scope.row.validityState == 0 ? '已到期':(scope.row.validityState == 1 ? '30天内到期' :(scope.row.validityState == 2 ? '31~60天内到期' : (scope.row.validityState == 3 ? '61~90天内到期' : '正常在期(非临期)')))}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="certificateNum" label="证书编号" align='center'></el-table-column>
|
<el-table-column prop="technologyType" label="工艺类型" :formatter='toNames' align='center'></el-table-column>
|
<el-table-column prop="majorHazardSourceLevel" label="重大危险源等级" align='center'>
|
<template slot-scope="scope">
|
{{scope.row.majorHazardSourceLevel==0 ? '无重大危险源' : scope.row.majorHazardSourceLevel}}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" align='center'>
|
<template slot-scope="scope">
|
<el-button v-stop-re-click type="primary" icon="el-icon-edit" size="medium" circle @click='editCompany(scope.row)'></el-button>
|
<el-button v-stop-re-click type="danger" icon="el-icon-delete" size="medium" circle @click='deleteCompany(scope.row.id)'></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div v-else>
|
<div v-for='(item,index) in allData' :key='index' style='margin-bottom: 20px'>
|
<div style='font-size: 16px;font-weight: bolder'>
|
{{item.city}}
|
</div>
|
<el-table class="areaSheet" :data="item.enterprisesList" :span-method="objectSpanMethod" :cell-class-name="tableRowClassName" @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" border :header-cell-style="{ background: '#f4f4f4' }" style="width: 100%; margin-top: 10px">
|
<el-table-column prop="area" label="区县" align='center'></el-table-column>
|
<el-table-column prop="enterpriseNum" label="企业总数" align='center'></el-table-column>
|
<el-table-column prop="companyName" label="企业名称" align='center'>
|
<template slot-scope="scope">
|
<span style='color: #11abff;text-decoration: underline;cursor: pointer' @click='viewDetails(scope.row)'>{{ scope.row.companyName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="validityState" label="许可证状态" align='center'>
|
<template slot-scope="scope">
|
{{scope.row.validityState == 0 ? '已到期':(scope.row.validityState == 1 ? '30天内到期' :(scope.row.validityState == 2 ? '31~60天内到期' : (scope.row.validityState == 3 ? '61~90天内到期' : '正常在期(非临期)')))}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="certificateNum" label="证书编号" align='center'></el-table-column>
|
<el-table-column prop="technologyType" label="工艺类型" :formatter='toNames' align='center'></el-table-column>
|
<el-table-column prop="majorHazardSourceLevel" label="重大危险源等级" align='center'>
|
<template slot-scope="scope">
|
{{scope.row.majorHazardSourceLevel==0 ? '无重大危险源' : scope.row.majorHazardSourceLevel}}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" align='center'>
|
<template slot-scope="scope">
|
<el-button type="primary" icon="el-icon-edit" size="medium" circle @click='editCompany(scope.row)'></el-button>
|
<el-button type="danger" icon="el-icon-delete" size="medium" circle @click='deleteCompany(scope.row.id)'></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<company-dialog :typeList='techTypeList' ref="company"></company-dialog>
|
<company-detail-dialog :typeList='techTypeList' ref="detail"></company-detail-dialog>
|
<el-dialog title="数据导入" :visible.sync="uploadDialog" width="40%" center>
|
<el-form
|
ref="importForm"
|
label-position="right"
|
label-width="120px"
|
style="margin-left:50px;width:500px;"
|
element-loading-text="导入中..."
|
>
|
<el-form-item label="导入文件:">
|
<input ref="importLabInput" type="file" accept=".xls, .xlsx">
|
</el-form-item>
|
<el-form-item label="excel参考模板:">
|
<el-button v-stop-re-click type="text" @click="downLoadTemplate">下载模板</el-button>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="uploadDialog = false">取消</el-button>
|
<el-button v-stop-re-click :disabled="importDisabled" type="primary" @click="importHandle()">导入</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import PageTitle from '@/components/PageTitle/index.vue'
|
import FileSaver from 'file-saver'
|
import XLSX from 'xlsx'
|
import {
|
searchCompanyList,
|
getOneCompany,
|
getAllCompany,
|
deleteById,
|
importCompanyData,
|
getAreaInfo,
|
getProvinceInfo,
|
getTechType,
|
downLoadTemplate
|
} from '@/api/company';
|
import companyDialog from './component/companyDialog'
|
import companyDetailDialog from './component/companyDetailDialog'
|
|
export default {
|
components: {
|
PageTitle,
|
companyDialog,
|
companyDetailDialog
|
},
|
data() {
|
return {
|
pageStatus: 1,
|
searchParams: {
|
companyName: null,
|
certificateNum: null,
|
technologyType: null,
|
validityState: null
|
},
|
search: {
|
city: '乌鲁木齐市',
|
validityState: null
|
},
|
oneMonthCity: null,
|
twoMonthCity: null,
|
threeMonthCity: null,
|
areaInfo: [],
|
provinceInfo: {},
|
techTypeList: [],
|
alPosition: 'left',
|
dataList: [],
|
loading: false,
|
uploadDialog: false,
|
importDisabled: false,
|
allData: [],
|
tableRowData: [],
|
rowIndex: '-1',
|
OrderIndexArr: [],
|
hoverOrderArr: []
|
}
|
|
},
|
mounted() {
|
const t = this
|
t.getAreaInfo()
|
t.getProInfo()
|
t.getData()
|
t.getTechType()
|
},
|
watch: {},
|
methods: {
|
getAreaInfo() {
|
getAreaInfo().then(res => {
|
if(res.code == 200){
|
this.areaInfo = res.data;
|
}else{
|
this.$message(res.msg || '查询失败!请重试', 'error', 3 * 1000)
|
}
|
})
|
},
|
changeCity(val){
|
this.search.city = val
|
this.search.validityState = null
|
this.getData()
|
},
|
getProInfo() {
|
getProvinceInfo().then(res => {
|
if(res.code == 200){
|
this.provinceInfo = res.data
|
}else{
|
this.$message(res.msg || '查询失败!请重试', 'error', 3 * 1000)
|
}
|
})
|
},
|
getAllCompany() {
|
const t = this
|
t.allData = []
|
t.pageStatus = 2
|
getAllCompany(t.searchParams).then(res => {
|
if(res.code == 200){
|
t.allData = res.data;
|
if(Array.isArray(t.allData)){
|
for(let item of t.allData){
|
item['enterprisesList'] = []
|
if(Array.isArray(item.companyInfoResults)){
|
item.companyInfoResults.map(i=>{
|
if(Array.isArray(i.enterprises)){
|
i.enterprises.map((subRes, subIndex)=>{
|
let content = {}
|
content = subRes
|
content['area'] = i.area
|
content['enterpriseNum'] = i.enterpriseNum
|
// 重点!赋值合并的行数数值,只需要取子循环的第一个数赋值待合并的行数即可
|
if(subIndex == 0){
|
content['rowNum'] = i.enterprises.length
|
}
|
item.enterprisesList.push(content)
|
})
|
}
|
})
|
}else{
|
t.allData = []
|
}
|
}
|
}
|
}else{
|
t.$message(res.msg || '查询失败!请重试', 'error', 3 * 1000)
|
}
|
|
})
|
},
|
getSearchData(type){
|
const t = this
|
t.searchParams = {
|
companyName: null,
|
certificateNum: null,
|
technologyType: null,
|
validityState: type
|
}
|
t.getAllCompany()
|
},
|
resetSearch(){
|
const t = this
|
t.pageStatus = 1
|
t.searchParams = {
|
companyName: null,
|
certificateNum: null,
|
technologyType: null,
|
validityState: null
|
}
|
t.search = {
|
city: '乌鲁木齐市',
|
validityState: null
|
},
|
t.getData()
|
},
|
async getTechType() {
|
await getTechType().then(res => {
|
if(res.code == 200){
|
this.techTypeList = res.data;
|
}else{
|
this.$message(res.msg || '查询失败!请重试', 'error', 3 * 1000)
|
}
|
|
})
|
},
|
|
getData() {
|
const t = this
|
t.tableRowData = []
|
t.loading = true;
|
getOneCompany(t.search).then(res => {
|
t.loading = false;
|
const tableData = res.data.companyInfoResults || []
|
t.oneMonthCity = res.data.oneMonthEnterpriseNum || 0
|
t.twoMonthCity = res.data.twoMonthEnterpriseNum || 0
|
t.threeMonthCity = res.data.threeMonthEnterpriseNum || 0
|
if(Array.isArray(tableData)){
|
tableData.map(item=>{
|
if(Array.isArray(item.enterprises)){
|
item.enterprises.map((subRes, subIndex)=>{
|
let content = {}
|
content = subRes
|
content['area'] = item.area
|
content['enterpriseNum'] = item.enterpriseNum
|
// 重点!赋值合并的行数数值,只需要取子循环的第一个数赋值待合并的行数即可
|
if(subIndex == 0){
|
content['rowNum'] = item.enterprises.length
|
}
|
t.tableRowData.push(content)
|
})
|
}
|
})
|
}
|
})
|
},
|
|
viewDetails(row){
|
const t = this
|
t.$refs.detail.companyInfo = {}
|
t.$refs.detail.getEnterpriseInfo(row.id)
|
t.$refs.detail.dialogVisible = true
|
},
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
// columnIndex 代表列数,从0开始计数,我们要合并的字段属于第一列,取0
|
if(columnIndex == 0 || columnIndex == 1){
|
return {
|
rowspan: row.rowNum, // 待合并行数 -- 合并的行数长度就等于之前赋值的子数据的长度;未赋值的即表示0,不显示
|
colspan: row.rowNum>0?1:0 // 待合并列数 -- 合并的列数自身占一列,被合并的要返回0,表示不显示
|
};
|
}
|
},
|
load() {
|
this.searchParams.pageNum++
|
var _this = this
|
this.loading = true;
|
searchCompanyList(this.searchParams).then(res => {
|
this.loading = false;
|
if (res.code == 200) {
|
if (res.data.list.length > 0) {
|
for (let i = 0; i < res.data.list.length; i++) {
|
_this.dataList.push(res.data.list[i])
|
_this.dataList.forEach(n => {
|
if (n.companyImage) {
|
n.companyImageUrl = process.env.VUE_APP_BASE_API + n.companyImage
|
}
|
})
|
}
|
}
|
}else {
|
this.$message(res.msg || '查询失败!请重试', 'errot', 3 * 1000)
|
}
|
|
})
|
},
|
|
toNames(row, column, cellValue, index){
|
// this.getTechType()
|
const obj = this.techTypeList.find((item) => item.id == row.technologyType)
|
if(obj&&obj.technologyName){
|
return obj.technologyName
|
}
|
},
|
addCompany() {
|
const t = this
|
// t.$refs.company.companyInfo = {}
|
// t.$refs.company.companyInfo.levelOneMajorHazardSourceSum = 0
|
// t.$refs.company.companyInfo.levelTwoMajorHazardSourceSum = 0
|
// t.$refs.company.companyInfo.levelThreeMajorHazardSourceSum = 0
|
// t.$refs.company.companyInfo.levelFourMajorHazardSourceSum = 0
|
t.$refs.company.title = '企业信息新增'
|
t.$refs.company.getTechType()
|
t.$refs.company.centerDialogVisible = true
|
},
|
editCompany(row) {
|
const t = this
|
t.$refs.company.title = '企业信息修改'
|
t.$refs.company.companyInfo = {}
|
t.$refs.company.getTechType()
|
t.$refs.company.getEnterpriseInfo(row.id)
|
t.$refs.company.companyImageList = []
|
t.$refs.company.businessLicenseList = []
|
t.$refs.company.securityCertificateList = []
|
t.$refs.company.centerDialogVisible = true
|
t.$refs.company.$forceUpdate()
|
},
|
|
deleteCompany(id) {
|
const t = this
|
t.$confirm('此操作将删除该企业信息, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteById({ id: id }).then((res)=>{
|
if(res.code == 200){
|
t.$message(res.msg || '删除成功!')
|
t.getProInfo()
|
if(t.pageStatus==1){
|
t.getData()
|
}else{
|
t.getAllCompany()
|
}
|
}else{
|
t.$message(res.msg || '删除失败,请重试', 'error', 3 * 1000)
|
}
|
})
|
}).catch(() => {
|
t.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
handleDownload() { //导出
|
let sheetName = this.search.city + '企业统计表'
|
let wb = XLSX.utils.table_to_book(document.querySelector('.areaSheet'))
|
let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
|
try {
|
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), sheetName + '.xlsx')
|
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
|
},
|
|
tableRowClassName({row,rowIndex}) {
|
let arr = this.hoverOrderArr
|
for (let i = 0; i < arr.length; i++) {
|
if (rowIndex == arr[i]) {
|
return 'hovered-row'
|
}
|
}
|
},
|
cellMouseEnter(row, column, cell, event) {
|
this.rowIndex = row.rowIndex;
|
this.hoverOrderArr = [];
|
this.OrderIndexArr.forEach(element => {
|
if (element.indexOf(this.rowIndex) >= 0) {
|
this.hoverOrderArr = element
|
}
|
})
|
},
|
cellMouseLeave(row, column, cell, event) {
|
this.rowIndex = '-1'
|
this.hoverOrderArr = [];
|
},
|
|
handleChangeArea(row) {
|
this.searchParams.companyCity = row[1];
|
},
|
downLoadTemplate() {
|
downLoadTemplate().then(res => {
|
var blob = new Blob([res])
|
var downloadElement = document.createElement('a')
|
var href = window.URL.createObjectURL(blob) //创建下载的链接
|
downloadElement.href = href
|
downloadElement.download = '导入模板.xlsx' //下载后文件名
|
document.body.appendChild(downloadElement)
|
downloadElement.click() //点击下载
|
document.body.removeChild(downloadElement) //下载完成移除元素
|
window.URL.revokeObjectURL(href) //释放掉blob对象
|
}).catch(err => {
|
this.$message("模板下载失败!请联系管理员", 'error', 3 * 1000)
|
})
|
},
|
importHandle() {
|
const t = this
|
const formData = new FormData()
|
const files = t.$refs['importLabInput'].files
|
if (files && files.length > 0) {
|
formData.append('file', files[0])
|
} else {
|
t.$message("请选择需要导入的文件", 'error', 3 * 1000)
|
return;
|
}
|
importCompanyData(formData).then((res) => {
|
t.$refs['importLabInput'].value = "";
|
if (res.code == 200) {
|
t.$message(res.msg, 'success', 3 * 1000)
|
//调用表格方法,刷新页面
|
t.getProInfo()
|
if(t.pageStatus==1){
|
t.getData()
|
}else{
|
t.getAllCompany()
|
}
|
t.uploadDialog = false;
|
} else {
|
t.$message(res.msg, 'error', 3 * 1000)
|
}
|
|
})
|
}
|
}
|
}
|
</script>
|
<style lang='scss' scoped>
|
.hand {
|
width: 100%;
|
background-color: #fff;
|
margin-bottom: 20px;
|
|
.searchBar{
|
padding: 10px 20px;
|
.el-col{
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
.wholeProvince{
|
width: 100%;
|
padding: 20px;
|
background: #fff3b5;
|
border-radius: 4px;
|
font-size: 16px;
|
margin-bottom: 20px;
|
|
span{
|
font-size: 20px;
|
margin: 0 10px;
|
}
|
}
|
|
.filter-bar{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.city-info{
|
display: flex;
|
align-items: center;
|
justify-content: end;
|
font-size: 16px;
|
|
span{
|
font-size: 20px;
|
margin: 0 10px;
|
}
|
}
|
}
|
.underline{
|
text-decoration: underline;
|
cursor: pointer;
|
}
|
|
.redColor{
|
color: #ef1515
|
}
|
.yellowColor{
|
color: #ff8d00;
|
}
|
.blueColor{
|
color: #2af;
|
}
|
.el-select{
|
width: 100% !important;
|
}
|
::v-deep .el-dialog__header {
|
text-align: left;
|
padding: 20px 31px 10px;
|
}
|
|
.el-date-editor{
|
width: 100%;
|
}
|
|
::v-deep .el-dialog__title:before {
|
content: '';
|
position: absolute;
|
left: 20px;
|
top: 22px;
|
width: 4px;
|
height: 18px;
|
background-color: #108EE9;
|
}
|
|
::v-deep .el-textarea__inner {
|
height: 110px;
|
}
|
</style>
|
<style>
|
.el-table .hovered-row {
|
background: #f5f7fa;
|
}
|
</style>
|