You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
8.7 KiB
315 lines
8.7 KiB
<template> |
|
<el-drawer |
|
:title="controlWindows.addInfo.title" |
|
direction="ltr" |
|
size="40%" |
|
:visible.sync="controlWindows.create" |
|
@opened="openDrawer" |
|
:before-close="closeWindow" |
|
> |
|
<div class="create" v-if="controlWindows.create"> |
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
|
<el-form-item label="客户名称" prop="customerId"> |
|
<el-select v-model="form.customerId" reserve-keyword remote :remote-method="customData" filterable placeholder="请选择客户"> |
|
<el-option |
|
v-for="(item, index) in customList" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.id" |
|
></el-option> |
|
</el-select> |
|
<!-- <el-input |
|
maxlength="50" |
|
v-model="form.productName" |
|
placeholder="请输入客户名称" |
|
></el-input> --> |
|
</el-form-item> |
|
<el-form-item label="炼厂名称" prop="refineryId"> |
|
<!-- <el-autocomplete |
|
label |
|
v-model="form.refineryId" |
|
:fetch-suggestions="querySearchAsync" |
|
value-key="refineryName" |
|
value="id" |
|
placeholder="炼厂名称" |
|
></el-autocomplete> --> |
|
|
|
<autocomplete :params="form" :config="configAutocomplete" /> |
|
</el-form-item> |
|
<el-form-item label="产品类型" prop="productType"> |
|
<!-- <autocomplete :params="form" :config="configAutocompleteCp" /> --> |
|
<el-select v-model="form.productType" @change="productChange" placeholder="请选择产品类型"> |
|
<el-option |
|
v-for="(item, index) in productTypeList" |
|
:key="index" |
|
:label="item.label" |
|
:value="item.value" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="产品名称" prop="productId"> |
|
<el-select :disabled="rowCreate" v-model="form.productId" @change="productDataList" placeholder="请选择产品类型"> |
|
<el-option |
|
v-for="(item, index) in productNameList" |
|
:key="index" |
|
:label="item.productName" |
|
:value="item.id" |
|
></el-option> |
|
</el-select> |
|
<!-- <el-input |
|
maxlength="50" |
|
v-model="form.productName" |
|
placeholder="请输入产品名称" |
|
></el-input> --> |
|
</el-form-item> |
|
<el-form-item label="销售价"> |
|
<el-input |
|
maxlength="50" |
|
v-model="form.salePrice" |
|
placeholder="请输入销售价" |
|
disabled |
|
></el-input> |
|
元/吨 |
|
</el-form-item> |
|
<el-form-item label="预约提货量"> |
|
<el-input |
|
maxlength="50" |
|
v-model="form.preQuantity" |
|
placeholder="请输入预约提货量" |
|
></el-input> |
|
吨 |
|
</el-form-item> |
|
<el-form-item label="订单金额"> |
|
<el-input |
|
maxlength="50" |
|
v-model="form.preAmount" |
|
disabled |
|
></el-input> |
|
元 |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="buttons"> |
|
<el-button @click="controlWindows.create = false">取消 </el-button> |
|
<el-button @click="submit">确定</el-button> |
|
</div> |
|
</el-drawer> |
|
</template> |
|
|
|
<script> |
|
import serve from "api/product.js"; |
|
|
|
import autocomplete from "components/autocomplete/index.vue"; |
|
export default { |
|
components: { |
|
autocomplete, |
|
}, |
|
props: { |
|
controlWindows: Object, |
|
// refineryTypeEnum: Array, |
|
}, |
|
watch:{ |
|
"form.salePrice": { |
|
handler(n, o) { |
|
if(n){ |
|
this.form.preAmount = this.form.salePrice*(this.form.preQuantity?this.form.preQuantity:0) |
|
} |
|
}, |
|
}, |
|
"form.preQuantity": { |
|
handler(n, o) { |
|
if(n){ |
|
this.form.preAmount = this.form.preQuantity*(this.form.salePrice?this.form.salePrice:0) |
|
} |
|
}, |
|
} |
|
}, |
|
data() { |
|
let validatorRefineryId = (rule, value, callback) => { |
|
if (this.form.refineryId) callback(); |
|
else callback("请选择炼厂"); |
|
}; |
|
return { |
|
customList:[], |
|
form: { |
|
preAmount:0 |
|
}, |
|
productNameList:[], |
|
refineryList: [], |
|
productRowData:{}, |
|
configAutocomplete: { |
|
serveTarget: serve.findByEntity, |
|
autocompleteKey: "refineryName", |
|
labelKey: "refineryName", |
|
valueKey: "id", |
|
placeholder: "炼厂名称", |
|
querykey: "refineryId", |
|
echoId: "", |
|
echoName: "", |
|
}, |
|
rowCreate:false, |
|
productTypeList: [ |
|
{ |
|
label: "0#柴", |
|
value: "0#", |
|
}, |
|
{ |
|
label: "-10#柴", |
|
value: "-10#", |
|
}, |
|
{ |
|
label: "92#汽", |
|
value: "92#", |
|
}, |
|
{ |
|
label: "95#汽", |
|
value: "95#", |
|
}, |
|
], |
|
rules: { |
|
customerId: [ |
|
{ required: true, message: "请输入客户名称", trigger: "blur" }, |
|
], |
|
productId: [ |
|
{ required: true, message: "请输入产品名称", trigger: "change" }, |
|
], |
|
refineryId: [ |
|
{ required: true, validator: validatorRefineryId, trigger: "change" }, |
|
], |
|
enableMark: [ |
|
{ required: true, message: "请选择启用状态", trigger: "change" }, |
|
], |
|
productType: [ |
|
{ required: true, message: "请选择产品类型", trigger: "change" }, |
|
], |
|
}, |
|
}; |
|
}, |
|
methods: { |
|
productDataList(e){ |
|
console.log(e,'ppppppppppppppp') |
|
this.productRowData = this.productNameList.filter( |
|
(item) => item.id == e |
|
); |
|
this.form.salePrice = this.productRowData[0].salePrice2company |
|
this.form.floorPrice = this.productRowData[0].floorPrice |
|
this.form.productMeasurement = this.productRowData[0].measurement |
|
}, |
|
productChange(){ |
|
this.productData() |
|
}, |
|
//搜索炼厂 |
|
refineryData(value){ |
|
if (value) { |
|
serve.findByEntity({refineryName:value}).then((res) => { |
|
this.refineryList = res.data; |
|
}); |
|
this.productData() |
|
} |
|
}, |
|
//搜索产品 |
|
async productData(){ |
|
let data = { |
|
refineryId:this.form.refineryId, |
|
productType:this.form.productType, |
|
enableMark:'ENABLE' |
|
} |
|
await serve.getRefineryProductList(data).then((res) => { |
|
if(res.data.length>0){ |
|
this.productNameList = res.data; |
|
}else{ |
|
this.productNameList = [] |
|
this.form.productId = '' |
|
} |
|
|
|
}) |
|
// this.form.productId = this.productNameList[0].productId |
|
console.log(this.productRowData,this.productNameList,'aaaaaaaaaa') |
|
}, |
|
//搜索客户 |
|
customData(value){ |
|
if (value) { |
|
serve.getRefineryCompanyList({name:value}).then((res) => { |
|
this.customList = res.data; |
|
}); |
|
} |
|
}, |
|
openDrawer() { |
|
this.form = {} |
|
let { id } = this.controlWindows.addInfo; |
|
if (id) { |
|
//回显 |
|
this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo)); |
|
this.configAutocomplete.echoId = id; |
|
this.configAutocomplete.echoName = this.form.refineryName; |
|
this.form.salePrice = this.form.salePrice2company |
|
this.form.productId = this.form.id |
|
delete this.form.id |
|
this.rowCreate = true |
|
this.productChange() |
|
|
|
console.log("this.form", this.form); |
|
}else{ |
|
this.rowCreate = false |
|
} |
|
}, |
|
submit() { |
|
this.$refs["form"].validate((valid) => { |
|
if (valid) { |
|
|
|
this.judgeInterface(this.form).then((res) => { |
|
if (res.code === 20000) { |
|
this.$message.success(res.msg); |
|
this.closeWindow(); |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
judgeInterface(form) { |
|
// let { id } = this.controlWindows.addInfo; |
|
// if (id) return serve.update(form); |
|
// else |
|
return serve.orderSave(form); |
|
}, |
|
closeWindow() { |
|
this.$emit("closeWindow"); |
|
this.form = {}; |
|
this.customList = [] |
|
this.controlWindows.addInfo = {}; |
|
this.configAutocomplete = {} |
|
this.productNameList = [] |
|
this.$refs.form.clearValidate(); |
|
this.controlWindows.create = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.create { |
|
padding: 20px; |
|
.el-input, |
|
.el-select, |
|
.el-textarea, |
|
.el-autocomplete { |
|
width: 300px; |
|
} |
|
} |
|
.buttons { |
|
position: absolute; |
|
left: 0; |
|
bottom: 0; |
|
padding-right: 40px; |
|
width: 100%; |
|
height: 80px; |
|
line-height: 80px; |
|
text-align: right; |
|
border-top: 1px solid #f2f3f5; |
|
.el-button { |
|
text-align: right; |
|
font-size: 14px; |
|
border-radius: 5px; |
|
} |
|
} |
|
</style>
|
|
|