fix: 样式修改

This commit is contained in:
weiwei committed 2025-08-13 11:30:06 +08:00
1 parent 8a99b52922
commit 6516b0490b
4 files changed
+46 -29

No files matched your search

+12
View File
@@ -28,6 +28,7 @@
</div>
</el-row>
<el-table
class="el-table"
ref="tableRef"
:data="tableList"
row-key="id"
@@ -212,3 +213,14 @@ const handleDelete = async (row: any) => {
}
}
</script>
<style scoped>
::v-deep(.el-table .el-table__row .cell) {
display: flex;
}
::v-deep(.el-table .el-table__row .cell .el-table__expand-icon .el-icon) {
width: 20px;
height: 20px;
font-size: 20px;
}
</style>
@@ -1,13 +1,14 @@
<template>
<el-dialog v-model="dialogVisible" title="选择食材" width="80%" :close-on-click-modal="false" draggable @close="dialogVisible = false">
<el-row>
<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList(true)">
<el-form-item label="食材名称" prop="name">
<el-input placeholder="请输入食材名称" v-model="queryForm.name" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
<el-button icon="search" type="primary" @click="getDataList(true)">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
<el-button icon="Refresh" @click="tableRef.clearSelection()">取消所有勾选</el-button>
</el-form-item>
</el-form>
</el-row>
@@ -19,6 +20,8 @@
:row-key="(row:any) => row.id"
@row-click="rowClick"
:row-style="{ cursor: 'pointer' }"
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column type="selection" reserve-selection width="40" fixed="left" align="center" />
<el-table-column type="index" label="#" width="50" fixed="left" align="center" />
@@ -72,28 +75,25 @@ const dataList = ref<any[]>([]) // 对话框多选表格数据
// 打开弹窗
const openDialog = () => {
dialogVisible.value = true
getDataListAndSelect()
getDataList(false)
}
// 获取食材数据并且勾选
const getDataListAndSelect = async () => {
// 获取商品数据并且勾选
const getDataList = async (isSearch = false) => {
if (isSearch) {
queryForm.current = 1
}
loading.value = true
try {
const { code, data } = await fetchErpMaterialPageList(queryForm)
if (code == 0) {
dataList.value = data.records.map((item: any) => ({ ...item, erpMaterialId: item.id }))
total.value = data.total
nextTick(() => {
const rowsToSelect = [
...props.selectedRows.filter((row) => dataList.value.some((item) => item.erpMaterialId === row.erpMaterialId)),
]
// 为匹配的行设置选中状态
rowsToSelect.forEach((row) => {
const targetRow = dataList.value.find((item) => item.erpMaterialId === row.erpMaterialId)
targetRow && tableRef.value?.toggleRowSelection(targetRow, true)
})
if (code === 0) {
dataList.value = data.records.map((item: any) => {
return {
...item,
erpMaterialId: item.id,
}
})
total.value = data.total
}
} catch (error) {
dataList.value = []
@@ -105,16 +105,16 @@ const getDataListAndSelect = async () => {
// 分页变化
const sizeChangeHandle = (val: number) => {
queryForm.size = val
getDataListAndSelect()
getDataList()
}
const currentChangeHandle = (val: number) => {
queryForm.current = val
getDataListAndSelect()
getDataList()
}
const resetQuery = () => {
queryRef.value?.resetFields()
getDataListAndSelect()
getDataList(true)
}
// 点击食材列表表格行
@@ -126,18 +126,22 @@ const rowClick = (row: any) => {
const dialogConfirm = () => {
const $table = tableRef.value
if ($table) {
// 获取所有选中的行,包括其他页面的选择
const currentSelectedRows = $table.getSelectionRows()
// 合并当前选中的行和之前已选的行(排除当前页面的行)
const allSelectedRows = [
...currentSelectedRows,
...props.selectedRows.filter((row) => !dataList.value.some((item) => item.erpMaterialId === row.erpMaterialId)),
]
dialogVisible.value = false
emit("getSelectedRows", allSelectedRows)
emit("getSelectedRows", currentSelectedRows)
}
}
const tableStyle = {
cellStyle: { textAlign: "center" },
headerCellStyle: {
textAlign: "center",
background: "var(--el-table-row-hover-bg-color)",
color: "var(--el-text-color-primary)",
},
}
defineExpose({
openDialog,
})
@@ -14,6 +14,7 @@
<el-form-item>
<el-button icon="search" type="primary" @click="getDataList(true)">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
<el-button icon="Refresh" @click="tableRef.clearSelection()">取消所有勾选</el-button>
</el-form-item>
</el-form>
</el-row>
@@ -135,7 +135,7 @@
</template>
</el-table-column> -->
<el-table-column prop="costPrice" label="成本单价(元)" show-overflow-tooltip width="120">
<template #default="{ row }">{{ row.costPrice }}</template>
<template #default="{ row }">{{ displayPrice(row.costPrice, "") }}</template>
</el-table-column>
<el-table-column prop="retailPrice" label="零售价(元)" show-overflow-tooltip width="120">
<template #default="{ row }">{{ displayPrice(row.retailPrice, "") }}</template>