<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">产品大类：</span>
|
<el-input v-model="searchForm.productCategory" style="width: 220px" placeholder="请输入" clearable @change="handleQuery" />
|
<span class="search_title ml10">规格型号：</span>
|
<el-input v-model="searchForm.specificationModel" style="width: 220px" placeholder="请输入" clearable @change="handleQuery" />
|
<el-button type="primary" style="margin-left: 10px" @click="handleQuery">搜索</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="openForm('add')">新增盘点</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<el-table :data="tableData" border v-loading="tableLoading" height="calc(100vh - 18.5em)">
|
<el-table-column align="center" label="序号" type="index" width="60" />
|
<el-table-column label="盘点单号" prop="code" width="140" show-overflow-tooltip />
|
<el-table-column label="批次号" prop="inboundBatches" width="140" show-overflow-tooltip />
|
<el-table-column label="产品大类" prop="productCategory" show-overflow-tooltip />
|
<el-table-column label="规格型号" prop="specificationModel" show-overflow-tooltip />
|
<el-table-column label="单位" prop="unit" width="70" />
|
<el-table-column label="账面数量" prop="bookNum" width="110" />
|
<el-table-column label="实盘数量" prop="actualNum" width="110" />
|
<el-table-column label="差异数量" prop="diffNum" width="110">
|
<template #default="scope">
|
<span :style="{ color: Number(scope.row.diffNum) === 0 ? '' : (Number(scope.row.diffNum) > 0 ? '#67c23a' : '#f56c6c') }">
|
{{ scope.row.diffNum == null ? '-' : scope.row.diffNum }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="盘点日期" prop="takingDate" width="120" />
|
<el-table-column label="盘点人" prop="takingUser" width="100" />
|
<el-table-column label="备注" prop="remark" show-overflow-tooltip />
|
<el-table-column fixed="right" label="操作" width="130" align="center">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click="openForm('edit', scope.row)">编辑</el-button>
|
<el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="page.total > 0" :total="page.total" layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current" :limit="page.size" @pagination="paginationChange" />
|
</div>
|
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" @close="closeDialog">
|
<el-form :model="form" label-width="110px" label-position="top">
|
<el-row :gutter="20">
|
<el-col :span="12"><el-form-item label="产品大类"><el-input v-model="form.productCategory" clearable /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="规格型号"><el-input v-model="form.specificationModel" clearable /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="单位"><el-input v-model="form.unit" clearable /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="批次号"><el-input v-model="form.inboundBatches" clearable /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="账面数量"><el-input-number v-model="form.bookNum" :step="0.01" :min="0" style="width: 100%" /></el-form-item></el-col>
|
<el-col :span="12"><el-form-item label="实盘数量"><el-input-number v-model="form.actualNum" :step="0.01" :min="0" style="width: 100%" /></el-form-item></el-col>
|
<el-col :span="12">
|
<el-form-item label="盘点日期">
|
<el-date-picker v-model="form.takingDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12"><el-form-item label="盘点人"><el-input v-model="form.takingUser" clearable /></el-form-item></el-col>
|
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item></el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDialog">取消</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import { getStockTakingPage, addStockTaking, updateStockTaking, delStockTaking } from "@/api/inventoryManagement/stockTaking.js";
|
import useUserStore from "@/store/modules/user";
|
|
const userStore = useUserStore();
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({ current: 1, size: 100, total: 0 });
|
const searchForm = reactive({ productCategory: "", specificationModel: "" });
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("新增盘点");
|
const dialogMode = ref("add");
|
const emptyForm = () => ({
|
id: null, productCategory: "", specificationModel: "", unit: "", inboundBatches: "",
|
bookNum: 0, actualNum: 0, takingDate: "", takingUser: userStore.nickName || "", remark: "",
|
});
|
const form = reactive(emptyForm());
|
|
const getList = () => {
|
tableLoading.value = true;
|
getStockTakingPage({ ...searchForm, ...page }).then((res) => {
|
tableLoading.value = false;
|
tableData.value = (res.data && res.data.records) || [];
|
page.total = (res.data && res.data.total) || 0;
|
}).catch(() => { tableLoading.value = false; });
|
};
|
const handleQuery = () => { page.current = 1; getList(); };
|
const resetQuery = () => { searchForm.productCategory = ""; searchForm.specificationModel = ""; handleQuery(); };
|
const paginationChange = (obj) => { page.current = obj.page; page.size = obj.limit; getList(); };
|
|
const openForm = (mode, row) => {
|
dialogMode.value = mode;
|
dialogTitle.value = mode === "add" ? "新增盘点" : "编辑盘点";
|
Object.assign(form, emptyForm());
|
if (mode === "edit" && row) {
|
Object.keys(form).forEach((k) => { if (row[k] !== undefined) form[k] = row[k]; });
|
}
|
dialogVisible.value = true;
|
};
|
const closeDialog = () => { dialogVisible.value = false; };
|
const submitForm = () => {
|
const payload = { ...form };
|
const req = dialogMode.value === "add" ? addStockTaking(payload) : updateStockTaking(payload);
|
req.then(() => {
|
ElMessage.success(dialogMode.value === "add" ? "新增成功" : "修改成功");
|
closeDialog();
|
getList();
|
}).catch(() => ElMessage.error("操作失败"));
|
};
|
const handleDelete = (row) => {
|
ElMessageBox.confirm("确认删除该盘点记录？", "提示", { type: "warning" }).then(() => {
|
delStockTaking([row.id]).then(() => { ElMessage.success("删除成功"); getList(); });
|
}).catch(() => {});
|
};
|
|
onMounted(() => { getList(); });
|
</script>
|
|
<style scoped lang="scss">
|
.table_list { margin-top: unset; }
|
</style>
|
