Browse Source

style(moneyManage): 调整退款管理页面搜索条件布局与宽度

- 统一调整搜索条件标签宽度,避免文本截断
- 重构退款详情页搜索区域为两行布局,改善视觉层次
- 增加搜索区域整体宽度,优化按钮间距
zhangrenyuan/feature-20260128093451-日常优化1.0
zhangrenyuan 1 month ago
parent
commit
7daa98d895
  1. 22
      src/views/moneyManage/executor/executor.vue
  2. 91
      src/views/moneyManage/refundDetail/refundCharge.vue
  3. 81
      src/views/moneyManage/refundDetail/refundFinance.vue
  4. 84
      src/views/moneyManage/refundDetail/refundHeader.vue

22
src/views/moneyManage/executor/executor.vue

@ -2,25 +2,25 @@
<el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);"> <el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);">
<div class="condition1"> <div class="condition1">
<div class="search"> <div class="search">
<el-text size="large" style="width:4vw;">{{ t('common.name') }}</el-text>
<el-text size="large" style="width:7vw;">{{ t('common.name') }}</el-text>
<el-input v-model="searchForm.name" :placeholder="t('common.pleaseInputName')" style="width:9vw;" clearable /> <el-input v-model="searchForm.name" :placeholder="t('common.pleaseInputName')" style="width:9vw;" clearable />
</div> </div>
<div class="search"> <div class="search">
<el-text size="large" style="width:4vw;">{{ t('common.jwcode') }}</el-text>
<el-text size="large" style="width:7vw;">{{ t('common.jwcode') }}</el-text>
<el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;" <el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;"
clearable /> clearable />
</div> </div>
<div class="search"> <div class="search">
<el-text size="large" style="width:4vw;">{{ t('common.productName') }}</el-text>
<el-text size="large" style="width:7vw;">{{ t('common.productName') }}</el-text>
<el-cascader v-model="searchForm.goodsName" :props="{ multiple: false, emitPath: false }" :show-all-levels="false" collapse-tags collapse-tags-tooltip :options="productList" style="width: 10vw;" :placeholder="t('common.productNamePlaceholder')" clearable /> <el-cascader v-model="searchForm.goodsName" :props="{ multiple: false, emitPath: false }" :show-all-levels="false" collapse-tags collapse-tags-tooltip :options="productList" style="width: 10vw;" :placeholder="t('common.productNamePlaceholder')" clearable />
</div> </div>
<div class="search" v-if="adminData.markets === t('common.markets.headquarter')"> <div class="search" v-if="adminData.markets === t('common.markets.headquarter')">
<el-text size="large" style="width:4vw;">{{ t('common.market') }}</el-text>
<el-text size="large" style="width:7vw;">{{ t('common.market') }}</el-text>
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market" <el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market"
:placeholder="t('common.marketPlaceholder')" clearable /> :placeholder="t('common.marketPlaceholder')" clearable />
</div> </div>
<div class="search"> <div class="search">
<el-text size="large" style="width:4vw;">{{ t('common.refundCurrency') }}</el-text>
<el-text size="large" style="width:9vw;">{{ t('common.refundCurrency') }}</el-text>
<el-select v-model="searchForm.refundCurrency" style="width:9vw;" clearable> <el-select v-model="searchForm.refundCurrency" style="width:9vw;" clearable>
<el-option v-for="item in currencies" :key="item" :label="item" :value="item" /> <el-option v-for="item in currencies" :key="item" :label="item" :value="item" />
</el-select> </el-select>
@ -28,19 +28,19 @@
</div> </div>
<div class="condition1"> <div class="condition1">
<div class="search2"> <div class="search2">
<el-text size="large" style="width:4vw;">{{ t('common.refundMethod') }}</el-text>
<el-text size="large" style="width:7vw;">{{ t('common.refundMethod') }}</el-text>
<el-select v-model="searchForm.refundChannels" style="width:9vw;" clearable> <el-select v-model="searchForm.refundChannels" style="width:9vw;" clearable>
<el-option v-for="item in channelOptions" :key="item" :label="item" :value="item" /> <el-option v-for="item in channelOptions" :key="item" :label="item" :value="item" />
</el-select> </el-select>
</div> </div>
<div class="search2"> <div class="search2">
<el-text size="large" style="width:4vw;">{{ t('common.orderStatus') }}</el-text>
<el-text size="large" style="width:7vw;">{{ t('common.orderStatus') }}</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;" clearable> <el-select v-model="searchForm.statuses" style="width:9vw;" clearable>
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" /> <el-option v-for="item in statusList" :label="item" :value="item" :key="item" />
</el-select> </el-select>
</div> </div>
<div class="search2" style="width: 25.5vw;">
<el-text size="large" style="width:4vw;">{{ t('common.refundTime') }}</el-text>
<div class="search2" style="width: 27.5vw;">
<el-text size="large" style="width:6.5vw;">{{ t('common.refundTime') }}</el-text>
<el-date-picker v-model="dateRange" type="datetimerange" :range-separator="t('common.to')" <el-date-picker v-model="dateRange" type="datetimerange" :range-separator="t('common.to')"
:start-placeholder="t('common.startTime')" :end-placeholder="t('common.endTime')" style="width:18vw;" :start-placeholder="t('common.startTime')" :end-placeholder="t('common.endTime')" style="width:18vw;"
clearable :disabled-date="disabledDate" :default-time="defaultTime" /> clearable :disabled-date="disabledDate" :default-time="defaultTime" />
@ -600,7 +600,7 @@ onMounted(() => {
height: 4vh; height: 4vh;
.search { .search {
width: 18%;
width: 19%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 1vh; margin-bottom: 1vh;
@ -608,7 +608,7 @@ onMounted(() => {
} }
.search2 { .search2 {
width: 18%;
width: 19%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 0.5vw; margin-right: 0.5vw;

91
src/views/moneyManage/refundDetail/refundCharge.vue

@ -2,39 +2,42 @@
<template> <template>
<el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);"> <el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);">
<div class="condition"> <div class="condition">
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.jwcode') }}</el-text>
<el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;"
clearable />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.customerName') }}</el-text>
<el-input v-model="searchForm.name" :placeholder="t('common.customerNamePlaceholder')"
style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.productName') }}</el-text>
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;"
:placeholder="t('common.productNamePlaceholder')" clearable />
</div>
<div class="item1" v-if="isHeadquarters">
<el-text size="large" style="width:4vw;">{{ t('common.market') }}</el-text>
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market"
:placeholder="t('common.marketPlaceholder')" clearable @change="handleMarketChange" />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.orderStatus') }}</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;"
:placeholder="t('common.orderStatusPlaceholder')" clearable>
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" />
</el-select>
<div class="condition-row">
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.jwcode') }}</el-text>
<el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;"
clearable />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.customerName') }}</el-text>
<el-input v-model="searchForm.name" :placeholder="t('common.customerNamePlaceholder')"
style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.productName') }}</el-text>
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;"
:placeholder="t('common.productNamePlaceholder')" clearable />
</div>
</div> </div>
<div style="margin-left: 2vw;">
<el-button type="primary" @click="getRefund">{{ t('common.search') }}</el-button>
<el-button type="warning" @click="exportExcel()">{{ t('common.exportExcel') }}</el-button>
<el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
<el-button type="success" @click="reset">{{ t('common.reset') }}</el-button>
<div class="condition-row">
<div class="item1" v-if="isHeadquarters">
<el-text size="large" style="width:6vw;">{{ t('common.market') }}</el-text>
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market"
:placeholder="t('common.marketPlaceholder')" clearable @change="handleMarketChange" />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.orderStatus') }}</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;"
:placeholder="t('common.orderStatusPlaceholder')" clearable>
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" />
</el-select>
</div>
<div class="condition-actions">
<el-button type="primary" @click="getRefund">{{ t('common.search') }}</el-button>
<el-button type="warning" @click="exportExcel()">{{ t('common.exportExcel') }}</el-button>
<el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
<el-button type="success" @click="reset">{{ t('common.reset') }}</el-button>
</div>
</div> </div>
</div> </div>
@ -803,16 +806,17 @@ onMounted(() => {
} }
.condition { .condition {
width: 82vw;
width: 90vw;
display: flex; display: flex;
align-items: center;
height: 4vh;
flex-direction: column;
align-items: flex-start;
gap: 0.8vh;
.item1 { .item1 {
width: 15%;
width: 16%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 0.5vw;
margin-right: 1vw;
} }
.item2 { .item2 {
@ -821,6 +825,19 @@ onMounted(() => {
align-items: center; align-items: center;
margin-right: 0.5vw; margin-right: 0.5vw;
} }
.condition-row {
display: flex;
align-items: center;
width: 100%;
}
.condition-actions {
margin-left: 2vw;
display: flex;
align-items: center;
gap: 0.5vw;
}
} }
.audit1 { .audit1 {

81
src/views/moneyManage/refundDetail/refundFinance.vue

@ -2,35 +2,39 @@
<template> <template>
<el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);"> <el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);">
<div class="condition"> <div class="condition">
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.jwcode') }}</el-text>
<el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.customerName') }}</el-text>
<el-input v-model="searchForm.name" :placeholder="t('common.customerNamePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.productName') }}</el-text>
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;" clearable />
</div>
<div class="item1" v-if="isHeadquarters">
<el-text size="large" style="width:4vw;">{{ t('common.market') }}</el-text>
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market" :placeholder="t('common.marketPlaceholder')"
clearable @change="handleMarketChange" />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.orderStatus') }}</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;" clearable>
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" />
</el-select>
<div class="condition-row">
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.jwcode') }}</el-text>
<el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.customerName') }}</el-text>
<el-input v-model="searchForm.name" :placeholder="t('common.customerNamePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.productName') }}</el-text>
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;" clearable />
</div>
</div> </div>
<div class="condition-row">
<div class="item1" v-if="isHeadquarters">
<el-text size="large" style="width:6vw;">{{ t('common.market') }}</el-text>
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market" :placeholder="t('common.marketPlaceholder')"
clearable @change="handleMarketChange" />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.orderStatus') }}</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;" clearable>
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" />
</el-select>
</div>
<div class="btns" style="margin-left: 2vw;">
<el-button type="primary" @click="getRefund">{{ t('common.search') }}</el-button>
<el-button type="warning" @click="exportExcel()">{{ t('common.exportExcel') }}</el-button>
<el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
<el-button type="success" @click="reset">{{ t('common.reset') }}</el-button>
<div class="condition-actions">
<el-button type="primary" @click="getRefund">{{ t('common.search') }}</el-button>
<el-button type="warning" @click="exportExcel()">{{ t('common.exportExcel') }}</el-button>
<el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
<el-button type="success" @click="reset">{{ t('common.reset') }}</el-button>
</div>
</div> </div>
</div> </div>
@ -775,16 +779,17 @@ onMounted(() => {
} }
.condition { .condition {
width: 82vw;
width: 90vw;
display: flex; display: flex;
align-items: center;
height: 4vh;
flex-direction: column;
align-items: flex-start;
gap: 0.8vh;
.item1 { .item1 {
width: 15%;
width: 16%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 0.5vw;
margin-right: 1vw;
} }
.item2 { .item2 {
@ -794,11 +799,17 @@ onMounted(() => {
margin-right: 0.5vw; margin-right: 0.5vw;
} }
.btns {
.condition-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 0.5vw;
margin-right: 60px;
width: 100%;
}
.condition-actions {
margin-left: 2vw;
display: flex;
align-items: center;
gap: 0.5vw;
} }
} }

84
src/views/moneyManage/refundDetail/refundHeader.vue

@ -2,35 +2,39 @@
<template> <template>
<el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);"> <el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);">
<div class="condition"> <div class="condition">
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.jwcode') }}</el-text>
<el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.customerName') }}</el-text>
<el-input v-model="searchForm.name" :placeholder="t('common.customerNamePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.productName') }}</el-text>
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;"
:placeholder="t('common.productNamePlaceholder')" clearable />
</div>
<div class="item1" v-if="isHeadquarters">
<el-text size="large" style="width:4vw;">{{ t('common.market') }}</el-text>
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market" :placeholder="t('common.marketPlaceholder')"
clearable @change="handleMarketChange" />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">{{ t('common.orderStatus') }}</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;" :placeholder="t('common.orderStatusPlaceholder')" clearable>
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" />
</el-select>
<div class="condition-row">
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.jwcode') }}</el-text>
<el-input v-model="searchForm.jwcode" :placeholder="t('common.jwcodePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.customerName') }}</el-text>
<el-input v-model="searchForm.name" :placeholder="t('common.customerNamePlaceholder')" style="width:9vw;" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.productName') }}</el-text>
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;"
:placeholder="t('common.productNamePlaceholder')" clearable />
</div>
</div> </div>
<div style="margin-left: 2vw;">
<el-button type="primary" @click="getRefund">{{ t('common.search') }}</el-button>
<el-button type="warning" @click="exportExcel()">{{ t('common.exportExcel') }}</el-button>
<el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
<el-button type="success" @click="reset">{{ t('common.reset') }}</el-button>
<div class="condition-row">
<div class="item1" v-if="isHeadquarters">
<el-text size="large" style="width:6vw;">{{ t('common.market') }}</el-text>
<el-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market" :placeholder="t('common.marketPlaceholder')"
clearable @change="handleMarketChange" />
</div>
<div class="item1">
<el-text size="large" style="width:6vw;">{{ t('common.orderStatus') }}</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;" :placeholder="t('common.orderStatusPlaceholder')" clearable>
<el-option v-for="item in statusList" :label="item" :value="item" :key="item" />
</el-select>
</div>
<div class="condition-actions">
<el-button type="primary" @click="getRefund">{{ t('common.search') }}</el-button>
<el-button type="warning" @click="exportExcel()">{{ t('common.exportExcel') }}</el-button>
<el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
<el-button type="success" @click="reset">{{ t('common.reset') }}</el-button>
</div>
</div> </div>
</div> </div>
@ -843,16 +847,17 @@ onMounted(() => {
} }
.condition { .condition {
width: 82vw;
width: 90vw;
display: flex; display: flex;
align-items: center;
height: 4vh;
flex-direction: column;
align-items: flex-start;
gap: 0.8vh;
.item1 { .item1 {
width: 15%;
width: 16%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 0.5vw;
margin-right: 1vw;
} }
.item2 { .item2 {
@ -861,6 +866,19 @@ onMounted(() => {
align-items: center; align-items: center;
margin-right: 0.5vw; margin-right: 0.5vw;
} }
.condition-row {
display: flex;
align-items: center;
width: 100%;
}
.condition-actions {
margin-left: 2vw;
display: flex;
align-items: center;
gap: 0.5vw;
}
} }
.audit1 { .audit1 {

Loading…
Cancel
Save