| | |
| | | <template> |
| | | <div> |
| | | <div class="search_form" style="margin-bottom: 10px"> |
| | | <el-form |
| | | ref="searchFormRef" |
| | | <div class="search_form" |
| | | style="margin-bottom: 10px"> |
| | | <el-form ref="searchFormRef" |
| | | :model="searchForm" |
| | | class="demo-form-inline" |
| | | > |
| | | class="demo-form-inline"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4"> |
| | | <el-form-item label="出库日期" prop="timeStr"> |
| | | <el-form-item label="出库日期" |
| | | prop="timeStr"> |
| | | <el-date-picker v-model="searchForm.timeStr" |
| | | type="date" |
| | | placeholder="请选择日期" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="产品大类" prop="productName"> |
| | | <el-form-item label="产品大类" |
| | | prop="productName"> |
| | | <el-input v-model="searchForm.productName" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | clearable/> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="4"> |
| | | <el-form-item label="产品规格" prop="model"> |
| | | <el-form-item label="规格型号" |
| | | prop="model"> |
| | | <el-input v-model="searchForm.model" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="批号" prop="batchNo"> |
| | | <el-form-item label="批号" |
| | | prop="batchNo"> |
| | | <el-input v-model="searchForm.batchNo" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item label="来源" prop="recordType"> |
| | | <el-select |
| | | v-model="searchForm.recordType" |
| | | <el-form-item label="来源" |
| | | prop="recordType"> |
| | | <el-select v-model="searchForm.recordType" |
| | | style="width: 240px" |
| | | placeholder="请选择" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in stockRecordTypeOptions" |
| | | clearable> |
| | | <el-option v-for="item in stockRecordTypeOptions" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 按钮 --> |
| | | <el-col :span="4"> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="getList"> |
| | | <el-button type="primary" |
| | | @click="getList"> |
| | | 搜索 |
| | | </el-button> |
| | | |
| | | <el-button @click="resetSearch"> |
| | | 重置 |
| | | </el-button> |
| | |
| | | </el-form> |
| | | </div> |
| | | <div class="actions"> |
| | | <el-button type="primary" @click="handleBatchApprove">审批</el-button> |
| | | <el-button type="primary" |
| | | @click="handleBatchApprove">审批</el-button> |
| | | <el-button @click="handleOut">导出</el-button> |
| | | <el-button type="danger" plain @click="handleDelete">删除</el-button> |
| | | <el-button type="primary" plain @click="handlePrint">打印</el-button> |
| | | <el-button type="danger" |
| | | plain |
| | | @click="handleDelete">删除</el-button> |
| | | <el-button type="primary" |
| | | plain |
| | | @click="handlePrint">打印</el-button> |
| | | </div> |
| | | <div class="table_list"> |
| | | <el-table |
| | | :data="tableData" |
| | | <el-table :data="tableData" |
| | | border |
| | | v-loading="tableLoading" |
| | | @selection-change="handleSelectionChange" |
| | | :expand-row-keys="expandedRowKeys" |
| | | :row-key="(row) => row.id" |
| | | style="width: 100%" |
| | | height="calc(100vh - 18.5em)" |
| | | > |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column |
| | | label="出库批次" |
| | | height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" |
| | | type="selection" |
| | | width="55" /> |
| | | <el-table-column align="center" |
| | | label="序号" |
| | | type="index" |
| | | width="60" /> |
| | | <el-table-column label="出库批次" |
| | | prop="outboundBatches" |
| | | min-width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="出库日期" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="出库日期" |
| | | prop="createTime" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="产品大类" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="产品大类" |
| | | prop="productName" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column label="规格型号" prop="model" show-overflow-tooltip /> |
| | | <el-table-column label="批号" prop="batchNo" show-overflow-tooltip /> |
| | | <el-table-column label="单位" prop="unit" show-overflow-tooltip /> |
| | | <el-table-column |
| | | label="出库数量" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="规格型号" |
| | | prop="model" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="批号" |
| | | prop="batchNo" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="单位" |
| | | prop="unit" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="出库数量" |
| | | prop="stockOutNum" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column label="出库人" prop="createBy" show-overflow-tooltip /> |
| | | <el-table-column label="来源" prop="recordType" show-overflow-tooltip> |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="出库人" |
| | | prop="createBy" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="来源" |
| | | prop="recordType" |
| | | show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | {{ getRecordType(scope.row.recordType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="审批状态" |
| | | <el-table-column label="审批状态" |
| | | prop="approvalStatus" |
| | | show-overflow-tooltip |
| | | > |
| | | show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <el-tag |
| | | :type="getApprovalStatusTagType(scope.row.approvalStatus)" |
| | | size="small" |
| | | > |
| | | <el-tag :type="getApprovalStatusTagType(scope.row.approvalStatus)" |
| | | size="small"> |
| | | {{ getApprovalStatusLabel(scope.row.approvalStatus) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | <pagination v-show="total > 0" |
| | | :total="total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | @pagination="paginationChange" |
| | | /> |
| | | @pagination="paginationChange" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | searchFormRef.value?.resetFields(); |
| | | page.current = 1; |
| | | getList(); |
| | | } |
| | | }; |
| | | |
| | | const paginationChange = (obj) => { |
| | | const paginationChange = obj => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | |
| | | ...page, |
| | | topParentProductId: props.topParentProductId, |
| | | }) |
| | | .then((res) => { |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | tableData.value.map((item) => { |
| | | tableData.value.map(item => { |
| | | item.children = []; |
| | | }); |
| | | total.value = res.data.total; |
| | |
| | | }); |
| | | }; |
| | | |
| | | const getRecordType = (recordType) => { |
| | | const getRecordType = recordType => { |
| | | return ( |
| | | stockRecordTypeOptions.value.find((item) => item.value === recordType) |
| | | stockRecordTypeOptions.value.find(item => item.value === recordType) |
| | | ?.label || "" |
| | | ); |
| | | }; |
| | |
| | | REJECTED: "驳回", |
| | | }; |
| | | |
| | | const getApprovalStatusLabel = (status) => { |
| | | const getApprovalStatusLabel = status => { |
| | | if (status === null || status === undefined || status === "") { |
| | | return "待审批"; |
| | | } |
| | |
| | | }; |
| | | |
| | | // 通过/驳回固定色;其余(含待审批、空值、未映射但文案为待审批)统一用 warning 预警色 |
| | | const getApprovalStatusTagType = (status) => { |
| | | const getApprovalStatusTagType = status => { |
| | | if ( |
| | | status === 1 || |
| | | status === "1" || |
| | |
| | | // 获取来源类型选项 |
| | | const fetchStockRecordTypeOptions = () => { |
| | | if (props.type === "0") { |
| | | findAllQualifiedStockOutRecordTypeOptions().then((res) => { |
| | | findAllQualifiedStockOutRecordTypeOptions().then(res => { |
| | | stockRecordTypeOptions.value = res.data; |
| | | }); |
| | | return; |
| | | } |
| | | findAllUnQualifiedStockOutRecordTypeOptions().then((res) => { |
| | | findAllUnQualifiedStockOutRecordTypeOptions().then(res => { |
| | | stockRecordTypeOptions.value = res.data; |
| | | }); |
| | | }; |
| | | |
| | | // 表格选择数据 |
| | | const handleSelectionChange = (selection) => { |
| | | const handleSelectionChange = selection => { |
| | | // 过滤掉子数据 |
| | | selectedRows.value = selection.filter((item) => item.id); |
| | | selectedRows.value = selection.filter(item => item.id); |
| | | console.log("selection", selectedRows.value); |
| | | }; |
| | | const expandedRowKeys = ref([]); |
| | |
| | | proxy.$modal.msgWarning("请选择数据"); |
| | | return; |
| | | } |
| | | const ids = selectedRows.value.map((item) => item.id); |
| | | const ids = selectedRows.value.map(item => item.id); |
| | | ElMessageBox.confirm("请选择审批结果", "审批", { |
| | | confirmButtonText: "通过", |
| | | cancelButtonText: "驳回", |
| | |
| | | proxy.$modal.msgError("审批通过失败"); |
| | | }); |
| | | }) |
| | | .catch((action) => { |
| | | .catch(action => { |
| | | if (action === "cancel") { |
| | | batchApproveStockOutRecords({ ids, approvalStatus: 2 }) |
| | | .then(() => { |
| | |
| | | const handleDelete = () => { |
| | | let ids = []; |
| | | if (selectedRows.value.length > 0) { |
| | | ids = selectedRows.value.map((item) => item.id); |
| | | ids = selectedRows.value.map(item => item.id); |
| | | } else { |
| | | proxy.$modal.msgWarning("请选择数据"); |
| | | return; |
| | |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | delPendingStockOut(ids).then((res) => { |
| | | delPendingStockOut(ids).then(res => { |
| | | proxy.$modal.msgSuccess("删除成功"); |
| | | getList(); |
| | | }); |
| | |
| | | }; |
| | | |
| | | // 格式化日期 |
| | | const formatDate = (dateString) => { |
| | | const formatDate = dateString => { |
| | | if (!dateString) return getCurrentDate(); |
| | | const date = new Date(dateString); |
| | | const year = date.getFullYear(); |
| | |
| | | }; |
| | | |
| | | // 格式化日期时间 |
| | | const formatDateTime = (date) => { |
| | | const formatDateTime = date => { |
| | | const year = date.getFullYear(); |
| | | const month = String(date.getMonth() + 1).padStart(2, "0"); |
| | | const day = String(date.getDate()).padStart(2, "0"); |