erp-el-element/Dialog/MachineDetailsDialog.vue

854 lines
26 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"
top="2%"
>
<el-form
ref="ruleForm"
label-position="top"
:model="ruleForm"
label-width="100px"
size="mini"
>
<h3>机器信息</h3>
<el-row :gutter="10">
<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"
>
<div style="display: flex">
<div
:is="item.type"
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>
<h3>机器详情</h3>
<el-row :gutter="10">
<el-col
v-for="(item, index) in Input2"
: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"
>
<div style="display: flex">
<div
:is="item.type"
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-row type="flex" justify="end">
<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-row>
</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 [];
},
},
Input2: {
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,
},
ruleForm: {
handler() {
if (this.ruleForm.machine_grade_id === 0) {
this.$set(this.ruleForm, "machine_grade_id", "");
}
if (this.ruleForm.quote_user_id === 1) {
this.$set(this.ruleForm, "quote_user_id", "");
}
if (this.ruleForm.attribute_json) {
let attributeJsonCopoy = JSON.parse(this.ruleForm.attribute_json);
this.ruleForm.battery_health = attributeJsonCopoy.battery_health;
// this.ruleForm.fineness = attributeJsonCopoy.fineness;
this.ruleForm.recharge_num = attributeJsonCopoy.recharge_num;
this.ruleForm.sys_net_no = attributeJsonCopoy.sys_net_no;
this.ruleForm.network = attributeJsonCopoy.network;
}
},
},
},
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);
this.$emit("closeDialog");
},
close() {
this.tabPosition = "不使用预付款";
this.$emit("colse");
this.$emit("update:dialogVisible", false);
this.$emit("closeDialog");
},
// 子组件上传图片成功 返回地址
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;
}
::v-deep .el-form--label-top .el-form-item__label {
padding: 0;
}
</style>