You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
499 lines
19 KiB
Vue
499 lines
19 KiB
Vue
<template>
|
|
<div>
|
|
<el-card>
|
|
<el-form :inline="true" :model="query" class="query-form" size="mini">
|
|
<el-form-item class="query-form-item">
|
|
<el-input v-model="query.userName" placeholder="用户账号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item class="query-form-item">
|
|
<el-select v-model="query.userFlag" 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-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)"
|
|
:disabled="!configParms.sysUser && query.customerId == 110"
|
|
>新增
|
|
</el-button
|
|
>
|
|
</el-button-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table v-loading="loading" :data="list" style="width: 100%">
|
|
<el-table-column label="序号" type="index" 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="操作" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click.native="handleForm(scope.$index, scope.row)"
|
|
:disabled="!configParms.sysUser"
|
|
>编辑
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
:disabled="scope.row.id === 1 || !configParms.sysUser"
|
|
@click.native="handleDel(scope.$index, scope.row)"
|
|
>删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
:page-size="query.limit"
|
|
@current-change="handleCurrentChange"
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
>
|
|
</el-pagination>
|
|
|
|
<!--表单-->
|
|
<el-dialog
|
|
:title="formMap[formName]"
|
|
:visible.sync="formVisible"
|
|
:before-close="hideForm"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
v-if="formVisible"
|
|
width="70%"
|
|
top="5vh"
|
|
>
|
|
<el-form :model="formData" :rules="formRules" ref="dataForm">
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
|
<el-col :span="10" class="el-col" type="flex">
|
|
<div class="text item">
|
|
<el-form-item label="用户账号" prop="userName">
|
|
<el-input v-model="formData.userName" size="small" style="width: 80%"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10" class="el-col">
|
|
<div class="text item">
|
|
<div class="text item">
|
|
<el-form-item label="用户名称" prop="employeeName">
|
|
<el-input v-model="formData.employeeName" size="small"
|
|
style="width: 80%"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
|
<el-col :span="10" class="el-col" type="flex">
|
|
<div class="text item">
|
|
<el-form-item label="登录密码" prop="passWord">
|
|
<el-input
|
|
type="password" style="width: 80%"
|
|
size="small"
|
|
v-model="formData.passWord"
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10" class="el-col">
|
|
<div class="text item">
|
|
<div class="text item">
|
|
<el-form-item label="确认密码" prop="checkPassword">
|
|
<el-input
|
|
type="password"
|
|
size="small" style="width: 80%"
|
|
v-model="formData.checkPassword"
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
|
<el-col :span="10" class="el-col" type="flex">
|
|
<div class="text item">
|
|
<el-form-item label="备  注" prop="comments">
|
|
<el-input v-model="formData.comments" size="small" style="width: 80%"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="状态" prop="userFlag">
|
|
<el-radio-group v-model="formData.userFlag" :disabled="formData.id === 1">
|
|
<el-radio :label="0">禁用</el-radio>
|
|
<el-radio :label="1">正常</el-radio>
|
|
<!-- <el-radio :label="2">未验证</el-radio>-->
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="角色">
|
|
<el-checkbox-group v-model="formData.roles" :disabled="formData.id === 1">
|
|
<el-checkbox
|
|
v-for="item in roles"
|
|
:key="item.id"
|
|
:label="item.id"
|
|
>{{ item.name }}
|
|
</el-checkbox
|
|
>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</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,
|
|
authAdminRoleList,
|
|
authAdminSave,
|
|
authAdminDelete,
|
|
roleCustomers
|
|
} from "../../../api/auth/authAdmin";
|
|
|
|
import store from "../../../store/index";
|
|
import {findConfig} from "@/api/thrsys/spsSyncStatus";
|
|
import {isBlank} from "@/utils/strUtil";
|
|
|
|
const formJson = {
|
|
id: "",
|
|
passWord: "",
|
|
userName: "",
|
|
checkPassword: "",
|
|
employeeName: "",
|
|
userFlag: 1,
|
|
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: 10,
|
|
roleId: "",
|
|
customerId: store.getters.customerId,
|
|
},
|
|
list: [],
|
|
total: 0,
|
|
loading: true,
|
|
index: null,
|
|
formName: null,
|
|
formMap: {
|
|
add: "新增",
|
|
edit: "编辑"
|
|
},
|
|
formLoading: false,
|
|
formVisible: false,
|
|
formData: formJson,
|
|
configParms: {},
|
|
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"}
|
|
],
|
|
passWord: [
|
|
{required: true, message: "请输入密码", trigger: "blur"}
|
|
]
|
|
},
|
|
deleteLoading: false
|
|
};
|
|
},
|
|
methods: {
|
|
onReset() {
|
|
this.$router.push({
|
|
path: ""
|
|
});
|
|
this.query = {
|
|
userName: "",
|
|
userFlag: "",
|
|
page: 1,
|
|
limit: 10,
|
|
roleId: "",
|
|
customerId: store.getters.customerId,
|
|
};
|
|
this.getList();
|
|
},
|
|
onSubmit() {
|
|
this.$router.push({
|
|
path: "",
|
|
query: this.query
|
|
});
|
|
this.getList();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.query.page = val;
|
|
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() {
|
|
roleCustomers(this.query)
|
|
.then(response => {
|
|
this.roles = response.data.list || [];
|
|
})
|
|
.catch(() => {
|
|
this.roles = [];
|
|
});
|
|
},
|
|
// 刷新表单
|
|
resetForm() {
|
|
this.$nextTick(() => {
|
|
this.$refs["dataForm"].resetFields();
|
|
this.$refs["dataForm"].clearValidate();
|
|
})
|
|
},
|
|
// 隐藏表单
|
|
hideForm() {
|
|
// 更改值
|
|
this.formVisible = !this.formVisible;
|
|
// 清空表单
|
|
this.$refs["dataForm"].resetFields(); //清除表单数据
|
|
return true;
|
|
},
|
|
// 显示表单
|
|
handleForm(index, row) {
|
|
this.formVisible = true;
|
|
this.resetForm();
|
|
this.formData = JSON.parse(JSON.stringify(formJson));
|
|
if (row !== null) {
|
|
this.formData = {
|
|
id: row.id,
|
|
passWord: row.passWord,
|
|
userName: row.userName,
|
|
checkPassword: "",
|
|
employeeName: row.employeeName,
|
|
userFlag: 1,
|
|
comments: row.comments,
|
|
roles: row.roles
|
|
};
|
|
}
|
|
this.formName = "add";
|
|
this.formRules = this.addRules;
|
|
if (index !== null) {
|
|
this.index = index;
|
|
this.formName = "edit";
|
|
this.formRules = this.editRules;
|
|
}
|
|
},
|
|
formSubmit() {
|
|
if (isBlank(this.formData.userName)) {
|
|
this.$message.error("用户账号不能为空");
|
|
return;
|
|
} else if (isBlank(this.formData.passWord)) {
|
|
this.$message.error("密码不能为空")
|
|
return;
|
|
} else if (isBlank(this.formData.employeeName)) {
|
|
this.$message.error("用户名称不能为空");
|
|
return;
|
|
} else if (this.formData.roles.length === 0) {
|
|
this.$message.error("未指定角色！")
|
|
return;
|
|
}
|
|
|
|
this.$refs["dataForm"].validate(valid => {
|
|
if (valid) {
|
|
this.formLoading = true;
|
|
let data = Object.assign({}, this.formData);
|
|
authAdminSave(data, 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();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 删除
|
|
handleDel(index, row) {
|
|
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("取消删除");
|
|
});
|
|
}
|
|
},
|
|
getSyncConfig() {
|
|
findConfig()
|
|
.then((response) => {
|
|
if (response.code == 20000) {
|
|
this.configParms = response.data;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
});
|
|
},
|
|
},
|
|
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() {
|
|
// 将参数拷贝进查询对象
|
|
let query = this.$route.query;
|
|
this.query = Object.assign(this.query, query);
|
|
this.query.limit = parseInt(this.query.limit);
|
|
// 加载表格数据
|
|
this.getList();
|
|
// 加载角色列表
|
|
this.getRoleList();
|
|
this.getSyncConfig();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style type="text/scss" lang="scss">
|
|
</style>
|