569 lines
17 KiB
Vue
569 lines
17 KiB
Vue
<template>
|
||
<el-dialog
|
||
title="修改质检报告"
|
||
:visible.sync="editshow"
|
||
width="1500px"
|
||
top="5vh"
|
||
append-to-body
|
||
:close-on-click-modal="false"
|
||
:before-close="handleClose"
|
||
>
|
||
<div class="main">
|
||
<div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
|
||
质检信息
|
||
</div>
|
||
<div>
|
||
<el-row type="flex" style="display: flex;align-items: center;margin-top: 10px;padding: 0 30px;" justify="">
|
||
<el-col :span="12">归属地区:浙江省温州市鹿城区</el-col>
|
||
<el-col :span="12">服务标签:<el-tag style="margin-left:5px">七天包退</el-tag><el-tag style="margin-left:5px">一年质保</el-tag></el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-show="attributeform['unmatch'] && attributeform['unmatch'].length !=0" class="tip">
|
||
<span>质检报告异常:</span>
|
||
<el-row :gutter="10">
|
||
<!-- <el-col :span="12">质检报告异常:</el-col> -->
|
||
<el-col v-for="(item,i) in attributeform['unmatch']" :key="i" :span="8">{{ item.attr_name }}/</el-col>
|
||
</el-row>
|
||
</div>
|
||
<!-- 质检图片 -->
|
||
<div style="margin-top:10px">
|
||
<div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
|
||
质检图片
|
||
</div>
|
||
<div style="display:flex;margin-top:10px">
|
||
<el-image
|
||
v-for="(item,i) in attributeform.all_img"
|
||
:key="i"
|
||
style="width: 100px; height: 100px;margin:10px"
|
||
:src="item"
|
||
:preview-src-list="attributeform.all_img"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 质检信息 -->
|
||
<div>
|
||
<div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
|
||
质检信息
|
||
</div>
|
||
<vxe-table
|
||
ref="xTable"
|
||
border
|
||
resizable
|
||
style="width: 100%;margin-top:10px"
|
||
:data="tableData"
|
||
:show-header="false"
|
||
auto-resize
|
||
:span-method="mergeRowMethod2"
|
||
height="500"
|
||
:checkbox-config="{labelField: 'Serial', highlight: false, range: true}"
|
||
>
|
||
<vxe-table-column
|
||
v-for="(item,index) in tableLabel"
|
||
:key="index"
|
||
:field="item.param"
|
||
:title="item.label"
|
||
:align="item.align"
|
||
:min-width="item.width"
|
||
:width="item.width"
|
||
>
|
||
<template v-slot:default="{ row, rowIndex }">
|
||
<span v-if="item.param == 'value' && row['child'].length>1">
|
||
<div style="display:flex;align-items:center">
|
||
<div v-for="(e,i) in row['child']" class="btnclass" style="margin:10px">
|
||
<el-button v-if="row['attr_name'].indexOf('多选')!=-1" :disabled="attributeform.type==1 ?true :false" class="buttonDiv" plain round :type="row['value'].includes(e.attr_name) ? 'primary' :''" style="width: 100%;" @click="brandclick($event,e,row['attr_name'],row)">{{ e.attr_name }}</el-button>
|
||
<el-button v-else-if="row['attr_name'].indexOf('多选')==-1" :disabled="attributeform.type==1 ?true :false" class="buttonDiv" plain round :type="row['value']==e.attr_name ? 'primary' :''" style="width: 100%;" @click="brandclick($event,e,row['attr_name'],row)">{{ e.attr_name }}</el-button>
|
||
<!-- <span v-if="e.attr_name == '循环次数' && row['value']=='苹果电池循环次数'">
|
||
<el-input v-model="row['value']" placeholder="请输入内容" clearable ></el-input>
|
||
</span> -->
|
||
</div>
|
||
</div>
|
||
</span>
|
||
<span v-else-if="item.param == 'value' && row['child'].length==1">
|
||
<el-input v-model="row['value']" placeholder="请输入内容" :disabled="attributeform.type==1 ?true :false" clearable />
|
||
</span>
|
||
<span v-else>
|
||
{{ row[item.param] ? row[item.param] : '/' }}
|
||
</span>
|
||
</template>
|
||
</vxe-table-column>
|
||
</vxe-table>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="handleClose()">关闭</el-button>
|
||
<el-button v-if="!attributeform.type" type="primary" @click="editinfo">确认</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
|
||
import printJS from 'print-js'
|
||
import QRCode from 'qrcodejs2'
|
||
import { save_xy_attribute } from '@/api/console' // 获取客户信息接口
|
||
import { res_advanced_search } from '@/api/machineList' // 获取机器列表信息接口
|
||
import { pre_print } from '@/api/machineList' // 获取列表信息接口
|
||
import { op_order_details_code } from '@/api/Warehousing' // 获取二维码信息接口
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
name: 'Warehousingprint',
|
||
data() {
|
||
return {
|
||
gridOptions2: {
|
||
border: false,
|
||
showOverflow: false,
|
||
height: 400,
|
||
showHeader: false,
|
||
columns: [],
|
||
data: []
|
||
},
|
||
tableLabel: [
|
||
{ label: '', param: 'title', align: 'center', width: 100, show: true },
|
||
{ label: '', param: 'attr_name', align: 'center', width: 200, show: true },
|
||
{ label: '', param: 'value', align: 'center', width: 1500, show: true }
|
||
],
|
||
tableData: [],
|
||
warranty_query: 2,
|
||
form: { cate_id: null, brand_id: null, model_id: null, rom_id: null, color_id: null },
|
||
cate_options: [],
|
||
brand_options: [],
|
||
model_options: [],
|
||
rom_options: [],
|
||
customer_options: [],
|
||
quote_user_options: [],
|
||
grade_options: [],
|
||
network_options: [],
|
||
op_user_id_options: [],
|
||
countries_options: [// 国别
|
||
{ label: '中国', value: '中国' },
|
||
{ label: '国行运营商', value: '国行运营商' },
|
||
{ label: '国行全网通', value: '国行全网通' },
|
||
{ label: '海外', value: '海外' },
|
||
{ label: '美版', value: '美版' },
|
||
{ label: '日本', value: '日本' },
|
||
{ label: '韩版', value: '韩版' },
|
||
{ label: '港澳台', value: '港澳台' },
|
||
{ label: '新加坡', value: '新加坡' },
|
||
{ label: '欧盟', value: '欧盟' },
|
||
{ label: '国际版', value: '国际版' }],
|
||
id_options: [
|
||
{ label: '有', value: 1 },
|
||
{ label: '无', value: 2 },
|
||
{ label: '未知', value: 0 }]
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'is_warranty_query', // 1查询，2不查询
|
||
'user_id'
|
||
]),
|
||
date() {
|
||
var date = new Date()
|
||
return date.toLocaleDateString()
|
||
},
|
||
aaa() {
|
||
const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
|
||
for (const key in obj) {
|
||
this.input.map((res, index) => {
|
||
if (res.enName == key) {
|
||
if (Array.isArray(res.options)) {
|
||
res.options.map(r => {
|
||
if (obj[key] == r.value) {
|
||
obj[key] = r.label
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
// window.localStorage.setItem("setform",JSON.stringify(this.formLabelAlign));//存储
|
||
return obj
|
||
}
|
||
},
|
||
watch: {
|
||
'is_warranty_query': {
|
||
handler(val) {
|
||
this.warranty_query = val
|
||
}, deep: true, immediate: true
|
||
}
|
||
},
|
||
created() {
|
||
// console.log()
|
||
// this.getcate()
|
||
// if(localStorage.getItem("setform")){
|
||
// let lastname = JSON.parse(localStorage.getItem("setform"));//读取
|
||
// this.formLabelAlign = lastname
|
||
// }
|
||
console.log(this.tableLabel)
|
||
console.log(this.tableData)
|
||
},
|
||
props: {
|
||
editshow: {
|
||
type: Boolean,
|
||
default: () => {
|
||
return false
|
||
}
|
||
},
|
||
attributeform: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
id: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
}
|
||
},
|
||
input: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
formLabelAlign: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
jiqidata: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 通用行合并函数（将相同多列数据合并为一行）
|
||
mergeRowMethod2({ row, _rowIndex, column, visibleData }) {
|
||
const fields = ['title']
|
||
const cellValue = row[column.property]
|
||
if (cellValue && fields.includes(column.property)) {
|
||
const prevRow = visibleData[_rowIndex - 1]
|
||
let nextRow = visibleData[_rowIndex + 1]
|
||
if (prevRow && prevRow[column.property] === cellValue) {
|
||
return { rowspan: 0, colspan: 0 }
|
||
} else {
|
||
let countRowspan = 1
|
||
while (nextRow && nextRow[column.property] === cellValue) {
|
||
nextRow = visibleData[++countRowspan + _rowIndex]
|
||
}
|
||
if (countRowspan > 1) {
|
||
return { rowspan: countRowspan, colspan: 1 }
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 是否查询状态改变
|
||
warrantychange(e) {
|
||
user_warranty_query({ user_id: this.user_id, is_warranty_query: e }).then(res => {
|
||
this.$message({ type: 'success', message: e == 1 ? '查询已开启' : '查询已关闭' })
|
||
this.$store.dispatch('user/getInfo')
|
||
})
|
||
},
|
||
getcate() {
|
||
cate_brand_list_all().then(res => {
|
||
this.cate_options = res.datas
|
||
})
|
||
res_advanced_search().then(e => {
|
||
this.op_user_id_options = e.datas['op_user_id']
|
||
this.quote_user_options = e.datas['quote_user_id']
|
||
this.customer_options = e.datas['supplier_info']
|
||
this.grade_options = e.datas['grade_list']
|
||
this.network_options = e.datas['network']
|
||
})
|
||
},
|
||
editinfo() {
|
||
const attribute = {}
|
||
this.tableData.map(e => {
|
||
const t = {}
|
||
t[e.attr_id] = e.value
|
||
Object.assign(attribute, t)
|
||
})
|
||
save_xy_attribute({ id: this.attributeform.id, attribute: attribute }).then(res => {
|
||
if (res.errcode == 0) {
|
||
this.$parent.determine(this.attributeform)
|
||
this.handleClose()
|
||
}
|
||
})
|
||
},
|
||
change(val, name) {
|
||
if (name == 'cate_id') {
|
||
this.form.brand_id = null
|
||
this.form.model_id = null
|
||
this.form.rom_id = null
|
||
this.form.color_id = null
|
||
if (val) {
|
||
cate_brand_list_all({ cate_id: val }).then(res => {
|
||
this.brand_options = res.datas
|
||
})
|
||
} else {
|
||
this.brand_options = []
|
||
this.rom_options = []
|
||
this.color_options = []
|
||
}
|
||
} else if (name == 'brand_id') {
|
||
this.form.model_id = null
|
||
this.form.rom_id = null
|
||
this.form.color_id = null
|
||
if (val) {
|
||
cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: val }).then(res => {
|
||
this.model_options = res.datas
|
||
})
|
||
} else {
|
||
this.model_options = []
|
||
this.rom_options = []
|
||
this.color_options = []
|
||
}
|
||
} else {
|
||
this.form.rom_id = null
|
||
this.form.color_id = null
|
||
if (val) {
|
||
cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: this.form.brand_id, model_id: val }).then(res => {
|
||
this.rom_options = res.datas['rom_list']
|
||
this.color_options = res.datas['color_list']
|
||
})
|
||
} else {
|
||
this.rom_options = []
|
||
this.color_options = []
|
||
}
|
||
}
|
||
},
|
||
romclick(e, v) {
|
||
let target = e.target
|
||
if (target.nodeName === 'SPAN') {
|
||
target = e.target.parentNode
|
||
}
|
||
target.blur()
|
||
this.form.rom_id = v.value
|
||
},
|
||
colorclick(e, v) {
|
||
let target = e.target
|
||
if (target.nodeName === 'SPAN') {
|
||
target = e.target.parentNode
|
||
}
|
||
target.blur()
|
||
this.form.color_id = v.value
|
||
},
|
||
toImg() { // 转图片打印
|
||
window.pageYoffset = 0
|
||
document.documentElement.scrollTop = 0
|
||
document.body.scrollTop = 0
|
||
html2canvas(this.$refs.printTest, {
|
||
backgroundColor: false,
|
||
useCORS: true,
|
||
allowTaint: true
|
||
}).then((canvas) => {
|
||
const url = canvas.toDataURL()
|
||
this.img = url
|
||
printJS({
|
||
printable: url,
|
||
type: 'image',
|
||
documentTitle: '打印'
|
||
})
|
||
// console.log(url)
|
||
})
|
||
},
|
||
brandclick(e, v, name, r) {
|
||
console.log(this.tableLabel)
|
||
console.log(this.tableData)
|
||
console.log(e, v, name, r)
|
||
console.log(r['value'].includes(e.attr_name))
|
||
if (name.indexOf('多选') != -1) {
|
||
if (v.attr_name == '正常' || v.attr_name == '无') {
|
||
r.value = [v.attr_name]
|
||
} else {
|
||
if (r.value.includes('无') || r.value.includes('正常')) {
|
||
r.value = []
|
||
r.value.push(v.attr_name)
|
||
} else {
|
||
if (r.value.includes(v.attr_name)) {
|
||
r.value.splice(r.value.indexOf(r.value.includes(v.attr_name), 1))
|
||
} else {
|
||
r.value.push(v.attr_name)
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
r.value = v.attr_name
|
||
}
|
||
let target = e.target
|
||
if (target.nodeName === 'SPAN') {
|
||
target = e.target.parentNode
|
||
}
|
||
target.blur()
|
||
},
|
||
handleClose() {
|
||
this.$emit('update:editshow', false)
|
||
},
|
||
share() { // 转发
|
||
op_order_details_code({ order_op_id: this.id }).then((res) => {
|
||
this.$delete(this.formLabelAlign, 'phone_list')
|
||
var list = JSON.stringify(this.formLabelAlign)
|
||
var host = window.location.host
|
||
var http = window.location.protocol
|
||
// console.log(`${http}`+'//'+`${host}/#/share2?uuid=`+res.datas.uuid+'&formLabelAlign='+list)
|
||
new QRCode(this.$refs.qrCodeUrl, {
|
||
// text:'https://erpv2.aiguovip.com/#/share/share?uuid='+res.datas.uuid,
|
||
text: `${http}` + '//' + `${host}/#/share2?uuid=` + this.id + '&formLabelAlign=' + list,
|
||
width: 120,
|
||
height: 110,
|
||
colorDark: '#333333', // 二维码颜色
|
||
colorLight: '#ffffff', // 二维码背景色
|
||
correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
|
||
})
|
||
})
|
||
},
|
||
// 隐藏二维码
|
||
hide() {
|
||
this.$nextTick(function() {
|
||
this.$refs.qrCodeUrl.innerHTML = ''
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// .btnclass ::v-deep .el-button--primary:focus{
|
||
// margin-right: 12px;
|
||
// border-radius: 2px;
|
||
// box-shadow: 0 2px 4px 0 #f4f4f4;
|
||
// color: #2794f8;
|
||
// background: white;
|
||
// }
|
||
.btnclass ::v-deep .el-button--primary:hover{
|
||
border-radius:20px;
|
||
color: #2794f8;
|
||
background: #d2e6fc;
|
||
border-color:#b3d8ff ;
|
||
}
|
||
.btnclass ::v-deep .el-button{
|
||
font-size: 2px;
|
||
padding: 5px;
|
||
min-width: 78px;
|
||
}
|
||
.main ::v-deep .vxe-body--column{
|
||
padding: 5px 0 !important;
|
||
}
|
||
.body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.body-text {
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
margin-bottom: 15px;
|
||
}
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
.text {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
.text1 {
|
||
font-size: 18px;
|
||
// height: 20px;
|
||
}
|
||
.calculation {
|
||
border: 1px solid #ebeef5;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
span {
|
||
padding: 0 10px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
table,td,th {
|
||
border: 1px solid #d4d4d4;
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
height: 100px;
|
||
width: 100%;
|
||
}
|
||
|
||
th {
|
||
height: 65px;
|
||
}
|
||
.top{
|
||
display: flex;
|
||
background-color:#4ca48c;
|
||
height:60px
|
||
}
|
||
.top-text{
|
||
font-family: STHeiti;
|
||
color: #fff;
|
||
font-size: 26px;
|
||
text-align: center;
|
||
}
|
||
.top-text1{
|
||
font-family: STHeiti;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
.fotter-top{
|
||
display: flex;
|
||
background-color:#4ca48c;
|
||
height:60px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30px;
|
||
}
|
||
.footer-Toptext{
|
||
font-family: STHeiti;
|
||
color: #fff;
|
||
font-size: 24px;
|
||
}
|
||
.fotter-main{
|
||
display: flex;
|
||
// background-color:#fff;
|
||
height:30px;
|
||
justify-content: center;
|
||
}
|
||
.footer-maintext{
|
||
font-family: STHeiti;
|
||
color:#FFFFFF;
|
||
font-size: 20px;
|
||
}
|
||
.el-col-6{
|
||
width: 20%!important;
|
||
}
|
||
.branchWrap {
|
||
margin: 0 -10px;
|
||
height: 140px;
|
||
}
|
||
.branchWrap div {
|
||
padding: 10px 10px;
|
||
border-bottom: 1px solid #dfe6ec;
|
||
height: 70px;
|
||
line-height: 200%;
|
||
}
|
||
.branchWrap div:last-child {
|
||
border: none;
|
||
}
|
||
.lineHeight28 {
|
||
line-height: 30px;
|
||
}
|
||
.tip {
|
||
margin-top:10px;
|
||
width: 100%;
|
||
max-height: 100px;
|
||
overflow-y: scroll;
|
||
border: 1px solid #ff633c;
|
||
position: relative;
|
||
background-color: #ff633c;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
font-size: 16px ;
|
||
padding: 0 10px;
|
||
}
|
||
</style>
|