zhangdi
4 weeks ago
parent
b6e3fc154e
commit
0a2d92c906
14 changed files with 923 additions and 674 deletions
@ -0,0 +1,118 @@ |
||||
<template> |
||||
<el-dialog |
||||
title="审批记录" |
||||
append-to-body |
||||
:modelValue="openShow" |
||||
width="50%" |
||||
@close="closeDialog" |
||||
> |
||||
<el-timeline class="horizontal-timeline"> |
||||
<el-timeline-item |
||||
v-for="(activity, index) in rowData" |
||||
:key="index" |
||||
:timestamp="activity.time" |
||||
> |
||||
{{ activity.label }}：{{ activity.value }} |
||||
</el-timeline-item> |
||||
</el-timeline> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="closeDialog">取 消</el-button> |
||||
<el-button type="primary" @click="submit">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
props: { |
||||
showDialog: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
rowData: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
openShow: false, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.openShow = this.showDialog; |
||||
}, |
||||
methods: { |
||||
closeDialog() { |
||||
this.openShow = false; |
||||
this.$emit('closeDialog'); |
||||
}, |
||||
submit() { |
||||
this.$refs.form.validate(async valid => { |
||||
if (valid) { |
||||
// let params = { |
||||
// id: this.$route.query.id, |
||||
// approvalStatus: '', |
||||
// }; |
||||
// updateProcess(params).then((res) => { |
||||
// if (res.code == 200) { |
||||
// this.$message.success('操作成功'); |
||||
// this.closeDialog(); |
||||
// } |
||||
// }); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.horizontal-timeline { |
||||
display: flex; |
||||
justify-content: center; /* 关键：水平居中 */ |
||||
align-items: center; /* 垂直居中（可选） */ |
||||
flex-wrap: nowrap; |
||||
overflow-x: auto; |
||||
padding: 20px 0; |
||||
width: 100%; /* 确保占满容器宽度 */ |
||||
|
||||
// 隐藏默认竖线 |
||||
::v-deep(.el-timeline-item__tail) { |
||||
display: none; |
||||
} |
||||
|
||||
// 每个时间轴项 |
||||
::v-deep(.el-timeline-item) { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
min-width: 160px; // 可根据内容调整 |
||||
padding: 0 12px; |
||||
flex-shrink: 0; /* 防止被压缩 */ |
||||
} |
||||
|
||||
::v-deep(.el-timeline-item__timestamp) { |
||||
position: static; |
||||
margin-top: 8px; |
||||
font-size: 12px; |
||||
color: #909399; |
||||
white-space: nowrap; /* 防止时间戳换行 */ |
||||
} |
||||
|
||||
::v-deep(.el-timeline-item__content) { |
||||
text-align: center; |
||||
padding: 8px 12px; |
||||
border-radius: 4px; |
||||
background-color: #f5f7fa; |
||||
min-height: 40px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
::v-deep(.el-timeline-item__node) { |
||||
margin-bottom: 8px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,274 +1,275 @@ |
||||
<template> |
||||
<el-dialog title="新增" append-to-body :modelValue="openShow" width="70%" @close="closeDialog" fullscreen> |
||||
<!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> |
||||
<el-row :gutter="24"> |
||||
|
||||
<el-col :span="8"> |
||||
<el-form-item label="申报人" prop="userId"> |
||||
<el-select v-model="ruleForm.userId" placeholder="请选择" disabled> |
||||
<el-option label="申报人一" value="1"> |
||||
</el-option> |
||||
<el-option label="申报人二" value="2"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
<el-col :span="8"> |
||||
<el-form-item label="申报日期" prop="declareDate"> |
||||
<el-date-picker v-model="ruleForm.declareDate" type="date" placeholder="选择日期" |
||||
style="width: 100%;"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-form-item label="需求日期" prop="needDate"> |
||||
<el-date-picker v-model="ruleForm.needDate" type="date" placeholder="选择日期" style="width: 100%;"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-form-item label="采购部门" prop="buyDept"> |
||||
<el-select v-model="ruleForm.buyDept" placeholder="请选择"> |
||||
<el-option label="采购部门一" value="1"> |
||||
</el-option> |
||||
<el-option label="采购部门二" value="2"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<el-form-item label="需求部门" prop="needDept"> |
||||
<el-select v-model="ruleForm.needDept" placeholder="请选择"> |
||||
<el-option label="需求部门一" value="1"> |
||||
</el-option> |
||||
<el-option label="需求部门二" value="2"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
|
||||
</el-form> --> |
||||
<div style="margin-bottom: 12px;" v-if="moldAddMore"> |
||||
<el-button type="primary" @click="addTable">插入一行</el-button> |
||||
<el-button type="danger" @click="handleDelete">删除行</el-button> |
||||
</div> |
||||
<el-table :data="tableData" style="width: 100%" @select="selectChange" border> |
||||
<el-table-column type="selection" width="55"></el-table-column> |
||||
<el-table-column prop="goodsId" label="物料编号" align="center"> |
||||
<template #header> |
||||
<span><i style="color:red">*</i>物料编号</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<!-- <el-select v-model="scope.row.goodsCode" placeholder="请选择" style="width: 100%" |
||||
@change="(val) => changeGoods(val,scope.$index)"> |
||||
<el-option v-for="item in goodsList" :key="item.id" :label="item.goodsCode" :value="item.goodsCode"></el-option> |
||||
</el-select> --> |
||||
<jhSelect |
||||
v-model="scope.row.goodsCode" |
||||
placeholder="请搜索选择" |
||||
api-url="/blade-wms/stGoods/list" |
||||
echo-api="/blade-wms/stGoods/list" |
||||
echoParamsKey="goodsCode" |
||||
echo-method="get" |
||||
api-method="get" |
||||
list-key="records" |
||||
total-key="total" |
||||
label-key="goodsCode" |
||||
value-key="goodsCode" |
||||
search-key="goodsCode" |
||||
:debounce-time="100" |
||||
@change="(val, item) => changeGoods(val, item, scope.row, scope.$index)" |
||||
/> |
||||
|
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="goodsName" label="物料名称" align="center"></el-table-column> |
||||
<el-table-column prop="materialModel" label="型号/牌号" align="center"></el-table-column> |
||||
<el-table-column prop="specifications" label="物料规格" align="center"></el-table-column> |
||||
|
||||
<el-table-column prop="currentQuantity" label="库存数量" align="center"></el-table-column> |
||||
<el-table-column prop="avlQuantity" label="可用数量" align="center"></el-table-column> |
||||
<el-table-column prop="quantity" label="提请数量" align="center"> |
||||
<template #header> |
||||
<span><i style="color:red">*</i>提请数量</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-input-number v-model="scope.row.quantity" :min="1" controls-position="right" @change="handleChange" |
||||
style="width: 100%" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="woCode" label="关联订单号" align="center"> |
||||
<template #default="scope"> |
||||
<el-input v-model="scope.row.woCode" style="width: 100%" placeholder="请输入" /> |
||||
</template> |
||||
|
||||
</el-table-column> |
||||
<el-table-column prop="memo" label="备注" align="center"> |
||||
|
||||
<template #default="scope"> |
||||
<el-input v-model="scope.row.memo" style="width: 100%" placeholder="请输入" /> |
||||
</template> |
||||
|
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" min-width="40"> |
||||
<template #default="scope"> |
||||
<el-button link type="primary" size="small" @click.prevent="delTable(scope.row, scope.$index)"> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
</el-table> |
||||
<el-dialog |
||||
title="新增" |
||||
append-to-body |
||||
:modelValue="openShow" |
||||
width="70%" |
||||
@close="closeDialog" |
||||
fullscreen |
||||
> |
||||
<div style="margin-bottom: 12px" v-if="moldAddMore"> |
||||
<el-button type="primary" @click="addTable">插入一行</el-button> |
||||
<el-button type="danger" @click="handleDelete">删除行</el-button> |
||||
</div> |
||||
<el-table |
||||
:data="tableData" |
||||
:height="tableHeight" |
||||
style="width: 100%" |
||||
@select="selectChange" |
||||
border |
||||
> |
||||
<el-table-column type="selection" width="55"></el-table-column> |
||||
<el-table-column prop="goodsId" label="物料编号" align="center"> |
||||
<template #header> |
||||
<span><i style="color: red">*</i>物料编号</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<jhSelect |
||||
v-model="scope.row.goodsCode" |
||||
placeholder="请搜索选择" |
||||
api-url="/blade-wms/stGoods/list" |
||||
echo-api="/blade-wms/stGoods/list" |
||||
echoParamsKey="goodsCode" |
||||
echo-method="get" |
||||
api-method="get" |
||||
list-key="records" |
||||
total-key="total" |
||||
label-key="goodsCode" |
||||
value-key="goodsCode" |
||||
search-key="goodsCode" |
||||
:debounce-time="100" |
||||
@change="(val, item) => changeGoods(val, item, scope.row, scope.$index)" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="goodsName" label="物料名称" align="center"></el-table-column> |
||||
<el-table-column prop="materialModel" label="型号/牌号" align="center"></el-table-column> |
||||
<el-table-column prop="specifications" label="物料规格" align="center"></el-table-column> |
||||
|
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="closeDialog">取 消</el-button> |
||||
<el-button type="primary" @click="submit">确 定</el-button> |
||||
</span> |
||||
<el-table-column prop="currentQuantity" label="库存数量" align="center"></el-table-column> |
||||
<el-table-column prop="avlQuantity" label="可用数量" align="center"></el-table-column> |
||||
<el-table-column prop="quantity" label="提请数量" align="center"> |
||||
<template #header> |
||||
<span><i style="color: red">*</i>提请数量</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-input-number |
||||
v-model="scope.row.quantity" |
||||
:min="1" |
||||
controls-position="right" |
||||
@change="handleChange" |
||||
style="width: 100%" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="woCode" label="关联订单号" align="center"> |
||||
<template #default="scope"> |
||||
<el-input v-model="scope.row.woCode" style="width: 100%" placeholder="请输入" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="memo" label="备注" align="center"> |
||||
<template #default="scope"> |
||||
<el-input v-model="scope.row.memo" style="width: 100%" placeholder="请输入" /> |
||||
</template> |
||||
</el-dialog> |
||||
</el-table-column> |
||||
<el-table-column prop="approver" label="审批人" align="center"> |
||||
<template #header> |
||||
<span><i style="color: red">*</i>审批人</span> |
||||
</template> |
||||
<template #default="scope"> |
||||
<el-select |
||||
v-model="scope.row.approver" |
||||
clearable |
||||
filterable |
||||
placeholder="请选择" |
||||
style="width: 100%" |
||||
@change="val => handleApproverChange(val, scope.row, scope.$index)" |
||||
> |
||||
<el-option |
||||
v-for="item in approverList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
></el-option> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" min-width="40"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
link |
||||
type="primary" |
||||
size="small" |
||||
@click.prevent="delTable(scope.row, scope.$index)" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="closeDialog" :loading="submitLoading">取 消</el-button> |
||||
<el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
<script> |
||||
import {getMaterialList,addRequests} from "@/api/storeManagement/teamRequest" |
||||
import { getMaterialList, addRequests } from '@/api/storeManagement/teamRequest'; |
||||
import { getUserByRoleAlias } from '@/api/storeManagement/warehouseMaintenance'; |
||||
export default { |
||||
props: { |
||||
showDialog: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
moldAddMore: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
buyCycle: { |
||||
type: Number, |
||||
default: 0 |
||||
} |
||||
props: { |
||||
showDialog: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
moldAddMore: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
buyCycle: { |
||||
type: Number, |
||||
default: 0, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
openShow: false, |
||||
ruleForm: { |
||||
userId: '1', |
||||
declareDate: '', |
||||
needDate: '', |
||||
buyDept: '', |
||||
needDept: null, |
||||
}, |
||||
rules: { |
||||
userId: [{ required: true, message: '请选择', trigger: 'blur' }], |
||||
declareDate: [{ required: true, message: '请选择', trigger: 'blur' }], |
||||
needDate: [{ required: true, message: '请选择', trigger: 'blur' }], |
||||
buyDept: [{ required: true, message: '请选择', trigger: 'blur' }], |
||||
needDept: [{ required: true, message: '请选择', trigger: 'blur' }], |
||||
approver: [{ required: true, message: '请选择', trigger: 'blur' }], |
||||
}, |
||||
tableData: [], |
||||
boCode: 'BO-2025001', |
||||
goodsList: [], |
||||
tableHeight: 0, |
||||
approverList: [], //审批人列表 |
||||
submitLoading: false, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.openShow = this.showDialog; |
||||
this.getApproverList(); |
||||
this.getMaterialList(); |
||||
this.$nextTick(() => { |
||||
this.calcTableHeight(); |
||||
}); |
||||
window.addEventListener('resize', this.calcTableHeight); |
||||
}, |
||||
beforeDestroy() { |
||||
window.removeEventListener('resize', this.calcTableHeight); |
||||
}, |
||||
methods: { |
||||
getApproverList() { |
||||
getUserByRoleAlias({ roleAlias: 'sj_craft,rb_craft' }).then(res => { |
||||
this.approverList = res.data.data; |
||||
}); |
||||
}, |
||||
handleApproverChange(val, row, index) { |
||||
const selectedItem = this.approverList.find(item => item.id === val); |
||||
const label = selectedItem ? selectedItem.name : ''; |
||||
this.tableData[index].approverName = label; |
||||
}, |
||||
calcTableHeight() { |
||||
const headerHeight = 50; // 估算头部按钮高度 |
||||
const footerHeight = 60; // 估算底部 footer 高度 |
||||
const padding = 40; // 估算 padding |
||||
this.tableHeight = window.innerHeight - headerHeight - footerHeight - padding - 40; |
||||
}, |
||||
changeGoods(val, item, row, index) { |
||||
if (item != undefined) { |
||||
this.tableData[index].goodsName = item.goodsName; |
||||
this.tableData[index].goodsId = item.id; |
||||
this.tableData[index].specifications = item.specifications; |
||||
this.tableData[index].currentQuantity = item.currentQuantity; |
||||
this.tableData[index].materialModel = item.materialModel; |
||||
this.tableData[index].avlQuantity = item.avlQuantity; |
||||
} |
||||
}, |
||||
getMaterialList() { |
||||
getMaterialList().then(res => { |
||||
this.goodsList = res.data.data.records; |
||||
}); |
||||
}, |
||||
closeDialog(val) { |
||||
this.openShow = false; |
||||
this.$emit('closeDialog', val); |
||||
}, |
||||
// 插入一行 |
||||
addTable() { |
||||
let boCode = ''; |
||||
const len = this.tableData; |
||||
if (len.length === 0) { |
||||
boCode = this.boCode; |
||||
} else { |
||||
const newBoCode = len[len.length - 1].boCode; |
||||
const codeArr = newBoCode.split('-'); |
||||
const num = Number(codeArr[1]) + 1; |
||||
boCode = codeArr[0] + '-' + num; |
||||
} |
||||
// 新增一行 |
||||
const record = { _select: false, boCode, buyCycle: this.buyCycle, planArea: '洛阳新区' }; |
||||
this.tableData.push(record); |
||||
}, |
||||
selectChange(list, row) { |
||||
row._select = !row._select; |
||||
}, |
||||
handleDelete() { |
||||
let tmp = this.tableData.find(item => item._select === true); |
||||
if (!tmp) { |
||||
this.$message.error('请先选择数据'); |
||||
return; |
||||
} |
||||
this.$confirm('确定删除数据吗?', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
this.tableData = this.tableData.filter(row => !row._select); |
||||
}); |
||||
}, |
||||
data() { |
||||
return { |
||||
openShow: false, |
||||
ruleForm: { |
||||
userId: '1', |
||||
declareDate: '', |
||||
needDate: '', |
||||
buyDept: '', |
||||
needDept: null, |
||||
}, |
||||
rules: { |
||||
userId: [ |
||||
{ required: true, message: '请选择', trigger: 'blur' }, |
||||
], |
||||
declareDate: [ |
||||
{ required: true, message: '请选择', trigger: 'blur' }, |
||||
], |
||||
needDate: [ |
||||
{ required: true, message: '请选择', trigger: 'blur' }, |
||||
], |
||||
buyDept: [ |
||||
{ required: true, message: '请选择', trigger: 'blur' }, |
||||
], |
||||
needDept: [ |
||||
{ required: true, message: '请选择', trigger: 'blur' }, |
||||
], |
||||
}, |
||||
tableData: [], |
||||
boCode: 'BO-2025001', |
||||
goodsList:[] |
||||
} |
||||
// 删除一行 |
||||
delTable(row, index) { |
||||
this.$confirm('确定删除数据吗?', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
this.tableData.splice(index, 1); |
||||
}); |
||||
}, |
||||
mounted() { |
||||
this.openShow = this.showDialog |
||||
this.getMaterialList() |
||||
submit() { |
||||
if (this.tableData.length == 0) { |
||||
this.$message.error('请至少添加数据'); |
||||
return; |
||||
} |
||||
this.submitLoading = true; |
||||
addRequests(this.tableData) |
||||
.then(res => { |
||||
if (res.data.code == 200) { |
||||
this.$message.success('新增成功'); |
||||
this.closeDialog(true); |
||||
this.submitLoading = false; |
||||
} |
||||
}) |
||||
.catch(err => { |
||||
this.submitLoading = false; |
||||
}); |
||||
}, |
||||
methods: { |
||||
changeGoods(val, item, row, index){ |
||||
console.log(val, item, row, index); |
||||
if (item != undefined) { |
||||
this.tableData[index].goodsName = item.goodsName; |
||||
this.tableData[index].goodsId = item.id |
||||
this.tableData[index].specifications = item.specifications; |
||||
this.tableData[index].currentQuantity = item.currentQuantity |
||||
this.tableData[index].materialModel = item.materialModel; |
||||
this.tableData[index].avlQuantity = item.avlQuantity |
||||
} |
||||
// let tmp = this.goodsList.find(item => item.goodsCode == val) |
||||
// this.tableData[index].goodsName = tmp.goodsName |
||||
// this.tableData[index].goodsId = tmp.id |
||||
// this.tableData[index].materialModel = tmp.materialModel |
||||
// this.tableData[index].specifications = tmp.specifications |
||||
// this.tableData[index].currentQuantity = tmp.currentQuantity |
||||
// this.tableData[index].avlQuantity = tmp.avlQuantity |
||||
}, |
||||
getMaterialList(){ |
||||
getMaterialList().then(res => { |
||||
this.goodsList = res.data.data.records |
||||
}) |
||||
}, |
||||
closeDialog(val) { |
||||
this.openShow = false |
||||
this.$emit('closeDialog',val); |
||||
}, |
||||
// 插入一行 |
||||
addTable() { |
||||
let boCode = ''; |
||||
const len = this.tableData; |
||||
if (len.length === 0) { |
||||
boCode = this.boCode; |
||||
} else { |
||||
const newBoCode = len[len.length - 1].boCode; |
||||
const codeArr = newBoCode.split('-'); |
||||
const num = Number(codeArr[1]) + 1; |
||||
boCode = codeArr[0] + '-' + num; |
||||
} |
||||
// 新增一行 |
||||
const record = { _select:false, boCode, buyCycle: this.buyCycle, planArea: '洛阳新区' }; |
||||
this.tableData.push(record) |
||||
}, |
||||
selectChange(list, row) { |
||||
row._select = !row._select; |
||||
}, |
||||
handleDelete(){ |
||||
let tmp = this.tableData.find(item => item._select === true); |
||||
if(!tmp){ |
||||
this.$message.error('请先选择数据'); |
||||
return |
||||
} |
||||
this.$confirm('确定删除数据吗?', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
this.tableData = this.tableData.filter(row => !row._select); |
||||
}) |
||||
}, |
||||
// 删除一行 |
||||
delTable(row, index) { |
||||
this.$confirm('确定删除数据吗?', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
this.tableData.splice(index, 1) |
||||
}) |
||||
}, |
||||
submit(){ |
||||
if(this.tableData.length == 0){ |
||||
this.$message.error('请至少添加数据'); |
||||
return |
||||
} |
||||
console.log('提交数据:', this.tableData); |
||||
addRequests(this.tableData).then(res =>{ |
||||
if(res.data.code == 200){ |
||||
this.$message.success('新增成功') |
||||
this.closeDialog(true) |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped></style> |
||||
@ -1,362 +1,323 @@ |
||||
<template> |
||||
<basic-container> |
||||
<avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud" |
||||
@row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" |
||||
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" |
||||
@refresh-change="refreshChange" @on-load="onLoad"> |
||||
<template #menu-left> |
||||
<el-button type="primary" @click="handleAdd">新增 |
||||
</el-button> |
||||
<el-button type="danger" @click="handleDelete">删除 |
||||
</el-button> |
||||
</template> |
||||
<template #menu="scope"> |
||||
<el-button type="text" @click="handeExamine(scope.row)" v-if="scope.row.approvalStatus == 0">审批</el-button> |
||||
</template> |
||||
<template #menu-right> |
||||
<!-- <el-button type="success" icon="el-icon-upload" @click="handleImport">导入 |
||||
<basic-container> |
||||
<avue-crud |
||||
:option="option" |
||||
:table-loading="loading" |
||||
:data="data" |
||||
v-model="form" |
||||
v-model:page="page" |
||||
ref="crud" |
||||
@row-del="rowDel" |
||||
@search-change="searchChange" |
||||
@search-reset="searchReset" |
||||
@selection-change="selectionChange" |
||||
@current-change="currentChange" |
||||
@size-change="sizeChange" |
||||
@refresh-change="refreshChange" |
||||
@on-load="onLoad" |
||||
> |
||||
<template #menu-left> |
||||
<el-button type="primary" @click="handleAdd">新增 </el-button> |
||||
<el-button type="danger" @click="handleDelete">删除 </el-button> |
||||
</template> |
||||
<template #menu="scope"> |
||||
<el-button type="text" @click="handeExamine(scope.row)" v-if="scope.row.approvalStatus == 0" |
||||
>审批</el-button |
||||
> |
||||
</template> |
||||
<template #menu-right> |
||||
<!-- <el-button type="success" icon="el-icon-upload" @click="handleImport">导入 |
||||
</el-button> --> |
||||
</template> |
||||
|
||||
</avue-crud> |
||||
<addEditDialog v-if="isOpen" :showDialog="isOpen" @closeDialog="closeDialog" :moldAddMore="moldAddMore"> |
||||
</addEditDialog> |
||||
<el-dialog width="30%" v-model="approveDialog" title="审批"> |
||||
<el-form :model="auditForm" :rules="auditRules" ref="auditForm"> |
||||
<el-form-item label="是否审核通过" prop="approvalResult"> |
||||
<el-radio v-model="auditForm.approvalResult" label="1">是</el-radio> |
||||
<el-radio v-model="auditForm.approvalResult" label="10">否</el-radio> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="approveDialog = false">取 消</el-button> |
||||
<el-button type="primary" @click="submit">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</template> |
||||
</avue-crud> |
||||
<addEditDialog |
||||
v-if="isOpen" |
||||
:showDialog="isOpen" |
||||
@closeDialog="closeDialog" |
||||
:moldAddMore="moldAddMore" |
||||
> |
||||
</addEditDialog> |
||||
<el-dialog width="30%" v-model="approveDialog" title="审批"> |
||||
<el-form :model="auditForm" :rules="auditRules" ref="auditForm"> |
||||
<el-form-item label="是否审核通过" prop="approvalResult"> |
||||
<el-radio v-model="auditForm.approvalResult" label="1">是</el-radio> |
||||
<el-radio v-model="auditForm.approvalResult" label="10">否</el-radio> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="approveDialog = false">取 消</el-button> |
||||
<el-button type="primary" @click="submit">确 定</el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</template> |
||||
<script> |
||||
import {getList,delRequests,approve} from "@/api/storeManagement/teamRequest" |
||||
import addEditDialog from './components/addEditDialog.vue' |
||||
import { getList, delRequests, approve } from '@/api/storeManagement/teamRequest'; |
||||
import addEditDialog from './components/addEditDialog.vue'; |
||||
export default { |
||||
components: { addEditDialog }, |
||||
data() { |
||||
return { |
||||
selectionList: [], |
||||
loading:false, |
||||
option: { |
||||
height: 'auto', |
||||
calcHeight: 32, |
||||
tip: false, |
||||
// size: 'medium', |
||||
simplePage: true, |
||||
searchShow: true, |
||||
searchMenuSpan: 6, |
||||
searchIcon: true, |
||||
searchIndex: 3, |
||||
tree: false, |
||||
border: true, |
||||
index: true, |
||||
selection: true, |
||||
viewBtn: false, |
||||
delBtn: false, |
||||
addBtn: false, |
||||
editBtnText: '修改', |
||||
addBtnIcon: ' ', |
||||
viewBtnIcon: ' ', |
||||
delBtnIcon: ' ', |
||||
editBtnIcon: ' ', |
||||
viewBtnText: '详情', |
||||
labelWidth: 120, |
||||
menuWidth: 80, |
||||
dialogWidth: 1040, |
||||
dialogClickModal: false, |
||||
searchEnter: true, |
||||
excelBtn: false, |
||||
filterBtn: true, |
||||
searchShowBtn: false, |
||||
columnSort: true, |
||||
excelBtn: true, |
||||
columnSort: true, |
||||
index: false, |
||||
showOverflowTooltip: true, |
||||
menu: true, |
||||
searchLabelPosition: 'left', |
||||
searchLabelWidth: 'auto', |
||||
searchGutter: 24, |
||||
searchSpan: 6, |
||||
menuAlign: 'center', |
||||
gridBtn: false, |
||||
searchMenuPosition: 'right', |
||||
align: 'center', |
||||
editBtn:false, |
||||
column: [ |
||||
{ |
||||
label: '提请单号', |
||||
prop: 'crCode', |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
width:180, |
||||
search: false, |
||||
searchOrder: 19, |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入提请单号', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '物料编号', |
||||
prop: 'goodsCode', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
width:180, |
||||
span: 12, |
||||
searchOrder: 20, |
||||
// dicData: [ |
||||
// { |
||||
// label: '物料一' |
||||
// }, |
||||
// { |
||||
// label: '物料二' |
||||
// } |
||||
// ], |
||||
|
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入物料编号', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '物料名称', |
||||
prop: 'goodsName', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入物料名称', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '规格', |
||||
prop: 'specifications', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
searchLabelWidth: 60, |
||||
span: 12, |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入规格', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '提请数量', |
||||
prop: 'quantity', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入提请数量', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '提请人', |
||||
prop: 'crManName', |
||||
// bind: 'crMan.userName', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入提请人', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '提请日期', |
||||
prop: 'crDate', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
searchOrder: 16, |
||||
width:180, |
||||
searchRange: true, |
||||
type: 'date', |
||||
format:"YYYY-MM-DD", |
||||
valueFormat:"YYYY-MM-DD", |
||||
startPlaceholder: '开始时间', |
||||
endPlaceholder: "结束时间", |
||||
|
||||
|
||||
}, |
||||
{ |
||||
label: '关联订单号', |
||||
prop: 'woCode', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
searchOrder: 17, |
||||
|
||||
}, |
||||
{ |
||||
label: '备注', |
||||
prop: 'memo', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
|
||||
}, |
||||
{ |
||||
label: '出库状态', |
||||
prop: 'curStatus', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
searchOrder: 17, |
||||
type: 'select', |
||||
dicData: [ |
||||
{label: '新建',value:1}, |
||||
{label: '待出库',value:15}, |
||||
{label: '已完成',value:20}, |
||||
{label: '已删除',value:21}, |
||||
] |
||||
|
||||
}, |
||||
] |
||||
}, |
||||
form: { |
||||
|
||||
}, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
isOpen: false, |
||||
moldAddMore: false, |
||||
buyCycle: 0, |
||||
query:{}, |
||||
approveDialog:false, |
||||
auditForm:{}, |
||||
auditRules:{ |
||||
approvalResult:[{ required: true, message: '请选择是否通过审核', trigger: 'blur' }] |
||||
}, |
||||
} |
||||
components: { addEditDialog }, |
||||
data() { |
||||
return { |
||||
selectionList: [], |
||||
loading: false, |
||||
option: { |
||||
height: 'auto', |
||||
calcHeight: 32, |
||||
tip: false, |
||||
simplePage: true, |
||||
searchShow: true, |
||||
searchMenuSpan: 6, |
||||
searchIcon: true, |
||||
searchIndex: 3, |
||||
tree: false, |
||||
border: true, |
||||
index: true, |
||||
selection: true, |
||||
viewBtn: false, |
||||
delBtn: false, |
||||
addBtn: false, |
||||
editBtnText: '修改', |
||||
addBtnIcon: ' ', |
||||
viewBtnIcon: ' ', |
||||
delBtnIcon: ' ', |
||||
editBtnIcon: ' ', |
||||
viewBtnText: '详情', |
||||
labelWidth: 120, |
||||
menuWidth: 80, |
||||
dialogWidth: 1040, |
||||
dialogClickModal: false, |
||||
searchEnter: true, |
||||
excelBtn: false, |
||||
filterBtn: true, |
||||
searchShowBtn: false, |
||||
columnSort: true, |
||||
excelBtn: true, |
||||
columnSort: true, |
||||
index: false, |
||||
showOverflowTooltip: true, |
||||
menu: true, |
||||
searchLabelPosition: 'left', |
||||
searchLabelWidth: 'auto', |
||||
searchGutter: 24, |
||||
searchSpan: 6, |
||||
menuAlign: 'center', |
||||
gridBtn: false, |
||||
searchMenuPosition: 'right', |
||||
align: 'center', |
||||
editBtn: false, |
||||
searchLabelWidth: 'auto', |
||||
column: [ |
||||
{ |
||||
label: '提请单号', |
||||
prop: 'crCode', |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
width: 180, |
||||
search: false, |
||||
searchOrder: 19, |
||||
}, |
||||
{ |
||||
label: '物料编号', |
||||
prop: 'goodsCode', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
width: 140, |
||||
span: 12, |
||||
searchOrder: 20, |
||||
}, |
||||
{ |
||||
label: '物料名称', |
||||
prop: 'goodsName', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
width: 140, |
||||
}, |
||||
{ |
||||
label: '规格', |
||||
prop: 'specifications', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
width: 100, |
||||
}, |
||||
{ |
||||
label: '提请数量', |
||||
prop: 'quantity', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
width: 100, |
||||
}, |
||||
{ |
||||
label: '提请人', |
||||
prop: 'crManName', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
}, |
||||
{ |
||||
label: '提请日期', |
||||
prop: 'crDate', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
searchOrder: 16, |
||||
width: 150, |
||||
searchRange: true, |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
startPlaceholder: '开始时间', |
||||
endPlaceholder: '结束时间', |
||||
}, |
||||
{ |
||||
label: '关联订单号', |
||||
prop: 'woCode', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
searchOrder: 17, |
||||
width: 140, |
||||
}, |
||||
{ |
||||
label: '备注', |
||||
prop: 'memo', |
||||
search: false, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
}, |
||||
{ |
||||
label: '出库状态', |
||||
prop: 'curStatus', |
||||
search: true, |
||||
sortable: true, |
||||
filter: true, |
||||
span: 12, |
||||
searchOrder: 17, |
||||
type: 'select', |
||||
width: 100, |
||||
dicData: [ |
||||
{ label: '新建', value: 1 }, |
||||
{ label: '待出库', value: 15 }, |
||||
{ label: '已完成', value: 20 }, |
||||
{ label: '已删除', value: 21 }, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
form: {}, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
isOpen: false, |
||||
moldAddMore: false, |
||||
buyCycle: 0, |
||||
query: {}, |
||||
approveDialog: false, |
||||
auditForm: {}, |
||||
auditRules: { |
||||
approvalResult: [{ required: true, message: '请选择是否通过审核', trigger: 'blur' }], |
||||
}, |
||||
}; |
||||
}, |
||||
methods: { |
||||
// 新增 |
||||
handleAdd() { |
||||
this.isOpen = true; |
||||
this.moldAddMore = true; |
||||
}, |
||||
methods: { |
||||
// 新增 |
||||
handleAdd() { |
||||
this.isOpen = true |
||||
this.moldAddMore = true |
||||
}, |
||||
closeDialog(val) { |
||||
this.isOpen = false |
||||
if(val){ |
||||
this.onLoad() |
||||
} |
||||
}, |
||||
handeExamine(row){ |
||||
this.auditForm = {} |
||||
this.auditForm.id = row.id |
||||
this.approveDialog = true |
||||
}, |
||||
submit(){ |
||||
this.$refs.auditForm.validate(valid => { |
||||
if(valid){ |
||||
approve({...this.auditForm}).then(res =>{ |
||||
if(res.data.code == 200){ |
||||
this.$message.success('审批成功') |
||||
this.approveDialog = false |
||||
this.onLoad() |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
searchChange(params, done){ |
||||
this.query = params |
||||
this.page.currentPage = 1; |
||||
this.onLoad() |
||||
done() |
||||
}, |
||||
searchReset(){ |
||||
this.query = {} |
||||
this.onLoad() |
||||
}, |
||||
handleDelete() { |
||||
if (this.selectionList.length === 0) { |
||||
this.$message.warning('请选择至少一条数据'); |
||||
return; |
||||
} |
||||
this.$confirm('确定将选择数据删除?', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
delRequests({ |
||||
ids:this.selectionList.map(item => item.id).join(',') |
||||
}).then(res =>{ |
||||
if(res.data.code == 200){ |
||||
this.$message.success('删除成功') |
||||
this.onLoad() |
||||
} |
||||
}) |
||||
}) |
||||
}, |
||||
// 多选 |
||||
selectionChange(list) { |
||||
this.selectionList = list; |
||||
}, |
||||
onLoad() { |
||||
this.loading = true |
||||
let params = { |
||||
...this.query, |
||||
startCrDate:this.query.crDate && this.query.crDate.length != 0 && this.query.crDate[0], |
||||
endCrDate:this.query.crDate && this.query.crDate.length != 0 && this.query.crDate[1], |
||||
closeDialog(val) { |
||||
this.isOpen = false; |
||||
if (val) { |
||||
this.onLoad(); |
||||
} |
||||
}, |
||||
handeExamine(row) { |
||||
this.auditForm = {}; |
||||
this.auditForm.id = row.id; |
||||
this.approveDialog = true; |
||||
}, |
||||
submit() { |
||||
this.$refs.auditForm.validate(valid => { |
||||
if (valid) { |
||||
approve({ ...this.auditForm }).then(res => { |
||||
if (res.data.code == 200) { |
||||
this.$message.success('审批成功'); |
||||
this.approveDialog = false; |
||||
this.onLoad(); |
||||
} |
||||
// const {crDate,...validParams} = params |
||||
if(params.crDate) delete params.crDate |
||||
getList({ |
||||
current:this.page.currentPage, |
||||
size:this.page.pageSize, |
||||
...params |
||||
}).then(res =>{ |
||||
this.data = res.data.data.records |
||||
this.page.total = res.data.data.total |
||||
this.loading = false |
||||
}) |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(); |
||||
done(); |
||||
}, |
||||
searchReset() { |
||||
this.query = {}; |
||||
this.onLoad(); |
||||
}, |
||||
handleDelete() { |
||||
if (this.selectionList.length === 0) { |
||||
this.$message.warning('请选择至少一条数据'); |
||||
return; |
||||
} |
||||
this.$confirm('确定将选择数据删除?', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
delRequests({ |
||||
ids: this.selectionList.map(item => item.id).join(','), |
||||
}).then(res => { |
||||
if (res.data.code == 200) { |
||||
this.$message.success('删除成功'); |
||||
this.onLoad(); |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
// 多选 |
||||
selectionChange(list) { |
||||
this.selectionList = list; |
||||
}, |
||||
onLoad() { |
||||
this.loading = true; |
||||
let params = { |
||||
...this.query, |
||||
startCrDate: this.query.crDate && this.query.crDate.length != 0 && this.query.crDate[0], |
||||
endCrDate: this.query.crDate && this.query.crDate.length != 0 && this.query.crDate[1], |
||||
}; |
||||
// const {crDate,...validParams} = params |
||||
if (params.crDate) delete params.crDate; |
||||
getList({ |
||||
current: this.page.currentPage, |
||||
size: this.page.pageSize, |
||||
...params, |
||||
}).then(res => { |
||||
this.data = res.data.data.records; |
||||
this.page.total = res.data.data.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue