<template>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>面单录入</span>
|
</div>
|
<div class="margin-top-30">
|
<el-steps :active="step" finish-status="success">
|
<el-step title="选择发货信息"></el-step>
|
<el-step title="填写包裹清单"></el-step>
|
<el-step title="填写物料清单"></el-step>
|
<el-step title="提交完成"></el-step>
|
</el-steps>
|
<div class="split-line"></div>
|
<div :class="{hidden:hiddenStep1}" class="step1">
|
<el-form v-model="formData" label-width="250px">
|
<el-form-item label="发货仓库">
|
<el-select v-model="formData.storage_Id" placeholder="请选择仓库">
|
<el-option v-for="(item, index) in storageList" :key="index" :label="item.storageName" :value="item.storage_Id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="订单类型">
|
<el-select v-model="formData.orderType" placeholder="请选择订单类型">
|
<el-option v-for="(item, index) in orderTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="产品线">
|
<el-select v-model="formData.productLine" placeholder="请选择产品线">
|
<el-option v-for="(item, index) in productLineList" :key="index" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="firstNext()">下一步</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div :class="{hidden:hiddenStep2}" class="step2">
|
<el-form ref="form" :model="formData" :rules="formRules" label-width="120px" class="margin-top-30">
|
<el-row :gutter="20">
|
<el-col :span="14">
|
<h4>收件人信息</h4>
|
<el-form-item label="手机号码" required prop="consigneeMobile">
|
<input-select v-model="formData.consigneeMobile" :options="consigneeMobileList" :props="mobileProps" label="收件人手机号" input-width="250px" trigger="focus" @on-key-up="(ref, val)=>{sreachConsigneeMobile(ref, val);}" @on-item-click="findAddressInfo">
|
</input-select>
|
</el-form-item>
|
<el-form-item label="收件人" required prop="consigneeName">
|
<el-input v-model="formData.consigneeName" class="w-250" placeholder="收件人姓名要与身份证一致"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号">
|
<el-input v-model="formData.consigneeIdcard" class="w-250"></el-input>
|
</el-form-item>
|
<el-form-item label="收件人省市区" required prop="region_Id">
|
<el-select v-model="formData.province_Id" class="w-120" placeholder="请选择省" @change="choseProvince">
|
<el-option v-for="item in addressList.province" :key="item.id" :label="item.value" :value="item.id">
|
</el-option>
|
</el-select>
|
<el-select v-model="formData.city_Id" class="w-120" placeholder="请选择市" @change="choseCity">
|
<el-option v-for="item in addressList.shi1" :key="item.id" :label="item.value" :value="item.id">
|
</el-option>
|
</el-select>
|
<el-select v-model="formData.region_Id" class="w-120" placeholder="请选择区" @change="choseBlock">
|
<el-option v-for="item in addressList.qu1" :key="item.id" :label="item.value" :value="item.id">
|
</el-option>
|
</el-select>
|
|
</el-form-item>
|
<!-- <el-form-item label="收件人街道" required prop="street">
|
<el-input v-model="formData.street" style="width:410px"></el-input>
|
</el-form-item> -->
|
<el-form-item label="收件人详细地址" required prop="consigneeAddress">
|
<el-input v-model="formData.consigneeAddress" style="width:410px" placeholder="请输入包含省市区的完整详细地址"></el-input>
|
</el-form-item>
|
<el-form-item label="保存收件人信息">
|
<el-switch v-model="formData.saveAddress"></el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<h4>寄件人信息</h4>
|
<el-form-item label="寄件人手机" required prop="billingMobile">
|
<!-- <el-input v-model="formData.billingMobile" class="w-250" placeholder="发件人联系手机"></el-input> -->
|
<input-select v-model="formData.billingMobile" :options="billingMobileList" :props="mobileProps" label="发件人联系手机" input-width="250px" trigger="focus" @on-key-up="(ref, val)=>{seacheBillingMobile(ref, val);}" @on-item-click="findAddressBillingInfo">
|
</input-select>
|
</el-form-item>
|
<el-form-item label="寄件人" required prop="billingName">
|
<el-input v-model="formData.billingName" class="w-250"></el-input>
|
</el-form-item>
|
<el-form-item label="寄件地址" required prop="billingAddress">
|
<el-input v-model="formData.billingAddress" class="w-400"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="保存寄件人信息">
|
<el-switch v-model="formData.xxxxx"></el-switch>
|
</el-form-item> -->
|
|
</el-col>
|
</el-row>
|
<div class="split-line margin-top-0"></div>
|
<el-form-item label="包裹毛重" required prop="grossWeight">
|
<el-input v-model.number="formData.grossWeight" class="w-300"></el-input> 千克(kg)
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="formData.remark" class="w-300" placeholder="长度限制在10个汉字内"></el-input>
|
</el-form-item>
|
<el-form-item style="padding-left:120px;">
|
<el-button type="warning" @click="goto(1)">上一步</el-button>
|
<el-button type="primary" @click="secondNext()">下一步</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div :class="{hidden:hiddenStep3}" class="step3">
|
<el-form :inline="true" :model="productSearchData">
|
<el-form-item label="关键词">
|
<el-input v-model="productSearchData.searchText" class="w-300" placeholder="条形码/物料名称/品牌/类别" @keydown.native.enter.stop="getChooseProductInfo"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getChooseProductInfo">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<el-row :gutter="20">
|
<el-col :span="10">
|
<el-card class="field-card">
|
<div slot="header" class="clearfix">
|
<span>可选物料信息</span>
|
</div>
|
<el-table :data="baseProductData" :max-height="300" size="mini" style="width: 100%">
|
<el-table-column prop="productModel" label="物料条码" width="130">
|
</el-table-column>
|
<el-table-column prop="productName" label="物料信息">
|
</el-table-column>
|
<el-table-column prop="cIQName" label="英文名称">
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="50">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="toWayBill(scope.row)">选中</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
<el-col :span="14">
|
<el-card class="field-card">
|
<div slot="header" class="clearfix">
|
<span>已添加物料信息</span>
|
</div>
|
<el-table :data="wayBillDetails" size="mini" style="width: 100%">
|
<el-table-column prop="productModel" label="物料条码" width="130">
|
</el-table-column>
|
<el-table-column prop="productName" label="物料信息">
|
</el-table-column>
|
<el-table-column prop="cIQName" label="英文名称" width="100">
|
</el-table-column>
|
<el-table-column prop="quantityOrder" label="物料数量">
|
<template slot-scope="scope">
|
<el-input-number v-model="scope.row.quantityOrder" size="mini" controls-position="right" class="w-70"></el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column prop="weight" label="净重(千克)">
|
<template slot-scope="scope">
|
<el-input-number v-model="scope.row.weight" size="mini" controls-position="right" class="w-70"></el-input-number>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column prop="grossWeight" label="毛重">
|
<template slot-scope="scope">
|
<el-input-number v-model="scope.row.grossWeight" size="mini" controls-position="right" class="w-70"></el-input-number> 千克
|
</template>
|
</el-table-column> -->
|
<el-table-column label="操作" width="60">
|
<template slot-scope="scope">
|
<el-button size="small" type="text" @click="deleteWayBill(scope)">移除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
</el-col>
|
</el-row>
|
<div class="margin-top-20 align-center">
|
<el-button type="warning" @click="goto(2)">上一步</el-button>
|
<el-button type="primary" @click="submitWayBill">确认提交</el-button>
|
</div>
|
</div>
|
<div :class="{hidden:hiddenStep4}" class="step4">
|
<div class="step4-finished">
|
<i class="el-icon-yrt-yduigouxuan icon"></i>
|
</div>
|
<div class="text">录入完成</div>
|
<div class="wayBillCode">运单号：{{ wayBillInfo.wayBillCode }}</div>
|
<el-button type="primary" @click="reStart">再来一单</el-button>
|
</div>
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import InputSelect from "@/components/base/InputSelect";
|
|
export default {
|
name: "user-way-editor",
|
components: {
|
InputSelect
|
},
|
data() {
|
return {
|
// 表单数据
|
formData: {
|
orderType: "仓配",
|
productLine: "标准线"
|
},
|
// 省市区加载
|
addressList: {
|
province: [],
|
sheng: "",
|
shi1: [],
|
qu1: [],
|
city: "",
|
block: ""
|
},
|
// 搜索手机下拉框
|
consigneeMobileList: [],
|
// 寄件人手机下拉
|
billingMobileList: [],
|
// 手机号下拉框属性选项
|
mobileProps: {
|
label: "mobile",
|
value: "mobile"
|
},
|
// 搜索手机下拉框加载
|
loading: false,
|
// 仓库下拉框值
|
storageList: [],
|
// 运单类型下拉框值
|
orderTypeList: [
|
{
|
value: "直邮",
|
label: "直邮"
|
},
|
{
|
value: "仓配",
|
label: "仓配"
|
}
|
],
|
// 运单类型下拉框值
|
productLineList: [
|
{
|
value: "标准线",
|
label: "标准线"
|
},
|
{
|
value: "专线",
|
label: "专线"
|
}
|
],
|
// 可选物料列表
|
baseProductData: [],
|
// 已选择物料列表
|
wayBillDetails: [],
|
// 物料查询条件
|
productSearchData: {},
|
// 步骤
|
step: 0,
|
// step1隐藏
|
hiddenStep1: false,
|
// step2隐藏
|
hiddenStep2: true,
|
// step3隐藏
|
hiddenStep3: true,
|
// step4隐藏
|
hiddenStep4: true,
|
// 验证规则
|
formRules: {
|
consigneeMobile: [
|
{
|
required: true,
|
trigger: "blur",
|
message: "手机号码不能为空"
|
},
|
{
|
type: "string",
|
trigger: "blur",
|
message: "手机号格式不正确",
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
|
}
|
],
|
consigneeName: [{ required: true, trigger: "blur", message: "收件人姓名不能为空！" }],
|
province_Id: [{ required: true, trigger: "blur", message: "收件人省市区不能为空！" }],
|
street: [{ required: true, trigger: "blur", message: "收件人街道不能为空！" }],
|
consigneeAddress: [
|
{
|
required: true,
|
trigger: "blur",
|
message: "收件人详细地址不能为空！"
|
}
|
],
|
billingMobile: [{ required: true, trigger: "blur", message: "寄件人手机号不能为空！" }],
|
billingName: [{ required: true, trigger: "blur", message: "寄件人不能为空！" }],
|
billingAddress: [{ required: true, trigger: "blur", message: "发件地址不能为空！" }],
|
grossWeight: [
|
{ required: true, trigger: "blur", message: "包裹重量不能为空！" },
|
{
|
type: "number",
|
trigger: "blur",
|
min: 0,
|
message: "包裹重量必须为数字！"
|
}
|
]
|
},
|
// 返回运单信息
|
wayBillInfo: {}
|
};
|
},
|
watch: {},
|
created() {
|
this.getStorageList();
|
this.getProvince();
|
},
|
methods: {
|
// 远程搜索手机号
|
sreachConsigneeMobile(ref, mobile) {
|
if (mobile) {
|
const url = "/api/tms/userSys/bill/getConsignorAddress";
|
const params = {
|
mobile: mobile,
|
type: "收件人"
|
};
|
this.loading = true;
|
var callback = res => {
|
this.loading = false;
|
if (res.result) {
|
this.consigneeMobileList = res.data;
|
} else {
|
this.common.showMsg(res);
|
}
|
};
|
this.common.ajax(url, params, callback, false);
|
}
|
},
|
seacheBillingMobile(ref, mobile) {
|
if (mobile) {
|
const url = "/api/tms/userSys/bill/getConsignorAddressBill";
|
const params = {
|
mobile: mobile,
|
type: "寄件人"
|
};
|
this.loading = true;
|
var callback = res => {
|
this.loading = false;
|
if (res.result) {
|
this.billingMobileList = res.data;
|
} else {
|
this.common.showMsg(res);
|
}
|
};
|
this.common.ajax(url, params, callback, false);
|
}
|
},
|
// 可选物料关键字搜索
|
getChooseProductInfo() {
|
var searchText = this.productSearchData.searchText;
|
if (!searchText) {
|
this.$message.error("请输入关键字搜索。");
|
return;
|
}
|
const url = "/api/tms/userSys/bill/getChooseBaseProductInfo";
|
const params = {
|
searchText: searchText
|
};
|
this.loading = true;
|
var callback = res => {
|
this.loading = false;
|
if (res.result) {
|
if (res.data.length === 0) {
|
this.$confirm("未检索到对应的物料，是否添加新物料?", {
|
confirmButtonText: "添加物料",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$router.push("/product/edit");
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消"
|
});
|
});
|
}
|
this.baseProductData = res.data;
|
} else {
|
this.common.showMsg(res);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
//
|
toWayBill(rows) {
|
// 如果WayBillList已经存在同样的Product_Id物料，数量加1
|
for (var index in this.wayBillDetails) {
|
if (this.wayBillDetails[index].product_Id === rows.product_Id) {
|
this.wayBillDetails[index].quantityOrder += 1;
|
return;
|
}
|
}
|
var wayBillInfo = {
|
product_Id: rows.product_Id,
|
cIQName: rows.cIQName,
|
productName: rows.productName,
|
productModel: rows.productModel,
|
ProductSpec: rows.ProductSpec,
|
quantityOrder: 1,
|
smallUnit: rows.smallUnit,
|
salePrice: rows.salePrice,
|
weight: rows.netWeight
|
// grossWeight: 0
|
};
|
this.$set(this.wayBillDetails, this.wayBillDetails.length, wayBillInfo);
|
},
|
// 寄件人手机号改变事件
|
findAddressBillingInfo(ref, label, itemData) {
|
var url = "/api/tms/userSys/bill/getConsignorAddressInfo";
|
var params = {
|
mobile: label
|
};
|
this.common.ajax(url, params, res => {
|
if (res.result) {
|
this.$set(this.formData, "billingName", res.data.consignee);
|
this.$set(this.formData, "billingAddress", res.data.detailAddress);
|
}
|
});
|
},
|
// 收件人手机号改变事件
|
findAddressInfo(ref, label, itemData) {
|
this.formData.consigneeName = itemData.consignee;
|
this.formData.consigneeIdcard = itemData.consigneeIdcard;
|
this.formData.province_Id = itemData.province_Id;
|
this.formData.ProvinceName = itemData.ProvinceName;
|
this.addressList.shi1 = [];
|
this.addressList.qu1 = [];
|
this.$set(this.formData, "city_Id", null);
|
this.$set(this.formData, "cityName", null);
|
this.$set(this.formData, "region_Id", null);
|
this.$set(this.formData, "regionName", null);
|
if (itemData.province_Id) {
|
this.getCity(itemData.province_Id, itemData.city_Id, itemData.cityName);
|
}
|
|
if (itemData.city_Id) {
|
this.getRegion(itemData.city_Id, itemData.region_Id, itemData.regionName);
|
}
|
this.formData.street = itemData.street;
|
this.formData.consigneeAddress = itemData.detailAddress;
|
},
|
// 选择发货信息-下一步
|
firstNext() {
|
// 非空验证
|
if (!this.formData.storage_Id) {
|
this.$message.error("请选择仓库继续。");
|
return;
|
}
|
|
if (!this.formData.orderType) {
|
this.$message.error("请选择订单类型继续。");
|
return;
|
}
|
this.goto(2);
|
},
|
// 填写包裹清单-下一步
|
secondNext() {
|
// 非空验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.goto(3);
|
} else {
|
this.$message.error("请正确填写表单信息");
|
return false;
|
}
|
});
|
},
|
// 提交运单
|
submitWayBill() {
|
var wayBillDetails = this.wayBillDetails;
|
var errormsg = "";
|
if (wayBillDetails.length === 0) {
|
this.$message.error("至少选择一个物料。");
|
return;
|
}
|
// 物品明细效验
|
for (var index in wayBillDetails) {
|
var inx = parseInt(index) + 1;
|
if (!wayBillDetails[index].quantityOrder || parseInt(wayBillDetails[index].quantityOrder) <= 0) {
|
errormsg += "物料明细第" + inx + "行请输入大于0的物料数量。";
|
break;
|
}
|
if (!wayBillDetails[index].weight || parseFloat(wayBillDetails[index].weight) <= 0) {
|
errormsg += "物料明细第" + inx + "行请输入大于0的物料净重。";
|
break;
|
}
|
|
// if (
|
// !wayBillDetails[index].grossWeight ||
|
// parseFloat(wayBillDetails[index].grossWeight) <= 0
|
// ) {
|
// errormsg += "物料明细第" + inx + "行请输入大于0的物料毛重。";
|
// break;
|
// }
|
}
|
if (errormsg) {
|
this.$message.error(errormsg);
|
return;
|
}
|
var userInfo = this.common.getUserInfo();
|
this.formData.consignor_Id = userInfo.user_Id;
|
this.formData.consignorCode = userInfo.userName;
|
this.formData.consignorName = userInfo.userTrueName;
|
for (var i in this.storageList) {
|
if (this.formData.storage_Id === this.storageList[i].storage_Id) {
|
this.formData.storageName = this.storageList[i].storageName;
|
}
|
}
|
// 提交信息
|
const url = "/api/tms/userSys/bill/saveWayBillInfo";
|
const params = {
|
wayBillInfo: this.formData,
|
wayBillDetails: this.wayBillDetails,
|
saveAddress: this.formData.saveAddress,
|
productLine: this.formData.productLine
|
};
|
var callback = res => {
|
if (res.result) {
|
this.goto(4);
|
this.resetForm();
|
this.getProvince();
|
this.wayBillInfo = res.data;
|
} else {
|
this.common.showMsg(res);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 重置表单
|
resetForm() {
|
var wayBillDetails = [
|
{
|
product_Id: null,
|
cIQName: null,
|
productName: null,
|
productModel: null,
|
ProductSpec: null,
|
quantityOrder: null,
|
smallUnit: null,
|
salePrice: null,
|
weight: null
|
// grossWeight: null
|
}
|
];
|
var addressList = {
|
province: [],
|
sheng: "",
|
shi1: [],
|
qu1: [],
|
city: "",
|
block: ""
|
};
|
var formData = {
|
// 总数量
|
totalQuantityOrder: null,
|
// 订单类型
|
orderType: this.formData.orderType
|
};
|
this.wayBillDetails = wayBillDetails;
|
this.addressList = addressList;
|
this.formData = formData;
|
this.baseProductData = [];
|
this.wayBillDetails = [];
|
this.productSearchData = {};
|
},
|
// 获得仓储列表
|
getStorageList() {
|
var url = "/api/basicInfo/base/storage/getList";
|
var params = {
|
isAll: true
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.storageList = res.data;
|
}
|
},
|
true
|
);
|
},
|
// 删除行
|
deleteWayBill(scope) {
|
this.wayBillDetails.splice(scope.$index, 1);
|
},
|
// 步骤跳转
|
goto(step) {
|
if (step === 1) {
|
this.step = 0;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
this.hiddenStep4 = true;
|
} else if (step === 2) {
|
this.step = 1;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
this.hiddenStep4 = true;
|
} else if (step === 3) {
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = false;
|
this.hiddenStep4 = true;
|
} else if (step === 4) {
|
this.step = 4;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
this.hiddenStep4 = false;
|
}
|
},
|
// 重新上传
|
reStart() {
|
this.step = 0;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
this.hiddenStep4 = true;
|
},
|
// 获取省数据
|
getProvince() {
|
const url = "/api/tms/userSys/bill/getCity";
|
const params = {
|
parentId: 0
|
};
|
var callback = res => {
|
if (res.result) {
|
this.addressList.province = [];
|
for (var index in res.data) {
|
var item = res.data[index];
|
this.addressList.province.push({
|
id: item.city_Id,
|
value: item.cityName,
|
parentId: item.parentId
|
});
|
}
|
} else {
|
this.common.showMsg(res);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 获取市数据
|
getCity(id, selectId, selectVal) {
|
const url = "/api/tms/userSys/bill/getCity";
|
const params = {
|
parentId: id
|
};
|
var callback = res => {
|
if (res.result) {
|
this.addressList.shi1 = [];
|
for (var index in res.data) {
|
var item = res.data[index];
|
this.addressList.shi1.push({
|
id: item.city_Id,
|
value: item.cityName,
|
parentId: item.parentId
|
});
|
}
|
if (selectId && selectVal) {
|
this.formData.city_Id = selectId;
|
this.formData.cityName = selectVal;
|
}
|
} else {
|
this.common.showMsg(res);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 获取区数据
|
getRegion(id, selectId, selectVal) {
|
const url = "/api/tms/userSys/bill/getCity";
|
const params = {
|
parentId: id
|
};
|
var callback = res => {
|
if (res.result) {
|
this.addressList.qu1 = [];
|
for (var index in res.data) {
|
var item = res.data[index];
|
this.addressList.qu1.push({
|
id: item.city_Id,
|
value: item.cityName,
|
parentId: item.parentId
|
});
|
}
|
if (selectId && selectVal) {
|
this.formData.region_Id = selectId;
|
this.formData.regionName = selectVal;
|
}
|
} else {
|
this.common.showMsg(res);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// 改变省
|
choseProvince: function(e) {
|
var that = this;
|
for (var a = 0; a < that.addressList.province.length; a++) {
|
var item = that.addressList.province[a];
|
if (e === item.id) {
|
that.formData.province_Id = item.id;
|
that.formData.ProvinceName = item.value;
|
this.$set(this.formData, "city_Id", null);
|
this.$set(this.formData, "cityName", null);
|
this.$set(this.formData, "region_Id", null);
|
this.$set(this.formData, "regionName", null);
|
that.addressList.qu1 = [];
|
this.getCity(item.id);
|
}
|
}
|
},
|
// 改变市
|
choseCity: function(e) {
|
var that = this;
|
for (var a = 0; a < that.addressList.shi1.length; a++) {
|
var item = that.addressList.shi1[a];
|
if (e === item.id) {
|
that.formData.city_Id = item.id;
|
that.formData.cityName = item.value;
|
this.$set(this.formData, "region_Id", null);
|
this.$set(this.formData, "regionName", null);
|
this.getRegion(item.id);
|
}
|
}
|
},
|
// 改变区
|
choseBlock: function(e) {
|
var that = this;
|
for (var i in that.addressList.qu1) {
|
var item = that.addressList.qu1[i];
|
if (e === item.id) {
|
this.$set(that.formData, "region_Id", item.id);
|
this.$set(that.formData, "regionName", item.value);
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.sub-item {
|
display: inline-block;
|
.sub-title {
|
width: 150px;
|
text-align: right;
|
font-weight: bold;
|
display: inline-block;
|
padding-right: 5px;
|
}
|
}
|
.step2 {
|
width: 1000px;
|
}
|
.step3 {
|
/deep/ .el-input-number.is-controls-right .el-input__inner {
|
padding-left: 5px;
|
padding-right: 30px;
|
}
|
}
|
.step4 {
|
margin-top: 50px;
|
text-align: center;
|
.step4-finished {
|
width: 80px;
|
height: 80px;
|
border-radius: 40px;
|
background-color: #409eff;
|
display: inline-block;
|
|
padding: 13px;
|
.icon {
|
font-size: 60px;
|
color: white;
|
}
|
}
|
.text {
|
font-size: 14px;
|
color: #888;
|
padding: 10px 30px 20px;
|
}
|
.wayBillCode {
|
font-size: 20px;
|
color: #888;
|
padding: 10px 30px 60px;
|
}
|
}
|
</style>
|
