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

推薦する

JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)

導入:スライダー ドラッグ検証は現在、多くの場所で使用されています。週末に 1 つ作成しようと思い、...

CSS3 で半透明の背景画像と不透明なコンテンツを実現する方法の例

以前のブログのログインページを作成していたときに、この問題に遭遇しました。突然、透明な背景画像と不透...

vuexサードパーティパッケージを使用してデータの永続性を実装する方法

目的: vuex で管理されている状態データを同時にローカルに保存できるようにします。独自のストレー...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

進捗バー効果を実現するJavaScript

この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

mysql-8.0.19-winx64 をインストールしてログインするための初心者向けチュートリアル (初心者必読)

目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

Alibaba Cloud Ubuntu 16.04でpptpdサービスを構築する方法

1. PPTP VPNを構築するには、ポート1723とGREプロトコルを開く必要があります。 1. ...

Vue でよく使われる高階関数と包括的な例

1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...

VMwareワークステーションとデバイス/資格情報の非互換性によって発生する起動エラーについて

VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...

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

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

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...

Vue 監視属性のグラフィック例の詳細な説明

目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...

jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...