Merge branch 'master' of http://111.30.93.211:10101/r/supipe

李旭东

2023-10-27 2d8dafdddd85653371e463ee43f960f2366d9313

 web/src/views/SecureManage/RiskGrad/DangerInform.vue

@@ -1,268 +1,260 @@
<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';

/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);
    }
}
<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>