directional-logic.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522
  1. <template>
  2. <div class="directional-logic-content">
  3. <div v-if="multitype === 'all'" class="tree-select-class">
  4. <div class="select-class-left">
  5. <a-tabs v-model="selectPackageTabs" @change="handleTabsChange">
  6. <a-tab-pane key="1" tab="定向池">
  7. <a-input-search class="input-search" v-model="directInput" placeholder="请输入人群包名称" @change="handleSearchPack($event, 'all', 'direct')" />
  8. <a-table
  9. :columns="columns"
  10. :data-source="tableDataAllDirect"
  11. :row-selection="rowSelectionAllDirect"
  12. :scroll="{y: 200}"
  13. :pagination="false"
  14. >
  15. <span slot="acountRelax" slot-scope="text, record">
  16. {{ record.name }}({{ record.key }})
  17. </span>
  18. </a-table>
  19. </a-tab-pane>
  20. <a-tab-pane key="2" tab="排除池">
  21. <a-input-search class="input-search" v-model="excludeInput" placeholder="请输入人群包名称" @change="handleSearchPack($event, 'all', 'exclude')" />
  22. <a-table
  23. :columns="columns"
  24. :data-source="tableDataAllExclude"
  25. :row-selection="rowSelectionAllExclude"
  26. :scroll="{y: 200}"
  27. :pagination="false"
  28. >
  29. <span slot="acountRelax" slot-scope="text, record">
  30. {{ record.name }}(record.key)
  31. </span>
  32. </a-table>
  33. </a-tab-pane>
  34. </a-tabs>
  35. </div>
  36. <div class="select-class-right">
  37. <div class="class-left-header">
  38. 已选<span class="clear-all-tab"><a @click="handleDelAloneAll('all')">清空</a></span>
  39. </div>
  40. <div class="class-left-content">
  41. <a-tabs v-model="selectAllRightTabs" @change="handleSelectAllTabs">
  42. <a-tab-pane key="3">
  43. <span slot="tab">
  44. 定向({{ tableSelectDirectIds.length || 0 }})
  45. </span>
  46. <div v-if="tableSelectDirectData.length" class="class-left-content">
  47. <div class="apply-right-tree" v-for="item in tableSelectDirectData" :key="item.key">
  48. <p class="left-content-p">
  49. <a-tooltip placement="left">
  50. <template slot="title">
  51. <span>{{ item.name }}</span>
  52. </template>
  53. {{ item.name }}
  54. </a-tooltip>
  55. </p>
  56. <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'direct')" />
  57. </div>
  58. </div>
  59. <div v-else class="no-data-class">暂无数据</div>
  60. </a-tab-pane>
  61. <a-tab-pane key="4">
  62. <span slot="tab">
  63. 排除({{ tableSelectExcludeIds.length || 0 }})
  64. </span>
  65. <div v-if="tableSelectExcludeData.length" class="class-left-content">
  66. <div class="apply-right-tree" v-for="item in tableSelectExcludeData" :key="item.key">
  67. <p class="left-content-p">
  68. <a-tooltip placement="left">
  69. <template slot="title">
  70. <span>{{ item.name }}</span>
  71. </template>
  72. {{ item.name }}
  73. </a-tooltip>
  74. </p>
  75. <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'all', 'exclude')" />
  76. </div>
  77. </div>
  78. <div v-else class="no-data-class">暂无数据</div>
  79. </a-tab-pane>
  80. </a-tabs>
  81. </div>
  82. </div>
  83. </div>
  84. <div v-else>
  85. <a-input-search class="input-search" v-model="aloneInput" placeholder="请输入人群包名称" @change="handleSearchPack($event, 'alone')" />
  86. <div class="tree-select-class">
  87. <div class="select-class-left">
  88. <a-table
  89. :columns="columns"
  90. :data-source="tableDataAlone"
  91. :row-selection="{onChange: handleRowSelection, selectedRowKeys: tableSelectIds}"
  92. :scroll="{y: 300}"
  93. :pagination="false"
  94. >
  95. <span slot="acountRelax" slot-scope="text, record">
  96. {{ record.name }}(record.key)
  97. </span>
  98. </a-table>
  99. </div>
  100. <div class="select-class-right">
  101. <div class="class-left-header">
  102. 已选({{ packtype === 'directional' ? '定向' : '排除'}})
  103. <span class="clear-all-tab"><a @click="handleDelAloneAll('alone')">清空</a></span>
  104. </div>
  105. <div v-if="selectRightData.length" class="class-left-content">
  106. <div class="apply-right-tree" v-for="item in selectRightData" :key="item.key">
  107. <p class="left-content-p">
  108. <a-tooltip placement="left">
  109. <template slot="title">
  110. <span>{{ item.name }}</span>
  111. </template>
  112. {{ item.name }}
  113. </a-tooltip>
  114. </p>
  115. <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item, 'alone')" />
  116. </div>
  117. </div>
  118. <div v-else class="no-data-class">暂无数据</div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </template>
  124. <script>
  125. export default {
  126. name: 'directional-logic',
  127. props: {
  128. packtype: {
  129. type: String,
  130. default: ''
  131. },
  132. multitype: {
  133. type: String,
  134. default: ''
  135. },
  136. valueids: {
  137. type: String,
  138. default: ''
  139. },
  140. defaultlist: {
  141. type: Array,
  142. default: () => {
  143. return [];
  144. }
  145. },
  146. updatelistinclude: {
  147. type: Array,
  148. default: () => {
  149. return [];
  150. }
  151. },
  152. updatelistexclude: {
  153. type: Array,
  154. default: () => {
  155. return [];
  156. }
  157. }
  158. },
  159. data() {
  160. return {
  161. aloneInput: '',
  162. directInput: '',
  163. excludeInput: '',
  164. selectPackageTabs: '1',
  165. selectAllRightTabs: '3',
  166. selectRightData: [],
  167. tableSelectIds: [],
  168. columns: [
  169. {
  170. title: '人群包',
  171. dataIndex: 'name',
  172. key: 'name',
  173. ellipsis: true,
  174. scopedSlots: {customRender: 'acountRelax'}
  175. },
  176. {
  177. title: '属性',
  178. dataIndex: 'tag',
  179. key: 'tag',
  180. width: '30%',
  181. ellipsis: true
  182. },
  183. {
  184. title: '创建时间',
  185. dataIndex: 'create_time',
  186. width: '30%',
  187. key: 'create_time',
  188. ellipsis: true
  189. }
  190. ],
  191. tableDataAllDirect: [
  192. {
  193. key: 1,
  194. name: '求大城市能促进快下班',
  195. age: '系统推荐',
  196. address: '2020-12-12'
  197. },
  198. {
  199. key: 2,
  200. name: '好处费对该回复啊花开待夏',
  201. age: '系统推荐',
  202. address: '2020-12-12'
  203. }
  204. ], // 全选-定向数据
  205. updateTableAllDirect: [
  206. {
  207. key: 1,
  208. name: '求大城市能促进快下班',
  209. age: '系统推荐',
  210. address: '2020-12-12'
  211. },
  212. {
  213. key: 2,
  214. name: '好处费对该回复啊花开待夏',
  215. age: '系统推荐',
  216. address: '2020-12-12'
  217. }
  218. ], // 全选-定向数据-copy
  219. tableSelectDirectIds: [], // 全选-定向-table选中ID
  220. tableSelectDirectData: [], // 全选-定向-右侧选中数据
  221. tableDataAllExclude: [
  222. {
  223. key: 1,
  224. name: '差不多不是',
  225. age: '系统推荐',
  226. address: '2020-12-12'
  227. },
  228. {
  229. key: 2,
  230. name: '很高的一位杰克逊的本质',
  231. age: '系统推荐',
  232. address: '2020-12-12'
  233. }
  234. ], // 全选-排除数据
  235. updateTableAllExclude: [
  236. {
  237. key: 1,
  238. name: '差不多不是',
  239. age: '系统推荐',
  240. address: '2020-12-12'
  241. },
  242. {
  243. key: 2,
  244. name: '很高的一位杰克逊的本质',
  245. age: '系统推荐',
  246. address: '2020-12-12'
  247. }
  248. ], // 全选-排除数据-copy
  249. tableSelectExcludeIds: [], // 全选-排除-table选中ID
  250. tableSelectExcludeData: [], // 全选-排除-右侧选中数据
  251. tableDataAlone: [],
  252. updateTreeDataAlone: []
  253. };
  254. },
  255. computed: {
  256. rowSelectionAllDirect() {
  257. return {
  258. onChange: (selectedRowKeys, selectedRows) => {
  259. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  260. this.tableSelectDirectIds = selectedRows && selectedRows.map(item => item.key);
  261. this.tableSelectDirectData = selectedRows;
  262. this.$emit('selection-direct-event', this.tableSelectDirectIds);
  263. },
  264. selectedRowKeys: this.tableSelectDirectIds,
  265. getCheckboxProps: record => ({
  266. props: {
  267. disabled: this.tableSelectExcludeIds.includes(record.key),
  268. name: record.name,
  269. defaultChecked: this.tableSelectDirectIds.includes(record.key)
  270. }
  271. })
  272. };
  273. },
  274. rowSelectionAllExclude() {
  275. return {
  276. onChange: (selectedRowKeys, selectedRows) => {
  277. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  278. this.tableSelectExcludeIds = selectedRows && selectedRows.map(item => item.key);
  279. this.tableSelectExcludeData = selectedRows;
  280. this.$emit('selection-exclude-event', this.tableSelectExcludeIds);
  281. },
  282. selectedRowKeys: this.tableSelectExcludeIds,
  283. getCheckboxProps: record => ({
  284. props: {
  285. disabled: this.tableSelectDirectIds.includes(record.key),
  286. name: record.name,
  287. defaultChecked: this.tableSelectExcludeIds.includes(record.key)
  288. }
  289. })
  290. };
  291. }
  292. },
  293. watch: {
  294. // updatelistinclude(newVal) {
  295. // if (newVal) {
  296. // console.log(newVal, '---00---000----000');
  297. // this.tableSelectDirectIds = newVal;
  298. // }
  299. // },
  300. // updatelistexclude(newVal) {
  301. // if (newVal) {
  302. // this.tableSelectExcludeIds = newVal;
  303. // }
  304. // },
  305. defaultlist(newVal) {
  306. if (newVal) {
  307. this.tableDataAllDirect = newVal;
  308. this.updateTableAllDirect = newVal;
  309. this.tableDataAllExclude = newVal;
  310. this.updateTableAllExclude = newVal;
  311. this.tableDataAlone = newVal;
  312. this.updateTreeDataAlone = newVal;
  313. }
  314. },
  315. packtype(newVal, oldVal) {
  316. if (newVal === 'directional') {
  317. this.tableSelectIds = [];
  318. this.selectRightData = [];
  319. this.tableSelectDirectIds = [];
  320. this.tableSelectDirectData = [];
  321. this.tableSelectExcludeIds = [];
  322. this.tableSelectExcludeData = [];
  323. }
  324. else if (newVal === 'exclude') {
  325. this.tableSelectIds = [];
  326. this.selectRightData = [];
  327. this.tableSelectDirectIds = [];
  328. this.tableSelectDirectData = [];
  329. this.tableSelectExcludeIds = [];
  330. this.tableSelectExcludeData = [];
  331. }
  332. else if (newVal === 'twoway') {
  333. this.tableSelectIds = [];
  334. this.selectRightData = [];
  335. }
  336. }
  337. },
  338. mounted() {
  339. this.tableDataAllDirect = this.defaultlist;
  340. this.updateTableAllDirect = this.defaultlist;
  341. this.tableDataAllExclude = this.defaultlist;
  342. this.updateTableAllExclude = this.defaultlist;
  343. this.tableDataAlone = this.defaultlist;
  344. this.updateTreeDataAlone = this.defaultlist;
  345. if (this.valueids === '3') {
  346. if (this.updatelistinclude.length && this.updatelistexclude.length) {
  347. this.tableSelectDirectIds = [...this.updatelistinclude];
  348. this.tableSelectExcludeIds = [...this.updatelistexclude];
  349. this.updateTableAllDirect.forEach(item => {
  350. this.updatelistinclude.forEach(val => {
  351. if (item.key === val) {
  352. this.tableSelectDirectData.push(item);
  353. }
  354. });
  355. });
  356. this.updateTableAllExclude.forEach(item => {
  357. this.updatelistexclude.forEach(val => {
  358. if (item.key === val) {
  359. this.tableSelectExcludeData.push(item);
  360. }
  361. });
  362. });
  363. }
  364. else if (this.updatelistexclude.length && !this.updatelistinclude.length) {
  365. this.tableSelectExcludeIds = [...this.updatelistexclude];
  366. this.selectPackageTabs = '2';
  367. this.selectAllRightTabs = '4';
  368. this.updateTableAllExclude.forEach(item => {
  369. this.updatelistexclude.forEach(val => {
  370. if (item.key === val) {
  371. this.tableSelectExcludeData.push(item);
  372. }
  373. });
  374. });
  375. }
  376. else if (!this.updatelistexclude.length && this.updatelistinclude.length) {
  377. this.tableSelectDirectIds = [...this.updatelistinclude];
  378. this.selectPackageTabs = '1';
  379. this.selectAllRightTabs = '3';
  380. this.updateTableAllDirect.forEach(item => {
  381. this.updatelistinclude.forEach(val => {
  382. if (item.key === val) {
  383. this.tableSelectDirectData.push(item);
  384. }
  385. });
  386. });
  387. }
  388. }
  389. else if (this.valueids === '1') {
  390. this.tableSelectIds = [...this.updatelistinclude];
  391. this.updateTableAllDirect.forEach(item => {
  392. this.updatelistinclude.forEach(val => {
  393. if (item.key === val) {
  394. this.selectRightData.push(item);
  395. }
  396. });
  397. });
  398. }
  399. else if (this.valueids === '2') {
  400. this.tableSelectIds = [...this.updatelistexclude];
  401. this.updateTableAllDirect.forEach(item => {
  402. this.updatelistexclude.forEach(val => {
  403. if (item.key === val) {
  404. this.selectRightData.push(item);
  405. }
  406. });
  407. });
  408. }
  409. },
  410. methods: {
  411. handleSelectAllTabs(e) {
  412. if (e === '3') {
  413. this.selectPackageTabs = '1';
  414. }
  415. else if (e === '4') {
  416. this.selectPackageTabs = '2';
  417. }
  418. },
  419. handleTabsChange(e) {
  420. if (e === '1') {
  421. this.selectAllRightTabs = '3';
  422. }
  423. else if (e === '2') {
  424. this.selectAllRightTabs = '4';
  425. }
  426. this.tableDataAllDirect = [];
  427. this.tableDataAllExclude = [];
  428. this.directInput = '';
  429. this.excludeInput = '';
  430. this.$nextTick(() => {
  431. this.tableDataAllDirect = this.updateTableAllDirect;
  432. this.tableDataAllExclude = this.updateTableAllExclude;
  433. });
  434. },
  435. handleSearchPack(e, type, style) {
  436. const value = e.target.value;
  437. if (type === 'alone') {
  438. let defaultList = [];
  439. this.updateTreeDataAlone.forEach(item => {
  440. if (item.name && item.name.indexOf(value) !== -1) {
  441. defaultList.push(item);
  442. }
  443. });
  444. this.tableDataAlone = defaultList;
  445. }
  446. else if (type === 'all') {
  447. if (style === 'direct') {
  448. let defaultListOne = [];
  449. this.updateTableAllDirect.forEach(item => {
  450. if (item.name && item.name.indexOf(value) !== -1) {
  451. defaultListOne.push(item);
  452. }
  453. });
  454. this.tableDataAllDirect = defaultListOne;
  455. }
  456. else if (style === 'exclude') {
  457. let defaultListTwo = [];
  458. this.updateTableAllExclude.forEach(item => {
  459. if (item.name && item.name.indexOf(value) !== -1) {
  460. defaultListTwo.push(item);
  461. }
  462. });
  463. this.tableDataAllExclude = defaultListTwo;
  464. }
  465. }
  466. },
  467. handleRowSelection(selectedRowKeys, selectedRows) {
  468. this.tableSelectIds = selectedRowKeys;
  469. this.selectRightData = selectedRows;
  470. this.$emit('selection-alone-event', selectedRowKeys);
  471. },
  472. handleDelTree(list, type, style) {
  473. if (type === 'alone') {
  474. let formData = this.selectRightData;
  475. this.selectRightData = formData.filter(item => list.key !== item.key);
  476. this.tableSelectIds = this.selectRightData.map(item => item.key);
  477. this.$emit('clear-table-alone', this.tableSelectIds);
  478. }
  479. else if (type === 'all') {
  480. if (style === 'direct') {
  481. let directData = this.tableSelectDirectData;
  482. this.tableSelectDirectData = directData.filter(item => list.key !== item.key);
  483. this.tableSelectDirectIds = this.tableSelectDirectData.map(item => item.key);
  484. this.$emit('clear-table-direct', this.tableSelectDirectIds);
  485. }
  486. else if (style === 'exclude') {
  487. let excludeData = this.tableSelectExcludeData;
  488. this.tableSelectExcludeData = excludeData.filter(item => list.key !== item.key);
  489. this.tableSelectExcludeIds = this.tableSelectExcludeData.map(item => item.key);
  490. this.$emit('clear-table-exclude', this.tableSelectExcludeIds);
  491. }
  492. }
  493. },
  494. handleDelAloneAll(type) {
  495. if (type === 'alone') {
  496. this.selectRightData = [];
  497. this.tableSelectIds = [];
  498. this.$emit('clearlist');
  499. }
  500. else if (type === 'all') {
  501. this.tableSelectDirectIds = [];
  502. this.tableSelectDirectData = [];
  503. this.tableSelectExcludeIds = [];
  504. this.tableSelectExcludeData = [];
  505. this.tableDataAllDirect = [];
  506. this.tableDataAllExclude = [];
  507. this.directInput = '';
  508. this.excludeInput = '';
  509. this.$nextTick(() => {
  510. this.tableDataAllDirect = this.updateTableAllDirect;
  511. this.tableDataAllExclude = this.updateTableAllExclude;
  512. });
  513. this.$emit('clearlist');
  514. }
  515. }
  516. }
  517. }
  518. </script>
  519. <style lang="less" scoped>
  520. @import 'directional-logic';
  521. </style>