IT教程 ·

AppBox实战: 怎样完成一对多表单的增编削查

本篇经由过程完全示例引见怎样完成一对多关联表单的响应效劳及视图。

一、预备数据结构

示例所采纳的数据结构为“物质需求”一对多“物质清单”,经由过程IDE的实体设想器以下所示:

1. 物质(DonateItem)

主键为Id(Guid)
AppBox实战: 怎样完成一对多表单的增编削查 IT教程 第1张

2. 物质需求(Requirement)

主键为Id(Guid)
AppBox实战: 怎样完成一对多表单的增编削查 IT教程 第2张

3. 物质清单(RequireItem)

主键为Req(Requirement)+Item(DonateItem)
AppBox实战: 怎样完成一对多表单的增编削查 IT教程 第3张

增加实体成员时挑选范例EntityRef(一对一)或EntitySet(一对多)可设置响应的导航属性
AppBox实战: 怎样完成一对多表单的增编削查 IT教程 第4张

二、完成需求列表显现功用

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”预览,固然当前没有任何数据。
AppBox实战: 怎样完成一对多表单的增编削查 IT教程 第5张

三、完成新建需求功用

3.1 修正RequirementService完成保留要领

/// <summary>
/// 保留需求
/// </summary>
public async Task Save(Entities.Requirement req)
{
    //TODO:考证
    using var conn = await DataStore.Default.OpenConnectionAsync();
    using var txn = conn.BeginTransaction();
    //保留主纪录
    await DataStore.Default.SaveAsync(req, txn);
    //保留子纪录
    foreach (var item in req.Items)
    {
        await DataStore.Default.SaveAsync(item, txn);
    }
    //处置惩罚已删除的物质
    if (req.PersistentState != PersistentState.Detached)
    {
        foreach (var item in req.Items.DeletedItems)
        {
            await DataStore.Default.DeleteAsync(item, txn);
        }
    }
    //递交事件
    txn.Commit();
}

3.2 新建ItemService完成用于绑定的加载要领

using System;
using System.Threading.Tasks;

namespace dns.ServiceLogic
{
    public class ItemService
    {
        /// <summary>
        /// 加载用于前端挑选绑定
        /// </summary>
        public async Task<object> LoadForSelect()
        {
            var q = new SqlQuery<Entities.DonateItem>();
            return await q.ToListAsync(t => new { t.Id, t.Name, t.Spec });
        }
    }
}

3.3 新建RequireView编辑视图

3.3.1 模版

<div>
    <!-- 表单头 -->
    <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="3">需求方:</el-col>
        <el-col :span="9">
            <el-input v-model="req.Donee"></el-input>
        </el-col>
        <el-col :span="3">时候:</el-col>
        <el-col :span="9">
            <el-date-picker v-model="req.Time" type="date" placeholder="挑选日期" style="width:100%">
            </el-date-picker>
        </el-col>
    </el-row>
    <br/>
    <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="3">联系人:</el-col>
        <el-col :span="9">
            <el-input v-model="req.Contact"></el-input>
        </el-col>
        <el-col :span="3">电话:</el-col>
        <el-col :span="9">
            <el-input v-model="req.Phone"></el-input>
        </el-col>
    </el-row>
    <br/>
    <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="3">地点:</el-col>
        <el-col :span="9">
            <el-input v-model="req.Address"></el-input>
        </el-col>
        <el-col :span="3">邮编:</el-col>
        <el-col :span="9">
            <el-input v-model="req.PostCode"></el-input>
        </el-col>
    </el-row>
    <br/>
    <!-- 物质列表 -->
    <el-table :data="items" border highlight-current-row readonly>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="物质" width="280px">
            <template slot-scope="scope">
                <el-select v-model="scope.row.ItemId" value-key="Id" style="width:100%" placeholder="请挑选">
                    <el-option v-for="item in optItems" :key="item.Id" :label="item.Name+' '+item.Spec"
                        :value="item.Id">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="数目" width="130px">
            <template slot-scope="scope">
                <el-input-number v-model="scope.row.Quantity" controls-position="right" :min="1" style="width:100%">
                </el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="备注">
            <template slot-scope="scope">
                <el-input v-model="scope.row.Comment"></el-input>
            </template>
        </el-table-column>
        <el-table-column align="right" width="100px">
            <template slot="header" slot-scope="scope">
                <el-button @click="onAddItem" icon="fa fa-plus fa-fw" size="mini">增加</el-button>
            </template>
            <template slot-scope="scope">
                <el-button @click="onDeleteItem(scope.$index)" icon="fa fa-times fa-fw" size="mini">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <div style="text-align:center">
        <el-button @click="onSave" type="primary" icon="fas fa-save fa-fw">保留</el-button>
    </div>
</div>

3.3.2 剧本

@Component
export default class RequireView extends Vue {
    @Prop({ type: Object, default: {} }) req: dns.Entities.Requirement

    optItems = [] //物质挑选列表

    /** 用于Table绑定,过滤已标为删除的 */
    get items() {
        if (this.req.Items) {
            return this.req.Items.filter(t => !t.isDeleted())
        }
        return null
    }

    /** 加载用于绑定下拉挑选的物质列表 */
    loadItems() {
        dns.Services.ItemService.LoadForSelect().then(res => {
            this.$set(this, 'optItems', res)
        }).catch(err => {
            this.$message.error("加载物质列表失利: " + err)
        })
    }

    /** 增加物质 */
    onAddItem() {
        if (!this.req.Items) { //仅测试
            this.$set(this.req, 'Items', [])
        }
        this.req.Items.push(new dns.Entities.RequireItem())
    }

    /** 删除物质 */
    onDeleteItem(index) {
        //新建的直接删除,旧的标为删除
        if (this.req.Items[index].isNew()) {
            this.req.Items.splice(index, 1)
        } else {
            this.req.Items[index].markDeleted()
        }
    }

    onSave() {
        dns.Services.RequirementService.Save(this.req).then(res => {
            this.req.acceptChanges()
            this.$message.success("保留胜利")
        }).catch(err => {
            this.$message.error("保留毛病: " + err)
        })
    }

    mounted() {
        this.loadItems()
    }
}

3.4 修正RequireList视图,完成新建功用

3.4.1 模版

    <el-button @click="onCreate" type="primary" icon="fas fa-plus-square fa-fw">新建</el-button>
<!-- 省略 -->
    <el-dialog title="需求纪录" :visible.sync="dlgVisible" width="800px">
        <require-view :req="current"></require-view>
    </el-dialog>
<!-- 省略 -->

3.4.2 剧本

@Component({
    components: { RequireView: dns.Views.RequireView }
})
export default class RequireList extends Vue {
    //----省略----
    dlgVisible = false
    current = null
    //----省略----
    onCreate() { 
        this.current = new dns.Entities.Requirement()
        this.dlgVisible = true
    }
    //----省略----

如今能够在预览内尝试增加些数据了!

四、完成需求列表Pop显现物质清单

主列表运用懒加载体式格局加载子表数据。

4.1 修正RequirementService效劳完成加载子表数据要领

/// <summary>
/// 加载需求物质列表
/// </summary>
public async Task<object> LoadItems(Guid reqId)
{
    var q = new SqlQuery<Entities.RequireItem>();
    q.Where(t => t.ReqId == reqId);
    q.Include(t => t.Item.Name);
    q.Include(t => t.Item.Spec);
    return await q.ToListAsync();
}

4.2 修正RequireList视图

4.2.1 模版

<!-- 省略 -->
<el-table-column label="需求物质" width="80">
    <template slot-scope="scope">
        <!-- 物质清单列表 -->
        <el-popover @show="loadItems(scope.row)" trigger="hover" placement="left" width="400">
            <el-row v-for="(item,index) in scope.row.Items" :gutter="20">
                <el-col :span="2">{{index+1}}.</el-col>
                <el-col :span="4">{{item.ItemName}}</el-col>
                <el-col :span="14">{{item.ItemSpec}}</el-col>
                <el-col :span="4">{{item.Quantity}}</el-col>
            </el-row>
            <div slot="reference">
                <el-tag size="medium">物质清单</el-tag>
            </div>
        </el-popover>
    </template>
</el-table-column>
<!-- 省略 -->

4.2.2 剧本

/** 加载需求物质清单 */
loadItems(row: dns.Entities.Requirement) {
    if (row.Items) { return }
    dns.Services.RequirementService.LoadItems(row.Id).then(res => {
        this.$set(row, 'Items', $runtime.parseEntity(res))
    }).catch(err => {
        this.$message.error('加载物质列表失利: ' + err)
    })
}

4.2.3 预览

AppBox实战: 怎样完成一对多表单的增编削查 IT教程 第6张

五、完成修正与删除功用

5.1 修正RequirementService效劳完成删除要领

public async Task Delete(Entities.Requirement req)
{
    //TODO:推断状况,已发放物质的不能删除
    using var conn = await DataStore.Default.OpenConnectionAsync();
    using var txn = conn.BeginTransaction();
    //先删除子表纪录
    var deleteItems = new SqlDeleteCommand<Entities.RequireItem>();
    deleteItems.Where(t => t.ReqId == req.Id);
    await DataStore.Default.ExecCommandAsync(deleteItems, txn);
    //再删除主表纪录
    await DataStore.Default.DeleteAsync(req, txn);
    //递交事件
    txn.Commit();
}

5.2 修正RequireList视图

5.2.1 模版

<!-- 省略 -->
<el-button @click="onEdit" type="primary" icon="fas fa-edit fa-fw">修正</el-button>
<el-button @click="onDelete" type="primary" icon="fas fa-trash fa-fw">删除</el-button>
<!-- 省略 -->
<el-table :data="items" v-loading="loading" @current-change="onCurrentChanged" border stripe highlight-current-row
        readonly>

5.2.2 剧本

//----省略----
export default class RequireList extends Vue {
    //----省略----
    currentRow = null
    //----省略----
    onCurrentChanged(row) {
        this.currentRow = row
    }
    onEdit() { 
        if (!this.currentRow) {
            this.$message.warning("请先挑选纪录")
            return
        }
        this.loadItems(this.currentRow)
        this.current = this.currentRow
        this.dlgVisible = true
    }
    onDelete() {
        if (!this.currentRow) {
            this.$message.warning("请先挑选纪录")
            return
        }
        this.$confirm('确认删除挑选的纪录吗?', '提醒', {
            confirmButtonText: '肯定',
            cancelButtonText: '作废',
            type: 'warning'
        }).then(() => {
            dns.Services.RequirementService.Delete(this.currentRow).then(res => {
                this.$message.success("删除胜利");
            }).catch(err => {
                this.$message.error("删除失利: " + err)
            })
        }).catch(() => { })
    }
    //----省略----

5.2.3 预览

AppBox实战: 怎样完成一对多表单的增编削查 IT教程 第7张

六、本篇小结

作者上篇提到完成自力的不依赖内置存储的版本,本篇示例等于基于此版本,下一步重点是针对此版本的测试与Bug修复。另一边码代码一边码文实属不容易,作者须要您的支撑请您多多点赞引荐!

参与评论