<template>
|
<div class="container">
|
<el-breadcrumb style="padding-top: 10px;padding-bottom: 10px" >
|
<el-breadcrumb-item :to="{ path: '/stock/enterprise' }">库存监管</el-breadcrumb-item>
|
<el-breadcrumb-item>库存详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
|
<div class="filter-container">
|
<el-row>
|
<el-input v-model="queryForm.name" class="filter-item" placeholder="产品名称" style="width: 30%; float: left;"
|
@keyup.enter.native="queryHandle"/>
|
<el-select v-model="queryForm.manufacturer" filterable placeholder="请选择生产厂家" style="float: left;padding-left: 15px">
|
<el-option
|
v-for="item in manufacturerTree"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.text">
|
</el-option>
|
</el-select>
|
<el-select v-model="queryForm.type" clearable placeholder="请选择产品大类" style="float: left;margin-left: 10px"
|
@change="getProductSecondaryCategory">
|
<el-option
|
class="filter-item"
|
v-for="item in typeOptions"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.attributes">{{item.text}}
|
</el-option>
|
</el-select>
|
<el-select v-model="queryForm.secondaryType" clearable placeholder="请选择产品小类" style="float: left;margin-left: 10px">
|
<el-option
|
v-for="item in secondaryOptions"
|
:key="item.attributes"
|
:label="item.text"
|
:value="item.attributes">
|
</el-option>
|
</el-select>
|
</el-row>
|
|
<el-row>
|
<el-input v-model="queryForm.directionCode" class="filter-item" placeholder="流向码" style="width: 30%;float: left" @keyup.enter.native="queryHandle"/>
|
|
<el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-refresh"
|
@click="refreshHandle">刷新
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-download"
|
@click="exportAllHandle">导出
|
</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search"
|
@click="queryHandle"/>
|
<el-button v-if="userType === 1" class="filter-item" style="margin-left: 10px; background-color: #f56c6c" type="danger" icon="el-icon-delete"
|
@click="clearHandle">清空库存
|
</el-button>
|
</el-row>
|
|
|
</div>
|
<div class="table_content">
|
<el-table
|
v-loading="listLoading"
|
:key="tableKey"
|
:data="stockData"
|
ref="multipleTable"
|
border
|
fit
|
highlight-current-row
|
style="width: 100%;"
|
@sort-change="sortChange"
|
>
|
<el-table-column
|
type="selection"
|
width="55"/>
|
<el-table-column type="index" label="序号" align="center" width="80"/>
|
<el-table-column label="产品名称" prop="name" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<el-link type="primary" @click="showDetail(scope.row)">{{ scope.row.name }}</el-link>
|
</template>
|
</el-table-column>
|
<el-table-column label="产品编码" prop="directionCode" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.directioncode }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="库存总数（箱）" prop="directionCode" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.countNum }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="每箱数量（挂、个）" prop="directionCode" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.boxnumber }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="产品大类" prop="productType" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.productType }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="产品小类" prop="secondaryType" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.secondaryType }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="规格" prop="specification" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.specification }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="含药量" prop="explosiveContent" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.explosiveContent }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="生产日期" prop="createdDate" align="center" sortable="custom">
|
<template slot-scope="scope">
|
<span>{{ scope.row.createddate | parseTime('{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<br>
|
<el-pagination
|
v-show="recordTotal>0"
|
:current-page="currentPage"
|
:page-sizes="[20, 50, 100,200]"
|
:page-size="pageSize"
|
:total="recordTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
background
|
style="float:right;"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
<StockDetail ref="stockDetail" :itemCode = "itemCode" @getinfo = "getStockList"></StockDetail>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import {getMajorCategoryTree, getManufacturerTree, getSecondaryCategoryTree} from "../../api/product";
|
import {computePageCount, parseTime} from "../../utils";
|
import {parseError} from "../../utils/messageDialog";
|
import {clearStockByItem, stockList} from "../../api/stock";
|
import Cookies from 'js-cookie'
|
import StockDetail from "./components/stockDetail";
|
import {mapGetters} from "vuex";
|
import {dictionaryAllItems} from "../../api/dictionary";
|
|
export default {
|
name: "stockInfo",
|
components: {StockDetail},
|
data(){
|
return{
|
pageSize: 20,
|
recordTotal: 0,
|
currentPage: 1,
|
pageTotal: 0,
|
tableKey: 0,
|
stockData:[],
|
listLoading: true,
|
manufacturerTree:[],
|
itemCode:"",
|
queryForm: {
|
name: '',
|
manufacturer:'',
|
directionCode:'',
|
beginDate:'',
|
endDate:'',
|
type:'',
|
secondaryType:'',
|
},
|
typeOptions: [],
|
secondaryOptions:[],
|
owner:'',
|
}
|
},
|
computed:{
|
...mapGetters([
|
'userType',
|
'username',
|
'userId'
|
])
|
},
|
created(){
|
this.queryForm.beginDate = this.$route.query.beginDate;
|
this.queryForm.endDate = this.$route.query.endDate;
|
},
|
mounted(){
|
getManufacturerTree().then(res=>{
|
this.manufacturerTree=(res.data) ;
|
});
|
this.getDictionaryItemLevelList();
|
this.getProductMajorCategory();
|
this.owner = this.$route.query.owner;
|
this.getStockList(this.$route.query.owner);
|
},
|
methods:{
|
getStockList(owner){
|
const _this = this;
|
const params = {};
|
params['pageIndex'] = _this.currentPage;
|
params['pageSize'] = _this.pageSize;
|
params['sort'] = _this.sort;
|
params['order'] = _this.order;
|
if (owner == null){
|
owner = Cookies.get("userId");
|
}
|
params['owner'] = owner;
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
params['operator'] = name + '(' + userName + ')';
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
_this.listLoading = true
|
stockList(params).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
const result = res.result;
|
_this.recordTotal = result.totalCount;
|
_this.pageSize = result.pageSize;
|
_this.pageTotal = computePageCount(result.totalCount, result.pageSize);
|
_this.currentPage = result.pageIndex;
|
_this.stockData = result.result
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
_this.listLoading = false
|
}).catch(error => {
|
_this.listLoading = false
|
parseError({error: error, vm: _this})
|
})
|
},
|
refreshHandle: function () {
|
this.getStockList(this.owner)
|
},
|
queryHandle: function () {
|
this.currentPage = 1
|
this.getStockList(this.owner)
|
},
|
handleSizeChange: function (val) {
|
this.pageSize = val
|
this.currentPage = 1
|
this.getStockList(this.owner)
|
},
|
handleCurrentChange: function (val) {
|
this.currentPage = val
|
this.getStockList(this.owner)
|
},
|
sortChange(param){
|
this.sort = param.prop;
|
this.order = param.order;
|
this.getStockList(this.owner);
|
},
|
showDetail(param){
|
this.$refs.stockDetail.open(param.directioncode,param.enterpriseNumber)
|
},
|
getProductSecondaryCategory(major){
|
this.secondaryOptions = [];
|
this.queryForm.secondaryType = '';
|
getSecondaryCategoryTree(major).then(res=>{
|
this.secondaryOptions = res.data;
|
})
|
},
|
getDictionaryItemLevelList() {
|
const _this = this
|
if (_this.levelOptions && _this.levelOptions.length > 0) {
|
return
|
}
|
const params = {}
|
params['dictionaryType'] = '产品级别';
|
dictionaryAllItems(params).then(response => {
|
const res = response.data
|
if (res.code == 200) {
|
_this.levelOptions = res.result
|
} else {
|
parseError({error: res.message, vm: _this})
|
}
|
}).catch(error => {
|
parseError({error: error, vm: _this})
|
})
|
},
|
getProductMajorCategory(){
|
getMajorCategoryTree().then(res=>{
|
this.typeOptions = res.data;
|
})
|
},
|
clearHandle(){
|
const _selectData = this.$refs.multipleTable.selection;
|
let directionCodes = "";
|
let count = 0;
|
if (_selectData == null || _selectData.length < 1){
|
parseError({ error: "未选中产品信息", vm: this })
|
}
|
_selectData.forEach(item =>{
|
if (item.name !== '总计'){
|
directionCodes += item.directioncode;
|
directionCodes += ",";
|
count++;
|
}
|
});
|
this.$confirm('此操作将永久清除选中的 '+count+' 种产品库存, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const params = {}
|
params['owner'] = this.owner;
|
params['directionCodes'] = directionCodes;
|
clearStockByItem(params).then(response =>{
|
const res = response.data;
|
if (res.code === "200") {
|
const result = res.result;
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
this.refreshHandle();
|
}
|
});
|
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
exportAllHandle () {
|
const _this = this;
|
const params = {};
|
let owner = _this.owner;
|
params['pageIndex'] = _this.currentPage;
|
params['pageSize'] = _this.pageSize;
|
params['sort'] = _this.sort;
|
params['order'] = _this.order;
|
if (owner == null){
|
owner = Cookies.get("userId");
|
}
|
params['owner'] = owner;
|
const userName = Cookies.get('userName');
|
const name = Cookies.get('name');
|
params['operator'] = name + '(' + userName + ')';
|
for (const i in _this.queryForm) {
|
if (_this.queryForm[i] != undefined && _this.queryForm[i].toString() != '') {
|
params[i] = _this.queryForm[i]
|
}
|
}
|
stockList(params).then(response => {
|
const res = response.data;
|
if (res.code === "200") {
|
const allData = res.result.result;
|
if (allData.length == 0) {
|
parseError({ error: '当前没有数据', vm: _this });
|
return
|
}
|
|
import('@/vendor/Export2Excel').then(excel => {
|
const tHeader = ['产品名称','产品编码', '库存总数（箱）', '每箱数量（挂、个）', '产品大类', '产品小类', '规格', '含药量', '生产日期'];
|
const filterVal = ['name','directioncode', 'countNum', 'boxnumber', 'productType', 'secondaryType', 'specification', 'explosiveContent', 'createddate'];
|
const data = _this.formatJson(filterVal, allData);
|
excel.export_json_to_excel({
|
header: tHeader,
|
data,
|
filename: '库存详情'
|
})
|
})
|
} else {
|
parseError({ error: res.message, vm: _this })
|
}
|
}).catch(error => {
|
parseError({ error: error, vm: _this })
|
})
|
},
|
formatJson(filterVal, jsonData) {
|
return jsonData.map((v) =>
|
filterVal.map((j) => {
|
if (j === 'createddate') {
|
return parseTime(v[j], '{y}-{m}-{d}')
|
}else {
|
return v[j]
|
}
|
})
|
)
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
