zhuxinbo 5 år sedan
förälder
incheckning
70d98e43ea

+ 2 - 2
src/components/ctop/vm-card.vue

@@ -43,10 +43,10 @@ li {
 }
 </style>
 <template>
-  <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']">
+  <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']" style="border:1px solid black">
     <div
       class="card-img"
-      style="height:250px"
+      style="height:250px;border-bottom:1px solid #f2f2f2"
       :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
     >
       <!-- <img :src="img" alt="" height="250"> -->

+ 3 - 2
src/components/ctop/vm-image-list.vue

@@ -72,9 +72,10 @@
         </a-row>
       </a-row>
     </a-row>
-    <a-row class="image-list" :gutter="16">
-      <a-col :lg="6" :sm="12" class="vm-margin" v-for="(item,index) of dataShow" :key="index">
+    <a-row class="image-list" :gutter="16" style="padding:0 8px">
+      <a-col :lg="6" :sm="12" class="vm-margin" v-for="(item,index) of dataShow" :key="index" style="padding:0">
         <vm-card
+          style="margin: 0 15px;"
           :editable="true"
           :title="item.name"
           :img="item.coverUrl"

+ 185 - 0
src/views/modules/advertiser/BindAccountLoginList.vue

@@ -0,0 +1,185 @@
+<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="账号">
+              <a-input placeholder="请输入账号" v-model="queryParam.accountName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="广告主名称">
+              <a-input placeholder="请输入广告主名称" v-model="queryParam.advertiserName"></a-input>
+            </a-form-item>
+          </a-col>
+
+
+          </a-col>
+
+
+          <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>
+
+            </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>
+
+        <div
+          slot="loginTypeShow"
+          slot-scope="text, record"
+        >{{typeJson[record.loginType]}}</div>
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <bindAccountLogin-modal ref="modalForm" @ok="modalFormOk"></bindAccountLogin-modal>
+  </a-card>
+</template>
+
+<script>
+  import BindAccountLoginModal from './modules/BindAccountLoginModal'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+
+  export default {
+    name: "BindAccountLoginList",
+    mixins: [JeecgListMixin],
+    components: {
+      BindAccountLoginModal
+    },
+    data() {
+      return {
+
+        typeJson: {"kuaishou": "快手", "bytedance": "头条"},
+
+        description: '绑定账号密码管理页面',
+        // 表头
+        columns: [
+          {
+            title: '#',
+            dataIndex: '',
+            key: 'rowIndex',
+            width: 60,
+            align: "center",
+            customRender: function (t, r, index) {
+              return parseInt(index) + 1;
+            }
+          },
+          {
+            title: '广告主名称',
+            align: "center",
+            dataIndex: 'advertiserName'
+          },
+          {
+            title: '账号',
+            align: "center",
+            dataIndex: 'accountName'
+          },
+
+          {
+            title: '媒体类型',
+            align: "center",
+            dataIndex: 'loginTypeShow',
+            scopedSlots: { customRender: 'loginTypeShow' },
+          },
+
+          {
+            title: '账号标识',
+            align: "center",
+            dataIndex: 'accountId'
+
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align: "center",
+            scopedSlots: {customRender: 'action'},
+          }
+        ],
+        url: {
+          list: "/ctop/bindAccountLogin/list",
+          delete: "/ctop/bindAccountLogin/delete",
+          deleteBatch: "/ctop/bindAccountLogin/deleteBatch",
+          exportXlsUrl: "ctop/bindAccountLogin/exportXls",
+          importExcelUrl: "ctop/bindAccountLogin/importExcel",
+        },
+      }
+    },
+    computed: {
+      importExcelUrl: function () {
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      }
+    },
+    methods: {}
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

+ 28 - 37
src/views/modules/advertiser/UserAllocationList.vue

@@ -6,41 +6,31 @@
       <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.userId"></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.accountId"></a-input>
-            </a-form-item>
-          </a-col>
-          <template v-if="toggleSearchStatus">
+
+          <template>
             <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>
+
+
             <a-col :md="6" :sm="8">
-              <a-form-item label="指定分配人">
-                <a-input placeholder="请输入指定分配人" v-model="queryParam.distributionName"></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.departmentId"></a-input>
+              <a-form-item label="广告主名称">
+                <a-input placeholder="请输入广告主名称" v-model="queryParam.advertiserName"></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>
+              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
+                 {{ toggleSearchStatus ? '收起' : '展开' }}
+                 <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+               </a>-->
             </span>
           </a-col>
 
@@ -105,6 +95,12 @@
           </a-dropdown>
         </span>
 
+
+        <div
+          slot="mediaIdShow"
+          slot-scope="text, record"
+        >{{typeArr[record.mediaId]}}</div>
+
       </a-table>
     </div>
     <!-- table区域-end -->
@@ -126,6 +122,8 @@
     },
     data() {
       return {
+        typeArr: ['', '头条', '快手'],
+
         description: '用户分配管理页面',
         // 表头
         columns: [
@@ -141,29 +139,18 @@
           },
 
           {
-            title: '账户id',
-            align: "center",
-            dataIndex: 'accountId'
-          },
-
-          {
             title: '指定分配人',
             align: "center",
             dataIndex: 'distributionName'
           },
 
           {
-            title: '管理员名称',
-            align: "center",
-            dataIndex: 'adminName'
-          },
-          {
             title: '广告主名称',
             align: "center",
             dataIndex: 'advertiserName'
           },
           {
-            title: '输入账号',
+            title: '登录账号',
             align: "center",
             dataIndex: 'accountName'
           },
@@ -172,15 +159,19 @@
             align: "center",
             dataIndex: 'operationName'
           },
+
           {
-            title: '授权称',
+            title: '授权账户昵称',
             align: "center",
             dataIndex: 'authName'
           },
+
           {
             title: '平台类型',
-            align: "center",
-            dataIndex: 'mediaId'
+            align: 'center',
+            dataIndex: 'mediaIdShow',
+            scopedSlots: { customRender: 'mediaIdShow' },
+           // dataIndex: 'mediaId'
           },
           {
             title: '操作',

+ 160 - 0
src/views/modules/advertiser/modules/BindAccountLoginModal.vue

@@ -0,0 +1,160 @@
+<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="['advertiserId', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="账号">
+          <a-input placeholder="请输入账号" v-decorator="['accountName', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="密码">
+          <a-input placeholder="请输入密码" v-decorator="['password', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="登录方式">
+          <a-input placeholder="请输入登录方式" v-decorator="['loginType', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="1未登陆 2已登陆">
+          <a-input placeholder="请输入1未登陆 2已登陆" v-decorator="['status', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="userId">
+          <a-input placeholder="请输入userId" v-decorator="['userId', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="用户平台ID">
+          <a-input placeholder="请输入用户平台ID" v-decorator="['accountId', {}]" />
+        </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: "BindAccountLoginModal",
+    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/bindAccountLogin/add",
+          edit: "/ctop/bindAccountLogin/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,'advertiserId','accountName','password','loginType','status','userId','accountId'))
+		  //时间格式化
+        });
+
+      },
+      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>

+ 167 - 0
src/views/modules/advertiser/modules/BindAccountLoginModal__Style#Drawer.vue

@@ -0,0 +1,167 @@
+<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="['advertiserId', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="账号">
+          <a-input placeholder="请输入账号" v-decorator="['accountName', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="密码">
+          <a-input placeholder="请输入密码" v-decorator="['password', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="登录方式">
+          <a-input placeholder="请输入登录方式" v-decorator="['loginType', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="1未登陆 2已登陆">
+          <a-input placeholder="请输入1未登陆 2已登陆" v-decorator="['status', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="userId">
+          <a-input placeholder="请输入userId" v-decorator="['userId', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="用户平台ID">
+          <a-input placeholder="请输入用户平台ID" v-decorator="['accountId', {}]" />
+        </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: "BindAccountLoginModal",
+    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/bindAccountLogin/add",
+          edit: "/ctop/bindAccountLogin/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,'advertiserId','accountName','password','loginType','status','userId','accountId'))
+		  //时间格式化
+        });
+
+      },
+      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>

+ 28 - 221
src/views/template/creative/create.vue

@@ -188,7 +188,7 @@
           <!--<a-radio-button value="program">程序化创意</a-radio-button>-->
         </a-radio-group>
       </a-form-item>
-      <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+      <!-- <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
         <a-radio-group v-model="materialType" @change="materialTypeChange">
           <a-badge
             :count="HorizontalLargeImageListBig.length"
@@ -227,9 +227,9 @@
             <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
           </a-badge>
         </a-radio-group>
-      </a-form-item>
+      </a-form-item>-->
       <!-- 创建大图横图创意 -->
-      <a-form-item
+      <!-- <a-form-item
         label="创建创意"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
@@ -318,34 +318,6 @@
           </a-layout-content>
         </a-layout>
       </a-form-item>
-      <!-- 创建大图横图创意 E -->
-
-      <!-- <a-form-item
-        v-if="showLargeImage"
-        label="大图横图图片素材上传"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="horizonImageUrl"
-          :customDomain="customDomain"
-          preview
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptImage"
-          :size="102400"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-      <a-form-item
-        v-if="showLargeImage"
-        label="大图横图创意标题"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <a-input v-model="horizonImageCreativeText"></a-input>
-      </a-form-item>-->
       <a-form-item
         v-if="creativeType == 'program'"
         label="程序化创意标题"
@@ -369,188 +341,8 @@
             @click="getChangeAllTitle(item,itemTag,index)"
           >{{itemTag.name}}</a-tag>
         </div>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showHorizonVideo"
-        label="横版视频素材上传"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="horizonVideoUrl"
-          :customDomain="customDomain"
-          preview
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptVideo"
-          :max="1"
-          :size="1024000"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-      <a-form-item
-        label="横版视频封面上传"
-        v-if="showHorizonVideo"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="horizonVideoCoverImageUrl"
-          :customDomain="customDomain"
-          preview
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptImage"
-          :max="1"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showHorizonVideo"
-        label="横版视频创意标题"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <a-input v-model="horizonVideoCreativeText"></a-input>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showVerticalVideo"
-        label="竖版视频素材上传"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="verticalVideoUrl"
-          :customDomain="customDomain"
-          preview
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptVideo"
-          :size="1024000"
-          :max="1"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showVerticalVideo"
-        label="竖版视频封面上传"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="verticalVideoCoverImageUrl"
-          :customDomain="customDomain"
-          preview
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptImage"
-          :size="1024000"
-          :max="1"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showVerticalVideo"
-        label="竖版视频创意标题"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <a-input v-model="verticalVideoCreativeText"></a-input>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showGroupImage"
-        label="组图图片素材上传"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="groupImageUrl"
-          :customDomain="customDomain"
-          :onClick="onClick"
-          preview
-          multiple
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptImage"
-          :max="3"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-      <a-form-item
-        v-if="showGroupImage"
-        label="组图创意标题"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <a-input v-model="groupImageCreativeText"></a-input>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showSmallImage"
-        label="小图图片素材上传"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="smallImageUrl"
-          :customDomain="customDomain"
-          :onClick="onClick"
-          preview
-          :max="1"
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptImage"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-      <a-form-item
-        v-if="showSmallImage"
-        label="小图创意标题"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <a-input v-model="smallImageCreativeText"></a-input>
-      </a-form-item>
-
-      <a-form-item
-        v-if="showLargeVerticalImage"
-        label="大图竖图图片素材上传"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <upload-to-ali
-          v-model="verticalImageUrl"
-          :customDomain="customDomain"
-          preview
-          :region="region"
-          :bucket="bucket"
-          :accept="acceptImage"
-          :max="1"
-          :accessKeyId="accessKeyId"
-          :accessKeySecret="accessKeySecret"
-        ></upload-to-ali>
-      </a-form-item>
-      <a-form-item
-        v-if="showLargeVerticalImage"
-        label="大图竖图创意标题"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol"
-      >
-        <a-input v-model="verticalImageCreativeText"></a-input>
-      </a-form-item>
-
+      </a-form-item>-->
+      <material :creativeType.sync="creativeType" :accountId.sync="accountId" ref="material"></material>
       <a-form-item label="应用下载详情页" :labelCol="labelCol" :wrapperCol="wrapperCol">
         <a-input v-model="webUrl"></a-input>
       </a-form-item>
@@ -601,6 +393,7 @@ import UploadToAli from '@femessage/upload-to-ali'
 import { postAction, getAction, getPackage } from '@/api/manage'
 import moment from 'moment'
 import AFormItem from 'ant-design-vue/es/form/FormItem'
+import material from './modules/material'
 import $ from 'jquery'
 
 export default {
@@ -721,7 +514,8 @@ export default {
   },
   components: {
     AFormItem,
-    UploadToAli
+    UploadToAli,
+    material
   },
   methods: {
     handleCancel() {
@@ -1012,15 +806,28 @@ export default {
           params.name = this.name
           params.convertId = this.convertId
           params.iteratorNum = this.iteratorNum
-          var dataCreatives = this.HorizontalLargeImageListBig.concat(
-            this.HorizontalLargeImageListHeng,
-            this.HorizontalLargeImageListShu,
-            this.HorizontalLargeImageListZu,
-            this.HorizontalLargeImageListSmall,
-            this.HorizontalLargeImageListBigShu
+
+          //   var dataCreatives = this.HorizontalLargeImageListBig.concat(
+          //     this.HorizontalLargeImageListHeng,
+          //     this.HorizontalLargeImageListShu,
+          //     this.HorizontalLargeImageListZu,
+          //     this.HorizontalLargeImageListSmall,
+          //     this.HorizontalLargeImageListBigShu
+          //   )
+          var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
+            this.$refs.material.HorizontalLargeImageListHeng,
+            this.$refs.material.HorizontalLargeImageListShu,
+            this.$refs.material.HorizontalLargeImageListZu,
+            this.$refs.material.HorizontalLargeImageListSmall,
+            this.$refs.material.HorizontalLargeImageListBigShu
           )
+          console.log(dataCreatives)
           params.creatives = dataCreatives
-          params.titles = this.titleData
+          if (this.creativeType == 'program') {
+            //   params.titles = this.titleData
+            params.titles = this.$refs.material.titleData
+          }
+
           console.log(params)
           postAction(this.url.insertUrl, params).then(res => {
             console.log(res)

+ 589 - 0
src/views/template/creative/modules/material.vue

@@ -0,0 +1,589 @@
+<template>
+  <a-form :form="form">
+    <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+      <a-radio-group v-model="materialType" @change="materialTypeChange">
+        <a-badge
+          :count="HorizontalLargeImageListBig.length"
+          :numberStyle="{backgroundColor: '#52c41a'} "
+        >
+          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
+        </a-badge>
+        <a-badge
+          :count="HorizontalLargeImageListShu.length"
+          :numberStyle="{backgroundColor: '#52c41a'} "
+        >
+          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
+        </a-badge>
+        <a-badge
+          :count="HorizontalLargeImageListHeng.length"
+          :numberStyle="{backgroundColor: '#52c41a'} "
+        >
+          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
+        </a-badge>
+        <a-badge
+          :count="HorizontalLargeImageListZu.length"
+          :numberStyle="{backgroundColor: '#52c41a'} "
+        >
+          <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
+        </a-badge>
+        <a-badge
+          :count="HorizontalLargeImageListSmall.length"
+          :numberStyle="{backgroundColor: '#52c41a'} "
+        >
+          <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
+        </a-badge>
+        <a-badge
+          :count="HorizontalLargeImageListBigShu.length"
+          :numberStyle="{backgroundColor: '#52c41a'} "
+        >
+          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
+        </a-badge>
+      </a-radio-group>
+    </a-form-item>
+    <!-- 创建大图横图创意 -->
+    <a-form-item
+      label="创建创意"
+      :labelCol="labelCol"
+      :wrapperCol="wrapperCol"
+      v-if="createLargeImageCreativeCon"
+    >
+      <a-layout>
+        <a-layout-content style="padding:10px;">
+          <div :style="{ marginBottom: '16px' }">
+            <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
+            <span
+              style="color:black;margin-left:10px"
+              v-if="creativeType == 'customize'"
+            >{{countMany}}/10</span>
+            <span
+              style="color:black;margin-left:10px"
+              v-else-if="creativeType == 'program'"
+            >视频数量:{{vadioMany}}/12 图片数量:{{imgMany}}/10</span>
+          </div>
+          <a-row>
+            <a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
+              <a-card title :ref="item">
+                <a-icon
+                  type="close"
+                  style="float:right;cursor: pointer;"
+                  @click="deleteCreative(index)"
+                />
+                <div style="clear:both"></div>
+                <div class="dynamically_add_form_item">
+                  <a-form-item class label="素材上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <upload-to-ali
+                      v-model="item.vadioUrl"
+                      :customDomain="customDomain"
+                      preview
+                      :region="region"
+                      :bucket="bucket"
+                      :accept="acceptImage"
+                      :size="102400"
+                      :accessKeyId="accessKeyId"
+                      :accessKeySecret="accessKeySecret"
+                    ></upload-to-ali>
+                  </a-form-item>
+                  <a-form-item
+                    label="创意标题"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    v-if="creativeType == 'customize'"
+                  >
+                    <a-input v-model="item.text" class="rending" @change="judge(item)"></a-input>
+                  </a-form-item>
+                  <a-form-item
+                    label="动态词包"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    v-if="creativeType == 'customize'"
+                  >
+                    <a-tag
+                      v-for="(itemTag,indexTag) of tags"
+                      :key="indexTag"
+                      v-show="indexTag<item.many"
+                      @click="getChange(item,itemTag,index)"
+                    >{{itemTag.name}}</a-tag>
+                    <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
+                  </a-form-item>
+                  <a-form-item
+                    label="封面上传"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    v-if="creativeType == 'program'&&(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')"
+                  >
+                    <upload-to-ali
+                      v-model="item.imageUrl"
+                      :customDomain="customDomain"
+                      preview
+                      :region="region"
+                      :bucket="bucket"
+                      :accept="acceptImage"
+                      :size="102400"
+                      :accessKeyId="accessKeyId"
+                      :accessKeySecret="accessKeySecret"
+                    ></upload-to-ali>
+                  </a-form-item>
+                </div>
+              </a-card>
+            </a-col>
+          </a-row>
+        </a-layout-content>
+      </a-layout>
+    </a-form-item>
+    <a-form-item
+      v-if="creativeType == 'program'"
+      label="程序化创意标题"
+      :labelCol="labelCol"
+      :wrapperCol="wrapperCol"
+    >
+      <a-button @click="addTitle">添加创意标题</a-button>
+      <br />
+      <div v-for="(item,index) of titleData" :key="index">
+        <a-input style="width:55%" v-model="item.text" class="rending-all"></a-input>
+        <a-icon
+          type="delete"
+          style="margin-left:20px;cursor: pointer;"
+          v-show="titleData.length>1"
+          @click="tetleDetele(index)"
+        />
+        <br />
+        <a-tag
+          v-for="(itemTag,indexTag) of tags"
+          :key="indexTag"
+          @click="getChangeAllTitle(item,itemTag,index)"
+        >{{itemTag.name}}</a-tag>
+      </div>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import UploadToAli from '@femessage/upload-to-ali'
+import { postAction, getAction, getPackage } from '@/api/manage'
+import moment from 'moment'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import $ from 'jquery'
+
+export default {
+  name: 'BaseForm',
+  props: {
+    accountId: {
+      default() {
+        return ''
+      }
+    },
+    creativeType: {
+      type: String,
+      default() {
+        return 'customize'
+      }
+    }
+  },
+  components: {
+    AFormItem,
+    UploadToAli
+  },
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      accessKeyId: 'LTAIbNbqWzSOklQV',
+      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+      bucket: 'ctop-media',
+      region: 'oss-cn-beijing',
+      acceptImage: 'image/jpeg,image/png',
+      acceptVideo: 'video/mpeg,video/mp4',
+      customDomain: '',
+      form: this.$form.createForm(this),
+      url: {
+        userAllocationList: '/template/allocation/list',
+        insertUrl: '/template/creative/insert',
+        industryListUrl: '/template/bytedance/industry/list',
+        campaignListUrl: '/template/campaign/list',
+        budgetTemplateListUrl: '/template/budget/list',
+        deliverytargetTemplateListUrl: '/template/deliverytarget/list',
+        userorentationTemplateListUrl: '/template/userorentation/list',
+        deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
+        convertList: 'template/convert/list'
+      },
+      materialType: 'CREATIVE_IMAGE_MODE_LARGE',
+      // 创建大图横图创意
+      createLargeImageCreativeCon: true,
+      HorizontalLargeImageList: [],
+      HorizontalLargeImageListBig: [],
+      HorizontalLargeImageListHeng: [],
+      HorizontalLargeImageListShu: [],
+      HorizontalLargeImageListZu: [],
+      HorizontalLargeImageListSmall: [],
+      HorizontalLargeImageListBigShu: [],
+      horizonImageUrlColl: [], // 大图横图图片素材集合
+      horizonImageCreativeTextColl: [], // 创意标题集合
+      itemIndex: null,
+      tags: [],
+      range: null,
+      countTag: 0,
+      titleData: [{ text: '', showElse: true, titleMany: 0 }]
+    }
+  },
+  methods: {
+    judge(item) {
+      var left = item.text.split('{')
+      var right = item.text.split('}')
+      console.log(left)
+      if (item.countTag == 0) {
+        return
+      } else {
+        if (left.length != 3 && right.lenght != 3) {
+          item.countTag -= 1
+        }
+      }
+    },
+    getChange(item, tag, index) {
+      item.countTag++
+      if (item.text == '') {
+        item.countTag = 0
+      }
+      if (item.countTag >= 2) {
+        this.$message.error('最多插入两条词包')
+        item.countTag = 2
+        return
+      }
+      var node = document.getElementsByClassName('rending')[index]
+      var v = '{' + tag.name + '}'
+      if (document.selection) {
+        //IE
+        node.focus()
+        var sel = document.selection.createRange()
+        sel.text = v
+        sel.select()
+      } else if (node.selectionStart || node.selectionStart == '0') {
+        //MOZILLA/GOOGLE
+        var startPos = node.selectionStart
+        var endPos = node.selectionEnd
+        var restoreTop = node.scrollTop
+        node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+        if (restoreTop > 0) {
+          node.scrollTop = restoreTop
+        }
+        item.text = node.value
+        node.focus()
+        node.selectionStart = startPos + v.length
+        node.selectionEnd = startPos + v.length
+      } else {
+        //OTHER
+        node.value += v
+        item.text = node.value
+        node.focus()
+      }
+    },
+    getChangeAllTitle(item, tag, index) {
+      item.titleMany++
+      if (item.text == '') {
+        item.titleMany = 0
+      }
+      if (item.titleMany >= 2) {
+        this.$message.error('最多插入两条词包')
+        item.titleMany = 2
+        return
+      }
+      var node = document.getElementsByClassName('rending-all')[index]
+      var v = '{' + tag.name + '}'
+      if (document.selection) {
+        //IE
+        node.focus()
+        var sel = document.selection.createRange()
+        sel.text = v
+        sel.select()
+      } else if (node.selectionStart || node.selectionStart == '0') {
+        //MOZILLA/GOOGLE
+        var startPos = node.selectionStart
+        var endPos = node.selectionEnd
+        var restoreTop = node.scrollTop
+        node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+        if (restoreTop > 0) {
+          node.scrollTop = restoreTop
+        }
+        item.text = node.value
+        node.focus()
+        node.selectionStart = startPos + v.length
+        node.selectionEnd = startPos + v.length
+      } else {
+        //OTHER
+        node.value += v
+        item.text = node.value
+        node.focus()
+      }
+    },
+    showElseClick(item) {
+      item.showElse = !item.showElse
+      if (!item.showElse) {
+        item.many = this.tags.length
+      } else {
+        item.many = 3
+      }
+    },
+    materialTypeChange() {
+      let type = this.materialType
+      if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
+        // this.createLargeImageCreativeCon = false
+        this.showLargeImage = false
+        this.showLargeVerticalImage = false
+        this.showHorizonVideo = false
+        this.showVerticalVideo = false
+        this.showGroupImage = false
+        this.showSmallImage = true
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
+        // this.createLargeImageCreativeCon = true
+        this.showLargeImage = false
+        this.showLargeVerticalImage = false
+        this.showHorizonVideo = false
+        this.showVerticalVideo = false
+        this.showGroupImage = false
+        this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
+        // this.createLargeImageCreativeCon = false
+        this.showLargeImage = false
+        this.showLargeVerticalImage = false
+        this.showHorizonVideo = false
+        this.showVerticalVideo = false
+        this.showGroupImage = true
+        this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
+        // this.createLargeImageCreativeCon = false
+        this.showLargeImage = false
+        this.showLargeVerticalImage = false
+        this.showHorizonVideo = true
+        this.showVerticalVideo = false
+        this.showGroupImage = false
+        this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
+        // this.createLargeImageCreativeCon = false
+        this.showLargeImage = false
+        this.showLargeVerticalImage = true
+        this.showHorizonVideo = false
+        this.showVerticalVideo = false
+        this.showGroupImage = false
+        this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+        // this.createLargeImageCreativeCon = false
+        this.showLargeImage = false
+        this.showLargeVerticalImage = false
+        this.showHorizonVideo = false
+        this.showVerticalVideo = true
+        this.showGroupImage = false
+        this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
+      }
+    },
+    //   创建大图横图创意
+    addCreative() {
+      let type = this.materialType
+      if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
+        this.HorizontalLargeImageListSmall.push({
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
+        this.HorizontalLargeImageListBig.push({
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
+        this.HorizontalLargeImageListZu.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
+        this.HorizontalLargeImageListShu.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
+        this.HorizontalLargeImageListBigShu.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+        this.HorizontalLargeImageListHeng.push({
+          creativeType: this.creativeType,
+          typeCode: type,
+          imageUrl: '',
+          text: '',
+          vadioUrl: '',
+          multiple: [],
+          countTag: 0,
+          many: 3,
+          showElse: true
+        })
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
+      }
+    },
+    deleteCreative(index) {
+      console.log(index)
+      console.log(this.HorizontalLargeImageList)
+      this.HorizontalLargeImageList.splice(index, 1)
+    },
+    getTags() {
+      getPackage({ accountId: this.accountId }).then(res => {
+        if (res.code == '0') {
+          this.tags = res.creative_word
+        }
+      })
+    },
+    addTitle() {
+      this.titleData.push({ text: '', titleMany: 0 })
+    },
+    tetleDetele(index) {
+      this.titleData.splice(index, 1)
+    }
+  },
+  created: function() {},
+  watch: {
+    creativeType: function(n, o) {
+      console.log(n, o)
+      this.HorizontalLargeImageListBig = []
+      this.HorizontalLargeImageListHeng = []
+      this.HorizontalLargeImageListShu = []
+      this.HorizontalLargeImageListZu = []
+      this.HorizontalLargeImageListSmall = []
+      this.HorizontalLargeImageListBigShu = []
+      this.HorizontalLargeImageList = []
+    },
+    accountId: function(n, o) {
+      if (n != '') {
+        this.getTags()
+      }
+    },
+    materialType: function(n, o) {
+      this.materialTypeChange()
+    }
+  },
+  computed: {
+    count: function() {
+      var bool
+      if (this.creativeType == 'customize') {
+        bool =
+          this.HorizontalLargeImageListBig.length +
+            this.HorizontalLargeImageListHeng.length +
+            this.HorizontalLargeImageListShu.length +
+            this.HorizontalLargeImageListZu.length +
+            this.HorizontalLargeImageListSmall.length +
+            this.HorizontalLargeImageListBigShu.length >=
+          10
+            ? true
+            : false
+      } else {
+        if (
+          this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
+          this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
+        ) {
+          bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true : false
+        } else {
+          bool =
+            this.HorizontalLargeImageListBig.length +
+              this.HorizontalLargeImageListZu.length +
+              this.HorizontalLargeImageListSmall.length +
+              this.HorizontalLargeImageListBigShu.length >=
+            10
+              ? true
+              : false
+        }
+      }
+      return bool
+    },
+    countMany: function() {
+      var bool =
+        this.HorizontalLargeImageListBig.length +
+        this.HorizontalLargeImageListHeng.length +
+        this.HorizontalLargeImageListShu.length +
+        this.HorizontalLargeImageListZu.length +
+        this.HorizontalLargeImageListSmall.length +
+        this.HorizontalLargeImageListBigShu.length
+      return bool
+    },
+    vadioMany: function() {
+      var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
+      return bool
+    },
+    imgMany: function() {
+      var bool =
+        this.HorizontalLargeImageListBig.length +
+        this.HorizontalLargeImageListZu.length +
+        this.HorizontalLargeImageListSmall.length +
+        this.HorizontalLargeImageListBigShu.length
+      return bool
+    }
+  }
+}
+</script>
+
+
+<style lang="scss">
+.dynamically_add_form_item {
+  .ant-form-item-label {
+    width: auto !important;
+  }
+  .ant-form-item-control-wrapper {
+    width: auto !important;
+  }
+}
+</style>

+ 4 - 180
src/views/template/userorientation/list.vue

@@ -5,29 +5,8 @@
       <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>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="定向人群包列表">
-              <a-input placeholder="请输入定向人群包列表" v-model="queryParam.retargetingTagsInclude"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="排除人群包列表">
-              <a-input placeholder="请输入排除人群包列表" v-model="queryParam.retargetingTagsExclude"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="受众性别">
-              <a-input placeholder="请输入受众性别" v-model="queryParam.gender"></a-input>
+            <a-form-item label="模板名称">
+              <a-input placeholder="请输入模板名称" v-model="queryParam.name"></a-input>
             </a-form-item>
           </a-col>
 
@@ -106,164 +85,9 @@ export default {
           }
         },
         {
-          title: '头条账号id',
-          align: 'center',
-          dataIndex: 'accountId'
-        },
-        {
-          title: '广告主id',
-          align: 'center',
-          dataIndex: 'advertiserId'
-        },
-        {
-          title: '定向人群包列表',
-          align: 'center',
-          dataIndex: 'retargetingTagsInclude'
-        },
-        {
-          title: '排除人群包列表',
-          align: 'center',
-          dataIndex: 'retargetingTagsExclude'
-        },
-        {
-          title: '受众性别',
-          align: 'center',
-          dataIndex: 'gender'
-        },
-        {
-          title: '年龄',
-          align: 'center',
-          dataIndex: 'age'
-        },
-        {
-          title: '受众最低android版本',
-          align: 'center',
-          dataIndex: 'androidOsv'
-        },
-        {
-          title: '受众最低ios版本',
-          align: 'center',
-          dataIndex: 'iosOsv'
-        },
-        {
-          title: '运营商类型',
-          align: 'center',
-          dataIndex: 'carrier'
-        },
-        {
-          title: '受众网络类型',
-          align: 'center',
-          dataIndex: 'ac'
-        },
-        {
-          title: '手机品牌',
-          align: 'center',
-          dataIndex: 'deviceBrand'
-        },
-        {
-          title: '受众文章分类',
-          align: 'center',
-          dataIndex: 'articleCategory'
-        },
-        {
-          title: '用户首次激活时间',
-          align: 'center',
-          dataIndex: 'activateType'
-        },
-        {
-          title: '受众平台',
-          align: 'center',
-          dataIndex: 'platform'
-        },
-        {
-          title: '地域定向城市或者区县列表',
-          align: 'center',
-          dataIndex: 'city'
-        },
-        {
-          title: '商圈ID数组',
-          align: 'center',
-          dataIndex: 'businessIds'
-        },
-        {
-          title: '地域类型',
-          align: 'center',
-          dataIndex: 'district'
-        },
-        {
-          title: '受众位置类型',
-          align: 'center',
-          dataIndex: 'locationType'
-        },
-        {
-          title: '兴趣分类',
-          align: 'center',
-          dataIndex: 'adTag'
-        },
-        {
-          title: '兴趣关键词, 传入具体的词id,非兴趣词包id',
-          align: 'center',
-          dataIndex: 'interestTags'
-        },
-        {
-          title: '行为定向',
-          align: 'center',
-          dataIndex: 'appBehaviorTarget'
-        },
-        {
-          title: 'APP行为定向,分类集合',
-          align: 'center',
-          dataIndex: 'appCategory'
-        },
-        {
-          title: 'APP行为定向,APP集合',
-          align: 'center',
-          dataIndex: 'appIds'
-        },
-        {
-          title: '产品目录ID(ID由查询产品目录接口得到)',
-          align: 'center',
-          dataIndex: 'productPlatformId'
-        },
-        {
-          title: 'H5地址参数',
-          align: 'center',
-          dataIndex: 'externalUrlParams'
-        },
-        {
-          title: '直达链接参数',
-          align: 'center',
-          dataIndex: 'openUrlParams'
-        },
-        {
-          title: '是否自定义商品定向',
-          align: 'center',
-          dataIndex: 'dpaLocalAudience'
-        },
-        {
-          title: '排除人群包',
-          align: 'center',
-          dataIndex: 'excludeCustomActions'
-        },
-        {
-          title: '包含人群包',
-          align: 'center',
-          dataIndex: 'includeCustomActions'
-        },
-        {
-          title: '精选流量包',
-          align: 'center',
-          dataIndex: 'superiorPopularityType'
-        },
-        {
-          title: '定向流量包ID数组',
-          align: 'center',
-          dataIndex: 'flowPackage'
-        },
-        {
-          title: '排除流量包ID数组',
+          title: '模板名称',
           align: 'center',
-          dataIndex: 'excludeFlowPackage'
+          dataIndex: 'name'
         },
         {
           title: 'status',

+ 59 - 14
src/views/template/userorientation/modules/ByteDanceUserOrientationTemplateModal.vue

@@ -35,8 +35,8 @@
           class="else-width"
           v-if="areaType!='NONE'"
         >
-          <transfer-city v-if="areaType == 'CITY'" :checkData.sync="cityList"></transfer-city>
-          <transfer v-if="areaType == 'COUNTY'" :checkData.sync="areaList"></transfer>
+          <transfer-city v-if="areaType == 'CITY'" :checkData.sync="cityList" :dataValue="cityStr"></transfer-city>
+          <transfer v-if="areaType == 'COUNTY'" :checkData.sync="areaList" :dataValue="areaStr"></transfer>
         </a-form-item>
 
         <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -70,10 +70,7 @@
           class="else-width"
           v-if="intrestType=='ZDY'"
         >
-          <intrest-category v-if="intrestType == 'ZDY'" :checkData.sync="intrestCategoryList" :dataValue="editData"></intrest-category>
-          {{intrestCategoryList}}
-          
-          <div @click="addData">tianji</div>
+          <intrest-category v-if="intrestType == 'ZDY'" :checkData.sync="intrestCategoryList" :dataValue="adTagStr"></intrest-category>
         </a-form-item>
         <a-form-item label="平台" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-radio-group v-model="platformType">
@@ -113,7 +110,7 @@
             placeholder="选择文章分类"
             style="width: 600px"
             @change="onChange"
-            v-if="showArticleCategory">
+            v-if="isArticleCategory == 'CATEGORY'">
             <a-select-option
               v-for="articleCategory in articleCategoryList"
               :key="articleCategory.itemValue"
@@ -162,6 +159,9 @@ export default {
   },
   data() {
     return {
+      cityStr:[],
+      areaStr:[],
+      adTagStr:[],
       cityList:[],
       areaList:[],
       name:"",
@@ -169,7 +169,6 @@ export default {
       platformType:"NONE",
       mobileType:[],
       intrestCategoryList:[],
-      editData:[ { "label": "游戏", "value": 10001 }, { "label": "家装建材", "value": 10201 }, { "label": "家居家纺", "value": 10202 }, { "label": "家电维修", "value": 10204 }, { "label": "日用百货", "value": 10205 }],
       smartFl:"0",
       intrestType:"NONE",
       title: '操作',
@@ -185,9 +184,10 @@ export default {
         xs: { span: 24 },
         sm: { span: 16 }
       },
+      id:null,
       confirmLoading: false,
       form: this.$form.createForm(this),
-      tags:[],
+      tags:null,
       gender: "NONE",
       toutiaoSex: {},
       ageRange: [],
@@ -195,11 +195,10 @@ export default {
       toutiaoNetType: {},
       isMobileBrand: "NONE",
       showMobileBrand: false,
-      mobileBrandList: {},
+      mobileBrandList: null,
       showArticleCategory: false,
       articleCategoryList: [],
       isArticleCategory: "NONE",
-      zdyrq: [],
       areaType: "NONE",
       value: undefined,
       model1: {},
@@ -278,13 +277,58 @@ export default {
       this.close()
     },
     handleOk() {},
-    add() {
-      this.edit({})
+    add(record) {
+      this.id = null;
+      this.model = Object.assign({}, record);
+      this.visible = true;
+      this.gender="NONE";
+      this.ageRange=[];
+      this.isMobileBrand="NONE";
+      this.showMobileBrand=false;
+      this.showArticleCategory=false;
+      this.tags = [];
+      this.isArticleCategory="NONE";
+      this.areaType="NONE";
+      this.cityStr=[];
+      this.areaStr=[];
+      this.adTagStr=[];
+      this.cityList=[];
+      this.areaList=[];
+      this.name="";
+      this.netType=[];
+      this.platformType="NONE";
+      this.mobileType=[];
+      this.intrestCategoryList=[];
+      this.smartFl="0";
+      this.intrestType="NONE";
+      this.gender="NONE";
+      this.ageRange=null;
     },
     edit(record) {
+      console.log(record)
+      this.visible = true;
+      this.gender = record.gender;
+      this.ageRange = JSON.parse(record.age);
+      this.intrestType = record.intrestType;
+      this.platformType = record.platform;
+      this.netType = JSON.parse(record.ac)
+      console.log(typeof this.netType)
+      this.smartFl = record.autoExtendEnabled;
+      this.isArticleCategory = record.articleCategoryType;
+      this.tags = JSON.parse(record.articleCategory);
+      this.isMobileBrand = record.mobileBrand;
+      this.mobileType = record.deviceBrand;
+      this.name = record.name;
+      this.areaType = record.areaType;
+      this.cityList = JSON.parse(record.cityStr);
+      this.areaList = JSON.parse(record.districtStr);
+      this.intrestCategoryList = JSON.parse(record.adTagStr);
+      this.cityStr = JSON.parse(record.cityStr);
+      this.areaStr = JSON.parse(record.districtStr);
+      this.adTagStr = JSON.parse(record.adTagStr);
+      this.id = record.id;
       // this.form.resetFields()
       this.model = Object.assign({}, record)
-      this.visible = true
     },
     close() {
       this.$emit('close')
@@ -333,6 +377,7 @@ export default {
         if (!err) {
           console.log('Received values of form: ', values);
           let params = {};
+          params.id = this.id;
           params.gender = this.gender;
           params.ageRange = this.ageRange;
           params.intrestType = this.intrestType;

+ 5 - 5
src/views/template/userorientation/modules/IntrestCategory.vue

@@ -65,7 +65,7 @@ p {
 
 <template>
   <div class="transfer">
-      
+
     <div class="transfer-box">
       <div class="content-box">
         <p class="content-title">兴趣分类</p>
@@ -94,14 +94,14 @@ p {
           </p>
         </div>
       </div>
-      
+
       <div
         class="content-box"
         :style="{borderRight:!showClass?'0px':'1px solid #dadfe3'}"
         v-show="showCityData"
       >
         <p class="content-title">二级分类</p>
-        
+
         <div class="content">
           <!-- <p>
             <input
@@ -192,10 +192,10 @@ export default {
       if (this.dataValue.length > 0) {
         this.checkData = this.dataValue
         this.checkMatched = this.dataValue.map(item => {
-          return item.value
+          return item.value;
         })
         this.checkMatchedCity = this.dataValue.map(item => {
-          return item.value
+          return item.value;
         })
         
         this.$emit('update:checkData', this.checkData)

+ 1 - 1
src/views/template/userorientation/modules/transferCity.vue

@@ -161,7 +161,7 @@ export default {
   name: 'ByteDanceUserOrientationTemplateList',
   components: {},
   props: {
-    editData: {
+    dataValue: {
       type: Array,
       default() {
         return []

+ 1 - 1
vue.config.js

@@ -63,7 +63,7 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        target: 'http://localhost:8080', //请求本地 需要jeecg-boot后台项目
+        target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
         ws: false,
         changeOrigin: true
       },