<template>
|
<!-- 安全管理 ==> 风险分级管控 => 区域包保-->
|
<div class="main">
|
<!-- header -->
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">区域名称：</span>
|
<el-select v-model="queryInfo.regionHazardInformId" clearable placeholder="请选择域名称">
|
<el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
|
<el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
|
</div>
|
</div>
|
|
<!-- table -->
|
<div class="main_content">
|
<cpnTable :table-index="true" :table-data="dataList" :table-columns="tableColumns" :page-total="total"
|
:page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize" :page-change="pageChange">
|
</cpnTable>
|
</div>
|
|
<!-- dialog -->
|
<el-dialog class="prop_dialog" v-if="isRender" :title="dialogTitle" :visible.sync="asyncVisible" @close="closeForm">
|
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
|
<el-form-item label="区域名称:" prop="regionHazardInformId">
|
<el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">
|
<el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="包保领导:" prop="leader">
|
<el-select v-model="ruleForm.leader" filterable multiple placeholder="请选择包保领导">
|
<el-option v-for="item in allPersons" :key="item.key" :label="item.label" :value="item.key">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="小组成员:" prop="staff">
|
<el-transfer ref="transfer" v-model="ruleForm.staff" filterable :filter-method="filterMethod"
|
filter-placeholder="请输入员工姓名" :titles="['未选择', '已选择']" :data="allPersons">
|
</el-transfer>
|
</el-form-item>
|
|
<el-form-item label="风险源情况:" prop="riskSourceSituation">
|
<el-input type="textarea" v-model="ruleForm.riskSourceSituation" clearable placeholder="请输入风险源情况">
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="应对措施:" prop="countermeasures">
|
<el-input type="textarea" v-model="ruleForm.countermeasures" clearable placeholder="请输入应对措施">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncVisible = false">取 消</el-button>
|
<el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {throttle} from '@/plugins/public'; // 导入节流、动态切换组件尺寸方法
|
import cpnTable from '@/components/element/Table'
|
export default {
|
data() {
|
return {
|
isRender: false,
|
loading: false,
|
asyncVisible: false,
|
submitMode: '', // add update
|
total: 0,
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 10,
|
regionHazardInformId: '',
|
},
|
areaNames: [], // 区域名称
|
allPersons: [], // 所有人员渲染数据.穿梭框和选择框一起使用.
|
dataList: [], // table渲染数据
|
tableColumns: [], // table配置
|
ruleForm: {}, // 按钮表单
|
rules: {
|
regionHazardInformId: [{required: true, message: '请选择区域名称', trigger: 'change'}],
|
leader: [{required: true, message: '请选择包保领导', trigger: 'change'}],
|
staff: [{required: true, message: '请选择小组成员', trigger: 'blur'}],
|
riskSourceSituation: [{required: true, message: '请输入风险源情况', trigger: 'blur'}],
|
countermeasures: [{required: true, message: '请输入应对措施', trigger: 'blur'}],
|
},
|
$http: '', // api路径赋值
|
}
|
},
|
components: {
|
cpnTable
|
},
|
computed: {
|
isUpdate() {
|
return this.submitMode === 'update'
|
},
|
dialogTitle() {
|
return this.isUpdate ? '修改区域' : '新增区域'
|
},
|
},
|
created() {
|
this.$http = this.$api.Safety.RiskGrad.allocation
|
this.setFormProps()
|
this.setTableColumn()
|
this.getLists()
|
this.getAreaName()
|
},
|
methods: {
|
// 获取table列表数据
|
getLists() {
|
this.loading = true
|
let params = this.queryInfo
|
this.$http.getLists(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.total = res.data.total
|
this.dataList = res.data.list
|
}
|
this.loading = false
|
})
|
},
|
// 获取管服人员数据...showDialog时调用
|
getPerson() {
|
this.getPerson = this.runOnce(() => {
|
return new Promise(resolve => {
|
this.$api.Personnerl.SEARCHMORTGAGEELIST({
|
userType: 1,
|
pageNum: 1,
|
pageSize: 9999
|
}).then((res) => {
|
if (res.success) {
|
const list = res.data.list
|
const out = []
|
list.forEach(item => {
|
out.push({
|
label: item.realName, // 穿梭框规定字段, 可绑定props属性修改默认规定的字段.
|
key: item.userId, // 穿梭框规定使字段
|
})
|
})
|
this.allPersons = out
|
resolve()
|
}
|
})
|
})
|
})
|
return this.getPerson()
|
},
|
// 获取区域信息
|
getAreaName() {
|
this.$api.Safety.RiskGrad.warning.getLists({
|
pageNum: 1,
|
pageSize: 9999
|
}).then((res) => {
|
if (res.success) {
|
const list = res.data.list
|
const out = []
|
list.forEach(item => {
|
out.push({
|
id: item.id,
|
region: item.region,
|
})
|
})
|
this.areaNames = out
|
}
|
})
|
},
|
// 初始化 ruleform
|
setFormProps(options = {}) {
|
let _form = {
|
regionHazardInformId: '', // 区域名称id
|
leader: [], // 包保领导
|
staff: [], // 小组成员
|
riskSourceSituation: '', // 风险源情况
|
countermeasures: '', // 应对措施
|
}
|
this.ruleForm = Object.keys(options).length ? options : _form
|
},
|
// 初始化 table 配置
|
setTableColumn() {
|
this.tableColumns = [
|
{index: true},
|
{
|
name: "区域名称", key: "regionHazardInformId", formatter: (row) => {
|
return row.region
|
}
|
},
|
{
|
name: "包保领导", key: "leaderList", formatter: (row) => {
|
let el = []
|
row.leaderList.forEach(item => {
|
el.push(item.realName)
|
})
|
return el.join('、')
|
}
|
},
|
{
|
name: "小组成员", key: "staffList", formatter: (row) => {
|
let el = []
|
row.staffList.forEach(item => {
|
el.push(item.realName)
|
})
|
return el.join('、')
|
}
|
},
|
{name: "风险源情况", key: "riskSourceSituation", showOverflowTip: true},
|
{name: "应对措施", key: "countermeasures", showOverflowTip: true},
|
{
|
operation: true, name: "操作", width: 140, value: [
|
{name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
|
{name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
|
]
|
},
|
]
|
},
|
runOnce(fn, context) { //控制让函数只触发一次
|
return () => {
|
if (!fn) return
|
try {
|
return fn.apply(context || this, arguments)
|
}
|
finally {
|
fn = null
|
}
|
}
|
},
|
// 穿梭框搜索关键字变化时触发
|
filterMethod(query, item) {
|
return item.label.indexOf(query) > -1
|
},
|
// 重置表单
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
},
|
// 重置穿梭框选中状态
|
resetTransfer(transferName) {
|
this.$refs[transferName].$refs.leftPanel.checked = []
|
this.$refs[transferName].$refs.rightPanel.checked = []
|
},
|
// 显示表单
|
async showForm() {
|
!this.isRender && (this.isRender = true)
|
this.asyncVisible = true
|
await this.getPerson()
|
},
|
// 隐藏表单
|
closeForm() {
|
this.asyncVisible = false
|
this.resetForm('ruleForm')
|
this.resetTransfer('transfer')
|
},
|
// 查询按钮列表信息
|
queryReset() {
|
this.queryInfo.pageNum = 1
|
this.queryInfo.pageSize = 10
|
this.getLists()
|
},
|
// 添加数据
|
addRow() {
|
this.submitMode = 'add'
|
this.showForm()
|
},
|
// 更新数据
|
async updateRow(row) {
|
this.submitMode = 'update'
|
await this.showForm()
|
this.$nextTick(() => {
|
this.ruleForm.id = ''
|
const strongObj = {
|
staff: [],
|
leader: [],
|
}
|
row.staffList.forEach(item => {
|
strongObj.staff.push(item.userId)
|
})
|
row.leaderList.forEach(item => {
|
strongObj.leader.push(item.userId)
|
})
|
Object.keys(this.ruleForm).forEach(item => {
|
if (row.hasOwnProperty.call(row, item)) {
|
this.ruleForm[item] = strongObj[item] || row[item]
|
}
|
})
|
})
|
},
|
// 删除数据
|
deleteRow(row) {
|
const params = {id: row.id}
|
this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$http.delete(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.queryReset();
|
this.$message.success("删除成功！")
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}).catch(() => {
|
this.$message.warning("您已取消")
|
})
|
},
|
// 提交表单
|
onSubmit: throttle(function (formName) {
|
this.$refs[formName].validate(valid => {
|
if (!valid) return
|
const params = this.ruleForm
|
if (this.isUpdate) {
|
// 更新
|
this.$http.update(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('更新成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
} else {
|
// 添加
|
this.$http.insert(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('添加成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}
|
})
|
}, 1000),
|
// 分页改变
|
pageChange() {
|
this.getLists()
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/style/layout-main.scss';
|
|
/deep/ {
|
&::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
&::-webkit-scrollbar-corner {
|
background-color: transparent;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px transparent;
|
background: #39B5FE;
|
}
|
|
&::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 10px;
|
background: rgba(76, 188, 254, .3);
|
}
|
}
|
</style>
|
