Teams/shgx_tz_vue-sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

仓库模块-出库单：添加出库单样式

Browse Source
This commit is contained in:
赵正易
2024-03-18 15:36:00 +08:00
parent 202dc372b3
commit 49280dfbc1
5 changed files with 771 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/wmsManagement/WmCustom.vue
View File

@@ -34,7 +34,7 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['wmsManagement:wmcustom:add']" plain icon="el-icon-plus" size="mini" @click="handleAdd"
>新增</el-button
>新增客户</el-button
>
</el-col>
<el-col :span="1.5">
@@ -46,7 +46,7 @@
icon="el-icon-edit"
size="mini"
@click="handleUpdate"
>修改</el-button
>批量修改</el-button
>
</el-col>
<el-col :span="1.5">
@@ -58,7 +58,7 @@
icon="el-icon-delete"
size="mini"
@click="handleDelete"
>删除</el-button
>批量删除</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -273,7 +273,7 @@ export default {
handleAdd() {
this.reset()
this.open = true
this.title = '添加'
this.title = '新增客户'
this.opertype = 1
},
/** 删除按钮操作 */

6
src/views/wmsManagement/WmMaterial.vue
View File

@@ -68,7 +68,7 @@
icon="el-icon-edit"
size="medium"
@click="handleUpdate"
>修改物料记录</el-button
>批量修改</el-button
>
</el-col>
<el-col :span="1.5">
@@ -80,7 +80,7 @@
icon="el-icon-delete"
size="medium"
@click="handleDelete"
>删除</el-button
>批量删除</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -425,7 +425,7 @@ export default {
handleAdd() {
this.reset()
this.open = true
this.title = '添加'
this.title = '新增物料'
this.opertype = 1
},
/** 删除按钮操作 */

957
src/views/wmsManagement/WmOutOrder.vue
View File

@@ -7,397 +7,588 @@
* @LastEditTime: (2024-03-18)
-->
<template>
<div class="app-container">
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
<el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm" :label-width="labelWidth" v-show="showSearch"
@submit.native.prevent>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 工具区域 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:wmoutorder:add']" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" :disabled="single" v-hasPermi="['business:wmoutorder:edit']" plain icon="el-icon-edit" size="mini" @click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" :disabled="multiple" v-hasPermi="['business:wmoutorder:delete']" plain icon="el-icon-delete" size="mini" @click="handleDelete">删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<div class="app-container">
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
<el-form
:model="queryParams"
size="small"
label-position="right"
inline
ref="queryForm"
:label-width="labelWidth"
v-show="showSearch"
@submit.native.prevent
>
<el-form-item label="年" prop="year">
<el-input v-model="queryParams.year" placeholder="请输入年" />
</el-form-item>
<el-form-item label="周" prop="week">
<el-input v-model="queryParams.week" placeholder="请输入周" />
</el-form-item>
<!-- 数据区域 -->
<el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row @sort-change="sortChange" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center"/>
<el-table-column prop="shipmentNum" label="出库单号(EG+时间)" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customId" label="客户id" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customNo" label="客户代码" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customName" label="客户名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customAddress" label="客户地址" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remarks" label="备注" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="type" label="出库单状态（1-出库中 2-出库完成 3-弃用）" align="center">
<template slot-scope="scope">
<dict-tag :options="typeOptions" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column prop="status" label="状态（0-停用 1-启用）" align="center">
<template slot-scope="scope">
<dict-tag :options="statusOptions" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column prop="year" label="年" align="center" />
<el-table-column prop="week" label="周" align="center" />
<el-table-column prop="date" label="日" align="center" />
<el-table-column prop="createdBy" label="创建人" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="createdTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="updatedBy" label="更新人" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="updatedTime" label="更新时间" align="center" :show-overflow-tooltip="true" />
<el-form-item label="日" prop="date">
<el-input v-model="queryParams.date" placeholder="请输入日" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 工具区域 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:wmoutorder:add']" plain icon="el-icon-plus" size="mini" @click="handleAdd"
>新增出库单</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
:disabled="single"
v-hasPermi="['business:wmoutorder:edit']"
plain
icon="el-icon-edit"
size="mini"
@click="handleUpdate"
>批量修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
:disabled="multiple"
v-hasPermi="['business:wmoutorder:delete']"
plain
icon="el-icon-delete"
size="mini"
@click="handleDelete"
>批量删除</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table-column label="操作" align="center" width="140">
<template slot-scope="scope">
<el-button size="mini" v-hasPermi="['business:wmoutorder:edit']" type="success" icon="el-icon-edit" title="编辑"
@click="handleUpdate(scope.row)"></el-button>
<el-button size="mini" v-hasPermi="['business:wmoutorder:delete']" type="danger" icon="el-icon-delete" title="删除"
@click="handleDelete(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
<!-- 数据区域 -->
<el-table
:data="dataList"
v-loading="loading"
ref="table"
border
highlight-current-row
@sort-change="sortChange"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="shipmentNum" label="出库单号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customNo" label="客户代码" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customName" label="客户名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="customAddress" label="客户地址" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remarks" label="备注" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="type" label="状态" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 1">出库中</el-tag>
<el-tag type="success" v-if="scope.row.status === 2">出库完成</el-tag>
<el-tag type="info" v-if="scope.row.status === 3">弃用</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
<el-tag type="info" v-if="scope.row.status === 0">停用</el-tag>
</template>
</el-table-column>
<el-table-column prop="year" label="年周日" align="center">
<template slot-scope="scope">
{{ scope.row.year + '-' + scope.row.week + '-' + scope.row.date }}
</template>
</el-table-column>
<el-table-column prop="createdBy" label="创建人" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="createdTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
<!-- 添加或修改出货单（物料+客户）对话框 -->
<el-dialog :title="title" :lock-scroll="false" :visible.sync="open" >
<el-form ref="form" :model="form" :rules="rules" :label-width="formLabelWidth">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item label="出库单号(EG+时间)" prop="shipmentNum">
<el-input-number v-model.number="form.shipmentNum" controls-position="right" placeholder="请输入出库单号(EG+时间)" :disabled="title=='修改数据'"/>
</el-form-item>
</el-col>
<el-table-column label="操作" align="center" width="140">
<template slot-scope="scope">
<el-button
size="mini"
v-hasPermi="['business:wmoutorder:edit']"
type="success"
icon="el-icon-edit"
title="编辑"
:disabled="!(scope.row.status === 1)"
@click="handleUpdate(scope.row)"
></el-button>
<el-button
size="mini"
v-hasPermi="['business:wmoutorder:delete']"
type="danger"
icon="el-icon-delete"
title="删除"
:disabled="!(scope.row.status === 1)"
@click="handleDelete(scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
<pagination
class="mt10"
background
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<el-col :lg="12">
<el-form-item label="客户id" prop="customId">
<el-input v-model="form.customId" placeholder="请输入客户id" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="客户代码" prop="customNo">
<el-input v-model="form.customNo" placeholder="请输入客户代码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="客户名称" prop="customName">
<el-input v-model="form.customName" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="客户地址" prop="customAddress">
<el-input v-model="form.customAddress" placeholder="请输入客户地址" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="出库单状态（1-出库中 2-出库完成 3-弃用）" prop="type">
<el-select v-model="form.type" placeholder="请选择出库单状态（1-出库中 2-出库完成 3-弃用）">
<el-option v-for="item in typeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="状态（0-停用 1-启用）" prop="status">
<el-radio-group v-model="form.status">
<el-radio v-for="item in statusOptions" :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="年" prop="year">
<el-input v-model="form.year" placeholder="请输入年" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="周" prop="week">
<el-input v-model="form.week" placeholder="请输入周" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="创建人" prop="createdBy">
<el-input v-model="form.createdBy" placeholder="请输入创建人" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="创建时间" prop="createdTime">
<el-date-picker v-model="form.createdTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="更新人" prop="updatedBy">
<el-input v-model="form.updatedBy" placeholder="请输入更新人" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="更新时间" prop="updatedTime">
<el-date-picker v-model="form.updatedTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
<!-- 添加或修改出货单对话框 -->
<el-dialog :title="title" :lock-scroll="false" :visible.sync="open">
<el-form ref="form" :model="form" :rules="rules" :label-width="formLabelWidth" size="mini">
<!-- 时间信息 -->
<el-row :gutter="10">
<el-col :lg="8">
<el-form-item label="年" prop="year">
<el-input v-model="form.year" placeholder="请输入年" />
</el-form-item>
</el-col>
<el-col :lg="8">
<el-form-item label="周" prop="week">
<el-input v-model="form.week" placeholder="请输入周" />
</el-form-item>
</el-col>
<el-col :lg="8">
<el-form-item label="日" prop="date">
<el-input v-model="form.date" placeholder="请输入日" />
</el-form-item>
</el-col>
</el-row>
<!-- 客户信息 -->
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item label="客户选择" prop="customId">
<el-select v-model="selectCustomInfo" filterable placeholder="请选择一个客户" @change="handleCustomSelectChange">
<el-option
v-for="(item, index) in customOptions"
:key="index"
:label="item.customNo + '-' + item.customName"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="客户代码" prop="customNo">
<el-input v-model="form.customNo" placeholder="请输入客户代码" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="客户名称" prop="customName">
<el-input v-model="form.customName" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="客户地址" prop="customAddress">
<el-input v-model="form.customAddress" placeholder="请输入客户地址" />
</el-form-item>
</el-col>
</el-row>
<!-- 其他信息 -->
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="出库单状态" prop="type">
<el-select v-model="form.type" placeholder="请选择出库单状态">
<el-option
v-for="item in typeOptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio v-for="item in statusOptions" :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 物料信息 -->
<div>
<div class="action-box flex-row flex-row-right">
<el-button size="medium" type="success" icon="el-icon-plus" @click="handlerOpenChouseMaterial">添加物料</el-button>
<el-button size="medium" type="danger" icon="el-icon-delete" @click="handlerDeleteMaterial" :disabled="materialIds.length === 0"
>批量删除</el-button
>
</div>
<div>
<el-table
:data="form.materialDataList"
v-loading="materialLoading"
ref="table"
border
highlight-current-row
@selection-change="handleMaterialSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="partnumber" label="物料号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="u8InventoryCode" label="U8编码" align="center" :show-overflow-tooltip="true" />
<el-table-column label="需求量" prop="num" align="center" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.num" placeholder="请输入物料需求量" />
</template>
</el-table-column>
<el-table-column prop="nowNum" label="现有库存" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="unit" label="单位" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="description" label="显示描述" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="version" label="版本号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remarks" label="备注" align="center" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="140">
<template slot-scope="scope">
<el-button
size="mini"
v-hasPermi="['business:wmmaterial:delete']"
type="danger"
icon="el-icon-delete"
title="删除"
@click="handlerDeleteMaterial([scope.row.id])"
></el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">创建出库单</el-button>
</div>
</el-dialog>
<TheChouseMaterial :visible.sync="TheChouseMaterialDialogVisible" @materialChoused="handlerMaterialChoused"></TheChouseMaterial>
</div>
</template>
<script>
import {
listWmOutOrder,
addWmOutOrder,
delWmOutOrder,
updateWmOutOrder,
getWmOutOrder,
} from '@/api/wmsManagement/wmOutOrder.js';
import { listWmOutOrder, addWmOutOrder, delWmOutOrder, updateWmOutOrder, getWmOutOrder, getCustomList } from '@/api/wmsManagement/wmOutOrder.js'
import TheChouseMaterial from './components/TheChouseMaterial/TheChouseMaterial.vue'
export default {
name: "wmoutorder",
data() {
return {
labelWidth: "100px",
formLabelWidth:"100px",
// 选中shipmentNum数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 遮罩层
loading: false,
// 显示搜索条件
showSearch: true,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
sort: undefined,
sortType: undefined,
},
// 弹出层标题
title: "",
// 操作类型 1、add 2、edit
opertype: 0,
// 是否显示弹出层
open: false,
// 表单参数
form: {},
columns: [
{ index: 0, key: 'shipmentNum', label: `出库单号(EG+时间)`, checked: true },
{ index: 1, key: 'customId', label: `客户id`, checked: true },
{ index: 2, key: 'customNo', label: `客户代码`, checked: true },
{ index: 3, key: 'customName', label: `客户名称`, checked: true },
{ index: 4, key: 'customAddress', label: `客户地址`, checked: true },
{ index: 5, key: 'remarks', label: `备注`, checked: true },
{ index: 6, key: 'type', label: `出库单状态（1-出库中 2-出库完成 3-弃用）`, checked: true },
{ index: 7, key: 'status', label: `状态（0-停用 1-启用）`, checked: true },
{ index: 8, key: 'year', label: `年`, checked: true },
{ index: 9, key: 'week', label: `周`, checked: false },
{ index: 10, key: 'date', label: `日`, checked: false },
{ index: 11, key: 'createdBy', label: `创建人`, checked: false },
{ index: 12, key: 'createdTime', label: `创建时间`, checked: false },
{ index: 13, key: 'updatedBy', label: `更新人`, checked: false },
{ index: 14, key: 'updatedTime', label: `更新时间`, checked: false },
],
// 出库单状态（1-出库中 2-出库完成 3-弃用）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
typeOptions: [],
// 状态（0-停用 1-启用）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
statusOptions: [],
// 数据列表
dataList: [],
// 总记录数
total: 0,
// 提交按钮是否显示
btnSubmitVisible: true,
// 表单校验
rules: {
shipmentNum: [
{ required: true, message: "出库单号(EG+时间)不能为空", trigger: "blur" }
],
},
};
},
created() {
// 列表数据查询
this.getList();
name: 'wmoutorder',
components: {
TheChouseMaterial,
},
data() {
return {
TheChouseMaterialDialogVisible: false,
labelWidth: '100px',
formLabelWidth: '100px',
// 选中shipmentNum数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 遮罩层
loading: false,
materialLoading: false,
// 显示搜索条件
showSearch: true,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
sort: undefined,
sortType: undefined,
},
// 弹出层标题
title: '',
// 操作类型 1、add 2、edit
opertype: 0,
// 是否显示弹出层
open: false,
// 表单参数
form: {
status: 1,
type: 1,
materialDataList: [],
},
// 缓存记录数据
columns: [
{ index: 0, key: 'shipmentNum', label: `出库单号(EG+时间)`, checked: true },
{ index: 1, key: 'customId', label: `客户id`, checked: true },
{ index: 2, key: 'customNo', label: `客户代码`, checked: true },
{ index: 3, key: 'customName', label: `客户名称`, checked: true },
{ index: 4, key: 'customAddress', label: `客户地址`, checked: true },
{ index: 5, key: 'remarks', label: `备注`, checked: true },
{ index: 6, key: 'type', label: `出库单状态（1-出库中 2-出库完成 3-弃用）`, checked: true },
{ index: 7, key: 'status', label: `状态（0-停用 1-启用）`, checked: true },
{ index: 8, key: 'year', label: `年`, checked: true },
{ index: 9, key: 'week', label: `周`, checked: false },
{ index: 10, key: 'date', label: `日`, checked: false },
{ index: 11, key: 'createdBy', label: `创建人`, checked: false },
{ index: 12, key: 'createdTime', label: `创建时间`, checked: false },
{ index: 13, key: 'updatedBy', label: `更新人`, checked: false },
{ index: 14, key: 'updatedTime', label: `更新时间`, checked: false },
],
// 出库单状态（1-出库中 2-出库完成 3-弃用）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
typeOptions: [
{
dictLabel: '出库中',
dictValue: 1,
},
{
dictLabel: '出库完成',
dictValue: 2,
},
{
dictLabel: '弃用',
dictValue: 3,
},
],
// 状态（0-停用 1-启用）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
statusOptions: [
{
dictLabel: '启用',
dictValue: 1,
},
{
dictLabel: '停用',
dictValue: 0,
},
],
// 数据列表
dataList: [],
// 总记录数
total: 0,
// 提交按钮是否显示
btnSubmitVisible: true,
// 表单校验
rules: {},
// 添加订单操作相关数据 ========
customOptions: [],
selectCustomInfo: null,
materialIds: [],
//出库单关联物料表数据
}
},
created() {
// 列表数据查询
this.initDict()
this.getList()
},
methods: {
initDict() {
// 获取客户下拉菜单
getCustomList().then((res) => {
if (res.code === 200) {
this.customOptions = res.data
}
})
},
// 查询数据
getList() {
this.loading = true
listWmOutOrder(this.queryParams).then((res) => {
if (res.code == 200) {
this.dataList = res.data.result
this.total = res.data.totalNum
this.loading = false
}
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 重置数据表单
reset() {
this.form = {
shipmentNum: undefined,
customId: undefined,
customNo: undefined,
customName: undefined,
customAddress: undefined,
remarks: undefined,
type: 1,
status: 1,
year: undefined,
week: undefined,
date: undefined,
createdBy: undefined,
createdTime: undefined,
updatedBy: undefined,
updatedTime: undefined,
materialDataList: [],
}
this.resetForm('form')
},
// 重置查询操作
resetQuery() {
this.timeRange = []
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.shipmentNum)
this.single = selection.length != 1
this.multiple = !selection.length
},
// 自定义排序
sortChange(column) {
if (column.prop == null || column.order == null) {
this.queryParams.sort = undefined
this.queryParams.sortType = undefined
} else {
this.queryParams.sort = column.prop
this.queryParams.sortType = column.order
}
var dictParams = [
];
},
methods: {
// 查询数据
getList() {
this.loading = true;
listWmOutOrder(this.queryParams).then(res => {
if (res.code == 200) {
this.dataList = res.data.result;
this.total = res.data.totalNum;
this.loading = false;
}
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 重置数据表单
reset() {
this.form = {
shipmentNum: undefined,
customId: undefined,
customNo: undefined,
customName: undefined,
customAddress: undefined,
remarks: undefined,
type: undefined,
status: undefined,
year: undefined,
week: undefined,
date: undefined,
createdBy: undefined,
createdTime: undefined,
updatedBy: undefined,
updatedTime: undefined,
};
this.resetForm("form");
},
// 重置查询操作
resetQuery() {
this.timeRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.shipmentNum);
this.single = selection.length != 1
this.multiple = !selection.length;
},
// 自定义排序
sortChange(column) {
if (column.prop == null || column.order == null) {
this.queryParams.sort = undefined;
this.queryParams.sortType = undefined;
} else {
this.queryParams.sort = column.prop;
this.queryParams.sortType = column.order;
}
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '创建出库单'
this.opertype = 1
},
/** 删除按钮操作 */
handleDelete(row) {
const Ids = row.shipmentNum || this.ids
this.$confirm('是否确认删除此数据项？')
.then(function () {
return delWmOutOrder(Ids)
})
.then(() => {
this.handleQuery()
this.msgSuccess('删除成功')
})
.catch(() => {})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.shipmentNum || this.ids
getWmOutOrder(id).then((res) => {
const { code, data } = res
if (code == 200) {
this.open = true
this.title = '修改出库单数据'
this.opertype = 2
this.handleQuery();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加";
this.opertype = 1;
},
/** 删除按钮操作 */
handleDelete(row) {
const Ids = row.shipmentNum || this.ids;
this.form = {
...data,
}
}
})
},
// 出库单状态（1-出库中 2-出库完成 3-弃用）字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.typeOptions, row.type)
},
// 状态（0-停用 1-启用）字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status)
},
// 出库单新增相关操作 ===========================
handleCustomSelectChange(item) {
this.form.id = item.ids
this.form.customNo = item.customNo
this.form.customName = item.customName
this.form.customAddress = item.customAddress
console.log('handleCustomSelectChange', item)
},
// 出库单物料表多选框选中数据
handleMaterialSelectionChange(selection) {
this.materialIds = selection.map((item) => item.id)
// this.single = selection.length != 1
// this.multiple = !selection.length
},
// 删除某项
handlerDeleteMaterial(ids = null) {
const Ids = ids || this.materialIds
this.$confirm('是否确认移除数据项？')
.then(function () {
const list = JSON.parse(JSON.stringify(this.form.materialDataList))
const len = list.length
for (let index = 0; index < len; index++) {
if (Ids.includes(list[index])) {
this.form.materialDataList.splice(index, 1)
}
}
})
.then(() => {
this.msgSuccess('删除成功')
})
},
// 打开物料选择弹窗
handlerOpenChouseMaterial() {
this.TheChouseMaterialDialogVisible = true
},
// 物料已选择
handlerMaterialChoused(list){
this.form.materialDataList = list;
},
// ====================================================
/** 提交按钮 */
submitForm: function () {
this.$refs['form'].validate((valid) => {
if (valid) {
console.log(JSON.stringify(this.form))
this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
.then(function () {
return delWmOutOrder(Ids);
})
.then(() => {
this.handleQuery();
this.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.shipmentNum || this.ids;
getWmOutOrder(id).then((res) => {
const { code, data } = res;
if (code == 200) {
this.open = true;
this.title = "修改数据";
this.opertype = 2;
if (this.form.shipmentNum != undefined && this.opertype === 2) {
updateWmOutOrder(this.form)
.then((res) => {
this.msgSuccess('修改成功')
this.open = false
this.getList()
})
.catch((err) => {
//TODO 错误逻辑
})
} else {
addWmOutOrder(this.form)
.then((res) => {
this.msgSuccess('新增成功')
this.open = false
this.getList()
})
.catch((err) => {
//TODO 错误逻辑
})
}
}
})
},
},
}
</script>
this.form = {
...data,
};
}
});
},
// 出库单状态（1-出库中 2-出库完成 3-弃用）字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.typeOptions, row.type);
},
// 状态（0-停用 1-启用）字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
console.log(JSON.stringify(this.form));
if (this.form.shipmentNum != undefined && this.opertype === 2) {
updateWmOutOrder(this.form)
.then((res) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
})
.catch((err) => {
//TODO 错误逻辑
});
} else {
addWmOutOrder(this.form)
.then((res) => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
})
.catch((err) => {
//TODO 错误逻辑
});
}
}
});
},
},
};
</script>
<style scoped>
.action-box {
width: 100%;
margin-bottom: 10px;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row-right {
align-items: center;
justify-content: right;
}
</style>

133
src/views/wmsManagement/components/TheChouseMaterial/TheChouseMaterial.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<div>
<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="物料选择">
<el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="80px">
<el-row type="flex" justify="start" align="top" :gutter="10">
<el-form-item label="物料号" prop="partnumber">
<el-input v-model="formData.partnumber" placeholder="请输入物料号" clearable :style="{ width: '100%' }"> </el-input>
</el-form-item>
<el-form-item label="U8编码" prop="u8InventoryCode">
<el-input v-model="formData.u8InventoryCode" placeholder="请输入U8编码" clearable :style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="formData.description" placeholder="请输入描述" clearable :style="{ width: '100%' }"> </el-input>
</el-form-item>
</el-row>
<el-row type="flex" justify="start" align="top" :gutter="10">
<el-form-item label="" prop="search">
<el-button type="primary" icon="el-icon-search" size="medium" @click="getList">搜索</el-button>
<el-button type="success" icon="el-icon-plus" size="medium" :disabled="dataList.length === 0">添加物料</el-button>
</el-form-item>
</el-row>
<el-row>
<el-table
:data="dataList"
v-loading="loading"
ref="table"
border
highlight-current-row
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="partnumber" label="物料号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="u8InventoryCode" label="U8编码" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="unit" label="单位" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="description" label="显示描述" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="version" label="版本号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remarks" label="备注" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remarks" label="现有库存" align="center" :show-overflow-tooltip="true" />
</el-table>
<pagination
class="mt10"
background
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
</el-form>
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getMaterialList } from '@/api/wmsManagement/wmOutOrder.js'
export default {
inheritAttrs: false,
components: {},
props: [],
data() {
return {
// 遮罩层
loading: false,
formData: {
partnumber: undefined,
u8InventoryCode: undefined,
description: undefined,
search: '',
},
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 数据列表
dataList: [],
// 总记录数
total: 0,
rules: {},
// 多选框选中数据
selectList: [],
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
onOpen() {
this.getList()
},
onClose() {
this.$refs['elForm'].resetFields()
this.dataList = []
this.queryParams = {
pageNum: 1,
pageSize: 10,
}
this.total = 0
this.ids = []
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$emit('materialChoused', this.selectList)
this.close()
// this.$refs['elForm'].validate((valid) => {
// if (!valid) return
// this.close()
// })
},
// 多选框选中数据
handleSelectionChange(selection) {
this.selectList = selection
// this.selectList = selection.map((item) => item.id)
},
getList() {
this.loading = true
const data = this.queryParams
getMaterialList(data).then((res) => {
if (res.code === 200) {
this.dataList = res.data
this.loading = false
}
})
},
},
}
</script>
<style></style>