<template>
|
<div class="flex_column">
|
<div>
|
<TableCard :showTitle="false">
|
<template v-slot:form>
|
<div class="items_center">
|
<!-- <span>关键字</span>
|
<el-input size="small" class="search" v-model="superviseForm.searchVal" placeholder="请输入"></el-input>
|
<el-button type="primary" size="small">查询</el-button> -->
|
<el-button v-if="multipleSelection.length > 0" slot="reference" size="small" type="danger"
|
@click="delRecords">删除</el-button>
|
</div>
|
<div>
|
<el-button size="small" type="primary" @click="addRecord">新增</el-button>
|
</div>
|
</template>
|
<template v-slot:table>
|
<ZTTable
|
:column="superviseColumnData"
|
:handleSelectionChange="handleSelectionChange"
|
:height="'calc(100vh - 19em)'"
|
:isSelection="true"
|
:table-data="superviseTableData"
|
:table-loading="superviseLoading"
|
rowKey="id"
|
style="margin-top: 18px; padding: 0 15px;"
|
>
|
<div slot="action" slot-scope="scope">
|
<el-button type="text" @click="openDownloadDia(scope.row)">
|
<span>导出</span>
|
</el-button>
|
<el-button type="text" @click="openRecord(scope.row)">
|
<span>监督记录</span>
|
</el-button>
|
<el-button type="text" @click="openControl(scope.row.id)">
|
<span :style="renderBtn(scope.row.currentStateControl)">控制单</span>
|
</el-button>
|
<el-button type="text" @click="openDispose(scope.row.id)">
|
<span :style="renderBtn(scope.row.currentStateProcessing)">处理单</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="currentChange" @size-change="sizeChange">
|
</el-pagination>
|
</div>
|
</template>
|
</TableCard>
|
</div>
|
<RecordAdd ref="recordModal" @submit="getTableData"></RecordAdd>
|
<ControlModal ref="controlModal"></ControlModal>
|
<DisposeModal ref="disposeModal"></DisposeModal>
|
<el-dialog :visible.sync="downloadDialog" title="导出" width="600px">
|
<span>
|
<el-button :disabled="!download.currentStateControl" plain type="primary" @click="controlDown">控制单导出</el-button>
|
<el-button :disabled="!download.currentStateProcessing" plain type="primary" @click="processingDown">处理单导出</el-button>
|
<el-button plain type="primary" @click="supervisoryDown">监督记录导出</el-button>
|
</span>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="downloadDialog = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import TableCard from "../../../TableCard/index"
|
import RecordAdd from "./Add.vue"
|
import ZTTable from "../../../ZTTable/index.vue"
|
import ControlModal from "./control/index.vue"
|
import DisposeModal from "./dispose/index.vue"
|
import {
|
personSupervisionRecordPage,
|
deletePersonSupervisionRecord,
|
personSupervisionProcessingPage,
|
exportSupervisionControlSheet,
|
exportSupervisionProcessingSheet,
|
exportPersonSupervisionRecord
|
} from "../../../../../assets/api/api"
|
|
export default {
|
props: {
|
isDepartment: {
|
type: Boolean,
|
default: false
|
},
|
departId: {
|
type: Number,
|
default: () => {
|
return null;
|
}
|
},
|
},
|
components: {
|
TableCard,
|
RecordAdd,
|
ZTTable,
|
ControlModal,
|
DisposeModal
|
},
|
data() {
|
return {
|
loading: false,
|
pagination: {
|
current: 1,
|
pageSize: 20,
|
total: 0
|
},
|
// 监督记录
|
superviseForm: {
|
searchVal: undefined
|
},
|
superviseColumnData: [
|
// {
|
// label: 'id',
|
// prop: 'id'
|
// },
|
{
|
label: '检测人员',
|
prop: 'testerName',
|
width: 120
|
}, {
|
label: '监督人员',
|
prop: 'supervisorName',
|
width: 120
|
}, {
|
label: '检验项目',
|
prop: 'testItem',
|
width: 120
|
}, {
|
label: '样品编号',
|
prop: 'sampleNumber',
|
width: 120
|
}, {
|
label: '检验日期',
|
prop: 'detectionDate',
|
width: 160
|
}, {
|
label: '控制单状态',
|
prop: 'currentStateControl',
|
formatData: (item) => {
|
let result = undefined
|
switch (item) {
|
case '0':
|
result = '工作情况'
|
break;
|
case '1':
|
result = '被监督人确认'
|
break;
|
case '2':
|
result = '处理措施'
|
break;
|
case '3':
|
result = '纠正措施'
|
break;
|
case '4':
|
result = '通知客户'
|
break;
|
}
|
return result
|
},
|
width: 140,
|
}, {
|
label: '流程单状态',
|
prop: 'currentStateProcessing',
|
formatData: (item) => {
|
let result = undefined
|
switch (item) {
|
case '0':
|
result = '问题描述'
|
break;
|
case '1':
|
result = '原因分析'
|
break;
|
case '2':
|
result = '纠正措施'
|
break;
|
case '3':
|
result = '验证结果'
|
break;
|
}
|
return result
|
},
|
width: 140,
|
}, {
|
label: '人员',
|
prop: 'personnelName',
|
width: 150
|
}, {
|
label: '设备仪器',
|
prop: 'instrumentEquipment',
|
width: 140
|
}, {
|
label: '工作环境',
|
prop: 'workingEnvironment',
|
width: 140
|
}, {
|
label: '样品采集',
|
prop: 'sampleCollection',
|
width: 140
|
}, {
|
label: '样品的准备',
|
prop: 'samplePreparation',
|
width: 140
|
}, {
|
label: '检验方法',
|
prop: 'testMethod',
|
width: 120
|
}, {
|
label: '检测记录',
|
prop: 'testingRecords',
|
width: 120
|
}, {
|
label: '检验报告',
|
prop: 'testReport',
|
width: 120
|
}, {
|
label: '监督情况评价',
|
prop: 'evaluationSupervisionSituation',
|
width: 140
|
}, {
|
label: '不符合处理意见',
|
prop: 'doNotMeetTheHandlingOpinions',
|
width: 140
|
}, {
|
fixed: 'right',
|
dataType: "slot",
|
width: 280,
|
label: '操作',
|
slot: 'action',
|
}
|
],
|
superviseTableData: [],
|
superviseLoading: false,
|
multipleSelection: [],
|
downloadDialog: false,
|
download: {
|
currentStateControl: '',
|
currentStateProcessing: '',
|
},
|
downloadId: '',
|
}
|
},
|
mounted() {
|
this.getTableData()
|
},
|
methods: {
|
/**
|
* @desc 获取树的人员id
|
*/
|
getDepart() {
|
this.getTableData()
|
},
|
/**
|
* @desc 当前页改变
|
*/
|
currentChange(current) {
|
this.pagination.current = current
|
this.getTableData()
|
},
|
/**
|
* @desc 每页个数改变
|
*/
|
sizeChange(pageSize) {
|
this.pagination.pageSize = pageSize
|
this.getTableData()
|
},
|
// 获取监督记录
|
async getTableData() {
|
this.loading = true
|
const { code, data } = await this.$axios({
|
method: 'get',
|
url: personSupervisionRecordPage,
|
params: {
|
departLimsId: this.isDepartment ? this.departId : null,
|
userId: this.isDepartment ? null : this.departId,
|
current: this.pagination.current,
|
size: this.pagination.pageSize
|
}
|
})
|
if (code == 200) {
|
this.superviseTableData = data.records
|
this.pagination.total = data.total
|
}
|
this.loading = false
|
},
|
// 新增监督记录
|
addRecord(row, type = false) {
|
this.$refs.recordModal.openDialog({ departId: this.departId, ...row }, type)
|
},
|
openRecord(row) {
|
this.$refs.recordModal.openDialog(row, true)
|
},
|
// 打开导出弹框
|
openDownloadDia(row) {
|
this.downloadDialog = true
|
this.download = row
|
this.downloadId = row.id
|
},
|
// 控制单导出
|
controlDown() {
|
this.$axios.get(exportSupervisionControlSheet + '?supervisionRecordId=' + this.downloadId, { responseType: "blob" }).then(res => {
|
this.outLoading = false
|
const blob = new Blob([res], { type: 'application/msword' });
|
//将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 = '控制单导出' + '.docx';
|
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 = '控制单导出' + '.docx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
}
|
})
|
},
|
// 处理单导出
|
processingDown() {
|
this.$axios.get(exportSupervisionProcessingSheet + '?supervisionRecordId=' + this.downloadId, { responseType: "blob" }).then(res => {
|
this.outLoading = false
|
const blob = new Blob([res], { type: 'application/msword' });
|
//将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 = '处理单导出' + '.docx';
|
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 = '处理单导出' + '.docx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
}
|
})
|
},
|
// 监督记录导出
|
supervisoryDown() {
|
this.$axios.get(exportPersonSupervisionRecord + '?id=' + this.downloadId, { responseType: "blob" }).then(res => {
|
this.outLoading = false
|
const blob = new Blob([res], { type: 'application/msword' });
|
//将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 = '监督记录导出' + '.docx';
|
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 = '监督记录导出' + '.docx';
|
link.click();
|
this.$message.success('导出成功')
|
}
|
}
|
})
|
},
|
// 显示控制单
|
openControl(id) {
|
this.$refs.controlModal.openDialog(id)
|
},
|
// 显示处理单
|
openDispose(id) {
|
this.$refs.disposeModal.openDialog(id)
|
},
|
// 表格多选激活后做什么
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
},
|
/**
|
* @desc 批量删除监督记录
|
*/
|
delRecords() {
|
this.$confirm(
|
'此操作将删除选中数据, 是否继续?',
|
'提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
console.log(this.multipleSelection)
|
let ids = this.multipleSelection.map((item) => item.id)
|
const code = this.delTableData(ids)
|
this.$message({
|
type: code == 200 ? 'success' : 'error',
|
message: code == 200 ? '删除成功！' : '删除失败！'
|
});
|
this.getTableData()
|
})
|
},
|
// 删除api
|
async delTableData(ids) {
|
const { code } = await this.$axios({
|
method: 'delete',
|
url: deletePersonSupervisionRecord,
|
data: ids
|
})
|
return code
|
},
|
// 行背景色
|
renderBtn(currentState) {
|
let status = Number(currentState)
|
let res = {}
|
switch (status) {
|
case 0:
|
break;
|
case 1:
|
res = {color: '#337ecc'}
|
break;
|
case 2:
|
res = {color: '#409EFF'}
|
break;
|
case 3:
|
res = {color: '#79bbff'}
|
break;
|
case 4:
|
res = {color: '#a0cfff'}
|
break;
|
}
|
return res;
|
}
|
},
|
watch: {
|
// 监听点击el-tree的数据，进行数据刷新
|
departId: {
|
handler(newId, oldId) {
|
if (this.isDepartment) {
|
this.getTableData();
|
} else {
|
this.getTableData()
|
}
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.flex_column {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: space-between
|
}
|
|
.items_center {
|
display: flex;
|
align-items: center;
|
}
|
|
.date_box {
|
margin: 0 5px;
|
}
|
|
.search {
|
width: 150px;
|
padding: 0 16px;
|
}
|
</style>
|
