create.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. <template>
  2. <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
  3. <a-form :form="form">
  4. <a-form-item
  5. label="地域"
  6. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  7. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  8. <a-radio-group v-model="area" :defaultValue="0">
  9. <a-radio-button value="0">不限</a-radio-button>
  10. <a-radio-button value="按省市">按省市</a-radio-button>
  11. <a-radio-button value="按区县">按区县</a-radio-button>
  12. <a-radio-button value="按商圈">按商圈</a-radio-button>
  13. </a-radio-group>
  14. </a-form-item>
  15. <a-form-item
  16. label="按区县"
  17. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  18. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  19. <a-tree-select
  20. showSearch
  21. style="width: 300px"
  22. :value="value"
  23. :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
  24. placeholder='Please select'
  25. allowClear
  26. multiple
  27. treeDefaultExpandAll
  28. @change="onChange"
  29. @search="onSearch"
  30. @select="onSelect"
  31. >
  32. <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
  33. <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
  34. <a-tree-select-node value='leaf1' title='my leaf' key='random'/>
  35. <a-tree-select-node value='leaf2' title='your leaf' key='random1'/>
  36. </a-tree-select-node>
  37. <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
  38. <a-tree-select-node value='sss' key='random3'>
  39. <b style="color: #08c" slot="title">sss</b>
  40. </a-tree-select-node>
  41. </a-tree-select-node>
  42. </a-tree-select-node>
  43. </a-tree-select>
  44. </a-form-item>
  45. <a-form-item
  46. label="性别"
  47. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  48. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  49. <a-radio-group v-model="gender">
  50. <a-radio-button v-for="sex in toutiaoSex" :key="sex.itemValue" :value="sex.itemValue">{{sex.description}}
  51. </a-radio-button>
  52. </a-radio-group>
  53. </a-form-item>
  54. <a-form-item
  55. label="年龄"
  56. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  57. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  58. <a-checkbox value="">不限</a-checkbox>
  59. <a-checkbox-group v-model="ageRange">
  60. <a-checkbox v-for="age in toutiaoAgeRange" :key="age.itemValue" :value="age.itemValue">{{age.description}}
  61. </a-checkbox>
  62. </a-checkbox-group>
  63. </a-form-item>
  64. <a-form-item
  65. label="自定义人群"
  66. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  67. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  68. <a-radio-group v-model="zdyrq">
  69. <a-radio-button value="as">不限</a-radio-button>
  70. <a-radio-button value="sd">自定义人群</a-radio-button>
  71. </a-radio-group>
  72. </a-form-item>
  73. <a-form-item
  74. label="定向逻辑"
  75. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  76. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  77. <a-tabs defaultActiveKey="1">
  78. <a-tab-pane tab="定向" key="1">
  79. <a-table
  80. ref="table2"
  81. bordered
  82. size="middle"
  83. rowKey="id"
  84. :columns="columns2"
  85. :dataSource="dataSource2"
  86. :pagination="ipagination2"
  87. :loading="loading2"
  88. :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
  89. @change="handleTableChange2">
  90. <span slot="action" slot-scope="text, record"></span>
  91. </a-table>
  92. </a-tab-pane>
  93. <a-tab-pane tab="排除" key="2" forceRender>
  94. <a-table
  95. ref="table2"
  96. bordered
  97. size="middle"
  98. rowKey="id"
  99. :columns="columns2"
  100. :dataSource="dataSource2"
  101. :pagination="ipagination2"
  102. :loading="loading2"
  103. :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
  104. @change="handleTableChange2">
  105. <span slot="action" slot-scope="text, record"></span>
  106. </a-table>
  107. </a-tab-pane>
  108. <a-tab-pane tab="同时定向排除" key="3">
  109. <a-tabs defaultActiveKey="1">
  110. <a-tab-pane tab="定向" key="1">
  111. <a-table
  112. ref="table2"
  113. bordered
  114. size="middle"
  115. rowKey="id"
  116. :columns="columns2"
  117. :dataSource="dataSource2"
  118. :pagination="ipagination2"
  119. :loading="loading2"
  120. :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
  121. @change="handleTableChange2">
  122. <span slot="action" slot-scope="text, record"></span>
  123. </a-table>
  124. </a-tab-pane>
  125. <a-tab-pane tab="排除" key="2" forceRender>
  126. <a-table
  127. ref="table2"
  128. bordered
  129. size="middle"
  130. rowKey="id"
  131. :columns="columns2"
  132. :dataSource="dataSource2"
  133. :pagination="ipagination2"
  134. :loading="loading2"
  135. :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
  136. @change="handleTableChange2">
  137. <span slot="action" slot-scope="text, record">
  138. </span>
  139. </a-table>
  140. </a-tab-pane>
  141. </a-tabs>
  142. </a-tab-pane>
  143. </a-tabs>
  144. </a-form-item>
  145. <a-form-item
  146. label="兴趣定向"
  147. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  148. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  149. <a-radio-group>
  150. <a-radio-button value="as">不限</a-radio-button>
  151. <a-radio-button value="sd">系统推荐</a-radio-button>
  152. <a-radio-button value="zdy">自定义</a-radio-button>
  153. </a-radio-group>
  154. </a-form-item>
  155. <a-form-item
  156. label="兴趣分类"
  157. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  158. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  159. <a-tree-select
  160. showSearch
  161. style="width: 300px"
  162. :value="value"
  163. :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
  164. placeholder='Please select'
  165. allowClear
  166. multiple
  167. treeDefaultExpandAll
  168. @change="onChange"
  169. @search="onSearch"
  170. @select="onSelect"
  171. >
  172. <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
  173. <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
  174. <a-tree-select-node value='leaf1' title='my leaf' key='random'/>
  175. <a-tree-select-node value='leaf2' title='your leaf' key='random1'/>
  176. </a-tree-select-node>
  177. <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
  178. <a-tree-select-node value='sss' key='random3'>
  179. <b style="color: #08c" slot="title">sss</b>
  180. </a-tree-select-node>
  181. </a-tree-select-node>
  182. </a-tree-select-node>
  183. </a-tree-select>
  184. </a-form-item>
  185. <a-form-item
  186. label="精选流量包"
  187. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  188. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  189. <a-radio-group>
  190. <a-radio-button value="llb_bx">不限</a-radio-button>
  191. <a-radio-button value="rjjx">应用软件精选</a-radio-button>
  192. <a-radio-button value="yxjx">游戏精选</a-radio-button>
  193. </a-radio-group>
  194. </a-form-item>
  195. <a-form-item
  196. label="平台"
  197. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  198. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  199. <a-radio-group>
  200. <a-radio-button value="as">不限</a-radio-button>
  201. <a-radio-button value="sd">IOS</a-radio-button>
  202. <a-radio-button value="sd">Android</a-radio-button>
  203. </a-radio-group>
  204. </a-form-item>
  205. <a-form-item
  206. label="网络"
  207. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  208. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  209. <a-checkbox-group v-model="ageRange">
  210. <a-checkbox value="">不限</a-checkbox>
  211. <a-checkbox v-for="netType in toutiaoNetType" :key="netType.itemValue" :value="netType.itemValue">
  212. {{netType.description}}
  213. </a-checkbox>
  214. </a-checkbox-group>
  215. </a-form-item>
  216. <a-form-item
  217. label="app行为"
  218. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  219. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  220. <a-radio-group>
  221. <a-radio-button value="as">不限</a-radio-button>
  222. <a-radio-button value="sd">按分类</a-radio-button>
  223. <a-radio-button value="sd">按app</a-radio-button>
  224. </a-radio-group>
  225. </a-form-item>
  226. <a-form-item
  227. label="文章分类"
  228. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  229. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  230. <a-radio-group v-model="isArticleCategory" @change="changeArticleCategoryType">
  231. <a-radio-button value="unlimit_category">不限</a-radio-button>
  232. <a-radio-button value="category">文章分类</a-radio-button>
  233. </a-radio-group>
  234. <br>
  235. <a-select
  236. mode="tags"
  237. placeholder="选择文章分类"
  238. style="width: 600px"
  239. @change="onChange"
  240. v-if="showArticleCategory"
  241. >
  242. <a-select-option v-for="articleCategory in articleCategoryList" :key="articleCategory.itemValue"
  243. :value="articleCategory.itemValue">{{articleCategory.itemText}}
  244. </a-select-option>
  245. </a-select>
  246. </a-form-item>
  247. <a-form-item
  248. label="手机品牌"
  249. :labelCol="{lg: {span: 7}, sm: {span: 7}}"
  250. :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
  251. <a-radio-group @change="changeMobileBrandType" v-model="isMobileBrand">
  252. <a-radio-button value="unlimit_brand">不限</a-radio-button>
  253. <a-radio-button value="brand">按品牌</a-radio-button>
  254. </a-radio-group>
  255. <br>
  256. <a-select
  257. mode="tags"
  258. placeholder="选择手机品牌"
  259. style="width: 600px"
  260. @change="onChange"
  261. v-if="showMobileBrand"
  262. >
  263. <a-select-option v-for="mobileBrand in mobileBrandList" :key="mobileBrand.itemValue"
  264. :value="mobileBrand.itemValue">{{mobileBrand.itemText}}
  265. </a-select-option>
  266. </a-select>
  267. </a-form-item>
  268. <a-form-item
  269. :wrapperCol="{ span: 24 }"
  270. style="text-align: center"
  271. >
  272. <a-button htmlType="submit" type="primary">提交</a-button>
  273. <a-button style="margin-left: 8px">保存</a-button>
  274. </a-form-item>
  275. </a-form>
  276. </a-card>
  277. </template>
  278. <script>
  279. import {deleteAction, postAction, getAction} from '@/api/manage'
  280. export default {
  281. data() {
  282. return {
  283. form: this.$form.createForm(this),
  284. gender: {},
  285. toutiaoSex: {},
  286. ageRange: [],
  287. toutiaoAgeRange: {},
  288. toutiaoNetType: {},
  289. isMobileBrand: '',
  290. showMobileBrand: false,
  291. mobileBrandList: {},
  292. showArticleCategory: false,
  293. articleCategoryList: [],
  294. isArticleCategory: {},
  295. zdyrq: [],
  296. area: [],
  297. value: undefined,
  298. model1: {},
  299. model2: {},
  300. currentRoleId: '',
  301. queryParam1: {},
  302. queryParam2: {},
  303. dataSource1: [],
  304. dataSource2: [],
  305. ipagination1: {
  306. current: 1,
  307. pageSize: 10,
  308. pageSizeOptions: ['10', '20', '30'],
  309. showTotal: (total, range) => {
  310. return range[0] + '-' + range[1] + ' 共' + total + '条'
  311. },
  312. showQuickJumper: true,
  313. showSizeChanger: true,
  314. total: 0
  315. },
  316. ipagination2: {
  317. current: 1,
  318. pageSize: 10,
  319. pageSizeOptions: ['10', '20', '30'],
  320. showTotal: (total, range) => {
  321. return range[0] + '-' + range[1] + ' 共' + total + '条'
  322. },
  323. showQuickJumper: true,
  324. showSizeChanger: true,
  325. total: 0
  326. },
  327. isorter1: {
  328. column: 'createTime',
  329. order: 'desc'
  330. },
  331. isorter2: {
  332. column: 'createTime',
  333. order: 'desc'
  334. },
  335. filters1: {},
  336. filters2: {},
  337. loading1: false,
  338. loading2: false,
  339. selectedRowKeys1: [],
  340. selectedRowKeys2: [],
  341. selectionRows1: [],
  342. selectionRows2: [],
  343. columns2: [{
  344. title: '人群',
  345. align: 'center',
  346. dataIndex: 'username',
  347. width: 120
  348. },
  349. {
  350. title: '属性',
  351. align: 'center',
  352. width: 100,
  353. dataIndex: 'realname'
  354. },
  355. {
  356. title: '创建时间',
  357. align: 'center',
  358. width: 80,
  359. dataIndex: 'status_dictText'
  360. }],
  361. url: {
  362. dictListUrl: 'toutiao/dictitem/list'
  363. }
  364. }
  365. },
  366. methods: {
  367. onSelectChange2(selectedRowKeys, selectionRows) {
  368. this.selectedRowKeys2 = selectedRowKeys
  369. this.selectionRows2 = selectionRows
  370. },
  371. onClearSelected2() {
  372. this.selectedRowKeys2 = []
  373. this.selectionRows2 = []
  374. },
  375. onChange(value) {
  376. console.log(value)
  377. this.value = value
  378. },
  379. changeMobileBrandType(value) {
  380. console.log(this.isMobileBrand);
  381. if (this.isMobileBrand == 'brand') {
  382. this.showMobileBrand = true;
  383. } else {
  384. this.showMobileBrand = false;
  385. }
  386. },
  387. changeArticleCategoryType(value) {
  388. console.log(this.isMobileBrand);
  389. if (this.isArticleCategory == 'category') {
  390. this.showArticleCategory = true;
  391. } else {
  392. this.showArticleCategory = false;
  393. }
  394. },
  395. onSearch() {
  396. console.log(...arguments)
  397. },
  398. onSelect() {
  399. console.log(...arguments)
  400. },
  401. loadData2(arg) {
  402. if (!this.url.list2) {
  403. this.$message.error('请设置url.list2属性!')
  404. return
  405. }
  406. //加载数据 若传入参数1则加载第一页的内容
  407. if (arg === 1) {
  408. this.ipagination2.current = 1
  409. }
  410. if (this.currentRoleId === '') return
  411. let params = this.getQueryParams2()//查询条件
  412. params.roleId = this.currentRoleId
  413. this.loading2 = true
  414. getAction(this.url.list2, params).then((res) => {
  415. if (res.success) {
  416. this.dataSource2 = res.result.records
  417. this.ipagination2.total = res.result.total
  418. }
  419. this.loading2 = false
  420. })
  421. },
  422. handleTableChange2(pagination, filters, sorter) {
  423. if (Object.keys(sorter).length > 0) {
  424. this.isorter2.column = sorter.field
  425. this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
  426. }
  427. this.ipagination2 = pagination
  428. this.loadData2()
  429. }
  430. },
  431. created: function () {
  432. let params = {};
  433. params.dictId = '2f7d1020ae8c4a1f8af66087d9319139';
  434. params.pageSize = '1000';
  435. getAction(this.url.dictListUrl, params).then((res) => {
  436. if (res.success) {
  437. this.toutiaoSex = res.result.records
  438. }
  439. });
  440. params = {};
  441. params.dictId = '2b7fe41318c0f0fb4ae5a3cf5269ab04';
  442. params.pageSize = '1000';
  443. getAction(this.url.dictListUrl, params).then((res) => {
  444. if (res.success) {
  445. this.toutiaoAgeRange = res.result.records
  446. }
  447. });
  448. params = {};
  449. params.dictId = 'c6c75514b5fa17b25dde56d8e7bbc4e9';
  450. params.pageSize = '1000';
  451. getAction(this.url.dictListUrl, params).then((res) => {
  452. if (res.success) {
  453. this.toutiaoNetType = res.result.records
  454. }
  455. });
  456. params = {};
  457. params.dictId = '7f907c1dab0a65ce6d115e082cd79acf';
  458. params.pageSize = '1000';
  459. getAction(this.url.dictListUrl, params).then((res) => {
  460. if (res.success) {
  461. this.mobileBrandList = res.result.records
  462. }
  463. });
  464. params = {};
  465. params.dictId = 'defad85851bf6b1751a49b33d8b13b3b';
  466. params.pageSize = '1000';
  467. getAction(this.url.dictListUrl, params).then((res) => {
  468. if (res.success) {
  469. this.articleCategoryList = res.result.records
  470. }
  471. });
  472. }
  473. }
  474. </script>