| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500 |
- <template>
- <div class="newGroup">
-
- <div class="currentOPt">
- <div class="currentAccount">
- 选择账号:
- <a-tree-select
- show-search
- allow-clear
- dropdownMatchSelectWidth
- v-model="accountID"
- style="width: 60%"
- :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
- :tree-data="treeData"
- placeholder="请选择具体账户"
- :filterOption='filterOption'
- treeNodeFilterProp='title'
- @change='accountIDChange'
- >
-
- </a-tree-select>
- </div>
- <div class="tabBody">
- <a-tabs default-active-key="create" @change="tabChange">
- <a-tab-pane key="create" tab="新建广告组">
- <a-form :form="form">
- <a-form-item label="推广目的" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-radio-group v-decorator="['landingType',{initialValue:'APP' }]" @change="landingTypeChange">
- <a-radio-button value="APP">应用推广</a-radio-button>
- <a-radio-button value="LINK">销售线索收集</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item label="广告组预算" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-radio-group v-decorator="['budgetMode',{initialValue:'BUDGET_MODE_INFINITE' }]">
- <a-radio-button value="BUDGET_MODE_INFINITE">不限</a-radio-button>
- <a-radio-button value="BUDGET_MODE_DAY">指定日预算</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item v-if="getFormData('budgetMode')=='BUDGET_MODE_DAY'" label="日预算" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-input-number :max="9999999.99" :step="1" v-decorator="['budget',{initialValue:1000 }]" @change="budgetChange" @blur='budgetBlur' />
- <span class="tip" v-if="getFormData('budget')<1000">预算不少于1000.00元,不超过9999999.99元,请正确输入</span>
- </a-form-item>
- <a-form-item label="广告组名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-input v-decorator="['campaignName', { rules: [{ required: true ,message: '广告组名称必须填写'}] }]" />
- </a-form-item>
- <a-form-item label="广告组状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
- <a-radio-group v-decorator="['operation',{initialValue:'enable' }]">
- <a-radio-button value="enable">开</a-radio-button>
- <a-radio-button value="disable">关</a-radio-button>
- </a-radio-group>
- </a-form-item>
-
- </a-form>
- </a-tab-pane>
- <a-tab-pane key="exist" tab="选择已有广告组" forceRender>
- <div class="selectedExist">
- <a-input v-model="selectedCampaignValue" class="input" placeholder="请输入广告组id或名称" @change="selectedCampaign">
- <a-icon slot="addonAfter" type="search" />
- </a-input>
- <div class="campaign-have-list">
- <div class="campaign-have-header">列表</div>
- <div class="hasAccountID" v-if="accountID">
- <a-spin :spinning="spinning">
- <ul v-if="campaignHaveList.length>0">
- <li class="ad-d-flex ad-d-flex-between" v-for="(item,index) in campaignHaveList" :key="index" @click="goPlan(item)">
- <span class="info">{{item.name}}</span>
- <span class="landing-type">信息流_{{item.landingType_dictText}}</span>
- </li>
- </ul>
- <div v-else class="noAccountID">
- 暂无数据
- </div>
- </a-spin>
- </div>
- <div class="noAccountID" v-else>
- 选择账户后,才能选择已有广告组
- </div>
-
- </div>
- <div class="fenye" v-if="totalPage">
- <a-pagination :current='currentPage' size='small' :total='totalPage' :pageSize='10' @change="pageNoChange" />
- </div>
- </div>
-
-
- </a-tab-pane>
-
- </a-tabs>
- </div>
- <div class="creatBody">
- <a-button type='default' class="goback" @click="goback">返回</a-button>
- <a-button type='primary' @click="goShowTable" style="margin-right:20px">保存并返回</a-button>
- <a-button type='danger' @click="nextHandle" :loading='nextLoading'>创建并下一步</a-button>
- </div>
- </div>
- </div>
- </template>
- <script>
- import moment from 'moment';
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
- import qs from 'qs'
- const formItemLayout = {
- labelCol: { span: 2 },
- wrapperCol: { span: 8 },
- };
- export default {
- data() {
- return {
- nextLoading:false,
- tabKey:'create',
- accountID:undefined,
- treeData:[],
- formItemLayout,
- form: this.$form.createForm(this),
- selectedCampaignValue:undefined,
- spinning:false,
- campaignHaveList:[],
- currentPage:1,
- totalPage:0
- }
- },
- methods: {
- tabChange(key){
- console.log(key);
- this.tabKey=key;
-
- },
- accountIDChange(val){
- console.log(val,this.accountID);
- let currentData=this.treeData.filter((item)=>{
- return item.value==val
- })
- // console.log(currentData);
- if(currentData.length>0){
- this.accountID=undefined;
- this.openID=val
- }
- this.getExsitGroupList();
- console.log(this.treeData)
- this.treeData.forEach((item)=>{
- item.children.forEach(ele=>{
- if(ele.value==val){
- let accountInfo=JSON.stringify(ele)
- localStorage.setItem('accountInfo',accountInfo)
- }
- })
- })
- },
- getExsitGroupList(){
- this.spinning=true;
- getAction('/ctop/byteDanceCampaign/list',{
- accountId:this.accountID,
- pageNo:this.currentPage,
- name:this.selectedCampaignValue
- }).then(res=>{
- console.log(res)
- if(res.success){
- this.spinning=false;
- this.totalPage=res.result.total;
- this.campaignHaveList=res.result.records;
- }
- })
- },
- filterOption(input, option){
- console.log(input, option)
- return (
- option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- );
- },
- //请求项目和账户内容
- accountHttp(){
- this.treeData=[];
- this.accountID=undefined;
- getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
- if(res.success){
- // console.log(res);
- if(res.result){
- res.result.forEach((element,index) => {
- if(element){
- this.treeData.push({});
- this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
- this.treeData[index].value='project'+element.project.projectId;
- this.treeData[index].key=element.project.projectId;
- this.treeData[index].mediaId=element.project.mediaId;
- this.treeData[index].children=[];
-
- if(element.account.length){
- element.account.forEach((ele,i)=>{
- this.treeData[index].children.push({});
- this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
- this.treeData[index].children[i].value=ele.accountId;
- this.treeData[index].children[i].key=ele.accountId;
- })
-
- }
- }
- });
- // console.log(this.treeData)
-
- }
- }
- })
- },
- //获取表单的某一个属性值
- getFormData(className) {
- return this.form.getFieldValue(className)
- },
- //推广目的改变
- landingTypeChange(e){
- console.log(e.target)
- if(e.target.value=='APP'){
- this.form.setFieldsValue({
- campaignName:`应用推广_${moment().format('MM_DD_HH:SS')}`
- })
- }else if(e.target.value=='LINK'){
- this.form.setFieldsValue({
- campaignName:`销售线索收集_${moment().format('MM_DD_HH:SS')}`
- })
- }
- },
- //预算改变
- budgetChange(val){
- console.log(val)
- var strRegex = /^[0-9](.)+$/
- var re = new RegExp(strRegex)
- // console.log(re.test(res))
- if (re.test(val)) {
- return true
- } else {
- // return false
- this.$message.error('请勿输入非数字!')
- // let num = val.splice(val.length-2,1)
- // this.form.setFieldsValue({
- // budget:1000
- // })
- }
- },
- budgetBlur(e){
- console.log(e.target.value)
- if(e.target.value==0){
- this.form.setFieldsValue({
- budget:1000.0
- })
- }
- },
- nextHandle(){
- if(this.accountID){
- this.form.validateFields((err, values) => {
- if (!err) {
- this.nextLoading=true;
- console.log('Received values of form: ', values);
- if(values.budgetMode== "BUDGET_MODE_DAY" && (values.budget<1000||values.budget>9999999.99 )){
- this.$message.error('日预算不少于1000.00元,不超过9999999.99元,请正确输入')
- }else{
- postAction('/ctop/byteDanceCampaign/add',qs.stringify({
- accountId:this.accountID,
- ...values
- })).then(res=>{
- console.log(res)
- if(res.success){
- this.nextLoading=false;
- this.$message.success('广告组创建成功,1s后将跳转到新建计划页面');
- values.id=res.campaign_id;
- values.accountId=this.accountID
- let groupInfo=JSON.stringify(values)
- localStorage.setItem('groupInfo',groupInfo)
- setTimeout(() => {
- this.$router.push('/modules/BatchCreate/newPlan')
- },1000);
- }else{
- this.nextLoading=false;
- this.$message.error(res.message)
- }
- })
- }
- }else{
- this.$message.error('请正确填写必填选项')
- }
- });
- }else{
- this.$message.error('请选择具体的账户')
- }
-
- },
- goback(){
- this.$router.push('/modules/BatchCreate/TouTiaoBatch')
- this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')
- },
- selectedCampaign(e){
- // console.log(e.target.value,this.selectedCampaignValue);
- if(this.accountID){
- this.getExsitGroupList();
- }else{
- this.$message.warning('请选择账户后重试!')
- this.selectedCampaignValue=undefined;
- }
- },
- goPlan(item){
- console.log(item)
- let groupInfo=JSON.stringify(item)
- localStorage.setItem('groupInfo',groupInfo)
- this.$router.replace(`/modules/BatchCreate/newPlan`)
- },
- //分页页码改变
- pageNoChange(val){
- console.log(val);
- this.currentPage=val;
- this.selectedCampaign()
- },
- goShowTable(){
- if(this.accountID){
- this.form.validateFields((err, values) => {
- if (!err) {
- this.nextLoading=true;
- console.log('Received values of form: ', values);
- if(values.budgetMode== "BUDGET_MODE_DAY" && (values.budget<1000||values.budget>9999999.99 )){
- this.$message.error('日预算不少于1000.00元,不超过9999999.99元,请正确输入')
- }else{
- postAction('/ctop/byteDanceCampaign/add',qs.stringify({
- accountId:this.accountID,
- ...values
- })).then(res=>{
- console.log(res)
- if(res.success){
- this.nextLoading=false;
- this.$message.success('广告组创建成功,即将返回批量页面');
- values.id=res.campaign_id;
- values.accountId=this.accountID
- let groupInfo=JSON.stringify(values)
- localStorage.setItem('groupInfo',groupInfo)
- setTimeout(() => {
- this.$router.push('/modules/BatchCreate/TouTiaoBatch')
- },1000);
- }else{
- this.nextLoading=false;
- this.$message.error(res.message)
- }
- })
- }
- }else{
- // console.log(err)
- this.$message.error('请正确填写必填选项')
- }
- });
- }else{
- this.$message.error('请选择具体的账户')
- }
- },
- },
- mounted() {
- this.accountHttp();
- let name=this.getFormData('landingType')
- if(name=='APP'){
- this.form.setFieldsValue({
- campaignName:`应用推广_${moment().format('MM_DD_HH:SS')}`
- })
- }else{
- this.form.setFieldsValue({
- campaignName:`销售线索收集_${moment().format('MM_DD_HH:SS')}`
- })
- }
- },
- // beforeCreate() {
- // this.form = this.$form.createForm(this, { name: 'validate_other' });
- // },
- }
- </script>
- <style lang="scss">
- .newGroup{
- .ant-btn-danger {
- background-color: #ff4d4f !important;
- }
- }
- </style>
- <style lang="scss" scoped>
- .newGroup{
- ul, li {
- list-style: none;
- padding: 0;
- margin: 0;
- }
- // background: rgb(249,249,249);
- // padding: 20px;
- .currentOPt{
- .currentAccount{
- height: 70px;
- padding: 20px 30px;
- background: #fff;
- margin-bottom: 20px;
- }
- .tabBody{
- background: #fff;
- margin-bottom: 20px;
- padding: 20px 30px;
- .tip{
- font-size: 12px;
- color: tomato;
- display: block;
- margin-top: 5px;
- height: 20px;
- line-height: 20px;
-
- }
- .selectedExist{
- width: 600px;
- .input{
- margin-bottom:16px ;
- }
- .campaign-have-list{
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: #333;
- border: 1px solid #DADFE3;
- border-radius: 4px;
- margin-bottom: 16px;
- height: 388px;
- .campaign-have-header {
- height: 38px;
- width: 100%;
- padding-left: 13px;
- line-height: 38px;
- background: #f8f9fa;
- border-radius: 4px 4px 0px 0px;
- border-bottom: 1px solid #DADFE3;
- }
- .campaign-have-list ul {
- width: 100%;
- height: 350px;
- padding-top: 6px;
-
- }
- li{
- padding: 6px 10px;
- cursor: pointer;
- }
- li:hover{
- background: #EDF1F5;
- }
- .ad-d-flex-between {
- justify-content: space-between !important;
- }
- .ad-d-flex, .ad-btn {
- display: flex;
- align-items: center;
- }
- .byted-loading-v {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 996;
- background-color: hsla(0,0%,96%,.9);
- }
- .info{
- width: 60%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .landing-type {
- color: #999;
- font-size: 12px;
- white-space: nowrap;
- }
- }
- .noAccountID{
- font-size: 14px;
- text-align: center;
- color: #999;
- line-height: 388px;
- }
- .fenye{
- height: 60px;
- padding-top: 12px;
- text-align: right;
- }
- }
- }
- .creatBody{
- background: #fff;
- margin-bottom: 20px;
- padding: 20px 30px;
- text-align: right;
- .goback{
- margin-right: 20px;
- }
- }
- }
- }
- </style>
|