<!-- 员工新增/Add -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../css/diy.css">
<script src="../../js/axios.min.js"></script>
<style>
img {
width: 200px;
}
.layui-upload-list{
overflow: hidden;
}
.layui-upload-list .multiple_block .upload_img_multiple{
height: auto;
width: 100px;
}
.multiple_block{
position: relative;
float: left;
width: 100px;
margin: 0 10px 10px 0;
}
.multiple_block .upload-img-del{
position: absolute;
top: 5px;
right: 5px;
color: #fff;
border-radius: 100%;
background: #0000009c;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<article class="sign_in">
<div class="warp tpl">
<div class="layui-container">
<div class="layui-row">
<form class="layui-form" action="">
<div class="form-input-box from-input-box-i">
<div class="layui-form-item">
<div class="layui-upload">
<button type="button" class="layui-btn" id="employee_users">上传头像</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="employee_users_img">
<p id="demoText"></p>
</div>
<div style="width: 95px;">
<div class="layui-progress layui-progress-big" lay-showpercent="yes"
lay-filter="employee_users">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block input-i block">
<input type="text" name="title" lay-verify="title" autocomplete="off"
placeholder="请输入账号"
class="layui-input" id="username">
</div>
</div>
<div id="password_box" class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block input-i block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off"
class="layui-input"
id="password">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">昵称</label>
<div class="layui-input-block input-i block">
<input type="text" name="title" lay-verify="title" autocomplete="off"
placeholder="请输入昵称"
class="layui-input" id="nickname">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block input-i block">
<input type="text" name="title" lay-verify="title" autocomplete="off"
placeholder="请输入邮箱"
class="layui-input" id="email">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block select block">
<select name="interest" lay-filter="state" id="state">
<option value=""></option>
<option value="1">可用</option>
<option value="2">异常</option>
<option value="3">已冻结</option>
<option value="4">已注销</option>
</select>
</div>
</div>
<div class="layui-form-item unique" id="employee_name_box">
<label class="layui-form-label">员工姓名</label>
<div class="layui-input-block input-i block">
<input type="text" name="title" lay-verify="title" autocomplete="off"
placeholder="请输入员工姓名"
class="layui-input" id="employee_name">
</div>
</div>
<div class="layui-form-item select-box" id="employee_gender_box">
<label class="layui-form-label">员工性别</label>
<div class="layui-input-block select block">
<select name="interest" lay-filter="employee_gender" id="employee_gender">
<option value=""></option>
</select>
</div>
</div>
<div class="layui-form-item phone" id="employee_phone_number_box">
<label class="layui-form-label">员工电话</label>
<div class="layui-input-block input-i block">
<input type="text" name="title" lay-verify="title" autocomplete="off"
placeholder="请输入员工电话"
class="layui-input" id="employee_phone_number">
</div>
</div>
<div class="layui-form-item unique" id="employee_id_box">
<label class="layui-form-label">员工工号</label>
<div class="layui-input-block input-i block">
<input type="text" name="title" lay-verify="title" autocomplete="off"
placeholder="请输入员工工号"
class="layui-input" id="employee_id">
</div>
</div>
</div>
</form>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal login" id="submit">确认</button>
<button type="button" class="layui-btn layui-btn-normal login" id="cancel">取消</button>
</div>
</div>
</div>
</div>
</article>
</body>
<script src="../../layui/layui.js"></script>
<script src="../../js/base.js"></script>
<script src="../../js/index.js"></script>
<script>
var BaseUrl = baseUrl()
let cancel = document.querySelector("#cancel")
cancel.addEventListener("click",()=>{
colseLayer()
})
let employee_users_id = location.search.substring(1)
layui.use(['upload', 'element', 'layer', 'laydate', 'layedit'], function () {
var $ = layui.jquery
, upload = layui.upload
, element = layui.element
, layer = layui.layer
, laydate = layui.laydate
, layedit = layui.layedit
, form = layui.form;
let url
let token = sessionStorage.token || null
let personInfo = JSON.parse(sessionStorage.personInfo)
let user_group = personInfo.user_group
let use_id = personInfo.user_id
function $get_stamp() {
return new Date().getTime();
}
function $get_rand(len) {
var rand = Math.random();
return Math.ceil(rand * 10 ** len);
}
// 权限判断
/**
* 获取路径对应操作权限 鉴权
* @param {String} action 操作名
*/
function $check_action(path1, action = "get") {
var o = $get_power(path1);
if (o && o[action] != 0 && o[action] != false) {
return true;
}
return false;
}
/**
* 是否有显示或操作字段的权限
* @param {String} action 操作名
* @param {String} field 查询的字段
*/
function $check_field(action, field, path1) {
var o = $get_power(path1);
var auth;
if (o && o[action] != 0 && o[action] != false) {
auth = o["field_" + action];
}
if (auth) {
return auth.indexOf(field) !== -1;
}
return false;
}
/**
* 获取权限
* @param {String} path 路由路径
*/
function $get_power(path) {
var list_data = JSON.parse(sessionStorage.list_data)
var list = list_data;
var obj;
for (var i = 0; i < list.length; i++) {
var o = list[i];
if (o.path === path) {
obj = o;
break;
}
}
return obj;
}
let submit = document.querySelector('#submit')
// 提交按钮校验权限
if ($check_action('/employee_users/view', 'add') || $check_action('/employee_users/view', 'set') || $check_option('/employee_users/table', 'examine')) {
}else {
$("#submit").hide()
}
// style="display: none"
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#employee_users'
, url: BaseUrl + '/api/employee_users/upload?' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
, headers: {
'x-auth-token': token
}, before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#employee_users_img').attr('src', fullUrl(BaseUrl,result)); //图片链接(base64)
});
element.progress('employee_users', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 0});
}
, done: function (res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
//上传成功的一些操作
//……
form_data.avatar = res.result.url
$('#demoText').html(''); //置空上传失败的状态
}
, error: function () {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
//进度条
, progress: function (n, elem, e) {
element.progress('employee_users', n + '%'); //可配合 layui 进度条元素使用
if (n == 100) {
layer.msg('上传完毕', {icon: 1});
}
}
});
let username = document.querySelector('#username')
let password = document.querySelector('#password')
let nickname = document.querySelector('#nickname')
let email = document.querySelector('#email')
// let phone = document.querySelector('#phone')
// let email_state = document.querySelector('#email_state')
let form_data = {
user_id: 0,
username: '',
nickname: '',
password: '',
avatar: '',
// phone: '',
email: '',
user_group: "员工",
// phone_state: 0,
// email_state: 0,
state: 1,
}
let form_sub = {
"employee_name": '', // 员工姓名
"employee_gender": '', // 员工性别
"employee_phone_number": '', // 员工电话
"employee_id": '', // 员工工号
"user_id": 0,
"employee_users_id": 0 // ID
}
// 员工性别选项列表
let employee_gender_data = ['男','女']
async function list_employee_gender() {
var employee_gender = document.querySelector("#employee_gender")
var op1 = document.createElement("option");
op1.value = '0'
employee_gender.appendChild(op1)
// 收集数据 长度
var count
// 收集数据 数组
var arr = []
count = employee_gender_data.length
arr = employee_gender_data
for (var i = 0; i < arr.length; i++) {
var op = document.createElement("option");
// 给节点赋值
op.innerHTML = arr[i]
op.value = arr[i]
// 新增/Add节点
employee_gender.appendChild(op)
if (form_sub.employee_gender==arr[i].employee_gender){
op.selected = true
}
layui.form.render("select");
}
}
layui.form.on('select(employee_gender)', function (data) {
form_sub.employee_gender = data.elem[data.elem.selectedIndex].text;
})
list_employee_gender()
// 单选框点击事件
// layui.form.on('select(email_state)', function (data) {
// form_data.email_state = Number(data.elem[data.elem.selectedIndex].value);
// })
layui.form.on('select(state)', function (data) {
form_data.state = Number(data.elem[data.elem.selectedIndex].value);
})
// layui.form.on('select(phone_state)', function (data) {
// form_data.phone_state = Number(data.elem[data.elem.selectedIndex].value);
// console.log()
// })
let employee_name = document.querySelector("#employee_name")
let employee_gender = document.querySelector("#employee_gender")
let employee_phone_number = document.querySelector("#employee_phone_number")
let employee_id = document.querySelector("#employee_id")
if (employee_users_id !== '') {
username.disabled = "disabled"
password.disabled = "disabled"
username.style.border = "none"
password.style.border = "none"
$('#print').show();
if (user_group!=='管理员'){
let state = document.querySelector("#state")
state.disabled = "disabled"
state.style.border = "none"
}
async function axios_get_4() {
const {data: rese} = await axios.get(BaseUrl + '/api/user/get_obj', {
params: {
user_id: employee_users_id
}
})
let data_2 = rese.result.obj
Object.keys(form_data).forEach((key) => {
form_data[key] = data_2[key];
});
console.log(form_data)
for (let key in form_data) {
if (key == 'avatar') {
employee_users_img.src = fullUrl(BaseUrl,form_data.avatar)
}
}
// for (let key in form_data) {
// if (key == 'email_state') {
// let alls = document.querySelector('#email_state').querySelectorAll('option')
// let test = form_data[key]
// for (let i = 0; i < alls.length; i++) {
// layui.form.render("select");
// if (alls[i].value == test) {
// alls[i].selected = true
// layui.form.render("select");
// }
// }
// }
// }
// for (let key in form_data) {
// if (key == 'phone_state') {
// let alls = document.querySelector('#phone_state').querySelectorAll('option')
// let test = form_data[key]
// for (let i = 0; i < alls.length; i++) {
// layui.form.render("select");
// if (alls[i].value == test) {
// alls[i].selected = true
// layui.form.render("select");
// }
// }
// }
// }
for (let key in form_data) {
if (key == 'state') {
let alls = document.querySelector('#state').querySelectorAll('option')
let test = form_data[key]
for (let i = 0; i < alls.length; i++) {
layui.form.render("select");
if (alls[i].value == test) {
alls[i].selected = true
layui.form.render("select");
}
}
}
}
username.value = form_data.username
password.value = form_data.password
nickname.value = form_data.nickname
email.value = form_data.email
// phone.value = form_data.phone
document.querySelector('#password_box').style.display = "none";
}
axios_get_4()
async function axios_get_5() {
const {data: rese} = await axios.get(BaseUrl + '/api/employee_users/get_obj', {
params: {
user_id: employee_users_id
}
})
let data_2 = rese.result.obj
Object.keys(form_sub).forEach((key) => {
form_sub[key] = data_2[key];
});
for (let key in form_sub) {
}
employee_name.value = form_sub.employee_name
employee_phone_number.value = form_sub.employee_phone_number
employee_id.value = form_sub.employee_id
for (let key in data_2) {
if (key == 'employee_gender') {
let alls = document.querySelector('#employee_gender').querySelectorAll('option')
let test = data_2[key]
for (let i = 0; i < alls.length; i++) {
if (alls[i].innerHTML == test) {
alls[i].selected = true
layui.form.render("select");
}
}
}
}
}
axios_get_5()
}
submit.onclick = async function () {
form_data.username = username.value
form_data.password = password.value
form_data.nickname = nickname.value
form_data.email = email.value
form_data.password = password.value
// form_data.phone = phone.value
form_data.avatar = !form_data.avatar ? "/api/upload/default_avatar.jpg" : form_data.avatar
form_sub.employee_name = employee_name.value
form_sub.employee_phone_number = employee_phone_number.value
form_sub.employee_id = employee_id.value
var email_regular = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// var phone_regular = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if (!username.value) {
layer.msg('账号不能为空');
} else if (username.value.length > 16 || username.value.length < 5) {
layer.msg('账号长度应为5到16个字符之间');
} else if (!password.value) {
layer.msg('密码不能为空');
} else if (!employee_users_id && (password.value.length > 16 || password.value.length < 5)) {
layer.msg('密码长度应为5到16个字符之间');
} else if (nickname.value.length > 12 || nickname.value.length < 2) {
layer.msg('昵称长度应为2到12个字符之间');
} else if (email.value && !email_regular.test(email.value)) {
layer.msg('请输入正确的邮箱地址 例:test@test.com!');
}
// else if (phone.value && !phone_regular.test(phone.value)) {
// layer.msg('请输入正确的手机号码 例:18955552312!');
// }
else if (form_data) {
let employee_phone_number_phone_regular = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if(form_sub.employee_phone_number && !employee_phone_number_phone_regular.test(form_sub.employee_phone_number)){
layer.msg('手机号格式错误');
return;
}
if (!form_sub.employee_id){
layer.msg('员工工号不能为空');
return;
} else if (!form_sub.employee_users_id) {
const {data: res} = await axios.get(BaseUrl + '/api/employee_users/count', {
params: {
"employee_id": form_sub.employee_id
}
})
if (res.result == 1) {
layer.msg("员工工号已存在!");
return;
}
}
if (employee_users_id == '') {
const {data: res} = await axios.post(BaseUrl + '/api/user/register?', form_data, {
headers: {
'x-auth-token': token,
'Content-Type': 'application/json'
}
})
if (res.error){
layer.msg(res.error.message);
return;
}
}
Object.keys(form_data).forEach(item => {
if (form_data[item] === '') delete form_data[item]
if (form_data[item] === null) delete form_data[item]
})
let data_p = {
username: form_data.username,
nickname: form_data.nickname,
avatar: form_data.avatar,
// phone: form_data.phone,
email: form_data.email,
user_group: form_data.user_group,
// phone_state: form_data.phone_state,
// email_state: form_data.email_state,
state: form_data.state,
}
if (employee_users_id !== '') {
data_p['user_id'] = employee_users_id
}
let data_p_param = {
username:data_p.username,
nickname:data_p.nickname
}
const {data: rese} = await axios.get(BaseUrl + '/api/user/get_obj', {
params: data_p_param
})
let idd
if (employee_users_id == '') {
idd = rese.result.obj.user_id
}else {
idd = employee_users_id
}
form_sub.user_id = idd
//文本
form_sub.employee_name = employee_name.value
//文本
if ((form_sub['employee_users_id'] && $check_field('set', 'employee_name')) || (!form_sub['employee_users_id'] && $check_field('add', 'employee_name'))) {
}else {
$("#employee_name").attr("disabled", true);
$("#employee_name > input[name='file']").attr('disabled', true);
}
if ((form_sub['employee_users_id'] && $check_field('set', 'employee_gender')) || (!form_sub['employee_users_id'] && $check_field('add', 'employee_gender'))) {
}else {
$("#employee_gender").attr("disabled", true);
$("#employee_gender > input[name='file']").attr('disabled', true);
}
if ((form_sub['employee_users_id'] && $check_field('set', 'employee_phone_number')) || (!form_sub['employee_users_id'] && $check_field('add', 'employee_phone_number'))) {
}else {
$("#employee_phone_number").attr("disabled", true);
$("#employee_phone_number > input[name='file']").attr('disabled', true);
}
//文本
form_sub.employee_id = employee_id.value
//文本
//提交修改请求
if ((form_sub['employee_users_id'] && $check_field('set', 'employee_id')) || (!form_sub['employee_users_id'] && $check_field('add', 'employee_id'))) {
}else {
$("#employee_id").attr("disabled", true);
$("#employee_id > input[name='file']").attr('disabled', true);
}
if (employee_users_id == '') {
console.log("新增/Add")
const {data: ress} = await axios.post(BaseUrl + '/api/employee_users/add?', form_sub, {
headers: {
'x-auth-token': token,
'Content-Type': 'application/json'
}
})
if (ress.result == 1) {
layer.msg('确认完毕');
setTimeout(function () {
colseLayer()
}, 1000)
}else if(ress.error){
let user_id = form_sub.user_id;
axios.get(BaseUrl + '/api/user/del', {user_id})
layer.msg(ress.error.message);
}
} else {
console.log("详情/Details")
const {data: res_data} = await axios.post(BaseUrl + '/api/user/set?user_id=' + form_data.user_id, form_data, {
headers: {
'x-auth-token': token,
'Content-Type': 'application/json'
}
})
console.log(res_data)
const {data: res_data2} = await axios.post(BaseUrl + '/api/employee_users/set?employee_users_id=' + form_sub.employee_users_id, form_sub, {
headers: {
'x-auth-token': token,
'Content-Type': 'application/json'
}
})
console.log(res_data2)
if (res_data2.result == 1) {
layer.msg('确认完毕');
setTimeout(function () {
colseLayer()
}, 1000)
}
}
}
}
})
;
</script>
</html>
逐个分析我给的代码,各代码对应的功能,详细一点,不要自己写
最新发布