¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div> |
| | | |
| | | |
| | | <a-drawer |
| | | :title="title" |
| | | :maskClosable="true" |
| | | width=650 |
| | | placement="right" |
| | | :closable="true" |
| | | @close="close" |
| | | :visible="visible" |
| | | style="overflow: auto;padding-bottom: 53px;"> |
| | | |
| | | <a-form> |
| | | <a-form-item label='ææ¥æçæé'> |
| | | <a-tree |
| | | checkable |
| | | @check="onCheck" |
| | | :checkedKeys="checkedKeys" |
| | | :treeData="treeData" |
| | | @expand="onExpand" |
| | | @select="onTreeNodeSelect" |
| | | :selectedKeys="selectedKeys" |
| | | :expandedKeys="expandedKeysss" |
| | | :checkStrictly="checkStrictly"> |
| | | <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}"> |
| | | {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon> |
| | | </span> |
| | | </a-tree> |
| | | </a-form-item> |
| | | </a-form> |
| | | |
| | | <!--<div class="drawer-bootom-button">--> |
| | | <!--<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">--> |
| | | <!--<a-menu slot="overlay">--> |
| | | <!--<a-menu-item key="1" @click="switchCheckStrictly(1)">ç¶åå
³è</a-menu-item>--> |
| | | <!--<a-menu-item key="2" @click="switchCheckStrictly(2)">åæ¶å
³è</a-menu-item>--> |
| | | <!--<a-menu-item key="3" @click="checkALL">å
¨é¨å¾é</a-menu-item>--> |
| | | <!--<a-menu-item key="4" @click="cancelCheckALL">åæ¶å
¨é</a-menu-item>--> |
| | | <!--<a-menu-item key="5" @click="expandAll">å±å¼ææ</a-menu-item>--> |
| | | <!--<a-menu-item key="6" @click="closeAll">åå¹¶ææ</a-menu-item>--> |
| | | <!--</a-menu>--> |
| | | <!--<a-button>--> |
| | | <!--æ æä½ <a-icon type="up" />--> |
| | | <!--</a-button>--> |
| | | <!--</a-dropdown>--> |
| | | <!--<a-popconfirm title="ç¡®å®æ¾å¼ç¼è¾ï¼" @confirm="close" okText="ç¡®å®" cancelText="åæ¶">--> |
| | | <!--<a-button style="margin-right: .8rem">åæ¶</a-button>--> |
| | | <!--</a-popconfirm>--> |
| | | <!--<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">ä»
ä¿å</a-button>--> |
| | | <!--<a-button @click="handleSubmit(true)" type="primary" :loading="loading">ä¿åå¹¶å
³é</a-button>--> |
| | | <!--</div>--> |
| | | |
| | | <!--<role-datarule-modal ref="datarule"></role-datarule-modal>--> |
| | | |
| | | </a-drawer> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | // import {queryTreeListForRole,queryRolePermission,saveRolePermission} from '@/api/api' |
| | | // import RoleDataruleModal from './RoleDataruleModal.vue' |
| | | import { |
| | | getAction, |
| | | postAction, |
| | | requestPut |
| | | } from '@/api/manage' |
| | | export default { |
| | | name: "DeviceCalendarAddTree", |
| | | components:{ |
| | | // RoleDataruleModal |
| | | }, |
| | | data(){ |
| | | return { |
| | | roleId:"", |
| | | treeData: [], |
| | | defaultCheckedKeys:[], |
| | | checkedKeys:[], |
| | | expandedKeysss:[], |
| | | allTreeKeys:[], |
| | | autoExpandParent: true, |
| | | checkStrictly: true, |
| | | title:"è§è²æéé
ç½®", |
| | | visible: false, |
| | | loading: false, |
| | | selectedKeys:[], |
| | | url: { |
| | | getBaseTree: '/mdc/mdcequipment/loadTree', |
| | | deleteBatch: '/mdc/mdcequipment/deleteBatch' |
| | | }, |
| | | } |
| | | }, |
| | | created(){ |
| | | this.queryTreeData() |
| | | }, |
| | | methods: { |
| | | queryTreeData() { |
| | | this.loading = true |
| | | this.cardLoading = true |
| | | getAction(this.url.getBaseTree).then((res) => { |
| | | if (res.success) { |
| | | this.dataList = [] |
| | | this.allTreeKeys = [] |
| | | this.treeDataSource = res.result |
| | | this.generateList(res.result) |
| | | } else { |
| | | // this.$message.warn(res.message) |
| | | this.$notification.warning({ |
| | | message:'æ¶æ¯', |
| | | description:res.message |
| | | }); |
| | | } |
| | | }).finally(() => { |
| | | this.loading = false |
| | | this.cardLoading = false |
| | | }) |
| | | }, |
| | | generateList(data) { |
| | | for (let i = 0; i < data.length; i++) { |
| | | const node = data[i] |
| | | const key = node.key |
| | | const title = node.title |
| | | this.dataList.push({ |
| | | key, |
| | | title: title |
| | | }) |
| | | this.allTreeKeys.push(key) |
| | | if (node.children) { |
| | | this.generateList(node.children) |
| | | } |
| | | } |
| | | }, |
| | | onTreeNodeSelect(id){ |
| | | if(id && id.length>0){ |
| | | this.selectedKeys = id |
| | | } |
| | | this.$refs.datarule.show(this.selectedKeys[0],this.roleId) |
| | | }, |
| | | onCheck (o) { |
| | | if(this.checkStrictly){ |
| | | this.checkedKeys = o.checked; |
| | | }else{ |
| | | this.checkedKeys = o |
| | | } |
| | | }, |
| | | show(roleId){ |
| | | this.roleId=roleId |
| | | this.visible = true; |
| | | }, |
| | | close () { |
| | | this.reset() |
| | | this.$emit('close'); |
| | | this.visible = false; |
| | | }, |
| | | onExpand(expandedKeys){ |
| | | this.expandedKeysss = expandedKeys; |
| | | this.autoExpandParent = false |
| | | }, |
| | | reset () { |
| | | this.expandedKeysss = [] |
| | | this.checkedKeys = [] |
| | | this.defaultCheckedKeys = [] |
| | | this.loading = false |
| | | }, |
| | | expandAll () { |
| | | this.expandedKeysss = this.allTreeKeys |
| | | }, |
| | | closeAll () { |
| | | this.expandedKeysss = [] |
| | | }, |
| | | checkALL () { |
| | | this.checkedKeys = this.allTreeKeys |
| | | }, |
| | | cancelCheckALL () { |
| | | //this.checkedKeys = this.defaultCheckedKeys |
| | | this.checkedKeys = [] |
| | | }, |
| | | switchCheckStrictly (v) { |
| | | if(v==1){ |
| | | this.checkStrictly = false |
| | | }else if(v==2){ |
| | | this.checkStrictly = true |
| | | } |
| | | }, |
| | | handleCancel () { |
| | | this.close() |
| | | }, |
| | | handleSubmit(exit) { |
| | | let that = this; |
| | | let params = { |
| | | roleId:that.roleId, |
| | | permissionIds:that.checkedKeys.join(","), |
| | | lastpermissionIds:that.defaultCheckedKeys.join(","), |
| | | }; |
| | | that.loading = true; |
| | | saveRolePermission(params).then((res)=>{ |
| | | if(res.success){ |
| | | // that.$message.success(res.message); |
| | | that.$notification.warning({ |
| | | message:'æ¶æ¯', |
| | | description:res.message |
| | | }); |
| | | that.loading = false; |
| | | if (exit) { |
| | | that.close() |
| | | } |
| | | }else { |
| | | // that.$message.error(res.message); |
| | | that.$notification.error({ |
| | | message:'æ¶æ¯', |
| | | description:res.message |
| | | }); |
| | | that.loading = false; |
| | | if (exit) { |
| | | that.close() |
| | | } |
| | | } |
| | | this.loadData(); |
| | | }) |
| | | }, |
| | | loadData(){ |
| | | queryTreeListForRole().then((res) => { |
| | | this.treeData = res.result.treeList |
| | | this.allTreeKeys = res.result.ids |
| | | queryRolePermission({roleId:this.roleId}).then((res)=>{ |
| | | this.checkedKeys = [...res.result]; |
| | | this.defaultCheckedKeys = [...res.result]; |
| | | this.expandedKeysss = this.allTreeKeys; |
| | | }) |
| | | }) |
| | | } |
| | | }, |
| | | watch: { |
| | | visible () { |
| | | if (this.visible) { |
| | | this.loadData(); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .drawer-bootom-button { |
| | | position: absolute; |
| | | bottom: 0; |
| | | width: 100%; |
| | | border-top: 1px solid #e8e8e8; |
| | | padding: 10px 16px; |
| | | text-align: right; |
| | | left: 0; |
| | | background: #fff; |
| | | border-radius: 0 0 2px 2px; |
| | | } |
| | | |
| | | </style> |