CZO_Boss/src/views/system/employeenInfo/index.vue

<template>
	<div class="page-container">
		<div class="search-container" v-show="showSearch">
			<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="search_form">
				<div class="search_input">
					<el-form-item label="姓名">
						<el-input v-model="queryParams.realName" placeholder="请输入姓名" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="电话号码">
						<el-input v-model="queryParams.phonenumber" placeholder="请输入电话号码" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
					</el-form-item>
				</div>
				<div class="search_btn">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<div class="content-container">
			<!-- 公司部门 -->
			<TreeChoice :dataList="deptOptions" nodeKey="id" nodeVal="label" @itemClick="handleNodeClick" />
			<div class="main">
				<div class="table-nav">
					<div class="tags">
						<div class="tag">员工</div>
					</div>
					<!-- 操作 -->
					<div class="actions">
						<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">添加</el-button>
						<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
						<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']" style="margin-right: 10px">导入</el-button>
						<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
					</div>
				</div>
				<!-- 员工列表 -->
				<el-table v-loading="loading" border :data="userList">
					<el-table-column label="序号" align="center" prop="userId" v-if="columns[0].visible" width="60">
						<template slot-scope="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="头像" align="center" v-if="columns[1].visible" width="60">
						<template slot-scope="scope">
							<img v-bind:src="scope.row.avatar" class="img-circle img_height" @click="modifyAvatar(scope.row)" />
						</template>
					</el-table-column>
					<el-table-column label="姓名" align="center" prop="realName" v-if="columns[2].visible" :show-overflow-tooltip="true" width="120" />
					<el-table-column label="公司部门" align="center" prop="deptNames" v-if="columns[3].visible" :show-overflow-tooltip="true" width="160" />
					<el-table-column label="级别职务" align="center" prop="levelJobNames" v-if="columns[4].visible" :show-overflow-tooltip="true" width="160" />
					<el-table-column label="性质岗位" align="center" prop="naturePostNames" v-if="columns[5].visible" :show-overflow-tooltip="true" width="160" />
					<el-table-column label="角色权限" align="center" v-if="columns[6].visible" width="160">
						<template slot-scope="scope">
							<span>{{ scope.row.roleNames + '/' + scope.row.dataRoleNames }}</span>
						</template>
					</el-table-column>
					<el-table-column label="手机号码" align="center" prop="phoneNumber" v-if="columns[7].visible" width="150" />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope" v-if="scope.row.userId !== 1">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="getDutiesPowers(scope.row)" v-hasPermi="['system:user:edit']">职责权力</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" @click="getRolePermissions(scope.row)" v-hasPermi="['system:user:edit']">功能权限</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" @click="getDataRole(scope.row)" v-hasPermi="['system:user:edit']">数据权限</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
			</div>
		</div>
		<!-- 添加或修改用户配置对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
			<div class="option">
				<div class="account"><a href="javascript:void(0);" @click="getAccountInfo">账号信息</a></div>
				<div class="basics"><a href="javascript:void(0);" @click="getBasicsInfo">基础信息</a></div>
			</div>
			<!-- 账号信息 -->
			<el-form ref="accountForm" :model="accountForm" :rules="accountFormRules" label-width="90px" v-show="accountShow">
				<el-row>
					<el-col :span="12">
						<el-form-item label="序号" prop="userId">
							<el-input v-model="accountForm.serialNumber" placeholder="请输入序号" maxlength="30" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="编号" prop="userNumber">
							<el-input v-model="accountForm.userNumber" placeholder="请输入编号" maxlength="30" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="姓名" prop="realName">
							<el-input v-model="accountForm.realName" placeholder="请输入姓名" maxlength="11" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号" prop="phoneNumber">
							<el-input v-model="accountForm.phoneNumber" placeholder="请输入手机号" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="账号状态" prop="status">
							<el-radio v-model="accountForm.status" v-for="dict in dict.type.sys_account_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<el-radio v-model="accountForm.sex" v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="身份证号" prop="idNumber">
							<el-input v-model="accountForm.idNumber" placeholder="请输入身份证号" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="公司部门" prop="deptIds">
							<Treeselect
								v-model="accountForm.deptIds"
								noChildrenText="无数据"
								:disable-branch-nodes="true"
								search-nested
								:options="deptOptions"
								:multiple="true"
								placeholder="选择公司部门"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="职称级别" prop="levelJobIds">
							<Treeselect
								v-model="accountForm.levelJobIds"
								noChildrenText="无数据"
								:disable-branch-nodes="true"
								search-nested
								:options="levelList"
								:multiple="true"
								placeholder="选择职称级别"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="性质岗位" prop="naturePostIds">
							<Treeselect
								v-model="accountForm.naturePostIds"
								noChildrenText="无数据"
								:disable-branch-nodes="true"
								search-nested
								:options="natureList"
								:multiple="true"
								placeholder="选择性质岗位"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<!-- 基础信息 -->
			<el-form ref="basicsForm" :model="basicsForm" :rules="basicsRules" label-width="90px" v-show="basicsShow" class="basics_form">
				<el-row>
					<el-col :span="12">
						<el-form-item label="年龄" prop="age">
							<el-input placeholder="请填写年龄" disabled :value="ageInfo.age" maxlength="30" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="出生日期" prop="dateOfBirth">
							<el-input placeholder="请填写出生日期" disabled :value="ageInfo.birthday" maxlength="30" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="QQ号">
							<el-input placeholder="请输入QQ号" v-model="basicsForm.qqNumber" maxlength="11" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业微信号">
							<el-input placeholder="请输入企业微信号" v-model="basicsForm.wxUserId" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="学历" prop="education">
							<el-select placeholder="请选择" v-model="basicsForm.education" style="width: 100%">
								<el-option v-for="dict in dict.type.sys_employee_education" :key="dict.value" :value="dict.value" :label="dict.value">{{ dict.label }}</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="原籍" prop="origin">
							<el-input placeholder="请输入原籍" v-model="basicsForm.origin" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="现住址" prop="currentAddress">
							<el-input placeholder="请输入现住址" v-model="basicsForm.currentAddress" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="家庭成员">
							<el-input placeholder="请输入家庭成员" v-model="basicsForm.memberOfFamily" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="婚姻状况" prop="maritalStatus">
							<el-select placeholder="请选择" v-model="basicsForm.maritalStatus" style="width: 100%">
								<el-option v-for="dict in dict.type.sys_marital_status" :key="dict.value" :value="dict.value" :label="dict.label">{{ dict.label }}</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="家庭收入">
							<el-input placeholder="请输入家庭收入" v-model="basicsForm.householdIncome" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="性格">
							<el-row>
								<el-col :span="6" v-for="dict in dict.type.sys_employee_personality" :key="dict.value">
									<el-radio v-model="basicsForm.character" :label="dict.value">{{ dict.label }}</el-radio>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="擅长">
							<el-row>
								<!-- <el-checkbox-group v-model="basicsForm.specialty">
									<el-col :span="6" v-for="dict in dict.type.sys_staff_adept" :key="dict.value">
										<el-checkbox :label="dict.label"></el-checkbox>
									</el-col>
								</el-checkbox-group> -->
								<el-checkbox-group v-model="basicsForm.specialty">
									<el-col :span="6" v-for="dict in dict.type.sys_staff_adept" :key="dict.value">
										<el-checkbox :label="dict.value">{{ dict.label }}</el-checkbox>
									</el-col>
								</el-checkbox-group>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="description" v-for="item in basicsForm.descriptionJson" :key="item.id">
					<el-row>
						<el-col :span="8">
							<el-form-item label="原工作单位">
								<el-input placeholder="请输入原单位" v-model="item.name" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="职务">
								<el-input placeholder="请输入职务" v-model="item.duty" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="收入">
								<el-input placeholder="请输入收入" v-model="item.inCome" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="开始时间">
								<el-input placeholder="请输入开始时间" v-model="item.startDate" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="结束时间">
								<el-input placeholder="请输入结束时间" v-model="item.endDate" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<div style="margin-left: 40px">
								<el-button class="addInfo" size="mini" type="primary" icon="el-icon-plus" @click="addDescription(item.id)" v-if="isLast(item.id)" :disabled="!isClick(item.id)"
									>添加一条</el-button
								>
								<el-button class="addInfo" size="mini" type="primary" icon="el-icon-plus" @click="delDescription(item.id)" v-if="item.id != 1">删除本条</el-button>
							</div>
						</el-col>
					</el-row>
				</el-row>
				<el-row class="description">
					<el-col :span="24">
						<el-form-item label="工作特长" prop="workExpertise">
							<el-input placeholder="请输入工作特长" v-model="basicsForm.workExpertise" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="期望职位" prop="workDesire">
							<el-input placeholder="请输入期望职位" v-model="basicsForm.workDesire" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="期望收入" prop="incomeDesire">
							<el-input placeholder="请输入期望收入" v-model="basicsForm.incomeDesire" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="生活">
						<el-row>
							<el-col :span="6" v-for="dict in dict.type.sys_income_life" :key="dict.value">
								<el-radio v-model="basicsForm.life" :label="dict.value">{{ dict.label }}</el-radio>
							</el-col>
						</el-row>
					</el-form-item>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="梦想">
							<el-input placeholder="请输入梦想" v-model="basicsForm.dream" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="喜爱">
							<el-row>
								<!-- <el-checkbox-group v-model="basicsForm.favorite">
									<el-col :span="6" v-for="dict in dict.type.sys_staff_hobby" :key="dict.value">
										<el-checkbox :label="dict.label" :value="dict.value"></el-checkbox>
									</el-col>
								</el-checkbox-group> -->
								<el-checkbox-group v-model="basicsForm.favorite">
									<el-col :span="6" v-for="dict in dict.type.sys_staff_hobby" :key="dict.value">
										<el-checkbox :label="dict.value">{{ dict.label }}</el-checkbox>
									</el-col>
								</el-checkbox-group>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="身高">
						<el-row>
							<el-col :span="6" v-for="dict in dict.type.sys_staff_height" :key="dict.value">
								<el-radio v-model="basicsForm.height" :label="dict.value">{{ dict.label }}</el-radio>
							</el-col>
						</el-row>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="颜值">
						<el-row>
							<el-col :span="6" v-for="dict in dict.type.sys_staff_appearance" :key="dict.value">
								<el-radio v-model="basicsForm.appearance" :label="dict.value">{{ dict.label }}</el-radio>
							</el-col>
						</el-row>
					</el-form-item>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="体质">
							<el-select placeholder="请选择" style="width: 100%" v-model="basicsForm.constitution">
								<el-option v-for="dict in dict.type.sys_staff_constitution" :key="dict.value" :value="dict.value" :label="dict.label">{{ dict.label }}</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="病史">
							<el-select placeholder="请选择" style="width: 100%" v-model="basicsForm.medicalHistory">
								<el-option v-for="dict in dict.type.sys_staff_medicalHistory" :key="dict.value" :value="dict.value" :label="dict.label">{{ dict.label }}</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="刑法">
						<el-row>
							<el-col :span="6" v-for="dict in dict.type.sys_staff_criminalLaw" :key="dict.value">
								<el-radio v-model="basicsForm.criminalLaw" :label="dict.value">{{ dict.label }}</el-radio>
							</el-col>
						</el-row>
					</el-form-item>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="备用联系人">
							<el-input placeholder="请输入备用联系人" v-model="basicsForm.contactName" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别">
							<el-select placeholder="请选择" style="width: 100%" v-model="basicsForm.contactSex">
								<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :value="dict.value" :label="dict.label">{{ dict.label }}</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="与之关系">
							<el-row>
								<el-col :span="6" v-for="dict in dict.type.sys_spare_relationship" :key="dict.value">
									<el-radio v-model="basicsForm.contactRelation" :label="dict.value">{{ dict.label }}</el-radio>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="联系电话">
							<el-input placeholder="请输入联系电话" v-model="basicsForm.contactPhoneNumber" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工作单位">
							<el-input placeholder="请输入工作单位" v-model="basicsForm.contactEmployer" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="cancel">取 消</el-button>
				<el-button size="small" type="primary" @click="submitForm">保 存</el-button>
			</div>
		</el-dialog>

		<!-- 用户导入对话框 -->
		<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
			<el-upload
				ref="upload"
				:limit="1"
				accept=".xlsx, .xls"
				:headers="upload.headers"
				:action="upload.url + '?updateSupport=' + upload.updateSupport"
				:disabled="upload.isUploading"
				:on-progress="handleFileUploadProgress"
				:on-success="handleFileSuccess"
				:auto-upload="false"
				drag
			>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip text-center" slot="tip">
					<div class="el-upload__tip" slot="tip"> <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 </div>
					<span>仅允许导入xls、xlsx格式文件。</span>
					<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
				</div>
			</el-upload>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="submitFileForm">确 定</el-button>
				<el-button size="small" @click="upload.open = false">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 功能权限对话框 -->
		<el-dialog title="功能权限" :visible.sync="dialogTableRolePermissions">
			<el-table v-loading="loading" border :data="roleList">
				<el-table-column label="名称" align="left" width="180">
					<template slot-scope="scope">
						<input type="checkbox" :checked="scope.row.flag" @change="roleChange(scope.row)" />
						<span class="role_">{{ scope.row.roleName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="描述" align="center">
					<template slot-scope="scpoe">
						<span>{{ scpoe.row.remark }}</span>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="cancalRolePermissions">取 消</el-button>
				<el-button size="small" type="primary" @click="saveRolePermissions">保 存</el-button>
			</div>
		</el-dialog>

		<!-- 责权信息对话框 -->
		<el-dialog title="责权信息" :visible.sync="dialogPower" width="30%" :before-close="handleClose">
			<div class="">
				<span>级别职务：</span>
				<el-select v-model="jodId" placeholder="请选择" @change="changeJob">
					<el-option v-for="item in levelJobs" :key="item.jobId" :label="item.jobName" :value="item"> </el-option>
				</el-select>
			</div>
			<div class="responsibility">
				<span>责任</span>
			</div>
			<el-input type="textarea" :rows="3" v-model="responsibility" readonly placeholder="请输入内容"> </el-input>
			<div class="responsibility">
				<span>权利</span>
			</div>
			<el-input type="textarea" :rows="3" v-model="right" readonly placeholder="请输入内容"> </el-input>
		</el-dialog>

		<!-- 数据权限对话框 -->
		<el-dialog title="数据权限" :visible.sync="dialogTableDataRole">
			<el-table v-loading="loading" border :data="dataRoleList">
				<el-table-column label="名称" align="left" width="180">
					<template slot-scope="scope">
						<input type="checkbox" :checked="scope.row.flag" @change="dataRoleChange(scope.row)" />
						<span class="role_">{{ scope.row.dataRoleName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="描述" align="center">
					<template slot-scope="scpoe">
						<span>{{ scpoe.row.remark }}</span>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="cancalDataRole">取 消</el-button>
				<el-button size="small" type="primary" @click="saveDataRole">保 存</el-button>
			</div>
		</el-dialog>

		<!-- 修改头像对话框 -->
		<userAvatar ref="userAvatar" />
	</div>
</template>

<script>
	import {
		delUser,
		addUser,
		updateUser,
		getStaffList,
		getLevelTreeSelect,
		getNatureTreeSelect,
		getAuthRole,
		updateAuthRole,
		getDataRole,
		updateDataRole,
		getAccountInfo,
		getPersonnel
	} from '@/api/system/employeenInfo'
	import { getToken } from '@/utils/auth'
	import { treeselect } from '@/api/system/dept'
	import userAvatar from './profile/userAvatar.vue'
	import Treeselect from '@riophae/vue-treeselect'
	import TreeChoice from '@/components/treeChoice/index.vue'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	import { deepClone } from '@/utils/index.js'

	export default {
		name: 'employeenInfo',
		dicts: [
			'sys_normal_disable',
			'sys_user_sex',
			'sys_account_status',
			'sys_employee_education',
			'sys_marital_status',
			'sys_employee_personality',
			'sys_staff_adept',
			'sys_income_life',
			'sys_staff_hobby',
			'sys_staff_height',
			'sys_staff_appearance',
			'sys_staff_constitution',
			'sys_staff_medicalHistory',
			'sys_staff_criminalLaw',
			'sys_spare_relationship'
		],
		components: { Treeselect, TreeChoice, userAvatar },
		data() {
			return {
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 用户表格数据
				userList: null,
				// 弹出层标题
				title: '',
				// 部门树选项
				deptOptions: undefined,
				// 是否显示弹出层
				open: false,
				// 岗位选项
				postOptions: [],
				// 角色选项
				roleOptions: [],
				// 账号表单参数
				accountForm: {
					serialNumber: 0,
					userNumber: '',
					realName: '',
					phoneNumber: '',
					status: '',
					sex: '',
					idNumber: '',
					deptIds: [],
					levelJobIds: [],
					naturePostIds: []
				},
				// 基础表单参数
				basicsForm: {},
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// 用户导入参数
				upload: {
					// 是否显示弹出层（用户导入）
					open: false,
					// 弹出层标题（用户导入）
					title: '',
					// 是否禁用上传
					isUploading: false,
					// 是否更新已经存在的用户数据
					updateSupport: 0,
					// 设置上传的请求头部
					headers: { Authorization: 'Bearer ' + getToken() },
					// 上传的地址
					url: process.env.VUE_APP_BASE_API + '/system/user/importData'
				},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					realName: undefined,
					phonenumber: undefined
				},
				// 列信息
				columns: [
					{ key: 0, label: `序号`, visible: true },
					{ key: 1, label: `头像`, visible: true },
					{ key: 2, label: `姓名`, visible: true },
					{ key: 3, label: `公司部门`, visible: true },
					{ key: 4, label: `级别职务`, visible: true },
					{ key: 5, label: `性质岗位`, visible: true },
					{ key: 6, label: `角色权限`, visible: true },
					{ key: 7, label: `手机号码`, visible: true }
				],
				// 表单校验
				accountFormRules: {
					realName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
					phoneNumber: [
						{ required: true, message: '手机号不能为空', trigger: 'blur' },
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: '请输入正确的手机号码',
							trigger: 'blur'
						}
					],
					idNumber: [
						{ required: true, message: '身份证号不能为空', trigger: 'blur' },
						{
							pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '请输入正确的身份证号码',
							trigger: 'blur'
						}
					],
					deptIds: [{ required: true, message: '请选择公司部门', trigger: 'submit' }],
					levelJobIds: [{ required: true, message: '请选择职称级别', trigger: 'submit' }],
					naturePostIds: [{ required: true, message: '请选择性质岗位', trigger: 'submit' }]
				},
				basicsRules: {
					education: [{ required: true, message: '请选择学历', trigger: 'submit' }],
					origin: [{ required: true, message: '请输入原籍', trigger: 'submit' }],
					currentAddress: [{ required: true, message: '请输入现住址', trigger: 'submit' }],
					maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'submit' }],
					workExpertise: [{ required: true, message: '请输入工作特长', trigger: 'submit' }],
					workDesire: [{ required: true, message: '请输入期望职位', trigger: 'submit' }],
					incomeDesire: [{ required: true, message: '请输入收入愿望', trigger: 'submit' }]
				},
				dialogTableRolePermissions: false, // 角色权限弹出层
				dialogPower: false, // 责权信息弹出层
				accountShow: true, // 账号信息
				basicsShow: false, // 基础信息
				dialogTableDataRole: false, // 数据权限
				props: { multiple: true }, // 联级多选
				levelList: [], // 级别列表
				natureList: [], // 性质岗位列表
				levelJobs: [], // 责权信息列表
				jodId: '', // 职位id
				responsibility: '', // 职责
				right: '', // 权力
				roleList: [], // 员工角色列表
				dateRange: [], // 日期范围
				basicsForm: {
					age: '', //年龄
					appearance: '', //颜值
					character: '', //性格
					constitution: '', //体质
					contactEmployer: '', //工作单位
					contactName: '', //备用联系人姓名
					contactPhoneNumber: '', //备用联系人电话
					contactRelation: '', //与之关系
					contactSex: '', //备用联系人性别
					criminalLaw: '', //刑法
					currentAddress: '', //现住址
					dateOfBirth: '', //出生日期
					// descriptionJson: '',
					descriptionJson: [{ name: '', startDate: '', endDate: '', duty: '', inCome: '', id: 1 }], //原工作单位json串
					dream: '', //梦想
					education: '', //学历
					favorite: [], //喜爱
					height: '', //身高
					householdIncome: '', //家庭收入
					incomeDesire: '', //收入愿望
					life: '', //生活
					maritalStatus: '', //婚姻状况
					medicalHistory: '', //病史
					memberOfFamily: '', //家庭成员
					origin: '', //原籍
					personnelType: 0, //人员类型
					qqNumber: '', //qq号
					specialty: [], //擅长
					workDesire: '', //期望职位
					workExpertise: '', //工作特长
					wxUserId: '' //企业微信号
				},
				rolesParams: {
					roleName: undefined,
					roleKey: undefined,
					roleSort: undefined
				},
				DataRoleParams: {
					pageNum: 1,
					pageSize: 10
				},
				dataRoleListAll: [], // 所有数据权限列表
				dataRoleList: [] // 员工数据权限
			}
		},
		created() {
			this.getList()
			this.getTreeselect()
		},
		methods: {
			/** 查询用户列表 */
			getList() {
				this.loading = true
				getStaffList(this.queryParams).then((response) => {
					this.userList = response.rows
					this.total = response.total
					this.loading = false
				})
			},
			/** 查询部门下拉树结构 */
			getTreeselect() {
				treeselect().then((response) => {
					this.deptOptions = response.data
					this.deptOptions.map((item) => item.id.toString())
				})
			},
			// 节点单击事件
			handleNodeClick(data) {
				this.queryParams.deptId = data.id
				this.getList()
			},
			// 取消按钮
			cancel() {
				this.open = false
				this.reset()
			},
			// 表单重置
			reset() {
				this.form = {
					userId: undefined,
					deptId: undefined,
					// userName: undefined,
					nickName: undefined,
					password: undefined,
					phonenumber: undefined,
					email: undefined,
					sex: undefined,
					status: '0',
					remark: undefined,
					postIds: [],
					roleIds: []
				}
				this.resetForm('form')
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1
				this.getList()
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm('queryForm')
				this.handleQuery()
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset()
				this.getTreeselect()
				this.open = true
				this.title = '添加用户'
				this.getLevelList()
				this.getNatureList()
				// this.userList.map((item, index, c) => item.serialNumber)
				this.accountForm.serialNumber = this.total + 1
				console.log(this.accountForm.serialNumber)
			},
			// 修改角色权限
			getRolePermissions(row) {
				this.userId = row.userId
				getAuthRole(row.userId).then((res) => {
					if (res.code === 200) {
						this.roleList = res.roles
						console.log(this.roleList)
						this.dialogTableRolePermissions = true
					}
				})
			},
			// 修改数据权限
			getDataRole(row) {
				this.userId = row.userId
				getDataRole(row.userId).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.dataRoleList = res.dataRoles
						console.log(this.dataRoleList)
						this.dialogTableDataRole = true
					}
				})
			},
			// 保存数据权限修改
			saveDataRole() {
				let newArr = this.dataRoleList.filter((item, index, c) => item.flag == true)
				let dataRoleIds = newArr.map((item, index, c) => item.dataRoleId)
				// let dataRoleIdsStr = dataRoleIds.join(',')
				updateDataRole({ userId: this.userId, roleIds: dataRoleIds }).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.dialogTableDataRole = false
						this.$msg({ message: '修改成功' })
					}
				})
			},
			// 取消数据权限修改
			cancalDataRole() {
				this.dialogTableDataRole = false
			},
			// 切换角色选中状态
			roleChange(row, index) {
				row.flag = !row.flag
			},
			// 切换数据角色选中状态
			dataRoleChange(row, index) {
				row.flag = !row.flag
			},
			// 保存角色权限修改
			saveRolePermissions() {
				console.log(this.roleList)
				let newArr = this.roleList.filter((item, index, c) => item.flag == true)
				let roleIds = newArr.map((item, index, c) => item.roleId)
				// let roleIdsStr = roleIds.join(',')
				updateAuthRole({ userId: this.userId, roleIds: roleIds }).then((res) => {
					if (res.code === 200) {
						this.dialogTableRolePermissions = false
						this.$msg({ message: '修改成功' })
					}
				})
			},
			// 取消角色权限修改
			cancalRolePermissions() {
				this.dialogTableRolePermissions = false
			},
			// 职责权限
			getDutiesPowers(row) {
				let staff = this.userList.find((item, index, c) => item.userId === row.userId)
				this.levelJobs = staff.levelJobs
				// this.jodId = this.levelJobs[0].jobId
				console.log(this.levelJobs)
				this.dialogPower = true
			},
			// 选择职责权限
			changeJob(val) {
				console.log(val)
				this.responsibility = val.responsibility
				this.right = val.right
			},
			// 账号信息
			getAccountInfo() {
				this.accountShow = true
				this.basicsShow = false
			},
			// 基础信息
			getBasicsInfo() {
				this.accountShow = false
				this.basicsShow = true
			},
			// 修改头像
			modifyAvatar(row) {
				this.$refs.userAvatar.editCropper()
			},
			// 关闭责权信息
			handleClose() {
				this.dialogPower = false
			},
			//获取级别数据
			getLevelList() {
				getLevelTreeSelect().then((res) => {
					if (res.code == 200) {
						this.levelList = res.data
						this.levelList.map((item) => item.id.toString())
					} else {
						this.$msg({ type: 'error', message: res.msg })
					}
				})
			},
			// 获取性质岗位数据
			getNatureList() {
				getNatureTreeSelect().then((res) => {
					if (res.code == 200) {
						this.natureList = res.data
						this.natureList.map((item) => item.id.toString())
					} else {
						this.$msg({ type: 'error', message: res.msg })
					}
				})
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				// debugger
				this.userId = row.userId
				this.getTreeselect()
				this.getLevelList()
				this.getNatureList()
				// 查询账号信息
				getAccountInfo(row.userId).then((response) => {
					console.log(response)
					this.open = true
					this.title = '修改用户'
					this.accountForm = response.data
					this.accountForm.deptIds = response.data.deptIds.split(',')
					this.accountForm.levelJobIds = response.data.levelJobIds.split(',')
					this.accountForm.naturePostIds = response.data.naturePostIds.split(',')
				})
				// 查询基础信息
				getPersonnel(row.userId).then((res) => {
					console.log(res)
					this.basicsForm = res.data
					this.basicsForm.descriptionJson = JSON.parse(res.data.descriptionJson)
					this.basicsForm.favorite = res.data.favorite.split(',')
					this.basicsForm.specialty = res.data.specialty.split(',')
				})
			},
			/** 提交按钮 */
			submitForm: function () {
				let accountStr = deepClone(this.accountForm)
				accountStr.deptIds = accountStr.deptIds.join(',')
				accountStr.levelJobIds = accountStr.levelJobIds.join(',')
				accountStr.naturePostIds = accountStr.naturePostIds.join(',')
				let str = deepClone(this.basicsForm)
				str.dateOfBirth = this.ageInfo.birthday
				str.age = this.ageInfo.age
				str.favorite = str.favorite.join(',')
				str.specialty = str.specialty.join(',')
				str.descriptionJson = JSON.stringify(str.descriptionJson)
				let params = { ...accountStr, ...str }
				params.userId = this.userId
				console.log(params)
				this.$refs['accountForm'].validate((valid) => {
					if (valid) {
						if (params.userId != null) {
							console.log(1231231312)
							updateUser(params).then((response) => {
								this.$modal.msgSuccess('修改成功')
								this.open = false
								this.getList()
							})
						} else {
							addUser(params).then((response) => {
								this.$modal.msgSuccess('新增成功')
								this.open = false
								this.getList()
							})
						}
					}
				})
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				// const userIds = row.userId
				this.$modal
					.confirm('是否确认删除用户编号为"' + row.userId + '"的数据项？')
					.then(function () {
						return delUser(row.userId)
					})
					.then(() => {
						this.getList()
						this.$modal.msgSuccess('删除成功')
					})
					.catch(() => {})
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download(
					'system/user/export',
					{
						...this.queryParams
					},
					`user_${new Date().getTime()}.xlsx`
				)
			},
			/** 导入按钮操作 */
			handleImport() {
				this.upload.title = '用户导入'
				this.upload.open = true
			},
			/** 下载模板操作 */
			importTemplate() {
				this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
			},
			// 文件上传中处理
			handleFileUploadProgress(event, file, fileList) {
				this.upload.isUploading = true
			},
			// 文件上传成功处理
			handleFileSuccess(response, file, fileList) {
				this.upload.open = false
				this.upload.isUploading = false
				this.$refs.upload.clearFiles()
				this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
				this.getList()
			},
			// 提交上传文件
			submitFileForm() {
				this.$refs.upload.submit()
			},
			addDescription(id) {
				this.basicsForm.descriptionJson.push({ name: '', startDate: '', endDate: '', duty: '', inCome: '', id: id + 1 })
			},
			//删除原单位
			delDescription(id) {
				this.basicsForm.descriptionJson = this.basicsForm.descriptionJson.filter((item) => item.id != id)
			}
		},
		computed: {
			//获取主题颜色
			theme() {
				return this.$store.state.settings.theme
			},
			//根据身份证号获取年龄和生日
			ageInfo() {
				let num = this.accountForm.idNumber
				if (/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(num)) {
					let birthday = num.substring(6, 10) + '-' + num.substring(10, 12) + '-' + num.substring(12, 14)
					var birthdays = new Date(birthday.replace(/-/g, '/'))
					let d = new Date()
					let age = d.getFullYear() - birthdays.getFullYear() - (d.getMonth() < birthdays.getMonth() || (d.getMonth() == birthdays.getMonth() && d.getDate() < birthdays.getDate()) ? 1 : 0)
					return {
						age,
						birthday
					}
				}
				return {
					age: '',
					birthday: ''
				}
			},
			isClick() {
				return function (id) {
					let obj = this.basicsForm.descriptionJson.find((item) => item.id == id)
					let values = Object.values(obj).filter((item) => typeof item == 'string')
					return values.every((item) => item != '')
				}
			},
			//判断是不是最后一条
			isLast() {
				return function (id) {
					let obj = this.basicsForm.descriptionJson.some((item) => item.id > id)
					return !obj
				}
			}
		}
	}
</script>
<style scoped>
	.responsibility {
		width: 108px;
		height: 32px;
		margin-top: 20px;
		font-weight: bold;
	}
	.option {
		display: flex;
		margin-bottom: 10px;
		border-bottom: 1px solid #dfe6ec;
	}
	.account {
		width: 90px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 14px;
		border: 1px solid #dfe6ec;
		border-top-left-radius: 5px;
		border-right: none;
		border-bottom: none;
	}
	.basics {
		width: 90px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 14px;
		border: 1px solid #dfe6ec;
		border-bottom: none;
	}
	.basics_form {
		overflow: auto;
		height: 600px;
	}
	.img_height {
		height: 32px;
		width: 32px;
		vertical-align: middle;
		cursor: pointer;
	}
	.el-col-lg-4-8 {
		width: 20%;
	}
	.search_form {
		display: flex;
		justify-content: space-between;
	}
	.search_form .el-form-item {
		margin-bottom: 0;
	}
	.role_ {
		margin-left: 5px;
	}
	::v-deep .el-radio__inner {
		border-radius: 0;
		position: relative;
	}
	::v-deep .el-radio__input.is-checked .el-radio__inner::after {
		background: none;
		border-radius: 0;
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		content: '';
		border: 1px solid #ffffff;
		border-left: 0;
		border-top: 0;
		height: 7px;
		left: 4px;
		position: absolute;
		top: 1px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 3px;
		-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
		transition: -webkit-transform 0.15s ease-in 0.05s;
		transition: transform 0.15s ease-in 0.05s;
		transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
		-webkit-transform-origin: center;
		transform-origin: center;
	}
	.description {
		border-top: 1px solid #dedede;
		padding-top: 10px;
		margin-top: 10px;
	}
</style>