feat: 入库登记完善

autumnal_wind@yeah.net

2024-04-24 4a2c081bffda0e2decb7a0742962bcad2cbe9a17

feat: 入库登记完善

 src/views/system/goodsIn/components/detailForm.vue

New file
@@ -0,0 +1,158 @@
<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px">
    <el-form ref="detailFormRef" :model="formData" :rules="goodsInRules" v-loading="formLoading" label-width="80px">
      <el-form-item label="柜号" prop="cabinetCode">
        <el-input v-model="formData.cabinetCode" placeholder="请输入柜号"/>
      </el-form-item>
      <el-form-item label="门号" prop="doorCode">
        <el-input v-model="formData.doorCode" placeholder="请输入门号"/>
      </el-form-item>
      <el-form-item label="物品名称" prop="goodsName">
        <el-input v-model="formData.goodsName" placeholder="请输入物品名称"/>
      </el-form-item>
      <el-form-item label="物品编码" prop="goodsCode">
        <el-input v-model="formData.goodsCode" placeholder="请输入物品编码"/>
      </el-form-item>
      <el-form-item label="入库数量" prop="inAmount">
        <el-input v-model="formData.inAmount" placeholder="请输入入库数量"/>
      </el-form-item>
      <el-form-item label="库存数量" prop="repAmount">
        <el-input v-model="formData.repAmount" placeholder="请输入库存数量"/>
      </el-form-item>
      <el-form-item label="入库时间" prop="inTime">
        <el-date-picker clearable
                        v-model="formData.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="formData.inOperator" placeholder="请输入入库人"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="formLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// 模块导入
import {goodsInRules} from "@/views/system/goodsIn/typing/rules";
import {GoodsInForm} from "@/api/system/goodsIn/types";
import {addGoodsIn, getGoodsIn, updateGoodsIn} from "@/api/system/goodsIn";

// 接收父组件传入属性
const props = defineProps({})

/** 当前组件的属性 */
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formLoading = ref(false)
// 表单的类型：add - 新增；edit - 修改
const formType = ref('add')
// 对话框 弹出增加、修改
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
// 窗体 Ref
const detailFormRef = ref()
// 数据表单
const formData = ref<GoodsInForm>({
  inId: '',
  cabinetCode: '',
  doorCode: '',
  goodsName: '',
  goodsCode: '',
  inAmount: 0,
  repAmount: 0,
  inTime: '',
  inOperator: ''
})

// 当前组件方法
/** 提交按钮 */
const submitForm = async () => {
  // 校验表单
  if (!detailFormRef) return
  // 输入项校验
  const valid = await detailFormRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as GoodsInForm
    if (formType.value === 'edit') {
      await updateGoodsIn(data)
      proxy?.$modal.msgSuccess("修改成功");
    } else {
      await addGoodsIn(data)
      proxy?.$modal.msgSuccess("增加成功");
    }
    dialog.visible = false
    // 发送操作成功的事件
    emits('success')
  } finally {
    formLoading.value = false
  }
}

/** 取消按钮 */
const cancel = () => {
  resetForm();
  dialog.visible = false;
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    inId: '',
    cabinetCode: '',
    doorCode: '',
    goodsName: '',
    goodsCode: '',
    inAmount: 0,
    repAmount: 0,
    inTime: '',
    inOperator: ''
  }
  detailFormRef.value?.resetFields()
}
/** 查询入库登记列表 */
const openForm = async (act: string, id?: number) => {
  act==='add'?dialog.title='增加入库记录':dialog.title='修改入库记录'
  dialog.visible = true
  formType.value = act
  resetForm();

  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      const res = await getGoodsIn(id);
      Object.assign(formData.value, res.data);
      // formData.value = await getGoodsIn(id)
    } finally {
      formLoading.value = false
    }
  } else {
    //formData.value.ownerUserId = userId
  }
}
// 传回给父组件的属性与方法
defineExpose({openForm})

// 触发父组件的事件
const emits = defineEmits(['success'])

// 初始化
</script>

<style scoped lang="scss">

</style>

 src/views/system/goodsIn/index.vue

@@ -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>
@@ -95,147 +95,119 @@
      />
    </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>({

const queryParams= ref({
    pageNum: 1,
    pageSize: 10,
    cabinetCode: '',
    doorCode: '',
    goodsName: '',
    goodsCode: '',
  cabinetCode: undefined,
  doorCode: undefined,
  goodsName: undefined,
  goodsCode: undefined,
    inAmount: undefined,
    repAmount: undefined,
    inTime: '',
    inOperator: '',
    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"}
  ]
  inTime: undefined,
  inOperator: undefined,
  params: {
}
// 窗体
let form = {...initFormData}
})
const initFormData: GoodsInForm = {
  inId: undefined,
  cabinetCode: undefined,
  doorCode: undefined,
  goodsName: undefined,
  goodsCode: undefined,
  inAmount: undefined,
  repAmount: undefined,
  inTime: undefined,
  inOperator: undefined,
}
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();
  // reset();
  const _inId = row?.inId || ids.value[0]
  const res = await getGoodsIn(_inId);
  Object.assign(form, res.data);
  dialog.visible = true;
  dialog.title = "修改入库登记";
  // 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`)
}


 src/views/system/goodsIn/typing/rules.ts

New file
@@ -0,0 +1,30 @@
// 窗体输入验证规则
export 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"}
  ]
}