基於Admin.NET框架的前端的一些改進和代碼生成處理(2)

来源:https://www.cnblogs.com/wuhuacong/archive/2023/03/29/17267815.html
-Advertisement-
Play Games

在上篇隨筆《基於Admin.NET框架的前端的一些改進和代碼生成處理(1)》中大致介紹了一些關於對Admin.NET框架的前端的改造工作,主要目的就是希望能夠增加代碼的簡潔和可讀性,以及利用代碼生成工具來快速生成相關的代碼,從而減少開發過程中的繁瑣問題。本篇隨筆繼續探討一下,對其中一些模塊功能進行一... ...


在上篇隨筆《基於Admin.NET框架的前端的一些改進和代碼生成處理(1)》中大致介紹了一些關於對Admin.NET框架的前端的改造工作,主要目的就是希望能夠增加前端代碼的簡潔性和可讀性,以及利用代碼生成工具來快速生成相關的代碼,從而減少開發過程中的繁瑣問題。本篇隨筆繼續探討一下,對其中一些模塊功能進行一些修改調整,涉及前後端的一起修改調整。

Admin.NET框架的後端基於基於Furion/.NET 6實現,底層集成SqlSugar;前端則是採用Vue-Next-Admin的前端框架,整體是一套非常不錯的框架。

1、增加批量添加字典項目

 Admin.NET框架的字典管理項目界面如下所示。

它通過列出字典大類,然後在右邊入口進行字典項目的管理,以前我傾向於使用左右視圖分拆的方式,從而實現字典大類和字典項目的快捷管理。

如在隨筆《在Vue&Element前端項目中,對於字典列表的顯示處理 》中介紹到的字典綜合展示方式如下所示。

我們這裡暫且不修改這個頁面,繼續查看其字典項目管理的界面如下所示。

其列表裡面只有一個新增的操作,如果對於初始化字典,則是一份苦差事,反覆的打開錄入是比較費時間的。我們可以使用慣用的方式,來批量錄入字典項目,來提高字典項目初始化處理的效率。

我們在原有界面上增加一個批量錄入,和批量刪除的操作,如下界面所示。

批量新增字典項目的界面,如下所示。

如果字典值和編碼內容不一致,可以使用如下效果進行批量新增

 

批量添加字典項目的頁面,我們是作為一個組件頁面的方式添加,然後在頁面中應用組件即可,如下代碼所示。

對應的批量添加頁面裡面,提交的時候,調用對應的API介面就可以了,如下代碼所示。

// 保存數據處理
async function submitData() {
  var formEl = editRef.value;
  if (!formEl) return;

  await formEl.validate(async (valid) => {
    if (valid) {
      //驗證成功,執行下麵方法
      var result = await dictdata.BatchAdd(editForm); //編輯保存

      if (result) {
        $u.message.success('批量添加字典成功!'); // 提示信息
        emit('submit'); // 提示刷新數據
        closeDialog(); // 重置視窗狀態
      } else {
        $u.message.error('批量添加失敗');
      }
    }
  });
}

對應的業務API類裡面,定義對應的介面函數。

/**
 * 系統字典值表 管理Api
 */
class SysDictDataApi extends BaseApi<SysDictData, AddDictDataInput, UpdateDictDataInput> {
     ............

    /** 批量添加字典項目 */
    BatchAdd = async (data: object) => {
        const url = this.baseUrl + `/BatchAdd`;
        return await this.axiosInstance.post<UnifyResult<void>>(url, data)
    }
}
export default new SysDictDataApi('/api/sysDictData');

後端增加對應的處理介面,實現數據的批量添加即可。

至此,批量添加字典項目的操作,配合前端後端一起,就可以完成該操作了。 

 

2、顯示/隱藏開發測試菜單

在Vue-Next-Admin的前端框架演示項目裡面,本身提供了很多Demo案例的頁面展示,不過Admin.NET應該為了簡化框架的效果,從而把這些演示的案例菜單移除了,不過視圖文件依舊保存在項目裡面,我們開發測試過程中,有時候需要參考這些頁面效果,以便瞭解一些插件的功能和特點,因此可能偶爾需要使用瞭解下的。而在部署的時候,肯定是需要隱藏起來,不讓客戶使用這些Demo,否則增加煩惱。

為了更好的管控這些演示菜單連接的入口,我們在原有菜單的表裡面增加一個Tag標簽,用來標識相關的菜單功能,例如我們把測試頁面的Tag標註為 dev, 而菜單表裡面本身有是否隱藏和是否啟用的設置,隱藏相對於菜單而已不顯示(但包含路由),是否啟用相對於路由而言(禁用也就無法訪問菜單的路由了)。

我們通過這些設置信息,可以對特定的標簽,啟用或者禁用,從而實現我們對開發測試的菜單頁面的顯示和隱藏操作。

 這個修改處理,必須結合後端進行相關數據表結構調整,以及相關的代碼屬性調整,在資料庫增加一個Tag屬性欄位,然後修改實體對象定義。

/// <summary>
/// 系統菜單表
/// </summary>
[SugarTable(null, "系統菜單表")]
[SystemTable]
public class SysMenu : EntityBase
{
    ....................

    /// <summary>
    /// 標簽
    /// </summary>
    [SugarColumn(ColumnDescription = "標簽", Length = 256)]
    [MaxLength(256)]
    public string? Tag { get; set; }

}

以及在相關的Dto對象上增加相關的屬性。

public class MenuInput
{
    /// <summary>
    /// 標題
    /// </summary>
    public string Title { get; set; }

    /// <summary>
    /// 標簽
    /// </summary>
    public string? Tag { get; set; }

    /// <summary>
    /// 菜單類型(1目錄 2菜單 3按鈕)
    /// </summary>
    public MenuTypeEnum? Type { get; set; }
}

為了隱藏或者顯示菜單,我們需要在後端增加一個介面函數,介面函數會通過代理註入的方式提供相關的控制器介面入口,從而給前端訪問處理的。

    /// <summary>
    /// 隱藏/啟用開發測試頁面菜單(對標記tag為dev的,進行隱藏或者啟用)
    /// </summary>
    /// <returns></returns>
    [DisplayName("隱藏/啟用開發測試頁面菜單")]
    public async Task HideOrShowDevMenu()
    {
        var tagFlag = "dev";
        var hideState = await _sysMenuRep.IsAnyAsync(u => u.Tag == tagFlag && u.IsHide);

        var newHide = !hideState;
        var newState = hideState ? StatusEnum.Enable : StatusEnum.Disable;

        //更新特定欄位(同時隱藏和禁用)
        await _sysMenuRep.UpdateAsync(
            u => new SysMenu { IsHide = newHide, Status = newState },
            u => u.Tag == tagFlag);
    }

我們通過判斷當前記錄的隱藏狀態和啟用狀態,從而給他一個反轉值,然後根據條件更新相關的記錄即可。

前端開發的時候,我們除了也是相應增加對應的Tag屬性,也需要配合後端,手工添加一個對應的方法調用,如下代碼所示。

import { BaseApi } from './base-api';
import { SysMenu, UpdateMenuInput, AddMenuInput, MenuOutput } from '/@/api/models';

/** 菜單管理Api */
class SysMenuApi extends BaseApi<SysMenu, AddMenuInput, UpdateMenuInput> {
    /**隱藏/啟用開發測試頁面菜單(對標記tag為dev的,進行隱藏或者啟用) */
    HideOrShowDevMenu = async () => {
        const url = this.baseUrl + `/HideOrShowDevMenu`;
        return await this.axiosInstance.post<UnifyResult<void>>(url, null)
    }
}

export default new SysMenuApi('/api/sysMenu');

這裡只需要註意前端的調用api路徑,以及返回結果即可。

根據Vue-Next-Admin的前端的測試菜單的頁面信息,我們添加了相關的測試案例菜單,並給它們統一打上dev的標簽,添加後的菜單列表界面如下所示。

 然後在界面上增加一個操作入口,如下所示。

來操作測試案例菜單的啟用或者禁用處理即可。

const hideOrShowDevMenu = () => {
    var tips = '您確認要隱藏/啟用開發測試頁面?';
    //(對記錄標記tag為dev的,進行隱藏或者啟用)
    $u.message.confirm(tips).then(async () => {
        await menuApi.HideOrShowDevMenu();
        $u.message.success('操作成功,請刷新菜單頁面,查看變化。');
        setTimeout(() => {
            window.location.reload();
        }, 1000);
    });
}

其中 $u.message 是我們註入的一個全局對象的調用方式,具體操作方式,請參考隨筆《在基於vue-next-admin的Vue3+TypeScript前端項目中,為了使用方便全局掛載對象介面》進行瞭解。

這樣顯示/禁用測試案例的菜單,就可以正常的隨意處理了。

 

3、文件管理增加分組ID

 Admin.NET框架的文件表結構如下所示。

 我在以前使用文件的時候,傾向於添加一個附件組,這樣在實際業務處理的時候,不用記錄多個附件ID的記錄,只需要引用一個附件組的ID即可,因此我也希望保留這個方式來綁定多個附件的展示處理。

因此在原有表的基礎上增加一個GroupId的欄位,如下所示。

 調整前後端的代碼,讓它和其他欄位一樣能夠生效。

例如後端進行分頁查詢的時候,我們增加對分組ID的判別,如下代碼所示。

    /// <summary>
    /// 獲取文件分頁列表
    /// </summary>
    /// <param name="input"></param>
    /// <returns></returns>
    [DisplayName("獲取文件分頁列表")]
    public async Task<SqlSugarPagedList<SysFile>> GetPage([FromQuery] PageFileInput input)
    {
        return await _sysFileRep.AsQueryable()
            .WhereIF(!string.IsNullOrWhiteSpace(input.FileName), u => u.FileName.Contains(input.FileName.Trim()))
            //增加分組ID查詢
            .WhereIF(!string.IsNullOrWhiteSpace(input.GroupId), u => u.GroupId.Equals(input.GroupId.Trim(), StringComparison.OrdinalIgnoreCase))
            .WhereIF(!string.IsNullOrWhiteSpace(input.StartTime.ToString()) && !string.IsNullOrWhiteSpace(input.EndTime.ToString()),
                        u => u.CreateTime >= input.StartTime && u.CreateTime <= input.EndTime)
            .OrderBy(u => u.CreateTime, OrderByType.Desc)
            .ToPagedListAsync(input.Page, input.PageSize);
    }

另外我們增加一個根據分組ID進行查詢列表的操作,便於我們在前端根據分組獲得對應的文件列表。

    /// <summary>
    /// 獲取指定附件組GUID的附件列表
    /// </summary>
    /// <param name="groupId">附件組GUID</param>
    /// <returns></returns>
    [DisplayName("獲取指定附件組GUID的附件列表")]
    public async Task<List<SysFile>> GetFilesByGroupId(string groupId)
    {
        var list = new List<SysFile>();
        if(!string.IsNullOrWhiteSpace(groupId))
        {
            list = await _sysFileRep.GetListAsync(u => u.GroupId == groupId);
        }
        return list;
    }

其他地方進行適當的調整,以便能夠使得分組ID真正的好用,便利即可。

在前端代碼裡面,我們增加對應分組ID查詢文件的介面,如下代碼所示。

import { BaseNormal } from './base-api';
import { FileInput, FileOutput, SysFile } from '/@/api/models';
/**
 * 系統文件 管理Api
 */
class SysFileApi extends BaseNormal {
    .............
/**獲取指定附件組ID的附件列表 */ GetFilesByGroupId = async (groupId: string) => { const url = this.baseUrl + `/FilesByGroupId/${groupId}`; return await this.axiosInstance.get<UnifyResult<Array<SysFile>>>(url, { params: null }) } } export default new SysFileApi('/api/sysFile');

在查看附件或者上傳附件的時候,我們指定對應的groupId就可以了,由於為了方便展示附件列表,我們通過自定義組件的方式,綁定它的分組ID進行處理。

        <div>
            <my-upload v-model="attachGroupId" :data="{ groupId: attachGroupId, path: '' }" :is-avatar-upload="false"
                :show-file-list="true" :is-show-tip="true" />
        </div>
        <div>
            <my-attachment v-model="attachGroupId"></my-attachment>
        </div>

例如附件列表,我們在請求數據的時候,如下代碼所示。

    getData() {
      // console.log(this.modelValue);
      if (!isEmpty(this.modelValue)) {
        fileApi.GetFilesByGroupId(this.modelValue).then(data => {
          this.attachFiles = data.data.result!;

          // 生成並添加預覽圖片列表
          this.imageList = [];
          this.attachFiles.map(item => {
            if (item.url && this.isImage(item)) {
              this.imageList.push(item.url!);
            }
          });
        });
      }

附件列表的界面效果如下所示,可以通過綁定GroupId的方式,展示多個附件列表了。

如果需要上傳,那麼使用封裝的上傳附件的控制項展示,並綁定對應的GroupId就可以展示多個文件列表了

 

專註於代碼生成工具、.Net/.NetCore 框架架構及軟體開發,以及各種Vue.js的前端技術應用。著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品。
  轉載請註明出處:撰寫人:伍華聰  http://www.iqidi.com 
    

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • RMAN備份時會記錄每一次備份的狀態信息,例如COMPLETED,FAILED等,但是使用下麵腳本查詢資料庫時,偶爾你會看到有些備份的狀態為COMPLETED WITH WARNINGS SET LINESIZE 1080;COL STATUS FORMAT A9;COL START_TIME FO ...
  • 摘要:智能把控大數據量查詢,防患系統奔潰於未然。 本文分享自華為雲社區《拒絕“爆雷”!GaussDB(for MySQL)新上線了這個功能》,作者:GaussDB 資料庫。 什麼是最大讀取行 一直以來,大數據量查詢是資料庫DBA們調優的重點,DBA們通常十八般武藝輪番上陣以期提升大數據查詢的性能:例 ...
  • 從MySQL 5.5版本開始預設 使用InnoDB作為引擎,它擅長處理事務,具有自動崩潰恢復的特性,在日常開發中使用非常廣泛 下麵是官方的InnoDB引擎架構圖,主要分為記憶體結構和磁碟結構兩大部分。 InnoDB 記憶體結構 1. Buffer Pool Buffer Pool:緩衝池,簡稱BP。其作 ...
  • 日常生產中 HDFS 上小文件產生是一個很正常的事情,同時小文件也是 Hadoop 集群運維中的常見挑戰,尤其對於大規模運行的集群來說可謂至關重要。 數據地圖是離線開發產品的基本使用單位,包含全部表和項目的相關信息,可以對錶做相關的許可權管理和脫敏管理操作,以及可以展示對應項目占用情況和其表的占用情況 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: 奧特曼愛小怪獸 文章來源:GreatSQL社區原創 前言 線上,遇到一些sql性能問題,需要手術刀級別的調優。optimizer_trace是一 ...
  • 華為HMS Core運動健康服務支持通過REST API,以GPX文件格式寫入用戶路線數據,支持導入軌跡(Track)或路程(Route)類型的數據,實現用戶路線數據在華為運動健康App中的展示效果。 假若與華為運動健康App相連接的穿戴設備支持路線導入,那麼用戶路線數據將自動下發至穿戴設備。用戶可 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 假設,我們有這樣一張 Gif 圖: 利用 CSS,我們嘗試來搞一些事情。 圖片的 Glitch Art 風 在這篇文章中 --CSS 故障藝術,我們介紹了利用混合模式製作一種暈眩感覺的視覺效果。有點類似於抖音的 LOGO。 像是這樣: 假 ...
  • 本博文介紹CSS中的基礎選擇器和複合選擇器。基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器,複合選擇器包括後代選擇器、子選擇器、並集選擇器和偽類選擇器。 ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...