You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
482 lines
15 KiB
482 lines
15 KiB
<template> |
|
<div> |
|
<el-dialog |
|
:close-on-click-modal="false" |
|
:title="outDialogTiltle" |
|
:visible.sync="outDialogVisible" |
|
:append-to-body="true" |
|
@close="handleCloseDetail" |
|
fullscreen |
|
> |
|
<div class="dialog-content"> |
|
<!-- 基本信息 --> |
|
<el-form |
|
:model="sizeForm" |
|
ref="dynamicValidateForm" |
|
label-width="100px" |
|
class="demo-dynamic" |
|
:rules="dynamicRules" |
|
> |
|
<div class="form-title">基本信息</div> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="出库申请时间"> |
|
<el-date-picker |
|
v-model="sizeForm.ldTwoOutStorage.outDate" |
|
type="date" |
|
placeholder="选择日期" |
|
style="width: 100%" |
|
disabled |
|
> |
|
</el-date-picker> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="事由" prop="ldTwoOutStorage.reason"> |
|
<el-input |
|
v-model="sizeForm.ldTwoOutStorage.reason" |
|
:disabled="outDialogType != 'add'" |
|
placeholder="请输入" |
|
></el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item |
|
label="物资类型" |
|
prop="ldTwoOutStorage.materialType" |
|
> |
|
<el-select |
|
v-model="sizeForm.ldTwoOutStorage.materialType" |
|
placeholder="请选择" |
|
style="width: 100%" |
|
:disabled="outDialogType != 'add'" |
|
> |
|
<el-option label="办公室物资" value="1"></el-option> |
|
<el-option label="其他物资" value="2"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="部门" prop="ldTwoOutStorage.departmentInfo"> |
|
<el-select |
|
v-model="sizeForm.ldTwoOutStorage.departmentInfo" |
|
placeholder="请选择" |
|
style="width: 100%" |
|
:disabled="outDialogType != 'add'" |
|
@change="deptChange" |
|
clearable |
|
filterable |
|
value-key="departmentId" |
|
> |
|
<el-option |
|
v-for="item in departmentOptions" |
|
:key="item.departmentId" |
|
:label="item.department" |
|
:value="item" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="领用人" prop="ldTwoOutStorage.proposerInfo"> |
|
<el-select |
|
v-model="sizeForm.ldTwoOutStorage.proposerInfo" |
|
placeholder="请选择" |
|
style="width: 100%" |
|
:disabled=" |
|
sizeForm.departmentId == '' || outDialogType == 'details' |
|
" |
|
clearable |
|
filterable |
|
value-key="userId" |
|
@change="proposerChange" |
|
> |
|
<el-option |
|
v-for="item in userOptions" |
|
:key="item.userId" |
|
:label="item.name" |
|
:value="item" |
|
> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12" v-if="outDialogType == 'details'"> |
|
<el-form-item label="填报人"> |
|
<el-input |
|
v-model="sizeForm.ldTwoOutStorage.shipperName" |
|
:disabled="outDialogType != 'add'" |
|
></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<div class="form-title">{{ outDateInfo }} 出库信息：</div> |
|
<el-button |
|
type="primary" |
|
size="mini" |
|
style="margin-bottom: 18px" |
|
@click="inTableAdd()" |
|
v-if="outDialogType != 'details'" |
|
>新增</el-button |
|
> |
|
<el-table |
|
:data="sizeForm.ldTwoOutStorageDetailList" |
|
border |
|
style="width: 100%" |
|
> |
|
<el-table-column prop="materialCode" label="物资编码" width="100"> |
|
</el-table-column> |
|
<el-table-column prop="str2" label="物资名称" width="140"> |
|
<template slot-scope="scope"> |
|
<el-select |
|
v-model="scope.row.materialitem" |
|
placeholder="请选择物" |
|
style="width: 100%" |
|
@change=" |
|
handleMaterialChange(scope.row.materialitem, scope.$index) |
|
" |
|
v-if="outDialogType != 'details'" |
|
value-key="id" |
|
> |
|
<el-option |
|
v-for="item in materials" |
|
:key="item.materialId" |
|
:label="item.materialName" |
|
:value="item" |
|
> |
|
</el-option> |
|
</el-select> |
|
<span v-else> {{ scope.row.materialName }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="model" label="规格/型号"> </el-table-column> |
|
<el-table-column prop="type" label="类别"> </el-table-column> |
|
<el-table-column prop="unit" label="单位"> </el-table-column> |
|
<el-table-column prop="num" label="数量"> |
|
<template slot-scope="scope"> |
|
<el-input-number |
|
size="mini" |
|
v-model="scope.row.num" |
|
:min="1" |
|
style="width: 100%" |
|
:disabled="outDialogType != 'add'" |
|
@change="(newValue) => handleQuantityChange(newValue, scope.$index)" |
|
></el-input-number> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="form-title" v-if="outDialogType != 'details'"> |
|
出库账目表格： |
|
</div> |
|
<el-table |
|
:data="sizeForm.inAccountsTableData" |
|
border |
|
style="width: 100%" |
|
v-if="outDialogType != 'details'" |
|
> |
|
<el-table-column prop="date" label="当前库存"> |
|
<el-table-column prop="materialCode" label="编码"> |
|
</el-table-column> |
|
<el-table-column prop="materialName" label="名称"> |
|
</el-table-column> |
|
<el-table-column prop="model" label="规格"> </el-table-column> |
|
<el-table-column prop="type" label="类别"> </el-table-column> |
|
<el-table-column prop="unit" label="单位"> </el-table-column> |
|
<el-table-column prop="oldNum" label="数量"> </el-table-column> |
|
</el-table-column> |
|
<el-table-column prop="date" label="出库信息"> |
|
<el-table-column prop="num" label="数量"> </el-table-column> |
|
</el-table-column> |
|
<el-table-column prop="date" label="出库后库存"> |
|
<el-table-column prop="newNum" label="数量"> </el-table-column> |
|
</el-table-column> |
|
</el-table> |
|
</el-form> |
|
</div> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="handleCloseDetail()">取 消</el-button> |
|
<el-button |
|
v-if="outDialogType != 'details'" |
|
type="primary" |
|
@click="sumbit()" |
|
>确 定</el-button |
|
> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import { getDetailedItems } from "@/api/firstOrder/outbound"; |
|
import { |
|
getUserList, |
|
getMaterialList, |
|
submit, |
|
getDetails, |
|
} from "@/api/secondOrder/outbound"; |
|
export default { |
|
props: { |
|
repairVisible: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
outDialogTiltle: { |
|
type: String, |
|
default: "", |
|
}, |
|
outDialogType: { |
|
type: String, |
|
default: "", |
|
}, |
|
type: { |
|
type: String, |
|
default: "", |
|
}, |
|
rowData: { |
|
type: Object, |
|
default: {}, |
|
}, |
|
}, |
|
computed: { |
|
outDateInfo() { |
|
const now = new Date(); |
|
const year = now.getFullYear(); |
|
const month = String(now.getMonth() + 1).padStart(2, "0"); |
|
const day = String(now.getDate()).padStart(2, "0"); |
|
return `${year}年${month}月${day}日`; |
|
}, |
|
}, |
|
watch: { |
|
outDialogType: { |
|
immediate: true, |
|
handler(newVal) { |
|
if (newVal === "details") { |
|
this.dynamicRules = {}; // 清空校验规则 |
|
} else { |
|
this.dynamicRules = this.rules; // 恢复校验规则 |
|
} |
|
}, |
|
}, |
|
}, |
|
data() { |
|
return { |
|
outDialogVisible: false, |
|
sizeForm: { |
|
ldTwoOutStorage: { |
|
outDate: "", |
|
reason: "", |
|
materialType: "", |
|
departmentId: "", |
|
department: "", |
|
proposerId: "", |
|
proposerName: "", |
|
submitName: "", //填报人 |
|
departmentInfo: null, |
|
proposerInfo: null, |
|
}, |
|
ldTwoOutStorageDetailList: [], //出库单详情 |
|
inAccountsTableData: [], //库存汇总 |
|
userInfoVO: { |
|
//登录用户的信息 |
|
userId: "user001", |
|
name: "张三2", |
|
mainErDepartment: "20", |
|
mainErDepartmentName: "实业公司", |
|
}, |
|
}, |
|
rules: { |
|
ldTwoOutStorage: { |
|
reason: [ |
|
{ |
|
required: true, |
|
message: "请填写", |
|
trigger: "blur", |
|
}, |
|
], |
|
materialType: [ |
|
{ |
|
required: true, |
|
message: "请选择", |
|
trigger: "change", |
|
}, |
|
], |
|
departmentInfo: [ |
|
{ |
|
required: true, |
|
message: "请选择", |
|
trigger: "change", |
|
}, |
|
], |
|
proposerInfo: [ |
|
{ |
|
required: true, |
|
message: "请选择", |
|
trigger: "change", |
|
}, |
|
], |
|
}, |
|
}, |
|
inBatchDialogVisible: false, //选择采购单的数据 |
|
batchType: "", //批量选择类型 |
|
materials: [], //物资列表 |
|
userOptions: [], //领用人列表 |
|
departmentOptions: [], //部门列表 |
|
dynamicRules: {}, // 动态校验规则 |
|
}; |
|
}, |
|
mounted() { |
|
this.outDialogVisible = this.repairVisible; |
|
if (this.outDialogType == "add") { |
|
this.addInit(); |
|
} else { |
|
this.inInit(); |
|
} |
|
|
|
this.getDetailedItems(); |
|
}, |
|
methods: { |
|
// 初始化 汇总库存 inAccountsTableData |
|
summaryTableData() { |
|
this.sizeForm.inAccountsTableData = JSON.parse(JSON.stringify(this.sizeForm.ldTwoOutStorageDetailList)) |
|
}, |
|
handleQuantityChange(newValue, index) { |
|
const currentRow = this.sizeForm.ldTwoOutStorageDetailList[index]; |
|
if (currentRow.materialCode != '') { |
|
currentRow.oldNum = currentRow.materialitem.num |
|
currentRow.num = currentRow.num |
|
currentRow.newNum = currentRow.materialitem.num - currentRow.num |
|
} |
|
this.$set(this.sizeForm.inAccountsTableData,index,currentRow) |
|
this.sizeForm.inAccountsTableData[index] = currentRow |
|
}, |
|
// 更新全局总计 |
|
updateGlobalTotal() { |
|
let totalAmount = 0; |
|
}, |
|
//获取单条选择的物资名称列表 |
|
async getMaterialList(value) { |
|
getMaterialList({ departmentId: value }).then((res) => { |
|
this.materials = res.data.result; |
|
}); |
|
}, |
|
// 选中物资获取数据 |
|
handleMaterialChange(row, index) { |
|
console.log(99999,row) |
|
this.sizeForm.ldTwoOutStorageDetailList[index].materialId = |
|
row.materialId; |
|
this.sizeForm.ldTwoOutStorageDetailList[index].model = row.model; |
|
this.sizeForm.ldTwoOutStorageDetailList[index].materialCode = |
|
row.materialCode; |
|
this.sizeForm.ldTwoOutStorageDetailList[index].materialName = |
|
row.materialName; |
|
this.sizeForm.ldTwoOutStorageDetailList[index].type = row.type; |
|
this.sizeForm.ldTwoOutStorageDetailList[index].unit = row.unit; |
|
|
|
|
|
}, |
|
// 获取领用人列表 |
|
getUserList(value) { |
|
getUserList({ departmentId: value }).then((res) => { |
|
this.userOptions = res.data.result; |
|
if (this.outDialogType != "add") { |
|
let userArr = this.userOptions.filter( |
|
(item) => item.userId == this.sizeForm.ldTwoOutStorage.proposerId |
|
); |
|
this.sizeForm.ldTwoOutStorage.proposerInfo = |
|
userArr.length > 0 ? userArr[0] : {}; |
|
} |
|
}); |
|
}, |
|
// 获取部门列表 |
|
getDetailedItems() { |
|
getDetailedItems().then((res) => { |
|
this.departmentOptions = res.data.result; |
|
}); |
|
}, |
|
// 选中部门之后 获取领用人列表 |
|
deptChange(value) { |
|
this.sizeForm.ldTwoOutStorage.proposerInfo = null; |
|
this.sizeForm.ldTwoOutStorage.departmentId = value.departmentId; |
|
this.sizeForm.ldTwoOutStorage.department = value.department; |
|
this.getUserList(value.departmentId); |
|
this.getMaterialList(value.departmentId); |
|
}, |
|
// 领用人选中 |
|
proposerChange(value) { |
|
console.log("领用人", value); |
|
this.sizeForm.ldTwoOutStorage.proposerId = value.userId; |
|
this.sizeForm.ldTwoOutStorage.proposerName = value.name; |
|
}, |
|
handleCloseDetail() { |
|
this.outDialogVisible = false; |
|
this.$emit("handleCloseDetail"); |
|
}, |
|
inInit() { |
|
if (this.outDialogType != "add") { |
|
getDetails({ twoOutStorageId: this.rowData.id }).then((res) => { |
|
this.sizeForm = res.data.result; |
|
this.getUserList(this.sizeForm.ldTwoOutStorage.departmentId); |
|
|
|
let departmentArr = this.departmentOptions.filter( |
|
(item) => |
|
item.departmentId == this.sizeForm.ldTwoOutStorage.departmentId |
|
); |
|
|
|
this.sizeForm.ldTwoOutStorage.departmentInfo = |
|
departmentArr.length > 0 ? departmentArr[0] : {}; |
|
|
|
// this.sizeForm.ldTwoOutStorage.proposerInfo={} |
|
}); |
|
} |
|
}, |
|
|
|
addInit() { |
|
const now = new Date(); |
|
const year = now.getFullYear(); |
|
const month = String(now.getMonth() + 1).padStart(2, "0"); |
|
const day = String(now.getDate()).padStart(2, "0"); |
|
this.sizeForm.ldTwoOutStorage.outDate = `${year}-${month}-${day} 00:00:00`; //入库时间 |
|
}, |
|
handleCloseDetail() { |
|
this.inDialogVisible = false; |
|
this.$emit("handleCloseDetail"); |
|
}, |
|
// 添加入库数据 |
|
inTableAdd() { |
|
this.sizeForm.ldTwoOutStorageDetailList.push({}); |
|
this.summaryTableData() |
|
}, |
|
// 提交 |
|
sumbit() { |
|
console.log("form", this.sizeForm); |
|
this.$refs.dynamicValidateForm.validate((valid) => { |
|
if (valid) { |
|
submit(this.sizeForm).then((res) => { |
|
this.$message({ |
|
type: "success", |
|
message: "提交成功", |
|
}); |
|
this.handleCloseDetail(); |
|
}); |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.form-title { |
|
margin: 20px 0; |
|
} |
|
::v-deep.el-dialog__footer { |
|
position: fixed !important; |
|
bottom: 0 !important; |
|
right: 0 !important; |
|
} |
|
|
|
::v-deep.dialog-content { |
|
max-height: calc(100vh - 200px); /* 减去标题栏和底部按钮的高度 */ |
|
overflow-y: auto; |
|
padding-right: 10px; /* 预留滚动条空间 */ |
|
} |
|
</style>
|
|
|