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

style: 模具台账搜索框样式优化

Browse Source
master
zhongwenkai 2 days ago
parent 5f25b3594e
commit e02f0897f5
4 changed files with 4113 additions and 3810 deletions
Show Stats Download Patch File Download Diff File

8
src/api/mes/product.js
Unescape Escape View File

@ -23,3 +23,11 @@ export function getItemList() {
method: 'get'
})
}
// 产品简单列表（用于下拉选择）
export function getMesProductSimpleList() {
return request({
url: '/admin-api/erp/product/simple-list-product',
method: 'get'
})
}

3581
src/locales/en-US.js
View File

File diff suppressed because it is too large Load Diff

3819
src/locales/zh-CN.js
View File

File diff suppressed because it is too large Load Diff

515
src/pages_function/pages/moldLedger/index.vue
Unescape Escape View File

@ -3,25 +3,33 @@
<NavBar :title="t('moldLedger.moduleName')" />
<view class="filter-bar">
<view class="keyword-box">
<input
id="mold-ledger-keyword-input"
v-model="searchKeyword"
class="keyword-input"
type="text"
:placeholder="t('moldLedger.searchPlaceholder')"
placeholder-class="placeholder"
:focus="keywordFocus"
confirm-type="search"
@blur="keywordFocus = false"
@confirm="handleSearch"
/>
<view class="filter-row quick-row">
<picker :range="statusPickerLabels" :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>
<view class="status-box" @click="openStatusPicker">
<text class="status-box-text">{{ selectedStatusLabel || t('moldLedger.allStatus') }}</text>
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
<view class="filter-row search-row">
<view class="keyword-wrap">
<input
id="mold-ledger-keyword-input"
v-model="searchKeyword"
class="keyword-input"
type="text"
:placeholder="t('moldLedger.searchPlaceholder')"
confirm-type="search"
@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="reset-filter-btn" @click="resetFilters">{{ t('common.reset') }}</view>
</view>
<scroll-view
@ -70,43 +78,78 @@
<text class="go-top-icon">↑</text>
</view>
<uni-popup ref="statusPickerRef" type="bottom" background-color="#fff">
<view class="picker-content">
<view class="picker-header">
<text class="picker-title">{{ t('moldLedger.selectMoldStatus') }}</text>
<view class="picker-clear" @click="resetStatus">
<text class="picker-clear-text">{{ t('moldLedger.clear') }}</text>
</view>
<uni-popup ref="filterPopupRef" class="mold-filter-popup" type="right" background-color="transparent" :animation="false">
<view class="filter-drawer">
<view class="drawer-header">
<text class="drawer-title">{{ t('moldLedger.moreFilter') }}</text>
</view>
<scroll-view scroll-y class="picker-list">
<view
v-for="option in statusOptions"
:key="String(option.value)"
class="picker-item"
@click="selectStatus(option)"
>
<text class="picker-text">{{ option.label }}</text>
<text v-if="selectedStatus === option.value" class="picker-check">✓</text>
<scroll-view scroll-y class="drawer-body">
<view class="drawer-section">
<view class="drawer-section-head">
<text class="drawer-section-title">{{ t('moldLedger.basicInfo') }}</text>
</view>
<view class="drawer-grid">
<view class="drawer-field">
<text class="drawer-label">{{ t('moldLedger.productModel') }}</text>
<view class="drawer-picker" @click="toggleProductPanel">
<text :class="['drawer-picker-text', selectedProductIds.length === 0 ? 'placeholder' : '']">{{ selectedProductLabel }}</text>
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
</view>
<scroll-view v-if="productPanelOpen" scroll-y class="drawer-option-panel">
<view
v-for="item in productOptions"
:key="item.id"
:class="['drawer-option-item', selectedProductIds.includes(item.id) ? 'active' : '']"
@click="selectProduct(item)"
>
<text class="drawer-option-text">{{ item.name }}</text>
<text v-if="selectedProductIds.includes(item.id)" class="drawer-option-check">✓</text>
</view>
</scroll-view>
</view>
<view class="drawer-field">
<text class="drawer-label">{{ t('moldLedger.currentDevice') }}</text>
<view class="drawer-picker" @click="toggleDevicePanel">
<text :class="['drawer-picker-text', !selectedCurrentDevice ? 'placeholder' : '']">{{ selectedDeviceLabel }}</text>
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
</view>
<scroll-view v-if="devicePanelOpen" scroll-y class="drawer-option-panel">
<view
v-for="item in deviceOptions"
:key="item.id"
:class="['drawer-option-item', selectedCurrentDevice === item.deviceName ? 'active' : '']"
@click="selectDevice(item)"
>
<text class="drawer-option-text">{{ item.deviceName }}（{{ item.deviceCode }}）</text>
<text v-if="selectedCurrentDevice === item.deviceName" class="drawer-option-check">✓</text>
</view>
</scroll-view>
</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>
<sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
</view>
</template>
<script setup>
import { ref, computed, nextTick } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'
import CopyButton from '@/components/common/CopyButton.vue'
import { deleteMoldBrand, getMoldBrandPage } from '@/api/mes/mold'
import { getMesProductSimpleList } from '@/api/mes/product'
import { getDeviceLedgerList } from '@/api/mes/deviceLedger'
import { DICT_TYPE, getDictLabel, initAllDict } from '@/utils/dict'
const { t } = useI18n()
const statusPickerRef = ref(null)
const filterPopupRef = ref(null)
const list = ref([])
const loading = ref(false)
const loadingMore = ref(false)
@ -115,12 +158,16 @@ const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchKeyword = ref('')
const selectedStatus = ref(undefined)
const selectedStatus = ref('')
const productOptions = ref([])
const deviceOptions = ref([])
const selectedProductIds = ref([])
const selectedCurrentDevice = ref('')
// 面板开关
const productPanelOpen = ref(false)
const devicePanelOpen = ref(false)
const scrollTop = ref(0)
const showGoTop = ref(false)
const keywordFocus = ref(false)
const focusNoKeyboardRef = ref(null)
const keywordInputSelector = '#mold-ledger-keyword-input input, input#mold-ledger-keyword-input'
const statusOptions = computed(() => {
const options = []
@ -133,64 +180,102 @@ const statusOptions = computed(() => {
return options
})
const statusPickerLabels = computed(() => statusOptions.value.map((item) => item.label))
const statusPickerIndex = computed(() => {
const idx = statusOptions.value.findIndex((item) => String(item.value) === String(selectedStatus.value))
return idx >= 0 ? idx : 0
})
const selectedStatusLabel = computed(() => {
if (selectedStatus.value === '') return t('moldLedger.allStatus')
const current = statusOptions.value.find((item) => item.value === selectedStatus.value)
return current ? current.label : ''
return current ? current.label : t('moldLedger.allStatus')
})
const selectedProductLabel = computed(() => {
if (selectedProductIds.value.length === 0) return t('moldLedger.productModel')
const names = productOptions.value
.filter((p) => selectedProductIds.value.includes(p.id))
.map((p) => p.name)
return names.join(', ') || t('moldLedger.productModel')
})
const selectedDeviceLabel = computed(() => {
if (!selectedCurrentDevice.value) return t('moldLedger.currentDevice')
const found = deviceOptions.value.find((d) => d.deviceName === selectedCurrentDevice.value)
return found ? `${found.deviceName}（${found.deviceCode}）` : selectedCurrentDevice.value
})
onLoad(async () => {
await initAllDict()
await Promise.all([fetchProductOptions(), fetchDeviceOptions()])
await fetchList(true)
})
onReady(() => {
focusKeywordNoKeyboard()
})
async function fetchProductOptions() {
try {
const res = await getMesProductSimpleList()
const root = res && res.data !== undefined ? res.data : res
productOptions.value = Array.isArray(root) ? root : (root?.data || [])
} catch { productOptions.value = [] }
}
function activateKeywordFocus() {
keywordFocus.value = false
nextTick(() => {
keywordFocus.value = true
})
async function fetchDeviceOptions() {
try {
const res = await getDeviceLedgerList()
const root = res && res.data !== undefined ? res.data : res
deviceOptions.value = Array.isArray(root) ? root : (root?.data || [])
} catch { deviceOptions.value = [] }
}
function focusKeywordNoKeyboard() {
nextTick(() => {
setTimeout(() => {
focusNoKeyboardRef.value?.focus(keywordInputSelector)
}, 80)
})
function onStatusFilterChange(event) {
const index = Number(event?.detail?.value || 0)
const current = statusOptions.value[index]
selectedStatus.value = current ? current.value : ''
fetchList(true)
}
async function handleSearch() {
await fetchList(true)
function openFilterDrawer() {
filterPopupRef.value?.open()
}
async function clearSearch() {
searchKeyword.value = ''
await fetchList(true)
function toggleProductPanel() {
productPanelOpen.value = !productPanelOpen.value
devicePanelOpen.value = false
}
async function resetFilters() {
searchKeyword.value = ''
selectedStatus.value = undefined
activateKeywordFocus()
await fetchList(true)
function toggleDevicePanel() {
devicePanelOpen.value = !devicePanelOpen.value
productPanelOpen.value = false
}
function selectProduct(item) {
const idx = selectedProductIds.value.indexOf(item.id)
if (idx >= 0) {
selectedProductIds.value.splice(idx, 1)
} else {
selectedProductIds.value.push(item.id)
}
}
function openStatusPicker() {
statusPickerRef.value?.open()
function selectDevice(item) {
selectedCurrentDevice.value = item.deviceName
devicePanelOpen.value = false
}
async function selectStatus(option) {
selectedStatus.value = option.value
statusPickerRef.value?.close()
function confirmFilterDrawer() {
filterPopupRef.value?.close()
fetchList(true)
}
async function resetFilters() {
searchKeyword.value = ''
selectedStatus.value = ''
selectedProductIds.value = []
selectedCurrentDevice.value = ''
await fetchList(true)
}
async function resetStatus() {
selectedStatus.value = undefined
statusPickerRef.value?.close()
async function handleSearch() {
await fetchList(true)
}
@ -217,7 +302,12 @@ async function fetchList(reset) {
pageSize: pageSize.value,
code: keyword || undefined,
name: keyword || undefined,
status: selectedStatus.value
status: selectedStatus.value,
productIds: selectedProductIds.value.length ? selectedProductIds.value : undefined,
productName: selectedProductIds.value.length
? productOptions.value.filter((p) => selectedProductIds.value.includes(p.id)).map((p) => p.name).join(',')
: undefined,
currentDevice: selectedCurrentDevice.value || undefined
})
const page = normalizePageData(res)
total.value = page.total
@ -342,56 +432,80 @@ function formatDateTime(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 28rpx 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 {
.status-filter {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18rpx;
padding: 0 18rpx 0 26rpx;
}
.status-box-text,
.placeholder {
.status-filter-text {
min-width: 0rpx;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26rpx;
}
.status-box-text {
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;
font-size: 24rpx;
color: #4b5563;
border-color: transparent;
background: transparent;
}
.content-scroll {
@ -537,48 +651,211 @@ function formatDateTime(value) {
font-size: 32rpx;
}
.picker-content {
padding: 24rpx 24rpx 36rpx;
border-radius: 28rpx 28rpx 0 0;
// 筛选抽屉
::deep(.mold-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-section {
margin-bottom: 18rpx;
padding: 28rpx 28rpx 30rpx;
border-radius: 24rpx;
background: #ffffff;
box-sizing: border-box;
}
.picker-header {
.drawer-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
margin-bottom: 24rpx;
}
.picker-title {
color: #1f2d3d;
font-size: 30rpx;
.drawer-section-title {
font-size: 32rpx;
line-height: 1.3;
color: #1f2937;
font-weight: 700;
}
.picker-clear-text {
color: #1f61ff;
.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,
.drawer-picker {
width: 100%;
min-height: 74rpx;
border: 0;
border-radius: 8rpx;
background: #f7f8fb;
box-sizing: border-box;
}
.drawer-input {
height: 74rpx;
padding: 0 18rpx;
font-size: 26rpx;
color: #111827;
text-align: center;
}
.drawer-picker {
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;
}
.picker-list {
max-height: 480rpx;
.drawer-picker-text.placeholder {
color: #9ca3af;
}
.drawer-option-panel {
max-height: 360rpx;
margin-top: 12rpx;
border-radius: 12rpx;
background: #f7f8fb;
overflow: hidden;
}
.picker-item {
.drawer-option-item {
min-height: 72rpx;
padding: 0 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 26rpx 6rpx;
border-bottom: 1rpx solid #edf1f6;
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);
}
.picker-text {
color: #243447;
.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;
}
.picker-check {
color: #1f61ff;
font-size: 30rpx;
.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;
}
</style>

Write Preview
Loading…
Cancel
Save