fix: 样式修改
This commit is contained in:
1 parent
8a99b52922
commit
6516b0490b
4 files changed
+46
-29
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user