TouTiaoBatch.vue 51 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471
  1. <template>
  2. <div class="toutiaoBatch">
  3. <keep-alive>
  4. <div class="tabs">
  5. <a-tabs v-model="tabkey" @change="callback">
  6. <a-tab-pane key="group" tab="广告组">
  7. </a-tab-pane>
  8. <a-tab-pane key="plan" tab="广告计划">
  9. </a-tab-pane>
  10. <a-tab-pane key="idea" tab="广告创意">
  11. </a-tab-pane>
  12. <a-button type='primary' slot="tabBarExtraContent" @click="goBatch">
  13. + 头条批量创建
  14. </a-button>
  15. </a-tabs>
  16. </div>
  17. </keep-alive>
  18. <div class="topOptions">
  19. <span class="OptinItem topOpt">
  20. <!-- <Treeselect :appId.sync="accountID" :multiple="false" request="2,4" reqUrl='/ctop/projectMember/getProjectAccountByUserId' ref="treeSelect" style="margin-bottom:8px " /> -->
  21. <a-tree-select
  22. show-search
  23. allow-clear
  24. dropdownMatchSelectWidth
  25. v-model="accountID"
  26. style="width: 60%"
  27. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  28. :tree-data="treeData"
  29. placeholder="请选择具体账户"
  30. :filterOption='filterOption'
  31. treeNodeFilterProp='title'
  32. @change='accountIDChange'
  33. >
  34. </a-tree-select>
  35. </span>
  36. <span class="OptinItem">
  37. <a-select style="width: 120px" v-model="statusValue" @change="statusChange" placeholder="请选择状态">
  38. <a-select-option value=" " >
  39. 不限
  40. </a-select-option>
  41. <a-select-option value="ENABLE" >
  42. 启用
  43. </a-select-option>
  44. <a-select-option value="DISABLE" >
  45. 暂停
  46. </a-select-option>
  47. <a-select-option value="DELETE">
  48. 删除
  49. </a-select-option>
  50. </a-select>
  51. </span>
  52. <span class="OptinItem">
  53. <!-- <a-date-picker @change="dateChange" /> -->
  54. <a-range-picker v-model="dateValue" :disabled-date="disabledDate" style="width: 250px;" format="YYYY-MM-DD" @change="dateChange" />
  55. </span>
  56. <span class="OptinItem">
  57. <a-input-search placeholder="请输入ID或名称关键词" v-model="optionId" style="width: 200px" />
  58. </span>
  59. <span class="optionBtn">
  60. <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
  61. <!-- <a-button type='default' @click="reset">重置</a-button> -->
  62. </span>
  63. </div>
  64. <div class="tableArea">
  65. <div class="tableOption">
  66. <span class="OptinItem">
  67. <a-tooltip>
  68. <template slot="title" >
  69. 这里可以批量启动、暂停、删除你的选择哦~
  70. </template>
  71. <!-- <a-button type="link" @click="changeSelectStatus">批量操作</a-button> -->
  72. <span >批量操作:</span>
  73. </a-tooltip>
  74. </span>
  75. <span class="OptinItem">
  76. <a-select style="width: 120px" @change="optChange" placeholder="请选择状态" :disabled='selectedRowKeys.length<=0'>
  77. <a-select-option value="open" >
  78. 启动
  79. </a-select-option>
  80. <a-select-option value="pause">
  81. 暂停
  82. </a-select-option>
  83. <a-select-option value="delete">
  84. 删除
  85. </a-select-option>
  86. </a-select>
  87. </span>
  88. <span class="OptinItem">
  89. <a-popconfirm
  90. title="确定要删除选择的内容吗?"
  91. ok-text="删除"
  92. cancel-text="取消"
  93. @confirm="confirm"
  94. @cancel="cancel"
  95. v-if="optValue=='delete'"
  96. >
  97. <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
  98. </a-popconfirm>
  99. <a-button type='primary' @click="isOkHandle" class="ok" v-else>确定</a-button>
  100. <a-popover v-model="visible" trigger="click" >
  101. <div slot="content">
  102. <span style='font-weight:700;margin-right:15px;font-size:15px'>预算</span>
  103. <a-radio-group v-model="radioValue" @change="radioChange">
  104. <a-radio value="BUDGET_MODE_INFINITE">不限</a-radio>
  105. <a-radio value="BUDGET_MODE_DAY">日预算</a-radio>
  106. </a-radio-group>
  107. <span v-show="radioValue=='BUDGET_MODE_DAY'">预计金额: <a-input-number :min="0" v-model="dayBudgetValue" :step="0.1" @change="budgetChange" size="small" style='margin-right:20px' /></span>
  108. <a-button type='default' @click="showPricecancel" style='margin-right:10px'>取消</a-button>
  109. <a-button type='primary' @click="showPriceOk" class="ok">保存</a-button>
  110. </div>
  111. <!-- <a-button type='default' v-if="tabkey=='group'" class="ok">更改预算</a-button> -->
  112. </a-popover>
  113. <a-button type='default' @click="changebudget" v-if="tabkey=='plan'" class="ok">更改预算</a-button>
  114. <a-button type='default' @click="changeofferPrice" v-show="tabkey=='plan'">更改出价</a-button>
  115. </span>
  116. <!-- <span class="optionBtn">
  117. <a-button type='primary' @click="reset">自定义列</a-button>
  118. </span> -->
  119. </div>
  120. <div class="table">
  121. <a-table
  122. :columns="columns"
  123. :data-source="data"
  124. :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}"
  125. bordered
  126. :pagination="ipagination"
  127. :loading="loading"
  128. @change="sort"
  129. >
  130. <template slot="name" slot-scope="text,record">
  131. <a href="javascript:;" @click="goNextPage(text)">
  132. <editableCell :text="text" slotName='name' @change="onCellChange(record.key, 'name', $event)" />
  133. </a>
  134. </template>
  135. <span slot="budget" slot-scope="text,record">
  136. <editableCell :text="text" slotName='budget' @change="onCellChange(record.key, 'budget', $event)" />
  137. </span>
  138. <span slot="bid" slot-scope="text,record">
  139. <editableCell :text="text" slotName='bid' @change="onCellChange(record.key, 'bid', $event)" />
  140. </span>
  141. <span slot="campaignStatus" slot-scope="text,record">
  142. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  143. </span>
  144. <span slot="createStatus" slot-scope="text,record">
  145. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  146. </span>
  147. <span slot="planStatus" slot-scope="text,record">
  148. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  149. </span>
  150. <span slot="createImg" slot-scope="text,record">
  151. <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
  152. <a-popover placement="right">
  153. <template slot="content">
  154. <!-- {{record.videoId_dictText}} -->
  155. <video :src="record.videoId_dictText" style="width:250px" controls autoplay muted ></video>
  156. </template>
  157. <template slot="title">
  158. <!-- <span>Title</span> -->
  159. </template>
  160. <!-- <a-button>Right</a-button> -->
  161. <img :src="record.imageId_dictText" alt="" style="width:100px">
  162. </a-popover>
  163. </span>
  164. <!-- <span slot="options" slot-scope="record">
  165. <a href="javascript:;" style="margin-right:10px">编辑</a>
  166. <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
  167. <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
  168. </span> -->
  169. <span slot="parentGroup" slot-scope="text">
  170. <a href="javascript:;" >{{text}}</a>
  171. </span>
  172. <span slot="parentPlan" slot-scope="text">
  173. <a href="javascript:;" >{{text}}</a>
  174. </span>
  175. <span slot="time" slot-scope="text,record">
  176. {{record.startTime}}至{{record.endTime}}
  177. </span>
  178. <span slot="flowControlMode" slot-scope="text">
  179. <span v-if="text=='FLOW_CONTROL_MODE_FAST'">优先跑量</span>
  180. <span v-if="text=='FLOW_CONTROL_MODE_SMOOTH'">优先低成本</span>
  181. <span v-if="text=='FLOW_CONTROL_MODE_BALANCE'">均衡投放</span>
  182. </span>
  183. </a-table>
  184. </div>
  185. </div>
  186. <!-- 出价的模态框 -->
  187. <div class="batchModal" >
  188. <a-modal v-model="offerPriceVisiable" :title="'批量修改'+ModalTitle" @ok="modifyChangeOk" width='55%' id="batchModal" >
  189. <div id="batchModal">
  190. <div class="selectePlan">已选{{}}个广告计划</div>
  191. <div class="modifyRules">
  192. <span class="rules">修改规则:</span>
  193. <a-radio-group v-model="modifyRulesValue" @change="modifyRulesChange">
  194. <a-radio-button value="total">
  195. 统一修改
  196. </a-radio-button>
  197. <a-radio-button value="separately">
  198. 分别修改
  199. </a-radio-button>
  200. </a-radio-group>
  201. <span class="totalPrice" v-if="modifyRulesValue=='total'"><span>{{ModalTitle=='出价'?'出价:':'总预算:'}}</span>
  202. <a-input-number :min="0" v-model="inputValue" :step="0.1" @change="totalbudgetChange" size="small" /> 元
  203. </span>
  204. </div>
  205. <div class="modifyTable">
  206. <a-table
  207. :columns="modifyTableCol"
  208. :data-source="modifyTableData"
  209. bordered
  210. tableLayout="auto"
  211. :pagination="false"
  212. :loading='modifyTableloading'
  213. style="word-break: break-all;"
  214. >
  215. <span slot="changeBudget" slot-scope="text,records">
  216. <span v-if="ModalTitle=='出价'">oCPM</span>
  217. <span v-else>{{modifyRulesValue=='total'?'总预算:':'日预算:'}}</span>
  218. <a-input-number :min="0" :step="0.1" @blur='budgetChange($event,records)' size="small" :disabled="modifyRulesValue=='total'" /> 元
  219. </span>
  220. <span slot="currentCost" slot-scope="currentCost">{{ currentCost | decimalsHandle }}</span>
  221. <span slot="budget" slot-scope="text">
  222. <span >日预算:{{ text | decimalsHandle }}</span>
  223. </span>
  224. <span slot="bid" slot-scope="text" >
  225. <span >oCPM: {{text | decimalsHandle}}</span>
  226. </span>
  227. </a-table>
  228. </div>
  229. </div>
  230. </a-modal>
  231. </div>
  232. <!-- 复制计划的弹出框 -->
  233. <a-modal v-model="copyPlanVisiable" title="复制计划" @ok="copyPlanOk" id="copyModal" :maskClosable='false'>
  234. <div id="copyModal">
  235. <p class="copyTip">复制说明:适用于批量复制多个广告计划,默认同事复制所属创意。此类型不直接跨广告投放账号复制,且只能复制完成后逐一修改</p>
  236. <p style="font-weight:700;font-size:15px">被复制广告计划:<span>{{}}</span></p>
  237. <p><span class="copyName"><b class="copyKeyStart">*</b> 复制个数:</span>
  238. <a-input-number :min="1" :max="10" v-model="copyNum" style="width:250px" />
  239. </p>
  240. <p><span class="copyName"><b class="copyKeyStart">*</b>复制到广告组:</span>
  241. <a-select size="default" default-value="a1" style="width: 250px" v-model="copyGroup" >
  242. <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  243. {{ (i + 9).toString(36) + i }}
  244. </a-select-option>
  245. </a-select>
  246. </p>
  247. </div>
  248. </a-modal>
  249. </div>
  250. </template>
  251. <script>
  252. import moment from 'moment';
  253. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  254. import { JeecgListMixin } from '@/mixins/ipagination'
  255. import editableCell from './editableCell'
  256. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  257. import qs from 'qs'
  258. let typeValue='预算'
  259. let modifyTableCol=[
  260. {
  261. title: '广告计划',
  262. dataIndex: 'name',
  263. align: 'center',
  264. },
  265. {
  266. title: '当前消耗',
  267. dataIndex: 'currentCost',
  268. align: 'center',
  269. scopedSlots: { customRender: 'currentCost' },
  270. },
  271. {
  272. title: '当前预算',
  273. dataIndex: 'budget',
  274. align: 'center',
  275. scopedSlots: { customRender:'budget' },
  276. },
  277. {
  278. title: '当前出价',
  279. dataIndex: 'bid',
  280. align: 'center',
  281. scopedSlots: { customRender:'bid' },
  282. },
  283. {
  284. title: '修改'+typeValue,
  285. dataIndex: 'changeBudget',
  286. align: 'center',
  287. scopedSlots: { customRender: 'changeBudget' },
  288. },
  289. ]
  290. const columns = [
  291. {
  292. title: '状态',
  293. dataIndex: 'campaignStatus',
  294. key: 'campaignStatus',
  295. align: 'center',
  296. scopedSlots: { customRender: 'campaignStatus' }
  297. },
  298. {
  299. title: '广告组名称',
  300. dataIndex: 'name',
  301. key: 'name',
  302. align: 'center',
  303. scopedSlots: { customRender: 'name' }
  304. },
  305. {
  306. title: '广告组ID',
  307. dataIndex: 'id',
  308. key: 'id',
  309. align: 'center',
  310. },
  311. {
  312. title: '推广目的',
  313. dataIndex: 'landingType_dictText',
  314. key: 'landingType_text',
  315. align: 'center',
  316. },
  317. {
  318. title: '预算类型',
  319. dataIndex: 'budgetMode_dictText',
  320. key: 'budgetMode_text',
  321. align: 'center',
  322. width:250,
  323. scopedSlots: { customRender: 'budgetMode' }
  324. },
  325. {
  326. title: '组预算(元)',
  327. dataIndex: 'budget',
  328. key: 'budget',
  329. align: 'center',
  330. scopedSlots: { customRender: 'budget' }
  331. },
  332. {
  333. title: '创建时间',
  334. dataIndex: 'campaignCreateTime',
  335. key: 'campaignCreateTime',
  336. align: 'center',
  337. scopedSlots: { customRender: 'campaignCreateTime' }
  338. },
  339. ];
  340. const planColumns = [
  341. {
  342. title: '状态',
  343. dataIndex: 'planStatus',
  344. key: 'planStatus',
  345. align: 'center',
  346. scopedSlots: { customRender: 'planStatus' }
  347. },
  348. // {
  349. // title: '操作',
  350. // dataIndex: 'options',
  351. // key: 'options',
  352. // align: 'center',
  353. // width:200,
  354. // scopedSlots: { customRender: 'options' }
  355. // },
  356. {
  357. title: '计划名称',
  358. dataIndex: 'name',
  359. key: 'name',
  360. align: 'center',
  361. width:300,
  362. scopedSlots: { customRender: 'name' }
  363. },
  364. {
  365. title: '计划ID',
  366. dataIndex: 'id',
  367. key: 'id',
  368. align: 'center',
  369. },
  370. {
  371. title: '账户',
  372. dataIndex: 'accountId_dictText',
  373. key: 'accountId_dictText',
  374. align: 'center',
  375. },
  376. {
  377. title: '计划预算(元)',
  378. dataIndex: 'budget',
  379. key: 'budget',
  380. align: 'center',
  381. width:150,
  382. scopedSlots: { customRender: 'budget' }
  383. },
  384. {
  385. title: '出价(元)',
  386. dataIndex: 'bid',
  387. key: 'bid',
  388. align: 'center',
  389. width:150,
  390. scopedSlots: { customRender: 'bid' }
  391. },
  392. {
  393. title: '投放方式',
  394. dataIndex: 'flowControlMode',
  395. key: 'flowControlMode',
  396. align: 'center',
  397. scopedSlots: { customRender: 'flowControlMode' }
  398. },
  399. {
  400. title: '投放时间',
  401. dataIndex: 'time',
  402. key: 'time',
  403. align: 'center',
  404. scopedSlots: { customRender: 'time' }
  405. },
  406. {
  407. title: '所属广告组',
  408. dataIndex: 'campaignId_dictText',
  409. key: 'campaignId_dictText',
  410. align: 'center',
  411. scopedSlots: { customRender: 'campaignId_dictText' }
  412. },
  413. ];
  414. const ideaColumns = [
  415. {
  416. title: '开关',
  417. dataIndex: 'createStatus',
  418. key: 'status',
  419. align: 'center',
  420. scopedSlots: { customRender: 'createStatus' }
  421. },
  422. // {
  423. // title: '操作',
  424. // dataIndex: 'options',
  425. // key: 'options',
  426. // align: 'center',
  427. // scopedSlots: { customRender: 'options' }
  428. // },
  429. {
  430. title: '创意',
  431. dataIndex: 'createImg',
  432. key: 'createImg',
  433. align: 'center',
  434. width:120,
  435. scopedSlots: { customRender: 'createImg' }
  436. },
  437. /*{
  438. title: '广告创意',
  439. dataIndex: 'img',
  440. key: 'img',
  441. align: 'center',
  442. },*/
  443. {
  444. title: '创意标题',
  445. dataIndex: 'title',
  446. key: 'title',
  447. align: 'center',
  448. },
  449. {
  450. title: '创意ID',
  451. dataIndex: 'id',
  452. key: 'id',
  453. align: 'center',
  454. },
  455. /*{
  456. title: '创意方式',
  457. dataIndex: 'iaID',
  458. key: 'idaID',
  459. align: 'center',
  460. },*/
  461. {
  462. title: '创意状态',
  463. dataIndex: 'status_dictText',
  464. key: 'status_dictText',
  465. align: 'center',
  466. scopedSlots: { customRender: 'status_dictText' }
  467. },
  468. {
  469. title: '账户',
  470. dataIndex: 'accountId_dictText',
  471. key: 'accountId_dictText',
  472. align: 'center',
  473. },
  474. {
  475. title: '所属计划',
  476. dataIndex: 'planId_dictText',
  477. key: 'planId_dictText',
  478. align: 'center',
  479. scopedSlots: { customRender: 'planId_dictText' }
  480. },
  481. {
  482. title: '创建时间',
  483. dataIndex: 'creativeCreateTime',
  484. key: 'creativeCreateTime',
  485. align: 'center',
  486. scopedSlots: { customRender: 'creativeCreateTime' }
  487. },
  488. /* {
  489. title: '投放位置',
  490. dataIndex: 'LaunchPosition',
  491. key: 'LaunchPosition',
  492. align: 'center',
  493. scopedSlots: { customRender: 'LaunchPosition' }
  494. },*/
  495. ];
  496. export default {
  497. components: {
  498. editableCell,
  499. Treeselect,
  500. },
  501. mixins: [JeecgListMixin],
  502. data() {
  503. return {
  504. moment,
  505. loading:false,
  506. accountID:undefined,
  507. openID:undefined,
  508. treeData:[],
  509. // account:'',//媒体账号
  510. optionId:'',//input输入的id或关键词
  511. statusValue:undefined,
  512. dateValue:[],//日期选择框选择
  513. dateString:[],//--我赋值的是dateString
  514. tabkey:'group',//tab选中的页
  515. selectDisable:true,
  516. optValue:'',//操作设置的值 删除 暂停 开启
  517. visible: false,//出价里的弹出框
  518. radioValue:'unlimit',//出价的单选默认值
  519. dayBudgetValue:0,//日预算的默认值
  520. offerPriceVisiable:false,//修改出价的弹出框显示与否
  521. modifyRulesValue:'total',//修改出价里的radio默认值
  522. ModalTitle:'出价',//模态框的标题
  523. inputValue:'',//模态框里统一修改时的金额
  524. //主页的表格
  525. data:[],
  526. columns,
  527. selectedRowKeys:[],
  528. selectedRows:[],
  529. editID:0,
  530. //批量修改里的表格
  531. typeValue,
  532. modifyTableData:[
  533. ],
  534. modifyTableCol,
  535. modifyTableloading:false,
  536. //复制计划
  537. copyPlanVisiable:false,
  538. copyRecord:null,
  539. copyNum:1,//复制个数
  540. copyGroup:'',
  541. url: {
  542. campaignList: "/ctop/byteDanceCampaign/list",
  543. planList: "/ctop/byteDanceAdvertisePlan/list",
  544. creativeList: "/ctop/byteDanceCreative/list",
  545. },
  546. xiugaiData:[],//存分别修改时候的数组
  547. }
  548. },
  549. computed: {
  550. rowSelection(){
  551. return {
  552. onChange: (selectedRowKeys, selectedRows) => {
  553. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  554. this.selectedRowKeys=selectedRowKeys;
  555. this.selectedRows=selectedRows;
  556. },
  557. onSelect: (record, selected, selectedRows) => {
  558. // console.log(record, selected, selectedRows);
  559. this.modifyTableData=selectedRows;
  560. this.selectedRows=selectedRows;
  561. },
  562. onSelectAll: (selected, selectedRows, changeRows) => {
  563. // console.log(selected, selectedRows, changeRows);
  564. this.modifyTableData=selectedRows
  565. this.selectedRows=selectedRows;
  566. },
  567. }
  568. },
  569. },
  570. methods: {
  571. // 点击跳转
  572. goNextPage(){
  573. },
  574. // table里的函数
  575. // table里的函数在上
  576. accountIDChange(val){
  577. // console.log(val);
  578. let currentData=this.treeData.filter((item)=>{
  579. return item.value==val
  580. })
  581. // console.log(currentData);
  582. if(currentData.length>0){
  583. this.accountID=undefined;
  584. this.openID=val
  585. }
  586. this.search();
  587. },
  588. filterOption(input, option){
  589. // console.log(input, option)
  590. return (
  591. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  592. );
  593. },
  594. //tab切换页的函数
  595. callback(key) {
  596. // console.log(key);
  597. this.tabkey=key;
  598. // this.columns=[];
  599. if(key=='group'){
  600. this.columns=columns;
  601. }else if(key=='plan'){
  602. this.columns=planColumns;
  603. }else if(key=='idea'){
  604. this.columns=ideaColumns;
  605. }
  606. if(this.accountID){
  607. this.tabkey=key;
  608. this.loading=true
  609. if(key=='group'){
  610. let params = {};
  611. this.refreshCampaignList({
  612. accountId:this.accountID,
  613. name:this.optionId,
  614. status:this.statusValue,
  615. startDate:this.dateString[0],
  616. endDate:this.dateString[1],
  617. pageNo:this.ipagination.current
  618. });
  619. }else if(key=='plan'){
  620. this.getplanList({
  621. accountId:this.accountID,
  622. name:this.optionId,
  623. toutiaoStatus:this.statusValue,
  624. startDate:this.dateString[0],
  625. endDate:this.dateString[1],
  626. pageNo:this.ipagination.current
  627. })
  628. }else if(key=='idea'){
  629. let params = {};
  630. this.refreshCreativeList({
  631. accountId:this.accountID,
  632. name:this.optionId,
  633. status:this.statusValue,
  634. startDate:this.dateString[0],
  635. endDate:this.dateString[1],
  636. pageNo:this.ipagination.current
  637. });
  638. }
  639. }
  640. },
  641. //跳转到批量页面
  642. goBatch(){
  643. this.$router.push('/modules/BatchCreate/newGroup')
  644. // if(this.tabkey=='idea'){
  645. // this.$router.push('/modules/BatchCreate/newCreate')
  646. // }
  647. },
  648. //状态改变
  649. statusChange(value){
  650. console.log(value);
  651. },
  652. //日期改变
  653. dateChange(date, dateString) {
  654. console.log(date, dateString);
  655. this.dateString=dateString;
  656. },
  657. disabledDate(current) {
  658. // console.log(current)
  659. return current && current > moment().subtract(1, 'day')
  660. },
  661. //输入框查询事件
  662. onSearch(value){
  663. // console.log('input--'+value);
  664. },
  665. //查询按钮事件
  666. search(){
  667. // console.log(this.accountID,this.dateString,this.statusValue,this.optionId);
  668. if(this.accountID){
  669. this.loading=true
  670. if(this.tabkey=='group'){
  671. this.columns=columns;
  672. this.refreshCampaignList({
  673. accountId:this.accountID,
  674. name:this.optionId,
  675. status:this.statusValue,
  676. startDate:this.dateString[0],
  677. endDate:this.dateString[1],
  678. pageNo:this.ipagination.current
  679. })
  680. }else if(this.tabkey=='plan'){
  681. this.columns=planColumns;
  682. this.getplanList({
  683. accountId:this.accountID,
  684. name:this.optionId,
  685. toutiaoStatus:this.statusValue,
  686. startDate:this.dateString[0],
  687. endDate:this.dateString[1],
  688. pageNo:this.ipagination.current
  689. })
  690. }else if(this.tabkey=='idea'){
  691. this.columns=ideaColumns;
  692. this.refreshCreativeList({
  693. accountId:this.accountID,
  694. name:this.optionId,
  695. status:this.statusValue,
  696. startDate:this.dateString[0],
  697. endDate:this.dateString[1],
  698. pageNo:this.ipagination.current
  699. })
  700. }
  701. }else{
  702. this.$message.error('请选择账户后重试')
  703. }
  704. // postAction('',{
  705. // }).then((res)=>{
  706. // console.log(res)
  707. // })
  708. },
  709. //点击分页
  710. sort(pagination, filters, sorter, { currentDataSource }){
  711. // console.log(pagination, filters, sorter)
  712. // if(sorter.order == 'ascend'){
  713. // this.HttpPost(sorter.columnKey+'+')
  714. // }else if(sorter.order == 'descend'){
  715. // this.HttpPost(sorter.columnKey+'-')
  716. // }
  717. this.ipagination.current=pagination.current;
  718. this.search()
  719. },
  720. //重置按钮事件
  721. reset(){
  722. },
  723. //状态改变
  724. switchChange(text,record){
  725. // console.log(text,record);
  726. let recordData=JSON.parse(JSON.stringify(record))
  727. if(this.tabkey=='group'){
  728. let ids=record.id;
  729. let status=text?'disable':'enable';
  730. postAction('/ctop/byteDanceCampaign/editStatus',qs.stringify({
  731. accountId:this.accountID,
  732. ids:`${ids}`,
  733. status:status,
  734. })).then((res)=>{
  735. // console.log(res);
  736. if(res.success){
  737. this.data=[];
  738. this.refreshCampaignList({
  739. accountId:this.accountID,
  740. name:this.optionId,
  741. status:this.statusValue,
  742. startDate:this.dateString[0],
  743. endDate:this.dateString[1],
  744. pageNo:this.ipagination.current
  745. })
  746. }
  747. })
  748. }else if(this.tabkey=='plan'){
  749. if(text){
  750. recordData.toutiaoStatus='AD_STATUS_DISABLE';
  751. }else{
  752. recordData.toutiaoStatus='AD_STATUS_DELIVERY_OK'
  753. }
  754. this.batchEditHttp('status',[recordData])
  755. }else if(this.tabkey=='idea'){
  756. let ids=record.id;
  757. let status=text?'disable':'enable';
  758. postAction('/ctop//byteDanceCreative/editStatus',qs.stringify({
  759. accountId:this.accountID,
  760. ids:`${ids}`,
  761. status:status,
  762. })).then((res)=>{
  763. // console.log(res);
  764. if(res.success){
  765. this.data=[];
  766. this.refreshCreativeList({
  767. accountId:this.accountID,
  768. name:this.optionId,
  769. status:this.statusValue,
  770. startDate:this.dateString[0],
  771. endDate:this.dateString[1],
  772. pageNo:this.ipagination.current
  773. })
  774. }else{
  775. this.$message.error(res.message)
  776. }
  777. })
  778. }
  779. },
  780. //改变批量操作的按钮
  781. changeSelectStatus(){
  782. this.selectDisable=false;
  783. },
  784. //批量操作下的启动 删除 暂停
  785. optChange(value){
  786. // console.log(value)
  787. this.optValue=value;
  788. },
  789. editGroupStatus(url){
  790. let ids='';
  791. this.selectedRows.forEach((item,index)=>{
  792. if(index==0){
  793. ids=`${item.id}`
  794. }else{
  795. ids+=`,${item.id}`
  796. }
  797. })
  798. let status=''
  799. if(this.optValue=='pause'){
  800. status='disable'
  801. }else if(this.optValue=='open'){
  802. status='enable'
  803. }else if(this.optValue=='delete'){
  804. status='delete'
  805. }
  806. postAction(url,qs.stringify({
  807. accountId:this.accountID,
  808. ids,
  809. status,
  810. })).then((res)=>{
  811. console.log(res);
  812. if(res.success){
  813. this.$message.success(res.message)
  814. }else{
  815. this.$message.error(res.message)
  816. }
  817. this.data=[];
  818. this.refreshCampaignList({
  819. accountId:this.accountID,
  820. name:this.optionId,
  821. status:this.statusValue,
  822. startDate:this.dateString[0],
  823. endDate:this.dateString[1],
  824. pageNo:this.ipagination.current
  825. })
  826. })
  827. },
  828. //批量操作的确定按钮
  829. isOkHandle(){
  830. console.log(this.optValue&&this.selectedRowKeys.length>0)
  831. if(this.optValue&&this.selectedRowKeys.length>0){
  832. if(this.optValue=='pause'){
  833. if(this.tabkey=='group'){
  834. console.log(this.selectedRows);
  835. this.editGroupStatus('/ctop/byteDanceCampaign/editStatus')
  836. }else if(this.tabkey=='plan'){
  837. console.log(0)
  838. if(this.selectedRowKeys.length>0){
  839. this.selectedRows.forEach((item)=>{
  840. item.toutiaoStatus='AD_STATUS_DISABLE'
  841. })
  842. }
  843. console.log(0)
  844. this.batchEditHttp('status',this.selectedRows)
  845. }else if(this.tabkey=='idea'){
  846. this.editGroupStatus('/ctop/byteDanceCreative/editStatus')
  847. }
  848. }else if(this.optValue=='open'){
  849. if(this.tabkey=='group'){
  850. this.editGroupStatus('/ctop/byteDanceCampaign/editStatus');
  851. }else if(this.tabkey=='plan'){
  852. if(this.selectedRowKeys.length>0){
  853. this.selectedRows.forEach((item)=>{
  854. item.toutiaoStatus='AD_STATUS_DELIVERY_OK'
  855. })
  856. }
  857. this.batchEditHttp('status',this.selectedRows)
  858. }else if(this.tabkey=='idea'){
  859. this.editGroupStatus('/ctop/byteDanceCreative/editStatus');
  860. }
  861. }
  862. // this.selectedRows=[];
  863. // this.selectedRowKeys=[];
  864. this.optValue=undefined;
  865. }
  866. },
  867. //确定删除
  868. confirm(e) {
  869. // console.log(e);
  870. if(this.optValue=='delete'){
  871. if(this.tabkey=='group'){
  872. this.editGroupStatus('/ctop/byteDanceCampaign/editStatus')
  873. }else if(this.tabkey=='plan'){
  874. if(this.selectedRowKeys.length>0){
  875. this.selectedRows.forEach((item)=>{
  876. item.toutiaoStatus='AD_STATUS_DELETE'
  877. })
  878. }
  879. this.batchEditHttp('status',this.selectedRows)
  880. this.$message.success('删除成功');
  881. }else if(this.tabkey=='idea'){
  882. this.editGroupStatus('/ctop/byteDanceCreative/editStatus');
  883. }
  884. }
  885. },
  886. //取消删除
  887. cancel(e) {
  888. // console.log(e);
  889. // this.$message.error('删除成功');
  890. },
  891. //预算里 取消按钮点击
  892. showPricecancel() {
  893. // console.log(111);
  894. this.visible = false;
  895. this.dayBudgetValue=0
  896. this.radioValue='unlimit'
  897. },
  898. showPriceOk(){
  899. this.visible = false;
  900. },
  901. //单选按钮改变事件
  902. radioChange(e) {
  903. // console.log('radio checked', e.target.value,this.radioValue);
  904. },
  905. totalbudgetChange(val){
  906. // console.log(this.inputValue,'------',val)
  907. },
  908. budgetChange(e,record){
  909. // console.log(e.target.value,'------',record);
  910. this.xiugaiData.push(JSON.parse(JSON.stringify(record)))
  911. if(this.typeValue=='预算'){
  912. if(e.target.value ){
  913. this.xiugaiData.forEach((item)=>{
  914. if(item.id==record.id){
  915. item.budget=e.target.value*1
  916. }
  917. })
  918. // console.log(this.xiugaiData)
  919. }
  920. }else if(this.typeValue=='出价'){
  921. if(e.target.value ){
  922. this.xiugaiData.forEach((item)=>{
  923. if(item.id==record.id){
  924. item.bid==e.target.value*1
  925. }
  926. })
  927. }
  928. }
  929. },
  930. //广告计划下的预算
  931. changebudget(){
  932. this.offerPriceVisiable=true;
  933. this.ModalTitle='预算'
  934. this.typeValue='预算'
  935. this.modifyTableCol[4].title='修改预算';
  936. this.xiugaiData=[];
  937. this.inputValue=undefined;
  938. },
  939. //修改出价
  940. changeofferPrice(){
  941. this.offerPriceVisiable=true;
  942. this.ModalTitle='出价'
  943. this.typeValue='出价';
  944. this.modifyTableCol[4].title='修改出价';
  945. this.xiugaiData=[]
  946. this.inputValue=undefined
  947. },
  948. //批量修改出价和预算的弹出框确定
  949. modifyChangeOk(e) {
  950. // console.log(e);
  951. this.offerPriceVisiable = false;
  952. // console.log(this.inputValue);
  953. if(this.modifyRulesValue=='separately'){
  954. let batchArr=[...this.xiugaiData];
  955. let changeZiduan=''
  956. if(this.typeValue=='预算'){
  957. changeZiduan='budget'
  958. }else if(this.typeValue=='出价'){
  959. changeZiduan='bid'
  960. }
  961. // console.log(batchArr)
  962. this.batchEditHttp(changeZiduan,batchArr)
  963. }else if(this.modifyRulesValue=='total'){
  964. let batchArr=[...this.modifyTableData]
  965. if(this.typeValue=='出价'){
  966. batchArr.forEach((item)=>{
  967. item.bid=this.inputValue
  968. })
  969. this.batchEditHttp('bid',batchArr)
  970. }else if(this.typeValue=='预算'){
  971. batchArr.forEach((item)=>{
  972. item.budget=this.inputValue
  973. })
  974. this.batchEditHttp('budget',batchArr)
  975. }
  976. }
  977. this.modifyTableData=[];
  978. this.selectedRowKeys=[]
  979. },
  980. batchEditHttp(type,params){
  981. postAction(`/ctop/byteDanceAdvertisePlan/batchEdit/${type}`,params).then((res)=>{
  982. // console.log(res);
  983. if(res.success){
  984. if(res.result.length>0){
  985. this.modifyTableData=[]
  986. this.modifyTableData=res.result
  987. this.getplanList({
  988. accountId:this.accountID,
  989. name:this.optionId,
  990. status:this.statusValue,
  991. startDate:this.dateString[0],
  992. endDate:this.dateString[1],
  993. pageNo:this.ipagination.current
  994. })
  995. }
  996. this.optValue=undefined;
  997. this.selectedRowKeys=[]
  998. }
  999. })
  1000. },
  1001. //修改规则的改变
  1002. modifyRulesChange(e){
  1003. // console.log(e.target.value)
  1004. this.modifyRulesValue=e.target.value
  1005. if(e.target.value=='total'){
  1006. this.inputValue=''
  1007. }else{
  1008. this.inputValue=0
  1009. }
  1010. },
  1011. //更改文字提示的父节点
  1012. // getPopupContainer(){
  1013. // // console.log(this);
  1014. // return this.$el
  1015. // },
  1016. //点击修改广告名
  1017. // changecampaignName(text,record){
  1018. // console.log(text,record)
  1019. // },
  1020. onCellChange(key, dataIndex, value) {
  1021. // console.log(key, dataIndex, value)
  1022. const dataSource = [...this.data];
  1023. const target = dataSource.find(item => item.key === key);
  1024. if (target) {
  1025. target[dataIndex] = value;
  1026. console.log(target)
  1027. //单独修改预算
  1028. if(this.tabkey=='group'){
  1029. if(dataIndex=='name'){
  1030. postAction('/ctop/byteDanceCampaign/edit',{
  1031. accountId:this.accountID,
  1032. id:key,
  1033. campaignName:value,
  1034. }).then((res)=>{
  1035. console.log(res);
  1036. if(res.success){
  1037. this.data=dataSource
  1038. this.$message.success(res.message)
  1039. }else{
  1040. this.$message.error(res.message)
  1041. this.data=[];
  1042. this.refreshCampaignList({
  1043. accountId:this.accountID,
  1044. name:this.optionId,
  1045. status:this.statusValue,
  1046. startDate:this.dateString[0],
  1047. endDate:this.dateString[1],
  1048. pageNo:this.ipagination.current
  1049. })
  1050. }
  1051. })
  1052. }else if(dataIndex=='budget'){
  1053. postAction('/ctop/byteDanceCampaign/edit',{
  1054. accountId:this.accountID,
  1055. id:key,
  1056. budget:value,
  1057. }).then((res)=>{
  1058. console.log(res);
  1059. if(res.success){
  1060. // this.data = dataSource;
  1061. target[dataIndex] = value;
  1062. this.$message.success({
  1063. content:res.message,
  1064. duration:2
  1065. })
  1066. }else{
  1067. this.$message.error({
  1068. content:res.message,
  1069. duration:2
  1070. })
  1071. }
  1072. })
  1073. }
  1074. }else if(this.tabkey=='plan'){
  1075. postAction('/ctop/byteDanceAdvertisePlan/edit',target).then((res)=>{
  1076. console.log(res);
  1077. if(res.success){
  1078. this.data = dataSource;
  1079. this.$message.success('修改成功!')
  1080. }else{
  1081. this.$message.error(res.message);
  1082. this.getplanList({
  1083. accountId:this.accountID,
  1084. name:this.optionId,
  1085. status:this.statusValue,
  1086. startDate:this.dateString[0],
  1087. endDate:this.dateString[1],
  1088. pageNo:this.ipagination.current
  1089. })
  1090. }
  1091. })
  1092. }else if(this.tabkey=='idea'){
  1093. }
  1094. }
  1095. // console.log(this.data)
  1096. },
  1097. //复制广告计划
  1098. copyPlan(record){
  1099. this.copyRecord=record;
  1100. this.copyPlanVisiable=true;
  1101. },
  1102. copyPlanOk(e) {
  1103. this.copyPlanVisiable = false;
  1104. // console.log(this.copyNum,'---',this.copyGroup)
  1105. },
  1106. refreshCampaignList(params){
  1107. // this.loading=true
  1108. getAction(this.url.campaignList, params).then(res => {
  1109. // console.log(res);
  1110. if (res.success) {
  1111. this.ipagination.total = res.result.total
  1112. this.loading = false;
  1113. res.result.records.forEach((item)=>{
  1114. item.key=item.id
  1115. })
  1116. this.data = res.result.records;
  1117. this.selectedRows=[];
  1118. this.selectedRowKeys=[];
  1119. this.$message.success(res.message)
  1120. } else {
  1121. // console.log(res.message);
  1122. this.selectedRows=[];
  1123. this.selectedRowKeys=[];
  1124. }
  1125. })
  1126. },
  1127. getplanList(params){
  1128. getAction(this.url.planList,params).then((res)=>{
  1129. this.data=[]
  1130. // console.log(res)
  1131. if(res.success){
  1132. this.ipagination.total = res.result.total
  1133. this.loading = false
  1134. res.result.records.forEach((item)=>{
  1135. item.key=item.id
  1136. })
  1137. this.data = res.result.records;
  1138. // console.log(this.data)
  1139. this.selectedRowKeys=[];
  1140. }
  1141. })
  1142. },
  1143. refreshCreativeList(params){
  1144. getAction(this.url.creativeList, params).then(res => {
  1145. // console.log(res);
  1146. if (res.success) {
  1147. this.ipagination.total = res.result.total
  1148. this.loading = false;
  1149. res.result.records.forEach((item)=>{
  1150. item.key=item.id
  1151. })
  1152. this.data = res.result.records;
  1153. } else {
  1154. // console.log(res.message);
  1155. }
  1156. })
  1157. },
  1158. //请求项目和账户内容
  1159. accountHttp(){
  1160. this.treeData=[];
  1161. this.accountID=undefined;
  1162. getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
  1163. if(res.success){
  1164. // console.log(res);
  1165. if(res.result){
  1166. res.result.forEach((element,index) => {
  1167. if(element){
  1168. this.treeData.push({});
  1169. this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  1170. this.treeData[index].value='project'+element.project.projectId;
  1171. this.treeData[index].key=element.project.projectId;
  1172. this.treeData[index].mediaId=element.project.mediaId;
  1173. this.treeData[index].children=[];
  1174. if(element.account.length){
  1175. element.account.forEach((ele,i)=>{
  1176. this.treeData[index].children.push({});
  1177. this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
  1178. this.treeData[index].children[i].value=ele.accountId;
  1179. this.treeData[index].children[i].key=ele.accountId;
  1180. })
  1181. }
  1182. }
  1183. });
  1184. // console.log(this.treeData)
  1185. }
  1186. }
  1187. })
  1188. },
  1189. },
  1190. mounted() {
  1191. // let params = {}
  1192. // // this.dateString=[moment().format("YYYY-MM-DD"),moment().format("YYYY-MM-DD")]
  1193. // //初始
  1194. // this.refreshCampaignList(params);
  1195. this.accountHttp()
  1196. },
  1197. filters: {
  1198. toPercentage(val) {
  1199. if(val){
  1200. if(typeof val != 'string'){
  1201. return (val * 100).toFixed(2) + '%'
  1202. }else{
  1203. return val
  1204. }
  1205. }else if(typeof val =='string'){
  1206. return val
  1207. }
  1208. else{
  1209. return 0
  1210. }
  1211. },
  1212. //保留两位小数并且变成货币格式
  1213. decimalsHandle(val){
  1214. if(val && typeof val !='string'){
  1215. if(val>=0){
  1216. val=parseFloat(val).toFixed(2);
  1217. let numberStr = val.toString()
  1218. let str = numberStr.split('.')
  1219. let str0=str[0].split('').reverse();
  1220. for (let i = 0; i < str0.length; i++) {
  1221. if ((i + 1) % 4 === 0) {
  1222. str0.splice(i, 0, ',')
  1223. }
  1224. }
  1225. str0.reverse()
  1226. let handleResult = ''
  1227. for (let j = 0; j < str0.length; j++) {
  1228. handleResult += str0[j]
  1229. }
  1230. return handleResult+'.'+str[1]
  1231. }else{
  1232. val=parseFloat(val).toFixed(2);
  1233. let numberStr = val.toString()
  1234. let str = numberStr.split('.')
  1235. let str0=str[0].substr(1).split('').reverse();
  1236. for (let i = 0; i < str0.length; i++) {
  1237. if ((i + 1) % 4 === 0) {
  1238. str0.splice(i, 0, ',')
  1239. }
  1240. }
  1241. str0.reverse()
  1242. let handleResult = ''
  1243. for (let j = 0; j < str0.length; j++) {
  1244. handleResult += str0[j]
  1245. }
  1246. return '-'+handleResult+'.'+str[1]
  1247. }
  1248. }else if(typeof val =='string'){
  1249. return val
  1250. }
  1251. else{
  1252. return 0
  1253. }
  1254. },
  1255. //变成货币格式
  1256. formatCurrency(val){
  1257. if((val||val==0)&& typeof val !='string'){
  1258. let numberStr = val.toString()
  1259. let str = numberStr.split('').reverse()
  1260. for (let i = 0; i < str.length; i++) {
  1261. if ((i + 1) % 4 === 0) {
  1262. str.splice(i, 0, ',')
  1263. }
  1264. }
  1265. str.reverse()
  1266. let handleResult = ''
  1267. for (let j = 0; j < str.length; j++) {
  1268. handleResult += str[j]
  1269. }
  1270. return handleResult
  1271. }else if(typeof val =='string'){
  1272. return val
  1273. }
  1274. else{
  1275. return '-'
  1276. }
  1277. }
  1278. }
  1279. }
  1280. </script>
  1281. <style lang="scss">
  1282. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  1283. background-color: #fff;
  1284. color: #333;
  1285. }
  1286. #batchModal{
  1287. .rules,.totalPrice{
  1288. font-weight: 600;
  1289. }
  1290. .selectePlan{
  1291. font-size: 14px;
  1292. font-weight: 700;
  1293. color: #333;
  1294. padding: 20px 0;
  1295. }
  1296. .totalPrice{
  1297. margin-left: 20px;
  1298. }
  1299. .modifyTable{
  1300. margin-top: 20px;
  1301. width: 100%;
  1302. height: 400px;
  1303. overflow: auto;
  1304. font-weight: 600;
  1305. }
  1306. }
  1307. #copyModal{
  1308. .ant-modal-header{
  1309. text-align: center;
  1310. }
  1311. .copyTip{
  1312. font-size: 12px;
  1313. color: #999;
  1314. }
  1315. .copyName{
  1316. width: 118px;
  1317. display: inline-block;
  1318. text-align: right;
  1319. .copyKeyStart{
  1320. color: red;
  1321. }
  1322. }
  1323. // font-weight: 600;
  1324. }
  1325. </style>
  1326. <style lang="scss" scoped>
  1327. .toutiaoBatch{
  1328. background-color: #fff;
  1329. padding: 10px 20px;
  1330. position: relative;
  1331. width: 100%;
  1332. .OptinItem{
  1333. display: inline-block;
  1334. margin-right: 15px;
  1335. .ok{
  1336. margin-right: 15px;
  1337. }
  1338. }
  1339. .OptinItem:first-child{
  1340. margin-right: 10px;
  1341. }
  1342. .topOptions{
  1343. padding: 15px 0;
  1344. .topOpt{
  1345. width: 100%;
  1346. margin-bottom: 10px;
  1347. }
  1348. }
  1349. .optionBtn{
  1350. // display: inline-block;
  1351. float: right;
  1352. .searchBtn{
  1353. margin-right: 10px;
  1354. }
  1355. }
  1356. .tableArea{
  1357. .tableOption{
  1358. padding: 20px 0;
  1359. }
  1360. }
  1361. }
  1362. </style>