<template>
|
<div>
|
<div style="
|
display: flex;
|
justify-content: flex-end;
|
margin-right: 20px;
|
margin-bottom: 20px;
|
">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="addOrUpdateStore('add')">添加
|
</el-button>
|
<el-button icon="el-icon-download" size="small" @click="importExcel">
|
导出excel
|
</el-button>
|
</div>
|
<div class="table">
|
<ZTTable
|
:column="tableColumn"
|
:height="'calc(100vh - 20em)'"
|
:table-data="storageTableData"
|
:table-loading="tableLoading"
|
style="padding: 0 10px;margin-bottom: 16px">
|
</ZTTable>
|
<el-pagination
|
:current-page="1"
|
:page-size="page.size"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:total="total" layout="->,total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange">
|
</el-pagination>
|
</div>
|
|
<!-- 编辑-新增弹框 -->
|
<el-dialog :before-close="handleClose" :close-on-click-modal="false"
|
:close-on-press-escape="false" :title="title"
|
:visible.sync="dialogVisible" width="70%">
|
<!-- 入库单 -->
|
<div>
|
<div style="display: flex; align-items: center">
|
<span style="margin-left: 10px">入库单</span>
|
</div>
|
<el-form ref="formModel" :model="form" label-width="auto">
|
<el-col :span="12">
|
<el-form-item label="入库单号">
|
<el-input v-model="form.oddNumbers" placeholder="请输入入库单号" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="入库库存">
|
<el-input v-model="form.inventory" placeholder="请输入入库库存" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="入库总金额">
|
<el-input v-model="form.totalAmount" placeholder="请输入入库总金额" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="入库日期">
|
<el-date-picker v-model="form.storageTime" format="yyyy-MM-dd"
|
placeholder="选择日期"
|
size="small"
|
style="width: 100%" type="date" value-format="yyyy-MM-dd"></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="入库人">
|
<el-select v-model="form.storageUser" size="small" style="width: 100%">
|
<el-option v-for="item in users" :key="item.id" :label="item.nodeName" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="入库说明">
|
<el-input v-model="form.remark" :rows="2" placeholder="请输入内容" type="textarea">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</div>
|
<!-- 入库明细 -->
|
<div>
|
<div>入库明细</div>
|
<div class="input-form">
|
<div>
|
<div>
|
<span>耗材名称:</span>
|
<el-select v-model="formTwo.id" filterable placeholder="请选择耗材名称" size="small" style="width: 70%">
|
<el-option v-for="(v, i) in consumableOptions" :key="i" :label="v.consumablesName"
|
:value="v.id"></el-option>
|
</el-select>
|
</div>
|
</div>
|
<div>
|
<div>
|
<span>单价:</span>
|
<el-input v-model="formTwo.unitPrice" placeholder="请输入单价" size="small" style="width: 70%">
|
</el-input>
|
</div>
|
</div>
|
<div>
|
<div>
|
<span>入库数量:</span>
|
<el-input v-model="formTwo.storeNumber" placeholder="请输入入库数量" size="small" style="width: 70%">
|
</el-input>
|
</div>
|
</div>
|
<div>
|
<div>
|
<span>总价:</span>
|
<el-input v-model="formTwo.totalPrice" placeholder="请输入总价" size="small" style="width: 70%">
|
</el-input>
|
</div>
|
</div>
|
<el-button size="mini" type="primary"
|
@click="addTableData">添加
|
</el-button>
|
</div>
|
<el-table :data="consumables" style="margin-top: 10px">
|
<el-table-column label="编号" type="index" width="120px"></el-table-column>
|
<el-table-column label="货号" prop="itemNumber"></el-table-column>
|
<el-table-column label="类别" prop="type"></el-table-column>
|
<el-table-column label="名称" prop="consumablesName"></el-table-column>
|
<el-table-column label="规格" prop="specifications"></el-table-column>
|
<el-table-column label="参考供应商" prop="supplier"></el-table-column>
|
<el-table-column label="计量单位" prop="unit"></el-table-column>
|
<el-table-column label="单价" prop="unitPrice"></el-table-column>
|
<el-table-column label="入库数量" prop="storeNumber"></el-table-column>
|
<el-table-column label="总价" prop="totalPrice"></el-table-column>
|
<el-table-column label="操作" width="80px">
|
<template slot-scope="scope">
|
<el-button size="mini" style="color: #f56c6c" type="text" @click="deleteTableData(scope.$index)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="save">保 存</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { procurementSuppliesList, procurementSuppliesStoreExportExcel } from "../../../assets/api/api";
|
import axios from "axios";
|
import ZTTable from '../../caorui/ZTTable/index.vue';
|
|
export default {
|
computed: {
|
title() {
|
return this.dialogType == "add" ? "新建入库" : "编辑入库";
|
},
|
},
|
props: {
|
contentsId: {
|
type: Number,
|
default: 0
|
}
|
},
|
watch: {
|
|
},
|
data() {
|
return {
|
mutiList: [],
|
consumables: [],
|
users: [],
|
form: {
|
oddNumbers: null,
|
inventory: null,
|
totalAmount: null,
|
storageTime: null,
|
storageUser: null,
|
remark: null,
|
},
|
formTwo: {
|
consumablesName: null,
|
unitPrice: null,
|
storeNumber: null,
|
totalPrice: null,
|
},
|
dialogVisible: false,
|
dialogType: "",
|
upIndex: 0,
|
tableColumn: [
|
{
|
label: '入库单号',
|
prop: 'oddNumbers',
|
minWidth: '100'
|
},
|
{
|
label: '耗材名称',
|
prop: 'consumablesName',
|
minWidth: '100'
|
},
|
{
|
label: '入库数量',
|
prop: 'storeNumber',
|
minWidth: '100'
|
},
|
{
|
label: '入库总价',
|
prop: 'totalPrice',
|
minWidth: '100'
|
},
|
{
|
label: '入库人',
|
prop: 'storageUserName',
|
minWidth: '100'
|
}, {
|
label: '入库日期',
|
prop: 'storageTime',
|
minWidth: '100'
|
}, {
|
label: '说明',
|
prop: 'remark',
|
minWidth: '100'
|
}, {
|
label: '登记人',
|
prop: 'registrantName',
|
minWidth: '160'
|
},{
|
label: '登记日期',
|
prop: 'registrantTime',
|
minWidth: '100'
|
},
|
{
|
dataType: 'action',
|
fixed: 'right',
|
minWidth: '120',
|
label: '操作',
|
operation: [
|
{
|
name: '编辑',
|
type: 'text',
|
clickFun: (row) => {
|
this.addOrUpdateStore('edit', row);
|
},
|
},
|
{
|
name: '删除',
|
type: 'text',
|
color: '#f56c6c',
|
clickFun: (row) => {
|
this.deleteStore(row)
|
},
|
}
|
]
|
}
|
],
|
tableLoading: false,
|
page: {
|
size: 20,
|
current: 1,
|
},
|
total: 0,
|
consumableOptions: [],
|
options: [],
|
storageTableData: [],
|
searchForm: {
|
orderBy: {
|
field: "id",
|
order: "desc",
|
},
|
},
|
};
|
},
|
components: {
|
ZTTable,
|
},
|
mounted() {
|
this.searchList();
|
this.getUserList();
|
this.fetchListOptions()
|
this.selectEnumByCategory()
|
},
|
methods: {
|
// 保存
|
save() {
|
let data = {
|
store: this.form,
|
consumables: this.consumables,
|
};
|
if(this.form.id){
|
// 编辑
|
this.$axios
|
.post(this.$api.procurementSuppliesStore.updateStore, data, {
|
headers: {
|
"Content-Type": "application/json",
|
},
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
this.$message.success("保存成功");
|
this.handleClose();
|
// this.$refs.selectList()
|
this.searchList()
|
}
|
});
|
}else{
|
// 新增
|
this.$axios
|
.post(this.$api.procurementSuppliesStore.addStore, data, {
|
headers: {
|
"Content-Type": "application/json",
|
},
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
this.$message.success("保存成功");
|
this.handleClose();
|
// this.$refs.selectList()
|
this.searchList()
|
}
|
});
|
}
|
},
|
// 获取字典
|
selectEnumByCategory() {
|
this.$axios.post(this.$api.enums.selectEnumByCategory, {
|
category: "耗材类型"
|
}).then(res => {
|
this.options = res.data
|
})
|
},
|
findType(val) {
|
console.log(val)
|
return this.options.find(item => item.value === val).label
|
},
|
// 添加表格数据
|
addTableData() {
|
this.$nextTick()
|
this.consumableOptions.forEach(item => {
|
if (item.id === this.formTwo.id) {
|
this.consumables.push({
|
itemNumber: null,
|
type: this.findType(item.consumablesType),
|
consumablesName: item.consumablesName,
|
specifications: item.specifications,
|
supplier: item.supplierName,
|
unit: item.unit,
|
unitPrice: this.formTwo.unitPrice,
|
storeNumber: this.formTwo.storeNumber,
|
totalPrice: this.formTwo.totalPrice,
|
});
|
}
|
})
|
},
|
deleteTableData(index) {
|
this.consumables.splice(index, 1);
|
},
|
// 打开弹框
|
addOrUpdateStore(type,row) {
|
if (type === 'edit') {
|
this.dialogType = "update";
|
this.$axios.get(this.$api.procurementSuppliesStore.selectStoreById + '?id=' + row.id).then(res => {
|
if (res.code === 201) return
|
this.consumables = res.data.consumables
|
this.form = {...res.data.store}
|
}).catch(err => {
|
console.log('err---', err);
|
})
|
} else {
|
this.dialogType = "add";
|
}
|
this.dialogVisible = true;
|
},
|
// 查询列表
|
searchList () {
|
const entity = this.searchForm
|
const page = this.page
|
this.tableLoading = true
|
this.$axios.post(this.$api.procurementSuppliesStore.storeList, {entity, page}, {
|
headers: {
|
"Content-Type": "application/json"
|
},
|
noQs: true
|
}).then(res => {
|
this.tableLoading = false
|
if (res.code === 201) return
|
this.storageTableData = res.data.body.records
|
this.total = res.data.body.total
|
}).catch(err => {
|
console.log('err---', err);
|
this.tableLoading = false
|
})
|
},
|
// 分页
|
handleSizeChange(val) {
|
this.page.size = val;
|
this.searchList();
|
},
|
handleCurrentChange(val) {
|
this.page.current = val;
|
this.searchList();
|
},
|
// 导出excel
|
async importExcel() {
|
const res = await axios({
|
method: "post",
|
url: `${procurementSuppliesStoreExportExcel}/${this.contentsId}`,
|
responseType: "blob"
|
})
|
const blob = new Blob([res], {type: 'application/octet-stream'});
|
//将Blob 对象转换成字符串
|
let reader = new FileReader();
|
reader.readAsText(blob, 'utf-8');
|
reader.onload = () => {
|
try {
|
let result = JSON.parse(reader.result);
|
if (result.message) {
|
this.$message.error(result.message);
|
} else {
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '耗材入库.xlsx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
} catch (err) {
|
console.log(err);
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '耗材入库.xlsx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
}
|
},
|
handleClose() {
|
this.form = {
|
oddNumbers: null,
|
inventory: null,
|
totalAmount: null,
|
storageTime: null,
|
storageUser: null,
|
remark: null,
|
};
|
this.formTwo = {
|
consumablesName: null,
|
unitPrice: null,
|
storeNumber: null,
|
totalPrice: null,
|
};
|
this.consumables = [];
|
this.dialogVisible = false;
|
},
|
viewIssued(row) {
|
console.log(row);
|
},
|
// 获取所有用户
|
getUserList() {
|
this.$axios
|
.get(this.$api.procurementSuppliesContents.getUserList)
|
.then((res) => {
|
this.users = res.data;
|
});
|
},
|
async fetchListOptions() {
|
const res = await axios({
|
method: 'get',
|
url: `${procurementSuppliesList}`,
|
params: {
|
contentsId: this.contentsId
|
}
|
})
|
if (res.code === 200) {
|
this.consumableOptions = res.data.records
|
}
|
},
|
// 删除
|
deleteStore (row) {
|
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.tableLoading = true
|
this.$axios.get(this.$api.procurementSuppliesStore.deleteStore + '?id=' + row.id + '&consumablesId=' + row.consumablesId).then(res => {
|
this.tableLoading = false
|
if (res.code === 201) return
|
this.$message.success('删除成功')
|
this.searchList()
|
}).catch(err => {
|
this.tableLoading = false
|
console.log('err---', err);
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
>>>.el-dialog {
|
margin: 6vh auto 50px !important;
|
}
|
>>> .el-dialog__body {
|
max-height: 42em;
|
overflow-y: auto;
|
}
|
.input-form {
|
display: flex;
|
margin: 10px 0;
|
}
|
</style>
|
