style: 优化物料和备件入库供应商能够选择
zhongwenkai
1 day ago
parent
eea217ccf8
commit
29e2c544ca
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<NavBar :title="'选择供应商'" />
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<input class="search-input" v-model="searchText" placeholder="搜索供应商名称" @input="onSearch" />
|
||||
<text v-if="searchText" class="search-clear" @click="clearSearch">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="list-scroll" v-if="filteredList.length > 0">
|
||||
<view class="list-wrap">
|
||||
<view v-for="item in filteredList" :key="item.id" class="supplier-card" :class="{ active: selectedId === item.id }" @click="handleSelect(item)">
|
||||
<view class="supplier-name">{{ textValue(item.name) }}</view>
|
||||
<view class="supplier-info" v-if="item.contact || item.mobile">
|
||||
<text class="info-text" v-if="item.contact">{{ item.contact }}</text>
|
||||
<text class="info-text" v-if="item.mobile">{{ item.mobile }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-else class="empty-wrap">
|
||||
<text v-if="loading" class="empty-text">加载中...</text>
|
||||
<text v-else class="empty-text">暂无供应商数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 底部确认按钮 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="bottom-btn confirm-btn" @click="handleConfirm">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import NavBar from '@/components/common/NavBar.vue'
|
||||
import { getSupplierSimpleList } from '@/api/mes/sparepart'
|
||||
const list = ref([])
|
||||
const selectedId = ref(null)
|
||||
const selectedItem = ref(null)
|
||||
const searchText = ref('')
|
||||
const loading = ref(false)
|
||||
function textValue(v) { if (v === 0) return '0'; if (v == null) return '-'; const s = String(v).trim(); return s || '-' }
|
||||
const filteredList = computed(() => {
|
||||
const keyword = searchText.value.trim().toLowerCase()
|
||||
if (!keyword) return list.value
|
||||
return list.value.filter(s => (s.name || '').toLowerCase().includes(keyword))
|
||||
})
|
||||
function onSearch() {}
|
||||
function clearSearch() { searchText.value = '' }
|
||||
async function loadSuppliers() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getSupplierSimpleList()
|
||||
const root = res && res.data !== undefined ? res.data : res
|
||||
list.value = Array.isArray(root) ? root : (Array.isArray(root?.data) ? root.data : [])
|
||||
} catch (e) { console.error('loadSuppliers error', e) }
|
||||
finally { loading.value = false }
|
||||
}
|
||||
function handleSelect(item) {
|
||||
if (!item?.id) return
|
||||
selectedId.value = item.id
|
||||
selectedItem.value = item
|
||||
}
|
||||
function handleConfirm() {
|
||||
if (!selectedItem.value) {
|
||||
uni.showToast({ title: '请先选择供应商', icon: 'none' })
|
||||
return
|
||||
}
|
||||
getApp().globalData._supplierSelectResult = selectedItem.value
|
||||
uni.navigateBack()
|
||||
}
|
||||
onShow(() => { loadSuppliers() })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-container { min-height: 100vh; background: #f5f6f8; }
|
||||
.search-bar { padding: 16rpx 24rpx; background: #fff; }
|
||||
.search-input-wrap { display: flex; align-items: center; height: 72rpx; padding: 0 16rpx; background: #f5f6f8; border-radius: 36rpx; }
|
||||
.search-input { flex: 1; font-size: 28rpx; color: #333; }
|
||||
.search-clear { font-size: 28rpx; color: #999; padding: 8rpx; }
|
||||
.list-scroll { height: calc(100vh - 88rpx); }
|
||||
.list-wrap { padding: 16rpx 24rpx; }
|
||||
.supplier-card { background: #fff; border-radius: 14rpx; padding: 24rpx; margin-bottom: 16rpx; border: 2rpx solid transparent; }
|
||||
.supplier-card.active { border-color: #2563eb; background: #f0f5ff; }
|
||||
.supplier-name { font-size: 30rpx; font-weight: 700; color: #1a1a1a; }
|
||||
.supplier-info { margin-top: 8rpx; display: flex; gap: 16rpx; }
|
||||
.info-text { font-size: 24rpx; color: #6b7280; }
|
||||
.empty-wrap { padding: 120rpx 0; text-align: center; }
|
||||
.empty-text { font-size: 28rpx; color: #999; }
|
||||
.bottom-actions { position: fixed; left: 0; right: 0; bottom: 0; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99; }
|
||||
.bottom-btn { width: 100%; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 16rpx; font-size: 30rpx; font-weight: 600; }
|
||||
.bottom-btn.confirm-btn { background: #1f4b79; color: #ffffff; }
|
||||
</style>
|
||||
Loading…
Reference in New Issue