<template>
<div>
<a-form layout="inline" :form="form" @submit="handleSearch">
<a-form-item label="发放时间">
<a-range-picker v-decorator="['times']" showTime/>
</a-form-item>
<a-form-item label="类型">
<a-select v-decorator="['type']" style="width: 120px">
<a-select-option :key="0" :value="0">全部</a-select-option>
<a-select-option :key="1" :value="1">持有</a-select-option>
<a-select-option :key="2" :value="2">奖励</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="状态">
<a-select v-decorator="['status']" style="width: 120px">
<a-select-option :key="0" :value="0">全部</a-select-option>
<a-select-option :key="1" :value="1">待上架</a-select-option>
<a-select-option :key="2" :value="2">运行中</a-select-option>
<a-select-option :key="3" :value="3">已到期</a-select-option>
<a-select-option :key="4" :value="4">已删除</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="算力名称">
<a-input v-decorator="['goods_name']"/>
</a-form-item>
<a-form-item label="发放人">
<a-input v-decorator="['username']"/>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">
提交
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="() => form.resetFields()">
重置
</a-button>
</a-form-item>
</a-form>
<a-table :columns="columns" :dataSource="data" :pagination="pagination" @change="handleTableChange" :loading="spinning" rowKey="id">
<template slot="type" slot-scope="text, record">
{{typeText[record.type]}}
</template>
<template slot="status" slot-scope="text, record">
{{calStatusText[record.cal_status]}}
<span v-if="record.is_freezen == 0">(冻结)</span>
</template>
<template slot="total_hashrate" slot-scope="text, record">
{{record.total_hashrate}}{{record.unit}}
<div v-if="record.cal_status === 3">
(已到期)
</div>
</template>
<template slot="action" slot-scope="text, record">
<div v-if="record.cal_status !== 4" class="actions">
<a @click="freezen(record, 0)" type="link" v-if="record.is_freezen == 1">冻结</a>
<a @click="freezen(record, 1)" type="link" v-if="record.is_freezen == 0">解冻</a>
<a @click="edit(record)" type="link" >修改</a>
<!--待上架，已到期，作废 算力可删除-->
<a @click="del(record)" type="link" v-if="record.cal_status === 1 || record.cal_status === 3 || record.status === 3">删除</a>
</div>
</template>
</a-table>
<!-- 新增编辑表单 -->
<edit ref="edit" @refresh="refresh"/>
</div>
</template>
<script>
import { message } from "ant-design-vue";
import { getCalLog, delCal, freezen } from "@/api/grant";
import { column } from "@/api/currency";
import Edit from "@/views/components/actions/Edit";
const columns = [
{
title: '发放时间',
key:'create_time',
dataIndex: 'create_time',
},
{
title: '发放人',
key:'username',
dataIndex: 'username',
width: 80
},
{
title: '名称',
key:'goods_name',
dataIndex: 'goods_name',
},
{
title: '发放类型',
key:'type',
dataIndex: 'type',
scopedSlots: { customRender: 'type' },
},
{
title: '数量',
key:'total_hashrate',
dataIndex: 'total_hashrate',
scopedSlots: { customRender: 'total_hashrate' },
},
{
title: '状态',
key:'status',
dataIndex: 'status',
scopedSlots: { customRender: 'status' },
},
{
title: '备注',
key:'description',
dataIndex: 'description',
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'action' },
},
];
export default {
components:{
Edit,
},
data() {
return {
data: [],
pagination: {
total: 0,
pageSize: 10,
current: 1,
},
spinning: false,
columns,
typeText: {
1: '持有',
2: '奖励'
},
calStatusText: {
1: '待上架',
2: '运行中',
3: '已到期',
4: '已删除'
},
form: this.$form.createForm(this),
submitting: false,
currencies:[],
};
},
created() {
this.requestList()
this.getCurrencies()
},
methods: {
// 算力类型
getCurrencies(){
column().then(res => {
this.currencies = res.data
}).catch((err) => {
message.error(err);
})
},
//获取算力发放记录
requestList(params = {}) {
this.spinning = true;
let temp = this.form.getFieldsValue();
params = Object.assign(params,temp)
params.page = this.pagination.current
params.limit = this.pagination.pageSize
getCalLog(params).then((res) => {
this.data = res.data.data;
this.pagination.total = res.data.total;
this.pagination.pageSize = res.data.per_page;
this.pagination.current = res.data.current_page;
this.spinning = false;
}).catch((err) => {
message.error(err);
this.spinning = false;
});
},
handleTableChange(pagination) {
const pager = { ...this.pagination };
pager.current = pagination.current;
this.pagination = pager;
this.requestList()
},
handleSearch(e){
e.preventDefault();
this.form.validateFieldsAndScroll((err, values) => {
if (!err) {
if(values.times){
values.start_time = values.times[0].format('YYYY-MM-DD HH:mm:ss')
values.end_time = values.times[1].format('YYYY-MM-DD HH:mm:ss')
}
this.requestList(values)
}
});
},
//修改
edit(record){
this.$refs.edit.edit(record)
},
//处理修改成功后
refresh(){
this.requestList()
},
del(record){
this.$confirm({
title: '确定删除吗?',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: () => {
delCal({id:record.id}).then(res => {
message.success(res.message);
this.requestList()
}).catch(err => {
message.error(err);
})
},
onCancel () {}
})
},
//处理冻结解冻操作
freezen(record,is_freezen){
this.$confirm({
title: '确定执行此操作吗?',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: () => {
freezen({id:record.id,is_freezen: is_freezen}).then(res => {
message.success(res.message);
this.requestList()
}).catch(err => {
message.error(err);
})
},
onCancel () {}
})
}
}
};
</script>
<style lang="less" scoped="scoped">
body {
background: #f3f9fa;
}
.actions a{
padding-right:10px;
}
</style>
带导出demo
<template>
<div>
<a-form layout="inline" :form="form" @submit="handleSearch">
<a-form-item label="发放时间">
<a-range-picker v-decorator="['times']" showTime/>
</a-form-item>
<a-form-item label="发放人">
<a-input v-decorator="['username']"/>
</a-form-item>
<a-form-item label="算力类型">
<a-select v-decorator="['type']" style="width: 120px">
<a-select-option :key="0" :value="0">全部</a-select-option>
<a-select-option :key="1" :value="1">持有</a-select-option>
<a-select-option :key="2" :value="2">奖励</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="变动方式">
<a-select v-decorator="['method']" style="width: 120px">
<a-select-option :key="0" :value="0">全部</a-select-option>
<a-select-option :key="1" :value="1">算力产出</a-select-option>
<a-select-option :key="2" :value="2">数字资产</a-select-option>
<a-select-option :key="3" :value="3">提币</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="状态">
<a-select v-decorator="['status']" style="width: 120px">
<a-select-option :key="-1" :value="-1">全部</a-select-option>
<a-select-option :key="0" :value="0">冻结</a-select-option>
<a-select-option :key="1" :value="1">正常</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="资产类型">
<a-select v-decorator="['currency_id']" style="width: 120px">
<a-select-option v-for="(vo) in currencies" :key="vo.id" :value="vo.id">{{ vo.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">
提交
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="() => form.resetFields()">
重置
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="exportExcel">
导出
</a-button>
</a-form-item>
</a-form>
<div>
<div v-for="d in total_currencies" :key="d.id">{{d.name}}：增加：{{parseFloat(d.inc)}}、减少：{{parseFloat(d.dec)}}、合计：{{parseFloat((d.inc - d.dec).toFixed(8))}}</div>
</div>
<a-table :columns="columns" :dataSource="data" :pagination="pagination" @change="handleTableChange" :loading="spinning" rowKey="id">
<template slot="currency_name" slot-scope="text, record">
{{record.currency_name}}<!--<span v-if="record.method === 1">/{{record.cal_number}}{{record.unit}} * {{parseFloat(record.get_currency)}} * {{parseFloat(record.cent_ratio)}}%</span>-->
</template>
<template slot="type" slot-scope="text, record">
{{typeText[record.type]}}
</template>
<template slot="method" slot-scope="text, record">
{{methodText[record.method]}}
</template>
<template slot="num" slot-scope="text, record">
<span v-if="record.inc_or_dec == 1" style="color:green">
+{{parseFloat(record.num)}} {{record.currency_name}}
</span>
<span v-else-if="record.inc_or_dec == 2" style="color:red">
-{{parseFloat(record.num)}} {{record.currency_name}}
</span>
</template>
<template slot="status" slot-scope="text, record">
{{statusText[record.status]}}
</template>
</a-table>
</div>
</template>
<script>
import { message } from "ant-design-vue";
import { getCurrencyLog } from "@/api/grant";
import { column } from "@/api/currency";
const typeText = {
0: '',
1: '持有',
2: '奖励',
}
const statusText = {
0: '冻结',
1: '正常',
}
const methodText = {
1: '算力产出',
2: '数字资产',
3: '提币',
}
const columns = [
{
title: '发放时间',
key:'create_time',
dataIndex: 'create_time',
},
{
title: '发放人',
key:'username',
dataIndex: 'username',
width: 80
},
{
title: '数字资产',
key:'currency_name',
dataIndex: 'currency_name',
scopedSlots: { customRender: 'currency_name' },
},
{
title: '变动方式',
key:'method',
dataIndex: 'method',
scopedSlots: { customRender: 'method' },
},
{
title: '算力类型',
key:'type',
dataIndex: 'type',
scopedSlots: { customRender: 'type' },
},
{
title: '数量',
key:'num',
dataIndex: 'num',
scopedSlots: { customRender: 'num' },
},
{
title: '发放状态',
key:'status',
dataIndex: 'status',
scopedSlots: { customRender: 'status' },
},
{
title: '备注',
key:'description',
dataIndex: 'description',
}
];
export default {
data() {
return {
data: [],
pagination: {
total: 0,
pageSize: 10,
current: 1,
},
spinning: false,
columns,
typeText,
statusText,
methodText,
form: this.$form.createForm(this),
currencies:[],
total_currencies: []
};
},
created() {
this.requestList()
this.getCurrencies()
},
methods: {
//获取数字资产记录
requestList(params = {}) {
this.spinning = true;
let temp = this.form.getFieldsValue();
params = Object.assign(params,temp)
if(params.times){
params.start_time = params.times[0].format('YYYY-MM-DD HH:mm:ss')
params.end_time = params.times[1].format('YYYY-MM-DD HH:mm:ss')
}
params.page = this.pagination.current
params.limit = this.pagination.pageSize
getCurrencyLog(params).then((res) => {
this.data = res.data.data;
this.pagination.total = res.data.total;
this.pagination.pageSize = res.data.per_page;
this.pagination.current = res.data.current_page;
this.total_currencies = res.data.currencies;
this.spinning = false;
}).catch((err) => {
message.error(err);
this.spinning = false;
});
},
handleTableChange(pagination) {
const pager = { ...this.pagination };
pager.current = pagination.current;
this.pagination = pager;
this.requestList()
},
handleSearch(e){
e.preventDefault();
this.form.validateFieldsAndScroll((err, values) => {
if (!err) {
if(values.times){
values.start_time = values.times[0].format('YYYY-MM-DD HH:mm:ss')
values.end_time = values.times[1].format('YYYY-MM-DD HH:mm:ss')
}
this.requestList(values)
}
});
},
exportExcel(e){
e.preventDefault();
this.form.validateFieldsAndScroll((err, values) => {
if (!err) {
if(values.times){
values.start_time = values.times[0].format('YYYY-MM-DD HH:mm:ss')
values.end_time = values.times[1].format('YYYY-MM-DD HH:mm:ss')
}
values.is_export = 1;
this.spinning = true;
getCurrencyLog(values, {responseType:'blob'}).then((res) => {
this.spinning = false;
if(res.type == 'application/json'){
// FileReader可以读取Blob内容
let fr = new FileReader();
// 二进制转换成text
fr.readAsText(res);
// 转换完成后，调用onload方法
fr.onload = function () {
// result 转换的结果
let response = fr.result;
response = JSON.parse(response)
message.error(response.message)
}
}else if(res.type == 'application/vnd.ms-excel'){
let blob = new Blob([res]);
let elink = document.createElement('a');
elink.download = '数字资产记录.xlsx';
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
}
}).catch((err) => {
message.error(err);
this.spinning = false;
});
}
});
},
// 算力类型
getCurrencies(){
column().then(res => {
this.currencies = res.data
}).catch((err) => {
message.error(err);
})
},
}
};
</script>
<style lang="less" scoped="scoped">
body {
background: #f3f9fa;
}
</style>
编辑表单demo
<template>
<a-drawer
title="修改发放记录"
placement="right"
:closable="false"
:visible="visible"
@close="onClose"
width="600"
>
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
<a-form-item label="算力类型">
<a-select
v-decorator="['currency_id', { rules: [{ required: true, message: '请选择算力类型!' }] }]"
@change="handleChange"
>
<a-select-option v-for="(vo) in currencies" :key="vo.id" :value="vo.id">{{ vo.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="发放类型">
<a-select
v-decorator="['type', { rules: [{ required: true, message: '请选择发放类型!' }] }]"
>
<a-select-option :key="1" :value="1">持有</a-select-option>
<a-select-option :key="2" :value="2">奖励</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="算力名称">
<a-input v-decorator="['goods_name', { rules: [{ required: true, message: '请输入算力名称!' }] }]"/>
</a-form-item>
<a-form-item label="数量">
<a-input-number v-decorator="['total_hashrate', { rules: [{ required: true, message: '请输入数量!' }] }]"/>
{{ unit }}
</a-form-item>
<a-form-item label="上架时间">
<a-date-picker v-decorator="['start_time', { rules: [{ required: true, message: '请选择上架时间!' }] }]" @change="handleDay"/>
</a-form-item>
<a-form-item label="到期时间">
<a-date-picker v-decorator="['contract_end_day', { rules: [{ required: true, message: '请选择到期时间!' }] }]" @change="handleDay"/>
共计{{ day }}天
</a-form-item>
<a-form-item label="备注">
<a-textarea v-decorator="['description']" :rows="4" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" html-type="submit" block :loading="submitting">
提交
</a-button>
</a-form-item>
</a-form>
</a-drawer>
</template>
<script>
import { updateCal } from "@/api/grant";
import { message } from "ant-design-vue";
import { column } from "@/api/currency";
import moment from 'moment';
export default {
data() {
return {
form: this.$form.createForm(this),
id: 0,
visible: false,
submitting: false,
currencies:[],
unit: '',
day: 0,
};
},
created() {
this.getCurrencies()
},
methods: {
// 算力类型
getCurrencies(){
column().then(res => {
this.currencies = res.data
}).catch((err) => {
message.error(err);
})
},
//修改
edit(record){
this.id = record.id
this.visible = true
const { form: { setFieldsValue } } = this
this.$nextTick(() => {
setFieldsValue({
currency_id: record.currency_id,
type: record.type,
goods_name: record.goods_name,
total_hashrate: record.total_hashrate,
start_time: moment(record.start_time * 1000,'x'),
contract_end_day: moment(record.contract_end_day * 1000,'x'),
description: record.description,
})
this.handleDay()
})
},
// 关闭抽屉
onClose(){
this.form.resetFields()
this.id = 0
this.visible = false
},
handleSubmit(e) {
e.preventDefault();
this.form.validateFieldsAndScroll((err, values) => {
if (!err) {
this.submitting = true;
values.id = this.id
values.start_time = values.start_time.format('YYYY-MM-DD');
values.contract_end_day = values.contract_end_day.format('YYYY-MM-DD');
updateCal(values).then(res => {
this.submitting = false;
message.success(res.message);
this.onClose()
this.$emit('refresh')
}).catch(err => {
this.submitting = false;
message.error(err);
})
}
});
},
handleChange(value){
const currency = this.currencies.find(currency => currency.id === value)
if(currency){
this.unit = currency.unit
}
},
handleDay(){
this.$nextTick(() => {
const { form: { getFieldsValue } } = this
const { start_time, contract_end_day } = getFieldsValue(['start_time','contract_end_day'])
if(moment(start_time).unix() > 0 && moment(contract_end_day).unix()){
const seconds = moment(contract_end_day).unix() - moment(start_time).unix()
const day = Math.ceil(seconds / 86400)
if(day > 0){
this.day = day
}else{
this.day = 0
}
}
})
}
}
};
</script>
<style scoped>
</style>