食堂记录表管理
This commit is contained in:
weiwei committed
1 parent
e718cfff82
commit
c9622432b7
5 files changed
+843
-323
No files matched your search
@@ -1,217 +1,388 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="单据编号(规则生成，出入库编号)" prop="inventoryCode">
|
||||
<el-input v-model="form.inventoryCode" placeholder="请输入单据编号(规则生成，出入库编号)"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="单据日期" prop="inventoryDate">
|
||||
<el-input v-model="form.inventoryDate" placeholder="请输入单据日期"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="单据类型(字典inventory_type)采购入库" prop="inventoryType">
|
||||
<el-select v-model="form.inventoryType" placeholder="请选择单据类型(字典inventory_type)采购入库">
|
||||
<el-option :value="item.value" :label="item.label" v-for="(item, index) in canteen_inventory_type" :key="index"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）" prop="linkCode">
|
||||
<el-input v-model="form.linkCode" placeholder="请输入来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="经办人id" prop="handlerUserId">
|
||||
<el-select v-model="form.handlerUserId" placeholder="请选择经办人id">
|
||||
<el-option label="请选择">0</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="审批状态" prop="checkStatus">
|
||||
<el-input v-model="form.checkStatus" placeholder="请输入审批状态"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="审批人id" prop="checkUserId">
|
||||
<el-input v-model="form.checkUserId" placeholder="请输入审批人id"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="审核日期" prop="checkTime">
|
||||
<el-input v-model="form.checkTime" placeholder="请输入审核日期"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="商户编号" prop="merchantId">
|
||||
<el-input v-model="form.merchantId" placeholder="请输入商户编号"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="form.deptId" placeholder="请输入部门id"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="货商" prop="supplierId">
|
||||
<el-input v-model="form.supplierId" placeholder="请输入货商"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="订单类型(1入库 2出库)" prop="orderType">
|
||||
<el-input v-model="form.orderType" placeholder="请输入订单类型(1入库 2出库)"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="入库总金额" prop="totalAmount">
|
||||
<el-input v-model="form.totalAmount" placeholder="请输入入库总金额"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="收款金额" prop="receiveAmount">
|
||||
<el-input v-model="form.receiveAmount" placeholder="请输入收款金额"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="实例id" prop="processInstanceId">
|
||||
<el-input v-model="form.processInstanceId" placeholder="请输入实例id"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="审核原因" prop="checkReason">
|
||||
<el-input v-model="form.checkReason" placeholder="请输入审核原因"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<div v-loading="loading" class="w-full h-full">
|
||||
<div class="layout-padding-auto layout-padding-view" style="overflow: scroll">
|
||||
<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" label-width="100px">
|
||||
<div class="flex flex-wrap">
|
||||
<el-form-item label="单据编号" prop="inventoryCode">
|
||||
<el-input v-model.trim="baseDataForm.inventoryCode" readonly style="width: 200px" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单据日期" prop="inventoryDate">
|
||||
<el-input v-model.trim="baseDataForm.inventoryDate" readonly style="width: 200px" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经办人" prop="handlerUserId">
|
||||
<SelectHandlerUser
|
||||
v-model.trim="baseDataForm.handlerUserId"
|
||||
placeholder="请选择经办人"
|
||||
style="width: 200px"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户" prop="merchantId">
|
||||
<select-mch v-model="baseDataForm.merchantId" :apiParams="{ types: '1' }" style="width: 200px" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
<el-form-item label="货商" prop="supplierId">
|
||||
<select-supplier v-model="baseDataForm.supplierId" style="width: 200px" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-row class="my-3">
|
||||
<el-button type="primary" plain @click="handleClickSpuSelect">商品选择</el-button>
|
||||
<el-button @click="removeSelectRowEvent" :disabled="state.selectedRowserpMaterialIds.length <= 0">删除选中</el-button>
|
||||
<el-button type="danger" plain @click="clearData">清空数据</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<vxe-table
|
||||
ref="editableTableRef"
|
||||
border
|
||||
:loading="loading"
|
||||
show-overflow
|
||||
max-height="410"
|
||||
:edit-config="{
|
||||
trigger: 'click',
|
||||
mode: 'cell',
|
||||
beforeEditMethod({ row, column, rowIndex }:any) {
|
||||
// 禁止编辑
|
||||
// if (column.property === '') {
|
||||
// return false
|
||||
// }
|
||||
if(disabled) return false
|
||||
return true
|
||||
},
|
||||
}"
|
||||
:column-config="{ resizable: true }"
|
||||
:row-config="{ isHover: true }"
|
||||
:resizable-config="{ dragMode: 'fixed' }"
|
||||
:data="state.editableTableData"
|
||||
:edit-rules="validRules"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
size="mini"
|
||||
align="center"
|
||||
>
|
||||
<vxe-column type="checkbox" width="40" fixed="left" />
|
||||
<vxe-column type="seq" width="50" fixed="left" />
|
||||
<vxe-column field="name" title="库存商品">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
|
||||
<template #edit="{ row }">
|
||||
<el-input v-model="row.quantity" />
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="price" title="原进价">
|
||||
<template #default="{ row }">
|
||||
{{ row.price }}
|
||||
</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="totalAmount" title="累计总金额">
|
||||
<template #default="{ row }">
|
||||
{{ (Number(row.quantity) * 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>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<el-row class="my-3">
|
||||
<el-tooltip effect="dark" content="返回列表页面" placement="top">
|
||||
<el-button type="primary" plain @click="emit('close')">{{ disabled ? "返回" : "取消" }}</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="!baseDataForm.id" effect="dark" content="保存并清空数据" placement="top">
|
||||
<el-button type="primary" plain @click="onContinueAdd">继续添加</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="!disabled" effect="dark" content="保存并返回列表页面" placement="top">
|
||||
<el-button type="primary" plain @click="onSave">保存</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="disabled" effect="dark" content="打印清单" placement="top">
|
||||
<el-button type="success" plain @click="printEvent">打印</el-button>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
|
||||
<!-- 商品选择对话框 -->
|
||||
<select-dialog
|
||||
ref="erpSpuSelectDialogRef"
|
||||
v-model="state.erpSpuSelectDialogVisible"
|
||||
:selectedSpuRows="state.editableTableData"
|
||||
@getSelectedSpuRows="getSelectedSpuRows"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="CanteenInventoryRecordsDialog">
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getObj, addObj, putObj } from '/@/api/canteen/canteenInventoryRecords'
|
||||
import { rule } from '/@/utils/validate';
|
||||
const emit = defineEmits(['refresh']);
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted } from "vue"
|
||||
import { getObj, addObj, putObj } from "/@/api/canteen/canteenInventoryRecords"
|
||||
import { getPlanCode, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
|
||||
import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
|
||||
import { formatDate } from "/@/utils/formatTime"
|
||||
import { displayPrice, storePrice } from "/@/utils/formatMoney"
|
||||
import { tablePrint } from "../../supermarketerp/supermarketUtils"
|
||||
import { useSmProcessFormAction } from "/@/hooks/smProcessFormAction"
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义字典
|
||||
const { canteen_inventory_type } = useDict('canteen_inventory_type')
|
||||
const SelectDialog = defineAsyncComponent(() => import("/@/views/canteen/components/selectDialog.vue"))
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id:'',
|
||||
inventoryCode: '',
|
||||
inventoryDate: '',
|
||||
inventoryType: '',
|
||||
linkCode: '',
|
||||
handlerUserId: '',
|
||||
checkStatus: '',
|
||||
checkUserId: '',
|
||||
checkTime: '',
|
||||
merchantId: '',
|
||||
deptId: '',
|
||||
supplierId: '',
|
||||
remark: '',
|
||||
orderType: '',
|
||||
totalAmount: '',
|
||||
receiveAmount: '',
|
||||
processInstanceId: '',
|
||||
checkReason: '',
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
formId?: string | undefined
|
||||
disabled?: boolean
|
||||
}>(),
|
||||
{
|
||||
formId: undefined,
|
||||
disabled: false,
|
||||
},
|
||||
)
|
||||
const emit = defineEmits(["close"])
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
inventoryCode: [{required: true, message: '单据编号(规则生成，出入库编号)不能为空', trigger: 'blur'}],
|
||||
inventoryDate: [{required: true, message: '单据日期不能为空', trigger: 'blur'}],
|
||||
inventoryType: [{required: true, message: '单据类型(字典inventory_type)采购入库不能为空', trigger: 'blur'}],
|
||||
const loading = ref(false) // 采购计划加载
|
||||
const erpSpuSelectDialogRef = ref() // 商品选择对话框ref
|
||||
const baseDataFormRef = ref() // 基本数据表单ref
|
||||
const editableTableRef = ref<VxeTableInstance<any>>() // 可编辑表格ref
|
||||
// 基本信息表单数据
|
||||
const baseDataForm = reactive<any>({
|
||||
id: "",
|
||||
inventoryCode: "",
|
||||
inventoryDate: formatDate(new Date(), "YYYY-mm-dd"),
|
||||
handlerUserId: "",
|
||||
supplierId: "",
|
||||
merchantId: "",
|
||||
remark: "",
|
||||
inventoryType: "3",
|
||||
orderType: "1",
|
||||
})
|
||||
const state = reactive<{
|
||||
editableTableData: any[]
|
||||
erpSpuItemsMemo: any[]
|
||||
selectedRowserpMaterialIds: string[]
|
||||
erpSpuSimpleAll: any
|
||||
linkCodeVisible: boolean
|
||||
erpSpuSelectDialogVisible: boolean
|
||||
linkCgPlanDialogVisible: boolean
|
||||
}>({
|
||||
editableTableData: [], // 可编辑表格数据
|
||||
erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
|
||||
selectedRowserpMaterialIds: [], // 可编辑表格已选行的erpMaterialId
|
||||
erpSpuSimpleAll: [], // 简要商品列表
|
||||
|
||||
linkCodeVisible: false, // 关联采购申请单对话框开关
|
||||
erpSpuSelectDialogVisible: false, // 商品选择对话框开关
|
||||
linkCgPlanDialogVisible: false, // 关联采购申请单对话框开关
|
||||
})
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
// 基本信息表单校验规则
|
||||
const dataRules = ref({
|
||||
inventoryCode: [{ required: true, message: "出入库记录表编号不能为空", trigger: "blur" }],
|
||||
inventoryDate: [{ required: true, message: "出入库记录表单据日期不能为空", trigger: "blur" }],
|
||||
handlerUserId: [{ required: true, message: "经办人不能为空", trigger: "blur" }],
|
||||
supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
|
||||
merchantId: [{ required: true, message: "商户不能为空", trigger: "blur" }],
|
||||
})
|
||||
|
||||
// 重置表单数据
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
// 可编辑表格校验规则
|
||||
const validRules = ref<VxeTablePropTypes.EditRules<any>>({
|
||||
quantity: [{ required: true, type: "number", min: 1, message: "必需大于等于0" }],
|
||||
realPrice: [{ required: true, type: "number", min: 1, message: "必填" }],
|
||||
})
|
||||
|
||||
// 获取canteenInventoryRecords信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getcanteenInventoryRecordsData(id)
|
||||
}
|
||||
};
|
||||
// 初始化数据
|
||||
const getInitData = async () => {
|
||||
baseDataForm.id = undefined
|
||||
const id = props.formId
|
||||
if (id) {
|
||||
loading.value = true
|
||||
// 获取清单数据
|
||||
const [cgPlanData] = await Promise.allSettled([getObj(id)])
|
||||
.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
|
||||
.finally(() => (loading.value = false))
|
||||
|
||||
// 提交
|
||||
const onSubmit = async () => {
|
||||
const valid = await dataFormRef.value.validate().catch(() => {});
|
||||
if (!valid) return false;
|
||||
if (cgPlanData && cgPlanData.code === 0) {
|
||||
Object.assign(baseDataForm, cgPlanData.data)
|
||||
state.editableTableData = cgPlanData.data.items.map((item: any) => {
|
||||
const unitObj = item.erpUnitVos.find((unit: any) => unit.id === item.unitId)
|
||||
return {
|
||||
...item,
|
||||
unitObj: { ...unitObj, realPrice: displayPrice(item?.realPrice, "") || 0 },
|
||||
}
|
||||
})
|
||||
state.erpSpuItemsMemo = cgPlanData.data.items.map((item: any) => {
|
||||
const unitObj = item.erpUnitVos.find((unit: any) => unit.id === item.unitId)
|
||||
return {
|
||||
...item,
|
||||
unitObj: { ...unitObj, realPrice: displayPrice(item?.realPrice, "") || 0 },
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
loading.value = true
|
||||
// 获取采购入库编号
|
||||
const [planCode] = await Promise.allSettled([getPlanCode({ type: 3 })])
|
||||
.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
|
||||
.finally(() => (loading.value = false))
|
||||
planCode && planCode.code === 0 && (baseDataForm.inventoryCode = planCode.data)
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
form.id ? await putObj(form) : await addObj(form);
|
||||
useMessage().success(form.id ? '修改成功' : '添加成功');
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
loading.value = true
|
||||
// 获取简要商品列表
|
||||
const [erpSpuSimpleAll] = await Promise.allSettled([getErpSpuSimpleAll()])
|
||||
.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
|
||||
.finally(() => (loading.value = false))
|
||||
erpSpuSimpleAll && erpSpuSimpleAll.code === 0 && (state.erpSpuSimpleAll = erpSpuSimpleAll.data)
|
||||
}
|
||||
|
||||
// 点击关联采购申请编号
|
||||
// const handleClickLinkCode = () => linkCgPlanDialogRef.value.openLinkCodeDialog(2)
|
||||
|
||||
// 初始化表单数据
|
||||
const getcanteenInventoryRecordsData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
// 获取选择的采购申请
|
||||
// const getSelectedLinkCode = (selectionRows: any) => {
|
||||
// console.log("被选择的关联数据", selectionRows)
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
// baseDataForm.linkCode = selectionRows.code
|
||||
// state.editableTableData = selectionRows.items.map((item: any) => ({
|
||||
// ...item,
|
||||
// unitObj: {},
|
||||
// realPrice: displayPrice(item.purchasePrice, ""),
|
||||
// }))
|
||||
// state.erpSpuItemsMemo = selectionRows.items.map((item: any) => ({
|
||||
// ...item,
|
||||
// unitObj: {},
|
||||
// realPrice: displayPrice(item.purchasePrice, ""),
|
||||
// }))
|
||||
// state.linkCgPlanDialogVisible = false
|
||||
// }
|
||||
|
||||
// 删除选中的行
|
||||
const removeSelectRowEvent = () => {
|
||||
const $table = editableTableRef.value
|
||||
if ($table) {
|
||||
const selectRecords = $table.getCheckboxRecords()
|
||||
if (selectRecords.length > 0) {
|
||||
state.editableTableData = state.editableTableData.filter(
|
||||
(item) => !selectRecords.some((row) => row.erpMaterialId === item.erpMaterialId),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 可编辑表格行勾选
|
||||
const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
|
||||
const $table = editableTableRef.value
|
||||
if ($table) {
|
||||
const records = $table.getCheckboxRecords()
|
||||
console.log(checked ? "勾选事件" : "取消事件", records)
|
||||
state.selectedRowserpMaterialIds = records.map((item) => item.erpMaterialId)
|
||||
}
|
||||
}
|
||||
|
||||
// 点击商品选择
|
||||
const handleClickSpuSelect = () => erpSpuSelectDialogRef.value.openDialog()
|
||||
|
||||
// 获取被选择的商品行
|
||||
const getSelectedSpuRows = (selectionRows: any) => {
|
||||
console.log("被选择的商品行", selectionRows)
|
||||
|
||||
// 筛选新勾选的项
|
||||
const addedItems = selectionRows
|
||||
.filter(
|
||||
(item: any) => !state.editableTableData.some((editableTableItem: any) => editableTableItem.erpMaterialId === item.erpMaterialId),
|
||||
)
|
||||
.map((addItem: any) => {
|
||||
const index = state.erpSpuItemsMemo.findIndex((item: any) => item.erpMaterialId === addItem.erpMaterialId)
|
||||
if (index !== -1) return state.erpSpuItemsMemo[index]
|
||||
return { ...addItem, isNew: true }
|
||||
})
|
||||
// 仅添加新勾选的项
|
||||
state.editableTableData = [...state.editableTableData, ...addedItems]
|
||||
|
||||
// 筛选取消勾选的项
|
||||
const removedItems = state.editableTableData.filter(
|
||||
(item: any) => !selectionRows.some((selectedItem: any) => selectedItem.erpMaterialId === item.erpMaterialId),
|
||||
)
|
||||
// 仅移除取消勾选的项
|
||||
state.editableTableData = state.editableTableData.filter(
|
||||
(item: any) => !removedItems.some((removeItem: any) => removeItem.erpMaterialId === item.erpMaterialId),
|
||||
)
|
||||
// state.editableTableData.push(item)
|
||||
// nextTick(() => {
|
||||
// const $table = editableTableRef.value
|
||||
// if ($table) {
|
||||
// $table.setRow(item)
|
||||
// }
|
||||
// })
|
||||
state.erpSpuSelectDialogVisible = false
|
||||
console.log("state.editableTableData", state.editableTableData)
|
||||
}
|
||||
|
||||
// 整理数据
|
||||
const cgPlanSpuItems = computed(() => {
|
||||
return state.editableTableData.map((item: any) => {
|
||||
return {
|
||||
id: item.isNew ? undefined : item.id,
|
||||
erpMaterialId: item.erpMaterialId,
|
||||
quantity: item.quantity,
|
||||
unitPrice: item.price,
|
||||
realPrice: item.realPrice ? storePrice(item.realPrice) : 0,
|
||||
totalAmount: item?.realPrice && item.quantity ? storePrice(Number(item.realPrice) * Number(item.quantity)) : 0,
|
||||
stock: item.stock,
|
||||
remark: item.remark,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const { formValidate, submitData } = useSmProcessFormAction()
|
||||
|
||||
// 点击继续添加
|
||||
const onContinueAdd = async () => {
|
||||
console.log("baseDataForm", baseDataForm)
|
||||
console.log("state.editableTableData", state.editableTableData)
|
||||
;(await formValidate(baseDataFormRef, editableTableRef, state.editableTableData)) &&
|
||||
(await submitData(baseDataForm, cgPlanSpuItems, loading, putObj, addObj)) &&
|
||||
clearData()
|
||||
}
|
||||
|
||||
// 点击保存
|
||||
const onSave = async () => {
|
||||
console.log("baseDataForm", baseDataForm)
|
||||
console.log("state.editableTableData", state.editableTableData)
|
||||
;(await formValidate(baseDataFormRef, editableTableRef, state.editableTableData)) &&
|
||||
(await submitData(baseDataForm, cgPlanSpuItems, loading, putObj, addObj)) &&
|
||||
clearData() &&
|
||||
emit("close")
|
||||
}
|
||||
|
||||
// 清空填写的数据 返回 true
|
||||
const clearData = () => {
|
||||
for (const key in baseDataForm) {
|
||||
if (key === "id" || key === "inventoryCode" || key === "inventoryDate" || key === "inventoryType" || key === "orderType") continue
|
||||
baseDataForm[key] = ""
|
||||
}
|
||||
state.editableTableData = []
|
||||
state.erpSpuItemsMemo = []
|
||||
state.selectedRowserpMaterialIds = []
|
||||
return true
|
||||
}
|
||||
|
||||
// 点击打印
|
||||
const printEvent = () => {
|
||||
// tablePrint(editableTableRef.value, baseDataInfoRef.value, state.editableTableData, 23, "采购入库")
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getInitData()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="form.deptId" placeholder="请输入部门id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="收款金额" prop="receiveAmount">
|
||||
<el-input v-model="form.receiveAmount" placeholder="请输入收款金额" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="CanteenInventoryRecordsDialog">
|
||||
import { useDict } from "/@/hooks/dict"
|
||||
import { useMessage } from "/@/hooks/message"
|
||||
const emit = defineEmits(["refresh"])
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref()
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义字典
|
||||
const { canteen_inventory_type } = useDict("canteen_inventory_type")
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: "",
|
||||
inventoryCode: "",
|
||||
inventoryDate: "",
|
||||
inventoryType: "",
|
||||
linkCode: "",
|
||||
handlerUserId: "",
|
||||
checkStatus: "",
|
||||
checkUserId: "",
|
||||
checkTime: "",
|
||||
merchantId: "",
|
||||
deptId: "",
|
||||
supplierId: "",
|
||||
remark: "",
|
||||
orderType: "",
|
||||
totalAmount: "",
|
||||
receiveAmount: "",
|
||||
processInstanceId: "",
|
||||
checkReason: "",
|
||||
})
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
inventoryCode: [{ required: true, message: "单据编号(规则生成，出入库编号)不能为空", trigger: "blur" }],
|
||||
inventoryDate: [{ required: true, message: "单据日期不能为空", trigger: "blur" }],
|
||||
inventoryType: [{ required: true, message: "单据类型(字典inventory_type)采购入库不能为空", trigger: "blur" }],
|
||||
})
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ""
|
||||
|
||||
// 重置表单数据
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.resetFields()
|
||||
})
|
||||
|
||||
// 获取canteenInventoryRecords信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getcanteenInventoryRecordsData(id)
|
||||
}
|
||||
}
|
||||
|
||||
// 提交
|
||||
const onSubmit = async () => {
|
||||
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(form.id ? "修改成功" : "添加成功")
|
||||
visible.value = false
|
||||
emit("refresh")
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化表单数据
|
||||
const getcanteenInventoryRecordsData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true
|
||||
getObj(id)
|
||||
.then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
})
|
||||
</script>
|
||||
@@ -1,150 +1,187 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<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" >
|
||||
<el-input placeholder="请输入单据编号(规则生成，出入库编号)" v-model="state.queryForm.inventoryCode" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单据日期" prop="inventoryDate" >
|
||||
<el-input placeholder="请输入单据日期" v-model="state.queryForm.inventoryDate" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="getDataList">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
|
||||
v-auth="'canteen_canteenInventoryRecords_add'">
|
||||
新 增
|
||||
</el-button>
|
||||
<el-button plain :disabled="multiple" icon="Delete" type="primary"
|
||||
v-auth="'canteen_canteenInventoryRecords_del'" @click="handleDelete(selectObjs)">
|
||||
删除
|
||||
</el-button>
|
||||
<right-toolbar v-model:showSearch="showSearch" :export="'canteen_canteenInventoryRecords_export'"
|
||||
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
|
||||
@queryTable="getDataList"></right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-table :data="state.dataList" v-loading="state.loading" border
|
||||
:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
|
||||
<div class="layout-padding">
|
||||
<div v-if="!formState.showForm" 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">
|
||||
<el-input placeholder="请输入单据编号" v-model="state.queryForm.inventoryCode" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单据日期" prop="inventoryDate">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="请输入单据日期"
|
||||
v-model="state.queryForm.inventoryDate"
|
||||
fomat="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</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>
|
||||
<el-button
|
||||
plain
|
||||
:disabled="multiple"
|
||||
icon="Delete"
|
||||
type="primary"
|
||||
v-auth="'canteen_canteenInventoryRecords_del'"
|
||||
@click="handleDelete(selectObjs)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
:export="'canteen_canteenInventoryRecords_export'"
|
||||
@exportExcel="exportExcel"
|
||||
class="ml10 mr20"
|
||||
style="float: right"
|
||||
@queryTable="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@selection-change="selectionChangHandle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" label="#" width="40" />
|
||||
<el-table-column prop="inventoryCode" label="单据编号(规则生成，出入库编号)" show-overflow-tooltip/>
|
||||
<el-table-column prop="inventoryDate" label="单据日期" show-overflow-tooltip/>
|
||||
<el-table-column prop="inventoryType" label="单据类型(字典inventory_type)采购入库" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<dict-tag :options="canteen_inventory_type" :value="scope.row.inventoryType"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkCode" label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）" show-overflow-tooltip/>
|
||||
<el-table-column prop="handlerUserId" label="经办人id" show-overflow-tooltip/>
|
||||
<el-table-column prop="checkStatus" label="审批状态" show-overflow-tooltip/>
|
||||
<el-table-column prop="checkUserId" label="审批人id" show-overflow-tooltip/>
|
||||
<el-table-column prop="checkTime" label="审核日期" show-overflow-tooltip/>
|
||||
<el-table-column prop="merchantId" label="商户编号" show-overflow-tooltip/>
|
||||
<el-table-column prop="deptId" label="部门id" show-overflow-tooltip/>
|
||||
<el-table-column prop="supplierId" label="货商" show-overflow-tooltip/>
|
||||
<el-table-column prop="remark" label="备注" show-overflow-tooltip/>
|
||||
<el-table-column prop="orderType" label="订单类型(1入库 2出库)" show-overflow-tooltip/>
|
||||
<el-table-column prop="totalAmount" label="入库总金额" show-overflow-tooltip/>
|
||||
<el-table-column prop="receiveAmount" label="收款金额" show-overflow-tooltip/>
|
||||
<el-table-column prop="processInstanceId" label="实例id" show-overflow-tooltip/>
|
||||
<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="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
|
||||
<el-button icon="delete" text type="primary" v-auth="'canteen_canteenInventoryRecords_del'" @click="handleDelete([scope.row.id])">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
|
||||
</div>
|
||||
@sort-change="sortChangeHandle"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="inventoryCode" label="单据编号" show-overflow-tooltip />
|
||||
<el-table-column prop="inventoryDate" label="单据日期" show-overflow-tooltip />
|
||||
<el-table-column prop="inventoryType" label="单据类型(字典inventory_type)采购入库" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<dict-tag :options="canteen_inventory_type" :value="scope.row.inventoryType"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkCode" label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）" show-overflow-tooltip />
|
||||
<el-table-column prop="handlerUserId" label="经办人id" show-overflow-tooltip />
|
||||
<!-- <el-table-column prop="checkStatus" label="审批状态" show-overflow-tooltip /> -->
|
||||
<!-- <el-table-column prop="checkUserId" label="审批人id" show-overflow-tooltip /> -->
|
||||
<!-- <el-table-column prop="checkTime" label="审核日期" show-overflow-tooltip /> -->
|
||||
<el-table-column prop="merchantId" label="商户编号" show-overflow-tooltip />
|
||||
<el-table-column prop="deptId" label="部门id" show-overflow-tooltip />
|
||||
<el-table-column prop="supplierId" label="货商" show-overflow-tooltip />
|
||||
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
||||
<el-table-column prop="orderType" label="订单类型(1入库 2出库)" show-overflow-tooltip />
|
||||
<el-table-column prop="totalAmount" label="入库总金额" show-overflow-tooltip />
|
||||
<el-table-column prop="receiveAmount" label="收款金额" show-overflow-tooltip />
|
||||
<!-- <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>
|
||||
<el-button
|
||||
icon="delete"
|
||||
text
|
||||
type="primary"
|
||||
v-auth="'canteen_canteenInventoryRecords_del'"
|
||||
@click="handleDelete([scope.row.id])"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
|
||||
</div>
|
||||
<ct-form v-else :formId="formState.formId" @close="formClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemCanteenInventoryRecords">
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/canteen/canteenInventoryRecords";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
<script setup lang="ts">
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table"
|
||||
import { fetchList, delObjs } from "/@/api/canteen/canteenInventoryRecords"
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message"
|
||||
import { useDict } from "/@/hooks/dict"
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
// 定义查询字典
|
||||
const CtForm = defineAsyncComponent(() => import("./form.vue"))
|
||||
const { canteen_inventory_type } = useDict("canteen_inventory_type")
|
||||
|
||||
const { canteen_inventory_type } = useDict('canteen_inventory_type')
|
||||
// 定义变量内容
|
||||
const formDialogRef = ref()
|
||||
// 搜索变量
|
||||
const queryRef = ref()
|
||||
const showSearch = ref(true)
|
||||
// 多选变量
|
||||
const selectObjs = ref([]) as any
|
||||
const multiple = ref(true)
|
||||
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {},
|
||||
pageList: fetchList
|
||||
const formState = reactive<{ formId: string | undefined; showForm: boolean }>({
|
||||
formId: undefined,
|
||||
showForm: false,
|
||||
})
|
||||
|
||||
// table hook
|
||||
const {
|
||||
getDataList,
|
||||
currentChangeHandle,
|
||||
sizeChangeHandle,
|
||||
sortChangeHandle,
|
||||
downBlobFile,
|
||||
tableStyle
|
||||
} = useTable(state)
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {
|
||||
inventoryType: "3",
|
||||
},
|
||||
pageList: fetchList,
|
||||
})
|
||||
|
||||
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
// 清空搜索条件
|
||||
queryRef.value?.resetFields()
|
||||
// 清空多选
|
||||
selectObjs.value = []
|
||||
getDataList()
|
||||
// 清空搜索条件
|
||||
queryRef.value?.resetFields()
|
||||
// 清空多选
|
||||
selectObjs.value = []
|
||||
getDataList()
|
||||
}
|
||||
|
||||
// 导出excel
|
||||
const exportExcel = () => {
|
||||
downBlobFile('/canteen/canteenInventoryRecords/export', Object.assign(state.queryForm, { ids: selectObjs }), 'canteenInventoryRecords.xlsx')
|
||||
downBlobFile("/supermarket/smErpInventoryRecords/export", Object.assign(state.queryForm, { ids: selectObjs }), "采购记录表.xlsx")
|
||||
}
|
||||
|
||||
// 多选事件
|
||||
const selectionChangHandle = (objs: { id: string }[]) => {
|
||||
selectObjs.value = objs.map(({ id }) => id);
|
||||
multiple.value = !objs.length;
|
||||
};
|
||||
selectObjs.value = objs.map(({ id }) => id)
|
||||
multiple.value = !objs.length
|
||||
}
|
||||
|
||||
// 新增
|
||||
const create = () => {
|
||||
formState.formId = undefined
|
||||
formState.showForm = true
|
||||
}
|
||||
|
||||
// 点击编辑
|
||||
const edit = (row: any) => {
|
||||
row.id ? (formState.formId = row.id) : useMessage().warning("清单id不存在")
|
||||
formState.showForm = true
|
||||
}
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = async (ids: string[]) => {
|
||||
try {
|
||||
await useMessageBox().confirm('此操作将永久删除');
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await useMessageBox().confirm("此操作将永久删除")
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await delObjs(ids);
|
||||
getDataList();
|
||||
useMessage().success('删除成功');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
try {
|
||||
await delObjs(ids)
|
||||
getDataList()
|
||||
useMessage().success("删除成功")
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单关闭
|
||||
const formClose = () => {
|
||||
formState.showForm = false
|
||||
formState.formId = undefined
|
||||
fetchList()
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<!-- 商品选择对话框 -->
|
||||
<el-dialog
|
||||
v-model="erpSpuSelectDialogVisible"
|
||||
title="选择商品"
|
||||
width="80%"
|
||||
:close-on-click-modal="false"
|
||||
draggable
|
||||
@close="erpSpuSelectDialogVisible = false"
|
||||
>
|
||||
<el-row>
|
||||
<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input placeholder="请输入商品名称" v-model="queryForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="categoryId">
|
||||
<select-ctcg v-model="queryForm.categoryId" style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-table
|
||||
ref="spuMultipleTableRef"
|
||||
:data="spuDataList"
|
||||
v-loading="spuListLoading"
|
||||
:row-key="(row:any) => row.id"
|
||||
:reserve-selection="true"
|
||||
@row-click="rowClick"
|
||||
:row-style="{ cursor: 'pointer' }"
|
||||
>
|
||||
<el-table-column type="selection" width="40" fixed="left" align="center" />
|
||||
<el-table-column type="index" label="#" width="50" fixed="left" align="center" />
|
||||
<el-table-column prop="name" label="商品名称" min-width="150px" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="picUrl" label="封面图" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<preview-image @click.stop :src="scope.row.picUrl" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="stock" label="库存" min-width="80px" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ foodCategory?.find((item: any) => item.id === scope.row.categoryId)?.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<dict-tag :options="status" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-model:current-page="queryForm.current"
|
||||
v-model:page-size="queryForm.size"
|
||||
:total="total"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="erpSpuSelectDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { fetchList } from "/@/api/canteen/canteenSpu"
|
||||
import { getSupermarketCategory, getSupermarketBrand } from "/@/api/supermarketerp/supermarketSpu"
|
||||
import { useDict } from "/@/hooks/dict"
|
||||
|
||||
const erpSpuSelectDialogVisible = defineModel()
|
||||
const emit = defineEmits(["getSelectedSpuRows"])
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
selectedSpuRows: any[]
|
||||
}>(),
|
||||
{
|
||||
selectedSpuRows: () => [],
|
||||
},
|
||||
)
|
||||
|
||||
const { status } = useDict("status")
|
||||
const queryRef = ref()
|
||||
const spuMultipleTableRef = ref() // 对话框多选表格ref
|
||||
const spuListLoading = ref(false) // 对话框多选表格loading
|
||||
const queryForm = reactive<any>({
|
||||
productCode: "",
|
||||
barcode: "",
|
||||
productName: "",
|
||||
})
|
||||
const total = ref<number>(0)
|
||||
const spuDataList = ref<any[]>([]) // 对话框多选表格数据
|
||||
const foodCategory = ref<any>([]) // 菜品分类
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = async () => {
|
||||
erpSpuSelectDialogVisible.value = true
|
||||
getDataListAndSelect()
|
||||
}
|
||||
|
||||
// 获取商品数据并且勾选
|
||||
const getDataListAndSelect = async () => {
|
||||
spuListLoading.value = true
|
||||
try {
|
||||
const { code, data } = await fetchList(queryForm).finally(() => (spuListLoading.value = false))
|
||||
if (code === 0) {
|
||||
spuDataList.value = data.records.map((item: any) => ({ ...item, erpMaterialId: item.id }))
|
||||
total.value = data.total
|
||||
|
||||
// 保存当前已选中的行
|
||||
// const currentSelectedRows = spuMultipleTableRef.value?.getSelectionRows() || []
|
||||
// 清空表格数据后重新设置
|
||||
nextTick(() => {
|
||||
// 合并当前页面数据中的已选行和之前保存的已选行
|
||||
const rowsToSelect = [
|
||||
// ...currentSelectedRows,
|
||||
...props.selectedSpuRows.filter((row) => spuDataList.value.some((item) => item.erpMaterialId === row.erpMaterialId)),
|
||||
]
|
||||
// 去重
|
||||
const uniqueRowsToSelect = Array.from(new Map(rowsToSelect.map((row) => [row.erpMaterialId, row])).values())
|
||||
// 为匹配的行设置选中状态
|
||||
uniqueRowsToSelect.forEach((row) => {
|
||||
const targetRow = spuDataList.value.find((item) => item.erpMaterialId === row.erpMaterialId)
|
||||
targetRow && spuMultipleTableRef.value?.toggleRowSelection(targetRow, true)
|
||||
})
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
spuDataList.value = []
|
||||
spuListLoading.value = false
|
||||
} finally {
|
||||
spuListLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化
|
||||
const sizeChangeHandle = (val: number) => {
|
||||
queryForm.size = val
|
||||
getDataListAndSelect()
|
||||
}
|
||||
const currentChangeHandle = (val: number) => {
|
||||
queryForm.current = val
|
||||
getDataListAndSelect()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryRef.value?.resetFields()
|
||||
getDataListAndSelect()
|
||||
}
|
||||
|
||||
// 点击商品列表表格行
|
||||
const rowClick = (row: any) => {
|
||||
console.log("clicked-row", row)
|
||||
spuMultipleTableRef.value.toggleRowSelection(row)
|
||||
}
|
||||
|
||||
// 商品选择对话框确认
|
||||
const handleSelectDialogConfirm = () => {
|
||||
const $table = spuMultipleTableRef.value
|
||||
if ($table) {
|
||||
// 获取所有选中的行，包括其他页面的选择
|
||||
const currentSelectedRows = $table.getSelectionRows()
|
||||
// 合并当前选中的行和之前已选的行（排除当前页面的行）
|
||||
const allSelectedRows = [
|
||||
...currentSelectedRows,
|
||||
...props.selectedSpuRows.filter((row) => !spuDataList.value.some((item) => item.erpMaterialId === row.erpMaterialId)),
|
||||
]
|
||||
// 去重
|
||||
const uniqueSelectedRows = Array.from(new Map(allSelectedRows.map((row) => [row.erpMaterialId, row])).values())
|
||||
|
||||
emit("getSelectedSpuRows", uniqueSelectedRows)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 获取商品分类
|
||||
// try {
|
||||
// const res = await getSupermarketCategory()
|
||||
// supermarketCategory.value = res.data
|
||||
// } catch (error) {
|
||||
// supermarketCategory.value = []
|
||||
// }
|
||||
// // 获取商品品牌
|
||||
// try {
|
||||
// const res = await getSupermarketBrand()
|
||||
// supermarketBrand.value = res.data
|
||||
// } catch (error) {
|
||||
// supermarketBrand.value = []
|
||||
// }
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
})
|
||||
</script>
|
||||
@@ -190,7 +190,7 @@ const handleSelectDialogConfirm = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// // 获取商品分类
|
||||
// 获取商品分类
|
||||
// try {
|
||||
// const res = await getSupermarketCategory()
|
||||
// supermarketCategory.value = res.data
|
||||
|
||||
Reference in new issue
Block a user