| | |
| | | <!-- 顶部筛选区 --> |
| | | <view class="filter-section"> |
| | | <view class="filter-controls"> |
| | | <!-- 查询条件选择器 --> |
| | | <view class="dropdown-filter"> |
| | | <picker @change="onOptionsChange" :value="optionsIndex" :range="options"> |
| | | <view class="picker">{{options[optionsIndex]}}</view> |
| | | </picker> |
| | | </view> |
| | | |
| | | <!-- 搜索框 --> |
| | | <view class="search-container"> |
| | | <input class="search-input" v-model="searchValue" :placeholder="'请输入'+options[optionsIndex]" @confirm="btnclicked" /> |
| | | <button class="search-button" @click="btnclicked">搜索</button> |
| | | </view> |
| | | |
| | | <!-- 状态切换标签 --> |
| | | <view class="status-tabs"> |
| | | <button :class="['tab-button', current === 0 ? 'active' : '']" @click="onClickItem({currentIndex: 0})"> |
| | | {{items[0]}} |
| | | 未提交({{unsubmittedCount}}) |
| | | </button> |
| | | <button :class="['tab-button', current === 1 ? 'active' : '']" @click="onClickItem({currentIndex: 1})"> |
| | | {{items[1]}} |
| | | 已提交({{submittedCount}}) |
| | | </button> |
| | | </view> |
| | | </view> |
| | |
| | | items: ['未提交', '已提交'], |
| | | current: 0, |
| | | data: [], |
| | | tipShow: false // 是否显示顶部提示框 |
| | | tipShow: false, // 是否显示顶部提示框 |
| | | searchValue: '', |
| | | // ===== 新增搜索功能相关数据 ===== |
| | | optionsIndex: 0, // 当前选择的查询条件索引 |
| | | options: ['工单', '检验单号', '产线', '物料编码', '物料名称'], // 查询条件选项 |
| | | selectedField: 'billNo', // 当前选择的查询字段,默认为工单 |
| | | // ===== 新增数量统计变量 ===== |
| | | unsubmittedCount: 0, // 未提交数量 |
| | | submittedCount: 0 // 已提交数量 |
| | | }; |
| | | }, |
| | | onLoad() { |
| | |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | // ===== 新增查询条件选择方法 ===== |
| | | onOptionsChange(e) { |
| | | this.optionsIndex = e.detail.value; |
| | | // 根据选择的选项设置搜索字段 |
| | | const fieldMap = { |
| | | 0: 'billNo', // 工单 |
| | | 1: 'releaseNo', // 检验单号 |
| | | 2: 'daa020', // 产线 |
| | | 3: 'itemNo', // 物料编码 |
| | | 4: 'itemName' // 物料名称 |
| | | }; |
| | | this.selectedField = fieldMap[this.optionsIndex]; |
| | | }, |
| | | |
| | | //搜索框点击事件 |
| | | btnclicked() { |
| | | this.init(); |
| | | }, |
| | | |
| | | init() { |
| | | |
| | | //获取搜索条件内容 |
| | | let SearchValue = this.searchValue; |
| | | |
| | | let result = "未完成"; |
| | | if (this.current === 1) { |
| | | result = "已完成"; |
| | |
| | | pageIndex: 1, |
| | | limit: 20, |
| | | createUser: this.$loginInfo.account, |
| | | result: result |
| | | result: result, |
| | | SearchValue: SearchValue, |
| | | selectedIndex: this.optionsIndex, // 新增:搜索条件索引 |
| | | searchField: this.selectedField // 新增:搜索字段名 |
| | | } |
| | | }).then(res => { |
| | | this.data = res.data.tbBillList; |
| | | // 设置数量统计 |
| | | if (this.current === 1) { |
| | | this.submittedCount = res.totalCount; |
| | | } else { |
| | | this.unsubmittedCount = res.totalCount; |
| | | } |
| | | }) |
| | | }, |
| | | handleFabClick() { |
| | |
| | | |
| | | .filter-controls { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | gap: 10px; |
| | | } |
| | | |
| | | /* 查询条件选择器 */ |
| | | .dropdown-filter { |
| | | min-width: 80px; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .picker { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | min-width: 80px; |
| | | } |
| | | |
| | | /* 搜索框样式 */ |
| | | .search-container { |
| | | display: flex; |
| | | flex: 1; |
| | | margin-right: 10px; |
| | | height: 36px; |
| | | min-width: 200px; |
| | | } |
| | | |
| | | .search-input { |
| | | flex: 1; |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px 0 0 4px; |
| | | font-size: 14px; |
| | | background-color: white; |
| | | } |
| | | |
| | | .search-button { |
| | | padding: 0 12px; |
| | | border: 1px solid #3498db; |
| | | border-radius: 0 4px 4px 0; |
| | | background-color: #3498db; |
| | | color: white; |
| | | font-size: 14px; |
| | | margin: 0; |
| | | } |
| | | |
| | | .status-tabs { |
| | |
| | | border-radius: 4px; |
| | | overflow: hidden; |
| | | background-color: #ecf0f1; |
| | | width: 300px; |
| | | flex: 1; |
| | | min-width: 200px; |
| | | } |
| | | |
| | | .tab-button { |