|
@@ -1,184 +1,275 @@
|
|
|
<style>
|
|
|
- .checked-account {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+.checked-account {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
|
|
|
- .checked-account .ant-checkbox-wrapper {
|
|
|
- width: 20%;
|
|
|
- min-width: 300px;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+.checked-account .ant-checkbox-wrapper {
|
|
|
+ width: 20%;
|
|
|
+ min-width: 300px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
</style>
|
|
|
<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>
|
|
|
+ <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>
|
|
|
+ <a-input-search
|
|
|
+ style="margin-bottom: 8px; width: 180px"
|
|
|
+ allow-clear
|
|
|
+ v-model="searchVal"
|
|
|
+ @search="onSearch"
|
|
|
+ />
|
|
|
+ <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>
|
|
|
|
|
|
<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,
|
|
|
- bytedanceUrl: null,
|
|
|
- bytedanceItem: null,
|
|
|
- }
|
|
|
- },
|
|
|
- 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)
|
|
|
- })
|
|
|
- },
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ checkedKeys: [],
|
|
|
+ showEdit: false,
|
|
|
+ dataList: [],
|
|
|
+ showList: null,
|
|
|
+ dataValue: [],
|
|
|
+ indeterminate: false,
|
|
|
+ checkAll: false,
|
|
|
+ expandedKeys: [],
|
|
|
+ autoExpandParent: true,
|
|
|
+ selectedKeys: [],
|
|
|
+ treeData: [],
|
|
|
+ confirmLoading: false,
|
|
|
+ bytedanceUrl: null,
|
|
|
+ bytedanceItem: null,
|
|
|
|
|
|
+ defaultData:[],
|
|
|
+ backupsExpandedKeys: [],
|
|
|
+ searchVal: "",
|
|
|
+ searchValue: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ checkedKeys(val) {
|
|
|
+ console.log("onCheck", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSearch1(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
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
+ 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,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.defaultData = JSON.parse(JSON.stringify(this.treeData))
|
|
|
+ }
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击搜索进行模糊筛选
|
|
|
+ onSearch() {
|
|
|
+ const _this = this;
|
|
|
+ _this.searchValue = _this.searchVal;
|
|
|
+ if (_this.searchValue === "") {
|
|
|
+ // _this.expandedKeys = [];
|
|
|
+ this.treeData = JSON.parse(JSON.stringify(this.defaultData))
|
|
|
+ } else {
|
|
|
+ _this.expandedKeys = [];
|
|
|
+ _this.backupsExpandedKeys = [];
|
|
|
+ let candidateKeysList = _this.getkeyList(_this.searchValue, _this.treeData, []);
|
|
|
+ console.log(candidateKeysList)
|
|
|
+ this.treeData = JSON.parse(JSON.stringify(candidateKeysList))
|
|
|
+ // candidateKeysList.map((item) => {
|
|
|
+ // let key = _this.getParentKey(item, this.treeData);
|
|
|
+ // if (key && !_this.backupsExpandedKeys.some((item) => item === key)) {
|
|
|
+ // _this.backupsExpandedKeys.push(key);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // console.log(this.backupsExpandedKeys)
|
|
|
+ // let length = this.backupsExpandedKeys.length;
|
|
|
+ // for (let i = 0; i < length; i++) {
|
|
|
+ // _this.getAllParentKey(_this.backupsExpandedKeys[i], _this.treeData);
|
|
|
+ // }
|
|
|
+ // _this.expandedKeys = _this.backupsExpandedKeys.slice();
|
|
|
+ // _this.autoExpandParent = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取节点中含有value的所有key集合
|
|
|
+ getkeyList(value, tree, keyList) {
|
|
|
+ for (let i = 0; i < tree.length; i++) {
|
|
|
+ let node = tree[i];
|
|
|
+ if (node.title.indexOf(value) > -1) {
|
|
|
+ keyList.push(node);
|
|
|
+ }
|
|
|
+ if (node.children) {
|
|
|
+ this.getkeyList(value, node.children, keyList);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return keyList;
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- }
|
|
|
+ // 该递归主要用于获取key的父亲节点的key值
|
|
|
+ getParentKey(key, tree) {
|
|
|
+ let parentKey;
|
|
|
+ for (let i = 0; i < tree.length; i++) {
|
|
|
+ const node = tree[i];
|
|
|
+ if (node.children) {
|
|
|
+ if (node.children.some((item) => item.key === key)) {
|
|
|
+ parentKey = node.key;
|
|
|
+ } else if (this.getParentKey(key, node.children)) {
|
|
|
+ parentKey = this.getParentKey(key, node.children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return parentKey;
|
|
|
+ },
|
|
|
+ // 获取该节点的所有祖先节点
|
|
|
+ getAllParentKey(key, tree) {
|
|
|
+ let parentKey;
|
|
|
+ if (key) {
|
|
|
+ parentKey = this.getParentKey(key, tree);
|
|
|
+ if (parentKey) {
|
|
|
+ if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
|
|
|
+ this.backupsExpandedKeys.push(parentKey);
|
|
|
+ }
|
|
|
+ this.getAllParentKey(parentKey, tree);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+};
|
|
|
</script>
|