AppBoxFuture实战: 如何实现一对多表单的增删改查

  本篇通过完整示例介绍如何实现一对多关系表单的相应服务及视图。

一、准备数据结构

  示例所采用的数据结构为“物资需求”一对多“物资清单”，通过IDE的实体设计器如下所示：

1. 物资(DonateItem)

  主键为Id(Guid)

2. 物资需求(Requirement)

  主键为Id(Guid)

3. 物资清单(RequireItem)

  主键为Req(Requirement)+Item(DonateItem)

添加实体成员时选择类型EntityRef（一对一）或EntitySet(一对多)可设置相应的导航属性

二、实现需求列表显示功能

1. 新建RequirementService服务实现加载列表数据

using System;
using System.Threading.Tasks;

namespace dns.ServiceLogic
{
   
	public class RequirementService
	{
   
        /// <summary>
        /// 分页加载需求记录
        /// </summary>
        public async Task<object> Load(int pageIndex, int pageSize)
        {
   
            var q = new SqlQuery<Entities.Requirement>();
            q.Skip(pageSize * pageIndex).Take(pageSize);
            q.OrderByDesc(t => t.Time);
            return await q.ToListAsync();
        }
    }
}

2. 新建RequireList视图

2.1 模版

<div>
	<el-button-group>
		<el-button type="primary" icon="fas fa-plus-square fa-fw">新建</el-button>
		<el-button type="primary" icon="fas fa-edit fa-fw">修改</el-button>
		<el-button type="primary" icon="fas fa-trash fa-fw">删除</el-button>
		<el-button @click="load" type="primary" icon="fas fa-search fa-fw">刷新</el-button>
	</el-button-group>
	<br/><br/>
	<el-table :data="items" v-loading="loading" border stripe highlight-current-row
		readonly>
		<el-table-column prop="Donee" label="需求方"></el-table-column>
		<el-table-column prop="Time" label="时间"></el-table-column>
		<el-table-column prop="Contact" label="联系人" width="80"></el-table-column>
		<el-table-column prop="Phone" label="电话"></el-table-column>
		<el-table-column prop="Address" label="地址"></el-table-column>
		<el-table-column prop="PostCode" label="邮编" width="80"></el-table-column>
	</el-table>
	<el-pagination background layout="prev, pager, next" :total="1000">
	</el-pagination>
</div>

2.2 脚本

@Component
export default class RequireList extends Vue {
   
    items = [] //需求列表
    loading = false
    pageIndex = 0
    pageSize = 20

    load() {
   
        this.loading = true
        dns.Services.RequirementService.Load(this.pageIndex, this.pageSize).then(res => {
   
            this.$set(this, 'items', $runtime.parseEntity(res))
            this.loading = false
        }).catch(err => {
   
            this.loading = false
            this.$message.error('加载需求列表失败: ' + err)
        })
    }

    mounted() {
   
        this.load()
    }
}

系统函数$runtime.parseEntity()用于将调用服务的结果内的数据对象如{ID:xxx,Name:xxx}转换为前端的Entity对象，另如果调用服务的结果只用作展示可以不用转换。

2.3 预览

  点击“Preview”预览，当然当前没有任何数据。
</