From 2d8dafdddd85653371e463ee43f960f2366d9313 Mon Sep 17 00:00:00 2001 From: 李旭东 <woaiguo66@sina.com> Date: 星期五, 27 十月 2023 15:51:16 +0800 Subject: [PATCH] Merge branch 'master' of http://111.30.93.211:10101/r/supipe --- web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue | 748 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 374 insertions(+), 374 deletions(-) diff --git a/web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue b/web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue index 24c03e1..9c46001 100644 --- a/web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue +++ b/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> \ No newline at end of file -- Gitblit v1.9.3