<!--下订单表单-->
<template>
<div class="order-container">
<div class="order-from">
<div class="order-title">下订单</div>
<div class="order-inputBox">
<div class="input-item">
<RedStar />
<inputVue
v-model="addInfo.userName"
title="下单人"
placeholder="请输入下单人姓名"
class="inputWidth"
width="380px"
/>
</div>
<div class="input-item">
<RedStar />
<inputVue
v-model="addInfo.userPhone"
title="联系方式"
placeholder="请输入联系方式"
class="inputWidth"
width="380px"
/>
</div>
</div>
<div class="order-inputBox">
<div class="input-item">
<RedStar />
<inputVue title="签订日期" class="inputWidth">
<el-date-picker
v-model="addInfo.signDate"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
style="width: 380px"
/>
</inputVue>
</div>
<div class="input-item">
<RedStar />
<inputVue title="交付日期" class="inputWidth">
<el-date-picker
v-model="addInfo.deliveryDate"
value-format="yyyy-MM-dd HH:mm:ss"
type="date"
placeholder="选择日期"
style="width: 380px"
/>
</inputVue>
</div>
</div>
<div class="order-inputBox">
<div class="input-item">
<RedStar />
<inputVue title="交付地址" class="inputWidth">
<el-select
v-model="addInfo.deliveryProvince"
clearable
placeholder="省/市"
style="width: 150px; margin-left: 55px"
@change="provinceChange($event)"
>
<el-option
v-for="item in form.provinceList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</inputVue>
<inputVue title="" class="inputWidth">
<el-select
v-model="addInfo.deliveryCity"
clearable
placeholder="市/区"
style="width: 150px"
@change="cityChange($event)"
>
<el-option
v-for="item in form.cityList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</inputVue>
<inputVue title="" class="inputWidth">
<el-select
v-model="addInfo.deliveryArea"
clearable
placeholder="县/街道"
style="width: 150px"
>
<el-option
v-for="item in form.countyList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</inputVue>
<inputVue
v-model="addInfo.deliveryAddress"
placeholder="请输入详细地址"
class="inputWidth"
width="440px"
/>
</div>
</div>
<div class="order-inputBox">
<div class="input-item">
<RedStar />
<inputVue
v-model="addInfo.receiver"
title="收货人"
placeholder="请输入收货人姓名"
class="inputWidth"
width="380px"
/>
</div>
<div class="input-item">
<RedStar />
<inputVue
v-model="addInfo.receiverPhone"
title="收货人联系方式"
placeholder="请输入联系方式"
class="inputWidth"
width="380px"
/>
</div>
</div>
<div class="order-inputBox">
<div class="input-item">
<inputVue title="备注" class="inputWidth">
<el-input
v-model="addInfo.remark"
type="textarea"
:rows="4"
placeholder="请输入备注"
style="width: 380px"
/>
</inputVue>
</div>
</div>
</div>
<div class="order-list">
<div class="title-box">
<div class="list-title">产品列表</div>
</div>
<div class="order-table">
<el-table
:data="addInfo.productList"
:header-cell-style="{ background: '#2483b3', color: 'white' }"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="171px" />
<el-table-column prop="brandName" label="产品品牌" />
<el-table-column prop="categoryIds" label="产品品类" />
<el-table-column prop="productCode" label="产品型号" />
<el-table-column prop="productQuantity" label="产品数量" />
<el-table-column prop="productPrice" label="产品单价" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="deleteTableDataClick(scope.$index, scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-table :data="productList" :show-header="false" style="width: 100%">
<el-table-column prop="index" label="序号" width="171px" />
<el-table-column prop="brandName" label="产品品牌">
<template slot-scope="scope">
<el-select v-model="brandName" clearable placeholder="请选择">
<el-option
v-for="item in list.brandList"
:key="item.brandCode"
:label="item.brandName"
:value="item.brandName"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="categoryIds" label="产品品类">
<template slot-scope="scope">
<el-select v-model="categoryIds" clearable placeholder="请选择" @change="categoryIdChange">
<el-option
v-for="item in list.categoryList"
:key="item.id"
:label="item.categoryName"
:value="item.categoryName"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="productCode" label="产品型号">
<el-select v-model="productCode" clearable placeholder="请选择">
<el-option
v-for="item in list.codeList"
:key="item.id"
:label="item.productCode"
:value="item.productCode"
/>
</el-select>
</el-table-column>
<el-table-column prop="productQuantity" label="产品数量">
<el-input
v-model="addInfo.productList.productQuantity"
placeholder="请输入内容"
/>
</el-table-column>
<el-table-column prop="productPrice" label="产品单价">
<el-input v-model="productPrice1" placeholder="请输入内容" />
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="addTableDataClick"> 保存 </el-button>
</template>
</el-table-column>
</el-table>
<!-- <div class="inputContainer">
<div class="inputItem"> <input type="text" ></div>
<div class="inputItem" > <input type="text" ></div>
<div class="inputItem"> <input type="text" ></div>
<div class="inputItem"> <input type="text" ></div>
<div class="inputbtn"> <el-button>保存</el-button></div>
</div> -->
</div>
</div>
<div class="btnBox">
<el-button type="primary" class="save" @click="save"> 保存 </el-button>
<!-- <el-button type="info" class="close">取消</el-button> -->
</div>
</div>
</template>
<script>
import RedStar from "../../components/mycomponent/redStar.vue";
import inputVue from "../../components/mycomponent/input/inputVue.vue";
import { add, order_area } from "../../api/order/order";
import { C_list } from "../../api/product/category";
import { SelectList } from "../../api/product/brand";
import { list } from "../../api/product/product";
export default {
name:'orderShop',
components: {
RedStar,
inputVue,
},
data() {
return {
brandName: "",
categoryIds: "",
productCode: "",
productQuantity1: "",
productPrice1: "",
list: {
codeList: [],
brandList: [],
categoryList: [],
},
productList: [{ index: "" }],
isShowAdd: false, // 添加采购需求
options: {},
addInfo: {
userName: "", // 下单人
userPhone: "", // 联系方式
signDate: "", // 签订日期
deliveryDate: "", // 交付日期
deliveryProvince: "", // 地址-省
deliveryCity: "", // 地址-市
deliveryArea: "", // 地址-区
deliveryAddress: "", // 详细地址
receiver: "", // 收货人
receiverPhone: "", // 收货人联系方式
remark: "", // 备注
productList: [],
},
form: {
provinceList: [],
cityList: [],
countyList: [],
},
CITY: [],
XIAN: [],
};
},
watch: {
addInfo: {
handler(newval, oldval) {
if (!this.addInfo.deliveryProvince) {
this.addInfo.deliveryCity = "";
this.addInfo.deliveryArea = "";
} else if (!this.addInfo.deliveryCity) {
this.addInfo.deliveryArea = "";
}
},
deep: true,
immediate: true,
},
},
mounted() {
order_area("pid=0", {}).then((res) => {
console.log(res, "Sheng");
this.form.provinceList = res;
});
C_list().then((res) => {
// 获取产品品类列表
this.list.categoryList = res.data;
}),
SelectList().then((res) => {
// 获取产品品牌列表
this.list.brandList = res;
});
},
methods: {
save() {
if (this.valiateProduct()) {
if (this.valiateForm()) {
add(this.addInfo).then((res) => {
// 添加成功
this.$message({
message: "保存成功",
type: "success",
});
this.addInfo = {
userName: "", // 下单人
userPhone: "", // 联系方式
signDate: "", // 签订日期
deliveryDate: "", // 交付日期
deliveryProvince: "", // 地址-省
deliveryCity: "", // 地址-市
deliveryArea: "", // 地址-区
deliveryAddress: "", // 详细地址
receiver: "", // 收货人
receiverPhone: "", // 收货人联系方式
remark: "", // 备注
productList: [],
};
});
}
}
},
provinceChange(that) {
console.log(that);
order_area(`pid=${that}`, {}).then((res) => {
console.log(res, "Shi");
this.form.cityList = res;
});
},
cityChange(that) {
console.log(that);
order_area(`pid=${that}`, {}).then((res) => {
console.log(res, "Xian");
this.form.countyList = res;
});
},
showAddDialogClick() {
this.isShowAdd = true;
},
close() {
this.isShowAdd = false;
},
addTableDataClick() {
const obj = {};
obj.brandName = this.brandName;
obj.categoryIds = this.categoryIds;
obj.productCode = this.productCode;
obj.productQuantity = this.productQuantity1;
obj.productPrice = this.productPrice1;
this.addInfo.productList.push(obj);
(this.brandName = ""),
(this.categoryIds = ""),
(this.productCode = ""),
(this.productQuantity1 = ""),
(this.productPrice1 = "");
},
deleteTableDataClick(tabIndex, row) {
this.addInfo.productList = this.addInfo.productList.filter(
(product, index) => {
return index !== tabIndex;
}
);
},
categoryIdChange(e) {
const index = this.list.categoryList.findIndex((item) => {
return item.categoryName == e;
});
console.log(index);
const code = this.list.categoryList[index].id;
console.log(code);
// 获取产品型号列表
list({ categoryId: code }).then((res) => {
this.list.CodeList = res;
});
},
valiateProduct() {
// 验证产品列表
if (this.addInfo.productList.length) {
return true;
} else {
this.$message({
message: "产品列表不能为空",
type: "error",
});
return false;
}
},
valiateForm() {
const {
addInfo: {
userName,
userPhone,
signDate,
deliveryDate,
deliveryProvince,
deliveryCity,
deliveryArea,
deliveryAddress,
receiver,
receiverPhone,
},
} = this;
if (
userName &&
userPhone &&
signDate &&
deliveryDate &&
deliveryProvince &&
deliveryCity &&
deliveryArea &&
deliveryAddress &&
receiver &&
receiverPhone
) {
return true;
} else {
this.$message({
message: "请先填写完整订单信息",
type: "error",
});
return false;
}
},
},
};
</script>
<style lang="scss" scoped>
.order-container {
.order-from {
.order-title {
height: 60px;
line-height: 40px;
position: relative;
padding: 10px 0 10px 20px;
font-weight: bold;
color: white;
background-color: #28739e;
font-size: 16px;
}
.order-inputBox {
display: flex;
margin-left: 20px;
.input-item {
display: flex;
width: 540px;
align-items: center;
justify-content: space-between;
}
}
}
.order-list {
.title-box {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #28739e;
}
.order-table {
margin-top: 20px;
}
}
.btnBox {
padding: 30px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-evenly;
.save,
.close {
width: 100px;
}
}
}
</style>
