|
@@ -0,0 +1,221 @@
|
|
|
|
+<template>
|
|
|
|
+ <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
|
|
|
+ <a-form @submit="handleSubmit" :form="form">
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="选择广告组模板"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-select
|
|
|
|
+ showSearch
|
|
|
|
+ placeholder="选择广告主模板"
|
|
|
|
+ optionFilterProp="children"
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ @focus="handleFocus"
|
|
|
|
+ @blur="handleBlur"
|
|
|
|
+ @change="handleChange"
|
|
|
|
+ :filterOption="filterOption"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option v-for="campaign in campaignList" :key="campaign.id" :value="campaign.id">{{campaign.campaignName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="投放范围"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group v-model="deliveryRange">
|
|
|
|
+ <a-radio-button value="default">默认</a-radio-button>
|
|
|
|
+ <a-radio-button value="csj">穿山甲</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="选择用户定向模板"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-select
|
|
|
|
+ showSearch
|
|
|
|
+ placeholder="选择用户定向模板"
|
|
|
|
+ optionFilterProp="children"
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ @focus="handleFocus"
|
|
|
|
+ @blur="handleBlur"
|
|
|
|
+ @change="handleChange"
|
|
|
|
+ :filterOption="filterOption"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option v-for="campaign in campaignList" :key="campaign.id" :value="campaign.id">{{campaign.campaignName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="选择预算与出价模板"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-select
|
|
|
|
+ showSearch
|
|
|
|
+ placeholder="选择预算与出价模板"
|
|
|
|
+ optionFilterProp="children"
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ @focus="handleFocus"
|
|
|
|
+ @blur="handleBlur"
|
|
|
|
+ @change="handleChange"
|
|
|
|
+ :filterOption="filterOption"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option v-for="campaign in budgetList" :key="campaign.id" :value="campaign.id">{{campaign.name}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="选择投放目标模板"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-select
|
|
|
|
+ showSearch
|
|
|
|
+ placeholder="选择投放目标模板"
|
|
|
|
+ optionFilterProp="children"
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ @focus="handleFocus"
|
|
|
|
+ @blur="handleBlur"
|
|
|
|
+ @change="handleChange"
|
|
|
|
+ :filterOption="filterOption"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option v-for="campaign in deliverytargetList" :key="campaign.id" :value="campaign.id">{{campaign.name}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="创意方式"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-radio-group v-model="creativeType">
|
|
|
|
+ <a-radio-button value="customize">自定义创意</a-radio-button>
|
|
|
|
+ <a-radio-button value="program">程序化创意</a-radio-button>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="创意文案"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-input v-model="creativeText"></a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item
|
|
|
|
+ label="迭代数量"
|
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
|
+ :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
|
|
|
|
+ <a-input-number :min="0" :max="10" v-model="iteratorNum" @change="onChange"/>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-form-item
|
|
|
|
+ :wrapperCol="{ span: 24 }"
|
|
|
|
+ style="text-align: center"
|
|
|
|
+ >
|
|
|
|
+ <a-button htmlType="submit" type="primary">提交</a-button>
|
|
|
|
+ <a-button style="margin-left: 8px">保存</a-button>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-form>
|
|
|
|
+ </a-card>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {deleteAction, postAction, getAction} from '@/api/manage'
|
|
|
|
+ import $ from 'jquery'
|
|
|
|
+ import moment from 'moment';
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ name: 'BaseForm',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ iteratorNum:1,
|
|
|
|
+ campaignList: {},
|
|
|
|
+ deliverytargetList:{},
|
|
|
|
+ budgetList:{},
|
|
|
|
+ creativeType:'customize',
|
|
|
|
+ creativeText:'',
|
|
|
|
+ deliveryRange:'default',
|
|
|
|
+ form: this.$form.createForm(this),
|
|
|
|
+ url: {
|
|
|
|
+ dictListUrl: 'toutiao/dictitem/list',
|
|
|
|
+ campaignTemplateListUrl:'/template/campaign/list',
|
|
|
|
+ budgetTemplateListUrl:'/template/budget/list',
|
|
|
|
+ deliverytargetTemplateListUrl:'/template/deliverytarget/list'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ moment,
|
|
|
|
+ handleChange (value) {
|
|
|
|
+ console.log(`selected ${value}`);
|
|
|
|
+ },
|
|
|
|
+ handleBlur() {
|
|
|
|
+ console.log('blur');
|
|
|
|
+ },
|
|
|
|
+ handleFocus() {
|
|
|
|
+ console.log('focus');
|
|
|
|
+ },
|
|
|
|
+ filterOption(input, option) {
|
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
+ },
|
|
|
|
+ handleSubmit(e) {
|
|
|
|
+ e.preventDefault()
|
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ console.log('Received values of form: ', values);
|
|
|
|
+
|
|
|
|
+ let params = {};
|
|
|
|
+ this.dateQuantumRange = $("#table_time_selected1_time_num").val();
|
|
|
|
+ params.bidType = this.bidType;
|
|
|
|
+ params.flowControlMode = this.flowControlMode;
|
|
|
|
+ params.budgetPrice = this.budgetPrice;
|
|
|
|
+ params.budgetPriceMode = this.budgetPriceMode;
|
|
|
|
+ params.flowDateType = this.flowDateType;
|
|
|
|
+ params.startDate = this.startDate;
|
|
|
|
+ params.endDate = this.endDate;
|
|
|
|
+ params.dateQuantum = this.dateQuantum;
|
|
|
|
+ params.priceType = this.priceType;
|
|
|
|
+ params.convertPrice = this.convertPrice;
|
|
|
|
+ params.filterType = this.filterType;
|
|
|
|
+ params.dateQuantumRange = this.dateQuantumRange;
|
|
|
|
+ console.log(params)
|
|
|
|
+ postAction(this.url.insertUrl,params).then((res)=>{
|
|
|
|
+ console.log(res)
|
|
|
|
+ if(res.success){
|
|
|
|
+ alert("预算模板创建成功");
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ onChange(value) {
|
|
|
|
+ console.log(value)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created: function () {
|
|
|
|
+ let params = {};
|
|
|
|
+ params.pageSize = '1000';
|
|
|
|
+ postAction(this.url.campaignTemplateListUrl, params).then((res) => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.campaignList = res.result.records
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ params = {};
|
|
|
|
+ params.pageSize = '1000';
|
|
|
|
+ postAction(this.url.budgetTemplateListUrl, params).then((res) => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.budgetList = res.result.records
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ params = {};
|
|
|
|
+ params.pageSize = '1000';
|
|
|
|
+ postAction(this.url.deliverytargetTemplateListUrl, params).then((res) => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.deliverytargetList = res.result.records
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|