<template>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
width="75%"
|
center
|
>
|
<div slot="title" class="dialog-title">
|
<span></span>
|
<div class="">烟花爆竹批发企业检查情况反馈表</div>
|
<span>
|
<el-button type="primary">查看企业自查表</el-button>
|
</span>
|
</div>
|
<div class="feed-report">
|
<div class="feed-tit">
|
<div>企业名称: <span class="m-color">沙湾市国华商贸有限公司</span></div>
|
<div>所属省市县: <span class="m-color">新疆维吾尔自治区塔城地区沙湾县</span></div>
|
<div>检查层级: <span class="m-color">省级</span></div>
|
<div>检查单位: <span class="m-color">新疆维吾尔自治区应急管理厅</span></div>
|
</div>
|
<el-row :gutter="40" type="flex" align="middle" style="margin: 20px 0">
|
<el-col :span="8" style="display: flex;align-items: center">
|
<span style="white-space: nowrap">检查时间：</span>
|
<el-date-picker
|
v-model="feedbackForm.checkTime"
|
type="datetime"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-col>
|
<el-col :span="12" style="display: flex;align-items: center">
|
<span style="white-space: nowrap">是否检查出隐患：</span>
|
<el-radio-group v-model="feedbackForm.isRisky">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-col>
|
</el-row>
|
<div class="report-list" v-show="feedbackForm.isRisky == 1">
|
<table class="report-table">
|
<th class="m-color b-font" style="background: #337ecc;color: #fff">检查情况</th>
|
<tr><td class="m-color">序号</td><td class="m-color">检查出的隐患问题</td><td class="m-color">隐患等级</td><td class="m-color">操作</td></tr>
|
<tr v-for="(item,index) in feedbackForm.riskList">
|
<td>{{index + 1}}</td>
|
<td><el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="item.info"></el-input></td>
|
<td>
|
<el-radio-group v-model="item.level">
|
<el-radio :label="1">一般隐患</el-radio>
|
<el-radio :label="2">重大隐患</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-button type="text" @click="deleteItem(index)">删除</el-button>
|
</td>
|
</tr>
|
<tr style="text-align: center"><el-button icon="el-icon-plus" type="primary" plain round @click="addItem()">添加行</el-button></tr>
|
<tr class="m-color b-font" style="text-align: center">合计</tr>
|
<tr>
|
<td class="m-color w-50">隐患总数</td>
|
<td class="m-color w-50">重大隐患数量</td>
|
</tr>
|
<tr>
|
<td class="w-50 mid"><el-input v-model="feedbackForm.totalRisk"></el-input></td>
|
<td class="w-50 mid"><el-input v-model="feedbackForm.majorNum"></el-input></td>
|
</tr>
|
<tr class="m-color b-font" style="text-align: center">执法处罚情况</tr>
|
<tr>
|
<td class="m-color w-25 mid">罚款金额（万元）</td>
|
<td class="w-25 mid"><el-input v-model="feedbackForm.fine"></el-input></td>
|
<td class="m-color w-25 mid">是否责令停产整顿</td>
|
<td class="w-25 mid">
|
<el-radio-group v-model="feedbackForm.isRectify">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
<tr>
|
<td class="m-color w-25 mid">是否吊销许可证</td>
|
<td class="w-25 mid">
|
<el-radio-group v-model="feedbackForm.isRevoke">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</td>
|
<td class="m-color w-25 mid">是否暂扣许可证</td>
|
<td class="w-25 mid">
|
<el-radio-group v-model="feedbackForm.isSuspended">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<div>
|
注：重大隐患判定标准：<el-link href="https://www.mem.gov.cn/gk/zcjd/201802/t20180202233295.shtml" target="_blank" type="primary">https://www.mem.gov.cn/gk/zcjd/201802/t20180202 233295.shtml</el-link>
|
</div>
|
<div style="display: flex;justify-content: center;margin: 20px 0">
|
<el-button @click="confirmBack()">返回列表</el-button>
|
<el-button type="primary">提交</el-button>
|
</div>
|
</div>
|
<div class="feed-data">
|
<div class="m-color data-time">2022年04月07日</div>
|
<el-tabs v-model="activeTab" type="border-card" @tab-click="handleSwitch">
|
<el-tab-pane label="本级" name="1">
|
<div class="record-list">
|
<div class="record-item" v-for="(item,index) in recordList" :key="index">
|
<table class="record-table">
|
<tr>
|
<td class="w-75 m-color b-font dark-bg">烟花爆竹批发企业检查情况反馈表</td>
|
<td class="w-25">
|
<el-button type="primary" icon="el-icon-edit" plain @click="editRecord(index)">编辑</el-button>
|
</td>
|
</tr>
|
<tr>
|
<td class="m-color w-50">被检查企业名称</td>
|
<td class="m-color w-50">所属省市县</td>
|
</tr>
|
<tr>
|
<td class="w-50">沙湾市国华商贸有限公司</td>
|
<td class="w-50">新疆维吾尔自治区乌鲁木齐市米东区</td>
|
</tr>
|
<tr>
|
<td class="m-color w-25">检查层级</td>
|
<td class="m-color w-25">检查单位</td>
|
<td class="m-color w-25">检查时间</td>
|
<td class="m-color w-25">是否检查出隐患问题</td>
|
</tr>
|
<tr>
|
<td class="w-25">省级</td>
|
<td class="w-25">新疆维吾尔自治区应急管理厅</td>
|
<td class="w-25">{{ item.checkTime }}</td>
|
<td class="w-25">{{ item.isRisky }}</td>
|
</tr>
|
<tr v-if="item.isRisky=='1'"><td class="m-color">序号</td><td class="m-color">检查出的隐患问题</td><td class="m-color">隐患等级</td></tr>
|
<tr v-if="item.isRisky=='1'" v-for="(x,i) in item.riskList">
|
<td>{{ i + 1 }}</td>
|
<td class="overText">{{ x.info }}</td>
|
<td>{{ x.level }}</td>
|
</tr>
|
<tr class="m-color b-font" style="text-align: center">合计</tr>
|
<tr>
|
<td class="m-color w-50">隐患总数</td>
|
<td class="m-color w-50">重大隐患数量</td>
|
</tr>
|
<tr>
|
<td class="w-50">{{ item.totalRisk }}</td>
|
<td class="w-50">{{ item.majorNum }}</td>
|
</tr>
|
<tr v-if="item.isRisky=='1'" class="m-color b-font" style="text-align: center">执法处罚情况</tr>
|
<tr v-if="item.isRisky=='1'">
|
<td class="m-color w-25">罚款金额（万元）</td>
|
<td class="w-25">{{ item.fine }}</td>
|
<td class="m-color w-25">是否责令停产整顿</td>
|
<td class="w-25">
|
{{ item.isRectify }}
|
</td>
|
</tr>
|
<tr v-if="item.isRisky=='1'">
|
<td class="m-color w-25">是否吊销许可证</td>
|
<td class="w-25">
|
{{ item.isRevoke }}
|
</td>
|
<td class="m-color w-25">是否暂扣许可证</td>
|
<td class="w-25">
|
{{ item.isSuspended }}
|
</td>
|
</tr>
|
</table>
|
<el-divider/>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="市级" name="2">市级</el-tab-pane>
|
<el-tab-pane label="县级" name="3">县级</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<el-dialog
|
:visible.sync="editDialog"
|
title="反馈表修改"
|
append-to-body
|
:close-on-click-modal="false"
|
width="50%"
|
center
|
>
|
<el-form ref="editFormRef" :model="editForm" label-width="160px" class="edit-form">
|
<el-row gutter="80">
|
<el-col :span="12">
|
<el-form-item label="检查时间：">
|
<el-date-picker
|
v-model="editForm.checkTime"
|
type="datetime"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否检查出隐患问题：">
|
<el-radio-group v-model="editForm.isRisky">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<div class="form-list" v-if="editForm.isRisky==1">
|
<table class="form-table">
|
<th><span>序号</span><span>检查出的隐患问题</span><span>隐患等级</span><span>操作</span></th>
|
<tr v-for="(item,index) in editForm.riskList">
|
<td class="num">{{index + 1}}</td>
|
<td class="info"><el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="item.info"></el-input></td>
|
<td class="level">
|
<el-radio-group v-model="item.level">
|
<el-radio :label="1">一般隐患</el-radio>
|
<el-radio :label="2">重大隐患</el-radio>
|
</el-radio-group>
|
</td>
|
<td class="edit">
|
<el-button type="text" @click="deleteEditItem(index)">删除</el-button>
|
</td>
|
</tr>
|
<tr style="text-align: center"><el-button type="primary" plain icon="el-icon-plus" @click="addEditItem()">添加行</el-button></tr>
|
</table>
|
</div>
|
<el-row gutter="80" v-if="editForm.isRisky==1">
|
<el-col :span="12">
|
<el-form-item label="隐患总数：">
|
<el-input v-model="editForm.totalRisk"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否责令停产整顿：">
|
<el-radio-group v-model="editForm.isRectify">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row gutter="80" v-if="editForm.isRisky==1">
|
<el-col :span="12">
|
<el-form-item label="重大隐患数量：">
|
<el-input v-model="editForm.majorNum"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否吊销许可证：">
|
<el-radio-group v-model="editForm.isRevoke">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row gutter="80" v-if="editForm.isRisky==1">
|
<el-col :span="12">
|
<el-form-item label="罚款金额（万元）：">
|
<el-input v-model="editForm.fine"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否暂扣许可证：">
|
<el-radio-group v-model="editForm.isSuspended">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button>取消</el-button>
|
<el-button type="primary">提交</el-button>
|
</span>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {computePageCount} from "@/utils";
|
|
export default {
|
name: "reportDetails",
|
data(){
|
return{
|
dialogVisible:false,
|
editDialog: false,
|
activeTab: '1',
|
feedbackForm:{
|
checkTime: '',
|
isRisky: '',
|
riskList: [
|
{
|
info: '',
|
level: ''
|
}
|
],
|
totalRisk: '',
|
majorNum: '',
|
fine: '',
|
isRectify: '',
|
isRevoke: '',
|
isSuspended: ''
|
},
|
recordList:[
|
{
|
checkTime: '2022-11-02',
|
isRisky: 1,
|
riskList: [
|
{
|
info: '测试数据一',
|
level: 1
|
},
|
{
|
info: '测试数据二',
|
level: 0
|
}
|
],
|
totalRisk: 1,
|
majorNum: 0,
|
fine: '2500',
|
isRectify: 0,
|
isRevoke: 0,
|
isSuspended: 1
|
},
|
{
|
checkTime: '2022-11-02',
|
isRisky: 0,
|
riskList: [],
|
totalRisk: 0,
|
majorNum: 0,
|
fine: '',
|
isRectify: 0,
|
isRevoke: 0,
|
isSuspended: 0
|
}
|
],
|
editForm:{
|
checkTime: '',
|
isRisky: '',
|
riskList: [],
|
totalRisk: '',
|
majorNum: '',
|
fine: '',
|
isRectify: '',
|
isRevoke: '',
|
isSuspended: ''
|
}
|
}
|
},
|
watch: {
|
},
|
methods:{
|
confirmBack(){
|
this.dialogVisible = false
|
},
|
handleSwitch(tab, event) {
|
console.log(tab, event);
|
},
|
|
addItem(){
|
const newItem = {
|
info: '',
|
level: ''
|
}
|
this.feedbackForm.riskList.push(newItem)
|
},
|
deleteItem(i){
|
console.log(i)
|
this.feedbackForm.riskList.splice(i,1)
|
},
|
editRecord(index){
|
const t = this
|
t.editDialog = true
|
},
|
addEditItem(){
|
const newItem = {
|
info: '',
|
level: ''
|
}
|
this.editForm.riskList.push(newItem)
|
},
|
deleteEditItem(i){
|
console.log(i)
|
this.editForm.riskList.splice(i,1)
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.input-with-select .el-select {
|
width: 100%
|
}
|
|
.el-date-editor.el-input{
|
width: 100%;
|
}
|
|
.dialog-title{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
div{
|
width: 50%;
|
font-size: 22px;
|
font-weight: bolder;
|
}
|
span{
|
width: 25%;
|
}
|
}
|
.feed-tit{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-flow: wrap;
|
background: #ecf5ff;
|
padding: 10px;
|
border-radius: 4px;
|
|
&>div{
|
width: 50%;
|
margin-bottom: 10px;
|
&:nth-of-type(3),&:nth-of-type(4){
|
margin-bottom: 0;
|
}
|
}
|
}
|
.feed-data{
|
position: relative;
|
|
.data-time{
|
position: absolute;
|
height: 40px;
|
line-height: 40px;
|
right: 10px;
|
top: 0;
|
}
|
}
|
|
|
.report-list{
|
.report-table{
|
width: 100%;
|
border-collapse: collapse;
|
border: 1px solid #337ecc;
|
margin: 20px 0;
|
th{
|
padding: 10px 0;
|
border: 1px solid #ccc;
|
border-left: none;
|
|
&:first-of-type{
|
border-left: 1px solid #ccc;
|
}
|
}
|
tr{
|
width: 100%;
|
height: 44px;
|
line-height: 42px;
|
border-bottom: 1px solid #ccc;
|
|
&:last-of-type{
|
border-bottom: none;
|
}
|
td{
|
border-right: 1px solid #ccc;
|
display: inline-block;
|
height: 44px;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 42px;
|
|
&:last-of-type{
|
border-right: none;
|
}
|
::v-deep.el-textarea{
|
.el-textarea__inner{
|
min-height: 40px !important;
|
background-color: #ecf5ff;
|
border: 1px solid #d9ecff;
|
}
|
}
|
|
&:nth-of-type(1){
|
width: 5%;
|
}
|
&:nth-of-type(2){
|
width: 50%
|
}
|
&:nth-of-type(3){
|
width: 35%
|
}
|
&:nth-of-type(4){
|
width: 10%;
|
border-right: none;
|
}
|
&.w-50{
|
width: 50%;
|
}
|
&.w-25{
|
width: 25%;
|
}
|
}
|
}
|
.b-font{
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
::v-deep.mid{
|
.el-input__inner{
|
text-align: center;
|
background-color: #ecf5ff;
|
border: 1px solid #d9ecff;
|
}
|
}
|
}
|
}
|
.record-list{
|
.record-table{
|
width: 100%;
|
border-collapse: collapse;
|
border: 1px solid #79bbff;
|
margin: 0 0 20px;
|
background: #fff;
|
box-shadow: 0 3px 12px rgba(0,0,0,.2);
|
th{
|
padding: 10px 0;
|
border: 1px solid #ccc;
|
border-left: none;
|
|
&:first-of-type{
|
border-left: 1px solid #ccc;
|
}
|
}
|
tr{
|
width: 100%;
|
height: 44px;
|
line-height: 42px;
|
border-bottom: 1px solid #ccc;
|
|
&:last-of-type{
|
border-bottom: none;
|
}
|
td{
|
border-right: 1px solid #ccc;
|
display: inline-block;
|
height: 44px;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 41px;
|
|
&:last-of-type{
|
border-right: none;
|
}
|
|
::v-deep.el-textarea{
|
.el-textarea__inner{
|
min-height: 40px !important;
|
background-color: #ecf5ff;
|
border: 1px solid #d9ecff;
|
}
|
}
|
|
&:nth-of-type(1){
|
width: 5%;
|
}
|
&:nth-of-type(2){
|
width: 60%
|
}
|
&:nth-of-type(3){
|
width: 35%;
|
}
|
&.w-50{
|
width: 50%;
|
}
|
&.w-25{
|
width: 25%;
|
}
|
&.w-75{
|
width: 75%;
|
}
|
&.dark-bg{
|
background: #409EFF;
|
color: #fff;
|
}
|
&.overText{
|
overflow: auto;
|
line-height: 1.5;
|
text-align: left;
|
padding: 10px;
|
}
|
}
|
}
|
.b-font{
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
::v-deep.mid{
|
.el-input__inner{
|
text-align: center;
|
background-color: #ecf5ff;
|
border: 1px solid #d9ecff;
|
}
|
}
|
}
|
.el-divider{
|
background-color: #999;
|
}
|
}
|
.edit-form{
|
.form-list{
|
width: 100%;
|
.form-table{
|
width: 100%;
|
border-collapse: collapse;
|
border: 1px solid #ccc;
|
margin: 10px 0;
|
th{
|
width: 100%;
|
display: flex;
|
border-bottom: 1px solid #ccc;
|
align-items: center;
|
|
span{
|
height: 100%;
|
padding: 10px 0;
|
border-right: 1px solid #ccc;
|
box-sizing: border-box;
|
|
&:nth-of-type(1){
|
width: 10%;
|
border-left: none
|
}
|
&:nth-of-type(2){
|
width: 50%;
|
}
|
&:nth-of-type(3){
|
width: 30%;
|
}
|
&:nth-of-type(4){
|
width: 10%;
|
border-right: none;
|
}
|
}
|
}
|
tr{
|
width: 100%;
|
height: 44px;
|
line-height: 42px;
|
border-bottom: 1px solid #ccc;
|
|
&:last-of-type{
|
border-bottom: none;
|
}
|
|
td{
|
border-right: 1px solid #ccc;
|
display: inline-block;
|
height: 44px;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 42px;
|
&:last-of-type{
|
border-right: none;
|
}
|
}
|
.num{
|
width: 10%
|
}
|
.info{
|
width: 50%;
|
|
::v-deep.el-textarea{
|
.el-textarea__inner{
|
min-height: 40px !important;
|
}
|
}
|
}
|
.level{
|
width: 30%;
|
|
.el-radio{
|
margin-right: 15px;
|
}
|
}
|
.edit{
|
width: 10%;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
