| | |
| | | <template> |
| | | <view class="inspection-app"> |
| | | <view class="filter-section"> |
| | | <view class="filter-controls"> |
| | | |
| | | <view class="status-tabs"> |
| | | <button :class="['tab-button', activeTab === 0 ? 'active' : '']" |
| | | @click="switchTab(0)">未检验</button> |
| | | <button :class="['tab-button', activeTab === 1 ? 'active' : '']" |
| | | @click="switchTab(1)">{{checkedCount}}</button> |
| | | </view> |
| | | <view> |
| | | <!-- 刷新页面后的顶部提示框 --> |
| | | <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view> |
| | | |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 检验单列表 --> |
| | | <view class="inspection-list"> |
| | | <!-- 检验单卡片1 --> |
| | | <view class="inspection-card" v-for="(item, index) in inspectionList" :key="index"> |
| | | <view class="card-header"> |
| | | <text class="badge urgent" v-if="item.urgentFlag == 1">急料</text> |
| | | <text class="badge urgent" v-if="item.jycs == 1">超时</text> |
| | | <text class="badge normal" v-if="item.ftype == 1">委外</text> |
| | | <text class="badge normal" v-if="item.first == 1">首次来料</text> |
| | | <text class="card-title">检验单号: {{item.billNo}}</text> |
| | | <text class="status pass" v-if="item.result=='合格' && item.activeTab==1">合格</text> |
| | | <text class="status Unqualified" v-if="item.result=='不合格' && item.activeTab==1">不合格</text> |
| | | </view> |
| | | <!-- 搜索框 --> |
| | | <view class="search-bar"> |
| | | <view class="search-bar-box"> |
| | | <!-- <image class="search-span" src="../../static/image/searchSpan.png"/> --> |
| | | <input type="text" value="" v-model="searchValue" placeholder="物料编码 物料名称" class="search-text" maxlength="100" focus/> |
| | | <button @click="btnclicked" class="search-btn">搜索</button> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="card-body"> |
| | | <view class="info-row"> |
| | | <view class="info-item"> |
| | | <text class="info-label">物料信息</text> |
| | | <text class="info-content">{{item.itemNo}} </text> |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">产线</text> |
| | | <text class="info-content">{{item.line}}</text> |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">工单数量</text> |
| | | <text class="info-content highlight">{{item.daa008}}</text> |
| | | </view> |
| | | |
| | | </view> |
| | | <view class="info-row"> |
| | | <view class="info-item"> |
| | | <text class="info-label">产品信息</text> |
| | | <text class="info-content">{{item.daa003}} |{{item.daa004}} </text> |
| | | |
| | | <view class="newsTab"> |
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" |
| | | active-color="#87cefa"></uni-segmented-control> |
| | | <view class="content"> |
| | | <view v-show="current===0"> |
| | | <!-- 基于 uni-list 的页面布局 --> |
| | | <uni-list> |
| | | <!-- to 属性携带参数跳转详情页面,当前只为参考 --> |
| | | <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;" |
| | | class="list-item" direction="column" v-for="item in data" :key="item.id" |
| | | :to="'Add?id='+item.id+'&billNo='+item.billNo"> |
| | | <!-- 通过header插槽定义列表的标题 --> |
| | | <template v-slot:header> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">检验单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.billNo"/> |
| | | </view> |
| | | </template> |
| | | <!-- 通过body插槽定义列表内容显示 --> |
| | | <template v-slot:body> |
| | | <view style="margin-top: 0;"> |
| | | <view class="uni-content"> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建时间:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验类型:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.SJ_MJ"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">产线:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.line"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">物料编码:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">销售订单:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.caa015" /> |
| | | </view> |
| | | </view> |
| | | <view class="info-row"> |
| | | <view class="info-item" v-if="item.newFngDesc!=null"> |
| | | <text class="info-label">上次不良描述</text> |
| | | <text class="info-content">{{item.newFngDesc}}</text> |
| | | </view> |
| | | <view class="info-item" v-if="item.fngDesc!=null"> |
| | | <text class="info-label">不良描述</text> |
| | | <text class="info-content">{{item.fngDesc}}</text> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">客户:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.cust" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="meta-info"> |
| | | <text class="meta-item"><uni-icons type="calendar" size="14" color="#95a5a6"></uni-icons> |
| | | {{item.statusDate}}</text> |
| | | <text class="meta-item"><uni-icons type="person" size="14" color="#95a5a6"></uni-icons> |
| | | {{item.statusUser}}</text> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">产品名称:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa003"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="card-actions"> |
| | | <button v-if="item.activeTab==0" class="primary" @click="startInspection(item)">开始检验</button> |
| | | <button v-if="item.activeTab==1" class="primary" @click="startInspection(item)">查看</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">规格型号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa004"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">工单数量:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa008"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.fName"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检测结果:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.result"/> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | <!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 --> |
| | | <!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> --> |
| | | |
| | | <!-- <view class="fab" @click="handleFabClick"> |
| | | <text class="fab-icon">+</text> |
| | | </view> --> |
| | | <view class="plus-button" @click="handleFabClick"> |
| | | + |
| | | </view> |
| | | </view> |
| | | <view v-show="current===1"> |
| | | <uni-list> |
| | | <!-- to 属性携带参数跳转详情页面,当前只为参考 --> |
| | | <uni-list-item style="margin-top: 10px;background-color: #EFEFF4;border-radius: 5px;" |
| | | class="list-item" direction="column" v-for="item in data" :key="item.id" |
| | | :to="'Add?id='+item.id+'&billNo='+item.billNo"> |
| | | <!-- 通过header插槽定义列表的标题 --> |
| | | <template v-slot:header> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">检验单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.billNo"/> |
| | | </view> |
| | | </template> |
| | | <!-- 通过body插槽定义列表内容显示 --> |
| | | <template v-slot:body> |
| | | <view style="margin-top: 0;"> |
| | | <view class="uni-content"> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建时间:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.statusDate"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验类型:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.SJ_MJ"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">产线:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.line"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">物料编码:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">销售订单:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.caa015" /> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">客户:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.cust" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">产品名称:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa003"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">规格型号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa004"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">工单数量:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa008"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.fName"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.statusUser"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检测结果:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.result"/> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | projectIndex: 0, |
| | | optionsIndex: 0, |
| | | projects: ['当前', '全部'], |
| | | activeTab: 0, // 0-未检验, 1-已检验 |
| | | uncheckedCount: 0, |
| | | checkedCount: '已检验', |
| | | inspectionList: [], |
| | | pageIndex: 1, |
| | | limit: 20, |
| | | IQCJL: 0, |
| | | options: ['项目', '物料编号', '物料名称', '供应商', '采购员'], |
| | | searchValue: '' |
| | | export default { |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | items: ['未完成', '已完成'], |
| | | current: 0, |
| | | data: [], |
| | | tipShow: false ,// 是否显示顶部提示框 |
| | | searchValue:'' |
| | | }; |
| | | }, |
| | | onLoad() { |
| | | //页面加载时调用的事件 |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | //搜索框点击事件 |
| | | btnclicked() { |
| | | this.init(); |
| | | }, |
| | | init() { |
| | | |
| | | |
| | | //获取搜索条件内容 |
| | | let SearchValue=this.searchValue; |
| | | |
| | | let result = "未完成"; |
| | | if (this.current === 1) { |
| | | result = "已完成"; |
| | | } |
| | | //页面加载时调用的事件 |
| | | this.$post({ |
| | | url: "/SJ/GetPage", |
| | | data: { |
| | | pageIndex: 1, |
| | | limit: 20, |
| | | statusUser: this.$loginInfo.account, |
| | | result: result, |
| | | SearchValue:SearchValue |
| | | } |
| | | }).then(res => { |
| | | this.data = res.data.tbBillList; |
| | | }) |
| | | }, |
| | | handleFabClick() { |
| | | uni.navigateTo({ |
| | | url: 'Add?id' |
| | | }); |
| | | }, |
| | | onClickItem(index) { |
| | | if (this.current !== index.currentIndex) { |
| | | this.current = index.currentIndex; |
| | | this.init(); |
| | | } |
| | | }, |
| | | }, |
| | | /** |
| | | * 下拉刷新回调函数 |
| | | */ |
| | | onPullDownRefresh() { |
| | | //重新执行一遍查询 |
| | | this.init(); |
| | | this.tipShow = true; |
| | | //关闭动画 |
| | | uni.stopPullDownRefresh(); |
| | | |
| | | } |
| | | }, |
| | | onLoad() { |
| | | //页面加载时调用的事件 |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | init() { |
| | | |
| | | let result = "未完成"; |
| | | if (this.activeTab === 1) { |
| | | result = "已完成"; |
| | | } |
| | | |
| | | if (this.isLoading) return; // 如果正在加载则不继续执行 |
| | | |
| | | this.isLoading = true; |
| | | |
| | | //获取当前登录的用户 |
| | | let userName = this.$loginInfo.account; |
| | | |
| | | |
| | | //页面加载时调用的事件 |
| | | this.$post({ |
| | | url: "/SJ/GetPage", |
| | | data: { |
| | | pageIndex: this.pageIndex , |
| | | limit: 20, |
| | | statusUser: this.$loginInfo.account, |
| | | result: result |
| | | } |
| | | }).then(res => { |
| | | |
| | | if (this.pageIndex === 1) { |
| | | // 如果是第一页,直接覆盖原数据 |
| | | this.inspectionList = res.data.tbBillList; |
| | | //添加Tab信息,判断是已检还是未检数据 |
| | | this.inspectionList.forEach((item, index) => { |
| | | this.$set(item, 'activeTab', this.activeTab); |
| | | this.$set(item, 'IQCJL', this.IQCJL); |
| | | }); |
| | | } else { |
| | | |
| | | if (res.data.tbBillList.length > 0) { |
| | | // 如果是下一页,追加新数据 |
| | | this.inspectionList = [...this.inspectionList, ...res.data.tbBillList]; |
| | | //添加Tab信息,判断是已检还是未检数据 |
| | | this.inspectionList.forEach((item, index) => { |
| | | this.$set(item, 'activeTab', this.activeTab); |
| | | this.$set(item, 'IQCJL', this.IQCJL); |
| | | }); |
| | | } |
| | | |
| | | } |
| | | console.log(this.inspectionList) |
| | | this.totalCount = res.data.totalCount; |
| | | this.totalPage = Math.ceil(this.totalCount / this.limit); |
| | | |
| | | this.noData = this.pageIndex >= this.totalPage; |
| | | this.isLoading = false; // 结束加载 |
| | | if (this.activeTab === 1) { |
| | | // this.checkedCount = '已检验(' + res.totalCount + ')'; |
| | | this.checkedCount = '已检验'; |
| | | } else { |
| | | this.uncheckedCount = res.totalCount; |
| | | } |
| | | }).catch(() => { |
| | | this.isLoading = false; // 出现错误时结束加载 |
| | | }); |
| | | }, |
| | | switchTab(index) { |
| | | this.activeTab = index |
| | | // 这里可以添加切换标签页的逻辑 |
| | | this.inspectionList = []; |
| | | this.init(); |
| | | }, |
| | | //跳转检验单 |
| | | startInspection(item) { |
| | | |
| | | if (this.activeTab === 1) { |
| | | uni.navigateTo({ |
| | | url: 'Add?id=' + item.id + '¤t=B' |
| | | }) |
| | | } else { |
| | | uni.navigateTo({ |
| | | url: 'Add?id=' + item.id + '¤t=A' |
| | | }) |
| | | } |
| | | |
| | | }, |
| | | /** |
| | | * 下拉刷新回调函数 |
| | | */ |
| | | onPullDownRefresh() { |
| | | |
| | | this.pageIndex = 1; |
| | | //重新执行一遍查询 |
| | | this.init(); |
| | | // this.tipShow = true; |
| | | //关闭动画 |
| | | uni.stopPullDownRefresh(); |
| | | |
| | | // setTimeout(function () { |
| | | // this.tipShow = false; |
| | | // }, 6000); |
| | | |
| | | }, |
| | | /** |
| | | * 上拉加载回调函数 |
| | | */ |
| | | onReachBottom() { |
| | | if (this.noData || this.isLoading) return; |
| | | this.pageIndex++; |
| | | this.init(); // 加载更多数据 |
| | | }, |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | | // this.pageIndex = 1; |
| | | // this.data = []; |
| | | // //this.current = 0 |
| | | this.init(); |
| | | } |
| | | } |
| | | } |
| | | setTimeout(function () { |
| | | this.tipShow = false; |
| | | }, 3000); |
| | | }, |
| | | /** |
| | | * 上拉加载回调函数 |
| | | */ |
| | | onReachBottom() { |
| | | this.init(); |
| | | }, |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | | this.init(); |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* 基础样式重置 */ |
| | | .inspection-app { |
| | | padding: 10px; |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | } |
| | | <style lang="scss"> |
| | | @import '@/common/uni-ui.scss'; |
| | | |
| | | /* 顶部筛选区 */ |
| | | .filter-section { |
| | | margin-bottom: 24px; |
| | | } |
| | | |
| | | .filter-section h1 { |
| | | font-size: 24px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | /* 新增搜索框样式 */ |
| | | .search-container { |
| | | display: flex; |
| | | flex: 1; |
| | | margin: 0 10px; |
| | | height: 36px; |
| | | /* 与其他控件高度一致 */ |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | /* .filter-controls { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | gap: 16px; |
| | | .uni-note { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | .dropdown-filter { |
| | | /* Set the input backgrounds to be gray */ |
| | | .form-input { |
| | | background-color: #f2f2f2; /* Or any other shade of gray you prefer */ |
| | | } |
| | | |
| | | /* Ensure automatic adaptation based on page size */ |
| | | .form-group { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } */ |
| | | .filter-controls { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 10px; |
| | | } |
| | | } |
| | | |
| | | .dropdown-filter { |
| | | min-width: 70px; |
| | | } |
| | | .form-label { |
| | | margin-bottom: 0; |
| | | border-bottom: 1px solid #FFFFFF; |
| | | padding: 5px; |
| | | font-size: 12px; |
| | | width: 60px; |
| | | /* Adjust the font size as per your requirement */ |
| | | } |
| | | |
| | | .filter-label { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | } |
| | | .form-input { |
| | | flex: 1; |
| | | margin-bottom: 0; |
| | | border-bottom: 1px solid #c7c7c7; |
| | | padding: 5px; |
| | | font-size: 12px; |
| | | background-color: #FFFFFF; |
| | | /* Adjust the font size as per your requirement */ |
| | | } |
| | | |
| | | .picker { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | min-width: 120px; |
| | | } |
| | | .plus-button { |
| | | position: fixed; |
| | | bottom: 20px; |
| | | right: 20px; |
| | | width: 60px; |
| | | height: 60px; |
| | | border-radius: 50%; |
| | | background-color: #007bff; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | line-height: 59px; |
| | | font-size: 24px; |
| | | cursor: pointer; |
| | | z-index: 1000; |
| | | margin-bottom: 35px; |
| | | } |
| | | |
| | | .status-tabs { |
| | | display: flex; |
| | | border-radius: 4px; |
| | | overflow: hidden; |
| | | background-color: #ecf0f1; |
| | | } |
| | | page { |
| | | display: flex; |
| | | flex-direction: column; |
| | | box-sizing: border-box; |
| | | background-color: #efeff4; |
| | | min-height: 100%; |
| | | height: auto; |
| | | } |
| | | |
| | | .status-tabs { |
| | | flex: 1; |
| | | min-width: 200px; |
| | | } |
| | | .tips { |
| | | color: #67c23a; |
| | | font-size: 14px; |
| | | line-height: 40px; |
| | | text-align: center; |
| | | background-color: #f0f9eb; |
| | | height: 0; |
| | | opacity: 0; |
| | | transform: translateY(-100%); |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .tab-button { |
| | | padding: 0px 16px; |
| | | border: none; |
| | | background: none; |
| | | font-size: 14px; |
| | | transition: all 0.3s; |
| | | margin: 0; |
| | | height: 35px; |
| | | } |
| | | .tips-ani { |
| | | transform: translateY(0); |
| | | height: 40px; |
| | | opacity: 1; |
| | | } |
| | | |
| | | .tab-button.active { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | .content { |
| | | width: 100%; |
| | | } |
| | | |
| | | /* 检验单列表 */ |
| | | .inspection-list { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | } |
| | | .list-picture { |
| | | width: 100%; |
| | | height: 145px; |
| | | } |
| | | |
| | | /* 检验单卡片 */ |
| | | .inspection-card { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | overflow: hidden; |
| | | transition: all 0.3s; |
| | | } |
| | | .thumb-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .card-header { |
| | | padding: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .ellipsis { |
| | | display: flex; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .card-title { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | flex: 1; |
| | | margin: 0 8px; |
| | | } |
| | | .uni-ellipsis-1 { |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .badge { |
| | | font-size: 12px; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | margin-right: 8px; |
| | | } |
| | | .uni-ellipsis-2 { |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | display: -webkit-box; |
| | | -webkit-line-clamp: 2; |
| | | -webkit-box-orient: vertical; |
| | | } |
| | | |
| | | .badge.urgent { |
| | | background-color: #e74c3c; |
| | | color: white; |
| | | } |
| | | |
| | | .badge.normal { |
| | | background-color: #ffaa00; |
| | | color: white; |
| | | } |
| | | // 搜索框 |
| | | .search-bar{ |
| | | width: 100%; |
| | | height: 80rpx; |
| | | margin-top: 2%; |
| | | } |
| | | .search-bar-box{ |
| | | display: flex; |
| | | margin: 0 auto; |
| | | width: 90vw; |
| | | height: 60rpx; |
| | | border:5rpx solid #00a8cc; |
| | | border-radius: 50rpx; |
| | | } |
| | | .search-span{ |
| | | width: 100rpx; |
| | | height: 56rpx; |
| | | margin-top: 6rpx; |
| | | margin-left: 30rpx; |
| | | } |
| | | .search-text{ |
| | | width: 100%; |
| | | margin-top: 10rpx; |
| | | margin-left: 20rpx; |
| | | font-size: 30rpx; |
| | | color: #7f7f81; |
| | | } |
| | | .search-btn{ |
| | | background-color: #00a8cc; /* Green */ |
| | | color: white; |
| | | text-align: center; |
| | | display: inline-block; |
| | | font-size: 35rpx; |
| | | width:100px; |
| | | height: 60rpx; |
| | | line-height: 65rpx; |
| | | border-radius: 30rpx; |
| | | letter-spacing: 3rpx; |
| | | } |
| | | |
| | | .status { |
| | | font-size: 12px; |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .status.pending { |
| | | background-color: #f39c12; |
| | | color: white; |
| | | } |
| | | |
| | | .status.assigned { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | |
| | | .status.pass { |
| | | background-color: #00cd00; |
| | | color: white; |
| | | } |
| | | |
| | | .status.Unqualified { |
| | | background-color: #ff0000; |
| | | color: white; |
| | | } |
| | | |
| | | .card-body { |
| | | padding: 16px; |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | margin-bottom: 12px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .info-item { |
| | | flex: 1; |
| | | } |
| | | |
| | | .info-label { |
| | | display: block; |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .info-content { |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | line-height: 1.5; |
| | | } |
| | | |
| | | .highlight { |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .meta-info { |
| | | display: flex; |
| | | gap: 16px; |
| | | font-size: 12px; |
| | | color: #95a5a6; |
| | | margin-top: 12px; |
| | | } |
| | | |
| | | .meta-item { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 4px; |
| | | } |
| | | |
| | | .card-actions { |
| | | padding: 12px 16px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 8px; |
| | | } |
| | | |
| | | button { |
| | | padding: 8px 16px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | flex: 1; |
| | | } |
| | | |
| | | button.primary { |
| | | background-color: #3498db; |
| | | color: white; |
| | | border-color: #2980b9; |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (min-width: 768px) { |
| | | .inspection-list { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
| | | } |
| | | |
| | | .info-row { |
| | | flex-direction: row; |
| | | } |
| | | |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (min-width: 300px) { |
| | | .inspection-list { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| | | } |
| | | |
| | | .info-row { |
| | | flex-direction: row; |
| | | } |
| | | |
| | | .picker { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | min-width: 10px; |
| | | } |
| | | |
| | | /* .search-container { |
| | | order: 3; |
| | | width: 100%; |
| | | margin: 0px 0 0 0; |
| | | } |
| | | |
| | | .status-tabs { |
| | | order: 4; |
| | | width: 100%; |
| | | } */ |
| | | } |
| | | uni-button{ |
| | | margin: 0px; |
| | | } |
| | | </style> |