123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748 |
- <template>
- <div class="crowedPackage">
- <div class="optHeader">
- <div class="top">
- <span class="optItem">
- <a-tree-select
- v-model="treeValue"
- show-search
- style="width: 600px;height:30px"
- :dropdownMatchSelectWidth='true'
- :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
- tree-checkable
- searchPlaceholder='请输入账户关键字搜索'
- :show-checked-strategy="SHOW_PARENT"
- placeholder="请选择账户或搜索账户关键字"
- treeNodeFilterProp="title"
- :allowClear="true"
- @change="treeChange"
- @search="treeSearch"
- @select="treeSelect"
- :maxTagCount='1'
- :tree-data="treeData"
- :filterOption='filterOption'
- >
- </a-tree-select>
- </span>
- <span class="optItem">
- <a-date-picker v-model="dateValue" @change="dateChange" />
- </span>
- </div>
- <div class="bottom">
- <div class="optItem">
- <a-select size="default" placeholder='覆盖数量' v-model="coverageQuantity" style="width: 200px" @change="coverChange">
- <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
- {{ (i + 9).toString(36) + i }}
- </a-select-option>
- </a-select>
- </div>
- <div class="optItem">
- <a-select size="default" placeholder='类别' v-model="category" style="width: 200px" @change="categoryChange">
- <a-select-option value='' >
- 全部
- </a-select-option>
- <a-select-option v-for="(item,index) in categoryArr" :key="index" :value='item.value' >
- {{ item.title }}
- </a-select-option>
- </a-select>
- </div>
- <div class="optItem">
- <a-input-search placeholder="按名称搜索" v-model="nameSearch" style="width: 200px" @search="onSearch" />
- </div>
- <div class="optionBtn">
- <a-button class="search" type='primary' @click="search">查询</a-button>
- <a-button class="search" type='link' @click="clearAll">清空全部</a-button>
- </div>
- </div>
- </div>
- <div class="tableBOX">
- <div class="tableOpt">
- <a-button class="search" type='primary' @click="updatePackage">上传人群包</a-button>
- <a-button class="search" type='primary' @click="synchro">同步</a-button>
- <a-select size="default" placeholder='批量操作' v-model="batchValue" style="width: 200px" @change="batchChange">
-
- <a-select-option value='push'>
- 推送
- </a-select-option>
- <a-select-option value='delete'>
- 删除
- </a-select-option>
- </a-select>
- <a-button class="addCol" type='primary' @click="search">自定义列</a-button>
- </div>
- <div class="tableArea">
- <a-table
- :columns="columns"
- :data-source="dataSource"
- :row-selection="rowSelection"
- bordered
- >
- <template slot="campaignName" slot-scope="text,record">
- <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />
- </template>
- <span slot="groupBudget" slot-scope="text,record">
- <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" />
- </span>
- <span slot="status" slot-scope="text,record">
- <span v-if="record.status">
- <span style='color:#33CC33'>可用</span>
- <span style="display:block">推送完成</span>
- </span>
- <span v-else>
- <span style='color:#CC3333'>不可用</span>
- <span style="display:block">推送失败</span>
- </span>
- </span>
- <span slot="operation" slot-scope="text,record">
- <a href="javascript:;" style="margin-right:10px">推送</a>
- <a-popconfirm
- v-if="dataSource.length"
- title="确定要删除吗?"
- @confirm="() => onDelete(record.key)"
- >
- <a href="javascript:;">删除</a>
- </a-popconfirm>
-
-
- </span>
- <span slot="parentGroup" slot-scope="text">
- <a href="javascript:;" >{{text}}</a>
- </span>
- <span slot="parentPlan" slot-scope="text">
- <a href="javascript:;" >{{text}}</a>
- </span>
- <span slot="cost" slot-scope="cost">
- {{cost | formatCurrency }}
- </span>
- </a-table>
- </div>
- </div>
- <!-- 上传人群包的界面 -->
- <a-modal v-model="updatePackageVisiable" @ok="updatePackageOk" width="750px" okText='上传'>
- <div id="updatePackageOk">
- <p class="title">上传人群包</p>
- <div class="updatePackagebody" >
- <p class="item">
- <span class="desc">匹配类型 <span class="redCircular"></span></span>
- <a-select size="default" placeholder='请选择匹配类型' v-model="matchValue" style="width: 400px" @change="matchChange">
- <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
- {{ (i + 9).toString(36) + i }}
- </a-select-option>
- </a-select>
- <span class="tips">大部分是15位数字,如123456789012345(电信是14位)</span>
- </p>
- <p class="item">
- <span class="desc">人群包名称 <span class="redCircular"></span></span>
- <a-input placeholder="请输入人群包名称" v-model="crowedName" style="width: 400px" />
- </p>
- <p class="item">
- <span class="desc">类型匹配 <span class="Circular"></span></span>
- <a-radio-group name="radioGroup" v-model="typeMatch">
- <a-radio :value="1">
- 设备号匹配
- </a-radio>
- <a-radio :value="2">
- uid匹配
- </a-radio>
- </a-radio-group>
- <span class="tips">
- <span class="tipsinfo">设备号匹配:定向/排除时直接按照设备号圈选,数据相对量少而精确</span>
- <span class="tipsinfo">UID匹配:定向/排除时圈选在该设备上登录的全部UID数据,数据相对量多而广泛</span>
- </span>
- </p>
- <p class="item">
- <span class="desc">人群分组 <span class="redCircular"></span></span>
- <span class="crowedGroup">
- <a-input-group compact >
- <a-input style="width: 290px" placeholder='请输入内容' v-model="populationGroup"/>
- <a-button type='default' @click="showGroupPage">选择已有<a-icon type="down" /></a-button>
- </a-input-group>
- <div class="crowedGroupPage" v-show="showcrowedPackage">
- <ul @click.stop="selectgroupName">
- <li class="crowedGroupPageItem">系统推荐</li>
- <li class="crowedGroupPageItem">哈哈哈</li>
- <li class="crowedGroupPageItem">嘿嘿</li>
- <li class="crowedGroupPageItem">魏志佳编辑</li>
- <li class="crowedGroupPageItem">1</li>
- <li class="crowedGroupPageItem">1</li>
- </ul>
- </div>
- </span>
- </p>
- <p class="item">
- <span class="desc">上传文件 <span class="redCircular"></span></span>
- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
- <a-button> <a-icon type="upload" /> 点击上传ZIP包 </a-button>
- </a-upload>
- <span class="tips">
- <span class="tipsTitle">文件格式说明</span>
- <span class="tipsinfo">1.安卓和IOS设备号,imei小写后MD5加密,IDFA大写后MD5加密,32位MD5均可</span>
- <span class="tipsinfo">2.上传文件内,每行一个号码,号码数量不多于3千万</span>
- <span class="tipsinfo">3.文件类型为单个或多个txt文件经过zip格式压缩得到,压缩后大小不超过1G</span>
- <span class="tipsinfo">4.上传过程中需要一定的格式校验时间,请耐心等待</span>
- </span>
- </p>
- </div>
-
- </div>
- </a-modal>
- </div>
- </template>
- <script>
- import moment from 'moment';
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
- import editableCell from './editableCell'
- import { TreeSelect } from 'ant-design-vue';
- const SHOW_PARENT = TreeSelect.SHOW_PARENT;
- const columns = [
- {
- title: '名称',
- dataIndex: 'userName',
- align: 'center',
- key:'userName',
- scopedSlots: { customRender: 'userName' }
- },
- {
- title: '类别',
- dataIndex: 'department',
- align: 'center',
- key: 'department',
- scopedSlots: { customRender: 'department' }
- },
- {
- title: '创建时间',
- dataIndex: 'roleName',
- align: 'center',
-
- key: 'roleName',
- scopedSlots: { customRender: 'roleName' }
- },
-
- {
- title: '全部覆盖人数',
- dataIndex: 'cost',
- align: 'center',
- scopedSlots: { customRender: 'cost' },
- sorter:()=>{}
- },
- {
- title: '账户名称',
- dataIndex: 'accountName',
- align: 'center',
- scopedSlots: { customRender: 'accountName' },
-
- },
- {
- title: '状态',
- dataIndex: 'status',
- align: 'center',
- scopedSlots: { customRender: 'status' },
-
- },
-
- {
- title: '操作',
- dataIndex: 'operation',
- align: 'center',
- scopedSlots: { customRender: 'operation' },
-
- }
- ]
- const categoryArr=[
- {
- title:'规则',
- value:'guize',
- key:'guize'
- },
- {
- title:'运算',
- value:'yunsuan',
- key:'yuansuan'
- },
- {
- title:'上传',
- value:'update',
- key:'update'
- },
- {
- title:'扩展',
- value:'extend',
- key:'extend'
- },
- {
- title:'API',
- value:'API',
- key:'API'
- },
- {
- title:'付费',
- value:'pay',
- key:'pay'
- },
- {
- title:'主题人群',
- value:'crowd',
- key:'crowd'
- },
- ]
- export default {
- components: {
- editableCell,
- },
- data() {
- return {
- //treeselect的参数
-
- treeData: [],
- SHOW_PARENT,
- accountId:[],
-
- //主页的表格
- dataSource:[
- {
- userName:'人群纠错包1',
- department:'运算',
- roleName:'2020-6-10',
- cost:16897546322,
- accountName:'伊对-01',
- status:true,
- key:0
- },
- {
- userName:'人群纠错包2',
- department:'运算',
- roleName:'2020-6-10',
- cost:16897322,
- accountName:'伊对-02',
- status:false,
- key:1
- },
- {
- userName:'人群纠错包3',
- department:'运算',
- roleName:'2020-6-10',
- cost:16322,
- accountName:'伊对-03',
- status:true,
- key:2
- },
- ],
- categoryArr,
- columns,
- selectedRowKeys:[],
- rowSelection:{
- onChange: (selectedRowKeys, selectedRows) => {
- console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
- console.log(selectedRowKeys);
- this.selectedRowKeys=selectedRowKeys;
- },
- onSelect: (record, selected, selectedRows) => {
- console.log(record, selected, selectedRows);
-
- },
- onSelectAll: (selected, selectedRows, changeRows) => {
- console.log(selected, selectedRows, changeRows);
-
- },
- },
- editID:0,
- //查询条件
- treeValue: [],
- coverageQuantity:undefined,
- category:undefined,
- dateValue:null,//日期选择器
- nameSearch:undefined,
- batchValue:undefined, //批量操作的选中值
- updatePackageVisiable:false,//上传人群包的弹出框
- matchValue:undefined, //上传人群包的匹配框
- crowedName:undefined,//上传人群包名称
- typeMatch:2,//类型匹配
- showcrowedPackage:false,
- populationGroup:undefined,//上传人群包---人群分组
- }
- },
- methods: {
- //项目改变后的事件
- treeChange(val) {
- // console.log(this.treeData)
- console.log(val)
- this.accountId = [];
- //选择一个后禁用其他
- if(val.length==1){
- if(val[0]*1){
- let selectindex=0
- this.treeData.forEach((ele,index)=>{
- if(ele.children){
- ele.children.map((item,ind)=>{
- if(item.value==val[0]){
- selectindex=index;
-
- }
- })
- }
- });
- console.log(selectindex)
- if(selectindex ||selectindex==0){
- this.treeData.forEach((ele,index)=>{
- if(index!=selectindex){
- ele.disableCheckbox = true;
- if(ele.children){
- ele.children.map((item,ind)=>{
- item.disableCheckbox = true;
- })
- }
- }
- })
- }
-
- }else{
- // console.log(1)
- this.treeData.forEach((ele,index)=>{
- if(ele.value!=val[0]){
- ele.disableCheckbox = true;
-
- if(ele.children){
- ele.children.forEach((item,ind)=>{
- item.disableCheckbox = true;
- })
- }
- }
-
- })
- }
-
- }
- if(val.length==0){
- this.treeData.forEach((ele,index)=>{
- ele.disableCheckbox = false;
- this.mediaId=ele.mediaId;
- if(ele.children){
- ele.children.forEach((item,ind)=>{
- item.disableCheckbox = false;
- })
- }
-
- });
-
- }
- if(val){
- val.forEach((ele,index)=>{
- if(ele*1){
- this.accountId.push(ele.value)
- }else{
- let projectArr=this.treeData.filter((item)=>{
- return item.value==ele
- });
- console.log(projectArr)
- projectArr[0].children.forEach((element)=>{
- this.accountId.push(element.value)
- })
- }
- })
- }
-
- console.log(this.accountId)
- },
- treeSearch(){
- console.log(arguments);
- },
- treeSelect(){
- // console.log(arguments);
- // this.treeValue=arguments[0].value
- },
- coverChange(){
- },
- categoryChange(){
- },
- //日期改变
- dateChange(date, dateString) {
- console.log(date, dateString);
- this.dateValue=date;
- },
- //按名字搜索
- onSearch(value) {
- console.log(value);
- },
- //批量操作
- batchChange(val){
- console.log(val)
- this.batchValue=val
- },
- //查询按钮
- search(){
- },
- //清空全部
- clearAll(){
- this.treeValue=[];
- this.coverageQuantity=undefined;
- this.category=undefined;
- this.dateValue=null;//日期选择器
- this.nameSearch=undefined;
- this.batchValue=undefined; //批量操作的选中值
- },
- //表格里的删除按钮
- onDelete(key) {
- console.log(key)
- const dataSource = [...this.dataSource];
- this.dataSource = dataSource.filter(item => item.key !== key);
- },
- //上传人群包
- updatePackage(){
- this.updatePackageVisiable=true;
- },
- //同步人群包
- synchro(){
- },
- updatePackageOk(){
- this.updatePackageVisiable = false;
- },
- //匹配类型
- matchChange(val){
- console.log(val)
- },
- //上传人群包--选择已有的人群分组
- showGroupPage(){
- this.showcrowedPackage=!this.showcrowedPackage
- },
- //人群分组选中事件
- selectgroupName(e){
- // console.log(e)
- this.populationGroup=e.target.innerText;
- this.showcrowedPackage=!this.showcrowedPackage
- },
-
- filterOption(input, option){
- console.log(input, option)
- return (
- option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- );
- },
- },
- filters: {
- toPercentage(val) {
- if(val){
- if(typeof val != 'string'){
- return (val * 100).toFixed(2) + '%'
- }else{
- return val
- }
- }else if(typeof val =='string'){
- return val
- }
- else{
- return 0
- }
- },
- //保留两位小数并且变成货币格式
- decimalsHandle(val){
-
- if(val && typeof val !='string'){
- if(val>=0){
- val=parseFloat(val).toFixed(2);
- let numberStr = val.toString()
- let str = numberStr.split('.')
-
- let str0=str[0].split('').reverse();
- for (let i = 0; i < str0.length; i++) {
- if ((i + 1) % 4 === 0) {
- str0.splice(i, 0, ',')
- }
- }
- str0.reverse()
- let handleResult = ''
- for (let j = 0; j < str0.length; j++) {
- handleResult += str0[j]
- }
-
- return handleResult+'.'+str[1]
- }else{
- val=parseFloat(val).toFixed(2);
- let numberStr = val.toString()
- let str = numberStr.split('.')
-
- let str0=str[0].substr(1).split('').reverse();
- for (let i = 0; i < str0.length; i++) {
- if ((i + 1) % 4 === 0) {
- str0.splice(i, 0, ',')
- }
- }
- str0.reverse()
- let handleResult = ''
- for (let j = 0; j < str0.length; j++) {
- handleResult += str0[j]
- }
-
- return '-'+handleResult+'.'+str[1]
- }
-
- }else if(typeof val =='string'){
- return val
- }
- else{
- return 0
- }
- },
- //变成货币格式
- formatCurrency(val){
- if((val||val==0)&& typeof val !='string'){
- let numberStr = val.toString()
- let str = numberStr.split('').reverse()
- for (let i = 0; i < str.length; i++) {
- if ((i + 1) % 4 === 0) {
- str.splice(i, 0, ',')
- }
- }
- str.reverse()
- let handleResult = ''
- for (let j = 0; j < str.length; j++) {
- handleResult += str[j]
- }
- return handleResult
- }else if(typeof val =='string'){
- return val
- }
- else{
- return '-'
- }
-
- }
- }
- }
- </script>
- <style lang="scss">
- #updatePackageOk{
- .title{
- font-size: 18px;
- font-weight: 700;
- }
- .desc{
- width: 100px;
- display: inline-block;
- text-align: right;
- margin-right: 10px;
- .redCircular,.Circular{
- display: inline-block;
- margin-left: 5px;
- width: 5px;
- height: 5px;
- border-radius: 50%;
- background-color: red;
- position: relative;
- top: -2px;
- }
- .Circular{
- background-color: transparent;
- }
- }
- .updatePackagebody{
- .crowedGroup{
- display: inline-block;
- width: 500px;
- position: relative;
- .crowedGroupPage{
- position: absolute;
- width: 400px;
- height: 250px;
- top: 32px;
- left: 0;
- background-color: #fff;
- border: 1px solid #ddd;
- border-top: null;
- border-radius: 0 0 10px 10px ;
- overflow:auto;
- z-index: 3;
- ul{
- padding: 0;
- margin: 0em;
- }
- .crowedGroupPageItem{
- height: 30px;
- line-height: 30px;
- padding: 0 15px;
- list-style: none;
-
- }
- .crowedGroupPageItem:hover{
- background-color: rgba(0,0,0,.2);
- }
- }
- }
- .tips{
- display: block;
- font-size: 12px;
- color: #999;
- margin-left: 110px;
- margin-top: 10px;
- .tipsinfo{
- display: block;
- margin-bottom: 6px;
- }
- .tipsTitle{
- display: block;
- color: #777;
- }
- }
- }
- }
- </style>
- <style lang="scss" scoped>
- .crowedPackage{
-
- .optHeader{
- margin: 15px 0;
- padding: 15px 15px;
- background: #fff;
- .optItem{
- display: inline-block;
- margin-right: 15px;
- .ok{
- margin-right: 15px;
- }
- }
- .top{
- margin-bottom: 15px;
- }
- .optionBtn{
- // display: inline-block;
- float: right;
- .searchBtn{
- margin-right: 10px;
- }
- }
- }
- .optHeader:hover{
- box-shadow: 0 0 15px rgba(0,0,0,.2);
- border-radius: 10px;
- }
- .tableBOX{
- background: #fff;
- padding: 15px 15px;
- .tableOpt{
- margin-bottom: 10px;
- .search{
- margin-right: 15px;
- }
- .addCol{
- float:right;
- }
- }
-
- }
- }
- </style>
|