350 lines
9.8 KiB
Plaintext
350 lines
9.8 KiB
Plaintext
<template>
|
||
<div class="rates-container">
|
||
<div class="title">
|
||
<p>Volume Reward</p>
|
||
<span class="tipInfo">{{ tipInfo }}</span>
|
||
<el-button
|
||
type="danger"
|
||
size="small"
|
||
class="saveBtn"
|
||
:disabled="btnSaveDisabled"
|
||
@click="handleSave"
|
||
>Save</el-button>
|
||
<el-button type="primary" class="addBtn" size="small" @click="handleAdd">New</el-button>
|
||
</div>
|
||
<el-table
|
||
v-loading="listLoading"
|
||
:data="list"
|
||
size="small"
|
||
stripe
|
||
class="table"
|
||
:cell-style="cellStyle"
|
||
>
|
||
<el-table-column type="index" width="50" />
|
||
<el-table-column
|
||
prop="Min"
|
||
label="Min"
|
||
min-width="50"
|
||
:formatter="minFormatter"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column
|
||
prop="Max"
|
||
label="Max"
|
||
min-width="50"
|
||
show-overflow-tooltip
|
||
:formatter="maxFormatter"
|
||
/>
|
||
<el-table-column
|
||
prop="Price"
|
||
label="Additional Pay ($)"
|
||
show-overflow-tooltip
|
||
min-width="70"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.Price | rounding }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column fixed="right" label="Action" min-width="200">
|
||
<template slot-scope="scope" min-width="130">
|
||
<el-button size="small" type="text" @click="handleEdit(scope.$index,scope.row)">Edit</el-button>
|
||
<el-button size="small" type="text" @click="handleDelete(scope.$index,scope.row)">Delete</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
style="text-align:right;margin-top:5px;"
|
||
:total="total"
|
||
:page.sync="listQuery.PageIndex"
|
||
:limit.sync="listQuery.PageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<el-dialog
|
||
:key="timer"
|
||
:title="title"
|
||
:visible.sync="dialogVisible"
|
||
width="500px"
|
||
:close-on-click-modal="false"
|
||
size="small"
|
||
>
|
||
<el-form ref="rewardForm" label-width="150px" :rules="rules" :model="rewardForm" size="small">
|
||
<el-form-item label="Min: " prop="Min">
|
||
<el-input v-model="rewardForm.Min" type="number" />
|
||
</el-form-item>
|
||
<el-form-item label="Max: " prop="Max">
|
||
<el-input v-model="rewardForm.Max" type="number" />
|
||
</el-form-item>
|
||
<el-form-item label="Additional Pay ($): " prop="Price">
|
||
<el-input v-model="rewardForm.Price" type="number" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button size="small" @click="dialogVisible = false">Cancel</el-button>
|
||
<el-button type="primary" size="small" @click="handleSaveForm()">Ok</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Pagination from '@/components/Pagination'
|
||
import {
|
||
getvolumeRewardPriceList,
|
||
addOrUpdatevolumeRewardPriceList
|
||
} from '@/api/financials'
|
||
const getListQueryDefault = () => {
|
||
return {
|
||
PageIndex: 1,
|
||
PageSize: 20,
|
||
Asc: false,
|
||
SortField: ''
|
||
}
|
||
}
|
||
export default {
|
||
name: 'VolumeReward',
|
||
components: { Pagination },
|
||
filters: {
|
||
rounding(value) {
|
||
return value ? Number(value).toFixed(2) : value
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
listQuery: getListQueryDefault(),
|
||
list: [],
|
||
listLoading: false,
|
||
total: 0,
|
||
tipInfo: '',
|
||
btnSaveDisabled: true,
|
||
dialogVisible: false,
|
||
title: '',
|
||
timer: '',
|
||
minError: [],
|
||
maxError: [],
|
||
rewardForm: {},
|
||
rules: {
|
||
Price: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||
Min: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||
Max: [{ required: true, message: 'Please specify', trigger: 'blur' }]
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
getList() {
|
||
this.listLoading = true
|
||
getvolumeRewardPriceList(this.listQuery)
|
||
.then((res) => {
|
||
this.listLoading = false
|
||
this.list = res.Result.CurrentPageData
|
||
this.total = res.Result.TotalCount
|
||
})
|
||
.catch(() => {
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
handleAdd() {
|
||
this.rewardForm = {}
|
||
this.title = 'Add'
|
||
this.timer = new Date().getTime()
|
||
this.dialogVisible = true
|
||
},
|
||
handleEdit(index, row) {
|
||
this.title = 'Edit'
|
||
this.rewardForm = JSON.parse(JSON.stringify(row))
|
||
this.rewardForm.index = index
|
||
this.timer = new Date().getTime()
|
||
this.dialogVisible = true
|
||
},
|
||
handleSaveForm() {
|
||
this.$refs.rewardForm.validate((valid) => {
|
||
if (valid) {
|
||
// 编辑
|
||
if (this.rewardForm.Id) {
|
||
this.list.forEach((item) => {
|
||
if (item.Id === this.rewardForm.Id) {
|
||
item.Min = this.rewardForm.Min
|
||
item.Max = this.rewardForm.Max
|
||
item.Price = this.rewardForm.Price
|
||
}
|
||
})
|
||
// this.list.splice(this.rewardForm.index, 1)
|
||
// this.list.push({
|
||
// Id:this.rewardForm.Id,
|
||
// Price: this.rewardForm.Price,
|
||
// Min: this.rewardForm.Min,
|
||
// Max: this.rewardForm.Max,
|
||
// });
|
||
} else {
|
||
this.list.push({
|
||
Id: new Date().getTime(),
|
||
Price: this.rewardForm.Price,
|
||
Min: this.rewardForm.Min,
|
||
Max: this.rewardForm.Max
|
||
})
|
||
}
|
||
|
||
this.btnSaveDisabled = false
|
||
this.list.sort(this.compare('Min'))
|
||
|
||
this.dialogVisible = false
|
||
this.tipInfo = `Please Save`
|
||
this.handelCheckError()
|
||
}
|
||
})
|
||
},
|
||
compare(property) {
|
||
return function(a, b) {
|
||
var value1 = a[property]
|
||
var value2 = b[property]
|
||
return value1 - value2
|
||
}
|
||
},
|
||
handleDelete(index, row) {
|
||
this.$confirm('Confirm to delete?', {
|
||
type: 'warning',
|
||
distinguishCancelAndClose: true,
|
||
confirmButtonText: 'Yes',
|
||
cancelButtonText: 'No'
|
||
}).then(() => {
|
||
this.list.splice(index, 1)
|
||
this.tipInfo = `Please Save`
|
||
this.btnSaveDisabled = false
|
||
|
||
this.list.sort(this.compare('Min'))
|
||
this.handelCheckError()
|
||
})
|
||
},
|
||
handleSave() {
|
||
this.handelCheckError()
|
||
if (this.minError.length > 0 || this.maxError.length > 0) {
|
||
this.tipInfo = 'Validate Error'
|
||
return
|
||
}
|
||
if (this.list.length === 0) {
|
||
this.tipInfo = 'Error: At least one record'
|
||
return
|
||
}
|
||
addOrUpdatevolumeRewardPriceList(this.list)
|
||
.then((res) => {
|
||
if (res.IsSuccess) {
|
||
this.getList()
|
||
this.$message.success('Updated successfully!')
|
||
this.tipInfo = ''
|
||
this.btnSaveDisabled = true
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message({ message: err, type: 'error' })
|
||
})
|
||
},
|
||
handelCheckError() {
|
||
this.minError = []
|
||
this.maxError = []
|
||
for (var i = 0; i < this.list.length; i++) {
|
||
if (i === 0) {
|
||
if (this.list[0].Min !== 0) {
|
||
this.minError.push({
|
||
index: 0,
|
||
value: '(must be 0)',
|
||
column: 1
|
||
})
|
||
}
|
||
} else {
|
||
if (Number(this.list[i - 1].Max) + 1 !== Number(this.list[i].Min)) {
|
||
this.maxError.push({
|
||
index: i - 1,
|
||
value: '( ' + (this.list[i].Min - 1) + ' ?)',
|
||
column: 2
|
||
})
|
||
|
||
this.minError.push({
|
||
index: i,
|
||
value: '( ' + (Number(this.list[i - 1].Max) + 1) + ' ?)',
|
||
column: 1
|
||
})
|
||
}
|
||
|
||
if (Number(this.list[i].Min) > Number(this.list[i].Max)) {
|
||
this.maxError.push({
|
||
index: i,
|
||
value: '( must bigger than' + this.list[i].Min + ' )',
|
||
column: 2
|
||
})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
cellStyle({ row, column, rowIndex, columnIndex }) {
|
||
const minError = this.minError.filter(
|
||
(item) => item.index === rowIndex
|
||
)[0]
|
||
const maxError = this.maxError.filter(
|
||
(item) => item.index === rowIndex
|
||
)[0]
|
||
if (minError) {
|
||
if (minError.column === columnIndex) return 'color:red'
|
||
}
|
||
if (maxError) {
|
||
if (maxError.column === columnIndex) return 'color:red'
|
||
}
|
||
return
|
||
},
|
||
minFormatter(row, column, value, index) {
|
||
var error = this.minError.filter((item) => item.index === index)[0]
|
||
if (error) {
|
||
return value + error.value
|
||
} else return value
|
||
},
|
||
|
||
maxFormatter(row, column, value, index) {
|
||
var error = this.maxError.filter((item) => item.index === index)[0]
|
||
if (error) {
|
||
return value + error.value
|
||
} else return value
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.rates-container {
|
||
.title {
|
||
position: relative;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
background: #e4ebf1;
|
||
border-left: 3px solid #0fc8e0;
|
||
padding-left: 5px;
|
||
margin: 10px 0px;
|
||
font-size: 13px;
|
||
p {
|
||
margin: 0;
|
||
}
|
||
.tipInfo {
|
||
position: absolute;
|
||
right: 150px;
|
||
top: 50%;
|
||
height: 30px;
|
||
margin-top: -10px;
|
||
color: red;
|
||
}
|
||
.saveBtn {
|
||
position: absolute;
|
||
right: 60px;
|
||
top: 50%;
|
||
height: 30px;
|
||
margin-top: -15px;
|
||
}
|
||
.addBtn {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 50%;
|
||
height: 30px;
|
||
margin-top: -15px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|