123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492 |
- <template>
- <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
- <a-form :form="form">
- <a-form-item
- label="地域"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group v-model="area" :defaultValue="0">
- <a-radio-button value="0">不限</a-radio-button>
- <a-radio-button value="按省市">按省市</a-radio-button>
- <a-radio-button value="按区县">按区县</a-radio-button>
- <a-radio-button value="按商圈">按商圈</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="按区县"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-tree-select
- showSearch
- style="width: 300px"
- :value="value"
- :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
- placeholder='Please select'
- allowClear
- multiple
- treeDefaultExpandAll
- @change="onChange"
- @search="onSearch"
- @select="onSelect"
- >
- <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
- <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
- <a-tree-select-node value='leaf1' title='my leaf' key='random'/>
- <a-tree-select-node value='leaf2' title='your leaf' key='random1'/>
- </a-tree-select-node>
- <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
- <a-tree-select-node value='sss' key='random3'>
- <b style="color: #08c" slot="title">sss</b>
- </a-tree-select-node>
- </a-tree-select-node>
- </a-tree-select-node>
- </a-tree-select>
- </a-form-item>
- <a-form-item
- label="性别"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group v-model="gender">
- <a-radio-button v-for="sex in toutiaoSex" :key="sex.itemValue" :value="sex.itemValue">{{sex.description}}
- </a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="年龄"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-checkbox value="">不限</a-checkbox>
- <a-checkbox-group v-model="ageRange">
- <a-checkbox v-for="age in toutiaoAgeRange" :key="age.itemValue" :value="age.itemValue">{{age.description}}
- </a-checkbox>
- </a-checkbox-group>
- </a-form-item>
- <a-form-item
- label="自定义人群"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group v-model="zdyrq">
- <a-radio-button value="as">不限</a-radio-button>
- <a-radio-button value="sd">自定义人群</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="定向逻辑"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-tabs defaultActiveKey="1">
- <a-tab-pane tab="定向" key="1">
- <a-table
- ref="table2"
- bordered
- size="middle"
- rowKey="id"
- :columns="columns2"
- :dataSource="dataSource2"
- :pagination="ipagination2"
- :loading="loading2"
- :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
- @change="handleTableChange2">
- <span slot="action" slot-scope="text, record"></span>
- </a-table>
- </a-tab-pane>
- <a-tab-pane tab="排除" key="2" forceRender>
- <a-table
- ref="table2"
- bordered
- size="middle"
- rowKey="id"
- :columns="columns2"
- :dataSource="dataSource2"
- :pagination="ipagination2"
- :loading="loading2"
- :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
- @change="handleTableChange2">
- <span slot="action" slot-scope="text, record"></span>
- </a-table>
- </a-tab-pane>
- <a-tab-pane tab="同时定向排除" key="3">
- <a-tabs defaultActiveKey="1">
- <a-tab-pane tab="定向" key="1">
- <a-table
- ref="table2"
- bordered
- size="middle"
- rowKey="id"
- :columns="columns2"
- :dataSource="dataSource2"
- :pagination="ipagination2"
- :loading="loading2"
- :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
- @change="handleTableChange2">
- <span slot="action" slot-scope="text, record"></span>
- </a-table>
- </a-tab-pane>
- <a-tab-pane tab="排除" key="2" forceRender>
- <a-table
- ref="table2"
- bordered
- size="middle"
- rowKey="id"
- :columns="columns2"
- :dataSource="dataSource2"
- :pagination="ipagination2"
- :loading="loading2"
- :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
- @change="handleTableChange2">
- <span slot="action" slot-scope="text, record">
- </span>
- </a-table>
- </a-tab-pane>
- </a-tabs>
- </a-tab-pane>
- </a-tabs>
- </a-form-item>
- <a-form-item
- label="兴趣定向"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group>
- <a-radio-button value="as">不限</a-radio-button>
- <a-radio-button value="sd">系统推荐</a-radio-button>
- <a-radio-button value="zdy">自定义</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="兴趣分类"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-tree-select
- showSearch
- style="width: 300px"
- :value="value"
- :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
- placeholder='Please select'
- allowClear
- multiple
- treeDefaultExpandAll
- @change="onChange"
- @search="onSearch"
- @select="onSelect"
- >
- <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
- <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
- <a-tree-select-node value='leaf1' title='my leaf' key='random'/>
- <a-tree-select-node value='leaf2' title='your leaf' key='random1'/>
- </a-tree-select-node>
- <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
- <a-tree-select-node value='sss' key='random3'>
- <b style="color: #08c" slot="title">sss</b>
- </a-tree-select-node>
- </a-tree-select-node>
- </a-tree-select-node>
- </a-tree-select>
- </a-form-item>
- <a-form-item
- label="精选流量包"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group>
- <a-radio-button value="llb_bx">不限</a-radio-button>
- <a-radio-button value="rjjx">应用软件精选</a-radio-button>
- <a-radio-button value="yxjx">游戏精选</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="平台"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group>
- <a-radio-button value="as">不限</a-radio-button>
- <a-radio-button value="sd">IOS</a-radio-button>
- <a-radio-button value="sd">Android</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="网络"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-checkbox-group v-model="ageRange">
- <a-checkbox value="">不限</a-checkbox>
- <a-checkbox v-for="netType in toutiaoNetType" :key="netType.itemValue" :value="netType.itemValue">
- {{netType.description}}
- </a-checkbox>
- </a-checkbox-group>
- </a-form-item>
- <a-form-item
- label="app行为"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group>
- <a-radio-button value="as">不限</a-radio-button>
- <a-radio-button value="sd">按分类</a-radio-button>
- <a-radio-button value="sd">按app</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="文章分类"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group v-model="isArticleCategory" @change="changeArticleCategoryType">
- <a-radio-button value="unlimit_category">不限</a-radio-button>
- <a-radio-button value="category">文章分类</a-radio-button>
- </a-radio-group>
- <br>
- <a-select
- mode="tags"
- placeholder="选择文章分类"
- style="width: 600px"
- @change="onChange"
- v-if="showArticleCategory"
- >
- <a-select-option v-for="articleCategory in articleCategoryList" :key="articleCategory.itemValue"
- :value="articleCategory.itemValue">{{articleCategory.itemText}}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item
- label="手机品牌"
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
- <a-radio-group @change="changeMobileBrandType" v-model="isMobileBrand">
- <a-radio-button value="unlimit_brand">不限</a-radio-button>
- <a-radio-button value="brand">按品牌</a-radio-button>
- </a-radio-group>
- <br>
- <a-select
- mode="tags"
- placeholder="选择手机品牌"
- style="width: 600px"
- @change="onChange"
- v-if="showMobileBrand"
- >
- <a-select-option v-for="mobileBrand in mobileBrandList" :key="mobileBrand.itemValue"
- :value="mobileBrand.itemValue">{{mobileBrand.itemText}}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item
- :wrapperCol="{ span: 24 }"
- style="text-align: center"
- >
- <a-button htmlType="submit" type="primary">提交</a-button>
- <a-button style="margin-left: 8px">保存</a-button>
- </a-form-item>
- </a-form>
- </a-card>
- </template>
- <script>
- import {deleteAction, postAction, getAction} from '@/api/manage'
- export default {
- data() {
- return {
- form: this.$form.createForm(this),
- gender: {},
- toutiaoSex: {},
- ageRange: [],
- toutiaoAgeRange: {},
- toutiaoNetType: {},
- isMobileBrand: '',
- showMobileBrand: false,
- mobileBrandList: {},
- showArticleCategory: false,
- articleCategoryList: [],
- isArticleCategory: {},
- zdyrq: [],
- area: [],
- value: undefined,
- model1: {},
- model2: {},
- currentRoleId: '',
- queryParam1: {},
- queryParam2: {},
- dataSource1: [],
- dataSource2: [],
- ipagination1: {
- current: 1,
- pageSize: 10,
- pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- showSizeChanger: true,
- total: 0
- },
- ipagination2: {
- current: 1,
- pageSize: 10,
- pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- showSizeChanger: true,
- total: 0
- },
- isorter1: {
- column: 'createTime',
- order: 'desc'
- },
- isorter2: {
- column: 'createTime',
- order: 'desc'
- },
- filters1: {},
- filters2: {},
- loading1: false,
- loading2: false,
- selectedRowKeys1: [],
- selectedRowKeys2: [],
- selectionRows1: [],
- selectionRows2: [],
- columns2: [{
- title: '人群',
- align: 'center',
- dataIndex: 'username',
- width: 120
- },
- {
- title: '属性',
- align: 'center',
- width: 100,
- dataIndex: 'realname'
- },
- {
- title: '创建时间',
- align: 'center',
- width: 80,
- dataIndex: 'status_dictText'
- }],
- url: {
- dictListUrl: 'toutiao/dictitem/list'
- }
- }
- },
- methods: {
- onSelectChange2(selectedRowKeys, selectionRows) {
- this.selectedRowKeys2 = selectedRowKeys
- this.selectionRows2 = selectionRows
- },
- onClearSelected2() {
- this.selectedRowKeys2 = []
- this.selectionRows2 = []
- },
- onChange(value) {
- console.log(value)
- this.value = value
- },
- changeMobileBrandType(value) {
- console.log(this.isMobileBrand);
- if (this.isMobileBrand == 'brand') {
- this.showMobileBrand = true;
- } else {
- this.showMobileBrand = false;
- }
- },
- changeArticleCategoryType(value) {
- console.log(this.isMobileBrand);
- if (this.isArticleCategory == 'category') {
- this.showArticleCategory = true;
- } else {
- this.showArticleCategory = false;
- }
- },
- onSearch() {
- console.log(...arguments)
- },
- onSelect() {
- console.log(...arguments)
- },
- loadData2(arg) {
- if (!this.url.list2) {
- this.$message.error('请设置url.list2属性!')
- return
- }
- //加载数据 若传入参数1则加载第一页的内容
- if (arg === 1) {
- this.ipagination2.current = 1
- }
- if (this.currentRoleId === '') return
- let params = this.getQueryParams2()//查询条件
- params.roleId = this.currentRoleId
- this.loading2 = true
- getAction(this.url.list2, params).then((res) => {
- if (res.success) {
- this.dataSource2 = res.result.records
- this.ipagination2.total = res.result.total
- }
- this.loading2 = false
- })
- },
- handleTableChange2(pagination, filters, sorter) {
- if (Object.keys(sorter).length > 0) {
- this.isorter2.column = sorter.field
- this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
- }
- this.ipagination2 = pagination
- this.loadData2()
- }
- },
- created: function () {
- let params = {};
- params.dictId = '2f7d1020ae8c4a1f8af66087d9319139';
- params.pageSize = '1000';
- getAction(this.url.dictListUrl, params).then((res) => {
- if (res.success) {
- this.toutiaoSex = res.result.records
- }
- });
- params = {};
- params.dictId = '2b7fe41318c0f0fb4ae5a3cf5269ab04';
- params.pageSize = '1000';
- getAction(this.url.dictListUrl, params).then((res) => {
- if (res.success) {
- this.toutiaoAgeRange = res.result.records
- }
- });
- params = {};
- params.dictId = 'c6c75514b5fa17b25dde56d8e7bbc4e9';
- params.pageSize = '1000';
- getAction(this.url.dictListUrl, params).then((res) => {
- if (res.success) {
- this.toutiaoNetType = res.result.records
- }
- });
- params = {};
- params.dictId = '7f907c1dab0a65ce6d115e082cd79acf';
- params.pageSize = '1000';
- getAction(this.url.dictListUrl, params).then((res) => {
- if (res.success) {
- this.mobileBrandList = res.result.records
- }
- });
- params = {};
- params.dictId = 'defad85851bf6b1751a49b33d8b13b3b';
- params.pageSize = '1000';
- getAction(this.url.dictListUrl, params).then((res) => {
- if (res.success) {
- this.articleCategoryList = res.result.records
- }
- });
- }
- }
- </script>
|