erp-el-element/Dialog/index.vue

639 lines
24 KiB
Vue

<template>
<div class="content">
<el-dialog
:title="Obj.DialogTitle"
:visible.sync="dialogVisible"
width="40%"
:before-close="close"
:close-on-click-modal="closeclickmodal"
class="abow_dialog"
>
<span v-if="Obj.DialogTitle == '添加销售'" style="display:flex">
<el-radio-group v-model="ruleForm.is_sales_accessories" @change="radio_change">
<el-radio-button :label="0">手机销售</el-radio-button>
<el-radio-button :label="1">配件销售</el-radio-button>
</el-radio-group>
</span>
<span v-if="Obj.DialogTitle == '品牌转移'" style="display:flex">
原品牌信息:品牌:{{ original.brand }} 型号:{{ original.model_set }} 容量:{{ original.ram }} 颜色:{{ original.color }}
</span>
<el-form
ref="ruleForm"
label-position="top"
:model="ruleForm"
label-width="100px"
size="mini"
>
<el-row>
<el-col v-for="(item, index) in Input" :key="index" :span="item.span">
<el-form-item
v-if="item.Typeshow"
:prop="item.prop"
:rules="{
required: item.required,
message: item.placeholder,
trigger: ['blur', 'change'],
}"
:label="item.label"
>
<template slot="label">
<div v-if="Obj.DialogTitle == '添加销售'&&item.label=='条形码'" style="display:flex;align-items: center;justify-content: space-between;">
<div>条形码</div>
<div v-if="imei.zljshow" style="margin-left:20px">
<div v-if="loadinglist.codeloading==1" style="display:flex;align-items: center;color:#9AAFC0">
<i class="el-icon-loading" style="color:orange;font-size:20px" />
<span>自动查询中</span>
</div>
<div v-else-if="loadinglist.codeloading==3" style="display:flex;align-items: center;">
<!-- <i class="el-icon-error" style="color:#F56C6C;font-size:20px"></i>
<span style="color:#F56C6C">查询失败</span> -->
<a style="display:flex;align-items: center;" @click="getcode()">
<i class="el-icon-refresh-right" style="color:#9AAFC0;margin-left:15px;font-size:20px" />
<span style="color:#9AAFC0">重新获取</span>
</a>
</div>
<div v-else-if="loadinglist.codeloading==2" style="display:flex;align-items: center;color:#9AAFC0">
<!-- <i class="el-icon-success" style="color:#67C23A;font-size:20px"></i>
<span style="color:#67C23A">查询成功</span> -->
<span style="margin-left:15px">状态:</span>
<span :style="loadinglist.state_name=='上架中'?'color:green':'color:red'">{{ loadinglist.state_name }}</span>
<el-popover placement="bottom" trigger="click">
<el-table :data="[loadinglist.gridData]">
<el-table-column type="index" width="50" label="编号" align="center" />
<el-table-column width="150" property="imei" label="IMEI" align="center" />
<el-table-column width="150" property="qc_code" label="质检码/商品Id" align="center" />
<el-table-column width="150" property="order_time" label="供货时间" align="center">
<template slot-scope="scope">
{{ scope.row['order_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}
</template>
</el-table-column>
<el-table-column width="150" property="sold_time" label="售出时间" align="center">
<template slot-scope="scope">
<span v-if="!!scope.row['sold_time']">{{ scope.row['sold_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}</span>
<span v-else>-</span>
</template>
</el-table-column>
</el-table>
<i slot="reference" class="el-icon-info" style="font-size:20px" />
</el-popover>
</div>
</div>
</div>
<div v-if="Obj.DialogTitle == '添加销售'&&item.label=='快递单号'" style="display:flex;align-items: center;justify-content: space-between;">
<div>快递单号</div>
<div v-if="imei.zljshow" style="margin-left:20px">
<div v-if="loadinglist.codeloading==1" style="display:flex;align-items: center;color:#9AAFC0">
<i class="el-icon-loading" style="color:orange;font-size:20px" />
<span>自动查询中</span>
</div>
<div v-else-if="loadinglist.codeloading==3" style="display:flex;align-items: center;">
<!-- <i class="el-icon-error" style="color:#F56C6C;font-size:20px"></i>
<span style="color:#F56C6C">查询失败</span> -->
<a style="display:flex;align-items: center;" @click="getcode()">
<i class="el-icon-refresh-right" style="color:#9AAFC0;margin-left:15px;font-size:20px" />
<span style="color:#9AAFC0">重新获取</span>
</a>
</div>
<div v-else-if="loadinglist.codeloading==2" style="display:flex;align-items: center;color:#9AAFC0">
<!-- <i class="el-icon-success" style="color:#67C23A;font-size:20px"></i>
<span style="color:#67C23A">查询成功</span> -->
<span style="margin-left:15px">状态:</span>
<span :style="loadinglist.state_name=='上架中'?'color:green':'color:red'">{{ loadinglist.state_name }}</span>
<el-popover placement="bottom" trigger="click">
<el-table :data="[loadinglist.gridData]">
<el-table-column type="index" width="50" label="编号" align="center" />
<el-table-column width="150" property="imei" label="IMEI" align="center" />
<el-table-column width="150" property="qc_code" label="质检码/商品Id" align="center" />
<el-table-column width="150" property="order_time" label="供货时间" align="center">
<template slot-scope="scope">
{{ scope.row['order_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}
</template>
</el-table-column>
<el-table-column width="150" property="sold_time" label="售出时间" align="center">
<template slot-scope="scope">
<span v-if="!!scope.row['sold_time']">{{ scope.row['sold_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}</span>
<span v-else>-</span>
</template>
</el-table-column>
</el-table>
<i slot="reference" class="el-icon-info" style="font-size:20px" />
</el-popover>
</div>
</div>
</div>
</template>
<div style="display:flex;">
<el-input
v-if="item.label =='销售价格'|| item.label =='采购价格' || item.label =='支付金额' ||item.label =='销售总价格' "
v-model="ruleForm[item.enName]"
:style="item.width"
:clearable="true"
:props="item.props"
:placeholder="item.placeholder"
:value="item.value"
@input="ruleForm[item.enName] = AmountInput(ruleForm[item.enName],2,'exceed')"
/>
<div
:is="item.type"
v-else
v-model="ruleForm[item.enName]"
:placeholder="item.placeholder"
:value="item.value"
:style="item.width"
:format="item.format"
:type="item.TimeType"
:value-format="item.valueformat"
:clearable="true"
:filterable="item.filterable"
:disabled="item.disabled"
:allow-create="item.allowcreate"
:picker-options="item.pickerOptions"
:default-first-option="item.defaultfirstoption"
:multiple="item.multiple"
:props="item.props"
:name="item.name"
@change="change(item.enName,ruleForm[item.enName],Obj.DialogTitle,item.label,item.options,item)"
@remove-tag="removetag"
>
{{ item.name == 'is_accessories'? '' : item.name }}
<el-option
v-for="items in item.options"
:key="items.value"
:label="items.label"
:value="items.value"
>
<span v-if="item.label == '颜色'">
<span style="float: left">{{ items.label }}</span>
<el-popover
placement="right"
width="200"
trigger="hover"
>
<img
v-if="items.img"
style="height: 200px"
:src="items.img"
>
<img
v-if="items.img"
slot="reference"
style="float: right;height: 34px"
:src="items.img"
>
</el-popover>
</span>
</el-option>
</div>
</div>
</el-form-item>
<el-col
v-for="(r, i) in item.repair_customer"
:key="i"
:span="r.span"
>
<el-col v-for="(value, key, index) in r" :key="index" :span="value.span" :class="value.class">
<el-form-item
:label="value.label"
:prop="value.prop"
:rules="{
required: value.required,
message: value.placeholder,
trigger: ['blur', 'change'],
}"
>
<div style="display:flex">
<div
:is="value.type"
v-model="ruleForm.accessories[i][value.enName]"
:style="value.width"
:filterable="value.filterable"
clearable
:placeholder="value.placeholder"
onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
>
<el-option
v-for="items in value.options"
:key="items.value"
:label="items.label"
:value="items.value"
:res_id="items.value"
>
<span v-if="value.label == '配件'" style="float: left">{{ items.label }}</span>
<span v-if="value.label == '配件'" style="float: right; color: #8492a6; font-size: 13px">{{ items.number ? `(${items.number})个` : '' }}</span>
</el-option>
</div>
</div>
<i class="Font" :class="value.Icon" @click="operation(r,i,value.name)" />
</el-form-item>
</el-col>
</el-col>
<el-col
v-for="(items, i) in item.alipay"
:key="i"
:span="items.span"
>
<el-form-item>
<div
:is="items.type"
v-model="ruleForm.pay_info.alipay[items.enName]"
:action="items.action"
:placeholder="items.placeholder"
type="alipay"
/>
<!--图片上传组件-->
<uploadImg
v-if="items.type == 'el-upload'"
:action-url="items.action"
:image-url="ruleForm.pay_info.alipay[items.enName]"
type="alipay"
@UrlImg="UrlImg"
/>
</el-form-item>
</el-col>
<el-col
v-for="(items, i) in item.wechat"
:key="i"
:span="items.span"
>
<el-form-item>
<div
:is="items.type"
v-model="ruleForm.pay_info.wechat[items.enName]"
:action="items.action"
:placeholder="items.placeholder"
type="wechat"
/>
<!--图片上传组件-->
<uploadImg
v-if="items.type == 'el-upload'"
:action-url="items.action"
:image-url="ruleForm.pay_info.wechat[items.enName]"
type="wechat"
@UrlImg="UrlImg"
/>
</el-form-item>
</el-col>
<el-col v-for="(items, i) in item.bank" :key="i" :span="items.span">
<el-form-item>
<div
:is="items.type"
v-model="ruleForm.pay_info.bank[items.enName]"
:placeholder="items.placeholder"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
<el-form-item>
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button v-if="Obj.DialogTitle == '选择属性'" type="success" @click="Reexamination()">重查保修</el-button>
<el-button type="primary" @click="submitForm('ruleForm', Obj.Button, Obj.DialogTitle)">{{ Obj.Button }}</el-button>
</el-form-item>
</el-form>
<!--客户-->
<innerDIalog :inner-visible.sync="innerVisible" append-to-body :input="InputArr" :rule-form="rule" :obj="DiaButton" @save="addsave" @ImgSrc="ImgSrc" />
<Dialog :outer-visible.sync="outerVisible" :options="options" :statusoptions="statusoptions" :rule-form="Sales" :obj="DiaButton" @addplus="addplus" @del="del" @save="addsave" />
</el-dialog>
</div>
</template>
<script>
import { save_User } from '@/api/Suppliermanagement'
import { save } from '@/api/salesman'
import uploadImg from '@/components/Upload'
import innerDIalog from '@/components/Dialog/InnerDialog' // 添加客户
import Dialog from '../../views/settings/dialog' // 营业员
import { zz_new_status } from '@/api/machineList' // 获取列表信息接口
import { cate_brand_list_in_stock } from '@/api/Jiqidetails' // 获取列表信息接口
export default {
components: {
uploadImg,
innerDIalog,
Dialog
},
props: {
dialogVisible: {
type: Boolean,
default: false
},
closeclickmodal: {
type: Boolean,
default: true
},
list: {
type: Array,
default: () => {
return []
}
},
original: {
type: Object,
default: () => {
return {}
}
},
Obj: {
type: Object,
default: () => {
return {}
}
},
Obj_money: {
type: Object,
default: () => {
return {}
}
},
Input: {
type: Array,
default: () => {
return []
}
},
imei: {
type: Object,
default: () => {
return {}
}
},
ruleForm: {
type: Object,
default: () => {
return {}
}
},
amount_money: {
type: [Number, String],
default: () => {
return 0
}
},
Settlement_amount: {
type: [Number, String],
default: () => {
return 0
}
},
pay_customer: {
type: [Number, String],
default: () => {
return 0
}
},
/* 用户信息 二维码 银行卡*/
user_info: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
checked: false,
tabPosition: '不使用预付款',
radio1: '手机销售',
outerVisible: false,
innerVisible: false,
actionUrl: 'https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com',
Sales: {}, // 营业员对象
DiaButton: { DialogTitle: '', Button: '' },
rule: {},
enName: '',
// 模态框输入框
InputArr: [],
options: [{ label: '固定值', value: 1 }, { label: '百分比', value: 2 }],
statusoptions: [{ label: '正常', status: 0 }, { label: '非正常', status: 1 }],
type: '',
loadinglist: []
}
},
computed: {
// 把对象序列化
pay_info() {
return this.bank_info.pay_info ? JSON.parse(this.bank_info.pay_info) : { alipay: { qr_code: '', name: '' }, wechat: { qr_code: '', name: '' }, bank: { bank_no: '', name: '', kaihuhang: '' }}
}
},
watch: {
list: {
handler(newVal, value) {
if (newVal) {
// this.$set(this.loadinglist,'',newVal)
this.loadinglist = newVal
if (newVal.customer_barcode) {
// this.$set(this.ruleForm,'barcode',newVal.customer_barcode)
}
}
},
deep: true,
immediate: true
},
imei: {
handler(newVal, value) {
if (newVal) {
if (newVal.zljshow) {
this.$set(this.ruleForm, 'barcode', this.loadinglist.customer_barcode)
} else {
this.$set(this.ruleForm, 'barcode', '')
}
}
},
deep: true,
immediate: true
}
},
created() {
},
methods: {
getcode() {
const e = this.imei
if (e.account && e.account.length != 0) {
const Obj = { imei: e.imei1, imei2: e.imei2, account: e.account }
this.$set(this.loadinglist, 'codeloading', 1)
zz_new_status(Obj).then((res) => {
if (res.errcode == 0 && res.datas.length != 0) {
this.$set(this.loadinglist, 'gridData', res.datas)
this.$set(this.loadinglist, 'customer_barcode', res.datas[0].qc_code)
this.$set(this.loadinglist, 'codeloading', 2)
this.$set(this.loadinglist, 'state_name', res.datas[0].state_name)
this.$set(this.loadinglist, 'order_time', res.datas[0].order_time)
this.$set(this.loadinglist, 'sold_time', res.datas[0].sold_time)
} else {
this.$set(this.loadinglist, 'codeloading', 3)
}
})
}
},
// 在对话框打开时候使用resetFields方法移除表单的校验
clearcheck() {
if (this.$refs['ruleForm']) {
this.$refs['ruleForm'].clearValidate()
}
},
Reexamination() {
this.$emit('Reexamination')
},
// 销售信息单选框
radio_change(val) {
this.$emit('radio_change', val)
},
input(e) {
this.$forceUpdate()
},
change(enName, e, DialogTitle, label, options) {
if (DialogTitle == '选择属性') {
for (const key in this.ruleForm) {
if (key == enName) {
var str = enName.substring(0, enName.length - 2) // 去掉enName最后两个字符 例如:brand_id 变为brand_
str = str + 'name' // 拼接上name 例如brand_ 变为 band_name 就是该value值的label属性
options.map((item) => {
if (item.value === e) {
this.ruleForm[str] = item.label // 如果value等于选中的value值 那么取到他的label 赋值给ruleForm
}
})
}
}
this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle, row: this.ruleForm, label: label })
}
if (enName == 'new_other') {
this.$emit('change_new_other', e)
} else if (DialogTitle == '添加销售') {
let account_class_code = '' // 客户类别
if (Array.isArray(options)) {
options.map(r => {
if (e == r.value) {
account_class_code = r.account_class_code
}
})
}
this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle, row: this.ruleForm, label: label, account_class_code: account_class_code })
} else {
this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle, row: this.ruleForm, label: label })
}
},
focus(row, item) {
this.$emit('Selectfocus', { row: row, item: item })
},
tabclick(value) {
this.$emit('surplus_money', { tabPosition: this.tabPosition, actual_Settlement_amount: this.actual_Settlement_amount })
},
submitForm(formName, name, DialogTitle) {
this.$refs[formName].validate((valid, obj) => {
if (valid) {
if (this.ruleForm.price && this.ruleForm.textarea_price) {
this.$message({ type: 'warning', message: '填写一个即可,禁止填写两个' })
return
}
if (this.ruleForm.remark && this.ruleForm.textarea_remark) {
this.$message({ type: 'warning', message: '填写一个即可,禁止填写两个' })
return
}
if (this.ruleForm.grade_list && this.ruleForm.textarea_grade_list) {
this.$message({ type: 'warning', message: '填写一个即可,禁止填写两个' })
return
}
this.$emit('save', {
row: this.ruleForm,
original: this.original,
tabPosition: this.tabPosition,
checked: this.checked,
name: name,
DialogTitle: DialogTitle
})
this.tabPosition = '不使用预付款'
this.$emit('update:dialogVisible', false)
} else {
return false
}
})
},
resetForm() {
this.tabPosition = '不使用预付款'
this.$emit('colse')
this.$emit('update:dialogVisible', false)
},
close() {
this.tabPosition = '不使用预付款'
this.$emit('colse')
this.$emit('update:dialogVisible', false)
},
// 子组件上传图片成功 返回地址
UrlImg(data) {
this.$emit('img', data)
},
addsave(data) {
if (data.Sales == 'Sales') {
save(data.row).then((res) => {
this.$emit('update')
})
} else {
save_User(data.row).then((res) => {})
}
},
addplus() {
this.Sales.brokerage.push({ 'range': [], 'type': '', 'value': '' })
},
del(data) {
this.$delete(this.Sales.brokerage, data)
},
// 添加或删除
operation(r, i, name) {
this.$emit('operation', { row: r, index: i, name: name })
},
ImgSrc(data) {
if (data.type == 'alipay') {
this.rule.pay_info.alipay.qr_code = data.imageUrl
} else {
this.rule.pay_info.wechat.qr_code = data.imageUrl
}
},
// 多选模式下移除Tag触发
removetag(r) {
this.$emit('removetag', r)
}
}
}
</script>
<style scoped lang="scss">
.fonticon{
color: #fff;
padding: 0px 15px;
font-size: 24px;
position: relative;
top: 5px;
}
.fontcont{
padding: 0px 15px;
font-size: 24px;
}
.IconClass{
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
position: relative;
top: 40px;
}
.Font{
font-size: 20px;
}
.content ::v-deep .el-form-item{
margin-bottom:18px;
}
.pay_info{
span{
padding: 0 20px 0 0;
}
}
.accessclass{
width: 100%;
border: 1px solid #EBEEF5;
padding: 10px;
font-size: 14px;
}
</style>