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

叶松

2023-10-26 979c7c817b2e7d2430ac447b10f943c12dac3b64

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

@@ -1,375 +1,375 @@
<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 += item.realName + '、'
                        })
                        return el
                    }
                },
                {
                    name: "小组成员", key: "staffList", formatter: (row) => {
                        let el = ''
                        row.staffList.forEach(item => {
                            el += item.realName + '、'
                        })
                        return el
                    }
                },
                {name: "风险源情况", key: "riskSourceSituation"},
                {name: "应对措施", key: "countermeasures"},
                {
                    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);
    }
}
<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>