<template>
|
<win-md :title="`${setting.title}预警设置`" @close="close" :width="'800px'" :loading="loading">
|
<el-form ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="预警仓库" prop="baseWarehouseId">
|
<el-select
|
v-model="formData.baseWarehouseId"
|
placeholder="请选择预警仓库"
|
style="width: 100%"
|
:disabled="type == 'edit'"
|
>
|
<el-option v-for="item in warehouses" :key="item.id" :label="item.warehouseName" :value="item.id"/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="物品分类" prop="baseCategoryId">
|
<el-cascader
|
v-model="formData.baseCategoryId"
|
:options="categoryOptions"
|
:props="{ value: 'id',emitPath: false }"
|
:show-all-levels="false"
|
filterable
|
clearable
|
@change="categoryChange"
|
style="width: 100%"
|
:disabled="type == 'edit'"
|
></el-cascader>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="物品名称" prop="baseGoodsTemplateId">
|
<el-select
|
:value="formData.baseGoodsTemplateId"
|
:placeholder="formData.baseCategoryId?'请选择物品':'请先选择物品分类'"
|
filterable
|
clearable
|
:disabled="!formData.baseCategoryId || type == 'edit'"
|
@change="goodsTemplateChange"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in goodsTemplatelOptions"
|
:key="item.id"
|
:label="item.goodsName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="规格型号" prop="modelsIds">
|
<el-select
|
v-model="formData.modelsIds"
|
multiple
|
clearable
|
:disabled="!formData.baseGoodsTemplateId || type == 'edit'"
|
:placeholder="formData.baseCategoryId?'请选择规格型号':'请先选择物品名称'"
|
@change="modelChange"
|
@remove-tag="modelRemoveTag"
|
@clear="modelRemoveTag(-1)"
|
style="width: 100%"
|
>
|
<el-option v-for="item in modelsOptions" :key="item.id" :label="item.modelName" :value="item.id"/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="type === 'edit'">
|
<el-col :span="12">
|
<el-form-item label="保底库存" prop="lowerLimit">
|
<el-input placeholder="请输入" v-model.number="formData.lowerLimit"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="封顶库存" prop="upperLimit">
|
<el-input placeholder="请输入" v-model.number="formData.upperLimit"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-table v-else :data="formData.models" :stripe="true">
|
<el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
|
<template slot-scope="scope">
|
{{ getGoodsModelsName(scope.row.baseGoodsModelsId) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="lowerLimit" label="保底库存" align="center">
|
<template slot-scope="{row,$index}">
|
<el-form-item
|
label-width="0"
|
:prop="`models.${$index}.lowerLimit`"
|
:rules="[
|
{validator: checkCounts,type: 1, lowerLimit: row.lowerLimit,upperLimit: row.upperLimit, trigger: ['blur', 'change']}
|
]"
|
>
|
<el-input v-model.number="row.lowerLimit"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="upperLimit" label="封顶库存" align="center">
|
<template slot-scope="{row,$index}">
|
<el-form-item
|
label-width="0"
|
:prop="`models.${$index}.upperLimit`"
|
:rules="[
|
{validator: checkCounts,type: 2, lowerLimit: row.lowerLimit,upperLimit: row.upperLimit, trigger: ['blur', 'change']}
|
]"
|
>
|
<el-input v-model.number="row.upperLimit"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="保存" site="form" @click="save"/>
|
</div>
|
</win-md>
|
</template>
|
|
<script>
|
import winMd from '@/components/win/win-md';
|
import myButton from '@/components/myButton/myButton';
|
import {
|
getCategorySelectTree,
|
goodsModel,
|
goodsTemplate,
|
queryGoodsModelInfo,
|
selectTenantWarehouse,
|
} from '@/api/baseSetting/finsystenant';
|
import {warningConfigAdd, warningConfigGetById, warningConfigUpd,} from '@/api/stock/ledger';
|
import {mapGetters} from 'vuex';
|
import {findParentIds} from '@/utils/index';
|
|
export default {
|
components: {winMd, myButton},
|
props: {
|
setting: {
|
type: Object,
|
default: () => {
|
},
|
},
|
},
|
data() {
|
return {
|
checkCounts: (rule, value, callback) => {
|
let val = rule.type === 1 ? rule.lowerLimit : rule.upperLimit
|
if (!val) {
|
return callback(new Error(rule.type === 1 ? '请输入保底数量' : '请输入封顶数量'));
|
}
|
if (!Number.isInteger(val)) {
|
return callback(new Error('请输入数字值'));
|
}
|
if (val < 1) {
|
return callback(new Error('数字值必须大于0'));
|
}
|
if (rule.lowerLimit && rule.upperLimit && rule.lowerLimit >= rule.upperLimit) {
|
return callback(new Error(rule.type === 1 ? '保底库存必须小于封顶库存' : '封顶库存必须大于保底库存'));
|
}
|
callback();
|
},
|
loading: true,
|
type: '',
|
warehouses: [], // 入库仓库列表
|
agencyOptions: [], // 调拨机构
|
categoryOptions: [], // 物品分类列表
|
goodsTemplatelOptions: [], //物品名称
|
modelsOptions: [], //型号列表
|
formData: {
|
warehouseType: 0, //仓库类型0机构1部门
|
baseWarehouseId: '', //仓库编号
|
baseCategoryIds: '', // 分类编号数组
|
baseCategoryId: '', // 分类编号
|
baseGoodsTemplateId: '', // 物品名称模版编号
|
modelsIds: [], //规格型号
|
models: [],
|
},
|
rules: {
|
baseWarehouseId: [{required: true, message: '请选择预警仓库', trigger: 'change'}],
|
baseCategoryId: [{required: true, message: '请选择物品分类', trigger: 'change'}],
|
baseGoodsTemplateId: [{required: true, message: '请选择物品', trigger: 'change'}],
|
modelsIds: [{required: true, message: '请选择规格型号', trigger: 'change'}],
|
lowerLimit: [
|
{required: true, message: '请输入', trigger: 'blur'},
|
{type: 'number', message: '请输入数字值', trigger: 'blur'},
|
],
|
upperLimit: [
|
{required: true, message: '请输入', trigger: 'blur'},
|
{type: 'number', message: '请输入数字值', trigger: 'blur'},
|
],
|
},
|
};
|
},
|
computed: {
|
...mapGetters(['userInfo']),
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
async init() {
|
await this.getWarehouseList();
|
await this.getCategoryTree();
|
if (this.setting.id) {
|
this.type = 'edit';
|
const detail = await warningConfigGetById({id: this.setting.id});
|
// 分类反显
|
let res = await queryGoodsModelInfo({baseGoodsModelsId: detail.baseGoodsModelsId});
|
detail.baseCategoryId = res[0].categoryId
|
// 物品名称反显
|
this.getgoodsTemplate(detail.baseCategoryId);
|
// 规格型号反显
|
this.getgoodsModel(detail.baseGoodsTemplateId);
|
this.formData = Object.assign({}, detail);
|
this.formData.modelsIds = [detail.baseGoodsModelsId];
|
this.getWarehouseList();
|
}
|
this.loading = false
|
},
|
// 获取入库仓库列表
|
getWarehouseList() {
|
selectTenantWarehouse({agencyId: this.userInfo.tenantId})
|
.then((res) => {
|
this.warehouses = res;
|
if (this.warehouses.length && !this.formData.baseWarehouseId) {
|
// 默认选中第一个仓库
|
this.formData.baseWarehouseId = this.warehouses[0].id;
|
}
|
})
|
.catch((err) => {
|
console.log('err', err);
|
});
|
},
|
|
getCategoryTree() {
|
// 获取物品分类列表
|
return new Promise(async (resolve) => {
|
const treeRes = await getCategorySelectTree();
|
this.categoryOptions = this.removeEmptyChildren(treeRes);
|
resolve();
|
});
|
},
|
|
// 获取物品名称列表
|
getgoodsTemplate(id) {
|
goodsTemplate({categoryId: id || '', agencyId: this.userInfo.tenantId}).then((res) => {
|
this.goodsTemplatelOptions = res;
|
});
|
},
|
|
// 规格型号
|
getgoodsModel(id) {
|
goodsModel({goodsTemplatesId: id || ''}).then((res) => {
|
this.modelsOptions = res;
|
});
|
},
|
|
// 根据规格型号id获取名字
|
getGoodsModelsName(id) {
|
let item = this.modelsOptions.find((v) => v.id == id);
|
if (item) {
|
return item.modelName;
|
}
|
return;
|
},
|
|
// 物品分类选择
|
categoryChange(e) {
|
this.goodsTemplatelOptions = [];
|
this.modelsOptions = [];
|
this.formData.baseGoodsTemplateId = '';
|
this.formData.modelsIds = [];
|
this.formData.models = [];
|
// 根据选中分类请求物品名称列表
|
this.getgoodsTemplate(e);
|
},
|
|
// 物品名称列表选择
|
goodsTemplateChange(e) {
|
this.formData.modelsIds = [];
|
this.formData.models = [];
|
this.formData.baseGoodsTemplateId = e;
|
// 根据选中物品名称id获取规格型号列表
|
this.getgoodsModel(e);
|
},
|
|
removeEmptyChildren(arr) {
|
arr.forEach((item) => {
|
if (!item.children || !item.children.length) {
|
delete item.children;
|
} else {
|
this.removeEmptyChildren(item.children);
|
}
|
});
|
return arr;
|
},
|
|
// 规格型号选择
|
modelChange(e) {
|
let arr = this.formData.models;
|
let str = JSON.stringify(arr);
|
e.forEach((item, index) => {
|
if (str && !str.includes(item)) {
|
arr.push({baseGoodsModelsId: item, lowerLimit: null, upperLimit: null});
|
}
|
});
|
},
|
|
// 规格型号移除
|
modelRemoveTag(e) {
|
if (e === -1) {
|
this.formData.models = []
|
return
|
}
|
let delIndex = this.formData.models.findIndex((v) => v.baseGoodsModelsId == e);
|
this.formData.models.splice(delIndex, 1);
|
},
|
|
getEditInfo(id) {
|
},
|
close() {
|
this.$emit('close');
|
},
|
save() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
if (this.loading) return
|
this.loading = true;
|
if (this.setting.id) {
|
// 编辑接口
|
const params = {
|
id: this.setting.id,
|
lowerLimit: this.formData.lowerLimit,
|
upperLimit: this.formData.upperLimit,
|
};
|
warningConfigUpd(params).then((res) => {
|
this.loading = false;
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
}).catch((err) => {
|
this.loading = false;
|
this.$message.error('保存失败');
|
});
|
} else {
|
const params = {
|
warehouseType: this.formData.warehouseType,
|
baseWarehouseId: this.formData.baseWarehouseId,
|
baseGoodsTemplateId: this.formData.baseGoodsTemplateId,
|
modelConfigStr: JSON.stringify(this.formData.models),
|
};
|
warningConfigAdd(params).then((res) => {
|
this.loading = false;
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
}).catch((err) => {
|
this.loading = false;
|
this.$message.error('保存失败');
|
});
|
}
|
} else {
|
this.$message.error('校验未通过，请检查。');
|
}
|
});
|
},
|
},
|
};
|
</script>
|
