油批
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

<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>