Homestay_manage_owner/src/views/residentialhostelMgr/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>
					<div class="cell-body">
						<div class="controls">
							<el-form :inline="true" :model="formInline" class="demo-form-inline">
								<el-form-item label="所属乡镇">
									<el-select v-model="formInline.id" clearable placeholder="请选择">
										<el-option v-for="item in formInline.options" :key="item.id" :label="item.hotelTownship" :value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="">
									<el-input v-model="formInline.adminName" prefix-icon="el-icon-search" clearable placeholder="请输入关键字"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" class="btn-search" @click="btn_search">查询</el-button>
								</el-form-item>
							</el-form>
							<div class="right-btns">
								<el-button type="primary" class="export" @click="add_house_dialog">添加民宿</el-button>
								<el-button type="primary" class="export" @click="hostelConfiguration">民宿配置</el-button>
							</div>
						</div>
						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style" v-loading="loading"
							:header-cell-style="header_cell_style">
							<el-table-column type="expand" width="58">
								<template slot-scope="props">
									<el-form label-position="left" inline class="demo-table-expand">
										<el-form-item label="银行卡号">
											<span>{{ props.row.bankCard }}</span>
										</el-form-item>
										<el-form-item label="银行名称">
											<span>{{ props.row.bankName }}</span>
										</el-form-item>
										<el-form-item label="卡户主姓名">
											<span>{{ props.row.cardName }}</span>
										</el-form-item>
										<el-form-item label="权限">
											<span>{{ props.row.level == 1 ? '管理员' : '超级管理员' }}</span>
										</el-form-item>
										<el-form-item label="创建时间">
											<span>{{ props.row.createDate }}</span>
										</el-form-item>
										<el-form-item label="修改时间">
											<span>{{ props.row.modifyDate }}</span>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column label="序号" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.xuhao }}</span>
								</template>
							</el-table-column>
							<el-table-column label="状态" align="center" width="80">
								<template slot-scope="scope">
									<span>{{ scope.row.status === 1 ? '正常' : '已冻结' }}</span>
								</template>
							</el-table-column>
							<el-table-column label="民宿名称" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.hotelName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="联系人(法人)" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.corpnName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="联系电话" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.corpnPhone }}</span>
								</template>
							</el-table-column>
							<el-table-column label="所属乡镇" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.hotelTownshipName}}</span>
								</template>
							</el-table-column>
							<el-table-column label="民宿账号" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.adminName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" width="210">
								<template slot-scope="scope">
									<div class="action-btns">
										<el-link class="bg-btn" @click="show_confirm_dialog(scope.$index, scope.row, 'reset')">密码重置</el-link>
										<el-link class="bg-btn" @click="modify_house_dialog(scope.$index, scope.row)">修改</el-link>
										<el-link v-if="scope.row.status === 1" type="primary"
											@click="show_confirm_dialog(scope.$index, scope.row, 'frozen')">冻结</el-link>
										<el-link v-if="scope.row.status === 2" type="warning"
											@click="show_confirm_dialog(scope.$index, scope.row, 'thaw')">解冻</el-link>
										<el-link type="danger" @click="show_confirm_dialog(scope.$index, scope.row, 'delete')">删除</el-link>
									</div>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-table">
							<div class="txt-notice">注：账号解冻后，密码默认为Jams_123456</div>
							<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="添加民宿" custom-class="add-house-class" :visible.sync="dialogAddHostelFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-form :model="formAddHostel" ref="addHostelForm" :rules="addHostelFormRules">
				<el-row>
					<el-col :span="12">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">民宿信息</div>
						<el-form-item label="民宿名称：" :label-width="formLabelWidth" :required="true" prop="hotelName">
							<el-input v-model="formAddHostel.hotelName" autocomplete="off" placeholder="请输入民宿名称" maxlength="20">
							</el-input>
						</el-form-item>
						<el-form-item label="法人姓名：" :label-width="formLabelWidth" :required="true" prop="corpnName">
							<el-input v-model="formAddHostel.corpnName" autocomplete="off" placeholder="请输入法人姓名" maxlength="8">
							</el-input>
						</el-form-item>
						<el-form-item label="法人电话：" :label-width="formLabelWidth" :required="true" prop="corpnPhone">
							<el-input v-model="formAddHostel.corpnPhone" autocomplete="off" placeholder="请输入法人电话" maxlength="13">
							</el-input>
						</el-form-item>
						<el-form-item label="所属乡镇：" :label-width="formLabelWidth" :required="true" prop="id">
							<el-select v-model="formAddHostel.id" clearable placeholder="请选择乡镇" @change="getHotelId($event)">
								<el-option v-for="item in formAddHostel.options" :key="item.id" :label="item.hotelTownship" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="民宿账号：" :label-width="formLabelWidth" :required="true" prop="adminName">
							<el-input v-model="formAddHostel.adminName" autocomplete="off" placeholder="请输入民宿账号" maxlength="16">
							</el-input>
						</el-form-item>
						<div
							style="font-size: 18px;font-weight: 400;letter-spacing: 0px;line-height: 26.06px;color: rgba(212, 48, 48, 1);text-align: left;vertical-align: top;">
							注：账号解冻后，密码默认为Jams_123456</div>
					</el-col>
					<el-col :span="12">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">提现信息</div>
						<el-form-item label="银行卡号：" :label-width="formLabelWidth" :required="true" prop="bankCard">
							<el-input v-model="formAddHostel.bankCard" autocomplete="off" placeholder="请输入银行卡号" maxlength="19">
							</el-input>
						</el-form-item>
						<el-form-item label="户主姓名：" :label-width="formLabelWidth" :required="true" prop="cardName">
							<el-input v-model="formAddHostel.cardName" autocomplete="off" placeholder="请输入户主姓名" maxlength="8">
							</el-input>
						</el-form-item>
						<el-form-item label="银行名称：" :label-width="formLabelWidth" :required="true" prop="bankName">
							<el-input v-model="formAddHostel.bankName" autocomplete="off" placeholder="请输入银行名称" maxlength="10">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0px 0 20px 20px;">营业执照</div>
						<el-form-item label="" :required="true" prop="fileUrl">
							<pl-upload v-model="formAddHostel.fileUrl" :times="times" :linkUrl="formAddHostel.url" :limitCount="6" :type="1"></pl-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div
				style="font-size: 18px;font-weight: 400;letter-spacing: 0px;line-height: 26.06px;color: rgba(212, 48, 48, 1);text-align: left;vertical-align: top;">
				（注：最多可上传6张图片）</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddHostelFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="add_house_dialog_handler">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 修改民宿对话框 -->
		<el-dialog title="修改民宿" custom-class="modify-house-class" :visible.sync="dialogModifyHostelFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="modify_house_dialog_close">
			<el-form :model="formModifyHostel" ref="modifyHostelForm" :rules="modifyHostelFormRules">
				<el-row>
					<el-col :span="12">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">民宿信息</div>
						<el-form-item label="民宿名称：" :label-width="formLabelWidth" :required="true" prop="hotelName">
							<el-input v-model="formModifyHostel.hotelName" autocomplete="off" placeholder="请输入民宿名称" maxlength="20">
							</el-input>
						</el-form-item>
						<el-form-item label="法人姓名：" :label-width="formLabelWidth" :required="true" prop="corpnName">
							<el-input v-model="formModifyHostel.corpnName" autocomplete="off" placeholder="请输入法人姓名" maxlength="8">
							</el-input>
						</el-form-item>
						<el-form-item label="法人电话：" :label-width="formLabelWidth" :required="true" prop="corpnPhone">
							<el-input v-model="formModifyHostel.corpnPhone" autocomplete="off" placeholder="请输入法人电话" maxlength="13">
							</el-input>
						</el-form-item>
						<el-form-item label="所属乡镇：" :label-width="formLabelWidth" :required="true" prop="id">
							<el-select v-model="formModifyHostel.hotelTownship" clearable placeholder="请选择乡镇">
								<el-option v-for="item in formModifyHostel.options" :key="item.id" :label="item.hotelTownship" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="民宿账号：" :label-width="formLabelWidth" :required="true" prop="adminName">
							<el-input v-model="formModifyHostel.adminName" autocomplete="off" placeholder="请输入民宿账号" maxlength="16">
							</el-input>
						</el-form-item>
						<div
							style="font-size: 18px;font-weight: 400;letter-spacing: 0px;line-height: 26.06px;color: rgba(212, 48, 48, 1);text-align: left;vertical-align: top;">
							注：账号解冻后，密码默认为Jams_123456</div>
					</el-col>
					<el-col :span="12">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">提现信息</div>
						<el-form-item label="银行卡号：" :label-width="formLabelWidth" :required="true" prop="bankCard">
							<el-input v-model="formModifyHostel.bankCard" autocomplete="off" placeholder="请输入银行卡号" maxlength="19">
							</el-input>
						</el-form-item>
						<el-form-item label="户主姓名：" :label-width="formLabelWidth" :required="true" prop="cardName">
							<el-input v-model="formModifyHostel.cardName" autocomplete="off" placeholder="请输入户主姓名" maxlength="8">
							</el-input>
						</el-form-item>
						<el-form-item label="银行名称：" :label-width="formLabelWidth" :required="true" prop="bankName" maxlength="10">
							<el-input v-model="formModifyHostel.bankName" autocomplete="off" placeholder="请输入银行名称">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0px 0 20px 20px;">营业执照</div>
						<el-form-item label="" :required="true" prop="fileUrl">
							<pl-upload v-model="formModifyHostel.fileUrl" :linkId="formModifyHostel.id" :limitCount="6" :type="1"></pl-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div
				style="font-size: 18px;font-weight: 400;letter-spacing: 0px;line-height: 26.06px;color: rgba(212, 48, 48, 1);text-align: left;vertical-align: top;">
				（注：最多可上传6张图片）</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyHostelFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="modify_house_dialog_handler">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 民宿配置 -->
		<el-dialog title="民宿配置" custom-class="configuration-window" :visible.sync="dialogResidentialHostelConfigurationVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="residential_hostel_configuration_dialog_close">
			<el-tabs v-model="activeName" @tab-click="tabHandleClick">
				<el-tab-pane label="民宿类型" name="first">
					<el-row>
						<el-col :span="24" class="configure-btn-position">
							<el-button class="configure-btn" @click="add_dictionary_dialog(1)">添加</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-table :data="tableData_hostel_class" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
								: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.name }}</span>
									</template>
								</el-table-column>
								<el-table-column label="操作" align="center" width="110">
									<template slot-scope="scope">
										<div class="action-btns">
											<el-link class="bg-btn" @click="show_modify_dictionary_dialog(scope.$index, scope.row, 1)">编辑</el-link>
											<el-link type="danger" @click="delete_dictionary_dialog(scope.$index, scope.row)">删除</el-link>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="民宿服务" name="second">
					<el-row>
						<el-col :span="24" class="configure-btn-position">
							<el-button class="configure-btn" @click="add_dictionary_dialog(2)">添加</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-table :data="tableData_hostel_service" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
								: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" width="128">
									<template slot-scope="scope">
										<img :src="scope.row.fileUrl" width="24" height="24">
									</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" width="110">
									<template slot-scope="scope">
										<div class="action-btns">
											<el-link class="bg-btn" @click="show_modify_dictionary_dialog(scope.$index, scope.row, 2)">编辑</el-link>
											<el-link type="danger" @click="delete_dictionary_dialog(scope.$index, scope.row)">删除</el-link>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="房型名称" name="third">
					<el-row>
						<el-col :span="24" class="configure-btn-position">
							<el-button class="configure-btn" @click="add_dictionary_dialog(3)">添加</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-table :data="tableData_house_name" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
								: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.name }}</span>
									</template>
								</el-table-column>
								<el-table-column label="操作" align="center" width="110">
									<template slot-scope="scope">
										<div class="action-btns">
											<el-link class="bg-btn" @click="show_modify_dictionary_dialog(scope.$index, scope.row, 3)">编辑</el-link>
											<el-link type="danger" @click="delete_dictionary_dialog(scope.$index, scope.row)">删除</el-link>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="房型服务" name="fourth">
					<el-row>
						<el-col :span="24" class="configure-btn-position">
							<el-button class="configure-btn" @click="add_dictionary_dialog(4)">添加</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-table :data="tableData_house_service" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
								: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" width="128">
									<template slot-scope="scope">
										<img :src="scope.row.fileUrl" alt="" width="24" height="24">
									</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" width="110">
									<template slot-scope="scope">
										<div class="action-btns">
											<el-link class="bg-btn" @click="show_modify_dictionary_dialog(scope.$index, scope.row, 4)">编辑</el-link>
											<el-link type="danger" @click="delete_dictionary_dialog(scope.$index, scope.row)">删除</el-link>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>
		<!-- 添加民宿类型配置字典 不带图标-->
		<el-dialog title="添加民宿类型" custom-class="add-ms-class" :visible.sync="dialogAddDictionaryFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-row>
				<el-col :span="24">
					<el-form :model="add_dictionary_data" ref="addHostelClassForm" :rules="addHostelClassFormRules">
						<el-form-item label="民宿类型：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="add_dictionary_data.name" autocomplete="off" maxlength="10" placeholder="请输入民宿类型">
							</el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddDictionaryFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="add_house_class_dialog_handler(1)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 添加民宿服务配置字典 带图标-->
		<el-dialog title="添加民宿服务" custom-class="add-ms-service" :visible.sync="dialogAddDictionaryServiceFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-form :model="add_dictionary_data" ref="addHostelServiceForm" :rules="addHostelServiceFormRules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="民宿服务：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="add_dictionary_data.name" autocomplete="off" maxlength="16" placeholder="请输入民宿服务">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0px 0 20px 20px;">图标</div>
						<el-form-item label="" :required="true" prop="fileUrl">
							<pl-upload v-model="add_dictionary_data.fileUrl" :times="times" :linkUrl="add_dictionary_data.url" :limitCount="1"
								:type="2"></pl-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddDictionaryServiceFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="add_house_class_dialog_handler(2)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 添加房型名称配置字典 不带图标-->
		<el-dialog title="添加房型名称" custom-class="add-ms-class" :visible.sync="dialogAddDictionaryNameFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-row>
				<el-col :span="24">
					<el-form :model="add_dictionary_data" ref="addHostelNameForm" :rules="addHostelNameFormRules">
						<el-form-item label="房型名称：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="add_dictionary_data.name" autocomplete="off" maxlength="16" placeholder="请输入房型名称">
							</el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddDictionaryNameFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="add_house_class_dialog_handler(3)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 添加房型服务配置字典 带图标-->
		<el-dialog title="添加房型服务" custom-class="add-ms-service" :visible.sync="dialogAddDictionaryHouseServiceFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-form :model="add_dictionary_data" ref="addHouseTypeServiceForm" :rules="addHouseTypeServiceFormRules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="房型服务：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="add_dictionary_data.name" autocomplete="off" maxlength="8" placeholder="请输入房型服务">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0px 0 20px 20px;">图标</div>
						<el-form-item label="" :required="true" prop="fileUrl">
							<pl-upload v-model="add_dictionary_data.fileUrl" :times="times" :linkUrl="add_dictionary_data.url" :limitCount="1"
								:type="2"></pl-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogAddDictionaryHouseServiceFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="add_house_class_dialog_handler(4)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 修改民宿类型配置字典 不带图标-->
		<el-dialog title="修改民宿类型" custom-class="add-ms-class" :visible.sync="dialogModifyDictionaryFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-row>
				<el-col :span="24">
					<el-form :model="modify_dictionary_data" ref="modifyHostelClassForm" :rules="modifyHostelClassFormRules">
						<el-form-item label="民宿类型：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="modify_dictionary_data.name" autocomplete="off" maxlength="10" placeholder="请输入民宿类型">
							</el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyDictionaryFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="modify_house_class_dialog_handler(1)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 修改民宿服务配置字典 带图标-->
		<el-dialog title="修改民宿服务" custom-class="add-ms-service" :visible.sync="dialogModifyDictionaryServiceFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-form :model="modify_dictionary_data" ref="modifyHostelServiceForm" :rules="modifyHostelServiceFormRules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="民宿服务：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="modify_dictionary_data.name" autocomplete="off" maxlength="16" placeholder="请输入民宿服务">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0px 0 20px 20px;">图标</div>
						<el-form-item label="" :required="true" prop="fileUrl">
							<pl-upload v-model="modify_dictionary_data.fileUrl" :linkUrl="modify_dictionary_data.url" :limitCount="1" :type="2"></pl-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyDictionaryServiceFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="modify_house_class_dialog_handler(2)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 修改房型名称配置字典 不带图标-->
		<el-dialog title="修改房型名称" custom-class="add-ms-class" :visible.sync="dialogModifyDictionaryNameFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-row>
				<el-col :span="24">
					<el-form :model="modify_dictionary_data" ref="modifyHostelNameForm" :rules="modifyHostelNameFormRules">
						<el-form-item label="房型名称：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="modify_dictionary_data.name" autocomplete="off" maxlength="16" placeholder="请输入房型名称">
							</el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyDictionaryNameFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="modify_house_class_dialog_handler(3)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 修改房型服务配置字典 带图标-->
		<el-dialog title="修改房型服务" custom-class="add-ms-service" :visible.sync="dialogModifyDictionaryHouseServiceFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" @close="add_house_dialog_close">
			<el-form :model="modify_dictionary_data" ref="modifyHouseTypeServiceForm" :rules="modifyHouseTypeServiceFormRules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="房型服务：" :label-width="formLabelWidth" :required="true" prop="name">
							<el-input v-model="modify_dictionary_data.name" autocomplete="off" maxlength="8" placeholder="请输入房型服务">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0px 0 20px 20px;">图标</div>
						<el-form-item label="" :required="true" prop="fileUrl">
							<pl-upload v-model="modify_dictionary_data.fileUrl" :linkUrl="modify_dictionary_data.url" :limitCount="1" :type="2"></pl-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogModifyDictionaryHouseServiceFormVisible = false">取 消</el-button>
				<el-button class="add-info-confirm-btn" @click="modify_house_class_dialog_handler(4)">确 认</el-button>
			</div>
		</el-dialog>
		<!-- 确认对话框 -->
		<el-dialog custom-class="el-dialog-delete-house" :visible.sync="dialogConfirmVisible" :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_frozen_thaw_Data.prompt_message }}</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="add-info-cancel-btn" @click="dialogConfirmVisible = false"> 否 </el-button>
				<el-button class="add-info-confirm-btn" @click="delete_frozen_thaw_dialog_handler"> 是 </el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getTableData,
		getTowns,
		addHostel,
		modifyHostel,
		delHostelAccount,
		resetHostelAccountPassword,
		frozenHostelAccount,
		thawHostelAccount,
		listHomestayDictionary,
		addHomestayDictionary,
		modifyHomestayDictionary,
		delHomestayDictionary
	} from '@/api/residentialhostelMgr'
	import plUpload from "@/components/pl-upload/index"
	import {
		Level
	} from 'chalk';

	export default {
		components: {
			plUpload
		},
		data() {
			var checkTownId = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请选择乡镇'));
				}
				callback();
			};
			var checkHotelName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入民宿名称'));
				}
				setTimeout(() => {
					var reg = /^[\s\W\u4e00-\u9fa5]{2,20}$/
					if (!reg.test(value)) {
						callback(new Error('不能包含特殊符号和空白字符，2到20个'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkCorpnName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入法人姓名'));
				}
				setTimeout(() => {
					var reg = /^[\u4e00-\u9fa5]{2,10}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含2到10个汉字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkCorpnPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入法人电话'));
				}
				setTimeout(() => {
					var reg = /^(0\d{2,3}-\d{7,8}|1[3456789]\d{9})$/
					if (!reg.test(value)) {
						callback(new Error('请输入手机号或座机'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkAdminName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入民宿账号'));
				}
				setTimeout(() => {
					var reg = /^[a-zA-Z0-9_]{5,16}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含字母、数字和下划线，长度5到16个之间'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkBankCard = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入银行卡号'));
				}
				setTimeout(() => {
					var reg = /^([1-9]{1})(\d{15,18})$/
					if (!reg.test(value)) {
						callback(new Error('银行卡号长度16-19位数字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkCardName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入户主姓名'));
				}
				setTimeout(() => {
					var reg = /^[\u4e00-\u9fa5]{2,8}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含2到8个汉字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkBankName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入银行名称'));
				}
				setTimeout(() => {
					var reg = /^[\u4e00-\u9fa5]{4,10}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含4到10个汉字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkFileUrl = (rule, value, callback) => {
				if (value == '[]' || value == '') {
					return callback(new Error('请上传营业执照'));
				}
				callback();
			};
			var checkHostelCalssName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入民宿类型'));
				}
				setTimeout(() => {
					var reg = /^[\u4e00-\u9fa5]{2,10}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含2到10个汉字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkHostelServiceName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入民宿服务'));
				}
				setTimeout(() => {
					var reg = /^[\u4e00-\u9fa5]{2,10}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含2到10个汉字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkHostelName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入房型名称'));
				}
				setTimeout(() => {
					var reg = /^[\u4e00-\u9fa5]{2,10}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含2到10个汉字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkHouseTypeService = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入房型服务'));
				}
				setTimeout(() => {
					var reg = /^[\u4e00-\u9fa5]{2,8}$/
					if (!reg.test(value)) {
						callback(new Error('只能包含2到8个汉字'));
					} else {
						callback();
					}
				}, 100);
			};
			var checkIcon = (rule, value, callback) => {
				if (value == '[]' || value == '' || value == undefined) {
					return callback(new Error('请上传图标'));
				}
				callback();
			};
			return {
				currentUserLevel: this.$store.state.user.level, // 当前用户的权限
				activeName: 'first', // 默认激活那个选项卡
				dialogResidentialHostelConfigurationVisible: false, // 民宿配置对话框显示和隐藏变量
				dialogAddHostelFormVisible: false, // 添加民宿对话框显示和隐藏变量
				dialogModifyHostelFormVisible: false, // 修改对话框的显示和隐藏变量
				dialogConfirmVisible: false, // 对话框的显示和隐藏变量
				dialogAddDictionaryFormVisible: false, // 添加民宿字典对话框显示和隐藏变量
				dialogAddDictionaryServiceFormVisible: false,
				dialogAddDictionaryNameFormVisible: false,
				dialogAddDictionaryHouseServiceFormVisible: false,
				dialogModifyDictionaryFormVisible: false,
				dialogModifyDictionaryServiceFormVisible: false,
				dialogModifyDictionaryNameFormVisible: false,
				dialogModifyDictionaryHouseServiceFormVisible: false,
				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)'
				},
				// 查询数据
				formInline: {
					options: [],
					id: '',
					adminName: ''
				},
				// 删除、冻结、解冻民宿
				delete_frozen_thaw_Data: {
					prompt_message: '',
					id: '',
					action: ''
				},
				tableData: [],
				// 民宿类别
				tableData_hostel_class: [],
				// 民宿服务
				tableData_hostel_service: [],
				// 房型名称
				tableData_house_name: [],
				// 房型服务
				tableData_house_service: [],
				cond_data: {},
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 9,
					total: 0
				},
				loading: true,
				formAddHostel: {
					options: [],
					id: '',
					hotelTownship: '',
					hotelName: '',
					corpnName: '',
					corpnPhone: '',
					adminName: '',
					bankCard: '',
					cardName: '',
					bankName: '',
					fileUrl: '', // 图片上传列表
					url: '', // 上传的图片列表
					level: this.$store.state.user.level
				},
				addHostelFormRules: {
					hotelName: [{
						validator: checkHotelName
					}],
					corpnName: [{
						validator: checkCorpnName
					}],
					corpnPhone: [{
						validator: checkCorpnPhone
					}],
					id: [{
						validator: checkTownId
					}],
					adminName: [{
						validator: checkAdminName
					}],
					bankCard: [{
						validator: checkBankCard
					}],
					cardName: [{
						validator: checkCardName
					}],
					bankName: [{
						validator: checkBankName
					}],
					fileUrl: [{
						validator: checkFileUrl
					}]
				},
				formModifyHostel: {
					options: [],
					id: '',
					hotelTownship: '',
					hotelTownshipName: '',
					hotelName: '',
					corpnName: '',
					corpnPhone: '',
					adminName: '',
					bankCard: '',
					cardName: '',
					bankName: '',
					fileUrl: '', // 图片上传列表
					url: '', // 上传的图片列表
					level: this.$store.state.user.level
				},
				modifyHostelFormRules: {
					hotelName: [{
						validator: checkHotelName
					}],
					corpnName: [{
						validator: checkCorpnName
					}],
					corpnPhone: [{
						validator: checkCorpnPhone
					}],
					id: [{
						validator: checkTownId
					}],
					adminName: [{
						validator: checkAdminName
					}],
					bankCard: [{
						validator: checkBankCard
					}],
					cardName: [{
						validator: checkCardName
					}],
					bankName: [{
						validator: checkBankName
					}],
					fileUrl: [{
						validator: checkFileUrl
					}]
				},
				// 修改字典数据
				modify_dictionary_data: {
					id: 0,
					code: 0,
					name: '',
					fileUrl: '', // 图片上传列表
					url: ''
				},
				// 增加字典数据
				add_dictionary_data: {
					code: 0,
					name: '',
					fileUrl: '', // 图片上传列表
					url: ''
				},
				// 删除字典数据
				del_dictionary_data: {
					id: ''
				},
				times: '',
				addHostelClassFormRules: {
					name: [{
						validator: checkHostelCalssName
					}]
				},
				addHostelServiceFormRules: {
					name: [{
						validator: checkHostelServiceName
					}],
					fileUrl: [{
						validator: checkIcon
					}]
				},
				addHostelNameFormRules: {
					name: [{
						validator: checkHostelName
					}]
				},
				addHouseTypeServiceFormRules: {
					name: [{
						validator: checkHouseTypeService
					}],
					fileUrl: [{
						validator: checkIcon
					}]
				},
				modifyHostelClassFormRules: {
					name: [{
						validator: checkHostelCalssName
					}]
				},
				modifyHostelServiceFormRules: {
					name: [{
						validator: checkHostelServiceName
					}],
					fileUrl: [{
						validator: checkIcon
					}]
				},
				modifyHostelNameFormRules: {
					name: [{
						validator: checkHostelName
					}]
				},
				modifyHouseTypeServiceFormRules: {
					name: [{
						validator: checkHouseTypeService
					}],
					fileUrl: [{
						validator: checkIcon
					}]
				}
			}
		},
		created() {
			// 检测权限
			if (this.currentUserLevel !== 2) {
				this.$router.replace({
					path: '/data'
				})
				return
			}
			// 获取消费记录,表格数据
			this.get_table_data('list')
			// 获取乡镇
			this.get_towns()
			// 民宿字典列表
			this.getHostelListByCode(1234)
		},
		mounted() {
			// 修改分页栏文字
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			/**
			 * 民宿类型
			 */
			get_listHomestayDictionary_1() {
				// 1.民宿类型
				listHomestayDictionary(1).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						if (typeof res.data !== 'undefined') {
							this.tableData_hostel_class = []
							for (var i = 0; i < res.data.length; i++) {
								this.tableData_hostel_class.push({
									id: res.data[i].id,
									code: res.data[i].code,
									name: res.data[i].name

								})
							}
						}
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 民宿服务
			 */
			get_listHomestayDictionary_2() {
				// 2.民宿服务
				listHomestayDictionary(2).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						if (typeof res.data !== 'undefined') {
							this.tableData_hostel_service = []
							for (var i = 0; i < res.data.length; i++) {
								this.tableData_hostel_service.push({
									id: res.data[i].id,
									code: res.data[i].code,
									name: res.data[i].name,
									fileUrl: res.data[i].fileUrl
								})
							}
						}
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 房型名称
			 */
			get_listHomestayDictionary_3() {
				// 3.房型名称
				listHomestayDictionary(3).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						if (typeof res.data !== 'undefined') {
							this.tableData_house_name = []
							for (var i = 0; i < res.data.length; i++) {
								this.tableData_house_name.push({
									id: res.data[i].id,
									code: res.data[i].code,
									name: res.data[i].name
								});
							}
						}
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			get_listHomestayDictionary_4() {
				// 4.房型服务
				listHomestayDictionary(4).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						if (typeof res.data !== 'undefined') {
							this.tableData_house_service = []
							for (var i = 0; i < res.data.length; i++) {
								this.tableData_house_service.push({
									id: res.data[i].id,
									code: res.data[i].code,
									name: res.data[i].name,
									fileUrl: res.data[i].fileUrl
								});
							}
						}
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 民宿字典列表
			 */
			getHostelListByCode(param) {
				if (param === 1234) {
					this.get_listHomestayDictionary_1()
					this.get_listHomestayDictionary_2()
					this.get_listHomestayDictionary_3()
					this.get_listHomestayDictionary_4()
				} else if (param === 1) {
					this.get_listHomestayDictionary_1()
				} else if (param === 2) {
					this.get_listHomestayDictionary_2()
				} else if (param === 3) {
					this.get_listHomestayDictionary_3()
				} else if (param === 4) {
					this.get_listHomestayDictionary_4()
				}
			},
			// 获取民宿id
			getHotelId(e) {
				this.formAddHostel.id = e
			},
			// tab切换获取code
			tabHandleClick(tab, event) {
				// console.log(tab.index, tab.name, event);
			},
			/**
			 * 显示民宿添加对话框
			 */
			add_house_dialog() {
				this.dialogAddHostelFormVisible = true;

				this.times = new Date().getTime().toString()
			},
			/**
			 * 打开民宿配置对话框
			 */
			hostelConfiguration() {
				this.dialogResidentialHostelConfigurationVisible = true
			},
			// 添加民宿字典，先显示对话框
			add_dictionary_dialog(i) {
				this.clear_add_dictionary_data()

				if (i === 1) {
					this.dialogAddDictionaryFormVisible = true
				} else if (i === 2) {
					this.dialogAddDictionaryServiceFormVisible = true
				} else if (i === 3) {
					this.dialogAddDictionaryNameFormVisible = true
				} else if (i === 4) {
					this.dialogAddDictionaryHouseServiceFormVisible = true
				}
				this.times = new Date().getTime().toString()

				this.add_dictionary_data.code = i;
			},
			// 显示民宿类型修改对话框
			show_modify_dictionary_dialog(index, row, i) {
				// console.log(index, row, i);
				this.modify_dictionary_data.id = row.id
				this.modify_dictionary_data.code = row.code
				this.modify_dictionary_data.name = row.name
				if (typeof row.fileUrl !== 'undefined') {
					this.modify_dictionary_data.url = row.fileUrl
				}

				if (i === 1) {
					this.dialogModifyDictionaryFormVisible = true
				} else if (i === 2) {
					this.dialogModifyDictionaryServiceFormVisible = true
				} else if (i === 3) {
					this.dialogModifyDictionaryNameFormVisible = true
				} else if (i === 4) {
					this.dialogModifyDictionaryHouseServiceFormVisible = true
				}
			},
			/**
			 * 修改民宿字典
			 * @param {Object} index
			 * @param {Object} row
			 */
			modify_house_class_dialog_handler(i) {
				var that = this;
				if (i === 1) {
					that.$refs["modifyHostelClassForm"].validate(validate => {
						if (validate) {
							this.modifyHomestayDictionary_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				} else if (i === 2) {
					that.$refs["modifyHostelServiceForm"].validate(validate => {
						if (validate) {
							this.modifyHomestayDictionary_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				} else if (i === 3) {
					that.$refs["modifyHostelNameForm"].validate(validate => {
						if (validate) {
							this.modifyHomestayDictionary_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				} else if (i === 4) {
					that.$refs["modifyHouseTypeServiceForm"].validate(validate => {
						if (validate) {
							this.modifyHomestayDictionary_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				}
			},
			/**
			 * 修改民宿字典共享函数
			 * @param {Object} i
			 */
			modifyHomestayDictionary_shared(i) {
				var that = this;
				modifyHomestayDictionary(this.modify_dictionary_data).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						that.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						// 重新读取，刷新表格显示
						that.getHostelListByCode(i)

						if (i === 1) {
							that.dialogModifyDictionaryFormVisible = false
						} else if (i === 2) {
							that.dialogModifyDictionaryServiceFormVisible = false
						} else if (i === 3) {
							that.dialogModifyDictionaryNameFormVisible = false
						} else if (i === 4) {
							that.dialogModifyDictionaryHouseServiceFormVisible = false
						}
						that.$message.success(res.message);
					} else {
						that.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					that.$message.error(err.message);
				})
			},
			/**
			 * 删除民宿字典
			 * @param {Object} index
			 * @param {Object} row
			 */
			delete_dictionary_dialog(index, row) {
				// console.log(index, row);
				this.del_dictionary_data.id = row.id
				this.delete_frozen_thaw_Data.prompt_message = `确定删除【${row.name}】吗？`
				this.delete_frozen_thaw_Data.action = 'delDic'

				this.dialogConfirmVisible = true
			},
			/**
			 * 修改民宿
			 */
			modify_house_dialog(index, row) {
				console.log(index, row);
				this.formModifyHostel.id = row.id;
				this.formModifyHostel.hotelTownship = row.hotelTownshipName;
				this.formModifyHostel.hotelName = row.hotelName;
				this.formModifyHostel.corpnName = row.corpnName;
				this.formModifyHostel.corpnPhone = row.corpnPhone;
				this.formModifyHostel.adminName = row.adminName;
				this.formModifyHostel.bankCard = row.bankCard;
				this.formModifyHostel.cardName = row.cardName;
				this.formModifyHostel.bankName = row.bankName;
				// this.formModifyHostel.fileUrl = row.bankName;

				this.dialogModifyHostelFormVisible = true;
				console.log(this.formModifyHostel.fileUrl);
				console.log(this.formModifyHostel.url);
			},
			/**
			 * 关闭添加对话框
			 */
			add_house_dialog_close() {
				// 关闭添加对话框
				this.dialogAddHostelFormVisible = false;
			},
			/**
			 * 关闭民宿配置
			 */
			residential_hostel_configuration_dialog_close() {
				this.dialogResidentialHostelConfigurationVisible = false
			},
			/**
			 * 添加民宿类型
			 */
			add_house_class_dialog_handler(i) {
				var that = this;
				if (i === 1) {
					that.$refs["addHostelClassForm"].validate(validate => {
						if (validate) {
							that.addHostel_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				} else if (i === 2) {
					that.$refs["addHostelServiceForm"].validate(validate => {
						if (validate) {
							that.addHostel_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				} else if (i === 3) {
					that.$refs["addHostelNameForm"].validate(validate => {
						if (validate) {
							that.addHostel_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				} else if (i === 4) {
					that.$refs["addHouseTypeServiceForm"].validate(validate => {
						if (validate) {
							that.addHostel_shared(i)
						} else {
							that.$message.error('请按规范填写');
							return false;
						}
					})
				}
			},
			/**
			 * 
			 * @param {Object} i
			 */
			addHostel_shared(i) {
				addHomestayDictionary(this.add_dictionary_data).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						// 重新读取，刷新表格显示
						this.getHostelListByCode(i);

						if (i === 1) {
							this.dialogAddDictionaryFormVisible = false;
						} else if (i === 2) {
							this.dialogAddDictionaryServiceFormVisible = false
						} else if (i === 3) {
							this.dialogAddDictionaryNameFormVisible = false
						} else if (i === 4) {
							this.dialogAddDictionaryHouseServiceFormVisible = false
						}
						this.clear_add_dictionary_data()
						this.$message.success(res.message);
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			// 初始化字典数据
			clear_add_dictionary_data() {
				this.add_dictionary_data = {
					code: 0,
					name: '',
					fileUrl: '', // 图片上传列表
					url: ''
				}
			},
			/**
			 * 添加民宿操作
			 */
			add_house_dialog_handler() {
				// 调用添加接口
				this.$refs["addHostelForm"].validate(validate => {
					if (validate) {
						addHostel(this.formAddHostel).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！');
								return;
							}

							if (res.code === 200) {
								// 重新读取，刷新表格显示
								this.get_table_data('list');

								this.clear_data()
								this.dialogAddHostelFormVisible = false;
								this.$message.success(res.message);
							} else {
								this.$message.error(res.message);
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message);
						})
					} else {
						this.$message.error('请按规范填写');
						return false;
					}
				})
			},
			clear_data() {
				this.formAddHostel.id = ''
				this.formAddHostel.hotelTownship = ''
				this.formAddHostel.hotelName = ''
				this.formAddHostel.corpnName = ''
				this.formAddHostel.corpnPhone = ''
				this.formAddHostel.adminName = ''
				this.formAddHostel.bankCard = ''
				this.formAddHostel.cardName = ''
				this.formAddHostel.bankName = ''
				this.formAddHostel.fileUrl = '' // 图片上传列表
				this.formAddHostel.url = '' // 上传的图片列表
				this.formAddHostel.level = this.currentUserLevel
			},
			/**
			 * 修改民宿
			 */
			modify_house_dialog_handler() {
				// console.log(this.formModifyHostel);
				// 调用修改接口
				this.$refs["modifyHostelForm"].validate(validate => {
					if (validate) {
						modifyHostel(this.formModifyHostel).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！');
								return;
							}

							if (res.code === 200) {
								// 重新读取，刷新表格显示
								this.get_table_data('list');

								this.clear_modify_data()
								this.dialogModifyHostelFormVisible = false;
								this.$message.success(res.message);
							} else {
								this.$message.error(res.message);
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message);
						})
					} else {
						this.$message.error('请按规范填写');
						return false;
					}
				})
			},
			clear_modify_data() {
				this.formAddHostel.id = ''
				this.formAddHostel.hotelTownship = ''
				this.formAddHostel.hotelName = ''
				this.formAddHostel.hotelTownshipName = ''
				this.formAddHostel.corpnName = ''
				this.formAddHostel.corpnPhone = ''
				this.formAddHostel.adminName = ''
				this.formAddHostel.bankCard = ''
				this.formAddHostel.cardName = ''
				this.formAddHostel.bankName = ''
				this.formAddHostel.fileUrl = '' // 图片上传列表
				this.formAddHostel.url = '' // 上传的图片列表
			},
			/**
			 * 重置密码
			 */
			reset_hostel_dialog_handler() {
				resetHostelAccountPassword(this.resetHostelData.id).then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！');
						return;
					}

					if (res.code === 200) {
						// 重新读取，刷新表格显示
						this.get_table_data('list');

						this.dialogResetHostelVisible = false;
						this.$message.success(res.message);
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message);
				})
			},
			/**
			 * 关闭修改对话框
			 */
			modify_house_dialog_close() {
				// 关闭修改对话框
				this.dialogModifyHostelFormVisible = false;
			},
			/**
			 * 删除、冻结、解冻、重置密码民宿对话框
			 */
			show_confirm_dialog(index, row, param) {
				// console.log(index, row);
				// 需要删除的数据关键字，赋值准备删除
				this.delete_frozen_thaw_Data.id = row.id;
				if (param === 'reset') {
					this.delete_frozen_thaw_Data.prompt_message = '是否确定重置账号【' + row.adminName + '】？';
				} else if (param === 'frozen') {
					this.delete_frozen_thaw_Data.prompt_message = '是否确定冻结账号【' + row.adminName + '】？';
				} else if (param === 'thaw') {
					this.delete_frozen_thaw_Data.prompt_message = '是否确定解冻账号【' + row.adminName + '】？';
				} else if (param === 'delete') {
					this.delete_frozen_thaw_Data.prompt_message = '是否确定删除账号【' + row.adminName + '】？';
				} else {
					this.delete_frozen_thaw_Data.prompt_message = '未知错误操作！';
				}

				this.delete_frozen_thaw_Data.action = param

				// 显示删除对话框
				this.dialogConfirmVisible = true;
			},
			// 删除、冻结、解冻、重置密码操作共用体
			share_function(res, param) {
				// console.log(res, param);
				if (typeof res.code == 'undefined' || res.code == '') {
					this.$message.error('返回数据格式问题，code未获取到！');
					return;
				}

				if (res.code === 200) {
					// 重新读取，刷新表格显示
					if (param === 'ms') {
						this.get_table_data('list');
					} else {
						this.getHostelListByCode(1234)
					}

					this.dialogConfirmVisible = false;
					this.$message.success(res.message);
				} else {
					this.$message.error(res.message);
				}
			},
			/**
			 * 删除、冻结、解冻、重置密码操作
			 */
			delete_frozen_thaw_dialog_handler() {
				var that = this;
				if (this.delete_frozen_thaw_Data.action === 'reset') {
					// 调用解冻接口
					resetHostelAccountPassword(this.delete_frozen_thaw_Data.id).then((res) => {
						that.share_function(res, 'ms')
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message);
					})
				} else if (this.delete_frozen_thaw_Data.action === 'frozen') {
					// 调用冻结接口
					frozenHostelAccount(this.delete_frozen_thaw_Data.id).then((res) => {
						that.share_function(res, 'ms')
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message);
					})
				} else if (this.delete_frozen_thaw_Data.action === 'thaw') {
					// 调用解冻接口
					thawHostelAccount(this.delete_frozen_thaw_Data.id).then((res) => {
						that.share_function(res, 'ms')
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message);
					})
				} else if (this.delete_frozen_thaw_Data.action === 'delete') {
					// 调用删除接口
					delHostelAccount(this.delete_frozen_thaw_Data.id).then((res) => {
						that.share_function(res, 'ms')
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message);
					})
				} else if (this.delete_frozen_thaw_Data.action === 'delDic') {
					// 民宿字典
					delHomestayDictionary(this.del_dictionary_data.id).then((res) => {
						that.share_function(res, 'dic')
					}).catch((err) => {
						// console.log(err);
						this.$message.error(err.message);
					})
				} else {
					this.$message.error('未知操作！');
				}
			},
			// 获取乡镇列表
			get_towns() {
				getTowns().then((res) => {
					if (res.code === 200) {
						this.formInline.options = []
						this.formAddHostel.options = []
						this.formModifyHostel.options = []
						for (var i = 0; i < res.data.length; i++) {
							let town = {
								id: res.data[i].id,
								hotelTownship: res.data[i].name
							}
							this.formInline.options.push(town)
							this.formAddHostel.options.push(town)
							this.formModifyHostel.options.push(town)
						}
					} else {
						if (res.data.length === 0) {
							this.formInline.options = []
							this.$message.warning('没有符合条件的数据！')
						} else {
							this.$message.warning(res.message)
						}
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				});
			},
			/**
			 * 获取消费记录,表格数据
			 */
			get_table_data(param) {
				this.loading = true
				this.get_condtion();

				let data = this.cond_data;
				if (param == 'search') {
					data.page = 1
					this.pagination.currentPage = 1
				}
				// console.log(data);
				getTableData(data).then((res) => {
					// console.log(res);
					let tempData = res.data.pageList;
					if (typeof tempData !== 'undefined' && tempData !== '') {
						this.pagination.total = res.data.total
						this.tableData = []
						for (var i = 0; i < tempData.length; i++) {
							tempData[i].xuhao = (this.pagination.currentPage - 1) * this.pagination.pageSize + i + 1
							this.tableData.push(tempData[i])
						}
					} else {
						this.tableData = []
						this.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				});
				this.loading = false;
			},
			/**
			 * 条件
			 */
			get_condtion() {
				let data = {
					page: this.pagination.currentPage,
					rows: this.pagination.pageSize,
					level: this.currentUserLevel
				}

				if (this.formInline.id !== '') {
					data.hotelTownship = this.formInline.id // 对应id
				}

				if (this.formInline.adminName !== '') {
					data.adminName = this.formInline.adminName
				}

				this.cond_data = data;
			},
			/**
			 * 搜索
			 */
			btn_search() {
				this.get_table_data('search')
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.pagination.currentPage = val
				this.get_table_data('pages')
			}
		}
	}
</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-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 {

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

							.demo-form-inline {
								display: inline-flex;
								flex-wrap: wrap;
								align-items: center;
								justify-content: flex-start;

								.btn-search {
									background: rgba(9, 101, 98, 1);
									font-size: 14px;
									color: #FFFFFF;
									font-family: Microsoft YaHei-3970(82674968);
									border-radius: 5px;
									border: none;
								}
							}

							.right-btns {
								width: 220px;
								display: flex;
								justify-content: flex-start;

								.export {
									background: rgba(9, 101, 98, 1);
									font-size: 14px;
									color: #FFFFFF;
									font-family: Microsoft YaHei-3970(82674968);
									border-radius: 5px;
									margin-bottom: 22px;
									border: none;
								}
							}
						}

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

							.txt-notice {
								color: rgba(212, 48, 48, 1);
							}

							::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;
							}
						}
					}

					.action-btns {
						display: flex;
						justify-content: space-around;

						.bg-btn {
							color: rgba(9, 101, 98, 1);
						}
					}
				}
			}
		}

		::v-deep .hide .el-upload--picture-card {
			display: none;
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 400px;
			height: 460px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 6px;
			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: 6px 6px 0px 0px;
				font-weight: bold;
				border-bottom: 1px solid rgba(230, 230, 230, 1);
			}

			.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: 280px;
				}
			}

			// 删除对话框的样式
			.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-house-class,
	.modify-house-class {
		width: 998px !important;
		height: 860px !important;
	}

	.configuration-window {
		width: 580px !important;
		height: 620px !important;
	}

	.el-dialog-delete-house {
		height: 300px !important;
		width: 500px !important;
	}

	.el-dialog-delete-house .el-dialog__header {
		display: none !important;
	}

	.add-info-cancel-btn {
		color: rgba(9, 101, 98, 1) !important;
		border: 1px solid rgba(9, 101, 98, 1) !important;
	}

	.add-info-confirm-btn {
		border: none !important;
		background: rgba(9, 101, 98, 1) !important;
		color: #fff !important;
		border-radius: 5px !important;
		margin-left: 28px !important;
	}

	.configure-btn-position {
		display: flex;
		justify-content: flex-end;
	}

	.configure-btn {
		border: none !important;
		background: rgba(9, 101, 98, 1) !important;
		color: #fff !important;
		border-radius: 5px !important;
	}

	.el-tabs__item.is-top {
		color: rgba(9, 101, 98, 1) !important;
	}

	.el-tabs__active-bar {
		background-color: rgba(9, 101, 98, 1) !important;
	}

	.dialog-footer {
		display: flex;
		justify-content: flex-end;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 108px;
		text-align: right !important;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 33%;
	}

	.add-ms-class {
		width: 400px !important;
		height: 280px !important;
	}

	.add-ms-class .el-input__inner {
		width: 220px !important;
	}

	.add-ms-service {
		width: 400px !important;
		height: 480px !important;
	}

	.add-ms-service .el-input__inner {
		width: 220px !important;
	}
</style>