<template>
|
<div class="inquire">
|
<el-form ref="queryForm" :model="queryFormdata" :inline="true">
|
<el-form-item label="用户名">
|
<el-input v-model="queryFormdata.username" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="queryInfo()" icon="el-icon-search"
|
>查询
|
</el-button>
|
</el-form-item>
|
<br />
|
</el-form>
|
</div>
|
<div class="header_nox">
|
<!-- <el-button type="warning" @click="dialogFormVisible = true" -->
|
<el-button type="warning" @click="handleAdd()">新增用户</el-button>
|
</div>
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="username" label="用户名" />
|
<el-table-column prop="realname" label="姓名" />
|
<!-- <el-table-column prop="orgCode" label="部门" /> -->
|
<!-- <el-table-column prop="status_dictText" label="状态" /> -->
|
<el-table-column label="操作">
|
<template #default="scope">
|
<el-button size="small" type="primary" @click="handleEdit(scope.row)"
|
>编辑</el-button
|
>
|
<el-button size="small" type="primary" @click="showInfo(scope.row)"
|
>详情</el-button
|
>
|
<el-button
|
size="small"
|
type="danger"
|
@click="frozen(scope.row)"
|
v-if="scope.row.status == 1"
|
>冻结</el-button
|
>
|
<el-button
|
size="small"
|
type="info"
|
@click="thaw(scope.row)"
|
v-if="scope.row.status == 2"
|
>解冻</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:page-count="pageData.total"
|
:current-page="pageData.ListData.pageNo"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<!-- <el-dialog
|
v-model="dialogFormVisible"
|
title="新增用户"
|
customClass="addWidth"
|
width="20%"
|
>
|
<el-form
|
ref="ruleFormRef"
|
:model="ruleForm"
|
status-icon
|
:rules="rules"
|
label-width="120px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="用户名" prop="username">
|
<el-input v-model="ruleForm.username" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="登录密码" prop="password">
|
<el-input v-model="ruleForm.password" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confirmPassword">
|
<el-input
|
v-model="ruleForm.confirmPassword"
|
type="password"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="用户姓名">
|
<el-input v-model="ruleForm.realname" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="工号" prop="workNo">
|
<el-input v-model="ruleForm.workNo" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="身份">
|
<el-radio-group v-model="ruleForm.userIdentity">
|
<el-radio :label="1"></el-radio>
|
<el-radio :label="2"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="phone">
|
<el-input v-model="ruleForm.phone" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="工作流引擎">
|
<el-radio-group v-model="ruleForm.activitiSync">
|
<el-radio :label="1">同步</el-radio>
|
<el-radio :label="2">不同步</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
<el-button type="primary" @click="addUser(ruleFormRef)">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<el-dialog
|
v-model="editFormVisible"
|
title="编辑用户"
|
customClass="addWidth"
|
width="20%"
|
>
|
<el-form :model="formEdit">
|
<el-form-item label="用户名">
|
<el-input v-model="formEdit.name" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="年龄">
|
<el-input v-model="formEdit.age" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="电话">
|
<el-input v-model="formEdit.phone" autocomplete="off" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="editFormVisible = false">关闭</el-button>
|
<el-button type="primary" @click="editUser"> 确认修改 </el-button>
|
</span>
|
</template>
|
</el-dialog> -->
|
|
<el-drawer
|
ref="drawerRef"
|
v-model="dialog"
|
title="用户详情"
|
:before-close="handleClose"
|
direction="ltr"
|
class="demo-drawer"
|
>
|
<div class="demo-drawer__content">
|
<el-form
|
ref="ruleFormRef"
|
:model="ruleForm"
|
status-icon
|
:rules="rules"
|
label-width="120px"
|
class="demo-ruleForm"
|
:disabled="!isEdit"
|
>
|
<el-form-item label="用户名" prop="username">
|
<el-input v-model="ruleForm.username" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="登录密码" prop="password">
|
<el-input v-model="ruleForm.password" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confirmPassword">
|
<el-input
|
v-model="ruleForm.confirmPassword"
|
type="password"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="用户姓名">
|
<el-input v-model="ruleForm.realname" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="工号" prop="workNo">
|
<el-input v-model="ruleForm.workNo" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="身份">
|
<el-radio-group v-model="ruleForm.userIdentity">
|
<el-radio :label="1"></el-radio>
|
<el-radio :label="2"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="phone">
|
<el-input v-model="ruleForm.phone" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="工作流引擎">
|
<el-radio-group v-model="ruleForm.activitiSync">
|
<el-radio :label="1">同步</el-radio>
|
<el-radio :label="2">不同步</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<div class="demo-drawer__footer" v-if="isEdit">
|
<el-button @click="cancelForm">重置</el-button>
|
<el-button type="primary" :loading="loading" @click="onClick">{{
|
loading ? "正在更新 ..." : "编辑"
|
}}</el-button>
|
</div>
|
<div class="demo-drawer__footer" v-if="isAdd">
|
<el-button @click="cancelForm">重置</el-button>
|
<el-button type="primary" :loading="loading" @click="onClick">{{
|
loading ? "正在更新 ..." : "新增"
|
}}</el-button>
|
</div>
|
</div>
|
</el-drawer>
|
</template>
|
|
<script>
|
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
import {
|
userList,
|
add,
|
deleteUser,
|
edit,
|
modifyPassword,
|
duplicateUser,
|
frozenBatch,
|
} from "@/api/account";
|
import { FormInstance, FormRules, ElMessageBox, ElDrawer } from "element-plus";
|
|
export default {
|
name: "NewsIndex",
|
components: {},
|
props: {},
|
setup(props) {
|
const ruleFormRef = ref();
|
const ruleForm = reactive({
|
username: "",
|
password: "",
|
realname: "",
|
workNo: "",
|
userIdentity: 1,
|
phone: "",
|
activitiSync: 1,
|
confirmPassword: "",
|
departIds: "",
|
});
|
const username = (rule, value, callback) => {
|
var reg = new RegExp(/^[a-zA-Z0-9_]{0,15}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("请输入用户名"));
|
} else {
|
if (!reg.test(value)) {
|
callback(new Error("账号必须由字母，数字或下划线,长度不得超过16位"));
|
} else {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "username",
|
fieldVal: value,
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("账号已存在"));
|
});
|
}
|
}
|
};
|
const workNo = (rule, value, callback) => {
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("请输入工号"));
|
} else {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "work_no",
|
fieldVal: value,
|
})
|
.then(() => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("工号已存在"));
|
});
|
}
|
};
|
const phone = (rule, value, callback) => {
|
var reg = new RegExp(/^[1][3,4,5,7,8][0-9]{9}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
|
if (value === "" || value === null || value === undefined) {
|
return callback(new Error("请输入手机号"));
|
} else {
|
if (!reg.test(value)) {
|
callback(new Error("手机号格式错误"));
|
} else {
|
duplicateUser({
|
tableName: "sys_user",
|
fieldName: "phone",
|
fieldVal: value,
|
})
|
.then((res) => {
|
callback();
|
})
|
.catch((err) => {
|
callback(new Error("手机号已存在"));
|
});
|
}
|
}
|
};
|
const validatePass = (rule, value, callback) => {
|
var reg = new RegExp(/^[a-zA-Z0-9]{0,15}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
|
if (value === "") {
|
callback(new Error("请输入密码"));
|
} else {
|
if (!reg.test(value)) {
|
callback(new Error("密码必须由字母或数字组成,长度不得超过16位"));
|
} else {
|
callback();
|
}
|
}
|
};
|
const validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== ruleForm.password) {
|
callback(new Error("两次密码不一致！"));
|
} else {
|
callback();
|
}
|
};
|
const rules = reactive({
|
password: [{ validator: validatePass, trigger: "blur" }],
|
confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
|
username: [{ validator: username, trigger: "blur" }],
|
workNo: [{ validator: workNo, trigger: "blur" }],
|
phone: [{ validator: phone, trigger: "blur" }],
|
});
|
|
const resetForm = (formEl) => {
|
if (!formEl) return;
|
formEl.resetFields();
|
};
|
|
const value = ref("");
|
let tableData = ref([]);
|
const formLabelWidth = "40px";
|
|
const { proxy } = getCurrentInstance();
|
|
let queryFormdata = reactive({
|
username: "",
|
});
|
let pageData = reactive({
|
ListData: {
|
pageNo: 1,
|
pageSize: 10,
|
},
|
total: 0,
|
});
|
// 详情
|
const dialog = ref(false);
|
const isEdit = ref(false);
|
const loading = ref(false);
|
const form = reactive({
|
username: "",
|
password: "",
|
realname: "",
|
workNo: "",
|
userIdentity: 1,
|
phone: "",
|
activitiSync: 1,
|
confirmPassword: "",
|
departIds: "",
|
});
|
const drawerRef = ref();
|
const onClick = () => {
|
console.log(form);
|
drawerRef.value.close();
|
};
|
|
const handleClose = (done) => {
|
if (loading.value) {
|
return;
|
}
|
ElMessageBox.confirm("是否关闭")
|
.then(() => {
|
loading.value = true;
|
done();
|
loading.value = false;
|
})
|
.catch(() => {
|
// catch error
|
});
|
};
|
|
const cancelForm = () => {
|
loading.value = false;
|
dialog.value = false;
|
};
|
const formEdit = reactive({});
|
const dialogFormVisible = ref(false);
|
const editFormVisible = ref(false);
|
|
//请求列表方法
|
const getListData = async () => {
|
const data = await userList(pageData.ListData);
|
tableData.value = data.result.records;
|
pageData.total = Math.ceil(
|
data.result.total / pageData.ListData.pageSize
|
);
|
};
|
// 分页器
|
const handleCurrentChange = (val) => {
|
pageData.ListData.pageNo = val;
|
|
getListData();
|
};
|
// 冻结
|
const frozen = async (val) => {
|
const data = await frozenBatch({ ids: val.id, status: 2 });
|
console.log(data);
|
proxy.$message({
|
message: "账号冻结成功",
|
type: "success",
|
});
|
getListData();
|
};
|
// 解冻
|
const thaw = async (val) => {
|
const data = await frozenBatch({ ids: val.id, status: 1 });
|
console.log(data);
|
proxy.$message({
|
message: "账号解冻成功",
|
type: "success",
|
});
|
getListData();
|
};
|
// 查看详情
|
const showInfo = async (val) => {
|
isEdit.value = false;
|
console.log(isEdit.value);
|
dialog.value = true;
|
ruleForm.id = val.id;
|
ruleForm.username = val.username;
|
ruleForm.password = val.password;
|
ruleForm.realname = val.realname;
|
ruleForm.workNo = val.workNo;
|
ruleForm.userIdentit = val.userIdentit;
|
ruleForm.phone = val.phone;
|
ruleForm.activitiSyn = val.activitiSyn;
|
ruleForm.confirmPassword = val.confirmPassword;
|
ruleForm.departIds = val.departIds;
|
};
|
//删除用户
|
// const handleDelete = async (val) => {
|
// const data = await deleteUser(val.id);
|
// console.log(data);
|
// proxy.$message({
|
// message: "删除",
|
// type: "success",
|
// });
|
// getListData();
|
// };
|
// 编辑用户
|
const handleEdit = async (val) => {
|
isEdit.value = true;
|
console.log(isEdit.value);
|
dialog.value = true;
|
ruleForm.id = val.id;
|
ruleForm.username = val.username;
|
ruleForm.password = val.password;
|
ruleForm.realname = val.realname;
|
ruleForm.workNo = val.workNo;
|
ruleForm.userIdentit = val.userIdentit;
|
ruleForm.phone = val.phone;
|
ruleForm.activitiSyn = val.activitiSyn;
|
ruleForm.confirmPassword = val.confirmPassword;
|
ruleForm.departIds = val.departIds;
|
// editFormVisible.value = true;
|
// formEdit.password = val.password;
|
// formEdit.id = val.id;
|
// formEdit.name = val.name;
|
// formEdit.age = val.age;
|
// formEdit.phone = val.phone;
|
};
|
const editUser = async (val) => {
|
let user = {
|
id: formEdit.id,
|
name: formEdit.name,
|
password: formEdit.password,
|
age: formEdit.age,
|
phone: formEdit.phone,
|
};
|
|
const data = await edit(user);
|
if (data.code == 200) {
|
getListData();
|
editFormVisible.value = false;
|
} else {
|
}
|
};
|
//新增用户
|
const handleAdd = () => {};
|
const addUser = (formEl) => {
|
if (!formEl) return;
|
formEl.validate((valid) => {
|
if (valid) {
|
let user = {
|
username: ruleForm.username,
|
password: ruleForm.password,
|
confirmPassword: ruleForm.confirmPassword,
|
realname: ruleForm.realname,
|
workNo: ruleForm.workNo,
|
userIdentity: ruleForm.userIdentity,
|
phone: ruleForm.phone,
|
activitiSync: ruleForm.activitiSync,
|
departIds: "",
|
};
|
add(user).then((res) => {
|
console.log(res);
|
if (res.success) {
|
proxy.$message({
|
message: "注册成功",
|
type: "success",
|
});
|
}
|
});
|
|
dialogFormVisible.value = false;
|
getListData();
|
} else {
|
return false;
|
}
|
});
|
};
|
// 查询用户
|
const queryInfo = async () => {
|
let searchData = {
|
username: queryFormdata.username.trim(),
|
};
|
const data = await userList(searchData);
|
tableData.value = data.result.records;
|
pageData.total = Math.ceil(
|
data.result.total / pageData.ListData.pageSize
|
);
|
};
|
|
//进入页面，就会被调用
|
getListData();
|
|
function showState(row, column, cellValue, index) {
|
if (cellValue === 0) return "正常";
|
else return "异常";
|
}
|
|
return {
|
isEdit,
|
queryFormdata,
|
|
loading,
|
dialog,
|
form,
|
drawerRef,
|
onClick,
|
handleClose,
|
cancelForm,
|
handleAdd,
|
queryInfo,
|
ruleFormRef,
|
value,
|
pageData,
|
rules,
|
resetForm,
|
ruleForm,
|
tableData,
|
handleCurrentChange,
|
// handleDelete,
|
frozen,
|
thaw,
|
showState,
|
dialogFormVisible,
|
formLabelWidth,
|
addUser,
|
deleteUser,
|
modifyPassword,
|
editFormVisible,
|
handleEdit,
|
showInfo,
|
editUser,
|
formEdit,
|
};
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.addWidth {
|
width: 20% !important;
|
min-width: 100px !important;
|
}
|
.page {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
.header_nox {
|
text-align: right;
|
}
|
</style>
|
