Skip to content

P
psa-web
Commit e08e9fb6 authored by ZhangRunSong's avatar ZhangRunSong
Browse files
Options

feat：物资归还

parent 5b8dae86
Hide whitespace changes
Inline Side-by-side
Showing with 1106 additions and 17 deletions
src/api/material/return.js 0 → 100644
View file @ e08e9fb6
import request from '@/utils/request'
// 查询物品归还申请列表
export function listReturn(query) {
return request({
url: '/material/return/list',
method: 'get',
params: query
})
}
// 查询物品归还申请详细
export function getReturn(id) {
return request({
url: '/material/return/' + id,
method: 'get'
})
}
// 新增物品归还申请
export function addReturn(data) {
return request({
url: '/material/return',
method: 'post',
data: data
})
}
// 修改物品归还申请
export function updateReturn(data) {
return request({
url: '/material/return',
method: 'put',
data: data
})
}
// 删除物品归还申请
export function delReturn(id) {
return request({
url: '/material/return/' + id,
method: 'delete'
})
}
src/views/materialapply/index.vue
View file @ e08e9fb6
......@@ -44,15 +44,15 @@
</template>
查询
</el-button>
<el-button size="large" type="text" @click="toggleSearch">
<!-- <el-button size="large" type="text" @click="toggleSearch">
{{ isExpanded ? ' 收起' : ' 展开' }}
<el-icon class="el-icon--right">
<el-icon class="el-icon&#45;&#45;right">
<arrow-down />
</el-icon>
</el-button>
</el-button>-->
</el-form-item>
<!-- 可折叠的查询条件 -->
<transition>
<!-- <transition>
<div v-if="isExpanded">
<el-form-item label="申请时间" prop="createTime" style="width: 320px ;margin-top: 20px">
<el-date-picker clearable
......@@ -64,7 +64,7 @@
</el-form-item>
</div>
</transition>
</transition>-->
</el-form>
</div>
<div class="contentTable">
......@@ -117,7 +117,7 @@
<el-button type="text">物品明细</el-button>
</template>
<el-table :data="scope.row.items" border style="width: 100%">
<!-- 项目回款笔数 -->
<el-table-column label="物品类型" align="center">
<template #default="scope">
{{ typeMap[scope.row.type] || '-' }}
......@@ -163,13 +163,8 @@
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="70">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="50">
<template #default="scope">
<el-tooltip content="编辑" placement="top">
<el-button link type="text" @click="handleUpdate(scope.row)" v-hasPermi="['material:apply:edit']">
<img src="../../assets/icons/common/edit.png" height="32" width="32"/>
</el-button>
</el-tooltip>
<el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView(scope.row)" v-hasPermi="['system:project:view']">
<img src="../../assets/icons/common/check.png" height="32" width="32"/>
......@@ -286,11 +281,7 @@ const materialDetailMap = computed(() => {
});
return map;
});
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
......
src/views/materialreturn/add.vue 0 → 100644
View file @ e08e9fb6
<template>
<div class="app-container">
<div class="content">
<div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 3px solid #0062FF;">归还申请</span>
</div>
<div style="padding-top: 40px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" >
<el-row :gutter="150">
<el-col :span="10">
<el-form-item label="项目组" style="margin-bottom: 50px;" prop="projectId">
<el-select
v-model="form.projectId"
placeholder="请选择项目组"
@change="handleProjectChange"
>
<el-option
v-for="dict in project_list"
:key="dict.id"
:label="dict.projectName"
:value="dict.id"
style="width: 100%"
/>
</el-select>
</el-form-item>
<el-form-item label="申请人" style="margin-bottom: 50px;" prop="userId">
<el-select
v-model="form.userId"
placeholder="请选择申请人"
@change="handleUserChange"
>
<el-option
v-for="dict in filteredUsers"
:key="dict.userId"
:label="dict.nickName"
:value="dict.userId"
style="width: 100%"
/>
</el-select>
</el-form-item>
<el-form-item label="归还物品" prop="items">
<div v-for="(item, index) in form.items" :key="index" class="item-row">
<el-row style="width: 600px;">
<el-col :span="6">
<el-select
v-model="item.type"
placeholder="选择物品类型"
@change="handleTypeChange(index)"
>
<el-option
v-for="dict in material_type"
:key="dict.id"
:label="dict.typeName"
:value="dict.id"
/>
</el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="item.material_detail"
placeholder="选择物品"
@change="handleMaterialChange(index)"
>
<el-option
v-for="dict in filteredDetails(item.type)"
:key="dict.id"
:label="dict.materialName"
:value="dict.id"
/>
</el-select>
</el-col>
<el-col :span="5">
<el-form-item
:prop="`items.${index}.quantity`"
:rules="rules.quantity"
>
<el-input
type="number"
v-model.number="item.quantity"
placeholder="请输入数量"
:min="1"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<template v-if="item.material_detail">
<el-input
:model-value="`${item.unit}`"
placeholder="单位"
readonly
/>
</template>
<template v-else>
<el-input
placeholder="单位"
readonly
style="color: #999"
/>
</template>
</el-col>
<el-col :span="1" v-if="index > 0">
<el-link
type="danger"
@click="removeItem(index)"
:underline="false"
class="delete-btn"
>
×
</el-link>
</el-col>
</el-row>
</div>
<el-link
type="primary"
@click="addItem"
:underline="false"
class="add-btn"
>
+ 新增物品
</el-link>
</el-form-item>
<el-form-item label="备注" style="margin-bottom: 50px;" prop="remark">
<el-input
type="textarea"
:rows="2"
size="large"
v-model="form.remark"
placeholder="请输入备注"
style="width: 100%; resize: both;"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item style="padding-left: 75% ; padding-top: 20%">
<el-button size="large" @click="reset" class="btn-B">返 回</el-button>
<el-button size="large" type="primary" @click="saveDraft" class="btn-A">保存草稿</el-button>
<el-button size="large" type="primary" @click="handleSubmit" class="btn-A">提 交</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script setup name="materialAdd">
import { listUser } from "../../api/system/user.js";
import {listMaterial,listMaterialType,listMaterialTypeDetail} from "../../api/material/material.js";
import {selectProjectUser,addApply} from "../../api/material/apply.js";
import {addReturn} from "../../api/material/return.js";
import { listProject} from "../../api/project/project.js";
const { proxy } = getCurrentInstance();
const project_list = ref([]);
const project_user = ref([]);
const material_stock = ref([]);
const userList = ref([])
const filteredUsers = ref([]);
const material_type = ref([]);
const all_material_type_detail = ref([]);
const formRef = ref()
const data = reactive({
form: {
projectId: null,
userId: null,
userName: null,
items: [{
type: null,
material_detail: null,
quantity: null,
stock: 0,
unit: '单位',
maxStock: 0
}],
remark: null,
},
})
const { form } = toRefs(data);
// 新增方法
const addItem = () => {
form.value.items.push({
type: null,
material_detail: null,
quantity: null
})
}
const removeItem = (index) => {
form.value.items.splice(index, 1)
}
const rules = {
projectId: [
{ required: true, message: '项目组不能为空', trigger: 'blur' }
],
materialName: [
{ required: true, message: '物品名称不能为空', trigger: 'blur' }
],
items: [
{ required: true, message: '申请物品不能为空', trigger: 'blur' }
],
quantity: [
{ required: true, message: '归还个数不能为空', trigger: 'blur'}
]
}
// 方法：根据类型ID过滤物品详情
const filteredDetails = (typeId) => {
if (!typeId) return [];
return all_material_type_detail.value.filter(item => item.typeId === typeId);
};
// 处理类型选择变化事件
const handleTypeChange = (index) => {
console.log("执行了2")
form.value.items[index].material_detail = null;
};
//给userName赋值
const handleUserChange = (userId) => {
const selectedUser = filteredUsers.value.find(user => user.userId === userId);
console.log("selectedUser:",selectedUser)
if (selectedUser) {
form.value.userName = selectedUser.nickName; // 赋值nickName
}
};
// 获取用户列表
const getUserList = () => {
listUser().then(response => {
console.log("response:",response)
userList.value = response.rows
})
console.log("userList:",userList)
}
// 提交表单
const handleSubmit = () => {
proxy.$refs["formRef"].validate(valid => {
if (valid) {
addReturn(form.value).then(response=>{
if (response.code === 200){
proxy.$modal.msgSuccess("新增成功");
resetForm()
proxy.$router.push({ path: '/material/materialReturn' })
}else {
proxy.$modal.msgError("请检查表单中的错误提示");
proxy.$modal.msgError(response.msg)
}
})
}
});
}
// 新增草稿
const saveDraft = () => {
proxy.$refs["formRef"].validate(valid => {
if (valid) {
addDraft(form).then(response => {
if (response.code === 200){
proxy.$modal.msgSuccess("草稿保存成功");
proxy.$router.push({ path: '/material/materialDetail' })
}else {
proxy.$modal.msgError(response.msg)
}
});
}
});
}
// 表单重置
function resetForm() {
form.value = {
projectId: null,
userId: null,
userName: null,
items: [{
type: null,
material_detail: null,
quantity: null,
stock: null,
unit: null,
maxStock: null
}],
remark: null
};
proxy.resetForm("materialRef");
}
// 返回项目管理页面
const reset = () => {
// 返回项目
proxy.$router.push({ path: '/material/materialReturn' })
resetForm()
}
/** 获取物品类型 */
function getTypeList() {
listMaterialType().then(response => {
material_type.value = response.data;
});
}
/** 获取类型的物品列表 */
function getTypeDetailList(){
listMaterialTypeDetail().then(response => {
all_material_type_detail.value = response.data;
});
}
/** 选择物品后展示库存 */
const handleMaterialChange = (index) => {
const selectedId = form.value.items[index].material_detail;
const stockItem = material_stock.value.find(item => item.itemId === selectedId);
if (stockItem) {
form.value.items[index].stock = stockItem.stock;
form.value.items[index].unit = stockItem.unit;
form.value.items[index].maxStock = stockItem.stock;
} else {
form.value.items[index].stock = 0;
form.value.items[index].unit = '单位';
form.value.items[index].maxStock = 0;
}
form.value.items[index].quantity = 1;
};
/** 获取项目列表 */
function getProjectList(){
listProject().then(response =>{
project_list.value = response.rows;
console.log("project_list:",project_list.value)
})
}
/** 处理项目变化 */
const handleProjectChange = (selectedProjectId) => {
form.value.userId = null; // 清空已选用户
if (!selectedProjectId) {
filteredUsers.value = [];
return;
}
// 获取该项目关联的所有userId
const userIds = project_user.value
.filter(pu => pu.projectId === selectedProjectId)
.map(pu => pu.userId);
// 过滤出对应的用户
filteredUsers.value = userList.value.filter(user => userIds.includes(user.userId));
};
/** 获取用户与项目关系 */
function getProjectUser(){
selectProjectUser().then(response =>{
project_user.value = response.data;
console.log("selectProjectUser.response",response)
})
}
/** 获取物品库存 */
function getMaterialStock(){
listMaterial().then(response => {
material_stock.value = response.rows.map(item => ({
itemId: item.itemId,
stock: item.stock,
unit: item.unit
}));
console.log("material_stock.value:",material_stock.value)
});
}
// 在组件挂载时执行
onMounted(() => {
//获取项目列表
getProjectList();
//获取项目与成员多对多关系
getProjectUser();
//获取用户列表
getUserList();
//获取物品类型
getTypeList();
//获取物品信息
getTypeDetailList();
//获取物品库存
getMaterialStock();
});
</script>
<style scoped lang="scss">
.item-row {
margin-bottom: 20px;
}
.bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
</style>
src/views/materialreturn/index.vue 0 → 100644
View file @ e08e9fb6
<template>
<div class="app-container">
<div class="formSearch">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="项目组" prop="projectId" >
<el-select v-model="queryParams.projectId" placeholder="请选择项目" clearable style="width: 220px">
<el-option
v-for="dict in project_list"
:key="dict.id"
:label="dict.projectName"
:value="dict.id"
/>
</el-select>
</el-form-item>
<el-form-item label="姓名" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入申请人姓名"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="checkStatus">
<el-select v-model="queryParams.checkStatus" placeholder="请选择审批状态" clearable style="width: 220px;">
<el-option
v-for="dict in material_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item style="padding-left: 10%">
<el-button @click="resetQuery" class="el-button-defalut">
<template #icon>
<img src="../../assets/icons/common/reset.png" height="25" width="24"/>
</template>
重置
</el-button>
<el-button type="primary" @click="handleQuery" class="el-button-primary">
<template #icon>
<img src="../../assets/icons/common/search.png" height="24" width="24"/>
</template>
查询
</el-button>
</el-form-item>
</el-form>
</div>
<div class="contentTable">
<div style="padding-left: 8px ;margin-bottom: 20px" >
<span class="title" style="border-bottom: 3px solid #0062FF;">物资归还</span>
<span style="padding-left: 78%">
<el-button
class="el-button-primary-pain"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['material:return:add']"
>归还申请</el-button>
<el-tooltip content="导出" placement="top">
<el-button
type="text"
plain
@click="handleExport"
v-hasPermi="['material:apply:export']"
><img src="../../assets/icons/common/daochu.png" height="38" width="38"/>
</el-button>
</el-tooltip>
<el-tooltip content="草稿箱" placement="top">
<el-button
type="text"
plain
@click="draft"
v-hasPermi="['material:apply:draft']"
><img src="../../assets/icons/common/rightone.png" height="38" width="38"/>
</el-button>
</el-tooltip>
</span>
</div>
<el-table v-loading="loading" :data="returnList" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column label="项目组" align="center" prop="projectId" >
<template v-slot:default="scope">
<span>{{ project_list.find(item => item.id === scope.row.projectId)?.projectName || '未知类型' }}</span>
</template>
</el-table-column>
<el-table-column label="申请人" align="center" prop="userName" />
<el-table-column label="申请时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column label="申请物品" align="center" prop="items" >
<template #default="scope">
<el-popover placement="right" :width="400" trigger="click">
<template #reference>
<el-button type="text">物品明细</el-button>
</template>
<el-table :data="scope.row.items" border style="width: 100%">
<el-table-column label="物品类型" align="center">
<template #default="scope">
{{ typeMap[scope.row.type] || '-' }}
</template>
</el-table-column>
<el-table-column label="物品名称" align="center" prop="repaymentPercentage">
<template #default="scope">
{{ materialDetailMap[scope.row.material_detail] || '-' }}
</template>
</el-table-column>
<el-table-column label="物品数量" align="center" prop="repaymentCondition" show-overflow-tooltip>
<template #default="scope">
{{ scope.row.quantity || '-'}}
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</el-table-column>
<el-table-column label="审批状态" align="center" prop="checkStatus">
<template #default="scope">
<dict-tag :options="material_status" :value="scope.row.checkStatus"/>
</template>
</el-table-column>
<el-table-column label="申请备注" align="center" prop="remark" >
<template #default="scope">
<el-popover placement="right" :width="400" trigger="click">
<template #reference>
<el-button type="text">查看详情</el-button>
</template>
<div style="padding: 10px;">
<el-input
type="textarea"
:rows="5"
v-model="scope.row.remark"
readonly
style="width: 100%;"
>
</el-input>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="50">
<template #default="scope">
<el-tooltip content="详情" placement="top">
<el-button link type="text" @click="handleView(scope.row)" v-hasPermi="['material:return:view']">
<img src="../../assets/icons/common/check.png" height="32" width="32"/>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="text" @click="handleDelete(scope.row)" v-hasPermi="['material:return:remove']">
<img src="../../assets/icons/common/delete.png" height="32" width="32"/>
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<pagination
layout="prev, pager, next, sizes, jumper"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
<!-- 添加或修改物品归还申请对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="returnRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="归还人userID" prop="userId">
<el-input v-model="form.userId" placeholder="请输入归还人userID" />
</el-form-item>
<el-form-item label="归还备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入归还备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Return">
import { listReturn, getReturn, delReturn, addReturn, updateReturn } from "@/api/material/return";
import {ArrowDown} from "@element-plus/icons-vue";
import {listMaterialType,listMaterialTypeDetail} from "../../api/material/material.js";
import { listProject} from "../../api/project/project.js";
const { proxy } = getCurrentInstance();
const { material_status } = proxy.useDict('material_status');
const material_type = ref([]);
const all_material_type_detail = ref([]);
const project_list = ref([]);
const returnList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: null,
userName: null,
checkStatus: null,
},
rules: {
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查看详情操作 */
function handleView(row) {
proxy.$router.push({ path: '/materials/return/returnview',query: { id: row.id} });
}
/** 查询物品归还申请列表 */
function getList() {
loading.value = true;
listReturn(queryParams.value).then(response => {
returnList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
//展示明细用的计算属性
// 添加计算属性
const typeMap = computed(() => {
const map = {};
material_type.value.forEach(item => {
map[item.id] = item.typeName;
});
return map;
});
const materialDetailMap = computed(() => {
const map = {};
all_material_type_detail.value.forEach(item => {
map[item.id] = item.materialName;
});
return map;
});
// 表单重置
function reset() {
form.value = {
id: null,
projectId: null,
userId: null,
userName: null,
remark: null,
checkStatus: null,
approvalDate: null,
approvalAdvice: null,
createTime: null,
updateTime: null,
createBy: null,
updateBy: null,
draft: null,
delFlag: null
};
proxy.resetForm("returnRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
proxy.$router.push({ path: '/materials/return/returnadd' });
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const _id = row.id || ids.value
getReturn(_id).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改物品归还申请";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["returnRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
updateReturn(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addReturn(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除物品归还申请编号为"' + _ids + '"的数据项？').then(function() {
return delReturn(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('material/return/export', {
...queryParams.value
}, `return_${new Date().getTime()}.xlsx`)
}
getList();
/** 获取项目列表 */
function getProjectList(){
listProject().then(response =>{
project_list.value = response.rows;
console.log("project_list:",project_list.value)
})
}
/** 获取物品类型 */
function getTypeList() {
listMaterialType().then(response => {
material_type.value = response.data;
});
}
/** 获取类型的物品列表 */
function getTypeDetailList(){
listMaterialTypeDetail().then(response => {
all_material_type_detail.value = response.data;
});
}
// 在组件挂载时执行
onMounted(() => {
//获取项目列表
getProjectList();
//获取物品类型
getTypeList();
//获取物品信息
getTypeDetailList();
});
</script>
<style scoped lang="scss">
.title{
width: 72px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
.bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
// 表格的标头
:deep(.el-table th.el-table__cell) {
line-height: 35px;
//height: 56px;
background: #F6F8FC !important;
}
/* 设置当member字段为空时的行背景色 */
:deep .el-table .error-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.contentTable {
position: relative; /* 父容器需要相对定位 */
min-height: 400px; /* 最小高度防止内容过少时变形 */
padding-bottom: 80px; /* 底部留出分页空间 */
}
.pagination {
position: absolute;
bottom: 20px; /* 距离父容器底部20px */
left: 60%; /* 水平居中关键步骤1 */
transform: translateX(-50%); /* 水平居中关键步骤2 */
margin-right: 0; /* 移除旧代码中的右侧间距 */
z-index: 1; /* 确保分页在表格上方 */
}
.el-alert {
margin: 23px 0 23px;
}
</style>
src/views/materialreturn/view.vue 0 → 100644
View file @ e08e9fb6
<template>
<div class="app-container">
<div class="content" style="position: relative">
<div style="padding-left: 15px ;padding-top: 15px">
<span class="bold-text" style="border-bottom: 3px solid blue;">借用详情</span>
</div>
<div style="padding-top: 28px ;padding-left: 10px; ">
<el-form :model="form" label-width="auto">
<el-row>
<el-col :span="2">
<label class="label-title">项目名称:</label>
</el-col>
<el-col :span="2">
<span class="label">
{{ project_list.find(item => item.id === form.projectId)?.projectName || '未知类型' }}
</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
<label class="label-title">申请人:</label>
</el-col>
<el-col :span="2">
<span class="label">
{{form.userName}}
</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
<label class="label-title">申请时间:</label>
</el-col>
<el-col :span="5">
<span class="label">
{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}') }}
</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
<label class="label-title">审批状态:</label>
</el-col>
<el-col :span="2">
<template v-for="(item, index) in material_status" :key="index">
<span class="label" v-if="item.value === form.checkStatus">
{{ item.label }}
</span>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
<label class="label-title">申请备注:</label>
</el-col>
<el-col :span="15">
<span class="label">
{{ form.remark }}
</span>
</el-col>
</el-row>
<el-row>
<el-col :span="2">
<label class="label-title">申请物品:</label>
</el-col>
<el-col :span="20">
<div v-for="(item, index) in form.items" :key="index" class="item-row" style="display: flex; gap: 30px">
<span style="flex: 1; min-width: 120px" class="label">物品类型：{{ material_type.find(m => m.id === item.type)?.typeName || '—' }}</span>
<span style="flex: 1; min-width: 120px" class="label" >物品名称：{{ all_material_type_detail.find(d => d.id === item.material_detail)?.materialName || '—' }}</span>
<span style="flex: 1; min-width: 120px" class="label" >申请数量：{{ item.quantity || 0 }}</span>
</div>
</el-col>
</el-row>
</el-form>
<div style="position: absolute;right: 52px;bottom: 42px">
<el-button type="primary" size="large" class="btn-A" @click="reset">返回</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {getReturn} from "../../api/material/return.js";
import { listProject} from "../../api/project/project.js";
import {listMaterialType,listMaterialTypeDetail} from "../../api/material/material.js";
const { proxy } = getCurrentInstance();
const {material_status } = proxy.useDict('material_status');
const project_list = ref([]);
const all_material_type_detail = ref([]);
const material_type = ref([]);
const form = ref({
id: null,
projectId: null,
userId: null,
userName: null,
checkStatus: null,
remark: null,
createBy: null,
createTime: null,
items: [{
type: null,
material_detail: null,
quantity: null
}],
})
// 格式化日期
/*function formatDate(date) {
if (!date) return '-';
const d = new Date(date);
return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}`;
}*/
// 返回项目管理页面
const reset = () => {
// 返回项目
proxy.$router.push({ path: '/material/materialReturn' })
}
/** 根据ID查到的详细信息 */
const getInfo = () =>{
getReturn(proxy.$route.query.id).then(response=>{
form.value = response.data;
})
}
/** 获取项目列表 */
function getProjectList(){
listProject().then(response =>{
project_list.value = response.rows;
console.log("project_list:",project_list.value)
})
}
/** 获取物品类型 */
function getTypeList() {
listMaterialType().then(response => {
material_type.value = response.data;
});
}
/** 获取类型的物品列表 */
function getTypeDetailList(){
listMaterialTypeDetail().then(response => {
all_material_type_detail.value = response.data;
});
}
onMounted(() => {
//根据id查询信息
getInfo();
//获取项目列表
getProjectList();
//获取物品类型
getTypeList();
//获取物品信息
getTypeDetailList();
})
</script>
<style scoped lang="scss">
.bold-text {
width: 72px;
height: 15px;
font-family: PingFangSC-Medium;
font-weight: 900;
font-size: 18px;
color: #0D162A;
letter-spacing: 0;
line-height: 15px;
}
.label-title {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 19px;
color: #666666;
letter-spacing: 0;
//text-align: right;
line-height: 40px;
}
.bordered {
margin-left: 110px;
padding: 20px;
background: #FAFAFA;
border: 1px solid #C8CEDE;
border-radius: 2px;
//min-height: 200px;
}
.label {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 19px;
color: #4A4E54;
letter-spacing: 0;
line-height: 40px;
}
.file-item {
display: block;
margin: 9px 0;
}
.file-item .el-link {
font-size: 18px;
}
.table-container {
display: flex;
justify-content: center;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment