creatMaterialTest.vue 131 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708
  1. <template>
  2. <div ref="questionnaireBox" class="new-batch config-new-batch">
  3. <a-spin :spinning="spinning">
  4. <div class="chartBox">
  5. <a-row :gutter="20">
  6. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
  7. <a-card class="search-box step-jump" title="选择账户">
  8. <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
  9. <a-row :gutter="16">
  10. <a-col :span="16">
  11. <a-form-item
  12. label="账户名称"
  13. :labelCol="formItemLayout.labelCol"
  14. class="account-item require-check"
  15. >
  16. <!-- <div
  17. v-if="$route.query.id"
  18. style="line-height: 40px;
  19. font-size: 16px;
  20. font-weight: bold;"
  21. >
  22. <span v-for="(item, index) in creativeTagData" :key="index"
  23. >{{ item.authName + '(' + item.accountId + ')'
  24. }}{{ index == creativeTagData.length - 1 ? '' : ',' }}</span
  25. >
  26. </div> -->
  27. <selectTreeAccount
  28. v-model="accountIds"
  29. ref="treeSelect"
  30. style="width: 100%"
  31. :limit="1"
  32. :disabled="!!$route.query.id"
  33. />
  34. </a-form-item>
  35. </a-col>
  36. </a-row>
  37. <a-row :gutter="16">
  38. <a-col :span="16">
  39. <a-form-item label="营销场景">
  40. <a-radio-group
  41. button-style="solid"
  42. v-decorator="[
  43. 'hostingScene',
  44. {
  45. rules: [{ required: true, message: '营销场景必选' }],
  46. initialValue: 0,
  47. },
  48. ]"
  49. >
  50. <a-radio-button :value="0">常规推广</a-radio-button>
  51. </a-radio-group>
  52. </a-form-item>
  53. </a-col>
  54. </a-row>
  55. <a-row :gutter="16">
  56. <a-col :span="16">
  57. <a-form-item label="投放媒体">
  58. <!-- { label: '视频播放页广告', value: 3 }, -->
  59. <checkBoxGroup
  60. :options="[
  61. { label: '优选广告位', value: 1 },
  62. { label: '上下滑大屏广告', value: 6 },
  63. { label: '快手联盟优选', value: 10 },
  64. { label: '激励视频广告', value: 24 },
  65. ]"
  66. v-decorator="[
  67. 'sceneIds',
  68. {
  69. rules: [
  70. {
  71. required: true,
  72. message: '投放媒体必选',
  73. },
  74. ],
  75. initialValue: [1],
  76. },
  77. ]"
  78. @change="changeData"
  79. />
  80. </a-form-item>
  81. </a-col>
  82. </a-row>
  83. <a-row :gutter="16">
  84. <a-col :span="16">
  85. <a-form-item label="营销目标">
  86. <a-radio-group
  87. button-style="solid"
  88. v-decorator="[
  89. 'campaignType',
  90. {
  91. rules: [{ required: true, message: '营销目标必选' }],
  92. initialValue: 2,
  93. },
  94. ]"
  95. @change="changeCampaign"
  96. >
  97. <a-radio-button :value="2" :disabled="!!$route.query.id"
  98. >提升应用安装</a-radio-button
  99. >
  100. <a-radio-button :value="5" :disabled="!!$route.query.id"
  101. >收集销售线索</a-radio-button
  102. >
  103. </a-radio-group>
  104. </a-form-item>
  105. </a-col>
  106. </a-row>
  107. </a-form>
  108. </a-card>
  109. <a-card class="search-box step-jump" title="设置基本信息">
  110. <a-form layout="horizontal" v-bind="formItemLayout" :form="formInformation">
  111. <a-row :gutter="16">
  112. <a-col :span="16">
  113. <a-form-item label="项目名称">
  114. <a-input
  115. v-decorator="[
  116. 'name',
  117. {
  118. rules: [{ required: true, message: '名称必填' }],
  119. },
  120. ]"
  121. ></a-input>
  122. </a-form-item>
  123. </a-col>
  124. </a-row>
  125. <a-row :gutter="16">
  126. <a-col :span="16">
  127. <a-form-item>
  128. <span slot="label">
  129. <a-tooltip>
  130. <template slot="title">
  131. 命名规则修改后计划命名立刻生效,广告组/创意名称将在下次创建时生效,不输入将按照默认规则命名。日期/序号未设置情况下会默认在广告组名称后追加
  132. </template>
  133. <a-icon type="question-circle" />
  134. </a-tooltip>
  135. 自定义命名规则
  136. </span>
  137. <a-radio-group
  138. button-style="solid"
  139. v-decorator="[
  140. 'ruleEnable',
  141. {
  142. rules: [{ required: true, message: '自定义命名规则必选' }],
  143. initialValue: false,
  144. },
  145. ]"
  146. >
  147. <a-radio-button :value="false">不开启</a-radio-button>
  148. <a-radio-button :value="true">开启</a-radio-button>
  149. </a-radio-group>
  150. </a-form-item>
  151. </a-col>
  152. </a-row>
  153. <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
  154. <a-col :span="16">
  155. <a-form-item label="计划命名规则">
  156. <a-input
  157. v-decorator="[
  158. 'campaignNameRule',
  159. { rules: [{ message: '请填写计划的命名规则' }] },
  160. ]"
  161. allow-clear
  162. id="campaignNameRule"
  163. />
  164. <a-tag
  165. color="#2db7f5"
  166. @click="getChangeAll('时间', 'formInformation', 'campaignNameRule')"
  167. >+时间</a-tag
  168. >
  169. </a-form-item>
  170. </a-col>
  171. </a-row>
  172. <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
  173. <a-col :span="16">
  174. <a-form-item label="组命名规则">
  175. <a-input
  176. v-decorator="[
  177. 'unitNameRule',
  178. { rules: [{ message: '请填写组命名规范' }] },
  179. ]"
  180. allow-clear
  181. id="unitNameRule"
  182. />
  183. <a-tag
  184. color="#2db7f5"
  185. @click="getChangeAll('时间', 'formInformation', 'unitNameRule')"
  186. >+时间</a-tag
  187. >
  188. <a-tag
  189. color="#2db7f5"
  190. @click="getChangeAll('序号', 'formInformation', 'unitNameRule')"
  191. >+序号</a-tag
  192. >
  193. </a-form-item>
  194. </a-col>
  195. </a-row>
  196. <a-row :gutter="16" v-if="getFormData('formInformation', 'ruleEnable')">
  197. <a-col :span="16">
  198. <a-form-item label="创意命名规则">
  199. <a-input
  200. v-decorator="[
  201. 'creativeNameRule',
  202. { rules: [{ message: '请填写创意命名规则' }] },
  203. ]"
  204. allow-clear
  205. id="creativeNameRule"
  206. />
  207. <a-tag
  208. color="#2db7f5"
  209. @click="getChangeAll('时间', 'formInformation', 'creativeNameRule')"
  210. >+时间</a-tag
  211. >
  212. <a-tag
  213. color="#2db7f5"
  214. @click="getChangeAll('序号', 'formInformation', 'creativeNameRule')"
  215. >+序号</a-tag
  216. >
  217. </a-form-item>
  218. </a-col>
  219. </a-row>
  220. </a-form>
  221. </a-card>
  222. <a-card class="search-box step-jump" title="目标应用">
  223. <a-form layout="horizontal" v-bind="formItemLayout" :form="formTargetApp">
  224. <div
  225. v-if="
  226. getFormData('formProject', 'campaignType') &&
  227. getFormData('formProject', 'campaignType') == 2
  228. "
  229. >
  230. <a-row :gutter="16">
  231. <a-col :span="16">
  232. <a-form-item label="选择应用">
  233. <a-select
  234. style="width: 80%"
  235. allowClear
  236. v-decorator="[
  237. 'appId',
  238. {
  239. rules: [{ required: true, message: '应用必选' }],
  240. },
  241. ]"
  242. @change="changeAppId"
  243. >
  244. <a-select-option
  245. :value="item.appId"
  246. v-for="(item, index) in appList"
  247. :key="item.appId"
  248. >{{ item.appName }}({{ item.appVersion }}/{{
  249. item.platform == 1 || item.platform == 2
  250. ? 'android'
  251. : 'ios'
  252. }})</a-select-option
  253. >
  254. </a-select>
  255. <a-button type="primary" :loading="tongbuLoading" @click="tongbuClick"
  256. >刷新应用</a-button
  257. >
  258. </a-form-item>
  259. </a-col>
  260. </a-row>
  261. <a-row :gutter="16" v-if="changeAppIdVisible">
  262. <a-col :span="16">
  263. <a-form-item label="" v-bind="tailFormItemLayout">
  264. <a-checkbox
  265. v-decorator="[
  266. 'useAppMarket',
  267. {
  268. valuePropName: 'checked',
  269. initialValue: false,
  270. },
  271. ]"
  272. >
  273. 优先从系统应用商店下载
  274. </a-checkbox>
  275. </a-form-item>
  276. </a-col>
  277. </a-row>
  278. <a-row :gutter="16" v-if="getFormData('formTargetApp', 'useAppMarket')">
  279. <a-col :span="16">
  280. <a-form-item label="" v-bind="tailFormItemLayout">
  281. 请勾选投放应用已上架的应用商店
  282. <a-checkbox-group
  283. v-decorator="[
  284. 'appStore',
  285. {
  286. initialValue: [
  287. 'huawei',
  288. 'oppo',
  289. 'vivo',
  290. 'xiaomi',
  291. 'meizu',
  292. 'smartisan',
  293. ],
  294. },
  295. ]"
  296. >
  297. <a-checkbox value="huawei">华为</a-checkbox>
  298. <a-checkbox value="oppo">OPPO</a-checkbox>
  299. <a-checkbox value="vivo">VIVO</a-checkbox>
  300. <a-checkbox value="xiaomi">小米</a-checkbox>
  301. <a-checkbox value="meizu">魅族</a-checkbox>
  302. <a-checkbox value="smartisan">锤子</a-checkbox>
  303. </a-checkbox-group>
  304. </a-form-item>
  305. </a-col>
  306. </a-row>
  307. <a-row :gutter="16">
  308. <a-col :span="16">
  309. <a-form-item label="应用下载详情">
  310. <a-select
  311. v-decorator="['siteId']"
  312. showSearch
  313. allowClear
  314. placeholder="选择应用下载详情页"
  315. optionFilterProp="children"
  316. :filterOption="filterOption"
  317. >
  318. <a-select-option
  319. v-for="appModel in siteList"
  320. :key="appModel.siteId"
  321. :value="appModel.siteId"
  322. >
  323. {{ appModel.name }}
  324. </a-select-option>
  325. </a-select>
  326. </a-form-item>
  327. </a-col>
  328. </a-row>
  329. </div>
  330. <a-row
  331. :gutter="16"
  332. v-else-if="
  333. getFormData('formProject', 'campaignType') &&
  334. getFormData('formProject', 'campaignType') == 5
  335. "
  336. >
  337. <a-col :span="16">
  338. <a-form-item label="链接">
  339. <a-input
  340. placeholder="请填写链接"
  341. v-decorator="[
  342. 'webUri',
  343. { rules: [{ required: true, message: '链接不能为空' }] },
  344. ]"
  345. />
  346. </a-form-item>
  347. </a-col>
  348. </a-row>
  349. </a-form>
  350. </a-card>
  351. <a-card class="search-box step-jump">
  352. <span slot="title">
  353. 定向包
  354. <a-tooltip>
  355. <template slot="title"> 此处定向包内容均为固定测试的定向内容 </template>
  356. <a-icon type="question-circle" />
  357. </a-tooltip>
  358. </span>
  359. <a-form layout="horizontal" v-bind="formItemLayout" :form="formDirectional">
  360. <a-row :gutter="16">
  361. <a-col :span="16">
  362. <a-form-item label="自定义人群">
  363. <a-radio-group v-model="people" buttonStyle="solid" @change="personSelect">
  364. <a-radio-button value="0">不限</a-radio-button>
  365. <a-radio-button value="1">定向</a-radio-button>
  366. <a-radio-button value="2">排除</a-radio-button>
  367. <a-radio-button value="3">同时定向排除</a-radio-button>
  368. </a-radio-group>
  369. <a-tabs v-model="tabKey" @change="retargetAccountId" v-if="people != '0'">
  370. <a-button
  371. slot="tabBarExtraContent"
  372. type="primary"
  373. @click="refreshPopulation"
  374. :loading="refreshPopulationLoading"
  375. >刷新人群包</a-button
  376. >
  377. <a-tab-pane key="1" tab="定向池" v-if="people != '2'">
  378. <a-table
  379. :columns="retargetColumns"
  380. :row-key="(record) => record.key"
  381. :data-source="retargetDataAll"
  382. :loading="loading"
  383. style="width: 100%; margin: 15px 0"
  384. :pagination="false"
  385. :scroll="{ y: 250 }"
  386. :row-selection="rowSelectionMin"
  387. bordered
  388. rowKey="id"
  389. >
  390. <template slot="name" slot-scope="name">
  391. {{ name }}
  392. </template>
  393. <template slot="populationType" slot-scope="populationType">
  394. {{ populationType | customCrowdHandler }}
  395. </template>
  396. </a-table>
  397. </a-tab-pane>
  398. <a-tab-pane key="2" tab="排除池" v-if="people != '1'">
  399. <a-table
  400. :columns="retargetColumns"
  401. :row-key="(record) => record.key"
  402. :data-source="retargetDataAll"
  403. :loading="loading"
  404. style="width: 100%; margin: 15px 0"
  405. :pagination="false"
  406. :scroll="{ y: 250 }"
  407. :row-selection="rowSelectionMax"
  408. bordered
  409. rowKey="id"
  410. >
  411. <template slot="name" slot-scope="name">
  412. {{ name }}
  413. </template>
  414. <template slot="populationType" slot-scope="populationType">
  415. {{ populationType | customCrowdHandler }}
  416. </template>
  417. </a-table>
  418. </a-tab-pane>
  419. </a-tabs>
  420. </a-form-item>
  421. </a-col>
  422. </a-row>
  423. <a-row :gutter="16">
  424. <a-col :span="16">
  425. <a-form-item label="地域">
  426. <a-radio-group v-model="district" @change="cityChange" buttonStyle="solid">
  427. <a-radio-button value="NONE">不限</a-radio-button>
  428. <a-radio-button value="CITY">按省市</a-radio-button>
  429. </a-radio-group>
  430. <div
  431. class="region"
  432. style="margin-top: 20px; width: 100%"
  433. v-show="district != 'NONE'"
  434. >
  435. <div class="provincyCity" v-if="district == 'CITY'">
  436. <select-region
  437. :checkData.sync="regionList"
  438. :dataValue="regionList"
  439. />
  440. </div>
  441. </div>
  442. </a-form-item>
  443. </a-col>
  444. </a-row>
  445. <a-row :gutter="16" v-if="district == 'CITY'">
  446. <a-col :span="16">
  447. <a-form-item label="用户类型">
  448. <a-radio-group
  449. buttonStyle="solid"
  450. v-decorator="[
  451. 'userType',
  452. {
  453. initialValue: '0',
  454. },
  455. ]"
  456. >
  457. <a-radio-button value="0">实时在此的用户</a-radio-button>
  458. <a-radio-button value="1">常住在此的用户</a-radio-button>
  459. <a-radio-button value="2">不限</a-radio-button>
  460. </a-radio-group>
  461. </a-form-item>
  462. </a-col>
  463. </a-row>
  464. <a-row :gutter="16">
  465. <a-col :span="16">
  466. <a-form-item label="年龄">
  467. <a-radio-group v-model="ageType" buttonStyle="solid">
  468. <a-radio-button value="noLimit">不限</a-radio-button>
  469. <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
  470. <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
  471. </a-radio-group>
  472. <div v-if="ageType == 'ageLimit'" style="margin-top: 5px">
  473. <a-checkbox-group
  474. v-decorator="[
  475. 'agesRange',
  476. { rules: [{ required: true, message: '请选择年龄段' }] },
  477. ]"
  478. >
  479. <a-checkbox :value="18">18-23岁</a-checkbox>
  480. <a-checkbox :value="24">24-30岁</a-checkbox>
  481. <a-checkbox :value="31">31-40岁</a-checkbox>
  482. <a-checkbox :value="41">41-49岁</a-checkbox>
  483. <a-checkbox :value="50">50+</a-checkbox>
  484. </a-checkbox-group>
  485. </div>
  486. <div v-if="ageType == 'ageCustom'">
  487. <a-slider
  488. range
  489. :marks="marks"
  490. :min="18"
  491. :max="55"
  492. v-decorator="[
  493. 'age',
  494. {
  495. rules: [
  496. { required: true, message: '请选择年龄段' },
  497. { validator: handleConfirmValue },
  498. ],
  499. initialValue: [18, 18],
  500. },
  501. ]"
  502. />
  503. </div>
  504. </a-form-item>
  505. </a-col>
  506. </a-row>
  507. <a-row :gutter="16">
  508. <a-col :span="16">
  509. <a-form-item label="性别">
  510. <a-radio-group
  511. buttonStyle="solid"
  512. v-decorator="[
  513. 'gender',
  514. {
  515. initialValue: '',
  516. },
  517. ]"
  518. >
  519. <a-radio-button :value="''">不限</a-radio-button>
  520. <a-radio-button value="F">女性</a-radio-button>
  521. <a-radio-button value="M">男性</a-radio-button>
  522. </a-radio-group>
  523. </a-form-item>
  524. </a-col>
  525. </a-row>
  526. <a-row :gutter="16">
  527. <a-col :span="16">
  528. <a-form-item label="操作系统版本">
  529. <a-radio-group
  530. buttonStyle="solid"
  531. v-decorator="[
  532. 'platformOs',
  533. {
  534. initialValue: 3,
  535. },
  536. ]"
  537. :disabled="getFormData('formProject', 'campaignType') != 5"
  538. >
  539. <a-radio-button :value="3">不限</a-radio-button>
  540. <a-radio-button :value="1">android</a-radio-button>
  541. <a-radio-button :value="2">ios</a-radio-button>
  542. </a-radio-group>
  543. </a-form-item>
  544. <a-form-item
  545. label=""
  546. v-bind="tailFormItemLayout"
  547. v-if="
  548. getFormData('formDirectional', 'platformOs') &&
  549. getFormData('formDirectional', 'platformOs') == 1
  550. "
  551. >
  552. <a-select
  553. style="width: 300px"
  554. v-decorator="[
  555. 'platformOv',
  556. {
  557. rules: [{ required: true, message: '版本必选' }],
  558. initialValue: 3,
  559. },
  560. ]"
  561. >
  562. <a-select-option :value="3">不限版本</a-select-option>
  563. <a-select-option :value="4">4.x及以上</a-select-option>
  564. <a-select-option :value="5">5.x及以上</a-select-option>
  565. <a-select-option :value="6">6.x及以上</a-select-option>
  566. <a-select-option :value="7">7.x及以上</a-select-option>
  567. <a-select-option :value="8">8.x及以上</a-select-option>
  568. <a-select-option :value="9">9.x及以上</a-select-option>
  569. <a-select-option :value="10">10.x及以上</a-select-option>
  570. </a-select>
  571. </a-form-item>
  572. <a-form-item
  573. label=""
  574. v-bind="tailFormItemLayout"
  575. v-if="
  576. getFormData('formDirectional', 'platformOs') &&
  577. getFormData('formDirectional', 'platformOs') == 2
  578. "
  579. >
  580. <a-select
  581. style="width: 300px"
  582. v-decorator="[
  583. 'platformOv',
  584. {
  585. rules: [{ required: true, message: '版本必选' }],
  586. initialValue: 6,
  587. },
  588. ]"
  589. >
  590. <a-select-option :value="6">不限版本</a-select-option>
  591. <a-select-option :value="7">7.x及以上</a-select-option>
  592. <a-select-option :value="8">8.x及以上</a-select-option>
  593. <a-select-option :value="9">9.x及以上</a-select-option>
  594. <a-select-option :value="10">10.x及以上</a-select-option>
  595. <a-select-option :value="11">11.x及以上</a-select-option>
  596. <a-select-option :value="12">12.x及以上</a-select-option>
  597. <a-select-option :value="13">13.x及以上</a-select-option>
  598. <a-select-option :value="14">14.x及以上</a-select-option>
  599. </a-select>
  600. </a-form-item>
  601. </a-col>
  602. </a-row>
  603. <a-row :gutter="16">
  604. <a-col :span="16">
  605. <a-form-item label="智能扩量">
  606. <a-radio-group
  607. buttonStyle="solid"
  608. v-decorator="[
  609. 'isOpen',
  610. {
  611. rules: [{ required: true, message: '版本必选' }],
  612. initialValue: 1,
  613. },
  614. ]"
  615. >
  616. <a-radio-button :value="1">智能扩量</a-radio-button>
  617. </a-radio-group>
  618. </a-form-item>
  619. <a-form-item label="" v-bind="tailFormItemLayout">
  620. <a-checkbox-group
  621. v-decorator="['expansion', { initialValue: [] }]"
  622. style="width: 150%"
  623. >
  624. <a-checkbox
  625. value="noAgeBreak"
  626. style="margin-bottom: 8px"
  627. :disabled="
  628. ageType == 'ageLimit'
  629. ? !getFormData('formDirectional', 'agesRange') ||
  630. getFormData('formDirectional', 'agesRange').length == 0
  631. : ageType == 'ageCustom'
  632. ? !getFormData('formDirectional', 'age') ||
  633. getFormData('formDirectional', 'age') == []
  634. : true
  635. "
  636. >不可突破年龄</a-checkbox
  637. >
  638. <a-checkbox
  639. value="noGenderBreak"
  640. style="margin-bottom: 8px"
  641. :disabled="
  642. !getFormData('formDirectional', 'gender') ||
  643. getFormData('formDirectional', 'gender') == ''
  644. "
  645. >不可突破性别</a-checkbox
  646. >
  647. <a-checkbox
  648. value="noAreaBreak"
  649. style="margin-bottom: 8px"
  650. :disabled="regionList.length == 0"
  651. >不可突破地域</a-checkbox
  652. >
  653. </a-checkbox-group>
  654. </a-form-item>
  655. </a-col>
  656. </a-row>
  657. <a-row :gutter="16">
  658. <a-col :span="16">
  659. <a-form-item label="过滤已转化用户">
  660. <a-radio-group
  661. buttonStyle="solid"
  662. v-decorator="['filterConvertedLevel', { initialValue: 0 }]"
  663. style="width: 150%"
  664. >
  665. <a-radio-button :value="0">不限</a-radio-button>
  666. <a-radio-button :value="1">广告组</a-radio-button>
  667. <a-radio-button :value="2">广告计划</a-radio-button>
  668. <a-radio-button :value="3">本账户</a-radio-button>
  669. <a-radio-button :value="4">公司主体</a-radio-button>
  670. <a-radio-button :value="5">APP</a-radio-button>
  671. </a-radio-group>
  672. </a-form-item>
  673. </a-col>
  674. </a-row>
  675. </a-form>
  676. </a-card>
  677. <a-card class="search-box step-jump" title="排期预算">
  678. <a-form layout="horizontal" v-bind="formItemLayout" :form="formOriginality">
  679. <a-row :gutter="16">
  680. <a-col :span="16">
  681. <a-form-item label="投放排期">
  682. <a-radio-group
  683. button-style="solid"
  684. v-decorator="[
  685. 'today',
  686. {
  687. initialValue: 4,
  688. },
  689. ]"
  690. >
  691. <a-radio-button :value="4">从今天开始长期投放</a-radio-button>
  692. </a-radio-group>
  693. </a-form-item>
  694. </a-col>
  695. </a-row>
  696. <a-row :gutter="16">
  697. <a-col :span="16">
  698. <a-form-item label="投放时段">
  699. <a-radio-group
  700. button-style="solid"
  701. @change="changeTimeData"
  702. v-decorator="[
  703. 'scheduleTime',
  704. {
  705. rules: [
  706. {
  707. required: true,
  708. message: '创意展现方式必选',
  709. },
  710. ],
  711. initialValue: 1,
  712. },
  713. ]"
  714. >
  715. <a-radio-button :value="1">全天</a-radio-button>
  716. <a-radio-button :value="2">特定时间</a-radio-button>
  717. </a-radio-group>
  718. </a-form-item>
  719. <a-form-item
  720. label=""
  721. v-bind="tailFormItemLayout"
  722. v-show="
  723. getFormData('formOriginality', 'scheduleTime') &&
  724. getFormData('formOriginality', 'scheduleTime') == 2
  725. "
  726. >
  727. <scheduleTime
  728. v-if="
  729. getFormData('formOriginality', 'scheduleTime') &&
  730. getFormData('formOriginality', 'scheduleTime') == 2
  731. "
  732. style="width: 100%"
  733. :scheduleTime.sync="scheduleTimeData"
  734. ref="selectCheck"
  735. />
  736. </a-form-item>
  737. </a-col>
  738. </a-row>
  739. <a-row :gutter="16">
  740. <a-col :span="16">
  741. <a-form-item label="单日预算">
  742. <a-input-number
  743. v-decorator="[
  744. 'dayBudget',
  745. {
  746. rules: [
  747. {
  748. required: true,
  749. message: '不小于500,不超过100000000,仅支持输入自然数',
  750. },
  751. ],
  752. },
  753. ]"
  754. :min="500"
  755. :max="100000000"
  756. style="width: 90%"
  757. placeholder="不小于500,不超过100000000,仅支持输入自然数"
  758. :precision="0"
  759. />
  760. </a-form-item>
  761. </a-col>
  762. </a-row>
  763. </a-form>
  764. </a-card>
  765. <a-card class="search-box step-jump" title="优化目标">
  766. <a-form layout="horizontal" v-bind="formItemLayout" :form="formOptimize">
  767. <a-row :gutter="16">
  768. <a-col :span="16">
  769. <a-form-item label="优化目标">
  770. <a-radio-group
  771. v-decorator="['bidType', { initialValue: 10 }]"
  772. button-style="solid"
  773. >
  774. <a-radio-button :value="10"> 转化数 </a-radio-button>
  775. </a-radio-group>
  776. </a-form-item>
  777. </a-col>
  778. </a-row>
  779. <a-row :gutter="16">
  780. <a-col :span="16">
  781. <a-form-item label="转化目标">
  782. <a-select
  783. style="width: 300px"
  784. allowClear
  785. v-decorator="[
  786. 'ocpxActionType',
  787. { rules: [{ required: true, message: '转化目标必选' }] },
  788. ]"
  789. @change="getDeepTypesList"
  790. >
  791. <a-select-option
  792. :value="items.ocpx_action_type"
  793. v-for="items in ocpxActionList"
  794. >{{ items.name }}</a-select-option
  795. >
  796. </a-select>
  797. </a-form-item>
  798. </a-col>
  799. </a-row>
  800. <a-row :gutter="16">
  801. <a-col :span="16">
  802. <a-form-item label="计费方式">
  803. <a-radio-group default-value="10" button-style="solid">
  804. <a-radio-button value="10"> 按展示付费(oCPM) </a-radio-button>
  805. </a-radio-group>
  806. </a-form-item>
  807. </a-col>
  808. </a-row>
  809. <a-row :gutter="16">
  810. <a-col :span="16">
  811. <a-form-item label="转化目标出价">
  812. <a-input-number
  813. v-decorator="[
  814. 'cpaBid',
  815. {
  816. rules: [{ required: true, message: '转化目标出价必填' }],
  817. },
  818. ]"
  819. :min="0"
  820. :max="100000000"
  821. style="width: 90%"
  822. :precision="2"
  823. />
  824. </a-form-item>
  825. </a-col>
  826. </a-row>
  827. <a-row :gutter="16">
  828. <a-col
  829. :span="16"
  830. v-if="
  831. (getFormData('formOptimize', 'ocpxActionType') == 180 ||
  832. getFormData('formOptimize', 'ocpxActionType') == 53) &&
  833. deepTypesList.length > 0
  834. "
  835. >
  836. <a-form-item label="深度转化目标">
  837. <a-select
  838. v-decorator="['deepConversionType']"
  839. allowClear
  840. style="width: 300px"
  841. >
  842. <a-select-option
  843. :value="items.event_type"
  844. v-for="(items, index) of deepTypesList"
  845. :key="index"
  846. >
  847. {{ items.name }}</a-select-option
  848. >
  849. </a-select>
  850. </a-form-item>
  851. </a-col>
  852. </a-row>
  853. <a-row :gutter="16">
  854. <a-col
  855. :span="16"
  856. v-if="
  857. (getFormData('formOptimize', 'ocpxActionType') == 180 ||
  858. getFormData('formOptimize', 'ocpxActionType') == 53) &&
  859. deepTypesList.length > 0
  860. "
  861. >
  862. <a-form-item label="深度转化出价">
  863. <a-input-number
  864. v-decorator="['deepConversionBid']"
  865. :min="0"
  866. :max="100000000"
  867. style="width: 90%"
  868. :precision="2"
  869. />
  870. </a-form-item>
  871. </a-col>
  872. </a-row>
  873. </a-form>
  874. </a-card>
  875. <a-card class="search-box step-jump" title="创意信息">
  876. <a-form layout="horizontal" v-bind="formItemLayout" :form="formCreative">
  877. <a-row :gutter="16">
  878. <a-col :span="16">
  879. <a-form-item label="智能抽帧">
  880. <a-radio-group
  881. v-decorator="['smartCover', { initialValue: 2 }]"
  882. button-style="solid"
  883. >
  884. <a-radio-button :value="2"> 关闭 </a-radio-button>
  885. <a-radio-button :value="1"> 开启 </a-radio-button>
  886. </a-radio-group>
  887. </a-form-item>
  888. </a-col>
  889. </a-row>
  890. <a-row :gutter="16">
  891. <a-col :span="16">
  892. <a-form-item label="行动号召按钮">
  893. <a-select
  894. v-decorator="[
  895. 'actionBar',
  896. { rules: [{ required: true, message: '请选择行动号召按钮文案' }] },
  897. ]"
  898. showSearch
  899. allowClear
  900. placeholder="选择行动号召按钮文案"
  901. optionFilterProp="children"
  902. :filterOption="filterOption"
  903. >
  904. <a-select-option
  905. v-for="appModel in actionBarTextList"
  906. :key="appModel.id"
  907. :value="appModel.actionBarText"
  908. >
  909. {{ appModel.actionBarText }}
  910. </a-select-option>
  911. </a-select>
  912. </a-form-item>
  913. </a-col>
  914. </a-row>
  915. <a-row :gutter="16">
  916. <a-col :span="16">
  917. <a-form-item label="广告语">
  918. <div
  919. style="position: relative"
  920. v-for="(item, index) in descriptionList"
  921. :key="index"
  922. >
  923. <a-textarea
  924. class="rending"
  925. placeholder="请输入广告语"
  926. @change="descriptionchange(item.value, index)"
  927. v-model.trim="item.value"
  928. :autosize="{ minRows: 3, maxRows: 6 }"
  929. :max-length="30"
  930. ></a-textarea>
  931. <p
  932. style="
  933. font-size: 12px;
  934. color: #b6bbc7;
  935. letter-spacing: 0.3px;
  936. text-align: right;
  937. line-height: 30px;
  938. position: absolute;
  939. bottom: 0;
  940. right: 6px;
  941. width: 100%;
  942. margin-bottom: 0;
  943. border: 0;
  944. "
  945. >
  946. {{ item.value.length }}/30
  947. <!-- {{ getFormData('description').length }}/30 -->
  948. </p>
  949. <div style="position: absolute; right: -50px; top: -10px">
  950. <a-icon
  951. type="plus"
  952. @click="addDescription()"
  953. style="margin-right: 15px"
  954. />
  955. <a-icon
  956. type="minus"
  957. @click="removeDescription(index)"
  958. v-if="descriptionList.length > 1"
  959. />
  960. </div>
  961. </div>
  962. </a-form-item>
  963. </a-col>
  964. </a-row>
  965. <a-row :gutter="16">
  966. <a-col :span="16">
  967. <a-form-item label="素材挖掘">
  968. <a-radio-group
  969. v-decorator="['assetMining', { initialValue: 2 }]"
  970. button-style="solid"
  971. >
  972. <a-radio-button :value="2"> 关闭 </a-radio-button>
  973. <a-radio-button :value="1"> 开启 </a-radio-button>
  974. </a-radio-group>
  975. </a-form-item>
  976. </a-col>
  977. </a-row>
  978. <a-row :gutter="16">
  979. <a-col :span="16">
  980. <a-form-item label="第三方点击监测链接">
  981. <a-input
  982. v-decorator="[
  983. 'clickUrl',
  984. {
  985. rules: [
  986. {
  987. required:
  988. getFormData('formProject', 'campaignType') &&
  989. getFormData('formProject', 'campaignType') == 2,
  990. message: '请填写第三方点击监测链接',
  991. },
  992. { validator: handleConfirmValueUrl },
  993. ],
  994. },
  995. ]"
  996. allow-clear
  997. id="clickUrl"
  998. />
  999. </a-form-item>
  1000. </a-col>
  1001. </a-row>
  1002. <a-row :gutter="16">
  1003. <a-col :span="16">
  1004. <a-form-item label="第三方actionBar监测链接">
  1005. <a-input
  1006. v-decorator="[
  1007. 'actionbarClickUrl',
  1008. {
  1009. rules: [{ validator: handleConfirmValueOkUndefind }],
  1010. },
  1011. ]"
  1012. allow-clear
  1013. id="actionbarClickUrl"
  1014. />
  1015. </a-form-item>
  1016. </a-col>
  1017. </a-row>
  1018. <a-row :gutter="16">
  1019. <a-col :span="16">
  1020. <a-form-item label="视频数量">
  1021. <a-input-number
  1022. v-decorator="[
  1023. 'videoCount',
  1024. {
  1025. rules: [
  1026. {
  1027. required: true,
  1028. message: '视频数量必填',
  1029. },
  1030. ],
  1031. },
  1032. ]"
  1033. :min="1"
  1034. :max="20"
  1035. style="width: 90%"
  1036. :precision="0"
  1037. />
  1038. </a-form-item>
  1039. </a-col>
  1040. </a-row>
  1041. </a-form>
  1042. </a-card>
  1043. <div style="display: flex; justify-content: flex-end; margin-bottom: 100px">
  1044. <div>
  1045. <a-button
  1046. type="primary"
  1047. style="margin-right: 15px"
  1048. @click="handleSubmit"
  1049. :loading="sumbitLoading"
  1050. :disabled="disabled"
  1051. >
  1052. 创建
  1053. </a-button>
  1054. <a-button @click="clearAllData"> 取消 </a-button>
  1055. </div>
  1056. </div>
  1057. </a-col>
  1058. </a-row>
  1059. </div>
  1060. </a-spin>
  1061. </div>
  1062. </template>
  1063. <script>
  1064. // import UserMenu from '../tools/UserMenu'
  1065. // import SMenu from '../menu/'
  1066. import { mapGetters } from 'vuex'
  1067. import Logo from '@/components/tools/Logo.vue'
  1068. import pick from 'lodash.pick'
  1069. import { mixin } from '@/utils/mixin.js'
  1070. // import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  1071. import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
  1072. import moment from 'moment'
  1073. import selectCheckAll from '@/components/formComponents/toutiaoTime'
  1074. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  1075. import uploadFile from '@/components/uploadFileMd5Push.vue'
  1076. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  1077. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  1078. import selectRegion from '@/views/modules/kuaishouapp/account/stepForm/stepModule/selectRegion'
  1079. import scheduleTime from '@/components/formComponents/toutiaoTime'
  1080. // import EditableCell from './editablCell'
  1081. // import lookPreviewVue from './lookPreview.vue'
  1082. function tqFun(qcArr1) {
  1083. var tempArr = []
  1084. function bbFun(qcArr) {
  1085. for (var i = 0; i < qcArr.length; i++) {
  1086. if (qcArr[i] instanceof Array) {
  1087. bbFun(qcArr[i])
  1088. } else {
  1089. tempArr.push(qcArr[i])
  1090. }
  1091. }
  1092. return tempArr
  1093. }
  1094. return bbFun(qcArr1)
  1095. }
  1096. let optionsAppActive = []
  1097. let businessOptions = []
  1098. let interestVideoOptions = []
  1099. let retargetColumns = [
  1100. {
  1101. title: '人群包',
  1102. dataIndex: 'name',
  1103. sorter: true,
  1104. width: '40%',
  1105. scopedSlots: { customRender: 'name' },
  1106. },
  1107. {
  1108. title: '属性',
  1109. dataIndex: 'populationType',
  1110. scopedSlots: {
  1111. customRender: 'populationType',
  1112. },
  1113. width: 200,
  1114. },
  1115. {
  1116. title: '所属账号',
  1117. dataIndex: 'accountId',
  1118. sorter: true,
  1119. width: '40%',
  1120. scopedSlots: { customRender: 'accountId' },
  1121. },
  1122. ]
  1123. var str = ''
  1124. for (let i = 0; i < 7 * 24; i++) {
  1125. str += '0'
  1126. }
  1127. export default {
  1128. name: 'GlobalHeader',
  1129. components: {
  1130. // UserMenu,
  1131. // SMenu,
  1132. Logo,
  1133. selectTreeAccount,
  1134. selectCheckAll,
  1135. checkBoxGroup,
  1136. uploadFile,
  1137. selectTable,
  1138. selectRegion,
  1139. scheduleTime,
  1140. // EditableCell
  1141. },
  1142. mixins: [mixin],
  1143. props: {
  1144. mode: {
  1145. type: String,
  1146. // sidemenu, topmenu
  1147. default: 'sidemenu',
  1148. },
  1149. theme: {
  1150. type: String,
  1151. required: false,
  1152. default: 'dark',
  1153. },
  1154. collapsed: {
  1155. type: Boolean,
  1156. required: false,
  1157. default: false,
  1158. },
  1159. device: {
  1160. type: String,
  1161. required: false,
  1162. default: 'desktop',
  1163. },
  1164. },
  1165. data() {
  1166. return {
  1167. spinning: false,
  1168. accountIds: undefined,
  1169. fansStarOptions: [],
  1170. fansStarType: 0,
  1171. deviceType: 0,
  1172. priceType: 0,
  1173. customCrowd: '0',
  1174. tabKey: '0',
  1175. retargetDataAll: [],
  1176. refreshPopulationLoading: false,
  1177. finallyRightTree: [],
  1178. retargetColumns,
  1179. activeKey: '',
  1180. loading: false,
  1181. formProject: this.$form.createForm(this), //选择账户
  1182. formInformation: this.$form.createForm(this), //设置基本信息表单
  1183. formTargetApp: this.$form.createForm(this), //目标应用
  1184. formDirectional: this.$form.createForm(this), //定向包编辑表单
  1185. platformOsDisabled: false,
  1186. formOptimize: this.$form.createForm(this), //优化目标
  1187. formOriginality: this.$form.createForm(this), //排期预算表单
  1188. formCreative: this.$form.createForm(this), //创意表单
  1189. sumbitLoading: false,
  1190. //基本信息参数
  1191. budgetType: '1',
  1192. dayBudgetType: '1',
  1193. projectId: null,
  1194. projectName: null,
  1195. //目标应用参数
  1196. targetAppVisible: false,
  1197. appList: [], //分平台数据,从总数据中筛选,避免多次请求接口
  1198. appListAll: [], //所有的数据,做分平台的元数据
  1199. siteList: [],
  1200. tongbuLoading: false, //同步app按钮loading
  1201. uriCheck: false, //调起链接,是否开启
  1202. multipleBidDataDrawer: [],
  1203. creativeTagData: [],
  1204. multipleBidData: [],
  1205. appDetail: null,
  1206. personLoading: false,
  1207. district: 'NONE',
  1208. regionList: [],
  1209. ageType: 'noLimit',
  1210. marks: {
  1211. 18: '18岁',
  1212. 23: '23岁',
  1213. 28: '28岁',
  1214. 33: '33岁',
  1215. 38: '38岁',
  1216. 43: '43岁',
  1217. 48: '48岁',
  1218. 55: '55岁',
  1219. },
  1220. // convertId: null,
  1221. // convertList: [],
  1222. // convertType: '1',
  1223. //目标人群参数
  1224. people: '0',
  1225. tabKey: '1',
  1226. incluedSelectedRowKeys: [],
  1227. incluedSelectedKeys: [],
  1228. excludeSelectedKeys: [],
  1229. excludeSelectedRowKeys: [],
  1230. targetPersonVisible: false,
  1231. personList: [],
  1232. checkPerson: [],
  1233. checkPersonAll: [],
  1234. checkPersonElse: [],
  1235. checkPersonOne: '',
  1236. showCheckPerson: [],
  1237. sumContent: 0,
  1238. searchTemplate: '',
  1239. scheduleTimeData: str,
  1240. //优化目标参数
  1241. groupTypeData: null,
  1242. //创意信息参数
  1243. optimizeVisible: false,
  1244. adposition: 1,
  1245. programUnitCnt: 60,
  1246. customUnitCnt: 400,
  1247. customUnitCntMax: 400,
  1248. imageCntMax: 15,
  1249. actionBarTextList: [],
  1250. descriptionList: [{ value: '' }],
  1251. fieldNames: {
  1252. label: 'category_name',
  1253. value: 'category_id',
  1254. children: 'child',
  1255. },
  1256. createOptions: [],
  1257. showCreativeData: null,
  1258. //公共参数
  1259. activeStep: 0,
  1260. screenWidth: document.body.clientWidth,
  1261. headerBarFixed: false,
  1262. //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  1263. topMenuStyle: {
  1264. headerIndexLeft: {},
  1265. topNavHeader: {},
  1266. headerIndexRight: {},
  1267. topSmenuStyle: {},
  1268. },
  1269. stepsArr: [
  1270. { title: '选择项目' },
  1271. { title: '设置基本信息' },
  1272. { title: '目标应用' },
  1273. { title: '目标人群' },
  1274. { title: '优化目标' },
  1275. { title: '创意信息' },
  1276. { title: '素材信息' },
  1277. ],
  1278. formItemLayout: {
  1279. labelCol: { span: 4 },
  1280. wrapperCol: { span: 16 },
  1281. },
  1282. formDrawerItemLayout: {
  1283. labelCol: { span: 5 },
  1284. wrapperCol: { span: 19 },
  1285. },
  1286. tailFormItemLayout: {
  1287. wrapperCol: {
  1288. sm: {
  1289. span: 20,
  1290. offset: 4,
  1291. },
  1292. },
  1293. },
  1294. tailFormItemLayoutElse: {
  1295. wrapperCol: {
  1296. sm: {
  1297. span: 20,
  1298. offset: 1,
  1299. },
  1300. },
  1301. },
  1302. tailFormDrawerItemLayout: {
  1303. wrapperCol: {
  1304. sm: {
  1305. span: 19,
  1306. offset: 5,
  1307. },
  1308. },
  1309. },
  1310. disabled: false,
  1311. retargetDataAll: [],
  1312. changeAppIdVisible: true,
  1313. ocpxActionList: [],
  1314. deepTypesList: [],
  1315. }
  1316. },
  1317. computed: {
  1318. rowSelectionMax() {
  1319. return {
  1320. onChange: (selectedRowKeys, selectedRows) => {
  1321. this.excludeSelectedRowKeys = selectedRowKeys
  1322. this.excludeSelectedKeys = selectedRows
  1323. },
  1324. // selectedRowKeys: this.finallyRightTree[
  1325. // this.finallyRightTree.findIndex(item => item.key === this.activeKey)
  1326. // ].excludeSelectedRowKeys,
  1327. getCheckboxProps: (record) => ({
  1328. props: {
  1329. disabled: this.incluedSelectedRowKeys.indexOf(record.key) > -1,
  1330. name: record.name,
  1331. defaultChecked: this.excludeSelectedRowKeys.indexOf(record.key) > -1,
  1332. },
  1333. }),
  1334. }
  1335. },
  1336. rowSelectionMin() {
  1337. return {
  1338. onChange: (selectedRowKeys, selectedRows) => {
  1339. this.incluedSelectedRowKeys = selectedRowKeys
  1340. this.incluedSelectedKeys = selectedRows
  1341. },
  1342. // selectedRowKeys: this.finallyRightTree[
  1343. // this.finallyRightTree.findIndex(item => item.key === this.activeKey)
  1344. // ].incluedSelectedRowKeys,
  1345. getCheckboxProps: (record) => ({
  1346. props: {
  1347. disabled: this.excludeSelectedRowKeys.indexOf(record.key) > -1,
  1348. name: record.name,
  1349. defaultChecked: this.incluedSelectedRowKeys.indexOf(record.key) > -1,
  1350. },
  1351. }),
  1352. }
  1353. },
  1354. },
  1355. watch: {
  1356. accountIds: function (n, o) {
  1357. if (this.$route.query.id) {
  1358. return
  1359. } else {
  1360. if (!!n) {
  1361. this.descriptionList = [{ value: '' }]
  1362. this.getAction('/kuaishou/batch/getAppList', { accountId: n }).then((res) => {
  1363. if (res.success) {
  1364. this.appList = res.result.map((item, index) => {
  1365. return {
  1366. ...item,
  1367. key: index,
  1368. }
  1369. })
  1370. }
  1371. })
  1372. // this.getIsActivate(null)
  1373. this.getOcpxActionList(null)
  1374. }
  1375. }
  1376. },
  1377. activeKey: function (n, o) {
  1378. if (n != '') {
  1379. this.retargetAccountId(n)
  1380. }
  1381. },
  1382. },
  1383. mounted() {
  1384. this.$nextTick(function () {
  1385. this.getActionBarText()
  1386. if (this.$route.query.id) {
  1387. this.getQueryById(this.$route.query.id)
  1388. }
  1389. window.addEventListener('scroll', this.onScroll)
  1390. const that = this
  1391. window.onresize = () => {
  1392. return (() => {
  1393. window.screenWidth = document.body.clientWidth
  1394. that.screenWidth = window.screenWidth
  1395. })()
  1396. }
  1397. })
  1398. },
  1399. filters: {
  1400. unitType(val) {
  1401. let data = {
  1402. 4: '自定义',
  1403. 7: '程序化',
  1404. 0: '不限',
  1405. }
  1406. return data[val]
  1407. },
  1408. channelType(val) {
  1409. let data = {
  1410. 0: '内部',
  1411. 1: '素造',
  1412. 2: '不限',
  1413. }
  1414. return data[val]
  1415. },
  1416. business(theme) {
  1417. let businessInterest = businessOptions.map((item) => {
  1418. return {
  1419. tagId: item.tagId,
  1420. tagName: item.tagName,
  1421. }
  1422. })
  1423. return businessInterest.filter((item) => {
  1424. return item.tagId == theme
  1425. })[0].tagName
  1426. },
  1427. optionsApp(theme) {
  1428. let optionsAppdata = optionsAppActive.map((item) => {
  1429. return {
  1430. tagId: item.tagId,
  1431. tagName: item.tagName,
  1432. }
  1433. })
  1434. return optionsAppdata.filter((item) => {
  1435. return item.tagId == theme
  1436. })[0].tagName
  1437. },
  1438. interestVideo(theme) {
  1439. let interestVideoOptionsData = interestVideoOptions.map((item) => {
  1440. return {
  1441. tagId: item.tagId,
  1442. tagName: item.tagName,
  1443. }
  1444. })
  1445. return interestVideoOptionsData.filter((item) => {
  1446. return item.tagId == theme
  1447. })[0].tagName
  1448. },
  1449. },
  1450. methods: {
  1451. ...mapGetters(['userInfo']),
  1452. moment,
  1453. getOcpxActionList(value) {
  1454. var params = {}
  1455. params.accountId = this.accountIds
  1456. params.campaignType = this.getFormData('formProject', 'campaignType')
  1457. params.sceneCategory = 2
  1458. params.sceneIds = this.getFormData('formProject', 'sceneIds')
  1459. params.appId = value ? value : null
  1460. this.postDataAction('/kuaishou/batch/conversionInfos', params).then((res) => {
  1461. if (res.success) {
  1462. this.ocpxActionList = res.result.data.ocpx_types
  1463. }
  1464. })
  1465. },
  1466. getDeepTypesList(data) {
  1467. if (!!data) {
  1468. var params = {}
  1469. params.accountId = this.accountIds
  1470. params.sceneCategory = 0
  1471. params.campaignType = this.getFormData('formProject', 'campaignType')
  1472. params.sceneIds = this.getFormData('formProject', 'sceneIds')
  1473. params.appId = this.getFormData('formTargetApp', 'appId')
  1474. params.ocpxActionType = data
  1475. this.postDataAction('/kuaishou/batch/deepTypes', params).then((res) => {
  1476. if (res.success) {
  1477. this.deepTypesList = res.result.data.deep_types
  1478. }
  1479. })
  1480. } else {
  1481. this.deepTypesList = []
  1482. }
  1483. },
  1484. changeData(data) {
  1485. if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
  1486. data.splice(
  1487. data.findIndex((item) => item == 1),
  1488. 1
  1489. )
  1490. } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
  1491. data.splice(0, data.length - 1)
  1492. } else if (data.length == 0) {
  1493. data.push(1)
  1494. }
  1495. this.getOcpxActionList(null)
  1496. },
  1497. changeCampaign(e) {
  1498. console.log(e.target.value)
  1499. this.getActionBarText()
  1500. },
  1501. tongbuClick() {
  1502. this.tongbuLoading = true
  1503. // this.$refs.application.showApplication()
  1504. this.getAction('/kuaishou/batch/syncAppList', {
  1505. accountId: this.accountIds,
  1506. }).then((res) => {
  1507. if (res.success) {
  1508. this.tongbuLoading = false
  1509. this.$message.success(res.message)
  1510. this.getAction('/kuaishou/batch/getAppList', { accountId: this.accountIds }).then((res) => {
  1511. if (res.success) {
  1512. this.appList = res.result.map((item, index) => {
  1513. return {
  1514. ...item,
  1515. key: index,
  1516. }
  1517. })
  1518. }
  1519. })
  1520. } else {
  1521. this.tongbuLoading = false
  1522. this.$message.error(res.message)
  1523. }
  1524. })
  1525. },
  1526. refreshPopulation() {
  1527. if (this.accountIds) {
  1528. this.refreshPopulationLoading = true
  1529. // this.$refs.application.showApplication()
  1530. this.getAction('/kuaishou/batch/pullPopulationList', {
  1531. accountId: this.accountIds,
  1532. }).then((res) => {
  1533. if (res.success) {
  1534. this.refreshPopulationLoading = false
  1535. this.$message.success(res.message)
  1536. this.retargetTabChange()
  1537. } else {
  1538. this.refreshPopulationLoading = false
  1539. this.$message.error(res.message)
  1540. }
  1541. })
  1542. } else {
  1543. this.$message.error('请先选择账户')
  1544. }
  1545. },
  1546. handleConfirmValueUrl(rule, value, callback) {
  1547. if (
  1548. this.getFormData('formProject', 'campaignType') &&
  1549. this.getFormData('formProject', 'campaignType') == 2
  1550. ) {
  1551. if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
  1552. callback()
  1553. } else {
  1554. callback('链接不能为空且开头为http://或https://或kwai://')
  1555. }
  1556. } else {
  1557. if (!!!value) {
  1558. callback()
  1559. } else if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value)) {
  1560. callback()
  1561. } else {
  1562. callback('链接开头为http://或https://或kwai://')
  1563. }
  1564. }
  1565. },
  1566. handleConfirmValueOkUndefind(rule, value, callback) {
  1567. if (!!!value) {
  1568. callback()
  1569. } else if (/(http|https|kwai):\/\/([\w.]+\/?)\S*/.test(value)) {
  1570. callback()
  1571. } else {
  1572. callback('链接开头为http://或https://或kwai://')
  1573. }
  1574. },
  1575. /*
  1576. @params str{ String} 要截取的字符串
  1577. @params start { Number } 首次截取的开始索引,每次截取后递增
  1578. @params end { Number } 首次截取的结束索引,每次截取后递增
  1579. @params unit { Number } 每一组个数
  1580. */
  1581. // 将字符串转换成unit个字符为一组的数组
  1582. createArr(str, start, end, unit) {
  1583. if (str) {
  1584. let arr = [] //保存每次截取后的字符串
  1585. let counts = Math.ceil(str.length / unit) //循环截取的次数,向上取整
  1586. for (let i = 0; i < counts; i++) {
  1587. let newStr = str.substring(start, end)
  1588. arr.push(newStr.split(''))
  1589. start = end
  1590. end += unit
  1591. }
  1592. return arr
  1593. }
  1594. },
  1595. changeTimeData() {
  1596. this.scheduleTimeData = str
  1597. },
  1598. getIsActivate(val) {
  1599. let params = {}
  1600. params.accountId = this.accountIds
  1601. params.campaignType = this.getFormData('formProject', 'campaignType')
  1602. params.appId = val
  1603. this.getAction('/kuaishou/batch/getIsActivate', params).then((res) => {
  1604. if (res.success) {
  1605. this.groupTypeData = res.result
  1606. }
  1607. })
  1608. },
  1609. handleConfirmValue(rule, value, callback) {
  1610. if (Math.abs(value[0] - value[1]) < 5) {
  1611. callback('自定义年龄段需要间隔大于5岁')
  1612. }
  1613. callback()
  1614. },
  1615. cityChange() {
  1616. this.regionList = []
  1617. },
  1618. changeAppId(e) {
  1619. this.getAction('/kuaishou/batch/getPageList', {
  1620. accountId: this.accountIds,
  1621. appId: e,
  1622. viewComp: 7,
  1623. }).then((res) => {
  1624. if (res.success) {
  1625. this.siteList = res.result
  1626. this.formTargetApp.setFieldsValue({ siteId: undefined })
  1627. }
  1628. })
  1629. // this.getIsActivate(e)
  1630. this.getOcpxActionList(e)
  1631. if (e) {
  1632. var data = this.appList.filter((item) => item.appId == e)[0]
  1633. this.formDirectional.setFieldsValue({ platformOs: data.platform == 1 || data.platform == 2 ? 1 : 2 })
  1634. this.changeAppIdVisible = data.platform == 1 || data.platform == 2 ? true : false
  1635. } else {
  1636. this.changeAppIdVisible = true
  1637. this.formDirectional.setFieldsValue({ platformOs: 3 })
  1638. }
  1639. },
  1640. personSelect() {
  1641. if (this.people === '1' || this.people === '2') {
  1642. this.retargetAccountId()
  1643. this.tabKey = this.people
  1644. } else if (this.people === '3') {
  1645. this.retargetAccountId()
  1646. this.tabKey = '1'
  1647. }
  1648. this.$nextTick(() => {
  1649. this.incluedSelectedRowKeys = []
  1650. this.incluedSelectedKeys = []
  1651. this.excludeSelectedKeys = []
  1652. this.excludeSelectedRowKeys = []
  1653. })
  1654. },
  1655. customCrowdChange(e) {
  1656. if (e.target.value == '1' || e.target.value == '2') {
  1657. this.retargetTabChange()
  1658. this.tabKey = e.target.value
  1659. } else if (e.target.value == '3') {
  1660. this.retargetTabChange()
  1661. this.tabKey = '1'
  1662. }
  1663. },
  1664. // 自定义人群的--同时定向排除tab切换事件
  1665. // 自定义人群的--同时定向排除tab切换事件
  1666. retargetAccountId() {
  1667. this.retargetDataAll = []
  1668. this.loading = true
  1669. this.getAction('/kuaishou/batch/getPopulationList', {
  1670. accountId: this.accountIds,
  1671. }).then((res) => {
  1672. this.loading = false
  1673. if (res.success) {
  1674. res.result.forEach((ele) => {
  1675. ele.key = ele.orientationId
  1676. ele.id = ele.orientationId
  1677. ele.name = ele.orientationName + '(' + ele.orientationId + ')'
  1678. // ele.accountName=this.accountInfo.title
  1679. ele.accountId = this.accountIds
  1680. })
  1681. // this.retargetData=res.data;
  1682. this.retargetDataAll = [...this.retargetDataAll, ...res.result]
  1683. }
  1684. })
  1685. },
  1686. getQueryById(id) {
  1687. this.spinning = true
  1688. this.getAction('/hosting/kuaishouHostingTemplate/queryById', { id }).then((res) => {
  1689. if (res.success) {
  1690. this.$nextTick(() => {
  1691. let data = res.result
  1692. this.accountIds = data.accountId
  1693. data.sceneIds = data.sceneIds ? JSON.parse(data.sceneIds) : [1]
  1694. this.formProject.setFieldsValue(pick(data, 'campaignType', 'sceneIds'))
  1695. this.$nextTick(() => {
  1696. this.getActionBarText()
  1697. })
  1698. data.ruleEnable = data.ruleEnable == 1 ? true : false
  1699. this.formInformation.setFieldsValue(pick(data, 'name', 'ruleEnable'))
  1700. this.retargetAccountId()
  1701. if (data.ruleEnable) {
  1702. setTimeout(() => {
  1703. this.formInformation.setFieldsValue(
  1704. pick(data, 'creativeNameRule', 'unitNameRule', 'campaignNameRule')
  1705. )
  1706. }, 100)
  1707. }
  1708. this.getAction('/kuaishou/batch/getAppList', { accountId: this.accountIds }).then((res) => {
  1709. if (res.success) {
  1710. this.appList = res.result.map((item, index) => {
  1711. return {
  1712. ...item,
  1713. key: index,
  1714. }
  1715. })
  1716. }
  1717. })
  1718. this.changeAppIdVisible = data.platformOs == 1 ? true : false
  1719. if (data.campaignType == 2) {
  1720. data.useAppMarket = data.useAppMarket == 1 ? true : false
  1721. this.formTargetApp.setFieldsValue(pick(data, 'appId', 'useAppMarket', 'siteId'))
  1722. if (data.useAppMarket) {
  1723. data.appStore = JSON.parse(data.appStore)
  1724. setTimeout(() => {
  1725. this.formTargetApp.setFieldsValue(pick(data, 'appStore'))
  1726. }, 500)
  1727. }
  1728. this.getOcpxActionList(data.appId)
  1729. setTimeout(() => {
  1730. this.getDeepTypesList(data.ocpxActionType)
  1731. }, 100)
  1732. this.getAction('/kuaishou/batch/getPageList', {
  1733. accountId: this.accountIds,
  1734. appId: data.appId,
  1735. viewComp: 7,
  1736. }).then((res) => {
  1737. if (res.success) {
  1738. this.siteList = res.result
  1739. }
  1740. })
  1741. } else {
  1742. setTimeout(() => {
  1743. this.formTargetApp.setFieldsValue(pick(data, 'webUri'))
  1744. })
  1745. this.getOcpxActionList(null)
  1746. setTimeout(() => {
  1747. this.getDeepTypesList(data.ocpxActionType)
  1748. }, 100)
  1749. }
  1750. this.people =
  1751. JSON.parse(data.population) &&
  1752. JSON.parse(data.excludePopulation) &&
  1753. JSON.parse(data.population).length > 0 &&
  1754. JSON.parse(data.excludePopulation).length > 0
  1755. ? '3'
  1756. : JSON.parse(data.population) && JSON.parse(data.population).length > 0
  1757. ? '1'
  1758. : JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
  1759. ? '2'
  1760. : !JSON.parse(data.population) && !JSON.parse(data.excludePopulation)
  1761. ? '0'
  1762. : '0'
  1763. this.tabKey = this.people == '2' ? '2' : '1'
  1764. this.incluedSelectedRowKeys =
  1765. JSON.parse(data.population) && JSON.parse(data.population).length > 0
  1766. ? JSON.parse(data.population)
  1767. : []
  1768. this.incluedSelectedKeys =
  1769. JSON.parse(data.population) && JSON.parse(data.population).length > 0
  1770. ? JSON.parse(data.population)
  1771. : []
  1772. this.excludeSelectedKeys =
  1773. JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
  1774. ? JSON.parse(data.excludePopulation)
  1775. : []
  1776. this.excludeSelectedRowKeys =
  1777. JSON.parse(data.excludePopulation) && JSON.parse(data.excludePopulation).length > 0
  1778. ? JSON.parse(data.excludePopulation)
  1779. : []
  1780. this.district =
  1781. JSON.parse(data.regionIds) && JSON.parse(data.regionIds).length > 0 ? 'CITY' : 'NONE'
  1782. if (this.district == 'CITY') {
  1783. this.regionList = JSON.parse(data.regionIds)
  1784. this.$nextTick(() => {
  1785. this.formDirectional.setFieldsValue(pick(data, 'userType'))
  1786. })
  1787. } else {
  1788. this.regionList = []
  1789. }
  1790. this.ageType =
  1791. JSON.parse(data.agesRange) && JSON.parse(data.agesRange).length > 0
  1792. ? 'ageLimit'
  1793. : data.minAge != -1 && data.maxAge != -1
  1794. ? 'ageCustom'
  1795. : 'noLimit'
  1796. if (this.ageType == 'ageCustom') {
  1797. data.age = [data.minAge, data.maxAge]
  1798. this.$nextTick(() => {
  1799. this.formDirectional.setFieldsValue(pick(data, 'age'))
  1800. })
  1801. } else if (this.ageType == 'ageLimit') {
  1802. data.agesRange = JSON.parse(data.agesRange)
  1803. this.$nextTick(() => {
  1804. this.formDirectional.setFieldsValue(pick(data, 'agesRange'))
  1805. })
  1806. }
  1807. data.expansion = []
  1808. if (data.noAgeBreak == 1) {
  1809. data.expansion.push('noAgeBreak')
  1810. }
  1811. if (data.noGenderBreak == 1) {
  1812. data.expansion.push('noGenderBreak')
  1813. }
  1814. if (data.noAreaBreak == 1) {
  1815. data.expansion.push('noAreaBreak')
  1816. }
  1817. this.formDirectional.setFieldsValue(
  1818. pick(data, 'gender', 'platformOs', 'isOpen', 'expansion', 'filterConvertedLevel')
  1819. )
  1820. setTimeout(() => {
  1821. this.formDirectional.setFieldsValue(pick(data, 'platformOv'))
  1822. }, 500)
  1823. data.today = 4
  1824. if (JSON.parse(data.schedule) && JSON.parse(data.schedule).length > 0) {
  1825. data.scheduleTime = 2
  1826. } else {
  1827. data.scheduleTime = 1
  1828. }
  1829. data.dayBudget = data.dayBudget / 1000
  1830. this.formOriginality.setFieldsValue(pick(data, 'today', 'scheduleTime', 'dayBudget'))
  1831. this.$nextTick(() => {
  1832. if (data.scheduleTime == 2) {
  1833. var arrList = JSON.parse(data.schedule)
  1834. for (let i = 0; i < arrList.length; i++) {
  1835. for (let j = 0; j < arrList[i].length; j++) {
  1836. if (arrList[i][j] == null) {
  1837. arrList[i][j] = '0'
  1838. } else {
  1839. arrList[i][j] = '1'
  1840. }
  1841. }
  1842. }
  1843. var timeArr = tqFun(arrList)
  1844. this.scheduleTimeData = str
  1845. setTimeout(() => {
  1846. this.scheduleTimeData = timeArr.join('')
  1847. }, 200)
  1848. }
  1849. })
  1850. data.deepConversionType =
  1851. data.deepConversionType && data.deepConversionType != ''
  1852. ? data.deepConversionType
  1853. : undefined
  1854. data.deepConversionBid =
  1855. data.deepConversionBid && data.deepConversionBid != ''
  1856. ? data.deepConversionBid / 1000
  1857. : undefined
  1858. data.cpaBid = data.cpaBid / 1000
  1859. this.formOptimize.setFieldsValue(pick(data, 'bidType', 'ocpxActionType', 'cpaBid'))
  1860. if (data.ocpxActionType == 180 || data.ocpxActionType == 53) {
  1861. this.$nextTick(() => {
  1862. setTimeout(() => {
  1863. this.formOptimize.setFieldsValue(
  1864. pick(data, 'deepConversionType', 'deepConversionBid')
  1865. )
  1866. }, 1000)
  1867. })
  1868. }
  1869. this.descriptionList = res.result.captions
  1870. ? res.result.captions.charAt(0) === '['
  1871. ? eval(res.result.captions).map((item) => {
  1872. return { value: item }
  1873. })
  1874. : [{ value: res.result.captions }]
  1875. : []
  1876. this.formCreative.setFieldsValue(
  1877. pick(
  1878. data,
  1879. 'smartCover',
  1880. 'actionBar',
  1881. 'assetMining',
  1882. 'clickUrl',
  1883. 'actionbarClickUrl',
  1884. 'videoCount'
  1885. )
  1886. )
  1887. this.spinning = false
  1888. })
  1889. } else {
  1890. this.spinning = false
  1891. let that = this
  1892. this.$error({
  1893. title: '请求出错,请返回列表页',
  1894. // JSX support
  1895. onOk: function () {
  1896. that.$router.replace('/autoLaunch/trusteeship')
  1897. that.$bus.$emit(
  1898. 'remove',
  1899. `/autoLaunch/trusteeship/creatMaterialTest?id=${that.$route.query.id}`
  1900. )
  1901. },
  1902. })
  1903. }
  1904. })
  1905. },
  1906. handleSubmit() {
  1907. if (this.accountIds) {
  1908. let formProjectData = new Promise((resolve, reject) => {
  1909. this.formProject.validateFields((err, values) => {
  1910. if (!err) {
  1911. resolve({ ...values })
  1912. } else {
  1913. reject('选择项目表单出错')
  1914. }
  1915. })
  1916. })
  1917. let formInformationData = new Promise((resolve, reject) => {
  1918. this.formInformation.validateFields((err, values) => {
  1919. if (!err) {
  1920. resolve({ ...values })
  1921. } else {
  1922. reject('基本信息出错')
  1923. }
  1924. })
  1925. })
  1926. let formOptimizeData = new Promise((resolve, reject) => {
  1927. this.formOptimize.validateFields((err, values) => {
  1928. if (!err) {
  1929. resolve({ ...values })
  1930. } else {
  1931. reject('优化目标出错')
  1932. }
  1933. })
  1934. })
  1935. let formTargetAppData = new Promise((resolve, reject) => {
  1936. this.formTargetApp.validateFields((err, values) => {
  1937. if (!err) {
  1938. resolve({ ...values })
  1939. } else {
  1940. reject('目标应用出错')
  1941. }
  1942. })
  1943. })
  1944. let formDirectionalData = new Promise((resolve, reject) => {
  1945. this.formDirectional.validateFields((err, values) => {
  1946. if (!err) {
  1947. resolve({ ...values })
  1948. } else {
  1949. reject('定向包出错')
  1950. }
  1951. })
  1952. })
  1953. let formOriginalityData = new Promise((resolve, reject) => {
  1954. this.formOriginality.validateFields((err, values) => {
  1955. if (!err) {
  1956. resolve({ ...values })
  1957. } else {
  1958. reject('排期预算出错')
  1959. }
  1960. })
  1961. })
  1962. let formCreativeData = new Promise((resolve, reject) => {
  1963. this.formCreative.validateFields((err, values) => {
  1964. if (!err) {
  1965. resolve({ ...values })
  1966. } else {
  1967. reject('创意信息出错')
  1968. }
  1969. })
  1970. })
  1971. Promise.all([
  1972. formProjectData,
  1973. formInformationData,
  1974. formOptimizeData,
  1975. formTargetAppData,
  1976. formDirectionalData,
  1977. formOriginalityData,
  1978. formCreativeData,
  1979. ])
  1980. .then((res) => {
  1981. let isNotComplete2 = this.descriptionList.findIndex((item) => {
  1982. return item.value === ''
  1983. })
  1984. if (isNotComplete2 > -1) {
  1985. this.$message.error('广告语未填')
  1986. return
  1987. }
  1988. this.sumbitLoading = true
  1989. let params = { ...res[0], ...res[1], ...res[2], ...res[3], ...res[4], ...res[5], ...res[6] }
  1990. params.accountId = this.accountIds
  1991. params.userId = this.userInfo().id
  1992. params.useAppMarket = params.useAppMarket ? 1 : 2
  1993. params.appStore = params.appStore ? JSON.stringify(params.appStore) : '[]'
  1994. params.sceneIds = params.sceneIds ? JSON.stringify(params.sceneIds) : '[]'
  1995. params.regionIds =
  1996. this.district == 'NONE'
  1997. ? JSON.stringify([])
  1998. : JSON.stringify(
  1999. this.regionList.map((item) => {
  2000. return item.value
  2001. })
  2002. )
  2003. params.ruleEnable = params.ruleEnable ? 1 : 2
  2004. if (params.campaignType == 5) {
  2005. params.webUriType = 1
  2006. } else {
  2007. params.webUriType = 0
  2008. }
  2009. if (params.ruleEnable == 1) {
  2010. if (!params.campaignNameRule && !params.unitNameRule && !params.creativeNameRule) {
  2011. this.$message.error('自定义命名规则开启,至少任一规则不可为空')
  2012. }
  2013. }
  2014. params.captions = JSON.stringify(
  2015. this.descriptionList.map((item) => {
  2016. return item.value
  2017. })
  2018. )
  2019. // {{ createArr(scheduleTimeData, 0, 24, 24) }}
  2020. // {{scheduleTime}}
  2021. if (params.scheduleTime == 1) {
  2022. params.schedule = JSON.stringify([])
  2023. } else {
  2024. var data = this.createArr(this.scheduleTimeData, 0, 24, 24)
  2025. for (let i = 0; i < data.length; i++) {
  2026. for (let j = 0; j < data[i].length; j++) {
  2027. if (data[i][j] == '1') {
  2028. data[i][j] = j
  2029. } else {
  2030. delete data[i][j]
  2031. }
  2032. }
  2033. }
  2034. // console.log(data)
  2035. params.schedule = JSON.stringify(data)
  2036. }
  2037. if (this.ageType == 'noLimit') {
  2038. params.minAge = -1
  2039. params.maxAge = -1
  2040. params.agesRange = JSON.stringify([])
  2041. } else if (this.ageType == 'ageLimit') {
  2042. params.minAge = -1
  2043. params.maxAge = -1
  2044. params.agesRange = JSON.stringify(params.agesRange)
  2045. } else if (this.ageType == 'ageCustom') {
  2046. params.minAge = params.age[0]
  2047. params.maxAge = params.age[1]
  2048. params.agesRange = JSON.stringify([])
  2049. }
  2050. params.isOpen = 1
  2051. if (params.expansion.includes('noAgeBreak')) {
  2052. params.noAgeBreak = 1
  2053. } else {
  2054. params.noAgeBreak = 2
  2055. }
  2056. if (params.expansion.includes('noGenderBreak')) {
  2057. params.noGenderBreak = 1
  2058. } else {
  2059. params.noGenderBreak = 2
  2060. }
  2061. if (params.expansion.includes('noAreaBreak')) {
  2062. params.noAreaBreak = 1
  2063. } else {
  2064. params.noAreaBreak = 2
  2065. }
  2066. params.population =
  2067. this.people === '0'
  2068. ? JSON.stringify([])
  2069. : this.people === '1' || this.people === '3'
  2070. ? JSON.stringify(this.incluedSelectedRowKeys)
  2071. : JSON.stringify([])
  2072. params.excludePopulation =
  2073. this.people === '0'
  2074. ? JSON.stringify([])
  2075. : this.people === '2' || this.people === '3'
  2076. ? JSON.stringify(this.excludeSelectedRowKeys)
  2077. : JSON.stringify([])
  2078. params.cpaBid = params.cpaBid * 1000
  2079. params.deepConversionBid = params.deepConversionBid ? params.deepConversionBid * 1000 : null
  2080. params.singleAppid = 1
  2081. params.deepConversionType = params.deepConversionType ? params.deepConversionType : ''
  2082. params.dayBudget = params.dayBudget * 1000
  2083. params.userId = this.userInfo().id
  2084. // params.
  2085. if (this.$route.query.id) {
  2086. params.id = this.$route.query.id
  2087. this.postDataAction('/hosting/kuaishouHostingTemplate/edit', params).then((res) => {
  2088. if (res.success) {
  2089. this.sumbitLoading = false
  2090. this.$bus.$emit(
  2091. 'remove',
  2092. `/autoLaunch/trusteeship/creatMaterialTest?id=${params.id}`
  2093. )
  2094. this.$router.replace('/autoLaunch/trusteeship')
  2095. } else {
  2096. this.sumbitLoading = false
  2097. }
  2098. })
  2099. } else {
  2100. this.postDataAction('/hosting/kuaishouHostingTemplate/add', params).then((res) => {
  2101. if (res.success) {
  2102. this.sumbitLoading = false
  2103. this.$bus.$emit('remove', '/autoLaunch/trusteeship/creatMaterialTest')
  2104. this.$router.replace('/autoLaunch/trusteeship')
  2105. } else {
  2106. this.sumbitLoading = false
  2107. }
  2108. })
  2109. }
  2110. })
  2111. .catch((err) => {
  2112. this.$message.error('请填写完整')
  2113. })
  2114. } else {
  2115. this.$message.error('请选择账户')
  2116. }
  2117. },
  2118. clearAllData() {
  2119. // this.$router.replace('/autoLaunch/material-test')
  2120. // this.$bus.$emit('remove', '/autoLaunch/creatMaterialTest')
  2121. // this.$bus.$emit('remove', `/autoLaunch/creatMaterialTest?id=${this.$route.query.id}`)
  2122. this.$bus.$emit('remove', `/autoLaunch/trusteeship/creatMaterialTest?id=${this.$route.query.id}`)
  2123. this.$bus.$emit('remove', '/autoLaunch/trusteeship/creatMaterialTest')
  2124. this.$router.replace('/autoLaunch/trusteeship')
  2125. },
  2126. descriptionchange(val, index) {
  2127. let data = val
  2128. this.$nextTick(() => {
  2129. this.descriptionList[index].value = data.replace(/\s/g, '')
  2130. })
  2131. },
  2132. addDescription() {
  2133. this.descriptionList.push({ value: '' })
  2134. },
  2135. removeDescription(index) {
  2136. this.descriptionList.splice(index, 1)
  2137. },
  2138. // 获取行动号召按钮
  2139. getActionBarText() {
  2140. this.actionBarTextList = []
  2141. let that = this
  2142. setTimeout(() => {
  2143. this.getAction('/kuaishou/batch/getActionBarTextByType', {
  2144. type: this.getFormData('formProject', 'campaignType'),
  2145. }).then((res) => {
  2146. if (res.success) {
  2147. that.actionBarTextList = res.result
  2148. }
  2149. })
  2150. })
  2151. },
  2152. closeCreative() {
  2153. this.optimizeVisible = false
  2154. this.customUnitCntMax = 400
  2155. this.imageCntMax = 15
  2156. this.formOriginality.resetFields()
  2157. },
  2158. submitCreative() {
  2159. this.formOriginality.validateFields((err, values) => {
  2160. if (!err) {
  2161. let isNotComplete = this.descriptionList.findIndex((item) => {
  2162. return item.value === ''
  2163. })
  2164. if (isNotComplete > -1) {
  2165. this.$message.error('请正确填写必填项目,广告语未填')
  2166. return
  2167. }
  2168. this.showCreativeData = JSON.parse(JSON.stringify(values))
  2169. this.optimizeVisible = false
  2170. // this.closeCreative()
  2171. }
  2172. })
  2173. },
  2174. changeData(data) {
  2175. if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
  2176. data.splice(
  2177. data.findIndex((item) => item == 1),
  2178. 1
  2179. )
  2180. } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
  2181. data.splice(0, data.length - 1)
  2182. } else if (data.length == 0) {
  2183. data.push(1)
  2184. } else if (data.length > 1 && data.findIndex((item) => item == 5) == 0) {
  2185. data.splice(
  2186. data.findIndex((item) => item == 5),
  2187. 1
  2188. )
  2189. } else if (data.length > 1 && data.findIndex((item) => item == 5) == data.length - 1) {
  2190. data.splice(0, data.length - 1)
  2191. }
  2192. },
  2193. unitTypeCheck(e) {
  2194. if (e.target.value === 7) {
  2195. this.imageCntMax = 8
  2196. } else {
  2197. this.imageCntMax = 15
  2198. }
  2199. },
  2200. setImageCnt(e) {
  2201. this.customUnitCntMax = e ? Math.floor(2000 / e) : 2000
  2202. },
  2203. creativeTagValid(rule, value, callback) {
  2204. if (value.length == 0 || value == undefined) {
  2205. callback()
  2206. } else if (value.length > 10) {
  2207. callback('创意标签最多填写10个,请删减')
  2208. } else {
  2209. callback()
  2210. }
  2211. },
  2212. cpaBidValid(rule, value, callback) {
  2213. let z = /-/g
  2214. let a = /\//g
  2215. let d = /\./g
  2216. if (value === '' || value === undefined || value === 0 || value === '0') {
  2217. callback('出价必须填写')
  2218. } else if (value.startsWith('.') || value.endsWith('.')) {
  2219. callback('请填写正确出价')
  2220. } else if (value.startsWith('-') || value.endsWith('-')) {
  2221. callback('请填写正确出价')
  2222. } else if (value.match(a) && value.match(z)) {
  2223. callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
  2224. } else if (value.match(/[^0-9+-\/]/g)) {
  2225. callback('请填写正确出价')
  2226. } else {
  2227. callback()
  2228. }
  2229. },
  2230. deepBidValid(rule, value, callback) {
  2231. let z = /-/g
  2232. let a = /\//g
  2233. let d = /\./g
  2234. if (value === '' || value === undefined || value == 0 || value == '0') {
  2235. callback()
  2236. } else if (value.startsWith('.') || value.endsWith('.')) {
  2237. callback('请填写正确出价')
  2238. } else if (value.startsWith('-') || value.endsWith('-')) {
  2239. callback('请填写正确出价')
  2240. } else if (value.match(a) && value.match(z)) {
  2241. callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
  2242. } else if (value.match(/[^0-9+-\/]/g)) {
  2243. callback('请填写正确出价')
  2244. } else {
  2245. callback()
  2246. }
  2247. },
  2248. disabledDate(current) {
  2249. // Can not select days before today and today
  2250. return current && current < moment().subtract(1, 'days')
  2251. },
  2252. disabledDateOne(current) {
  2253. // Can not select days before today and today
  2254. return current && current < moment().subtract(0, 'days')
  2255. },
  2256. filterOption(input, option) {
  2257. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  2258. },
  2259. addApplication() {},
  2260. //设置通配符
  2261. getChangeAll(type, form, field) {
  2262. this.$nextTick(() => {
  2263. var node = document.getElementById(field)
  2264. var v = '[' + type + ']'
  2265. if (document.selection) {
  2266. //IE
  2267. node.focus()
  2268. var sel = document.selection.createRange()
  2269. sel.text = v
  2270. sel.select()
  2271. if (field == 'campaignNameRule') {
  2272. this[form].setFieldsValue({ campaignNameRule: sel.text })
  2273. } else if (field == 'unitNameRule') {
  2274. this[form].setFieldsValue({ unitNameRule: sel.text })
  2275. } else {
  2276. this[form].setFieldsValue({ creativeNameRule: sel.text })
  2277. }
  2278. } else if (node.selectionStart || node.selectionStart == '0') {
  2279. //MOZILLA/GOOGLE
  2280. var startPos = node.selectionStart
  2281. var endPos = node.selectionEnd
  2282. var restoreTop = node.scrollTop
  2283. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  2284. if (restoreTop > 0) {
  2285. node.scrollTop = restoreTop
  2286. }
  2287. if (field == 'campaignNameRule') {
  2288. this[form].setFieldsValue({ campaignNameRule: node.value })
  2289. } else if (field == 'unitNameRule') {
  2290. this[form].setFieldsValue({ unitNameRule: node.value })
  2291. } else {
  2292. this[form].setFieldsValue({ creativeNameRule: node.value })
  2293. }
  2294. node.focus()
  2295. node.selectionStart = startPos + v.length
  2296. node.selectionEnd = startPos + v.length
  2297. // this.campaignName = node.value
  2298. } else {
  2299. //OTHER
  2300. node.value += v
  2301. if (field == 'campaignNameRule') {
  2302. this[form].setFieldsValue({ campaignNameRule: node.value })
  2303. } else if (field == 'unitNameRule') {
  2304. this[form].setFieldsValue({ unitNameRule: node.value })
  2305. } else {
  2306. this[form].setFieldsValue({ creativeNameRule: node.value })
  2307. }
  2308. node.focus()
  2309. // this.campaignName = node.value
  2310. }
  2311. })
  2312. },
  2313. //获取表单的某一个属性值
  2314. getFormData(form, className) {
  2315. return this[form].getFieldValue(className)
  2316. },
  2317. onScroll() {
  2318. // var box = document.getElementById('box')
  2319. // var t = document.documentElement.scrollTop || document.body.scrollTop
  2320. // box.style.top = t + 'px'
  2321. var jump = document.querySelectorAll('.step-jump')
  2322. var distance =
  2323. document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
  2324. jump.forEach((item, index) => {
  2325. if (distance >= item.offsetTop) {
  2326. this.activeStep = index
  2327. }
  2328. })
  2329. },
  2330. // 锚点点击
  2331. jump(index) {
  2332. this.activeStep = index
  2333. // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
  2334. // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
  2335. let jump = document.querySelectorAll('.step-jump')
  2336. // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
  2337. let total = jump[index].offsetTop
  2338. // scrollTop滚动条距离页面的距离
  2339. let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  2340. // 平滑滚动,时长500ms,每10ms一跳,共50跳
  2341. let step = total / 50
  2342. if (total > distance) {
  2343. smoothDown()
  2344. } else {
  2345. let newTotal = distance - total
  2346. step = newTotal / 50
  2347. smoothUp()
  2348. }
  2349. function smoothDown() {
  2350. if (distance < total) {
  2351. distance += step
  2352. document.body.scrollTop = distance
  2353. document.documentElement.scrollTop = distance
  2354. window.pageYOffset = distance
  2355. setTimeout(smoothDown, 5)
  2356. } else {
  2357. document.body.scrollTop = total
  2358. document.documentElement.scrollTop = total
  2359. window.pageYOffset = total
  2360. }
  2361. }
  2362. function smoothUp() {
  2363. if (distance > total) {
  2364. distance -= step
  2365. document.body.scrollTop = distance
  2366. document.documentElement.scrollTop = distance
  2367. window.pageYOffset = distance
  2368. setTimeout(smoothUp, 10)
  2369. } else {
  2370. document.body.scrollTop = total
  2371. document.documentElement.scrollTop = total
  2372. window.pageYOffset = total
  2373. }
  2374. }
  2375. },
  2376. getData(className, formName) {
  2377. return this[formName].getFieldValue(className)
  2378. },
  2379. },
  2380. }
  2381. </script>
  2382. <style lang="scss" scoped>
  2383. /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  2384. $height: 59px;
  2385. .layout .header .user-wrapper .action .anticon,
  2386. .layout .top-nav-header-index .user-wrapper .action .anticon {
  2387. color: #999;
  2388. }
  2389. .layout .header .user-wrapper .action .anticon,
  2390. .layout .top-nav-header-index .user-wrapper .action .anticon {
  2391. color: #999;
  2392. }
  2393. .layout {
  2394. .top-nav-header-index {
  2395. .header-index-wide {
  2396. margin-left: 10px;
  2397. .ant-menu.ant-menu-horizontal {
  2398. height: $height;
  2399. line-height: $height;
  2400. }
  2401. }
  2402. .trigger {
  2403. line-height: 48px;
  2404. font-size: 17px;
  2405. &:hover {
  2406. background: rgba(0, 0, 0, 0.05);
  2407. }
  2408. }
  2409. }
  2410. .header {
  2411. z-index: 2;
  2412. color: #999;
  2413. height: $height;
  2414. background-color: #1890ff;
  2415. transition: background 300ms;
  2416. /* dark 样式 */
  2417. &.dark {
  2418. color: #000000;
  2419. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  2420. background-color: white !important;
  2421. }
  2422. }
  2423. .header,
  2424. .top-nav-header-index {
  2425. &.dark .trigger:hover {
  2426. background: rgba(0, 0, 0, 0.05);
  2427. }
  2428. }
  2429. }
  2430. .ant-layout-header {
  2431. height: $height;
  2432. line-height: $height;
  2433. }
  2434. </style>
  2435. <style scoped lang="scss">
  2436. .region {
  2437. width: 100%;
  2438. }
  2439. .account-item {
  2440. ::v-deep .ant-form-item-control {
  2441. line-height: 1;
  2442. }
  2443. }
  2444. ::v-deep.display-none-selset {
  2445. display: none !important;
  2446. }
  2447. // .step-jump {
  2448. // ::v-deep table tr td {
  2449. // border-bottom: 0px;
  2450. // }
  2451. // }
  2452. .bottom-to-one {
  2453. ::v-deep .ant-form-item {
  2454. margin-bottom: 0;
  2455. }
  2456. }
  2457. .target-person-add-button {
  2458. margin-left: 15px;
  2459. }
  2460. .card-person {
  2461. width: 300px;
  2462. ::v-deep.ant-card-head {
  2463. padding: 0px 10px;
  2464. }
  2465. .card-main-case {
  2466. height: 250px;
  2467. overflow: auto;
  2468. padding: 0 5px;
  2469. }
  2470. }
  2471. .card-person-drawer {
  2472. width: 100%;
  2473. height: 90%;
  2474. overflow: hidden;
  2475. padding: 10px 0px;
  2476. display: flex;
  2477. flex-wrap: wrap;
  2478. margin-right: -10px;
  2479. justify-content: space-between;
  2480. .card-item {
  2481. width: calc(33% - 10px);
  2482. margin-bottom: 10px;
  2483. float: left;
  2484. }
  2485. .card-item-else {
  2486. width: calc(20% - 10px);
  2487. margin-bottom: 10px;
  2488. float: left;
  2489. }
  2490. }
  2491. .showShare {
  2492. position: relative;
  2493. }
  2494. .share {
  2495. display: none;
  2496. }
  2497. .showShare:hover .share {
  2498. display: flex;
  2499. justify-content: center;
  2500. align-items: center;
  2501. }
  2502. .chouzhen {
  2503. border-style: solid;
  2504. border-width: 1px;
  2505. border-color: #e4e4e4;
  2506. width: calc(20% - 10px);
  2507. padding: 10px;
  2508. margin-right: 10px;
  2509. margin-bottom: 10px;
  2510. display: flex;
  2511. align-items: center;
  2512. background: #fff;
  2513. position: relative;
  2514. z-index: 99;
  2515. float: left;
  2516. }
  2517. li.chouzhen.first:before {
  2518. font-size: 12px;
  2519. content: '首帧';
  2520. position: absolute;
  2521. top: 7px;
  2522. left: 5px;
  2523. width: 36px;
  2524. height: 20px;
  2525. color: rgb(255, 255, 255);
  2526. line-height: 20px;
  2527. text-align: center;
  2528. background: rgba(0, 0, 0, 0.5);
  2529. border-radius: 2px;
  2530. z-index: 1000;
  2531. }
  2532. .display-none-selset {
  2533. display: none !important;
  2534. }
  2535. .logo {
  2536. padding-left: 24px;
  2537. img {
  2538. height: 32px !important;
  2539. }
  2540. .name {
  2541. font-size: 14px;
  2542. font-family: PingFangSC-Medium, PingFang SC;
  2543. font-weight: 500;
  2544. color: #ced2d9;
  2545. // line-height: 22px;
  2546. margin-left: 20px;
  2547. padding-left: 21px;
  2548. position: relative;
  2549. }
  2550. .name::before {
  2551. content: '';
  2552. width: 1px;
  2553. height: 18px;
  2554. background: rgba(255, 255, 255, 0.31);
  2555. position: absolute;
  2556. left: 0;
  2557. top: 50%;
  2558. margin-top: -9px;
  2559. }
  2560. }
  2561. .chartBox {
  2562. .chartBody {
  2563. display: flex;
  2564. justify-content: space-around;
  2565. flex-wrap: wrap;
  2566. }
  2567. .search-box {
  2568. margin-bottom: 20px;
  2569. }
  2570. }
  2571. ::v-deep .ant-descriptions-item-content {
  2572. font-weight: bold;
  2573. }
  2574. .info-detail {
  2575. ::v-deep table tr td {
  2576. border: 0;
  2577. }
  2578. ::v-deep .ant-descriptions-item-label {
  2579. color: darkgray;
  2580. // min-width: 30px;
  2581. white-space: nowrap;
  2582. }
  2583. }
  2584. .flex-main {
  2585. display: flex;
  2586. margin-bottom: 10px;
  2587. p {
  2588. color: black;
  2589. font-weight: 600;
  2590. overflow: hidden; //超出的文本隐藏
  2591. text-overflow: ellipsis; //溢出用省略号显示
  2592. white-space: nowrap; //溢出不换行
  2593. }
  2594. }
  2595. </style>
  2596. <style lang="scss">
  2597. .hide-checkbox .ant-table-thead .ant-table-selection {
  2598. display: none;
  2599. }
  2600. .new-batch .ant-card-head-title {
  2601. font-weight: 700;
  2602. }
  2603. // .new-batch textarea {
  2604. // resize: none;
  2605. // border: none;
  2606. // outline: 0;
  2607. // box-shadow: none;
  2608. // }
  2609. .create-info .ant-form-item {
  2610. margin-bottom: 0 !important;
  2611. }
  2612. .fengmian .ant-checkbox-wrapper:first-child {
  2613. margin-left: 8px;
  2614. }
  2615. @media screen and (max-width: 1200px) {
  2616. // 这里写对应要修改的样式如:
  2617. .new-batch .el-step__title {
  2618. font-size: 12px;
  2619. }
  2620. }
  2621. .line-height-one .ant-form-item-control {
  2622. line-height: inherit;
  2623. }
  2624. .creat-all-info .ant-form-item-control {
  2625. width: 60%;
  2626. overflow: hidden;
  2627. text-overflow: ellipsis;
  2628. white-space: nowrap;
  2629. }
  2630. .config-new-batch {
  2631. .display-none-selset {
  2632. display: none !important;
  2633. }
  2634. .ant-btn-danger {
  2635. background-color: #ff4d4f !important;
  2636. }
  2637. }
  2638. </style>