airConditionerWebManager/src/views/accountMgr/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">账号管理</div>
						</div>
						<div class="title-right">
							<el-button type="primary" @click="add_account">添加账号</el-button>
						</div>
					</div>
					<div class="cell-body">
						<el-table :data="tableData" height="560" style="width: 100%" :cell-style="cell_style"
							:header-cell-style="header_cell_style">
							<el-table-column label="序号" align="center" width="100">
								<template slot-scope="scope">
									<span>{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1}}</span>
								</template>
							</el-table-column>
							<el-table-column label="手机" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.phone }}</span>
								</template>
							</el-table-column>
							<el-table-column label="姓名" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="角色" align="center">
								<template slot-scope="scope">
									{{scope.row.role}}
								</template>
							</el-table-column>
							<el-table-column label="备注" align="center" width="200">
								<template slot-scope="scope">
									<span>{{ scope.row.comment }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button size="mini" class="btn-table"
										@click="edit_amount(scope.$index, scope.row)">修改</el-button>
									<el-button size="mini" class="btn-table" type="danger"
										@click="delete_amount(scope.$index, scope.row)">
										删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-table">
							<el-pagination @current-change="currentPageChange"
								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
								layout="prev, pager, next, jumper" :total="pagination.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-dialog title="添加账号" :visible.sync="dialogAddAcountFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_account_dialog_close">
			<el-form :model="formAddAcount">
				<el-form-item label="手机号：" :label-width="formLabelWidth" :required="true">
					<el-input v-model="formAddAcount.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true">
					<el-input v-model="formAddAcount.username" autocomplete="off" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="角　色：" :label-width="formLabelWidth" :required="true">
					<el-checkbox-group v-model="formAddAcount.checkedRole" :min="0" :max="1">
						<el-checkbox v-for="(role, index) in formAddAcount.roles" :label="role" :key="index">{{role}}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="备　注：" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="formAddAcount.comment" placeholder="请输入备注信息"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddAcountFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogAddAcountFormVisible = false">确 认</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改账号" :visible.sync="dialogModifyAcountFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="modify_account_dialog_close">
			<el-form :model="formModifyAcount">
				<el-form-item label="手机号：" :label-width="formLabelWidth" :required="true">
					<el-input v-model="formModifyAcount.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true">
					<el-input v-model="formModifyAcount.username" autocomplete="off" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="角　色：" :label-width="formLabelWidth" :required="true">
					<el-checkbox-group v-model="formModifyAcount.checkedRole" :min="0" :max="1">
						<el-checkbox v-for="(role, index) in formModifyAcount.roles" :label="role" :key="role">{{role}}
						</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="备　注：" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="formModifyAcount.comment" placeholder="请输入备注信息"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogModifyAcountFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogModifyAcountFormVisible = false">确 认</el-button>
			</div>
		</el-dialog>
		<el-dialog custom-class="el-dialog-delete-account" :visible.sync="dialog_delete_account"
			: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">是否确定将该【{{delete_account}}】从列表中移除？</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog_delete_account = false"> 否 </el-button>
				<el-button type="primary" @click="dialog_delete_account = false"> 是 </el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	const roleOptions = ['管理员', '浏览员'];
	export default {
		data() {
			return {
				dialogAddAcountFormVisible: false, // 添加账号对话框显示与隐藏
				formAddAcount: { // 添加账号对话框 数据
					phone: '',
					username: '',
					comment: '',
					checkedRole: [],
					roles: roleOptions
				},
				dialogModifyAcountFormVisible: false, // 修改账号对话框显示与隐藏
				formModifyAcount: { // 修改账号对话框 数据
					phone: '',
					username: '',
					comment: '',
					checkedRole: [],
					roles: roleOptions
				},
				dialog_delete_account: false,
				delete_account: '',
				formLabelWidth: '120px',
				// 表格单元格样式
				cell_style: {
					color: '#1A202B',
					'font-size': '14px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表格头部样式
				header_cell_style: {
					background: '#E6ECFE',
					color: '#1A202B',
					'font-size': '16px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				tableData: [{
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '浏览员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}, {
					name: '王小虎',
					phone: '18988888888',
					role: '管理员',
					comment: '此处是备注内容'
				}],
				// 分页参数
				pagination: {
					pageSize: 10,
					currentPage: 1,
					total: 100
				}
			}
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			/**
			 * 删除账号
			 * @param {Object} index
			 * @param {Object} row
			 */
			delete_amount(index, row) {
				console.log(row);
				this.delete_account = row.name
				this.dialog_delete_account = true
			},
			/**
			 * 修改账号
			 * @param {Object} index
			 * @param {Object} row
			 */
			edit_amount(index, row) {
				this.dialogModifyAcountFormVisible = true
				this.formModifyAcount.phone = row.phone
				this.formModifyAcount.username = row.name
				this.formModifyAcount.checkedRole.push(row.role)
				this.formModifyAcount.comment = row.comment
			},
			/**
			 * 添加账号
			 */
			add_account() {
				this.dialogAddAcountFormVisible = true
			},
			/**
			 * 添加账号对话框关闭时清理数据
			 */
			add_account_dialog_close() {
				this.formAddAcount = {
					phone: '',
					username: '',
					comment: '',
					checkedRole: [],
					roles: roleOptions
				}
			},
			/**
			 * 添加账号对话框关闭时清理数据
			 */
			modify_account_dialog_close() {
				this.formModifyAcount = {
					phone: '',
					username: '',
					comment: '',
					checkedRole: [],
					roles: roleOptions
				}
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				console.log('当前页:' + val);
			}
		}
	}
</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;

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

						.title-left {
							display: flex;
							align-items: center;

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

							.title-detail {
								margin-left: 50px;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								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 {

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

						.pagination-table {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							margin-top: 20px;
							padding-right: 100px;

							::v-deep .el-pagination {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}

							::v-deep .el-pagination ul {
								display: flex;

							}

							::v-deep .el-pagination button,
							::v-deep .el-pagination li {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								border-radius: 3px;
								font-size: 14px;
								margin: 0 5px;
							}

							::v-deep .el-pagination span {
								margin-left: 10px;
							}

							::v-deep .el-pagination .el-pagination__jump {
								font-size: 16px;
							}

							::v-deep .el-pagination .el-pagination__editor {
								width: 50px;
								height: 36px;
								margin: 0 5px;
							}

							::v-deep .el-pagination .el-input__inner {
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								margin: -4px 0 0 0;
							}
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 600px;
			height: 460px;
			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 {
					width: 180px;
				}
			}

			// 删除对话框的样式
			.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>
	.el-dialog-delete-account {
		height: 300px !important;
		width: 460px !important;
	}

	.el-dialog-delete-account .el-dialog__header {
		display: none !important;
	}
</style>