<!--下订单表单--> <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" placeholder="选择日期" style="width: 380px" /> </inputVue> </div> <div class="input-item"> <RedStar /> <inputVue title="交付日期" class="inputWidth"> <el-date-picker v-model="addInfo.deliveryDate" 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"> 删除 </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 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 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 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 { components: { RedStar, inputVue }, data() { return { brandName: '', categoryIds: '', productCode: '', productQuantity1: '', productPrice1: '', 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) { console.log(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.categoryList = res }), SelectList().then(res => { this.brandList = res }) }, methods: { save() { add(this.addInfo).then((res) => { console.log(res) }) this.addInfo = {} }, 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.addInfo.productList.productQuantity obj.productPrice = this.productPrice1 this.addInfo.productList.push(obj) this.brandName = '', this.categoryIds = '', this.productCode = '', this.productQuantity1 = '', this.productPrice1 = '' }, categoryIdChange(e) { const index = this.categoryList.findIndex(item => { return item.categoryName == e }) console.log(index) const code = this.categoryList[index].id console.log(code) list({ categoryId: code }).then(res => { console.log(res) this.CodeList = res }) } } } </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>