298 lines
9.8 KiB
Vue
298 lines
9.8 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="outDate">
|
|
<el-date-picker
|
|
v-model="form.outDate"
|
|
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_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" 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="false" :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="出库价">
|
|
<template #default="scope">
|
|
<!-- <el-input v-model.trim.number="scope.row.outPrice"></el-input> -->
|
|
<el-input-number v-model.trim.number="scope.row.outPrice" :max="9999999" :min="0" :step="0.01" maxlength="7" placeholder="价格" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="数量" prop="inNo">
|
|
<template #default="scope">
|
|
<el-input-number v-model.trim.number="scope.row.outNum" :max="9999999" :min="1" maxlength="7" placeholder="个数" />
|
|
</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 { MaterialVO } from '@/api/system/Tmaterial/type';
|
|
import { addStockOut, getStockOut, updateStockOut } from '@/api/system/TissueOut';
|
|
interface tableType extends MaterialVO {
|
|
costPrice?: number; // 成本价
|
|
outNum?: number; // 成本价
|
|
}
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const materialRef = ref();
|
|
const formRef = ref();
|
|
const form = ref({
|
|
id: null,
|
|
outNo: null, //
|
|
operateStatus: '1', //
|
|
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,
|
|
outNum: 1,
|
|
outPrice: 1,
|
|
...find
|
|
};
|
|
} else {
|
|
return {
|
|
outNum: 1,
|
|
outPrice: 1,
|
|
...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 = () => {
|
|
if (form.value.items.length <= 0) {
|
|
ElMessage.error('请添加出库物料');
|
|
return;
|
|
}
|
|
const bol = form.value.items.every((item) => {
|
|
return item.costPrice !== 0 && item.costPrice !== null && item.outNum !== 0 && item.outNum !== null;
|
|
});
|
|
if (!bol) {
|
|
ElMessage.warning('出库价格 不能为0');
|
|
return;
|
|
}
|
|
|
|
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 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>
|