From 3a95f79805a490d23d969faedb376bcc9ac14fb5 Mon Sep 17 00:00:00 2001
From: 叶松 <2217086471@qq.com>
Date: 星期三, 22 十一月 2023 14:22:33 +0800
Subject: [PATCH] 增加提示全部
---
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..f5469f3 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 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: "修改", permission: "update", handleRow: this.updateRow},
+ {name: "删除", 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