123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- <template>
- <div class="directionalPackage">
- <div class="tableBOX">
- <div class="tableOpt">
- <a-button class="search" type='primary' @click="openDirectionalPackage">新建定向包</a-button>
-
- <a-button class="addCol" type='primary' @click="addcolumns">自定义列</a-button>
- </div>
- <div class="tableArea">
- <a-table
- :columns="columns"
- :data-source="dataSource"
- :row-selection="rowSelection"
- bordered
- >
- <template slot="campaignName" slot-scope="text,record">
- <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />
- </template>
- <span slot="groupBudget" slot-scope="text,record">
- <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" />
- </span>
-
- <span slot="operation" slot-scope="text,record">
- <a href="javascript:;" style="margin-right:10px">推送</a>
- <a-popconfirm
- v-if="dataSource.length"
- title="确定要删除吗?"
- @confirm="() => onDelete(record.key)"
- >
- <a href="javascript:;">删除</a>
- </a-popconfirm>
- </span>
- <span slot="parentGroup" slot-scope="text">
- <a href="javascript:;" >{{text}}</a>
- </span>
- <span slot="parentPlan" slot-scope="text">
- <a href="javascript:;" >{{text}}</a>
- </span>
- <span slot="cost" slot-scope="cost">
- {{cost | formatCurrency }}
- </span>
- </a-table>
- </div>
- </div>
- </div>
- </template>
- <script>
- import moment from 'moment';
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
- const columns = [
- {
- title: '定向包名称',
- dataIndex: 'userName',
- align: 'center',
- key:'userName',
- scopedSlots: { customRender: 'userName' }
- },
- {
- title: '定向描述',
- dataIndex: 'department',
- align: 'center',
- key: 'department',
- scopedSlots: { customRender: 'department' }
- },
- {
- title: '定向包类型',
- dataIndex: 'roleName',
- align: 'center',
-
- key: 'roleName',
- scopedSlots: { customRender: 'roleName' }
- },
-
- {
- title: '投放范围',
- dataIndex: 'cost',
- align: 'center',
- scopedSlots: { customRender: 'cost' },
- sorter:()=>{}
- },
- {
- title: '关联计划',
- dataIndex: 'accountName',
- align: 'center',
- scopedSlots: { customRender: 'accountName' },
-
- },
- {
- title: '操作',
- dataIndex: 'operation',
- align: 'center',
- scopedSlots: { customRender: 'operation' },
-
- }
- ]
- export default {
- data() {
- return {
- //主页的表格
- dataSource:[
- {
- userName:'人群纠错包1',
- department:'运算',
- roleName:'2020-6-10',
- cost:16897546322,
- accountName:'伊对-01',
- status:true,
- key:0
- },
- {
- userName:'人群纠错包2',
- department:'运算',
- roleName:'2020-6-10',
- cost:16897322,
- accountName:'伊对-02',
- status:false,
- key:1
- },
- {
- userName:'人群纠错包3',
- department:'运算',
- roleName:'2020-6-10',
- cost:16322,
- accountName:'伊对-03',
- status:true,
- key:2
- },
- ],
- columns,
- selectedRowKeys:[],
- rowSelection:{
- onChange: (selectedRowKeys, selectedRows) => {
- console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
- console.log(selectedRowKeys);
- this.selectedRowKeys=selectedRowKeys;
- },
- onSelect: (record, selected, selectedRows) => {
- console.log(record, selected, selectedRows);
-
- },
- onSelectAll: (selected, selectedRows, changeRows) => {
- console.log(selected, selectedRows, changeRows);
-
- },
- },
- }
- },
- methods: {
- openDirectionalPackage(){
- this.$router.push({path:'/modules/BatchCreate/newDirectedPackage'})
- console.log()
- },
- //自定义列
- addcolumns(){
- }
- },
- filters: {
- toPercentage(val) {
- if(val){
- if(typeof val != 'string'){
- return (val * 100).toFixed(2) + '%'
- }else{
- return val
- }
- }else if(typeof val =='string'){
- return val
- }
- else{
- return 0
- }
- },
- //保留两位小数并且变成货币格式
- decimalsHandle(val){
-
- if(val && typeof val !='string'){
- val=parseFloat(val).toFixed(2);
- let numberStr = val.toString()
- let str = numberStr.split('.')
-
- let str0=str[0].split('').reverse();
- for (let i = 0; i < str0.length; i++) {
- if ((i + 1) % 4 === 0) {
- str0.splice(i, 0, ',')
- }
- }
- str0.reverse()
- let handleResult = ''
- for (let j = 0; j < str0.length; j++) {
- handleResult += str0[j]
- }
-
- return handleResult+'.'+str[1]
- }else if(typeof val =='string'){
- return val
- }
- else{
- return 0
- }
-
-
- },
- //变成货币格式
- formatCurrency(val){
- if((val||val==0)&& typeof val !='string'){
- let numberStr = val.toString()
- let str = numberStr.split('').reverse()
- for (let i = 0; i < str.length; i++) {
- if ((i + 1) % 4 === 0) {
- str.splice(i, 0, ',')
- }
- }
- str.reverse()
- let handleResult = ''
- for (let j = 0; j < str.length; j++) {
- handleResult += str[j]
- }
- return handleResult
- }else if(typeof val =='string'){
- return val
- }
- else{
- return '-'
- }
-
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .directionalPackage{
- .tableBOX{
- background: #fff;
- padding: 15px 15px;
- .tableOpt{
- margin-bottom: 10px;
- .search{
- margin-right: 15px;
- }
- .addCol{
- float:right;
- }
- }
-
- }
- }
- </style>
|