|
|
|
|
@ -3,6 +3,13 @@
|
|
|
|
|
<NavBar :title="t('materialOutbound.moduleName')" />
|
|
|
|
|
|
|
|
|
|
<view class="filter-bar">
|
|
|
|
|
<view class="filter-row search-row">
|
|
|
|
|
<view class="keyword-wrap">
|
|
|
|
|
<input v-model="searchKeyword" class="keyword-input" type="text" :placeholder="t('materialOutbound.searchPlaceholder')" confirm-type="search" @input="handleKeywordInput" @confirm="handleSearch" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="icon-filter-btn" @click="resetFilters"><uni-icons type="refresh" size="24" color="#7b8491"></uni-icons></view>
|
|
|
|
|
<view class="icon-filter-btn" @click="openFilterDrawer"><uni-icons type="settings" size="24" color="#7b8491"></uni-icons></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="filter-row quick-row">
|
|
|
|
|
<picker :range="statusPickerLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
|
|
|
|
|
<view class="status-filter">
|
|
|
|
|
@ -11,38 +18,24 @@
|
|
|
|
|
</view>
|
|
|
|
|
</picker>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="filter-row search-row">
|
|
|
|
|
<view class="keyword-wrap">
|
|
|
|
|
<input v-model="searchKeyword" class="keyword-input" type="text" :placeholder="t('materialOutbound.searchPlaceholder')" confirm-type="search" @input="handleKeywordInput" @confirm="handleSearch" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="icon-filter-btn" @click="resetFilters"><uni-icons type="refresh" size="24" color="#7b8491"></uni-icons></view>
|
|
|
|
|
<view class="icon-filter-btn" @click="openFilterDrawer"><uni-icons type="settings" size="24" color="#7b8491"></uni-icons></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<uni-popup ref="filterPopupRef" class="material-outbound-filter-popup" type="right" background-color="transparent" :animation="false">
|
|
|
|
|
<view class="filter-drawer">
|
|
|
|
|
<view class="drawer-header"><text class="drawer-title">{{ t('functionCommon.moreFilter') }}</text></view>
|
|
|
|
|
<scroll-view scroll-y class="drawer-body">
|
|
|
|
|
<view class="drawer-section">
|
|
|
|
|
<view class="drawer-section-head"><text class="drawer-section-title">{{ t('materialOutbound.materialInfo') }}</text></view>
|
|
|
|
|
<view class="drawer-grid">
|
|
|
|
|
<view class="drawer-field drawer-field-wide"><text class="drawer-label">{{ t('materialOutbound.creator') }}</text>
|
|
|
|
|
<view class="drawer-picker" @click="toggleCreatorPanel">
|
|
|
|
|
<text :class="['drawer-picker-text', !selectedCreator ? 'placeholder' : '']">{{ selectedCreatorLabel }}</text>
|
|
|
|
|
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
<scroll-view v-if="creatorPanelOpen" scroll-y class="drawer-option-panel">
|
|
|
|
|
<view v-for="item in creatorOptions" :key="item.value" :class="['drawer-option-item', selectedCreator === item.value ? 'active' : '']" @click="selectCreator(item)">
|
|
|
|
|
<text class="drawer-option-text">{{ item.label }}</text>
|
|
|
|
|
<text v-if="selectedCreator === item.value" class="drawer-option-check">✓</text>
|
|
|
|
|
<view class="drawer-section drawer-fields">
|
|
|
|
|
<view class="drawer-field"><text class="drawer-label">{{ t('materialOutbound.creator') }}</text>
|
|
|
|
|
<picker class="drawer-picker-host" :range="creatorLabels" :value="creatorIndex" @change="onCreatorPickerChange">
|
|
|
|
|
<view class="drawer-picker">
|
|
|
|
|
<text :class="['drawer-picker-text', !selectedCreator ? 'placeholder' : '']">{{ selectedCreatorLabel }}</text>
|
|
|
|
|
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
</picker>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="drawer-field drawer-field-wide">
|
|
|
|
|
<view class="drawer-field">
|
|
|
|
|
<text class="drawer-label">{{ t('materialOutbound.outboundTime') }}</text>
|
|
|
|
|
<view class="drawer-date"><uni-datetime-picker v-model="inTimeFilter" type="daterange" :clear-icon="true" :start-placeholder="t('materialOutbound.startTime')" :end-placeholder="t('materialOutbound.endTime')" /></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
@ -139,7 +132,6 @@ const filterPopupRef = ref(null)
|
|
|
|
|
const selectedCreator = ref(null)
|
|
|
|
|
const inTimeFilter = ref([])
|
|
|
|
|
const creatorOptions = ref([])
|
|
|
|
|
const creatorPanelOpen = ref(false)
|
|
|
|
|
|
|
|
|
|
const statusOptions = computed(() => [
|
|
|
|
|
{ label: t('materialOutbound.tabPending'), value: '0' },
|
|
|
|
|
@ -151,6 +143,8 @@ const statusPickerLabels = computed(() => [t('materialOutbound.allStatus'), ...s
|
|
|
|
|
const statusPickerIndex = computed(() => { if (selectedStatus.value === '') return 0; const idx = statusOptions.value.findIndex(i => i.value === selectedStatus.value); return idx >= 0 ? idx + 1 : 0 })
|
|
|
|
|
const currentStatusLabel = computed(() => { if (selectedStatus.value === '') return t('materialOutbound.allStatus'); const cur = statusOptions.value.find(i => i.value === selectedStatus.value); return cur ? cur.label : t('materialOutbound.allStatus') })
|
|
|
|
|
const selectedCreatorLabel = computed(() => { if (!selectedCreator.value) return t('materialOutbound.creator'); const found = creatorOptions.value.find(u => u.value === selectedCreator.value); return found ? found.label : t('materialOutbound.creator') })
|
|
|
|
|
const creatorLabels = computed(() => [t('materialOutbound.creator'), ...creatorOptions.value.map(o => o.label)])
|
|
|
|
|
const creatorIndex = computed(() => { if (!selectedCreator.value) return 0; const idx = creatorOptions.value.findIndex(o => o.value === selectedCreator.value); return idx >= 0 ? idx + 1 : 0 })
|
|
|
|
|
const list = ref([])
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const loadingMore = ref(false)
|
|
|
|
|
@ -204,11 +198,10 @@ async function fetchList(reset) {
|
|
|
|
|
function onStatusFilterChange(event) { const index = Number(event?.detail?.value || 0); if (index === 0) { selectedStatus.value = '' } else { const item = statusOptions.value[index - 1]; selectedStatus.value = item ? item.value : '' }; fetchList(true) }
|
|
|
|
|
function handleSearch() { clearSearchTimer(); uni.hideKeyboard(); fetchList(true) }
|
|
|
|
|
function handleKeywordInput() { clearSearchTimer(); searchTimer = setTimeout(() => fetchList(true), 300) }
|
|
|
|
|
function resetFilters() { clearSearchTimer(); searchKeyword.value = ''; selectedStatus.value = ''; selectedCreator.value = null; inTimeFilter.value = []; fetchList(true) }
|
|
|
|
|
function resetFilters() { clearSearchTimer(); searchKeyword.value = ''; selectedStatus.value = ''; selectedCreator.value = null; inTimeFilter.value = []; filterPopupRef.value?.close(); fetchList(true) }
|
|
|
|
|
function openFilterDrawer() { loadCreatorOptions(); filterPopupRef.value?.open() }
|
|
|
|
|
function confirmFilterDrawer() { filterPopupRef.value?.close(); fetchList(true) }
|
|
|
|
|
function toggleCreatorPanel() { creatorPanelOpen.value = !creatorPanelOpen.value }
|
|
|
|
|
function selectCreator(item) { selectedCreator.value = selectedCreator.value === item.value ? null : item.value; creatorPanelOpen.value = false }
|
|
|
|
|
function onCreatorPickerChange(event) { const index = Number(event?.detail?.value || 0); if (index === 0) { selectedCreator.value = null } else { const item = creatorOptions.value[index - 1]; selectedCreator.value = item ? item.value : null } }
|
|
|
|
|
async function loadCreatorOptions() { if (creatorOptions.value.length) return; try { const res = await getSimpleUserList(); const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : []); creatorOptions.value = data.map(u => ({ value: u.id || u.userId, label: u.nickname || u.userName || u.name || String(u.id || '') })) } catch (e) {} }
|
|
|
|
|
async function loadMore() { if (loading.value || loadingMore.value || finished.value) return; pageNo.value += 1; await fetchList(false) }
|
|
|
|
|
function openDetail(item) { if (!item?.id) { uni.showToast({ title: t('functionCommon.noIdView'), icon: 'none' }); return }; uni.navigateTo({ url: `/pages_function/pages/materialOutbound/detail?id=${encodeURIComponent(String(item.id))}` }) }
|
|
|
|
|
@ -260,7 +253,7 @@ onHide(() => {})
|
|
|
|
|
.page-container { min-height: 100vh; background: #f4f5f7; }
|
|
|
|
|
.filter-bar { padding: 18rpx 14rpx 20rpx; background: #f3f4f6; }
|
|
|
|
|
.filter-row { display: flex; align-items: center; gap: 18rpx; }
|
|
|
|
|
.search-row { margin-top: 18rpx; }
|
|
|
|
|
.quick-row { margin-top: 18rpx; }
|
|
|
|
|
.quick-row > picker { min-width: 0; flex: 1; }
|
|
|
|
|
.keyword-wrap, .status-filter, .icon-filter-btn { height: 66rpx; border: 1rpx solid #d9dde5; background: #ffffff; box-sizing: border-box; }
|
|
|
|
|
.keyword-wrap { min-width: 0; flex: 1; display: flex; align-items: center; }
|
|
|
|
|
@ -280,24 +273,16 @@ onHide(() => {})
|
|
|
|
|
.drawer-action.reset { border-radius: 12rpx 0 0 12rpx; background: #ffffff; color: #174b78; }
|
|
|
|
|
.drawer-action.confirm { border-radius: 0 12rpx 12rpx 0; background: #174b78; color: #ffffff; }
|
|
|
|
|
|
|
|
|
|
.drawer-section { margin-bottom: 18rpx; padding: 28rpx 28rpx 30rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; }
|
|
|
|
|
.drawer-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
|
|
|
|
|
.drawer-section-title { font-size: 32rpx; line-height: 1.3; color: #1f2937; font-weight: 700; }
|
|
|
|
|
.drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22rpx 20rpx; }
|
|
|
|
|
.drawer-field { min-width: 0; }
|
|
|
|
|
.drawer-field-wide { grid-column: 1 / -1; }
|
|
|
|
|
.drawer-label { display: block; margin-bottom: 12rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; }
|
|
|
|
|
.drawer-picker { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 18rpx; gap: 8rpx; }
|
|
|
|
|
.drawer-picker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: center; }
|
|
|
|
|
.drawer-section { margin-bottom: 18rpx; padding: 8rpx 28rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; }
|
|
|
|
|
.drawer-fields { display: flex; flex-direction: column; }
|
|
|
|
|
.drawer-field { min-width: 0; min-height: 98rpx; display: flex; align-items: center; gap: 20rpx; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; }
|
|
|
|
|
.drawer-field:last-child { border-bottom: 0; }
|
|
|
|
|
.drawer-label { width: 160rpx; flex: 0 0 160rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; }
|
|
|
|
|
.drawer-picker-host { min-width: 0; flex: 1; display: block; }
|
|
|
|
|
.drawer-picker { min-width: 0; flex: 1; width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding: 0 18rpx; gap: 8rpx; }
|
|
|
|
|
.drawer-picker-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: right; }
|
|
|
|
|
.drawer-picker-text.placeholder { color: #9ca3af; }
|
|
|
|
|
.drawer-option-panel { max-height: 360rpx; margin-top: 12rpx; border-radius: 12rpx; background: #f7f8fb; overflow: hidden; }
|
|
|
|
|
.drawer-option-item { min-height: 72rpx; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; }
|
|
|
|
|
.drawer-option-item:last-child { border-bottom: 0; }
|
|
|
|
|
.drawer-option-item.active { background: rgba(23, 75, 120, 0.1); }
|
|
|
|
|
.drawer-option-item.active .drawer-option-text { color: #174b78; font-weight: 600; }
|
|
|
|
|
.drawer-option-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #1f2937; }
|
|
|
|
|
.drawer-option-check { flex-shrink: 0; font-size: 28rpx; color: #174b78; margin-left: 16rpx; }
|
|
|
|
|
.drawer-date { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; padding: 0 12rpx; }
|
|
|
|
|
.drawer-date { min-width: 0; flex: 1; width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; padding: 0 12rpx; }
|
|
|
|
|
.drawer-date :deep(.uni-date), .drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { width: 100%; }
|
|
|
|
|
.drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { min-height: 74rpx; }
|
|
|
|
|
.drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { border: 0; padding: 0; background: transparent; }
|
|
|
|
|
|
zhongwenkai
18 hours ago