erp-el-element/Dialog/Editall.vue

734 lines
28 KiB
Vue
Raw Permalink 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="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>