<template>
|
<!-- 安全管理 ==> 风险分级管控 => 危险源告知-->
|
<div class="main">
|
<!-- header -->
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">安全等级：</span>
|
<el-select v-model="queryInfo.levelType" placeholder="请选择安全等级" clearable>
|
<el-option v-for="item in safetyLevels" :key="item.levelType" :label="item.name"
|
:value="item.levelType">
|
</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" width="460px"
|
@close="closeForm">
|
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
|
<el-form-item label="区域名称:" prop="region">
|
<el-input v-model="ruleForm.region" clearable placeholder="请输入区域名称"></el-input>
|
</el-form-item>
|
<el-form-item label="安全等级:" prop="levelType">
|
<el-select v-model="ruleForm.levelType" placeholder="请选择">
|
<el-option v-for="item in safetyLevels" :key="item.levelType" :label="item.name"
|
:value="item.levelType">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="区域颜色:" prop="regionColor">
|
<el-input v-model="ruleForm.regionColor" placeholder="请选择区域颜色" disabled></el-input>
|
<el-color-picker v-model="ruleForm.regionColor"></el-color-picker>
|
</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,
|
levelType: '',
|
},
|
safetyLevelMap: {
|
1: {name: 'IV-A级', levelType: 1},
|
2: {name: 'IV-B级', levelType: 1},
|
3: {name: 'IV-C级', levelType: 1},
|
4: {name: 'IV-D级', levelType: 1},
|
}, // 安全等级 map
|
safetyLevels: [
|
{name: 'IV-A级', levelType: 1},
|
{name: 'IV-B级', levelType: 2},
|
{name: 'IV-C级', levelType: 3},
|
{name: 'IV-D级', levelType: 4},
|
], // 安全等级 arr
|
dataList: [],
|
tableColumns: [], // table配置
|
ruleForm: {}, // 按钮表单
|
rules: {
|
region: [{required: true, message: '请输入区域名称', trigger: 'blur'}],
|
levelType: [{required: true, message: '请选择安全等级', trigger: 'change'}],
|
regionColor: [{required: true, message: '请选择区域颜色', trigger: 'change'}],
|
},
|
$http: '', // api路径赋值
|
}
|
},
|
components: {
|
cpnTable
|
},
|
computed: {
|
isUpdate() {
|
return this.submitMode === 'update'
|
},
|
dialogTitle() {
|
return this.isUpdate ? '修改区域' : '新增区域'
|
},
|
},
|
created() {
|
this.$http = this.$api.Safety.RiskGrad.warning
|
this.setFormProps()
|
this.setTableColumn()
|
this.getLists()
|
},
|
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
|
})
|
},
|
// 初始化 ruleform
|
setFormProps(options = {}) {
|
let _form = {
|
region: '', // 区域名称
|
levelType: '', // 安全等级
|
regionColor: '', // 区域等级颜色
|
}
|
this.ruleForm = Object.keys(options).length ? options : _form
|
},
|
// 初始化 table 配置
|
setTableColumn() {
|
this.tableColumns = [
|
{index: true},
|
{name: "区域名称", key: "region"},
|
{name: "安全等级", key: "levelType", formatter: (row) => {return this.safetyLevelMap[row.levelType].name}},
|
{name: "区域颜色", key: "regionColor"},
|
{
|
operation: true, name: "操作", width: 140, value: [
|
{name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
|
{name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
|
]
|
},
|
]
|
},
|
// 重置表单
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
},
|
// 显示表单
|
showForm() {
|
!this.isRender && (this.isRender = true)
|
this.asyncVisible = true
|
},
|
// 隐藏表单
|
closeForm() {
|
this.asyncVisible = false
|
this.resetForm('ruleForm')
|
},
|
// 查询按钮列表信息
|
queryReset() {
|
this.queryInfo.pageNum = 1
|
this.queryInfo.pageSize = 10
|
this.getLists()
|
},
|
// 添加数据
|
addRow() {
|
this.submitMode = 'add'
|
this.showForm()
|
},
|
// 更新数据
|
updateRow(row) {
|
this.submitMode = 'update'
|
this.showForm()
|
this.$nextTick(() => {
|
this.ruleForm.id = ''
|
Object.keys(this.ruleForm).forEach(item => {
|
if (row.hasOwnProperty.call(row, item)) {
|
this.ruleForm[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 () {
|
this.$refs.ruleForm.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';
|
</style>
|
<style lang="scss">
|
.el-color-dropdown__btns {
|
.el-color-dropdown__btn {
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
color: #606266;
|
}
|
|
.el-color-dropdown__link-btn {
|
border-color: transparent;
|
background-color: transparent;
|
color: #66b1ff;
|
}
|
}
|
</style>
|
