linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style：设备台账-筛选框样式调整

Browse Source
master
黄伟杰 20 hours ago
parent 071097c555
commit c352c4a783
1 changed files with 58 additions and 147 deletions
Show Stats Download Patch File Download Diff File

205
src/pages_function/pages/equipmentLedger/index.vue
Unescape Escape View File

@ -82,54 +82,28 @@
<text class="drawer-title">{{ t('equipmentLedger.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('equipmentLedger.basicInfo') }}</text>
<view class="drawer-section drawer-fields">
<view class="drawer-field">
<text class="drawer-label">{{ t('equipmentLedger.deviceBrand') }}</text>
<input v-model="deviceBrandFilter" class="drawer-input" type="text"
:placeholder="t('equipmentLedger.placeholderDeviceBrand')" />
</view>
<view class="drawer-grid">
<view class="drawer-field">
<text class="drawer-label">{{ t('equipmentLedger.deviceBrand') }}</text>
<input v-model="deviceBrandFilter" class="drawer-input" type="text"
:placeholder="t('equipmentLedger.placeholderDeviceBrand')" />
</view>
<view class="drawer-field">
<text class="drawer-label">{{ t('equipmentLedger.sn') }}</text>
<input v-model="snFilter" class="drawer-input" type="text"
:placeholder="t('equipmentLedger.placeholderSn')" />
</view>
</view>
</view>
<view class="drawer-section">
<view class="drawer-section-head">
<text class="drawer-section-title">{{ t('equipmentLedger.categoryInfo') }}</text>
<view class="drawer-field">
<text class="drawer-label">{{ t('equipmentLedger.sn') }}</text>
<input v-model="snFilter" class="drawer-input" type="text" :placeholder="t('equipmentLedger.placeholderSn')" />
</view>
<view class="drawer-grid">
<view class="drawer-field drawer-field-wide">
<text class="drawer-label">{{ t('equipmentLedger.deviceType') }}</text>
<view class="drawer-picker" @click="toggleDrawerDeviceTypePanel">
<view class="drawer-field">
<text class="drawer-label">{{ t('equipmentLedger.deviceType') }}</text>
<picker class="drawer-picker-host" mode="selector" :range="drawerDeviceTypePickerOptions" range-key="label"
:value="drawerDeviceTypePickerIndex" @change="onDrawerDeviceTypePickerChange">
<view class="drawer-picker">
<text :class="[
'drawer-picker-text',
selectedDeviceTypeId === '' ? 'placeholder' : '',
]">{{ selectedDeviceTypeLabel }}</text>
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
</view>
<scroll-view v-if="drawerDeviceTypePanelOpen" scroll-y class="drawer-option-panel">
<view v-for="option in drawerDeviceTypeOptions" :key="`device-type-${option.id}`" :class="[
'drawer-option-item',
String(selectedDeviceTypeId) === String(option.id) ? 'active' : '',
]" :style="{ paddingLeft: `${24 + option.level * 24}rpx` }"
@click="selectDrawerDeviceType(option)">
<text class="drawer-option-text">{{ option.name }}</text>
</view>
</scroll-view>
</view>
</view>
</view>
<view class="drawer-section">
<view class="drawer-section-head">
<text class="drawer-section-title">{{ t('equipmentLedger.dateFilter') }}</text>
</picker>
</view>
<view class="drawer-field drawer-field-wide">
<text class="drawer-label">{{ t('equipmentLedger.outgoingTime') }}</text>
@ -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" />
<up-cascader :key="deviceTypeCascaderKey" v-model:show="deviceTypeCascaderShow" v-model="deviceTypeCascaderValue"
:data="deviceTypeCascaderOptions" value-key="value" label-key="label" children-key="children"
header-direction="row" :options-cols="2" :auto-close="false" @confirm="onDeviceTypeCascaderConfirm" />
<sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
</view>
</template>
@ -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),

Write Preview
Loading…
Cancel
Save