464 lines
16 KiB
Vue
464 lines
16 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="handleNumericInput('salePrice', $event)"
|
||
@blur="formatNumericValue('salePrice')"
|
||
/>
|
||
</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="保质期" prop="shelfLifeDays">
|
||
<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',//计量类型
|
||
salePrice: '',//零售价(元)
|
||
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' }],
|
||
salePrice: [{ 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,"salePrice",Number((row.salePrice/100).toFixed(2)))
|
||
this.$set(this.form,"unitPrice",Number((row.unitPrice/100).toFixed(2)))
|
||
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]
|
||
}else{
|
||
this.fileList=[]
|
||
this.checkUrlList=[]
|
||
}
|
||
},
|
||
|
||
submitForm() {
|
||
this.$refs.form.validate(valid => {
|
||
if (valid) {
|
||
this.form.salePrice = Number(this.form.salePrice)*100;
|
||
this.form.unitPrice = Number(this.form.unitPrice)*100;
|
||
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: '',//商品单位
|
||
salePrice: '',//商品售价(元)
|
||
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.url)
|
||
this.checkUrlNameList.push(res.data.name)
|
||
this.$set(this.form,"imageUrl",res.data.url)
|
||
} 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;
|
||
// 只允许输入数字和小数点
|
||
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] = newValue;
|
||
} else {
|
||
this.form[field] = 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] = value;
|
||
} else {
|
||
this.form[field] = value;
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
//隐藏图片上传框的css
|
||
::v-deep.disabled {
|
||
.el-upload--picture-card {
|
||
display: none;
|
||
}
|
||
}
|
||
</style> |