|
@@ -7,8 +7,8 @@
|
|
<a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
|
|
<a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
|
|
<a-table
|
|
<a-table
|
|
:columns="columns"
|
|
:columns="columns"
|
|
- :data-source="tableData"
|
|
|
|
- :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
|
|
|
|
|
|
+ :data-source="tableDataAllDirect"
|
|
|
|
+ :row-selection="{onChange: handleSelectionDirect, selectedRowKeys: tableSelectDirectIds}"
|
|
:scroll="{y: 300}"
|
|
:scroll="{y: 300}"
|
|
:pagination="false"
|
|
:pagination="false"
|
|
>
|
|
>
|
|
@@ -18,8 +18,8 @@
|
|
<a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
|
|
<a-input-search class="input-search" placeholder="请输入账户名或ID" @change="handleSearchPack" />
|
|
<a-table
|
|
<a-table
|
|
:columns="columns"
|
|
:columns="columns"
|
|
- :data-source="tableData"
|
|
|
|
- :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
|
|
|
|
|
|
+ :data-source="tableDataAllExclude"
|
|
|
|
+ :row-selection="{onChange: handleSelectionExclude, selectedRowKeys: tableSelectExcludeIds}"
|
|
:scroll="{y: 300}"
|
|
:scroll="{y: 300}"
|
|
:pagination="false"
|
|
:pagination="false"
|
|
>
|
|
>
|
|
@@ -30,20 +30,47 @@
|
|
<div class="select-class-right">
|
|
<div class="select-class-right">
|
|
<div class="class-left-header">
|
|
<div class="class-left-header">
|
|
已选({{ packtype === 'directional' ? '定向' : '排除'}})
|
|
已选({{ packtype === 'directional' ? '定向' : '排除'}})
|
|
|
|
+ <span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
|
|
</div>
|
|
</div>
|
|
<div class="class-left-content">
|
|
<div class="class-left-content">
|
|
<a-tabs v-model="selectAllRightTabs">
|
|
<a-tabs v-model="selectAllRightTabs">
|
|
<a-tab-pane key="3">
|
|
<a-tab-pane key="3">
|
|
<span slot="tab">
|
|
<span slot="tab">
|
|
- 定向(0)
|
|
|
|
|
|
+ 定向({{ tableSelectDirectIds.length || 0 }})
|
|
</span>
|
|
</span>
|
|
- 定向
|
|
|
|
|
|
+ <div v-if="tableSelectDirectData.length" class="class-left-content">
|
|
|
|
+ <div class="apply-right-tree" v-for="item in tableSelectDirectData" :key="item.key">
|
|
|
|
+ <p class="left-content-p">
|
|
|
|
+ <a-tooltip placement="left">
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </p>
|
|
|
|
+ <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="no-data-class">暂无数据</div>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="4">
|
|
<a-tab-pane key="4">
|
|
<span slot="tab">
|
|
<span slot="tab">
|
|
- 排除(0)
|
|
|
|
|
|
+ 排除({{ tableSelectExcludeIds.length || 0 }})
|
|
</span>
|
|
</span>
|
|
- 排除
|
|
|
|
|
|
+ <div v-if="tableSelectExcludeData.length" class="class-left-content">
|
|
|
|
+ <div class="apply-right-tree" v-for="item in tableSelectExcludeData" :key="item.key">
|
|
|
|
+ <p class="left-content-p">
|
|
|
|
+ <a-tooltip placement="left">
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ </p>
|
|
|
|
+ <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="no-data-class">暂无数据</div>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tabs>
|
|
</div>
|
|
</div>
|
|
@@ -55,7 +82,7 @@
|
|
<div class="select-class-left">
|
|
<div class="select-class-left">
|
|
<a-table
|
|
<a-table
|
|
:columns="columns"
|
|
:columns="columns"
|
|
- :data-source="tableData"
|
|
|
|
|
|
+ :data-source="tableDataAlone"
|
|
:row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
|
|
:row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
|
|
:scroll="{y: 300}"
|
|
:scroll="{y: 300}"
|
|
:pagination="false"
|
|
:pagination="false"
|
|
@@ -65,6 +92,7 @@
|
|
<div class="select-class-right">
|
|
<div class="select-class-right">
|
|
<div class="class-left-header">
|
|
<div class="class-left-header">
|
|
已选({{ packtype === 'directional' ? '定向' : '排除'}})
|
|
已选({{ packtype === 'directional' ? '定向' : '排除'}})
|
|
|
|
+ <span class="clear-all-tab"><a @click="handleDelAloneAll('alone')">清空</a></span>
|
|
</div>
|
|
</div>
|
|
<div v-if="selectRightData.length" class="class-left-content">
|
|
<div v-if="selectRightData.length" class="class-left-content">
|
|
<div class="apply-right-tree" v-for="item in selectRightData" :key="item.key">
|
|
<div class="apply-right-tree" v-for="item in selectRightData" :key="item.key">
|
|
@@ -126,7 +154,67 @@ export default {
|
|
ellipsis: true
|
|
ellipsis: true
|
|
}
|
|
}
|
|
],
|
|
],
|
|
- tableData: [
|
|
|
|
|
|
+ tableDataAllDirect: [
|
|
|
|
+ {
|
|
|
|
+ key: 1,
|
|
|
|
+ name: '求大城市能促进快下班',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 2,
|
|
|
|
+ name: '好处费对该回复啊花开待夏',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ }
|
|
|
|
+ ], // 全选-定向数据
|
|
|
|
+ updateTableAllDirect: [
|
|
|
|
+ {
|
|
|
|
+ key: 1,
|
|
|
|
+ name: '求大城市能促进快下班',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 2,
|
|
|
|
+ name: '好处费对该回复啊花开待夏',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ }
|
|
|
|
+ ], // 全选-定向数据-copy
|
|
|
|
+ tableSelectDirectIds: [], // 全选-定向-table选中ID
|
|
|
|
+ tableSelectDirectData: [], // 全选-定向-右侧选中数据
|
|
|
|
+ tableDataAllExclude: [
|
|
|
|
+ {
|
|
|
|
+ key: 1,
|
|
|
|
+ name: '差不多不是',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 2,
|
|
|
|
+ name: '很高的一位杰克逊的本质',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ }
|
|
|
|
+ ], // 全选-排除数据
|
|
|
|
+ updateTableAllExclude: [
|
|
|
|
+ {
|
|
|
|
+ key: 1,
|
|
|
|
+ name: '差不多不是',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 2,
|
|
|
|
+ name: '很高的一位杰克逊的本质',
|
|
|
|
+ age: '系统推荐',
|
|
|
|
+ address: '2020-12-12'
|
|
|
|
+ }
|
|
|
|
+ ], // 全选-排除数据-copy
|
|
|
|
+ tableSelectExcludeIds: [], // 全选-排除-table选中ID
|
|
|
|
+ tableSelectExcludeData: [], // 全选-排除-右侧选中数据
|
|
|
|
+ tableDataAlone: [
|
|
{
|
|
{
|
|
key: 1,
|
|
key: 1,
|
|
name: '行业内人群包1234567',
|
|
name: '行业内人群包1234567',
|
|
@@ -140,7 +228,7 @@ export default {
|
|
address: '2020-12-12'
|
|
address: '2020-12-12'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
- updateTreeData: [
|
|
|
|
|
|
+ updateTreeDataAlone: [
|
|
{
|
|
{
|
|
key: 1,
|
|
key: 1,
|
|
name: '行业内人群包1234567',
|
|
name: '行业内人群包1234567',
|
|
@@ -156,25 +244,70 @@ export default {
|
|
]
|
|
]
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ watch: {
|
|
|
|
+ packtype(newVal, oldVal) {
|
|
|
|
+ console.log(newVal, 'new--new');
|
|
|
|
+ if (newVal === 'directional') {
|
|
|
|
+ this.tableSelectIds = [];
|
|
|
|
+ this.selectRightData = [];
|
|
|
|
+ this.tableSelectDirectIds = [];
|
|
|
|
+ this.tableSelectDirectData = [];
|
|
|
|
+ this.tableSelectExcludeIds = [];
|
|
|
|
+ this.tableSelectExcludeData = [];
|
|
|
|
+ }
|
|
|
|
+ else if (newVal === 'exclude') {
|
|
|
|
+ this.tableSelectIds = [];
|
|
|
|
+ this.selectRightData = [];
|
|
|
|
+ this.tableSelectDirectIds = [];
|
|
|
|
+ this.tableSelectDirectData = [];
|
|
|
|
+ this.tableSelectExcludeIds = [];
|
|
|
|
+ this.tableSelectExcludeData = [];
|
|
|
|
+ }
|
|
|
|
+ else if (newVal === 'twoway') {
|
|
|
|
+ this.tableSelectIds = [];
|
|
|
|
+ this.selectRightData = [];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
handleSearchPack(e) {
|
|
handleSearchPack(e) {
|
|
const value = e.target.value;
|
|
const value = e.target.value;
|
|
let defaultList = [];
|
|
let defaultList = [];
|
|
- this.updateTreeData.forEach(item => {
|
|
|
|
|
|
+ this.updateTreeDataAlone.forEach(item => {
|
|
if (item.name && item.name.indexOf(value) !== -1) {
|
|
if (item.name && item.name.indexOf(value) !== -1) {
|
|
defaultList.push(item);
|
|
defaultList.push(item);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- this.tableData = defaultList;
|
|
|
|
|
|
+ this.tableDataAlone = defaultList;
|
|
},
|
|
},
|
|
handleRowSelection(selectedRowKeys, selectedRows) {
|
|
handleRowSelection(selectedRowKeys, selectedRows) {
|
|
this.tableSelectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
|
|
this.tableSelectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
|
|
this.selectRightData = selectedRows;
|
|
this.selectRightData = selectedRows;
|
|
},
|
|
},
|
|
|
|
+ handleSelectionDirect(selectedRowKeys, selectedRows) {
|
|
|
|
+ this.tableSelectDirectIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
|
|
|
|
+ this.tableSelectDirectData = selectedRows;
|
|
|
|
+ },
|
|
|
|
+ handleSelectionExclude(selectedRowKeys, selectedRows) {
|
|
|
|
+ this.tableSelectExcludeIds = selectedRows.length ? selectedRows.map(item => item.key) : [];
|
|
|
|
+ this.tableSelectExcludeData = selectedRows;
|
|
|
|
+ },
|
|
handleDelTree(list) {
|
|
handleDelTree(list) {
|
|
let formData = this.selectRightData;
|
|
let formData = this.selectRightData;
|
|
this.selectRightData = formData.filter(item => list.key !== item.key);
|
|
this.selectRightData = formData.filter(item => list.key !== item.key);
|
|
this.tableSelectIds = this.selectRightData.map(item => item.key);
|
|
this.tableSelectIds = this.selectRightData.map(item => item.key);
|
|
|
|
+ },
|
|
|
|
+ handleDelAloneAll(type) {
|
|
|
|
+ if (type === 'alone') {
|
|
|
|
+ this.selectRightData = [];
|
|
|
|
+ this.tableSelectIds = [];
|
|
|
|
+ }
|
|
|
|
+ else if (type === 'all') {
|
|
|
|
+ this.tableSelectDirectIds = [];
|
|
|
|
+ this.tableSelectDirectData = [];
|
|
|
|
+ this.tableSelectExcludeIds = [];
|
|
|
|
+ this.tableSelectExcludeData = [];
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|