完成仓库模块
This commit is contained in:
Zy
267
src/views/system/warehouse/IssueOut/add.vue
Normal file
267
src/views/system/warehouse/IssueOut/add.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="AddBuildingBox">
|
||||
<PageHeader></PageHeader>
|
||||
<el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" 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="outDate">
|
||||
<el-date-picker
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
v-model="form.outDate"
|
||||
type="date"
|
||||
placeholder="请选择出库日期"
|
||||
/>
|
||||
</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" />
|
||||
</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" :label="item.warehouseName" :value="item.id" />
|
||||
</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_out_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" placeholder="请输入领用人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="AddBuildingBody">
|
||||
<div style="margin-bottom: 20px">
|
||||
<span>详细出库列表</span>
|
||||
<material :userid="itemsid" returnvalue="*" @change="handleChangeitem" :is-multiple="true" ref="materialRef">
|
||||
<template #default>
|
||||
<el-button @click="() => materialRef.open()" style="margin-left: 20px" icon="Plus" type="primary">添加</el-button>
|
||||
</template>
|
||||
</material>
|
||||
</div>
|
||||
<div class="addBuildingFormBody">
|
||||
<el-table :data="form.items">
|
||||
<el-table-column label="物料名称" align="center" prop="materialName" />
|
||||
<el-table-column label="品牌" align="center" prop="brand" />
|
||||
<el-table-column label="规格型号" align="center" prop="model" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="出库价" align="center" prop="inNo">
|
||||
<template #default="scope">
|
||||
<el-input v-model.trim.number="scope.row.outPrice" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" align="center" prop="inNo">
|
||||
<template #default="scope">
|
||||
<el-input v-model.trim.number="scope.row.outNum" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark">
|
||||
<template #default="scope">
|
||||
{{ scope.row.remark ? scope.row.remark : '-------' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="handleDeleteRow(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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 { MaterialVO } from '@/api/system/Tmaterial/type';
|
||||
import { addStockOut, getStockOut, updateStockOut } from '@/api/system/TissueOut';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_stock_out_status } = toRefs<any>(proxy?.useDict('com_stock_out_status'));
|
||||
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,
|
||||
outNo: null, //
|
||||
operateStatus: '0', //
|
||||
outDate: '', // 出库日期
|
||||
supplierId: '', // 供应商
|
||||
warehouseId: '', // 出库仓库
|
||||
leader: '', // 备注
|
||||
remark: '', // 备注
|
||||
items: [] as tabletype[] // 联系人
|
||||
});
|
||||
const itemsid = computed(() => {
|
||||
return form.value.items.map((item) => item.id).join(',');
|
||||
});
|
||||
const rules = ref({
|
||||
outDate: [{ 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;
|
||||
getStockOut(userid.value).then((res) => {
|
||||
form.value = {
|
||||
id: res.data.id,
|
||||
leader: res.data.leader,
|
||||
operateStatus: res.data.operateStatus,
|
||||
outNo: res.data.outNo,
|
||||
outDate: res.data.outDate,
|
||||
supplierId: res.data.supplierId,
|
||||
warehouseId: res.data.warehouseId,
|
||||
remark: res.data.remark,
|
||||
items: res.data.items
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
init();
|
||||
|
||||
function handleChangeitem(row: MaterialVO[]) {
|
||||
const arr = 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,
|
||||
materialId: item.id,
|
||||
...find
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
materialId: item.id
|
||||
};
|
||||
}
|
||||
})
|
||||
.filter((item) => item !== null);
|
||||
form.value.items = arr;
|
||||
}
|
||||
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 = () => {
|
||||
formRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (userid.value) {
|
||||
updateStockOut(form.value).then(() => {
|
||||
ElMessage.success('编辑成功');
|
||||
cancelForm();
|
||||
});
|
||||
} else {
|
||||
addStockOut(form.value).then(() => {
|
||||
ElMessage.success('添加成功');
|
||||
cancelForm();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 推出
|
||||
const cancelForm = () => {
|
||||
router.back();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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>
|
||||
Reference in New Issue
Block a user