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.
245 lines
6.8 KiB
245 lines
6.8 KiB
<template> |
|
<el-drawer |
|
:title="controlWindows.addInfo.title" |
|
direction="ltr" |
|
size="40%" |
|
:visible.sync="controlWindows.add" |
|
@opened="openDrawer" |
|
:before-close="closeWindow" |
|
> |
|
<div class="add"> |
|
<el-form ref="form" :model="form" :rules="rules" label-width="110px"> |
|
<el-form-item label="产品名称" prop="productName"> |
|
<el-input |
|
maxlength="50" |
|
v-model="form.productName" |
|
placeholder="请输入产品名称" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="产品类型" prop="productType"> |
|
<el-select v-model="form.productType" 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="refineryId"> |
|
<!-- <el-autocomplete |
|
label |
|
v-model="form.refineryId" |
|
:fetch-suggestions="querySearchAsync" |
|
value-key="refineryName" |
|
value="id" |
|
placeholder="请选择炼厂" |
|
></el-autocomplete> --> |
|
|
|
<autocomplete |
|
ref="autocomplete" |
|
:params="form" |
|
:config="configAutocomplete" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="所属炼厂库名" prop="belongLibrary"> |
|
<el-input |
|
v-model="form.belongLibrary" |
|
placeholder="请输入所属炼厂库名" |
|
></el-input> |
|
</el-form-item> |
|
<template v-if="!controlWindows.addInfo.id"> |
|
<el-form-item label="成本价" prop="floorPrice"> |
|
<el-input |
|
v-checkNum |
|
v-model="form.floorPrice" |
|
placeholder="请输入成本价" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="企业销售价" prop="salePrice2company"> |
|
<el-input |
|
v-checkNum |
|
v-model="form.salePrice2company" |
|
placeholder="请输入企业销售价" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="个人销售价" prop="salePrice2personal"> |
|
<el-input |
|
v-checkNum |
|
v-model="form.salePrice2personal" |
|
placeholder="请输入个人销售价" |
|
></el-input> |
|
</el-form-item> |
|
</template> |
|
<el-form-item label="计量单位" prop="measurement"> |
|
<el-input |
|
v-model="form.measurement" |
|
placeholder="请输入计量单位" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="启用状态" prop="enableMark"> |
|
<el-radio-group v-model="form.enableMark"> |
|
<el-radio label="ENABLE">启用</el-radio> |
|
<el-radio label="DISABLE">禁用</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="buttons"> |
|
<el-button @click="closeWindow">取消 </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, |
|
}, |
|
data() { |
|
let validatorRefineryId = (rule, value, callback) => { |
|
if (this.form.refineryId) callback(); |
|
else callback("请选择炼厂"); |
|
}; |
|
return { |
|
form: {}, |
|
refineryList: [], |
|
configAutocomplete: { |
|
serveTarget: refineryInfoServe.findByEntity, |
|
autocompleteKey: { |
|
key: "refineryName", |
|
enableMark: "ENABLE", |
|
}, |
|
labelKey: "refineryName", |
|
valueKey: "id", |
|
placeholder: "炼厂名称", |
|
querykey: "refineryId", |
|
echoId: "", |
|
echoName: "", |
|
}, |
|
productTypeList: [ |
|
{ |
|
label: "0#柴", |
|
value: "0#", |
|
}, |
|
{ |
|
label: "-10#柴", |
|
value: "-10#", |
|
}, |
|
{ |
|
label: "92#汽", |
|
value: "92#", |
|
}, |
|
{ |
|
label: "95#汽", |
|
value: "95#", |
|
}, |
|
], |
|
rules: { |
|
productName: [ |
|
{ required: true, message: "请输入产品名称", trigger: "blur" }, |
|
], |
|
productType: [ |
|
{ required: true, message: "请选择产品类型", trigger: "change" }, |
|
], |
|
refineryId: [ |
|
{ required: true, validator: validatorRefineryId, trigger: "change" }, |
|
], |
|
belongLibrary: [ |
|
{ required: true, message: "请输入所属炼厂库名", trigger: "blur" }, |
|
], |
|
floorPrice: [ |
|
{ required: true, message: "请输入成本价", trigger: "blur" }, |
|
], |
|
salePrice2company: [ |
|
{ required: true, message: "请输入企业销售价", trigger: "blur" }, |
|
], |
|
salePrice2personal: [ |
|
{ required: true, message: "请输入个人销售价", trigger: "blur" }, |
|
], |
|
measurement: [ |
|
{ required: true, message: "请输入计量单位", trigger: "blur" }, |
|
], |
|
enableMark: [ |
|
{ required: true, message: "请选择启用状态", trigger: "change" }, |
|
], |
|
}, |
|
}; |
|
}, |
|
methods: { |
|
openDrawer() { |
|
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; |
|
} |
|
}, |
|
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.save(form); |
|
}, |
|
|
|
closeWindow() { |
|
this.$emit("closeWindow"); |
|
this.form = {}; |
|
this.controlWindows.addInfo = {}; |
|
this.$nextTick(() => { |
|
this.$refs.autocomplete.list = []; |
|
this.$refs.form.clearValidate(); |
|
this.controlWindows.add = false; |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.add { |
|
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>
|
|
|