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

推薦する

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...

Webpack ファイル パッケージ化エラー例外

webpack をパッケージ化する前に、次の作業が完了していることを確認する必要があります。 1) ...

ページリファクタリングスキル - コンテンツ

雑談はここまでにして、インターネット上で見つかる高性能な Yahoo ウェブサイトを構築するための数...

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...

element-plus でオンデマンドインポートとグローバルインポートを実装する方法

目次オンデマンドインポート:グローバルインポートオンデマンドインポート:プラグインをインストールする...

JSはシンプルなカウンターを実装します

HTML CSS および JavaScript を使用して、プラス、マイナス、ゼロの 3 つのボタン...

CSSとHTMLを組み合わせる4つの方法

(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...

Celery と Docker を使用して Django で定期的なタスクを処理する方法

Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...

フレックスレイアウトの改行スペースでの align-content の使用

1. この記事で実装した効果図は以下のとおりです。レイアウトの右側に Flex レイアウトを使用し、...

NodeJSプロセスがどのように終了するかについて詳しく説明します

目次序文積極的な撤退例外、拒否、および発行されたエラー信号まとめ序文NodeJS プロセスが終了する...

コーディングスキルを向上させるためのJavaScriptのヒント

目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...

ホストがアクセスできるようにMySQLの権限を変更する方法

mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...

HTML テーブルタグチュートリアル (23): 行の境界線の色属性 BORDERCOLORDARK

行ごとに、暗い境界線の色を個別に定義できます。基本的な構文<TR 境界線の色を暗くする=col...

DockerにRedisコンテナをインストールするための実装手順

目次DockerにRedisをインストールする1. Redisイメージを見つける2. Redisイメ...