Explorar el Código

修改页面模板

syh hace 5 años
padre
commit
1a916f0e62

+ 133 - 17
src/views/template/advertiseplan/create.vue

@@ -6,6 +6,7 @@
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
         <a-select
+          v-model="campaignId"
           showSearch
           placeholder="选择广告主模板"
           optionFilterProp="children"
@@ -33,6 +34,7 @@
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
         <a-select
+          v-model="userorentationId"
           showSearch
           placeholder="选择用户定向模板"
           optionFilterProp="children"
@@ -42,7 +44,7 @@
           @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-option v-for="userorentation in userorentationList" :key="userorentation.id" :value="userorentation.id">{{userorentation.name}}</a-select-option>
         </a-select>
       </a-form-item>
 
@@ -51,6 +53,7 @@
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
         <a-select
+          v-model="budgetId"
           showSearch
           placeholder="选择预算与出价模板"
           optionFilterProp="children"
@@ -60,7 +63,7 @@
           @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-option v-for="budget in budgetList" :key="budget.id" :value="budget.id">{{budget.name}}</a-select-option>
         </a-select>
       </a-form-item>
 
@@ -69,6 +72,7 @@
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
         <a-select
+          v-model="deliverytargetId"
           showSearch
           placeholder="选择投放目标模板"
           optionFilterProp="children"
@@ -78,7 +82,7 @@
           @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-option v-for="deliverytarget in deliverytargetList" :key="deliverytarget.id" :value="deliverytarget.id">{{deliverytarget.name}}</a-select-option>
         </a-select>
       </a-form-item>
 
@@ -93,6 +97,55 @@
         </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-upload
+          name="multipartFile"
+          :multiple="true"
+          action="/jeecg-boot/upload/video?type=bytedance"
+          :headers="headers"
+          @change="videoChange">
+          <a-button><a-icon type="upload" /> 点击上传</a-button>
+        </a-upload>
+      </a-form-item>
+
+      <a-form-item
+        label="上传封面"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-upload
+          name="multipartFile"
+          listType="picture-card"
+          class="avatar-uploader"
+          :showUploadList="false"
+          action="/jeecg-boot/upload/image?type=bytedance"
+          :beforeUpload="beforeUpload"
+          @change="imageChange"
+        >
+          <img v-if="imageUrl" :src="imageUrl" alt="上传封面" />
+          <div v-else>
+            <a-icon :type="loading ? 'loading' : 'plus'" />
+            <div class="上传封面">Upload</div>
+          </div>
+        </a-upload>
+      </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 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} }">
@@ -122,29 +175,87 @@
   import {deleteAction, postAction, getAction} from '@/api/manage'
   import $ from 'jquery'
   import moment from 'moment';
+  function getBase64 (img, callback) {
+    const reader = new FileReader()
+    reader.addEventListener('load', () => callback(reader.result))
+    reader.readAsDataURL(img)
+  }
 
   export default {
     name: 'BaseForm',
     data() {
       return {
+        headers: {
+          authorization: 'authorization-text',
+        },
+        videoId:0,
+        imageId:0,
+        loading: false,
+        imageUrl: '',
         iteratorNum:1,
         campaignList: {},
         deliverytargetList:{},
+        userorentationList:{},
         budgetList:{},
         creativeType:'customize',
         creativeText:'',
         deliveryRange:'default',
+        campaignId:null,
+        deliverytargetId:null,
+        budgetId:null,
+        userorentationId:null,
         form: this.$form.createForm(this),
         url: {
           dictListUrl: 'toutiao/dictitem/list',
           campaignTemplateListUrl:'/template/campaign/list',
           budgetTemplateListUrl:'/template/budget/list',
-          deliverytargetTemplateListUrl:'/template/deliverytarget/list'
+          deliverytargetTemplateListUrl:'/template/deliverytarget/list',
+          userorentationTemplateListUrl:'/template/userorentation/list',
+          insertUrl:'/template/advertiserplan/insert'
         }
       }
     },
     methods: {
       moment,
+      videoChange(info) {
+        if (info.file.status !== 'uploading') {
+          console.log(info.file, info.fileList);
+        }
+        if (info.file.status === 'done') {
+          let response = info.file.response;
+          this.$message.success(`${info.file.name} 文件上传成功`);
+          videoId = response.fileInfo.id;
+        } else if (info.file.status === 'error') {
+          this.$message.error(`${info.file.name} file upload failed.`);
+        }
+      },
+      imageChange (info) {
+        if (info.file.status === 'uploading') {
+          this.loading = true
+          return
+        }
+        if (info.file.status === 'done') {
+          console.log(info);
+          let response = info.file.response;
+          if(response.success){
+            this.$message.success(`${info.file.name} 文件上传成功`);
+            this.imageUrl = response.fileInfo.fileUrl;
+            videoId = response.fileInfo.id;
+          }
+          // Get this url from response in real world.
+          // getBase64(info.file.originFileObj, (imageUrl) => {
+          //   this.imageUrl = imageUrl
+          //   this.loading = false
+          // })
+        }
+      },
+      beforeUpload (file) {
+        const isJPG = file.type === 'image/jpeg'
+        if (!isJPG) {
+          this.$message.error('请上传图片文件!')
+        }
+        return isJPG;
+      },
       handleChange (value) {
         console.log(`selected ${value}`);
       },
@@ -164,19 +275,16 @@
             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;
+            params.campaignTemplateId = this.campaignId;
+            params.deliveryRange = this.deliveryRange;
+            params.userOrentationTemplateId = this.userorentationId;
+            params.budgetTemplateId = this.budgetId;
+            params.deliveryTargetTemplateId = this.deliverytargetId;
+            params.videoId = this.videoId;
+            params.imageId = this.imageId;
+            params.creativeText = this.creativeText;
+            params.iteratorNum = this.iteratorNum;
+
             console.log(params)
             postAction(this.url.insertUrl,params).then((res)=>{
               console.log(res)
@@ -216,6 +324,14 @@
           this.deliverytargetList = res.result.records
         }
       });
+
+      params = {};
+      params.pageSize = '1000';
+      postAction(this.url.userorentationTemplateListUrl, params).then((res) => {
+        if (res.success) {
+          this.userorentationList = res.result.records
+        }
+      });
     }
   }
 </script>

+ 209 - 0
src/views/template/advertiseplan/list.vue

@@ -0,0 +1,209 @@
+<template>
+  <a-card :bordered="false">
+
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="头条账号id">
+              <a-input placeholder="请输入头条账号id" v-model="queryParam.accountId"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="广告主id">
+              <a-input placeholder="请输入广告主id" v-model="queryParam.advertiserId"></a-input>
+            </a-form-item>
+          </a-col>
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="广告组模板id">
+                <a-input placeholder="请输入广告组模板id" v-model="queryParam.campaignTemplateId"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="投放范围">
+                <a-input placeholder="请输入投放范围" v-model="queryParam.deliveryRange"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="用户定向模板id">
+                <a-input placeholder="请输入用户定向模板id"
+                         v-model="queryParam.userOrentationTemplateId"></a-input>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('广告计划模板信息')">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
+                :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel">
+            <a-icon type="delete"/>
+            删除
+          </a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作
+          <a-icon type="down"/>
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
+        selectedRowKeys.length }}</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+
+          <a-divider type="vertical"/>
+          <a-dropdown>
+            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
+
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <bytedanceAdvertisePlanTemplate-modal ref="modalForm" @ok="modalFormOk"></bytedanceAdvertisePlanTemplate-modal>
+  </a-card>
+</template>
+
+<script>
+  import BytedanceAdvertisePlanTemplateModal from './modules/BytedanceAdvertisePlanTemplateModal'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+
+  export default {
+    name: "BytedanceAdvertisePlanTemplateList",
+    mixins: [JeecgListMixin],
+    components: {
+      BytedanceAdvertisePlanTemplateModal
+    },
+    data() {
+      return {
+        description: '广告计划模板信息管理页面',
+        // 表头
+        columns: [
+          {
+            title: '#',
+            dataIndex: '',
+            key: 'rowIndex',
+            width: 60,
+            align: "center",
+            customRender: function (t, r, index) {
+              return parseInt(index) + 1;
+            }
+          },
+          {
+            title: '头条账号id',
+            align: "center",
+            dataIndex: 'accountId'
+          },
+          {
+            title: '广告主id',
+            align: "center",
+            dataIndex: 'advertiserId'
+          },
+          {
+            title: '广告组模板id',
+            align: "center",
+            dataIndex: 'campaignTemplateId'
+          },
+          {
+            title: '投放范围',
+            align: "center",
+            dataIndex: 'deliveryRange'
+          },
+          {
+            title: '用户定向模板id',
+            align: "center",
+            dataIndex: 'userOrentationTemplateId'
+          },
+          {
+            title: '预算与出价模板id',
+            align: "center",
+            dataIndex: 'budgetTemplateId'
+          },
+          {
+            title: '投放目标模板id',
+            align: "center",
+            dataIndex: 'deliveryTargetTemplateId'
+          },
+          {
+            title: '模板状态',
+            align: "center",
+            dataIndex: 'status'
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align: "center",
+            scopedSlots: {customRender: 'action'},
+          }
+        ],
+        url: {
+          list: "/ctop/bytedanceAdvertisePlanTemplate/list",
+          delete: "/ctop/bytedanceAdvertisePlanTemplate/delete",
+          deleteBatch: "/ctop/bytedanceAdvertisePlanTemplate/deleteBatch",
+          exportXlsUrl: "ctop/bytedanceAdvertisePlanTemplate/exportXls",
+          importExcelUrl: "ctop/bytedanceAdvertisePlanTemplate/importExcel",
+        },
+      }
+    },
+    computed: {
+      importExcelUrl: function () {
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
+    },
+    methods: {}
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

+ 182 - 0
src/views/template/advertiseplan/modules/BytedanceAdvertisePlanTemplateModal.vue

@@ -0,0 +1,182 @@
+<template>
+    <a-modal
+            :title="title"
+            :width="800"
+            :visible="visible"
+            :confirmLoading="confirmLoading"
+            @ok="handleOk"
+            @cancel="handleCancel"
+            cancelText="关闭">
+
+        <a-spin :spinning="confirmLoading">
+            <a-form :form="form">
+
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="头条账号id">
+                    <a-input placeholder="请输入头条账号id" v-decorator="['accountId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告主id">
+                    <a-input placeholder="请输入广告主id" v-decorator="['advertiserId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告组模板id">
+                    <a-input placeholder="请输入广告组模板id" v-decorator="['campaignTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放范围">
+                    <a-input placeholder="请输入投放范围" v-decorator="['deliveryRange', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="用户定向模板id">
+                    <a-input placeholder="请输入用户定向模板id" v-decorator="['userOrentationTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="预算与出价模板id">
+                    <a-input placeholder="请输入预算与出价模板id" v-decorator="['budgetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放目标模板id">
+                    <a-input placeholder="请输入投放目标模板id" v-decorator="['deliveryTargetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定视频id">
+                    <a-input placeholder="请输入指定视频id" v-decorator="['videoId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定封面图id">
+                    <a-input placeholder="请输入指定封面图id" v-decorator="['imageId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="创意文案信息">
+                    <a-input placeholder="请输入创意文案信息" v-decorator="['creativeText', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="迭代数量">
+                    <a-input-number v-decorator="[ 'iteratorNum', {}]"/>
+                </a-form-item>
+
+            </a-form>
+        </a-spin>
+    </a-modal>
+</template>
+
+<script>
+    import {httpAction} from '@/api/manage'
+    import pick from 'lodash.pick'
+    import moment from "moment"
+
+    export default {
+        name: "BytedanceAdvertisePlanTemplateModal",
+        data() {
+            return {
+                title: "操作",
+                visible: false,
+                model: {},
+                labelCol: {
+                    xs: {span: 24},
+                    sm: {span: 5},
+                },
+                wrapperCol: {
+                    xs: {span: 24},
+                    sm: {span: 16},
+                },
+
+                confirmLoading: false,
+                form: this.$form.createForm(this),
+                validatorRules: {},
+                url: {
+                    add: "/ctop/bytedanceAdvertisePlanTemplate/add",
+                    edit: "/ctop/bytedanceAdvertisePlanTemplate/edit",
+                },
+            }
+        },
+        created() {
+        },
+        methods: {
+            add() {
+                this.edit({});
+            },
+            edit(record) {
+                this.form.resetFields();
+                this.model = Object.assign({}, record);
+                this.visible = true;
+                this.$nextTick(() => {
+                    this.form.setFieldsValue(pick(this.model, 'accountId', 'advertiserId', 'campaignTemplateId', 'deliveryRange', 'userOrentationTemplateId', 'budgetTemplateId', 'deliveryTargetTemplateId', 'videoId', 'imageId', 'creativeText', 'iteratorNum'))
+                    //时间格式化
+                });
+
+            },
+            close() {
+                this.$emit('close');
+                this.visible = false;
+            },
+            handleOk() {
+                const that = this;
+                // 触发表单验证
+                this.form.validateFields((err, values) => {
+                    if (!err) {
+                        that.confirmLoading = true;
+                        let httpurl = '';
+                        let method = '';
+                        if (!this.model.id) {
+                            httpurl += this.url.add;
+                            method = 'post';
+                        } else {
+                            httpurl += this.url.edit;
+                            method = 'put';
+                        }
+                        let formData = Object.assign(this.model, values);
+                        //时间格式化
+
+                        console.log(formData)
+                        httpAction(httpurl, formData, method).then((res) => {
+                            if (res.success) {
+                                that.$message.success(res.message);
+                                that.$emit('ok');
+                            } else {
+                                that.$message.warning(res.message);
+                            }
+                        }).finally(() => {
+                            that.confirmLoading = false;
+                            that.close();
+                        })
+
+
+                    }
+                })
+            },
+            handleCancel() {
+                this.close()
+            },
+
+
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 189 - 0
src/views/template/advertiseplan/modules/BytedanceAdvertisePlanTemplateModal__Style#Drawer.vue

@@ -0,0 +1,189 @@
+<template>
+    <a-drawer
+            :title="title"
+            :width="800"
+            placement="right"
+            :closable="false"
+            @close="close"
+            :visible="visible"
+    >
+
+        <a-spin :spinning="confirmLoading">
+            <a-form :form="form">
+
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="头条账号id">
+                    <a-input placeholder="请输入头条账号id" v-decorator="['accountId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告主id">
+                    <a-input placeholder="请输入广告主id" v-decorator="['advertiserId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告组模板id">
+                    <a-input placeholder="请输入广告组模板id" v-decorator="['campaignTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放范围">
+                    <a-input placeholder="请输入投放范围" v-decorator="['deliveryRange', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="用户定向模板id">
+                    <a-input placeholder="请输入用户定向模板id" v-decorator="['userOrentationTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="预算与出价模板id">
+                    <a-input placeholder="请输入预算与出价模板id" v-decorator="['budgetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放目标模板id">
+                    <a-input placeholder="请输入投放目标模板id" v-decorator="['deliveryTargetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定视频id">
+                    <a-input placeholder="请输入指定视频id" v-decorator="['videoId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定封面图id">
+                    <a-input placeholder="请输入指定封面图id" v-decorator="['imageId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="创意文案信息">
+                    <a-input placeholder="请输入创意文案信息" v-decorator="['creativeText', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="迭代数量">
+                    <a-input-number v-decorator="[ 'iteratorNum', {}]"/>
+                </a-form-item>
+
+            </a-form>
+        </a-spin>
+        <a-button type="primary" @click="handleOk">确定</a-button>
+        <a-button type="primary" @click="handleCancel">取消</a-button>
+    </a-drawer>
+</template>
+
+<script>
+    import {httpAction} from '@/api/manage'
+    import pick from 'lodash.pick'
+    import moment from "moment"
+
+    export default {
+        name: "BytedanceAdvertisePlanTemplateModal",
+        data() {
+            return {
+                title: "操作",
+                visible: false,
+                model: {},
+                labelCol: {
+                    xs: {span: 24},
+                    sm: {span: 5},
+                },
+                wrapperCol: {
+                    xs: {span: 24},
+                    sm: {span: 16},
+                },
+
+                confirmLoading: false,
+                form: this.$form.createForm(this),
+                validatorRules: {},
+                url: {
+                    add: "/ctop/bytedanceAdvertisePlanTemplate/add",
+                    edit: "/ctop/bytedanceAdvertisePlanTemplate/edit",
+                },
+            }
+        },
+        created() {
+        },
+        methods: {
+            add() {
+                this.edit({});
+            },
+            edit(record) {
+                this.form.resetFields();
+                this.model = Object.assign({}, record);
+                this.visible = true;
+                this.$nextTick(() => {
+                    this.form.setFieldsValue(pick(this.model, 'accountId', 'advertiserId', 'campaignTemplateId', 'deliveryRange', 'userOrentationTemplateId', 'budgetTemplateId', 'deliveryTargetTemplateId', 'videoId', 'imageId', 'creativeText', 'iteratorNum'))
+                    //时间格式化
+                });
+
+            },
+            close() {
+                this.$emit('close');
+                this.visible = false;
+            },
+            handleOk() {
+                const that = this;
+                // 触发表单验证
+                this.form.validateFields((err, values) => {
+                    if (!err) {
+                        that.confirmLoading = true;
+                        let httpurl = '';
+                        let method = '';
+                        if (!this.model.id) {
+                            httpurl += this.url.add;
+                            method = 'post';
+                        } else {
+                            httpurl += this.url.edit;
+                            method = 'put';
+                        }
+                        let formData = Object.assign(this.model, values);
+                        //时间格式化
+
+                        console.log(formData)
+                        httpAction(httpurl, formData, method).then((res) => {
+                            if (res.success) {
+                                that.$message.success(res.message);
+                                that.$emit('ok');
+                            } else {
+                                that.$message.warning(res.message);
+                            }
+                        }).finally(() => {
+                            that.confirmLoading = false;
+                            that.close();
+                        })
+
+
+                    }
+                })
+            },
+            handleCancel() {
+                this.close()
+            },
+
+
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    /** Button按钮间距 */
+    .ant-btn {
+        margin-left: 30px;
+        margin-bottom: 30px;
+        float: right;
+    }
+</style>

+ 2 - 2
src/views/template/budget/create.vue

@@ -207,8 +207,8 @@
         }
       },
       onChangeFlowDate() {
-        console.log(this.flowDate)
-        if (this.flowDate == 'SCHEDULE_FROM_NOW') {
+        console.log(this.flowDateType)
+        if (this.flowDateType == 'SCHEDULE_FROM_NOW') {
           this.showDateFlowRange = false;
         } else {
           this.showDateFlowRange = true;

+ 7 - 7
src/views/template/campaign/create.vue

@@ -5,7 +5,7 @@
         label="推广目的"
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-        <a-radio-group @change="promotionPurposeChange" v-model="promotionPurpose">
+        <a-radio-group @change="promotionPurposeChange" v-model="promotionPurpuse">
           <a-radio-button v-for="purpose in promotionPurposeList" :key="purpose.itemText" :value="purpose.itemValue">
             {{purpose.itemText}}
           </a-radio-button>
@@ -17,8 +17,8 @@
         :labelCol="{lg: {span: 7}, sm: {span: 7}}"
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
         <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
-          <a-radio-button value="UNLIMITED">不限</a-radio-button>
-          <a-radio-button value="AS_BUDGET">按预算</a-radio-button>
+          <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
@@ -54,7 +54,7 @@
     name: 'BaseForm',
     data() {
       return {
-        promotionPurpose:'APP',
+        promotionPurpuse:'APP',
         promotionPurposeList: {},
         showBudgetDaily:false,
         campaignName:'APP_'+moment(new Date()),
@@ -63,7 +63,7 @@
         form: this.$form.createForm(this),
         url: {
           dictListUrl: 'toutiao/dictitem/list',
-          insertTemplateUrl:'toutiao/campaign/template/insert'
+          insertTemplateUrl:'template/campaign/insert'
         }
       }
     },
@@ -74,7 +74,7 @@
           if (!err) {
             console.log('Received values of form: ', values);
             let params = {};
-            params.promotionPurpose = this.promotionPurpose;
+            params.promotionPurpuse = this.promotionPurpuse;
             params.campaignBudget = this.campaignBudget;
             params.budgetDaily = this.budgetDaily;
             params.campaignName = this.campaignName;
@@ -99,7 +99,7 @@
         }
       },
       promotionPurposeChange(){
-        this.campaignName = this.promotionPurpose +'_'+moment(new Date());
+        this.campaignName = this.promotionPurpuse +'_'+moment(new Date());
       }
     },
     created: function () {

+ 272 - 0
src/views/template/creative/create.vue

@@ -0,0 +1,272 @@
+<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
+          v-model="deliverytargetId"
+          showSearch
+          placeholder="选择广告计划"
+          optionFilterProp="children"
+          style="width: 200px"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :filterOption="filterOption"
+        >
+          <a-select-option v-for="deliverytarget in deliverytargetList" :key="deliverytarget.id" :value="deliverytarget.id">{{deliverytarget.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-upload
+          name="multipartFile"
+          :multiple="true"
+          action="/jeecg-boot/upload/video?type=bytedance"
+          :headers="headers"
+          @change="videoChange">
+          <a-button><a-icon type="upload" /> 点击上传</a-button>
+        </a-upload>
+      </a-form-item>
+
+      <a-form-item
+        label="上传封面"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
+        <a-upload
+          name="multipartFile"
+          listType="picture-card"
+          class="avatar-uploader"
+          :showUploadList="false"
+          action="/jeecg-boot/upload/image?type=bytedance"
+          :beforeUpload="beforeUpload"
+          @change="imageChange"
+        >
+          <img v-if="imageUrl" :src="imageUrl" alt="上传封面" />
+          <div v-else>
+            <a-icon :type="loading ? 'loading' : 'plus'" />
+            <div class="上传封面">Upload</div>
+          </div>
+        </a-upload>
+      </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 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 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';
+  function getBase64 (img, callback) {
+    const reader = new FileReader()
+    reader.addEventListener('load', () => callback(reader.result))
+    reader.readAsDataURL(img)
+  }
+
+  export default {
+    name: 'BaseForm',
+    data() {
+      return {
+        headers: {
+          authorization: 'authorization-text',
+        },
+        videoId:0,
+        imageId:0,
+        loading: false,
+        imageUrl: '',
+        iteratorNum:1,
+        campaignList: {},
+        deliverytargetList:{},
+        userorentationList:{},
+        budgetList:{},
+        creativeType:'customize',
+        creativeText:'',
+        deliveryRange:'default',
+        campaignId:null,
+        deliverytargetId:null,
+        budgetId:null,
+        userorentationId:null,
+        form: this.$form.createForm(this),
+        url: {
+          dictListUrl: 'toutiao/dictitem/list',
+          campaignTemplateListUrl:'/template/campaign/list',
+          budgetTemplateListUrl:'/template/budget/list',
+          deliverytargetTemplateListUrl:'/template/deliverytarget/list',
+          userorentationTemplateListUrl:'/template/userorentation/list',
+          insertUrl:'/template/advertiserplan/insert'
+        }
+      }
+    },
+    methods: {
+      moment,
+      videoChange(info) {
+        if (info.file.status !== 'uploading') {
+          console.log(info.file, info.fileList);
+        }
+        if (info.file.status === 'done') {
+          let response = info.file.response;
+          this.$message.success(`${info.file.name} 文件上传成功`);
+          videoId = response.fileInfo.id;
+        } else if (info.file.status === 'error') {
+          this.$message.error(`${info.file.name} file upload failed.`);
+        }
+      },
+      imageChange (info) {
+        if (info.file.status === 'uploading') {
+          this.loading = true
+          return
+        }
+        if (info.file.status === 'done') {
+          console.log(info);
+          let response = info.file.response;
+          if(response.success){
+            this.$message.success(`${info.file.name} 文件上传成功`);
+            this.imageUrl = response.fileInfo.fileUrl;
+            videoId = response.fileInfo.id;
+          }
+          // Get this url from response in real world.
+          // getBase64(info.file.originFileObj, (imageUrl) => {
+          //   this.imageUrl = imageUrl
+          //   this.loading = false
+          // })
+        }
+      },
+      beforeUpload (file) {
+        const isJPG = file.type === 'image/jpeg'
+        if (!isJPG) {
+          this.$message.error('请上传图片文件!')
+        }
+        return isJPG;
+      },
+      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 = {};
+            params.campaignTemplateId = this.campaignId;
+            params.deliveryRange = this.deliveryRange;
+            params.userOrentationTemplateId = this.userorentationId;
+            params.budgetTemplateId = this.budgetId;
+            params.deliveryTargetTemplateId = this.deliverytargetId;
+            params.videoId = this.videoId;
+            params.imageId = this.imageId;
+            params.creativeText = this.creativeText;
+            params.iteratorNum = this.iteratorNum;
+
+            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
+        }
+      });
+
+      params = {};
+      params.pageSize = '1000';
+      postAction(this.url.userorentationTemplateListUrl, params).then((res) => {
+        if (res.success) {
+          this.userorentationList = res.result.records
+        }
+      });
+    }
+  }
+</script>

+ 0 - 0
src/views/template/creative/list.vue


+ 182 - 0
src/views/template/creative/modules/BytedanceAdvertisePlanTemplateModal.vue

@@ -0,0 +1,182 @@
+<template>
+    <a-modal
+            :title="title"
+            :width="800"
+            :visible="visible"
+            :confirmLoading="confirmLoading"
+            @ok="handleOk"
+            @cancel="handleCancel"
+            cancelText="关闭">
+
+        <a-spin :spinning="confirmLoading">
+            <a-form :form="form">
+
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="头条账号id">
+                    <a-input placeholder="请输入头条账号id" v-decorator="['accountId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告主id">
+                    <a-input placeholder="请输入广告主id" v-decorator="['advertiserId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告组模板id">
+                    <a-input placeholder="请输入广告组模板id" v-decorator="['campaignTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放范围">
+                    <a-input placeholder="请输入投放范围" v-decorator="['deliveryRange', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="用户定向模板id">
+                    <a-input placeholder="请输入用户定向模板id" v-decorator="['userOrentationTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="预算与出价模板id">
+                    <a-input placeholder="请输入预算与出价模板id" v-decorator="['budgetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放目标模板id">
+                    <a-input placeholder="请输入投放目标模板id" v-decorator="['deliveryTargetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定视频id">
+                    <a-input placeholder="请输入指定视频id" v-decorator="['videoId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定封面图id">
+                    <a-input placeholder="请输入指定封面图id" v-decorator="['imageId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="创意文案信息">
+                    <a-input placeholder="请输入创意文案信息" v-decorator="['creativeText', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="迭代数量">
+                    <a-input-number v-decorator="[ 'iteratorNum', {}]"/>
+                </a-form-item>
+
+            </a-form>
+        </a-spin>
+    </a-modal>
+</template>
+
+<script>
+    import {httpAction} from '@/api/manage'
+    import pick from 'lodash.pick'
+    import moment from "moment"
+
+    export default {
+        name: "BytedanceAdvertisePlanTemplateModal",
+        data() {
+            return {
+                title: "操作",
+                visible: false,
+                model: {},
+                labelCol: {
+                    xs: {span: 24},
+                    sm: {span: 5},
+                },
+                wrapperCol: {
+                    xs: {span: 24},
+                    sm: {span: 16},
+                },
+
+                confirmLoading: false,
+                form: this.$form.createForm(this),
+                validatorRules: {},
+                url: {
+                    add: "/ctop/bytedanceAdvertisePlanTemplate/add",
+                    edit: "/ctop/bytedanceAdvertisePlanTemplate/edit",
+                },
+            }
+        },
+        created() {
+        },
+        methods: {
+            add() {
+                this.edit({});
+            },
+            edit(record) {
+                this.form.resetFields();
+                this.model = Object.assign({}, record);
+                this.visible = true;
+                this.$nextTick(() => {
+                    this.form.setFieldsValue(pick(this.model, 'accountId', 'advertiserId', 'campaignTemplateId', 'deliveryRange', 'userOrentationTemplateId', 'budgetTemplateId', 'deliveryTargetTemplateId', 'videoId', 'imageId', 'creativeText', 'iteratorNum'))
+                    //时间格式化
+                });
+
+            },
+            close() {
+                this.$emit('close');
+                this.visible = false;
+            },
+            handleOk() {
+                const that = this;
+                // 触发表单验证
+                this.form.validateFields((err, values) => {
+                    if (!err) {
+                        that.confirmLoading = true;
+                        let httpurl = '';
+                        let method = '';
+                        if (!this.model.id) {
+                            httpurl += this.url.add;
+                            method = 'post';
+                        } else {
+                            httpurl += this.url.edit;
+                            method = 'put';
+                        }
+                        let formData = Object.assign(this.model, values);
+                        //时间格式化
+
+                        console.log(formData)
+                        httpAction(httpurl, formData, method).then((res) => {
+                            if (res.success) {
+                                that.$message.success(res.message);
+                                that.$emit('ok');
+                            } else {
+                                that.$message.warning(res.message);
+                            }
+                        }).finally(() => {
+                            that.confirmLoading = false;
+                            that.close();
+                        })
+
+
+                    }
+                })
+            },
+            handleCancel() {
+                this.close()
+            },
+
+
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 189 - 0
src/views/template/creative/modules/BytedanceAdvertisePlanTemplateModal__Style#Drawer.vue

@@ -0,0 +1,189 @@
+<template>
+    <a-drawer
+            :title="title"
+            :width="800"
+            placement="right"
+            :closable="false"
+            @close="close"
+            :visible="visible"
+    >
+
+        <a-spin :spinning="confirmLoading">
+            <a-form :form="form">
+
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="头条账号id">
+                    <a-input placeholder="请输入头条账号id" v-decorator="['accountId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告主id">
+                    <a-input placeholder="请输入广告主id" v-decorator="['advertiserId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="广告组模板id">
+                    <a-input placeholder="请输入广告组模板id" v-decorator="['campaignTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放范围">
+                    <a-input placeholder="请输入投放范围" v-decorator="['deliveryRange', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="用户定向模板id">
+                    <a-input placeholder="请输入用户定向模板id" v-decorator="['userOrentationTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="预算与出价模板id">
+                    <a-input placeholder="请输入预算与出价模板id" v-decorator="['budgetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="投放目标模板id">
+                    <a-input placeholder="请输入投放目标模板id" v-decorator="['deliveryTargetTemplateId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定视频id">
+                    <a-input placeholder="请输入指定视频id" v-decorator="['videoId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="指定封面图id">
+                    <a-input placeholder="请输入指定封面图id" v-decorator="['imageId', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="创意文案信息">
+                    <a-input placeholder="请输入创意文案信息" v-decorator="['creativeText', {}]"/>
+                </a-form-item>
+                <a-form-item
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        label="迭代数量">
+                    <a-input-number v-decorator="[ 'iteratorNum', {}]"/>
+                </a-form-item>
+
+            </a-form>
+        </a-spin>
+        <a-button type="primary" @click="handleOk">确定</a-button>
+        <a-button type="primary" @click="handleCancel">取消</a-button>
+    </a-drawer>
+</template>
+
+<script>
+    import {httpAction} from '@/api/manage'
+    import pick from 'lodash.pick'
+    import moment from "moment"
+
+    export default {
+        name: "BytedanceAdvertisePlanTemplateModal",
+        data() {
+            return {
+                title: "操作",
+                visible: false,
+                model: {},
+                labelCol: {
+                    xs: {span: 24},
+                    sm: {span: 5},
+                },
+                wrapperCol: {
+                    xs: {span: 24},
+                    sm: {span: 16},
+                },
+
+                confirmLoading: false,
+                form: this.$form.createForm(this),
+                validatorRules: {},
+                url: {
+                    add: "/ctop/bytedanceAdvertisePlanTemplate/add",
+                    edit: "/ctop/bytedanceAdvertisePlanTemplate/edit",
+                },
+            }
+        },
+        created() {
+        },
+        methods: {
+            add() {
+                this.edit({});
+            },
+            edit(record) {
+                this.form.resetFields();
+                this.model = Object.assign({}, record);
+                this.visible = true;
+                this.$nextTick(() => {
+                    this.form.setFieldsValue(pick(this.model, 'accountId', 'advertiserId', 'campaignTemplateId', 'deliveryRange', 'userOrentationTemplateId', 'budgetTemplateId', 'deliveryTargetTemplateId', 'videoId', 'imageId', 'creativeText', 'iteratorNum'))
+                    //时间格式化
+                });
+
+            },
+            close() {
+                this.$emit('close');
+                this.visible = false;
+            },
+            handleOk() {
+                const that = this;
+                // 触发表单验证
+                this.form.validateFields((err, values) => {
+                    if (!err) {
+                        that.confirmLoading = true;
+                        let httpurl = '';
+                        let method = '';
+                        if (!this.model.id) {
+                            httpurl += this.url.add;
+                            method = 'post';
+                        } else {
+                            httpurl += this.url.edit;
+                            method = 'put';
+                        }
+                        let formData = Object.assign(this.model, values);
+                        //时间格式化
+
+                        console.log(formData)
+                        httpAction(httpurl, formData, method).then((res) => {
+                            if (res.success) {
+                                that.$message.success(res.message);
+                                that.$emit('ok');
+                            } else {
+                                that.$message.warning(res.message);
+                            }
+                        }).finally(() => {
+                            that.confirmLoading = false;
+                            that.close();
+                        })
+
+
+                    }
+                })
+            },
+            handleCancel() {
+                this.close()
+            },
+
+
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    /** Button按钮间距 */
+    .ant-btn {
+        margin-left: 30px;
+        margin-bottom: 30px;
+        float: right;
+    }
+</style>

+ 7 - 1
src/views/template/deliverytarget/create.vue

@@ -82,6 +82,12 @@
         :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
         <a-input v-model="redirectUrl"></a-input>
       </a-form-item>
+      <a-form-item
+        label="模板名称"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input v-model="templateName"></a-input>
+      </a-form-item>
 
       <a-form-item
         :wrapperCol="{ span: 24 }"
@@ -122,7 +128,7 @@
         form: this.$form.createForm(this),
         url: {
           dictListUrl: 'toutiao/dictitem/list',
-          insertUrl:'toutiao/deliverytarget/template/insert'
+          insertUrl:'template/deliverytarget/insert'
         }
       }
     },