liuwk
6 years ago
16 changed files with 572 additions and 34 deletions
@ -0,0 +1,57 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 组织管理 -- 组织列表 |
||||
|
* @param params |
||||
|
* @returns {Q.Promise<any>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function GET_clients(params) { |
||||
|
return request({ |
||||
|
url: "/api/admin/clients", |
||||
|
method: 'get', |
||||
|
params |
||||
|
}).then(res => res.data.data) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 组织管理 -- 新建组织 |
||||
|
* @param params |
||||
|
* @returns {Q.Promise<any>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function POST_clients(params) { |
||||
|
return request({ |
||||
|
url: "/api/admin/clients", |
||||
|
method: 'post', |
||||
|
data: params |
||||
|
}).then(res => res.data.data) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 组织管理 -- 新建组织 |
||||
|
* @param params |
||||
|
* @returns {Q.Promise<any>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function PUT_clients(params) { |
||||
|
return request({ |
||||
|
url: "/api/admin/clients", |
||||
|
method: 'put', |
||||
|
data: params |
||||
|
}).then(res => res.data.data) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 组织管理 -- 组织详情 |
||||
|
* @param params |
||||
|
* @returns {Q.Promise<any>} |
||||
|
* @constructor |
||||
|
*/ |
||||
|
export function DETAIL_clients(params) { |
||||
|
return request({ |
||||
|
url: "/api/admin/clients/detail?id=" + params, |
||||
|
method: 'get' |
||||
|
}).then(res => res.data.data) |
||||
|
} |
||||
@ -1,7 +1,8 @@ |
|||||
export const BASE_API = "https://rapapi.renqilai.com/app/mock/39"; |
// export const BASE_API = "https://rapapi.renqilai.com/app/mock/39";
|
||||
|
|
||||
export const client_id = 'test' |
export const client_id = 'test' |
||||
export const client_secret = "test" |
export const client_secret = "test" |
||||
// export const BASE_API = "http://192.168.0.222:8080"
|
export const BASE_API = "http://192.168.0.222:8080" |
||||
|
// export const BASE_API = "https://quxiaapi.renqilai.com"
|
||||
|
|
||||
export const pageSize = 20 |
export const pageSize = 20 |
||||
|
|||||
@ -0,0 +1,24 @@ |
|||||
|
import Layout from '@/views/layout/Layout' |
||||
|
|
||||
|
const order = { |
||||
|
path: '/orgManage', |
||||
|
component: Layout, |
||||
|
meta: {title: '组织管理', icon: 'dingdan', noCache: true, affix: false}, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '/orgManage/index', |
||||
|
component: () => import('@/views/orgManage/orgManage/index'), |
||||
|
name: '组织管理', |
||||
|
meta: {title: '组织管理', noCache: false, affix: false} |
||||
|
}, |
||||
|
// {
|
||||
|
// path: '/order/luckyFree',
|
||||
|
// component: () => import('@/views/order/luckyFree/index'),
|
||||
|
// name: '幸运免单',
|
||||
|
// meta: {title: '幸运免单', noCache: false, affix: false},
|
||||
|
//
|
||||
|
// }
|
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export default order |
||||
@ -0,0 +1,399 @@ |
|||||
|
<template> |
||||
|
<div class="orgManage"> |
||||
|
<el-row> |
||||
|
<el-col :span="5"> |
||||
|
<div class="grid-content bg-purple orgTree"> |
||||
|
<el-tree :data="treeData" |
||||
|
:props="defaultProps" |
||||
|
accordion |
||||
|
node-key="id" |
||||
|
:default-expanded-keys="[currTreeId]" |
||||
|
:default-checked-keys="[currTreeId]" |
||||
|
:highlight-current="true" |
||||
|
@current-change="currentChange" |
||||
|
></el-tree> |
||||
|
<!--@node-click="handleNodeClick"--> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="19"> |
||||
|
<div class="grid-content bg-purple-light orgInfo"> |
||||
|
<el-row class="infoTit"> |
||||
|
<el-col :span="24"> |
||||
|
<div>组织信息</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="infoDetail"> |
||||
|
<div class="infoDetailTit"> |
||||
|
<span>组织名称:</span> |
||||
|
<span>{{orgInfo.name}}</span> |
||||
|
</div> |
||||
|
<div class="infoDetailTit" v-if="orgInfo.idNumber"> |
||||
|
<span>身份证号码:</span> |
||||
|
<span>{{orgInfo.idNumber}}</span> |
||||
|
</div> |
||||
|
<div class="infoDetailTit" v-if="orgInfo.contactName"> |
||||
|
<span>联系人:</span> |
||||
|
<span>{{orgInfo.contactName}}</span> |
||||
|
</div> |
||||
|
<div class="infoDetailTit" v-if="orgInfo.contactName"> |
||||
|
<span>联系方式:</span> |
||||
|
<span>{{orgInfo.mobile}}</span> |
||||
|
</div> |
||||
|
<div class="infoDetailTit" v-if="orgInfo.createdDate"> |
||||
|
<span>创建时间:</span> |
||||
|
<span>{{orgInfo.createdDate |filterCreatedDate}}</span> |
||||
|
</div> |
||||
|
<div class="infoDetailTit" v-if="orgInfo.activeDevices"> |
||||
|
<span>机器数量:</span> |
||||
|
<span>共{{orgInfo.activeDevices + orgInfo.devices}}(在线：{{orgInfo.activeDevices}},离线：{{orgInfo.devices}})</span> |
||||
|
</div> |
||||
|
<el-row class="detailAdd"> |
||||
|
<el-col :span="24"> |
||||
|
<el-button size="small" @click="orgOpi = true,orgOpiEdit=false;form={}">新增组织</el-button> |
||||
|
<el-button size="small" @click="orgOpiFun" type="primary">编辑</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div class="orgMembers"> |
||||
|
<el-row class="orgMembersTit"> |
||||
|
<el-col :span="12"> |
||||
|
<div>组织成员:</div> |
||||
|
</el-col> |
||||
|
<el-col :span="12" style="text-align: right;"> |
||||
|
<el-button size="small" @click="memberManagement" type="primary"> |
||||
|
成员管理 |
||||
|
</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div class="table"> |
||||
|
<el-table |
||||
|
:data="listData" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="名称"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="username" |
||||
|
label="用户名" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="clientName" |
||||
|
label="所属组织"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="mobile" |
||||
|
label="联系方式"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="state" |
||||
|
label="账号状态"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="createdDate" |
||||
|
label="创建时间"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
:page-size="listParams.size" |
||||
|
layout="prev, pager, next" |
||||
|
:total="50" |
||||
|
@current-change="currentChange1" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
<el-dialog |
||||
|
title="新增组织" |
||||
|
:visible.sync="orgOpi" |
||||
|
width="400px"> |
||||
|
<el-form ref="ruleForm" :model="form" label-width="100px"> |
||||
|
<el-form-item label="机构名称" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
||||
|
<el-input v-model="form.name" placeholder="请输入机构名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="管理员账号" v-if="!orgOpiEdit" prop="username" |
||||
|
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
||||
|
<el-input v-model="form.username" placeholder="请输入管理员账号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="管理员密码" v-if="!orgOpiEdit" prop="password" |
||||
|
:rules="[{required: true, message: '不能为空', trigger: 'blur'}]"> |
||||
|
<el-input type="password" placeholder="请输入管理员密码" v-model="form.password"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="身份证号"> |
||||
|
<el-input v-model="form.idNumber" placeholder="请输入身份证号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系人"> |
||||
|
<el-input v-model="form.contactName" placeholder="请输入联系人"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系方式"> |
||||
|
<el-input v-model="form.mobile" placeholder="请输入联系方式"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="orgOpi = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="orgOptConfirm" :loading="isLoading">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {GET_clients, POST_clients, PUT_clients, DETAIL_clients} from '@/api/orgManage' |
||||
|
import {GET_ACCOUNT_LIST} from '@/api/privilegeManagement' |
||||
|
import {dateTimeFormateHHmm} from "@/filters/index"; |
||||
|
import {pageSize} from "../../../config"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
orgOpi: false, |
||||
|
isLoading: false, |
||||
|
orgOpiEdit: false, |
||||
|
currTreeId: '', |
||||
|
listParams: { |
||||
|
size: pageSize, |
||||
|
from: 0, |
||||
|
clientId: '' |
||||
|
}, |
||||
|
orgInfo: {}, |
||||
|
form: { |
||||
|
id: '', |
||||
|
name: '', |
||||
|
username: '', |
||||
|
password: '', |
||||
|
parentId: '', |
||||
|
contactName: '', |
||||
|
mobile: '', |
||||
|
idNumber: '' |
||||
|
}, |
||||
|
treeData: [], |
||||
|
listData: [], |
||||
|
defaultProps: { |
||||
|
children: 'subs', |
||||
|
label: 'name' |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.GET_clients(); |
||||
|
}, |
||||
|
watch: { |
||||
|
currTreeId() { |
||||
|
this.DETAIL_clients(); |
||||
|
this.GET_ACCOUNT_LIST(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
/** |
||||
|
* 树列表初始化 |
||||
|
*/ |
||||
|
GET_clients() { |
||||
|
GET_clients().then(res => { |
||||
|
res.map((item, index) => { |
||||
|
if (index === 0) { |
||||
|
this.currTreeId = item.id |
||||
|
} |
||||
|
return item; |
||||
|
}); |
||||
|
this.treeData = res; |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 组织信息 |
||||
|
*/ |
||||
|
DETAIL_clients() { |
||||
|
DETAIL_clients(this.currTreeId).then(res => { |
||||
|
res.id = this.currTreeId; |
||||
|
this.orgInfo = res; |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 成员列表 |
||||
|
*/ |
||||
|
|
||||
|
GET_ACCOUNT_LIST() { |
||||
|
this.listParams.clientId = this.currTreeId; |
||||
|
GET_ACCOUNT_LIST(this.listParams).then(res => { |
||||
|
res.map((item) => { |
||||
|
item.state = item.enabled == true ? '启用' : '禁用'; |
||||
|
return item |
||||
|
}); |
||||
|
this.listData = res; |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 成员管理 |
||||
|
*/ |
||||
|
|
||||
|
memberManagement(data) { |
||||
|
this.$router.push('/privilegeManagement/account') |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 翻页 |
||||
|
*/ |
||||
|
currentChange1(res) { |
||||
|
this.listParams = { |
||||
|
...this.listParams, |
||||
|
from: parseInt(res - 1) * this.listParams.size, |
||||
|
size: pageSize, |
||||
|
}; |
||||
|
this.GET_ACCOUNT_LIST(); |
||||
|
}, |
||||
|
|
||||
|
currentChange(data) { |
||||
|
this.currTreeId = data.id; |
||||
|
}, |
||||
|
/** |
||||
|
* 编辑组织 |
||||
|
*/ |
||||
|
orgOpiFun() { |
||||
|
this.orgOpiEdit = true; |
||||
|
this.orgOpi = true; |
||||
|
this.form = this.orgInfo |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 确定 新增/编辑 组织 |
||||
|
*/ |
||||
|
orgOptConfirm() { |
||||
|
let orgManage = this.$refs['ruleForm']; |
||||
|
orgManage.validate((val) => { |
||||
|
if (val) { |
||||
|
this.isLoading = true; |
||||
|
if (this.orgOpiEdit) { |
||||
|
let obj = { |
||||
|
id: this.orgInfo.id, |
||||
|
name: this.form.name, |
||||
|
mobile: this.form.mobile, |
||||
|
contactName: this.form.contactName, |
||||
|
idNumber: this.form.idNumber, |
||||
|
}; |
||||
|
PUT_clients({...obj}).then(res => { |
||||
|
this.orgOpi = false; |
||||
|
this.isLoading = false; |
||||
|
}).catch(err => { |
||||
|
this.isLoading = false; |
||||
|
}) |
||||
|
} else { |
||||
|
this.form.parentId = this.currTreeId; |
||||
|
POST_clients({...this.form}).then(res => { |
||||
|
this.orgOpi = false; |
||||
|
this.isLoading = false; |
||||
|
}).catch(err => { |
||||
|
this.isLoading = false; |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
filters: { |
||||
|
filterCreatedDate(val) { |
||||
|
return dateTimeFormateHHmm(val) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss"> |
||||
|
.orgManage { |
||||
|
background: #fff; |
||||
|
padding: 20px; |
||||
|
width: 100%; |
||||
|
min-height: calc(100vh - 84px); |
||||
|
|
||||
|
.grid-content { |
||||
|
max-height: calc(100vh - 124px); |
||||
|
min-height: calc(100vh - 124px); |
||||
|
border: 1px solid #d3dce6; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.orgTree { |
||||
|
border-right: none; |
||||
|
padding: 20px 20px 20px 10px; |
||||
|
} |
||||
|
|
||||
|
.infoTit { |
||||
|
border-bottom: 1px solid #d3dce6; |
||||
|
padding: 0 0 20px 20px; |
||||
|
font-weight: bolder; |
||||
|
} |
||||
|
|
||||
|
.orgInfo { |
||||
|
padding: 20px 0; |
||||
|
|
||||
|
.infoDetail { |
||||
|
padding: 0 0 20px 20px; |
||||
|
margin-top: 20px; |
||||
|
border-bottom: 1px solid #d3dce6; |
||||
|
|
||||
|
.infoDetailTit { |
||||
|
display: inline-block; |
||||
|
width: 33%; |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.infoDetailTit span:nth-child(1) { |
||||
|
padding-right: 10px; |
||||
|
color: #8492a6; |
||||
|
} |
||||
|
|
||||
|
.infoDetailTit span:nth-child(2) { |
||||
|
color: #324057; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detailAdd { |
||||
|
padding: 20px 20px 0 0; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.orgMembersTit { |
||||
|
padding: 20px 20px 10px 20px; |
||||
|
} |
||||
|
|
||||
|
.table { |
||||
|
padding: 0 20px 0 20px; |
||||
|
|
||||
|
.option-span { |
||||
|
color: #409EFF; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { |
||||
|
color: #188ae2 !important; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.el-tree-node__content { |
||||
|
height: 35px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<div class="form-container"> |
||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
||||
|
<el-form-item label="名称搜索"> |
||||
|
<el-input v-model="formInline.name" placeholder="名称搜索"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="组织搜索"> |
||||
|
<el-input v-model="formInline.name" placeholder="组织搜索"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="padding-left:30px"> |
||||
|
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
||||
|
<el-button type="primary" @click="onSubmit">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'form-container', |
||||
|
props:['label'], |
||||
|
data() { |
||||
|
return { |
||||
|
formInline: { |
||||
|
name: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmit() { |
||||
|
this.$emit('submit', this.formInline) |
||||
|
}, |
||||
|
resetForm1() { |
||||
|
this.formInline = { |
||||
|
name: '' |
||||
|
}; |
||||
|
this.$emit('resetForm'); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.form-container { |
||||
|
padding: 20px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue