<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>
|
<div style='display: flex;'>
|
<span style="margin-right: 12px">筛选方式:</span>
|
<el-select v-model="headObj.AutoRenewingContractText" placeholder="请选择" @change="renewalMethodChange">
|
<el-option key="1" label="自动续约合约" value="Auto-RenewingContract"></el-option>
|
<el-option key="2" label="合约到期时间" value="NoAuto-RenewingContract"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="headObj.AutoRenewingContractText == 'NoAuto-RenewingContract'">
|
<span>合约到期开始日期:</span>
|
<el-date-picker
|
v-model="headObj.StartContractEndDate"
|
type="date"
|
placeholder="选择开始日期"
|
value-format="yyyy-MM-dd"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item v-if="headObj.AutoRenewingContractText == 'NoAuto-RenewingContract'">
|
<span>合约到期结束日期:</span>
|
<el-date-picker
|
v-model="headObj.EndContractEndDate"
|
type="date"
|
placeholder="选择开始日期"
|
value-format="yyyy-MM-dd"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<span>产品线:</span>
|
<el-input
|
style="width: 200px"
|
v-model="headObj.ProductLine"
|
placeholder="请输入产品线"/>
|
</el-form-item>
|
<el-form-item>
|
<span>最终客户帐户所在地:</span>
|
<el-input
|
style="width: 200px"
|
v-model="headObj.EndCustomerStateProvince"
|
placeholder="请输入最终客户帐户所在地"/>
|
</el-form-item>
|
<el-form-item>
|
<div style='display: flex;'>
|
<span style="margin-right: 12px">许可年限:</span>
|
<el-select v-model="headObj.Term" placeholder="请选择">
|
<el-option key="1" label="一年" value="Annual"></el-option>
|
<el-option key="3" label="三年" value="3-Year"></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="exportFile()">导出</el-button>
|
<el-button @click="onSubmit('reset')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<c-r-m-export
|
:show="showCRMExport"
|
:crm-type="crmType"
|
:head-obj="exportHeadObj"
|
@close="showCRMExport=false"
|
@queryList='queryList'/>
|
</div>
|
</template>
|
|
<script>
|
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: {
|
AutoRenewingContractText: '', // 自动续约合同
|
StartContractEndDate: '', // 开始时间
|
EndContractEndDate: '', // 结束时间
|
ProductLine: '', // 产品线
|
EndCustomerStateProvince: '', // 最终客户帐户所在地
|
Term: '' // 许可年限
|
},
|
exportHeadObj: {},
|
pickerOptions: {
|
disabledDate (time) {
|
return time.getTime(new Date()) > Date.now()
|
}
|
}
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
// 选择非续约合同后清空开始 结束日期
|
renewalMethodChange (value) {
|
console.log(value)
|
if (value === 'Auto-RenewingContract') {
|
this.headObj.StartContractEndDate = ''
|
this.headObj.EndContractEndDate = ''
|
}
|
},
|
queryList (data) {
|
console.log(data)
|
},
|
onSubmit (val) {
|
this.headObj = {
|
AutoRenewingContractText: '', // 自动续约合同
|
StartContractEndDate: '', // 开始时间
|
EndContractEndDate: '', // 结束时间
|
ProductLine: '', // 产品线
|
EndCustomerStateProvince: '', // 最终客户帐户所在地
|
Term: '' // 许可年限
|
}
|
},
|
exportFile () {
|
console.log(this.headObj)
|
this.exportHeadObj = this.headObj
|
// 需要设置参数 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;
|
}
|
}
|
|
</style>
|
