<template>
|
<div class="add_commision">
|
<div class="content-main">
|
<div class="firstBox">
|
<div class="printCommision" >
|
<table height="30px" id="printCommision">
|
<tr>
|
<td colspan="8">
|
<img :src="imgSrc" style="position: absolute;left: 50px;top:26px">
|
<h1 style="display: inline;">委托检验申请单</h1>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="2">委托编号</td>
|
<td colspan="2">{{infoForm.commisioncode}}</td>
|
<td colspan="2">委托单位</td>
|
<td colspan="2">{{infoForm.department}}</td>
|
</tr>
|
<tr>
|
<td colspan="2">联系人</td>
|
<td colspan="2">{{infoForm.contacter}}</td>
|
<td colspan="2">联系电话</td>
|
<td colspan="2">{{infoForm.tel}}</td>
|
</tr>
|
<tr>
|
<td colspan="2">联系地址</td>
|
<td colspan="2">{{infoForm.address}}</td>
|
<td colspan="2">完成期限</td>
|
<td colspan="2">{{infoForm.deadline}}</td>
|
</tr>
|
<tr>
|
<td colspan="2">送样时间</td>
|
<td colspan="2">{{infoForm.time}}</td>
|
<td colspan="2">送样人</td>
|
<td colspan="2">{{infoForm.sender}}</td>
|
</tr>
|
<tr>
|
<td colspan="2">送样人电话</td>
|
<td colspan="2">{{infoForm.sendertel}}</td>
|
<td colspan="2">报告数量</td>
|
<td colspan="2">{{infoForm.num}}</td>
|
</tr>
|
<tr>
|
<td colspan="2">送样方式</td>
|
<td colspan="6">
|
<ul>
|
<li>
|
<i :class="`${infoForm.way == 1 ? 'el-icon-success' : 'el-icon-circle-check'}`"></i> 送样
|
</li>
|
<li>
|
<i :class="`${infoForm.way == 2 ? 'el-icon-success' : 'el-icon-circle-check'}`"></i> 上门
|
</li>
|
</ul>
|
</td>
|
</tr>
|
<tbody colspan="8" v-for="(item,index) in sampleNameList" :key="index">
|
<tr>
|
<td colspan="2">样品</td>
|
<td colspan="2">{{item}}</td>
|
<td colspan="2">评定标准</td>
|
<td colspan="2">{{standardList[index]}}</td>
|
</tr>
|
<tr>
|
<td colspan="2">试验项目</td>
|
<td colspan="6">
|
<p style="text-align:left;margin-left:20px" v-for="(data,index) in testProjectList[index]" :key="index">
|
{{index+1 + "、" + data}}
|
</p>
|
</td>
|
</tr>
|
</tbody>
|
<tr>
|
<td colspan="2">备注</td>
|
<td colspan="6">{{infoForm.other}}</td>
|
</tr>
|
</table>
|
</div>
|
<div class="title">委托信息</div>
|
<div class="tableBox">
|
<div class="tableBox-header">
|
<el-button class="split" @click="dialogueFormVisible = true" type="primary" size="small"
|
style="background-color: rgb(1, 102, 226);">添加样品</el-button>
|
<!-- <el-input
|
v-model="searchData"
|
class="input-form split"
|
placeholder="扫描二维码录入样品..."
|
prefix-icon="el-icon-search"
|
style="width: 200px;"
|
>
|
</el-input>-->
|
</div>
|
<el-table ref="detectionInfo" :max-height="800" :cell-style="{textAlign: 'center'}"
|
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
|
:data="detectionInfo" style="width: 100%;margin-bottom: 20px;">
|
<el-table-column type="index" label="序号" min-width="10%" />
|
<el-table-column prop="sampleNumber" label="样品编号" min-width="8%" />
|
<el-table-column prop="sampleName" label="样品名称" min-width="10%" />
|
<el-table-column prop="speName" label="规格型号" min-width="10%">
|
</el-table-column>
|
<el-table-column prop="unit" label="单位" min-width="8%" />
|
<el-table-column prop="samplesNumber" label="数量" min-width="8%" />
|
<!-- <el-table-column prop="addway" label="添加方式" min-width="8%">
|
<template slot-scope="scope">
|
<div v-if="scope.row.addway === 0">
|
<el-tag type="success" disable-transitions>扫描</el-tag>
|
</div>
|
<div v-if="scope.row.addway === 1">
|
<el-tag type="primary" disable-transitions>录入</el-tag>
|
</div>
|
<div v-else></div>
|
</template>
|
</el-table-column> -->
|
<el-table-column prop="remarks" label="备注" min-width="8%" />
|
<el-table-column label="操作" min-width="8%">
|
<template slot-scope="scope">
|
<el-button type="text" size="small"
|
@click.native.prevent="deleteRow(scope.$index, detectionInfo)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="secondBox">
|
<el-row class="header">
|
<el-col :span="12" style="font-size: 16px;margin-bottom: 5px;">基本信息</el-col>
|
<el-col :span="12" style="text-align: right;">
|
</el-col>
|
</el-row>
|
<el-form :model="infoForm" ref="infoForm" class="infoForm" label-position="right" label-width="100px"
|
size="mini">
|
<div class="formwrapper">
|
<el-row :gutter="200">
|
<el-col :span="5">
|
<el-form-item label="委托编号：">
|
<el-input style="width: 200px" type="text" :value="infoForm.commisioncode" readonly disabled
|
autocomplete="off" size="small" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="委托单位：">
|
<el-input style="width: 200px" v-model="infoForm.department" placeholder="请输入委托单位" size="small" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="联系人：">
|
<el-input style="width: 200px" v-model="infoForm.contacter" placeholder="请输入委托单位" size="small" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="联系电话：">
|
<el-input style="width: 200px" v-model="infoForm.tel" placeholder="请输入联系电话" size="small" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="200">
|
<el-col :span="5">
|
<el-form-item label="联系地址：">
|
<el-input style="width: 200px;" v-model="infoForm.address" placeholder="请输入联系地址" autocomplete="off"
|
size="small" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="完成期限：">
|
<el-date-picker value-format="yyyy-MM-dd" v-model="infoForm.deadline" type="date" placeholder="选择日期" style="width: 200px;"
|
size="small">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="送样时间：">
|
<el-date-picker value-format="yyyy-MM-dd" v-model="infoForm.time" type="date" placeholder="选择日期" style="width: 200px;">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="送样方式：">
|
<el-select style="width: 200px;" v-model="infoForm.way" size="small" placeholder="送样">
|
<el-option v-for="options in sampleDeliveryMode" :key="options.key" :value="options.key"
|
:label="options.value">{{ options.value }}</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="200">
|
<el-col :span="5">
|
<el-form-item label="送样人：">
|
<el-input style="width: 200px;" v-model="infoForm.sender" placeholder="请输入送样人" autocomplete="off"
|
size="small" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="送样人电话：">
|
<el-input style="width: 200px;" v-model="infoForm.sendertel" placeholder="请输入送样人电话"
|
autocomplete="off" size="small" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="报告数：">
|
<el-input type="number" min="0" style="width: 200px;" v-model="infoForm.num" placeholder="请输入报告数" autocomplete="off"
|
size="small" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="委托备注：">
|
<el-input style="width: 200px;" v-model="infoForm.other" placeholder="备注" autocomplete="off"
|
size="small" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="submitBtn">
|
<el-button type="primary" size="small" @click="submitInspection"
|
style="background-color: rgb(1, 102, 226);">提交</el-button>
|
<!-- 点击返回，当前页面值为false -->
|
<el-button type="primary" size="mini" style="background-color: rgb(1, 102, 226); " @click="printCommision">打印委托单</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
<div class="checkType">
|
<el-dialog title="添加样品" :visible.sync="dialogueFormVisible" width="40%" top="30vh">
|
<el-form :model="addPointerForm" ref="addPointerForm" class="addPointerForm" label-position="right"
|
label-width="100px" size="mini">
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="样品编号：">
|
<el-input v-model="addPointerForm.sampleNumber" size="small" disabled>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="样品名称：">
|
<el-select v-model="addPointerForm.sampleName" size="small" placeholder="请选择样品名称"
|
@change="upMaterialName">
|
<el-option v-for="(options,index) in sampleoptions" :key="index" :value="options.key" :label="options.value"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="评定标准：">
|
<el-select v-model="addPointerForm.addway" size="small" placeholder="请选择评定标准">
|
<el-option v-for="options in model_spe_options" :value="options.value"
|
:key="options.key">{{ options.value }}</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="规格型号：">
|
<el-select v-model="addPointerForm.specificationsModels" size="small" placeholder="请先选择样品名称"
|
@change="getProductList">
|
<el-option v-for="options in model_sta_options" :value="options.key" :label="options.value"
|
:key="options.key">{{ options.value }}</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="样品单位：">
|
<el-input type="text" v-model="addPointerForm.unit" placeholder="请输入单位" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="样品数量：">
|
<el-input type="text" v-model="addPointerForm.samplesNumber" placeholder="请输入数量" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="50">
|
<el-col :span="11">
|
<el-form-item label="添加项目：">
|
<el-checkbox-group v-model="addPointerForm.experiment" style="display: flex; flex-direction: column;">
|
<el-checkbox v-for="(expers, ai) in productList" :label="expers"
|
:key="ai">{{ expers }}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="备注：">
|
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 20}" style="width: 200px;"
|
v-model="addPointerForm.remarks" placeholder="请输入备注" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="addInspection">添加</el-button>
|
<el-button @click="dialogueFormVisible = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PrintJS from 'print-js'
|
import {
|
getSampleName,
|
getModelSpecification,
|
getlink,
|
addInspection,
|
isIfViewUUID,
|
getProductList,
|
getContractsSampleInfo,
|
getSpecificationsName
|
} from '@/api/inspection/commisioninspection'
|
export default {
|
data() {
|
return {
|
sampleNameList:[],
|
standardList:[],
|
testProjectList:[],
|
imgSrc: require("@/assets/404_images/logo.png"),
|
currentPage: 0,
|
searchData: '',
|
infoForm: {
|
commisioncode: '',
|
department: '',
|
contacter: '',
|
tel: '',
|
address: '',
|
deadline: '',
|
time: '',
|
way: '',
|
sender: '',
|
sendertel: '',
|
num: '',
|
other: ''
|
},
|
detectionInfo: [],
|
addPointerForm: {
|
sampleNumber: '',
|
sampleName: '',
|
specificationsModels: '',
|
unit: '',
|
samplesNumber: '',
|
remarks: '',
|
experiment: [],
|
addway: ''
|
},
|
experList: [],
|
sampleoptions: [],
|
samplecodeoptions: [],
|
model_spe_options: [],
|
model_sta_options: [],
|
model_options: [],
|
sampleDeliveryMode: [{
|
key: '1',
|
value: '送样'
|
}, {
|
key: '2',
|
value: '上门'
|
}],
|
dialogueFormVisible: false,
|
showDetail: false,
|
viewId: null,
|
productList: []
|
}
|
},
|
watch: {
|
addPointerForm: {
|
handler: function(val) {
|
if (val.addway != "") {
|
this.model_sta_options = []
|
this.model_options.forEach(a => {
|
if (a.specificationsName == val.addway) {
|
this.model_sta_options = a.children.map(item => {
|
return {
|
key: item.modelId,
|
value: item.modelName
|
}
|
})
|
}
|
})
|
}
|
},
|
deep: true
|
}
|
},
|
created() {
|
this.viewId = this.$route.params.viewId
|
this.$store.commit('settings/SAVE_LINK', this.viewId)
|
this.getlink(this.$route.params.viewId)
|
this.getContractsSampleInfo(this.$route.params.viewId)
|
},
|
mounted() {
|
this.getSampleName()
|
},
|
methods: {
|
printCommision(){
|
console.log(this.infoForm);
|
PrintJS({
|
printable: "printCommision",
|
type: "html",
|
css: [
|
"https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.ttf",
|
"https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff",
|
"https://unpkg.com/element-ui/lib/theme-chalk/icon.css"
|
],
|
targetStyles: ["*"],
|
ignoreElements: ["no-ignore"],
|
});
|
},
|
getlink(viewId) {
|
if (viewId == null) {
|
this.$message.error('当前链接不在有效期内,系统自动关闭')
|
this.$router.push('/404')
|
return
|
}
|
isIfViewUUID({
|
viewId
|
}).then(res => {
|
if (!res.data) {
|
this.$message.error('当前链接不在有效期内,系统自动关闭')
|
this.$router.push('/404')
|
} else {
|
this.getContractsSampleInfo()
|
}
|
})
|
},
|
async getContractsSampleInfo(viewId) {
|
let res = await getContractsSampleInfo({
|
viewId
|
})
|
},
|
async getSampleName() {
|
const res = await getSampleName()
|
this.sampleoptions = res.data.map((item) => {
|
return {
|
key: item.id.toString(),
|
value: item.name,
|
code: item.code
|
}
|
})
|
},
|
async getModelSpecification(val) {
|
const res = await getModelSpecification({
|
materialId: val
|
})
|
this.model_options = res.data
|
this.model_spe_options = res.data.map((item) => {
|
return {
|
key: item.specificationsId,
|
value: item.specificationsName
|
}
|
})
|
},
|
addInspection() {
|
let sName = this.addPointerForm.sampleName;
|
this.sampleoptions.forEach(a=>{
|
if(a.key == sName) this.sampleNameList.push(a.value);
|
})
|
this.standardList.push(this.addPointerForm.addway);
|
this.testProjectList.push(this.addPointerForm.experiment);
|
let exper = this.addPointerForm.experiment[0]
|
for (let i = 1; i < this.addPointerForm.experiment.length; i++) {
|
exper += ',' + this.addPointerForm.experiment[i]
|
}
|
this.addPointerForm.experiment = exper
|
let tmp = this.addPointerForm
|
this.sampleoptions.forEach(a => {
|
if (a.key == tmp.sampleName) tmp.sampleName = a.value
|
})
|
tmp.speName = tmp.addway + '-' + tmp.speName
|
tmp.addway = 1
|
this.detectionInfo.push(tmp)
|
this.dialogueFormVisible = false
|
this.addPointerForm = {
|
sampleNumber: '',
|
sampleName: '',
|
specificationsModels: '',
|
unit: '',
|
samplesNumber: '',
|
remarks: '',
|
experiment: [],
|
addway: '',
|
speName: ''
|
}
|
console.log(this.sampleNameList);
|
},
|
async submitInspection() {
|
let sampledeliveryway
|
if (this.infoForm.way === '送样') {
|
sampledeliveryway = 1
|
} else {
|
sampledeliveryway = 2
|
}
|
const res = await addInspection({
|
completionDeadline: this.infoForm.deadline,
|
contactAddress: this.infoForm.address,
|
contactNumber: this.infoForm.tel,
|
contacts: this.infoForm.contacter,
|
entrustRemarks: this.infoForm.other,
|
entrusted: this.infoForm.department,
|
inspectionTime: this.infoForm.time,
|
linkDetectionList: this.detectionInfo,
|
reportNumber: parseInt(this.infoForm.num),
|
sampleDeliveryMode: sampledeliveryway,
|
sampleDeliveryPhone: this.infoForm.sendertel,
|
sampleSender: this.infoForm.sender,
|
speName: this.infoForm.speName
|
})
|
this.infoForm.commisioncode = res.data
|
if (res.data) {
|
this.$message({
|
message: '添加成功!',
|
type: 'success'
|
})
|
this.showDetail = true
|
} else {
|
this.$message.error(res.message)
|
}
|
},
|
handleSizeChange(pageSize) {
|
this.pageParams.pageSize = pageSize
|
},
|
handleCurrentChange(pageNo) {
|
this.pageParams.pageNo = pageNo
|
},
|
deleteRow(index, rows) {
|
rows.splice(index, 1);
|
},
|
upMaterialName(val) {
|
this.sampleoptions.forEach(a => {
|
if (a.key == val) {
|
this.addPointerForm.sampleNumber = a.code
|
}
|
})
|
this.getModelSpecification(val)
|
},
|
getProductList(val) {
|
getProductList({
|
modelId: val
|
}).then(res => {
|
this.productList = res.data.map(item => {
|
return item.name
|
})
|
})
|
this.model_sta_options.forEach(a => {
|
if (a.key == val) {
|
this.addPointerForm.speName = a.value
|
}
|
})
|
},
|
getContractsSampleInfo() {
|
getContractsSampleInfo({
|
viewId: this.viewId
|
}).then(res => {
|
if (res.data == null) return
|
this.infoForm = {
|
commisioncode: res.data.entrustCoding,
|
deadline: res.data.completionDeadline,
|
address: res.data.contactAddress,
|
tel: res.data.contactNumber,
|
contacter: res.data.contacts,
|
other: res.data.entrustRemarks,
|
department: res.data.entrusted,
|
time: res.data.inspectionTime,
|
detectionInfo: res.data.linkDetectionList,
|
num: res.data.reportNumber,
|
way: '' + res.data.sampleDeliveryMode,
|
sendertel: res.data.sampleDeliveryPhone,
|
sender: res.data.sampleSender
|
}
|
this.detectionInfo = res.data.linkDetectionList
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.printCommision{
|
display: none;
|
width: 90%;
|
height:100px;
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 18px;
|
}
|
|
table,
|
tr,
|
th,
|
td {
|
border: 2px solid black;
|
text-align: center;
|
font-family: '微软雅黑';
|
ul{
|
list-style: none;
|
width: 500px;
|
}
|
ul li{
|
display: inline;
|
width:100px;
|
margin: 0 25px;
|
}
|
}
|
|
tr,
|
td,
|
th {
|
padding: 20px 10px;
|
}
|
}
|
.content-main {
|
padding: 20px 40px;
|
background-color: #f0f2f5;
|
width: 100%;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
// align-items: center;
|
|
.firstBox {
|
.title {
|
padding: 15px 10px;
|
font-size: 18px;
|
background-color: #0166e2;
|
color: #fff;
|
border-radius: 4px;
|
margin-bottom: 20px;
|
}
|
|
.tableBox {
|
background-color: #fff;
|
padding: 0px 20px;
|
flex: 1;
|
background: #fff;
|
/* padding: 20px 20px 10px 20px; */
|
display: flex;
|
flex-direction: column;
|
|
.tableBox-header {
|
padding: 20px 0px;
|
|
.split {
|
margin-right: 15px;
|
}
|
}
|
|
.el-table {
|
flex: 1;
|
}
|
|
>div:nth-child(3) {
|
display: flex;
|
justify-content: end;
|
margin: 10px 0;
|
}
|
}
|
}
|
|
.secondBox {
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 20px;
|
margin-top: 10px;
|
}
|
|
.submitBtn {
|
display: flex;
|
justify-content: end;
|
margin-right: 40px;
|
margin-top: 20px;
|
}
|
}
|
|
.infoForm {
|
background-color: #fff;
|
padding: 20px 50px;
|
|
.formwrapper {
|
margin: 20px 0px;
|
padding-left: 30px;
|
|
.el-row {
|
margin: 10px 0px;
|
}
|
}
|
}
|
}
|
</style>
|
