|
@@ -2,13 +2,13 @@
|
|
|
<div class="directional-logic-content">
|
|
|
<div v-if="multitype === 'all'" class="tree-select-class">
|
|
|
<div class="select-class-left">
|
|
|
- <a-tabs v-model="selectPackageTabs">
|
|
|
+ <a-tabs v-model="selectPackageTabs" @change="handleTabsChange">
|
|
|
<a-tab-pane key="1" tab="定向池">
|
|
|
<a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
|
|
|
<a-table
|
|
|
:columns="columns"
|
|
|
:data-source="tableDataAllDirect"
|
|
|
- :row-selection="{onChange: handleSelectionDirect, selectedRowKeys: tableSelectDirectIds}"
|
|
|
+ :row-selection="rowSelectionAllDirect"
|
|
|
:scroll="{y: 300}"
|
|
|
:pagination="false"
|
|
|
>
|
|
@@ -19,7 +19,7 @@
|
|
|
<a-table
|
|
|
:columns="columns"
|
|
|
:data-source="tableDataAllExclude"
|
|
|
- :row-selection="{onChange: handleSelectionExclude, selectedRowKeys: tableSelectExcludeIds}"
|
|
|
+ :row-selection="rowSelectionAllExclude"
|
|
|
:scroll="{y: 300}"
|
|
|
:pagination="false"
|
|
|
>
|
|
@@ -29,8 +29,7 @@
|
|
|
</div>
|
|
|
<div class="select-class-right">
|
|
|
<div class="class-left-header">
|
|
|
- 已选({{ packtype === 'directional' ? '定向' : '排除'}})
|
|
|
- <span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
|
|
|
+ 已选<span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
|
|
|
</div>
|
|
|
<div class="class-left-content">
|
|
|
<a-tabs v-model="selectAllRightTabs">
|
|
@@ -48,7 +47,7 @@
|
|
|
{{ item.name }}
|
|
|
</a-tooltip>
|
|
|
</p>
|
|
|
- <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
|
|
|
+ <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'direct')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="no-data-class">暂无数据</div>
|
|
@@ -67,7 +66,7 @@
|
|
|
{{ item.name }}
|
|
|
</a-tooltip>
|
|
|
</p>
|
|
|
- <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
|
|
|
+ <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'exclude')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="no-data-class">暂无数据</div>
|
|
@@ -104,7 +103,7 @@
|
|
|
{{ item.name }}
|
|
|
</a-tooltip>
|
|
|
</p>
|
|
|
- <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
|
|
|
+ <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'alone')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="no-data-class">暂无数据</div>
|
|
@@ -124,6 +123,12 @@ export default {
|
|
|
multitype: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
+ },
|
|
|
+ defaultlist: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -141,16 +146,16 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
title: '属性',
|
|
|
- dataIndex: 'age',
|
|
|
- key: 'age',
|
|
|
+ dataIndex: 'tag',
|
|
|
+ key: 'tag',
|
|
|
width: '30%',
|
|
|
ellipsis: true
|
|
|
},
|
|
|
{
|
|
|
title: '创建时间',
|
|
|
- dataIndex: 'address',
|
|
|
+ dataIndex: 'create_time',
|
|
|
width: '30%',
|
|
|
- key: 'address',
|
|
|
+ key: 'create_time',
|
|
|
ellipsis: true
|
|
|
}
|
|
|
],
|
|
@@ -214,37 +219,80 @@ export default {
|
|
|
], // 全选-排除数据-copy
|
|
|
tableSelectExcludeIds: [], // 全选-排除-table选中ID
|
|
|
tableSelectExcludeData: [], // 全选-排除-右侧选中数据
|
|
|
- tableDataAlone: [
|
|
|
- {
|
|
|
- key: 1,
|
|
|
- name: '行业内人群包1234567',
|
|
|
- age: '系统推荐',
|
|
|
- address: '2020-12-12'
|
|
|
+ tableDataAlone: [],
|
|
|
+ updateTreeDataAlone: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ rowSelectionAllDirect() {
|
|
|
+ return {
|
|
|
+ onChange: (selectedRowKeys, selectedRows) => {
|
|
|
+ console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
|
+ this.tableSelectDirectIds = selectedRowKeys;
|
|
|
+ this.tableSelectDirectData = selectedRows;
|
|
|
},
|
|
|
- {
|
|
|
- key: 2,
|
|
|
- name: '行业内人群包98990890',
|
|
|
- age: '系统推荐',
|
|
|
- address: '2020-12-12'
|
|
|
- }
|
|
|
- ],
|
|
|
- updateTreeDataAlone: [
|
|
|
- {
|
|
|
- key: 1,
|
|
|
- name: '行业内人群包1234567',
|
|
|
- age: '系统推荐',
|
|
|
- address: '2020-12-12'
|
|
|
+ selectedRowKeys: this.tableSelectDirectIds,
|
|
|
+ getCheckboxProps: record => ({
|
|
|
+ props: {
|
|
|
+ disabled: this.tableSelectExcludeIds.includes(record.key),
|
|
|
+ name: record.name,
|
|
|
+ defaultChecked: this.tableSelectDirectIds.includes(record.key)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ };
|
|
|
+ },
|
|
|
+ rowSelectionAllExclude() {
|
|
|
+ return {
|
|
|
+ onChange: (selectedRowKeys, selectedRows) => {
|
|
|
+ console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
|
+ this.tableSelectExcludeIds = selectedRowKeys;
|
|
|
+ this.tableSelectExcludeData = selectedRows;
|
|
|
},
|
|
|
- {
|
|
|
- key: 2,
|
|
|
- name: '行业内人群包98990890',
|
|
|
- age: '系统推荐',
|
|
|
- address: '2020-12-12'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ selectedRowKeys: this.tableSelectExcludeIds,
|
|
|
+ getCheckboxProps: record => ({
|
|
|
+ props: {
|
|
|
+ disabled: this.tableSelectDirectIds.includes(record.key),
|
|
|
+ name: record.name,
|
|
|
+ defaultChecked: this.tableSelectExcludeIds.includes(record.key)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // allSelection() {
|
|
|
+ // const {tableSelectExcludeIds} = this;
|
|
|
+ // return {
|
|
|
+ // handleDirectProps: record => ({
|
|
|
+ // props: {
|
|
|
+ // disabled: tableSelectExcludeIds.includes(record.key),
|
|
|
+ // name: record.name
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // allSelectionTwo() {
|
|
|
+ // const {tableSelectDirectIds} = this;
|
|
|
+ // return {
|
|
|
+ // handleExcludeProps: record => ({
|
|
|
+ // props: {
|
|
|
+ // disabled: tableSelectDirectIds.includes(record.key),
|
|
|
+ // name: record.name
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
},
|
|
|
watch: {
|
|
|
+ defaultlist(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ console.log(newVal, '----newVal--val');
|
|
|
+ this.tableDataAllDirect = newVal;
|
|
|
+ this.updateTableAllDirect = newVal;
|
|
|
+ this.tableDataAllExclude = newVal;
|
|
|
+ this.updateTableAllExclude = newVal;
|
|
|
+ this.tableDataAlone = newVal;
|
|
|
+ this.updateTreeDataAlone = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
packtype(newVal, oldVal) {
|
|
|
console.log(newVal, 'new--new');
|
|
|
if (newVal === 'directional') {
|
|
@@ -269,7 +317,23 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.tableDataAllDirect = this.defaultlist;
|
|
|
+ this.updateTableAllDirect = this.defaultlist;
|
|
|
+ this.tableDataAllExclude = this.defaultlist;
|
|
|
+ this.updateTableAllExclude = this.defaultlist;
|
|
|
+ this.tableDataAlone = this.defaultlist;
|
|
|
+ this.updateTreeDataAlone = this.defaultlist;
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ handleTabsChange(e) {
|
|
|
+ this.tableDataAllDirect = [];
|
|
|
+ this.tableDataAllExclude = [];
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.tableDataAllDirect = this.updateTableAllDirect;
|
|
|
+ this.tableDataAllExclude = this.updateTableAllExclude;
|
|
|
+ });
|
|
|
+ },
|
|
|
handleSearchPack(e) {
|
|
|
const value = e.target.value;
|
|
|
let defaultList = [];
|
|
@@ -281,21 +345,35 @@ export default {
|
|
|
this.tableDataAlone = defaultList;
|
|
|
},
|
|
|
handleRowSelection(selectedRowKeys, selectedRows) {
|
|
|
- this.tableSelectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
|
|
|
+ this.tableSelectIds = selectedRowKeys;
|
|
|
this.selectRightData = selectedRows;
|
|
|
},
|
|
|
handleSelectionDirect(selectedRowKeys, selectedRows) {
|
|
|
- this.tableSelectDirectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
|
|
|
+ this.tableSelectDirectIds = selectedRowKeys;
|
|
|
this.tableSelectDirectData = selectedRows;
|
|
|
},
|
|
|
handleSelectionExclude(selectedRowKeys, selectedRows) {
|
|
|
- this.tableSelectExcludeIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
|
|
|
+ this.tableSelectExcludeIds = selectedRowKeys;
|
|
|
this.tableSelectExcludeData = selectedRows;
|
|
|
},
|
|
|
- handleDelTree(list) {
|
|
|
- let formData = this.selectRightData;
|
|
|
- this.selectRightData = formData.filter(item => list.key !== item.key);
|
|
|
- this.tableSelectIds = this.selectRightData.map(item => item.key);
|
|
|
+ handleDelTree(list, type, style) {
|
|
|
+ if (type === 'alone') {
|
|
|
+ let formData = this.selectRightData;
|
|
|
+ this.selectRightData = formData.filter(item => list.key !== item.key);
|
|
|
+ this.tableSelectIds = this.selectRightData.map(item => item.key);
|
|
|
+ }
|
|
|
+ else if (type === 'all') {
|
|
|
+ if (style === 'direct') {
|
|
|
+ let directData = this.tableSelectDirectData;
|
|
|
+ this.tableSelectDirectData = directData.filter(item => list.key !== item.key);
|
|
|
+ this.tableSelectDirectIds = this.tableSelectDirectData.map(item => item.key);
|
|
|
+ }
|
|
|
+ else if (style === 'exclude') {
|
|
|
+ let excludeData = this.tableSelectExcludeData;
|
|
|
+ this.tableSelectExcludeData = excludeData.filter(item => list.key !== item.key);
|
|
|
+ this.tableSelectExcludeIds = this.tableSelectExcludeData.map(item => item.key);
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
handleDelAloneAll(type) {
|
|
|
if (type === 'alone') {
|