<template>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>新增物料</span>
|
</div>
|
<div class="margin-top-30">
|
<el-steps :active="step" finish-status="success">
|
<el-step title="搜索物料"></el-step>
|
<el-step title="填写物料详细信息"></el-step>
|
<el-step title="提交完成"></el-step>
|
</el-steps>
|
<div class="split-line"></div>
|
<div ref="step1" :class="{hidden:hiddenStep1}" class="step1">
|
<el-form :inline="true" label-width="250px">
|
<el-form-item label="关键词">
|
<el-input v-model="searchKey" style="width:310px" placeholder="请选择物料编号/条码/名称" @keyup.native.enter="searchProductList"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-yrt-chaxun2" @click="searchProductList">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
<div v-if="showSearchResult">
|
<h4>搜索结果</h4>
|
<el-table :data="productSearchList" size="mini" style="width: 100%">
|
<el-table-column prop="productModel" label="物料条码" width="130">
|
</el-table-column>
|
<el-table-column prop="productCode" label="物料编号" width="100">
|
</el-table-column>
|
<el-table-column prop="productName" label="中文名称">
|
</el-table-column>
|
<el-table-column prop="cIQName" label="英文名称">
|
</el-table-column>
|
<el-table-column prop="auditing" label="审核状态">
|
<template slot-scope="{ row, column, $index }">
|
<el-tag v-if="row.auditing===0" color="#ffff33" style="color:red;border:0">
|
待审核
|
</el-tag>
|
<el-tag v-else-if="row.auditing===1" color="#ff0033" style="color:white;border:0">
|
审核失败
|
</el-tag>
|
<el-tag v-else-if="row.auditing===2" color="#33cc33" style="color:black;border:0;color:#fff;">
|
通过审核
|
</el-tag>
|
<span v-else>
|
{{ row.auditing }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="brandName" label="品牌名称">
|
</el-table-column>
|
<el-table-column prop="typeName" label="类别名称">
|
</el-table-column>
|
<el-table-column prop="productSpec" label="物料规格">
|
</el-table-column>
|
<!-- <el-table-column fixed="right" label="操作" width="100">
|
<template slot-scope="{ row, column, $index }">
|
<el-button v-if="row.auditing===0" type="text" size="small" @click="hurryAuditing(scope.row)">通知审核</el-button>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
<div class="padding-0-10">
|
<el-alert :closable="false" title="提示" type="warning" description="如果您没有找到对应的物料，您需要发布新物料。" show-icon class="margin-20-0 w-500 left">
|
</el-alert>
|
<el-button type="primary" class="left margin-30" @click="firstNext()">发布新物料</el-button>
|
</div>
|
</div>
|
</div>
|
<div :class="{hidden:hiddenStep2}" class="step2">
|
<h4>请输入新物料信息</h4>
|
<el-form ref="form" :model="formData" :rules="formRules" label-width="120px" class="margin-top-30">
|
<el-form-item label="选择类目" required prop="fullType_Id">
|
<el-cascader :options="typeList" v-model="formData.fullType_Id" class="w-400" @change="changeProductType">
|
</el-cascader>
|
</el-form-item>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="货主名称" required prop="consignorName">
|
<el-input v-model="formData.consignorName" readonly class="w-230 readonly" placeholder="请选择货主"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="条形码" required prop="productModel">
|
<el-input v-model="formData.productModel" class="w-230" placeholder="请输入条形码"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="中文名称" required prop="productName">
|
<el-input v-model="formData.productName" class="w-230" placeholder="请输入中文名称"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="规格" required prop="productSpec">
|
<el-input v-model="formData.productSpec" class="w-230" placeholder="请输入规格"></el-input>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="8">
|
<el-form-item label="供应商" required prop="providerShortName">
|
<el-select v-model="formData.provider_Id" placeholder="请输入供应商" class="w-230" @change="changeProvider">
|
<el-option v-for="item in providerList" :key="item.provider_Id" :label="item.providerShortName" :value="item.provider_Id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col> -->
|
<el-col :span="8">
|
<el-form-item label="英文名称" required prop="cIQName">
|
<el-input v-model="formData.cIQName" class="w-230" placeholder="请输入英文名称"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="币种" required prop="currency">
|
<el-input v-model.number="formData.currency" :min="0" class="w-230" placeholder="请输入币种"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<!-- <el-form-item label="品牌名称" required prop="Brand_Id">
|
<el-select v-model="formData.Brand_Id" placeholder="请选择品牌" class="w-230" @change="changeBrand">
|
<el-option v-for="item in brandList" :key="item.Brand_Id" :label="item.brandName" :value="item.Brand_Id">
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="品牌名称" prop="brandName">
|
<el-input v-model="formData.brandName" class="w-230" placeholder="请输入条形码"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="单位" required prop="smallUnit">
|
<el-select v-model="formData.smallUnit" placeholder="请选择单位" filterable class="w-230">
|
<el-option v-for="item in unitList" :key="item.value02" :label="item.value02" :value="item.value02">
|
</el-option>
|
</el-select>
|
<!-- <input-select v-model="formData.smallUnit" :options="unitList" :props="mobileProps" label="单位" input-width="230px" trigger="focus" @on-key-up="(ref, val)=>{onMobileKeyup(ref, val);}">
|
</input-select> -->
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="原产地" required prop="originPlace">
|
<el-input v-model="formData.originPlace" class="w-230" placeholder="请输入原产地"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="净重" required prop="netWeight">
|
<el-input v-model.number="formData.netWeight" :min="0" class="w-230" placeholder="请输入净重"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="单价（CNY）" required prop="salePrice">
|
<el-input v-model.number="formData.salePrice" :min="0" class="w-230" placeholder="请输入销售价（CNY）"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="formData.remark" class="w-230" placeholder="请输入备注"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<!-- <el-row>
|
<el-col :span="8">
|
<el-form-item label="行政税号" prop="AdministrativeCode">
|
<el-input v-model.number="formData.AdministrativeCode" :min="0" class="w-230" placeholder="请输入行政税号"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row> -->
|
</el-form>
|
<div class="margin-top-20 align-center">
|
<el-button type="warning" @click="goto(1)">上一步</el-button>
|
<el-button type="primary" @click="submit">确认提交</el-button>
|
</div>
|
</div>
|
<div :class="{hidden:hiddenStep3}" class="step3">
|
<div class="step4-finished">
|
<i class="el-icon-yrt-yduigouxuan icon"></i>
|
</div>
|
<div class="text">录入完成</div>
|
<el-button type="primary" @click="reStart">再来一单</el-button>
|
</div>
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import InputSelect from "@/components/base/InputSelect";
|
import TableSelect from "@/components/base/TableSelect";
|
|
export default {
|
name: "user-product-editor",
|
components: {
|
InputSelect,
|
TableSelect
|
},
|
data() {
|
return {
|
// 表单数据
|
formData: {
|
fullType_Id: null,
|
consignorName: null
|
},
|
// 搜索手机下拉框加载
|
loading: false,
|
// 物料查询条件
|
productSearchList: [],
|
// 查询条件key
|
searchKey: null,
|
// 显示查询结果
|
showSearchResult: false,
|
// 步骤
|
step: 0,
|
// step1隐藏
|
hiddenStep1: false,
|
// step2隐藏
|
hiddenStep2: true,
|
// step3隐藏
|
hiddenStep3: true,
|
// 类目级联数据
|
typeList: [],
|
// 供应商信息
|
providerList: [],
|
// 品牌信息
|
brandList: [],
|
// 单位
|
unitList: [],
|
// 手机号下拉框属性选项
|
mobileProps: {
|
label: "smallUnit",
|
value: "smallUnit"
|
},
|
// 验证规则
|
formRules: {
|
fullType_Id: [{ required: true, trigger: "blur", message: "类目不能为空" }],
|
productModel: [{ required: true, trigger: "blur", message: "条形码不能为空" }],
|
productName: [{ required: true, trigger: "blur", message: "中文名称不能为空" }],
|
// providerShortName: [
|
// { required: true, trigger: "blur", message: "供应商不能为空" }
|
// ],
|
smallUnit: [{ required: true, trigger: "blur", message: "单位不能为空" }],
|
productSpec: [{ required: true, trigger: "blur", message: "规格不能为空" }],
|
cIQName: [{ required: true, trigger: "blur", message: "英文名称不能为空" }],
|
// Brand_Id: [
|
// { required: true, trigger: "blur", message: "品牌名称不能为空" }
|
// ],
|
originPlace: [{ required: true, trigger: "blur", message: "原产地不能为空" }],
|
netWeight: [{ required: true, trigger: "blur", message: "净重不能为空" }],
|
salePrice: [{ required: true, trigger: "blur", message: "单价不能为空" }],
|
currency: [{ required: true, trigger: "blur", message: "币种不能为空" }]
|
}
|
};
|
},
|
created() {
|
this.initData();
|
const userInfo = this.common.getUserInfo();
|
this.formData.consignor_Id = userInfo.consignor_Id;
|
this.formData.consignorCode = userInfo.consignorCode;
|
this.formData.consignorName = userInfo.consignorName;
|
},
|
methods: {
|
// 获得类别数据、供应商、品牌、单位
|
initData() {
|
// 初始化基础数据
|
const url = "/api/tms/userSys/product/initData";
|
const params = {};
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.providerList = res.data.providerList;
|
this.brandList = res.data.brandList;
|
this.unitList = res.data.unitList;
|
this.typeList = res.data.typeList;
|
}
|
});
|
},
|
// 单位输入改变后
|
onMobileKeyup(ref, val) {
|
if (!val) {
|
this.unitList = [];
|
return;
|
}
|
const url = "/api/tms/userSys/product/getUnitList";
|
const params = {
|
name: val
|
};
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.unitList = res.data;
|
}
|
});
|
},
|
// 手机号下拉框项单击事件
|
// onMobileItemClick(ref, label, itemData) {
|
// this.formData.ConsigneeIdcard = itemData.IdCardCode;
|
// this.formData.ConsigneeName = itemData.FullName;
|
// },
|
// 查询物料信息
|
searchProductList() {
|
this.showSearchResult = true;
|
const url = "/api/tms/userSys/product/searchProductList";
|
const params = {
|
code: this.searchKey
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.productSearchList = res.data;
|
}
|
},
|
this.$refs["step1"]
|
);
|
},
|
// 选择类目事件
|
changeProductType(valArr, ss) {
|
var labels = [];
|
var children = this.typeList;
|
valArr.forEach(id => {
|
var option = children.find(type => {
|
return type.value === id;
|
});
|
labels.push(option.label);
|
children = option.children;
|
});
|
// 类目名称集合
|
this.formData.fullTypeName = labels;
|
this.formData.Type_Id = this.formData.fullType_Id[this.formData.fullType_Id.length - 1];
|
this.formData.typeName = this.formData.fullTypeName[this.formData.fullTypeName.length - 1];
|
},
|
// 选择供应商事件
|
changeProvider(val) {
|
var option = this.providerList.find(item => {
|
return item.provider_Id === val;
|
});
|
this.formData.providerShortName = option.providerShortName;
|
},
|
// 选择供应商事件
|
changeBrand(val) {
|
var option = this.brandList.find(item => {
|
return item.Brand_Id === val;
|
});
|
this.formData.brandName = option.brandName;
|
},
|
// 选择发货信息-下一步
|
firstNext() {
|
this.goto(2);
|
},
|
// 提交数据
|
submit() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
// 提交信息
|
const url = "/api/tms/userSys/product/addProduct";
|
const params = Object.assign({}, this.formData);
|
params.fullTypeName = params.fullTypeName.join("/");
|
params.fullType_Id = params.fullType_Id.join("/");
|
|
// 默认供应商
|
params.provider_Id = 916;
|
params.providerCode = "PV201840363";
|
params.providerShortName = "默认供应商";
|
var callback = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.goto(3);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
} else {
|
this.$message.show("请正确填写物料表单信息");
|
return false;
|
}
|
});
|
},
|
// 步骤跳转
|
goto(step) {
|
if (step === 1) {
|
this.step = 0;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
} else if (step === 2) {
|
this.step = 1;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
} else if (step === 3) {
|
this.step = 3;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = false;
|
}
|
},
|
// 重来
|
reStart() {
|
this.showSearchResult = false;
|
this.step = 0;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
const userInfo = this.common.getUserInfo();
|
|
this.formData = {};
|
this.formData.consignor_Id = userInfo.consignor_Id;
|
this.formData.consignorCode = userInfo.consignorCode;
|
this.formData.consignorName = userInfo.consignorName;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.sub-item {
|
display: inline-block;
|
.sub-title {
|
width: 150px;
|
text-align: right;
|
font-weight: bold;
|
display: inline-block;
|
padding-right: 5px;
|
}
|
}
|
.step2 {
|
max-width: 1200px;
|
}
|
.step3 {
|
margin-top: 50px;
|
text-align: center;
|
.step4-finished {
|
width: 80px;
|
height: 80px;
|
border-radius: 40px;
|
background-color: #409eff;
|
display: inline-block;
|
|
padding: 13px;
|
.icon {
|
font-size: 60px;
|
color: white;
|
}
|
}
|
.text {
|
font-size: 14px;
|
color: #888;
|
padding: 10px 30px 100px;
|
}
|
}
|
</style>
|
