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 スケジュールされたデータベース バックアップ操作の例

推薦する

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

史上最も簡単な MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 37)

データのバックアップと復元パート3の詳細は次のとおりです基本的な概念:バックアップ、現在のデータまた...

Mysql の一般的なベンチマーク コマンドの概要

mysqlslap共通パラメータの説明–auto-generate-sql システムはテスト用のSQ...

リンクされた画像をダウンロードしてアップロードするJavaScriptの実装

写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...

ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例

CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...

Linux で crontab を使用してスケジュールされたタスクを追加する方法

序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...

nginxリバースプロキシwebSocket設定の詳細な説明

最近、プロジェクトで作業しているときに webSocket プロトコルを使用し、WeChat アプレ...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

Linux のような環境で jdk1.8 をインストールし、環境変数を設定する方法の詳細な説明

設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する

メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...

React refsの詳細な紹介

1. 何ですかRefs 、コンピューターでは Resilient File System (ReF...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...

Linux でファイルの権限 (所有権) を変更する

Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...