<template>
|
<div class="common-layout">
|
<div class="content">
|
<div class="top">
|
<div class="header">
|
<div class="btn" @click="handleBack">返回</div>
|
</div>
|
</div>
|
<div class="main">
|
<list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
|
:tableData="tableData" :total="total"
|
@page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-col :span="6" :offset="0">
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" @click="handleData('add')" type="success">创建账号</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="姓名" prop="userName" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="账号" prop="userAccount" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="平台权限" prop="systemIds" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<div v-for="(item,index) in getSystemName(scope.row.systemIds)" :key="index">
|
<i class="el-icon-check"></i>
|
<span style="margin-left:5px;">{{item}}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="220px">
|
</el-table-column>
|
<el-table-column label="操作" width="160px">
|
<template slot-scope="scope">
|
<el-button type="text" @click="hanleRoleManagement(scope.row, scope.$index)">编辑权限
|
</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
</div>
|
</div>
|
<!-- 新增和编辑 -->
|
<operate-form :dialogVisible.sync="operateData.visible" :operateData="operateData"
|
@ok="getAddData"></operate-form>
|
<!-- 编辑权限 -->
|
<new-authority-edit :visibleAuthority.sync="visibleAuthority" :info="userInfo"
|
@ok="getEditData" />
|
</div>
|
</template>
|
|
<script>
|
import AccountManageApi from '@/api/accountManage'
|
import systemData from "@/utils/systemConfig.js"
|
import operateForm from "./components/operateForm.vue";
|
import newAuthorityEdit from '@/views/platform/accountManage/components/edit.vue'
|
export default {
|
name: "accountManage",
|
components: {
|
operateForm,
|
newAuthorityEdit
|
},
|
data() {
|
return {
|
listQuery: {
|
username: null,
|
userAccount: null,
|
systemIds: [],
|
},
|
formLabel: [
|
{
|
model: 'username',
|
label: '姓名',
|
type: 'input'
|
},
|
{
|
model: 'userAccount',
|
label: '账号',
|
type: 'input'
|
},
|
{
|
model: 'systemIds',
|
label: '平台权限',
|
type: 'select',
|
labelWidth: '90px',
|
opts: [
|
{
|
id: process.env.VUE_APP_CLIENT_ID,
|
name: "垂直生态赋能平台",
|
},
|
{
|
id: process.env.VUE_APP_GYL_CLIENT_ID,
|
name: "供应链管理平台",
|
}
|
]
|
},
|
],
|
//平台权限下拉数据
|
newSyetemData: systemData,
|
tableData: [],
|
total: 0,
|
//新建修改
|
operateData: {
|
visible: false,
|
type: "add",
|
data: {},
|
},
|
// 编辑框显示隐藏
|
visibleAuthority: false,
|
// 角色相关信息
|
userInfo: {},
|
//平台权限下拉数据
|
newSyetemData: systemData
|
}
|
},
|
mounted() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
handleBack() {
|
this.$router.go(-1);
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
let params = {
|
current: pageInfo.pageNum,
|
size: pageInfo.pageSize,
|
}
|
//为空时默认查询所有平台的
|
if (!this.listQuery.systemIds.length) {
|
params = {
|
...params, ...{
|
systemIds: [
|
process.env.VUE_APP_CLIENT_ID,
|
process.env.VUE_APP_GYL_CLIENT_ID
|
],
|
username: this.listQuery.username,
|
userAccount: this.listQuery.userAccount
|
}
|
}
|
} else {
|
params = { ...params, ...this.listQuery };
|
params.systemIds = [...[params.systemIds]]
|
}
|
AccountManageApi.queryUserList(params).then((res) => {
|
if (res.code === '200') {
|
this.tableData = res.data.records;
|
this.total = res.data.total
|
}
|
})
|
},
|
//获取平台名称
|
getSystemName(codes) {
|
let _name = [];
|
if (codes && codes.length > 0) {
|
codes.forEach((v1) => {
|
let curItem = this.newSyetemData.find((v2) => v2.code === v1)
|
if (curItem && Object.keys(curItem).length) {
|
_name.push(curItem.name)
|
}
|
})
|
}
|
return _name;
|
},
|
/**
|
* 点击查询按钮
|
*
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
//新增 修改 详情
|
handleData(str, record) {
|
this.operateData.type = str;
|
if (str != "add") {
|
this.operateData.data = Object.assign({}, record);
|
}
|
this.operateData.visible = true;
|
},
|
/**
|
* 编辑权限
|
*/
|
hanleRoleManagement(record) {
|
this.userInfo = record;
|
this.visibleAuthority = true
|
},
|
/**
|
* 获取新增数据
|
*/
|
getAddData() {
|
this.listQuery.username = null;
|
this.listQuery.userAccount = null;
|
this.listQuery.systemIds = [];
|
this.queryData()
|
},
|
/**
|
* 获取编辑数据
|
*/
|
getEditData() {
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.common-layout {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
overflow: auto;
|
background-color: #f0f2f5;
|
background-image: url("../../../assets/img/bg3.jpg");
|
background-repeat: no-repeat;
|
background-position-x: center;
|
background-size: 100%;
|
.content {
|
flex: 1;
|
@media (min-width: 768px) {
|
}
|
}
|
.top {
|
text-align: center;
|
.header {
|
height: 44px;
|
line-height: 44px;
|
background: #fff;
|
margin-bottom: 20px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
.btn {
|
width: 100px;
|
cursor: pointer;
|
color: rgba(0, 0, 0, 0.65);
|
font-size: 14px;
|
}
|
}
|
}
|
.main {
|
padding: 20px;
|
.operator {
|
margin-bottom: 10px;
|
}
|
.ant-checkbox-wrapper {
|
white-space: nowrap;
|
}
|
}
|
}
|
.current-input-style {
|
width: 100%;
|
}
|
</style>
|
