directional.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035
  1. <template>
  2. <div class="directional-content">
  3. <div class="table-page-search-wrapper">
  4. <a-form layout="inline" :form="form"
  5. hide-required-mark :selfUpdate="true"
  6. @submit="handleQueryList">
  7. <a-row :gutter="24">
  8. <a-col :md="8" :sm="8" :xxl="6">
  9. <!-- <a-form-item label="项目名称"> -->
  10. <selectTable :projectId.sync="projectId" ref="selectTable" :requireCheck="false"></selectTable>
  11. </a-col>
  12. <a-col :md="8" :sm="8" :xxl="6">
  13. <a-form-item label="定向包名称">
  14. <a-input
  15. v-decorator="['name']" type="text"
  16. placeholder="请输入需要搜索的定向包名称"
  17. />
  18. </a-form-item>
  19. </a-col>
  20. <!-- -->
  21. <a-col :md="8" :sm="8" :xxl="6">
  22. <a-form-item label="系统平台">
  23. <a-select
  24. v-decorator="['status']"
  25. placeholder="请选择"
  26. allow-clear
  27. >
  28. <a-select-option v-for="item in platform" :key="item.label">
  29. {{ item.value }}
  30. </a-select-option>
  31. </a-select>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :md="8" :sm="8" :xxl="6">
  35. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  36. <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
  37. <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button">重置</a-button>
  38. <a-button type="primary" @click="addNewTemplate(null)">新建定向包</a-button>
  39. </span>
  40. </a-col>
  41. </a-row>
  42. </a-form>
  43. </div>
  44. <div class="control-con-table">
  45. <a-table
  46. ref="table"
  47. size="middle"
  48. bordered
  49. :columns="columns"
  50. :dataSource="dataSource"
  51. :pagination="ipagination"
  52. :loading="dataLoading"
  53. >
  54. <span slot="action" slot-scope="text, record">
  55. <a @click="handlePush(record)">推送</a>
  56. <a-divider type="vertical" />
  57. <a @click="handleEdit(record)">编辑</a>
  58. <a-divider type="vertical" />
  59. <a @click="handleDelete(record)">删除</a>
  60. </span>
  61. <span slot="accountCount" slot-scope="text, record">
  62. <a @click="handleAcountRelax('account', record)">{{ text }}</a>
  63. </span>
  64. <span slot="unitCount" slot-scope="text, record">
  65. <a @click="handleAcountRelax('unit', record)">{{ text }}</a>
  66. </span>
  67. <span slot="actionMore" slot-scope="text, record">
  68. <a @click="handleCause(record)">推送历史</a>
  69. </span>
  70. </a-table>
  71. </div>
  72. <a-modal
  73. title="推送账户"
  74. v-if="pushVisible"
  75. :visible="pushVisible"
  76. :confirm-loading="pushConfirmLoading"
  77. dialog-class="push-modal"
  78. @ok="handlePushSure"
  79. @cancel="handlePushCancel"
  80. okText="下一步"
  81. >
  82. <div>
  83. <div class="acount-title">
  84. <div class="acount-title-left">已选定向包</div>
  85. <div class="acount-title-right">{{ tableSelectList.templateName }}</div>
  86. </div>
  87. <div class="acount-title push-plate">
  88. <div class="acount-title-left">推送平台</div>
  89. <div class="acount-title-right">{{ tableSelectList.platformOs }}</div>
  90. </div>
  91. <tree-select @applyType="handleApplyType" :projectId="tableSelectList.projectId" :templateId="tableSelectList.id"></tree-select>
  92. </div>
  93. </a-modal>
  94. <a-modal
  95. title="为定向包设置自定义人群"
  96. v-if="setPersonVisible"
  97. :visible="setPersonVisible"
  98. :confirm-loading="setPersonLoading"
  99. dialog-class="push-modal"
  100. @ok="handleSetPerson"
  101. @cancel="handlePersonCancel"
  102. >
  103. <!-- @change="handleChange" -->
  104. <el-collapse v-model="activeKey" accordion>
  105. <el-collapse-item :name="item.key" :key="index" v-for="(item ,index) in finallyRightTree">
  106. <template slot="title">
  107. <h2>{{item.title}}</h2>
  108. </template>
  109. <a-form
  110. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  111. >
  112. <div class="acount-title">
  113. <div class="acount-title-left">自定义人群</div>
  114. <div class="acount-title-right">
  115. <a-radio-group v-model="item.people" buttonStyle="solid" @change="checkPerson(item)">
  116. <a-radio-button value="0">不限</a-radio-button>
  117. <a-radio-button value="1">定向</a-radio-button>
  118. <a-radio-button value="2">排除</a-radio-button>
  119. <a-radio-button value="3">同时定向排除</a-radio-button>
  120. </a-radio-group>
  121. </div>
  122. </div>
  123. <div class="dingxiang_paichu" v-if="item.people!='0'" style="width:100%">
  124. <a-tabs v-model="item.tabKey" @change="retargetAccountId(item.key)" >
  125. <a-tab-pane key="1" tab="定向池" v-if="item.people!='2'">
  126. <a-table
  127. :columns="retargetColumns"
  128. :row-key="record => record.key"
  129. :data-source="retargetDataAll"
  130. :loading="loading"
  131. style="width:100%;margin:15px 0"
  132. :pagination='false'
  133. @change="retargetTableChange"
  134. :scroll="{ y: 250 }"
  135. :row-selection="rowSelectionMin"
  136. bordered
  137. >
  138. <template slot="name" slot-scope="name"> {{ name }} </template>
  139. <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
  140. </a-table>
  141. </a-tab-pane>
  142. <a-tab-pane key="2" tab="排除池" v-if="item.people!='1'">
  143. <a-table
  144. :columns="retargetColumns"
  145. :row-key="record => record.key"
  146. :data-source="retargetDataAll"
  147. :loading="loading"
  148. style="width:100%;margin:15px 0"
  149. :pagination='false'
  150. @change="retargetTableChange"
  151. :scroll="{ y: 250 }"
  152. :row-selection="rowSelectionMax"
  153. bordered
  154. >
  155. <template slot="name" slot-scope="name"> {{ name }} </template>
  156. <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
  157. </a-table>
  158. </a-tab-pane>
  159. </a-tabs>
  160. </div>
  161. </a-form>
  162. </el-collapse-item>
  163. </el-collapse>
  164. </a-modal>
  165. <a-modal
  166. title="推送历史"
  167. v-if="causeVisible"
  168. :visible="causeVisible"
  169. :confirm-loading="causeConfirmLoading"
  170. :footer="null"
  171. dialog-class="cause-modal"
  172. @cancel="handleCauseCancel"
  173. >
  174. <div>
  175. <div class="cause-modal-table-class">
  176. <a-select
  177. style="width:200px;margin-bottom:10px"
  178. v-model="resultHistory"
  179. placeholder="请选择"
  180. allow-clear
  181. >
  182. <a-select-option :value="2">不限</a-select-option>
  183. <a-select-option :value="1">推送成功</a-select-option>
  184. <a-select-option :value="0">推送失败</a-select-option>
  185. </a-select>
  186. <a-table :columns="causeColumns" :data-source="causeData" bordered :pagination="false">
  187. <span slot="action" slot-scope="text, record">
  188. <a-popconfirm
  189. title="是否重新推送?"
  190. ok-text="是"
  191. cancel-text="否"
  192. @confirm="handleAgian(record)"
  193. >
  194. <a :disabled="record.result==='推送成功'">重新推送</a>
  195. </a-popconfirm>
  196. </span>
  197. </a-table>
  198. </div>
  199. <a-pagination
  200. class="pagin-table-class"
  201. :total="totalAllCause"
  202. size="small"
  203. @change="handleCauseSizeChange"
  204. />
  205. </div>
  206. </a-modal>
  207. <a-modal
  208. :title="relaxStatus === 'unit' ? '相关组' : '相关账户'"
  209. v-if="relaxVisible"
  210. :visible="relaxVisible"
  211. :confirm-loading="relaxConfirmLoading"
  212. :footer="null"
  213. dialog-class="relax-modal"
  214. @cancel="handleRelaxCancel"
  215. rowKey="index"
  216. >
  217. <div v-if="relaxStatus === 'account'">
  218. <a-table :columns="acountColumns" :data-source="acountData" bordered :pagination="accountIpagination">
  219. <a @click="handleEditPerson(record)" slot="action" slot-scope="text,record">
  220. 编辑自定义人群
  221. </a>
  222. </a-table>
  223. </div>
  224. <div v-else>
  225. <AcountSearch :appId.sync="unitAccountId" :multiple="false" request="2,4" ref="treeSelect" style="margin-bottom:8px;width:300px " />
  226. <a-table :columns="depColumns" :data-source="acountData" bordered :pagination="accountIpagination">
  227. </a-table>
  228. </div>
  229. </a-modal>
  230. <a-modal
  231. :title="'编辑自定义人群(' + personName + ')'"
  232. :visible="personNameVisible"
  233. @ok="handleAddPopulation"
  234. dialog-class="relax-modal"
  235. @cancel="handleCancelPerson"
  236. :confirm-loading="personLoading"
  237. rowKey="index">
  238. <a-form
  239. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  240. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  241. >
  242. <a-form-item label="定向包名称">
  243. <a-input
  244. disabled
  245. :default-value="(personDetail ? personDetail.templateName : '-') "
  246. placeholder="请输入"
  247. />
  248. </a-form-item>
  249. <a-form-item label="账户名称">
  250. <a-input
  251. disabled
  252. :default-value="(personDetail ? personDetail.authName : '-') "
  253. placeholder="请输入"
  254. />
  255. </a-form-item>
  256. <a-form-item label="自定义人群">
  257. <a-radio-group v-model="people" buttonStyle="solid" @change="customCrowdChange">
  258. <a-radio-button value="0">不限</a-radio-button>
  259. <a-radio-button value="1">定向</a-radio-button>
  260. <a-radio-button value="2">排除</a-radio-button>
  261. <a-radio-button value="3">同时定向排除</a-radio-button>
  262. </a-radio-group>
  263. </a-form-item>
  264. <div class="dingxiang_paichu" v-if="people!='0'" style="width:100%">
  265. <a-tabs v-model="tabKey" @change="retargetTabChange" >
  266. <a-tab-pane key="1" tab="定向池" v-if="people!='2'">
  267. <a-table
  268. :columns="retargetColumns"
  269. :row-key="record => record.key"
  270. :data-source="retargetDataAll"
  271. :loading="loading"
  272. style="width:100%;margin:15px 0"
  273. :pagination='false'
  274. @change="retargetTableChange"
  275. :scroll="{ y: 250 }"
  276. :row-selection="rowSelection"
  277. bordered
  278. v-if="people!='0'"
  279. >
  280. <template slot="name" slot-scope="name"> {{ name }} </template>
  281. <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
  282. </a-table>
  283. </a-tab-pane>
  284. <a-tab-pane key="2" tab="排除池" v-if="people!='1'">
  285. <a-table
  286. :columns="retargetColumns"
  287. :row-key="record => record.key"
  288. :data-source="retargetDataAll"
  289. :loading="loading"
  290. style="width:100%;margin:15px 0"
  291. :pagination='false'
  292. @change="retargetTableChange"
  293. :scroll="{ y: 250 }"
  294. :row-selection="rowSelection2"
  295. bordered
  296. v-if="people!='1'"
  297. >
  298. <template slot="name" slot-scope="name"> {{ name }} </template>
  299. <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
  300. </a-table>
  301. </a-tab-pane>
  302. </a-tabs>
  303. </div>
  304. </a-form>
  305. </a-modal>
  306. <templateModal ref="templateModal" @getData="getTemplateList" />
  307. </div>
  308. </template>
  309. <script>
  310. import TreeSelect from './components/tree-select';
  311. import {getAction, postAction} from '@/api/manage';
  312. import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
  313. import AppMarketService from './directional-service';
  314. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue';
  315. import templateModal from './components/templateModal';
  316. import BMF from 'browser-md5-file';
  317. let retargetColumns=[
  318. {
  319. title: '人群包',
  320. dataIndex: 'name',
  321. sorter: true,
  322. width: '40%',
  323. scopedSlots: { customRender: 'name' },
  324. },
  325. {
  326. title: '属性',
  327. dataIndex: 'populationType',
  328. scopedSlots: {
  329. customRender: 'populationType'
  330. },
  331. width: 200
  332. },
  333. {
  334. title: '所属账号',
  335. dataIndex: 'accountId',
  336. sorter: true,
  337. width: '40%',
  338. scopedSlots: { customRender: 'accountId' },
  339. },
  340. ]
  341. let COS = require('cos-js-sdk-v5');
  342. let cos = new COS({
  343. SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
  344. SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
  345. });
  346. export default {
  347. name: 'directional',
  348. components: {
  349. TreeSelect,
  350. AcountSearch,
  351. selectTable,
  352. templateModal
  353. },
  354. data() {
  355. let that = this;
  356. return {
  357. //自定义人群参数
  358. personLoading: false,
  359. retargetColumns,
  360. retargetData: [],
  361. retargetDataAll: [],
  362. loading: false,
  363. customCrowd: 'NONE',//自定义人群 选择的值
  364. selectedRowKeys: [],
  365. incluedSelectedRowKeys: [],
  366. incluedSelectedKeys: [],
  367. excludeSelectedKeys: [],
  368. excludeSelectedRowKeys: [],
  369. //自定义人群参数结束
  370. resultHistory: 2,
  371. unitAccountId: "",
  372. activeKey: "",
  373. setPersonVisible: false,
  374. setPersonLoading: false,
  375. tabKey:'1',
  376. people: '0',
  377. peopleList: [],
  378. dataElse: [],
  379. personName: "",
  380. personNameVisible: false,
  381. personDetail: null,
  382. dataLoading: false,
  383. personResourceDisabled: false,
  384. personNameDisabled: false,
  385. totalAllCause: 0,
  386. projectId: undefined, // 搜索的账户ID
  387. uploadAcountIds: '',
  388. totalAll: 10,
  389. finallyRightTree: [],
  390. fileList: [],
  391. relaxVisible: false,
  392. relaxConfirmLoading: false,
  393. pushVisible: false,
  394. pushConfirmLoading: false,
  395. causeVisible: false,
  396. causeConfirmLoading: false,
  397. labelCol: {span: 4},
  398. wrapperCol: {span: 14},
  399. confirmLoading: false,
  400. mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
  401. populationTypeTasks: AppMarketService.setPopulationTypeTasks(), // 人群包类型
  402. platform: AppMarketService.setPlatform(), // 状态枚举
  403. relaxStatus: '',
  404. relaxData: null,
  405. causeData: [], // 原因的table列表数据,
  406. depData: [], // 相关项目的table列表数据,
  407. acountData: [], // 相关账户的table列表数据,
  408. acountColumns: AppMarketService.setAcountColumns(), // 相关账户的table列表
  409. depColumns: AppMarketService.setDepColumns(), // 相关项目的table列表
  410. causeColumns: AppMarketService.setCauseColumns(), // 原因的table列表
  411. dataSource: [],
  412. ipagination: {
  413. current: 1,
  414. pageSize: 10,
  415. // pageSizeOptions: ['10', '20', '30'],
  416. showTotal: (total, range) => {
  417. return range[0] + "-" + range[1] + " 共" + total + "条"
  418. },
  419. showQuickJumper: true,
  420. showSizeChanger:false,
  421. pageSizeOptions: ['10', '30', '50'],
  422. total: 0,
  423. onChange: (current, pageSize) => {
  424. // 切换分页时的回调,
  425. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  426. this.ipagination.current = current;
  427. this.ipagination.pageSize= pageSize;
  428. this.handleGetTableList({})
  429. }
  430. },
  431. accountIpagination: {
  432. current: 1,
  433. pageSize: 10,
  434. // pageSizeOptions: ['10', '20', '30'],
  435. showTotal: (total, range) => {
  436. return range[0] + "-" + range[1] + " 共" + total + "条"
  437. },
  438. showQuickJumper: true,
  439. showSizeChanger:false,
  440. pageSizeOptions: ['10', '30', '50'],
  441. total: 0,
  442. onChange: (current, pageSize) => {
  443. // 切换分页时的回调,
  444. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  445. this.accountIpagination.current = current;
  446. this.accountIpagination.pageSize= pageSize;
  447. this.handleAcountRelax(this.relaxStatus ,this.relaxData)
  448. }
  449. },
  450. columns: [
  451. {
  452. title: '定向包名称',
  453. align: 'center',
  454. width: 200,
  455. ellipsis: true,
  456. dataIndex: 'templateName'
  457. },
  458. {
  459. title: '所属项目',
  460. align: 'center',
  461. dataIndex: 'projectName',
  462. customRender(t) {
  463. if(t) {
  464. return t
  465. }
  466. else {
  467. return '-'
  468. }
  469. }
  470. },
  471. {
  472. title: '系统平台',
  473. align: 'center',
  474. dataIndex: 'platformOs'
  475. },
  476. {
  477. title: '修改时间',
  478. dataIndex: 'updateTime',
  479. align: 'center'
  480. },
  481. {
  482. title: '相关账户',
  483. dataIndex: 'accountCount',
  484. scopedSlots: {customRender: 'accountCount'},
  485. align: 'center'
  486. },
  487. {
  488. title: '相关组',
  489. dataIndex: 'unitCount',
  490. scopedSlots: {customRender: 'unitCount'},
  491. align: 'center'
  492. },
  493. {
  494. title: '操作',
  495. dataIndex: 'action',
  496. align: 'center',
  497. scopedSlots: {customRender: 'action'}
  498. },
  499. {
  500. title: '更多',
  501. dataIndex: 'actionMore',
  502. align: 'center',
  503. scopedSlots: {customRender: 'actionMore'},
  504. ellipsis: true
  505. },
  506. ],
  507. personRules: AppMarketService.setPersonRules(), // 上传人群包表单校验规则
  508. tablePag: {
  509. page: 1,
  510. size: 10
  511. },
  512. // table 原因的分页
  513. causePag: {
  514. page: 1,
  515. size: 10
  516. },
  517. tableSelectList: {},
  518. acountRelaxDetail: {},
  519. causeDetailData: {},
  520. editPerson: null,
  521. };
  522. },
  523. watch: {
  524. unitAccountId: function(n,o) {
  525. if(this.relaxVisible){
  526. this.handleAcountRelax(this.relaxStatus ,this.relaxData)
  527. }
  528. },
  529. resultHistory: function(n,o) {
  530. this.handleCauseTableData(this.tableSelectList.id);
  531. },
  532. },
  533. computed: {
  534. hasSelected() {
  535. return this.selectedRowKeys.length > 0;
  536. },
  537. rowSelection() {
  538. return {
  539. onChange: (selectedRowKeys, selectedRows) => {
  540. this.incluedSelectedRowKeys = selectedRowKeys;
  541. this.incluedSelectedKeys = selectedRows
  542. },
  543. selectedRowKeys: this.incluedSelectedRowKeys,
  544. getCheckboxProps: record => ({
  545. props: {
  546. disabled: this.excludeSelectedRowKeys?this.excludeSelectedRowKeys.indexOf(record.key)>-1:undefined,
  547. name: record.name,
  548. defaultChecked:this.incluedSelectedRowKeys?this.incluedSelectedRowKeys.indexOf(record.key)>-1:undefined,
  549. },
  550. }),
  551. };
  552. },
  553. rowSelection2() {
  554. return {
  555. onChange: (selectedRowKeys, selectedRows) => {
  556. this.excludeSelectedRowKeys = selectedRowKeys;
  557. this.excludeSelectedKeys = selectedRows;
  558. },
  559. selectedRowKeys: this.excludeSelectedRowKeys,
  560. getCheckboxProps: record => ({
  561. props: {
  562. disabled: this.incluedSelectedRowKeys?this.incluedSelectedRowKeys.indexOf(record.key)>-1:undefined,
  563. name: record.name,
  564. defaultChecked:this.excludeSelectedRowKeys?this.excludeSelectedRowKeys.indexOf(record.key)>-1:undefined
  565. },
  566. }),
  567. };
  568. },
  569. rowSelectionMin() {
  570. return {
  571. onChange: (selectedRowKeys, selectedRows) => {
  572. let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
  573. this.finallyRightTree[index].incluedSelectedRowKeys = selectedRowKeys;
  574. this.finallyRightTree[index].incluedSelectedKeys = selectedRows;
  575. },
  576. selectedRowKeys:this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].incluedSelectedRowKeys,
  577. getCheckboxProps: record => ({
  578. props: {
  579. disabled: this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].excludeSelectedRowKeys.indexOf(record.key)>-1,
  580. name: record.name,
  581. defaultChecked:this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].incluedSelectedRowKeys.indexOf(record.key)>-1
  582. },
  583. }),
  584. };
  585. },
  586. rowSelectionMax() {
  587. return {
  588. onChange: (selectedRowKeys, selectedRows) => {
  589. let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
  590. this.finallyRightTree[index].excludeSelectedRowKeys = selectedRowKeys;
  591. this.finallyRightTree[index].excludeSelectedKeys = selectedRows;
  592. },
  593. selectedRowKeys:this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].excludeSelectedRowKeys,
  594. getCheckboxProps: record => ({
  595. props: {
  596. disabled: this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].incluedSelectedRowKeys.indexOf(record.key)>-1,
  597. name: record.name,
  598. defaultChecked:this.finallyRightTree[this.finallyRightTree.findIndex(item => item.key === this.activeKey)].excludeSelectedRowKeys.indexOf(record.key)>-1
  599. },
  600. }),
  601. };
  602. },
  603. },
  604. created() {
  605. this.form = this.$form.createForm(this);
  606. },
  607. mounted() {
  608. this.handleGetTableList({});
  609. },
  610. methods: {
  611. onSelectExcludePerson(selectedRowKeys, selectedRows) {
  612. let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
  613. this.finallyRightTree[index].incluedSelectedRowKeys = selectedRowKeys;
  614. this.finallyRightTree[index].incluedSelectedKeys = selectedRows;
  615. },
  616. onSelectPerson(selectedRowKeys, selectedRows) {
  617. let index = this.finallyRightTree.findIndex(item => item.key === this.activeKey);
  618. this.finallyRightTree[index].excludeSelectedRowKeys = selectedRowKeys;
  619. this.finallyRightTree[index].excludeSelectedKeys = selectedRows;
  620. },
  621. // 自定义人群的改变
  622. retargetTableChange(pagination, filters, sorter){
  623. // //console.log(pagination);
  624. },
  625. checkPerson(item) {
  626. if(item.people === '1' || item.people === '2'){
  627. this.retargetAccountId(item.key);
  628. item.tabKey = item.people
  629. }
  630. else if(item.people === '3'){
  631. this.retargetAccountId(item.key);
  632. item.tabKey='1'
  633. }
  634. this.$nextTick(() => {
  635. item.incluedSelectedRowKeys = [];
  636. item.incluedSelectedKeys = [];
  637. item.excludeSelectedKeys = [];
  638. item.excludeSelectedRowKeys = [];
  639. })
  640. },
  641. // 自定义人群的--同时定向排除tab切换事件
  642. retargetAccountId(accountId){
  643. //console.log()
  644. this.retargetDataAll=[];
  645. this.loading=true;
  646. getAction('/kuaishou/batch/getPopulationList',{
  647. accountId:accountId
  648. }).then((res)=>{
  649. // //console.log(res)
  650. this.loading=false;
  651. if(res.success){
  652. res.result.forEach((ele)=>{
  653. ele.key=ele.orientationId;
  654. ele.id= ele.orientationId;
  655. ele.name=ele.orientationName+"("+ele.orientationId+")";
  656. // ele.accountName=this.accountInfo.title
  657. ele.accountId=accountId;
  658. })
  659. // this.retargetData=res.data;
  660. this.retargetDataAll=[...this.retargetDataAll,...res.result];
  661. }
  662. })
  663. },
  664. customCrowdChange(e){
  665. //console.log(e);
  666. this.incluedSelectedRowKeys = [];
  667. this.incluedSelectedKeys = [];
  668. this.excludeSelectedKeys = [];
  669. this.excludeSelectedRowKeys = [];
  670. if(e.target.value=='1' || e.target.value=='2'){
  671. this.retargetTabChange();
  672. this.tabKey=e.target.value
  673. }else if(e.target.value=='3'){
  674. this.retargetTabChange();
  675. this.tabKey = '1';
  676. }
  677. this.$forceUpdate()
  678. },
  679. // 自定义人群的--同时定向排除tab切换事件
  680. retargetTabChange(){
  681. //console.log()
  682. this.retargetDataAll=[];
  683. this.loading=true;
  684. getAction('/kuaishou/batch/getPopulationList',{
  685. accountId:this.personDetail.accountId
  686. }).then((res)=>{
  687. // //console.log(res)
  688. this.loading=false;
  689. if(res.success){
  690. res.result.forEach((ele)=>{
  691. ele.key=ele.orientationId
  692. ele.id= ele.orientationId
  693. ele.name=ele.orientationName+"("+ele.orientationId+")"
  694. // ele.accountName=this.accountInfo.title
  695. ele.accountId=this.personDetail.accountId
  696. })
  697. // this.retargetData=res.data;
  698. this.retargetDataAll=[...this.retargetDataAll,...res.result];
  699. }
  700. })
  701. },
  702. getPeople() {
  703. var data = ''
  704. return new Promise((resolve, reject) => {
  705. getAction('/kuaishou/batch/getPopulationList', { accountId: this.personDetail.accountId }).then((res) => {
  706. if (res.success) {
  707. if (res.result) {
  708. this.peopleList = res.result.map((item, index) => {
  709. return {
  710. ...item,
  711. key: index,
  712. }
  713. })
  714. this.dataElse = this.peopleList
  715. resolve(res.result)
  716. }
  717. }
  718. })
  719. })
  720. },
  721. handleCancelPerson() {
  722. this.personNameVisible = false;
  723. },
  724. handleEditPerson(val) {
  725. this.personNameVisible = true;
  726. this.relaxVisible = false;
  727. this.personDetail = val;
  728. this.personName = val.authName;
  729. let params = {};
  730. params.accountId = val.accountId;
  731. params.templateId = val.templateId;
  732. this.retargetTabChange()
  733. getAction('/kuaishouDirectionalPackage/queryPopulationById' ,params).then(res => {
  734. if(res.success) {
  735. this.retargetAccountId(val.accountId);
  736. this.editPerson = res.result;
  737. if(res.result.population&&res.result.excludePopulation){
  738. this.people = '3';
  739. }
  740. else if(res.result.population && !res.result.excludePopulation){
  741. this.people = '1';
  742. }
  743. else if(!res.result.population&&!res.result.excludePopulation){
  744. this.people = '0';
  745. }
  746. else{
  747. this.people = '2';
  748. }
  749. this.incluedSelectedRowKeys = res.result.population ? res.result.population : [];
  750. this.excludeSelectedRowKeys = res.result.excludePopulation ? res.result.excludePopulation : [];
  751. }
  752. })
  753. },
  754. handleAddPopulation() {
  755. this.personLoading = true;
  756. let params = {};
  757. params.id = this.personDetail.id;
  758. params.accountId = this.personDetail.accountId;
  759. params.templateId = this.personDetail.templateId;
  760. params.templateName = this.personDetail.templateName;
  761. if(this.people == '0') {
  762. params.population = [];
  763. params.excludePopulation = [];
  764. }
  765. else if(this.people == '1') {
  766. params.population = this.incluedSelectedRowKeys;
  767. params.excludePopulation = [];
  768. }
  769. else if(this.people == '2') {
  770. params.excludePopulation = this.excludeSelectedRowKeys;
  771. params.population = [];
  772. }
  773. else {
  774. if(this.incluedSelectedRowKeys.length === 0 || this.excludeSelectedRowKeys.length === 0){
  775. this.$message.error("同时定向排除需要定向池与排除池都选择");
  776. this.personLoading = false;
  777. return
  778. }
  779. params.population = this.incluedSelectedRowKeys;
  780. params.excludePopulation = this.excludeSelectedRowKeys;
  781. }
  782. postAction('/kuaishouDirectionalPackage/editPopulation', params).then(res => {
  783. if(res.success) {
  784. this.personLoading = false;
  785. this.$message.success('人群包修改成功');
  786. this.handleCancelPerson()
  787. }
  788. else {
  789. this.personLoading = false;
  790. this.$message.error(res.message);
  791. }
  792. }).catch(error => {
  793. })
  794. },
  795. getTemplateList() {
  796. this.form.resetFields();
  797. this.projectId = undefined;
  798. this.handleGetTableList({});
  799. },
  800. addNewTemplate(accountId) {
  801. this.$refs.templateModal.create(null, 'add')
  802. },
  803. handleCauseSizeChange(current, pageSize) {
  804. this.causePag = {
  805. page: current,
  806. size: pageSize
  807. };
  808. this.handleCauseTableData();
  809. },
  810. handleGetTableList(data) {
  811. const paramsData = {
  812. templateName: data.name,
  813. projectId: this.projectId,
  814. platformOs: data.status,
  815. pageNo: this.ipagination.current,
  816. pageSize: this.ipagination.pageSize
  817. };
  818. this.dataSource = []
  819. this.dataLoading = true;
  820. getAction('/kuaishouDirectionalPackage/queryList', paramsData).then(result => {
  821. this.dataLoading = false;
  822. if (result.code === 200) {
  823. this.dataSource = result.result.list || [];
  824. this.ipagination.total = result.result.total || 0;
  825. }
  826. else {
  827. this.$message.error(result.message);
  828. }
  829. }).catch(error => {
  830. this.dataLoading = false;
  831. console.log(error, 'eeee');
  832. });
  833. },
  834. handleDelete(data) {
  835. let that = this
  836. this.$confirm({
  837. title: '删除提示',
  838. content: '是否删除该定向包?',
  839. onOk() {
  840. getAction('/kuaishouDirectionalPackage/delete', {id: data.id}).then(result => {
  841. if (result.code === 200) {
  842. that.handleGetTableList({});
  843. that.$message.success('删除成功');
  844. }
  845. else {
  846. that.$message.error(result.message);
  847. }
  848. }).catch(error => {
  849. console.log(error, 'eeee');
  850. });
  851. }
  852. });
  853. },
  854. handleAcountRelax(txt, recd) {
  855. this.relaxStatus = txt;
  856. this.relaxData = recd;
  857. this.relaxVisible = true;
  858. let params = {};
  859. params.id = recd.id;
  860. params.type = txt === 'unit' ? 2 : 1;
  861. params.pageNo = this.accountIpagination.current;
  862. params.pageSize = this.accountIpagination.pageSize;
  863. if(txt === 'unit') {
  864. params.accountId = this.unitAccountId;
  865. }
  866. // acountData
  867. getAction('/kuaishouDirectionalPackage/getRelatedAccountGroup', params).then( res => {
  868. if(res.success) {
  869. this.acountData = res.result.list;
  870. this.accountIpagination.total = res.result.total;
  871. }
  872. })
  873. },
  874. handleRelaxCancel() {
  875. this.unitAccountId = ''
  876. this.relaxVisible = false;
  877. },
  878. handleCause(list) {
  879. this.causeVisible = true;
  880. this.handleCauseTableData(list.id);
  881. this.tableSelectList = list;
  882. },
  883. handleCauseTableData(id) {
  884. const paramsData = {
  885. id: id,
  886. pageNo: this.causePag.page,
  887. pageSize: this.causePag.size,
  888. status: this.resultHistory !== 2 ? this.resultHistory : null
  889. };
  890. postAction('/kuaishouDirectionalPackage/queryPushResults', paramsData).then(result => {
  891. if (result.code === 200) {
  892. this.causeData = result.result.list || [];
  893. this.totalAllCause = result.result.total || 0;
  894. }
  895. else {
  896. this.$message.error(result.message);
  897. }
  898. }).catch(error => {
  899. console.log(error, 'eeee');
  900. });
  901. },
  902. handleApplyType(list) {
  903. if(list.length > 0) {
  904. this.finallyRightTree = list.map(item => {
  905. return {
  906. ...item,
  907. incluedSelectedRowKeys: [],
  908. incluedSelectedKeys: [],
  909. excludeSelectedKeys: [],
  910. excludeSelectedRowKeys: [],
  911. people: '0',
  912. tabKey: '1'
  913. }
  914. });
  915. }
  916. else {
  917. this.finallyRightTree = []
  918. }
  919. },
  920. handleEdit(val) {
  921. this.$refs.templateModal.handleOk(val, 'edit')
  922. },
  923. handlePush(val) {
  924. this.finallyRightTree = [];
  925. this.tableSelectList = val;
  926. this.pushVisible = true;
  927. },
  928. handleCauseCancel() {
  929. this.resultHistory = 2;
  930. this.causeVisible = false;
  931. },
  932. handleAgian(val) {
  933. this.finallyRightTree = [];
  934. this.finallyRightTree.push({
  935. key: val.accountId,
  936. title: val.authName,
  937. incluedSelectedRowKeys: [],
  938. incluedSelectedKeys: [],
  939. excludeSelectedKeys: [],
  940. excludeSelectedRowKeys: [],
  941. people: '0',
  942. tabKey: '1'
  943. });
  944. this.causeVisible = false;
  945. this.resultHistory = 2;
  946. this.handlePushSure();
  947. },
  948. handleSetPerson() {
  949. this.setPersonLoading = true;
  950. // this.finallyRightTree
  951. let params = {};
  952. params.id = this.tableSelectList.id;
  953. params.datas = this.finallyRightTree.map(item => {
  954. return {
  955. accountId: item.key,
  956. population: item.people === '0' ? []: item.people === '1' || item.people === '3' ? item.incluedSelectedRowKeys : [],
  957. excludePopulation: item.people === '0' ? []: item.people === '2' || item.people === '3' ? item.excludeSelectedRowKeys : [],
  958. }
  959. })
  960. postAction('/kuaishouDirectionalPackage/pushDirectionalPackage' ,params).then(res => {
  961. this.setPersonLoading = false;
  962. if(res.success) {
  963. this.$message.success('推送中,请稍候')
  964. this.handlePersonCancel()
  965. }
  966. else {
  967. this.$message.error(res.result)
  968. }
  969. }).catch(error => {
  970. })
  971. },
  972. handlePersonCancel() {
  973. this.setPersonVisible = false;
  974. },
  975. handlePushSure() {
  976. if(this.finallyRightTree.length > 0) {
  977. this.pushVisible = false;
  978. this.setPersonVisible = true;
  979. this.activeKey = this.finallyRightTree[0].key
  980. }
  981. else {
  982. this.$message.error("请选择要分享的账户")
  983. }
  984. },
  985. handlePushCancel() {
  986. this.pushVisible = false;
  987. },
  988. beforeUpload(file) {
  989. this.cosUpload(file);
  990. },
  991. handleChange(info) {
  992. this.fileList = info.fileList;
  993. },
  994. handleQueryList(event) {
  995. this.ipagination.current = 1;
  996. event.preventDefault();
  997. const paramsData = this.form.getFieldsValue();
  998. this.handleGetTableList(paramsData);
  999. },
  1000. handleResetForm() {
  1001. this.ipagination.current = 1;
  1002. this.form.resetFields();
  1003. this.projectId = undefined;
  1004. this.handleGetTableList({});
  1005. this.$refs.selectTable.keyValue = "";
  1006. this.$refs.selectTable.getData()
  1007. },
  1008. }
  1009. };
  1010. </script>
  1011. <style lang="less" scoped>
  1012. @import "directional";
  1013. </style>