From 4a2c081bffda0e2decb7a0742962bcad2cbe9a17 Mon Sep 17 00:00:00 2001
From: autumnal_wind@yeah.net <autumnal_wind@yeah.net>
Date: 星期三, 24 四月 2024 17:01:23 +0800
Subject: [PATCH] feat: 入库登记完善
---
src/views/system/goodsIn/index.vue | 259 +++++++++++++++++++++++----------------------------
1 files changed, 117 insertions(+), 142 deletions(-)
diff --git a/src/views/system/goodsIn/index.vue b/src/views/system/goodsIn/index.vue
index a2d7bd0..35a1dad 100644
--- a/src/views/system/goodsIn/index.vue
+++ b/src/views/system/goodsIn/index.vue
@@ -23,10 +23,10 @@
</el-form-item>
<el-form-item label="入库时间" prop="inTime">
<el-date-picker clearable
- v-model="queryParams.inTime"
- type="date"
- value-format="YYYY-MM-DD"
- placeholder="请选择入库时间"
+ v-model="queryParams.inTime"
+ type="date"
+ value-format="YYYY-MM-DD"
+ placeholder="请选择入库时间"
/>
</el-form-item>
<el-form-item label="入库人" prop="inOperator">
@@ -44,7 +44,7 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
- <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:goodsIn:add']">新增</el-button>
+ <el-button type="primary" plain icon="Plus" @click="openForm('add')" v-hasPermi="['system:goodsIn:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:goodsIn:edit']">修改</el-button>
@@ -77,7 +77,7 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:goodsIn:edit']"></el-button>
+ <el-button link type="primary" icon="Edit" @click="openForm('edit', scope.row.inId)" v-hasPermi="['system:goodsIn:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:goodsIn:remove']"></el-button>
@@ -87,155 +87,127 @@
</el-table>
<pagination
- v-show="total>0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
+ v-show="total>0"
+ :total="total"
+ v-model:page="queryParams.pageNum"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
/>
</el-card>
<!-- 添加或修改入库登记对话框 -->
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
- <el-form ref="goodsInFormRef" :model="form" :rules="goodsInRules" label-width="80px">
- <el-form-item label="柜号" prop="cabinetCode">
- <el-input v-model="form.cabinetCode" placeholder="请输入柜号" />
- </el-form-item>
- <el-form-item label="门号" prop="doorCode">
- <el-input v-model="form.doorCode" placeholder="请输入门号" />
- </el-form-item>
- <el-form-item label="物品名称" prop="goodsName">
- <el-input v-model="form.goodsName" placeholder="请输入物品名称" />
- </el-form-item>
- <el-form-item label="物品编码" prop="goodsCode">
- <el-input v-model="form.goodsCode" placeholder="请输入物品编码" />
- </el-form-item>
- <el-form-item label="入库数量" prop="inAmount">
- <el-input v-model="form.inAmount" placeholder="请输入入库数量" />
- </el-form-item>
- <el-form-item label="库存数量" prop="repAmount">
- <el-input v-model="form.repAmount" placeholder="请输入库存数量" />
- </el-form-item>
- <el-form-item label="入库时间" prop="inTime">
- <el-date-picker clearable
- v-model="form.inTime"
- type="datetime"
- value-format="YYYY-MM-DD HH:mm:ss"
- placeholder="请选择入库时间">
- </el-date-picker>
- </el-form-item>
- <el-form-item label="入库人" prop="inOperator">
- <el-input v-model="form.inOperator" placeholder="请输入入库人" />
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
+<!-- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>-->
+<!-- <el-form ref="detailFormRef" :model="form" :rules="goodsInRules" label-width="80px">-->
+<!-- <el-form-item label="柜号" prop="cabinetCode">-->
+<!-- <el-input v-model="form.cabinetCode" placeholder="请输入柜号" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="门号" prop="doorCode">-->
+<!-- <el-input v-model="form.doorCode" placeholder="请输入门号" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="物品名称" prop="goodsName">-->
+<!-- <el-input v-model="form.goodsName" placeholder="请输入物品名称" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="物品编码" prop="goodsCode">-->
+<!-- <el-input v-model="form.goodsCode" placeholder="请输入物品编码" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="入库数量" prop="inAmount">-->
+<!-- <el-input v-model="form.inAmount" placeholder="请输入入库数量" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="库存数量" prop="repAmount">-->
+<!-- <el-input v-model="form.repAmount" placeholder="请输入库存数量" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="入库时间" prop="inTime">-->
+<!-- <el-date-picker clearable-->
+<!-- v-model="form.inTime"-->
+<!-- type="datetime"-->
+<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
+<!-- placeholder="请选择入库时间">-->
+<!-- </el-date-picker>-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="入库人" prop="inOperator">-->
+<!-- <el-input v-model="form.inOperator" placeholder="请输入入库人" />-->
+<!-- </el-form-item>-->
+<!-- </el-form>-->
+<!-- <template #footer>-->
+<!-- <div class="dialog-footer">-->
+<!-- <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>-->
+<!-- <el-button @click="cancel">取 消</el-button>-->
+<!-- </div>-->
+<!-- </template>-->
+<!-- </el-dialog>-->
+ <detail-form ref="detailFormRef" @success="getList"></detail-form>
</div>
</template>
<script setup name="GoodsIn" lang="ts">
import { listGoodsIn, getGoodsIn, delGoodsIn, addGoodsIn, updateGoodsIn } from '@/api/system/goodsIn';
import { GoodsInVO, GoodsInQuery, GoodsInForm } from '@/api/system/goodsIn/types';
+import DetailForm from "@/views/system/goodsIn/components/detailForm.vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-// 选中的ids
-const ids = ref<Array<string | number>>([]);
-// 单选
-const single = ref(true);
-//多选
-const multiple = ref(true);
-//总纪录数
-const total = ref(0);
-// 显示记录数
const goodsInList = ref<GoodsInVO[]>([]);
-// 是否显示查询条件
-const showSearch = ref(true);
-// 是否加遮罩层
+const buttonLoading = ref(false);
const loading = ref(true);
-// 查询窗体 Ref
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
const queryFormRef = ref<ElFormInstance>();
-// 数据录入窗体 Ref
-const goodsInFormRef = ref<ElFormInstance>();
-// 对话框 弹出增加、修改
+const detailFormRef = ref();
+
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
-// 数据录入窗体初始化
-const initFormData: GoodsInForm = {
- inId: '',
- cabinetCode: '',
- doorCode: '',
- goodsName: '',
- goodsCode: '',
- inAmount: 0,
- repAmount: 0,
- inTime: '',
- inOperator: '',
-}
-// 查询参数
-const queryParams = reactive<GoodsInQuery>({
- pageNum: 1,
- pageSize: 10,
- cabinetCode: '',
- doorCode: '',
- goodsName: '',
- goodsCode: '',
- inAmount: undefined,
- repAmount: undefined,
- inTime: '',
- inOperator: '',
- params: {}
+
+const queryParams= ref({
+ pageNum: 1,
+ pageSize: 10,
+ cabinetCode: undefined,
+ doorCode: undefined,
+ goodsName: undefined,
+ goodsCode: undefined,
+ inAmount: undefined,
+ repAmount: undefined,
+ inTime: undefined,
+ inOperator: undefined,
+ params: {
+ }
})
-// 窗体输入验证规则
-const goodsInRules = {
- inId: [
- {required: true, message: "入库登记id不能为空", trigger: "blur"}
- ],
- cabinetCode: [
- {required: true, message: "柜号不能为空", trigger: "blur"}
- ],
- doorCode: [
- {required: true, message: "门号不能为空", trigger: "blur"}
- ],
- goodsName: [
- {required: true, message: "物品名称不能为空", trigger: "blur"}
- ],
- goodsCode: [
- {required: true, message: "物品编码不能为空", trigger: "blur"}
- ],
- inAmount: [
- {required: true, message: "入库数量不能为空", trigger: "blur"}
- ],
- repAmount: [
- {required: true, message: "库存数量不能为空", trigger: "blur"}
- ],
- inTime: [
- {required: true, message: "入库时间不能为空", trigger: "blur"}
- ],
- inOperator: [
- {required: true, message: "入库人不能为空", trigger: "blur"}
- ]
+const initFormData: GoodsInForm = {
+ inId: undefined,
+ cabinetCode: undefined,
+ doorCode: undefined,
+ goodsName: undefined,
+ goodsCode: undefined,
+ inAmount: undefined,
+ repAmount: undefined,
+ inTime: undefined,
+ inOperator: undefined,
}
-// 窗体
-let form = {...initFormData}
+const data = reactive<PageData<GoodsInForm, GoodsInQuery>>({
+ form: {...initFormData}
+})
-const buttonLoading = ref(false)
+const { form } = toRefs(data);
+// const openForm = (type: string, id?: number) => {
+// detailFormRef.value.openForm(type, id)
+// }
/** 查询入库登记列表 */
const getList = async () => {
loading.value = true;
- const res = await listGoodsIn(queryParams);
+ const res = await listGoodsIn(queryParams.value);
goodsInList.value = res.rows;
total.value = res.total;
loading.value = false;
}
-
+const openForm = (type: string, id?: number) => {
+ //const _inId = row?.inId || ids.value[0]
+ detailFormRef.value.openForm(type, id)
+}
/** 取消按钮 */
const cancel = () => {
reset();
@@ -244,13 +216,13 @@
/** 表单重置 */
const reset = () => {
- form= {...initFormData};
- goodsInFormRef.value?.resetFields();
+ form.value = {...initFormData};
+ detailFormRef.value?.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
- queryParams.pageNum = 1;
+ queryParams.value.pageNum = 1;
getList();
}
@@ -269,30 +241,33 @@
/** 新增按钮操作 */
const handleAdd = () => {
- reset();
- dialog.visible = true;
- dialog.title = "添加入库登记";
+ // reset();
+ // dialog.visible = true;
+ // dialog.title = "添加入库登记";
+
+ detailFormRef.value.openForm('add',0)
}
/** 修改按钮操作 */
const handleUpdate = async (row?: GoodsInVO) => {
- reset();
- const _inId = row?.inId || ids.value[0]
- const res = await getGoodsIn(_inId);
- Object.assign(form, res.data);
- dialog.visible = true;
- dialog.title = "修改入库登记";
+ // reset();
+ const _inId = row?.inId || ids.value[0]
+ // const res = await getGoodsIn(_inId);
+ // Object.assign(form.value, res.data);
+ // dialog.visible = true;
+ // dialog.title = "修改入库登记";
+ await detailFormRef.value.openForm('edit', _inId)
}
/** 提交按钮 */
const submitForm = () => {
- goodsInFormRef.value?.validate(async (valid: boolean) => {
+ detailFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
- if (form.inId) {
- await updateGoodsIn(form).finally(() => buttonLoading.value = false);
+ if (form.value.inId) {
+ await updateGoodsIn(form.value).finally(() => buttonLoading.value = false);
} else {
- await addGoodsIn(form).finally(() => buttonLoading.value = false);
+ await addGoodsIn(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess("修改成功");
dialog.visible = false;
@@ -313,7 +288,7 @@
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('system/goodsIn/export', {
- ...queryParams
+ ...queryParams.value
}, `goodsIn_${new Date().getTime()}.xlsx`)
}
--
Gitblit v1.8.0