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

推薦する

高度なクローラー - JS 自動レンダリングのための Scrapy_splash コンポーネントの使用

目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...

きちんとした標準的なHTMLタグの書き方を学ぶ

優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...

Vue2.x の応答性の簡単な説明と例

1. Vue レスポンシブの使用法を確認する​ Vue の応答性は、私たち全員がよく知っています。 ...

Apache Webサーバーのインストールと設定方法

信頼性が高く、人気があり、簡単に構成できる Web サーバーである Apache で独自の Web ...

純粋なテキストとアイコン付きのボタンを実現するための HTML+CSS

この記事では、いくつかの基本的なページ要素の実装方法をまとめており、後で更新される予定です。まず、私...

ローカル フォルダー内の画像を読み込んで表示するための HTML サンプル コード

一つの目的Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべ...

MySQLのイベントスケジューラEVENTを理解する

MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...

MySQL マスタースレーブ同期の原理と応用

目次1. マスタースレーブ同期原理マスタースレーブ同期アーキテクチャ図(非同期同期)マスタースレーブ...

XHTML 入門チュートリアル: テキストの書式設定と特殊文字

<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...

Vueルーティングはページステータスを復元する操作メソッドを返します

ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...

WeChatミニプログラムにナビゲーション機能を実装する方法

1. レンダリング2. 操作手順1. テンセントマップキーを申請する - 住所2. ミニプログラムの...

MySQL ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析

mysql ダーティページWAL メカニズムにより、InnoDB はステートメントを更新するときに、...

MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明

降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...

CSSがページのレンダリングをブロックするかどうかについての簡単な説明

おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...