<template>
|
<div>
|
<TableCard :showTitle="false">
|
<template slot="form">
|
<div class="action-box">
|
<div></div>
|
<div class="flex">
|
<el-button :disabled="contentsId == 0" icon="el-icon-plus" type="primary" @click="showDialog()">
|
新建
|
</el-button>
|
<el-button icon="el-icon-upload2" @click="exportExcel">
|
导出Excel
|
</el-button>
|
</div>
|
</div>
|
</template>
|
<template v-slot:table>
|
<ZTTable
|
:column="columns"
|
:height="'70vh'"
|
:isSelection="true"
|
:table-data="tableData"
|
style="margin-top: 18px; padding: 0 15px;"
|
>
|
<div slot="action" slot-scope="scope">
|
<el-button type="text" @click="showDialog(scope)">编辑</el-button>
|
<el-button type="text" @click="delRow(scope)">
|
<span style="color: #F56C6C">删除</span>
|
</el-button>
|
</div>
|
</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>
|
<Edit ref="editRef" :contentsId="contentsId" @submit="getTableData" type="编辑" />
|
</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 { selectQualifiedSupplierManagementPage, delSupplierManagement, exportSupplierManagement } from "@/assets/api/api";
|
import axios from "axios";
|
|
export default {
|
components: {
|
TableCard, ZTTable, Edit
|
},
|
props: {
|
contentsId: {
|
type: Number,
|
default: 0
|
}
|
},
|
data() {
|
return {
|
columns: [
|
{
|
label: "供应商编号",
|
prop: "supplierRef"
|
},
|
{
|
label: "供应商",
|
prop: "supplierName"
|
},
|
{
|
label: "供应物品(服务)名称",
|
prop: "supplierItemServiceName"
|
},
|
{
|
label: "地址",
|
prop: "adress"
|
},
|
{
|
label: "联系电话",
|
prop: "phone"
|
},
|
{
|
fixed: "right",
|
dataType: "slot",
|
slot: "action",
|
label: "操作"
|
}
|
],
|
tableData: [],
|
pagination: {
|
current: 1,
|
pageSize: 20,
|
total: 0
|
},
|
}
|
},
|
mounted() {
|
this.getTableData()
|
},
|
watch: {
|
contentsId(newVal) {
|
if (newVal !== 0) {
|
this.getTableData();
|
}
|
},
|
},
|
methods: {
|
// 获取表格数据
|
async getTableData() {
|
const {code, data } = await axios({
|
method: 'get',
|
url: selectQualifiedSupplierManagementPage,
|
params: {
|
...this.pagination,
|
parentId: this.contentsId
|
}
|
})
|
if(code == 200) {
|
this.tableData = data.records;
|
}
|
},
|
showDialog(scope) {
|
this.$refs.editRef.openDialog(scope)
|
},
|
handleCurrent(val) {
|
this.pagination.current = val;
|
this.getTableData()
|
},
|
handleSize(size) {
|
this.pagination.pageSize = size;
|
this.getTableData()
|
},
|
// 删除数据
|
delRow(scope) {
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then( async () => {
|
const { code } = await axios({
|
method: 'post',
|
url: `${delSupplierManagement}/${scope.row.supplierManagementId}`,
|
})
|
if(code == 200) {
|
this.$message.success('删除成功')
|
this.getTableData()
|
} else {
|
this.$message.error('删除失败')
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
})
|
},
|
async exportExcel() {
|
const res = await axios({
|
method: "post",
|
url: `${exportSupplierManagement}/${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('导出成功')
|
}
|
}
|
}
|
}
|
}
|
</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>
|
