yudao-dev/src/views/warehouse/warehouse-base/warehouse-location-setup/add-or-updata.vue

229 lines
5.5 KiB
Vue

<!--
* @Author: zwq
* @Date: 2023-08-01 13:52:10
* @LastEditors: zwq
* @LastEditTime: 2024-08-21 10:26:21
* @Description:
-->
<template>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
v-if="visible"
@keyup.enter.native="dataFormSubmit()"
label-width="100px"
label-position="top">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="仓库名称" prop="warehouseId">
<el-select
v-model="dataForm.warehouseId"
filterable
@change="getAreaList"
:style="{ width: '100%' }"
placeholder="请选择仓库名称">
<el-option
v-for="item in warehouseArr"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库区名称" prop="areaId">
<el-select
v-model="dataForm.areaId"
:disabled="!areaArr.length>0"
filterable
:style="{ width: '100%' }"
@change="setAreaType"
placeholder="请选择库区名称">
<el-option
v-for="item in areaArr"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库区类型" prop="areaType">
<el-input
v-model="dataForm.areaType"
disabled
placeholder="库区类型" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库位名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入库位名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库位编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入库位编码" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="type" label="库位类型">
<el-select
v-model="dataForm.type"
filterable
:style="{ width: '100%' }"
placeholder="请选择库位类型">
<el-option
v-for="item in urlOptions.dictList.dict0"
:key="item.id"
:label="item.label"
:value="parseInt(item.value)"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="排" prop="arrange">
<el-input
v-model="dataForm.arrange"
clearable
placeholder="请输入排" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="列" prop="col">
<el-input v-model="dataForm.col" clearable placeholder="请输入列" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="层" prop="layer">
<el-input v-model="dataForm.layer" clearable placeholder="请输入层" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="enabled" label="是否启用">
<el-select
v-model="dataForm.enabled"
filterable
:style="{ width: '100%' }"
placeholder="请选择是否启用">
<el-option
v-for="item in isorno"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import basicAdd from '@/mixins/basic-add';
import {
createWarehouseLocation,
updateWarehouseLocation,
getWarehouseLocation,
getCode,
} from '@/api/warehouse/warehouse-location-setup';
import { getWarehouseList } from '@/api/warehouse/warehouse-setup';
import { getWarehouseAreaList } from '@/api/warehouse/warehouse-area-setup';
export default {
mixins: [basicAdd],
data() {
return {
urlOptions: {
isGetCode: true,
codeURL: getCode,
getDictList: true,
createURL: createWarehouseLocation,
updateURL: updateWarehouseLocation,
infoURL: getWarehouseLocation,
},
nameList: ['location_type'],
dataForm: {
id: undefined,
name: '',
code: '',
warehouseId: '',
areaId: '',
areaType: '',
type: '',
enabled: 1,
arrange: '',
col: '',
layer: '',
},
dataRule: {
warehouseId: [
{ required: true, message: '仓库名称不能为空', trigger: 'change' },
],
areaId: [
{ required: true, message: '库区名称不能为空', trigger: 'change' },
],
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
arrange: [{ required: true, message: '排不能为空', trigger: 'blur' }],
col: [{ required: true, message: '列不能为空', trigger: 'blur' }],
layer: [{ required: true, message: '层不能为空', trigger: 'blur' }],
},
warehouseArr: [],
areaArr: [],
isorno: [
{
id: 0,
name: '停用',
},
{
id: 1,
name: '启用',
},
],
typeArr: [
{
id: 1,
name: '缓存',
},
{
id: 2,
name: '活动',
},
{
id: 3,
name: '其它',
},
],
};
},
created() {
getWarehouseList().then((response) => {
this.warehouseArr = response.data;
});
},
methods: {
getAreaList(){
getWarehouseAreaList(this.dataForm.warehouseId).then((response) => {
this.areaArr = response.data;
if(this.areaArr.length===0){
this.$message('该仓库下暂无库区');
}
});
},
setAreaType() {
if (this.dataForm.areaId) {
this.dataForm.areaType = this.areaArr.find(
(item) => item.id === this.dataForm.areaId
).areaType;
}
},
},
};
</script>