<template>
|
<div style="padding: 10px">
|
<div class="header">
|
<div>危险因素辨识与风险评价结果一览</div>
|
<div style="min-width: 200px">
|
<el-button type="primary" size="small" @click="addFun">新 增</el-button>
|
<el-button type="primary" size="small" @click="approvalFun">审 批</el-button>
|
<el-button type="primary" size="small" @click="approveFun">批 准</el-button>
|
<el-upload
|
style="display: inline-block; padding: 0 6px"
|
:headers="headers"
|
:action="action"
|
:on-error="onError"
|
:show-file-list="false"
|
:on-success="onSuccess">
|
<el-button size="small" type="primary">导 入</el-button>
|
</el-upload>
|
<el-button size="small" @click="openDownloadDia">导出</el-button>
|
</div>
|
</div>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
height="calc(100vh - 18em)">
|
<el-table-column type="index" label="序号" width="120">
|
<template v-slot="scope">
|
<span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="venue" label="地点/活动" min-width="180"></el-table-column>
|
<el-table-column prop="hazard" label="危险因素" width="testDate" min-width="180"></el-table-column>
|
<el-table-column prop="accidents" label="可能导致的事故" min-width="180"></el-table-column>
|
<el-table-column prop="injury" label="对人可能造成的危害" min-width="180"></el-table-column>
|
<el-table-column label="风险评价" align="center" min-width="180">
|
<template>
|
<el-table-column prop="riskL" label="L" min-width="80"></el-table-column>
|
<el-table-column prop="riskE" label="E" min-width="80"></el-table-column>
|
<el-table-column prop="riskC" label="C" min-width="80"></el-table-column>
|
<el-table-column prop="riskD" label="D" min-width="80"></el-table-column>
|
</template>
|
</el-table-column>
|
<el-table-column prop="level" label="风险等级" min-width="180"></el-table-column>
|
<el-table-column prop="measures" label="控制措施" min-width="180"></el-table-column>
|
<el-table-column prop="editorName" label="编制人姓名" min-width="180"></el-table-column>
|
<el-table-column prop="editorDate" label="编制日期" min-width="180"></el-table-column>
|
<el-table-column prop="approvalName" label="审批人姓名" min-width="180"></el-table-column>
|
<el-table-column prop="approvalDate" label="审批日期" min-width="180"></el-table-column>
|
<el-table-column prop="approvalStatus" label="审批状态" min-width="180">
|
<template #default="{ row }">
|
{{ row.approvalStatus === 1 ? '通过' : row.approvalStatus === 2 ? '不通过' : '' }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="approveName" label="批准人姓名" min-width="180"></el-table-column>
|
<el-table-column prop="approveStatus" label="批准状态" min-width="180">
|
<template #default="{ row }">
|
{{ row.approveStatus === 1 ? '通过' : row.approveStatus === 2 ? '不通过' : '' }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="approveDate" label="批准日期" min-width="180"></el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="100">
|
<template v-slot="scope">
|
<el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
|
<el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
|
:total="search.total" layout="->,total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange">
|
</el-pagination>
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible"
|
width="50%">
|
<el-form ref="form" :model="form" label-width="120px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="地点/活动">
|
<el-input v-model="form.venue" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="危险因素">
|
<el-input v-model="form.hazard" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="可能导致的事故">
|
<el-input v-model="form.accidents" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="对人可能造成的危害" label-width="140px">
|
<el-input v-model="form.injury" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="风险评价/L">
|
<el-input v-model="form.riskL" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="风险评价/E">
|
<el-input v-model="form.riskE" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="风险评价/C">
|
<el-input v-model="form.riskC" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="风险评价/D">
|
<el-input v-model="form.riskD" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="风险等级">
|
<el-input v-model="form.level" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="控制措施">
|
<el-input v-model="form.measures" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="addApi" :loading="loading">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
dialogVisible: false,
|
form: {},
|
search: {
|
size: 20,
|
current: 1,
|
total: 0
|
},
|
tableData: [],
|
loading: false
|
}
|
},
|
computed: {
|
headers() {
|
return {
|
'token': sessionStorage.getItem('token')
|
}
|
},
|
action() {
|
return this.javaApi + this.$api.measuresAddressRisksOpportunities.riskAssessmentImport
|
}
|
},
|
methods: {
|
handleSizeChange(val) {
|
this.search.size = val;
|
this.initData();
|
},
|
handleCurrentChange(val) {
|
this.search.current = val;
|
this.initData();
|
},
|
// 分页表格初始化
|
initData() {
|
this.tableData = []
|
this.$axios.get(this.$api.measuresAddressRisksOpportunities.getPageResults + '?size=' + this.search.size + '¤t=' + this.search.current).then(res => {
|
if (res.code === 201) return;
|
this.tableData = res.data.records;
|
this.search.total = res.data.total;
|
});
|
},
|
// 审批
|
approvalFun() {
|
let user = JSON.parse(localStorage.getItem('user'))
|
this.$confirm('是否审批通过?', '提示', {
|
confirmButtonText: '通过',
|
cancelButtonText: '不通过',
|
type: 'warning',
|
closeOnClickModal: false, // 禁止点击遮罩层关闭
|
distinguishCancelAndClose: true,
|
beforeClose: (action, instance, done) => {
|
if (action === 'confirm') {
|
this.approvalApi(user.userId, 1)
|
done();
|
} else if (action === 'cancel') {
|
this.approvalApi(user.userId, 2)
|
done();
|
} else if (action === 'close') {
|
// 点击“×”按钮，不允许关闭
|
done();
|
}
|
}
|
})
|
},
|
// 审批接口
|
approvalApi(userId, status) {
|
this.$axios.get(this.$api.measuresAddressRisksOpportunities.dangerousRiskApproval + '?approval=' + userId + '&status=' + status).then(res => {
|
if (res.code === 201) return;
|
this.initData()
|
this.$message({
|
type: 'success',
|
message: '操作成功!'
|
});
|
});
|
},
|
// 批准
|
approveFun() {
|
let user = JSON.parse(localStorage.getItem('user'))
|
this.$confirm('是否批准通过?', '提示', {
|
confirmButtonText: '通过',
|
cancelButtonText: '不通过',
|
type: 'warning',
|
closeOnClickModal: false, // 禁止点击遮罩层关闭
|
distinguishCancelAndClose: true,
|
beforeClose: (action, instance, done) => {
|
if (action === 'confirm') {
|
this.approveApi(user.userId, 1)
|
done();
|
} else if (action === 'cancel') {
|
this.approveApi(user.userId, 2)
|
done();
|
} else if (action === 'close') {
|
// 点击“×”按钮，不允许关闭
|
done();
|
}
|
}
|
})
|
},
|
// 批准接口
|
approveApi(userId, status) {
|
this.$axios.get(this.$api.measuresAddressRisksOpportunities.hazardIdentificationAndRiskApproval + '?approve=' + userId + '&status=' + status).then(res => {
|
if (res.code === 201) return;
|
this.initData()
|
this.$message({
|
type: 'success',
|
message: '操作成功!'
|
});
|
});
|
},
|
// 文件上传失败
|
onError() {
|
this.$message({
|
type: 'error',
|
message: '操作失败!'
|
});
|
},
|
// 文件上传成功
|
onSuccess(response) {
|
if (response.code == 201) {
|
this.$message({
|
type: 'error',
|
message: response.message,
|
});
|
return
|
}
|
this.initData()
|
this.$message({
|
type: 'success',
|
message: '操作成功!'
|
});
|
},
|
addFun() {
|
this.form = {}
|
this.dialogVisible = true
|
},
|
// 删除
|
deleteClick(row) {
|
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$axios.get(this.$api.measuresAddressRisksOpportunities.removeRiskFactors + "?id=" + row.id).then(res => {
|
if (res.code === 201) return;
|
this.initData()
|
this.$message({
|
type: 'success',
|
message: '操作成功!'
|
});
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
addApi() {
|
this.loading = true
|
this.$axios.post(this.$api.measuresAddressRisksOpportunities.addNewRiskFactors, this.form, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if (res.code === 201) return;
|
this.dialogVisible = false
|
this.loading = false
|
this.initData()
|
this.$message({
|
type: 'success',
|
message: '操作成功!'
|
});
|
}).catch(err => {
|
this.loading = false
|
});
|
},
|
// 编辑
|
editClick(row) {
|
this.form = {...row}
|
this.dialogVisible = true
|
},
|
// 导出
|
openDownloadDia () {
|
this.$axios.get( this.$api.measuresAddressRisksOpportunities.exportHazardFactorIdentification,{responseType: "blob"}).then(res => {
|
this.outLoading = false
|
this.$message.success('导出成功')
|
const blob = new Blob([res],{ type: 'application/msword' });
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '危险因素辨识与风险评价结果一览' + '.docx';
|
link.click();
|
})
|
},
|
},
|
mounted() {
|
this.initData()
|
},
|
}
|
</script>
|
|
<style scoped>
|
.header {
|
height: 3em;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
</style>
|
