Vueは開始時間と終了時間の範囲クエリを実装します

Vueは開始時間と終了時間の範囲クエリを実装します

この記事では、Vueで開始時間と終了時間の範囲を照会する方法を参考までに紹介します。具体的な内容は次のとおりです。

効果画像:

コード実装:

注文リスト.Vue

<a-col :xl="6" :lg="7" :md="8" :sm="24">
 <a-form-item label="注文日">
  <a-range-picker size="large" format="YYYY-MM-DD" @change="onDateChange" />
 </a-form-item>
</a-col>
メソッド: {
 onDateChange(日付、日付文字列) {
        コンソールログ(日付文字列[0])
        コンソールログ(日付文字列[1])
        this.beginDate = 日付文字列[0]
        this.finishDate = 日付文字列[1]
     }
}

オーダーコントローラ.java

 /**
     * ページ区切りリストクエリ *
     * @param 順序
     * @param ページ番号
     * @param ページサイズ
     * @param 必須
     * @戻る
     */
    @AutoLog(value = "注文ページリストクエリ")
    @ApiOperation(value = "順序ページリストクエリ", notes = "順序ページリストクエリ")
    @GetMapping(値 = "/リスト")
    パブリック Result<?> queryPageList(Order order,
                                   @RequestParam(name = "pageNo", defaultValue = "1") 整数ページ番号、
                                   @RequestParam(name = "pageSize", defaultValue = "10") 整数ページサイズ、
                                   HttpServletRequest 要求) {
        QueryWrapper<Order> queryWrapper = QueryGenerator.initQueryWrapper(order, req.getParameterMap());
        if(req.getParameterMap().get("beginDate") != null){
            文字列beginDate = req.getParameterMap().get("beginDate")[0];
            文字列finishDate = req.getParameterMap().get("finishDate")[0];
            if (!StringUtils.isEmpty(beginDate) || StringUtils.isEmpty(finishDate)) {
                DateTime の beginOfDay = DateUtil.beginOfDay(DateUtil.parse(beginDate));
                DateTime の endOfDay を DateUtil.endOfDay(DateUtil.parse(finishDate)) に変換します。
                queryWrapper.ge("create_time", beginOfDay).le("create_time", endOfDay);
            }
        }
        ログインユーザー sysUser = (ログインユーザー) SecurityUtils.getSubject().getPrincipal();
        <文字列> ロールを設定します = sysUserService.getUserRolesSet(sysUser.getUsername());
        if(!roles.contains("admin")){
            queryWrapper.eq("user_name",sysUser.getUsername());
        }
        Page<Order> page = new Page<Order>(pageNo, pageSize);
        IPage<Order> pageList = orderService.page(page, queryWrapper);
        Result.ok(pageList) を返します。
    }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue フィルターの完璧な時間と日付のフォーマット コード
  • Vue での一般的な時間形式の変換
  • Vueの時間変換のいくつかの方法
  • Vue el-date-picker 動的制限時間範囲ケースの詳細な説明
  • Vueは、短時間に連続してクリックされた後に複数のトリガーリクエストが発生するのを防ぎます。
  • Vue タイムライン vue-light-timeline 使用方法
  • ant-design-vue 時間セレクターはデフォルトの時間操作を割り当てます
  • Ant Design Vue で日付選択ボックスと時間セレクターを組み合わせて使用​​するための手順
  • Vueは要素テーブル内の時間を指定された形式にフォーマットします

<<:  MySQLの場合の使用例分析

>>:  MySQL スケジュールされたデータベース バックアップ操作の例

推薦する

Vueはプライベートフィルターと基本的な使用法を定義します

プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...

SQLのさまざまな結合サマリーの詳細な説明

SQL 左結合、右結合、内部結合、自然結合 さまざまな結合の概要SQL には、左結合、右結合、内部結...

Web Storage APIの使用に関する簡単な説明

目次1. ブラウザのローカルストレージ技術1.1、セッションストレージ1.2、ローカルストレージ2....

VUE と Canvas を使用して Thunder Fighter タイピング ゲームを実装する方法

今日は、サンダーファイタータイピングゲームを実装します。ゲームプレイは非常に簡単です。それぞれの「敵...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

角丸四角形の HTML+CSS 実装コード

退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...

Nginx がリクエストを処理する際のマッチングルールの詳細な分析

nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...

JavaScript でアルゴリズムの複雑さを学ぶ方法

目次概要Big O 表記法とは何ですか?オー(1)の上) (n^2) O(logn) ですの上!)結...

MySQLオンラインデータベースのデータをクリーンアップする方法

目次01 シナリオ分析02 操作方法03 結果分析01 シナリオ分析今日の午後、開発仲間がオンライン...

vue ルーティング ビュー router-view のネストされたジャンプの実装

目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...

Ubuntu 20.04 は Wi-Fi に接続します (2 つの方法)

最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...

VMware を使用して PXE バッチ インストール サーバーをテストする詳細なプロセス

目次1. 準備1. 環境を整える2. インストール方法3. ネットワークカードの構成2. インストー...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...