310 lines
10 KiB
Vue
310 lines
10 KiB
Vue
<template>
|
|
<div class="AddBuildingBox">
|
|
<PageHeader></PageHeader>
|
|
<el-form ref="formRef" :model="form" :rules="rules" class="formBody" label-position="right" label-width="130px">
|
|
<div class="AddBuildingBody formbox">
|
|
<div class="title">
|
|
<span>基本信息</span>
|
|
<div>
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
|
<el-button @click="cancelForm">返回</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="addBuildingFormBody">
|
|
<el-form-item label="入库日期" prop="inDate">
|
|
<el-date-picker
|
|
v-model="form.inDate"
|
|
format="YYYY-MM-DD"
|
|
placeholder="请选择入库日期"
|
|
style="width: 100%"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="供应商" prop="supplierId">
|
|
<el-select v-model="form.supplierId" placeholder="请选择供应商">
|
|
<el-option v-for="(item, index) in supplierlist" :key="index" :label="item.supplierName" :value="item.id">
|
|
<span style="float: left">{{ item.supplierName }}</span>
|
|
<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
|
|
{{ item.villageName }}
|
|
</span>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="入库仓库" prop="warehouseId">
|
|
<el-select v-model="form.warehouseId" placeholder="请选择入库仓库">
|
|
<el-option
|
|
v-for="(item, index) in warehouselist"
|
|
:key="index"
|
|
:disabled="item.status === '1'"
|
|
:label="item.warehouseName"
|
|
:value="item.id"
|
|
>
|
|
<span style="float: left">{{ item.warehouseName }}</span>
|
|
<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
|
|
{{ item.villageName }}
|
|
</span>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="入库状态" prop="operateStatus">-->
|
|
<!-- <el-radio-group v-model="form.operateStatus">-->
|
|
<!-- <el-radio v-for="(item, index) in com_stock_in_status" :key="index" :value="item.value">{{ item.label }}</el-radio>-->
|
|
<!-- </el-radio-group>-->
|
|
<!-- </el-form-item>-->
|
|
<el-form-item label="入库人" prop="leader">
|
|
<el-input v-model.trim="form.leader" maxlength="20" placeholder="请输入入库人" />
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model.trim="form.remark" :rows="5" maxlength="200" placeholder="请输入备注" show-word-limit type="textarea" />
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="AddBuildingBody">
|
|
<div style="margin-bottom: 20px">
|
|
<span>详细入库列表</span>
|
|
<material ref="materialRef" :is-multiple="true" :isHidden="true" :userid="itemsid" returnvalue="*" @change="handleChangeitem">
|
|
<template #default>
|
|
<el-button icon="Plus" style="margin-left: 20px" type="primary" @click="() => materialRef.open()">添加</el-button>
|
|
</template>
|
|
</material>
|
|
</div>
|
|
<div class="addBuildingFormBody">
|
|
<el-table :data="form.items">
|
|
<el-table-column align="center" label="物料名称" prop="materialName" />
|
|
<el-table-column align="center" label="品牌" prop="brand" />
|
|
<el-table-column align="center" label="规格型号" prop="model" />
|
|
<el-table-column align="center" label="单位" prop="unit" />
|
|
<el-table-column align="center" label="成本价" prop="inNo">
|
|
<template #default="scope">
|
|
<el-input-number
|
|
v-model.trim.number="scope.row.costPrice"
|
|
:max="9999999"
|
|
:min="0.1"
|
|
:step="0.1"
|
|
maxlength="7"
|
|
placeholder="请输入"
|
|
></el-input-number>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="数量" prop="inNo">
|
|
<template #default="scope">
|
|
<el-input-number v-model.trim.number="scope.row.inNum" :max="9999999" :min="1" maxlength="7" placeholder="请输入"></el-input-number>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="备注" prop="remark">
|
|
<template #default="scope">
|
|
{{ scope.row.remark ? scope.row.remark : '-------' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作">
|
|
<template #default="scope">
|
|
<el-button link type="primary" @click="handleDeleteRow(scope.row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import material from '@/components/Holder/material.vue';
|
|
import PageHeader from '@/components/Pageheader/index.vue';
|
|
import { listSupplier } from '@/api/system/Tsupplier';
|
|
import { listWarehouse } from '@/api/system/Twarehouse';
|
|
import { addStockIn, getStockIn, updateStockIn } from '@/api/system/TPurchaseIn';
|
|
import { MaterialVO } from '@/api/system/Tmaterial/type';
|
|
|
|
interface tableType extends MaterialVO {
|
|
costPrice?: number; // 成本价
|
|
inNum?: number; // 成本价
|
|
}
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const materialRef = ref();
|
|
const formRef = ref();
|
|
const form = ref({
|
|
id: null,
|
|
inNo: null, //
|
|
operateStatus: '0', //
|
|
inDate: '', // 入库日期
|
|
supplierId: '', // 供应商
|
|
warehouseId: '', // 入库仓库
|
|
leader: '', // 备注
|
|
remark: '', // 备注
|
|
items: [] as tableType[] // 联系人
|
|
});
|
|
const itemsid = computed(() => {
|
|
return form.value.items.map((item) => item.id).join(',');
|
|
});
|
|
const rules = ref({
|
|
inDate: [{ required: true, message: '请选择 入库日期', trigger: 'blur' }],
|
|
supplierId: [{ required: true, message: '请选择 供应商', trigger: 'blur' }],
|
|
leader: [{ required: true, message: '请输入制单人', trigger: 'blur' }],
|
|
warehouseId: [{ required: true, message: '请选择 入库仓库', trigger: 'blur' }]
|
|
});
|
|
const userid = ref(null);
|
|
|
|
const warehouselist = ref([]);
|
|
const supplierlist = ref([]);
|
|
function init() {
|
|
listWarehouse().then((res) => {
|
|
warehouselist.value = res.rows;
|
|
});
|
|
listSupplier().then((res) => {
|
|
supplierlist.value = res.rows;
|
|
});
|
|
if (route.query.id) {
|
|
userid.value = route.query.id;
|
|
getStockIn(userid.value).then((res) => {
|
|
form.value = {
|
|
id: res.data.id,
|
|
leader: res.data.leader,
|
|
operateStatus: res.data.operateStatus,
|
|
inNo: res.data.inNo,
|
|
inDate: res.data.inDate,
|
|
supplierId: res.data.supplierId,
|
|
warehouseId: res.data.warehouseId,
|
|
remark: res.data.remark,
|
|
items: res.data.items
|
|
};
|
|
});
|
|
}
|
|
}
|
|
init();
|
|
|
|
function handleChangeitem(row: MaterialVO[]) {
|
|
form.value.items = row
|
|
.map((item) => {
|
|
if (!item.id) return null;
|
|
const find = form.value.items.find((i) => i.id === item.id);
|
|
if (find || form.value.items.length <= 0) {
|
|
return {
|
|
...item,
|
|
costPrice: 1,
|
|
inNum: 1,
|
|
materialId: item.id,
|
|
...find
|
|
};
|
|
} else {
|
|
return {
|
|
...item,
|
|
costPrice: 1,
|
|
inNum: 1,
|
|
materialId: item.id
|
|
};
|
|
}
|
|
})
|
|
.filter((item) => item !== null);
|
|
}
|
|
function handleDeleteRow(id: string) {
|
|
const findindex = form.value.items.findIndex((item) => item.id === id);
|
|
if (findindex !== -1) {
|
|
form.value.items.splice(findindex, 1);
|
|
}
|
|
}
|
|
|
|
// !== 提交 =============================================================================
|
|
// 提交
|
|
const submitForm = () => {
|
|
if (form.value.items.length <= 0) {
|
|
ElMessage.error('请添加入库物料');
|
|
return;
|
|
}
|
|
const bol = form.value.items.every((item) => {
|
|
return item.costPrice !== 0 && item.costPrice !== null && item.inNum !== 0 && item.inNum !== null;
|
|
});
|
|
if (!bol) {
|
|
ElMessage.warning('入库数量，入库价格 不能未空或者0');
|
|
return;
|
|
}
|
|
formRef.value?.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
// form.value.items = form.value.items.map((itme) => {
|
|
// return {
|
|
// 'materialId': itme.id,
|
|
// 'costPrice': itme.costPrice,
|
|
// 'inNum': itme.inNum
|
|
// };
|
|
// });
|
|
if (userid.value) {
|
|
updateStockIn(form.value).then(() => {
|
|
ElMessage.success('编辑成功');
|
|
cancelForm();
|
|
});
|
|
} else {
|
|
addStockIn(form.value).then(() => {
|
|
ElMessage.success('添加成功');
|
|
cancelForm();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
// 推出
|
|
const cancelForm = () => {
|
|
router.back();
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AddBuildingBox {
|
|
padding: 15px;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.AddBuildingBody {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-color: white;
|
|
padding: 15px;
|
|
|
|
.title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 20px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
margin-bottom: 60px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
&.formbox .addBuildingFormBody {
|
|
width: 550px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.addBuildingFormBody {
|
|
width: 100%;
|
|
}
|
|
|
|
.formBody {
|
|
width: 650px;
|
|
margin: 0 auto;
|
|
&:deep(.el-form-item__content, .el-date-picker, .el-select, .el-input) {
|
|
width: 550px !important;
|
|
margin-right: 10px;
|
|
}
|
|
.el-form-item {
|
|
margin-bottom: 20px;
|
|
align-items: center;
|
|
}
|
|
.el-button {
|
|
width: 80px;
|
|
height: 35px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|