wenmo8 发布的文章

在Asp.net Web API中,对业务数据的分页查询处理是一个非常常见的接口,我们需要在查询条件对象中,定义好相应业务的查询参数,排序信息,请求记录数和每页大小信息等内容,根据这些查询信息,我们在后端的Asp.net Web API中实现对这些数据的按需获取,并排序返回给客户端使用。本篇随笔介绍利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理。

1、Web API控制器基类关系

为了更好的进行相关方法的封装处理,我们把一些常规的接口处理放在BaseApiController里面,而把基于业务表的操作接口放在BusinessController里面定义,如下所示。

在BaseApiController里面,我们使用了结果封装和异常处理的过滤器统一处理,以便简化代码,如下控制器类定义。

    /// <summary>
    ///所有接口基类/// </summary>
[ExceptionHandling]
[WrapResult]
public class BaseApiController : ApiController

其中ExceptionHandling 和WrapResult的过滤器处理,可以参考我的随笔《
利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理
》进行详细了解。

而业务类的接口通用封装,则放在了BusinessController控制器里面,其中使用了泛型定义,包括实体类,业务操作类,分页条件类等内容作为约束参数,如下所示。

    /// <summary>
    ///本控制器基类专门为访问数据业务对象而设的基类/// </summary>
    /// <typeparam name="B">业务对象类型</typeparam>
    /// <typeparam name="T">实体类类型</typeparam>
[ApiAuthorize]public class BusinessController<B, T, TGetAllInput>: BaseApiControllerwhere B : class
        whereTGetAllInput : IPagedAndSortedResultRequestwhere T : BaseEntity, new()

2、分页处理接口

其中IPagedAndSortedResultRequest接口,是借鉴ABP框架中对于分页部分的处理,因此分页函数需要实现这个接口,这个接口包含了请求的数量,偏移量, 以及排序等属性定义的。

而BusinessController的分页查询处理函数GetAll定义如下所示。

        /// <summary>
        ///分页获取记录/// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
[HttpGet]public virtual PagedResultDto<T>GetAll([FromUri] TGetAllInput input)
{
var condition =GetCondition(input);var list =GetPagedData(condition, input);returnlist;
}

其中 GetCondition 函数是给子类进行重写,以便处理不同的条件查询的。我们以UserController控制器为例进行说明。

    /// <summary>
    ///用户信息的业务控制器/// </summary>
    public class UserController : BusinessController<User, UserInfo, UserPagedDto>

其中传入的User是BLL业务层类,用来操作数据库;UserInfo是实体类,用来传递记录信息;UserPagedDto 则是分页查询条件类。

    /// <summary>
    ///用户信息的业务查询类/// </summary>
    public classUserPagedDto : PagedAndSortedInputDto, IPagedAndSortedResultRequest
{
/// <summary> ///默认构造函数/// </summary> public UserPagedDto() : base() { }/// <summary> ///参数化构造函数/// </summary> /// <param name="skipCount">跳过的数量</param> /// <param name="resultCount">最大结果集数量</param> public UserPagedDto(int skipCount, int resultCount) : base(skipCount, resultCount)
{
}
/// <summary> ///使用分页信息进行初始化SkipCount 和 MaxResultCount/// </summary> /// <param name="pagerInfo">分页信息</param> public UserPagedDto(PagerInfo pagerInfo) : base(pagerInfo)
{
}
#region Property Members /// <summary> ///所属角色ID/// </summary> public virtual int? Role_ID { get; set; }public virtual int? ID { get; set; }/// <summary> ///用户编码/// </summary> public virtual string HandNo { get; set; }/// <summary> ///用户名/登录名/// </summary> public virtual string Name { get; set; }/// <summary> ///用户密码/// </summary> public virtual string Password { get; set; }/// <summary> ///用户全名/// </summary> public virtual string FullName { get; set; }/// <summary> ///移动电话/// </summary> public virtual string MobilePhone { get; set; }/// <summary> ///邮件地址/// </summary> public virtual string Email { get; set; }/// <summary> ///默认部门ID/// </summary> public virtual string Dept_ID { get; set; }/// <summary> ///所属机构ID/// </summary> public virtual string Company_ID { get; set; }/// <summary> ///父ID/// </summary> public virtual int? PID { get; set; }/// <summary> ///用户呢称/// </summary> public virtual string Nickname { get; set; }/// <summary> ///是否过期/// </summary> public virtual bool? IsExpire { get; set; }/// <summary> ///过期日期/// </summary> public virtual DateTime? ExpireDateStart { get; set; }public virtual DateTime? ExpireDateEnd { get; set; }/// <summary> ///职务头衔/// </summary> public virtual string Title { get; set; }/// <summary> ///身份证号码/// </summary> public virtual string IdentityCard { get; set; }/// <summary> ///办公电话/// </summary> public virtual string OfficePhone { get; set; }/// <summary> ///家庭电话/// </summary> public virtual string HomePhone { get; set; }/// <summary> ///住址/// </summary> public virtual string Address { get; set; }/// <summary> ///办公地址/// </summary> public virtual string WorkAddr { get; set; }/// <summary> ///性别/// </summary> public virtual string Gender { get; set; }/// <summary> ///出生日期/// </summary> public virtual DateTime? BirthdayStart { get; set; }public virtual DateTime? BirthdayEnd { get; set; }/// <summary> ///QQ号码/// </summary> public virtual string QQ { get; set; }/// <summary> ///个性签名/// </summary> public virtual string Signature { get; set; }/// <summary> ///审核状态/// </summary> public virtual string AuditStatus { get; set; }/// <summary> ///备注/// </summary> public virtual string Note { get; set; }/// <summary> ///自定义字段/// </summary> public virtual string CustomField { get; set; }/// <summary> ///默认部门名称/// </summary> public virtual string DeptName { get; set; }/// <summary> ///所属机构名称/// </summary> public virtual string CompanyName { get; set; }/// <summary> ///排序码/// </summary> public virtual string SortCode { get; set; }/// <summary> ///创建人/// </summary> public virtual string Creator { get; set; }/// <summary> ///创建人ID/// </summary> public virtual string Creator_ID { get; set; }/// <summary> ///创建时间/// </summary> public virtual DateTime? CreateTimeStart { get; set; }public virtual DateTime? CreateTimeEnd { get; set; }/// <summary> ///编辑人/// </summary> public virtual string Editor { get; set; }/// <summary> ///编辑人ID/// </summary> public virtual string Editor_ID { get; set; }/// <summary> ///编辑时间/// </summary> public virtual DateTime? EditTimeStart { get; set; }public virtual DateTime? EditTimeEnd { get; set; }/// <summary> ///是否已删除/// </summary> public virtual bool? Deleted { get; set; }/// <summary> ///当前登录IP/// </summary> public virtual string CurrentLoginIP { get; set; }/// <summary> ///当前登录时间/// </summary> public virtual DateTime CurrentLoginTime { get; set; }/// <summary> ///当前Mac地址/// </summary> public virtual string CurrentMacAddress { get; set; }/// <summary> ///微信绑定的OpenId/// </summary> public virtual string OpenId { get; set; }/// <summary> ///微信多平台应用下的统一ID/// </summary> public virtual string UnionId { get; set; }/// <summary> ///公众号状态/// </summary> public virtual string Status { get; set; }/// <summary> ///公众号/// </summary> public virtual string SubscribeWechat { get; set; }/// <summary> ///科室权限/// </summary> public virtual string DeptPermission { get; set; }/// <summary> ///企业微信UserID/// </summary> public virtual string CorpUserId { get; set; }/// <summary> ///企业微信状态/// </summary> public virtual string CorpStatus { get; set; }#endregion}

它的基类属性包括了MaxResultCount,SkipCount,Sorting等分页排序所需的信息。

另外还包含了对条件查询的属性信息,如果是数值的,布尔类型的,则是可空类型,日期则有起始条件的范围属性等等,也可以根据自己需要定义更多属性用户过滤条件。

如对于出生日期,我们定义一个区间范围来进行查询。

        /// <summary>
        ///出生日期/// </summary>
        public virtual DateTime? BirthdayStart { get; set; }public virtual DateTime? BirthdayEnd { get; set; }

最后,我们根据需要进行判断,获得查询条件即可。

        /// <summary>
        ///获取查询条件并转换为SQL/// </summary>
        /// <param name="input">查询条件</param>
        protected override stringGetCondition(UserPagedDto input)
{
//根据条件,构建SQL条件语句 SearchCondition condition = newSearchCondition();if (!input.Role_ID.HasValue)
{
condition.AddCondition(
"ID", input.ID, SqlOperator.Equal)
.AddCondition(
"IdentityCard", input.IdentityCard, SqlOperator.Equal)
.AddCondition(
"Name", input.Name, SqlOperator.Like)
.AddCondition(
"Note", input.Note, SqlOperator.Like)
.AddCondition(
"Email", input.Email, SqlOperator.Like)
.AddCondition(
"MobilePhone", input.MobilePhone, SqlOperator.Like)
.AddCondition(
"Address", input.Address, SqlOperator.Like)
.AddCondition(
"HandNo", input.HandNo, SqlOperator.Like)
.AddCondition(
"HomePhone", input.HomePhone, SqlOperator.Like)
.AddCondition(
"Nickname", input.Nickname, SqlOperator.Like)
.AddCondition(
"OfficePhone", input.OfficePhone, SqlOperator.Like)
.AddCondition(
"OpenId", input.OpenId, SqlOperator.Like)
.AddCondition(
"Password", input.Password, SqlOperator.Like)
.AddCondition(
"PID", input.PID, SqlOperator.Like)
.AddCondition(
"QQ", input.QQ, SqlOperator.Equal)
.AddCondition(
"DeptPermission", input.DeptPermission, SqlOperator.Like)
.AddCondition(
"AuditStatus", input.AuditStatus, SqlOperator.Equal)
.AddCondition(
"FullName", input.FullName, SqlOperator.Like)
.AddCondition(
"Gender", input.Gender, SqlOperator.Equal)
.AddCondition(
"CustomField", input.CustomField, SqlOperator.Like)
.AddCondition(
"IsExpire", input.IsExpire, SqlOperator.Equal)
.AddCondition(
"Signature", input.Signature, SqlOperator.Like)
.AddCondition(
"SortCode", input.SortCode, SqlOperator.Like)
.AddCondition(
"Status", input.Status, SqlOperator.Equal)
.AddCondition(
"CorpStatus", input.CorpStatus, SqlOperator.Equal)
.AddCondition(
"CorpUserId", input.CorpUserId, SqlOperator.Equal)
.AddCondition(
"UnionId", input.UnionId, SqlOperator.Equal)
.AddCondition(
"WorkAddr", input.WorkAddr, SqlOperator.Equal)
.AddCondition(
"SubscribeWechat", input.SubscribeWechat, SqlOperator.Equal)
.AddCondition(
"Title", input.Title, SqlOperator.Like)
.AddCondition(
"CurrentLoginIP", input.CurrentLoginIP, SqlOperator.Like)
.AddCondition(
"CurrentMacAddress", input.CurrentMacAddress, SqlOperator.Like)

.AddCondition(
"Dept_ID", input.Dept_ID, SqlOperator.Equal)
.AddCondition(
"DeptName", input.DeptName, SqlOperator.Like)
.AddCondition(
"CompanyName", input.CompanyName, SqlOperator.Like)
.AddCondition(
"Company_ID", input.Company_ID, SqlOperator.Equal)
.AddCondition(
"Editor_ID", input.Editor_ID, SqlOperator.Equal)
.AddCondition(
"Editor", input.Editor, SqlOperator.Equal)
.AddCondition(
"Creator_ID", input.Creator_ID, SqlOperator.Equal)
.AddCondition(
"Creator", input.Creator, SqlOperator.Equal)

.AddDateCondition(
"CreateTime", input.CreateTimeStart, input.CreateTimeEnd)
.AddDateCondition(
"EditTime", input.EditTimeStart, input.EditTimeEnd)
.AddDateCondition(
"ExpireDate", input.ExpireDateStart, input.ExpireDateEnd)
.AddDateCondition(
"Birthday", input.BirthdayStart, input.BirthdayEnd);
}
return condition.BuildConditionSql().Replace("Where", "");
}

前面介绍到,我们BusinessController基类定义了常规的分页查询GetAll函数,如下所示。

        /// <summary>
        ///分页获取记录/// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
[HttpGet]public virtual PagedResultDto<T>GetAll([FromUri] TGetAllInput input)
{
var condition =GetCondition(input);var list =GetPagedData(condition, input);returnlist;
}

其中 GetCondition 是由子类进行重写处理,生成具体的查询条件的。

由于这里的Sorting信息是一个字符串的排序信息,如 Name DESC或者Name ASC类似的信息,前者是字段名,后者是排序降序还是升序的标识,我们在业务里面,需要拆分一下进行组合条件,如下拆分。

            //分页查询条件
            string sortName = null; //排序字段
            bool isDesc = true;if (!string.IsNullOrEmpty(input.Sorting))
{
var sortInput = input asISortedResultRequest;if (sortInput != null)
{
if (!string.IsNullOrWhiteSpace(sortInput.Sorting))
{
List
<string> strNames = sortInput.Sorting.ToDelimitedList<string>(" ");
sortName
= (strNames.Count > 0) ? strNames[0] : null;
isDesc
= sortInput.Sorting.IndexOf("desc", StringComparison.OrdinalIgnoreCase) > 0;
}
}
}

这样我们或者SortName,以及是否降序的判断。

然后根据获得分页信息,并调用业务类的接口函数获取对应记录,构建为分页所需的JSON对象返回。

            //构建分页对象
            var pagerInfo = new PagerInfo() { CurrenetPageIndex = currentPage, PageSize =pageSize };if (!string.IsNullOrWhiteSpace(sortName))
{
list
=baseBLL.FindWithPager(condition, pagerInfo, sortName, isDesc);
}
else{
list
=baseBLL.FindWithPager(condition, pagerInfo);
}
if (list != null)
{
foreach (var item inlist)
{
ConvertDto(item);
//对Dto部分内容进行转义 }
}
//返回常用分页对象 var result = new PagedResultDto<T> { TotalCount = totalCount, Items =list };return result;

其中 PagedResultDto 是一个标准的分页数据返回的对象,定义如下所示。

[Serializable]public class PagedResultDto<T> : ListResultDto<T>, IPagedResult<T>{/// <summary>
        ///Total count of Items./// </summary>
        public int TotalCount { get; set; }
[Serializable]public class ListResultDto<T> : IListResult<T>{/// <summary>
        ///List of items./// </summary>
        public IReadOnlyList<T>Items
{
get { return _items ?? (_items = new List<T>()); }set { _items =value; }
}
private IReadOnlyList<T> _items;

最后返回的结果集合类似如下所示:

展开单条记录明细如下所示。

这个对象使用了Camel样式的属性处理,所以返回的属性全部是Camel的格式。

    /// <summary>
    ///统一处理Json的格式化信息/// </summary>
    public static classJsonFomatterHelper
{
/// <summary> ///获取JSON的格式化信息/// </summary> /// <returns></returns> public staticJsonMediaTypeFormatter GetFormatter()
{
var formatter =GlobalConfiguration.Configuration.Formatters.JsonFormatter;
formatter.SerializerSettings
= newJsonSerializerSettings
{
Formatting
=Formatting.Indented,
ContractResolver
= newCamelCasePropertyNamesContractResolver(),
DateFormatHandling
=DateFormatHandling.IsoDateFormat,
DateFormatString
= "yyyy-MM-dd HH:mm:ss",
};
returnformatter;
}
}

关于统一结果返回的封装处理,这里采用了WrapResultAttribute进行处理,详细可以参考我的随笔《
利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理
》进行详细了解。

            //重新封装回传格式
            actionExecutedContext.Response = newHttpResponseMessage(statusCode)
{
Content
= new ObjectContent<AjaxResponse>(newAjaxResponse(content), JsonFomatterHelper.GetFormatter())
};

最近在改造原有Bootstrap开发框架,增加一个Vue&Element前端的时候,发现需要处理一个级联更新的过程,就是选择公司,然后更新部门,选择部门,或者人员列表,选择作为主管的一个实现,不同于Bootstrap使用Select2的插件,这里前端是Vue&Element,那么我们可以选择下拉列表的方式展现,在Element中可以考虑使用
Cascader 级联选择器
,也可以考虑使用封装
Tree 树形控件
,或者使用第三方组件
Vue-TreeSelect组件
。本篇随笔介绍使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理过程。

1、Vue-TreeSelect组件的使用

在我早期随笔《
循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
》中也大概介绍了一下Vue-TreeSelect组件,这里我们再来回顾一下它的用法。

GitHub地址:
https://github.com/riophae/vue-treeselect

官网地址:
https://vue-treeselect.js.org/

NPM安装:

npm install --save @riophae/vue-treeselect

界面代码如下所示。

<template>
  <divid="app">
    <treeselectv-model="value":multiple="true":options="options" />
  </div>
</template>

这里的value就是选中的集合,options则是树列表的节点数据,和Element中的Tree组件一样,options的格式也包含id, lable, children这几个属性。

如果常规的数据提供,我们只要准备这些数据格式给options即可。

如下面的数据格式。

      treedata: [//初始化树列表
        { //默认数据
          label: '一级 1',
children: [{
label:
'二级 1-1'}]
}
]

不过我们一般数据是动态从后端接口中提取的,不是静态的,所以需要使用相应的方法来获取,并设置。

如果是后端接口无法满足特定的属性名称,那么Vue-TreeSelect组件也提供了一个 normalizer 属性方法用来重定义节点属性名称

类似下面的javascript代码

export default{
data: ()
=>({
value:
null,
options: [ {
key:
'a',
name:
'a',
subOptions: [ {
key:
'aa',
name:
'aa',
} ],
} ],
normalizer(node) {
return{
id: node.key,
label: node.name,
children: node.subOptions,
}
},
}),
}

通过normalizer 属性方法可以把数据源的属性映射到树列表中去。有时候我们对于空列表,可能还需要判断为空,并移除这个属性,代码如下所示。

normalizer (node) {if (node.children && !node.children.length) {
delete node.children
}
return{
id: node.key,
label: node.name,
children: node.children,
}
},

另外,有时候需要在列表值变化的时候,触发级联更新,那么就需要处理@input事件了。

  <treeselect
:options
="options":value="value":searchable="false"@input="updateValue" />

2、公司-部门-人员级联下拉列表的处理

综合上面的几个特点,我们公司-部门-人员级联下拉列表的处理就需要上面的知识点来处理。

在上面的弹出对话框中,选择所属公司,默认部门,所属经理的操作,级联处理过程效果如下所示。

界面代码如下所示

  <el-col:span="12">
    <el-form-itemlabel="所属公司"prop="company_ID">
      <treeselect:options="myGroupCompany"v-model="addForm.company_ID":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true"@input="updateGroupCompany"placeholder="所属公司" />
    </el-form-item>
  </el-col>
  <el-col:span="12">
    <el-form-itemlabel="默认部门"prop="dept_ID">
      <treeselect:options="myDeptTree"v-model="addForm.dept_ID":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true"@input="updateDeptUser":normalizer="normalizer"placeholder="所属部门" />
    </el-form-item>
  </el-col>
  <el-col:span="12">
    <el-form-itemlabel="所属经理"prop="pid">
      <treeselect:options="myDeptUser"v-model="addForm.pid":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true":normalizer="normalizer"placeholder="所属经理" />
    </el-form-item>
  </el-col>

如第一项公司列表,我们获取列表后设置options的对象即可。这里面需要定义几个变量 myGroupCompany、myDeptTree、myDeptUser的集合属性。

这里保留了normalizer 映射新属性的做法,不过由于属性名称默认和树控件的属性一致,也可以省略。

在其中更新处理,用到了 @input="updateGroupCompany" 、@input="updateDeptUser" 用于触发更新其他关联内容的事件。

另外一点,我们的新增或者编辑框中v-modal中关联的值,需要设置为null即可。

  addForm: {//新建表单
    id: '',
pid:
null,
dept_ID:
null,
company_ID:
null,
................
},

在显示弹出对话框,打开新增用户的时候,需要触发获取公司信息列表,如下所示。

showAdd () {this.resetForm('addForm')this.initData() //打开新增窗体的时候,初始化公司列表
      this.isAdd = true},

而其中initData的函数操作如下所示。

async initData () {var param ={}
await ou.GetMyGroupCompany(param).then(data
=>{
console.log(data.result)
var newTreedata =getJsonTree(data.result, {
id:
'id',
pid:
'pid',
children:
'children',
label:
'name'});this.myGroupCompany =newTreedata
})
},

这里调用ou的api进行获取公司信息的操作

import request from '@/utils/request'import BaseApi from'@/api/base-api'
//业务类自定义接口实现, 通用的接口已经在BaseApi中定义
class Api extends BaseApi {//获取集团公司列表。如果是超级管理员,返回集团+公司节点;如果是公司管理员,返回其公司节点
GetMyGroupCompany(data) {returnrequest({
url:
this.baseurl + 'GetMyGroupCompany',
method:
'get',
params: data
})
}
..........
}

而公司信息触发部门更新,我们用如下函数来处理变化。

async updateGroupCompany (value, instanceId) {//console.log(value + '~' + instanceId)

      this.addForm.dept_ID = null //置空控件内容
      if (!this.isEmpty(value)) {var param ={ parentId: value }
await user.GetDeptJsTreeJson(param).then(data
=>{this.myDeptTree =data.result
})
}
},

由于User的API中 GetDeptJsTreeJson返回的是符合树控件节点属性名称的,因此可以直接赋值给vue-TreeSelect的opition值。

<treeselect:options="myDeptTree"v-model="addForm.dept_ID":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true"@input="updateDeptUser":normalizer="normalizer"placeholder="所属部门" />

而部门选择后,则触发部门用户列表的更新,如下代码所示。

async updateDeptUser (value, instanceId) {//console.log(value + '~' + instanceId)
      this.addForm.pid = null //置空控件内容
      if (!this.isEmpty(value)) {var param ={ deptId: value }
await user.GetUserDictJson(param).then(data
=>{this.myDeptUser =data.result
})
}
},

同样,由于由于User的API中 GetUserDictJson 返回的是符合树控件节点属性名称的,因此可以直接赋值给vue-TreeSelect的opition值。

<treeselect:options="myDeptUser"v-model="addForm.pid":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true":normalizer="normalizer"placeholder="所属经理" />

3、特殊处理的内容

前面我们介绍了,如果获取内容和树控件的属性不一致,需要进行转义映射,如下代码所示。

normalizer (node) {if (node.children && !node.children.length) {deletenode.children
}
return{
id: node.id,
label: node.label,
children: node.children,
}
},

并在界面代码上指定normalizer处理。

:normalizer="normalizer"

有时候,我们返回的对象集合可能是一个二维列表内容,它本身有id,pid来标识它的层次关系,那么如果我们转换为嵌套列表的话,就可以使用getJsonTree 方法进行转换。

具体操作可以参考:
https://blog.csdn.net/unamattin/article/details/77152451

使用的时候,导入这个类方法即可。

import { getJsonTree } from '@/utils/json-tree.js' //转换二维表数据为树列表数据的辅助类

如果前面介绍的

async initData () {var param ={}
await ou.GetMyGroupCompany(param).then(data
=>{
console.log(data.result)
var newTreedata =getJsonTree(data.result, {
id:
'id',
pid:
'pid',
children:
'children',
label:
'name'});this.myGroupCompany =newTreedata
})
},

如果两个都是嵌套结构的树列表,但是属性名称不同,那么也可以通过map的操作方法,定义一个js函数进行转换即可,转换的代码如下所示。

    getTree () { //树列表数据获取
      var param ={}
user.GetMyDeptJsTreeJson(param).then(data
=>{//console.log(data) this.treedata = [];//树列表清空 var list =data.resultif(list) {this.treedata =list
}
//修改另一个Treedata const ass = (data) =>{
let item
=[];
data.map((list, i)
=>{
let newData
={};
newData.id
=list.id;
newData.label
=list.label;
newData.children
= list.children ? ass(list.children) : null; //如果还有子集,就再次调用自己 //如果列表为空,则移除children if (list.children && !list.children.length) {deletenewData.children;
}
item.push(newData);
});
returnitem;
}
this.selectTreeData =ass(list)
});
},

以上就是数据层次结构相同,属性名称不同的时候,进行转换处理的另外一种方式。

当然,我们定义返回列表数据的时候,如果需要用来绑定在树列表中的,也可以在后端WebAPI进行定义好符合格式的数据,避免在前端额外的代码转换。

        /// <summary>
        ///根据用户获取对应人员层次(给树控件显示的下拉列表)(值为ID)/// </summary>
        /// <param name="deptId">用户所在部门</param>
        /// <returns></returns>
        public List<TreeNodeItem> GetUserDictJson(intdeptId)
{
var itemList = new List<TreeNodeItem>();
itemList.Insert(
0, new TreeNodeItem("-1", ""));var list = BLLFactory<User>.Instance.FindByDept(deptId);foreach (var info inlist)
{
itemList.Add(
newTreeNodeItem(info.ID, info.FullName));
}
returnitemList;
}

其中 TreeNodeItem 类定义了Id, Label,Children的属性,这样前端就可以直接绑定使用了。

另外,在提一下,使用Vue-TreeSelect组件的时候,有时候需要封装它为自定义组件,那么normalizer也会作为prop属性作为配置的,这个时候,可以在自定义组件中定义好默认的normalizer。具体代码如下所示。

<template>
  <div>
    <divclass="flex-container">
      <divclass="flex-item">
        <treeselectref="tree"v-model="svalue":disabled="disabled":options="options":multiple="false":flat="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true"clearable :max-height="200":placeholder="placeholder":normalizer="normalizer" />
      </div>
      <divv-if="showcheck"class="flex-item">
        <el-checkboxv-model="isTop":label="checkboxLable"border @change="checkChange" />
      </div>
    </div>
  </div>
</template>

那么prop中的normalizer的定义如下所示。

使用这个自定义组件的时候,可以指定它的normalizer。

<MyTreeselectTopv-model="editForm.pid":options="selectTreeData":normalizer="normalizer" />

以上就是前后端树列表的绑定处理,以及使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的功能操作,希望大家不吝赐教。

把Bootstrap框架界面改造为Vue+Element前端界面后,

页面列表效果如下所示。

编辑界面效果如下所示。

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理


循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用


循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用


循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理


循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制

VUE+Element 前端应用开发框架功能介绍

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

在前篇随笔《
使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理
》中介绍了Vue-TreeSelect组件的使用,包括使用v-modal绑定值,normalizer 来映射属性处理,还有一个@input时间处理值变更的关联操作。

在常规的新增界面处理过程中,弹出的对话框是已经构建完成的了,所有界面元素已经渲染,因此能够正常解决级联问题的处理。但在编辑界面中,确无法保证界面渲染完成,导致无法级联更新的问题。我们这里再进一步探讨更新的问题:在使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题。

1、问题描述

公司-部门-人员级联下拉列表的处理如下所示。

在编辑界面的时候,如果也是使用@input的事件来处理,则得不到有效的级联关系处理。

如下,我们编辑框绑定和处理更新的界面代码如下所示,这里和新增对话框一样,采用@input事件处理更新的操作。

    <el-col:span="12">
      <el-form-itemlabel="所属公司"prop="company_ID">
        <treeselect:options="myGroupCompany"v-model="editForm.company_ID":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true"@input="updateGroupCompany"placeholder="所属公司" />
      </el-form-item>
    </el-col>
    <el-col:span="12">
      <el-form-itemlabel="默认部门"prop="dept_ID">
        <treeselect:options="myDeptTree"v-model="editForm.dept_ID":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true"@input="updateDeptUser":normalizer="normalizer"placeholder="所属部门" />
      </el-form-item>
    </el-col>
    <el-col:span="12">
      <el-form-itemlabel="所属经理"prop="pid">
        <treeselect:options="myDeptUser"v-model="editForm.pid":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true":normalizer="normalizer"placeholder="所属经理" />
      </el-form-item>
    </el-col>

显示编辑对话框界面的代码也和新增操作类似

    async showEdit (id) { //显示编辑对话框处理
      if (!id || typeof (id) === 'undefined') {this.msgWarning('请选择编辑的记录!');return;
}
this.resetForm('editForm')
await
this.initData()var param ={ id: id }
await user.Get(param).then(data
=>{
Object.assign(
this.editForm, data.result)this.isEdit = true //编辑状态 })//获取列表数据 this.getFunctionsByUser(id)
},

不过打开已有记录的时候,第一次是无法进行级联显示正确的内容的,后面如果变化公司,则可以看到正常级联关系。猜测应该是在渲染顺序的问题,导致无法触发更新。

可以看到选框中的unknown字样,表明没有触发级联关系,没有正确获取到列表数据源。

2、用watch变量方式解决问题

既然无法通过上面的方式处理,我们来变通下,默认也是初始化所属公司列表的数据源,但不在监听它的@input事件,而是通过watch变量的方式,监控editForm里面对应的属性变化,然后在触发更新关联的内容。

我们取消@input事件,模板代码变化如下所示

                <el-col:span="12">
                  <el-form-itemlabel="所属公司"prop="company_ID">
                    <treeselect:options="myGroupCompany"v-model="editForm.company_ID":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true"placeholder="所属公司" />
                  </el-form-item>
                </el-col>
                <el-col:span="12">
                  <el-form-itemlabel="默认部门"prop="dept_ID">
                    <treeselect:options="myDeptTree"v-model="editForm.dept_ID":searchable="false":default-expand-level="Infinity":open-on-click="true":open-on-focus="true":normalizer="normalizer"placeholder="所属部门" />
                  </el-form-item>
                </el-col>

然后监听编辑表单的两个属性变化,如下代码所示。

  watch: { //对过滤内容进行监控,实现树列表过滤
    'editForm.company_ID': function(val, oldval) {if(val) {this.updateGroupCompany(val)
}
},
'editForm.dept_ID': function(val, oldval) {if(val) {this.updateDeptUser(val)
}
}
},

这样在编辑框中公司ID变化的时候,触发部门列表的更新;部门ID变化的时候,触发用户列表的更新即可。

再来看看,第一次打开用户信息,可以看到正常的进行展示了。

这样的watch监控变量的变化,还可以在同步处理很多操作,如转换界面组件的值的时候,也可以处理

  watch: { //对过滤内容进行监控,实现树列表过滤
    //键路径必须加上引号
    'addForm.tags_array': function(val, oldval) {if(val) {this.addForm.tags =val.toString()
}
},
'editForm.tags_array': function(val, oldval) {if(val) {this.editForm.tags =val.toString()
}
}
},

又或者在自定义组件的时候,监控某些内容变化,触发界面更新的处理。

watch: {
ouid (value) {
//属性变化触发更新 this.ouId =valuethis.getlist()
},
showaction (value) {
//属性变化触发更新 this.showAction =valuethis.getlist()
}
},

为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理


循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用


循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用


循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理


循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制

VUE+Element 前端应用开发框架功能介绍

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle、SqlServer、MySql、PostgreSQL、DB2、Sqlite、Access等常规数据库,可通过配置进行自由切换,使用Enterprise Library模块进行数据访问的控制的。Bootstrap开发框架的页面以及后台代码,通过代码生成工具Database2Sharp进行快速开发,实现整体性开发的最大效率提高。

Bootstrap开发框架已经应用在很多客户的BS架构的软件管理系统中,基于底层代码的重用,应客户的需要,我们在这个基础上扩展增加了Vue&Element的前端,由于Vue&Element的前端需要采用Web API的接口,我们在这个基础上借鉴了ABP框架的Web API接口处理及前端管理界面的内容,在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端。

1、Bootstrap框架的架构及增加Web API + Vue&Element前端的处理

Bootstrap框架架构:

在之前Bootstrap开发框架的架构如下所示,其UI层是各种应用功能模块,而底层是和Winform框架、混合框架公用的BLL业务逻辑层等分层,并通过实体层实现数据的传递处理。

数据访问层通过微软企业库,较好统一了数据处理的模型,很容易实现了 Oracle、SqlServer、MySql、PostgreSQL、DB2、Sqlite、达梦、Access等常规数据库的支持操作。

控制器设计:

Bootstrap开发框架沿用了我的《
Winform开发框架
》和《
基于EasyUI的Web框架》
的很多架构设计思路和特点,对Controller进行了封装。使得控制器能够获得很好的继承关系,并能以更少的代码,更高效的开发效率,实现Web项目的开发工作,整个控制器的设计思路如下所示。

增加WebApi+Vue&Element前端后的架构设计:

Web API后端的架构设计:

这个是属于前端、后端完全分离的架构设计,后端采用基于Asp.net的Web API技术,并提供按域来管理API的分类,Web API如下架构所示。

通过上面的架构设计,可以看出,底层BLL、DAL、Entity、IDAL、公用类库等分层都是完全通用的,不同的是,我们后端只是提供Web API的接口服务给前端,这个和我们的《
ABP框架使用
》的理念一致,前后端分离。

为了更好的进行后端Web API控制器的相关方法的封装处理,我们把一些常规的接口处理放在BaseApiController里面,而把基于业务表的操作接口放在BusinessController里面定义,如下所示。

在BaseApiController里面,我们使用了结果封装和异常处理的过滤器统一处理。

    /// <summary>
    ///所有接口基类/// </summary>
[ExceptionHandling]
[WrapResult]
public class BaseApiController : ApiController

其中ExceptionHandling 和WrapResult的过滤器处理,可以参考我的随笔《
利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理
》进行详细了解。

而业务类的接口通用封装,则放在了BusinessController控制器里面,其中使用了泛型定义,包括实体类,业务操作类,分页条件类等内容作为约束参数,如下所示。

    /// <summary>
    ///本控制器基类专门为访问数据业务对象而设的基类/// </summary>
    /// <typeparam name="B">业务对象类型</typeparam>
    /// <typeparam name="T">实体类类型</typeparam>
[ApiAuthorize]public class BusinessController<B, T, TGetAllInput>: BaseApiControllerwhere B : class
        whereTGetAllInput : IPagedAndSortedResultRequestwhere T : BaseEntity, new()

通过Web API接口返回结果的统一封装处理,我们定义了相关的格式如下所示。

其中result是返回对应的对象信息,如果没有则返回null.

如果是分页查询返回结果集合,其结果如下所示。

展开单条记录明细如下所示。

Vue&Element的前端的架构设计:

而Vue&Element的前端的架构设计,也借鉴了我们ABP框架的前端管理部分,详细也可以了解下我的相关随笔《
循序渐进VUE+Element
》。

Vue&Element的前端的架构设计如下所示。

引入了前后端分离的Vue + Element 作为前端技术路线,那么前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了。

一般来说,我们页面模块可能会涉及到Store模块,用来存储对应的状态信息,也可能是直接访问API模块,实现数据的调用并展示。在页面开发过程中,多数情况下,不需要Store模块进行交互,一般只需要存储对应页面数据为全局数据状态的情况下,才可能启用Store模块的处理。

通过WebProxy代理的处理,我们可以很容易在前端中实现跨域的处理,不同的路径调用不同的域名地址API都可以,最终转换为本地的API调用,这就是跨域的处理操作。

前端根据ABP后端的接口进行前端JS端的类的封装处理,引入了ES6类的概念实现业务基类接口的统一封装,简化代码。

权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、操作日志、登录日志等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。

2、WebApi+Vue&Element的前端界面展示

主体框架界面采用的是基于后台配置的菜单动态生成,左侧是菜单,右边顶部是特定导航条和内容区,这个和我们ABP框架的前端界面是一致的。

系统主界面的开发,基本上都是标准的界面,在系统左侧放置系统菜单,右侧中间区域则放置列表展示内容,但是在系统菜单比较多的时候,就需要把菜单分为几级处理。系统菜单在左侧放置一个自定义菜单组件列表,这样通过树形列表的收缩折叠,就可以放置非常多的菜单功能了。

用户管理界面,沿袭Bootstrap框架的布局进行管理,通过用户机构方式,快速展示用户分页列表,如下界面所示。

机构管理界面如下所示。

角色管理界面如下所示。

其角色的编辑界面如下所示,包括了基础信息、用户、菜单、权限等项目。

整个系统的菜单,既可以通过默认Mock的初始菜单,也可以通过后端API获得的菜单资源,动态在界面上进行展示,系统界面左侧的菜单是动态获取并展示出来的,结合路由的判断可以限制用户访问的菜单权限。

菜单管理界面如下所示。

菜单资源在角色管理中分配给具体角色,即可实现对菜单的动态控制管理了。

前端的界面管理,依旧可以通过分拆模块的方式,完成更加方便的组合处理

利用模块化的处理方式,我们可以把界面部分内容作为一个组件进行封装处理,如在权限管理中,我们定义了一部分重用的组件界面,如下所示。

定义好各种界面的自定义组件后,在主界面中进行Import导入使用即可,非常方便重用。

最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提供了很强大的界面组件。因此在原来数据库的基础上,增加Web API+Vue&Element的前端,相当于双前端的后台管理,可以根据自己的喜欢选择不同的开发方式和管理界面。

1、基于WebAPI+Element的方式改造微信框架

在原先的微信框架功能基础上,我们在他们的基础上增加了一个新的前端,完全的前后端分离,后端是基于C#的Web API,通过Area的域方式构建多个模块的应用Web API服务。

前端、后端完全分离的架构设计,后端采用基于Asp.net的Web API技术,并提供按域来管理API的分类,Web API如下架构所示。

原先的解决方案项目继续可以重用。解决方案的工程如下所示,分为对公众号、企业微信、小程序的所有接口封装,以及构建的Bootstrap框架基础的后台管理界面。

在重用这些模块的基础上,我们增加了一个基于Area分区的Web API服务项目。

基础改造过程可以参考《
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
》 、《
利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理
》、《
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
》等随笔。

2、基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

基于Vue&Element前端,可以根据方便把界面拆分作为组件,同时也可以利用双向绑定的方式,减少JS脚本的赋值处理等过程。

首先我们先来了解一下微信投票的设计和后台处理过程,以及后面应用于公众号投票、企业微信投票的处理。

投票相关信息的表设计如下所示。

以上表的意思,就是一个投票发起记录,有多个投票问题,每个投票问题有多个选项,而投票结果存储则比较简单,把投票项目整合即可,相关信息用外键获取处理。

我们来看看改造后的微信投票管理界面如下所示,列表展示可维护的投票记录信息。

新建投票界面如下所示

问题列表可以通过添加多项的方式动态创建,这里面使用了

vue-dynamic-form-component
组件,具体可以参考使用。

查看界面如下所示

测试桌面端的投票界面如下所示

上图中红色方框里面的就是利用Vue&Element动态生成选项的处理方式。

这里拿来详细介绍一下,主要是动态构建属性,往往需要通过Vue.Set的方式来强行关联对象的双向绑定的响应关系。

如上面的动态构建的界面代码如下所示。

  <templatev-for="(item, index) in voteForm.voteItems">
    <el-form-item:label="(index+1) + '、' + item.itemTitle":key="index">
      <el-checkbox-groupv-model="item.choice"v-if="item.choiceType === 1">
        <el-checkboxv-for="(opt, idx) in item.options":label="opt.id":key="idx">{{opt.optionTitle}}</el-checkbox>
      </el-checkbox-group>
      <el-radio-groupv-model="item.choice"v-if="item.choiceType === 0">
        <el-radiov-for="(opt, idx) in item.options":label="opt.id":key="idx">{{opt.optionTitle}}</el-radio>
      </el-radio-group>
    </el-form-item>
  </template>

这里不论是单选框或者多选项,这里面绑定的属性item.choice 不是响应式的,我们需要通过JS代码的方式来关联他们和视图的响应关系,才能记录用户的选择,否则用户不能选择复选框或者单选框的。

我们窗体视图绑定的表单模型如下代码所示。

但是voteitems里面则没有固定的选项,因为这个是动态构建的,另外它的选择项目也是需要设置响应关系才可以绑定视图上。

如下代码就是通过Vue.set的方式来建立他们的关系的。

  vote.GetVoteResult(param).then(data =>{
Object.assign(
this.voteForm, data.result)//给复选框增加选择的集合为空 if (this.voteForm.voteItems && this.voteForm.voteItems.length > 0) {this.voteForm.voteItems.filter(item => item.choiceType === 1).map(function(item, index) {
Vue.set(item,
'choice', [])//设置视图和模型的响应关系 })this.voteForm.voteItems.filter(item => item.choiceType === 0).map(function(item, index) {
Vue.set(item,
'choice', null) //设置视图和模型的响应关系 })
}
})

注意使用Vue.set之前,我们需要导入Vue 对象再使用。

import Vue from 'vue'

这样相当于每条投票项目里面,都这就了一个choice的属性,并且和界面建立了双向绑定的关系,可以响应界面的选择处理。

我们通过工具跟踪到表单的变量就可以很清晰看到它们的数据结构了,如下界面所示。

以上就是在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作的一些经验,希望对大家有所帮助和增益。