feat: 入库登记

luoyb

2024-04-24 d08b9a2fd8826a5d8d87ed52208e6be6dbc69d3a

feat: 入库登记

 package.json

@@ -32,7 +32,7 @@
    "pinia": "2.0.22",
    "screenfull": "6.0.0",
    "vform3-builds": "3.0.8",
    "vue": "3.4.21",
    "vue": "3.4.25",
    "vue-cropper": "1.0.3",
    "vue-i18n": "9.2.2",
    "vue-router": "4.1.4",
@@ -49,9 +49,9 @@
    "@types/path-browserify": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "5.56.0",
    "@typescript-eslint/parser": "5.56.0",
    "@unocss/preset-attributify": "^0.50.6",
    "@unocss/preset-icons": "^0.50.6",
    "@unocss/preset-uno": "^0.50.6",
    "@unocss/preset-attributify": "^0.50.8",
    "@unocss/preset-icons": "^0.50.8",
    "@unocss/preset-uno": "^0.50.8",
    "@vitejs/plugin-vue": "5.0.4",
    "@vue/compiler-sfc": "3.2.45",
    "autoprefixer": "10.4.14",
@@ -65,11 +65,11 @@
    "prettier": "2.8.6",
    "sass": "1.56.1",
    "typescript": "4.9.5",
    "unocss": "^0.50.6",
    "unocss": "^0.50.8",
    "unplugin-auto-import": "0.13.0",
    "unplugin-icons": "0.15.1",
    "unplugin-vue-components": "0.23.0",
    "vite": "^5.1.6",
    "vite": "^5.2.10",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "2.0.1",
    "unplugin-vue-setup-extend-plus": "0.4.9",

 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>