feat: 入库登记

luoyb

2024-04-24 d08b9a2fd8826a5d8d87ed52208e6be6dbc69d3a

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

@@ -2,33 +2,30 @@
  <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-input v-model="formData.cabinetCode" placeholder="请输入柜号" />
      </el-form-item>
      <el-form-item label="门号" prop="doorCode">
        <el-input v-model="formData.doorCode" placeholder="请输入门号"/>
        <el-input v-model="formData.doorCode" placeholder="请输入门号" />
      </el-form-item>
      <el-form-item label="物品名称" prop="goodsName">
        <el-input v-model="formData.goodsName" placeholder="请输入物品名称"/>
        <el-input v-model="formData.goodsName" placeholder="请输入物品名称" />
      </el-form-item>
      <el-form-item label="物品编码" prop="goodsCode">
        <el-input v-model="formData.goodsCode" placeholder="请输入物品编码"/>
        <el-input v-model="formData.goodsCode" placeholder="请输入物品编码" />
      </el-form-item>
      <el-form-item label="入库数量" prop="inAmount">
        <el-input v-model="formData.inAmount" placeholder="请输入入库数量"/>
        <el-input v-model="formData.inAmount" placeholder="请输入入库数量" />
      </el-form-item>
      <el-form-item label="库存数量" prop="repAmount">
        <el-input v-model="formData.repAmount" placeholder="请输入库存数量"/>
        <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"
        <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-input v-model="formData.inOperator" placeholder="请输入入库人" />
      </el-form-item>
    </el-form>
    <template #footer>
@@ -42,117 +39,116 @@

<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";
import { goodsInRules } from "@/views/system/goodsIn/typing/rules";
import { GoodsInForm } from "@/api/system/goodsIn/types";
import { addGoodsIn, getGoodsIn, updateGoodsIn } from "@/api/system/goodsIn";
import { FormInstance } from "element-plus";
import { ref } from "vue";

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

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

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

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

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

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

// 触发父组件的事件
const emits = defineEmits(['success'])
const emits = defineEmits<{ (e: "success"): void }>();

// 初始化
</script>

<style scoped lang="scss">

</style>
<style scoped lang="scss"></style>