rr

src/views/system/employeenInfo/index.vue

@@ -15,12 +15,14 @@
 			</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" plain 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>
@@ -28,6 +30,7 @@
 						<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">
@@ -43,99 +46,471 @@
 					<el-table-column label="手机号码" align="center" prop="userId" 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="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">职责权力</el-button>
+							<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 v-show="total > queryParams.pageSize" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 			</div>
 		</div>
 		<!-- 添加或修改用户配置对话框 -->
-		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+		<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="form" :model="form" :rules="rules" label-width="90px" v-show="accountShow">
 				<el-row>
 					<el-col :span="12">
-						<el-form-item label="用户昵称" prop="nickName">
+						<el-form-item label="序号" prop="nickName">
 							<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">
-						<el-form-item label="归属部门" prop="deptId">
-							<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+						<el-form-item label="编号" prop="deptId">
+							<el-input placeholder="请输入编号" maxlength="30" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="12">
+						<el-form-item label="姓名" prop="phonenumber">
+							<el-input v-model="form.phonenumber" placeholder="请输入姓名" maxlength="11" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="手机号" prop="email">
+							<el-input v-model="form.email" placeholder="请输入手机号" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="12">
+						<el-form-item label="账号状态" prop="userName">
+							<el-radio>正常</el-radio>
+							<el-radio>停用</el-radio>
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="性别" prop="password">
+							<el-radio>男</el-radio>
+							<el-radio>女</el-radio>
+						</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-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-select placeholder="请选择" style="width: 100%">
+								<el-option></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="24">
+						<el-form-item label="性质岗位">
+							<el-select placeholder="请选择" style="width: 100%">
+								<el-option></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<!-- 基础信息 -->
+			<el-form ref="form" :model="form" :rules="rules" label-width="90px" v-show="basicsShow" class="basics_form">
+				<el-row>
+					<el-col :span="12">
+						<el-form-item label="年龄" prop="nickName">
+							<el-input v-model="form.nickName" placeholder="请输入年龄" maxlength="30" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="出生日期" prop="deptId">
+							<el-input placeholder="请输入出生日期" maxlength="30" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="12">
+						<el-form-item label="QQ号" prop="phonenumber">
+							<el-input v-model="form.phonenumber" placeholder="请输入姓名" maxlength="11" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="企业微信号" prop="email">
+							<el-input v-model="form.email" placeholder="请输入手机号" />
 						</el-form-item>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="12">
-						<el-form-item label="手机号码" prop="phonenumber">
-							<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+						<el-form-item label="学历" prop="userName">
+							<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="邮箱" prop="email">
-							<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+						<el-form-item label="原籍" prop="password">
+							<el-input v-model="form.email" placeholder="请输入原籍" />
 						</el-form-item>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="12">
-						<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-							<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+						<el-form-item label="现住址">
+							<el-input v-model="form.email" placeholder="请输入现住址" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="家庭成员">
+							<el-input v-model="form.email" placeholder="请输入家庭成员" />
 						</el-form-item>
 					</el-col>
+				</el-row>
+				<el-row>
 					<el-col :span="12">
-						<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-							<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+						<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 v-model="form.email" 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 v-model="form.email" placeholder="请输入原单位" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item label="职务">
+							<el-input v-model="form.email" placeholder="请输入职务" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item label="收入">
+							<el-input v-model="form.email" placeholder="请输入收入" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="8">
+						<el-form-item label="开始时间">
+							<el-input v-model="form.email" placeholder="请输入开始时间" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item label="结束时间">
+							<el-input v-model="form.email" 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 v-model="form.sex" placeholder="请选择">
-								<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+						<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-radio-group v-model="form.status">
-								<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-							</el-radio-group>
+						<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 v-model="form.postIds" multiple placeholder="请选择">
-								<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
+						<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 v-model="form.roleIds" multiple placeholder="请选择">
-								<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
+						<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-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+						<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 v-model="form.email" placeholder="请输入联系电话" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="工作单位">
+							<el-input v-model="form.email" placeholder="请输入工作单位" />
 						</el-form-item>
 					</el-col>
 				</el-row>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
-				<el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
 				<el-button size="mini" @click="cancel">取 消</el-button>
+				<el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
 			</div>
 		</el-dialog>
 
@@ -178,11 +553,29 @@
 				<el-button size="mini" 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>
+					<el-option></el-option>
+				</el-select>
+			</div>
+			<div class="responsibility">
+				<span>责任</span>
+			</div>
+			<el-input type="textarea" :rows="3" readonly placeholder="请输入内容"> </el-input>
+			<div class="responsibility">
+				<span>权利</span>
+			</div>
+			<el-input type="textarea" :rows="3" readonly placeholder="请输入内容"> </el-input>
+		</el-dialog>
 	</div>
 </template>
 
 <script>
-import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from '@/api/system/user'
+import { listUser, getUser, delUser, addUser, updateUser } from '@/api/system/user'
 import { getToken } from '@/utils/auth'
 import { treeselect } from '@/api/system/dept'
 import Treeselect from '@riophae/vue-treeselect'
@@ -287,6 +680,9 @@ export default {
 				]
 			},
 			dialogTableRolePermissions: false, // 角色权限弹出层
+			dialogPower: false, // 责权信息弹出层
+			accountShow: true, // 账号信息
+			basicsShow: false // 基础信息
 		}
 	},
 	created() {
@@ -375,6 +771,20 @@ export default {
 		cancalRolePermissions() {
 			this.dialogTableRolePermissions = false
 		},
+		// 职责权限
+		getDutiesPowers() {
+			this.dialogPower = true
+		},
+		// 账号信息
+		getAccountInfo() {
+			this.accountShow = true
+			this.basicsShow = false
+		},
+		// 基础信息
+		getBasicsInfo() {
+			this.accountShow = false
+			this.basicsShow = true
+		},
 		/** 修改按钮操作 */
 		handleUpdate(row) {
 			this.reset()
@@ -463,3 +873,40 @@ export default {
 	}
 }
 </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;
+}
+
+.el-col-lg-4-8 {
+	width: 20%;
+}
+</style>