uni-app: realize a função de paginação, clique em uma linha para obter os dados especificados dessa linha, altere o estilo da linha

Mobile 2023-08-18 22:03:02 views: null

 Efeito:

Código de análise de segmento

Implementação da função de paginação:

1. Etiqueta

1. Barra de pesquisa - consulta difusa
<!-- 搜索框-->
		<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"> : Para obter informações sobre o formulário, @submit = método de envio do formulário "search_wip_name"

name="wip_entity_name" define o valor de name, o que é conveniente para o lado js obter dados

<button class="button" form-type="submit" >consulta</button>, defina form-type="submit" , vincule o botão enviar do formulário

2. Informações do formulário
<!-- 表格 -->
		<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 Implementa uma área de visualização rolável. Neste código, scroll-viewo componente é utilizado para obter o efeito de rolagem horizontal, ou seja, pode rolar horizontalmente.

  • scroll-x="true": define  scroll-view o componente para rolar horizontalmente.

  • style="overflow-x: scroll; white-space: nowrap;": adicione um estilo, defina a barra de rolagem horizontal para ficar visível e o conteúdo não será agrupado.

  • v-for="(item, index) in dataList" :key="index" : Através v-forda instrução, percorra dataListo array para gerar várias linhas, e cada linha corresponde a um item de dados no array. :key="index"Usado para especificar um ID exclusivo para cada linha.

  • :class="{ selected: item.selectedIndex === index, 'selected-row': item.selectedRow }": Quando  item.selectedIndex a soma  for igual, adiciona  uma classe de estilo  index à linha atual  ; quando  true, adiciona   uma classe de estilo à linha atual. (Aqui está o código para realizar o clique para obter os dados e o código para alterar o estilo da linha clicando)selecteditem.selectedRowselected-row

3. Implementação de paginação
<!-- 分页 -->
<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>: Este é um elemento de exibição que exibe um botão de página anterior.

  • :class="{ 'first-page': isFirstPage }"A condição do nome da classe vinculada avalia, se o número da página atual for a primeira página, adicione first-pageo nome da classe, que pode ser usado para estilos personalizados. De acordo com isFirstPageo valor da variável para determinar se deseja adicionar first-pageo nome da classe. Adicionado quando o isFirstPagevalor de é .trueclass="first-page"
  • :disabled="currentPage === 1"Determine se o botão pode ser clicado julgando se o número da página atual é 1, de modo a obter o efeito de desabilitar o botão. Esta frase significa quandocurrentPage的值===1时，disabled="true"那么就被禁用，反之则反
  • @click="prevPage"O evento click é vinculado e o método será executado quando o botão for clicado prevPage.

<text style="color:#2979ff">{ { currentPage }} </text><text style="color:#4b4b4b">/{ { totalPage }}</text>: Use dois <text>rótulos para exibir o número da página atual e o número total de páginas, respectivamente.

  • { { currentPage }}é uma expressão de interpolação usada para renderizar o número da página atual.

  • { { totalPage }}Também uma expressão de interpolação usada para renderizar o número total de páginas. Estilize o texto definindo stylepropriedades, como cor.

<view class="down_page" :class="{ 'last-page': isLastPage }" :disabled="currentPage === totalPage" @click="nextPage">></view>: Este é um elemento de exibição que exibe um botão de próxima página, semelhante a um botão de página anterior.

  • :class="{ 'last-page': isLastPage }"A condição do nome da classe vinculada julga, se o número da página atual for a última página, adicione last-pageo nome da classe, que pode ser usado para estilos personalizados.

  • :disabled="currentPage === totalPage"Determine se o botão pode ser clicado julgando se o número da página atual é igual ao número total de páginas, de modo a obter o efeito de desabilitar o botão.

  • @click="nextPage"O evento click é vinculado e o método será executado quando o botão for clicado nextPage.

 Dois, JS

1. Configuração variável
data() {
			return {
				dataList: [],//查询出的数据
				currentPage: 1,//当前页码
				pageSize: 10,//每页显示数量
				totalPage: 0,//总页数默认值
				selectedIndex: -1,//selectedIndex 默认为 -1 是为了表示列表项未被选中的状态。
				isFirstPage: '',//是否是第一页
				isLastPage: '',//是否是最后一页
				selectedRow: '',//选择行
				wip_entity_name: '',//工单（模糊查询使用）
				ItemNo: '',//料号
				ItemName: '',//料号名称
			};
		},
2. Calcule automaticamente as informações da página atual
computed: {
			getCurrentPageData() {
				const startIndex = (this.currentPage - 1) * this.pageSize;
				const endIndex = startIndex + this.pageSize;
				return this.dataList.slice(startIndex, endIndex);
			}
		},

computed É um recurso de propriedade computado fornecido pela estrutura vue.js. Use computedpara definir algumas propriedades que são calculadas automaticamente com base nas alterações de dados nos componentes Vue.

No código fornecido, getCurrentPageDataessa é uma propriedade calculada. Ele depende dos dois atributos de dados de currentPagee pageSize, e quando esses dois atributos mudarem, getCurrentPageDataele recalculará automaticamente e retornará os dados da página atual.

  1. getCurrentPageData é o nome de uma propriedade calculada.
  2. As propriedades calculadas são definidas usando  computed palavras-chave.
  3. A lógica do código nas propriedades calculadas é executada automaticamente quando as dependências reativas associadas são alteradas.
  4. const startIndex = (this.currentPage - 1) * this.pageSize;: calcule o índice inicial da página atual, usando  currentPage esses  pageSize dois dados responsivos.
    • currentPage Indica o número da página atual.
    • pageSize Indica o número de barras de dados exibidas em cada página.
    • A fórmula de cálculo do índice inicial é  (当前页数 - 1) * 每页数据条数.
  5. const endIndex = startIndex + this.pageSize;: Calcula o índice final da página atual.
    • A fórmula de cálculo para o índice final é  起始索引 + 每页数据条数.
  6. return this.dataList.slice(startIndex, endIndex);: de acordo com o índice inicial e o índice final, use  slice() o método  dataList para extrair os dados da página atual da matriz e use-os como o valor de retorno da propriedade calculada.
 3. Clique no botão de pesquisa para obter o valor da consulta difusa
//模糊查询
			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. Selecione a função de linha
//选择行
			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;
				}
			},

O método selectRow(index, wipEntityName) aceita dois parâmetros  index e  wipEntityName, respectivamente, o índice da linha selecionada e o valor do atributo wip_entity_name correspondente.

const selectedItem = this.dataList[index];: Obtenha o objeto de item de dados da linha selecionada de acordo com o índice e armazene-o na  selectedItem variável.

if (selectedItem.selectedIndex === index && selectedItem.selectedRow) { ... }: determine se a linha atualmente selecionada já está selecionada.

  • Se for, significa que o usuário deseja desmarcar a linha e entrar  if no bloco de código.
  • Caso contrário, significa que o usuário deseja selecionar a linha e inserir  else o bloco de código.

Se um bloco de código for inserido  else :

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



        this.wip_entity_name = '';

  • Use  map() o método para percorrer  dataList a matriz, defina cada linha  selectedIndex como -1 (indica não selecionada) e selectedRow defina-a como falsa (indica estado não selecionado).
  • Atribua o  dataList valor atualizado de volta ao  dataList array original para atualizar os dados.
  • Definir  wip_entity_name a propriedade como uma string vazia limpa seu valor.

Se um bloco de código for inserido  else :

        // Selecione a linha atual e obtenha o valor de 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;




  • Use  map() o método para percorrer  dataList a matriz, defina cada linha  selectedIndex como o índice da linha atual (indicando a linha selecionada) e selectedRow defina-a como true (indicando o estado selecionado).
  • Atribua o  dataList valor atualizado de volta ao  dataList array original para atualizar os dados.
  • Configure  wip_entity_name o atributo para  wipEntityName o valor do parâmetro, que é o valor de wip_entity_name correspondente à linha selecionada.
5. Página anterior, realização da função da próxima página
//上一页
			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 É o nome de um método usado para obter os dados da página anterior.

if (this.currentPage > 1) Certifique-se de que o número da página atual seja maior que 1, ou seja, não é a primeira página.

Se as condições forem atendidas, faça o seguinte:

  • Diminua o número da página atual  currentPage em um, ou seja, pule para a página anterior.
  • Chame  getData o método e passe o atualizado  currentPage como parâmetro para obter os dados da página anterior.

nextPage É o nome de um método usado para obter a próxima página de dados.

if (this.currentPage < this.totalPage) Certifique-se de que o número da página atual seja menor que o número total de páginas, ou seja, não seja a última página.

  • Adicione um ao número da página atual  currentPage para pular para a próxima página.
  • Chame  getData o método e passe o atualizado  currentPage como parâmetro para obter os dados da próxima página.
 6. Obtenha dados
código de front-end
//获取数据
			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("查询失败");
					}
				});
			}
		},

Utilize  uni.request o método para enviar uma requisição, passando os seguintes parâmetros:

  • url: O endereço da requisição, getApp().globalData.position + 'Produce/search_wip_name' indicando que os valores dos atributos nos dados globais  position estão concatenados  'Produce/search_wip_name'.
  • data : O objeto de  parâmetro da solicitação, incluindo  page, pageSize, wip_entity_nameeItemNoItemName
  • header: Solicitar informações de cabeçalho, definir  "Content-Type": "application/x-www-form-urlencoded".
  • method: Método de solicitação, definido como  'POST', significa usar o método POST para enviar a solicitação.
  • dataType: o tipo de dados da resposta, defina-o  'json'para indicar que os dados no formato JSON devem ser retornados.
  • success: A função de retorno de chamada quando a solicitação for bem-sucedida, execute a operação:
    • Atribua os dados de resposta  res.data.info a  this.dataList（设置页面需要展示的数据）,  map() adicione atributos  selectedIndex e  a cada item de dados por meio do método selectedRowe inicialize-o como  -1 e  false.
    •  Calcule o número total de páginas  com base na quantidade total de dados  res.data.total e no número exibido em cada página  e atribua-o a .this.pageSizethis.totalPage
    • Atribua o número da página atual  page a  this.currentPage.
    • Atualize  o valor da soma this.isFirstPage e  this.isLastPage julgue se é a primeira página ou a última página de acordo com o número da página atual e o número total de páginas.
  • fail: A função de retorno de chamada quando a solicitação falha, imprime "查询失败"
 Código de back-end (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. O componente foi montado no DOM
mounted() {
			this.getData(1);
		}

mounted : "O componente foi montado no DOM" significa que a instância do componente Vue foi criada e inserida com sucesso na estrutura DOM da página, e o conteúdo do modelo do componente foi renderizado na página.

Na mountedfunção hook, o método é chamado getDatae os parâmetros são passados ​​em 1. A análise específica é a seguinte:

  1. mounted é uma função de gancho de ciclo de vida, indicando que o componente foi montado no DOM.
  2. Nessa função chama-se call  this.getData(1), ou seja, chama-se o método nomeado  getData , e os parâmetros são passados ​​em  1.
  3. Isso significa que depois que o componente for montado,  getData o método será chamado imediatamente e o parâmetro será  1para obter os dados da primeira página.
  4. Através deste código, a operação de obtenção de dados será executada imediatamente após o carregamento do componente, e os dados da primeira página serão obtidos e exibidos

código completo

 front-end

<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>

 extremidade traseira

  //模糊查询工单
  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);
}

Acho que você gosta

Origin blog.csdn.net/weixin_46001736/article/details/132034491
Recomendado
Clasificación
Diario
Más
2024-06-05(0)
2024-06-04(0)
2024-06-03(0)
2024-06-02(0)
2024-06-01(0)
2024-05-31(0)
2024-05-30(0)
2024-05-29(0)
2024-05-28(0)
2024-05-27(0)

Code World

© 2018 codetd.com