<template>
|
<win-md class="stock-edit" :title="`${setting.title}调拨调拨`" @close="close" :width="'800px'">
|
<el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
|
<div class="main-w">
|
<el-row :gutter="24" class="headerHeight">
|
<el-col :span="12">
|
<el-form-item label="调拨仓库" prop="warehouseId">
|
<el-select v-model="formData.warehouseId" placeholder="请选择" style="width: 100%">
|
<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="procureTime">
|
<el-date-picker
|
v-model="formData.procureTime"
|
type="datetime"
|
value="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyyMMddHHmmss"
|
placeholder="请选择日期"
|
style="width: 100%"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24" class="headerHeight">
|
<el-col :span="12">
|
<el-form-item label="调拨手续" prop="procureDoc">
|
<upload :settings="uploadSettings" @on-change="uploadChange"></upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="goods-card" v-for="(goodsItem, goodsIndex) in formData.procureGoods" :key="goodsIndex">
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item
|
label="物品分类"
|
:prop="`procureGoods[${goodsIndex}].baseCategoryIds`"
|
:rules="{
|
required: true,
|
message: '请选择',
|
trigger: 'change',
|
}"
|
>
|
<el-cascader
|
v-model="goodsItem.baseCategoryIds"
|
:options="categoryOptions"
|
:props="{ value: 'id' }"
|
@change="categoryChange($event, goodsIndex)"
|
style="width: 100%"
|
></el-cascader>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
label="物品名称"
|
:prop="`procureGoods[${goodsIndex}].baseGoodsTemplateId`"
|
:rules="{
|
required: true,
|
message: '请选择',
|
trigger: 'change',
|
}"
|
>
|
<el-select
|
v-model="goodsItem.baseGoodsTemplateId"
|
placeholder="请先择物品分类"
|
filterable
|
:disabled="!goodsItem.baseCategoryId"
|
style="width: 100%"
|
@change="goodsTemplateChange($event, goodsIndex)"
|
>
|
<el-option
|
v-for="item in goodsItem.goodsOptions"
|
:key="item.id"
|
:label="item.goodsName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item
|
label="规格型号"
|
:prop="`procureGoods[${goodsIndex}].modelsIds`"
|
:rules="{
|
required: true,
|
message: '请选择',
|
trigger: 'change',
|
}"
|
>
|
<el-select
|
v-model="goodsItem.modelsIds"
|
multiple
|
placeholder="请先择物品名称"
|
:disabled="!goodsItem.baseCategoryId"
|
@change="modelChange($event, goodsIndex)"
|
@remove-tag="modelRemoveTag($event, goodsIndex)"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in goodsItem.modelsOptions"
|
:key="item.id"
|
:label="item.modelName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-table :data="goodsItem.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 label="单位" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.unit }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="price" label="单价（元）" align="center">
|
<template slot-scope="scope">
|
<el-input type="number" v-model="scope.row.price"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="counts" label="调拨数量" align="center">
|
<template slot-scope="scope">
|
<el-input type="number" v-model="scope.row.counts"></el-input>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="btn-group">
|
<el-button
|
v-if="formData.procureGoods.length > 1"
|
name="移除"
|
type="danger"
|
plain
|
size="mini"
|
@click="removeGoods(goodsIndex)"
|
>移除</el-button
|
>
|
<el-button
|
v-if="formData.procureGoods.length - 1 == goodsIndex"
|
name="新增物品"
|
type="primary"
|
plain
|
size="mini"
|
@click="addGoods"
|
>新增物品</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</el-form>
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="保存" site="form" @click="handleSubmit"/>
|
</div>
|
</win-md>
|
</template>
|
<script>
|
import {
|
goodsTemplate,
|
procureAdd,
|
procureEdit,
|
selectTenantWarehouse,
|
goodsModel,
|
procureDetail,
|
} from '@/api/stock/procure/purchaseOrder';
|
import { getTree } from '@/api/foudation/classification';
|
import MyButton from '@/components/myButton/myButton';
|
import winMd from '@/components/win/win-md';
|
import upload from '@/components/upload/index';
|
import { getUploadUrl } from '@/utils/base';
|
|
import SettingIplatform from '../../../../../public/static/config';
|
|
export default {
|
components: { MyButton, winMd, upload },
|
props: {
|
setting: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
return {
|
visible: false,
|
loading: false,
|
buyTypeOptions:[{
|
label:'集采',
|
value: '1'
|
},{
|
label:'自采',
|
value: '2'
|
}],
|
warehouses: [], // 调拨仓库列表
|
categoryOptions: [], // 物品分类列表
|
modelList: [], //型号列表
|
formData: {
|
warehouseId: '', // 调拨仓库id
|
procureTime: '', // 调拨时间
|
buyType: '2', // 调拨方式（1：集采；2=自采）
|
procureGoods: [],
|
},
|
goodsItem: {
|
whFormProcureId: '', // 调拨单ID
|
baseCategoryIds: '', // 分类编号数组
|
baseCategoryId: '', // 分类编号
|
baseGoodsTemplateId: '', // 物品模版编号
|
goodsTemplateName: '', // 物品模版名称
|
supplier: '', // 供应商
|
sort: '', // 显示顺序
|
goodsOptions: [], // 物品列表select
|
modelsOptions: [], //规格型号select
|
models: [], // 物品名称
|
modelsIds: [], //规格型号
|
},
|
modelsItem: {
|
baseGoodsModelsId: '', // 规格型号编号
|
price: 0, // 单价(调拨需要，调拨不需要)
|
counts: 0, // 操作数量
|
supplier: '', // 供应商
|
unit: null, //单位
|
},
|
rules: {
|
warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
|
procureTime: [{ required: true, message: '请选择', trigger: 'change' }],
|
buyType: [{ required: true, message: '请选择', trigger: 'change' }],
|
|
// procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
|
baseCategoryIds: [{ required: true, message: '请选择', trigger: 'change' }],
|
baseGoodsTemplateId: [{ required: true, message: '请选择', trigger: 'change' }],
|
modelsIds: [{ required: true, message: '请选择', trigger: 'change' }],
|
},
|
|
uploadSettings: {
|
title: '上传',
|
max: 20, // 最大大小，单位M
|
num: 2, // 支持上传图片个数
|
accept: '.jpg,.png', // 限制格式
|
tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}kb`
|
uploadUrl: getUploadUrl(), // 上传路径
|
multiple: true, // 是否支持批量上传
|
disabled: false, // 是否禁用
|
type: 'text', // text/picture
|
},
|
};
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
async init() {
|
this.getWarehouseList();
|
this.getgoodsTemplate()
|
this.getgoodsModel();
|
// 获取物品分类列表
|
const treeRes = await getTree();
|
this.categoryOptions = this.removeEmptyChildren(treeRes);
|
if (this.setting.id) {
|
const detail = await procureDetail({ id:this.setting.id });
|
this.formData = Object.assign(this.formData, detail);
|
this.$set(this.formData,'buyType',this.formData.buyType.toString())
|
this.formData.procureTime = this.formData.procureTime.toString();
|
this.formData.procureGoods.map((item, index) => {
|
// 根据子集ID拼接物品分类列表
|
let pIds = this.findParentIds(this.categoryOptions, item.baseCategoryId);
|
pIds = pIds.reverse();
|
item.baseCategoryIds = [...pIds, item.baseCategoryId];
|
this.$set(this.formData.procureGoods[index],'modelsIds',item.models.map((v) => v.baseGoodsModelsId))
|
this.getgoodsTemplate(item.baseCategoryId, index);
|
this.getgoodsModel(item.baseGoodsTemplateId, index);
|
return item
|
});
|
} else {
|
this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
|
}
|
this.visible = true;
|
},
|
|
// 获取调拨仓库列表
|
getWarehouseList() {
|
selectTenantWarehouse()
|
.then((res) => {
|
this.warehouses = res;
|
if (this.warehouses.length && !this.formData.warehouseId) {
|
// 默认选中第一个仓库
|
this.formData.warehouseId = this.warehouses[0].id;
|
}
|
})
|
.catch((err) => {
|
console.log('err', err);
|
});
|
},
|
|
removeEmptyChildren(arr) {
|
arr.forEach((item) => {
|
if (!item.children || !item.children.length) {
|
delete item.children;
|
} else {
|
this.removeEmptyChildren(item.children);
|
}
|
});
|
return arr;
|
},
|
|
// 获取物品名称列表
|
getgoodsTemplate(id, index) {
|
goodsTemplate({ categoryId: id || '' }).then((res) => {
|
if (index || index == 0) {
|
this.$set(this.formData.procureGoods[index], 'goodsOptions', res);
|
}else {
|
this.goodsTemplatelAll = res;
|
}
|
});
|
},
|
|
// 规格型号
|
getgoodsModel(id, index) {
|
goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
|
if (index || index == 0) {
|
this.$set(this.formData.procureGoods[index], 'modelsOptions', res);
|
} else {
|
this.goodsModelAll = res;
|
}
|
});
|
},
|
|
// 根据物品名称id获取名字
|
getGoodsTemplateName(id) {
|
let item = this.goodsTemplatelAll.find((v) => v.id == id);
|
if (item) {
|
return item.goodsName;
|
}
|
return;
|
},
|
|
// 根据规格型号id获取名字
|
getGoodsModelsName(id) {
|
let item = this.goodsModelAll.find((v) => v.id == id);
|
if (item) {
|
return item.modelName;
|
}
|
return;
|
},
|
|
// 物品分类选择
|
categoryChange(e, index) {
|
this.formData.procureGoods[index].goodsOptions = []
|
this.formData.procureGoods[index].baseGoodsTemplateId = ''
|
this.formData.procureGoods[index].goodsTemplateName = ''
|
this.formData.procureGoods[index].modelsOptions = []
|
this.formData.procureGoods[index].modelsIds = []
|
this.formData.procureGoods[index].models = []
|
|
this.formData.procureGoods[index].baseCategoryId = e[e.length - 1];
|
// 根据选中分类请求物品名称列表
|
this.getgoodsTemplate(e[e.length - 1], index);
|
},
|
|
// 物品名称列表
|
goodsTemplateChange(e, index) {
|
this.formData.procureGoods[index].modelsOptions = []
|
this.formData.procureGoods[index].modelsIds = []
|
this.formData.procureGoods[index].models = []
|
|
this.formData.procureGoods[index].goodsTemplateName = this.getGoodsTemplateName(e)
|
// 根据选中物品名称id获取规格型号列表
|
this.getgoodsModel(e, index);
|
},
|
|
// 规格型号选择
|
modelChange(e, index) {
|
let arr = [...this.formData.procureGoods[index].models];
|
let str = JSON.stringify(arr);
|
e.forEach((item) => {
|
if (str.indexOf(item) == -1) {
|
let temp = this.goodsModelAll.find((v) => v.id == item);
|
arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit });
|
}
|
});
|
this.formData.procureGoods[index].models = arr;
|
},
|
|
// 规格型号移除
|
modelRemoveTag(e, index) {
|
let arr = this.formData.procureGoods[index].models;
|
let delIndex = arr.findIndex((v) => v.baseGoodsModelsId == e);
|
this.formData.procureGoods[index].models.splice(delIndex, 1);
|
},
|
|
// 上传
|
uploadChange(e) {
|
console.log('uploadChange', e);
|
},
|
|
// 点击新增物品
|
addGoods() {
|
this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
|
},
|
|
// 点击移除
|
removeGoods(index) {
|
this.formData.procureGoods.splice(index, 1);
|
},
|
|
// 提交
|
handleSubmit() {
|
this.$refs['ruleForm'].validate((valid) => {
|
if (valid) {
|
console.log('this.formData', this.formData);
|
if (this.setting.id) {
|
procureAdd(this.formData)
|
.then((res) => {
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
})
|
.catch((err) => {
|
console.log('create err', err);
|
this.$message.error('保存失败');
|
});
|
} else {
|
procureEdit(this.formData)
|
.then((res) => {
|
this.$message.success('保存成功！');
|
this.close();
|
this.$emit('search');
|
})
|
.catch((err) => {
|
console.log('edit err', err);
|
this.$message.error('保存失败');
|
});
|
}
|
} else {
|
this.$message.error('校验未通过，请检查。');
|
}
|
});
|
},
|
|
close() {
|
this.formData ={
|
warehouseId: '', // 调拨仓库id
|
procureTime: '', // 调拨时间
|
procureGoods: [],
|
}
|
this.$emit('close')
|
},
|
|
// 通过子集id查到所以相关父级id并返回数组
|
findParentIds(dataSource, nodeId) {
|
const parentIds = []; // 用于存储所有父节点ID的数组
|
|
// 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
|
function traverse(node, nodeId) {
|
if (node.id === nodeId) {
|
// 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
|
return true; // 返回true表示已经找到了子节点
|
}
|
|
if (node.children) {
|
// 如果当前节点有子节点，则继续遍历子节点
|
for (const childNode of node.children) {
|
if (traverse(childNode, nodeId)) {
|
// 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
|
parentIds.push(node.id);
|
return true;
|
}
|
}
|
}
|
|
return false; // 如果当前节点不是子节点的父节点，则返回false
|
}
|
|
// 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
|
for (const node of dataSource) {
|
if (traverse(node, nodeId)) {
|
// 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
|
break;
|
}
|
}
|
|
return parentIds; // 返回所有父节点ID的数组
|
},
|
},
|
};
|
</script>
|
<style scoped lang="scss">
|
@import url(../../index.scss);
|
</style>
|
