|
|
<template>
|
|
|
<div>
|
|
|
<xy-dialog
|
|
|
ref="dialog"
|
|
|
:width="80"
|
|
|
:is-show.sync="isShow"
|
|
|
type="form"
|
|
|
:title="titleName"
|
|
|
:form="form"
|
|
|
:rules="rules"
|
|
|
@submit="submit"
|
|
|
>
|
|
|
<template v-slot:rukuriqi>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>入库日期：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-date-picker
|
|
|
v-model="form.rukuriqi"
|
|
|
style="width: 300px;"
|
|
|
type="date"
|
|
|
placeholder="选择入库日期"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:jingbanren>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>经办人：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="form.jingbanren" placeholder="请填写经办人" clearable style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:fujian>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;" />附件：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-upload
|
|
|
ref="fileUpload"
|
|
|
:action="action"
|
|
|
multiple
|
|
|
class="upload-demo"
|
|
|
:file-list="fileList"
|
|
|
style="width:400px"
|
|
|
:auto-upload="true"
|
|
|
:headers="headers"
|
|
|
:on-success="handleSuccess"
|
|
|
:on-remove="handleRemove"
|
|
|
>
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:beizhu>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;" />备注：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input
|
|
|
v-model="form.beizhu"
|
|
|
type="textarea"
|
|
|
:rows="3"
|
|
|
placeholder="请输入备注"
|
|
|
clearable
|
|
|
style="width: 300px;"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:rukuwuzi>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;" />入库物资：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content" style="width: 100%;">
|
|
|
<div style="margin-bottom: 10px;">
|
|
|
<el-button type="primary" size="small" @click="addMaterial">新增物资</el-button>
|
|
|
</div>
|
|
|
<el-table
|
|
|
:data="materialList"
|
|
|
border
|
|
|
style="width: 90%;"
|
|
|
max-height="400"
|
|
|
>
|
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
<el-table-column prop="cangkumingcheng" label="仓库名称" width="150" align="center" />
|
|
|
<el-table-column prop="xianwuzimingcheng" label="现物资名称" width="150" align="center" />
|
|
|
<el-table-column prop="yuanwuzimingcheng" label="原物资名称" width="150" align="center" />
|
|
|
<el-table-column prop="wuzidaima" label="物资代码" width="120" align="center" />
|
|
|
<el-table-column prop="guigexinghao" label="规格型号" width="120" align="center" />
|
|
|
<el-table-column prop="shuliang" label="数量" width="80" align="center" />
|
|
|
<el-table-column prop="danwei" label="单位" width="80" align="center" />
|
|
|
<el-table-column prop="jiazhiyuan" label="价值(元)" width="100" align="center" />
|
|
|
<el-table-column prop="quyu" label="区域" width="100" align="center" />
|
|
|
<el-table-column fixed="right" label="操作" width="100" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
type="danger"
|
|
|
size="mini"
|
|
|
@click="removeMaterial(scope.$index)"
|
|
|
>删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
|
|
|
<!-- 物资添加组件 -->
|
|
|
<addMater
|
|
|
ref="addMater"
|
|
|
:is-local-mode="true"
|
|
|
@material-added="handleMaterialAdded"
|
|
|
/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
save,
|
|
|
show
|
|
|
} from '@/api/system/baseForm.js'
|
|
|
import {
|
|
|
Message
|
|
|
} from 'element-ui'
|
|
|
import addMater from '@/views/storages/components/addMater.vue'
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
import { index as getCangkuList } from '@/api/system/baseForm.js'
|
|
|
import { getInfo } from '@/api/user.js'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
addMater
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
type: 'add',
|
|
|
id: '',
|
|
|
titleName: '',
|
|
|
tableName: 'flood_entry',
|
|
|
action: `${process.env.VUE_APP_UPLOAD_API}`,
|
|
|
fileList: [],
|
|
|
headers: {
|
|
|
Authorization: `Bearer ${getToken()}`
|
|
|
},
|
|
|
cangkuList: [],
|
|
|
materialList: [], // 入库物资列表
|
|
|
form: {
|
|
|
rukuriqi: '',
|
|
|
jingbanren: '',
|
|
|
fujian: [],
|
|
|
beizhu: '',
|
|
|
rukuwuzi: []
|
|
|
},
|
|
|
rules: {
|
|
|
rukuriqi: [{
|
|
|
required: true,
|
|
|
message: '请选择入库日期'
|
|
|
}],
|
|
|
jingbanren: [{
|
|
|
required: true,
|
|
|
message: '请填写经办人'
|
|
|
}]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(newVal) {
|
|
|
if (newVal) {
|
|
|
this.titleName = this.type === 'add' ? `新增入库记录` : `编辑入库记录`
|
|
|
if (this.type === 'editor') {
|
|
|
this.getDetail()
|
|
|
} else {
|
|
|
this.resetForm()
|
|
|
// 新增时自动填充经办人
|
|
|
this.getUserName()
|
|
|
}
|
|
|
} else {
|
|
|
this.id = ''
|
|
|
this.type = ''
|
|
|
this.resetForm()
|
|
|
if (this.$refs['dialog']) {
|
|
|
this.$refs['dialog'].reset()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getCangku()
|
|
|
},
|
|
|
methods: {
|
|
|
async getUserName() {
|
|
|
try {
|
|
|
const res = await getInfo()
|
|
|
if (res && res.name) {
|
|
|
this.form.jingbanren = res.name
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取用户信息失败', error)
|
|
|
}
|
|
|
},
|
|
|
async getCangku() {
|
|
|
const res = await getCangkuList({
|
|
|
page_size: 999,
|
|
|
page: 1,
|
|
|
table_name: 'materialstorages'
|
|
|
})
|
|
|
this.cangkuList = res.data || []
|
|
|
},
|
|
|
resetForm() {
|
|
|
this.form = {
|
|
|
rukuriqi: '',
|
|
|
jingbanren: '',
|
|
|
fujian: [],
|
|
|
beizhu: '',
|
|
|
rukuwuzi: []
|
|
|
}
|
|
|
this.fileList = []
|
|
|
this.materialList = []
|
|
|
},
|
|
|
handleSuccess(response, file, fileList) {
|
|
|
this.fileList = fileList
|
|
|
const arr = []
|
|
|
for (const item of this.fileList) {
|
|
|
if (item.response && item.response.id) {
|
|
|
arr.push(item.response.id)
|
|
|
} else if (item.id) {
|
|
|
arr.push(item.id)
|
|
|
}
|
|
|
}
|
|
|
this.form.fujian = arr
|
|
|
},
|
|
|
handleRemove(file, fileList) {
|
|
|
this.fileList = fileList
|
|
|
const arr = []
|
|
|
for (const item of this.fileList) {
|
|
|
if (item.response && item.response.id) {
|
|
|
arr.push(item.response.id)
|
|
|
} else if (item.id) {
|
|
|
arr.push(item.id)
|
|
|
}
|
|
|
}
|
|
|
this.form.fujian = arr
|
|
|
},
|
|
|
addMaterial() {
|
|
|
// 打开物资添加组件
|
|
|
this.$refs['addMater'].isShow = true
|
|
|
this.$refs['addMater'].type = 'add'
|
|
|
this.$refs['addMater'].setCkList(this.cangkuList)
|
|
|
},
|
|
|
handleMaterialAdded(materialData) {
|
|
|
// 接收从addMater组件返回的物资数据，添加到本地列表
|
|
|
if (materialData) {
|
|
|
// 为每条物资添加一个临时ID，用于删除
|
|
|
const newMaterial = {
|
|
|
...materialData,
|
|
|
tempId: Date.now() + Math.random()
|
|
|
}
|
|
|
this.materialList.push(newMaterial)
|
|
|
Message({
|
|
|
type: 'success',
|
|
|
message: '物资添加成功'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
removeMaterial(index) {
|
|
|
this.materialList.splice(index, 1)
|
|
|
Message({
|
|
|
type: 'success',
|
|
|
message: '删除成功'
|
|
|
})
|
|
|
},
|
|
|
async getDetail() {
|
|
|
const res = await show({
|
|
|
id: this.id,
|
|
|
table_name: this.tableName
|
|
|
})
|
|
|
this.form = {
|
|
|
rukuriqi: res?.rukuriqi || '',
|
|
|
jingbanren: res?.jingbanren || '',
|
|
|
fujian: res?.fujian ? (Array.isArray(res.fujian) ? res.fujian : JSON.parse(res.fujian)) : [],
|
|
|
beizhu: res?.beizhu || '',
|
|
|
rukuwuzi: res?.rukuwuzi ? (Array.isArray(res.rukuwuzi) ? res.rukuwuzi : JSON.parse(res.rukuwuzi)) : []
|
|
|
}
|
|
|
|
|
|
// 处理附件列表
|
|
|
if (this.form.fujian && this.form.fujian.length > 0) {
|
|
|
// 这里需要根据实际情况获取文件信息，暂时使用id构造fileList
|
|
|
this.fileList = this.form.fujian.map((id, index) => ({
|
|
|
id: id,
|
|
|
name: `附件${index + 1}`,
|
|
|
url: ''
|
|
|
}))
|
|
|
}
|
|
|
|
|
|
// 处理入库物资列表
|
|
|
if (res.rukuwuzi) {
|
|
|
try {
|
|
|
this.materialList = Array.isArray(res.rukuwuzi) ? res.rukuwuzi : JSON.parse(res.rukuwuzi)
|
|
|
} catch (e) {
|
|
|
this.materialList = []
|
|
|
}
|
|
|
} else {
|
|
|
this.materialList = []
|
|
|
}
|
|
|
},
|
|
|
submit() {
|
|
|
// 验证入库物资
|
|
|
if (!this.materialList || this.materialList.length === 0) {
|
|
|
Message({
|
|
|
type: 'warning',
|
|
|
message: '请至少添加一条入库物资'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
|
|
|
const submitData = {
|
|
|
table_name: this.tableName,
|
|
|
rukuriqi: this.form.rukuriqi,
|
|
|
jingbanren: this.form.jingbanren,
|
|
|
fujian: JSON.stringify(this.form.fujian),
|
|
|
beizhu: this.form.beizhu,
|
|
|
rukuwuzi: JSON.stringify(this.materialList)
|
|
|
}
|
|
|
|
|
|
if (this.type === 'add') {
|
|
|
save(submitData).then(res => {
|
|
|
Message({
|
|
|
type: 'success',
|
|
|
message: '新增成功'
|
|
|
})
|
|
|
this.isShow = false
|
|
|
this.$emit('refresh')
|
|
|
}).catch(err => {
|
|
|
Message({
|
|
|
type: 'error',
|
|
|
message: '新增失败：' + (err.message || '未知错误')
|
|
|
})
|
|
|
})
|
|
|
} else if (this.type === 'editor') {
|
|
|
submitData.id = this.id
|
|
|
save(submitData).then(res => {
|
|
|
Message({
|
|
|
type: 'success',
|
|
|
message: '编辑成功'
|
|
|
})
|
|
|
this.isShow = false
|
|
|
this.$emit('refresh')
|
|
|
}).catch(err => {
|
|
|
Message({
|
|
|
type: 'error',
|
|
|
message: '编辑失败：' + (err.message || '未知错误')
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.xy-table-item-label {
|
|
|
width: 160px;
|
|
|
}
|
|
|
|
|
|
::v-deep .el-upload--picture-card {
|
|
|
font-size: 28px;
|
|
|
color: #8c939d;
|
|
|
}
|
|
|
|
|
|
::v-deep .xy-table-item-label {
|
|
|
width: 160px !important;
|
|
|
}
|
|
|
::v-deep .beizhu,
|
|
|
::v-deep .rukuwuzi {
|
|
|
flex-basis: 100% !important;
|
|
|
}
|
|
|
</style>
|
