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_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 |
|||
|
|||
@ -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