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.
307 lines
8.5 KiB
307 lines
8.5 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-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"> |
|
<el-select |
|
v-model="form.productType" |
|
@change="productChange" |
|
placeholder="请选择产品类型" |
|
> |
|
<el-option |
|
v-for="(item, index) in productTypeList" |
|
:key="index" |
|
:label="item" |
|
:value="item" |
|
></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 refineryInfoServe from "api/refineryInfo.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) |
|
).toFixed(2); |
|
} |
|
}, |
|
}, |
|
"form.preQuantity": { |
|
handler(n, o) { |
|
if (n) { |
|
this.form.preAmount = ( |
|
this.form.preQuantity * |
|
(this.form.salePrice ? this.form.salePrice : 0) |
|
).toFixed(2); |
|
} |
|
}, |
|
}, |
|
}, |
|
data() { |
|
let validatorRefineryId = (rule, value, callback) => { |
|
if (this.form.refineryId) callback(); |
|
else callback("请选择炼厂"); |
|
}; |
|
return { |
|
rowCreate: false, |
|
customList: [], |
|
form: { |
|
preAmount: 0, |
|
}, |
|
productNameList: [], |
|
refineryList: [], |
|
productRowData: {}, |
|
configAutocomplete: { |
|
serveTarget: serve.findByEntity, |
|
autocompleteKey: { |
|
key: "refineryName", |
|
}, |
|
labelKey: "refineryName", |
|
valueKey: "id", |
|
placeholder: "炼厂名称", |
|
querykey: "refineryId", |
|
echoId: "", |
|
echoName: "", |
|
}, |
|
productTypeList: ["0#柴", "-10#柴", "92#汽", "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) { |
|
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(); |
|
} |
|
}, |
|
//搜索产品 |
|
productData() { |
|
let data = { |
|
refineryId: this.form.refineryId, |
|
productType: this.form.productType, |
|
enableMark: "ENABLE", |
|
}; |
|
serve.getRefineryProductList(data).then((res) => { |
|
if (res.data.length > 0) { |
|
this.productNameList = res.data; |
|
} else { |
|
this.productNameList = []; |
|
this.form.productId = ""; |
|
} |
|
}); |
|
console.log(this.productRowData, "aaaaaaaaaa"); |
|
}, |
|
//搜索客户 |
|
customData(value) { |
|
if (value) { |
|
serve.getRefineryCompanyList({ name: value }).then((res) => { |
|
this.customList = res.data; |
|
this.form.customerId = this.$store.state.user.companyId; |
|
console.log(this.form.customerId, "ssssaaaaaaaaaaaaaaa"); |
|
}); |
|
} |
|
}, |
|
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(); |
|
this.customData(this.$store.state.user.userCompanyName); |
|
|
|
console.log("this.form", this.$store.state.user, 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.controlWindows.addInfo = {}; |
|
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>
|
|
|