From dd16a1237f53697f0df291b5af1ad39062ce6039 Mon Sep 17 00:00:00 2001
From: unknown <280848880@qq.com>
Date: 星期四, 28 九月 2023 11:12:14 +0800
Subject: [PATCH] web:1 风险分级管控-危险源告知,区域包保页面提交 2 table组件,权限自定义指令功能提交
---
web/src/views/SecureManage/RiskGrad/DangerInform.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 267 insertions(+), 2 deletions(-)
diff --git a/web/src/views/SecureManage/RiskGrad/DangerInform.vue b/web/src/views/SecureManage/RiskGrad/DangerInform.vue
index 79198d0..b994119 100644
--- a/web/src/views/SecureManage/RiskGrad/DangerInform.vue
+++ b/web/src/views/SecureManage/RiskGrad/DangerInform.vue
@@ -1,3 +1,268 @@
<template>
- <div>危险源告知</div>
-</template>
\ No newline at end of file
+ <!-- 安全管理 ==> 风险分级管控 => 危险源告知-->
+ <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';
+
+/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>
\ No newline at end of file
--
Gitblit v1.9.3