食材采购修改和样式优化

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

No files matched your search

+4 -4
View File
@@ -58,7 +58,7 @@
width: 0;
height: 0;
display: block;
content: ' ';
content: " ";
border-color: transparent;
border-style: solid solid outset;
border-width: 8px 8px 8px 0;
@@ -78,14 +78,14 @@
padding: 15px;
overflow: hidden;
background: #fff;
font-family: Segoe UI, Lucida Grande, Helvetica, Arial, Microsoft YaHei, FreeSans, Arimo, Droid Sans, wenquanyi micro hei, Hiragino Sans GB,
Hiragino Sans GB W3, FontAwesome, sans-serif;
font-family: Noto Sans SC, Segoe UI, Lucida Grande, Helvetica, Arial, Microsoft YaHei, FreeSans, Arimo, Droid Sans, wenquanyi micro hei,
Hiragino Sans GB, Hiragino Sans GB W3, FontAwesome, sans-serif;
color: #333;
font-size: 14px;
}
blockquote {
margin: 0;
font-family: Georgia, Times New Roman, Times, Kai, Kaiti SC, KaiTi, BiauKai, FontAwesome, serif;
font-family: Noto Sans SC, Georgia, Times New Roman, Times, Kai, Kaiti SC, KaiTi, BiauKai, FontAwesome, serif;
padding: 1px 0 1px 15px;
border-left: 4px solid #ddd;
}
+1 -1
View File
@@ -31,7 +31,7 @@ body,
padding: 0;
width: 100%;
height: 100%;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-family: Noto Sans SC, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
+1 -1
View File
@@ -106,7 +106,7 @@
.login-title {
font-size: 20px;
font-weight: 500;
font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
font-family: Noto Sans SC, PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
margin-bottom: 32px;
}
.login-box {
+1 -1
View File
@@ -42,7 +42,7 @@
@sort-change="sortChangeHandle"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="40" />
<el-table-column type="index" label="#" width="50" />
<el-table-column prop="id" label="用户id" show-overflow-tooltip />
<el-table-column prop="mobilePhone" label="手机号" show-overflow-tooltip />
<el-table-column prop="deviceFingerprint" label="MD5" show-overflow-tooltip />
@@ -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>
@@ -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>
@@ -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)
}
}
+2 -2
View File
@@ -65,8 +65,8 @@ body {
background: var(--color-background);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: Noto Sans SC, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
+52 -43
View File
@@ -23,8 +23,8 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
<el-button @click="visible = false">{{ $t("common.cancelButtonText") }}</el-button>
<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t("common.confirmButtonText") }}</el-button>
</span>
</template>
</el-dialog>
@@ -32,86 +32,95 @@
<script lang="ts" name="GenTemplateDialog" setup>
// 定义子组件向父组件传值/事件
import { useMessage } from '/@/hooks/message';
import { addObj, getObj, putObj } from '/@/api/gen/template';
import { useI18n } from 'vue-i18n';
import {rule} from "/@/utils/validate";
import { useMessage } from "/@/hooks/message"
import { addObj, getObj, putObj } from "/@/api/gen/template"
import { useI18n } from "vue-i18n"
import { rule } from "/@/utils/validate"
const CodeEditor = defineAsyncComponent(() => import('/@/components/CodeEditor/index.vue'));
const emit = defineEmits(['refresh']);
const CodeEditor = defineAsyncComponent(() => import("/@/components/CodeEditor/index.vue"))
const emit = defineEmits(["refresh"])
const { t } = useI18n();
const { t } = useI18n()
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const dataFormRef = ref()
const visible = ref(false)
const loading = ref(false)
// 定义字典
// 提交表单数据
const form = reactive({
id: '',
templateName: '',
generatorPath: '',
templateDesc: '',
templateCode: '',
});
id: "",
templateName: "",
generatorPath: "",
templateDesc: "",
templateCode: "",
})
// 定义校验规则
const dataRules = ref({
templateName: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
generatorPath: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板路径不能为空', trigger: 'blur' }],
templateDesc: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板描述不能为空', trigger: 'blur' }],
});
templateName: [
{ validator: rule.overLength, trigger: "blur" },
{ required: true, message: "模板名称不能为空", trigger: "blur" },
],
generatorPath: [
{ validator: rule.overLength, trigger: "blur" },
{ required: true, message: "模板路径不能为空", trigger: "blur" },
],
templateDesc: [
{ validator: rule.overLength, trigger: "blur" },
{ required: true, message: "模板描述不能为空", trigger: "blur" },
],
})
// 打开弹窗
const openDialog = (id: string) => {
visible.value = true;
form.id = '';
visible.value = true
form.id = ""
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
dataFormRef.value?.resetFields()
})
// 获取genTemplate信息
if (id) {
form.id = id;
getgenTemplateData(id);
form.id = id
getgenTemplateData(id)
}
};
}
// 提交
const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false
// 校验模板是否为空
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
loading.value = true
form.id ? await putObj(form) : await addObj(form)
useMessage().success(t(form.id ? "common.editSuccessText" : "common.addSuccessText"))
visible.value = false
emit("refresh")
} catch (err: any) {
useMessage().error(err.msg);
useMessage().error(err.msg)
} finally {
loading.value = false;
loading.value = false
}
};
}
// 初始化表单数据
const getgenTemplateData = (id: string) => {
// 获取数据
getObj(id).then((res: any) => {
Object.assign(form, res.data);
});
};
Object.assign(form, res.data)
})
}
// 暴露变量
defineExpose({
openDialog,
});
})
</script>
<style scoped>