Commit ad11c0d5 by liang ce

权限模块

parent 006dc37b
......@@ -133,7 +133,7 @@ const config = {
requiredDepartments: [], // 必选部门(不可取消选中状态)
appId: localStorage.getItem('agentId'), // 微应用的Id
permissionType: 'GLOBAL', // 可添加权限校验,选人权限,目前只有GLOBAL这个参数
responseUserOnly: false, // 返回人,或者返回人和部门
responseUserOnly: true, // 返回人,或者返回人和部门
startWithDepartmentId: -1, // 仅支持0和-1
onSuccess: function (result) {
return resolve(result)
......
......@@ -13,7 +13,7 @@
>
<a-menu-item key="accountManagement">支付管理</a-menu-item>
<a-menu-item key="classificationOfDishes">食堂管理</a-menu-item>
<a-menu-item key="historicalVisitors">访客管理</a-menu-item>
<!-- <a-menu-item key="historicalVisitors">访客管理</a-menu-item> -->
<a-menu-item key="rightsManagement">权限管理</a-menu-item>
</a-menu>
</a-layout-header>
......
......@@ -2,9 +2,10 @@
<div class="consumptionOrder">
<div class="searchBox">
<div class="choosePeople" @click="choosePeople" style="width: 120px">选择消费人</div>
<a-select placeholder="经办人" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectAgent">
<a-input style="width: 120px;margin-right: 20px;" placeholder="经办人" v-model="searchSource.agentName"/>
<!-- <a-select placeholder="经办人" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectAgent">
<a-select-option v-for="(item, index) in agentList" :key="index" :value="item.ddUserId">{{ item.name }}</a-select-option>
</a-select>
</a-select> -->
<a-select placeholder="状态" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectHandlestatus">
<a-select-option value="SUCCESS">已消费</a-select-option>
<a-select-option value="REFUND_SUCCESS">已退款</a-select-option>
......@@ -78,7 +79,7 @@ export default {
name: ''
},
payStatus: '',
agentId: ''
agentName: ''
},
agentList: [],
pagination: {
......@@ -119,7 +120,7 @@ export default {
}
},
created: function () {
this.getAgentList()
// this.getAgentList()
this.queryOrderList()
},
methods: {
......@@ -128,14 +129,14 @@ export default {
this.queryOrderList()
},
// 获取收银员列表
getAgentList () {
let AgentData = {
userType: '1'
}
$http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, AgentData).then((res) => {
this.agentList = res.data.data
})
},
// getAgentList () {
// let AgentData = {
// userType: '1'
// }
// $http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, AgentData).then((res) => {
// this.agentList = res.data.data
// })
// },
// 选人组件调用
choosePeople () {
const _that = this
......@@ -184,7 +185,7 @@ export default {
this.searchSource.payStatus = value
},
selectAgent (value) {
this.searchSource.agentId = value
this.searchSource.agentName = value
},
search () {
this.pagination.current = 1
......@@ -194,7 +195,7 @@ export default {
let RechargeData = {
pageNumber: 10,
currentPage: this.pagination.current,
agentId: this.searchSource.agentId,
agentName: this.searchSource.agentName,
payStatus: this.searchSource.payStatus,
buyerId: this.searchSource.UserMessage.emplId
}
......
......@@ -27,9 +27,10 @@
<a-select-option value="TRAVEL">交通补助</a-select-option>
<a-select-option value="MEAL">餐补</a-select-option>
</a-select>
<a-select placeholder="经办人" :allowClear="true" style="width: 100px;margin-left: 15px;" @change="selectAgent">
<a-input style="width: 120px;margin-left: 15px;" placeholder="经办人" v-model="searchSource.agentName"/>
<!-- <a-select placeholder="经办人" :allowClear="true" style="width: 100px;margin-left: 15px;" @change="selectAgent">
<a-select-option v-for="(item, index) in agentList" :key="index" :value="item.ddUserId">{{ item.name }}</a-select-option>
</a-select>
</a-select> -->
<a-button type="primary" @click="search()" style="margin-left: 15px;">查询</a-button>
<a-button type="primary" @click="changeModel()" style="margin-left: 15px;"><a-icon type="pay-circle" />发放津贴</a-button>
</div>
......@@ -39,7 +40,7 @@
{{ money.toFixed(2) }}
</span>
<span slot="type" slot-scope="type">{{ type === 'TRAVEL' ? '交通补助' : '餐补' }}</span>
<span slot="agentId">经办人</span>
<span slot="agentName">经办人</span>
<span slot="endTime" slot-scope="endTime">
{{ endTime.split(" ")[0] }}
</span>
......@@ -130,7 +131,7 @@ export default {
},
{
title: '经办人',
dataIndex: 'agentId'
dataIndex: 'agentName'
}, {
title: '状态',
dataIndex: 'couponRecordStatus',
......@@ -156,7 +157,7 @@ export default {
name: ''
},
type: '',
agentId: ''
agentName: ''
},
recordsList: [],
pagination: {
......@@ -181,7 +182,7 @@ export default {
},
created: function () {
this.queryCouponRecordList()
this.getAgentList()
// this.getAgentList()
},
methods: {
// 时间筛选
......@@ -214,20 +215,20 @@ export default {
onChangeEndValue (date, dateString) {
this.endTime = dateString
},
// 获取收银员列表
getAgentList () {
let AgentData = {
userType: '1'
}
$http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, AgentData).then((res) => {
this.agentList = res.data.data
})
},
// // 获取收银员列表
// getAgentList () {
// let AgentData = {
// userType: '1'
// }
// $http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, AgentData).then((res) => {
// this.agentList = res.data.data
// })
// },
toAllowanceDetails (record, text, index) {
this.$router.push({ name: 'allowanceDetails', params: { allowanceDetails: record.grantNumber } })
},
selectAgent (value) {
this.searchSource.agentId = value
this.searchSource.agentName = value
},
disabledDate (current) {
// Can not select days before today and today
......@@ -240,7 +241,7 @@ export default {
currentPage: this.pagination.current,
pageNumber: this.pagination.defaultPageSize,
subsidyType: this.searchSource.type,
agentId: this.searchSource.agentId,
agentName: this.searchSource.agentName,
startTime: this.startTime ? `${this.startTime} 00:00:00` : '',
endTime: this.endTime ? `${this.endTime} 23:59:59` : ''
}
......
......@@ -33,7 +33,7 @@ export default {
name: ''
},
status: '',
agentId: ''
agentName: ''
},
columns: [{
title: '成员',
......
......@@ -14,8 +14,8 @@
<a-menu-item class="itemFlex" key="allowancePayment"><div :class="[chooseMenuList === 'allowancePayment' ? 'menuIcon menuIcon3_2' : 'menuIcon menuIcon3_1']"></div>津贴发放</a-menu-item>
<a-menu-item class="itemFlex" key="recordsOfConsumption"><div :class="[chooseMenuList === 'recordsOfConsumption' ? 'menuIcon menuIcon4_2' : 'menuIcon menuIcon4_1']"></div>消费记录</a-menu-item>
<a-menu-item class="itemFlex" key="systemReconciliation"><div :class="[chooseMenuList === 'systemReconciliation' ? 'menuIcon menuIcon6_2' : 'menuIcon menuIcon6_1']"></div>系统对账</a-menu-item>
<a-menu-item class="itemFlex" key="cashierManagement"><div :class="[chooseMenuList === 'cashierManagement' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置收银员</a-menu-item>
<a-menu-item class="itemFlex" key="SetAdministrators"><div :class="[chooseMenuList === 'SetAdministrators' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置管理员</a-menu-item>
<!-- <a-menu-item class="itemFlex" key="cashierManagement"><div :class="[chooseMenuList === 'cashierManagement' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置收银员</a-menu-item>
<a-menu-item class="itemFlex" key="SetAdministrators"><div :class="[chooseMenuList === 'SetAdministrators' ? 'menuIcon menuIcon5_2' : 'menuIcon menuIcon5_1']"></div>设置管理员</a-menu-item> -->
<a-menu-item class="itemFlex" key="paymentManagementSetting"><div :class="[chooseMenuList === 'paymentManagementSetting' ? 'menuIcon menuIcon7_2' : 'menuIcon menuIcon7_1']"></div>设置中心</a-menu-item>
<a-menu-item class="itemFlex" key="operationLog"><div :class="[chooseMenuList === 'operationLog' ? 'menuIcon menuIcon8_2' : 'menuIcon menuIcon8_1']"></div>操作日志</a-menu-item>
</a-menu>
......
......@@ -2,9 +2,10 @@
<div class="RechargeRecord">
<div class="searchBox">
<div class="choosePeople" @click="choosePeople" style="width: 120px">选择成员</div>
<a-select placeholder="经办人" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectAgent">
<a-input style="width: 120px;margin-right: 20px;" placeholder="经办人" v-model="searchSource.agentName"/>
<!-- <a-select placeholder="经办人" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectAgent">
<a-select-option v-for="(item, index) in agentList" :key="index" :value="item.ddUserId">{{ item.name }}</a-select-option>
</a-select>
</a-select> -->
<a-select placeholder="状态" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectHandlestatus">
<a-select-option value="SUCCESS">已完成</a-select-option>
<a-select-option value="WAITING_PERMIT">审批中</a-select-option>
......@@ -104,7 +105,7 @@ export default {
name: ''
},
status: '',
agentId: ''
agentName: ''
},
agentList: []
}
......@@ -113,18 +114,18 @@ export default {
computed: {},
created: function () {
this.queryRechargeList()
this.getAgentList()
// this.getAgentList()
},
methods: {
// 获取收银员列表
getAgentList () {
let AgentData = {
userType: '1'
}
$http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, AgentData).then((res) => {
this.agentList = res.data.data
})
},
// getAgentList () {
// let AgentData = {
// userType: '1'
// }
// $http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, AgentData).then((res) => {
// this.agentList = res.data.data
// })
// },
// 选人组件调用
choosePeople () {
const _that = this
......@@ -173,13 +174,13 @@ export default {
this.searchSource.status = value
},
selectAgent (value) {
this.searchSource.agentId = value
this.searchSource.agentName = value
},
queryRechargeList () {
let RechargeData = {
pageNumber: 10,
currentPage: this.pagination.current,
agentId: this.searchSource.agentId,
agentName: this.searchSource.agentName,
status: this.searchSource.status,
ddUserId: this.searchSource.UserMessage.emplId
}
......
......@@ -6,9 +6,10 @@
<a-select-option value="SUCCESS">已消费</a-select-option>
<a-select-option value="REFUND_SUCCESS">已退款</a-select-option>
</a-select>
<a-select placeholder="收银员" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectagent">
<a-input style="width: 120px;margin-right: 20px;" placeholder="收银员" v-model="searchSource.agentName"/>
<!-- <a-select placeholder="收银员" :allowClear="true" style="width: 120px;margin-right: 20px;" @change="selectagent">
<a-select-option v-for="item in agentList" :value="item.ddUserId" :key="item.ddUserId">{{item.name}}</a-select-option>
</a-select>
</a-select> -->
<a-button type="primary" @click="search()">查询</a-button>
</div>
<div class="searchUserMessage" v-if="searchSource.UserMessage.emplId">
......@@ -127,7 +128,7 @@ export default {
name: ''
},
status: '',
agentId: ''
agentName: ''
},
recordsList: [],
pagination: {
......@@ -145,19 +146,19 @@ export default {
},
created: function () {
this.queryRecordList()
this.queryAgentList()
// this.queryAgentList()
},
methods: {
queryAgentList () {
let CashierListData = {
userType: '0'
}
$http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, CashierListData).then((res) => {
this.agentList = res.data.data
}).catch(() => {
this.$message.error('获取操作员信息失败')
})
},
// queryAgentList () {
// let CashierListData = {
// userType: '0'
// }
// $http.get(`/mingpay/v1/isv/cashier/list_cashier_all`, CashierListData).then((res) => {
// this.agentList = res.data.data
// }).catch(() => {
// this.$message.error('获取操作员信息失败')
// })
// },
refundModal (record, text, index) {
this.visible = !this.visible
this.refundSelect = record
......@@ -209,7 +210,7 @@ export default {
pageNumber: this.pagination.defaultPageSize,
status: this.searchSource.status,
ddUserId: this.searchSource.UserMessage.emplId,
agentId: this.searchSource.agentId
agentName: this.searchSource.agentName
}
$http.get(`/mingpay/v1/isv/consume/list_expense_record`, RecordListData).then((res) => {
let data = res.data.data
......@@ -278,10 +279,10 @@ export default {
// 搜索条件消费单状态
selectHandRecords (value) {
this.searchSource.status = value
},
selectagent (value) {
this.searchSource.agentId = value
}
// selectagent (value) {
// this.searchSource.agentId = value
// }
}
}
</script>
......
......@@ -33,7 +33,7 @@ export default {
name: ''
},
status: '',
agentId: ''
agentName: ''
},
columns: [{
title: '成员',
......
......@@ -4,70 +4,51 @@
<div class="title">添加角色</div>
<a-form :form="form">
<a-form-item label="角色名称" v-bind="formItemLayout" >
{{roleName}}
<a-input
v-model="roleName"
placeholder="请填写角色名称"
v-decorator="['roleName',{rules: [{required: true, message: '角色名称不能为空'}]}]"
v-decorator="['roleName',{
rules: [{required: true, message: '角色名称不能为空'}],
initialValue: roleName,
}]"
/>
</a-form-item>
<a-form-item label="角色描述" v-bind="formItemLayout" >
<a-input
v-model="roleDec"
placeholder="请填写角色描述"
v-decorator="['roleDec',{rules: [{required: false, message: '角色描述不能为空'}]}]"
v-decorator="['roleDesc',{
rules: [{required: false, message: '角色描述不能为空'}],
initialValue: roleDesc,
}]"
/>
</a-form-item>
<a-form-item label="选择成员" v-bind="formItemLayout" >
<div class="selectPeople" @click="selectPeople">
<span v-show="!members.length">选择成员</span>
<span v-show="members.length" v-for='(item, index) in members' :key="index" :style="{'margin-left': '3px',color:'rgba(0,0,0,0.85)',width:'20%',overflow:'hidden'}">{{item.name}}</span>
<span v-show="members.length" v-for='(item, index) in members' :key="index" :style="{'margin-left': '3px',color:'rgba(0,0,0,0.85)',width:'20%',overflow:'hidden'}">{{item}}</span>
</div>
</a-form-item>
<div class="permisson">
<div class="permissonLeft">分配权限:</div>
<div class="permissonRight">
<div v-for="tree in trees" :key="tree.id">
<div class="permissonTitle" >
<a-checkbox>
{{tree.name}}
</a-checkbox>
</div>
<a-row :style="{border: '1px solid #F8F8F8',display: 'flex',padding:'0 20px'}" v-for="treeTwo in tree.children" :key="treeTwo.id">
<a-col :span="4" :style="{borderRight: '1px solid #f8f8f8', padding:'22px 0'}"><a-checkbox>{{treeTwo.name}}</a-checkbox></a-col>
<a-col :span="20" :style="{padding:'0px 0 22px 8px'}" >
<a-col :span="6" :style="{paddingTop:'22px'}" v-for="treeThree in treeTwo.children " :key="treeThree.id" ref="threeNode"><a-checkbox>{{treeThree.name}}</a-checkbox></a-col>
</a-col>
</a-row>
</div>
<!-- <div v-for="tree in trees" :key="tree.id">-->
<!-- <div class="permissonTitle" >-->
<!-- {{tree.name}}-->
<!-- </div>-->
<!-- <a-row :style="{border: '1px solid #F8F8F8',display: 'flex',padding:'0 20px'}" v-for="treeTwo in tree.children" :key="treeTwo.id">-->
<!-- <a-col :span="5" :style="{borderRight: '1px solid #f8f8f8', padding:'22px 0'}">{{treeTwo.name}}</a-col>-->
<!-- <a-col :span="19" :style="{padding:'0px 0 22px 8px'}" >-->
<!-- <a-checkbox-group :defaultValue="checkList">-->
<!-- <a-col :span="5" :style="{paddingTop:'22px'}" v-for="treeThree in treeTwo.children " :key="treeThree.id" >-->
<!-- <a-checkbox :value="treeThree.id" @change="handleChange" :id="treeThree.id" >{{treeThree.name}}</a-checkbox>-->
<!-- </a-col>-->
<!-- </a-checkbox-group>-->
<!-- </a-col>-->
<!-- </a-row>-->
<!-- </div>-->
<a-button type="primary" @click="confirm" class="confirm">确定</a-button>
</div>
</div>
</a-form>
<div class="permisson">
<div class="permissonLeft">分配权限:</div>
<div class="permissonRight">
<tree v-model="selectList" :trees="treesdata" v-on:closeParent="close" :classId="classList" :idx="0"></tree>
<a-button @click="confirm" style="margin-top: 40px" type="primary">保存</a-button>
</div>
</div>
</div>
</template>
<script>
import { $http } from '../../../api/axios'
import { config } from '../../../api/config'
import tree from './tree.vue'
export default {
components: {
tree
},
name: 'addOrRights',
data () {
return {
type: 0,
form: this.$form.createForm(this),
formItemLayout: {
labelCol: {
......@@ -79,47 +60,56 @@ export default {
sm: { span: 8 }
}
},
roleId: '',
trees: [],
roleName: '', // 角色名称
roleDec: '', // 角色描述
roleDesc: '', // 角色描述
members: [], // 选择成员
ddUserIds: [],
indeterminate1: true,
checkList: []
treesdata: [],
classList: [['box1', 'permissonTitle'], ['box2', 'box2-2'], ['box3', 'box3-3']],
selectList: []
}
},
created () {
this.getTree()
},
mounted () {
if (JSON.stringify(this.$route.params) === '{}') {
this.type = 0
this.getTree()
} else {
this.type = 1
this.roleName = this.$route.params.record.roleName
console.log(this.roleName = this.$route.params.record.roleName)
this.roleName = this.$route.params.record.roleDec
// this.ddUserIds = this.$route.params.record.action.ddUserId
// this.ddUserIds = this.$route.params.record.action.name
this.roleDesc = this.$route.params.record.roleDesc
this.roleId = this.$route.params.roleId
this.members = this.$route.params.record.action.name
this.ddUserIds = this.$route.params.record.action.ddUserId
let data = {
roleId: this.$route.params.roleId
}
$http.post('admin/menu/tree/roleById', data).then(res => {
this.checkList = res.data.data
this.selectList = res.data.data
}).then(() => {
this.getTree()
})
}
},
mounted () {
},
methods: {
// 返回上一页
close (data) {
console.log(data)
},
back () {
this.$router.push({ name: 'rightsManagement' })
},
// 选人
selectPeople () {
config.ddready('ddchooseTen', this.ddUserIds).then((res) => {
this.members = res.users
this.members = []
this.ddUserIds = []
// this.members = this.duplicateRemoval(this.members)
this.members.forEach((item, index) => {
res.users.forEach((item, index) => {
this.ddUserIds.push(item.emplId)
this.members.push(item.name)
})
})
},
......@@ -134,50 +124,86 @@ export default {
onCancel () {}
})
} else {
let data = {
roleName: this.roleName,
roleCode: 'b',
roleDesc: this.roleDesc,
item: 'e-card',
ddUserIds: this.ddUserIds,
menuIds: this.checkList
if (this.type === 0) {
let data = {
roleName: this.form.getFieldValue('roleName'),
roleCode: this.form.getFieldValue('roleName'),
roleDesc: this.form.getFieldValue('roleDesc'),
ddUserIds: this.ddUserIds,
menuIds: this.selectList,
item: 'e-card'
}
$http.post(`admin/manager/addFullRole`, data).then(res => {
if (res.data.code === 0) {
this.$message.success('保存成功')
} else {
this.$message.error(res.data.msg)
}
})
} else {
let data = {
roleId: this.roleId,
roleName: this.form.getFieldValue('roleName'),
roleDesc: this.form.getFieldValue('roleDesc'),
ddUserIds: this.ddUserIds,
item: 'e-card',
menuIds: this.selectList
}
$http.post(`admin/manager/modifyFullRole`, data).then(res => {
if (res.data.code === 0) {
this.$message.success('保存成功')
} else {
this.$message.error(res.data.msg)
}
})
}
$http.post(`/admin/manager/addFullRole`, data).then(res => {
this.$router.push({ name: 'rightsManagement' })
})
}
},
getTree () {
let that = this
let data = {
item: 'e-card'
}
$http.post(`/admin/menu/tree`, data).then(success => {
success.data.data.forEach((item, index) => {
if (item.code !== 'sys_super_admin') {
this.trees.push(item)
let souceIndex
let data = success.data.data
data.map((item, index) => {
if (item.code === 'sys_super_admin') {
souceIndex = index
}
})
data.splice(souceIndex, 1)
that.treesdata = that.treeAddAttribute(data)
})
},
// 点击复选框
handleChange (event) {
let data = []
if (event.target.checked) {
this.checkList.push(event.target.value)
} else {
this.checkList.forEach((item, index) => {
if (event.target.value !== item) {
data.push(item)
}
treeAddAttribute (data) {
const addKey = data => data.map(item => {
let plainOptions = []
item.children.map(item2 => {
plainOptions.push(item2.id)
})
this.checkList = data
}
var checkedList = [...this.selectList.filter(function (v) {
return plainOptions.indexOf(v) !== -1 // 利用filter方法来遍历是否有相同的元素
})]
var indeterminate = (checkedList !== '' && checkedList.length > 0 && checkedList.length !== plainOptions.length)
let checkAll = false
return {
...item,
indeterminate,
checkedList,
plainOptions,
checkAll,
children: addKey(item.children)
}
})
const result = addKey(data)
return result
}
}
}
</script>
<style scoped>
<style lang="less">
.title{
font-weight: bolder;
line-height: 22px;
......@@ -186,7 +212,6 @@ export default {
input {
height: 40px;
}
.addOrRights /deep/ .ant-form-item-label {
width: 9.5% !important;
}
......@@ -240,5 +265,27 @@ export default {
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 5px;
}
.box2>div{
display: flex;
border: 1px solid #f8f8f8;
}
.box2-2{
flex: 4;
border-right: 1px solid #f8f8f8;
display: flex;
align-items: center;
padding-left: 20px;
}
.box3{
flex: 20;
padding-top: 22px;
}
.box3>div{
width: 25%;
float: left;
}
.box3-3{
padding-bottom: 22px;
padding-left: 22px;
}
</style>
......@@ -63,7 +63,7 @@ export default {
dataIndex: 'roleName'
}, {
title: '角色描述',
dataIndex: 'roleDes'
dataIndex: 'roleDesc'
}, {
title: '拥有该角色的员工',
dataIndex: 'userHasRoles',
......@@ -147,7 +147,7 @@ export default {
if (item.roleCode === 'ROLE_SUPER_ADMIN') {
let userHasRoles = []
item.userList.forEach((userItem, userIndex) => {
userHasRoles.push(userItem.username)
userHasRoles.push(userItem.realName)
this.superAdministratorListId.push(userItem.ddUserId)
})
this.superAdministratorList.push({
......@@ -160,14 +160,14 @@ export default {
let userHasRoles = []
let ddUserId = []
item.userList.forEach((userItem, userIndex) => {
userHasRoles.push(userItem.username)
userHasRoles.push(userItem.realName)
ddUserId.push(userItem.ddUserId)
})
this.roleList.push({
key: item.roleId,
roleName: item.roleName,
userHasRoles: userHasRoles,
roleDes: item.roleDesc,
roleDesc: item.roleDesc,
creatTime: item.createTime,
action: { ddUserId: ddUserId, name: userHasRoles }
})
......
<template>
<div :class="classId[idx][0]">
<div v-for="(tree, index) in trees" :key="tree.id">
<div :class="classId[idx][1]">
<!-- {{tree.checkedList}}
{{tree.children.length}}
{{tree.indeterminate}}
{{tree.checkAll}}-->
<a-checkbox
@change="e=>{onChange(tree, index, e)}"
:indeterminate="tree.indeterminate === true"
:checked="selectList.indexOf(tree.id)>-1?tree.checkAll=true:tree.checkAll=false"
v-model="tree.checkAll"
>{{tree.name}}</a-checkbox>
</div>
<tree
v-model="selectList"
v-if="tree.children.length > 0"
v-on:closeParent="close"
:trees="tree.children"
:classId="classId"
:idx="idx+1"
></tree>
</div>
</div>
</template>
<script>
export default {
name: 'tree',
props: {
value: {
type: Array,
default: function () {
return []
}
},
trees: {
type: Array,
default: function () {
return []
}
},
classId: {
type: Array,
default: function () {
return []
}
},
idx: {
type: Number,
default: function () {
return null
}
}
},
watch: {
value (val) {
this.selectList = val
}
},
data () {
return {
selectList: this.value
}
},
methods: {
close (data) {
let oIndex
this.trees.map((item, index) => {
if (item.id === data.parentId) oIndex = index
})
let isIndeterminate = false
this.trees[oIndex].children.map(item => {
if (item.indeterminate) isIndeterminate = true
})
if (isIndeterminate) {
this.trees[oIndex].indeterminate = true
} else if (
data.checkedList.length === 0 ||
data.checkedList.length === this.trees[oIndex].children.length
) {
this.trees[oIndex].indeterminate = false
} else {
this.trees[oIndex].indeterminate = true
}
var ind = this.selectList.indexOf(data.parentId)
if (ind === -1) {
this.selectList.push(data.parentId)
} else if (ind !== -1 && data.checkedList.length === 0) {
this.selectList.splice(ind, 1)
}
this.trees[oIndex].checkedList = data.checkedList
if (data.checkedList.length === 0) this.trees[oIndex].checkAll = false
var checkedList = []
this.trees.map(ele => {
if (ele.checkAll) checkedList.push(ele.id)
})
this.$emit('closeParent', {
parentId: this.trees[oIndex].parentId,
checkedList,
trees: this.trees
})
},
onChange (tree, index, e) {
let that = this
var ind = this.selectList.indexOf(tree.id)
// 当存在
if (!e.target.checked) {
// 删除当前选中数据
this.selectList.splice(ind, 1)
tree.indeterminate = false
tree.checkedList = []
// 选中的时候先向下递归添加是否选中同时删除所有id
const isCheckAll = data => data.map(item => {
// 将子节点全部置位false
item.indeterminate = false
item.checkAll = false
if (that.selectList.indexOf(item.id) !== -1) that.selectList.splice(that.selectList.indexOf(item.id), 1)
item.checkedList = []
return {
...item,
children: isCheckAll(item.children)
}
})
this.trees[index].children = isCheckAll(this.trees[index].children)
let checkedList = []
this.trees.map(ele => {
if (ele.checkAll) checkedList.push(ele.id)
})
this.$emit('closeParent', {
parentId: this.trees[index].parentId,
checkedList: checkedList,
index
})
} else {
// 不存在 则新增
this.selectList.push(tree.id)
tree.indeterminate = false
tree.checkedList = tree.plainOptions
// 选中的时候先向下递归添加是否选中同时删除所有id
const isCheckAll = data => data.map(item => {
// 将子节点全部置位false
item.indeterminate = false
item.checkAll = true
if (that.selectList.indexOf(item.id) === -1) that.selectList.push(item.id)
item.checkedList = item.plainOptions
return {
...item,
children: isCheckAll(item.children)
}
})
this.trees[index].children = isCheckAll(this.trees[index].children)
let checkedList = []
this.trees.map(ele => {
if (ele.checkAll) checkedList.push(ele.id)
})
this.$emit('closeParent', {
parentId: this.trees[index].parentId,
checkedList: checkedList
})
}
}
}
}
</script>
<style scoped>
.permisson {
display: flex;
height: 500px;
}
.permissonLeft {
height: 65px;
line-height: 65px;
font-weight: 400;
width: 9.5%;
text-align: right;
font-size: 14px;
color: rgba(0,0,0,0.85);
}
.permissonRight {
font-family: 'PingFangSC-Medium;';
height: 500px;
width: 100%;
font-size: 14px;
color: rgba(0,0,0,0.85);
}
.permissonTitle {
padding: 22px 20px;
background: #FAFAFA;
border: 1px solid #F8F8F8;
border-radius: 4px 4px 0px 0px;
}
.confirm {
margin-top: 40px;
}
.addOrRights /deep/ .ant-checkbox-group {
width: 100% !important;
color: rgba(0,0,0,0.85);
}
.addOrRights /deep/.ant-row {
width: 100% !important;
}
.selectPeople {
width: 100%;
font-size: 14px;
color: #cccccc;
min-height: 40px;
line-height: 40px;
margin-left: 5px;
text-indent: 10px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 5px;
}
.box2>div{
display: flex;
border: 1px solid #f8f8f8;
}
.box2-2{
flex: 4;
border-right: 1px solid #f8f8f8;
display: flex;
align-items: center;
padding-left: 20px;
}
.box3{
flex: 20;
padding-top: 22px;
}
.box3>div{
width: 25%;
float: left;
}
.box3-3{
padding-bottom: 22px;
padding-left: 22px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment