随笔 - 435 文章 - 0 评论 - 110 阅读 - 62万

abp-vnext-pro 实战（三，给用户表增加头像，工号，类型字段）

在Domain项目新建一个类，包含用户表要增加的头像，工号，类型字段

public class AbpUserExt : FullAuditedAggregateRoot<Guid>
{
    /// <summary>
    /// 头像
    /// </summary>
    public string Avatar { get; set; }
 
    /// <summary>
    /// 个人介绍
    /// </summary>
    public string Introduction { get; set; }
 
    /// <summary>
    /// 用户编号（例如工号）
    /// </summary>
    public string UserCode { get; set; }
 
    /// <summary>
    /// 用户类型，0=后台，1=前台，2=分销商。。。
    /// </summary>
    public int UserType { get; set; }
 
}

在XXXDbContextModelCreatingExtensions 的方法里，映射到原来的AbpUsers表

            builder.Entity<AbpUserExt>(b =>
            {
                b.ToTable(AbpIdentityDbProperties.DbTablePrefix + "Users");
                b.ConfigureByConvention();
                b.Property(b => b.Avatar).IsRequired(false).HasMaxLength(255).HasComment("用户头像");
                b.Property(b => b.Introduction).IsRequired(false).HasMaxLength(255).HasComment("用户简介");
                b.Property(b => b.UserCode).IsRequired(false).HasMaxLength(50).HasComment("用户编号");
                b.Property(b => b.UserType).IsRequired(true).HasDefaultValue(0).HasComment("用户类型");
                b.HasOne<IdentityUser>().WithOne().HasForeignKey<AbpUserExt>(x => x.Id);
            });

运行DbMigrator 项目，会出错。

System.InvalidOperationException:“'AbpUserExt.DeletionTime' and 'IdentityUser.DeletionTime' are both mapped to column 'DeletionTime' in 'AbpUsers', but are configured to use differing provider types ('DateTime' and 'DateTime?').”

改成

  public class AbpUserExt 
    { 
        public Guid Id { get; set; }
        /// <summary>
        /// 头像
        /// </summary>
        public string Avatar { get; set; }

        /// <summary>
        /// 个人介绍
        /// </summary>
        public string Introduction { get; set; }

        /// <summary>
        /// 用户编号（例如工号）
        /// </summary>
        public string UserCode { get; set; }

        /// <summary>
        /// 用户类型，0=后台，1=前台，2=分销商。。。
        /// </summary>
        public int UserType { get; set; }

    }

运行后台Swagger，会发现"extraProperties": {} 里面的数据都是null,没有拿到值，需要在XXXEfCoreEntityExtensionMappings里面的加上映射

ObjectExtensionManager.Instance
                    .MapEfCoreProperty<IdentityUser, string>(
                       "Avatar",
                        (entityBuilder, propertyBuilder) =>
                        {
                            propertyBuilder.HasMaxLength(255);
                        }
                    )
                    .MapEfCoreProperty<IdentityUser, string>(
                       "Introduction",
                        (entityBuilder, propertyBuilder) =>
                        {
                            propertyBuilder.HasMaxLength(255);
                        }
                    )
                    .MapEfCoreProperty<IdentityUser, string>(
                       "UserCode",
                        (entityBuilder, propertyBuilder) =>
                        {
                            propertyBuilder.HasMaxLength(50);
                        }
                    )
                    .MapEfCoreProperty<IdentityUser, int>(
                       "UserType"
                    )
                    ;

前端列表，在abpUser.ts 编辑tableColumns 变量

export const tableColumns: BasicColumn[] = [
  {
    title: t('routes.admin.userManagement_userName'),
    dataIndex: 'userName',
  },

  {
    title: t('routes.admin.userManagement_userCode'),
    dataIndex: 'extraProperties',
    customRender: ({ text }) => {
      return text && text.UserCode;
    },
  },

在editFormSchema定义里增加

export const editFormSchema: FormSchema[] = [
  {
{
    field: 'userCode',
    component: 'Input',
    label: t('routes.admin.userManagement_userCode'),
    required: false,
    labelWidth: 85,
    colProps: {
      span: 12,
    },
    componentProps: {
      autocomplete: 'off',
    },
  },
  {
    field: 'userType',
    component: 'Input',
    componentProps: {
      autocomplete: 'off',
    },
    label: t('routes.admin.userManagement_userType'),
    required: false, //是否必须
    labelWidth: 130,
    colProps: {
      span: 12,
    },
}

编辑界面 EditAbpUser.vue里

    let currentUserInfo = new IdentityUserDto();
    const [registerModal, { changeOkLoading, closeModal }] = useModalInner((data) => {
      currentUserInfo = data.record;
      
      setFieldsValue({
        name: data.record.name,
        userName: data.record.userName,
        email: data.record.email,
        phoneNumber: data.record.phoneNumber,
        userCode: data.record.extraProperties.UserCode,
        userType: data.record.extraProperties.UserType,
      });
    });

新增界面CreateAbpUser.vue

      // 保存用户
      const submit = async () => {
        try {
          let request = getFieldsValue() as IdentityUserCreateDto;
　　　　　　//后端的属性是首字母大写UserCode,UserType,不这样写会显示UserType 不能为空
          request.extraProperties.UserCode=request.extraProperties.userCode
          request.extraProperties.UserType = request.extraProperties.userType
          console.log('UserType:');
          console.log(request.extraProperties.UserType);
          request.roleNames = defaultRolesRef.value;
          await createUserAsync({
            request,
            changeOkLoading,
            validate,
            closeModal,
            resetFields,
          });
          defaultRolesRef.value.length = 0;

提交

 const submit = async () => {
      try {
        let request = getFieldsValue();

        if (request.password != request.confirmPassword) {
          message.error(t("routes.admin.editPasswordMessage"));
        }
        let updateUserInput = new UpdateUserInput();
        let userInfo = new IdentityUserUpdateDto();

        userInfo.userName = request.userName;
        userInfo.name = request.name;
        userInfo.surname = currentUserInfo.surname;
        userInfo.email = request.email;
        userInfo.phoneNumber = request.phoneNumber;

        userInfo.extraProperties={UserType:request.userType,UserCode:request.userCode};