479 lines
16 KiB
Plaintext
479 lines
16 KiB
Plaintext
<template>
|
|
<div class="revenues">
|
|
<div class="filter-container">
|
|
<el-select
|
|
v-model="listQuery.StatType"
|
|
size="small"
|
|
placeholder="Stats Type"
|
|
class="mr"
|
|
@change="handleStatsTypeChange"
|
|
>
|
|
<el-option
|
|
v-for="item in statsType"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
ref="croSelection"
|
|
v-model="listQuery.CroId"
|
|
size="small"
|
|
placeholder="CRO"
|
|
clearable
|
|
style="width:120px;margin-right:5px;"
|
|
>
|
|
<el-option v-for="item of croList" :key="item.Id" :label="item.CROName" :value="item.Id" />
|
|
</el-select>
|
|
<el-select
|
|
v-show="listQuery.StatType == 2 || listQuery.StatType == 0"
|
|
v-model="listQuery.Nation"
|
|
placeholder="Nation"
|
|
size="small"
|
|
style="width:120px;margin-right:5px;"
|
|
clearable
|
|
>
|
|
<el-option label="CN" value="0" />
|
|
<el-option label="US" value="1" />
|
|
</el-select>
|
|
<el-select
|
|
v-show="listQuery.StatType == 1 || listQuery.StatType == 0|| listQuery.StatType == 3"
|
|
v-model="listQuery.AttendedReviewerType"
|
|
placeholder="Attended Type"
|
|
size="small"
|
|
style="width:150px;margin-right:5px;"
|
|
clearable
|
|
>
|
|
<el-option label="CN" value="0" />
|
|
<el-option label="US" value="1" />
|
|
<el-option label="CN&US" value="2" />
|
|
</el-select>
|
|
|
|
<el-input v-show="listQuery.StatType == 2 || listQuery.StatType == 0" v-model="listQuery.Reviewer" size="small" placeholder="Reviewer ID" clearable class="mr" />
|
|
<el-input v-show="listQuery.StatType == 1 || listQuery.StatType == 0" v-model="listQuery.TrialCode" size="small" placeholder="Trial ID" clearable class="mr" />
|
|
<el-date-picker
|
|
v-model="listQuery.BeginDate"
|
|
size="small"
|
|
placeholder="Beginning Month"
|
|
value-format="yyyy-MM"
|
|
format="yyyy-MM"
|
|
type="month"
|
|
style="width:120px;margin-right:5px"
|
|
:picker-options="beginPickerOption"
|
|
:clearable="false"
|
|
/>To
|
|
<el-date-picker
|
|
v-model="listQuery.EndDate"
|
|
size="small"
|
|
placeholder="End Month"
|
|
value-format="yyyy-MM"
|
|
format="yyyy-MM"
|
|
type="month"
|
|
style="width:120px;margin:0 5px"
|
|
:picker-options="endpickerOption"
|
|
:clearable="false"
|
|
/>
|
|
<el-button type="text" size="small" @click="handleReset">Reset</el-button>
|
|
<el-button type="primary" size="small" @click="handleSearch">Search</el-button>
|
|
<el-button type="primary" size="small" :disabled="arrID.length==0" @click="handleExport">Export Excel</el-button>
|
|
<el-button type="primary" size="small" :loading="dialogLoading" @click="handleVerify">Verify</el-button>
|
|
<el-button
|
|
style="margin-left: auto"
|
|
type="primary"
|
|
size="small"
|
|
@click="handleSetting"
|
|
>Settings</el-button>
|
|
</div>
|
|
<div ref="listContainer" v-loading="listLoading" class="list-container clearfix">
|
|
<el-table
|
|
v-if="tableHeight"
|
|
ref="revenusList"
|
|
|
|
size="small"
|
|
stripe
|
|
:data="list"
|
|
height="99%"
|
|
show-summary
|
|
:summary-method="getSummaries"
|
|
@sort-change="sortByColumn"
|
|
@selection-change="handleSelectChange"
|
|
>
|
|
<el-table-column type="selection" />
|
|
<el-table-column type="index" width="40" />
|
|
<el-table-column
|
|
v-for="(col,index) in cols"
|
|
:key="index"
|
|
:prop="col.prop"
|
|
:label="col.label"
|
|
:min-width="col.width"
|
|
sortable="custom"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column prop="Total" label="Total($)" min-width="200" show-overflow-tooltip sortable="custom">
|
|
<template slot-scope="scope">
|
|
|
|
<div v-if="statsType==1 && scope.row.MissingTrialCodes.length>0">
|
|
<span>{{ scope.row.Total | rounding }}</span>
|
|
<span style="color: red"> (Need setting trial unit price)</span>
|
|
</div>
|
|
<div v-else-if="scope.row.MissingTrialCodes.length>0">
|
|
<span>{{ scope.row.Total | rounding }}</span>
|
|
<span
|
|
style="color: red"
|
|
> ({{ scope.row.MissingTrialCodes.join(',') }} need setting trial unit price)</span>
|
|
</div>
|
|
<div v-else>{{ scope.row.Total | rounding }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination">
|
|
<pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
|
|
</div>
|
|
<el-dialog title="Revenues Price Verification" :visible.sync="dialogVisible" size="small" width="600px">
|
|
<div v-if="verifyList.length>0" class="verify-wrapper">
|
|
<div v-for="(item, index) in verifyList" :key="index" style="margin-bottom:5px;word-break:keep-all;word-wrap:break-word;">
|
|
Trial ID:
|
|
<span style="font-weight:bold;margin-right:5px">{{ item.trialCode }}</span>
|
|
<span>({{ item.priceType.join(', ') }} <span style="color:red;">did not set unit price</span>)</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
No data.
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Pagination from '@/components/Pagination'
|
|
// eslint-disable-next-line no-unused-vars
|
|
import { FormatTime } from '@/utils/formatter'
|
|
import store from '@/store'
|
|
import { mapGetters, mapMutations } from 'vuex'
|
|
import { getRevenuesStatistics, getRevenuesVerifyList } from '@/api/financials'
|
|
import { getColumns } from './revenues'
|
|
import { exportExcelWithTotal } from '@/utils/export'
|
|
import floatObj from '@/utils/float-operation'
|
|
const getListQueryDefault = () => {
|
|
return {
|
|
CroId: '',
|
|
TrialCode: '',
|
|
Reviewer: '',
|
|
BeginDate: new Date(new Date().setMonth(new Date().getMonth() - 1)).format('yyyy-MM'),
|
|
EndDate: new Date(new Date().setMonth(new Date().getMonth() - 1)).format('yyyy-MM'),
|
|
StatType: 3,
|
|
PageIndex: 1,
|
|
PageSize: 20,
|
|
Asc: true,
|
|
SortField: ''
|
|
}
|
|
}
|
|
export default {
|
|
components: { Pagination },
|
|
filters: {
|
|
rounding(value) {
|
|
return value ? Number(value).toFixed(2) : value
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
listQuery: getListQueryDefault(),
|
|
list: [],
|
|
total: 0,
|
|
listLoading: false,
|
|
beginPickerOption: {
|
|
disabledDate: time => {
|
|
if (this.listQuery.EndDate) {
|
|
return time.getTime() > new Date(this.listQuery.EndDate).getTime()
|
|
} else {
|
|
return time.getTime() > Date.now()
|
|
}
|
|
}
|
|
},
|
|
endpickerOption: {
|
|
disabledDate: time => {
|
|
if (this.listQuery.BeginDate) {
|
|
return time.getTime() > Date.now() || time.getTime() <= new Date(this.listQuery.BeginDate).getTime()
|
|
} else {
|
|
return time.getTime() > Date.now()
|
|
}
|
|
}
|
|
},
|
|
statsType: [
|
|
{ label: 'Monthly', value: 3 },
|
|
{ label: 'Trial', value: 1 },
|
|
{ label: 'Reviewer', value: 2 },
|
|
{ label: 'Detail', value: 0 }
|
|
],
|
|
cols: [],
|
|
arrID: [],
|
|
tableHeight: 0,
|
|
dialogVisible: false,
|
|
dialogLoading: false,
|
|
verifyList: []
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['croList', 'revenusQuery'])
|
|
},
|
|
mounted() {
|
|
store.dispatch('global/getCROList')
|
|
this.revenusQuery ? this.listQuery = this.revenusQuery : ''
|
|
this.cols = getColumns(this.listQuery.StatType)
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
// this.tableHeight = 0
|
|
|
|
this.listLoading = true
|
|
getRevenuesStatistics(this.listQuery).then(res => {
|
|
this.listLoading = false
|
|
this.tableHeight = this.$refs.listContainer.clientHeight - 10 + 'px'
|
|
this.list = res.Result.CurrentPageData
|
|
this.list.forEach(element => {
|
|
element.Expedited = element.Expedited === 0 ? 'No' : element.Expedited === 1 ? '24-Hour' : '48-Hour'
|
|
if (element.LastName && element.FirstName) { element.FullName = `${element.LastName} / ${element.FirstName}` }
|
|
})
|
|
this.total = res.Result.TotalCount
|
|
}).catch(() => { this.listLoading = false })
|
|
},
|
|
handleSearch() {
|
|
this.listQuery.PageIndex = 1
|
|
this.getList()
|
|
this.setQueryParam(this.listQuery)
|
|
},
|
|
handleReset() {
|
|
const type = this.listQuery.StatType
|
|
this.listQuery = getListQueryDefault()
|
|
this.listQuery.StatType = type
|
|
this.getList()
|
|
},
|
|
handleStatsTypeChange(val) {
|
|
this.tableHeight = 0
|
|
this.cols = getColumns(val)
|
|
this.listQuery.Reviewer = ''
|
|
this.listQuery.CroId = ''
|
|
this.listQuery.TrialCode = ''
|
|
this.listQuery.PageIndex = 1
|
|
this.listQuery.Asc = true
|
|
this.listQuery.SortField = ''
|
|
this.$refs.revenusList.doLayout()
|
|
this.arrID = []
|
|
this.getList()
|
|
this.$refs.revenusList.doLayout()
|
|
},
|
|
handleVerify() {
|
|
this.dialogLoading = true
|
|
const param = {
|
|
beginDate: this.listQuery.BeginDate,
|
|
endDate: this.listQuery.EndDate
|
|
}
|
|
getRevenuesVerifyList(param).then(res => {
|
|
this.dialogLoading = false
|
|
this.dialogVisible = true
|
|
this.verifyList = []
|
|
if (res.Result) {
|
|
res.Result.forEach(item => {
|
|
const obj = {}
|
|
obj.trialCode = item.TrialCode
|
|
obj.priceType = []
|
|
for (var i in item) {
|
|
if (item[i] === false) {
|
|
obj.priceType.push(i)
|
|
}
|
|
}
|
|
this.verifyList.push(obj)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleExport() {
|
|
const cro = this.$refs.croSelection.selectedLabel
|
|
const sheetName = `${this.listQuery.BeginDate}--${this.listQuery.EndDate}`
|
|
let columns = []
|
|
let conditional = ''
|
|
let headerArr = []
|
|
let numFmts = []
|
|
let totalRow = []
|
|
let totalUSD = 0
|
|
let index = 1
|
|
var exportExcelData = this.list.filter(item => this.arrID.indexOf(item.Id) > -1)
|
|
exportExcelData.forEach(element => {
|
|
totalUSD += element.Total
|
|
element.Index = index++
|
|
if (this.listQuery.StatType === 1) {
|
|
if (element.Expedited === 0) {
|
|
element.Expedited = 'No'
|
|
} else if (element.Expedited === 1) {
|
|
element.Expedited = '24-Hour'
|
|
} else {
|
|
element.Expedited = '48-Hour'
|
|
}
|
|
}
|
|
})
|
|
if (this.listQuery.StatType === 0) {
|
|
columns = [
|
|
{ key: 'Index', width: 5 },
|
|
{ key: 'TrialCode', width: 20 },
|
|
{ key: 'Expedited', width: 15 },
|
|
{ key: 'Indication', width: 15 },
|
|
{ key: 'Cro', width: 15 },
|
|
{ key: 'FullName', width: 30 },
|
|
{ key: 'ChineseName', width: 15 },
|
|
{ key: 'ReviewerCode', width: 15 },
|
|
{ key: 'YearMonth', width: 15 },
|
|
{ key: 'Total', width: 20 }
|
|
]
|
|
if (cro) {
|
|
conditional = `Type:Detail CRO:${cro} Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
} else {
|
|
conditional = `Type:Detail Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
}
|
|
headerArr = ['', 'Trial ID', 'Expedited', 'Indication', 'CRO', 'Name', 'Name CN', 'Reviewer ID', 'Month', 'Total($)']
|
|
numFmts = [{ colIndex: 10, format: '#,##0.00' }]
|
|
totalRow = ['', 'Total(Current Page)', '', '', '', '', '', '', '', totalUSD]
|
|
} else if (this.listQuery.StatType === 1) {
|
|
columns = [
|
|
{ key: 'Index', width: 5 },
|
|
{ key: 'TrialCode', width: 20 },
|
|
{ key: 'Expedited', width: 15 },
|
|
{ key: 'Indication', width: 15 },
|
|
{ key: 'Cro', width: 15 },
|
|
{ key: 'Total', width: 20 }
|
|
]
|
|
if (cro) {
|
|
conditional = `Type:Trial CRO:${cro} Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
} else {
|
|
conditional = `Type:Trial Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
}
|
|
headerArr = ['', 'Trial ID', 'Expedited', 'Indication', 'CRO', 'Total($)']
|
|
numFmts = [{ colIndex: 6, format: '#,##0.00' }]
|
|
totalRow = ['', 'Total(Current Page)', '', '', '', totalUSD]
|
|
} else if (this.listQuery.StatType === 2) {
|
|
columns = [
|
|
{ key: 'Index', width: 5 },
|
|
{ key: 'FullName', width: 30 },
|
|
{ key: 'ChineseName', width: 15 },
|
|
{ key: 'ReviewerCode', width: 15 },
|
|
{ key: 'Total', width: 20 }
|
|
]
|
|
if (cro) {
|
|
conditional = `Type:Reviewer CRO:${cro} Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
} else {
|
|
conditional = `Type:Reviewer Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
}
|
|
headerArr = ['', 'Name', 'Name CN', 'Reviewer ID', 'Total($)']
|
|
numFmts = [{ colIndex: 5, format: '#,##0.00' }]
|
|
totalRow = ['', 'Total(Current Page)', '', '', totalUSD]
|
|
} else {
|
|
columns = [
|
|
{ key: 'Index', width: 5 },
|
|
{ key: 'YearMonth', width: 40 },
|
|
{ key: 'Total', width: 40 }
|
|
]
|
|
if (cro) {
|
|
conditional = `Type:Monthly CRO:${cro} Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
} else {
|
|
conditional = `Type:Monthly Beginning Month:${this.listQuery.BeginDate} End Month:${this.listQuery.EndDate}`
|
|
}
|
|
headerArr = ['', 'Month', 'Total($)']
|
|
numFmts = [{ colIndex: 3, format: '#,##0.00' }]
|
|
totalRow = ['', 'Total(Current Page)', totalUSD]
|
|
}
|
|
|
|
exportExcelWithTotal(sheetName, columns, 'Revenues', conditional, headerArr, exportExcelData, totalRow, numFmts)
|
|
},
|
|
handleSetting() { this.$router.push({ name: 'RevenuesSetting' }) },
|
|
getSummaries(param) {
|
|
const { columns, data } = param
|
|
const sums = []
|
|
columns.forEach((column, index) => {
|
|
if (index === 2) {
|
|
sums[index] = 'Total (Current Page)'
|
|
return
|
|
}
|
|
if (column.property === 'Total') {
|
|
const values = data.map(item => Number(item[column.property]))
|
|
if (!values.every(value => isNaN(value))) {
|
|
sums[index] = values
|
|
.reduce((prev, curr) => {
|
|
const value = Number(curr)
|
|
if (!isNaN(value)) {
|
|
return floatObj.add(prev, curr)
|
|
} else {
|
|
return prev
|
|
}
|
|
}, 0)
|
|
}
|
|
}
|
|
})
|
|
|
|
return sums
|
|
},
|
|
sortByColumn(column) {
|
|
if (column.order === 'ascending') {
|
|
this.listQuery.Asc = true
|
|
} else {
|
|
this.listQuery.Asc = false
|
|
}
|
|
if (column.prop === 'FullName') {
|
|
this.listQuery.SortField = 'LastName'
|
|
} else {
|
|
this.listQuery.SortField = column.prop
|
|
}
|
|
this.listQuery.PageIndex = 1
|
|
this.getList()
|
|
},
|
|
handleSelectChange(val) {
|
|
const arr = []
|
|
for (let index = 0; index < val.length; index++) {
|
|
arr.push(val[index].Id)
|
|
}
|
|
this.arrID = arr
|
|
},
|
|
...mapMutations({
|
|
setQueryParam: 'financials/SET_REVENUSQUERYPARAM'
|
|
})
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.revenues{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.filter-container{
|
|
display:flex;
|
|
align-items: center;
|
|
}
|
|
.mr{
|
|
margin-right: 5px;
|
|
width: 140px;
|
|
}
|
|
.el-table {
|
|
overflow: visible !important;
|
|
}
|
|
.el-table .cell {
|
|
white-space: nowrap;
|
|
}
|
|
.list-container{
|
|
padding: 5px 0px;
|
|
flex: 1;
|
|
}
|
|
.pagination{
|
|
text-align: right;
|
|
}
|
|
.el-dialog__header{
|
|
padding: 10px;
|
|
}
|
|
.el-dialog__body{
|
|
padding: 10px;
|
|
min-height: 300px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|