用户列表代码提交
郑明梁
2 years ago
parent
b58e4c1f49
commit
6ef4f11a30
@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-form :model="query" label-width="100px" >
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="用户账号:">
|
||||
<el-input v-model="query.userName" style="width: 90%" placeholder="请输入用户账号"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="状态:">
|
||||
<el-select v-model="query.userFlag" style="width: 90%" placeholder="请选择状态">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="禁用" value="0"></el-option>
|
||||
<el-option label="正常" value="1"></el-option>
|
||||
<el-option label="未验证" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
|
||||
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" @click.native="handleForm(null, null)">新增</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
|
||||
<el-table v-loading="loading" :data="list" border style="width: 100%">
|
||||
<el-table-column label="序号" type="index" width="50" fixed></el-table-column>
|
||||
<el-table-column label="用户账号" prop="userName" fixed></el-table-column>
|
||||
<el-table-column label="用户名称" prop="employeeName" fixed>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" fixed="">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.userFlag | statusFilterType">{{
|
||||
scope.row.userFlag | statusFilterName
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="comments" fixed></el-table-column>
|
||||
<el-table-column
|
||||
label="登录时间"
|
||||
with="300"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span> {{ scope.row.lastLoginTime }}</span>
|
||||
<!-- <span>{{ formatTime(scope.row.lastLoginTime,"yyyy-MM-dd") }}</span> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click.native="handleForm(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button type="text" size="small" @click.native="handleDel(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:limit.sync="query.limit"
|
||||
:page.sync="query.page"
|
||||
@pagination="handleCurrentChange"
|
||||
></pagination>
|
||||
|
||||
<el-dialog
|
||||
:title="formMap[formName]"
|
||||
:visible.sync="formVisible"
|
||||
:before-close="hideForm"
|
||||
width="60%"
|
||||
top="5vh"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<el-form :model="formData" :rules="formRules" label-width="120px" ref="dataForm">
|
||||
<el-row >
|
||||
<el-col :span="12" >
|
||||
<el-form-item label="用户账号" prop="userName">
|
||||
<el-input v-model="formData.userName" style="width: 90%" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="el-col">
|
||||
<el-form-item label="用户名称" prop="employeeName">
|
||||
<el-input v-model="formData.employeeName" style="width: 90%" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row >
|
||||
<el-col :span="12">
|
||||
<el-form-item label="登录密码" prop="passWord">
|
||||
<el-input type="password" style="width: 90%" size="small" v-model="formData.passWord"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="确认密码" prop="checkPassword">
|
||||
<el-input type="password" size="small" style="width: 90%" v-model="formData.checkPassword"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="comments">
|
||||
<el-input type="text" size="small" style="width: 90%" v-model="formData.comments"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="hideForm" size="small">取消</el-button>
|
||||
<el-button type="primary" size="small" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
authAdminList,
|
||||
authCustomerRoles,
|
||||
authAdminSave,
|
||||
authAdminDelete,
|
||||
} from "../../api/auth/authAdmin";
|
||||
|
||||
import {userInfo} from "../../api/auth/login";
|
||||
|
||||
const formJson = {
|
||||
id: "",
|
||||
passWord: "",
|
||||
userName: "",
|
||||
checkPassword: "",
|
||||
employeeName: "",
|
||||
userFlag: 1,
|
||||
customerId: "",
|
||||
comments: "",
|
||||
roles: [],
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
let validatePass = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入密码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
let validatePass2 = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请再次输入密码"));
|
||||
} else if (value !== this.formData.passWord) {
|
||||
callback(new Error("两次输入密码不一致!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
roles: [],
|
||||
query: {
|
||||
userName: "",
|
||||
userFlag: "",
|
||||
page: 1,
|
||||
limit: 20,
|
||||
roleId: "",
|
||||
customerId: "",
|
||||
companyName: "",
|
||||
},
|
||||
list: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
index: null,
|
||||
formName: null,
|
||||
formMap: {
|
||||
add: "新增",
|
||||
edit: "编辑",
|
||||
},
|
||||
|
||||
userInfo: {
|
||||
customerId: "",
|
||||
companyName: "",
|
||||
userId: "",
|
||||
roles: [],
|
||||
},
|
||||
formLoading: false,
|
||||
formVisible: false,
|
||||
formData: formJson,
|
||||
formRules: {},
|
||||
addRules: {
|
||||
userName: [{required: true, message: "请输入姓名", trigger: "blur"}],
|
||||
passWord: [
|
||||
{required: true, message: "请输入密码", trigger: "blur"},
|
||||
{validator: validatePass, trigger: "blur"},
|
||||
],
|
||||
checkPassword: [
|
||||
{
|
||||
required: true,
|
||||
message: "请再次输入密码",
|
||||
trigger: "blur",
|
||||
},
|
||||
{validator: validatePass2, trigger: "blur"},
|
||||
],
|
||||
// userFlag: [
|
||||
// { required: true, message: "请选择状态", trigger: "change" },
|
||||
// ],
|
||||
},
|
||||
editRules: {
|
||||
userName: [{required: true, message: "请输入姓名", trigger: "blur"}],
|
||||
// userFlag: [
|
||||
// { required: true, message: "请选择状态", trigger: "change" },
|
||||
// ],
|
||||
},
|
||||
deleteLoading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onReset() {
|
||||
this.$router.push({
|
||||
path: "",
|
||||
});
|
||||
this.query = {
|
||||
userName: "",
|
||||
userFlag: "",
|
||||
page: 1,
|
||||
limit: 20,
|
||||
roleId: "",
|
||||
customerId: this.userInfo.customerId,
|
||||
companyName: this.userInfo.companyName,
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
onSubmit() {
|
||||
this.$router.push({
|
||||
path: "",
|
||||
query: this.query,
|
||||
});
|
||||
this.query.page = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.query.page = val.page;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
authAdminList(this.query)
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
this.list = response.data.list || [];
|
||||
this.total = response.data.total || 0;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
this.list = [];
|
||||
this.total = 0;
|
||||
this.roles = [];
|
||||
});
|
||||
},
|
||||
getRoleList() {
|
||||
authCustomerRoles(this.query)
|
||||
.then((response) => {
|
||||
this.roles = response.data.list || [];
|
||||
})
|
||||
.catch(() => {
|
||||
this.roles = [];
|
||||
});
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
userInfo()
|
||||
.then((response) => {
|
||||
this.userInfo = {
|
||||
customerId: response.data.customerId,
|
||||
companyName: response.data.companyName,
|
||||
userId: response.data.id,
|
||||
roles: response.data.roleIds,
|
||||
};
|
||||
this.query.customerId = response.data.customerId;
|
||||
this.query.companyName = response.data.companyName;
|
||||
|
||||
this.getList();
|
||||
})
|
||||
.catch(() => {
|
||||
this.customerId = "";
|
||||
this.companyName = "";
|
||||
});
|
||||
},
|
||||
|
||||
// 刷新表单
|
||||
resetForm() {
|
||||
if (this.$refs["dataForm"]) {
|
||||
// 清空验证信息表单
|
||||
this.$refs["dataForm"].clearValidate();
|
||||
// 刷新表单
|
||||
this.$refs["dataForm"].resetFields();
|
||||
}
|
||||
},
|
||||
// 隐藏表单
|
||||
hideForm() {
|
||||
// 更改值
|
||||
this.formVisible = !this.formVisible;
|
||||
// 清空表单
|
||||
this.$refs["dataForm"].resetFields();
|
||||
return true;
|
||||
},
|
||||
// 显示表单
|
||||
handleForm(index, row) {
|
||||
this.formVisible = true;
|
||||
this.formData = JSON.parse(JSON.stringify(formJson));
|
||||
if (row !== null) {
|
||||
this.formData = Object.assign({}, row);
|
||||
}
|
||||
this.formName = "add";
|
||||
this.formRules = this.addRules;
|
||||
if (index !== null) {
|
||||
this.index = index;
|
||||
this.formName = "edit";
|
||||
this.formRules = this.addRules;
|
||||
}
|
||||
},
|
||||
formSubmit() {
|
||||
this.$refs["dataForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.formLoading = true;
|
||||
this.formData.userFlag = 1;
|
||||
this.formData.roles = this.userInfo.roles;
|
||||
this.formData.customerId = this.userInfo.customerId;
|
||||
this.formData.companyName = this.userInfo.companyName;
|
||||
let data = Object.assign({}, this.formData);
|
||||
let savequery = {
|
||||
id: this.formData.id,
|
||||
userFlag: 1,
|
||||
roles: this.userInfo.roles,
|
||||
customerId: this.userInfo.customerId,
|
||||
companyName: this.userInfo.companyName,
|
||||
passWord: this.formData.passWord,
|
||||
userName: this.formData.userName,
|
||||
employeeName: this.formData.employeeName,
|
||||
comments: this.formData.comments,
|
||||
};
|
||||
authAdminSave(savequery, this.formName).then((response) => {
|
||||
this.formLoading = false;
|
||||
if (response.code !== 20000) {
|
||||
this.$message.error(response.message);
|
||||
return false;
|
||||
}
|
||||
this.$message.success("操作成功");
|
||||
this.formVisible = false;
|
||||
if (this.formName === "add") {
|
||||
// 向头部添加数据
|
||||
if (response.data && response.data.id) {
|
||||
data.id = response.data.id;
|
||||
this.list.unshift(data);
|
||||
}
|
||||
} else {
|
||||
this.list.splice(this.index, 1, data);
|
||||
}
|
||||
// 刷新表单
|
||||
this.resetForm();
|
||||
});
|
||||
} else {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
handleDel(index, row) {
|
||||
if (row.id === this.userInfo.userId) {
|
||||
this.$message.warning("不能删除自己");
|
||||
} else if (row.id) {
|
||||
this.$confirm("确认删除该记录吗?", "提示", {
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let para = {id: row.id};
|
||||
this.deleteLoading = true;
|
||||
authAdminDelete(para)
|
||||
.then((response) => {
|
||||
this.deleteLoading = false;
|
||||
if (response.code !== 20000) {
|
||||
this.$message.error(response.message);
|
||||
return false;
|
||||
}
|
||||
this.$message.success("操作成功");
|
||||
// 刷新数据
|
||||
this.list.splice(index, 1);
|
||||
})
|
||||
.catch(() => {
|
||||
this.deleteLoading = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info("取消删除");
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
statusFilterType(status) {
|
||||
const statusMap = {
|
||||
0: "gray",
|
||||
1: "success",
|
||||
2: "danger",
|
||||
};
|
||||
return statusMap[status];
|
||||
},
|
||||
statusFilterName(status) {
|
||||
const statusMap = {
|
||||
0: "禁用",
|
||||
1: "正常",
|
||||
2: "未验证",
|
||||
};
|
||||
return statusMap[status];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style type="text/scss" lang="scss">
|
||||
</style>
|
||||
Loading…
Reference in New Issue