|
@@ -1,138 +1,184 @@
|
|
<style>
|
|
<style>
|
|
-.checked-account {
|
|
|
|
- width: 100%;
|
|
|
|
-}
|
|
|
|
-.checked-account .ant-checkbox-wrapper {
|
|
|
|
- width: 20%;
|
|
|
|
- min-width: 300px;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- overflow: hidden;
|
|
|
|
-}
|
|
|
|
|
|
+ .checked-account {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .checked-account .ant-checkbox-wrapper {
|
|
|
|
+ width: 20%;
|
|
|
|
+ min-width: 300px;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
- <a-modal title="账户选择" v-model="showEdit" @ok="handleOk" @cancel="close" width="80%" :confirm-loading="confirmLoading">
|
|
|
|
- <!-- <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">全选</a-checkbox>
|
|
|
|
- <br />
|
|
|
|
- <a-checkbox-group :options="showList" v-model="dataValue" class="checked-account" @change="onChange" /> -->
|
|
|
|
- <a-tree
|
|
|
|
- v-model="checkedKeys"
|
|
|
|
- checkable
|
|
|
|
- :expanded-keys="expandedKeys"
|
|
|
|
- :auto-expand-parent="autoExpandParent"
|
|
|
|
- :selected-keys="selectedKeys"
|
|
|
|
- :tree-data="treeData"
|
|
|
|
- @expand="onExpand"
|
|
|
|
- @select="onSelect"
|
|
|
|
- />
|
|
|
|
- </a-modal>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <a-modal title="账户选择" v-model="showEdit" @ok="handleOk" @cancel="close" width="80%"
|
|
|
|
+ :confirm-loading="confirmLoading">
|
|
|
|
+ <!-- <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">全选</a-checkbox>
|
|
|
|
+ <br />
|
|
|
|
+ <a-checkbox-group :options="showList" v-model="dataValue" class="checked-account" @change="onChange" /> -->
|
|
|
|
+
|
|
|
|
+ <a-input-search style="margin-bottom: 8px;width: 180px" @search="onSearch" allow-clear/>
|
|
|
|
+ <a-tree
|
|
|
|
+ v-model="checkedKeys"
|
|
|
|
+ checkable
|
|
|
|
+ :expanded-keys="expandedKeys"
|
|
|
|
+ :auto-expand-parent="autoExpandParent"
|
|
|
|
+ :selected-keys="selectedKeys"
|
|
|
|
+ :tree-data="treeData"
|
|
|
|
+ @expand="onExpand"
|
|
|
|
+ @select="onSelect"
|
|
|
|
+ />
|
|
|
|
+ </a-modal>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { deleteAction, getAction } from '@/api/manage'
|
|
|
|
-// import lifting from './components/lifting'
|
|
|
|
|
|
+ import {deleteAction, getAction} from '@/api/manage'
|
|
|
|
+ // import lifting from './components/lifting'
|
|
|
|
|
|
-export default {
|
|
|
|
- name: 'modules',
|
|
|
|
- components: {},
|
|
|
|
|
|
+ export default {
|
|
|
|
+ name: 'modules',
|
|
|
|
+ components: {},
|
|
|
|
|
|
- data: function () {
|
|
|
|
- return {
|
|
|
|
- checkedKeys: [],
|
|
|
|
- showEdit: false,
|
|
|
|
- dataList: [],
|
|
|
|
- showList: null,
|
|
|
|
- dataValue: [],
|
|
|
|
- indeterminate: false,
|
|
|
|
- checkAll: false,
|
|
|
|
- expandedKeys: [],
|
|
|
|
- autoExpandParent: true,
|
|
|
|
- selectedKeys: [],
|
|
|
|
- treeData:[],
|
|
|
|
- confirmLoading:false,
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
- checkedKeys(val) {
|
|
|
|
- console.log('onCheck', val)
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- onExpand(expandedKeys) {
|
|
|
|
- console.log('onExpand', expandedKeys)
|
|
|
|
- // if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
|
|
|
- // or, you can remove all expanded children keys.
|
|
|
|
- this.expandedKeys = expandedKeys
|
|
|
|
- this.autoExpandParent = false
|
|
|
|
- },
|
|
|
|
- onCheck(checkedKeys) {
|
|
|
|
- this.checkedKeys = checkedKeys
|
|
|
|
- },
|
|
|
|
- onSelect(selectedKeys, info) {
|
|
|
|
- this.selectedKeys = selectedKeys
|
|
|
|
- },
|
|
|
|
- handleOk(e) {
|
|
|
|
- this.confirmLoading = true
|
|
|
|
- let defaultData = this.checkedKeys.filter(item => item.toString().indexOf('-') === -1);
|
|
|
|
- this.showEdit = false
|
|
|
|
- this.$emit('synchro', defaultData)
|
|
|
|
- },
|
|
|
|
- close() {
|
|
|
|
- this.showEdit = false
|
|
|
|
- this.dataList = []
|
|
|
|
- this.showList = null
|
|
|
|
- this.dataValue = []
|
|
|
|
- this.indeterminate = false
|
|
|
|
- this.checkAll = false
|
|
|
|
- },
|
|
|
|
- onCheckAllChange(e) {
|
|
|
|
- Object.assign(this, {
|
|
|
|
- dataValue: e.target.checked
|
|
|
|
- ? this.showList.map((item) => {
|
|
|
|
- return item.value
|
|
|
|
- })
|
|
|
|
- : [],
|
|
|
|
- indeterminate: false,
|
|
|
|
- checkAll: e.target.checked,
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- onChange(checkedList) {
|
|
|
|
- this.indeterminate = !!this.dataValue.length && this.dataValue.length < this.showList.length
|
|
|
|
- this.checkAll = this.dataValue.length === this.showList.length
|
|
|
|
- },
|
|
|
|
- getData(url, item) {
|
|
|
|
- this.confirmLoading = false
|
|
|
|
- this.showEdit = true
|
|
|
|
- this.dataList = []
|
|
|
|
- this.showList = null
|
|
|
|
- this.dataValue = []
|
|
|
|
- this.checkedKeys = []
|
|
|
|
- this.indeterminate = false
|
|
|
|
- this.checkAll = false
|
|
|
|
- console.log(url, item)
|
|
|
|
- getAction(url, item).then((res) => {
|
|
|
|
- if (res.success) {
|
|
|
|
- let arrList = []
|
|
|
|
- this.treeData = res.result.map(item=>{
|
|
|
|
|
|
+ data: function () {
|
|
return {
|
|
return {
|
|
- title: item.projectName,
|
|
|
|
- key: item.projectId + '-',
|
|
|
|
- children:item.userAllocationList.map(i=>{
|
|
|
|
- return {
|
|
|
|
- title: i.authName+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+(i.userName?i.userName:'管理员'),
|
|
|
|
- key: i.accountId
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ checkedKeys: [],
|
|
|
|
+ showEdit: false,
|
|
|
|
+ dataList: [],
|
|
|
|
+ showList: null,
|
|
|
|
+ dataValue: [],
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: false,
|
|
|
|
+ expandedKeys: [],
|
|
|
|
+ autoExpandParent: true,
|
|
|
|
+ selectedKeys: [],
|
|
|
|
+ treeData: [],
|
|
|
|
+ confirmLoading: false,
|
|
|
|
+ bytedanceUrl: null,
|
|
|
|
+ bytedanceItem: null,
|
|
}
|
|
}
|
|
- })
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- console.log(res)
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- computed: {},
|
|
|
|
-}
|
|
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ checkedKeys(val) {
|
|
|
|
+ console.log('onCheck', val)
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ onSearch(e) {
|
|
|
|
+ this.bytedanceItem.authName = undefined
|
|
|
|
+ this.treeData = []
|
|
|
|
+ if (e != '') {
|
|
|
|
+ this.bytedanceItem.authName = e
|
|
|
|
+ }
|
|
|
|
+ this.confirmLoading = false
|
|
|
|
+ this.showEdit = true
|
|
|
|
+ this.dataList = []
|
|
|
|
+ this.showList = null
|
|
|
|
+ this.dataValue = []
|
|
|
|
+ this.checkedKeys = []
|
|
|
|
+ this.indeterminate = false
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ getAction(this.bytedanceUrl, this.bytedanceItem).then((res) => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ let arrList = []
|
|
|
|
+ this.treeData = res.result.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ title: item.projectName,
|
|
|
|
+ key: item.projectId + '-',
|
|
|
|
+ children: item.userAllocationList.map(i => {
|
|
|
|
+ return {
|
|
|
|
+ title: i.authName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + (i.userName ? i.userName : '管理员'),
|
|
|
|
+ key: i.accountId
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ console.log(res)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ onExpand(expandedKeys) {
|
|
|
|
+ console.log('onExpand', expandedKeys)
|
|
|
|
+ // if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
|
|
|
+ // or, you can remove all expanded children keys.
|
|
|
|
+ this.expandedKeys = expandedKeys
|
|
|
|
+ this.autoExpandParent = false
|
|
|
|
+ },
|
|
|
|
+ onCheck(checkedKeys) {
|
|
|
|
+ this.checkedKeys = checkedKeys
|
|
|
|
+ },
|
|
|
|
+ onSelect(selectedKeys, info) {
|
|
|
|
+ this.selectedKeys = selectedKeys
|
|
|
|
+ },
|
|
|
|
+ handleOk(e) {
|
|
|
|
+ this.confirmLoading = true
|
|
|
|
+ let defaultData = this.checkedKeys.filter(item => item.toString().indexOf('-') === -1);
|
|
|
|
+ this.showEdit = false
|
|
|
|
+ this.$emit('synchro', defaultData)
|
|
|
|
+ },
|
|
|
|
+ close() {
|
|
|
|
+ this.showEdit = false
|
|
|
|
+ this.dataList = []
|
|
|
|
+ this.showList = null
|
|
|
|
+ this.dataValue = []
|
|
|
|
+ this.indeterminate = false
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ },
|
|
|
|
+ onCheckAllChange(e) {
|
|
|
|
+ Object.assign(this, {
|
|
|
|
+ dataValue: e.target.checked
|
|
|
|
+ ? this.showList.map((item) => {
|
|
|
|
+ return item.value
|
|
|
|
+ })
|
|
|
|
+ : [],
|
|
|
|
+ indeterminate: false,
|
|
|
|
+ checkAll: e.target.checked,
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ onChange(checkedList) {
|
|
|
|
+ this.indeterminate = !!this.dataValue.length && this.dataValue.length < this.showList.length
|
|
|
|
+ this.checkAll = this.dataValue.length === this.showList.length
|
|
|
|
+ },
|
|
|
|
+ getData(url, item) {
|
|
|
|
+ this.bytedanceUrl = url,
|
|
|
|
+ this.bytedanceItem = item,
|
|
|
|
+ this.confirmLoading = false
|
|
|
|
+ this.showEdit = true
|
|
|
|
+ this.dataList = []
|
|
|
|
+ this.showList = null
|
|
|
|
+ this.dataValue = []
|
|
|
|
+ this.checkedKeys = []
|
|
|
|
+ this.indeterminate = false
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ console.log(url, item)
|
|
|
|
+ getAction(url, item).then((res) => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ let arrList = []
|
|
|
|
+ this.treeData = res.result.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ title: item.projectName,
|
|
|
|
+ key: item.projectId + '-',
|
|
|
|
+ children: item.userAllocationList.map(i => {
|
|
|
|
+ return {
|
|
|
|
+ title: i.authName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + (i.userName ? i.userName : '管理员'),
|
|
|
|
+ key: i.accountId
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ console.log(res)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|