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)" />
							<!-- <el-image v-else >
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-image> -->
						</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" width="160" />
					<el-table-column label="性质岗位" align="center" prop="naturePostNames" v-if="columns[5].visible" width="160" />
					<el-table-column label="角色权限" align="center" prop="roleJurisdictionNames" v-if="columns[6].visible" width="160" />
					<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="handleUpdate(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="rules" label-width="90px" v-show="accountShow">
				<el-row>
					<el-col :span="12">
						<el-form-item label="序号" prop="userId">
							<el-input v-model="accountForm.userId" 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" label="0">正常</el-radio>
							<el-radio v-model="accountForm.status" label="1">停用</el-radio>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<el-radio v-model="accountForm.sex" label="0">男</el-radio>
							<el-radio v-model="accountForm.sex" label="1">女</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">
							<el-cascader ref="deptCascader" :options="deptOptions" :props="props" clearable style="width: 100%" @change="deptCascaderChange"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="职称级别" prop="levelJobIds">
							<el-cascader ref="levelCascader" :options="levelList" :props="props" clearable style="width: 100%" @change="levelCascaderChange"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="性质岗位" prop="naturePostIds">
							<el-cascader ref="natureCascader" :options="natureList" :props="props" clearable style="width: 100%" @change="natureCascaderChange"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<!-- 基础信息 -->
			<el-form ref="basicsForm" :model="basicsForm" :rules="rules" label-width="90px" v-show="basicsShow" class="basics_form">
				<el-row>
					<el-col :span="12">
						<el-form-item label="年龄">
							<el-input placeholder="请输入年龄" maxlength="30" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="出生日期">
							<el-input placeholder="请输入出生日期" maxlength="30" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="QQ号">
							<el-input placeholder="请输入QQ号" maxlength="11" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业微信号">
							<el-input placeholder="请输入企业微信号" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="学历">
							<el-select placeholder="请选择" style="width: 100%">
								<el-optio></el-optio>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="原籍">
							<el-input placeholder="请输入原籍" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="现住址">
							<el-input placeholder="请输入现住址" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="家庭成员">
							<el-input placeholder="请输入家庭成员" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="婚姻状况">
							<el-select placeholder="请选择" style="width: 100%">
								<el-optio></el-optio>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="家庭收入">
							<el-input placeholder="请输入家庭收入" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="性格">
							<el-row>
								<el-col :span="6">
									<el-checkbox>内向</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>外向</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>中性</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>偏外向</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>保守</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>开放</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>依偎</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>独立</el-checkbox>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="擅长">
							<el-row>
								<el-col :span="6">
									<el-checkbox>公关</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>销售</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>技术</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>交际</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>管理</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>沟通</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>培训</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>电脑</el-checkbox>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="原工作单位">
							<el-input placeholder="请输入原单位" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="职务">
							<el-input placeholder="请输入职务" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="收入">
							<el-input placeholder="请输入收入" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="开始时间">
							<el-input placeholder="请输入开始时间" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="结束时间">
							<el-input placeholder="请输入结束时间" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item>
							<el-button class="addInfo" type="primary" icon="el-icon-plus">添加一条</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="工作特长">
							<el-input placeholder="请输入工作特长" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="期望职位">
							<el-input placeholder="请输入期望职位" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="期望收入">
							<el-input placeholder="请输入期望收入" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="性格">
						<el-row>
							<el-col :span="6">
								<el-checkbox>靠父母</el-checkbox>
							</el-col>
							<el-col :span="6">
								<el-checkbox>依偎另一半</el-checkbox>
							</el-col>
							<el-col :span="6">
								<el-checkbox>独立</el-checkbox>
							</el-col>
							<el-col :span="6">
								<el-checkbox>自强</el-checkbox>
							</el-col>
						</el-row>
					</el-form-item>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="梦想">
							<el-input placeholder="请输入梦想" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="喜爱">
							<el-row>
								<el-col :span="6">
									<el-checkbox>爬山</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>看海</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>旅游</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>逛街</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>看电视</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>玩游戏</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>锻炼</el-checkbox>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="身高">
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>大高个</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>高个</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>正常</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>偏矮</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>矮个</el-checkbox>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="颜值">
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>很好</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>较好</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>正常</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>偏弱</el-checkbox>
						</el-col>
						<el-col :xs="12" :sm="12" :lg="{ span: '4-8' }" class="card-panel-col">
							<el-checkbox>很弱</el-checkbox>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="体质">
							<el-select placeholder="请选择" style="width: 100%">
								<el-optio></el-optio>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="病史">
							<el-select placeholder="请选择" style="width: 100%">
								<el-optio></el-optio>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="刑法">
						<el-row>
							<el-col :span="6">
								<el-checkbox>无</el-checkbox>
							</el-col>
							<el-col :span="6">
								<el-checkbox>拘留</el-checkbox>
							</el-col>
							<el-col :span="6">
								<el-checkbox>取保</el-checkbox>
							</el-col>
							<el-col :span="6">
								<el-checkbox>实刑</el-checkbox>
							</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%">
								<el-optio></el-optio>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别">
							<el-select placeholder="请选择" style="width: 100%">
								<el-optio></el-optio>
							</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">
									<el-checkbox>夫妻</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>父母</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>兄弟</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>姐妹</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>朋友</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>同学</el-checkbox>
								</el-col>
								<el-col :span="6">
									<el-checkbox>战友</el-checkbox>
								</el-col>
							</el-row>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="联系电话">
							<el-input placeholder="请输入联系电话" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工作单位">
							<el-input placeholder="请输入工作单位" />
						</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 border>
				<el-table-column label="名称" align="center" width="180"></el-table-column>
				<el-table-column label="描述" align="center"></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.jobId"> </el-option>
				</el-select>
			</div>
			<div class="responsibility">
				<span>责任</span>
			</div>
			<el-input type="textarea" :rows="3" v-model="responsibility" :disabled="true" placeholder="请输入内容"> </el-input>
			<div class="responsibility">
				<span>权利</span>
			</div>
			<el-input type="textarea" :rows="3" v-model="right" :disabled="true" placeholder="请输入内容"> </el-input>
		</el-dialog>

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

<script>
import { getUser, delUser, addUser, updateUser, getStaffList, getLevelTreeSelect, getResponsibilityRight, getNatureTreeSelect, getAuthRole } 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'

export default {
	name: 'employeenInfo',
	dicts: ['sys_normal_disable', 'sys_user_sex'],
	components: { Treeselect, TreeChoice, userAvatar },
	data() {
		return {
			// 遮罩层
			loading: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 用户表格数据
			userList: null,
			// 弹出层标题
			title: '',
			// 部门树选项
			deptOptions: undefined,
			// 是否显示弹出层
			open: false,
			// 岗位选项
			postOptions: [],
			// 角色选项
			roleOptions: [],
			// 账号表单参数
			accountForm: {
				userId: null
			},
			// 基础表单参数
			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 }
			],
			// 表单校验
			rules: {
				// userName: [
				// 	{ required: true, message: '用户名称不能为空', trigger: 'blur' },
				// 	{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
				// ],
				// nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
				// password: [
				// 	{ required: true, message: '用户密码不能为空', trigger: 'blur' },
				// 	{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
				// ],
				// email: [
				// 	{
				// 		type: 'email',
				// 		message: "'请输入正确的邮箱地址",
				// 		trigger: ['blur', 'change']
				// 	}
				// ],
				// phonenumber: [
				// 	{
				// 		pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
				// 		message: '请输入正确的手机号码',
				// 		trigger: 'blur'
				// 	}
				// ]
			},
			dialogTableRolePermissions: false, // 角色权限弹出层
			dialogPower: false, // 责权信息弹出层
			accountShow: true, // 账号信息
			basicsShow: false, // 基础信息
			props: { multiple: true }, // 联级多选
			// propsLevel: { multiple: true },
			levelList: [], // 级别列表
			natureList: [], // 性质岗位列表
			levelJobs: [], // 责权信息列表
			jodId: '', // 职位id
			responsibility: '', // 职责
			right: '', // 权力
		}
	},
	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
			})
		},
		// 节点单击事件
		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.accountForm.userId =
				Math.max.apply(
					Math,
					this.userList.map(function (item) {
						return item.userId
					})
				) + 1
			// getUser().then((response) => {
			// 	// this.postOptions = response.posts
			// 	// this.roleOptions = response.roles
			// 	// this.form.password = this.initPassword
			// })
		},
		// 修改角色权限
		getRolePermissions(row) {
			getAuthRole(row.userId).then((res) => {
				console.log(res)
			})
			this.dialogTableRolePermissions = true
		},
		// 保存角色权限修改
		saveRolePermissions() {
			this.dialogTableRolePermissions = false
		},
		// 取消角色权限修改
		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)
			console.log(123)
		},
		// 账号信息
		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
				} else {
					this.$msg({ type: 'error', message: res.msg })
				}
			})
		},
		// 获取性质岗位数据
		getNatureList() {
			getNatureTreeSelect().then((res) => {
				if (res.code == 200) {
					this.natureList = res.data
				} else {
					this.$msg({ type: 'error', message: res.msg })
				}
			})
		},
		// 部门级联选择
		deptCascaderChange(val) {
			let getCheckedNodes = this.$refs.deptCascader.getCheckedNodes()
			const newArr = getCheckedNodes.map((item, index, c) => item.data.id)
			this.accountForm.deptIds = newArr.join(',')
			console.log(this.accountForm.deptIds)
		},
		// 职称级别级联选择
		levelCascaderChange(val) {
			let getCheckedNodes = this.$refs.levelCascader.getCheckedNodes()
			const newArr = getCheckedNodes.map((item, index, c) => item.data.id)
			this.accountForm.levelJobIds = newArr.join(',')
			console.log(this.accountForm.levelJobIds)
		},
		// 性质岗位级联选择
		natureCascaderChange(val) {
			let getCheckedNodes = this.$refs.natureCascader.getCheckedNodes()
			const newArr = getCheckedNodes.map((item, index, c) => item.data.id)
			this.accountForm.naturePostIds = newArr.join(',')
			console.log(this.accountForm.naturePostIds)
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset()
			this.getTreeselect()
			const userId = row.userId || this.ids
			getUser(userId).then((response) => {
				this.form = response.data
				this.postOptions = response.posts
				this.roleOptions = response.roles
				this.form.postIds = response.postIds
				this.form.roleIds = response.roleIds
				this.open = true
				this.title = '修改用户'
				this.form.password = ''
			})
		},
		/** 提交按钮 */
		submitForm: function () {
			console.log(this.accountForm)
			this.$refs['accountForm'].validate((valid) => {
				if (valid) {
					if (this.form.userId != undefined) {
						updateUser(this.form).then((response) => {
							this.$modal.msgSuccess('修改成功')
							this.open = false
							this.getList()
						})
					} else {
						addUser(this.accountForm).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()
		}
	}
}
</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;
}
</style>