zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

食材采购修改和样式优化

Browse Source
This commit is contained in:
weiwei committed 2025-05-22 17:09:08 +08:00
1 parent bee9fefa1d
commit 8b7617bb44
9 files changed
+166 -223
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/canteen/canteenInventoryRecords/form.vue
+86 -141
View File
@@ -1,39 +1,32 @@
<template>
<div v-loading="loading" class="w-full h-full">
<div class="layout-padding-auto layout-padding-view" style="overflow: scroll">
<el-form ref="baseFormRef" :model="baseForm" :rules="dataRules" label-width="100px">
<div class="flex flex-wrap">
<el-form-item label="单据编号" prop="inventoryCode">
<el-input v-model.trim="baseForm.inventoryCode" readonly style="width: 200px" />
</el-form-item>
<el-form-item label="单据日期" prop="inventoryDate">
<el-input v-model.trim="baseForm.inventoryDate" readonly style="width: 200px" />
</el-form-item>
<el-form-item label="经办人" prop="handlerUserId">
<SelectHandlerUser v-model.trim="baseForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
</el-form-item>
<el-form-item label="货商" prop="supplierId">
<SelectCanteenSupplier v-model="baseForm.supplierId" style="width: 200px" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model.trim="baseForm.remark" placeholder="请输入备注" style="width: 200px" />
</el-form-item>
</div>
<el-dialog :title="baseForm.id ? '食材采购-编辑' : '食材采购-新增'" v-model="dialogVisible" fullscreen>
<div v-loading="loading">
<el-form class="flex flex-wrap" ref="baseFormRef" :model="baseForm" :rules="dataRules" label-width="100px">
<el-form-item label="单据编号" prop="inventoryCode">
<el-input v-model.trim="baseForm.inventoryCode" readonly style="width: 200px" />
</el-form-item>
<el-form-item label="单据日期" prop="inventoryDate">
<el-input v-model.trim="baseForm.inventoryDate" readonly style="width: 200px" />
</el-form-item>
<el-form-item label="经办人" prop="handlerUserId">
<SelectHandlerUser v-model.trim="baseForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
</el-form-item>
<el-form-item label="货商" prop="supplierId">
<SelectCanteenSupplier v-model="baseForm.supplierId" style="width: 200px" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model.trim="baseForm.remark" placeholder="请输入备注" style="width: 200px" />
</el-form-item>
</el-form>
<el-row class="my-3">
<el-button type="primary" plain @click="clickSelectDialog">食材选择</el-button>
<el-button type="primary" plain @click="selectDialogRef.openDialog()">食材选择</el-button>
<el-button @click="removeSelectedRows" :disabled="state.selectedRowIds.length <= 0">删除选中</el-button>
<el-button type="danger" plain @click="clearData">清空数据</el-button>
</el-row>
<!-- 对话框选择 -->
<select-dialog
ref="selectDialogRef"
v-model="state.selectDialogVisible"
:selectedRows="state.itemTableForm"
@getSelectedRows="getSelectedRows"
/>
<select-dialog ref="selectDialogRef" :selectedRows="state.itemTableForm" @getSelectedRows="getSelectedRows" />
<vxe-table
ref="itemTableFormRef"
@@ -65,62 +58,39 @@
<vxe-column type="checkbox" width="40" fixed="left" />
<vxe-column type="seq" width="50" fixed="left" />
<vxe-column field="name" title="库存食材">
<template #default="{ row }">
{{ row.name || row.erpMaterialId }}
</template>
<template #default="{ row }">{{ row.name || row.erpMaterialId }}</template>
</vxe-column>
<vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
<template #edit="{ row }">
<el-input v-model="row.quantity" />
</template>
<template #edit="{ row }"><el-input v-model="row.quantity" /></template>
</vxe-column>
<vxe-column field="unitPrice" title="原进价">
<template #default="{ row }">
{{ row.unitPrice || 0 }}
</template>
<template #default="{ row }">{{ row.unitPrice || 0 }}</template>
</vxe-column>
<vxe-column field="realPrice" title="实际进价" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
<template #default="{ row }">
{{ row.realPrice }}
</template>
<template #edit="{ row }">
<el-input v-model="row.realPrice" />
</template>
</vxe-column>
<vxe-column field="totalNumber" title="总数" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
<template #edit="{ row }">
<el-input v-model="row.totalNumber" />
</template>
<template #default="{ row }">{{ row.realPrice }}</template>
<template #edit="{ row }"><el-input v-model="row.realPrice" /></template>
</vxe-column>
<vxe-column field="totalAmount" title="累计总金额">
<template #default="{ row }">
{{ (Number(row.quantity || 0) * Number(row.realPrice || 0)).toFixed(2) }}
</template>
<template #default="{ row }">{{ (Number(row.quantity || 0) * Number(row.realPrice || 0)).toFixed(2) }}</template>
</vxe-column>
<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
<template #edit="{ row }">
<el-input v-model="row.remark" />
</template>
<template #edit="{ row }"><el-input v-model="row.remark" /></template>
</vxe-column>
</vxe-table>
<el-row class="my-3">
<el-tooltip effect="dark" content="返回列表页面" placement="top">
<el-button type="primary" plain @click="emit('close')">返回</el-button>
</el-tooltip>
<el-tooltip v-if="!baseForm.id" effect="dark" content="保存并清空数据" placement="top">
<el-button type="primary" plain @click="onContinueAdd">继续添加</el-button>
</el-tooltip>
<el-tooltip effect="dark" content="保存并返回列表页面" placement="top">
<el-button type="primary" plain @click="onSave">保存</el-button>
</el-tooltip>
</el-row>
</div>
</div>
<template #footer>
<el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
<el-tooltip v-if="!baseForm.id" effect="dark" content="保存并清空数据" placement="top">
<el-button type="primary" plain @click="onContinueAdd" :disabled="loading">继续添加</el-button>
</el-tooltip>
<el-button type="primary" @click="onSave" :disabled="loading">保存</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { ref, reactive } from "vue"
import { getObj, addObj, putObj } from "/@/api/canteen/canteenInventoryRecords"
import { getCanteenSequence } from "/@/api/canteen/common"
import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
@@ -130,21 +100,15 @@ import { useMessage } from "/@/hooks/message"
const SelectDialog = defineAsyncComponent(() => import("./select-dialog.vue"))
const props = withDefaults(
defineProps<{
formId?: string | undefined
}>(),
{
formId: undefined,
},
)
const emit = defineEmits(["close"])
const emit = defineEmits(["refresh"])
const loading = ref(false)
const dialogVisible = ref<boolean>(false)
const baseFormRef = ref() // 基本表单ref
const selectDialogRef = ref() // 对话框选择ref
const itemTableFormRef = ref<VxeTableInstance<any>>() // 可编辑表格ref
const baseForm = reactive<any>({
id: "",
inventoryCode: "",
@@ -157,7 +121,6 @@ const baseForm = reactive<any>({
totalAmount: 0,
})
const state = reactive<any>({
selectDialogVisible: false, // 对话框选择开关
itemTableForm: [], // 可编辑表格数据
selectedRowIds: [], // 可编辑表格已选行的id
})
@@ -177,19 +140,14 @@ const validRules = ref<VxeTablePropTypes.EditRules<any>>({
totalNumber: [{ required: true, type: "number", min: 1, message: "必填" }],
})
watch(
() => props.formId,
async (val) => {
await getInitData()
},
)
const openDialog = async (id: string) => {
dialogVisible.value = true
baseForm.id = ""
// 初始化数据
const getInitData = async () => {
baseForm.id = undefined
clearData()
const id = props.formId
if (id) {
baseForm.id = id
loading.value = true
// 获取清单数据
const [res] = await Promise.allSettled([getObj(id)])
@@ -199,9 +157,9 @@ const getInitData = async () => {
Object.assign(baseForm, res.data, { items: "" })
state.itemTableForm = res.data.items.map((item: any) => ({
...item,
unitPrice: displayPrice(item.unitPrice, ""),
realPrice: displayPrice(item.realPrice, ""),
totalAmount: displayPrice(item.totalAmount, ""),
unitPrice: displayPrice(item.unitPrice, ""),
}))
}
} else {
@@ -214,8 +172,16 @@ const getInitData = async () => {
}
}
// 点击食材选择
const clickSelectDialog = () => selectDialogRef.value.openDialog()
// 清空填写的数据 返回 true
const clearData = () => {
for (const key in baseForm) {
if (key === "id" || key === "inventoryCode" || key === "inventoryDate" || key === "inventoryType" || key === "orderType") continue
baseForm[key] = ""
}
state.itemTableForm = []
state.selectedRowIds = []
return true
}
// 获取被选择的食材行
const getSelectedRows = (selectionRows: any) => {
@@ -228,7 +194,6 @@ const getSelectedRows = (selectionRows: any) => {
state.itemTableForm = [...state.itemTableForm, ...addedItems]
state.selectDialogVisible = false
console.log("state.itemTableForm", state.itemTableForm)
}
@@ -254,38 +219,8 @@ const removeSelectedRows = () => {
}
}
// 整理数据
const tableFormItems = () => {
return state.itemTableForm.map((item: any) => {
return {
id: item.isNew ? undefined : item.id,
erpMaterialId: item.erpMaterialId,
quantity: item.quantity,
unitPrice: storePrice(item.unitPrice),
realPrice: item.realPrice ? storePrice(item.realPrice) : 0,
totalAmount: storePrice((Number(item.quantity || 0) * Number(item.realPrice || 0)).toFixed(2)),
stock: item.stock,
remark: item.remark,
totalNumber: item.totalNumber,
}
})
}
// 点击继续添加
const onContinueAdd = async () => {
;(await baseFormValidate()) && (await itemTableFormValidate()) && (await submitData()) && clearData()
}
// 点击保存
const onSave = async () => {
;(await baseFormValidate()) && (await itemTableFormValidate()) && (await submitData()) && clearData() && emit("close")
}
// 校验基本数据表单 成功返回 true 失败返回 undefined
const baseFormValidate = async () => {
const valid = await baseFormRef.value.validate().catch(() => {})
return valid
}
const baseFormValidate = async () => await baseFormRef.value.validate().catch(() => {})
// 校验可编辑表格 成功返回 true 失败返回 false
const itemTableFormValidate = async () => {
@@ -298,16 +233,24 @@ const itemTableFormValidate = async () => {
const $table = itemTableFormRef.value
if ($table) {
const errMap = await $table.validate(true)
if (errMap) {
console.log("全量校验失败！")
return false
} else {
console.log("全量校验成功！")
return true
}
if (errMap) return false
return true
}
}
// 整理数据
const tableFormItems = () =>
state.itemTableForm.map((item: any) => ({
id: item.isNew ? undefined : item.id,
erpMaterialId: item.erpMaterialId,
quantity: item.quantity,
unitPrice: storePrice(item.unitPrice),
realPrice: item.realPrice ? storePrice(item.realPrice) : 0,
totalAmount: storePrice((Number(item.quantity || 0) * Number(item.realPrice || 0)).toFixed(2)),
stock: item.stock,
remark: item.remark,
}))
// 提交数据 成功返回 true 失败返回 false
const submitData = async () => {
const canteenInventoryRecordsItemDTOS = tableFormItems()
@@ -336,18 +279,20 @@ const submitData = async () => {
}
}
// 清空填写的数据 返回 true
const clearData = () => {
for (const key in baseForm) {
if (key === "id" || key === "inventoryCode" || key === "inventoryDate" || key === "inventoryType" || key === "orderType") continue
baseForm[key] = ""
}
state.itemTableForm = []
state.selectedRowIds = []
return true
// 点击继续添加
const onContinueAdd = async () => {
;(await baseFormValidate()) && (await itemTableFormValidate()) && (await submitData()) && clearData() && emit("refresh")
}
onMounted(() => {
getInitData()
// 点击保存
const onSave = async () => {
if ((await baseFormValidate()) && (await itemTableFormValidate()) && (await submitData()) && clearData()) {
dialogVisible.value = false
emit("refresh")
}
}
defineExpose({
openDialog,
})
</script>
src/views/canteen/canteenInventoryRecords/index.vue
+17 -29
View File
@@ -1,6 +1,6 @@
<template>
<div class="layout-padding">
<div v-show="!formState.showForm" class="layout-padding-auto layout-padding-view">
<div class="layout-padding-auto layout-padding-view">
<el-row v-show="showSearch">
<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
<el-form-item label="单据编号" prop="inventoryCode">
@@ -23,7 +23,13 @@
</el-row>
<el-row>
<div class="mb8" style="width: 100%">
<el-button icon="folder-add" type="primary" class="ml10" @click="create" v-auth="'canteen_canteenInventoryRecords_add'">
<el-button
icon="folder-add"
type="primary"
class="ml10"
@click="formDialogRef.openDialog()"
v-auth="'canteen_canteenInventoryRecords_add'"
>
新 增
</el-button>
<el-button
@@ -77,7 +83,13 @@
<!-- <el-table-column prop="checkReason" label="审核原因" show-overflow-tooltip /> -->
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button icon="edit-pen" text type="primary" v-auth="'canteen_canteenInventoryRecords_edit'" @click="edit(scope.row)">
<el-button
icon="edit-pen"
text
type="primary"
v-auth="'canteen_canteenInventoryRecords_edit'"
@click="formDialogRef.openDialog(scope.row.id)"
>
编辑
</el-button>
<el-button
@@ -95,7 +107,7 @@
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<ct-form v-show="formState.showForm" :formId="formState.formId" @close="formClose" />
<ct-form ref="formDialogRef" @refresh="getDataList()" />
</div>
</template>
@@ -111,11 +123,7 @@ const queryRef = ref()
const showSearch = ref(true)
const selectObjs = ref([]) as any
const multiple = ref(true)
const formState = reactive<{ formId: string | undefined; showForm: boolean }>({
formId: undefined,
showForm: false,
})
const formDialogRef = ref()
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {
inventoryType: "1",
@@ -145,19 +153,6 @@ const selectionChangHandle = (objs: { id: string }[]) => {
multiple.value = !objs.length
}
// 新增
const create = () => {
formState.formId = undefined
formState.showForm = true
}
// 点击编辑
const edit = (row: any) => {
if (!row.id) return useMessage().warning("清单id不存在")
formState.formId = row.id
formState.showForm = true
}
// 删除操作
const handleDelete = async (ids: string[]) => {
try {
@@ -174,11 +169,4 @@ const handleDelete = async (ids: string[]) => {
useMessage().error(err.msg)
}
}
// 表单关闭
const formClose = () => {
formState.showForm = false
formState.formId = undefined
getDataList()
}
</script>
src/views/canteen/canteenInventoryRecords/select-dialog.vue
+2 -1
View File
@@ -46,7 +46,6 @@
import { ref } from "vue"
import { fetchErpMaterialPageList } from "/@/api/canteen/canteenErpMaterial"
const dialogVisible = defineModel()
const emit = defineEmits(["getSelectedRows"])
const props = withDefaults(
defineProps<{
@@ -60,6 +59,7 @@ const props = withDefaults(
const queryRef = ref()
const tableRef = ref() // 对话框多选表格ref
const loading = ref(false) // 对话框多选表格loading
const dialogVisible = ref(false)
const queryForm = reactive<any>({
name: "",
})
@@ -130,6 +130,7 @@ const dialogConfirm = () => {
...currentSelectedRows,
...props.selectedRows.filter((row) => !dataList.value.some((item) => item.erpMaterialId === row.erpMaterialId)),
]
dialogVisible.value = false
emit("getSelectedRows", allSelectedRows)
}
}