457 lines
15 KiB
Vue
457 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
:title="title + ' - 商品'"
|
|||
|
|
:visible.sync="visible"
|
|||
|
|
width="800px"
|
|||
|
|
append-to-body
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
:destroy-on-close="true"
|
|||
|
|
@close="handleClose"
|
|||
|
|
>
|
|||
|
|
<div style="width: 100%;height: 500px;overflow-y: auto;">
|
|||
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="商品名称" prop="materialName">
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.materialName"
|
|||
|
|
placeholder="请输入商品名称"
|
|||
|
|
maxlength="40"
|
|||
|
|
show-word-limit
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="条码" prop="barCode">
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.barCode"
|
|||
|
|
placeholder="请输入条码"
|
|||
|
|
maxlength="20"
|
|||
|
|
show-word-limit
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="零售价" prop="salePrice">
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.salePrice"
|
|||
|
|
placeholder="请输入零售价"
|
|||
|
|
maxlength="20"
|
|||
|
|
@input="(v)=>(form.salePrice=v.replace(/[^\d.]/g,''))"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="计重类型" prop="salesMode" >
|
|||
|
|
<el-select v-model="form.salesMode" placeholder="请选择计量类型" style="width: 100%" @change="getDrpUnitList">
|
|||
|
|
<el-option label="按份" value="1" />
|
|||
|
|
<el-option label="称重" value="2" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="所属区域" prop="areaId">
|
|||
|
|
<el-cascader v-model="form.areaId"
|
|||
|
|
:options="treeAreaOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
|
|||
|
|
:props="{
|
|||
|
|
emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
|
|||
|
|
checkStrictly: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
|
|||
|
|
value:'id',label:'treeName'
|
|||
|
|
}" clearable @change="handleAreaChange">
|
|||
|
|
</el-cascader>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="商品单位" prop="unitId">
|
|||
|
|
<el-select v-model="form.unitId" placeholder="请选择商品单位" style="width: 100%">
|
|||
|
|
<el-option v-for="item in this.unitOptions"
|
|||
|
|
:key="item.unitId"
|
|||
|
|
:label="item.unitName"
|
|||
|
|
:value="item.unitId"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="商品类别" prop="categoryId">
|
|||
|
|
<el-cascader v-model="form.categoryId"
|
|||
|
|
:options="treeTypeOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
|
|||
|
|
:props="{
|
|||
|
|
emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
|
|||
|
|
checkStrictly: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
|
|||
|
|
value:'id',label:'categoryName'
|
|||
|
|
}" clearable >
|
|||
|
|
</el-cascader>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="商品进价" prop="unitPrice">
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.unitPrice"
|
|||
|
|
placeholder="请输入商品进价"
|
|||
|
|
@input="handleNumericInput('unitPrice', $event)"
|
|||
|
|
@blur="formatNumericValue('unitPrice')"
|
|||
|
|
>
|
|||
|
|
<template slot="append">元</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="保质期">
|
|||
|
|
<el-select v-model="form.shelfLifeType" style="width: 80px; margin-left: 10px">
|
|||
|
|
<el-option label="按年" value="1" />
|
|||
|
|
<el-option label="按月" value="2" />
|
|||
|
|
<el-option label="按日" value="3" />
|
|||
|
|
</el-select>
|
|||
|
|
<el-input v-model="form.shelfLifeDays" placeholder="请输入" style="width: 120px;margin-right: 10px;" @input="(v)=>(form.shelfLifeDays=v.replace(/[^\d]/g,''))"/>
|
|||
|
|
<span v-if="form.shelfLifeType==1">年</span>
|
|||
|
|
<span v-if="form.shelfLifeType==2">月</span>
|
|||
|
|
<span v-if="form.shelfLifeType==3">日</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="供应资格证书" prop="qualificationCert">
|
|||
|
|
<el-select v-model="form.qualificationCert" placeholder="请选择供应资格证书" style="width: 100%">
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="商品简介" prop="synopsis">
|
|||
|
|
<el-input
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
placeholder="请输入商品简介"
|
|||
|
|
v-model="form.synopsis">
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="图片" prop="imageUrl">
|
|||
|
|
<el-upload
|
|||
|
|
:http-request="(obj) => imgUpLoad(obj, 'fileUrl')"
|
|||
|
|
action="#"
|
|||
|
|
:limit="1"
|
|||
|
|
:file-list="fileList"
|
|||
|
|
:show-file-list="true"
|
|||
|
|
list-type="picture-card"
|
|||
|
|
accept=".png, .jpg, .jpeg"
|
|||
|
|
:on-success="handleAvatarSuccess"
|
|||
|
|
:class="{ disabled: uploadDisabled }"
|
|||
|
|
:on-remove="handleRemove"
|
|||
|
|
>
|
|||
|
|
<i
|
|||
|
|
class="el-icon-plus avatar-uploader-icon"
|
|||
|
|
></i>
|
|||
|
|
</el-upload>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<div slot="footer" class="dialog-footer">
|
|||
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|||
|
|
<el-button @click="cancel">取 消</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { systemAreaTreeApi,systemMaterialTreeApi,getDrpUnitListApi } from "@/api/superStore/shopMaterial";
|
|||
|
|
import { imgUpLoadTwo } from '@/api/system/upload'
|
|||
|
|
export default {
|
|||
|
|
name: "MaterialDialog",
|
|||
|
|
props: {
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: '新增'
|
|||
|
|
},
|
|||
|
|
visible: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
treeAreaOptions:[],//区域树
|
|||
|
|
treeTypeOptions:[],//类型树
|
|||
|
|
unitOptions:[],//单位下拉
|
|||
|
|
form: {
|
|||
|
|
materialName: '',//商品名称
|
|||
|
|
areaId: null,//所属区域
|
|||
|
|
categoryId: null,//商品类别
|
|||
|
|
materialType: 2,
|
|||
|
|
salesMode: '2',//计量类型
|
|||
|
|
unitId: '',//商品单位
|
|||
|
|
unitPrice: '',//商品进价(元)
|
|||
|
|
barCode: '',//条码
|
|||
|
|
nutritionId:null,//营养信息
|
|||
|
|
shelfLifeType:"1",//保质期类型
|
|||
|
|
shelfLifeDays:"",//保质期
|
|||
|
|
purPriceCeiling:'',//采购上限价格
|
|||
|
|
size:'',//商品规格
|
|||
|
|
taxRate:'',//商品税率
|
|||
|
|
qualificationCert: '',
|
|||
|
|
synopsis:"",//简介
|
|||
|
|
imageUrl:"",//图片
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
materialName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
|
|||
|
|
areaId: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
|
|||
|
|
categoryId: [{ required: true, message: '请选择商品类别', trigger: 'change' }],
|
|||
|
|
salesMode: [{ required: true, message: '请选择计量类型', trigger: 'change' }],
|
|||
|
|
unitId: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
|
|||
|
|
},
|
|||
|
|
fileList: [],//档口图片
|
|||
|
|
checkUrlList: [],//档口图片
|
|||
|
|
checkUrlNameList: [],//档口图片
|
|||
|
|
dialogVisible:false,//图片弹窗
|
|||
|
|
dialogImageUrl:"",//图片弹窗
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
//图片上传1张后，隐藏上传框
|
|||
|
|
uploadDisabled() {
|
|||
|
|
return this.checkUrlList.length > 0
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getAreaTreeData();//获取区域树
|
|||
|
|
this.getTypeTreeData();//获取商品类别树
|
|||
|
|
this.getDrpUnitList();//获取单位类型下拉
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//区域树
|
|||
|
|
getAreaTreeData() {
|
|||
|
|
systemAreaTreeApi({}).then((response) => {
|
|||
|
|
this.treeAreaOptions = response;
|
|||
|
|
console.log(this.treeAreaOptions)
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//基础设置-选择区域
|
|||
|
|
handleAreaChange(val){
|
|||
|
|
console.log(this.form)
|
|||
|
|
this.form.categoryId=null
|
|||
|
|
this.getTypeTreeData()
|
|||
|
|
this.getDrpUnitList()
|
|||
|
|
},
|
|||
|
|
//类型树
|
|||
|
|
getTypeTreeData() {
|
|||
|
|
let param = {
|
|||
|
|
categoryType:1,
|
|||
|
|
ifAdd: 1,
|
|||
|
|
areaId:this.form.areaId
|
|||
|
|
}
|
|||
|
|
systemMaterialTreeApi(param).then((response) => {
|
|||
|
|
this.treeTypeOptions = response.data;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//单位类型拉下选
|
|||
|
|
getDrpUnitList() {
|
|||
|
|
let param = {
|
|||
|
|
areaId: this.form.areaId||"",
|
|||
|
|
ifListUse: 1,
|
|||
|
|
current: 1,
|
|||
|
|
size: -1
|
|||
|
|
}
|
|||
|
|
this.form.unitId=null
|
|||
|
|
getDrpUnitListApi(param).then((response) => {
|
|||
|
|
this.unitOptions = [];
|
|||
|
|
if(response.data.records.length>0){
|
|||
|
|
response.data.records.forEach(item => {
|
|||
|
|
if(item.weighType==this.form.salesMode){
|
|||
|
|
this.unitOptions.push(item)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setFormData(row){
|
|||
|
|
console.log(row)
|
|||
|
|
// this.form = Object.assign({}, row)
|
|||
|
|
this.$set(this.form,"areaId",row.areaId)
|
|||
|
|
this.getTypeTreeData()
|
|||
|
|
this.getDrpUnitList()
|
|||
|
|
this.$set(this.form,"areaName",row.areaName)
|
|||
|
|
this.$set(this.form,"categoryId",row.categoryId)
|
|||
|
|
this.$set(this.form,"categoryName",row.categoryName)
|
|||
|
|
this.$set(this.form,"materialCode",row.materialCode)
|
|||
|
|
this.$set(this.form,"materialId",row.materialId)
|
|||
|
|
this.$set(this.form,"materialName",row.materialName)
|
|||
|
|
this.$set(this.form,"materialType",row.materialType)
|
|||
|
|
this.$set(this.form,"salesMode",row.salesMode+'')
|
|||
|
|
this.$set(this.form,"unitId",row.unitId)
|
|||
|
|
this.$set(this.form,"unitPrice",row.unitPrice)
|
|||
|
|
this.$set(this.form,"barCode",row.barCode)
|
|||
|
|
if(row.shelfLifeType){
|
|||
|
|
this.$set(this.form,"shelfLifeType",row.shelfLifeType+"")
|
|||
|
|
}else{
|
|||
|
|
this.$set(this.form,"shelfLifeType","1")
|
|||
|
|
}
|
|||
|
|
this.$set(this.form,"shelfLifeDays",row.shelfLifeDays)
|
|||
|
|
this.$set(this.form,"qualificationCert","")
|
|||
|
|
this.$set(this.form,"synopsis",row.synopsis)
|
|||
|
|
this.$set(this.form,"imageUrl",row.imageUrl)
|
|||
|
|
//图片反显
|
|||
|
|
if(row.imageUrl){
|
|||
|
|
this.fileList=[{url:row.imageUrl}]
|
|||
|
|
this.checkUrlList=[row.imageUrl]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
submitForm() {
|
|||
|
|
this.$refs.form.validate(valid => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.$emit('submit', this.form);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleClose() {
|
|||
|
|
this.$emit('update:visible', false);
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.reset();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
cancel() {
|
|||
|
|
this.$emit('update:visible', false);
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.reset();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
reset() {
|
|||
|
|
this.form = {
|
|||
|
|
materialName: '',//商品名称
|
|||
|
|
areaId: null,//所属区域
|
|||
|
|
categoryId: null,//商品类别
|
|||
|
|
materialType: 2,
|
|||
|
|
salesMode: '2',//计量类型
|
|||
|
|
unitId: '',//商品单位
|
|||
|
|
unitPrice: '',//商品进价(元)
|
|||
|
|
barCode: '',//条码
|
|||
|
|
str:[],//营养信息类型
|
|||
|
|
nutritionId:null,//营养信息
|
|||
|
|
shelfLifeType:"1",//保质期类型
|
|||
|
|
shelfLifeDays:"",//保质期
|
|||
|
|
qualificationCert: '',
|
|||
|
|
synopsis:"",//简介
|
|||
|
|
imageUrl:""
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 图片上传
|
|||
|
|
imgUpLoad(param, name, index) {
|
|||
|
|
// console.log(param,'image')
|
|||
|
|
param.type = 'stall'
|
|||
|
|
imgUpLoadTwo(param).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.checkUrlList.push(res.data.fileUrl)
|
|||
|
|
this.checkUrlNameList.push(res.data.fileName)
|
|||
|
|
this.$set(this.form,"imageUrl",res.data.fileUrl)
|
|||
|
|
} else {
|
|||
|
|
this.$modal.msgError(res.msg)
|
|||
|
|
this.$set(this.form,"imageUrl","")
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
this.$modal.msgError(error)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleAvatarSuccess(res, file) {
|
|||
|
|
console.log('success')
|
|||
|
|
},
|
|||
|
|
handleExceed(files, fileList) {
|
|||
|
|
this.$message.warning('最多只可以上传一张图片')
|
|||
|
|
},
|
|||
|
|
handleRemove(file, fileList) {
|
|||
|
|
let sum = 0
|
|||
|
|
this.checkUrlNameList.forEach((item, index) => {
|
|||
|
|
if (item == file.name) {
|
|||
|
|
sum = index
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.checkUrlNameList.splice(sum, 1)
|
|||
|
|
this.checkUrlList.splice(sum, 1)
|
|||
|
|
},
|
|||
|
|
//数字输入
|
|||
|
|
handleNumericInput(field, event) {
|
|||
|
|
const value = event.target.value;
|
|||
|
|
// 只允许输入数字和小数点
|
|||
|
|
let newValue = value.replace(/[^\d.]/g, '');
|
|||
|
|
|
|||
|
|
// 确保只有一个小数点
|
|||
|
|
const parts = newValue.split('.');
|
|||
|
|
if (parts.length > 2) {
|
|||
|
|
newValue = parts[0] + '.' + parts.slice(1).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 限制小数点后最多两位
|
|||
|
|
if (parts.length === 2 && parts[1].length > 2) {
|
|||
|
|
newValue = parts[0] + '.' + parts[1].substring(0, 2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置字段值
|
|||
|
|
if (field.includes('.')) {
|
|||
|
|
const [obj, prop] = field.split('.');
|
|||
|
|
this.form[obj][prop] = Number(newValue);
|
|||
|
|
} else {
|
|||
|
|
this.form[field] = Number(newValue);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
formatNumericValue(field) {
|
|||
|
|
let value;
|
|||
|
|
if (field.includes('.')) {
|
|||
|
|
const [obj, prop] = field.split('.');
|
|||
|
|
value = this.form[obj][prop];
|
|||
|
|
} else {
|
|||
|
|
value = this.form[field];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!value || value === '' || value === '.') {
|
|||
|
|
value = '0.00';
|
|||
|
|
} else {
|
|||
|
|
value = parseFloat(value).toFixed(2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (field.includes('.')) {
|
|||
|
|
const [obj, prop] = field.split('.');
|
|||
|
|
this.form[obj][prop] = Number(value);
|
|||
|
|
} else {
|
|||
|
|
this.form[field] = Number(value);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
//隐藏图片上传框的css
|
|||
|
|
::v-deep.disabled {
|
|||
|
|
.el-upload--picture-card {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|