TouTiaoBatch.vue 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470
  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. } else {
  1120. // console.log(res.message);
  1121. this.selectedRows=[];
  1122. this.selectedRowKeys=[];
  1123. }
  1124. })
  1125. },
  1126. getplanList(params){
  1127. getAction(this.url.planList,params).then((res)=>{
  1128. this.data=[]
  1129. // console.log(res)
  1130. if(res.success){
  1131. this.ipagination.total = res.result.total
  1132. this.loading = false
  1133. res.result.records.forEach((item)=>{
  1134. item.key=item.id
  1135. })
  1136. this.data = res.result.records;
  1137. // console.log(this.data)
  1138. this.selectedRowKeys=[];
  1139. }
  1140. })
  1141. },
  1142. refreshCreativeList(params){
  1143. getAction(this.url.creativeList, params).then(res => {
  1144. // console.log(res);
  1145. if (res.success) {
  1146. this.ipagination.total = res.result.total
  1147. this.loading = false;
  1148. res.result.records.forEach((item)=>{
  1149. item.key=item.id
  1150. })
  1151. this.data = res.result.records;
  1152. } else {
  1153. // console.log(res.message);
  1154. }
  1155. })
  1156. },
  1157. //请求项目和账户内容
  1158. accountHttp(){
  1159. this.treeData=[];
  1160. this.accountID=undefined;
  1161. getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
  1162. if(res.success){
  1163. // console.log(res);
  1164. if(res.result){
  1165. res.result.forEach((element,index) => {
  1166. if(element){
  1167. this.treeData.push({});
  1168. this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  1169. this.treeData[index].value='project'+element.project.projectId;
  1170. this.treeData[index].key=element.project.projectId;
  1171. this.treeData[index].mediaId=element.project.mediaId;
  1172. this.treeData[index].children=[];
  1173. if(element.account.length){
  1174. element.account.forEach((ele,i)=>{
  1175. this.treeData[index].children.push({});
  1176. this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
  1177. this.treeData[index].children[i].value=ele.accountId;
  1178. this.treeData[index].children[i].key=ele.accountId;
  1179. })
  1180. }
  1181. }
  1182. });
  1183. // console.log(this.treeData)
  1184. }
  1185. }
  1186. })
  1187. },
  1188. },
  1189. mounted() {
  1190. // let params = {}
  1191. // // this.dateString=[moment().format("YYYY-MM-DD"),moment().format("YYYY-MM-DD")]
  1192. // //初始
  1193. // this.refreshCampaignList(params);
  1194. this.accountHttp()
  1195. },
  1196. filters: {
  1197. toPercentage(val) {
  1198. if(val){
  1199. if(typeof val != 'string'){
  1200. return (val * 100).toFixed(2) + '%'
  1201. }else{
  1202. return val
  1203. }
  1204. }else if(typeof val =='string'){
  1205. return val
  1206. }
  1207. else{
  1208. return 0
  1209. }
  1210. },
  1211. //保留两位小数并且变成货币格式
  1212. decimalsHandle(val){
  1213. if(val && typeof val !='string'){
  1214. if(val>=0){
  1215. val=parseFloat(val).toFixed(2);
  1216. let numberStr = val.toString()
  1217. let str = numberStr.split('.')
  1218. let str0=str[0].split('').reverse();
  1219. for (let i = 0; i < str0.length; i++) {
  1220. if ((i + 1) % 4 === 0) {
  1221. str0.splice(i, 0, ',')
  1222. }
  1223. }
  1224. str0.reverse()
  1225. let handleResult = ''
  1226. for (let j = 0; j < str0.length; j++) {
  1227. handleResult += str0[j]
  1228. }
  1229. return handleResult+'.'+str[1]
  1230. }else{
  1231. val=parseFloat(val).toFixed(2);
  1232. let numberStr = val.toString()
  1233. let str = numberStr.split('.')
  1234. let str0=str[0].substr(1).split('').reverse();
  1235. for (let i = 0; i < str0.length; i++) {
  1236. if ((i + 1) % 4 === 0) {
  1237. str0.splice(i, 0, ',')
  1238. }
  1239. }
  1240. str0.reverse()
  1241. let handleResult = ''
  1242. for (let j = 0; j < str0.length; j++) {
  1243. handleResult += str0[j]
  1244. }
  1245. return '-'+handleResult+'.'+str[1]
  1246. }
  1247. }else if(typeof val =='string'){
  1248. return val
  1249. }
  1250. else{
  1251. return 0
  1252. }
  1253. },
  1254. //变成货币格式
  1255. formatCurrency(val){
  1256. if((val||val==0)&& typeof val !='string'){
  1257. let numberStr = val.toString()
  1258. let str = numberStr.split('').reverse()
  1259. for (let i = 0; i < str.length; i++) {
  1260. if ((i + 1) % 4 === 0) {
  1261. str.splice(i, 0, ',')
  1262. }
  1263. }
  1264. str.reverse()
  1265. let handleResult = ''
  1266. for (let j = 0; j < str.length; j++) {
  1267. handleResult += str[j]
  1268. }
  1269. return handleResult
  1270. }else if(typeof val =='string'){
  1271. return val
  1272. }
  1273. else{
  1274. return '-'
  1275. }
  1276. }
  1277. }
  1278. }
  1279. </script>
  1280. <style lang="scss">
  1281. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  1282. background-color: #fff;
  1283. color: #333;
  1284. }
  1285. #batchModal{
  1286. .rules,.totalPrice{
  1287. font-weight: 600;
  1288. }
  1289. .selectePlan{
  1290. font-size: 14px;
  1291. font-weight: 700;
  1292. color: #333;
  1293. padding: 20px 0;
  1294. }
  1295. .totalPrice{
  1296. margin-left: 20px;
  1297. }
  1298. .modifyTable{
  1299. margin-top: 20px;
  1300. width: 100%;
  1301. height: 400px;
  1302. overflow: auto;
  1303. font-weight: 600;
  1304. }
  1305. }
  1306. #copyModal{
  1307. .ant-modal-header{
  1308. text-align: center;
  1309. }
  1310. .copyTip{
  1311. font-size: 12px;
  1312. color: #999;
  1313. }
  1314. .copyName{
  1315. width: 118px;
  1316. display: inline-block;
  1317. text-align: right;
  1318. .copyKeyStart{
  1319. color: red;
  1320. }
  1321. }
  1322. // font-weight: 600;
  1323. }
  1324. </style>
  1325. <style lang="scss" scoped>
  1326. .toutiaoBatch{
  1327. background-color: #fff;
  1328. padding: 10px 20px;
  1329. position: relative;
  1330. width: 100%;
  1331. .OptinItem{
  1332. display: inline-block;
  1333. margin-right: 15px;
  1334. .ok{
  1335. margin-right: 15px;
  1336. }
  1337. }
  1338. .OptinItem:first-child{
  1339. margin-right: 10px;
  1340. }
  1341. .topOptions{
  1342. padding: 15px 0;
  1343. .topOpt{
  1344. width: 100%;
  1345. margin-bottom: 10px;
  1346. }
  1347. }
  1348. .optionBtn{
  1349. // display: inline-block;
  1350. float: right;
  1351. .searchBtn{
  1352. margin-right: 10px;
  1353. }
  1354. }
  1355. .tableArea{
  1356. .tableOption{
  1357. padding: 20px 0;
  1358. }
  1359. }
  1360. }
  1361. </style>