From c352c4a783c6f21f4615d87e019768b94a4417d2 Mon Sep 17 00:00:00 2001 From: hwj Date: Tue, 30 Jun 2026 11:56:02 +0800 Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E8=AE=BE=E5=A4=87=E5=8F=B0?= =?UTF-8?q?=E8=B4=A6-=E7=AD=9B=E9=80=89=E6=A1=86=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/equipmentLedger/index.vue | 205 +++++------------- 1 file changed, 58 insertions(+), 147 deletions(-) diff --git a/src/pages_function/pages/equipmentLedger/index.vue b/src/pages_function/pages/equipmentLedger/index.vue index c12655c..34fad8b 100644 --- a/src/pages_function/pages/equipmentLedger/index.vue +++ b/src/pages_function/pages/equipmentLedger/index.vue @@ -82,54 +82,28 @@ {{ t('equipmentLedger.moreFilter') }} - - - {{ t('equipmentLedger.basicInfo') }} + + + {{ t('equipmentLedger.deviceBrand') }} + - - - {{ t('equipmentLedger.deviceBrand') }} - - - - {{ t('equipmentLedger.sn') }} - - - - - - - - {{ t('equipmentLedger.categoryInfo') }} + + {{ t('equipmentLedger.sn') }} + - - - {{ t('equipmentLedger.deviceType') }} - + + {{ t('equipmentLedger.deviceType') }} + + {{ selectedDeviceTypeLabel }} - - - {{ option.name }} - - - - - - - - - {{ t('equipmentLedger.dateFilter') }} + {{ t('equipmentLedger.outgoingTime') }} @@ -155,10 +129,6 @@ :data="lineCascaderOptions" value-key="value" label-key="label" children-key="children" header-direction="row" :options-cols="2" :auto-close="false" @confirm="onLineCascaderConfirm" /> - - @@ -187,7 +157,6 @@ const selectedDeviceTypeId = ref(''); const deviceBrandFilter = ref(''); const snFilter = ref(''); const outgoingTimeFilter = ref([]); -const drawerDeviceTypePanelOpen = ref(false); const filterPopupRef = ref(null); const lineTree = ref([]); const deviceTypeTree = ref([]); @@ -195,9 +164,6 @@ const lineCascaderShow = ref(false); const lineCascaderOpenedFromDrawer = ref(false); const lineCascaderValue = ref([]); const lineCascaderKey = ref(0); -const deviceTypeCascaderShow = ref(false); -const deviceTypeCascaderValue = ref([]); -const deviceTypeCascaderKey = ref(0); const list = ref([]); const loading = ref(false); const loadingMore = ref(false); @@ -254,10 +220,6 @@ const selectedLineLabel = computed(() => { return found?.name || t('equipmentLedger.lineFilter'); }); const deviceTypeOptions = computed(() => flattenLineTree(deviceTypeTree.value)); -const deviceTypeCascaderOptions = computed(() => [ - { label: t('functionCommon.all'), value: '' }, - ...normalizeLineTreeForCascader(deviceTypeTree.value), -]); const selectedDeviceTypeLabel = computed(() => { if (selectedDeviceTypeId.value === '') return t('equipmentLedger.deviceType'); const found = deviceTypeOptions.value.find( @@ -265,10 +227,19 @@ const selectedDeviceTypeLabel = computed(() => { ); return found?.name || t('equipmentLedger.deviceType'); }); -const drawerDeviceTypeOptions = computed(() => [ - { id: '', name: t('functionCommon.all'), level: 0 }, - ...deviceTypeOptions.value, +const drawerDeviceTypePickerOptions = computed(() => [ + { id: '', label: t('functionCommon.all') }, + ...deviceTypeOptions.value.map((item) => ({ + id: item.id, + label: `${' '.repeat(item.level)}${item.name}`, + })), ]); +const drawerDeviceTypePickerIndex = computed(() => { + const idx = drawerDeviceTypePickerOptions.value.findIndex( + (item) => String(item.id) === String(selectedDeviceTypeId.value), + ); + return idx >= 0 ? idx : 0; +}); onLoad(async () => { activateKeywordFocus(); await initAllDict(); @@ -474,35 +445,15 @@ function closeFilterDrawer() { } async function confirmFilterDrawer() { - drawerDeviceTypePanelOpen.value = false; closeFilterDrawer(); await fetchList(true); } -function toggleDrawerDeviceTypePanel() { - drawerDeviceTypePanelOpen.value = !drawerDeviceTypePanelOpen.value; -} - - -function selectDrawerDeviceType(option) { +function onDrawerDeviceTypePickerChange(e) { + const idx = Number(e?.detail?.value || 0); + const option = drawerDeviceTypePickerOptions.value[idx]; selectedDeviceTypeId.value = option?.id === '' ? '' : String(option?.id ?? ''); - deviceTypeCascaderValue.value = selectedDeviceTypeId.value - ? findLinePath(deviceTypeTree.value, selectedDeviceTypeId.value) - : []; - drawerDeviceTypePanelOpen.value = false; -} - -function openDeviceTypeCascader() { - deviceTypeCascaderShow.value = true; -} - -function onDeviceTypeCascaderConfirm(values) { - const selectedValues = Array.isArray(values) ? values : []; - const nextValue = selectedValues[selectedValues.length - 1] ?? ''; - selectedDeviceTypeId.value = nextValue === '' ? '' : String(nextValue); - deviceTypeCascaderValue.value = - nextValue === '' ? [] : selectedValues.map((item) => String(item)); } function openLineCascader(fromDrawer = false) { @@ -519,6 +470,7 @@ function onLineCascaderConfirm(values) { if (!lineCascaderOpenedFromDrawer.value) fetchList(true); lineCascaderOpenedFromDrawer.value = false; } + async function resetFilters() { searchKeyword.value = ''; deviceBrandFilter.value = ''; @@ -527,14 +479,10 @@ async function resetFilters() { selectedStatus.value = ''; selectedLineId.value = ''; selectedDeviceTypeId.value = ''; - drawerDeviceTypePanelOpen.value = false; lineCascaderValue.value = []; - deviceTypeCascaderValue.value = []; lineCascaderShow.value = false; lineCascaderOpenedFromDrawer.value = false; - deviceTypeCascaderShow.value = false; lineCascaderKey.value += 1; - deviceTypeCascaderKey.value += 1; closeFilterDrawer(); activateKeywordFocus(); await fetchList(true); @@ -823,54 +771,56 @@ function formatDateValue(value) { } .drawer-section { - // margin-top: 20rpx; margin-bottom: 18rpx; - padding: 28rpx 28rpx 30rpx; + padding: 8rpx 28rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; } -.drawer-section-head { +.drawer-fields { 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; + 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-field-wide { - grid-column: 1 / -1; + grid-column: auto; } .drawer-label { - display: block; - margin-bottom: 12rpx; + 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-input, .drawer-picker, .drawer-date { + min-width: 0; + flex: 1; width: 100%; min-height: 74rpx; border: 0; @@ -884,25 +834,26 @@ function formatDateValue(value) { padding: 0 18rpx; font-size: 26rpx; color: #111827; - text-align: center; + text-align: right; } .drawer-picker { display: flex; align-items: center; - justify-content: 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: center; + text-align: right; } .drawer-picker-text.placeholder { @@ -915,46 +866,6 @@ function formatDateValue(value) { padding: 0 12rpx; } -.drawer-option-panel { - max-height: 360rpx; - margin-top: 12rpx; - border-radius: 12rpx; - background: #f7f8fb; - overflow: hidden; -} - -.drawer-option-item { - min-height: 72rpx; - padding-right: 24rpx; - display: flex; - align-items: center; - 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-date :deep(.uni-date), .drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x),