|
@@ -13,7 +13,7 @@
|
|
|
label="模板名称"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <a-input v-model="name" placeholder="请输入模板名称">
|
|
|
+ <a-input v-model="name" placeholder="请输入模板名称">
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
@@ -47,7 +47,6 @@
|
|
|
<a-select
|
|
|
slot="addonBefore"
|
|
|
v-model="budgetPriceMode"
|
|
|
- v-decorator="['prefix',{ initialValue: 'BUDGET_MODE_DAY' }]"
|
|
|
style="width: 100px">
|
|
|
<a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
|
|
|
<a-select-option value="BUDGET_MODE_TOTAL">总预算</a-select-option>
|
|
@@ -74,16 +73,16 @@
|
|
|
<a-range-picker
|
|
|
name="buildTime"
|
|
|
style="width: 100%"
|
|
|
- v-model="time"
|
|
|
- />
|
|
|
+ v-model="time"/>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
label="投放时段"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <a-radio-group @change="dateQuantumChange" v-model="dateQuantum">
|
|
|
+ <a-radio-group
|
|
|
+ v-model="dateQuantum" @change="dateQuantumChange">
|
|
|
<a-radio-button value="date_unlimited">不限</a-radio-button>
|
|
|
- <a-radio-button value="date_appoint">指定时间段</a-radio-button>
|
|
|
+ <a-radio-button value="date_appoint">按时间段投放</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
@@ -92,6 +91,7 @@
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
<div id="table_time_selected1" class="table_time_selected1">
|
|
|
+
|
|
|
</div>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
@@ -108,20 +108,20 @@
|
|
|
label="目标转化出价"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <a-input-number v-model="convertPrice" :min="0" :max="10"/>
|
|
|
+ <a-input-number v-model="convertPrice" :min="0" :max="10000000"/>
|
|
|
元
|
|
|
</a-form-item>
|
|
|
- <a-form-item
|
|
|
- label="过滤已转化用户"
|
|
|
- :labelCol="labelCol"
|
|
|
- :wrapperCol="wrapperCol">
|
|
|
- <a-radio-group v-model="filterType">
|
|
|
- <a-radio-button v-for="filterType in filterTypeList" :key="filterType.itemValue"
|
|
|
- :value="filterType.itemValue">
|
|
|
- {{filterType.itemText}}
|
|
|
- </a-radio-button>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
+<!-- <a-form-item-->
|
|
|
+<!-- label="过滤已转化用户"-->
|
|
|
+<!-- :labelCol="labelCol"-->
|
|
|
+<!-- :wrapperCol="wrapperCol">-->
|
|
|
+<!-- <a-radio-group v-model="filterType">-->
|
|
|
+<!-- <a-radio-button v-for="filterType in filterTypeList" :key="filterType.itemValue"-->
|
|
|
+<!-- :value="filterType.itemValue">-->
|
|
|
+<!-- {{filterType.itemText}}-->
|
|
|
+<!-- </a-radio-button>-->
|
|
|
+<!-- </a-radio-group>-->
|
|
|
+<!-- </a-form-item>-->
|
|
|
</a-form>
|
|
|
</a-spin>
|
|
|
</a-modal>
|
|
@@ -129,10 +129,11 @@
|
|
|
|
|
|
<script>
|
|
|
import {deleteAction, postAction, getAction} from '@/api/manage'
|
|
|
+ import pick from 'lodash.pick'
|
|
|
import jq from 'jquery'
|
|
|
import moment from 'moment';
|
|
|
import AFormItem from "ant-design-vue/es/form/FormItem";
|
|
|
-
|
|
|
+ let dateQuantumRangeConst = '';
|
|
|
export default {
|
|
|
name: 'ByteDanceBudgetTemplateModal',
|
|
|
components: {AFormItem},
|
|
@@ -141,7 +142,7 @@
|
|
|
title: "操作",
|
|
|
visible: false,
|
|
|
model: {},
|
|
|
- time: [],
|
|
|
+ time:[],
|
|
|
labelCol: {
|
|
|
xs: {span: 24},
|
|
|
sm: {span: 5},
|
|
@@ -150,12 +151,25 @@
|
|
|
xs: {span: 24},
|
|
|
sm: {span: 16},
|
|
|
},
|
|
|
+ // validatorRules: {
|
|
|
+ // name: {rules: [{required: true, message: '请输入模板名称!'}]},
|
|
|
+ // convertPrice: {rules: []},
|
|
|
+ // priceType: {rules: []},
|
|
|
+ // dateQuantum: {rules: []},
|
|
|
+ // flowDateType: {rules: []},
|
|
|
+ // budgetPrice:{rules:[]},
|
|
|
+ // budgetPriceMode: {rules: []},
|
|
|
+ // flowControlMode: {rules: []},
|
|
|
+ // bidType: {rules: []},
|
|
|
+ // time:{rules:[]}
|
|
|
+ // },
|
|
|
+ name:'',
|
|
|
confirmLoading: false,
|
|
|
convertPrice: 0,
|
|
|
budgetPrice: 0,
|
|
|
budgetPriceMode: 'BUDGET_MODE_DAY',
|
|
|
showDateFlowRange: false,
|
|
|
- showDateQuantumRange:false,
|
|
|
+ showDateQuantumRange:true,
|
|
|
flowControlMode: 'FLOW_CONTROL_MODE_FAST',
|
|
|
flowDateType: 'SCHEDULE_FROM_NOW',
|
|
|
dateQuantum: 'date_unlimited',
|
|
@@ -177,13 +191,64 @@
|
|
|
},
|
|
|
methods: {
|
|
|
add() {
|
|
|
- this.edit({});
|
|
|
+ this.edit({
|
|
|
+ id:null,
|
|
|
+ time:[],
|
|
|
+ convertPrice:0,
|
|
|
+ priceType:'PRICING_OCPM',
|
|
|
+ dateQuantum:'date_unlimited',
|
|
|
+ dateQuantumRange:'',
|
|
|
+ flowDateType:'SCHEDULE_FROM_NOW',
|
|
|
+ budgetPrice:0,
|
|
|
+ budgetPriceMode:'BUDGET_MODE_DAY',
|
|
|
+ flowControlMode:'FLOW_CONTROL_MODE_FAST',
|
|
|
+ bidType:'SMART_BID_CUSTOM',
|
|
|
+ filterType:'NO_EXCLUDE'
|
|
|
+ });
|
|
|
},
|
|
|
edit(record) {
|
|
|
this.form.resetFields();
|
|
|
+
|
|
|
+ // this.time[0] = record.startDate
|
|
|
+ // this.time[1] = record.endDate
|
|
|
this.model = Object.assign({}, record);
|
|
|
this.visible = true;
|
|
|
-
|
|
|
+ this.id=record.id
|
|
|
+ this.name=record.name
|
|
|
+ this.convertPrice=record.convertPrice
|
|
|
+ this.budgetPrice=record.budgetPrice
|
|
|
+ this.budgetPriceMode=record.budgetPriceMode
|
|
|
+ this.flowControlMode=record.flowControlMode
|
|
|
+ this.flowDateType=record.flowDateType
|
|
|
+ this.dateQuantum=record.dateQuantum
|
|
|
+ if(record.dateQuantumRange != undefined){
|
|
|
+ this.dateQuantumRange=record.dateQuantumRange
|
|
|
+ dateQuantumRangeConst = record.dateQuantumRange
|
|
|
+ }
|
|
|
+ if(record.startDate != null && record.endDate != null){
|
|
|
+ this.time=[moment(record.startDate),moment(record.endDate)]
|
|
|
+ }
|
|
|
+ this.bidType=record.bidType
|
|
|
+ this.priceType=record.priceType
|
|
|
+ this.price=record.price
|
|
|
+ this.filterType=record.filterType
|
|
|
+ if (this.flowDateType == 'SCHEDULE_FROM_NOW') {
|
|
|
+ this.showDateFlowRange = false;
|
|
|
+ } else {
|
|
|
+ this.showDateFlowRange = true;
|
|
|
+ }
|
|
|
+ if (this.dateQuantum == 'date_unlimited') {
|
|
|
+ this.showDateQuantumRange = false;
|
|
|
+ } else {
|
|
|
+ this.showDateQuantumRange = true;
|
|
|
+ jq(function () {
|
|
|
+ load_time_table('table_time_selected1',dateQuantumRangeConst);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.form.setFieldsValue(pick(this.model, 'name', 'convertPrice', 'priceType', 'dateQuantum', 'flowDateType', 'budgetPriceMode', 'flowControlMode', 'bidType','budgetPrice','startDate','endDate'))
|
|
|
+ // //时间格式化
|
|
|
+ // });
|
|
|
},
|
|
|
close() {
|
|
|
this.$emit('close');
|
|
@@ -203,13 +268,17 @@
|
|
|
console.log('Received values of form: ', values);
|
|
|
let params = {};
|
|
|
this.dateQuantumRange = jq("#table_time_selected1_time_num").val();
|
|
|
+ params.id=this.id;
|
|
|
+ params.name=this.name;
|
|
|
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;
|
|
|
+ if(this.time != [] && this.time.length==2){
|
|
|
+ params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
|
|
|
+ params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
params.dateQuantum = this.dateQuantum;
|
|
|
params.priceType = this.priceType;
|
|
|
params.convertPrice = this.convertPrice;
|
|
@@ -219,8 +288,14 @@
|
|
|
postAction(this.url.insertUrl,params).then((res)=>{
|
|
|
console.log(res)
|
|
|
if(res.success){
|
|
|
- alert("预算模板创建成功");
|
|
|
+ this.$message.success(res.message);
|
|
|
+ this.$emit('ok');
|
|
|
+ this.close();
|
|
|
+ }else {
|
|
|
+ this.$message.warning(res.message);
|
|
|
}
|
|
|
+ this.confirmLoading = false;
|
|
|
+
|
|
|
});
|
|
|
}
|
|
|
})
|
|
@@ -229,15 +304,13 @@
|
|
|
console.log(value)
|
|
|
},
|
|
|
dateQuantumChange(value){
|
|
|
- console.log(this.dateQuantum);
|
|
|
if (this.dateQuantum == 'date_unlimited') {
|
|
|
this.showDateQuantumRange = false;
|
|
|
} else {
|
|
|
this.showDateQuantumRange = true;
|
|
|
jq(function () {
|
|
|
- load_time_table('table_time_selected1');
|
|
|
+ load_time_table('table_time_selected1',dateQuantumRangeConst);
|
|
|
});
|
|
|
-
|
|
|
}
|
|
|
},
|
|
|
onChangeFlowDate() {
|
|
@@ -587,7 +660,6 @@
|
|
|
}
|
|
|
}
|
|
|
arr_hour[i] = oDate_hour + ':' + oDate_minute;
|
|
|
- // alert(oDate_hour + ':' + oDate.getMinutes());
|
|
|
}
|
|
|
return arr_hour;
|
|
|
}
|
|
@@ -611,7 +683,7 @@
|
|
|
function binary_selected(){
|
|
|
var default_time_val = jq('#'+box_id+' .default_time_val').val();
|
|
|
if (default_time_val) {
|
|
|
- for(i=0 ; i<336; i++){
|
|
|
+ for(var i=0 ; i<336; i++){
|
|
|
var td_selected = default_time_val.charAt(i);
|
|
|
if (td_selected != 0 ) {
|
|
|
jq('#' + box_id + ' table tbody tr td').eq(i).attr('class','Selected');
|
|
@@ -625,11 +697,12 @@
|
|
|
|
|
|
|
|
|
//实例化程序
|
|
|
- function load_time_table(id){
|
|
|
+ function load_time_table(id,value){
|
|
|
//包住table的元素id
|
|
|
box_id = id;
|
|
|
var html;
|
|
|
- html = '<table cellspacing="0" cellpadding="0" border="0" class="plug-timer-grid" onselectstart="return false" onselect="document.selection.empty()">';
|
|
|
+ html = '<input type="hidden" class="default_time_val" value="'+value+'"/>';
|
|
|
+ html += '<table cellspacing="0" cellpadding="0" border="0" class="plug-timer-grid" onselectstart="return false" onselect="document.selection.empty()">';
|
|
|
html += '<thead>';
|
|
|
html += '<tr>';
|
|
|
html += '<th></th>';
|
|
@@ -642,15 +715,13 @@
|
|
|
html += '</thead>';
|
|
|
html += '<tbody></tbody>';
|
|
|
html += '</table>';
|
|
|
- html += '<input class="focus" style="opacity: 0;">';
|
|
|
- html += '<div id="'+box_id+'_time_seled"></div>';
|
|
|
- html += '<input v-model="dateQuantumRange" type="hidden" id="'+box_id+'_time_num" name="time" caption="每日投放时段" switchname="selectTime" value="">';
|
|
|
-
|
|
|
+ html += '<input class="focus" type="hidden" style="opacity: 0;">';
|
|
|
+ html += '<div id="'+box_id+'_time_seled" style="line-height: 15px;font-size:10px;"></div>';
|
|
|
+ html += '<input type="hidden" id="'+box_id+'_time_num" name="time" caption="每日投放时段" switchname="selectTime" value="'+value+'">';
|
|
|
+ jq('#'+box_id).html('');
|
|
|
jq('#'+box_id).append(html);
|
|
|
- console.log(jq('#table_time_selected1').html())
|
|
|
var html_tbody_td = '';
|
|
|
var html_thead_td = '';
|
|
|
-
|
|
|
//创建表格
|
|
|
for (var i = 0; i < 7; i++) {
|
|
|
var week = i+1;
|
|
@@ -785,14 +856,19 @@
|
|
|
return convert_date(binary);
|
|
|
}
|
|
|
|
|
|
- jq(function(){
|
|
|
- load_time_table('table_time_selected1');
|
|
|
- });
|
|
|
+ // jq(function(){
|
|
|
+ // load_time_table('table_time_selected1',this.dateQuantumRange);
|
|
|
+ // });
|
|
|
|
|
|
</script>
|
|
|
<style type="text/css">
|
|
|
- .plug-timer-grid{width: 80%;}
|
|
|
- .plug-timer-grid td, .plug-timer-grid th{border: 1px solid #97B4D1;text-align: center; /*cursor:pointer;*/}
|
|
|
+ .plug-timer-grid{width: 100%;}
|
|
|
+ .plug-timer-grid td, .plug-timer-grid th{
|
|
|
+ border: 1px solid #97B4D1;
|
|
|
+ text-align: center; /*cursor:pointer;*/
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 10px;
|
|
|
+ }
|
|
|
.Selected{background-color: rgb(102,162,243);opacity: 0.5;}
|
|
|
|
|
|
.plug-timer-grid {
|
|
@@ -806,7 +882,7 @@
|
|
|
}
|
|
|
|
|
|
table td{
|
|
|
- height: 30px;
|
|
|
+ height: 20px;
|
|
|
max-width: 5px;
|
|
|
border: 1px solid #dfe6ec;
|
|
|
font-size: 12px;
|
|
@@ -823,7 +899,7 @@
|
|
|
.plug-timer-grid tbody tr td{
|
|
|
width: 2%;
|
|
|
}
|
|
|
- .clear{
|
|
|
- margin:20px 0px 20px 0px;
|
|
|
- }
|
|
|
+ /*.clear{*/
|
|
|
+ /* margin:20px 0px 20px 0px;*/
|
|
|
+ /*}*/
|
|
|
</style>
|