uni-app: ページネーション機能を実現し、行をクリックしてこの行の指定されたデータを取得し、行スタイルを変更します

モバイル 2023-08-18 22:02:53 訪問数: null

 効果：

セグメント解析コード

ページング機能の実装:

1.ラベル

1. 検索バー - ファジークエリ
<!-- 搜索框-->
		<form action="" @submit="search_wip_name">
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						工单名称:
					</view>
					<view class="search_right">
						<input name="wip_entity_name" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						料号:
					</view>
					<view class="search_right">
						<input name="ItemNo" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						名称:
					</view>
					<view class="search_right">
						<input name="ItemName" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="btn_position">
					<button class="button" form-type="submit">查询</button>
					<button class="button1">确认</button>
				</view>
			</view>
		</form>

<form action="" @submit="search_wip_name"> :フォーム情報については、@submit = "search_wip_name" フォーム送信メソッド

name="wip_entity_name" は、JS 側がデータを取得するのに便利な name の値を設定します。

<button class="button" form-type="submit" >query</button>、form-type="submit"を設定、フォームの送信ボタンをバインドします

2. フォーム情報
<!-- 表格 -->
		<scroll-view scroll-x="true" style="overflow-x: scroll; white-space: nowrap;">
			<view class="table">
				<view class="table-tr">
					<view class="table-th1">工单名称</view>
					<view class="table-th1">料号</view>
					<view class="table-th1">料号名称</view>
					<view class="table-th1">规格型号</view>
					<view class="table-th1">预计开工日</view>
					<view class="table-th1">开工量</view>
				</view>
				<!-- :class="{ selected: selectedIndex === index,'selected-row':selectedRow ===index }" -->
				<view class="table-tr" v-for="(item, index) in dataList" :key="index"
					:class="{ selected: item.selectedIndex === index, 'selected-row': item.selectedRow }"
					@click="selectRow(index,item.wip_entity_name)">
					<view class="table-td1">{
   
   {item.wip_entity_name}}</view>
					<view class="table-td2">{
   
   {item.primary_item}}</view>
					<view class="table-td2">{
   
   {item.item_name}}</view>
					<view class="table-td2">{
   
   {item.item_desc}}</view>
					<view class="table-td2">{
   
   {item.plan_start_date}}</view>
					<view class="table-td2">{
   
   {item.start_quantity}}</view>
				</view>
			</view>
		</scroll-view>

scroll-view スクロール可能なビュー領域を実装します。このコードでは、scroll-viewコンポーネントは水平スクロールの効果を実現するために使用されます。つまり、水平にスクロールできます。

  • scroll-x="true": scroll-view コンポーネントを水平方向にスクロールするように設定します。

  • style="overflow-x: scroll; white-space: nowrap;": スタイルを追加し、水平スクロール バーが表示されるように設定すると、コンテンツは折り返されません。

  • v-for="(item, index) in dataList" :key="index" :v-forこの命令を通じて、dataList配列を走査して複数の行を生成します。各行は配列内のデータ項目に対応します。:key="index"各行に一意の ID を指定するために使用されます。

  • :class="{ selected: item.selectedIndex === index, 'selected-row': item.selectedRow }": item.selectedIndex 合計 が等しい場合、 スタイル クラスを index 現在の行に 追加します。true の場合 、  スタイル クラスを現在の行に追加します。(ここでは、データを取得するためのクリックを実現するコードと、クリックによって行スタイルを変更するコードを示します)selecteditem.selectedRowselected-row

3. ページネーションの実装
<!-- 分页 -->
<view class="pagination">
	<view class="up_page" :class="{ 'first-page': isFirstPage }" :disabled="currentPage === 1"
		@click="prevPage"><</view>
			<view class="now_page">
				<text style="color:#2979ff">{
   
   { currentPage }} </text><text
					style="color:#4b4b4b">/{
   
   { totalPage }}</text>
			</view>
			<view class="down_page" :class="{ 'last-page': isLastPage }" :disabled="currentPage === totalPage"
				@click="nextPage">></view>
	</view>
</view>

<view class="up_page" :class="{ 'first-page': isFirstPage }" :disabled="currentPage === 1" @click="prevPage"><</view>: 前ページボタンを表示するビュー要素です。

  • :class="{ 'first-page': isFirstPage }"バインドされたクラス名条件は、現在のページ番号が最初のページであるかどうかを判断し、first-pageカスタム スタイルに使用できるクラス名を追加します。isFirstPage変数の値に応じてfirst-pageクラス名を追加するかどうかを決定します。の値isFirstPageが のtrue場合に追加されますclass="first-page"。
  • :disabled="currentPage === 1"ボタンを無効にする効果を得るために、現在のページ番号が 1 であるかどうかを判断することによってボタンがクリック可能かどうかを判断します。この文が意味するのは、いつcurrentPage的值===1时，disabled="true"那么就被禁用，反之则反
  • @click="prevPage"クリック イベントはバインドされており、ボタンがクリックされたときにメソッドが実行されますprevPage。

<text style="color:#2979ff">{ { currentPage }} </text><text style="color:#4b4b4b">/{ { totalPage }}</text>: 2 つの<text>ラベルを使用して、それぞれ現在のページ番号と総ページ数を表示します。

  • { { currentPage }}現在のページ番号をレンダリングするために使用される補間式です。

  • { { totalPage }}総ページ数をレンダリングするために使用される補間式でもあります。style色などのプロパティを設定してテキストのスタイルを設定します。

<view class="down_page" :class="{ 'last-page': isLastPage }" :disabled="currentPage === totalPage" @click="nextPage">></view>: これは、前のページ ボタンと同様に、次のページ ボタンを表示するビュー要素です。

  • :class="{ 'last-page': isLastPage }"バインドされたクラス名条件は、現在のページ番号が最後のページであるかどうかを判断し、last-pageカスタム スタイルに使用できるクラス名を追加します。

  • :disabled="currentPage === totalPage"ボタンを無効にする効果を得るために、現在のページ番号が総ページ数と等しいかどうかを判断してボタンをクリックできるかどうかを決定します。

  • @click="nextPage"クリック イベントはバインドされており、ボタンがクリックされたときにメソッドが実行されますnextPage。

 2、JS

1. 変数の設定
data() {
			return {
				dataList: [],//查询出的数据
				currentPage: 1,//当前页码
				pageSize: 10,//每页显示数量
				totalPage: 0,//总页数默认值
				selectedIndex: -1,//selectedIndex 默认为 -1 是为了表示列表项未被选中的状态。
				isFirstPage: '',//是否是第一页
				isLastPage: '',//是否是最后一页
				selectedRow: '',//选择行
				wip_entity_name: '',//工单（模糊查询使用）
				ItemNo: '',//料号
				ItemName: '',//料号名称
			};
		},
2. 現在のページ情報を自動的に計算します
computed: {
			getCurrentPageData() {
				const startIndex = (this.currentPage - 1) * this.pageSize;
				const endIndex = startIndex + this.pageSize;
				return this.dataList.slice(startIndex, endIndex);
			}
		},

computed これは、vue.js フレームワークによって提供される計算プロパティ機能です。computedVue コンポーネントのデータ変更に基づいて自動的に計算されるいくつかのプロパティを定義するために使用します。

指定されたコードでは、getCurrentPageDataこれは計算されたプロパティです。これはcurrentPageと の2 つのデータ属性に依存しておりpageSize、これら 2 つの属性が変更されると、getCurrentPageData自動的に再計算して現在のページのデータを返します。

  1. getCurrentPageData 計算されたプロパティの名前です。
  2. 計算されたプロパティは、キーワードを使用して定義されます computed 。
  3. 計算されたプロパティのコード ロジックは、関連するリアクティブな依存関係が変更されると自動的に実行されます。
  4. const startIndex = (this.currentPage - 1) * this.pageSize;currentPage :これら 2 つの応答データを使用して、現在のページの開始インデックスを計算します pageSize 。
    • currentPage 現在のページ番号を示します。
    • pageSize 各ページに表示されるデータ バーの数を示します。
    • 開始時のインデックスの計算式は です (当前页数 - 1) * 每页数据条数。
  5. const endIndex = startIndex + this.pageSize;: 現在のページの終了インデックスを計算します。
    • 終了インデックスの計算式は次のとおりです 起始索引 + 每页数据条数。
  6. return this.dataList.slice(startIndex, endIndex);: 開始インデックスと終了インデックスに従って、 slice() メソッド を使用dataList して配列から現​​在のページのデータを抽出し、それを計算されたプロパティの戻り値として使用します。
 3. 検索ボタンをクリックしてファジークエリの値を取得します。
//模糊查询
			search_wip_name(e) {
				this.wip_entity_name = e.detail.value.wip_entity_name //工单号
				this.ItemNo = e.detail.value.ItemNo //料号
				this.ItemName = e.detail.value.ItemName //料号名称
				this.getData(1); // 调用getData方法重新获取数据
			},
 4. 行関数の選択
//选择行
			selectRow(index, wipEntityName) {
				const selectedItem = this.dataList[index];
				if (selectedItem.selectedIndex === index && selectedItem.selectedRow) {
					// 取消选中状态并清空wip_entity_name的值
					this.dataList = this.dataList.map(item => ({
						...item,
						selectedIndex: -1,
						selectedRow: false
					}));
					this.wip_entity_name = '';
				} else {
					// 选中当前行并获取wip_entity_name的值
					this.dataList = this.dataList.map((item, i) => ({
						...item,
						selectedIndex: i === index ? index : -1,
						selectedRow: i === index ? !item.selectedRow : false
					}));
					this.wip_entity_name = wipEntityName;
				}
			},

selectRow(index, wipEntityName)メソッドは 2 つのパラメーターを受け入れ index 、 wipEntityNameそれぞれ、選択された行のインデックスと対応する wip_entity_name 属性値を受け取ります。

const selectedItem = this.dataList[index];: 選択した行のデータ項目オブジェクトをインデックスに従って取得し、 selectedItem 変数に格納します。

if (selectedItem.selectedIndex === index && selectedItem.selectedRow) { ... }: 現在選択されている行がすでに選択されているかどうかを判断します。

  • if そうであれば、ユーザーがその行のチェックを外してコード ブロック内に入りたいことを意味します 。
  • else それ以外の場合は、ユーザーが行を選択してコード ブロックを入力したいことを意味します 。

コードブロックが入力された場合 else :

        this.dataList = this.dataList.map(item => ({                         ...item,                         selectedIndex: -1,                         selectedRow: false                }));



        this.wip_entity_name = '';

  • map() このメソッドを 使用し てdataList 配列を走査し、各行を selectedIndex -1 (選択されていないことを示す) に設定し、selectedRow false (選択されていない状態を示す) に設定します。
  • 更新された dataList 値を元の dataList 配列に代入してデータを更新します。
  • wip_entity_name プロパティを空の文字列に設定すると 、その値がクリアされます。

コードブロックが入力された場合 else :

        // 現在の行を選択し、wip_entity_name の値を取得します。
        this.dataList = this.dataList.map((item, i) => ({                         ...item,                         selectedIndex: i ===index ?index : -1,                         selectedRow : i === インデックス ? !item.selectedRow : false                }));         this.wip_entity_name = wipEntityName;




  • map() このメソッドを 使用し てdataList 配列を走査し、各行を selectedIndex 現在の行のインデックスとして設定し (選択された行を示す)、selectedRow それを true に設定します (選択された状態を示します)。
  • 更新された dataList 値を元の dataList 配列に代入してデータを更新します。
  • wip_entity_name 属性を wipEntityName パラメータの値、つまり選択した行に対応する wip_entity_name の値に設定します 。
5. 前ページ、次ページ機能の実現
//上一页
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--;
					this.getData(this.currentPage); // 调用getData方法获取上一页数据
				}
			},
			//下一页
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
					this.getData(this.currentPage); // 调用getData方法获取下一页数据
				}
			},

 prevPage 前のページのデータを取得するために使用されるメソッドの名前です。

if (this.currentPage > 1) 現在のページ番号が 1 より大きいこと、つまり最初のページではないことを確認してください。

条件が満たされている場合は、次の操作を実行します。

  • 現在のページ番号を currentPage 1 つ減らします。つまり、前のページにジャンプします。
  • getData メソッドを 呼び出し 、updated をcurrentPage パラメータとして渡して、前のページのデータを取得します。

nextPage データの次のページを取得するために使用されるメソッドの名前です。

if (this.currentPage < this.totalPage) 現在のページ番号が総ページ数より小さいこと、つまり最後のページではないことを確認してください。

  • currentPage 次のページにジャンプするには、現在のページ番号 に 1 を加えます。
  • メソッドを呼び出し getData 、更新されたメソッドを currentPage パラメータとして渡して、次のページのデータを取得します。
 6. データを取得する
フロントエンドコード
//获取数据
			getData(page) {
				uni.request({
					url: getApp().globalData.position + 'Produce/search_wip_name',
					data: {
						page: page,
						pageSize: this.pageSize,
						wip_entity_name: this.wip_entity_name, // 添加工单号参数
						ItemNo: this.ItemNo, // 添加料号参数
						ItemName: this.ItemName, // 添加料号名称参数
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					dataType: 'json',
					success: res => {
						// this.dataList = res.data.info;
						this.dataList = res.data.info.map(item => ({
							...item,
							selectedIndex: -1,
							selectedRow: false
						}));
						this.totalPage = Math.ceil(parseInt(res.data.total) / this.pageSize);
						this.currentPage = page;
						// 更新 isFirstPage 和 isLastPage 的值
						this.isFirstPage = (page === 1);
						this.isLastPage = (page === this.totalPage);
					},
					fail(res) {
						console.log("查询失败");
					}
				});
			}
		},

このメソッドを使用して uni.request リクエストを送信し、次のパラメータを渡します。

  • url: リクエストのアドレス。getApp().globalData.position + 'Produce/search_wip_name' グローバル データ内の属性値が position 連結されている ことを示します'Produce/search_wip_name'。
  • data: リクエストのパラメータ オブジェクト (  page、pageSize、wip_entity_name、ItemNo および を含む)ItemName
  • header: リクエストヘッダー情報を設定します "Content-Type": "application/x-www-form-urlencoded"。
  • method: リクエスト メソッドを に設定すると 'POST'、POST メソッドを使用してリクエストを送信することを意味します。
  • dataType: 応答のデータ型 'json'。JSON 形式のデータが返されることが予想されることを示すように設定します。
  • success: リクエストが成功したときのコールバック関数は、次の操作を実行します。
    • 応答データ res.data.info を に 代入しthis.dataList（设置页面需要展示的数据）、 メソッドを通じて各データ項目に と の map() 属性を追加し 、  と に初期化します。selectedIndexselectedRow-1false
    • データの総量 res.data.total と各ページに表示される数 からthis.pageSize 総ページ数を計算し 、 に代入しますthis.totalPage。
    • 現在のページ番号 page を に 割り当てますthis.currentPage。
    • sumの値を更新し this.isFirstPage 、 this.isLastPage 現在のページ番号と総ページ数から先頭ページか最終ページかを判断します。
  • fail: リクエストが失敗したときのコールバック関数、出力 "查询失败"
 バックエンドコード (thinkphp)
  public function search_wip_name()
{
    //从前端传入当前页码和每页总数
    $page = input('post.page', 1); // 当前页码，默认为1
    $pageSize = input('post.pageSize', 10); // 每页显示的数据条数，默认为10
    //从前端传入模糊查询的条件
    $wip_entity_name = input('post.wip_entity_name', '');
    $ItemNo = input('post.ItemNo', '');
    $ItemName = input('post.ItemName', '');
    //进行数据库查询
    $data['info'] = Db::table('wip_jobs_all')
        ->alias('a')
        ->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
        ->field('a.plan_start_date, a.start_quantity, a.wip_entity_name, a.quantity_completed, a.primary_item, b.item_desc, b.item_name, a.creation_date')
        ->where([
            'a.status_type' => ['<>', '关闭'],
            'a.wip_entity_name' => ['not in', function ($query) {
                $query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
            }]
        ])
        //模糊查询条件
        ->where([
            'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
            'a.primary_item' => ['like', '%' . $ItemNo . '%'],
            'b.item_name' => ['like', '%' . $ItemName . '%'],
        ])
        ->order('a.wip_entity_name DESC')
        //加入页码和每页数量的限制
        ->limit(($page - 1) * $pageSize, $pageSize)
        ->select();
    // 格式化时间
    foreach ($data['info'] as &$item) {
        $item['creation_date'] = date('Y-m-d H:i:s', $item['creation_date']);
    }
    //计算查询总数
    $total = Db::table('wip_jobs_all')
        ->alias('a')
        ->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
        ->where([
            'a.status_type' => ['<>', '关闭'],
            'a.wip_entity_name' => ['not in', function ($query) {
                $query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
            }]
        ])
        ->where([
            'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
            'a.primary_item' => ['like', '%' . $ItemNo . '%'],
            'b.item_name' => ['like', '%' . $ItemName . '%'],
        ])
        ->count();
    $data['total'] = strval($total); // 将总数转换为字符串类型
    //输出数据
    echo json_encode($data);
}
 7. コンポーネントが DOM にマウントされました
mounted() {
			this.getData(1);
		}

mounted : 「コンポーネントが DOM にマウントされました」とは、Vue コンポーネントのインスタンスが作成され、ページの DOM 構造に正常に挿入され、コンポーネントのテンプレート コンテンツがページ上にレンダリングされたことを意味します。

フック関数ではmounted、メソッドが呼び出されgetData、パラメータが に渡されます1。具体的な分析は次のとおりです。

  1. mounted はライフサイクル フック関数であり、コンポーネントが DOM にマウントされたことを示します。
  2. この関数では、 call が呼び出され this.getData(1)、つまり という名前のメソッドが呼び出され getData 、パラメータが に渡されます 1。
  3. これは、コンポーネントがマウントされた後、 getData メソッドがすぐに呼び出され、パラメーターが 1最初のページのデータを取得することを意味します。
  4. このコードにより、コンポーネントが読み込まれた直後にデータを取得する操作が実行され、最初のページのデータが取得されて表示されます。

完全なコード

 フロントエンド

<template>
	<view>
		<!-- 搜索框-->
		<form action="" @submit="search_wip_name">
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						工单名称:
					</view>
					<view class="search_right">
						<input name="wip_entity_name" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						料号:
					</view>
					<view class="search_right">
						<input name="ItemNo" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						名称:
					</view>
					<view class="search_right">
						<input name="ItemName" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="btn_position">
					<button class="button" form-type="submit">查询</button>
					<button class="button1" >确认</button>
				</view>
			</view>
		</form>
		<!-- 表格 -->
		<scroll-view scroll-x="true" style="overflow-x: scroll; white-space: nowrap;" lower-threshold="50">
			<view class="table">
				<view class="table-tr">
					<view class="table-th1">工单名称</view>
					<view class="table-th1">料号</view>
					<view class="table-th1">料号名称</view>
					<view class="table-th1">规格型号</view>
					<view class="table-th1">预计开工日</view>
					<view class="table-th1">开工量</view>
				</view>
				<!-- :class="{ selected: selectedIndex === index,'selected-row':selectedRow ===index }" -->
				<view class="table-tr" v-for="(item, index) in dataList" :key="index"
					:class="{ selected: item.selectedIndex === index, 'selected-row': item.selectedRow }"
					@click="selectRow(index,item.wip_entity_name)">
					<view class="table-td1">{
   
   {item.wip_entity_name}}</view>
					<view class="table-td2">{
   
   {item.primary_item}}</view>
					<view class="table-td2">{
   
   {item.item_name}}</view>
					<view class="table-td2">{
   
   {item.item_desc}}</view>
					<view class="table-td2">{
   
   {item.plan_start_date}}</view>
					<view class="table-td2">{
   
   {item.start_quantity}}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 分页 -->
		<view class="pagination">
			<view class="up_page" :class="{ 'first-page': isFirstPage }" :disabled="currentPage === 1"
				@click="prevPage">
				<</view>
					<view class="now_page">
						<text style="color:#2979ff">{
   
   { currentPage }} </text><text
							style="color:#4b4b4b">/{
   
   { totalPage }}</text>
					</view>
					<view class="down_page" :class="{ 'last-page': isLastPage }" :disabled="currentPage === totalPage"
						@click="nextPage">></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				selectedIndex: -1,
				isFirstPage: '',
				isLastPage: '',
				selectedRow: '',
				wip_entity_name: '',
				ItemNo: '',
				ItemName: '',
			};
		},
		computed: {
			getCurrentPageData() {
				const startIndex = (this.currentPage - 1) * this.pageSize;
				const endIndex = startIndex + this.pageSize;
				return this.dataList.slice(startIndex, endIndex);
			}
		},
		methods: {
			//模糊查询
			search_wip_name(e) {
				this.wip_entity_name = e.detail.value.wip_entity_name //工单号
				this.ItemNo = e.detail.value.ItemNo //料号
				this.ItemName = e.detail.value.ItemName //料号名称
				this.getData(1); // 调用getData方法重新获取数据
			},
			//选择行
			selectRow(index, wipEntityName) {
			  const selectedItem = this.dataList[index];
			  if (selectedItem.selectedIndex === index && selectedItem.selectedRow) {
			    // 取消选中状态并清空wip_entity_name的值
			    this.dataList = this.dataList.map(item => ({
			      ...item,
			      selectedIndex: -1,
			      selectedRow: false
			    }));
			    this.wip_entity_name = '';
			  } else {
			    // 选中当前行并获取wip_entity_name的值
			    this.dataList = this.dataList.map((item, i) => ({
			      ...item,
			      selectedIndex: i === index ? index : -1,
			      selectedRow: i === index ? !item.selectedRow : false
			    }));
			    this.wip_entity_name = wipEntityName;
			  }
			},
			//上一页
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--;
					this.getData(this.currentPage); // 调用getData方法获取上一页数据
				}
			},
			//下一页
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
					this.getData(this.currentPage); // 调用getData方法获取下一页数据
				}
			},
			//获取数据
			getData(page) {
				uni.request({
					url: getApp().globalData.position + 'Produce/search_wip_name',
					data: {
						page: page,
						pageSize: this.pageSize,
						wip_entity_name: this.wip_entity_name, // 添加工单号参数
						ItemNo: this.ItemNo, // 添加料号参数
						ItemName: this.ItemName, // 添加料号名称参数
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					dataType: 'json',
					success: res => {
						// this.dataList = res.data.info;
						this.dataList = res.data.info.map(item => ({
							...item,
							selectedIndex: -1,
							selectedRow: false
						}));
						this.totalPage = Math.ceil(parseInt(res.data.total) / this.pageSize);
						this.currentPage = page;
						// 更新 isFirstPage 和 isLastPage 的值
						this.isFirstPage = (page === 1);
						this.isLastPage = (page === this.totalPage);
					},
					fail(res) {
						console.log("查询失败");
					}
				});
			}
		},
		mounted() {
			this.getData(1);
		}
	};
</script>
<style>
	/* 行选择样式 */
	.selected-row {
		background-color: #74bfe7;
	}

	/* 第一页和最后一页,按钮的样式 */
	.up_page.first-page {
		color: #afafaf;
	}

	.down_page.last-page {
		color: #afafaf;
	}

	/* 翻页样式 */
	.pagination {
		display: flex;
		width: 100%;
		background-color: #f5f5f5;
		align-items: center;
		justify-items: center;
		justify-content: center;
		height: 60rpx;
		border: 1rpx solid gray;
		border-top: none;
	}

	.up_page {
		width: 10%;
		text-align: center;
		color: #4b4b4b;
	}

	.down_page {
		width: 10%;
		text-align: center;
		color: #4b4b4b;
	}

	.now_page {
		width: 80%;
		text-align: center;
	}

	/* 表格样式 */
	.table {
		margin-top: 5%;
		font-size: 85%;
		display: table;
		width: 200%;
		border-collapse: collapse;
		box-sizing: border-box;
	}

	.table-tr {
		display: table-row;
	}

	.table-th1 {
		width: 20%;
		display: table-cell;
		font-weight: bold;
		border: 1rpx solid gray;
		background-color: #51aad6;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-th2 {
		width: 30%;
		display: table-cell;
		font-weight: bold;
		border: 1rpx solid gray;
		background-color: #51aad6;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-th3 {
		width: 50%;
		display: table-cell;
		font-weight: bold;
		border: 1rpx solid gray;
		background-color: #51aad6;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-td1 {
		width: 20%;
		display: table-cell;
		border: 1rpx solid gray;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-td2 {
		width: 30%;
		display: table-cell;
		border: 1rpx solid gray;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-td3 {
		width: 50%;
		display: table-cell;
		border: 1rpx solid gray;
		text-align: center;
		vertical-align: middle;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		/* padding: 5px 0; */
	}

	/* 搜索框 */
	.search_position {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 5% 0;
		/* border:1px solid black; */
	}

	.search {
		width: 90%;
		/* border:1px solid black; */
		display: flex;
	}

	.search_left {
		font-size: 105%;
		font-weight: bold;
		color: rgb(90, 90, 90);
		width: 30%;
	}

	.search_right {
		border-bottom: 1px solid rgb(95, 95, 95);
		width: 70%;
	}

	.btn_position {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60%;
		margin: 2% 0;
		/* border: 1px solid black; */
	}

	.button {
		margin-top: 5%;
		background-color: #40A4D6;
		color: #fff;
		font-size: 30rpx;
		/* border: 1px solid black; */
	}

	.button1 {
		margin-top: 5%;
		background-color: #fff ;
		color: #40A4D6;
		font-size: 30rpx;
		border: 1px solid #40A4D6;
	}
</style>

 後部

  //模糊查询工单
  public function search_wip_name()
{
//获取前台传来的页码和每页显示数
    $page = input('post.page', 1); // 当前页码，默认为1
    $pageSize = input('post.pageSize', 10); // 每页显示的数据条数，默认为10
//获取模糊查询的条件
    $wip_entity_name = input('post.wip_entity_name', '');//工单
    $ItemNo = input('post.ItemNo', '');//料号
    $ItemName = input('post.ItemName', ''); //料号名称
//查询数据，代入分页的限制条件->limit(($page - 1) * $pageSize, $pageSize)  
    $data['info'] = Db::table('wip_jobs_all')
        ->alias('a')
        ->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
        ->field('a.plan_start_date, a.start_quantity, a.wip_entity_name, a.quantity_completed, a.primary_item, b.item_desc, b.item_name, a.creation_date')
        ->where([
            'a.status_type' => ['<>', '关闭'],
            'a.wip_entity_name' => ['not in', function ($query) {
                $query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
            }]
        ])
        ->where([
            'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
            'a.primary_item' => ['like', '%' . $ItemNo . '%'],
            'b.item_name' => ['like', '%' . $ItemName . '%'],
        ])
        ->order('a.wip_entity_name DESC')
        ->limit(($page - 1) * $pageSize, $pageSize)
        ->select();
    // 格式化时间
    foreach ($data['info'] as &$item) {
        $item['creation_date'] = date('Y-m-d H:i:s', $item['creation_date']);
    }
//计算总条数
    $total = Db::table('wip_jobs_all')
        ->alias('a')
        ->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
        ->where([
            'a.status_type' => ['<>', '关闭'],
            'a.wip_entity_name' => ['not in', function ($query) {
                $query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
            }]
        ])
        ->where([
            'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
            'a.primary_item' => ['like', '%' . $ItemNo . '%'],
            'b.item_name' => ['like', '%' . $ItemName . '%'],
        ])
        ->count();
    $data['total'] = strval($total); // 将总数转换为字符串类型
//输出数据
    echo json_encode($data);
}

おすすめ

転載: blog.csdn.net/weixin_46001736/article/details/132034491
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com