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" v-model="queryParams.deptIds" @click="deptClick" />
			<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" :show-overflow-tooltip="true" 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/deptTreeChoice/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,
				deptIds: []
			},
			// 列信息
			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()
		},
		deptClick() {
			// this.queryParams.pageNum = 1
			if (this.queryParams.deptIds == []) {
				return
			} else {
				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: '修改成功' })
					this.getList()
				}
			})
		},
		// 取消数据权限修改
		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: '修改成功' })
					this.getList()
				}
			})
		},
		// 取消角色权限修改
		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>