<template>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
width="60%"
|
center
|
>
|
<div class="company-info">
|
<div>企业基本信息</div>
|
<div><span>企业名称：</span><span>XXXXXXXXXX有限公司</span></div>
|
<div><span>许可证：</span><span>在有效期（有效期至：XXXXX）</span></div>
|
<div><span>库存：</span><span>100(万箱)</span></div>
|
<div><span>库容：</span>
|
<span>
|
<el-input placeholder="请输入库容量" v-model="checkForm.store"></el-input>
|
</span>
|
</div>
|
</div>
|
<el-divider/>
|
<div class="form-info">
|
<div>自查自改填报</div>
|
<div>
|
<span>自查是否有隐患：</span>
|
<el-radio-group v-model="checkForm.isRisky">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="2">否</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="risk-list" v-if="checkForm.isRisky==1">
|
<table class="risk-table">
|
<th><span>序号</span><span>检查出的隐患问题</span><span>检查时间</span><span>最后整改期限</span><span>隐患等级</span><span>操作</span></th>
|
<tr v-for="(item,index) in checkForm.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="date"><el-date-picker v-model="item.time" type="datetime" placeholder="选择检查时间"></el-date-picker></td>
|
<td class="deadline"><el-date-picker v-model="item.deadline" type="datetime" placeholder="选择整改期限"></el-date-picker></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="deleteItem(index)">删除</el-button>
|
</td>
|
</tr>
|
</table>
|
<div class="addBtn">
|
<el-button type="primary" plain icon="el-icon-plus" @click="addItem()">新增隐患问题</el-button>
|
</div>
|
|
</div>
|
<div style="display: flex;align-items: center;margin-top: 20px">
|
<span>填报人：</span>
|
<span style="margin-right: 40px">
|
<el-input v-model="checkForm.reporter"></el-input>
|
</span>
|
<span>电话号码：</span>
|
<span>
|
<el-input v-model="checkForm.reportPhone"></el-input>
|
</span>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="confirmSend()">提交</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {computePageCount} from "@/utils";
|
|
export default {
|
name: "selfReport",
|
data(){
|
return{
|
dialogVisible:false,
|
checkForm:{
|
store: '',
|
isRisky: 2,
|
riskList: [
|
{
|
info: '',
|
time: '',
|
deadline: '',
|
level: ''
|
}
|
],
|
reporter: '',
|
reportPhone: ''
|
},
|
}
|
},
|
watch: {
|
},
|
methods:{
|
addItem(){
|
const newItem = {
|
info: '',
|
time: '',
|
level: ''
|
}
|
this.checkForm.riskList.push(newItem)
|
},
|
deleteItem(i){
|
console.log(i)
|
this.checkForm.riskList.splice(i,1)
|
},
|
confirmSend(){
|
this.dialogVisible = false
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.input-with-select .el-select {
|
width: 120px;
|
}
|
|
.el-date-editor.el-input{
|
width: 100%;
|
}
|
|
.el-divider__text{
|
background-color: #fafafa;
|
color: #034EA2;
|
}
|
|
.company-info{
|
margin-bottom: 20px;
|
&>div{
|
width: 100%;
|
margin-bottom: 10px;
|
padding-left: 15px;
|
span{
|
display: inline-block;
|
&:first-of-type{
|
width: 15%;
|
}
|
}
|
}
|
&>div:first-of-type{
|
font-size: 18px;
|
font-weight: bolder;
|
padding-left: 0;
|
}
|
}
|
.form-info{
|
display: flex;
|
align-items: center;
|
&>div{
|
margin-bottom: 10px;
|
margin-right: 40px;
|
display: flex;
|
align-items: center;
|
}
|
&>div:first-of-type{
|
font-size: 18px;
|
font-weight: bolder;
|
padding-left: 0;
|
}
|
}
|
.risk-list{
|
.risk-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: 5%;
|
border-left: none
|
}
|
&:nth-of-type(2){
|
width: 25%;
|
}
|
&:nth-of-type(3){
|
width: 20%;
|
}
|
&:nth-of-type(4){
|
width: 20%;
|
}
|
&:nth-of-type(5){
|
width: 20%;
|
}
|
&:nth-of-type(6){
|
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: 5%
|
}
|
.info{
|
width: 25%;
|
|
::v-deep.el-textarea{
|
.el-textarea__inner{
|
min-height: 40px !important;
|
}
|
}
|
}
|
.date{
|
width: 20%;
|
}
|
.deadline{
|
width: 20%;
|
}
|
.level{
|
width: 20%;
|
|
.el-radio{
|
margin-right: 15px;
|
}
|
}
|
.edit{
|
width: 10%;
|
}
|
}
|
}
|
}
|
.addBtn{
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
