erp-el-element/Dialog/Editall.vue

734 lines
28 KiB
Vue
Raw Permalink Normal View History

2024-05-07 11:30:13 +08:00
<template>
<el-dialog
title="编辑属性"
:visible.sync="allshow"
width="1000px"
top="2vh"
class="dialogclass"
append-to-body
:close-on-click-modal = "false"
:before-close="handleClose"
>
<div class="main" >
<div class="paiclass" v-if="!!allform['pjt_account']">
<i class="level" v-if="allform.level_name">{{allform.level_name}}</i>
<span>{{allform.pjt_contact_name}}:{{allform.pjt_account}}</span>
<span style="color:#e67e22;margin-left:5px">:{{allform.pjt_model_info}}</span>
</div>
<div v-if="!!allform['order_sn']">
<span>来源: <span style="color:#3498db">采购单:{{allform['order_sn']}}</span></span> <span>客户: <span style="color:#3498db">{{allform['customer_name']}}</span></span> <span>采购价格: <span style="color:#3498db">{{allform['pay_amount']}}</span></span>
</div>
<div style="display:flex;margin-top: 10px;">
<el-popover
v-if="!!allform.img"
placement="right"
width="350"
trigger="hover"
>
<el-image
style="height: 350px"
:src="allform.img"
>
<div slot="error" class="image-slot" style="display:flex;flex-direction:column;align-items:center">
<i class="el-icon-picture-outline"></i>
<span>暂无图片</span>
</div>
</el-image>
<el-image
slot="reference"
style="height: 70px;width:70px;"
:src="allform.img">
<div slot="error" class="image-slot" style="display:flex;flex-direction:column;align-items:center">
<i class="el-icon-picture-outline"></i>
<span>暂无图片</span>
</div>
</el-image>
</el-popover>
<el-image
v-else
slot="reference"
style="height: 70px;width:70px;display: flex;align-items: center;"
:src="allform.img">
<div slot="error" class="image-slot" style="display:flex;flex-direction:column;align-items:center">
<i class="el-icon-picture-outline"></i>
<span>暂无图片</span>
</div>
</el-image>
<div style="margin-left:10px;flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
<div style="display: flex;align-items: center;">
<div v-if="!!allform['mp_full_model']" style="background:#ecf5ff;height:30px;display:flex;align-items:center;color: #1e90ff;padding: 0 30px;">
官网信息: {{allform['mp_full_model']}}
</div>
<div style="margin-left:10px;font-size: 16px;font-weight: bold;color: #000;">
{{allform['brand_name']}} {{allform['model_name']}} {{allform['rom_name']}} {{allform['color_name']}}
</div>
</div>
<div style="display:flex;justify-content:space-between">
<div :span="7" style="display:flex;align-items:center;flex: 1;">
<span>IMEI</span>
<el-input v-model="allform.imei1" size="mini" style="width: 70%;margin-left:5px"></el-input>
</div>
<div :span="7" style="display:flex;align-items:center; flex: 1;">
<span>IMEI2</span>
<el-input v-model="allform.imei2" size="mini" style="width: 70%;margin-left:5px" ></el-input>
</div>
<div :span="7" style="display:flex;align-items:center;flex: 1;">
<span>sn</span>
<el-input v-model="allform.sn" size="mini" style="width: 70%;margin-left:5px"></el-input>
</div>
<div :span="7" style="display:flex;align-items:center;flex: 1;">
<span>第三方条码</span>
<el-input v-model="allform.pjt_product_no" size="mini" style="width: 65%;margin-left:5px;flex:1"></el-input>
</div>
</div>
</div>
</div>
<div class="flex-b" style="margin:10px 0">
<h3 style="font-weight: bold;">机器信息</h3>
<div>
<el-autocomplete style="width: 350px;" v-model="keywords" :fetch-suggestions="inputchange" size="small" placeholder="型号搜索(内容大于2个字符)" @select="handleSelect" >
<template slot-scope="{ item }">
<div class="number" style="white-space: pre-wrap;">{{item.brand_name}} {{item.model_name}}</div>
</template>
</el-autocomplete>
</div>
</div>
<el-form ref="allform" :model="allform" :rules="rules" :inline="true" label-width="80px">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="分类" prop="cate_id" >
<el-select v-model="allform.cate_id" @change="change(allform.cate_id,'cate_id')" size="small" placeholder="请选择分类" filterable clearable>
<el-option v-for="(e,i) in cate_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="品牌" prop="brand_id" >
<el-select v-model="allform.brand_id" @change="change(allform.brand_id,'brand_id')" size="small" placeholder="请选择品牌" filterable clearable>
<el-option v-for="(e,i) in brand_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="型号" prop="model_id" >
<el-select v-model="allform.model_id" @change="change(allform.model_id,'model_id')" size="small" placeholder="请选择型号" filterable clearable>
<el-option v-for="(e,i) in model_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div v-if="!!allform.model_id">
<div>
<h3 style="font-weight: bold;">容量</h3>
<div class="btnclass">
<el-button class="buttonDiv" plain v-for="(v,index) in rom_options" :type="allform.rom_id==v.value ? 'primary' :''" :key="index" @click="romclick($event,v)">{{v.label}}</el-button>
</div>
</div>
<h3 style="font-weight: bold;">颜色</h3>
<div style="display:flex;flex-wrap: wrap;">
<div v-for="(v,index) in color_options" :key="index" style="display:flex;flex-direction:column;margin:0 5px">
<el-image
style="width: 70px; height: 70px"
:src="v.img"
>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<el-button plain :type="allform.color_id==v.value ? 'primary' :''" @click="colorclick($event,v)">{{v.label}}</el-button>
</div>
</div>
</div>
<!-- 基础信息 -->
<div>
<h3 style="font-weight: bold;">基础信息</h3>
<el-form-item label="客户" required>
<el-select v-model="allform.customer_id" :disabled="!!allform.res_id" size="small" placeholder="请选择客户" filterable clearable>
<el-option v-for="(e,i) in customer_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="价格" required>
<el-input v-model="allform.pay_amount" :disabled="!!allform.res_id && ($route.name!='Purchase_order_Details'|| allform.pay_id>0 ) " size="small" placeholder="请输入价格" clearable></el-input>
</el-form-item>
<el-form-item label="零售价">
<el-input v-model="allform.retail_price" size="small" placeholder="请输入零售价" clearable></el-input>
</el-form-item>
<el-form-item label="参考价" v-if="formLabelAlign && formLabelAlign['warehousing_type'] == 2">
<el-input v-model="allform.reference_price" size="small" placeholder="请输入参考价" clearable></el-input>
</el-form-item>
</div>
</el-form>
<!-- 属性 -->
<div>
<h3 style="font-weight: bold;">属性</h3>
<el-form ref="form" :model="allform" :inline="true" label-width="95px">
<el-form-item label="质检员" prop="op_user_id">
<el-select v-model="allform.op_user_id" size="small" placeholder="请选择质检员" filterable clearable>
<el-option v-for="(e,i) in op_user_id_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="报价师" >
<el-select v-model="allform.quote_user_id" size="small" placeholder="请选择报价师" filterable clearable>
<el-option v-for="(e,i) in quote_user_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="ID锁" >
<el-select v-model="allform.fmi_lock" size="small" placeholder="请选择ID锁" filterable clearable>
<el-option v-for="(e,i) in id_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="保修类型" >
<el-select v-model="allform.baoxiu_type" size="small" placeholder="请选择ID锁" filterable clearable>
<el-option v-for="(e,i) in Warranty_type_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="国别" >
<el-select v-model="allform.countries" size="small" placeholder="请选择国别" filterable clearable>
<el-option v-for="(e,i) in countries_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="机器等级(成色)" >
<el-select v-model="allform.grade" size="small" placeholder="请选择机器等级(成色)" filterable clearable>
<el-option v-for="(e,i) in grade_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="系统版本">
<el-input v-model="allform.sys_net_no" size="small" placeholder="请输入系统版本" clearable></el-input>
</el-form-item>
<el-form-item label="电池健康">
<el-input v-model="allform.battery_health" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" size="small" placeholder="请输入电池健康" clearable>
<span slot="suffix">%</span>
</el-input>
</el-form-item>
<el-form-item label="充电次数">
<el-input v-model="allform.recharge_num" size="small" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="请输入充电次数" clearable></el-input>
</el-form-item>
<el-form-item label="网络制式" >
<el-select v-model="allform.network" size="small" placeholder="请选择网络制式" filterable clearable>
<el-option v-for="(e,i) in network_options" :key="i" :label="e.label" :value="e.value"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="机器成色" prop="fineness">
<el-input v-model="allform.fineness" size="small" placeholder="请输入机器成色" clearable>
</el-input>
</el-form-item> -->
</el-form>
</div>
<!-- 备注 -->
<div>
<h3 style="font-weight: bold;">备注</h3>
<div class="flex-b">
<div>
<el-input type="textarea" :rows="3" resize="none" placeholder="请输入备注" v-model="allform.remark"></el-input>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()"> </el-button>
<el-button 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 {cate_brand_list,cate_brand_list_all,user_warranty_query,purchase_order_edit_phone,edit_drafts_box,ai_model_update_v2,op_order_details_code} from "@/api/Warehousing"; //获取客户信息接口
import { res_advanced_search } from "@/api/machineList"; //获取机器列表信息接口
import {pre_print} from "@/api/machineList"; //获取列表信息接口
import { edit_super_amount } from "@/api/Jiqidetails"; //获取二维码信息接口
import { mapGetters } from 'vuex'
export default {
name: "Warehousingprint",
data() {
return {
keywords:'',
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:[],
color_options:[],
customer_options:[],
quote_user_options:[],
grade_options:[],
network_options:[],
op_user_id_options:[],
Warranty_type_options:[
{label:"过保",value:"1"},
{label:"在保",value:"2"},
{label:"已更换",value:"3"},
{label:"官换",value:"4"},
],
rules: {
cate_id: [
{ required: true, message: '请选择分类', trigger: ['blur','change'] },
],
brand_id: [
{ required: true, message: '请选择品牌', trigger: ['blur','change'] }
],
model_id: [
{ required: true, message: '请选择型号', trigger: ['blur','change'] }
],
customer_id: [
{ required: true, message: '请选择客户', trigger: ['blur','change'] }
],
pay_amount: [
{ required: true, message: '请输入价格', trigger: ['blur','change'] }
],
},
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();
},
sumprice() {
var price = 0;
this.tableData.map((res) => {
price += Number(res.price);
});
return price;
},
aaa(){
let obj = JSON.parse(JSON.stringify(this.allformLabelAlign))
for(let 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.allformLabelAlign));//存储
return obj
},
},
watch:{
'is_warranty_query':{
handler(val){
this.warranty_query=val
},deep:true,immediate:true
},
allform:{
handler(){
if(this.grade_options){
this.grade_options.forEach(item=>{
if(item.label == this.allform.level_name){
this.$set(this.allform,'grade',item.value)
}
})
}
}
}
},
created(){
this.getcate()
// if(localStorage.getItem("setform")){
// let lastname = JSON.parse(localStorage.getItem("setform"));//读取
// this.allformLabelAlign = lastname
// }
// console.log(this.allformLabelAlign,'thisformLabelAlign')
},
props: {
allshow: {
type: Boolean,
default: () => {
return false;
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
allform: {
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: {
inputchange(queryString,callback){
if (!!queryString && queryString.length>=2) {
//调用的后台接口
cate_brand_list({keywords:queryString}).then((res) => {
callback(res.datas);
}).catch((error)=>{
});
}else{
callback([]);
}
},
//是否查询状态改变
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({p_user_id:this.allform.company_user_id}).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(){
console.log(this.$route.name);
if (!!this.allform.res_id) {//采购单
purchase_order_edit_phone(this.allform).then(res=>{
if (this.$route.name=='Purchase_order_Details') {
let obj={res_id:this.allform.res_id,amount:this.allform.pay_amount,order_type:1}
edit_super_amount(obj).then(e=>{
this.$parent.getpurchase_details()
})
}else if (this.$route.name=='Purchase_order') {
let obj={res_id:this.allform.res_id,amount:this.allform.pay_amount,order_type:1}
edit_super_amount(obj).then(e=>{
this.$parent.obtainList()
})
}else{
this.$parent.getlist()
}
if (!!this.allform.warranty_query_info_id) {
let obj = {warranty_query_info_id:this.allform.warranty_query_info_id,cate_id:this.allform['cate_id'],brand_id:this.allform['brand_id'],
model_id:this.allform['model_id'],rom_id:this.allform['rom_id'],color_id:this.allform['color_id'],}
ai_model_update_v2(obj).then(res=>{})
}
this.handleClose()
})
}else{
edit_drafts_box({...this.allform,client_type:2}).then(res=>{
this.$parent.getlist()
this.handleClose()
if (!!this.allform.warranty_query_info_id) {
let obj = {warranty_query_info_id:this.allform.warranty_query_info_id,cate_id:this.allform['cate_id'],brand_id:this.allform['brand_id'],
model_id:this.allform['model_id'],rom_id:this.allform['rom_id'],color_id:this.allform['color_id'],}
ai_model_update_v2(obj).then(res=>{})
}
})
}
},
change(val,name){
if (name=='cate_id') {
this.allform.brand_id=null
this.allform.model_id=null
this.allform.rom_id=null
this.allform.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.allform.model_id=null
this.allform.rom_id=null
this.allform.color_id=null
if (!!val) {
cate_brand_list_all({cate_id:this.allform.cate_id,brand_id:val}).then(res=>{
this.model_options=res.datas
})
}else{
this.model_options=[]
this.rom_options=[]
this.color_options=[]
}
}else{
this.allform.rom_id=null
this.allform.color_id=null
if (!!val) {
cate_brand_list_all({cate_id:this.allform.cate_id,brand_id:this.allform.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=[]
}
}
},
getbrand(page){
cate_brand_list_all({cate_id:this.allform.cate_id,}).then(res=>{
this.brand_options=res.datas
})
},
getmodel(page){
cate_brand_list_all({cate_id:this.allform.cate_id,brand_id:this.allform.brand_id}).then(res=>{
this.model_options=res.datas
})
},
async handleSelect(data){
this.allform.cate_id = data.cate_id
this.allform.brand_id = data.brand_id
this.default_brand_id = data.brand_id
this.default_model_id = data.model_id
this.allform.model_id = data.model_id
this.allform.rom_id = null
this.allform.color_id = null
await this.getbrand()
await this.getmodel()
await this.getromcolor()
},
getromcolor(page){
cate_brand_list_all({cate_id:this.allform.cate_id,brand_id:this.allform.brand_id,model_id:this.allform.model_id,}).then(res=>{
this.rom_options=res.datas['rom_list']
this.color_options=res.datas['color_list']
})
},
romclick(e,v){
let target = e.target
if (target.nodeName === 'SPAN') {
target = e.target.parentNode
}
target.blur()
this.allform.rom_id=v.value
},
colorclick(e,v){
let target = e.target
if (target.nodeName === 'SPAN') {
target = e.target.parentNode
}
target.blur()
this.allform.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)
})
},
handleClose() {
this.$set(this,'keywords','')
this.$emit("update:allshow", false);
},
share() { // 转发
op_order_details_code({order_op_id:this.id}).then((res) => {
this.$delete(this.allformLabelAlign,'phone_list');
var list = JSON.stringify(this.allformLabelAlign)
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: 2px;
color: #2794f8;
background: #d2e6fc;
border-color:#b3d8ff ;
}
.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;
}
.level{
display: inline-block;
height: 20px;
line-height: 20px;
padding: 0 15px;
background: #ff633c;
border-radius: 12px;
font-size: 12px;;
font-weight: 500;
color: #fff;
cursor: pointer;
margin:0px 10px;
}
.paiclass{
height: 40px;
background: #f2f2f2;
display: flex;
font-size: 16px;
align-items: center;
}
</style>