feat: 入库登记完善

autumnal_wind@yeah.net

2024-04-24 4a2c081bffda0e2decb7a0742962bcad2cbe9a17

 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`)
}