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

style: 维修单搜索框样式优化

Browse Source
master^2
zhongwenkai 21 hours ago
parent e97542bda4
commit 8d328322a9
2 changed files with 428 additions and 48 deletions
Show Stats Download Patch File Download Diff File

4
src/locales/zh-CN.js
Unescape Escape View File

@ -1368,6 +1368,10 @@ export default {
editTitle: '编辑模具维修',
detailTitle: '模具维修详情',
repairTitle: '维修处理',
allStatus: '维修状态',
searchPlaceholder: '搜索维修单号',
startTime: '开始日期',
endTime: '结束日期',
basicInfo: '基本信息',
repairObject: '维修对象',
repairCode: '维修单编号',

472
src/pages_function/pages/moldRepair/index.vue
Unescape Escape View File

@ -3,30 +3,124 @@
<NavBar :title="t('moldRepair.moduleName')" />
<view class="filter-bar">
<view class="keyword-box">
<input
id="mold-repair-keyword-input"
v-model="searchKeyword"
class="keyword-input"
type="text"
:placeholder="t('moldRepair.searchPlaceholder')"
placeholder-class="placeholder"
:focus="keywordFocus"
confirm-type="search"
@blur="keywordFocus = false"
@input="onSearchInput"
@confirm="handleSearch"
/>
<view class="filter-row quick-row">
<picker :range="statusLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
<view class="status-filter">
<text :class="['status-filter-text', selectedStatus === '' ? 'placeholder' : '']">{{ selectedStatusLabel }}</text>
<uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
</view>
</picker>
</view>
<picker :range="statusLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
<view class="status-box">
<text class="status-box-text">{{ selectedStatusLabel }}</text>
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
<view class="filter-row search-row">
<view class="keyword-wrap">
<input
id="mold-repair-keyword-input"
v-model="searchKeyword"
class="keyword-input"
type="text"
:placeholder="t('moldRepair.searchPlaceholder')"
placeholder-class="placeholder"
:focus="keywordFocus"
confirm-type="search"
@blur="keywordFocus = false"
@input="onSearchInput"
@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>
</picker>
<view class="reset-filter-btn" @click="resetFilters">{{ t('functionCommon.reset') }}</view>
</view>
</view>
<uni-popup ref="filterPopupRef" class="repair-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('moldRepair.basicInfo') }}</text>
</view>
<view class="drawer-grid">
<view class="drawer-field">
<text class="drawer-label">{{ t('moldRepair.repairCode') }}</text>
<input v-model="filterRepairCode" class="drawer-input" type="text" :placeholder="t('moldRepair.repairCode')" />
</view>
<view class="drawer-field">
<text class="drawer-label">{{ t('moldRepair.repairName') }}</text>
<input v-model="filterRepairName" class="drawer-input" type="text" :placeholder="t('moldRepair.repairName')" />
</view>
<view class="drawer-field">
<text class="drawer-label">{{ t('moldRepair.moldCode') }}</text>
<input v-model="filterMoldCode" class="drawer-input" type="text" :placeholder="t('moldRepair.moldCode')" />
</view>
<view class="drawer-field">
<text class="drawer-label">{{ t('moldRepair.moldName') }}</text>
<input v-model="filterMoldName" class="drawer-input" type="text" :placeholder="t('moldRepair.moldName')" />
</view>
<view class="drawer-field">
<text class="drawer-label">{{ t('moldRepair.acceptedBy') }}</text>
<input v-model="filterAcceptedBy" class="drawer-input" type="text" :placeholder="t('moldRepair.acceptedBy')" />
</view>
<view class="drawer-field">
<text class="drawer-label">{{ t('moldRepair.status') }}</text>
<picker :range="drawerStatusLabels" :value="drawerStatusIndex" @change="onDrawerStatusChange">
<view class="drawer-input" style="display:flex;align-items:center;justify-content:center;">
<text :class="filterDrawerStatus === '' ? 'drawer-input-text placeholder' : 'drawer-input-text'">{{ drawerStatusLabel }}</text>
</view>
</picker>
</view>
</view>
</view>
<view class="drawer-section">
<view class="drawer-section-head">
<text class="drawer-section-title">{{ t('moldRepair.requireDate') }}</text>
</view>
<view class="drawer-field drawer-field-wide">
<view class="drawer-date">
<uni-datetime-picker v-model="filterRequireDate" type="daterange" :clear-icon="true"
:start-placeholder="t('moldRepair.startTime')"
:end-placeholder="t('moldRepair.endTime')" />
</view>
</view>
</view>
<view class="drawer-section">
<view class="drawer-section-head">
<text class="drawer-section-title">{{ t('moldRepair.finishDate') }}</text>
</view>
<view class="drawer-field drawer-field-wide">
<view class="drawer-date">
<uni-datetime-picker v-model="filterFinishDate" type="daterange" :clear-icon="true"
:start-placeholder="t('moldRepair.startTime')"
:end-placeholder="t('moldRepair.endTime')" />
</view>
</view>
</view>
<view class="drawer-section">
<view class="drawer-section-head">
<text class="drawer-section-title">{{ t('moldRepair.confirmDate') }}</text>
</view>
<view class="drawer-field drawer-field-wide">
<view class="drawer-date">
<uni-datetime-picker v-model="filterConfirmDate" type="daterange" :clear-icon="true"
:start-placeholder="t('moldRepair.startTime')"
:end-placeholder="t('moldRepair.endTime')" />
</view>
</view>
</view>
</scroll-view>
<view class="drawer-actions">
<view class="drawer-action reset" @click="resetFilters">{{ t('functionCommon.reset') }}</view>
<view class="drawer-action confirm" @click="confirmFilterDrawer">{{ t('functionCommon.confirm') }}</view>
</view>
</view>
</uni-popup>
<scroll-view
scroll-y
class="list-scroll"
@ -114,22 +208,51 @@ const focusNoKeyboardRef = ref(null)
const keywordInputSelector = '#mold-repair-keyword-input input, input#mold-repair-keyword-input'
const statusOptions = computed(() => [
{ label: t('functionCommon.all'), value: '' },
{ label: t('moldRepair.statusPending'), value: '0' },
{ label: t('moldRepair.statusPassed'), value: '1' },
{ label: t('moldRepair.statusRejected'), value: '2' }
])
const statusLabels = computed(() => statusOptions.value.map((item) => item.label))
const statusLabels = computed(() => [t('moldRepair.allStatus'), ...statusOptions.value.map((item) => item.label)])
const statusPickerIndex = computed(() => {
if (selectedStatus.value === '') return 0
const index = statusOptions.value.findIndex((item) => item.value === selectedStatus.value)
return index >= 0 ? index : 0
return index >= 0 ? index + 1 : 0
})
const selectedStatusLabel = computed(() => {
if (selectedStatus.value === '') return t('moldRepair.allStatus')
const current = statusOptions.value.find((item) => item.value === selectedStatus.value)
return current ? current.label : t('functionCommon.all')
return current ? current.label : t('moldRepair.allStatus')
})
// 抽屉内单据状态
const drawerStatusOptions = computed(() => [
{ label: t('moldRepair.orderStatusPending'), value: '0' },
{ label: t('moldRepair.orderStatusDone'), value: '1' }
])
const drawerStatusLabels = computed(() => [t('moldRepair.status'), ...drawerStatusOptions.value.map(i => i.label)])
const drawerStatusIndex = computed(() => {
if (filterDrawerStatus.value === '') return 0
const idx = drawerStatusOptions.value.findIndex(i => i.value === filterDrawerStatus.value)
return idx >= 0 ? idx + 1 : 0
})
const drawerStatusLabel = computed(() => {
if (filterDrawerStatus.value === '') return t('moldRepair.status')
const cur = drawerStatusOptions.value.find(i => i.value === filterDrawerStatus.value)
return cur ? cur.label : t('moldRepair.status')
})
const filterPopupRef = ref(null)
const filterMoldCode = ref('')
const filterMoldName = ref('')
const filterAcceptedBy = ref('')
const filterRepairCode = ref('')
const filterRepairName = ref('')
const filterDrawerStatus = ref('')
const filterRequireDate = ref([])
const filterFinishDate = ref([])
const filterConfirmDate = ref([])
onLoad(async () => {
initialized.value = true
await fetchList(true)
@ -162,12 +285,23 @@ async function fetchList(reset) {
try {
const keyword = searchKeyword.value.trim()
const reqDateArr = Array.isArray(filterRequireDate.value) ? filterRequireDate.value : []
const finDateArr = Array.isArray(filterFinishDate.value) ? filterFinishDate.value : []
const confDateArr = Array.isArray(filterConfirmDate.value) ? filterConfirmDate.value : []
const params = {
pageNo: pageNo.value,
pageSize: pageSize.value,
repairCode: keyword || undefined,
repairCode: filterRepairCode.value || keyword || undefined,
repairName: filterRepairName.value || undefined,
moldId: selectedMoldId.value || undefined,
repairStatus: selectedStatus.value === '' ? undefined : selectedStatus.value
repairStatus: selectedStatus.value === '' ? undefined : selectedStatus.value,
status: filterDrawerStatus.value || undefined,
moldCode: filterMoldCode.value || undefined,
moldName: filterMoldName.value || undefined,
acceptedBy: filterAcceptedBy.value || undefined,
requireDate: reqDateArr.length === 2 ? [reqDateArr[0] + ' 00:00:00', reqDateArr[1] + ' 23:59:59'] : undefined,
finishDate: finDateArr.length === 2 ? [finDateArr[0] + ' 00:00:00', finDateArr[1] + ' 23:59:59'] : undefined,
confirmDate: confDateArr.length === 2 ? [confDateArr[0] + ' 00:00:00', confDateArr[1] + ' 23:59:59'] : undefined
}
const res = await getMoldRepairPage(params)
const page = normalizePageData(res)
@ -229,16 +363,47 @@ async function resetFilters() {
searchKeyword.value = ''
selectedStatus.value = ''
selectedMoldId.value = ''
filterRepairCode.value = ''
filterRepairName.value = ''
filterDrawerStatus.value = ''
filterMoldCode.value = ''
filterMoldName.value = ''
filterAcceptedBy.value = ''
filterRequireDate.value = []
filterFinishDate.value = []
filterConfirmDate.value = []
activateKeywordFocus()
await fetchList(true)
}
function onStatusFilterChange(event) {
const index = Number(event?.detail?.value || 0)
selectedStatus.value = statusOptions.value[index]?.value ?? ''
if (index === 0) {
selectedStatus.value = ''
} else {
selectedStatus.value = statusOptions.value[index - 1]?.value ?? ''
}
fetchList(true)
}
function openFilterDrawer() {
filterPopupRef.value?.open()
}
function confirmFilterDrawer() {
filterPopupRef.value?.close()
fetchList(true)
}
function onDrawerStatusChange(event) {
const index = Number(event?.detail?.value || 0)
if (index === 0) {
filterDrawerStatus.value = ''
} else {
filterDrawerStatus.value = drawerStatusOptions.value[index - 1]?.value ?? ''
}
}
function canEdit(item) {
return !isProcessedRepair(item?.repairStatus)
}
@ -372,58 +537,269 @@ function textValue(value) {
}
.filter-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) 150rpx 96rpx;
padding: 18rpx 14rpx 20rpx;
background: #f3f4f6;
}
.filter-row {
display: flex;
align-items: center;
gap: 14rpx;
padding: 18rpx 4rpx 20rpx;
gap: 18rpx;
}
.keyword-box,
.status-box,
.reset-filter-btn {
.search-row {
margin-top: 18rpx;
}
.quick-row > picker {
min-width: 0;
flex: 1;
}
.keyword-wrap,
.status-filter,
.icon-filter-btn {
height: 66rpx;
background: #ffffff;
border: 1rpx solid #d9dde5;
background: #ffffff;
box-sizing: border-box;
display: flex;
align-items: center;
}
.keyword-box {
padding: 0 20rpx;
.keyword-wrap {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
}
.keyword-input {
width: 100%;
height: 64rpx;
padding: 0 20rpx;
font-size: 26rpx;
color: #374151;
}
.status-box {
justify-content: space-between;
padding: 0 18rpx;
.placeholder {
color: #a8adb7;
}
.status-box-text,
.placeholder {
font-size: 26rpx;
.status-filter {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18rpx 0 26rpx;
}
.status-box-text {
.status-filter-text {
min-width: 0rpx;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26rpx;
color: #374151;
}
.placeholder {
.status-filter-text.placeholder {
color: #a8adb7;
}
.reset-filter-btn {
.icon-filter-btn {
width: 66rpx;
flex: 0 0 66rpx;
display: flex;
align-items: center;
justify-content: center;
border-color: transparent;
background: transparent;
}
/* ====== 筛选抽屉 ====== */
::deep(.repair-filter-popup.right .uni-popup__content-transition) {
transform: none !important;
}
.filter-drawer {
width: 630rpx;
height: calc(100vh - var(--status-bar-height));
margin-top: var(--status-bar-height);
background: #f5f5f7;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 28rpx 0 0 28rpx;
}
.drawer-header {
height: 104rpx;
padding: 18rpx 34rpx 0;
background: #ffffff;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
.drawer-title {
color: #1f2937;
font-size: 34rpx;
line-height: 1.3;
font-weight: 700;
}
.drawer-body {
flex: 1;
min-height: 0;
padding-bottom: 40rpx;
box-sizing: border-box;
}
.drawer-actions {
height: 126rpx;
padding: 18rpx 28rpx 24rpx;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 0;
background: #ffffff;
box-shadow: 0 -8rpx 24rpx rgba(17, 24, 39, 0.06);
}
.drawer-action {
flex: 1;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 600;
border: 2rpx solid #174b78;
box-sizing: border-box;
}
.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-input {
width: 100%;
min-height: 74rpx;
border: 0;
border-radius: 8rpx;
background: #f7f8fb;
box-sizing: border-box;
padding: 0 18rpx;
font-size: 26rpx;
color: #111827;
text-align: center;
}
.drawer-input-text {
font-size: 26rpx;
color: #111827;
}
.drawer-input-text.placeholder {
color: #a8adb7;
}
.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 :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;
}
.drawer-date :deep(.uni-date-range) {
display: flex;
align-items: center;
}
.drawer-date :deep(.uni-date__x-input) {
text-align: center;
font-size: 26rpx;
color: #111827;
}
.list-scroll {

Write Preview
Loading…
Cancel
Save