<template>
|
<div class="app-container">
|
<div class="search">
|
<el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
|
<el-form-item label="委托编号" prop="entrustCode">
|
<el-input v-model="queryParams.entrustCode" clearable placeholder="请输入" size="small"
|
@keyup.enter="refreshTable"></el-input>
|
</el-form-item>
|
<el-form-item label="样品编号" prop="sampleCode">
|
<el-input v-model="queryParams.sampleCode" clearable placeholder="请输入" size="small"
|
@keyup.enter="refreshTable"></el-input>
|
</el-form-item>
|
<el-form-item label="样品名称" prop="sampleName">
|
<el-input v-model="queryParams.sampleName" clearable placeholder="请输入" size="small"
|
@keyup.enter="refreshTable"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="refreshTable">查询</el-button>
|
<el-button size="small" @click="refresh">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="container">
|
<div class="table-tab">
|
<div>
|
<ul class="tab">
|
<li :class="{ active: tabIndex === 0 }" @click="handleTab(0)">待接收</li>
|
<li :class="{ active: tabIndex === 1 }" @click="handleTab(1)">已提交</li>
|
<li :class="{ active: tabIndex === 2 }" @click="handleTab(2)">已拒收</li>
|
<li :class="{ active: tabIndex === 3 }" @click="handleTab(3)">已取消</li>
|
<li :class="{ active: tabIndex === 4 }" @click="handleTab(4)">全部</li>
|
</ul>
|
</div>
|
<div>
|
<el-button size="small" @click="handleExport">导出</el-button>
|
</div>
|
</div>
|
<div class="table">
|
<lims-table :tableData="tableData" :column="column" @pagination="pagination"
|
:height="'calc(100vh - 280px)'" :key="upIndex" :page="page" :tableLoading="tableLoading">
|
<template #inspectionItem="scope">
|
<div style="white-space: pre-line; text-align: left; padding: 4px 0;">{{ scope.row.inspectionItem }}</div>
|
</template>
|
<template #remark="scope">
|
<span>{{ scope.row.status === 2 && scope.row.rejectRemark ? scope.row.rejectRemark : scope.row.remark }}</span>
|
</template>
|
<template #action="scope">
|
<el-button v-if="scope.row.status === 0" link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button v-else link type="primary" @click="handleView(scope.row)">查看</el-button>
|
</template>
|
</lims-table>
|
</div>
|
</div>
|
|
<!-- 编辑/查看弹窗 -->
|
<el-dialog :title="isEdit ? '编辑' : '查看'" v-model="editDialogVisible" width="500px"
|
:close-on-click-modal="false">
|
<el-form ref="editForm" :model="currentInfo" label-width="110px" size="small">
|
<el-form-item label="样品名称">
|
<el-input v-model="currentInfo.sampleName" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="样品编号">
|
<el-input v-model="currentInfo.sampleCode" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="委托编号">
|
<el-input v-model="currentInfo.entrustCode" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="方法标准">
|
<el-input v-model="currentInfo.methodStandard" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="检测项目">
|
<el-input v-model="currentInfo.inspectionItem" type="textarea" :rows="3" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="主检验人" required>
|
<el-select v-model="currentInfo.mainInspectorId" clearable filterable placeholder="请选择" size="small"
|
style="width: 100%;" :disabled="!isEdit">
|
<el-option v-for="(item, i) in personList" :key="i" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="editDialogVisible = false">取 消</el-button>
|
<el-button v-if="isEdit" type="danger" :loading="rejectLoading" @click="openReject">拒收样品</el-button>
|
<el-button v-if="isEdit" type="primary" :loading="submitLoading" @click="handleSubmit">提交检验</el-button>
|
</span></template>
|
</el-dialog>
|
|
<!-- 拒收备注弹窗 -->
|
<el-dialog title="拒收样品" v-model="rejectDialogVisible" width="400px" :close-on-click-modal="false">
|
<el-form ref="rejectForm" :model="rejectInfo" label-width="90px" size="small">
|
<el-form-item label="拒收备注" prop="remark" required>
|
<el-input v-model="rejectInfo.remark" type="textarea" :rows="3" maxlength="500" show-word-limit
|
placeholder="请输入拒收备注"></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="rejectDialogVisible = false">取 消</el-button>
|
<el-button type="danger" :loading="rejectLoading" @click="handleReject">确 定</el-button>
|
</span></template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import limsTable from "@/components/Table/lims-table.vue";
|
import { selectUserCondition } from "@/api/performance/class";
|
import {
|
pageSampleReceipt,
|
submitSampleReceipt,
|
rejectSampleReceipt,
|
exportSampleReceipt
|
} from "@/api/business/sampleReceipt";
|
|
export default {
|
name: 'SampleReceipt',
|
components: {
|
limsTable,
|
},
|
data() {
|
return {
|
tabIndex: 0,
|
tabList: [
|
{ label: '待接收', value: 0 },
|
{ label: '已提交', value: 1 },
|
{ label: '已拒收', value: 2 },
|
{ label: '已取消', value: 3 },
|
{ label: '全部', value: null },
|
],
|
queryParams: {
|
entrustCode: '',
|
sampleCode: '',
|
sampleName: '',
|
},
|
tableLoading: false,
|
upIndex: 0,
|
tableData: [],
|
page: {
|
total: 0,
|
size: 10,
|
current: 1,
|
},
|
column: [
|
{ label: '样品名称', prop: 'sampleName' },
|
{ label: '样品编号', prop: 'sampleCode' },
|
{ label: '检测项目', prop: 'inspectionItem', dataType: 'slot', slot: 'inspectionItem', width: '220px' },
|
{ label: '委托编号', prop: 'entrustCode' },
|
{ label: '方法标准', prop: 'methodStandard' },
|
{ label: '主检人签字', prop: 'mainInspectorName' },
|
{ label: '备注', prop: 'remark', dataType: 'slot', slot: 'remark', width: '180px' },
|
{ label: '操作', dataType: 'slot', slot: 'action', width: '120px' },
|
],
|
personList: [],
|
editDialogVisible: false,
|
rejectDialogVisible: false,
|
isEdit: true,
|
currentInfo: {},
|
rejectInfo: {},
|
submitLoading: false,
|
rejectLoading: false,
|
};
|
},
|
mounted() {
|
this.getPersonList();
|
this.getList();
|
},
|
methods: {
|
getPersonList() {
|
selectUserCondition({ type: 1 }).then(res => {
|
this.personList = (res.data || []).map(a => ({ label: a.name, value: a.id }));
|
}).catch(err => { });
|
},
|
handleTab(i) {
|
this.tabIndex = i;
|
this.refreshTable();
|
},
|
refresh() {
|
this.queryParams = { entrustCode: '', sampleCode: '', sampleName: '' };
|
this.page.current = 1;
|
this.getList();
|
},
|
refreshTable() {
|
this.page.current = 1;
|
this.getList();
|
},
|
getList() {
|
this.tableLoading = true;
|
let param = { ...this.queryParams, ...this.page };
|
let status = this.tabList[this.tabIndex].value;
|
if (status !== null && status !== undefined) {
|
param.status = status;
|
}
|
delete param.total;
|
pageSampleReceipt(param).then(res => {
|
this.tableLoading = false;
|
if (res.code === 200) {
|
this.tableData = res.data.records;
|
this.page.total = res.data.total;
|
this.upIndex++;
|
}
|
}).catch(err => {
|
this.tableLoading = false;
|
});
|
},
|
pagination({ page, limit }) {
|
this.page.current = page;
|
this.page.size = limit;
|
this.getList();
|
},
|
handleEdit(row) {
|
this.isEdit = true;
|
this.currentInfo = { ...row, mainInspectorId: row.mainInspectorId || null };
|
this.editDialogVisible = true;
|
},
|
handleView(row) {
|
this.isEdit = false;
|
this.currentInfo = { ...row, mainInspectorId: row.mainInspectorId || null };
|
this.editDialogVisible = true;
|
},
|
handleSubmit() {
|
if (!this.currentInfo.mainInspectorId) {
|
this.$message.error('请选择主检验人');
|
return;
|
}
|
this.$confirm('确认将该样品提交至检验任务？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
this.submitLoading = true;
|
submitSampleReceipt({
|
receiptId: this.currentInfo.receiptId,
|
mainInspectorId: this.currentInfo.mainInspectorId,
|
}).then(res => {
|
this.submitLoading = false;
|
this.editDialogVisible = false;
|
this.$message.success('提交成功');
|
this.refreshTable();
|
}).catch(err => {
|
this.submitLoading = false;
|
});
|
}).catch(() => { });
|
},
|
openReject() {
|
this.rejectInfo = { remark: '' };
|
this.rejectDialogVisible = true;
|
},
|
handleReject() {
|
if (!this.rejectInfo.remark || !this.rejectInfo.remark.trim()) {
|
this.$message.error('请填写拒收备注');
|
return;
|
}
|
this.$confirm('拒收后委托将作废且不能进入检验任务，是否继续？', '警告', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
this.rejectLoading = true;
|
rejectSampleReceipt({
|
receiptId: this.currentInfo.receiptId,
|
remark: this.rejectInfo.remark,
|
}).then(res => {
|
this.rejectLoading = false;
|
this.rejectDialogVisible = false;
|
this.editDialogVisible = false;
|
this.$message.success('拒收成功');
|
this.refreshTable();
|
}).catch(err => {
|
this.rejectLoading = false;
|
});
|
}).catch(() => { });
|
},
|
handleExport() {
|
let param = { ...this.queryParams };
|
let status = this.tabList[this.tabIndex].value;
|
if (status !== null && status !== undefined) {
|
param.status = status;
|
}
|
exportSampleReceipt(param).then(res => {
|
const blob = new Blob([res], { type: 'application/octet-stream' });
|
this.$download.saveAs(blob, '样品接收导出.xlsx');
|
}).catch(err => {
|
console.log('err---', err);
|
});
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.table-tab {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.tab {
|
list-style-type: none;
|
display: flex;
|
margin-bottom: 12px;
|
margin-top: 0;
|
padding-left: 0;
|
}
|
|
.tab li {
|
line-height: 24px;
|
padding: 6px 14px;
|
font-size: 14px;
|
color: var(--lims-text);
|
border: 1px solid var(--lims-divider);
|
cursor: pointer;
|
}
|
|
.tab li:nth-child(1) {
|
border-radius: 8px 0 0 8px;
|
}
|
|
.tab li:nth-child(5) {
|
border-radius: 0 8px 8px 0;
|
}
|
|
.tab li.active {
|
border-color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
}
|
</style>
|
