directedPackage.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. <template>
  2. <div class="directionalPackage">
  3. <!-- <div class="topOptions">
  4. <span class="OptinItem topOpt">
  5. <a-tree-select
  6. show-search
  7. allow-clear
  8. dropdownMatchSelectWidth
  9. v-model="accountID"
  10. style="width: 60%"
  11. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  12. :tree-data="treeData"
  13. placeholder="请选择具体账户"
  14. :filterOption='filterOption'
  15. treeNodeFilterProp='title'
  16. @change='accountIDChange'
  17. >
  18. </a-tree-select>
  19. </span>
  20. <span class="timepcik">
  21. </span>
  22. <span class="optionBtn">
  23. <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
  24. </span>
  25. </div> -->
  26. <div class="tableBOX">
  27. <div class="newOpt">
  28. <a-button class="search" type='primary' @click="openDirectionalPackage">新建定向包</a-button>
  29. </div>
  30. <div class="tableArea">
  31. <a-table
  32. :columns="columns"
  33. :data-source="dataSource"
  34. :pagination="ipagination"
  35. bordered
  36. >
  37. <span slot="landingType" slot-scope="text">
  38. <span v-if="text=='EXTERNAL'">落地页</span>
  39. <span v-if="text=='APP_ANDROID'">应用下载-安卓</span>
  40. <span v-if="text=='APP_IOS'">应用下载-IOS</span>
  41. <span v-if="text=='AWEME'">抖音推广</span>
  42. </span>
  43. <span slot="deliveryRange" slot-scope="text">
  44. <span v-if="text=='DEFAULT'">默认</span>
  45. <span v-if="text=='UNION'">穿山甲</span>
  46. </span>
  47. <span slot="operation" slot-scope="text,record">
  48. <a href="javascript:;" style="margin-right:10px" @click="editDirectedPackage(record.id)">编辑</a>
  49. <a-popconfirm
  50. v-if="dataSource.length"
  51. title="确定要删除吗?"
  52. @confirm="() => onDelete(record)"
  53. >
  54. <a href="javascript:;">删除</a>
  55. </a-popconfirm>
  56. </span>
  57. <span slot="parentGroup" slot-scope="text">
  58. <a href="javascript:;" >{{text}}</a>
  59. </span>
  60. <span slot="parentPlan" slot-scope="text">
  61. <a href="javascript:;" >{{text}}</a>
  62. </span>
  63. <span slot="cost" slot-scope="cost">
  64. {{cost | formatCurrency }}
  65. </span>
  66. </a-table>
  67. </div>
  68. </div>
  69. </div>
  70. </template>
  71. <script>
  72. import moment from 'moment';
  73. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  74. import { JeecgListMixin } from '@/mixins/ipagination'
  75. import qs from 'qs'
  76. const columns = [
  77. {
  78. title: '定向包名称',
  79. dataIndex: 'name',
  80. align: 'center',
  81. key:'name',
  82. scopedSlots: { customRender: 'name' }
  83. },
  84. {
  85. title: '定向描述',
  86. dataIndex: 'description',
  87. align: 'center',
  88. key: 'description',
  89. scopedSlots: { customRender: 'description' }
  90. },
  91. {
  92. title: '定向包类型',
  93. dataIndex: 'landingType',
  94. align: 'center',
  95. key: 'landingType',
  96. scopedSlots: { customRender: 'landingType' }
  97. },
  98. {
  99. title: '投放范围',
  100. dataIndex: 'deliveryRange',
  101. align: 'center',
  102. scopedSlots: { customRender: 'deliveryRange' },
  103. },
  104. // {
  105. // title: '关联计划',
  106. // dataIndex: 'accountName',
  107. // align: 'center',
  108. // scopedSlots: { customRender: 'accountName' },
  109. // },
  110. {
  111. title: '操作',
  112. dataIndex: 'operation',
  113. align: 'center',
  114. scopedSlots: { customRender: 'operation' },
  115. }
  116. ]
  117. export default {
  118. mixins: [JeecgListMixin],
  119. data() {
  120. return {
  121. //主页的表格
  122. dataSource:[],
  123. columns,
  124. accountID:undefined,
  125. treeData:[],
  126. userId:''
  127. }
  128. },
  129. methods: {
  130. openDirectionalPackage(){
  131. this.$router.push({path:'/BatchCreate/newDirectedPackage'})
  132. },
  133. filterOption(input, option){
  134. console.log(input, option)
  135. return (
  136. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  137. );
  138. },
  139. accountIDChange(val){
  140. console.log(val);
  141. let currentData=this.treeData.filter((item)=>{
  142. return item.value==val
  143. })
  144. console.log(currentData);
  145. if(currentData.length>0){
  146. this.accountID=undefined;
  147. this.openID=val
  148. }
  149. },
  150. //请求项目和账户内容
  151. accountHttp(){
  152. this.treeData=[];
  153. this.accountID=undefined;
  154. getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
  155. if(res.success){
  156. // console.log(res);
  157. if(res.result){
  158. res.result.forEach((element,index) => {
  159. if(element){
  160. this.treeData.push({});
  161. this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  162. this.treeData[index].value='project'+element.project.projectId;
  163. this.treeData[index].key=element.project.projectId;
  164. this.treeData[index].mediaId=element.project.mediaId;
  165. this.treeData[index].children=[];
  166. if(element.account.length){
  167. element.account.forEach((ele,i)=>{
  168. this.treeData[index].children.push({});
  169. this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
  170. this.treeData[index].children[i].value=ele.accountId;
  171. this.treeData[index].children[i].key=ele.accountId;
  172. })
  173. }
  174. }
  175. });
  176. // console.log(this.treeData)
  177. }
  178. }
  179. })
  180. },
  181. sort(pagination, filters, sorter, { currentDataSource }){
  182. // console.log(pagination, filters, sorter)
  183. // if(sorter.order == 'ascend'){
  184. // this.HttpPost(sorter.columnKey+'+')
  185. // }else if(sorter.order == 'descend'){
  186. // this.HttpPost(sorter.columnKey+'-')
  187. // }
  188. this.ipagination.current=pagination.current;
  189. getAction('/ctop/audiencePackage/queryByUserId',{
  190. userId:this.userId,
  191. pageNo:this.ipagination.current
  192. }).then((res)=>{
  193. console.log(res);
  194. this.dataSource=res.result.records;
  195. this.ipagination.total=res.result.total
  196. })
  197. },
  198. search(){
  199. this.dataSource=[];
  200. if(this.accountID){
  201. }else{
  202. this.$message.error('请先选择账户!')
  203. }
  204. },
  205. onDelete(record){
  206. console.log(record);
  207. let params=qs.stringify({
  208. id:record.id
  209. })
  210. postAction('/ctop/audiencePackage/delete',params).then((res)=>{
  211. console.log(res);
  212. if(res.success){
  213. this.getTableList()
  214. }else{
  215. this.$message.error('删除失败,请稍后重试!')
  216. }
  217. })
  218. },
  219. editDirectedPackage(id){
  220. this.$router.push(`/BatchCreate/newDirectedPackage?id=${id}`)
  221. },
  222. getTableList(){
  223. getAction('/ctop/audiencePackage/queryByUserId',{
  224. userId:this.userId
  225. }).then((res)=>{
  226. console.log(res);
  227. this.dataSource=res.result.records;
  228. this.ipagination.total=res.result.total
  229. })
  230. },
  231. },
  232. mounted() {
  233. this.accountHttp();
  234. let userinfo=localStorage.getItem('pro__Login_Userinfo')
  235. if(userinfo){
  236. this.userId=JSON.parse(userinfo).value.id
  237. }
  238. this.getTableList()
  239. },
  240. filters: {
  241. toPercentage(val) {
  242. if(val){
  243. if(typeof val != 'string'){
  244. return (val * 100).toFixed(2) + '%'
  245. }else{
  246. return val
  247. }
  248. }else if(typeof val =='string'){
  249. return val
  250. }
  251. else{
  252. return 0
  253. }
  254. },
  255. //保留两位小数并且变成货币格式
  256. decimalsHandle(val){
  257. if(val && typeof val !='string'){
  258. if(val>=0){
  259. val=parseFloat(val).toFixed(2);
  260. let numberStr = val.toString()
  261. let str = numberStr.split('.')
  262. let str0=str[0].split('').reverse();
  263. for (let i = 0; i < str0.length; i++) {
  264. if ((i + 1) % 4 === 0) {
  265. str0.splice(i, 0, ',')
  266. }
  267. }
  268. str0.reverse()
  269. let handleResult = ''
  270. for (let j = 0; j < str0.length; j++) {
  271. handleResult += str0[j]
  272. }
  273. return handleResult+'.'+str[1]
  274. }else{
  275. val=parseFloat(val).toFixed(2);
  276. let numberStr = val.toString()
  277. let str = numberStr.split('.')
  278. let str0=str[0].substr(1).split('').reverse();
  279. for (let i = 0; i < str0.length; i++) {
  280. if ((i + 1) % 4 === 0) {
  281. str0.splice(i, 0, ',')
  282. }
  283. }
  284. str0.reverse()
  285. let handleResult = ''
  286. for (let j = 0; j < str0.length; j++) {
  287. handleResult += str0[j]
  288. }
  289. return '-'+handleResult+'.'+str[1]
  290. }
  291. }else if(typeof val =='string'){
  292. return val
  293. }
  294. else{
  295. return 0
  296. }
  297. },
  298. //变成货币格式
  299. formatCurrency(val){
  300. if((val||val==0)&& typeof val !='string'){
  301. let numberStr = val.toString()
  302. let str = numberStr.split('').reverse()
  303. for (let i = 0; i < str.length; i++) {
  304. if ((i + 1) % 4 === 0) {
  305. str.splice(i, 0, ',')
  306. }
  307. }
  308. str.reverse()
  309. let handleResult = ''
  310. for (let j = 0; j < str.length; j++) {
  311. handleResult += str[j]
  312. }
  313. return handleResult
  314. }else if(typeof val =='string'){
  315. return val
  316. }
  317. else{
  318. return '-'
  319. }
  320. }
  321. }
  322. }
  323. </script>
  324. <style lang="scss" scoped>
  325. .directionalPackage{
  326. .topOptions{
  327. padding: 15px 15px;
  328. background-color: #fff;
  329. margin-bottom: 15px;
  330. .topOpt{
  331. width: 100%;
  332. margin-bottom: 10px;
  333. }
  334. .search{
  335. margin-right: 15px;
  336. }
  337. .addCol{
  338. float:right;
  339. }
  340. .optionBtn{
  341. // display: inline-block;
  342. float: right;
  343. .searchBtn{
  344. margin-right: 10px;
  345. }
  346. }
  347. }
  348. .tableBOX{
  349. background: #fff;
  350. padding: 15px 15px;
  351. .newOpt{
  352. margin-bottom: 10px;
  353. }
  354. }
  355. }
  356. </style>