1.优化后台菜单页面
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-memo="[field]">
|
||||
<div v-memo="[field]" class="ba-table-operate-buttons">
|
||||
<template v-for="(btn, idx) in field.buttons" :key="idx">
|
||||
<template v-if="btn.display ? btn.display(row, field) : true">
|
||||
<!-- 常规按钮 -->
|
||||
@@ -147,16 +147,34 @@ const getTranslation = (key?: string) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ba-table-operate-buttons {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
gap: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ba-table-render-buttons-item {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.text {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
.icon + .text {
|
||||
padding-left: 5px;
|
||||
}
|
||||
&.el-button--small {
|
||||
padding: 4px 5px;
|
||||
height: auto;
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
.ba-table-render-buttons-move {
|
||||
@@ -164,9 +182,10 @@ const getTranslation = (key?: string) => {
|
||||
}
|
||||
.buttons-popconfirm-reference-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.buttons-ml-6 + .buttons-ml-6 {
|
||||
margin-left: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,6 +37,8 @@ export const getCellValue = (row: TableRow, field: TableColumn, column: TableCol
|
||||
return cellValue
|
||||
}
|
||||
|
||||
type DefaultOptButType = 'weigh-sort' | 'edit' | 'delete'
|
||||
|
||||
/*
|
||||
* 默认按钮组
|
||||
*/
|
||||
@@ -138,4 +140,29 @@ export const invokeTableContextDataFun = <T>(
|
||||
return fun
|
||||
}
|
||||
|
||||
type DefaultOptButType = 'weigh-sort' | 'edit' | 'delete'
|
||||
/** 操作列单个按钮占位宽度（px） */
|
||||
export const OPERATE_BUTTON_WIDTH = 40
|
||||
|
||||
/**
|
||||
* 根据按钮数量计算操作列宽度
|
||||
*/
|
||||
export const getButtonsColumnWidth = (buttons?: OptButton[]): number => {
|
||||
const count = buttons?.length ?? 1
|
||||
return count * OPERATE_BUTTON_WIDTH
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一操作列：右侧固定，宽度 = 按钮数 × OPERATE_BUTTON_WIDTH
|
||||
*/
|
||||
export const normalizeButtonsColumn = (column: TableColumn): TableColumn => {
|
||||
if (column.render !== 'buttons') {
|
||||
return column
|
||||
}
|
||||
const className = column.className ? `${column.className} ba-table-operate-column` : 'ba-table-operate-column'
|
||||
return {
|
||||
...column,
|
||||
fixed: 'right',
|
||||
width: getButtonsColumnWidth(column.buttons),
|
||||
className,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<el-table-column
|
||||
v-else
|
||||
:key="key + '-column'"
|
||||
v-bind="item"
|
||||
v-bind="getColumnBindProps(item)"
|
||||
:column-key="(item['columnKey'] ? item['columnKey'] : `table-column-${item.prop}`) || shortUuid()"
|
||||
>
|
||||
<!-- ./fieldRender/ 文件夹内的每个组件为一种字段渲染器，组件名称为渲染器名称 -->
|
||||
@@ -68,8 +68,11 @@ import type { Component } from 'vue'
|
||||
import { computed, inject, nextTick, useTemplateRef } from 'vue'
|
||||
import { useConfig } from '/@/stores/config'
|
||||
import type baTableClass from '/@/utils/baTable'
|
||||
import { normalizeButtonsColumn } from '/@/components/table/index'
|
||||
import { shortUuid } from '/@/utils/random'
|
||||
|
||||
const getColumnBindProps = (item: TableColumn) => normalizeButtonsColumn(item)
|
||||
|
||||
const config = useConfig()
|
||||
const tableRef = useTemplateRef('tableRef')
|
||||
const baTable = inject('baTable') as baTableClass
|
||||
@@ -236,6 +239,13 @@ defineExpose({
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ba-data-table :deep(.ba-table-operate-column) {
|
||||
.cell {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
.table-pagination {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
@@ -33,4 +33,11 @@ export default {
|
||||
create_time: 'create_time',
|
||||
update_time: 'update_time',
|
||||
'quick Search Fields': 'ID',
|
||||
manual_retry: 'Retry grant',
|
||||
retry_confirm: 'Queue this order for grant retry?',
|
||||
ship: 'Ship',
|
||||
ship_shipping_no_prompt: 'Enter tracking number',
|
||||
ship_shipping_company_prompt: 'Enter carrier',
|
||||
reject: 'Reject',
|
||||
reject_reason_prompt: 'Enter rejection reason',
|
||||
}
|
||||
|
||||
@@ -33,5 +33,12 @@ export default {
|
||||
create_time: '创建时间',
|
||||
update_time: '修改时间',
|
||||
'quick Search Fields': 'ID',
|
||||
manual_retry: '手动重试',
|
||||
retry_confirm: '确认将该订单加入重试队列？',
|
||||
ship: '发货',
|
||||
ship_shipping_no_prompt: '请输入物流单号',
|
||||
ship_shipping_company_prompt: '请输入物流公司',
|
||||
reject: '驳回',
|
||||
reject_reason_prompt: '请输入驳回原因',
|
||||
}
|
||||
|
||||
|
||||
@@ -107,24 +107,24 @@ const baTable = new baTableClass(
|
||||
{
|
||||
label: t('Operate'),
|
||||
align: 'center',
|
||||
width: 220,
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
render: 'confirmButton',
|
||||
name: 'retry',
|
||||
title: 'Retry',
|
||||
text: '手动重试',
|
||||
title: 'mall.playxOrder.manual_retry',
|
||||
text: '',
|
||||
type: 'warning',
|
||||
icon: '',
|
||||
icon: 'fa fa-refresh',
|
||||
class: 'table-row-edit',
|
||||
display: (row: TableRow) =>
|
||||
row.type === 'BONUS' &&
|
||||
row.status === 'PENDING' &&
|
||||
['NOT_SENT', 'SENT_PENDING', 'FAILED_RETRYABLE', 'FAILED_FINAL'].includes(String(row.grant_status)),
|
||||
popconfirm: {
|
||||
title: '确认将该订单加入重试队列？',
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
title: t('mall.playxOrder.retry_confirm'),
|
||||
confirmButtonText: t('Confirm'),
|
||||
cancelButtonText: t('Cancel'),
|
||||
confirmButtonType: 'warning',
|
||||
},
|
||||
click: async (row: TableRow) => {
|
||||
@@ -144,23 +144,28 @@ const baTable = new baTableClass(
|
||||
},
|
||||
},
|
||||
{
|
||||
render: 'basicButton',
|
||||
render: 'tipButton',
|
||||
name: 'ship',
|
||||
title: 'Ship',
|
||||
text: '发货',
|
||||
title: 'mall.playxOrder.ship',
|
||||
text: '',
|
||||
type: 'success',
|
||||
icon: '',
|
||||
icon: 'fa fa-truck',
|
||||
class: 'table-row-ship',
|
||||
display: (row: TableRow) => row.type === 'PHYSICAL' && row.status === 'PENDING',
|
||||
click: async (row: TableRow) => {
|
||||
try {
|
||||
const shippingNoRes = await ElMessageBox.prompt('请输入物流单号', '发货', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
const shippingCompanyRes = await ElMessageBox.prompt('请输入物流公司', '发货', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
const shippingNoRes = await ElMessageBox.prompt(t('mall.playxOrder.ship_shipping_no_prompt'), t('mall.playxOrder.ship'), {
|
||||
confirmButtonText: t('Confirm'),
|
||||
cancelButtonText: t('Cancel'),
|
||||
})
|
||||
const shippingCompanyRes = await ElMessageBox.prompt(
|
||||
t('mall.playxOrder.ship_shipping_company_prompt'),
|
||||
t('mall.playxOrder.ship'),
|
||||
{
|
||||
confirmButtonText: t('Confirm'),
|
||||
cancelButtonText: t('Cancel'),
|
||||
}
|
||||
)
|
||||
|
||||
const shippingNo = shippingNoRes.value
|
||||
const shippingCompany = shippingCompanyRes.value
|
||||
@@ -186,18 +191,19 @@ const baTable = new baTableClass(
|
||||
},
|
||||
},
|
||||
{
|
||||
render: 'basicButton',
|
||||
render: 'tipButton',
|
||||
name: 'reject',
|
||||
title: 'Reject',
|
||||
text: '驳回',
|
||||
title: 'mall.playxOrder.reject',
|
||||
text: '',
|
||||
type: 'danger',
|
||||
icon: '',
|
||||
icon: 'fa fa-times',
|
||||
class: 'table-row-reject',
|
||||
display: (row: TableRow) => row.type === 'PHYSICAL' && row.status === 'PENDING',
|
||||
click: async (row: TableRow) => {
|
||||
try {
|
||||
const res = await ElMessageBox.prompt('请输入驳回原因', '驳回', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
const res = await ElMessageBox.prompt(t('mall.playxOrder.reject_reason_prompt'), t('mall.playxOrder.reject'), {
|
||||
confirmButtonText: t('Confirm'),
|
||||
cancelButtonText: t('Cancel'),
|
||||
})
|
||||
await createAxios(
|
||||
{
|
||||
@@ -219,6 +225,7 @@ const baTable = new baTableClass(
|
||||
},
|
||||
},
|
||||
],
|
||||
operator: false,
|
||||
},
|
||||
],
|
||||
dblClickNotEditColumn: [undefined],
|
||||
|
||||
Reference in New Issue
Block a user