浏览代码

'绩效改'

魏志佳 5 年之前
父节点
当前提交
4e9b104851

+ 689 - 13
src/views/modules/BatchCreate/TouTiaoBatch.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="toutiaoBatch">
+        <keep-alive>  
         <div class="tabs">
-            <a-tabs  @change="callback">
+            <a-tabs v-model="tabkey" @change="callback">
                 <a-tab-pane key="group" tab="广告组">                
                 </a-tab-pane>
                 <a-tab-pane key="plan" tab="广告计划">              
@@ -13,6 +14,7 @@
                 </a-button>
             </a-tabs>
         </div>
+        </keep-alive>
         <div class="topOptions">
             <span class="OptinItem">
                 <a-select  style="width: 120px" @change="statusChange" placeholder="请选择状态">    
@@ -40,8 +42,7 @@
         </div>
         <div class="tableArea">
             <div class="tableOption">
-                <span class="OptinItem">
-                    
+                <span class="OptinItem">                    
                     <a-tooltip>
                         <template slot="title" :getPopupContainer='getPopupContainer'>
                         点我就可以批量启动、暂停、删除你的选择哦~
@@ -50,34 +51,420 @@
                     </a-tooltip>
                 </span>
                 <span class="OptinItem">
-                    <a-select  style="width: 120px" @change="statusChange" placeholder="" :disable='selectDisable'>    
+                    <a-select  style="width: 120px" @change="optChange" placeholder="" :disabled='selectDisable'>    
                         <a-select-option value="open" >
                             启动
                         </a-select-option>
-                        <a-select-option value="close">
+                        <a-select-option value="pause">
                             暂停
                         </a-select-option>
-                        <a-select-option value="close">
+                        <a-select-option value="delete">
                             删除
                         </a-select-option>
                     </a-select>
                 </span>
                  <span class="OptinItem">
-                    <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
-                    <a-button type='default' @click="reset" v-show="tabkey!='idea'">更改预算</a-button>
-                    <a-button type='default' @click="reset" v-show="tabkey=='plan'">更改出价</a-button>
+                    <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:'',//媒体账号
@@ -85,20 +472,62 @@ export default {
             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('status--'+value)
+        statusChange(value){          
+            console.log(value);
+
         },
         //日期改变
         dateChange(date, dateString) {
@@ -116,24 +545,226 @@ export default {
         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)
+        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">
@@ -141,13 +772,53 @@ export default {
         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;
@@ -166,7 +837,12 @@ export default {
         }
     }
     .tableArea{
-        margin-top: 20px;
+        .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/> `
             }
           }
         },

+ 25 - 1
src/views/modules/Statistics/performanceRelated/performanceRelated.vue

@@ -52,6 +52,17 @@
             
             <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=''>
@@ -144,6 +155,13 @@ const columnsFixd = [
     scopedSlots: { customRender: 'userName' }
   },
   {
+    title: '部门',
+    dataIndex: 'department',
+    align: 'center', 
+    key: 'department',
+    scopedSlots: { customRender: 'department' }
+  },
+  {
     title: '职位',
     dataIndex: 'roleName',
     align: 'center',
@@ -244,6 +262,7 @@ export default {
             company:'',
             mediaType:0,
             position:'',
+            department:'',
             quarter:'',//季度数据
             years:0,
             nameValue:'',
@@ -351,6 +370,10 @@ export default {
             console.log(val)
             this.position=val;
         },
+        //部门改变
+        departmentChange(val){
+            this.department=val
+        },
         //公司改变
         companyChange(val){
             // console.log(val)
@@ -405,7 +428,8 @@ export default {
                 company:this.company,
                 userName:this.nameValue,
                 roleCode:this.position,
-                mediaType:this.mediaType
+                mediaType:this.mediaType,
+                department:this.department
             }).then(res=>{
                 console.log(res)
                 this.loading=false;

+ 1 - 1
vue.config.js

@@ -65,7 +65,7 @@ module.exports = {
        },*/
       '/jeecg-boot': {
         // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
-        target: 'http://192.168.1.23:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+        // target: 'http://192.168.1.23:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.1.22:8080', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.0.111:8080', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.103:8080', //请求本地 需要jeecg-boot后台项目