<template>
|
<div class='subscription'>
|
<c-r-m-list-head
|
ref="listHead"
|
title="订阅"
|
main-title="PWS API" />
|
<el-form :inline="true" :model="headObj" class="selectInline">
|
<el-form-item>
|
<span>开始时间:</span>
|
<el-date-picker
|
v-model="headObj.startDateSince"
|
type="date"
|
placeholder="选择开始日期"
|
value-format="yyyy-MM-dd"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<span>截止时间:</span>
|
<el-date-picker
|
v-model="headObj.lastModifiedSince"
|
type="date"
|
placeholder="选择最后修改日期"
|
value-format="yyyy-MM-dd"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<!-- <el-form-item>
|
<div style='display: flex;'>
|
<span style="margin-right: 12px">状态:</span>
|
<el-checkbox-group v-model="headObj.subscriptionStatus" style="display: flex; align-items: center;">
|
<el-checkbox label="活动"></el-checkbox>
|
<el-checkbox label="非活动"></el-checkbox>
|
<el-checkbox label="已过期"></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</el-form-item> -->
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit('query')">新建导出任务</el-button>
|
<el-button @click="onSubmit('reset')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-card class="el-card">
|
<el-table
|
v-loading="loading"
|
id="crm-table"
|
:data="tableData"
|
:height="tableHeight"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%"
|
@row-click="rowClick">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.field"
|
:label="item.name"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="operation">
|
<template
|
title="hhhhhhhhh"
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">操作</div>
|
</template>
|
<template slot-scope="scope">
|
<span v-if="scope.row.TaskStatus === 0" style="font-size: 12px; color: #909398; font-weight: 500;">等待处理</span>
|
<span v-else-if="scope.row.TaskStatus === 1" style="font-size: 12px; color: #80BF50; font-weight: 500;">正在处理</span>
|
<span v-else-if="scope.row.TaskStatus === 2" style="font-size: 12px; color: #5B88F7; font-weight: 500;">导出完成</span>
|
<span v-else-if="scope.row.TaskStatus === 3" style="font-size: 12px; color: #DBA450; font-weight: 500;">导出失败</span>
|
<el-button style="margin-left: 12px" v-if="scope.row.TaskStatus === 2" size="mini" type="primary" @click='exportFile(scope.row)'>导出</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="p-contianer" v-if='total>0'>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="total"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
</el-card>
|
<c-r-m-export
|
:show="showCRMExport"
|
:crm-type="crmType"
|
:head-obj="exportHeadObj"
|
@close="showCRMExport=false"
|
@queryList='queryList'/>
|
</div>
|
</template>
|
|
<script>
|
import { ExportSubscriptionsTask, GetSubscriptionsTask } from '@/api/pwsApi/subscriptions'
|
import CRMListHead from '../clients/components/CRMListHead'
|
import CRMExport from '../clients/components/CRMExport'
|
export default {
|
name: 'Subscriptions',
|
components: {
|
CRMListHead,
|
CRMExport
|
},
|
data () {
|
return {
|
loading: false,
|
currentPage: 1,
|
// Lockr.get('crmPageSizes')
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100],
|
total: 0,
|
tableData: [],
|
tableHeight: document.documentElement.clientHeight - 360, // 表的高度
|
fieldList: [
|
{ name: 'CreateTime', field: 'CreateTime', formType: 'text' },
|
{ name: 'StartDateSince', field: 'StartDateSince', formType: 'text' },
|
{ name: 'LastModifiedSince', field: 'LastModifiedSince', formType: 'text' }
|
// { name: '状态', field: 'SubscriptionStatus', formType: 'text' }
|
],
|
// 导出
|
showCRMExport: false,
|
crmType: 'subscriptions',
|
headObj: {
|
startDateSince: '',
|
lastModifiedSince: '',
|
subscriptionStatus: []
|
},
|
exportHeadObj: {
|
taskId: ''
|
},
|
pickerOptions: {
|
disabledDate (time) {
|
return time.getTime(new Date()) > Date.now()
|
}
|
}
|
}
|
},
|
mounted () {
|
var self = this
|
/** 控制table的高度 */
|
window.onresize = () => {
|
self.updateTableHeight()
|
}
|
this.getList()
|
},
|
methods: {
|
getList () {
|
this.loading = true
|
let params = {
|
'PageIndex': this.currentPage,
|
'PageSize': this.pageSize
|
}
|
GetSubscriptionsTask(params)
|
.then(res => {
|
if (res.data.ErrorCode === 200) {
|
if (res.data.Result.Count > 0) {
|
this.tableData = res.data.Result.List
|
} else {
|
this.tableData = []
|
}
|
this.total = res.data.Result.Count
|
this.loading = false
|
} else {
|
this.$message.error(res.data.Message)
|
this.loading = false
|
}
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
// 更改每页展示数量
|
handleSizeChange (val) {
|
// Lockr.set('crmPageSizes', val)
|
this.pageSize = val
|
this.getList()
|
},
|
// 更改当前页数
|
handleCurrentChange (val) {
|
this.currentPage = val
|
this.getList()
|
},
|
updateTableHeight () {
|
var offsetHei = document.documentElement.clientHeight
|
// var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240
|
var removeHeight = 240
|
this.tableHeight = offsetHei - removeHeight
|
},
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
rowClick (row, column, event) {
|
},
|
queryList (data) {
|
console.log(data)
|
},
|
// 列表信息格式化
|
fieldFormatter (row, column) {
|
if (column.property === 'Status') {
|
switch (row[column.property]) {
|
case true:
|
row[column.property] = '是'
|
break
|
case false:
|
row[column.property] = '否'
|
break
|
}
|
}
|
return row[column.property] || '--'
|
},
|
onSubmit (val) {
|
if (val === 'query') {
|
if (this.headObj.startDateSince === '') {
|
this.$message.error('请选择导出任务的开始时间')
|
return
|
}
|
this.loading = true
|
// let status = ''
|
// this.headObj.subscriptionStatus.forEach((item) => {
|
// if (status === '') {
|
// status = item
|
// } else {
|
// status = status + ',' + item
|
// }
|
// })
|
// this.headObj.subscriptionStatus = status
|
let params
|
if (this.headObj.lastModifiedSince === '') {
|
params = {
|
startDateSince: this.headObj.startDateSince
|
}
|
} else {
|
params = {
|
startDateSince: this.headObj.startDateSince,
|
lastModifiedSince: this.headObj.lastModifiedSince
|
}
|
}
|
ExportSubscriptionsTask(params)
|
.then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.loading = false
|
this.getList()
|
} else {
|
this.$message.error(res.data.Message)
|
this.loading = false
|
}
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
} else if (val === 'reset') {
|
this.headObj = {}
|
}
|
},
|
exportFile (item) {
|
console.log(item)
|
this.exportHeadObj.taskId = item.Id
|
// 需要设置参数 this.headObj
|
this.showCRMExport = true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../clients/styles/table.scss';
|
.subscription {
|
display: flex;
|
flex-direction: column;
|
.flex-box {
|
flex: 1;
|
padding: 20px;
|
border-radius: 4px;
|
border: 1px solid #EBEEF5;
|
background-color: #FFF;
|
overflow: hidden;
|
color: #303133;
|
|
}
|
}
|
.selectInline{
|
background: #fff;
|
padding:20px 20px 0;
|
margin-bottom: 10px;
|
}
|
.datePicker{
|
margin-top:3px;
|
.el-date-editor .el-range__icon{
|
line-height: 28px;
|
}
|
}
|
/** 分页布局 */
|
.p-contianer {
|
position: relative;
|
background-color: white;
|
height: 44px;
|
.p-bar {
|
float: right;
|
margin: 5px 0 0 0;
|
font-size: 14px !important;
|
}
|
}
|
</style>
|
