|
@@ -0,0 +1,172 @@
|
|
|
+<template>
|
|
|
+ <div class="toutiaoBatch">
|
|
|
+ <div class="tabs">
|
|
|
+ <a-tabs @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>
|
|
|
+ <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="statusChange" placeholder="" :disable='selectDisable'>
|
|
|
+ <a-select-option value="open" >
|
|
|
+ 启动
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="close">
|
|
|
+ 暂停
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value="close">
|
|
|
+ 删除
|
|
|
+ </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>
|
|
|
+ </span>
|
|
|
+ <span class="optionBtn">
|
|
|
+ <a-button type='primary' @click="reset">自定义列</a-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ account:'',//媒体账号
|
|
|
+ optionId:'',//input输入的id或关键词
|
|
|
+ dateValue:'',//日期选择框选择的事件--我赋值的是dateString
|
|
|
+ tabkey:'group',//tab选中的页
|
|
|
+ selectDisable:true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //tab切换页的函数
|
|
|
+ callback(key) {
|
|
|
+ console.log(key);
|
|
|
+ },
|
|
|
+ //跳转到批量页面
|
|
|
+ goBatch(){
|
|
|
+
|
|
|
+ },
|
|
|
+ //状态改变
|
|
|
+ statusChange(value){
|
|
|
+ console.log('status--'+value)
|
|
|
+ },
|
|
|
+ //日期改变
|
|
|
+ dateChange(date, dateString) {
|
|
|
+ console.log(date, dateString);
|
|
|
+ },
|
|
|
+ //输入框查询事件
|
|
|
+ onSearch(value){
|
|
|
+ console.log('input--'+value);
|
|
|
+ },
|
|
|
+ //查询按钮事件
|
|
|
+ search(){
|
|
|
+
|
|
|
+ },
|
|
|
+ //重置按钮事件
|
|
|
+ reset(){
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //改变批量操作的按钮
|
|
|
+ changeSelectStatus(){
|
|
|
+ this.selectDisable=false;
|
|
|
+ },
|
|
|
+ //批量操作的确定按钮
|
|
|
+ isOkHandle(){
|
|
|
+ this.selectDisable=true;
|
|
|
+ },
|
|
|
+ //更改文字提示的父节点
|
|
|
+ getPopupContainer(){
|
|
|
+ console.log(this);
|
|
|
+ return this.$el
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(this)
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
|
|
|
+ background-color: #fff;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.toutiaoBatch{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px 20px;
|
|
|
+ position: relative;
|
|
|
+ .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{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|