<template>
|
<div>
|
<TableCard :showTitle="false">
|
<template slot="form">
|
<div class="action-box">
|
<div></div>
|
<div class="flex">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog(undefined)">
|
新建
|
</el-button>
|
<el-button icon="el-icon-upload2" size="small" @click="exportExcel">
|
导出Excel
|
</el-button>
|
</div>
|
</div>
|
</template>
|
<template v-slot:table>
|
<ZTTable
|
:column="columns"
|
:currentChange="rowClick"
|
:height="'25vh'"
|
:highlightCurrentRow="true"
|
:isSelection="false"
|
:rowStyle="tableRowStyle"
|
:table-data="tableData"
|
rowKey="id"
|
style="margin-top: 18px; padding: 0 15px;"
|
>
|
<template v-slot:consumablesTypeSlot="{row}">
|
{{ findType(row.consumablesType) }}
|
</template>
|
<template v-slot:operation="scope">
|
<el-button size="small" type="text" @click="showDialog(scope.row)">编辑</el-button>
|
<el-button size="small" style="color: #f56c6c" type="text" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</ZTTable>
|
<div class="pagination">
|
<div></div>
|
<el-pagination
|
:page-size="pagination.pageSize"
|
:page-sizes="[10, 20, 30, 40]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@current-change="handleCurrent"
|
@size-change="handleSize"
|
>
|
</el-pagination>
|
</div>
|
</template>
|
</TableCard>
|
<el-divider></el-divider>
|
<div>
|
<ConsumableProject ref="consumableProject" @submit="fetchData"></ConsumableProject>
|
</div>
|
<Edit ref="editRef" :contentsId="contentsId" @submit="fetchData"/>
|
</div>
|
</template>
|
|
<script>
|
import TableCard from '@/components/caorui/TableCard/index.vue';
|
import ZTTable from '@/components/caorui/ZTTable/index.vue';
|
import Edit from "./components/Edit.vue"
|
import axios from "axios";
|
import {
|
addProcurementSuppliesList,
|
deleteProcurementSuppliesList,
|
procurementSuppliesList,
|
procurementSuppliesListExport
|
} from "@/assets/api/api";
|
import ConsumableProject from "@/components/do/a6.service-and-supply-purchase/ConsumableProject.vue"
|
|
export default {
|
components: {
|
TableCard, ZTTable, Edit, ConsumableProject
|
},
|
props: {
|
contentsId: {
|
type: Number,
|
required: true,
|
}
|
},
|
watch: {
|
contentsId(newVal, oldVal) {
|
if (newVal !== 0) {
|
this.fetchData()
|
}
|
}
|
},
|
data() {
|
return {
|
columns: [
|
{
|
label: "货号",
|
prop: "itemNumber"
|
},
|
{
|
label: "类别",
|
prop: "consumablesType",
|
dataType: "slot",
|
slot: "consumablesTypeSlot"
|
},
|
{
|
label: "名称",
|
prop: "consumablesName"
|
},
|
{
|
label: "规格",
|
prop: "specifications"
|
},
|
{
|
label: "参考供应商",
|
prop: "supplierName"
|
},
|
{
|
label: "库存下限",
|
prop: "lowerLimit"
|
},
|
{
|
label: "当前库存",
|
prop: "currentAmount"
|
},
|
{
|
label: "计量单位",
|
prop: "unit"
|
},
|
{
|
label: "备注",
|
prop: "remark"
|
},
|
{
|
label: "负责人",
|
prop: "personInChargeName"
|
},
|
{
|
label: "最近更新人",
|
prop: "updateUserName"
|
},
|
{
|
label: "最近更新日期",
|
prop: "updateTime"
|
},
|
{
|
fixed: 'right',
|
label: "操作",
|
width: 120,
|
dataType: "slot",
|
slot: "operation"
|
}
|
],
|
tableData: [],
|
pagination: {
|
current: 1,
|
pageSize: 20,
|
total: 0
|
},
|
options: [],
|
}
|
},
|
mounted() {
|
this.fetchData()
|
this.selectEnumByCategory()
|
},
|
methods: {
|
async fetchData() {
|
const res = await axios({
|
method: 'get',
|
url: `${procurementSuppliesList}`,
|
params: {
|
// page: this.pagination.current,
|
// pageSize: this.pagination.pageSize,
|
contentsId: this.contentsId
|
}
|
})
|
if (res.code === 200) {
|
this.tableData = res.data.records
|
if (this.tableData.length > 0) {
|
this.rowClick(this.tableData[0])
|
}
|
}
|
},
|
// 获取字典
|
async selectEnumByCategory() {
|
await this.$axios.post(this.$api.enums.selectEnumByCategory, {
|
category: "耗材类型"
|
}).then(res => {
|
this.options = res.data
|
})
|
},
|
findType(val) {
|
this.$nextTick()
|
let res
|
const e = this.options.find(item => item.value == val)
|
if(e) {
|
res = e.label
|
} else {
|
res = '-'
|
}
|
return res
|
},
|
showDialog(row) {
|
this.$refs.editRef.openDialog(row);
|
},
|
async exportExcel() {
|
const res = await axios({
|
method: "post",
|
url: `${procurementSuppliesListExport}/${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('导出成功')
|
}
|
}
|
},
|
handleCurrent() {
|
},
|
handleSize() {
|
},
|
handleDelete(row) {
|
this.$axios.post(deleteProcurementSuppliesList, row, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if (res.code === 200) {
|
this.$message.success('删除成功')
|
this.fetchData()
|
}
|
})
|
},
|
rowClick(row) {
|
this.$refs.consumableProject.fetchListId(row)
|
},
|
tableRowStyle({row}) {
|
if(row.currentAmount <= row.lowerLimit) {
|
return { background: '#ffcaca' }
|
} else {
|
return {}
|
}
|
}
|
}
|
}
|
</script>
|
|
|
<style scoped>
|
.flex {
|
display: flex;
|
}
|
|
.action-box {
|
width: 100%;
|
padding-top: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.pagination {
|
padding-top: 15px;
|
padding-right: 10px;
|
display: flex;
|
justify-content: space-between
|
}
|
</style>
|
