<template>
|
<div>
|
<div class="view-title">
|
<span>标准物质验收</span>
|
</div>
|
<div class="search">
|
<el-form :inline="true" :model="form" size="small">
|
<el-form-item label="物质名称">
|
<el-input v-model="form.search"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="reset">重 置</el-button>
|
<el-button type="primary" @click="getTableData">查 询</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button type="primary" icon="el-icon-plus" size="small" @click="openDialog">
|
添加验收
|
</el-button>
|
<el-button type="primary" size="small" @click="exportExcel">导出</el-button>
|
</div>
|
</div>
|
<div class="tables">
|
<ZTTable
|
:column="columns"
|
:table-data="tableData"
|
>
|
<template slot="action" slot-scope="{ row }">
|
<el-button type="text" @click="edit(row)">编辑</el-button>
|
</template>
|
</ZTTable>
|
<div class="pagination">
|
<div></div>
|
<el-pagination
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pagination.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pagination.total"
|
@current-change="handleCurrent"
|
@size-change="handleSize"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
<AddRecord ref="addRecordRef" @submit="submit"></AddRecord>
|
</div>
|
</template>
|
|
<script>
|
import axios from "axios";
|
import { getPageAcceptance, addAcceptance, updateAcceptance, getAcceptanceDetails, exportAcceptance } from "@/assets/api/api";
|
import ZTTable from '@/components/caorui/ZTTable/index.vue';
|
import AddRecord from './components/AddRecord.vue';
|
|
export default {
|
components: {
|
ZTTable, AddRecord
|
},
|
data() {
|
return {
|
form: {
|
search: undefined
|
},
|
columns: [
|
{
|
label: "出场编号",
|
prop: "factoryNum"
|
},
|
{
|
label: "有效期",
|
prop: "effectiveDate"
|
},
|
{
|
label: "生产厂家",
|
prop: "factoryManufacturer"
|
},
|
{
|
label: "文档编号",
|
prop: "fileNum"
|
},
|
{
|
label: "标准物质名称",
|
prop: "name"
|
},
|
{
|
label: "规格型号",
|
prop: "model"
|
},
|
{
|
label: "管理编号",
|
prop: "manageNum"
|
},
|
{
|
label: "存放位置",
|
prop: "position"
|
},
|
// {
|
// label: "序列号",
|
// prop: "manageNum"
|
// },
|
{
|
label: "提交日期",
|
prop: "acquisitionDate"
|
},
|
{
|
label: "数量",
|
prop: "quantity"
|
},
|
{
|
fixed: "right",
|
label: "操作",
|
align: "center",
|
dataType: "slot",
|
slot: "action",
|
},
|
],
|
tableData: [],
|
pagination: {
|
current: 1,
|
pageSize: 20,
|
total: 0
|
},
|
}
|
},
|
mounted() {
|
this.getTableData()
|
},
|
methods: {
|
async getTableData() {
|
const { code, data } = await axios({
|
method: 'get',
|
url: getPageAcceptance,
|
params: {
|
name: this.form.search
|
}
|
})
|
if(code == 200) {
|
this.tableData = data.records;
|
}
|
},
|
handleCurrent(val) {
|
this.pagination.current = val;
|
this.getTableData()
|
},
|
handleSize(size) {
|
this.pagination.pageSize = size;
|
this.getTableData()
|
},
|
openDialog() {
|
this.$refs.addRecordRef.openDialog()
|
},
|
async submit(form) {
|
const {code} = await axios({
|
method: 'post',
|
url: form.acceptance.id ? updateAcceptance:addAcceptance,
|
data: form,
|
noQs: true
|
})
|
if(code == 200) {
|
this.$message.success(`${form.acceptance.id ? '编辑':'添加'}成功`)
|
this.getTableData()
|
}
|
},
|
async edit(row) {
|
const res = await this.getDetail(row.id)
|
this.$refs.addRecordRef.openDialog({
|
acceptance: res.acceptance,
|
list: res.list
|
})
|
},
|
async getDetail(id) {
|
const { code, data } = await axios({
|
method: 'get',
|
url: getAcceptanceDetails,
|
params: { id }
|
})
|
if(code == 200) {
|
return data;
|
}
|
},
|
reset() {
|
this.form.search = undefined
|
this.getTableData()
|
},
|
async exportExcel() {
|
const res = await axios({
|
method: "get",
|
url: `${exportAcceptance}`,
|
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>
|
.view-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 60px;
|
padding-left: 20px;
|
}
|
.search {
|
display: flex;
|
justify-content: space-between;
|
padding: 20px 20px 0 20px;
|
background: #fff;
|
border-radius: 5px;
|
}
|
.tables {
|
margin-top: 20px;
|
padding: 18px;
|
background: #fff;
|
border-radius: 5px;
|
}
|
.pagination {
|
padding-top: 15px;
|
padding-right: 10px;
|
display: flex;
|
justify-content: space-between
|
}
|
</style>
|
