createChannel.vue 44 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022
  1. <style scoped lang="scss">
  2. ::v-deep.vue-treeselect__control {
  3. line-height: 36px !important;
  4. }
  5. .account-item {
  6. ::v-deep .ant-form-item-control {
  7. line-height: 1;
  8. }
  9. }
  10. ::v-deep.display-none-selset {
  11. display: none !important;
  12. }
  13. // .step-jump {
  14. // ::v-deep table tr td {
  15. // border-bottom: 0px;
  16. // }
  17. // }
  18. .bottom-to-one {
  19. ::v-deep .ant-form-item {
  20. margin-bottom: 0;
  21. }
  22. }
  23. .target-person-add-button {
  24. margin-left: 15px;
  25. }
  26. .card-person {
  27. width: 300px;
  28. ::v-deep.ant-card-body {
  29. padding: 0px;
  30. }
  31. ::v-deep.ant-card-head {
  32. padding: 0px 10px;
  33. }
  34. .card-main-case {
  35. height: 250px;
  36. overflow: auto;
  37. padding: 0 5px;
  38. }
  39. }
  40. .card-person-drawer {
  41. width: 100%;
  42. height: 90%;
  43. overflow: hidden;
  44. padding: 10px 0px;
  45. display: flex;
  46. flex-wrap: wrap;
  47. margin-right: -10px;
  48. justify-content: space-between;
  49. .card-item {
  50. width: calc(33% - 10px);
  51. margin-bottom: 10px;
  52. float: left;
  53. }
  54. .card-item-else {
  55. width: calc(20% - 10px);
  56. margin-bottom: 10px;
  57. float: left;
  58. }
  59. }
  60. .showShare {
  61. position: relative;
  62. }
  63. .share {
  64. display: none;
  65. }
  66. .showShare:hover .share {
  67. display: flex;
  68. justify-content: center;
  69. align-items: center;
  70. }
  71. .chouzhen {
  72. border-style: solid;
  73. border-width: 1px;
  74. border-color: #e4e4e4;
  75. width: calc(20% - 10px);
  76. padding: 10px;
  77. margin-right: 10px;
  78. margin-bottom: 10px;
  79. display: flex;
  80. align-items: center;
  81. background: #fff;
  82. position: relative;
  83. z-index: 99;
  84. float: left;
  85. }
  86. li.chouzhen.first:before {
  87. font-size: 12px;
  88. content: '首帧';
  89. position: absolute;
  90. top: 7px;
  91. left: 5px;
  92. width: 36px;
  93. height: 20px;
  94. color: rgb(255, 255, 255);
  95. line-height: 20px;
  96. text-align: center;
  97. background: rgba(0, 0, 0, 0.5);
  98. border-radius: 2px;
  99. z-index: 1000;
  100. }
  101. .display-none-selset {
  102. display: none !important;
  103. }
  104. .logo {
  105. padding-left: 24px;
  106. img {
  107. height: 32px !important;
  108. }
  109. .name {
  110. font-size: 14px;
  111. font-family: PingFangSC-Medium, PingFang SC;
  112. font-weight: 500;
  113. color: #ced2d9;
  114. // line-height: 22px;
  115. margin-left: 20px;
  116. padding-left: 21px;
  117. position: relative;
  118. }
  119. .name::before {
  120. content: '';
  121. width: 1px;
  122. height: 18px;
  123. background: rgba(255, 255, 255, 0.31);
  124. position: absolute;
  125. left: 0;
  126. top: 50%;
  127. margin-top: -9px;
  128. }
  129. }
  130. .chartBox {
  131. .chartBody {
  132. display: flex;
  133. justify-content: space-around;
  134. flex-wrap: wrap;
  135. }
  136. .search-box {
  137. margin-bottom: 20px;
  138. }
  139. }
  140. ::v-deep .ant-descriptions-item-content {
  141. font-weight: bold;
  142. }
  143. .info-detail {
  144. ::v-deep table tr td {
  145. border: 0;
  146. }
  147. ::v-deep .ant-descriptions-item-label {
  148. color: darkgray;
  149. // min-width: 30px;
  150. white-space: nowrap;
  151. }
  152. }
  153. .flex-main {
  154. display: flex;
  155. margin-bottom: 10px;
  156. p {
  157. color: black;
  158. font-weight: 600;
  159. overflow: hidden; //超出的文本隐藏
  160. text-overflow: ellipsis; //溢出用省略号显示
  161. white-space: nowrap; //溢出不换行
  162. }
  163. }
  164. </style>
  165. <style lang="scss">
  166. .hide-checkbox .ant-table-thead .ant-table-selection {
  167. display: none;
  168. }
  169. .new-batch .ant-card-head-title {
  170. font-weight: 700;
  171. }
  172. // .new-batch textarea {
  173. // resize: none;
  174. // border: none;
  175. // outline: 0;
  176. // box-shadow: none;
  177. // }
  178. .create-info .ant-form-item {
  179. margin-bottom: 0 !important;
  180. }
  181. .fengmian .ant-checkbox-wrapper:first-child {
  182. margin-left: 8px;
  183. }
  184. @media screen and (max-width: 1200px) {
  185. // 这里写对应要修改的样式如:
  186. .new-batch .el-step__title {
  187. font-size: 12px;
  188. }
  189. }
  190. .line-height-one .ant-form-item-control {
  191. line-height: inherit;
  192. }
  193. .creat-all-info .ant-form-item-control {
  194. width: 60%;
  195. overflow: hidden;
  196. text-overflow: ellipsis;
  197. white-space: nowrap;
  198. }
  199. .config-new-batch {
  200. .display-none-selset {
  201. display: none !important;
  202. }
  203. .ant-btn-danger {
  204. background-color: #ff4d4f !important;
  205. }
  206. }
  207. </style>
  208. <template>
  209. <div ref="questionnaireBox" class="new-batch config-new-batch">
  210. <a-spin :spinning="spinning">
  211. <div class="chartBox">
  212. <a-row :gutter="20">
  213. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
  214. <a-card class="search-box step-jump">
  215. <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
  216. <a-row
  217. :gutter="16"
  218. v-if="createTypeData && !!!createTypeData.accountId && !!!createTypeData.projectId"
  219. >
  220. <a-col :span="16">
  221. <a-form-item label="使用范围">
  222. <a-radio-group
  223. button-style="solid"
  224. v-decorator="[
  225. 'usageRange',
  226. {
  227. rules: [{ required: true, message: '使用范围必选' }],
  228. initialValue: 2
  229. }
  230. ]"
  231. >
  232. <a-radio-button :value="2">项目</a-radio-button>
  233. <a-radio-button :value="1">账户</a-radio-button>
  234. </a-radio-group>
  235. </a-form-item>
  236. </a-col>
  237. </a-row>
  238. <a-row
  239. :gutter="16"
  240. v-if="getFormData('usageRange') == 2 || getFormData('usageRange') == undefined"
  241. >
  242. <a-col :span="16">
  243. <a-form-item
  244. :label="
  245. createTypeData && !!!createTypeData.accountId
  246. ? !!!createTypeData.projectId
  247. ? '选择项目'
  248. : '项目ID'
  249. : '账户ID'
  250. "
  251. >
  252. <Treeselect
  253. style="width:600px"
  254. v-decorator="[
  255. 'projectId',
  256. {
  257. rules: [{ required: true, message: '项目必选' }]
  258. }
  259. ]"
  260. v-if="
  261. createTypeData &&
  262. !!!createTypeData.accountId &&
  263. !!!createTypeData.projectId
  264. "
  265. />
  266. <span v-else>{{
  267. createTypeData.accountId
  268. ? createTypeData.accountId
  269. : createTypeData.projectId
  270. }}</span>
  271. </a-form-item>
  272. </a-col>
  273. </a-row>
  274. <a-row :gutter="16" v-else>
  275. <a-col :span="16">
  276. <a-form-item label="选择账户">
  277. <treeSelectAccount
  278. style="width:600px"
  279. v-decorator="[
  280. 'accountId',
  281. {
  282. rules: [{ required: true, message: '账户必选' }]
  283. }
  284. ]"
  285. />
  286. </a-form-item>
  287. </a-col>
  288. </a-row>
  289. <a-row :gutter="16" v-if="createTypeData && createTypeData.createType == '1'">
  290. <a-col :span="16">
  291. <a-form-item label="编号位数">
  292. <a-select
  293. style="width:300px"
  294. allowClear
  295. v-decorator="[
  296. 'numberLength',
  297. {
  298. rules: [{ required: true, message: '编号位数限制必选' }],
  299. initialValue: 0
  300. }
  301. ]"
  302. >
  303. <a-select-option :value="0">不限制</a-select-option>
  304. <a-select-option :value="3">三位数</a-select-option>
  305. <a-select-option :value="4">四位数</a-select-option>
  306. <a-select-option :value="5">五位数</a-select-option>
  307. </a-select>
  308. </a-form-item>
  309. </a-col>
  310. </a-row>
  311. <a-row :gutter="16" v-if="createTypeData && createTypeData.createType == '1'">
  312. <a-col :span="16">
  313. <a-form-item label="编号">
  314. <a-input-number
  315. v-decorator="[
  316. 'numberMin',
  317. {
  318. rules: [
  319. {
  320. required: true,
  321. message: '请输入正确的编号',
  322. validator: numberMinCheck
  323. }
  324. ]
  325. }
  326. ]"
  327. :precision="0"
  328. :min="1"
  329. :max="
  330. getFormData('numberLength') == 0
  331. ? 999999
  332. : getFormData('numberLength') == 3
  333. ? 999
  334. : getFormData('numberLength') == 4
  335. ? 9999
  336. : getFormData('numberLength') == 5
  337. ? 99999
  338. : 999999
  339. "
  340. />
  341. ~
  342. <a-input-number
  343. v-decorator="[
  344. 'numberMax',
  345. {
  346. rules: [
  347. {
  348. required: true,
  349. message: '编号位数限制12312'
  350. }
  351. ]
  352. }
  353. ]"
  354. @change="numberMaxCheck"
  355. @blur="numberMaxCheck"
  356. :precision="0"
  357. :min="1"
  358. :max="
  359. getFormData('numberLength') == 0
  360. ? 999999
  361. : getFormData('numberLength') == 3
  362. ? 999
  363. : getFormData('numberLength') == 4
  364. ? 9999
  365. : getFormData('numberLength') == 5
  366. ? 99999
  367. : 999999
  368. "
  369. />
  370. </a-form-item>
  371. </a-col>
  372. </a-row>
  373. <a-row :gutter="16">
  374. <a-col :span="16">
  375. <a-form-item label="渠道号">
  376. <a-input
  377. v-decorator="[
  378. 'channelCode',
  379. { rules: [{ required: true, message: '请填写渠道号' }] }
  380. ]"
  381. allow-clear
  382. id="channelCode"
  383. />
  384. </a-form-item>
  385. <a-form-item
  386. v-bind="tailFormItemLayout"
  387. v-if="createTypeData && createTypeData.createType == '1'"
  388. >
  389. <a-tag
  390. color="#2db7f5"
  391. @click="getChangeAll('编号', 'formProject', 'channelCode')"
  392. >+编号</a-tag
  393. >
  394. </a-form-item>
  395. </a-col>
  396. </a-row>
  397. <a-row :gutter="16">
  398. <a-col :span="16">
  399. <a-form-item label="渠道号名称">
  400. <a-input
  401. v-decorator="[
  402. 'channelName',
  403. { rules: [{ required: true, message: '请填写渠道号' }] }
  404. ]"
  405. allow-clear
  406. id="channelName"
  407. />
  408. </a-form-item>
  409. <a-form-item
  410. v-bind="tailFormItemLayout"
  411. v-if="createTypeData && createTypeData.createType == '1'"
  412. >
  413. <a-tag
  414. color="#2db7f5"
  415. @click="getChangeAll('渠道号', 'formProject', 'channelName')"
  416. >+渠道号</a-tag
  417. >
  418. <a-tag
  419. color="#2db7f5"
  420. @click="getChangeAll('编号', 'formProject', 'channelName')"
  421. >+编号</a-tag
  422. >
  423. </a-form-item>
  424. </a-col>
  425. </a-row>
  426. <a-row :gutter="16">
  427. <a-col :span="16">
  428. <a-form-item label="下载链接">
  429. <a-button type="primary" @click="addNewApp">添加应用</a-button>
  430. </a-form-item>
  431. <a-form-item v-bind="tailFormItemLayout">
  432. <span style="color:red">由于快手API限制,每天最多新建300个应用包</span>
  433. </a-form-item>
  434. </a-col>
  435. </a-row>
  436. <a-row :gutter="16">
  437. <a-col :span="16">
  438. <a-form-item label="调起链接">
  439. <a-input v-decorator="['schemaUri']" allow-clear id="schemaUri" />
  440. </a-form-item>
  441. <a-form-item
  442. v-bind="tailFormItemLayout"
  443. v-if="createTypeData && createTypeData.createType == '1'"
  444. >
  445. <a-tag
  446. color="#2db7f5"
  447. @click="getChangeAll('渠道号', 'formProject', 'schemaUri')"
  448. >+渠道号</a-tag
  449. >
  450. </a-form-item>
  451. </a-col>
  452. </a-row>
  453. <a-row :gutter="16">
  454. <a-col :span="16">
  455. <a-form-item label="第三方点击监测链接">
  456. <a-input
  457. v-decorator="[
  458. 'clickTrackUrl',
  459. {
  460. rules: [
  461. { required: true, message: '请填写第三方点击监测链接' },
  462. { validator: handleConfirmValue }
  463. ]
  464. }
  465. ]"
  466. allow-clear
  467. id="clickTrackUrl"
  468. />
  469. </a-form-item>
  470. <a-form-item
  471. v-bind="tailFormItemLayout"
  472. v-if="createTypeData && createTypeData.createType == '1'"
  473. >
  474. <a-tag
  475. color="#2db7f5"
  476. @click="getChangeAll('渠道号', 'formProject', 'clickTrackUrl')"
  477. >+渠道号</a-tag
  478. >
  479. </a-form-item>
  480. </a-col>
  481. </a-row>
  482. <a-row :gutter="16">
  483. <a-col :span="16">
  484. <a-form-item label="第三方actionBar监测链接">
  485. <a-input
  486. v-decorator="[
  487. 'actionbarClickUrl',
  488. {
  489. rules: [{ validator: handleConfirmValueOkUndefind }]
  490. }
  491. ]"
  492. allow-clear
  493. id="actionbarClickUrl"
  494. />
  495. </a-form-item>
  496. <a-form-item
  497. v-bind="tailFormItemLayout"
  498. v-if="createTypeData && createTypeData.createType == '1'"
  499. >
  500. <a-tag
  501. color="#2db7f5"
  502. @click="getChangeAll('渠道号', 'formProject', 'actionbarClickUrl')"
  503. >+渠道号</a-tag
  504. >
  505. </a-form-item>
  506. </a-col>
  507. </a-row>
  508. <a-row :gutter="16">
  509. <a-col :span="16">
  510. <a-form-item label="是否关联单品">
  511. <a-radio-group
  512. button-style="solid"
  513. v-decorator="[
  514. 'isHaveItem',
  515. {
  516. rules: [{ required: true, message: '是否关联单品必选' }],
  517. initialValue: 1
  518. }
  519. ]"
  520. >
  521. <a-radio-button :value="1">是</a-radio-button>
  522. <a-radio-button :value="0">否</a-radio-button>
  523. </a-radio-group>
  524. </a-form-item>
  525. </a-col>
  526. </a-row>
  527. <a-row :gutter="16">
  528. <a-col :span="16">
  529. <a-form-item label="使用层级">
  530. <a-radio-group
  531. button-style="solid"
  532. v-decorator="[
  533. 'usageLevel',
  534. {
  535. rules: [{ required: true, message: '使用层级必选' }],
  536. initialValue: 'account'
  537. }
  538. ]"
  539. >
  540. <a-radio-button value="account">账户</a-radio-button>
  541. <a-radio-button value="plan">计划</a-radio-button>
  542. <a-radio-button value="group">组</a-radio-button>
  543. </a-radio-group>
  544. </a-form-item>
  545. </a-col>
  546. </a-row>
  547. <a-row :gutter="16">
  548. <a-col :span="16">
  549. <a-form-item label="是否循环使用">
  550. <a-radio-group
  551. button-style="solid"
  552. v-decorator="[
  553. 'isCycle',
  554. {
  555. rules: [{ required: true, message: '使用层级必选' }],
  556. initialValue: 1
  557. }
  558. ]"
  559. >
  560. <a-radio-button :value="1">是</a-radio-button>
  561. <a-radio-button :value="0">否</a-radio-button>
  562. </a-radio-group>
  563. </a-form-item>
  564. </a-col>
  565. </a-row>
  566. <a-row
  567. :gutter="16"
  568. v-if="getFormData('isCycle') == 1 || getFormData('isCycle') == undefined"
  569. >
  570. <a-col :span="16">
  571. <a-form-item label="循环使用次数">
  572. <a-input-number
  573. v-decorator="[
  574. 'cycleTimes',
  575. {
  576. rules: [
  577. {
  578. required: getFormData('isCycle') == 0 ? false : true,
  579. message: '请输入循环使用次数'
  580. }
  581. ]
  582. }
  583. ]"
  584. :precision="0"
  585. :min="1"
  586. :max="999"
  587. />
  588. </a-form-item>
  589. </a-col>
  590. </a-row>
  591. </a-form>
  592. </a-card>
  593. </a-col>
  594. </a-row>
  595. </div>
  596. <div style="width:100%;display:flex; justify-content: flex-end;">
  597. <a-button type="default" style="margin-right: 15px" @click="goBack">返回</a-button>
  598. <a-button type="primary" style="margin-right: 15px" @click="saveHandler" :loading="saveLoading"
  599. >确定</a-button
  600. >
  601. </div>
  602. </a-spin>
  603. <creatApplication ref="application" @getDataList="getDataAll" />
  604. </div>
  605. </template>
  606. <script>
  607. // import UserMenu from '../tools/UserMenu'
  608. // import SMenu from '../menu/'
  609. import Logo from '@/components/tools/Logo.vue'
  610. import pick from 'lodash.pick'
  611. import { mixin } from '@/utils/mixin.js'
  612. import Treeselect from './components/treeSelectProject.vue'
  613. import treeSelectAccount from './components/treeSelectAccount.vue'
  614. import { mapGetters } from 'vuex'
  615. import moment from 'moment'
  616. import selectCheckAll from '@/components/formComponents/toutiaoTime'
  617. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  618. import uploadFile from '@/components/uploadFileMd5Push.vue'
  619. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  620. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  621. import creatApplication from './components/creatApplication.vue'
  622. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  623. // import EditableCell from './editablCell'
  624. // import lookPreviewVue from './lookPreview.vue'
  625. function tqFun(qcArr1) {
  626. var tempArr = []
  627. function bbFun(qcArr) {
  628. for (var i = 0; i < qcArr.length; i++) {
  629. if (qcArr[i] instanceof Array) {
  630. bbFun(qcArr[i])
  631. } else {
  632. tempArr.push(qcArr[i])
  633. }
  634. }
  635. return tempArr
  636. }
  637. return bbFun(qcArr1)
  638. }
  639. let optionsAppActive = []
  640. let businessOptions = []
  641. let interestVideoOptions = []
  642. let retargetColumns = [
  643. {
  644. title: '人群包',
  645. dataIndex: 'name',
  646. sorter: true,
  647. width: '40%',
  648. scopedSlots: { customRender: 'name' }
  649. },
  650. {
  651. title: '属性',
  652. dataIndex: 'populationType',
  653. scopedSlots: {
  654. customRender: 'populationType'
  655. },
  656. width: 200
  657. },
  658. {
  659. title: '所属账号',
  660. dataIndex: 'accountId',
  661. sorter: true,
  662. width: '40%',
  663. scopedSlots: { customRender: 'accountId' }
  664. }
  665. ]
  666. export default {
  667. name: 'GlobalHeader',
  668. components: {
  669. // UserMenu,
  670. // SMenu,
  671. Logo,
  672. Treeselect,
  673. selectCheckAll,
  674. checkBoxGroup,
  675. uploadFile,
  676. selectTable,
  677. treeSelectAccount,
  678. creatApplication
  679. // EditableCell
  680. },
  681. mixins: [mixin],
  682. data() {
  683. return {
  684. projectId: null,
  685. spinning: false,
  686. saveLoading: false,
  687. accountIds: [],
  688. fansStarOptions: [],
  689. fansStarType: 0,
  690. deviceType: 0,
  691. priceType: 0,
  692. customCrowd: '0',
  693. tabKey: '0',
  694. retargetDataAll: [],
  695. finallyRightTree: [],
  696. retargetColumns,
  697. activeKey: '',
  698. loading: false,
  699. formProject: this.$form.createForm(this), //选择项目表单
  700. newAppFormData: null,
  701. formItemLayout: {
  702. labelCol: { span: 6 },
  703. wrapperCol: { span: 16 }
  704. },
  705. tailFormItemLayout: {
  706. wrapperCol: {
  707. sm: {
  708. span: 18,
  709. offset: 6
  710. }
  711. }
  712. },
  713. createTypeData: { createType: '1', accountId: null }
  714. }
  715. },
  716. computed: {},
  717. watch: {},
  718. mounted() {
  719. this.$nextTick(function() {
  720. this.createTypeData = JSON.parse(localStorage.getItem('createTypeData'))
  721. window.addEventListener('scroll', this.onScroll)
  722. const that = this
  723. window.onresize = () => {
  724. return (() => {
  725. window.screenWidth = document.body.clientWidth
  726. that.screenWidth = window.screenWidth
  727. })()
  728. }
  729. })
  730. },
  731. filters: {},
  732. methods: {
  733. moment,
  734. ...mapGetters(['userInfo']),
  735. getDataAll(form) {
  736. this.newAppFormData = form
  737. },
  738. addNewApp() {
  739. this.$refs.application.showApplication()
  740. },
  741. getChangeAll(type, form, field) {
  742. var node = document.getElementById(field)
  743. var v = ''
  744. if (field == 'channelName' || field == 'channelCode') {
  745. v = '-{{' + type + '}}-'
  746. } else {
  747. v = '{{' + type + '}}'
  748. }
  749. if (document.selection) {
  750. //IE
  751. node.focus()
  752. var sel = document.selection.createRange()
  753. sel.text = v
  754. sel.select()
  755. if (field == 'channelName') {
  756. this[form].setFieldsValue({ channelName: sel.text })
  757. } else if (field == 'channelCode') {
  758. this[form].setFieldsValue({ channelCode: sel.text })
  759. } else if (field == 'schemaUri') {
  760. this[form].setFieldsValue({ schemaUri: sel.text })
  761. } else if (field == 'clickTrackUrl') {
  762. this[form].setFieldsValue({ clickTrackUrl: sel.text })
  763. } else if (field == 'actionbarClickUrl') {
  764. this[form].setFieldsValue({ actionbarClickUrl: sel.text })
  765. }
  766. } else if (node.selectionStart || node.selectionStart == '0') {
  767. //MOZILLA/GOOGLE
  768. var startPos = node.selectionStart
  769. var endPos = node.selectionEnd
  770. var restoreTop = node.scrollTop
  771. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  772. if (restoreTop > 0) {
  773. node.scrollTop = restoreTop
  774. }
  775. if (field == 'channelName') {
  776. this[form].setFieldsValue({ channelName: node.value })
  777. } else if (field == 'channelCode') {
  778. this[form].setFieldsValue({ channelCode: node.value })
  779. } else if (field == 'schemaUri') {
  780. this[form].setFieldsValue({ schemaUri: node.value })
  781. } else if (field == 'clickTrackUrl') {
  782. this[form].setFieldsValue({ clickTrackUrl: node.value })
  783. } else if (field == 'actionbarClickUrl') {
  784. this[form].setFieldsValue({ actionbarClickUrl: node.value })
  785. }
  786. node.focus()
  787. node.selectionStart = startPos + v.length
  788. node.selectionEnd = startPos + v.length
  789. // this.channelName = node.value
  790. } else {
  791. //OTHER
  792. node.value += v
  793. // console.log(node.value)
  794. if (field == 'channelName') {
  795. this[form].setFieldsValue({ channelName: node.value })
  796. } else if (field == 'channelCode') {
  797. this[form].setFieldsValue({ channelCode: node.value })
  798. } else if (field == 'schemaUri') {
  799. this[form].setFieldsValue({ schemaUri: node.value })
  800. } else if (field == 'clickTrackUrl') {
  801. this[form].setFieldsValue({ clickTrackUrl: node.value })
  802. } else if (field == 'actionbarClickUrl') {
  803. this[form].setFieldsValue({ actionbarClickUrl: node.value })
  804. }
  805. node.focus()
  806. // this.channelName = node.value
  807. }
  808. },
  809. handleConfirmValue(rule, value, callback) {
  810. if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
  811. callback()
  812. } else {
  813. callback('链接不能为空且开头为http://或https://')
  814. }
  815. },
  816. handleConfirmValueOkUndefind(rule, value, callback) {
  817. if (!!!value) {
  818. callback()
  819. } else if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value)) {
  820. callback()
  821. } else {
  822. callback('链接开头为http://或https://')
  823. }
  824. },
  825. numberMinCheck(rule, value, callback) {
  826. if (value == '' || value == null) {
  827. callback('请输入正确的编号')
  828. } else if (this.getFormData('numberMax') && value > this.getFormData('numberMax')) {
  829. callback('请输入正确的编号')
  830. } else {
  831. callback()
  832. }
  833. },
  834. goBack() {
  835. this.$router.replace('/autoLaunch/channelManage')
  836. this.$bus.$emit('remove', '/autoLaunch/createChannel')
  837. },
  838. saveHandler() {
  839. this.formProject.validateFields((err, values) => {
  840. if (!err) {
  841. if (!!this.newAppFormData) {
  842. this.saveLoading = true
  843. var params = { ...values, ...this.newAppFormData }
  844. params.userId = this.userInfo().id
  845. params.createType = this.createTypeData.createType
  846. if (this.createTypeData && !!this.createTypeData.accountId) {
  847. params.usageRange = 1
  848. params.projectId = null
  849. params.accountId = this.createTypeData.accountId
  850. } else if (this.createTypeData && !!this.createTypeData.projectId) {
  851. params.usageRange = 2
  852. params.projectId = this.createTypeData.projectId
  853. params.accountId = null
  854. }
  855. let url =
  856. this.createTypeData.createType == '1'
  857. ? '/channel/systemBatchCreation'
  858. : '/channel/customizedCreate'
  859. postAction(url, params).then(res => {
  860. this.saveLoading = false
  861. if (res.success) {
  862. this.$router.replace('/autoLaunch/channelManage')
  863. this.$bus.$emit('remove', '/autoLaunch/createChannel')
  864. } else {
  865. this.$message.error(res.message)
  866. }
  867. })
  868. } else {
  869. this.$message.error('未创建新的应用')
  870. }
  871. }
  872. })
  873. },
  874. numberMaxCheck() {
  875. // if (value == '' || value == null) {
  876. // callback('请输入最高出价')
  877. // } else if (this.getFormData('numberMin') && value < this.getFormData('numberMin')) {
  878. // callback('该编号不能比前面小')
  879. // } else {
  880. // callback()
  881. // }
  882. this.formProject.validateFields(['numberMin'])
  883. },
  884. //获取表单的某一个属性值
  885. getFormData(className) {
  886. return this.formProject.getFieldValue(className)
  887. },
  888. onScroll() {
  889. // var box = document.getElementById('box')
  890. // var t = document.documentElement.scrollTop || document.body.scrollTop
  891. // box.style.top = t + 'px'
  892. var jump = document.querySelectorAll('.step-jump')
  893. var distance =
  894. document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
  895. jump.forEach((item, index) => {
  896. if (distance >= item.offsetTop) {
  897. this.activeStep = index
  898. }
  899. })
  900. },
  901. // 锚点点击
  902. jump(index) {
  903. this.activeStep = index
  904. // 用 class=".step-jump" 添加锚点,此时的类名要放在tr上,放在td上不对,
  905. // 以后做的时候要注意这点,不是表格的时候,如何放置锚点
  906. let jump = document.querySelectorAll('.step-jump')
  907. // 通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能
  908. let total = jump[index].offsetTop
  909. // scrollTop滚动条距离页面的距离
  910. let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  911. // 平滑滚动,时长500ms,每10ms一跳,共50跳
  912. let step = total / 50
  913. if (total > distance) {
  914. smoothDown()
  915. } else {
  916. let newTotal = distance - total
  917. step = newTotal / 50
  918. smoothUp()
  919. }
  920. function smoothDown() {
  921. if (distance < total) {
  922. distance += step
  923. document.body.scrollTop = distance
  924. document.documentElement.scrollTop = distance
  925. window.pageYOffset = distance
  926. setTimeout(smoothDown, 5)
  927. } else {
  928. document.body.scrollTop = total
  929. document.documentElement.scrollTop = total
  930. window.pageYOffset = total
  931. }
  932. }
  933. function smoothUp() {
  934. if (distance > total) {
  935. distance -= step
  936. document.body.scrollTop = distance
  937. document.documentElement.scrollTop = distance
  938. window.pageYOffset = distance
  939. setTimeout(smoothUp, 10)
  940. } else {
  941. document.body.scrollTop = total
  942. document.documentElement.scrollTop = total
  943. window.pageYOffset = total
  944. }
  945. }
  946. },
  947. getData(className, formName) {
  948. return this[formName].getFieldValue(className)
  949. }
  950. }
  951. }
  952. </script>
  953. <style lang="scss" scoped>
  954. /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
  955. $height: 59px;
  956. .layout .header .user-wrapper .action .anticon,
  957. .layout .top-nav-header-index .user-wrapper .action .anticon {
  958. color: #999;
  959. }
  960. .layout .header .user-wrapper .action .anticon,
  961. .layout .top-nav-header-index .user-wrapper .action .anticon {
  962. color: #999;
  963. }
  964. .layout {
  965. .top-nav-header-index {
  966. .header-index-wide {
  967. margin-left: 10px;
  968. .ant-menu.ant-menu-horizontal {
  969. height: $height;
  970. line-height: $height;
  971. }
  972. }
  973. .trigger {
  974. line-height: 48px;
  975. font-size: 17px;
  976. &:hover {
  977. background: rgba(0, 0, 0, 0.05);
  978. }
  979. }
  980. }
  981. .header {
  982. z-index: 2;
  983. color: #999;
  984. height: $height;
  985. background-color: #1890ff;
  986. transition: background 300ms;
  987. /* dark 样式 */
  988. &.dark {
  989. color: #000000;
  990. box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  991. background-color: white !important;
  992. }
  993. }
  994. .header,
  995. .top-nav-header-index {
  996. &.dark .trigger:hover {
  997. background: rgba(0, 0, 0, 0.05);
  998. }
  999. }
  1000. }
  1001. .ant-layout-header {
  1002. height: $height;
  1003. line-height: $height;
  1004. }
  1005. </style>