<template>
|
<section>
|
<!--工具条-->
|
<SearchBar
|
:buttonList="buttonList"
|
@callFunction="callFunction"
|
></SearchBar>
|
|
<!--列表-->
|
<el-table
|
:data="WMInInventory"
|
highlight-current-row
|
@current-change="selectCurrentRow"
|
v-loading="listLoading"
|
@selection-change="selsChange"
|
@select="selsChangeOne"
|
style="width: 100%"
|
ref="multipleTable"
|
>
|
<el-table-column type="selection" width="50"></el-table-column>
|
<el-table-column type="index" width="50"></el-table-column>
|
<el-table-column
|
prop="InInventoryCode"
|
label="入库编号"
|
width="110"
|
sortable
|
></el-table-column>
|
<!-- <el-table-column prop="DepartmentName" label="部门名称" width="150" sortable></el-table-column> -->
|
<el-table-column
|
prop="WareHouseName"
|
label="所属仓库"
|
width="130"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="SupplierName"
|
label="供应商"
|
width="280"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="OutInTypeName"
|
label="出入库类型"
|
width="120"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="EmployeeName"
|
label="采购员"
|
width="110"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="InTime"
|
label="入库时间"
|
:formatter="formatDateTime"
|
width="150"
|
sortable
|
></el-table-column>
|
<el-table-column prop="Remark" label="备注" sortable></el-table-column>
|
<el-table-column
|
prop="AdminName"
|
label="创建人"
|
width="110"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="CreateTime"
|
label="创建时间"
|
:formatter="formatDateTime"
|
width="150"
|
sortable
|
></el-table-column>
|
<el-table-column label="操作" width="180">
|
<template scope="scope">
|
<el-button
|
size="small"
|
class="el-icon-reading jbtn"
|
@click="handleDetail(scope.$index, scope.row)"
|
>详情</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!--工具条-->
|
<el-col :span="24" class="toolbar">
|
<el-pagination
|
layout="prev, pager, next"
|
@current-change="handleCurrentChange"
|
:page-size="20"
|
:total="total"
|
style="float: right"
|
></el-pagination>
|
</el-col>
|
|
<!--详情页面-->
|
<el-dialog
|
title="详情"
|
:visible.sync="detailFormVisible"
|
v-model="detailFormVisible"
|
:close-on-click-modal="false"
|
width="1400px"
|
>
|
<el-button
|
class="el-icon-back jbtn"
|
@click.native="detailFormVisible = false"
|
>返回</el-button
|
>
|
<el-button v-print="'#print'" class="jbtn">打印</el-button>
|
|
<div
|
style="
|
font-size: 30px;
|
line-height: 40px;
|
height: 42px;
|
color: #000;
|
width: 160px;
|
margin: 0 auto;
|
"
|
>
|
入库单详情
|
</div>
|
|
<div id="print">
|
<h3>入库信息</h3>
|
<el-divider></el-divider>
|
<el-form
|
:inline="true"
|
:model="detailForm"
|
label-width="110px"
|
ref="detailForm"
|
>
|
<el-form-item label="入库编号" prop="InInventoryCode">
|
<el-input
|
:disabled="true"
|
v-model="detailForm.InInventoryCode"
|
></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="部门名称" prop="DepartmentName">
|
<el-input :disabled="true" v-model="detailForm.DepartmentName"></el-input>
|
</el-form-item> -->
|
<el-form-item label="仓库名称" prop="WareHouseName">
|
<el-input
|
:disabled="true"
|
v-model="detailForm.WareHouseName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="供应商" prop="SupplierName">
|
<el-input
|
:disabled="true"
|
v-model="detailForm.SupplierName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="出入库类型" prop="OutInTypeName">
|
<el-input
|
:disabled="true"
|
v-model="detailForm.OutInTypeName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="采购员" prop="EmployeeName">
|
<el-input
|
:disabled="true"
|
v-model="detailForm.EmployeeName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="入库时间" prop="InTime">
|
<el-input
|
:disabled="true"
|
v-model="detailForm.InTime"
|
:formatter="formatDateTime"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="备注" prop="Remark">
|
<el-input :disabled="true" v-model="detailForm.Remark"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<h3>入库商品列表</h3>
|
<el-divider></el-divider>
|
<el-table :data="detailForm.InInventoryInfoList" border>
|
<el-table-column
|
prop="ProductCode"
|
label="商品编号"
|
width="150"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="ProductName"
|
label="商品名称"
|
width="180"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="PurchaseUnit"
|
label="商品单位"
|
width="110"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="ProductSpec"
|
label="商品规格"
|
width="180"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="Price"
|
label="单价"
|
width="100"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="ActualAmount"
|
label="总价"
|
width="100"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="CheckNum"
|
label="采购数"
|
width="100"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="StorageNum"
|
label="入库数"
|
width="100"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="LocationName"
|
label="所属库位"
|
width="110"
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="Remark"
|
label="备注"
|
width
|
sortable
|
></el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
</section>
|
</template>
|
<style scoped>
|
.jbtn {
|
background-color: #f90;
|
color: #f3f7fc;
|
border: 1px solid #f90;
|
}
|
.jbtn:hover {
|
background-color: #f90;
|
}
|
</style>
|
<script>
|
import util from "../../../../util/date";
|
import {
|
//获取后台数据接口
|
getWMInInventoryListPage, //入库单列表API
|
detailWMInInventory, //入库单详情API
|
} from "../../../api/api";
|
import { getButtonList } from "../../../promissionRouter";
|
import Toolbar from "../../../components/Toolbar";
|
import SearchBar from "./SearchBar";
|
export default {
|
components: { SearchBar },
|
data() {
|
return {
|
filters: {
|
department: "",
|
wareHouse: "",
|
supplier: "",
|
outInType: "",
|
},
|
WMInInventory: [],
|
total: 0,
|
buttonList: [],
|
currentRow: null,
|
page: 1,
|
listLoading: false,
|
sels: [], //列表选中列
|
//详情
|
detailForm: {},
|
detailFormRules: {},
|
detailFormVisible: false, //详情界面是否显示
|
};
|
},
|
methods: {
|
//选中行时勾选框
|
selsChangeOne(selection, row) {
|
this.currentRow = row;
|
this.$refs.multipleTable.toggleRowSelection(row); //选中当前选择
|
this.selectCurrentRow(row);
|
},
|
selectCurrentRow(val) {
|
this.currentRow = val;
|
this.$refs.multipleTable.toggleRowSelection(val); //选中当前选择
|
},
|
callFunction(item) {
|
this.filters = {
|
department: item.departmentoptionsSearch,
|
wareHouse: item.warehouseoptionsSearch,
|
supplier: item.supplieroptionsSearch,
|
outInType: item.typeoptionsSearch,
|
};
|
this[item.Func].apply(this, item);
|
},
|
formatDateTime: function (row, column) {
|
return !row.CreateTime || row.CreateTime == ""
|
? ""
|
: util.formatDate.format(new Date(row.CreateTime), "yyyy-MM-dd hh:mm");
|
},
|
handleCurrentChange(val) {
|
this.page = val;
|
this.getWMInInventory();
|
},
|
//获取入库单列表
|
getWMInInventory() {
|
let para = {
|
page: this.page,
|
department: this.filters.department,
|
wareHouse: this.filters.wareHouse,
|
supplier: this.filters.supplier,
|
outInType: this.filters.outInType,
|
};
|
this.listLoading = true;
|
|
getWMInInventoryListPage(para).then((res) => {
|
this.total = res.data.response.dataCount;
|
this.WMInInventory = res.data.response.data;
|
this.listLoading = false;
|
});
|
},
|
//显示详情界面
|
handleDetail: function (index, row) {
|
if (!row) {
|
row = this.currentRow;
|
}
|
let prms = { id: row.Id };
|
detailWMInInventory(prms).then((res) => {
|
this.detailForm = Object.assign({}, res.data.response);
|
});
|
this.detailFormVisible = true;
|
},
|
selsChange: function (sels) {
|
this.sels = sels;
|
},
|
},
|
mounted() {
|
this.getWMInInventory();
|
|
let routers = window.localStorage.router
|
? JSON.parse(window.localStorage.router)
|
: [];
|
this.buttonList = getButtonList(this.$route.path, routers);
|
},
|
};
|
</script>
|
