zhuxinbo 5 lat temu
rodzic
commit
f531409cb7

+ 848 - 0
src/views/modules/BatchCreate/TouTiaoBatch.vue

@@ -0,0 +1,848 @@
+<template>
+    <div class="toutiaoBatch">
+        <keep-alive>  
+        <div class="tabs">
+            <a-tabs v-model="tabkey" @change="callback">
+                <a-tab-pane key="group" tab="广告组">                
+                </a-tab-pane>
+                <a-tab-pane key="plan" tab="广告计划">              
+                </a-tab-pane>
+                <a-tab-pane key="idea" tab="广告创意">               
+                </a-tab-pane>
+                <a-button type='primary' slot="tabBarExtraContent" @click="goBatch">
+                   + 头条批量创建
+                </a-button>
+            </a-tabs>
+        </div>
+        </keep-alive>
+        <div class="topOptions">
+            <span class="OptinItem">
+                <a-select  style="width: 120px" @change="statusChange" placeholder="请选择状态">    
+                    <a-select-option value="open" >
+                        开
+                    </a-select-option>
+                    <a-select-option value="close">
+                        关
+                    </a-select-option>
+                </a-select>
+            </span>
+            <span class="OptinItem">           
+                <a-input-search  placeholder="请选择媒体账户" style="width: 200px" v-model="account" />
+            </span>
+            <span class="OptinItem">
+                <a-date-picker @change="dateChange" />
+            </span>
+            <span class="OptinItem">
+                <a-input-search placeholder="请输入ID或名称关键词" v-model="optionId" style="width: 200px" @search="onSearch" />
+            </span>
+            <span class="optionBtn">
+                <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
+                <a-button type='default' @click="reset">重置</a-button>
+            </span>
+        </div>
+        <div class="tableArea">
+            <div class="tableOption">
+                <span class="OptinItem">                    
+                    <a-tooltip>
+                        <template slot="title" :getPopupContainer='getPopupContainer'>
+                        点我就可以批量启动、暂停、删除你的选择哦~
+                        </template>
+                        <a-button type="link" @click="changeSelectStatus">批量操作</a-button>
+                    </a-tooltip>
+                </span>
+                <span class="OptinItem">
+                    <a-select  style="width: 120px" @change="optChange" placeholder="" :disabled='selectDisable'>    
+                        <a-select-option value="open" >
+                            启动
+                        </a-select-option>
+                        <a-select-option value="pause">
+                            暂停
+                        </a-select-option>
+                        <a-select-option value="delete">
+                            删除
+                        </a-select-option>
+                    </a-select>
+                </span>
+                 <span class="OptinItem">
+                    <a-popconfirm
+                        title="确定要删除选择的内容吗?"
+                        ok-text="删除"
+                        cancel-text="取消"
+                        @confirm="confirm"
+                        @cancel="cancel"
+                        v-if="optValue=='delete'"
+                    >
+                        <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
+                    </a-popconfirm>
+                    <a-button type='primary' @click="isOkHandle" class="ok" v-else>确定</a-button>
+
+
+                    <a-popover v-model="visible" trigger="click" >
+                        <div slot="content">
+                            <span style='font-weight:700;margin-right:15px;font-size:15px'>预算</span>
+                            <a-radio-group v-model="radioValue" @change="radioChange">
+                                <a-radio value="unlimit">不限</a-radio>
+                                <a-radio value="dayBudget">日预算</a-radio>                                
+                            </a-radio-group>
+                            <span v-show="radioValue=='dayBudget'">预计金额: <a-input-number :min="0" v-model="dayBudgetValue" :step="0.1" @change="budgetChange" size="small" style='margin-right:20px' /></span>
+                            <a-button type='default' @click="showPricecancel"  style='margin-right:10px'>取消</a-button>
+                            <a-button type='primary' @click="showPriceOk"  class="ok">保存</a-button>
+                        </div>
+                        
+                        <a-button type='default'  v-if="tabkey=='group'" class="ok">更改预算</a-button>
+                    </a-popover>
+                    <a-button type='default' @click="changebudget" v-if="tabkey=='plan'" class="ok">更改预算</a-button>
+                    <a-button type='default' @click="changeofferPrice" v-show="tabkey=='plan'">更改出价</a-button>
+                    
+                 </span>
+                <span class="optionBtn">                    
+                    <a-button type='primary' @click="reset">自定义列</a-button>
+                </span>
+            </div>
+            <div class="table">
+                <a-table 
+                :columns="columns" 
+                :data-source="data" 
+                :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">
+                        <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
+                    </span>
+                    <span slot="options" slot-scope="record">
+                        <a href="javascript:;" style="margin-right:10px">编辑</a>
+                        <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
+                        <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
+                    </span>
+                    <span slot="parentGroup" slot-scope="text,record">
+                        <a href="javascript:;" >{{text}}</a>
+                    </span>
+                    <span slot="parentPlan" slot-scope="text,record">
+                        <a href="javascript:;" >{{text}}</a>
+                    </span>
+                </a-table>
+            </div>
+        </div>
+        <!-- 出价的模态框 -->
+        <div class="batchModal">        
+            <a-modal v-model="offerPriceVisiable" :title="'批量修改'+ModalTitle" @ok="handleOk" width='55%' id="batchModal" >
+                <div class="selectePlan">已选{{}}个广告计划</div>
+                <div class="modifyRules">
+                    <span class="rules">修改规则:</span>
+                    <a-radio-group v-model="modifyRulesValue" @change="modifyRulesChange">
+                        <a-radio-button value="total">
+                            统一修改
+                        </a-radio-button>
+                        <a-radio-button value="separately">
+                            分别修改
+                        </a-radio-button>
+                    </a-radio-group>
+                    <span class="totalPrice" v-if="modifyRulesValue=='total'"><span>{{ModalTitle=='出价'?'出价':'总预算'}}</span>
+                        :
+                        <a-input-number :min="0" v-model="inputValue" :step="0.1" @change="budgetChange" size="small"  /> 元
+                    </span>
+                </div>
+                <div class="modifyTable">
+                        <a-table
+                        :columns="modifyTableCol"
+                        :data-source="modifyTableData"
+                        bordered
+                        tableLayout="auto"
+                        :pagination="false"
+                        :loading='modifyTableloading'
+                        style="word-break: break-all;"
+                    >
+                        <span slot="changeBudget" slot-scope="">
+                            <span v-if="ModalTitle=='出价'">oCPM</span>
+                            <span v-else>{{modifyRulesValue=='total'?'总预算':'日预算'}}</span>
+                            :<a-input-number :min="0" v-model="inputValue" :step="0.1" @change="budgetChange"  size="small" :disabled="modifyRulesValue=='total'" /> 元
+                        </span>
+                        <span slot="currentCost" slot-scope="currentCost">{{ currentCost | decimalsHandle }}</span>
+                        <span slot="currentBudget" slot-scope="text"> 
+                            <span v-if="ModalTitle=='出价'">oCPM: {{text | decimalsHandle}}</span>
+                            <span v-else>日预算:{{  text | decimalsHandle }}</span>
+                        </span>
+                    </a-table>
+                </div>
+
+            </a-modal>
+        </div>
+
+        <!-- 复制计划的弹出框 -->
+        <a-modal v-model="copyPlanVisiable" title="复制计划" @ok="copyPlanOk" id="copyModal" :maskClosable='false'>
+            
+            <p class="copyTip">复制说明:适用于批量复制多个广告计划,默认同事复制所属创意。此类型不直接跨广告投放账号复制,且只能复制完成后逐一修改</p>
+            <p style="font-weight:700;font-size:15px">被复制广告计划:<span>{{}}</span></p>
+            <p><span class="copyName"><b class="copyKeyStart">*</b> 复制个数:</span> 
+                <a-input-number :min="1" :max="10" v-model="copyNum" style="width:250px" />
+                
+            </p>
+            <p><span class="copyName"><b class="copyKeyStart">*</b>复制到广告组:</span> 
+                <a-select size="default" default-value="a1" style="width: 250px" v-model="copyGroup" >
+                <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
+                    {{ (i + 9).toString(36) + i }}
+                </a-select-option>
+                </a-select>
+            </p>
+        </a-modal>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+import editableCell from './editableCell'
+let typeValue='预算'
+let modifyTableCol=[
+    {
+        title: '广告计划',
+        dataIndex: 'advertisingPlan',
+        align: 'center',
+    },
+    {
+        title: '当前消耗',
+        dataIndex: 'currentCost',
+        align: 'center',
+        scopedSlots: { customRender: 'currentCost' },
+    },
+    {
+        title: '当前'+typeValue,
+        dataIndex: 'currentBudget',
+        align: 'center',
+        scopedSlots: { customRender: 'currentBudget' },
+    },
+    {
+        title: '统一修改'+typeValue,
+        dataIndex: 'changeBudget',
+        align: 'center',
+        scopedSlots: { customRender: 'changeBudget' },
+        
+    },
+]
+
+const columns = [
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '广告组名称',
+    dataIndex: 'campaignName',
+    key: 'campaignName',
+    align: 'center',
+    width:450,
+    scopedSlots: { customRender: 'campaignName' }
+  },
+  {
+    title: '广告组ID',
+    dataIndex: 'advantageID',    
+    key: 'advantageID',
+    align: 'center',
+  },
+  {
+    title: '推广目的',
+    dataIndex: 'promotionPurpose',    
+    key: 'promotionPurpose',
+    align: 'center',
+  },
+  {
+    title: '组预算(元)',
+    dataIndex: 'groupBudget',    
+    key: 'groupBudget',
+    align: 'center',
+    width:250,
+    scopedSlots: { customRender: 'groupBudget' }
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'creatTime',    
+    key: 'creatTime',
+    align: 'center',
+    scopedSlots: { customRender: 'creatTime' }
+  },
+];
+const planColumns = [
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '操作',
+    dataIndex: 'options',
+    key: 'options',
+    align: 'center',
+    scopedSlots: { customRender: 'options' }
+  },
+  {
+    title: '计划名称',
+    dataIndex: 'planName',
+    key: 'planName',
+    align: 'center',
+    width:300,
+    scopedSlots: { customRender: 'planName' }
+  },
+  {
+    title: '计划ID',
+    dataIndex: 'planID',    
+    key: 'planID',
+    align: 'center',
+  },
+  {
+    title: '账户',
+    dataIndex: 'accountName',    
+    key: 'promotionPurpose',
+    align: 'center',
+  },
+  {
+    title: '计划预算(元)',
+    dataIndex: 'planBudget',    
+    key: 'planBudget',
+    align: 'center',
+    width:150,
+    scopedSlots: { customRender: 'planBudget' }
+  },
+  {
+    title: '出价(元)',
+    dataIndex: 'planoffer',    
+    key: 'planoffer',
+    align: 'center',
+    width:150,
+    scopedSlots: { customRender: 'planoffer' }
+  },
+  {
+    title: '投放方式',
+    dataIndex: 'Launchmode',    
+    key: 'Launchmode',
+    align: 'center',
+    scopedSlots: { customRender: 'Launchmode' }
+  },
+  {
+    title: '投放时间',
+    dataIndex: 'LaunchTime',    
+    key: 'LaunchTime',
+    align: 'center',
+    scopedSlots: { customRender: 'LaunchTime' }
+  },
+  {
+    title: '所属广告组',
+    dataIndex: 'parentGroup',    
+    key: 'parentGroup',
+    align: 'center',
+    scopedSlots: { customRender: 'parentGroup' }
+  },
+];
+const ideaColumns = [
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '操作',
+    dataIndex: 'options',
+    key: 'options',
+    align: 'center',
+    scopedSlots: { customRender: 'options' }
+  }, 
+  {
+    title: '创意ID',
+    dataIndex: 'ideaID',    
+    key: 'ideID',
+    align: 'center',
+  },
+  {
+    title: '广告创意',
+    dataIndex: 'ideID',    
+    key: 'ideaID',
+    align: 'center',
+  },
+  {
+    title: '创意方式',
+    dataIndex: 'iaID',    
+    key: 'idaID',
+    align: 'center',
+  },
+  {
+    title: '账户',
+    dataIndex: 'accountName',    
+    key: 'promotionPurpose',
+    align: 'center',
+  },
+ 
+  
+  {
+    title: '投放时间',
+    dataIndex: 'LaunchTime',    
+    key: 'LaunchTime',
+    align: 'center',
+    scopedSlots: { customRender: 'LaunchTime' }
+  },
+  {
+    title: '投放位置',
+    dataIndex: 'LaunchPosition',    
+    key: 'LaunchPosition',
+    align: 'center',
+    scopedSlots: { customRender: 'LaunchPosition' }
+  },
+  {
+    title: '所属计划',
+    dataIndex: 'parentPlan',    
+    key: 'parentPlan',
+    align: 'center',
+    scopedSlots: { customRender: 'parentPlan' }
+  },
+  {
+    title: '所属广告组',
+    dataIndex: 'parentGroup',    
+    key: 'parentGroup',
+    align: 'center',
+    scopedSlots: { customRender: 'parentGroup' }
+  },
+];
+
+
+
+let data=[
+    {
+        status:true,
+        campaignName:'有缘有相聚',
+        advantageID:28856,
+        promotionPurpose:'-',
+        groupBudget:12563,
+        creatTime:'2020-01-03',
+        key:28856
+    },
+    {
+        status:false,
+        campaignName:'有缘有相聚',
+        advantageID:27856,
+        promotionPurpose:'-',
+        groupBudget:'不限',
+        key:27856,
+        creatTime:'2020-03-03'
+    },
+    {
+        status:true,
+        campaignName:'有缘有相聚',
+        advantageID:24856,
+        promotionPurpose:'-',
+        groupBudget:14563,
+        creatTime:'2020-04-03',
+        key:24856,
+    },
+]
+
+let 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);
+        
+    },
+}
+export default {
+    components: {
+        editableCell,
+    },
+    data() {
+        return {
+            account:'',//媒体账号
+            optionId:'',//input输入的id或关键词
+            dateValue:'',//日期选择框选择的事件--我赋值的是dateString
+            tabkey:'group',//tab选中的页
+            selectDisable:true,
+            optValue:'',//操作设置的值 删除 暂停 开启
+            visible: false,//出价里的弹出框
+            radioValue:'unlimit',//出价的单选默认值
+            dayBudgetValue:0,//日预算的默认值
+            offerPriceVisiable:false,//修改出价的弹出框显示与否
+            modifyRulesValue:'total',//修改出价里的radio默认值
+            ModalTitle:'出价',//模态框的标题
+            inputValue:'',//模态框里统一修改时的金额
+            //主页的表格
+            data:[],
+            columns,
+            selectedRowKeys:[],
+            rowSelection,
+            editID:0,
+            //批量修改里的表格
+            typeValue,
+            modifyTableData:[
+                {
+                    advertisingPlan:'王者荣耀',
+                    currentCost:826595312,
+                    currentBudget:10000,
+                    changeBudget:''
+                }
+            ],
+            modifyTableCol,
+            modifyTableloading:false,
+            
+            
+            //复制计划
+            copyPlanVisiable:false,
+            copyRecord:null,
+            copyNum:1,//复制个数
+            copyGroup:'',
+        }
+    },
+    
+    methods: {
+        //tab切换页的函数
+        callback(key) {
+            console.log(key);
+            if(key=='plan'){
+                this.columns=planColumns
+            }else if(key=='group'){
+                this.columns=columns
+            }else if(key=='idea'){
+                this.columns=ideaColumns
+            }
+        },
+        //跳转到批量页面
+        goBatch(){
+
+        },
+        //状态改变
+        statusChange(value){          
+            console.log(value);
+
+        },
+        //日期改变
+        dateChange(date, dateString) {
+            console.log(date, dateString);
+        },
+        //输入框查询事件
+        onSearch(value){
+            console.log('input--'+value);
+        },
+        //查询按钮事件
+        search(){
+
+        },
+        //重置按钮事件
+        reset(){
+
+        },
+        //状态改变
+        switchChange(text,record){
+            // console.log(`a-switch to ${checked}`);
+            console.log(text,record);
+            record.status=!text;
+            console.log(this.data)
+        },
+
+
+        //改变批量操作的按钮
+        changeSelectStatus(){
+            this.selectDisable=false;
+        },
+        //批量操作下的启动 删除 暂停
+        optChange(value){
+            console.log(value)
+            this.optValue=value;
+        },
+        //批量操作的确定按钮
+        isOkHandle(){
+            this.selectDisable=true;
+            if(this.optValue){
+                if(this.optValue=='pause'){
+                    if(this.selectedRowKeys.length>0){
+                        this.selectedRowKeys.forEach((item,index)=>{
+                            this.data.forEach((ele)=>{
+                                if(ele.key==item){
+                                    ele.status=false;
+                                }
+                            })
+                            
+                        })
+                    }
+                }else if(this.optValue=='open'){
+                   if(this.selectedRowKeys.length>0){
+                        this.selectedRowKeys.forEach((item,index)=>{
+                           this.data.forEach((ele)=>{
+                                if(ele.key==item){
+                                    ele.status=true;
+                                }
+                            })
+                        })
+                    }
+                }
+                console.log(this.data)
+            }
+            
+        },
+        //确定删除
+        confirm(e) {
+            console.log(e);
+                if(this.optValue=='delete'){
+                    if(this.selectedRowKeys.length>0){
+
+                        this.selectedRowKeys.forEach((item,index)=>{
+                            this.data.splice(item,1)
+                        })
+                    }
+                }
+            this.$message.success('删除成功');
+
+        },
+        //取消删除
+        cancel(e) {
+            console.log(e);
+            // this.$message.error('删除成功');
+        },
+        //预算里 取消按钮点击
+        showPricecancel() {
+            // console.log(111);
+            this.visible = false;
+            this.dayBudgetValue=0
+            this.radioValue='unlimit'
+        },
+        showPriceOk(){
+            this.visible = false;
+        },
+        //单选按钮改变事件
+        radioChange(e) {
+            console.log('radio checked', e.target.value,this.radioValue);
+        },
+        budgetChange(){
+            console.log(this.inputValue)
+        },
+        //广告计划下的预算
+        changebudget(){
+            this.offerPriceVisiable=true;
+            this.ModalTitle='预算'
+            typeValue='预算'
+        },
+        //修改出价
+        changeofferPrice(){
+            this.offerPriceVisiable=true;
+            this.ModalTitle='出价'
+            typeValue='出价';
+            this.modifyTableCol[2].title='出价';
+            
+            this.modifyTableCol[3].title='统一修改出价';
+            
+        },
+        handleOk(e) {
+            console.log(e);
+            this.offerPriceVisiable = false;
+        },
+        //修改规则的改变
+        modifyRulesChange(e){
+            if(e.target.value=='total'){
+                this.inputValue=''
+            }else{
+                this.inputValue=10000
+            }
+        },
+        //更改文字提示的父节点
+        getPopupContainer(){
+            console.log(this);
+            return this.$el
+        },
+
+        //点击修改广告名
+        // changecampaignName(text,record){
+        //     console.log(text,record)
+        // },
+        
+        onCellChange(key, dataIndex, value) {
+            console.log(key, dataIndex, value)
+            const dataSource = [...this.data];
+            const target = dataSource.find(item => item.key === key);
+            if (target) {                              
+                target[dataIndex] = value;
+                    this.data = dataSource;       
+            }
+            console.log(this.data)
+        },
+
+
+        //复制广告计划
+        copyPlan(record){
+            this.copyRecord=record;
+            this.copyPlanVisiable=true;
+        },
+
+        copyPlanOk(e) {
+            this.copyPlanVisiable = false;
+            console.log(this.copyNum,'---',this.copyGroup)
+        },
+    },
+    mounted() {
+        console.log(this);
+        this.data=data;
+    },
+    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'){
+            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 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">
+     .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
+        background-color: #fff;
+        color: #333;
+    }
+    #batchModal{
+        .rules,.totalPrice{
+            font-weight: 600;
+        }
+
+        .selectePlan{        
+            font-size: 14px;
+            font-weight: 700;
+            color: #333;
+            padding: 20px 0;
+        }
+        .totalPrice{
+            margin-left: 20px;
+        }
+        .modifyTable{
+            margin-top: 20px;
+            width: 100%;
+            height: 400px;
+            overflow: auto;
+            font-weight: 600;
+        }
+    }
+    #copyModal{
+        .ant-modal-header{
+            text-align: center;
+        }
+        .copyTip{
+            font-size: 12px;
+            color: #999;
+        }
+        .copyName{
+            width: 118px;
+            display: inline-block;
+            text-align: right;
+            .copyKeyStart{
+                color: red;
+            }
+        }
+        // font-weight: 600;
+    }
+</style>
+<style lang="scss" scoped>
+.toutiaoBatch{
+    background-color: #fff;
+    padding: 10px 20px;
+    position: relative;
+    width: 100%;
+    .OptinItem{
+        display: inline-block;
+        margin-right: 15px;
+        .ok{
+            margin-right: 15px;
+        }
+    }
+    .topOptions{
+        padding: 15px 0;
+    }
+    .optionBtn{
+        // display: inline-block;
+        float: right;
+        .searchBtn{
+            margin-right: 10px;
+        }
+    }
+    .tableArea{
+        .tableOption{
+            padding: 20px 0;
+        }
+    }
+    
+    
+}
+
+</style>

+ 361 - 0
src/views/modules/BatchCreate/crowedPackage.vue

@@ -0,0 +1,361 @@
+<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 @change="dateChange" />
+                </span>
+
+            </div>
+            <div class="bottom">
+                <div class="optItem">
+                    <a-select :size="size" placeholder='覆盖数量' style="width: 200px" @change="handleChange">
+                        <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="size" placeholder='类别' style="width: 200px" @change="handleChange">
+                        <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-input-search placeholder="input search text" style="width: 200px" @search="onSearch" />
+                </div>
+                <div class="optionBtn">
+                     <a-button class="search" type='primary' @click="search">查询</a-button>
+                </div>
+            </div>
+        </div>
+        <div class="tableBOX">
+            <div class="tableOpt">
+                <a-button class="search" type='primary' @click="search">查询</a-button>
+                <a-button class="search" type='primary' @click="search">同步</a-button>
+                <a-select :size="size" placeholder='批量操作' style="width: 200px" @change="handleChange">
+                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
+                        {{ (i + 9).toString(36) + i }}
+                    </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="data" 
+                :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">
+                        <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
+                    </span>
+                    <span slot="options" slot-scope="record">
+                        <a href="javascript:;" style="margin-right:10px">编辑</a>
+                        <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
+                        <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
+                    </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>
+                </a-table>
+            </div>
+        </div>
+    </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;
+
+let 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);
+        
+    },
+}
+
+export default {
+    components: {
+        editableCell,
+    },
+    data() {
+        return {
+            //treeselect的参数
+            treeValue: [],
+            treeData: [],
+            SHOW_PARENT,
+            accountId:[],
+            dateValue:null,//日期选择器
+             //主页的表格
+            data:[],
+            columns,
+            selectedRowKeys:[],
+            rowSelection,
+            editID:0,
+
+        }
+    },
+    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
+        },
+
+        //日期改变
+        dateChange(date, dateString) {
+            console.log(date, dateString);
+            this.dateValue=date;
+        },
+        //按名字搜索
+        onSearch(value) {
+            console.log(value);
+        },
+
+        //查询按钮
+        search(){
+
+        },
+    },
+    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'){
+            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 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" scoped>
+.crowedPackage{
+    .optHeader{
+        margin: 15px 0;
+        background: #fff;
+        .optinItem{
+            display: inline-block;
+            margin-right: 15px;
+            .ok{
+                margin-right: 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{
+        .tableOpt{
+            margin-bottom: 10px;
+            .search{
+                margin-right: 15px;
+            }
+            .addCol{
+                float:right;
+
+            }
+        }
+        
+    }
+
+}
+</style>

+ 104 - 0
src/views/modules/BatchCreate/editableCell.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="myedit">
+        <div class="editable-cell">
+        <div v-if="editable" class="editable-cell-input-wrapper">
+          <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
+            type="check"
+            class="editable-cell-icon-check"
+            @click="check"
+          />
+        </div>
+        <div v-else class="editable-cell-text-wrapper">
+          {{ value*1? `日预算:${value*1}` :value }}
+          
+          <a-icon type="edit" class="editable-cell-icon" @click="edit" />
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ["text",'slotName'],
+        
+        data() {
+            return {
+              value: this.text,
+              editable: false,
+            };
+        },
+        methods: {
+            handleChange(e) {
+              console.log(e)
+              const value = e.target.value;
+              if(this.slotName=='groupBudget'){
+                if(this.value*1){
+                  if(value*1 && value*1>300 &&value*1<9999999.99){
+                    this.value = value;
+                  }else{
+                    this.$message.error('请输入300-9999999.99的数')
+                  }
+                }else{
+                  this.value='不限'
+                }    
+              }
+              
+            },
+            check() {
+              this.editable = false;
+              this.$emit('change', this.value);
+            },
+            edit() {
+              this.editable = true;
+            },
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+.myedit{
+  .editable-cell {
+  position: relative;
+}
+
+.editable-cell-input-wrapper,
+.editable-cell-text-wrapper {
+  padding-right: 24px;
+}
+
+.editable-cell-text-wrapper {
+  padding: 5px 24px 5px 5px;
+}
+
+.editable-cell-icon,
+.editable-cell-icon-check {
+ position: absolute;
+  right: 0;
+  top: 6px;
+  width: 20px;
+  cursor: pointer;
+}
+
+.editable-cell-icon {
+  line-height: 18px;
+  display: none;
+}
+
+.editable-cell-icon-check {
+  line-height: 28px;
+}
+
+.editable-cell:hover .editable-cell-icon {
+  display: inline-block;
+}
+
+.editable-cell-icon:hover,
+.editable-cell-icon-check:hover {
+  color: #108ee9;
+}
+
+.editable-add-btn {
+  margin-bottom: 8px;
+}
+}
+</style>

+ 2 - 2
src/views/modules/Statistics/Statistics.vue

@@ -744,8 +744,8 @@ export default {
             环比:${da}<br/> `
             } else {
               return `${params[0].marker}时间:${params[0].seriesName}:${showName}:${params[0].data}  <br/>
-            ${params[1].marker}时间:${params[1].seriesName}:${showName}:${params[1].data}  <br/>
-            环比:${da}<br/> `
+              ${params[1].marker}时间:${params[1].seriesName}:${showName}:${params[1].data}  <br/>
+              环比:${da}<br/> `
             }
           }
         },

+ 35 - 11
src/views/modules/Statistics/accountReport.vue

@@ -6,16 +6,28 @@
           <span>项目选择:</span>
           <a-tree-select
             v-model="treeValue"
-            style="width: 575px;height:30px"
+            show-search
+            style="width: 600px;height:30px"
             :dropdownMatchSelectWidth='true'
-            :tree-data="treeData"
+            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"              
             tree-checkable
+            searchPlaceholder='请输入账户关键字搜索'
             :show-checked-strategy="SHOW_PARENT"
-            placeholder="请选择项目和账户"
+            placeholder="请选择项目和账户或搜索账户关键字"
+            treeNodeFilterProp="title"
             :allowClear="true"
             @change="treeChange"
-            :maxTagCount='2'            
-          />
+            @search="treeSearch"
+            @select="treeSelect"                        
+             :maxTagCount='1'    
+            :tree-data="treeData"
+            :filterOption='filterOption'
+          >
+              <!-- <a-tree-select-node v-for="(item) in treeData" :key="item.key" :value="item.value" :title="item.title">
+                  <a-tree-select-node v-for="(ele) in item.children" :key="ele.key" :value="ele.value" :title="ele.title" >
+                  </a-tree-select-node>
+              </a-tree-select-node> -->
+          </a-tree-select>
       <div style="float:right"   @click="opendate">
             <DatePicker :openOptions='openOptions' :left=left :parentDate='dateValue' />
       </div>
@@ -524,7 +536,7 @@ export default {
     //项目改变后的事件
     treeChange(val) {
       // console.log(this.treeData)
-      // console.log(val[0])
+      console.log(val)
       this.accountId = [];
       //选择一个后禁用其他
       if(val.length==1){
@@ -602,12 +614,12 @@ export default {
       if(val){
         val.forEach((ele,index)=>{
           if(ele*1){
-              this.accountId.push(ele)
+              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)
               })
@@ -615,14 +627,26 @@ export default {
         })       
       }
       
-     
+     console.log(this.accountId)
+    },
+    treeSearch(){
+      console.log(arguments);
+    },
+    treeSelect(){
+      // console.log(arguments);
+      // this.treeValue=arguments[0].value
     },
     disabledDate(current) {
       // console.log(current)
 
-      return current && current > moment().subtract(1, 'day')
+       return current && current > moment().subtract(1, 'day')
+    },
+    filterOption(input, option){
+      console.log(input, option)
+      return (
+          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        );
     },
-
     //查询按钮的事件
     searchgetData(){
       

+ 191 - 85
src/views/modules/Statistics/performanceRelated/performanceRelated.vue

@@ -8,7 +8,7 @@
                         <a-select-option value="">
                             全部
                             </a-select-option>
-                            <a-select-option v-for="(item) in selectOption.company" :value='item.companyCode' :key="item.companyId">
+                            <a-select-option v-for="(item) in selectOption.company" :value='item.companyId' :key="item.companyId">
                                {{item.area}}
                             </a-select-option>                   
                         </a-select>
@@ -16,18 +16,18 @@
                 <div>
                     <span>媒体类型:</span>
                     <a-select v-model="mediaType" style="width: 120px" @change="mediaTypeChange">
-                        <a-select-option value="">
+                        <a-select-option :value="0">
                             全部
                         </a-select-option>
-                        <a-select-option v-for="(value,key) in selectOption.mediaType" :value='key' :key='key'>
-                            {{value}}
+                        <a-select-option v-for="(item) in selectOption.mediaType" :value='item.num' :key='item.code'>
+                            {{item.name}}
                         </a-select-option>                    
                     </a-select>
                 </div>
                 <div>
                     <span>年份:</span>
                     <a-select v-model="years" style="width: 120px" @change="yearsChange">
-                        <a-select-option value="">
+                        <a-select-option :value='0'>
                             全部
                         </a-select-option>
                         <a-select-option v-for="(item,index) in yearsArr" :value="item" :key='index'>
@@ -52,12 +52,23 @@
             
             <div class="optionBTN">
                 <div>                
+                    <span>部门:</span>
+                    <a-select v-model="department" style="width: 120px" @change="departmentChange">
+                        <a-select-option value=''>
+                            全部
+                        </a-select-option>
+                        <a-select-option v-for="(item,index) in selectOption.depart" :value="item" :key="index">
+                            {{item}}
+                        </a-select-option>                   
+                    </a-select>
+                </div>
+                <div>                
                     <span>职位:</span>
                     <a-select v-model="position" style="width: 120px" @change="positionChange">
-                        <a-select-option value="">
+                        <a-select-option value=''>
                             全部
                         </a-select-option>
-                        <a-select-option v-for="item in selectOption.post" :value="item.id" :key="item.id">
+                        <a-select-option v-for="item in selectOption.post" :value="item.roleCode" :key="item.id">
                             {{item.roleName}}
                         </a-select-option>                   
                     </a-select>
@@ -81,7 +92,7 @@
                 :dataSource="tableData"
                 bordered
                 id="outTable"
-                :pagination="false"
+                :pagination="ipagination"
                 :scroll="{ x: scrollX }"
                 :loading="loading"
                 ref="accountTable"
@@ -92,13 +103,23 @@
                 <span slot="operation" slot-scope="text, record">
                         <a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
                  </span>
+                 <span slot="cost" slot-scope="cost">{{cost | decimalsHandle}}</span>
+                 
+                 <span slot="performance" slot-scope="performance">{{performance | decimalsHandle}}</span>
+                 <span slot="mediaType" slot-scope="text">
+                     <span v-if="text==1">头条</span>
+                     <span v-if="text==2">快手</span>
+                     <span v-if="text==3">头条内广</span>
+                     <span v-if="text==4">快手内广</span>
+                 </span>
             </a-table>
         </div>
          <!-- 明细表 -->
         <div class="detailBox">
-            <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
-                <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button>
-                <a-table
+            <a-modal v-model="visibleDetail" title="详细信息" width="50%" :footer="null" id="detailBox">
+                <!-- <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button> -->
+                <div class="myTable">
+                    <a-table
                     :columns="detailColumns"
                     :data-source="detailData"
                     bordered
@@ -106,9 +127,13 @@
                     :pagination="false"
                     :loading='loadingDetail'
                     style="word-break: break-all;"
-                >
-                    <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
-                </a-table>
+                    id="myTable"
+                    :scroll="{ y: 500 }"
+                    >
+                        <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
+                    </a-table>
+                </div>
+               
             </a-modal>
         </div>
         
@@ -124,59 +149,66 @@ import { JeecgListMixin } from '@/mixins/ipagination'
 const columnsFixd = [
   {
     title: '姓名',
-    dataIndex: 'name',
+    dataIndex: 'userName',
     align: 'center',
-    key:'name',
-    scopedSlots: { customRender: 'name' }
+    key:'userName',
+    scopedSlots: { customRender: 'userName' }
+  },
+  {
+    title: '部门',
+    dataIndex: 'department',
+    align: 'center', 
+    key: 'department',
+    scopedSlots: { customRender: 'department' }
   },
   {
     title: '职位',
-    dataIndex: 'position',
+    dataIndex: 'roleName',
     align: 'center',
     
-    key: 'position',
-    scopedSlots: { customRender: 'position' }
+    key: 'roleName',
+    scopedSlots: { customRender: 'roleName' }
   },
   {
     title: '媒体类型',
-    dataIndex: 'mediatype',
+    dataIndex: 'mediaType',
     align: 'center',
-    
+    scopedSlots: { customRender: 'mediaType' }
   },
    {
     title: '季度',
-    dataIndex: 'projectName',
+    dataIndex: 'quarters',
     align: 'center',
-    
+    scopedSlots: { customRender: 'quarters' }
   },
   {
     title: '消耗',
-    dataIndex: 'materialDesc',
+    dataIndex: 'cost',
     align: 'center',
-    scopedSlots: { customRender: 'operation' },
+    scopedSlots: { customRender: 'cost' },
     sorter:()=>{}
   },
   {
     title: '提成比例',
-    dataIndex: 'tc',
-    align: 'center',
-    scopedSlots: { customRender: 'operation' },
-    sorter:()=>{}
-  },
-  {
-    title: '应得绩效',
-    dataIndex: 'jx',
+    dataIndex: 'point',
     align: 'center',
-    scopedSlots: { customRender: 'operation' },
-    sorter:()=>{}
-  },
-  {
-    title: '管理岗绩效',
-    dataIndex: 'gl',
-    align: 'center',
-    scopedSlots: { customRender: 'operation' },
+    scopedSlots: { customRender: 'point' },
     sorter:()=>{}
   },
+            // {
+            //     title: '应得绩效',
+            //     dataIndex: 'performance',
+            //     align: 'center',
+            //     scopedSlots: { customRender: 'performance' },
+            //     sorter:()=>{}
+            // },
+            // {
+            //     title: '管理岗绩效',
+            //     dataIndex: 'additionalFees',
+            //     align: 'center',
+            //     scopedSlots: { customRender: 'additionalFees' },
+            //     sorter:()=>{}
+            // },
   {
     title: '操作',
     dataIndex: 'operation',
@@ -188,46 +220,51 @@ const columnsFixd = [
 
 const detailColumns=[
     {
-        title: '时间',
-        dataIndex: 'date',
+        title: '季度',
+        dataIndex: 'quarters',
         align: 'center',
-        scopedSlots: { customRender: 'date' },
-        sorter:()=>{}
+        scopedSlots: { customRender: 'quarters' },
+        sorter:()=>{},
+        width:150
     },
     {
         title: '项目',
         dataIndex: 'projectName',
         align: 'center',
         scopedSlots: { customRender: 'projectName' },
-        sorter:()=>{}
+        sorter:()=>{},
+        width:200
     },
     {
         title: '账户名称',
-        dataIndex: 'accountName',
+        dataIndex: 'authName',
         align: 'center',
-        scopedSlots: { customRender: 'accountName' },
-        sorter:()=>{}
+        scopedSlots: { customRender: 'authName' },
+        sorter:()=>{},
+        width:350,
     },
     {
         title: '消耗',
-        dataIndex: 'materialDesc',
+        dataIndex: 'cost',
         align: 'center',
-        scopedSlots: { customRender: 'operation' },
+        scopedSlots: { customRender: 'cost' },
         sorter:()=>{}
   },
 ]
 
 export default {
+    mixins:[JeecgListMixin],
     data() {
         return {
             selectOption:{},
             yearsArr:[],
             quarterArr:[],
             company:'',
-            mediaType:'',
+            mediaType:0,
             position:'',
+            department:'',
             quarter:'',//季度数据
-            years:'',
+            years:0,
             nameValue:'',
             //table数据
             columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
@@ -237,6 +274,8 @@ export default {
             tableWidth: '',//设置表格的列宽
             loading:false,
 
+
+
             visibleDetail:false, //明细表的开关
             detailData:[],
             loadingDetail:false,
@@ -248,26 +287,40 @@ export default {
         moment,
         //chaxun anniu 
         search(){
-
+            this.tableHttp();
         },
          //导出报表
         exportExcel() {
            
-            var name = this.data.filter(item => {
-                return item.signature == this.signature
-            })[0].projectName
-            downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListDetailExportExcel', {
-                startDate: this.timedata[0],
-                endDate: this.timedata[1],
-                signature: this.signature
+            // var name = this.data.filter(item => {
+            //     return item.signature == this.signature
+            // })[0].projectName
+            let companyName=''
+            if(this.company){
+                this.selectOption.company.forEach((item)=>{
+                    if(item.companyId==this.company){
+                        companyName=item.area
+                    }
+                   
+                })
+            }
+            var name =`${companyName || '全公司'}_${this.year || '全年份'}_${this.quarter || '全季度'}_${this.mediaType|| '全部类型'}`;
+            
+            downFilePost('/ctop/performance/show/excel', {
+                year:this.years,
+                quarter:this.quarter,
+                company:this.company,
+                userName:this.nameValue,
+                roleCode:this.position,
+                mediaType:this.mediaType
             }).then(res => {
                 let blob = new Blob([res], {
-                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                 })
                 let downloadElement = document.createElement('a')
                 let href = window.URL.createObjectURL(blob) //创建下载的链接
                 downloadElement.href = href
-                downloadElement.download = name + '-' +this.timedata[0] + '-' + this.timedata[1]+'.xlsx'    //下载后文件名
+                downloadElement.download = name+'.xlsx'    //下载后文件名
                 document.body.appendChild(downloadElement)
                 downloadElement.click() //点击下载
                 document.body.removeChild(downloadElement) //下载完成移除元素
@@ -281,24 +334,23 @@ export default {
             this.visibleDetail = true
             this.detailData = []
             this.loadingDetail=true
-            this.signature=record.signature
-            console.log(this.signature)
-            postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
-                startDate: this.timedata[0],
-                endDate: this.timedata[1],
-                signature: record.signature,
-                accountIds:this.appId
+            postAction('/ctop/performance/show/operateDetail', {
+                year:record.year,
+                quarter:record.quarter,
+                userId:record.userId,
+                mediaType:record.mediaType
             }).then(res => {
-                let resArr = []
+                // let resArr = []
                 this.loadingDetail=false
                 console.log(res)
                 if (res.success) {
-                let result = res.result
-                this.detailData.push({ ...result, key: 1 })
-                result.map((item, index) => {
-                    item.key = index
-                })
-                this.detailData = result
+                    let result = res.result
+                    // this.detailData.push({ ...result, key: 1 })
+                    result.map((item, index) => {
+                        item.key = index;
+                        item.quarters=record.quarters
+                    })
+                    this.detailData = result
                 }
             })
         },
@@ -306,11 +358,11 @@ export default {
         //获取选择框的信息
         getInfoHttp(){
             getAction('/ctop/performance/show/getPerformanceInfo',{}).then((res)=>{
-                console.log(res);
+                // console.log(res);
                 
                 this.selectOption=res.result;
                 this.yearsArr=Reflect.ownKeys(res.result.data).splice(0,Reflect.ownKeys(res.result.data).length-1)
-                console.log(this.yearsArr)
+                // console.log(this.yearsArr)
             })
         },
         //职位改变
@@ -318,19 +370,23 @@ export default {
             console.log(val)
             this.position=val;
         },
+        //部门改变
+        departmentChange(val){
+            this.department=val
+        },
         //公司改变
         companyChange(val){
-            console.log(val)
+            // console.log(val)
             this.company=val
         },
         //媒体类型
         mediaTypeChange(val){
-            console.log(val)
+            // console.log(val)
             this.mediaType=val
         },
         //年份改变
         yearsChange(val){
-            console.log(val)
+            // console.log(val)
             this.years=val;
             if(val==''){
                 this.quarterArr=[];
@@ -341,7 +397,7 @@ export default {
         },
         //季度改变
         quarterChange(val){
-            console.log(val)
+            // console.log(val)
             this.quarter=val;
             
         },
@@ -362,9 +418,59 @@ export default {
             this.tableHttp();
         },
 
+        //请求table的数据
+        tableHttp(){
+            this.loading=true
+            this.tableData=[]
+            postAction(`ctop/performance/show/${this.ipagination.current}/${this.ipagination.pageSize}/desc`,{
+                year:this.years,
+                quarter:this.quarter,
+                company:this.company,
+                userName:this.nameValue,
+                roleCode:this.position,
+                mediaType:this.mediaType,
+                department:this.department
+            }).then(res=>{
+                console.log(res)
+                this.loading=false;
+                if(res.success&&res.result.list.length>0){
+                    res.result.list.forEach((item,index)=>{
+                        item.key=index;
+                        item.quarters=item.year+'_'+item.quarter;
+                    })
+                    this.tableData=[...res.result.list]
+                }
+                this.ipagination.total = res.result.total   
+            })
+        },
+
+        //请求详细信息
+        detailHttp(){
+            this.loadingDetail=true
+            postAction(`ctop/performance/show/${this.ipagination.current}/${this.ipagination.pageSize}/desc`,{
+                year:this.years,
+                quarter:this.quarter,
+                company:this.company,
+                userName:this.nameValue,
+                roleCode:this.position,
+                mediaType:this.mediaType
+            }).then(res=>{
+                console.log(res)
+                this.loadingDetail=false;
+                if(res.success&&res.result.list.length>0){
+                    res.result.list.forEach((item,index)=>{
+                        item.key=index;
+                        item.quarter=item.year+'_'+item.quarter;
+                    })
+                    this.tableData=[...res.result.list]
+                }
+                this.ipagination.total = res.result.total   
+            })
+        },
     },
     mounted() {
-        this.getInfoHttp()
+        this.getInfoHttp();
+        this.tableHttp();
     },
     filters: {
         toPercentage(val) {