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.
287 lines
10 KiB
Vue
287 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<el-card class="el-card">
|
|
<el-form
|
|
:inline="true"
|
|
:model="queryParams"
|
|
size="mini"
|
|
>
|
|
<el-form-item label="名称">
|
|
<el-input
|
|
v-model="queryParams.name"
|
|
size="mini"
|
|
placeholder="请输入名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select
|
|
v-model="queryParams.status"
|
|
placeholder="状态"
|
|
>
|
|
<el-option
|
|
v-for="item in statusOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></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 @click.native.stop="insert">新增</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" />
|
|
<el-table-column label="用户账号" prop="userName" />
|
|
<el-table-column label="用户昵称" prop="nickName" />
|
|
<el-table-column label="状态" prop="status">
|
|
<template slot-scope="scope">
|
|
<span>{{ getStatus(scope.row.status) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="角色" prop="status">
|
|
<template slot-scope="scope">
|
|
<span>{{ getRoleName(scope.row.roleId) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
|
|
<el-table-column label="操作" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small" @click.native.stop="update(scope.row.id)">修改</el-button>
|
|
<el-button type="text" size="small" @click.native.stop="deleteRow(scope.row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
:current-page="queryParams.page"
|
|
:page-size="queryParams.limit"
|
|
@current-change="handleCurrentChange"
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
></el-pagination>
|
|
</el-card>
|
|
<el-dialog :title="dialog.title"
|
|
:visible.sync="dialog.visible"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
>
|
|
<el-form :model="dialog.detail" label-position="left" label-width="100px">
|
|
<el-form-item label="key" prop="userKey">
|
|
<el-input v-model="dialog.detail.userKey" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="用户账号" prop="name">
|
|
<el-input v-model="dialog.detail.userName" />
|
|
</el-form-item>
|
|
<el-form-item label="用户昵称" prop="nickName">
|
|
<el-input v-model="dialog.detail.nickName" />
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="sort">
|
|
<el-input v-model="dialog.detail.password" />
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="status">
|
|
<el-radio v-model="dialog.detail.status" label="1">启用</el-radio>
|
|
<el-radio v-model="dialog.detail.status" label="0">禁用</el-radio>
|
|
</el-form-item>
|
|
<el-form-item label="角色" prop="roleId">
|
|
<el-select
|
|
v-model="dialog.detail.roleId"
|
|
placeholder="角色"
|
|
>
|
|
<el-option
|
|
v-for="item in roleList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="appId" prop="udplat_appId">
|
|
<el-input v-model="dialog.detail.udplat_appId"/>
|
|
</el-form-item>
|
|
<el-form-item label="userName" prop="udplat_userName">
|
|
<el-input v-model="dialog.detail.udplat_userName"/>
|
|
</el-form-item>
|
|
<el-form-item label="密钥" prop="sort">
|
|
<el-input v-model="dialog.detail.udplat_secretKey"/>
|
|
</el-form-item>-->
|
|
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialog.visible = false">取 消</el-button>
|
|
<el-button type="primary" @click="save">保存</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { GetList, Insert, Update, Detail, Delete, GetRoleList } from "@/api/sys/sysUser";
|
|
|
|
export default {
|
|
name: "sysUser",
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
list: [],
|
|
total: 0,
|
|
statusOptions: [{ value: "", label: "全部" }, { value: "0", label: "禁用" }, { value: "1", label: "启用" }],
|
|
roleList: [],
|
|
queryParams: {
|
|
page: 1,
|
|
limit: 10,
|
|
name: "",
|
|
status: ""
|
|
},
|
|
dialog: {
|
|
visible: false,
|
|
title: "新增",
|
|
detail: {}
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
this.getRoleList();
|
|
},
|
|
methods: {
|
|
getRoleList() {
|
|
GetRoleList().then(result => {
|
|
this.roleList = result.data.list;
|
|
});
|
|
},
|
|
getList() {
|
|
this.loading = true;
|
|
GetList(this.queryParams).then(res => {
|
|
this.list = res.data.list;
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.queryParams.page = val;
|
|
this.getList();
|
|
},
|
|
getStatus(status) {
|
|
return this.selectDictLabel(this.statusOptions, status);
|
|
},
|
|
getRoleName(roleId) {
|
|
for (const item of this.roleList) {
|
|
if (item.id == roleId)
|
|
return item.name;
|
|
}
|
|
return "";
|
|
},
|
|
onReset() {
|
|
this.$router.push({
|
|
path: ""
|
|
});
|
|
this.queryParams = {
|
|
page: 1,
|
|
limit: 10,
|
|
name: "",
|
|
status: ""
|
|
};
|
|
this.getList();
|
|
},
|
|
onSubmit() {
|
|
this.queryParams.page = 1;
|
|
this.getList();
|
|
},
|
|
formRest() {
|
|
this.dialog.detail = {
|
|
id: 0,
|
|
userKey: "",
|
|
userName: "",
|
|
nickName: "",
|
|
password: "",
|
|
status: "0",
|
|
roleId: 0,
|
|
udplat_appId: "",
|
|
udplat_secretKey: "",
|
|
udplat_userName: ""
|
|
};
|
|
},
|
|
insert() {
|
|
this.formRest();
|
|
this.dialog.title = "新增";
|
|
this.dialog.visible = true;
|
|
},
|
|
update(id) {
|
|
this.formRest();
|
|
this.dialog.title = "修改";
|
|
Detail(id).then(res => {
|
|
this.dialog.detail = res.data;
|
|
this.dialog.visible = true;
|
|
});
|
|
},
|
|
save() {
|
|
let id = this.dialog.detail.id;
|
|
if (id > 0) {
|
|
Update(this.dialog.detail).then(res => {
|
|
if (res.code == 20000) {
|
|
this.$message.success("修改成功！");
|
|
this.dialog.visible = false;
|
|
this.getList();
|
|
}
|
|
|
|
});
|
|
} else {
|
|
Insert(this.dialog.detail).then(res => {
|
|
if (res.code == 20000) {
|
|
this.$message.success("新增成功！");
|
|
this.dialog.visible = false;
|
|
this.getList();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
deleteRow(id) {
|
|
let _this = this;
|
|
this.$confirm("确定删除该行数据，删除后将不可恢复?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
Delete(id).then(result => {
|
|
if (result.code == 20000) {
|
|
_this.$message.success("删除成功！");
|
|
_this.getList();
|
|
}
|
|
});
|
|
|
|
})
|
|
.catch(() => {
|
|
|
|
/* _this.$message({
|
|
type: 'error',
|
|
message:"发生错误！"
|
|
});*/
|
|
});
|
|
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|