高级过滤代码添加
This commit is contained in:
Ledo
parent
077acacd84
commit
9c88a17f84
@ -8,7 +8,7 @@ import { useLoginStore } from "@/stores/modules/login";
|
||||
const userStore = useLoginStore();
|
||||
const userId = userStore.userInfo.userId;
|
||||
const popup = ref<UniHelper.UniPopupInstance>()
|
||||
|
||||
const showPop = ref<UniHelper.UniPopupInstance>()
|
||||
// 是否分页结束
|
||||
const isFinish = ref(false);
|
||||
// 是否触发下拉刷新
|
||||
@ -145,12 +145,38 @@ const cancel = () => {
|
||||
purchaseRemAmounts.value = ""
|
||||
popup.value?.close()
|
||||
}
|
||||
const filterData : Required<any> = ({
|
||||
projectName: '',
|
||||
subProjectName: '',
|
||||
supplier: '',
|
||||
partName: '',
|
||||
process: '',
|
||||
drawingNo: ''
|
||||
})
|
||||
// 切换下拉框显示状态
|
||||
const toggleDropdown = () => {
|
||||
showPop.value?.open()
|
||||
}
|
||||
|
||||
// 取消过滤
|
||||
const cancelFilter = () => {
|
||||
showPop.value?.close()
|
||||
}
|
||||
|
||||
// 确认过滤
|
||||
const confirmFilter = () => {
|
||||
// 清空搜索框内容
|
||||
searchVal.value = '';
|
||||
// 这里可以添加过滤逻辑
|
||||
console.log('过滤数据:', filterData);
|
||||
// 收起下拉区域
|
||||
showPop.value?.close();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="cont">
|
||||
<view class="search">
|
||||
<view
|
||||
style="
|
||||
<view class="search" style="display: flex; align-items: center;">
|
||||
<view style="
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -158,14 +184,9 @@ const cancel = () => {
|
||||
border-radius: 20rpx;
|
||||
padding: 0 8rpx;
|
||||
height: 50px;
|
||||
"
|
||||
>
|
||||
<input
|
||||
class="uni-input"
|
||||
v-model="searchVal"
|
||||
placeholder="请输入物料名称、图号、工序"
|
||||
:placeholder-style="'color:#28A0F8;'"
|
||||
style="
|
||||
">
|
||||
<input class="uni-input" v-model="searchVal" placeholder="请输入物料名称、图号、工序"
|
||||
:placeholder-style="'color:#28A0F8;'" style="
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
@ -174,27 +195,16 @@ const cancel = () => {
|
||||
color: #28a0f8;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
"
|
||||
@input="handleSearch({ inputValue: searchVal })"
|
||||
clearable
|
||||
/>
|
||||
" @input="handleSearch({ inputValue: searchVal })" clearable />
|
||||
</view>
|
||||
<view class="filter-btn" @click="toggleDropdown" style="margin-left: 10px;">
|
||||
<image src="/static/images/shalou.jpeg" mode="aspectFit" class="filter-icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<scroll-view
|
||||
enable-back-to-top
|
||||
scroll-y
|
||||
class="data-list"
|
||||
refresher-enabled
|
||||
:refresher-triggered="isTriggered"
|
||||
@refresherrefresh="onRefresherrefresh"
|
||||
@scrolltolower="getListData"
|
||||
>
|
||||
<view
|
||||
class="item"
|
||||
v-for="item in dataList"
|
||||
:key="item.id"
|
||||
>
|
||||
<scroll-view enable-back-to-top scroll-y class="data-list" refresher-enabled :refresher-triggered="isTriggered"
|
||||
@refresherrefresh="onRefresherrefresh" @scrolltolower="getListData">
|
||||
<view class="item" v-for="item in dataList" :key="item.id">
|
||||
<view class="hd">
|
||||
<view class="num">图号：</view>
|
||||
<view class="num">{{
|
||||
@ -247,10 +257,7 @@ const cancel = () => {
|
||||
<!-- 底部提示文字 -->
|
||||
|
||||
|
||||
<view
|
||||
class="loading-text"
|
||||
:style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
|
||||
>
|
||||
<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
|
||||
{{ isFinish ? "没有更多数据~" : "正在加载..." }}
|
||||
</view>
|
||||
<uni-popup class="popup" ref="popup" :mask-click="false" type="bottom" background-color="#fff">
|
||||
@ -276,11 +283,74 @@ const cancel = () => {
|
||||
|
||||
</uni-popup>
|
||||
</scroll-view>
|
||||
<uni-popup class="popup" ref="showPop" :mask-click="false" type="top" background-color="#fff">
|
||||
<view style="margin-top: 6%;">
|
||||
<uni-forms :modelValue="filterData">
|
||||
<uni-forms-item label="姓名" name="projectName">
|
||||
<uni-easyinput type="text" v-model="filterData.projectName" placeholder="请输入项目名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" name="subProjectName">
|
||||
<uni-easyinput type="text" v-model="filterData.subProjectName" placeholder="请输入子项目名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="supplier" label="供应商">
|
||||
<uni-easyinput type="text" v-model="filterData.supplier" placeholder="请输入供应商" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="姓名" name="partName">
|
||||
<uni-easyinput type="text" v-model="filterData.partName" placeholder="请输入零件名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄" name="process">
|
||||
<uni-easyinput type="text" v-model="filterData.process" placeholder="请输入工序" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="drawingNo" label="图号">
|
||||
<uni-easyinput type="text" v-model="filterData.drawingNo" placeholder="请输入图号" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="filter-buttons">
|
||||
<view class="cancel" @click="cancelFilter">取消</view>
|
||||
<view class="ok" @click="confirmFilter">确认</view>
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.filter-btn {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto; /* Push the filter button to the right */
|
||||
|
||||
.filter-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
.filter-buttons .cancel {
|
||||
background-color: white;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.filter-buttons .ok {
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
// 订单列表
|
||||
.search {
|
||||
padding: 0rpx;
|
||||
@ -288,6 +358,7 @@ const cancel = () => {
|
||||
margin: auto;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.uni-input {
|
||||
border: 1px solid #d1d6db;
|
||||
height: 60rpx;
|
||||
@ -295,13 +366,19 @@ const cancel = () => {
|
||||
padding: 4rpx 10rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 10rpx;
|
||||
flex: 1; /* Make the input take the remaining space */
|
||||
}
|
||||
|
||||
.icons {
|
||||
width: 30rpx;
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: 0rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.data-list {
|
||||
@ -364,6 +441,7 @@ const cancel = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statusText1 {
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
@ -537,6 +615,7 @@ const cancel = () => {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup {
|
||||
.title {
|
||||
line-height: 1;
|
||||
@ -594,13 +673,17 @@ const cancel = () => {
|
||||
|
||||
/* 新增按钮组容器样式 */
|
||||
.button-group {
|
||||
display: flex; /* 开启弹性布局 */
|
||||
justify-content: center; /* 水平居中对齐 */
|
||||
gap: 20rpx; /* 按钮间距 */
|
||||
display: flex;
|
||||
/* 开启弹性布局 */
|
||||
justify-content: center;
|
||||
/* 水平居中对齐 */
|
||||
gap: 20rpx;
|
||||
/* 按钮间距 */
|
||||
}
|
||||
|
||||
/* 修正原有 .ok 样式 */
|
||||
.ok, .cancel {
|
||||
.ok,
|
||||
.cancel {
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
width: 200rpx;
|
||||
@ -617,4 +700,4 @@ const cancel = () => {
|
||||
background: linear-gradient(157deg, #A9A9A9 -3%, #A9A9A9 90%);
|
||||
}
|
||||
}
|
||||
</style>import type { stringify } from 'querystring';
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user