|
@@ -25,40 +25,48 @@
|
|
|
</a-tree-select>
|
|
|
</span>
|
|
|
<span class="optItem">
|
|
|
- <a-date-picker @change="dateChange" />
|
|
|
+ <a-date-picker v-model="dateValue" @change="dateChange" />
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
<div class="optItem">
|
|
|
- <a-select :size="size" placeholder='覆盖数量' style="width: 200px" @change="handleChange">
|
|
|
+ <a-select size="default" placeholder='覆盖数量' v-model="coverageQuantity" style="width: 200px" @change="coverChange">
|
|
|
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
|
|
|
{{ (i + 9).toString(36) + i }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
<div class="optItem">
|
|
|
- <a-select :size="size" placeholder='类别' style="width: 200px" @change="handleChange">
|
|
|
- <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
|
|
|
- {{ (i + 9).toString(36) + i }}
|
|
|
+ <a-select size="default" placeholder='类别' v-model="category" style="width: 200px" @change="categoryChange">
|
|
|
+ <a-select-option value='' >
|
|
|
+ 全部
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option v-for="(item,index) in categoryArr" :key="index" :value='item.value' >
|
|
|
+ {{ item.title }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
<div class="optItem">
|
|
|
- <a-input-search placeholder="input search text" style="width: 200px" @search="onSearch" />
|
|
|
+ <a-input-search placeholder="按名称搜索" v-model="nameSearch" style="width: 200px" @search="onSearch" />
|
|
|
</div>
|
|
|
<div class="optionBtn">
|
|
|
<a-button class="search" type='primary' @click="search">查询</a-button>
|
|
|
+ <a-button class="search" type='link' @click="clearAll">清空全部</a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tableBOX">
|
|
|
<div class="tableOpt">
|
|
|
- <a-button class="search" type='primary' @click="search">查询</a-button>
|
|
|
- <a-button class="search" type='primary' @click="search">同步</a-button>
|
|
|
- <a-select :size="size" placeholder='批量操作' style="width: 200px" @change="handleChange">
|
|
|
- <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
|
|
|
- {{ (i + 9).toString(36) + i }}
|
|
|
+ <a-button class="search" type='primary' @click="updatePackage">上传人群包</a-button>
|
|
|
+ <a-button class="search" type='primary' @click="synchro">同步</a-button>
|
|
|
+ <a-select size="default" placeholder='批量操作' v-model="batchValue" style="width: 200px" @change="batchChange">
|
|
|
+
|
|
|
+ <a-select-option value='push'>
|
|
|
+ 推送
|
|
|
+ </a-select-option>
|
|
|
+ <a-select-option value='delete'>
|
|
|
+ 删除
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
<a-button class="addCol" type='primary' @click="search">自定义列</a-button>
|
|
@@ -77,15 +85,22 @@
|
|
|
<editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" />
|
|
|
</span>
|
|
|
<span slot="status" slot-scope="text,record">
|
|
|
- <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ <span v-if="record.status">
|
|
|
+ <span style='color:#33CC33'>可用</span>
|
|
|
+ <span style="display:block">推送完成</span>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <span style='color:#CC3333'>不可用</span>
|
|
|
+ <span style="display:block">推送失败</span>
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- <span slot="options" slot-scope="record">
|
|
|
+ <span slot="operation" slot-scope="text,record">
|
|
|
<a href="javascript:;" style="margin-right:10px">推送</a>
|
|
|
<a-popconfirm
|
|
|
v-if="dataSource.length"
|
|
|
- title="Sure to delete?"
|
|
|
+ title="确定要删除吗?"
|
|
|
@confirm="() => onDelete(record.key)"
|
|
|
- >
|
|
|
+ >
|
|
|
<a href="javascript:;">删除</a>
|
|
|
</a-popconfirm>
|
|
|
|
|
@@ -97,6 +112,9 @@
|
|
|
<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>
|
|
@@ -110,22 +128,99 @@ import editableCell from './editableCell'
|
|
|
import { TreeSelect } from 'ant-design-vue';
|
|
|
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
|
|
|
|
-let rowSelection={
|
|
|
- onChange: (selectedRowKeys, selectedRows) => {
|
|
|
- console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
|
- console.log(selectedRowKeys);
|
|
|
- this.selectedRowKeys=selectedRowKeys;
|
|
|
+
|
|
|
+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: 'status',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'status' },
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'operation',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'operation' },
|
|
|
+
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const categoryArr=[
|
|
|
+ {
|
|
|
+ title:'规则',
|
|
|
+ value:'guize',
|
|
|
+ key:'guize'
|
|
|
},
|
|
|
- onSelect: (record, selected, selectedRows) => {
|
|
|
- console.log(record, selected, selectedRows);
|
|
|
-
|
|
|
+ {
|
|
|
+ title:'运算',
|
|
|
+ value:'yunsuan',
|
|
|
+ key:'yuansuan'
|
|
|
},
|
|
|
- onSelectAll: (selected, selectedRows, changeRows) => {
|
|
|
- console.log(selected, selectedRows, changeRows);
|
|
|
-
|
|
|
+ {
|
|
|
+ title:'上传',
|
|
|
+ value:'update',
|
|
|
+ key:'update'
|
|
|
},
|
|
|
-}
|
|
|
-
|
|
|
+ {
|
|
|
+ title:'扩展',
|
|
|
+ value:'extend',
|
|
|
+ key:'extend'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'API',
|
|
|
+ value:'API',
|
|
|
+ key:'API'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'付费',
|
|
|
+ value:'pay',
|
|
|
+ key:'pay'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'主题人群',
|
|
|
+ value:'crowd',
|
|
|
+ key:'crowd'
|
|
|
+ },
|
|
|
+]
|
|
|
export default {
|
|
|
components: {
|
|
|
editableCell,
|
|
@@ -133,18 +228,69 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
//treeselect的参数
|
|
|
- treeValue: [],
|
|
|
+
|
|
|
treeData: [],
|
|
|
SHOW_PARENT,
|
|
|
accountId:[],
|
|
|
- dateValue:null,//日期选择器
|
|
|
+
|
|
|
//主页的表格
|
|
|
- dataSource:[],
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ categoryArr,
|
|
|
columns,
|
|
|
selectedRowKeys:[],
|
|
|
- rowSelection,
|
|
|
+ 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);
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
editID:0,
|
|
|
+ //查询条件
|
|
|
+ treeValue: [],
|
|
|
+ coverageQuantity:undefined,
|
|
|
+ category:undefined,
|
|
|
+ dateValue:null,//日期选择器
|
|
|
+ nameSearch:undefined,
|
|
|
+ batchValue:undefined, //批量操作的选中值
|
|
|
|
|
|
+ updatePackageVisiable:false,//上传人群包的弹出框
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -237,7 +383,12 @@ export default {
|
|
|
// console.log(arguments);
|
|
|
// this.treeValue=arguments[0].value
|
|
|
},
|
|
|
+ coverChange(){
|
|
|
|
|
|
+ },
|
|
|
+ categoryChange(){
|
|
|
+
|
|
|
+ },
|
|
|
//日期改变
|
|
|
dateChange(date, dateString) {
|
|
|
console.log(date, dateString);
|
|
@@ -247,16 +398,44 @@ export default {
|
|
|
onSearch(value) {
|
|
|
console.log(value);
|
|
|
},
|
|
|
-
|
|
|
+ //批量操作
|
|
|
+ batchChange(val){
|
|
|
+ console.log(val)
|
|
|
+ this.batchValue=val
|
|
|
+ },
|
|
|
//查询按钮
|
|
|
search(){
|
|
|
|
|
|
},
|
|
|
-
|
|
|
+ //清空全部
|
|
|
+ clearAll(){
|
|
|
+ this.treeValue=[];
|
|
|
+ this.coverageQuantity=undefined;
|
|
|
+ this.category=undefined;
|
|
|
+ this.dateValue=null;//日期选择器
|
|
|
+ this.nameSearch=undefined;
|
|
|
+ this.batchValue=undefined; //批量操作的选中值
|
|
|
+ },
|
|
|
//表格里的删除按钮
|
|
|
onDelete(key) {
|
|
|
+ console.log(key)
|
|
|
const dataSource = [...this.dataSource];
|
|
|
this.dataSource = dataSource.filter(item => item.key !== key);
|
|
|
+
|
|
|
+ },
|
|
|
+ //上传人群包
|
|
|
+ updatePackage(){
|
|
|
+ this.updatePackageVisiable=true;
|
|
|
+ },
|
|
|
+ //同步人群包
|
|
|
+ synchro(){
|
|
|
+
|
|
|
+ },
|
|
|
+ filterOption(input, option){
|
|
|
+ console.log(input, option)
|
|
|
+ return (
|
|
|
+ option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
filters: {
|
|
@@ -334,16 +513,21 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.crowedPackage{
|
|
|
+
|
|
|
.optHeader{
|
|
|
margin: 15px 0;
|
|
|
+ padding: 15px 15px;
|
|
|
background: #fff;
|
|
|
- .optinItem{
|
|
|
+ .optItem{
|
|
|
display: inline-block;
|
|
|
margin-right: 15px;
|
|
|
.ok{
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
}
|
|
|
+ .top{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
.optionBtn{
|
|
|
// display: inline-block;
|
|
|
float: right;
|
|
@@ -357,6 +541,8 @@ export default {
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
.tableBOX{
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px 15px;
|
|
|
.tableOpt{
|
|
|
margin-bottom: 10px;
|
|
|
.search{
|