selectPlanList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. <template>
  2. <div class="selectPlan">
  3. <!-- 跳转至选择已有 -->
  4. <div class="moduler">
  5. <div class="moduler-title">选择广告组</div>
  6. <div>
  7. 广告组名称:
  8. <a-tree-select
  9. show-search
  10. allow-clear
  11. dropdownMatchSelectWidth
  12. v-model="groupId"
  13. style="width: 60%"
  14. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  15. :tree-data="treeData"
  16. placeholder="请选择具体广告组"
  17. :filterOption='filterOption'
  18. treeNodeFilterProp='title'
  19. @change='groupChange'
  20. >
  21. </a-tree-select>
  22. </div>
  23. </div>
  24. <div class="tabBody">
  25. <a-tabs v-model="tabKey">
  26. <a-tab-pane key="exist" tab="选择已有广告计划" forceRender>
  27. <div class="selectedExist">
  28. <a-input v-model="selectedPlanValue" class="input" placeholder="请输入广告计划id或名称" @change="selectedPlan">
  29. <a-icon slot="addonAfter" type="search" />
  30. </a-input>
  31. <div class="campaign-have-list">
  32. <div class="campaign-have-header">列表</div>
  33. <div class="hasAccountID" v-if="groupId">
  34. <a-spin :spinning="spinning">
  35. <ul v-if="planHaveList.length>0">
  36. <li class="ad-d-flex ad-d-flex-between" v-for="(item,index) in planHaveList" :key="index" @click="goCreate(item)">
  37. <span class="info">{{item.name}}</span>
  38. <!-- <span class="landing-type"></span> -->
  39. </li>
  40. </ul>
  41. <div v-else class="noAccountID">
  42. 暂无数据
  43. </div>
  44. </a-spin>
  45. </div>
  46. <div class="noAccountID" v-else>
  47. 选择广告组后,才能选择已有广告计划
  48. </div>
  49. </div>
  50. <div class="fenye" v-if="totalPage">
  51. <a-pagination :current='currentPage' size='small' :total='totalPage' :pageSize='10' @change="pageNoChange" />
  52. </div>
  53. </div>
  54. <a-tab-pane key="create" tab="新建广告组">
  55. </a-tab-pane>
  56. </a-tab-pane>
  57. <a-tab-pane key="create" tab="新建广告计划" forceRender>
  58. <div class="selectedExist">
  59. <div class="campaign-have-list">
  60. <div class="campaign-have-header">操作</div>
  61. <div class="hasAccountID" v-if="groupId">
  62. <a-button type='danger' @click="newCreate" style="margin-top:150px">去新建计划</a-button>
  63. </div>
  64. <div class="noAccountID" v-else>
  65. 选择广告组后,才能新建已有广告计划
  66. </div>
  67. </div>
  68. </div>
  69. </a-tab-pane>
  70. </a-tabs>
  71. </div>
  72. </div>
  73. </template>
  74. <script>
  75. import moment from 'moment'
  76. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  77. import qs from 'qs'
  78. export default {
  79. data() {
  80. return {
  81. selectedPlanValue:undefined,
  82. spinning:false,
  83. currentPage:1,
  84. totalPage:0,
  85. tabKey:'exist',
  86. planHaveList:[],
  87. groupId:undefined,
  88. planId:undefined,
  89. treeData:[],
  90. accountInfo:{},
  91. }
  92. },
  93. methods: {
  94. //分页页码改变
  95. pageNoChange(val){
  96. console.log(val);
  97. this.currentPage=val;
  98. this.selectedPlan()
  99. },
  100. selectedPlan(e){
  101. // console.log(e.target.value,this.selectedPlanValue);
  102. if(this.groupId){
  103. this.getExsitPlanList();
  104. }else{
  105. this.$message.warning('请选择具体广告组后重试!')
  106. this.selectedPlanValue=undefined;
  107. }
  108. },
  109. getExsitPlanList(){
  110. this.spinning=true;
  111. getAction('/ctop/byteDanceAdvertisePlan/list',{
  112. accountId:this.accountInfo.value,
  113. pageNo:this.currentPage,
  114. name:this.selectedPlanValue,
  115. campaignId:this.groupId
  116. }).then(res=>{
  117. console.log(res)
  118. if(res.success){
  119. this.spinning=false;
  120. this.totalPage=res.result.total;
  121. this.planHaveList=res.result.records;
  122. }
  123. })
  124. },
  125. filterOption(input, option){
  126. console.log(input, option)
  127. return (
  128. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  129. );
  130. },
  131. groupChange(val){
  132. console.log(val,this.groupId);
  133. // let currentData=this.treeData.filter((item)=>{
  134. // return item.value==val
  135. // })
  136. // // console.log(currentData);
  137. // if(currentData.length>0){
  138. // this.groupId=undefined;
  139. // this.openID=val
  140. // }
  141. this.getExsitPlanList();
  142. console.log(this.treeData)
  143. this.treeData.forEach((item)=>{
  144. if(item.value==val){
  145. let groupInfo=JSON.stringify(item)
  146. localStorage.setItem('groupInfo',groupInfo)
  147. }
  148. })
  149. },
  150. goCreate(item){
  151. // console.log(item)
  152. let planInfo=JSON.stringify([item])
  153. localStorage.setItem('planInfo',planInfo);
  154. this.$router.replace(`/modules/BatchCreate/newCreate`);
  155. },
  156. newCreate(){
  157. this.$router.replace(`/modules/BatchCreate/newPlan`);
  158. },
  159. groupHttp(){
  160. this.treeData=[];
  161. this.groupId=undefined;
  162. getAction('/ctop/byteDanceCampaign/list', {
  163. accountId:this.accountInfo.value,
  164. pageSize:1000,
  165. }).then(res => {
  166. console.log(res);
  167. if(res.success){
  168. if(res.result){
  169. // this.treeData=res.result.records
  170. let treeData=[]
  171. res.result.records.forEach((element,index) => {
  172. if(element){
  173. element.title=element.name+'_('+element.landingType_dictText+')';
  174. element.value=element.id;
  175. element.key=element.id;
  176. }
  177. });
  178. // console.log(this.treeData)
  179. this.treeData=res.result.records
  180. }
  181. }
  182. })
  183. },
  184. },
  185. mounted() {
  186. let accountInfo = localStorage.getItem('accountInfo');
  187. if(accountInfo){
  188. this.accountInfo=accountInfo
  189. }
  190. this.groupHttp()
  191. },
  192. beforeDestroy() {
  193. this.$bus.$emit('remove', '/modules/BatchCreate/selectPlanList')
  194. },
  195. }
  196. </script>
  197. <style lang="less">
  198. .selectPlan{
  199. .ant-btn-danger {
  200. background-color: #ff4d4f !important;
  201. }
  202. }
  203. </style>
  204. <style lang="less" scoped>
  205. .selectPlan{
  206. ul,li{
  207. margin: 0;
  208. padding:0
  209. }
  210. .moduler {
  211. background: #fff;
  212. margin-bottom: 16px;
  213. position: relative;
  214. padding: 32px 24px 48px 32px;
  215. border-radius: 4px;
  216. box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  217. .moduler-title {
  218. display: flex;
  219. align-items: center;
  220. font-size: 22px;
  221. margin-bottom: 20px;
  222. }
  223. .row-item {
  224. display: flex;
  225. justify-content: flex-start;
  226. align-items: center;
  227. margin-bottom: 32px;
  228. }
  229. .row-item:last-of-type {
  230. margin-bottom: 0;
  231. }
  232. .row-item .hint-item {
  233. width: 24px;
  234. min-width: 24px;
  235. align-self: flex-start;
  236. line-height: 20px;
  237. height: 20px;
  238. margin-top: 5px;
  239. }
  240. .row-item .label-item {
  241. position: relative;
  242. align-items: flex-start;
  243. align-self: flex-start;
  244. line-height: 20px;
  245. height: 20px;
  246. margin-top: 7px;
  247. width: 80px;
  248. min-width: 80px;
  249. .text-item {
  250. font-size: 14px;
  251. width: 60px;
  252. }
  253. }
  254. .row-item .required-item {
  255. width: 4px;
  256. height: 4px;
  257. border-radius: 2px;
  258. background: #f45858;
  259. position: absolute;
  260. right: 10px;
  261. top: 50%;
  262. transform: translateY(-50%);
  263. }
  264. .row-item .input-item {
  265. min-width: 480px;
  266. position: relative;
  267. // height: 35px;
  268. .tip {
  269. font-size: 12px;
  270. color: tomato;
  271. }
  272. }
  273. }
  274. .tabBody{
  275. background: #fff;
  276. margin-bottom: 20px;
  277. padding: 20px 30px;
  278. .tip{
  279. font-size: 12px;
  280. color: tomato;
  281. display: block;
  282. margin-top: 5px;
  283. height: 20px;
  284. line-height: 20px;
  285. }
  286. .selectedExist{
  287. width: 600px;
  288. .input{
  289. margin-bottom:16px ;
  290. }
  291. .campaign-have-list{
  292. font-family: PingFangSC-Regular;
  293. font-size: 14px;
  294. color: #333;
  295. border: 1px solid #DADFE3;
  296. border-radius: 4px;
  297. margin-bottom: 16px;
  298. height: 388px;
  299. .campaign-have-header {
  300. height: 38px;
  301. width: 100%;
  302. padding-left: 13px;
  303. line-height: 38px;
  304. background: #f8f9fa;
  305. border-radius: 4px 4px 0px 0px;
  306. border-bottom: 1px solid #DADFE3;
  307. }
  308. .campaign-have-list ul {
  309. width: 100%;
  310. height: 350px;
  311. padding-top: 6px;
  312. }
  313. li{
  314. padding: 6px 10px;
  315. cursor: pointer;
  316. }
  317. li:hover{
  318. background: #EDF1F5;
  319. }
  320. .ad-d-flex-between {
  321. justify-content: space-between !important;
  322. }
  323. .ad-d-flex, .ad-btn {
  324. display: flex;
  325. align-items: center;
  326. }
  327. .byted-loading-v {
  328. position: absolute;
  329. top: 0;
  330. right: 0;
  331. bottom: 0;
  332. left: 0;
  333. z-index: 996;
  334. background-color: hsla(0,0%,96%,.9);
  335. }
  336. .info{
  337. width: 60%;
  338. overflow: hidden;
  339. text-overflow: ellipsis;
  340. white-space: nowrap;
  341. text-align: left;
  342. }
  343. .landing-type {
  344. color: #999;
  345. font-size: 12px;
  346. white-space: nowrap;
  347. }
  348. }
  349. .noAccountID{
  350. font-size: 14px;
  351. text-align: center;
  352. color: #999;
  353. line-height: 388px;
  354. }
  355. .fenye{
  356. height: 60px;
  357. padding-top: 12px;
  358. text-align: right;
  359. }
  360. .hasAccountID{
  361. text-align: center;
  362. }
  363. }
  364. }
  365. .creatBody{
  366. background: #fff;
  367. margin-bottom: 20px;
  368. padding: 20px 30px;
  369. text-align: right;
  370. .goback{
  371. margin-right: 20px;
  372. }
  373. }
  374. }
  375. </style>