erp-el-element/Dialog/Editinspectionreport.vue

569 lines
17 KiB
Vue
Raw Permalink Normal View History

2024-05-07 11:30:13 +08:00
<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>