392 lines
16 KiB
Vue
392 lines
16 KiB
Vue
|
<template>
|
||
|
|
<!-- 装备出库页面 -->
|
||
|
|
<div class="app-container">
|
||
|
|
<div class="page-header">
|
||
|
|
<el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
|
||
|
|
<span class="page-title">装备出库</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-form ref="outFormRef" :model="outForm" :rules="outFormRules" label-width="auto" size="small">
|
||
|
|
<el-row :gutter="20" type="flex">
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="变更状态为">
|
||
|
|
<el-radio-group v-model="outForm.outStatus">
|
||
|
|
<el-radio label="self">自用</el-radio>
|
||
|
|
<el-radio label="share">共享</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
|
||
|
|
<el-button style="margin-left: 80px">确定变更</el-button>
|
||
|
|
<el-button>取消</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" type="flex">
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="使用项目：" prop="projectName">
|
||
|
|
<el-input v-model="outForm.projectName" placeholder="请输入使用项目名称" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="项目类型：" prop="outReason">
|
||
|
|
<el-select
|
||
|
|
clearable
|
||
|
|
style="width: 100%"
|
||
|
|
placeholder="请选择项目类型"
|
||
|
|
v-model="outForm.outReason"
|
||
|
|
>
|
||
|
|
<el-option label="工程项目" value="1" />
|
||
|
|
<el-option label="非工程项目" value="2" />
|
||
|
|
<el-option label="调拨项目" value="3" />
|
||
|
|
<el-option label="其他" value="4" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="电压等级：" prop="outReason">
|
||
|
|
<el-select
|
||
|
|
clearable
|
||
|
|
style="width: 100%"
|
||
|
|
placeholder="请选择项目类型"
|
||
|
|
v-model="outForm.outReason"
|
||
|
|
>
|
||
|
|
<el-option label="工程项目" value="1" />
|
||
|
|
<el-option label="非工程项目" value="2" />
|
||
|
|
<el-option label="调拨项目" value="3" />
|
||
|
|
<el-option label="其他" value="4" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="项目所在省：" prop="outReason">
|
||
|
|
<el-select
|
||
|
|
clearable
|
||
|
|
style="width: 100%"
|
||
|
|
placeholder="请选择项目类型"
|
||
|
|
v-model="outForm.outReason"
|
||
|
|
>
|
||
|
|
<el-option label="工程项目" value="1" />
|
||
|
|
<el-option label="非工程项目" value="2" />
|
||
|
|
<el-option label="调拨项目" value="3" />
|
||
|
|
<el-option label="其他" value="4" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="项目所在市：" prop="outReason">
|
||
|
|
<el-select
|
||
|
|
clearable
|
||
|
|
style="width: 100%"
|
||
|
|
placeholder="请选择项目类型"
|
||
|
|
v-model="outForm.outReason"
|
||
|
|
>
|
||
|
|
<el-option label="工程项目" value="1" />
|
||
|
|
<el-option label="非工程项目" value="2" />
|
||
|
|
<el-option label="调拨项目" value="3" />
|
||
|
|
<el-option label="其他" value="4" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="20" type="flex">
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="项目所在区/县：" prop="outReason">
|
||
|
|
<el-select
|
||
|
|
clearable
|
||
|
|
style="width: 100%"
|
||
|
|
placeholder="请选择项目类型"
|
||
|
|
v-model="outForm.outReason"
|
||
|
|
>
|
||
|
|
<el-option label="工程项目" value="1" />
|
||
|
|
<el-option label="非工程项目" value="2" />
|
||
|
|
<el-option label="调拨项目" value="3" />
|
||
|
|
<el-option label="其他" value="4" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="详细地址：" prop="receiver">
|
||
|
|
<el-input type="textarea" v-model="outForm.receiver" placeholder="请输入详细地址" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="需求单位：" prop="phone">
|
||
|
|
<el-input v-model="outForm.phone" placeholder="请输入联系电话" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="联系人：" prop="phone">
|
||
|
|
<el-input v-model="outForm.phone" placeholder="请输入联系电话" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col>
|
||
|
|
<el-form-item label="联系方式：" prop="phone">
|
||
|
|
<el-input v-model="outForm.phone" placeholder="请输入联系电话" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col>
|
||
|
|
<el-button type="primary" @click="onHandleAddEquipment">添加变更装备</el-button>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<el-table>
|
||
|
|
<el-table-column label="序号" type="index" align="center" width="55" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备名称" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备系列" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="规格型号" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备编码" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备状态" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="使用日期" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="操作" />
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<el-dialog title="添加变更装备" :visible.sync="addEquipmentVisible" width="80%">
|
||
|
|
<el-form :inline="true" label-width="auto">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="装备名称" prop="equipmentName">
|
||
|
|
<el-input
|
||
|
|
v-model="addEquipmentForm.equipmentName"
|
||
|
|
placeholder="请输入装备名称"
|
||
|
|
clearable
|
||
|
|
style="width: 100%"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="装备状态" prop="equipmentName">
|
||
|
|
<el-input v-model="addEquipmentForm.equipmentName" placeholder="请输入装备名称" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item>
|
||
|
|
<el-button>查询</el-button>
|
||
|
|
<el-button>重置</el-button>
|
||
|
|
<el-button @click="onHandleAddEquipmentConfirm">确定添加</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<el-table>
|
||
|
|
<el-table-column label="序号" type="index" align="center" width="55" />
|
||
|
|
<el-table-column
|
||
|
|
width="55"
|
||
|
|
align="center"
|
||
|
|
type="selection"
|
||
|
|
@selection-change="handleSelectionAddEquipment"
|
||
|
|
/>
|
||
|
|
<el-table-column prop="equipmentCode" label="公司名称" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备名称" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备系列" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备型号" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="装备编号" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="计数单位" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="产权单位" align="center" />
|
||
|
|
<el-table-column prop="equipmentCode" label="资产原值(元)" align="center" />
|
||
|
|
</el-table>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
addEquipmentVisible: false,
|
||
|
|
outForm: {
|
||
|
|
outDate: '',
|
||
|
|
outReason: '',
|
||
|
|
outNumber: '',
|
||
|
|
receiveDept: '',
|
||
|
|
receiver: '',
|
||
|
|
phone: '',
|
||
|
|
projectName: '',
|
||
|
|
returnDate: '',
|
||
|
|
outStatus: 'normal',
|
||
|
|
remark: '',
|
||
|
|
},
|
||
|
|
outFormRules: {
|
||
|
|
outDate: [{ required: true, message: '请选择出库日期', trigger: 'change' }],
|
||
|
|
outReason: [{ required: true, message: '请选择出库原因', trigger: 'change' }],
|
||
|
|
outNumber: [
|
||
|
|
{ required: true, message: '请输入出库单号', trigger: 'blur' },
|
||
|
|
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
|
||
|
|
],
|
||
|
|
receiveDept: [{ required: true, message: '请选择领用部门', trigger: 'change' }],
|
||
|
|
receiver: [
|
||
|
|
{ required: true, message: '请输入领用人姓名', trigger: 'blur' },
|
||
|
|
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
|
||
|
|
],
|
||
|
|
phone: [
|
||
|
|
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
||
|
|
{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
|
||
|
|
],
|
||
|
|
projectName: [
|
||
|
|
{ required: true, message: '请输入使用项目名称', trigger: 'blur' },
|
||
|
|
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' },
|
||
|
|
],
|
||
|
|
returnDate: [{ required: true, message: '请选择预计归还日期', trigger: 'change' }],
|
||
|
|
outStatus: [{ required: true, message: '请选择出库状态', trigger: 'change' }],
|
||
|
|
},
|
||
|
|
equipmentList: [
|
||
|
|
{
|
||
|
|
equipmentCode: 'EQ001',
|
||
|
|
equipmentName: '挖掘机',
|
||
|
|
equipmentType: '工程机械',
|
||
|
|
model: 'CAT320D',
|
||
|
|
quantity: 1,
|
||
|
|
maxQuantity: 5,
|
||
|
|
unit: '台',
|
||
|
|
status: 'available',
|
||
|
|
location: 'A区-01',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
equipmentCode: 'EQ002',
|
||
|
|
equipmentName: '起重机',
|
||
|
|
equipmentType: '起重设备',
|
||
|
|
model: 'QY25K5',
|
||
|
|
quantity: 1,
|
||
|
|
maxQuantity: 3,
|
||
|
|
unit: '台',
|
||
|
|
status: 'available',
|
||
|
|
location: 'B区-02',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
addEquipmentForm: {
|
||
|
|
equipmentName: '',
|
||
|
|
equipmentStatus: '',
|
||
|
|
},
|
||
|
|
selectedEquipment: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 返回上一页
|
||
|
|
goBack() {
|
||
|
|
this.$router.go(-1)
|
||
|
|
},
|
||
|
|
|
||
|
|
// 表单重置
|
||
|
|
resetForm() {
|
||
|
|
this.$refs.outFormRef.resetFields()
|
||
|
|
this.equipmentList = []
|
||
|
|
this.selectedEquipment = []
|
||
|
|
},
|
||
|
|
|
||
|
|
// 提交表单
|
||
|
|
submitForm() {
|
||
|
|
this.$refs.outFormRef.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
if (this.equipmentList.length === 0) {
|
||
|
|
this.$modal.msgError('请至少添加一个装备')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
// 这里可以调用出库API
|
||
|
|
console.log('出库表单数据:', this.outForm)
|
||
|
|
console.log('装备清单:', this.equipmentList)
|
||
|
|
|
||
|
|
this.$modal.msgSuccess('出库申请提交成功')
|
||
|
|
this.resetForm()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
// 添加装备
|
||
|
|
onHandleAddEquipment() {
|
||
|
|
// 这里可以打开装备选择弹窗
|
||
|
|
this.addEquipmentVisible = true
|
||
|
|
},
|
||
|
|
|
||
|
|
// 移除装备
|
||
|
|
removeEquipment(index) {
|
||
|
|
this.equipmentList.splice(index, 1)
|
||
|
|
},
|
||
|
|
|
||
|
|
// 批量移除装备
|
||
|
|
removeSelectedEquipment() {
|
||
|
|
if (this.selectedEquipment.length === 0) {
|
||
|
|
this.$modal.msgWarning('请选择要移除的装备')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$modal.confirm('确认移除选中的装备吗？').then(() => {
|
||
|
|
this.selectedEquipment.forEach((item) => {
|
||
|
|
const index = this.equipmentList.findIndex((eq) => eq.equipmentCode === item.equipmentCode)
|
||
|
|
if (index > -1) {
|
||
|
|
this.equipmentList.splice(index, 1)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.selectedEquipment = []
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
// 选择变化
|
||
|
|
handleSelectionAddEquipment(selection) {
|
||
|
|
this.selectedEquipment = selection
|
||
|
|
},
|
||
|
|
|
||
|
|
// 确定添加
|
||
|
|
onHandleAddEquipmentConfirm() {
|
||
|
|
if (this.selectedEquipment.length === 0) {
|
||
|
|
this.$modal.msgWarning('请选择要添加的装备')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
this.addEquipmentVisible = false
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.app-container {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
border-bottom: 1px solid #e6e6e6;
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-left: 10px;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-actions {
|
||
|
|
margin: 15px 0;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-actions {
|
||
|
|
margin-top: 30px;
|
||
|
|
text-align: right;
|
||
|
|
|
||
|
|
::v-deep .el-form-item__content {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table {
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-form-item {
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-input-number {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|