antdvue增删改查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-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>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇