airConditionerWebManager/src/views/feilvSet/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title">费率管理</div>
						<div class="title-right">
							<!-- <el-button type="primary" @click="handler_download_excel">导出表单</el-button> -->
							<el-button type="warning" @click="add_feilv">新增费率</el-button>
						</div>
					</div>
					<div class="cell-body">
						<el-table :data="tableData" height="610" style="width: 100%" :cell-style="cell_style"
							v-loading="loading" :header-cell-style="header_cell_style">
							<!-- <el-table-column label="id" align="center" width="100">
								<template slot-scope="scope">
									<span>{{scope.row.id}}</span>
								</template>
							</el-table-column> -->
							<el-table-column label="型号(匹)" align="center" width="180">
								<template slot-scope="scope">
									<span>{{ scope.row.air_config }}</span>
								</template>
							</el-table-column>
							<el-table-column label="费率(元)" align="center" width="180">
								<template slot-scope="scope">
									<span>{{ scope.row.rate }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="left">
								<template slot-scope="scope">
									<el-button v-if="currentUserLevel == 2" size="mini" class="btn-table"
										@click="modifyFeilv_dialog(scope.$index, scope.row)">修改</el-button>
									<el-button size="mini" class="btn-table" type="danger"
										@click="delete_feilv(scope.$index, scope.row)">
										删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 新增费率对话框 -->
		<el-dialog title="新增费率" custom-class="add-user-dialog" :visible.sync="dialogAddFeilvVisible"
			:close-on-click-modal="false" :close-on-press-escape="false" @close="dialog_close('addFeilvForm')">
			<el-form :model="addForm" ref="addFeilvForm" :rules="addFormRules">
				<el-form-item label="型号：" :label-width="formLabelWidth" :required="true" prop="air_config">
					<el-input v-model="addForm.air_config" autocomplete="off" maxlength="3" ref="airconfig_focus">
						<template slot="append">匹</template>
					</el-input>
				</el-form-item>
				<el-form-item label="费率：" :label-width="formLabelWidth" :required="true" prop="rate">
					<el-input v-model="addForm.rate" autocomplete="off" maxlength="4">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddFeilvVisible = false">取 消</el-button>
				<el-button type="primary" @click="handler_add_feilv">新 增</el-button>
			</div>
		</el-dialog>
		<!-- 修改费率对话框 -->
		<el-dialog title="修改费率" custom-class="modify-feilv-dialog" :visible.sync="dialogModifyFeilvVisible"
			:close-on-click-modal="false" :close-on-press-escape="false" @close="dialog_close('modifyForm')">
			<el-form :model="form" ref="modifyForm" :rules="modifyRules">
				<el-form-item label="型号：" :label-width="formLabelWidth" :required="true" prop="air_config_modify">
					<el-input v-model="form.air_config_modify" autocomplete="off" maxlength="3" ref="modifyFeilv_focus">
						<template slot="append">匹</template>
					</el-input>
				</el-form-item>
				<el-form-item label="费率：" :label-width="formLabelWidth" :required="true" prop="rate_modify">
					<el-input v-model="form.rate_modify" autocomplete="off" maxlength="4">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogModifyFeilvVisible = false">取 消</el-button>
				<el-button type="primary" @click="handler_modify_feilv">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 删除费率对话框 -->
		<el-dialog custom-class="el-dialog-delete-feilv" :visible.sync="dialog_delete_feilv"
			:close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div slot="" class="del-account-body">
				<img src="../../icons/serveAC/del_warning.png" alt="">
				<div class="del-account-body-txt">是否确定将该【{{delForm.air_config}}】从列表中移除？</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_delete_feilv = false"> 否 </el-button>
				<el-button type="primary" @click="delete_fielv_dialog"> 是 </el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getList,
		addFeilv,
		modifyFeilv,
		delFeilv
	} from '@/api/feilvSet';
	export default {
		data() {
			var checkAirConfig = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入型号，最多3位整数或小数！'));
				}
				setTimeout(() => {
					var reg = /^[1-9]{1}$|^[1-9][\.][0-9]{1}$/
					if (!reg.test(value)) {
						callback(new Error('必须正整数或小数，如：1.5 或 5'));
					} else {
						callback();
					}
				}, 100);
			}
			var checkFeilv = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入费率，最多4位整数或小数！'));
				}
				setTimeout(() => {
					var reg = /^[1-9]{1,2}$|^[1-9][\.][0-9]{1,2}$/
					if (!reg.test(value)) {
						callback(new Error('必须正整数或小数'));
					} else {
						callback();
					}
				}, 100);
			}
			return {
				// 当前费率的权限
				currentUserLevel: this.$store.state.user.level,
				// 弹出对话框数据
				dialogModifyFeilvVisible: false,
				form: {
					id: '',
					air_config_modify: '',
					rate_modify: ''
				},
				modifyRules: {
					air_config_modify: [{
						validator: checkAirConfig
					}],
					rate_modify: [{
						validator: checkFeilv
					}]
				},
				// 添加费率对话框数据
				dialogAddFeilvVisible: false,
				addForm: {
					air_config: '',
					rate: ''
				},
				addFormRules: {
					air_config: [{
						validator: checkAirConfig
					}],
					rate: [{
						validator: checkFeilv
					}]
				},
				delForm: {
					id: '',
					air_config: '',
					rate: ''
				},
				dialog_delete_feilv: false,
				tableData: [],
				formLabelWidth: '120px',
				// 表格单元格样式
				cell_style: {
					color: '#1A202B',
					'font-size': '16px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表格头部样式
				header_cell_style: {
					background: '#E6ECFE',
					color: '#1A202B',
					'font-size': '18px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				loading: true
			}
		},
		created() {
			// 获取费率列表数据
			this.get_list()
		},
		methods: {
			delete_feilv(index, row) {
				// console.log(index, row);
				this.delForm.id = row.id
				this.delForm.air_config = row.air_config
				this.delForm.rate = row.rate
				this.dialog_delete_feilv = true
			},
			delete_fielv_dialog() {
				let params = {
					id: this.delForm.id,
					// air_config: this.delForm.air_config,
					// rate: this.delForm.rate
				}
				delFeilv(params).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！')
						return
					}
				
					if (res.code == 200) {
						this.dialog_delete_feilv = false
						this.$message.success('删除费率成功！')
						this.get_list('list')
					} else {
						this.$message.error(res.message)
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 修改费率
			 */
			handler_modify_feilv() {
				this.$refs["modifyForm"].validate(validate => {
					if (validate) {
						let params = {
							id: this.form.id,
							air_config: this.form.air_config_modify + '匹',
							rate: this.form.rate_modify
						}
						// console.log(params);
						// 开始发送请求，获取配置数据
						modifyFeilv(params).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.dialogModifyFeilvVisible = false
								this.$message.success('修改费率成功！')
								this.get_list('list')
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 打开新增费率对话框
			 */
			add_feilv() {
				this.dialogAddFeilvVisible = true

				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.airconfig_focus.focus()
					})
				}, 100)
			},
			/**
			 * 新增费率
			 */
			handler_add_feilv() {
				this.$refs["addFeilvForm"].validate(validate => {
					// console.log(typeof validate);
					// console.log(validate);
					if (validate) {
						let params = {
							air_config: this.addForm.air_config + '匹',
							rate: this.addForm.rate
						}
						// 开始发送请求，获取配置数据
						addFeilv(params).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.dialogAddFeilvVisible = false
								this.$message.success('新增费率成功！')
								this.get_list('list')
							} else {
								this.$message.error(res.message)
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 获取费率列表数据
			 */
			get_list() {
				this.loading = true
				// 开始发送请求，获取配置数据
				getList().then((res) => {
					// console.log(res.data);
					if (res.code == 200) {
						let resdata = res.data;
						this.tableData = []
						for (var i = 0; i < resdata.length; i++) {
							this.tableData.push(resdata[i])
						}
					} else {
						this.tableData = []
						this.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				});
				// loading结束
				this.loading = false
			},
			/**
			 * 修改费率对话框初始化
			 * @param {Object} index
			 * @param {Object} row
			 */
			modifyFeilv_dialog(index, row) {
				// console.log(index, row);
				this.dialogModifyFeilvVisible = true
				this.form.id = row.id
				this.form.air_config_modify = row.air_config.substr(0, row.air_config.length - 1)
				this.form.rate_modify = row.rate
				// 使金额输入框input_amount获得焦点
				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.modifyFeilv_focus.focus()
					})
				}, 100)
			},
			/**
			 * 对话框关闭时清理数据
			 */
			dialog_close(param) {
				if (param == 'addFeilvForm') {
					this.addForm.air_config = ''
					this.addForm.rate = ''
				} else if (param == 'modifyForm') {
					this.form.id = ''
					this.form.air_config_modify = ''
					this.form.rate_modify = ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title {
							font-size: 22px;
							font-family: Microsoft YaHei-3970(82674968);
							font-weight: bold;
							color: #1A202B;
						}

						.title-right {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.el-button {
								width: 110px;
								height: 46px;
								background: #2B4CFE;
								font-size: 18px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
							}

							.el-button--warning {
								background: #F88A64;
							}
						}
					}

					.cell-body {

						.el-button--warning {
							background: #F88A64;
						}

						.btn-table {
							border-radius: 15px !important;
							border-color: #5488FE;
							background: #FFFFFF;
							color: #5488FE;
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 400px;
			height: 500px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.el-dialog__header {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 30px;
				background: #E6EBFE;
				border-radius: 10px 10px 0px 0px;
				font-weight: bold;
			}

			.el-dialog__body {
				padding-bottom: 0;

				.el-form-item__label,
				.el-form-item__content {
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #53575A;
				}

				// .el-input__inner {
					
				// }
			}
			
			// 删除对话框的样式
			.del-account-body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 180px;
			
				img {
					width: 72px;
				}
			
				.del-account-body-txt {
					height: 58px;
					line-height: 58px;
					font-size: 18px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #333333;
				}
			}

			.el-dialog__footer {
				padding-bottom: 0 !important;
				text-align: center;

				.el-button.el-button--default {
					width: 75px;
					height: 40px;
					border: 1px solid #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #2B4CFE;
				}

				.el-button.el-button--primary {
					width: 75px;
					height: 40px;
					background: #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #FFFFFF;
					margin-left: 60px;
				}
			}
		}
	}
</style>

<style>
	.add-user-dialog {
		height: 300px !important;
	}

	.modify-feilv-dialog {
		height: 300px !important;
	}
	
	.el-dialog-delete-feilv {
		height: 300px !important;
		width: 460px !important;
	}
	
	.el-dialog-delete-feilv .el-dialog__header {
		display: none !important;
	}
</style>