From c75e9ccac1c92b1f2318c79a8d76c0e3d4da0000 Mon Sep 17 00:00:00 2001 From: unknown <280848880@qq.com> Date: 星期二, 24 十月 2023 16:19:08 +0800 Subject: [PATCH] 苏州web:bug修改 --- web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue | 748 ++++++++-------- web/src/views/GoodManage/components/AuxiliaryInvent.vue | 606 ++++++------ web/src/components/element/Table.vue | 3 web/src/components/element/Pagination.vue | 158 +- web/src/views/SecureManage/RiskGrad/DangerInform.vue | 526 +++++------ web/src/views/ProjectManage/SectionManage.vue | 2 web/src/views/MaterialsIndex/components/embedded/Invent.vue | 586 ++++++------ 7 files changed, 1,314 insertions(+), 1,315 deletions(-) diff --git a/web/src/components/element/Pagination.vue b/web/src/components/element/Pagination.vue index 46cfa39..2450444 100644 --- a/web/src/components/element/Pagination.vue +++ b/web/src/components/element/Pagination.vue @@ -1,78 +1,82 @@ -<template> - <div class="pagination-container"> - <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30]" - :total="total" :current-page="pageNum" :page-size="pageSize" - layout="total, sizes, prev, pager, next, jumper"></el-pagination> - </div> -</template> -<script> -export default { - name: "pagination", - data() { - return {}; - }, - props: { - // 总页数 - total: { - type: Number, - }, - // 当前页 - pageNum: { - type: Number, - }, - // 每页显示条数 - pageSize: { - type: Number, - }, - }, - methods: { - // 当前页码变化 - handleCurrentChange(val) { - this.$emit("change-page-num", val); - }, - // 每页查看条数变化 - handleSizeChange(val) { - this.$emit("change-page-size", val); - }, - }, - // watch: { - // pageSize: { - // // immediate: true, - // handler(newValue, oldValue) { - // this.page._pageSize = this.newValue; - // console.log("pageSize", newValue, oldValue); - // }, - // }, - // pageNum: { - // // immediate: true, - // handler(newValue, oldValue) { - // this.page._currentPage = newValue; - // console.log("pageNum", newValue, oldValue); - // }, - // }, - // }, -}; -</script> -<style lang="scss" scoped> -// 主体底部样式 -::v-deep.el-pagination .btn-prev, -::v-deep.el-pagination .btn-next, -::v-deep.el-pagination .el-pager li { - background-color: rgba(20, 25, 58, 0.4); - border: 1px solid rgba(255, 255, 255, 0.12); - font-weight: 400; - color: #E2E4E9; - border-radius: 4px; -} - -::v-deep.el-pagination .el-pager li:not(.disabled).active { - color: #fff; - border: 1px solid #39B5FE; - background-color: #0B3562; - font-weight: 400; -} - -.pagination-container { - margin-top: 30px; -} +<template> + <div class="pagination-container"> + <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30]" + :total="total" :current-page="pageNum" :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper"></el-pagination> + </div> +</template> +<script> +export default { + name: "pagination", + data() { + return {}; + }, + props: { + // 总页数 + total: { + type: Number, + }, + // 当前页 + pageNum: { + type: Number, + }, + // 每页显示条数 + pageSize: { + type: Number, + }, + }, + methods: { + // 当前页码变化 + handleCurrentChange(val) { + this.$emit("change-page-num", val); + }, + // 每页查看条数变化 + handleSizeChange(val) { + this.$emit("change-page-size", val); + }, + }, + // watch: { + // pageSize: { + // // immediate: true, + // handler(newValue, oldValue) { + // this.page._pageSize = this.newValue; + // console.log("pageSize", newValue, oldValue); + // }, + // }, + // pageNum: { + // // immediate: true, + // handler(newValue, oldValue) { + // this.page._currentPage = newValue; + // console.log("pageNum", newValue, oldValue); + // }, + // }, + // }, +}; +</script> +<style lang="scss" scoped> +.el-pagination { + text-align: right; +} + +// 主体底部样式 +::v-deep.el-pagination .btn-prev, +::v-deep.el-pagination .btn-next, +::v-deep.el-pagination .el-pager li { + background-color: rgba(20, 25, 58, 0.4); + border: 1px solid rgba(255, 255, 255, 0.12); + font-weight: 400; + color: #E2E4E9; + border-radius: 4px; +} + +::v-deep.el-pagination .el-pager li:not(.disabled).active { + color: #fff; + border: 1px solid #39B5FE; + background-color: #0B3562; + font-weight: 400; +} + +.pagination-container { + margin: 30px 0; +} </style> \ No newline at end of file diff --git a/web/src/components/element/Table.vue b/web/src/components/element/Table.vue index e5d56bd..6460b08 100644 --- a/web/src/components/element/Table.vue +++ b/web/src/components/element/Table.vue @@ -142,9 +142,12 @@ <style lang="scss" scoped> .box { height: 100%; + display: flex; + flex-direction: column; } .el-table { + overflow: auto; border: none; height: 100%; } diff --git a/web/src/views/GoodManage/components/AuxiliaryInvent.vue b/web/src/views/GoodManage/components/AuxiliaryInvent.vue index c373ec5..908fe42 100644 --- a/web/src/views/GoodManage/components/AuxiliaryInvent.vue +++ b/web/src/views/GoodManage/components/AuxiliaryInvent.vue @@ -1,304 +1,304 @@ -<template> - <div class="main tabs_main" style="height:89%"> - <div class="main_header"> - <div class="header_item"> - <span class="header_label">物品名称:</span> - <el-input v-model="search.assistName" :size="size" clearable placeholder="请输入物品名称"></el-input> - </div> - <div class="header_item"> - <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button> - <el-button :size="size" icon="el-icon-upload2" v-if="showButton('export')" @click="exportFile">导出Excel</el-button> - </div> - </div> - <div class="main_content"> - <el-table - v-loading="loading" - :data="dataList" - height="100%" - :cell-style="cellStyle"> - <el-table-column align="center" label="序号" width="60"> - <template #default="scope"> - <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span> - </template> - </el-table-column> - <el-table-column prop="assistName" label="物品名称" align="center"></el-table-column> - <el-table-column prop="assistModel" label="型号规格" align="center" ></el-table-column> - <el-table-column prop="dictName" label="类别" align="center" ></el-table-column> - <el-table-column prop="unit" label="计量单位" align="center"></el-table-column> - <el-table-column prop="stock" label="库存数量" align="center" > - <template #default="{row}"> - {{row.stock === null?0:row.stock}} - </template> - </el-table-column> - <el-table-column prop="alarmCount" label="报警数" align="center" > - <template #default="{row}"> - {{row.alarmCount === null?0:row.alarmCount}} - </template> - </el-table-column> - <el-table-column prop="position" label="位置" align="center" show-overflow-tooltip></el-table-column> - <el-table-column label="操作" align="center" width="200"> - <template #default="{ row }"> - <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">库存校正</el-button> - <el-button class="delete_btn" size="mini" v-if="showButton('update')" @click="updatePropAlarm(row)">预警设置</el-button> - </template> - </el-table-column> - </el-table> - </div> - <div class="main_footer"> - <el-pagination - background - @current-change="changePageNum" - @size-change="changePageSize" - :current-page="pageNum" - :page-sizes="[10, 20, 50, 100]" - :page-size="pageSize" - layout="total, sizes, prev, pager, next, jumper" - :total="total"> - </el-pagination> - </div> - <el-dialog - class="prop_dialog" - :title="asyncTitle ? '预警设置' : '库存校正'" - :close-on-click-modal="false" - :visible.sync="asyncVisible" - width="35%"> - <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form"> - <el-form-item label="物品名称:" prop="assistName"> - <el-input v-model="ruleForm.assistName" :size="size" clearable placeholder="请输入物品名称" :disabled="disabled"></el-input> - </el-form-item> - <el-form-item label="规格型号:" prop="assistModel"> - <el-input v-model="ruleForm.assistModel" :size="size" clearable placeholder="请输入规格型号" :disabled="disabled"></el-input> - </el-form-item> - <el-form-item label="库存数量:" prop="correctionBefore" v-if="!asyncTitle"> - <el-input v-model="ruleForm.correctionBefore" :size="size" clearable placeholder="请输入库存数量" :disabled="disabled"></el-input> - </el-form-item> - <el-form-item label="校正数量:" prop="correctionNum" v-if="!asyncTitle"> - <el-input v-model="ruleForm.correctionNum" type="number" :size="size" clearable placeholder="请输入校正数量" @blur="changeAfter"></el-input> - </el-form-item> - <el-form-item label="校正后数量:" prop="correctionAfter" v-if="!asyncTitle"> - <el-input v-model="ruleForm.correctionAfter" :size="size" clearable placeholder="请输入校正后数量" :disabled="true"></el-input> - </el-form-item> - <el-form-item label="预警数量:" prop="alarmCount" v-if="asyncTitle"> - <el-input v-model="ruleForm.alarmCount" :size="size" clearable placeholder="请输入预警数量" ></el-input> - </el-form-item> - <el-form-item label="备注:" prop="remark" v-if="!asyncTitle"> - <el-input v-model="ruleForm.remark" :size="size" type="textarea" :rows="2" 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="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button> - </div> - </el-dialog> - </div> -</template> - -<script> -import { buttonPinia } from '../../../pinia/index'; -import { throttle, changeSize,downFiles } from '../../../plugins/public'; // 导入节流、动态切换组件尺寸方法 - export default { - data() { - return { - size: changeSize(), // 组件尺寸 - pageNum: 1, - pageSize: 10, - assistId:"",//一行ID - search:{},//查询条件 - total: 0, - loading: false, - disabled:false,//是否禁止修改 - dataList: [], //库存管理信息列表 - asyncTitle: true, // 对话框title 预警设置:true 库存校正:false - asyncVisible: false, // 添加 修改对话框 - ruleForm: { - }, // 按钮表单 - rules: { - assistName: [{ - required: true, - message: '请输入物品名称', - trigger: 'blur' - }], - assistModel: [{ - required: true, - message: '请输入规格型号', - trigger: 'blur' - }], - alarmCount: [{ - required: true, - message: '请输入预警数量', - trigger: 'blur' - }], - correctionBefore: [{ - required: true, - message: '请输入库存数量', - trigger: 'blur' - }], - correctionNum: [{ - required: true, - message: '请输入校正数量', - trigger: 'blur' - }], - correctionAfter: [{ - required: true, - message: '请输入校正后数量', - trigger: 'blur' - }], - }, - } - }, - watch: { - asyncVisible(bol) { - if(!bol) { - this.ruleForm = {}; - this.$refs.ruleForm.resetFields(); - } - } - }, - mounted() { - const that = this; - // 根据窗口大小动态修改组件尺寸 - window.onresize = () => { - that.size = changeSize(); - } - }, - methods: { - cellStyle({row,column}){ - if(row.stock <= row.alarmCount &&column.property =="stock"){ - return { - 'color':'red' - } - } - }, - //计算出校正后重量 - changeAfter(){ - this.$set(this.ruleForm,'correctionAfter',this.ruleForm.correctionBefore+this.ruleForm.correctionNum*1) - }, - // 转圈圈 - functionLoading() { - this.loadingView = this.$loading({ - lock: true, - text: '请稍后...', - spinner: 'el-icon-loading', - background: 'rgba(0, 0, 0, 0.7)' - }); - }, - //导出Excel - exportFile(){ - this.functionLoading(); - let params = Object.assign({},this.search) - this.$api.Auxiliary.exportInventDatas(params).then(res => { - downFiles(res, '库存管理信息', 'xls') - this.loadingView.close() - }) - .catch(() => { - this.loadingView.close(); - }) - }, - // 查询按钮列表信息 - searchButtonInfo(bol) { - if(bol) { - this.pageNum = 1; - } - let params = Object.assign({},this.search,{ - pageNum: this.pageNum, - pageSize: this.pageSize - }) - this.loading = true; - this.$api.Auxiliary.searchAuxiliaryType(params).then((res) => { - if(res.statusMsg === 'ok') { - this.total = res.data.total; - this.dataList = res.data.list; - } - this.loading = false; - }) - }, - //预警设置按钮 - updatePropAlarm(row){ - this.assistId = row.id - this.asyncTitle = true; - this.asyncVisible = true; - this.disabled = true - this.$api.Auxiliary.detailsAuxiliaryType({assistId: row.id}).then(res=>{ - if(res.statusMsg === 'ok'){ - this.ruleForm = res.data - }else{ - this.$message.warning(res.statusMsg) - } - }) - }, - //库存校正按钮 - updateProp(row) { - this.assistId = row.id - this.asyncTitle = false; - this.asyncVisible = true; - this.disabled = true - this.$api.Auxiliary.detailsAuxiliaryType({assistId: row.id}).then(res=>{ - if(res.statusMsg === 'ok'){ - this.ruleForm = res.data - this.$set(this.ruleForm,'correctionBefore',res.data.stock) - this.$set(this.ruleForm,'remark','') - }else{ - this.$message.warning(res.statusMsg) - } - }) - }, - // 提交库存校正按钮信息 - submitUpdate: throttle(function() { - this.$refs.ruleForm.validate((valid) => { - if(valid) { - const params = Object.assign({}, this.ruleForm); - params.correctionNum = this.ruleForm.correctionNum*1 - params.correctionBefore = this.ruleForm.correctionBefore*1 - params.assistId = this.assistId - delete params.id - this.$api.Auxiliary.addAuxiliaryCheck(params).then((res) => { - if(res.statusMsg === 'ok') { - this.asyncVisible = false; - this.searchButtonInfo(true); - this.$message.success('库存校正成功!'); - } else { - this.$message.warning(res.statusMsg); - } - }) - } - }) - }, 3000), - // 提交预警设置按钮信息 - submitInsert: throttle(function() { - this.$refs.ruleForm.validate((valid) => { - if(valid) { - const params = Object.assign({}, this.ruleForm); - this.$api.Auxiliary.updateAuxiliaryType(params).then((res) => { - if(res.statusMsg === 'ok') { - this.asyncVisible = false; - this.searchButtonInfo(true); - this.$message.success('预警设置成功!'); - } else { - this.$message.warning(res.statusMsg); - } - }) - } - }) - }, 3000), - // 判断按钮权限信息 - showButton(str) { - const pinia = buttonPinia(); - return pinia.$state.buttonInfo.includes(str); - }, - // 切换页数 - changePageNum(page) { - this.pageNum = page; - this.searchButtonInfo(); - }, - // 切换每页条数 - changePageSize(size) { - this.pageSize = size; - this.searchButtonInfo(); - } - } - } -</script> - -<style lang="scss" scoped> -@import'@/style/layout-main.scss'; +<template> + <div class="main tabs_main" style="height:89%"> + <div class="main_header"> + <div class="header_item"> + <span class="header_label">物品名称:</span> + <el-input v-model="search.assistName" :size="size" clearable placeholder="请输入物品名称"></el-input> + </div> + <div class="header_item"> + <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button> + <el-button :size="size" icon="el-icon-upload2" v-if="showButton('export')" @click="exportFile">导出Excel</el-button> + </div> + </div> + <div class="main_content"> + <el-table + v-loading="loading" + :data="dataList" + height="100%" + :cell-style="cellStyle"> + <el-table-column align="center" label="序号" width="60"> + <template #default="scope"> + <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span> + </template> + </el-table-column> + <el-table-column prop="assistName" label="物品名称" align="center"></el-table-column> + <el-table-column prop="assistModel" label="型号规格" align="center" ></el-table-column> + <el-table-column prop="dictName" label="类别" align="center" ></el-table-column> + <el-table-column prop="unit" label="计量单位" align="center"></el-table-column> + <el-table-column prop="stock" label="库存数量" align="center" > + <template #default="{row}"> + {{row.stock === null?0:row.stock}} + </template> + </el-table-column> + <el-table-column prop="alarmCount" label="报警数" align="center" > + <template #default="{row}"> + {{row.alarmCount === null?0:row.alarmCount}} + </template> + </el-table-column> + <el-table-column prop="position" label="位置" align="center" show-overflow-tooltip></el-table-column> + <el-table-column label="操作" align="center" width="200"> + <template #default="{ row }"> + <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">库存校正</el-button> + <el-button class="delete_btn" size="mini" v-if="showButton('update')" @click="updatePropAlarm(row)">预警设置</el-button> + </template> + </el-table-column> + </el-table> + </div> + <div class="main_footer"> + <el-pagination + background + @current-change="changePageNum" + @size-change="changePageSize" + :current-page="pageNum" + :page-sizes="[10, 20, 50, 100]" + :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="total"> + </el-pagination> + </div> + <el-dialog + class="prop_dialog" + :title="asyncTitle ? '预警设置' : '库存校正'" + :close-on-click-modal="false" + :visible.sync="asyncVisible" + width="35%"> + <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form"> + <el-form-item label="物品名称:" prop="assistName"> + <el-input v-model="ruleForm.assistName" :size="size" clearable placeholder="请输入物品名称" :disabled="disabled"></el-input> + </el-form-item> + <el-form-item label="规格型号:" prop="assistModel"> + <el-input v-model="ruleForm.assistModel" :size="size" clearable placeholder="请输入规格型号" :disabled="disabled"></el-input> + </el-form-item> + <el-form-item label="库存数量:" prop="correctionBefore" v-if="!asyncTitle"> + <el-input v-model="ruleForm.correctionBefore" :size="size" clearable placeholder="请输入库存数量" :disabled="disabled"></el-input> + </el-form-item> + <el-form-item label="校正数量:" prop="correctionNum" v-if="!asyncTitle"> + <el-input v-model="ruleForm.correctionNum" type="number" :size="size" clearable placeholder="请输入校正数量" @input="changeAfter"></el-input> + </el-form-item> + <el-form-item label="校正后数量:" prop="correctionAfter" v-if="!asyncTitle"> + <el-input v-model="ruleForm.correctionAfter" :size="size" clearable placeholder="请输入校正后数量" :disabled="true"></el-input> + </el-form-item> + <el-form-item label="预警数量:" prop="alarmCount" v-if="asyncTitle"> + <el-input v-model="ruleForm.alarmCount" :size="size" clearable placeholder="请输入预警数量" ></el-input> + </el-form-item> + <el-form-item label="备注:" prop="remark" v-if="!asyncTitle"> + <el-input v-model="ruleForm.remark" :size="size" type="textarea" :rows="2" 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="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button> + </div> + </el-dialog> + </div> +</template> + +<script> +import { buttonPinia } from '../../../pinia/index'; +import { throttle, changeSize,downFiles } from '../../../plugins/public'; // 导入节流、动态切换组件尺寸方法 + export default { + data() { + return { + size: changeSize(), // 组件尺寸 + pageNum: 1, + pageSize: 10, + assistId:"",//一行ID + search:{},//查询条件 + total: 0, + loading: false, + disabled:false,//是否禁止修改 + dataList: [], //库存管理信息列表 + asyncTitle: true, // 对话框title 预警设置:true 库存校正:false + asyncVisible: false, // 添加 修改对话框 + ruleForm: { + }, // 按钮表单 + rules: { + assistName: [{ + required: true, + message: '请输入物品名称', + trigger: 'blur' + }], + assistModel: [{ + required: true, + message: '请输入规格型号', + trigger: 'blur' + }], + alarmCount: [{ + required: true, + message: '请输入预警数量', + trigger: 'blur' + }], + correctionBefore: [{ + required: true, + message: '请输入库存数量', + trigger: 'blur' + }], + correctionNum: [{ + required: true, + message: '请输入校正数量', + trigger: 'blur' + }], + correctionAfter: [{ + required: true, + message: '请输入校正后数量', + trigger: 'blur' + }], + }, + } + }, + watch: { + asyncVisible(bol) { + if(!bol) { + this.ruleForm = {}; + this.$refs.ruleForm.resetFields(); + } + } + }, + mounted() { + const that = this; + // 根据窗口大小动态修改组件尺寸 + window.onresize = () => { + that.size = changeSize(); + } + }, + methods: { + cellStyle({row,column}){ + if(row.stock <= row.alarmCount &&column.property =="stock"){ + return { + 'color':'red' + } + } + }, + //计算出校正后重量 + changeAfter(){ + this.$set(this.ruleForm,'correctionAfter',this.ruleForm.correctionBefore+this.ruleForm.correctionNum*1) + }, + // 转圈圈 + functionLoading() { + this.loadingView = this.$loading({ + lock: true, + text: '请稍后...', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }); + }, + //导出Excel + exportFile(){ + this.functionLoading(); + let params = Object.assign({},this.search) + this.$api.Auxiliary.exportInventDatas(params).then(res => { + downFiles(res, '库存管理信息', 'xls') + this.loadingView.close() + }) + .catch(() => { + this.loadingView.close(); + }) + }, + // 查询按钮列表信息 + searchButtonInfo(bol) { + if(bol) { + this.pageNum = 1; + } + let params = Object.assign({},this.search,{ + pageNum: this.pageNum, + pageSize: this.pageSize + }) + this.loading = true; + this.$api.Auxiliary.searchAuxiliaryType(params).then((res) => { + if(res.statusMsg === 'ok') { + this.total = res.data.total; + this.dataList = res.data.list; + } + this.loading = false; + }) + }, + //预警设置按钮 + updatePropAlarm(row){ + this.assistId = row.id + this.asyncTitle = true; + this.asyncVisible = true; + this.disabled = true + this.$api.Auxiliary.detailsAuxiliaryType({assistId: row.id}).then(res=>{ + if(res.statusMsg === 'ok'){ + this.ruleForm = res.data + }else{ + this.$message.warning(res.statusMsg) + } + }) + }, + //库存校正按钮 + updateProp(row) { + this.assistId = row.id + this.asyncTitle = false; + this.asyncVisible = true; + this.disabled = true + this.$api.Auxiliary.detailsAuxiliaryType({assistId: row.id}).then(res=>{ + if(res.statusMsg === 'ok'){ + this.ruleForm = res.data + this.$set(this.ruleForm,'correctionBefore',res.data.stock) + this.$set(this.ruleForm,'remark','') + }else{ + this.$message.warning(res.statusMsg) + } + }) + }, + // 提交库存校正按钮信息 + submitUpdate: throttle(function() { + this.$refs.ruleForm.validate((valid) => { + if(valid) { + const params = Object.assign({}, this.ruleForm); + params.correctionNum = this.ruleForm.correctionNum*1 + params.correctionBefore = this.ruleForm.correctionBefore*1 + params.assistId = this.assistId + delete params.id + this.$api.Auxiliary.addAuxiliaryCheck(params).then((res) => { + if(res.statusMsg === 'ok') { + this.asyncVisible = false; + this.searchButtonInfo(true); + this.$message.success('库存校正成功!'); + } else { + this.$message.warning(res.statusMsg); + } + }) + } + }) + }, 3000), + // 提交预警设置按钮信息 + submitInsert: throttle(function() { + this.$refs.ruleForm.validate((valid) => { + if(valid) { + const params = Object.assign({}, this.ruleForm); + this.$api.Auxiliary.updateAuxiliaryType(params).then((res) => { + if(res.statusMsg === 'ok') { + this.asyncVisible = false; + this.searchButtonInfo(true); + this.$message.success('预警设置成功!'); + } else { + this.$message.warning(res.statusMsg); + } + }) + } + }) + }, 3000), + // 判断按钮权限信息 + showButton(str) { + const pinia = buttonPinia(); + return pinia.$state.buttonInfo.includes(str); + }, + // 切换页数 + changePageNum(page) { + this.pageNum = page; + this.searchButtonInfo(); + }, + // 切换每页条数 + changePageSize(size) { + this.pageSize = size; + this.searchButtonInfo(); + } + } + } +</script> + +<style lang="scss" scoped> +@import'@/style/layout-main.scss'; </style> \ No newline at end of file diff --git a/web/src/views/MaterialsIndex/components/embedded/Invent.vue b/web/src/views/MaterialsIndex/components/embedded/Invent.vue index fd883db..bdf61b3 100644 --- a/web/src/views/MaterialsIndex/components/embedded/Invent.vue +++ b/web/src/views/MaterialsIndex/components/embedded/Invent.vue @@ -1,294 +1,294 @@ -<template> - <div class="main tabs_main" style="height:89%"> - <div class="main_header"> - <div class="header_item"> - <span class="header_label">预埋件名称:</span> - <el-input v-model="search.embedmentName" :size="size" clearable placeholder="请输入预埋件名称"></el-input> - </div> - <div class="header_item"> - <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" - @click="searchButtonInfo(true)">查询</el-button> - <el-button :size="size" icon="el-icon-upload2" v-if="showButton('export')" @click="exportFile">导出Excel</el-button> - </div> - </div> - <div class="main_content"> - <el-table v-loading="loading" :data="dataList" height="100%" :cell-style="cellStyle"> - <el-table-column align="center" label="序号" width="60"> - <template #default="scope"> - <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> - </template> - </el-table-column> - <el-table-column prop="embedmentName" label="预埋件名称" align="center"></el-table-column> - <el-table-column prop="embedmentModel" label="型号规格" align="center"></el-table-column> - <el-table-column prop="dictName" label="类别" align="center"></el-table-column> - <el-table-column prop="unit" label="计量单位" align="center"></el-table-column> - <el-table-column prop="stock" label="库存数量" align="center"> - <template #default="{ row }"> - {{ row.stock === null ? 0 : row.stock }} - </template> - </el-table-column> - <el-table-column prop="alarmCount" label="报警数" align="center"> - <template #default="{ row }"> - {{ row.alarmCount === null ? 0 : row.alarmCount }} - </template> - </el-table-column> - <el-table-column prop="position" label="位置" align="center" show-overflow-tooltip></el-table-column> - <el-table-column label="操作" align="center" width="200"> - <template #default="scope"> - <el-button class="table_btn" size="mini" v-if="showButton('update')" - @click="updateProp(scope.$index)">库存校正</el-button> - <el-button class="delete_btn" size="mini" v-if="showButton('update')" - @click="updatePropAlarm(scope.$index)">预警设置</el-button> - </template> - </el-table-column> - </el-table> - </div> - <div class="main_footer"> - <el-pagination background @current-change="changePageNum" @size-change="changePageSize" :current-page="pageNum" - :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" - :total="total"> - </el-pagination> - </div> - <el-dialog class="prop_dialog" :title="asyncTitle ? '预警设置' : '库存校正'" :close-on-click-modal="false" - :visible.sync="asyncVisible" width="35%"> - <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form"> - <el-form-item label="物品名称:" prop="embedmentName"> - <el-input v-model="ruleForm.embedmentName" :size="size" clearable placeholder="请输入物品名称" - :disabled="disabled"></el-input> - </el-form-item> - <el-form-item label="规格型号:" prop="embedmentModel"> - <el-input v-model="ruleForm.embedmentModel" :size="size" clearable placeholder="请输入规格型号" - :disabled="disabled"></el-input> - </el-form-item> - <el-form-item label="库存数量:" prop="correctionBefore" v-if="!asyncTitle"> - <el-input v-model="ruleForm.correctionBefore" :size="size" clearable placeholder="请输入库存数量" - :disabled="disabled"></el-input> - </el-form-item> - <el-form-item label="校正数量:" prop="correctionNum" v-if="!asyncTitle"> - <el-input v-model="ruleForm.correctionNum" type="number" :size="size" clearable placeholder="请输入校正数量" - @blur="changeAfter"></el-input> - </el-form-item> - <el-form-item label="校正后数量:" prop="correctionAfter" v-if="!asyncTitle"> - <el-input v-model="ruleForm.correctionAfter" :size="size" clearable placeholder="请输入校正后数量" - :disabled="true"></el-input> - </el-form-item> - <el-form-item label="预警数量:" prop="alarmCount" v-if="asyncTitle"> - <el-input v-model="ruleForm.alarmCount" :size="size" clearable placeholder="请输入预警数量"></el-input> - </el-form-item> - <el-form-item label="备注:" prop="remark" v-if="!asyncTitle"> - <el-input v-model="ruleForm.remark" :size="size" type="textarea" :rows="2" 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="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button> - </div> - </el-dialog> - </div> -</template> - -<script> -import {buttonPinia} from '@/pinia/index'; -import {throttle, changeSize, downFiles} from '@/plugins/public'; // 导入节流、动态切换组件尺寸方法 -export default { - data() { - return { - size: changeSize(), // 组件尺寸 - pageNum: 1, - pageSize: 10, - id: "",//一行ID - search: {},//查询条件 - total: 0, - loading: false, - disabled: false,//是否禁止修改 - dataList: [], //库存管理信息列表 - asyncTitle: true, // 对话框title 预警设置:true 库存校正:false - asyncVisible: false, // 添加 修改对话框 - ruleForm: { - }, // 按钮表单 - rules: { - embedmentName: [{ - required: true, - message: '请输入预埋件名称', - trigger: 'blur' - }], - embedmentModel: [{ - required: true, - message: '请输入规格型号', - trigger: 'blur' - }], - alarmCount: [{ - required: true, - message: '请输入预警数量', - trigger: 'blur' - }], - correctionBefore: [{ - required: true, - message: '请输入库存数量', - trigger: 'blur' - }], - correctionNum: [{ - required: true, - message: '请输入校正数量', - trigger: 'blur' - }], - correctionAfter: [{ - required: true, - message: '请输入校正后数量', - trigger: 'blur' - }], - }, - } - }, - watch: { - asyncVisible(bol) { - if (!bol) { - this.ruleForm = {}; - this.$refs.ruleForm.resetFields(); - } - } - }, - mounted() { - const that = this; - // 根据窗口大小动态修改组件尺寸 - window.onresize = () => { - that.size = changeSize(); - } - }, - methods: { - cellStyle({row, column}) { - if (row.stock <= row.alarmCount && column.property == "stock") { - return { - 'color': 'red' - } - } - }, - //计算出校正后重量 - changeAfter() { - this.$set(this.ruleForm, 'correctionAfter', this.ruleForm.correctionBefore + this.ruleForm.correctionNum * 1) - }, - // 转圈圈 - functionLoading() { - this.loadingView = this.$loading({ - lock: true, - text: '请稍后...', - spinner: 'el-icon-loading', - background: 'rgba(0, 0, 0, 0.7)' - }); - }, - //导出Excel - exportFile() { - this.functionLoading(); - let params = Object.assign({}, this.search) - this.$api.Materials.embedded.inventExportxls(params).then(res => { - downFiles(res, '库存管理信息', 'xls') - this.loadingView.close() - }) - .catch(() => { - this.loadingView.close(); - }) - }, - // 查询按钮列表信息 - searchButtonInfo(bol) { - if (bol) { - this.pageNum = 1; - } - let params = Object.assign({}, this.search, { - pageNum: this.pageNum, - pageSize: this.pageSize - }) - this.loading = true; - this.$api.Materials.embedded.inventGetLists(params).then((res) => { - if (res.statusMsg === 'ok') { - this.total = res.data.total; - this.dataList = res.data.list; - } - this.loading = false; - }) - }, - //预警设置按钮 - updatePropAlarm(index) { - const row = {...this.dataList[index]} - this.id = row.id - this.asyncTitle = true; - this.asyncVisible = true; - this.disabled = true - this.ruleForm = row - }, - //库存校正按钮 - updateProp(index) { - const row = {...this.dataList[index]} - this.id = row.id - this.asyncTitle = false; - this.asyncVisible = true; - this.disabled = true - this.ruleForm = row - this.ruleForm.correctionBefore = row.stock - this.ruleForm.remark = row.remark - }, - // 提交库存校正按钮信息 - submitUpdate: throttle(function () { - this.$refs.ruleForm.validate((valid) => { - if (valid) { - const params = { - id: this.ruleForm.id, - correctionNum: this.ruleForm.correctionNum, - correctionAfter: this.ruleForm.correctionAfter, - correctionBefore: this.ruleForm.correctionBefore, - remark: this.ruleForm.remark, - } - this.$api.Materials.embedded.inventCheck(params).then((res) => { - if (res.statusMsg === 'ok') { - this.asyncVisible = false; - this.searchButtonInfo(true); - this.$message.success('库存校正成功!'); - } else { - this.$message.warning(res.statusMsg); - } - }) - } - }) - }, 3000), - // 提交预警设置按钮信息 - submitInsert: throttle(function () { - this.$refs.ruleForm.validate((valid) => { - if (valid) { - const params = { - id: this.ruleForm.id, - alarmCount: this.ruleForm.alarmCount - } - this.$api.Materials.embedded.inventPresAlarm(params).then((res) => { - if (res.statusMsg === 'ok') { - this.asyncVisible = false; - this.searchButtonInfo(true); - this.$message.success('预警设置成功!'); - } else { - this.$message.warning(res.statusMsg); - } - }) - } - }) - }, 3000), - // 判断按钮权限信息 - showButton(str) { - const pinia = buttonPinia(); - return pinia.$state.buttonInfo.includes(str); - }, - // 切换页数 - changePageNum(page) { - this.pageNum = page; - this.searchButtonInfo(); - }, - // 切换每页条数 - changePageSize(size) { - this.pageSize = size; - this.searchButtonInfo(); - } - } -} -</script> - -<style lang="scss" scoped> -@import '@/style/layout-main.scss'; +<template> + <div class="main tabs_main" style="height:89%"> + <div class="main_header"> + <div class="header_item"> + <span class="header_label">预埋件名称:</span> + <el-input v-model="search.embedmentName" :size="size" clearable placeholder="请输入预埋件名称"></el-input> + </div> + <div class="header_item"> + <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" + @click="searchButtonInfo(true)">查询</el-button> + <el-button :size="size" icon="el-icon-upload2" v-if="showButton('export')" @click="exportFile">导出Excel</el-button> + </div> + </div> + <div class="main_content"> + <el-table v-loading="loading" :data="dataList" height="100%" :cell-style="cellStyle"> + <el-table-column align="center" label="序号" width="60"> + <template #default="scope"> + <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> + </template> + </el-table-column> + <el-table-column prop="embedmentName" label="预埋件名称" align="center"></el-table-column> + <el-table-column prop="embedmentModel" label="型号规格" align="center"></el-table-column> + <el-table-column prop="dictName" label="类别" align="center"></el-table-column> + <el-table-column prop="unit" label="计量单位" align="center"></el-table-column> + <el-table-column prop="stock" label="库存数量" align="center"> + <template #default="{ row }"> + {{ row.stock === null ? 0 : row.stock }} + </template> + </el-table-column> + <el-table-column prop="alarmCount" label="报警数" align="center"> + <template #default="{ row }"> + {{ row.alarmCount === null ? 0 : row.alarmCount }} + </template> + </el-table-column> + <el-table-column prop="position" label="位置" align="center" show-overflow-tooltip></el-table-column> + <el-table-column label="操作" align="center" width="200"> + <template #default="scope"> + <el-button class="table_btn" size="mini" v-if="showButton('update')" + @click="updateProp(scope.$index)">库存校正</el-button> + <el-button class="delete_btn" size="mini" v-if="showButton('update')" + @click="updatePropAlarm(scope.$index)">预警设置</el-button> + </template> + </el-table-column> + </el-table> + </div> + <div class="main_footer"> + <el-pagination background @current-change="changePageNum" @size-change="changePageSize" :current-page="pageNum" + :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" + :total="total"> + </el-pagination> + </div> + <el-dialog class="prop_dialog" :title="asyncTitle ? '预警设置' : '库存校正'" :close-on-click-modal="false" + :visible.sync="asyncVisible" width="35%"> + <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form"> + <el-form-item label="预埋件名称:" prop="embedmentName"> + <el-input v-model="ruleForm.embedmentName" :size="size" clearable placeholder="请输入物品名称" + :disabled="disabled"></el-input> + </el-form-item> + <el-form-item label="规格型号:" prop="embedmentModel"> + <el-input v-model="ruleForm.embedmentModel" :size="size" clearable placeholder="请输入规格型号" + :disabled="disabled"></el-input> + </el-form-item> + <el-form-item label="库存数量:" prop="correctionBefore" v-if="!asyncTitle"> + <el-input v-model="ruleForm.correctionBefore" :size="size" clearable placeholder="请输入库存数量" + :disabled="disabled"></el-input> + </el-form-item> + <el-form-item label="校正数量:" prop="correctionNum" v-if="!asyncTitle"> + <el-input v-model="ruleForm.correctionNum" type="number" :size="size" clearable placeholder="请输入校正数量" + @input="changeAfter"></el-input> + </el-form-item> + <el-form-item label="校正后数量:" prop="correctionAfter" v-if="!asyncTitle"> + <el-input v-model="ruleForm.correctionAfter" :size="size" clearable placeholder="请输入校正后数量" + :disabled="true"></el-input> + </el-form-item> + <el-form-item label="预警数量:" prop="alarmCount" v-if="asyncTitle"> + <el-input v-model="ruleForm.alarmCount" :size="size" clearable placeholder="请输入预警数量"></el-input> + </el-form-item> + <el-form-item label="备注:" prop="remark" v-if="!asyncTitle"> + <el-input v-model="ruleForm.remark" :size="size" type="textarea" :rows="2" 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="asyncTitle ? submitInsert() : submitUpdate()">提 交</el-button> + </div> + </el-dialog> + </div> +</template> + +<script> +import {buttonPinia} from '@/pinia/index'; +import {throttle, changeSize, downFiles} from '@/plugins/public'; // 导入节流、动态切换组件尺寸方法 +export default { + data() { + return { + size: changeSize(), // 组件尺寸 + pageNum: 1, + pageSize: 10, + id: "",//一行ID + search: {},//查询条件 + total: 0, + loading: false, + disabled: false,//是否禁止修改 + dataList: [], //库存管理信息列表 + asyncTitle: true, // 对话框title 预警设置:true 库存校正:false + asyncVisible: false, // 添加 修改对话框 + ruleForm: { + }, // 按钮表单 + rules: { + embedmentName: [{ + required: true, + message: '请输入预埋件名称', + trigger: 'blur' + }], + embedmentModel: [{ + required: true, + message: '请输入规格型号', + trigger: 'blur' + }], + alarmCount: [{ + required: true, + message: '请输入预警数量', + trigger: 'blur' + }], + correctionBefore: [{ + required: true, + message: '请输入库存数量', + trigger: 'blur' + }], + correctionNum: [{ + required: true, + message: '请输入校正数量', + trigger: 'blur' + }], + correctionAfter: [{ + required: true, + message: '请输入校正后数量', + trigger: 'blur' + }], + }, + } + }, + watch: { + asyncVisible(bol) { + if (!bol) { + this.ruleForm = {}; + this.$refs.ruleForm.resetFields(); + } + } + }, + mounted() { + const that = this; + // 根据窗口大小动态修改组件尺寸 + window.onresize = () => { + that.size = changeSize(); + } + }, + methods: { + cellStyle({row, column}) { + if (row.stock <= row.alarmCount && column.property == "stock") { + return { + 'color': 'red' + } + } + }, + //计算出校正后重量 + changeAfter() { + this.$set(this.ruleForm, 'correctionAfter', this.ruleForm.correctionBefore + this.ruleForm.correctionNum * 1) + }, + // 转圈圈 + functionLoading() { + this.loadingView = this.$loading({ + lock: true, + text: '请稍后...', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }); + }, + //导出Excel + exportFile() { + this.functionLoading(); + let params = Object.assign({}, this.search) + this.$api.Materials.embedded.inventExportxls(params).then(res => { + downFiles(res, '库存管理信息', 'xls') + this.loadingView.close() + }) + .catch(() => { + this.loadingView.close(); + }) + }, + // 查询按钮列表信息 + searchButtonInfo(bol) { + if (bol) { + this.pageNum = 1; + } + let params = Object.assign({}, this.search, { + pageNum: this.pageNum, + pageSize: this.pageSize + }) + this.loading = true; + this.$api.Materials.embedded.inventGetLists(params).then((res) => { + if (res.statusMsg === 'ok') { + this.total = res.data.total; + this.dataList = res.data.list; + } + this.loading = false; + }) + }, + //预警设置按钮 + updatePropAlarm(index) { + const row = {...this.dataList[index]} + this.id = row.id + this.asyncTitle = true; + this.asyncVisible = true; + this.disabled = true + this.ruleForm = row + }, + //库存校正按钮 + updateProp(index) { + const row = {...this.dataList[index]} + this.id = row.id + this.asyncTitle = false; + this.asyncVisible = true; + this.disabled = true + this.ruleForm = row + this.ruleForm.correctionBefore = row.stock + this.ruleForm.remark = row.remark + }, + // 提交库存校正按钮信息 + submitUpdate: throttle(function () { + this.$refs.ruleForm.validate((valid) => { + if (valid) { + const params = { + id: this.ruleForm.id, + correctionNum: this.ruleForm.correctionNum, + correctionAfter: this.ruleForm.correctionAfter, + correctionBefore: this.ruleForm.correctionBefore, + remark: this.ruleForm.remark, + } + this.$api.Materials.embedded.inventCheck(params).then((res) => { + if (res.statusMsg === 'ok') { + this.asyncVisible = false; + this.searchButtonInfo(true); + this.$message.success('库存校正成功!'); + } else { + this.$message.warning(res.statusMsg); + } + }) + } + }) + }, 3000), + // 提交预警设置按钮信息 + submitInsert: throttle(function () { + this.$refs.ruleForm.validate((valid) => { + if (valid) { + const params = { + id: this.ruleForm.id, + alarmCount: this.ruleForm.alarmCount + } + this.$api.Materials.embedded.inventPresAlarm(params).then((res) => { + if (res.statusMsg === 'ok') { + this.asyncVisible = false; + this.searchButtonInfo(true); + this.$message.success('预警设置成功!'); + } else { + this.$message.warning(res.statusMsg); + } + }) + } + }) + }, 3000), + // 判断按钮权限信息 + showButton(str) { + const pinia = buttonPinia(); + return pinia.$state.buttonInfo.includes(str); + }, + // 切换页数 + changePageNum(page) { + this.pageNum = page; + this.searchButtonInfo(); + }, + // 切换每页条数 + changePageSize(size) { + this.pageSize = size; + this.searchButtonInfo(); + } + } +} +</script> + +<style lang="scss" scoped> +@import '@/style/layout-main.scss'; </style> \ No newline at end of file diff --git a/web/src/views/ProjectManage/SectionManage.vue b/web/src/views/ProjectManage/SectionManage.vue index 62948e6..713921e 100644 --- a/web/src/views/ProjectManage/SectionManage.vue +++ b/web/src/views/ProjectManage/SectionManage.vue @@ -254,7 +254,7 @@ return this.submitMode === 'update' }, dialogTitle() { - return this.isUpdate ? '修改新增单位工程' : '新增单位工程' + return this.isUpdate ? '修改单位工程' : '新增单位工程' }, }, created() { 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 diff --git a/web/src/views/SecureManage/RiskGrad/DangerInform.vue b/web/src/views/SecureManage/RiskGrad/DangerInform.vue index b994119..c1499b0 100644 --- a/web/src/views/SecureManage/RiskGrad/DangerInform.vue +++ b/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> \ No newline at end of file -- Gitblit v1.9.3