lanan-system-vue/src/views/repair/stockOperate/Components/SoInfo.vue
2024-09-13 18:31:13 +08:00

135 lines
3.7 KiB
Vue

<template>
<div>
<el-form :model="formData" size="small" :inline="true" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<!-- 供应商 组件 -->
<el-form-item v-if="soByType" label="供应商" prop="supplierId">
<SupplierChoose @selected="getSupplier"/>
</el-form-item>
<!-- 日期 内嵌 -->
<el-form-item label="日期" prop="soTime">
<el-date-picker
v-model="formData.soTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<!-- 单据编号 内嵌 -->
<el-form-item label="单据编号" prop="soNo">
<el-input disabled v-model="formData.soNo" style="width: 20rem"/>
</el-form-item>
<!-- 采购员/领料人 组件 -->
<el-form-item :label="staffRole" prop="userId">
<StaffChoose @selected="getStaff"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<!-- 选择商品 组件 -->
<el-col :span="12">
<el-form-item label="选择商品">
<PartChoose @selected="getPart"/>
</el-form-item>
</el-col>
</el-row>
<!-- 商品表格 组件 -->
<el-row :gutter="20">
<el-col :span="24">
<SoTable :part-list="partList" :so-by-type="soByType" @deleteItem="deleteItem"/>
</el-col>
</el-row>
<el-row :gutter="2" style="margin-top: 1rem">
<!-- 备注 -->
<el-col :span="12">
<el-form-item label="备注">
<el-input style="width: 45rem"/>
</el-form-item>
</el-col>
<!-- 按钮操作 -->
<el-col :span="12" style="text-align: right">
<el-button v-if="soByType" type="danger">结算</el-button>
<el-button v-else type="primary">确定</el-button>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
import PartChoose from "@/views/repair/Components/PartChoose.vue";
import SoTable from "@/views/repair/stockOperate/Components/SoTable.vue";
import SupplierChoose from "@/views/repair/Components/SupplierChoose.vue";
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
export default {
name: "SoInfo",
components: {
StaffChoose,
PartChoose,
SoTable,
SupplierChoose
},
props: {
soByType: {
type: Boolean,
defaultValue: true,
required: true
}
},
data() {
return {
formData: {
soNo: null,
supplierId: null,
supplierName: null,
soTime: Date.now(),
userId: null,
userName: null,
partList: []
},
staffRole: "采购员",
partList: [],
}
},
mounted() {
this.formData.soNo = createUniqueCodeByHead(this.soByType ? "CG" : "LL")
this.staffRole = this.soByType ? this.staffRole : "领料人"
},
methods: {
// 得到选择的员工
getStaff(data) {
this.formData.userId = data.id
this.formData.userName = data.name
},
// 得到选择的供应商
getSupplier(data) {
console.log(data)
},
// 得到选择的商品
async getPart(data) {
const flag = this.partList.find(item => item.id === data.id)
if (flag) {
try {
await this.$modal.confirm(`${data.name}已存在,确定要重复添加?`)
this.partList.push(data)
} catch {
}
} else {
this.partList.push(data)
}
},
// 删除数据
deleteItem(index) {
this.partList.splice(index, 1)
}
}
}
</script>
<style scoped lang="scss">
</style>