~zhangleilei/supipe.git

			@@ -1,3 +1,260 @@
			<template>
			<div>危险源告知</div>
			</template>
			<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>