directionalPackage.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <div class="directionalPackage">
  3. <div class="tableBOX">
  4. <div class="tableOpt">
  5. <a-button class="search" type='primary' @click="openDirectionalPackage">新建定向包</a-button>
  6. <a-button class="addCol" type='primary' @click="addcolumns">自定义列</a-button>
  7. </div>
  8. <div class="tableArea">
  9. <a-table
  10. :columns="columns"
  11. :data-source="dataSource"
  12. :row-selection="rowSelection"
  13. bordered
  14. >
  15. <template slot="campaignName" slot-scope="text,record">
  16. <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />
  17. </template>
  18. <span slot="groupBudget" slot-scope="text,record">
  19. <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" />
  20. </span>
  21. <span slot="operation" slot-scope="text,record">
  22. <a href="javascript:;" style="margin-right:10px">推送</a>
  23. <a-popconfirm
  24. v-if="dataSource.length"
  25. title="确定要删除吗?"
  26. @confirm="() => onDelete(record.key)"
  27. >
  28. <a href="javascript:;">删除</a>
  29. </a-popconfirm>
  30. </span>
  31. <span slot="parentGroup" slot-scope="text">
  32. <a href="javascript:;" >{{text}}</a>
  33. </span>
  34. <span slot="parentPlan" slot-scope="text">
  35. <a href="javascript:;" >{{text}}</a>
  36. </span>
  37. <span slot="cost" slot-scope="cost">
  38. {{cost | formatCurrency }}
  39. </span>
  40. </a-table>
  41. </div>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. import moment from 'moment';
  47. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  48. const columns = [
  49. {
  50. title: '定向包名称',
  51. dataIndex: 'userName',
  52. align: 'center',
  53. key:'userName',
  54. scopedSlots: { customRender: 'userName' }
  55. },
  56. {
  57. title: '定向描述',
  58. dataIndex: 'department',
  59. align: 'center',
  60. key: 'department',
  61. scopedSlots: { customRender: 'department' }
  62. },
  63. {
  64. title: '定向包类型',
  65. dataIndex: 'roleName',
  66. align: 'center',
  67. key: 'roleName',
  68. scopedSlots: { customRender: 'roleName' }
  69. },
  70. {
  71. title: '投放范围',
  72. dataIndex: 'cost',
  73. align: 'center',
  74. scopedSlots: { customRender: 'cost' },
  75. sorter:()=>{}
  76. },
  77. {
  78. title: '关联计划',
  79. dataIndex: 'accountName',
  80. align: 'center',
  81. scopedSlots: { customRender: 'accountName' },
  82. },
  83. {
  84. title: '操作',
  85. dataIndex: 'operation',
  86. align: 'center',
  87. scopedSlots: { customRender: 'operation' },
  88. }
  89. ]
  90. export default {
  91. data() {
  92. return {
  93. //主页的表格
  94. dataSource:[
  95. {
  96. userName:'人群纠错包1',
  97. department:'运算',
  98. roleName:'2020-6-10',
  99. cost:16897546322,
  100. accountName:'伊对-01',
  101. status:true,
  102. key:0
  103. },
  104. {
  105. userName:'人群纠错包2',
  106. department:'运算',
  107. roleName:'2020-6-10',
  108. cost:16897322,
  109. accountName:'伊对-02',
  110. status:false,
  111. key:1
  112. },
  113. {
  114. userName:'人群纠错包3',
  115. department:'运算',
  116. roleName:'2020-6-10',
  117. cost:16322,
  118. accountName:'伊对-03',
  119. status:true,
  120. key:2
  121. },
  122. ],
  123. columns,
  124. selectedRowKeys:[],
  125. rowSelection:{
  126. onChange: (selectedRowKeys, selectedRows) => {
  127. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  128. console.log(selectedRowKeys);
  129. this.selectedRowKeys=selectedRowKeys;
  130. },
  131. onSelect: (record, selected, selectedRows) => {
  132. console.log(record, selected, selectedRows);
  133. },
  134. onSelectAll: (selected, selectedRows, changeRows) => {
  135. console.log(selected, selectedRows, changeRows);
  136. },
  137. },
  138. }
  139. },
  140. methods: {
  141. openDirectionalPackage(){
  142. this.$router.push({path:'/modules/BatchCreate/newDirectedPackage'})
  143. console.log()
  144. },
  145. //自定义列
  146. addcolumns(){
  147. }
  148. },
  149. filters: {
  150. toPercentage(val) {
  151. if(val){
  152. if(typeof val != 'string'){
  153. return (val * 100).toFixed(2) + '%'
  154. }else{
  155. return val
  156. }
  157. }else if(typeof val =='string'){
  158. return val
  159. }
  160. else{
  161. return 0
  162. }
  163. },
  164. //保留两位小数并且变成货币格式
  165. decimalsHandle(val){
  166. if(val && typeof val !='string'){
  167. val=parseFloat(val).toFixed(2);
  168. let numberStr = val.toString()
  169. let str = numberStr.split('.')
  170. let str0=str[0].split('').reverse();
  171. for (let i = 0; i < str0.length; i++) {
  172. if ((i + 1) % 4 === 0) {
  173. str0.splice(i, 0, ',')
  174. }
  175. }
  176. str0.reverse()
  177. let handleResult = ''
  178. for (let j = 0; j < str0.length; j++) {
  179. handleResult += str0[j]
  180. }
  181. return handleResult+'.'+str[1]
  182. }else if(typeof val =='string'){
  183. return val
  184. }
  185. else{
  186. return 0
  187. }
  188. },
  189. //变成货币格式
  190. formatCurrency(val){
  191. if((val||val==0)&& typeof val !='string'){
  192. let numberStr = val.toString()
  193. let str = numberStr.split('').reverse()
  194. for (let i = 0; i < str.length; i++) {
  195. if ((i + 1) % 4 === 0) {
  196. str.splice(i, 0, ',')
  197. }
  198. }
  199. str.reverse()
  200. let handleResult = ''
  201. for (let j = 0; j < str.length; j++) {
  202. handleResult += str[j]
  203. }
  204. return handleResult
  205. }else if(typeof val =='string'){
  206. return val
  207. }
  208. else{
  209. return '-'
  210. }
  211. }
  212. }
  213. }
  214. </script>
  215. <style lang="scss" scoped>
  216. .directionalPackage{
  217. .tableBOX{
  218. background: #fff;
  219. padding: 15px 15px;
  220. .tableOpt{
  221. margin-bottom: 10px;
  222. .search{
  223. margin-right: 15px;
  224. }
  225. .addCol{
  226. float:right;
  227. }
  228. }
  229. }
  230. }
  231. </style>