erp-el-element/Dialog/Editinspectionreport.vue

569 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>