Skip to content

P
psa-web
Commit 474c077a authored by 高滢's avatar 高滢
Browse files
Options

feat(页面): 布局

parent 0159581a
Show whitespace changes
Inline Side-by-side
Showing with 1055 additions and 593 deletions
src/assets/styles/element-ui.scss
View file @ 474c077a
...@@ -116,3 +116,6 @@ $base-font-size: 16px; ...@@ -116,3 +116,6 @@ $base-font-size: 16px;
.el-select__wrapper{ .el-select__wrapper{
min-height:36px; min-height:36px;
} }
.el-date-editor .el-range-input{
font-size: 14px;
}
src/assets/styles/index.scss
View file @ 474c077a
...@@ -124,6 +124,8 @@ aside { ...@@ -124,6 +124,8 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 20px;
background: #FAFAFB;
min-height: calc(100vh - 100px);
} }
.components-container { .components-container {
......
src/assets/styles/sidebar.scss
View file @ 474c077a
...@@ -44,7 +44,8 @@ ...@@ -44,7 +44,8 @@
&.has-logo { &.has-logo {
.el-scrollbar { .el-scrollbar {
height: calc(100% - 50px); height: calc(100% - 300px);
margin-top:80px;
} }
} }
...@@ -82,7 +83,7 @@ ...@@ -82,7 +83,7 @@
.sub-menu-title-noDropdown, .sub-menu-title-noDropdown,
.el-sub-menu__title { .el-sub-menu__title {
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: #1B51B4 !important;
} }
} }
...@@ -95,7 +96,7 @@ ...@@ -95,7 +96,7 @@
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: #1B51B4 !important;
} }
} }
...@@ -211,7 +212,7 @@ ...@@ -211,7 +212,7 @@
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $sub-menuHover // you can use $sub-menuHover
background-color: rgba(0, 0, 0, 0.06) !important; background-color: #1B51B4 !important;
} }
} }
......
src/assets/styles/variables.module.scss
View file @ 474c077a
...@@ -10,9 +10,9 @@ $panGreen: #30B08F; ...@@ -10,9 +10,9 @@ $panGreen: #30B08F;
// 默认主题变量 // 默认主题变量
$menuText: #bfcbd9; $menuText: #bfcbd9;
$menuActiveText: #409eff; $menuActiveText: #FFFFFF;
$menuBg: #304156; $menuBg: #143468;
$menuHover: #263445; $menuHover: #1B51B4;
// 浅色主题theme-light // 浅色主题theme-light
$menuLightBg: #ffffff; $menuLightBg: #ffffff;
...@@ -27,9 +27,9 @@ $sideBarWidth: 200px; ...@@ -27,9 +27,9 @@ $sideBarWidth: 200px;
// 菜单暗色变量 // 菜单暗色变量
$base-menu-color: #bfcbd9; $base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #f4f4f5;
$base-menu-background: #304156; $base-menu-background: #143468;
$base-sub-menu-background: #1f2d3d; $base-sub-menu-background: #143468;
$base-sub-menu-hover: #001528; $base-sub-menu-hover: #1B51B4;
// 组件变量 // 组件变量
$--color-primary: #409EFF; $--color-primary: #409EFF;
......
src/layout/components/AppMain.vue
View file @ 474c077a
...@@ -36,7 +36,7 @@ function addIframe() { ...@@ -36,7 +36,7 @@ function addIframe() {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
/* 50= navbar 50 */ /* 50= navbar 50 */
min-height: calc(100vh - 50px); min-height: calc(100vh - 100px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
...@@ -49,7 +49,7 @@ function addIframe() { ...@@ -49,7 +49,7 @@ function addIframe() {
.hasTagsView { .hasTagsView {
.app-main { .app-main {
/* 84 = navbar + tags-view = 50 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px); min-height: calc(100vh - 134px);
} }
.fixed-header + .app-main { .fixed-header + .app-main {
......
src/layout/components/Navbar.vue
View file @ 474c077a
...@@ -5,44 +5,64 @@ ...@@ -5,44 +5,64 @@
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
<div class="right-menu"> <div class="right-menu">
<template v-if="appStore.device !== 'mobile'"> <!-- <template v-if="appStore.device !== 'mobile'">-->
<header-search id="header-search" class="right-menu-item" /> <!-- <div class="todo">-->
<div class="todo hover-effect">
<div class="todo-logo"><img :src="todo" class="img-logo"/></div>
<div class="todo-title">待办</div>
</div>
<div class="todo hover-effect">
<div class="todo-logo"><img :src="send" class="todo-logo"/></div>
<div class="todo-title">发起</div>
</div>
<div class="todo hover-effect">
<div class="todo-logo"><img :src="handle" class="todo-logo"/></div>
<div class="todo-title">处理</div>
</div>
<div class="todo hover-effect">
<div class="todo-logo"><img :src="initiate" class="todo-logo"/></div>
<div class="todo-title">抄送</div>
</div>
<!-- </div>-->
<!-- <header-search id="header-search" class="right-menu-item" />-->
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
</el-tooltip> <!-- </el-tooltip>-->
<el-tooltip content="文档地址" effect="dark" placement="bottom"> <!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> <!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
</el-tooltip> <!-- </el-tooltip>-->
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
<el-tooltip content="主题模式" effect="dark" placement="bottom"> <!-- <el-tooltip content="主题模式" effect="dark" placement="bottom">-->
<div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme"> <!-- <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">-->
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" /> <!-- <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />-->
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" /> <!-- <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />-->
</div> <!-- </div>-->
</el-tooltip> <!-- </el-tooltip>-->
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
<size-select id="size-select" class="right-menu-item hover-effect" /> <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
</el-tooltip> <!-- </el-tooltip>-->
</template> <!-- </template>-->
<el-divider direction="vertical" style="height: 50px"/>
<div class="avatar-container"> <div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" /> <img :src="exit" class="user-exit" />
<el-icon><caret-bottom /></el-icon> <!-- <img :src="userStore.avatar" class="user-avatar" />-->
<!-- <el-icon><caret-bottom /></el-icon>-->
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<router-link to="/user/profile"> <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"> <!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
<span>布局设置</span> <!-- <span>布局设置</span>-->
</el-dropdown-item> <!-- </el-dropdown-item>-->
<el-dropdown-item divided command="logout"> <el-dropdown-item divided command="logout">
<span>退出登录</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>
...@@ -67,11 +87,14 @@ import RuoYiDoc from '@/components/RuoYi/Doc' ...@@ -67,11 +87,14 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app' import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
import todo from '@/assets/icons/common/todo.png'
import send from '@/assets/icons/common/send2.png'
import handle from '@/assets/icons/common/handle.png'
import initiate from '@/assets/icons/common/initiate.png'
import exit from '@/assets/icons/common/exit.png'
const appStore = useAppStore() const appStore = useAppStore()
const userStore = useUserStore() const userStore = useUserStore()
const settingsStore = useSettingsStore() const settingsStore = useSettingsStore()
function toggleSideBar() { function toggleSideBar() {
appStore.toggleSideBar() appStore.toggleSideBar()
} }
...@@ -113,12 +136,11 @@ function toggleTheme() { ...@@ -113,12 +136,11 @@ function toggleTheme() {
<style lang='scss' scoped> <style lang='scss' scoped>
.navbar { .navbar {
height: 50px; height: 100px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: var(--navbar-bg); background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); //box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
height: 100%; height: 100%;
...@@ -126,7 +148,8 @@ function toggleTheme() { ...@@ -126,7 +148,8 @@ function toggleTheme() {
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: background 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
&:hover { &:hover {
background: rgba(0, 0, 0, 0.025); background: rgba(0, 0, 0, 0.025);
} }
...@@ -134,6 +157,8 @@ function toggleTheme() { ...@@ -134,6 +157,8 @@ function toggleTheme() {
.breadcrumb-container { .breadcrumb-container {
float: left; float: left;
display: flex;
height: 100%;
} }
.topmenu-container { .topmenu-container {
...@@ -151,7 +176,32 @@ function toggleTheme() { ...@@ -151,7 +176,32 @@ function toggleTheme() {
height: 100%; height: 100%;
line-height: 50px; line-height: 50px;
display: flex; display: flex;
align-items: center;
.todo{
margin-right: 30px;
.todo-logo{
height:28px;
width: 28px;
.img-logo{
height:28px;
width: 28px;
}
}
.todo-title{
height: 20px;
font-weight: 500;
font-size: 14px;
color: #282D35;
}
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
&:focus { &:focus {
outline: none; outline: none;
} }
...@@ -188,12 +238,16 @@ function toggleTheme() { ...@@ -188,12 +238,16 @@ function toggleTheme() {
} }
.avatar-container { .avatar-container {
margin-left: 22px;
margin-right: 40px; margin-right: 40px;
.avatar-wrapper { .avatar-wrapper {
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
.user-exit{
width: 28px;
height: 28px;
}
.user-avatar { .user-avatar {
cursor: pointer; cursor: pointer;
width: 40px; width: 40px;
......
src/layout/components/Sidebar/index.vue
View file @ 474c077a
<template> <template>
<div :class="{ 'has-logo': showLogo }" class="sidebar-container"> <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<logo v-if="showLogo" :collapse="isCollapse" /> <img :src="toplogo" class="toplogo">
<div class="avatar">
<img :src="userStore.avatar" class="user-avatar" />
<div style="color:#FFFFFF;font-size: 20px;font-weight: 600;">{{userStore.name}}</div>
</div>
<!-- <logo v-if="showLogo" :collapse="isCollapse" />-->
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
...@@ -21,6 +26,9 @@ ...@@ -21,6 +26,9 @@
/> />
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
<div style="display: flex;justify-content: center">
<img :src="comlogo" class="comlogo">
</div>
</div> </div>
</template> </template>
...@@ -31,12 +39,14 @@ import variables from '@/assets/styles/variables.module.scss' ...@@ -31,12 +39,14 @@ import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app' import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission' import usePermissionStore from '@/store/modules/permission'
import toplogo from '@/assets/icons/common/toplogo.png'
import comlogo from '@/assets/icons/common/comlogo.png'
import useUserStore from "@/store/modules/user.js";
const route = useRoute(); const route = useRoute();
const appStore = useAppStore() const appStore = useAppStore()
const settingsStore = useSettingsStore() const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore() const permissionStore = usePermissionStore()
const userStore = useUserStore()
const sidebarRouters = computed(() => permissionStore.sidebarRouters); const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => settingsStore.sidebarLogo); const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme); const sideTheme = computed(() => settingsStore.sideTheme);
...@@ -71,7 +81,24 @@ const activeMenu = computed(() => { ...@@ -71,7 +81,24 @@ const activeMenu = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.sidebar-container { .sidebar-container {
background-color: v-bind(getMenuBackground); background-color: v-bind(getMenuBackground);
.avatar{
position: absolute;
top: 40px;
left: 90px;
}
.user-avatar{
width: 70px;
height: 70px;
border-radius: 50%;
}
.comlogo{
width: 170px;
height:50px;
}
.toplogo{
height: 81px;
width: 100%;
}
.scrollbar-wrapper { .scrollbar-wrapper {
background-color: v-bind(getMenuBackground); background-color: v-bind(getMenuBackground);
} }
......
src/layout/index.vue
View file @ 474c077a
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }"> <div :class="{ 'fixed-header': fixedHeader }">
<navbar @setLayout="setLayout" /> <navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" /> <!-- <tags-view v-if="needTagsView" />-->
</div> </div>
<app-main /> <app-main />
<settings ref="settingRef" /> <settings ref="settingRef" />
......
src/views/attendance/application/overtimeApplication.vue
View file @ 474c077a
<template > <template>
<div id="app"> <div id="app">
<el-container> <el-container>
<el-container> <el-container>
......
src/views/material/index.vue
View file @ 474c077a
...@@ -14,22 +14,40 @@ ...@@ -14,22 +14,40 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">物品编号</label> <label class="input-label">物品编号</label>
<el-input v-model="form.itemCode" disabled style="width: 20%;"></el-input> <el-input
v-model="form.itemCode"
disabled
style="width: 20%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<!-- 物品名称 --> <!-- 物品名称 -->
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">物品名称</label> <label class="input-label">物品名称</label>
<el-input v-model="form.itemName" placeholder="请输入物品名称" style="width: 20%;"></el-input> <el-input
v-model="form.itemName"
placeholder="请输入物品名称"
style="width: 20%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<!-- 物品类型 --> <!-- 物品类型 -->
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">物品类型</label> <label class="input-label">物品类型</label>
<el-select v-model="form.itemType" filterable placeholder="请选择或输入" style="width: 20%;"> <el-select
<el-option v-for="item in itemTypes" :key="item" :label="item" :value="item"></el-option> v-model="form.itemType"
filterable
placeholder="请选择或输入"
style="width: 20%"
>
<el-option
v-for="item in itemTypes"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> </el-select>
</el-col> </el-col>
</el-row> </el-row>
...@@ -37,22 +55,28 @@ ...@@ -37,22 +55,28 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">单位</label> <label class="input-label">单位</label>
<el-input v-model="form.unit" placeholder="请输入单位" style="width: 20%;"></el-input> <el-input
v-model="form.unit"
placeholder="请输入单位"
style="width: 20%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<!-- 提交和保存草稿按钮 --> <!-- 提交和保存草稿按钮 -->
<div class="button-container"> <div class="button-container">
<el-button type="primary" @click="handleSubmit" style="margin-right: 20px;">提交</el-button> <el-button type="primary" style="margin-right: 20px" @click="handleSubmit"
>提交</el-button
>
<el-button @click="saveDraft">保存草稿</el-button> <el-button @click="saveDraft">保存草稿</el-button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { addMaterial } from '@/api/material/material.js'; import { addMaterial } from '@/api/material/material.js'
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus'
export default { export default {
data() { data() {
...@@ -64,36 +88,52 @@ export default { ...@@ -64,36 +88,52 @@ export default {
unit: '' unit: ''
}, },
itemTypes: ['办公家具', '办公设备', '日杂百货'] itemTypes: ['办公家具', '办公设备', '日杂百货']
}; }
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialDraft')
if (draft) {
this.form = JSON.parse(draft)
ElMessage.info('已加载草稿')
}
},
mounted() {
// 页面加载时生成物品编号
if (!this.form.itemCode) {
this.form.itemCode = this.generateItemCode()
}
}, },
methods: { methods: {
generateItemCode() { generateItemCode() {
const now = new Date(); const now = new Date()
const year = now.getFullYear(); const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0'); const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0'); const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0'); const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0')
return `WP${year}${month}${day}${hours}${minutes}${seconds}`; return `WP${year}${month}${day}${hours}${minutes}${seconds}`
}, },
handleSubmit() { handleSubmit() {
if (this.form.itemName && this.form.itemType && this.form.unit) { if (this.form.itemName && this.form.itemType && this.form.unit) {
addMaterial(this.form).then(response => { addMaterial(this.form)
ElMessage.success('物品信息提交成功'); .then(response => {
ElMessage.success('物品信息提交成功')
// 清空表单 // 清空表单
this.resetForm(); this.resetForm()
}).catch(error => { })
ElMessage.error('物品信息提交失败: ' + error.message); .catch(error => {
}); ElMessage.error('物品信息提交失败: ' + error.message)
})
} else { } else {
ElMessage.warning('请填写所有必填项'); ElMessage.warning('请填写所有必填项')
} }
}, },
saveDraft() { saveDraft() {
// 保存草稿到本地存储 // 保存草稿到本地存储
localStorage.setItem('materialDraft', JSON.stringify(this.form)); localStorage.setItem('materialDraft', JSON.stringify(this.form))
ElMessage.info('草稿已保存'); ElMessage.info('草稿已保存')
}, },
resetForm() { resetForm() {
this.form = { this.form = {
...@@ -101,26 +141,12 @@ export default { ...@@ -101,26 +141,12 @@ export default {
itemName: '', itemName: '',
itemType: '', itemType: '',
unit: '' unit: ''
};
// 清除草稿
localStorage.removeItem('materialDraft');
} }
}, // 清除草稿
created() { localStorage.removeItem('materialDraft')
// 加载草稿
const draft = localStorage.getItem('materialDraft');
if (draft) {
this.form = JSON.parse(draft);
ElMessage.info('已加载草稿');
}
},
mounted() {
// 页面加载时生成物品编号
if (!this.form.itemCode) {
this.form.itemCode = this.generateItemCode();
} }
} }
}; }
</script> </script>
<style scoped> <style scoped>
...@@ -149,7 +175,7 @@ export default { ...@@ -149,7 +175,7 @@ export default {
border-bottom: 4px solid; border-bottom: 4px solid;
border-color: rgb(0, 137, 127); border-color: rgb(0, 137, 127);
height: 2px; height: 2px;
opacity: .2; opacity: 0.2;
margin-top: 6px; margin-top: 6px;
} }
......
src/views/material/materialApply.vue
View file @ 474c077a
...@@ -9,23 +9,36 @@ ...@@ -9,23 +9,36 @@
</div> </div>
</div> </div>
<el-form :model="form" :rules="rules" ref="form" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">申请日期</label> <label class="input-label">申请日期</label>
<el-date-picker v-model="form.applyDate" type="date" placeholder="选择日期" style="width: 90%;"></el-date-picker> <el-date-picker
v-model="form.applyDate"
type="date"
placeholder="选择日期"
style="width: 90%"
></el-date-picker>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">申请人</label> <label class="input-label">申请人</label>
<el-input v-model="form.applicant" placeholder="请输入申请人" style="width: 90%;"></el-input> <el-input
v-model="form.applicant"
placeholder="请输入申请人"
style="width: 90%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">所属部门</label> <label class="input-label">所属部门</label>
<el-input v-model="form.department" placeholder="请输入所属部门" style="width: 90%;"></el-input> <el-input
v-model="form.department"
placeholder="请输入所属部门"
style="width: 90%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
...@@ -39,42 +52,86 @@ ...@@ -39,42 +52,86 @@
</el-table-column> </el-table-column>
<el-table-column prop="type" label="物品类型" width="170"> <el-table-column prop="type" label="物品类型" width="170">
<template #default="scope"> <template #default="scope">
<el-select v-model="scope.row.itemType" placeholder="请选择" @change="onItemTypeChange(scope.$index, $event)"> <el-select
<el-option v-for="item in itemTypes" :key="item" :label="item" :value="item"></el-option> v-model="scope.row.itemType"
placeholder="请选择"
@change="onItemTypeChange(scope.$index, $event)"
>
<el-option
v-for="item in itemTypes"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="物品名称" width="170"> <el-table-column prop="name" label="物品名称" width="170">
<template #default="scope"> <template #default="scope">
<el-select v-model="scope.row.itemName" placeholder="请选择" @change="updateUnitBasedOnItemName(scope.$index)"> <el-select
<el-option v-for="item in itemNames" :key="item" :label="item" :value="item"></el-option> v-model="scope.row.itemName"
placeholder="请选择"
@change="updateUnitBasedOnItemName(scope.$index)"
>
<el-option
v-for="item in itemNames"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="unit" label="单位" width="170"> <el-table-column prop="unit" label="单位" width="170">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.unit" placeholder="请输入单位" readonly></el-input> <el-input
v-model="scope.row.unit"
placeholder="请输入单位"
readonly
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="stock" label="库存数量" width="170"> <el-table-column prop="stock" label="库存数量" width="170">
<template #default="scope"> <template #default="scope">
<el-input v-model.number="scope.row.stock" placeholder="请输入库存数量" @input="updateRemaining(scope.$index)"></el-input> <el-input
v-model.number="scope.row.stock"
placeholder="请输入库存数量"
@input="updateRemaining(scope.$index)"
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="quantity" label="领用数量" width="170"> <el-table-column prop="quantity" label="领用数量" width="170">
<template #default="scope"> <template #default="scope">
<el-input-number v-model.number="scope.row.applyQuantity" :min="0" :max="scope.row.stock" @change="updateRemaining(scope.$index)" style="width: 100%;"></el-input-number> <el-input-number
v-model.number="scope.row.applyQuantity"
:min="0"
:max="scope.row.stock"
style="width: 100%"
@change="updateRemaining(scope.$index)"
></el-input-number>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remaining" label="领用后剩余库存" width="220"> <el-table-column
prop="remaining"
label="领用后剩余库存"
width="220"
>
<template #default="scope"> <template #default="scope">
<el-input v-model.number="scope.row.applyRemaining" placeholder="自动计算" readonly></el-input> <el-input
v-model.number="scope.row.applyRemaining"
placeholder="自动计算"
readonly
></el-input>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 绿色文字按钮 --> <!-- 绿色文字按钮 -->
<el-button type="text" @click="addItem" class="custom-text-button">+ 添加</el-button> <el-button type="text" class="custom-text-button" @click="addItem"
<el-button type="text" @click="pasteItem" class="custom-text-button">+ 粘贴新增</el-button> >+ 添加</el-button
>
<el-button type="text" class="custom-text-button" @click="pasteItem"
>+ 粘贴新增</el-button
>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
...@@ -82,9 +139,13 @@ ...@@ -82,9 +139,13 @@
<label class="input-label">领用类型</label> <label class="input-label">领用类型</label>
<el-radio-group v-model="form.usageType"> <el-radio-group v-model="form.usageType">
<div class="radio-item"> <div class="radio-item">
<el-radio label="借用（需归还）" class="borrow"><span class="radio-label">借用（需归还）</span></el-radio> <el-radio label="借用（需归还）" class="borrow"
<br> ><span class="radio-label">借用（需归还）</span></el-radio
<el-radio label="领用（无需归还）" class="receive"><span class="radio-label">领用（无需归还）</span></el-radio> >
<br />
<el-radio label="领用（无需归还）" class="receive"
><span class="radio-label">领用（无需归还）</span></el-radio
>
</div> </div>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
...@@ -92,7 +153,13 @@ ...@@ -92,7 +153,13 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">申请备注</label> <label class="input-label">申请备注</label>
<el-input type="textarea" v-model="form.remark" placeholder="请输入申请备注" style="width: 70%;" class="custom-textarea"></el-input> <el-input
v-model="form.remark"
type="textarea"
placeholder="请输入申请备注"
style="width: 70%"
class="custom-textarea"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<!-- 标题和分割线 --> <!-- 标题和分割线 -->
...@@ -107,7 +174,12 @@ ...@@ -107,7 +174,12 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<label class="input-label">审批时间</label> <label class="input-label">审批时间</label>
<el-date-picker v-model="form.approvalDate" type="date" placeholder="选择日期" style="width: 90%;"></el-date-picker> <el-date-picker
v-model="form.approvalDate"
type="date"
placeholder="选择日期"
style="width: 90%"
></el-date-picker>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
...@@ -115,9 +187,13 @@ ...@@ -115,9 +187,13 @@
<label class="input-label">审批意见</label> <label class="input-label">审批意见</label>
<el-radio-group v-model="form.approvalAdvice"> <el-radio-group v-model="form.approvalAdvice">
<div class="radio-item"> <div class="radio-item">
<el-radio label="通过" class="pass"><span class="radio-label">同意</span></el-radio> <el-radio label="通过" class="pass"
<br> ><span class="radio-label">同意</span></el-radio
<el-radio label="不通过" class="unpass"><span class="radio-label">不同意</span></el-radio> >
<br />
<el-radio label="不通过" class="unpass"
><span class="radio-label">不同意</span></el-radio
>
</div> </div>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
...@@ -126,20 +202,26 @@ ...@@ -126,20 +202,26 @@
<!-- 提交和保存草稿按钮 --> <!-- 提交和保存草稿按钮 -->
<div class="button-container"> <div class="button-container">
<el-button type="primary" @click="submitForm" style="margin-right: 20px;">提交</el-button> <el-button type="primary" style="margin-right: 20px" @click="submitForm"
>提交</el-button
>
<el-button @click="saveDraft">保存草稿</el-button> <el-button @click="saveDraft">保存草稿</el-button>
</div> </div>
<el-dialog title="粘贴新增" v-model="showPasteDialog" width="50%"> <el-dialog v-model="showPasteDialog" title="粘贴新增" width="50%">
<!-- 对话框内容 --> <!-- 对话框内容 -->
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { addApply, updateApply } from '@/api/material/apply.js'; import { addApply, updateApply } from '@/api/material/apply.js'
import { listMaterial, getMaterial, updateMaterial } from '@/api/material/material.js'; import {
import { ElMessageBox } from 'element-plus'; listMaterial,
getMaterial,
updateMaterial
} from '@/api/material/material.js'
import { ElMessageBox } from 'element-plus'
export default { export default {
data() { data() {
...@@ -149,33 +231,79 @@ export default { ...@@ -149,33 +231,79 @@ export default {
applicant: '', applicant: '',
department: '', department: '',
items: [ items: [
{ itemType: '', itemName: '', unit: '', stock: 0, applyQuantity: 0, applyRemaining: 0, materialId: '' } {
itemType: '',
itemName: '',
unit: '',
stock: 0,
applyQuantity: 0,
applyRemaining: 0,
materialId: ''
}
], ],
usageType: '借用（需归还）', usageType: '借用（需归还）',
remark: '', remark: '',
approvalDate: '', approvalDate: '',
approvalAdvice: '同意', approvalAdvice: '同意'
}, },
showPasteDialog: false, showPasteDialog: false,
editingId: null, editingId: null,
rules: { rules: {
applyDate: [{ required: true, message: '请选择申请日期', trigger: 'change' }], applyDate: [
applicant: [{ required: true, message: '请输入申请人', trigger: 'blur' }], { required: true, message: '请选择申请日期', trigger: 'change' }
department: [{ required: true, message: '请输入所属部门', trigger: 'blur' }], ],
usageType: [{ required: true, message: '请选择领用类型', trigger: 'change' }], applicant: [
approvalAdvice: [{ required: true, message: '请选择审批意见', trigger: 'change' }], { required: true, message: '请输入申请人', trigger: 'blur' }
],
department: [
{ required: true, message: '请输入所属部门', trigger: 'blur' }
],
usageType: [
{ required: true, message: '请选择领用类型', trigger: 'change' }
],
approvalAdvice: [
{ required: true, message: '请选择审批意见', trigger: 'change' }
]
}, },
itemTypes: ['办公家具', '办公设备', '日杂百货'], // 物品类型列表 itemTypes: ['办公家具', '办公设备', '日杂百货'], // 物品类型列表
itemNames: [], // 物品名称列表 itemNames: [], // 物品名称列表
materials: [], // 物品信息列表 materials: [] // 物品信息列表
}; }
},
watch: {
'form.items': {
handler(newItems) {
newItems.forEach((item, index) => {
this.updateUnitBasedOnItemName(index)
})
},
deep: true
}
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialApplyDraft')
if (draft) {
this.form = JSON.parse(draft)
this.$message.info('已加载草稿')
}
// 获取物品信息
this.fetchMaterials()
}, },
methods: { methods: {
addItem() { addItem() {
this.form.items.push({ itemType: '', itemName: '', unit: '', stock: 0, applyQuantity: 0, applyRemaining: 0, materialId: '' }); this.form.items.push({
itemType: '',
itemName: '',
unit: '',
stock: 0,
applyQuantity: 0,
applyRemaining: 0,
materialId: ''
})
}, },
pasteItem() { pasteItem() {
this.showPasteDialog = true; this.showPasteDialog = true
}, },
submitForm() { submitForm() {
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
...@@ -183,77 +311,107 @@ export default { ...@@ -183,77 +311,107 @@ export default {
const data = { const data = {
...this.form, ...this.form,
items: JSON.stringify(this.form.items) items: JSON.stringify(this.form.items)
}; }
addApply(data).then(response => { addApply(data)
.then(response => {
if (response && response.code === 200) { if (response && response.code === 200) {
ElMessageBox.alert('申请提交成功', '提示', { ElMessageBox.alert('申请提交成功', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
this.$message.success('申请提交成功'); this.$message.success('申请提交成功')
// 更新每个物品的 stock // 更新每个物品的 stock
this.form.items.forEach(item => { this.form.items.forEach(item => {
if (item.materialId) { if (item.materialId) {
getMaterial(item.materialId).then(materialResponse => { getMaterial(item.materialId)
if (materialResponse && materialResponse.code === 200) { .then(materialResponse => {
console.log('Material Response:', materialResponse); // 添加调试信息 if (
materialResponse &&
materialResponse.code === 200
) {
console.log(
'Material Response:',
materialResponse
) // 添加调试信息
// 获取原 stock 数量 // 获取原 stock 数量
let originalStock = materialResponse.data.stock || 0; let originalStock =
materialResponse.data.stock || 0
// 计算新的 stock 数量 // 计算新的 stock 数量
let newStock = originalStock - item.applyQuantity; let newStock = originalStock - item.applyQuantity
// 调用 updateMaterial 接口更新 material 表中相应物品的 stock 字段 // 调用 updateMaterial 接口更新 material 表中相应物品的 stock 字段
updateMaterial({ materialId: item.materialId, stock: newStock }).then(updateResponse => { updateMaterial({
if (updateResponse && updateResponse.code === 200) { materialId: item.materialId,
console.log('Stock updated successfully for materialId:', item.materialId); stock: newStock
})
.then(updateResponse => {
if (
updateResponse &&
updateResponse.code === 200
) {
console.log(
'Stock updated successfully for materialId:',
item.materialId
)
} else { } else {
this.$message.error('更新库存失败: ' + updateResponse.msg); this.$message.error(
'更新库存失败: ' + updateResponse.msg
)
} }
}).catch(updateError => { })
this.$message.error('更新库存失败: ' + updateError.message); .catch(updateError => {
}); this.$message.error(
'更新库存失败: ' + updateError.message
)
})
} else { } else {
this.$message.error('获取物品信息失败: ' + materialResponse.msg); this.$message.error(
'获取物品信息失败: ' + materialResponse.msg
)
} }
}).catch(materialError => { })
this.$message.error('获取物品信息失败: ' + materialError.message); .catch(materialError => {
}); this.$message.error(
'获取物品信息失败: ' + materialError.message
)
})
} }
}); })
this.resetForm(); this.resetForm()
// 提交成功后清空草稿 // 提交成功后清空草稿
localStorage.removeItem('materialApplyDraft'); localStorage.removeItem('materialApplyDraft')
} }
}); })
} else { } else {
ElMessageBox.alert('申请提交失败', '提示', { ElMessageBox.alert('申请提交失败', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
this.$message.error('申请提交失败: ' + response.msg); this.$message.error('申请提交失败: ' + response.msg)
} }
}); })
} }
}).catch(error => { })
.catch(error => {
ElMessageBox.alert('申请提交失败', '提示', { ElMessageBox.alert('申请提交失败', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
this.$message.error('申请提交失败: ' + error.message); this.$message.error('申请提交失败: ' + error.message)
} }
}); })
}); })
} else { } else {
this.$message.error('请检查表单填写是否正确'); this.$message.error('请检查表单填写是否正确')
} }
}); })
}, },
saveDraft() { saveDraft() {
localStorage.setItem('materialApplyDraft', JSON.stringify(this.form)); localStorage.setItem('materialApplyDraft', JSON.stringify(this.form))
this.$message.info('草稿已保存'); this.$message.info('草稿已保存')
}, },
updateRemaining(index) { updateRemaining(index) {
const item = this.form.items[index]; const item = this.form.items[index]
item.applyRemaining = item.stock - item.applyQuantity; item.applyRemaining = item.stock - item.applyQuantity
}, },
resetForm() { resetForm() {
this.form = { this.form = {
...@@ -261,93 +419,85 @@ export default { ...@@ -261,93 +419,85 @@ export default {
applicant: '', applicant: '',
department: '', department: '',
items: [ items: [
{ itemType: '', itemName: '', unit: '', stock: 0, applyQuantity: 0, applyRemaining: 0, materialId: '' } {
itemType: '',
itemName: '',
unit: '',
stock: 0,
applyQuantity: 0,
applyRemaining: 0,
materialId: ''
}
], ],
usageType: '借用（需归还）', usageType: '借用（需归还）',
remark: '', remark: '',
approvalDate: '', approvalDate: '',
approvalAdvice: '同意', approvalAdvice: '同意'
}; }
this.editingId = null; this.editingId = null
this.$refs.form.resetFields(); this.$refs.form.resetFields()
}, },
fetchMaterials() { fetchMaterials() {
listMaterial().then(response => { listMaterial()
console.log('Response:', response); // 添加调试信息 .then(response => {
console.log('Response:', response) // 添加调试信息
if (response && response.code === 200) { if (response && response.code === 200) {
if (Array.isArray(response.rows)) { // 直接检查 response.rows if (Array.isArray(response.rows)) {
this.materials = response.rows; // 确保正确赋值 // 直接检查 response.rows
this.updateItemNames(); // 确保在材料加载后更新物品名称 this.materials = response.rows // 确保正确赋值
this.updateItemNames() // 确保在材料加载后更新物品名称
} else { } else {
this.$message.error('获取物品信息失败: 返回数据格式不正确'); this.$message.error('获取物品信息失败: 返回数据格式不正确')
} }
} else { } else {
this.$message.error('获取物品信息失败: ' + response.msg); this.$message.error('获取物品信息失败: ' + response.msg)
} }
}).catch(error => { })
this.$message.error('获取物品信息失败: ' + error.message); .catch(error => {
}); this.$message.error('获取物品信息失败: ' + error.message)
})
}, },
updateItemNames(index) { updateItemNames(index) {
if (index >= 0 && index < this.form.items.length) { if (index >= 0 && index < this.form.items.length) {
const selectedType = this.form.items[index].itemType; const selectedType = this.form.items[index].itemType
if (selectedType) { if (selectedType) {
this.itemNames = this.materials this.itemNames = this.materials
.filter(material => material.itemType === selectedType) .filter(material => material.itemType === selectedType)
.map(material => material.itemName); .map(material => material.itemName)
} else { } else {
this.itemNames = []; this.itemNames = []
} }
} }
}, },
onItemTypeChange(index, newItemType) { onItemTypeChange(index, newItemType) {
this.form.items[index].itemType = newItemType; this.form.items[index].itemType = newItemType
this.form.items[index].itemName = ''; // 清空物品名称 this.form.items[index].itemName = '' // 清空物品名称
this.form.items[index].unit = ''; // 清空单位 this.form.items[index].unit = '' // 清空单位
this.form.items[index].materialId = ''; // 清空 materialId this.form.items[index].materialId = '' // 清空 materialId
this.updateItemNames(index); // 更新物品名称选项 this.updateItemNames(index) // 更新物品名称选项
}, },
updateUnitBasedOnItemName(index) { updateUnitBasedOnItemName(index) {
const item = this.form.items[index]; const item = this.form.items[index]
if (item.itemType && item.itemName) { if (item.itemType && item.itemName) {
const selectedItem = this.materials.find(material => const selectedItem = this.materials.find(
material =>
material.itemType === item.itemType && material.itemType === item.itemType &&
material.itemName === item.itemName material.itemName === item.itemName
); )
if (selectedItem) { if (selectedItem) {
item.unit = selectedItem.unit; item.unit = selectedItem.unit
item.stock = selectedItem.stock !== null ? selectedItem.stock : 0; // 处理 stock 为 null 的情况 item.stock = selectedItem.stock !== null ? selectedItem.stock : 0 // 处理 stock 为 null 的情况
item.materialId = selectedItem.materialId; // 设置 materialId item.materialId = selectedItem.materialId // 设置 materialId
} else { } else {
item.unit = ''; item.unit = ''
item.stock = 0; // 默认库存为0 item.stock = 0 // 默认库存为0
item.materialId = ''; // 清空 materialId item.materialId = '' // 清空 materialId
} }
this.updateRemaining(index); // 更新剩余库存 this.updateRemaining(index) // 更新剩余库存
} }
} }
},
watch: {
'form.items': {
handler(newItems) {
newItems.forEach((item, index) => {
this.updateUnitBasedOnItemName(index);
});
},
deep: true
} }
}, }
created() {
// 加载草稿
const draft = localStorage.getItem('materialApplyDraft');
if (draft) {
this.form = JSON.parse(draft);
this.$message.info('已加载草稿');
}
// 获取物品信息
this.fetchMaterials();
}
};
</script> </script>
<style scoped> <style scoped>
...@@ -377,7 +527,7 @@ export default { ...@@ -377,7 +527,7 @@ export default {
border-bottom: 4px solid; border-bottom: 4px solid;
border-color: rgb(0, 137, 127); border-color: rgb(0, 137, 127);
height: 2px; height: 2px;
opacity: .2; opacity: 0.2;
margin-top: 6px; /* 调整此值以适应布局 */ margin-top: 6px; /* 调整此值以适应布局 */
} }
......
src/views/material/materialEntry.vue
View file @ 474c077a
...@@ -14,27 +14,57 @@ ...@@ -14,27 +14,57 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<label class="input-label">入库日期</label> <label class="input-label">入库日期</label>
<el-date-picker v-model="form.entryDate" type="date" placeholder="选择日期" style="width: 90%;"></el-date-picker> <el-date-picker
v-model="form.entryDate"
type="date"
placeholder="选择日期"
style="width: 90%"
></el-date-picker>
</el-col> </el-col>
<!-- 入库人员 --> <!-- 入库人员 -->
<el-col :span="12"> <el-col :span="12">
<label class="input-label">入库人员</label> <label class="input-label">入库人员</label>
<el-input v-model="form.entryPerson" placeholder="请输入入库人员" style="width: 90%;"></el-input> <el-input
v-model="form.entryPerson"
placeholder="请输入入库人员"
style="width: 90%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<!-- 物品类型 --> <!-- 物品类型 -->
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<label class="input-label">物品类型</label> <label class="input-label">物品类型</label>
<el-select v-model="form.itemType" filterable placeholder="请选择或输入" style="width: 90%;" @change="onItemTypeChange"> <el-select
<el-option v-for="item in itemTypes" :key="item" :label="item" :value="item"></el-option> v-model="form.itemType"
filterable
placeholder="请选择或输入"
style="width: 90%"
@change="onItemTypeChange"
>
<el-option
v-for="item in itemTypes"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> </el-select>
</el-col> </el-col>
<!-- 物品名称 --> <!-- 物品名称 -->
<el-col :span="12"> <el-col :span="12">
<label class="input-label">物品名称</label> <label class="input-label">物品名称</label>
<el-select v-model="form.itemName" filterable placeholder="请选择或输入" style="width: 90%;"> <el-select
<el-option v-for="item in itemNames" :key="item" :label="item" :value="item"></el-option> v-model="form.itemName"
filterable
placeholder="请选择或输入"
style="width: 90%"
>
<el-option
v-for="item in itemNames"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select> </el-select>
</el-col> </el-col>
</el-row> </el-row>
...@@ -42,19 +72,30 @@ ...@@ -42,19 +72,30 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<label class="input-label">单位</label> <label class="input-label">单位</label>
<el-input v-model="form.unit" placeholder="请输入单位" style="width: 90%;"></el-input> <el-input
v-model="form.unit"
placeholder="请输入单位"
style="width: 90%"
></el-input>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<label class="input-label">数量</label> <label class="input-label">数量</label>
<el-input-number v-model="form.entryQuantity" :min="1" style="width: 90%;"></el-input-number> <el-input-number
v-model="form.entryQuantity"
:min="1"
style="width: 90%"
></el-input-number>
</el-col> </el-col>
</el-row> </el-row>
<!-- 入库方式 --> <!-- 入库方式 -->
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">入库方式</label> <label class="input-label">入库方式</label>
<el-radio-group v-model="form.entryMethod" style="display: block; margin-bottom: 20px;"> <el-radio-group
<el-radio label="采购入库" class="item">采购入库</el-radio><br> v-model="form.entryMethod"
style="display: block; margin-bottom: 20px"
>
<el-radio label="采购入库" class="item">采购入库</el-radio><br />
<el-radio label="盘点入库">盘点入库</el-radio> <el-radio label="盘点入库">盘点入库</el-radio>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
...@@ -71,12 +112,20 @@ ...@@ -71,12 +112,20 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<label class="input-label">审批时间</label> <label class="input-label">审批时间</label>
<el-date-picker v-model="form.approvalDate" type="date" placeholder="选择日期" style="width: 90%;"></el-date-picker> <el-date-picker
v-model="form.approvalDate"
type="date"
placeholder="选择日期"
style="width: 90%"
></el-date-picker>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<label class="input-label">是否入库合格</label> <label class="input-label">是否入库合格</label>
<el-radio-group v-model="form.isQualified" style="display: block; margin-bottom: 20px;"> <el-radio-group
<el-radio label="合格" class="item">合格</el-radio><br> v-model="form.isQualified"
style="display: block; margin-bottom: 20px"
>
<el-radio label="合格" class="item">合格</el-radio><br />
<el-radio label="不合格">不合格</el-radio> <el-radio label="不合格">不合格</el-radio>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
...@@ -85,16 +134,22 @@ ...@@ -85,16 +134,22 @@
<!-- 提交和保存草稿按钮 --> <!-- 提交和保存草稿按钮 -->
<div class="button-container"> <div class="button-container">
<el-button type="primary" @click="submitForm" style="margin-right: 20px;">提交</el-button> <el-button type="primary" style="margin-right: 20px" @click="submitForm"
>提交</el-button
>
<el-button @click="saveDraft">保存草稿</el-button> <el-button @click="saveDraft">保存草稿</el-button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus'
import { addEntry, listEntry } from '@/api/material/entry.js'; import { addEntry, listEntry } from '@/api/material/entry.js'
import {getMaterial, listMaterial, updateMaterial} from '@/api/material/material.js'; import {
getMaterial,
listMaterial,
updateMaterial
} from '@/api/material/material.js'
export default { export default {
data() { data() {
...@@ -114,65 +169,112 @@ export default { ...@@ -114,65 +169,112 @@ export default {
itemTypes: ['办公家具', '办公设备', '日杂百货'], itemTypes: ['办公家具', '办公设备', '日杂百货'],
itemNames: [], itemNames: [],
materials: [] materials: []
}; }
},
watch: {
'form.itemType': {
handler(newItemType) {
this.form.itemName = '' // 清空物品名称
this.form.unit = '' // 清空单位
this.form.materialId = '' // 清空 materialId
this.updateItemNames()
},
immediate: true
},
'form.itemName': {
handler(newItemName) {
this.updateUnitBasedOnItemName()
},
immediate: true
}
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialApplyDraft')
if (draft) {
this.form = JSON.parse(draft)
this.$message.info('已加载草稿')
this.resetForm()
}
// 获取物品信息
this.fetchMaterials()
}, },
methods: { methods: {
submitForm() { submitForm() {
if (!this.form.materialId) { if (!this.form.materialId) {
this.$message.error('物品编号未找到，无法提交入库信息'); this.$message.error('物品编号未找到，无法提交入库信息')
return; return
} }
try { try {
addEntry(this.form).then(response => { addEntry(this.form)
.then(response => {
ElMessageBox.alert('提交成功', '提示', { ElMessageBox.alert('提交成功', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
// 调用 getMaterial 接口查询物品的 stock 信息 // 调用 getMaterial 接口查询物品的 stock 信息
getMaterial(this.form.materialId).then(materialResponse => { getMaterial(this.form.materialId)
.then(materialResponse => {
if (materialResponse && materialResponse.code === 200) { if (materialResponse && materialResponse.code === 200) {
console.log('Material Response:', materialResponse); // 添加调试信息 console.log('Material Response:', materialResponse) // 添加调试信息
// 获取原 stock 数量 // 获取原 stock 数量
let originalStock = materialResponse.data.stock || 0; let originalStock = materialResponse.data.stock || 0
// 计算新的 stock 数量 // 计算新的 stock 数量
let newStock = originalStock + this.form.entryQuantity; let newStock = originalStock + this.form.entryQuantity
// 调用 updateMaterial 接口更新 material 表中相应物品的 stock 字段 // 调用 updateMaterial 接口更新 material 表中相应物品的 stock 字段
updateMaterial({ materialId: this.form.materialId, stock: newStock }).then(updateResponse => { updateMaterial({
materialId: this.form.materialId,
stock: newStock
})
.then(updateResponse => {
if (updateResponse && updateResponse.code === 200) { if (updateResponse && updateResponse.code === 200) {
// 提交成功后清空草稿 // 提交成功后清空草稿
localStorage.removeItem('materialApplyDraft'); localStorage.removeItem('materialApplyDraft')
this.$message.info('草稿已清空'); this.$message.info('草稿已清空')
// 重置表单 // 重置表单
this.resetForm(); this.resetForm()
} else { } else {
this.$message.error('更新库存失败: ' + updateResponse.msg); this.$message.error(
'更新库存失败: ' + updateResponse.msg
)
} }
}).catch(updateError => { })
this.$message.error('更新库存失败: ' + updateError.message); .catch(updateError => {
}); this.$message.error(
'更新库存失败: ' + updateError.message
)
})
} else { } else {
this.$message.error('获取物品信息失败: ' + materialResponse.msg); this.$message.error(
'获取物品信息失败: ' + materialResponse.msg
)
} }
}).catch(materialError => { })
this.$message.error('获取物品信息失败: ' + materialError.message); .catch(materialError => {
}); this.$message.error(
'获取物品信息失败: ' + materialError.message
)
})
} }
}); })
}).catch(error => { })
.catch(error => {
ElMessageBox.alert('提交失败', '提示', { ElMessageBox.alert('提交失败', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => {} callback: action => {}
}); })
}); })
} catch (error) { } catch (error) {
ElMessageBox.alert('提交失败', '提示', { ElMessageBox.alert('提交失败', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => {} callback: action => {}
}); })
} }
}, resetForm() { },
resetForm() {
this.form = { this.form = {
entryDate: '', entryDate: '',
entryPerson: '', entryPerson: '',
...@@ -184,91 +286,66 @@ export default { ...@@ -184,91 +286,66 @@ export default {
approvalDate: '', approvalDate: '',
isQualified: '合格', isQualified: '合格',
materialId: '' // 清空 materialId materialId: '' // 清空 materialId
}; }
this.itemNames = []; this.itemNames = []
}, },
saveDraft() { saveDraft() {
// 保存草稿到本地存储 // 保存草稿到本地存储
localStorage.setItem('materialApplyDraft', JSON.stringify(this.form)); localStorage.setItem('materialApplyDraft', JSON.stringify(this.form))
this.$message.info('草稿已保存'); this.$message.info('草稿已保存')
}, },
fetchMaterials() { fetchMaterials() {
listMaterial().then(response => { listMaterial()
console.log('Response:', response); // 添加调试信息 .then(response => {
console.log('Response:', response) // 添加调试信息
if (response && response.code === 200) { if (response && response.code === 200) {
if (Array.isArray(response.rows)) { // 直接检查 response.rows if (Array.isArray(response.rows)) {
this.materials = response.rows; // 确保正确赋值 // 直接检查 response.rows
this.updateItemNames(); // 确保在材料加载后更新物品名称 this.materials = response.rows // 确保正确赋值
this.updateItemNames() // 确保在材料加载后更新物品名称
} else { } else {
this.$message.error('获取物品信息失败: 返回数据格式不正确'); this.$message.error('获取物品信息失败: 返回数据格式不正确')
} }
} else { } else {
this.$message.error('获取物品信息失败: ' + response.msg); this.$message.error('获取物品信息失败: ' + response.msg)
} }
}).catch(error => { })
this.$message.error('获取物品信息失败: ' + error.message); .catch(error => {
}); this.$message.error('获取物品信息失败: ' + error.message)
})
}, },
updateItemNames() { updateItemNames() {
if (this.form.itemType) { if (this.form.itemType) {
this.itemNames = this.materials this.itemNames = this.materials
.filter(material => material.itemType === this.form.itemType) .filter(material => material.itemType === this.form.itemType)
.map(material => material.itemName); .map(material => material.itemName)
} else { } else {
this.itemNames = []; this.itemNames = []
} }
}, },
onItemTypeChange(newItemType) { onItemTypeChange(newItemType) {
this.form.itemType = newItemType; this.form.itemType = newItemType
this.form.itemName = ''; // 清空物品名称 this.form.itemName = '' // 清空物品名称
this.form.unit = ''; // 清空单位 this.form.unit = '' // 清空单位
this.form.materialId = ''; // 清空 materialId this.form.materialId = '' // 清空 materialId
this.updateItemNames(); // 更新物品名称选项 this.updateItemNames() // 更新物品名称选项
}, },
updateUnitBasedOnItemName() { updateUnitBasedOnItemName() {
const selectedItem = this.materials.find(material => const selectedItem = this.materials.find(
material =>
material.itemType === this.form.itemType && material.itemType === this.form.itemType &&
material.itemName === this.form.itemName material.itemName === this.form.itemName
); )
if (selectedItem) { if (selectedItem) {
this.form.unit = selectedItem.unit; this.form.unit = selectedItem.unit
this.form.materialId = selectedItem.materialId; // 设置 materialId this.form.materialId = selectedItem.materialId // 设置 materialId
} else { } else {
this.form.unit = ''; this.form.unit = ''
this.form.materialId = ''; // 清空 materialId this.form.materialId = '' // 清空 materialId
} }
} }
},
watch: {
'form.itemType': {
handler(newItemType) {
this.form.itemName = ''; // 清空物品名称
this.form.unit = ''; // 清空单位
this.form.materialId = ''; // 清空 materialId
this.updateItemNames();
},
immediate: true
},
'form.itemName': {
handler(newItemName) {
this.updateUnitBasedOnItemName();
},
immediate: true
}
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialApplyDraft');
if (draft) {
this.form = JSON.parse(draft);
this.$message.info('已加载草稿');
this.resetForm();
} }
}
// 获取物品信息
this.fetchMaterials();
}
};
</script> </script>
<style scoped> <style scoped>
...@@ -297,7 +374,7 @@ export default { ...@@ -297,7 +374,7 @@ export default {
border-bottom: 4px solid; border-bottom: 4px solid;
border-color: rgb(0, 137, 127); border-color: rgb(0, 137, 127);
height: 2px; height: 2px;
opacity: .2; opacity: 0.2;
margin-top: 6px; /* 调整此值以适应布局 */ margin-top: 6px; /* 调整此值以适应布局 */
} }
......
src/views/material/materialReturn.vue
View file @ 474c077a
...@@ -9,23 +9,36 @@ ...@@ -9,23 +9,36 @@
</div> </div>
</div> </div>
<el-form :model="form" :rules="rules" ref="form" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">归还日期</label> <label class="input-label">归还日期</label>
<el-date-picker v-model="form.returnDate" type="date" placeholder="选择日期" style="width: 90%;"></el-date-picker> <el-date-picker
v-model="form.returnDate"
type="date"
placeholder="选择日期"
style="width: 90%"
></el-date-picker>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">归还人</label> <label class="input-label">归还人</label>
<el-input v-model="form.returner" placeholder="请输入归还人" style="width: 90%;"></el-input> <el-input
v-model="form.returner"
placeholder="请输入归还人"
style="width: 90%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">所在部门</label> <label class="input-label">所在部门</label>
<el-input v-model="form.department" placeholder="请输入所在部门" style="width: 90%;"></el-input> <el-input
v-model="form.department"
placeholder="请输入所在部门"
style="width: 90%"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
...@@ -39,42 +52,80 @@ ...@@ -39,42 +52,80 @@
</el-table-column> </el-table-column>
<el-table-column label="选择归还物品" width="170"> <el-table-column label="选择归还物品" width="170">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="openItemSelectDialog(scope.$index)">选择数据</el-button> <el-button
type="text"
@click="openItemSelectDialog(scope.$index)"
>选择数据</el-button
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="type" label="物品类型" width="170"> <el-table-column prop="type" label="物品类型" width="170">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.itemType" placeholder="请输入物品类型"></el-input> <el-input
v-model="scope.row.itemType"
placeholder="请输入物品类型"
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="物品名称" width="170"> <el-table-column prop="name" label="物品名称" width="170">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.itemName" placeholder="请输入物品名称"></el-input> <el-input
v-model="scope.row.itemName"
placeholder="请输入物品名称"
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="unit" label="单位" width="130"> <el-table-column prop="unit" label="单位" width="130">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.unit" placeholder="请输入单位"></el-input> <el-input
v-model="scope.row.unit"
placeholder="请输入单位"
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="pendingReturn" label="待归还数量" width="170"> <el-table-column
prop="pendingReturn"
label="待归还数量"
width="170"
>
<template #default="scope"> <template #default="scope">
<el-input v-model.number="scope.row.pendingReturn" placeholder="请输入待归还数量"></el-input> <el-input
v-model.number="scope.row.pendingReturn"
placeholder="请输入待归还数量"
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="returnQuantity" label="归还数量" width="170"> <el-table-column prop="returnQuantity" label="归还数量" width="170">
<template #default="scope"> <template #default="scope">
<el-input-number v-model.number="scope.row.returnQuantity" :min="0" :max="scope.row.pendingReturn" placeholder="请输入归还数量" style="width: 100%;"></el-input-number> <el-input-number
v-model.number="scope.row.returnQuantity"
:min="0"
:max="scope.row.pendingReturn"
placeholder="请输入归还数量"
style="width: 100%"
></el-input-number>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remainingReturn" label="剩余归还数量" width="180"> <el-table-column
prop="remainingReturn"
label="剩余归还数量"
width="180"
>
<template #default="scope"> <template #default="scope">
<el-input v-model.number="scope.row.remainingReturn" placeholder="自动计算" readonly></el-input> <el-input
v-model.number="scope.row.remainingReturn"
placeholder="自动计算"
readonly
></el-input>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-button type="text" @click="addItem" class="custom-text-button">+ 添加</el-button> <el-button type="text" class="custom-text-button" @click="addItem"
<el-button type="text" @click="pasteItem" class="custom-text-button">+ 粘贴新增</el-button> >+ 添加</el-button
>
<el-button type="text" class="custom-text-button" @click="pasteItem"
>+ 粘贴新增</el-button
>
</el-col> </el-col>
</el-row> </el-row>
<!-- 标题和分割线 --> <!-- 标题和分割线 -->
...@@ -89,7 +140,12 @@ ...@@ -89,7 +140,12 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<label class="input-label">审批时间</label> <label class="input-label">审批时间</label>
<el-date-picker v-model="form.approvalDate" type="date" placeholder="选择日期" style="width: 90%;"></el-date-picker> <el-date-picker
v-model="form.approvalDate"
type="date"
placeholder="选择日期"
style="width: 90%"
></el-date-picker>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
...@@ -97,8 +153,12 @@ ...@@ -97,8 +153,12 @@
<label class="input-label">审批结果</label> <label class="input-label">审批结果</label>
<el-radio-group v-model="form.approvalResult"> <el-radio-group v-model="form.approvalResult">
<div class="radio-item"> <div class="radio-item">
<el-radio label="通过" class="pass"><span class="radio-label">通过</span></el-radio><br> <el-radio label="通过" class="pass"
<el-radio label="不通过" class="unpass"><span class="radio-label">不通过</span></el-radio> ><span class="radio-label">通过</span></el-radio
><br />
<el-radio label="不通过" class="unpass"
><span class="radio-label">不通过</span></el-radio
>
</div> </div>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
...@@ -106,42 +166,81 @@ ...@@ -106,42 +166,81 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<label class="input-label">不通过原因</label> <label class="input-label">不通过原因</label>
<el-input type="textarea" v-model="form.approvalReason" placeholder="请输入原因" style="width: 70%;" class="custom-textarea"></el-input> <el-input
v-model="form.approvalReason"
type="textarea"
placeholder="请输入原因"
style="width: 70%"
class="custom-textarea"
></el-input>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<!-- 提交和保存草稿按钮 --> <!-- 提交和保存草稿按钮 -->
<div class="button-container"> <div class="button-container">
<el-button type="primary" @click="submitForm" style="margin-right: 20px;">提交</el-button> <el-button type="primary" style="margin-right: 20px" @click="submitForm"
>提交</el-button
>
<el-button @click="saveDraft">保存草稿</el-button> <el-button @click="saveDraft">保存草稿</el-button>
</div> </div>
<!-- 选择数据弹窗 --> <!-- 选择数据弹窗 -->
<el-dialog title="选择数据" v-model="showItemSelectDialog" width="50%"> <el-dialog v-model="showItemSelectDialog" title="选择数据" width="50%">
<div style="display: flex; justify-content: flex-end;"> <div style="display: flex; justify-content: flex-end">
<el-input v-model="searchQuery" placeholder="搜索数据" style="margin-bottom: 10px;width: 200px;"></el-input> <el-input
v-model="searchQuery"
placeholder="搜索数据"
style="margin-bottom: 10px; width: 200px"
></el-input>
</div> </div>
<el-table :data="filteredItems" border style="width: 100%" @selection-change="handleSelectionChange"> <el-table
:data="filteredItems"
border
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="applicant" label="申请人" width="150"></el-table-column> <el-table-column
<el-table-column prop="itemName" label="物品名称" width="150"></el-table-column> prop="applicant"
<el-table-column prop="itemType" label="物品类型" width="150"></el-table-column> label="申请人"
<el-table-column prop="itemUnit" label="单位" width="130"></el-table-column> width="150"
<el-table-column prop="applyQuantity" label="待归还数量" width="150"></el-table-column> ></el-table-column>
<el-table-column
prop="itemName"
label="物品名称"
width="150"
></el-table-column>
<el-table-column
prop="itemType"
label="物品类型"
width="150"
></el-table-column>
<el-table-column
prop="itemUnit"
label="单位"
width="130"
></el-table-column>
<el-table-column
prop="applyQuantity"
label="待归还数量"
width="150"
></el-table-column>
</el-table> </el-table>
<div slot="footer" class="dialog-footer"> <template #footer>
<div class="dialog-footer">
<el-button @click="onCloseSelectDialog">取消</el-button> <el-button @click="onCloseSelectDialog">取消</el-button>
<el-button type="primary" @click="confirmSelection">确定</el-button> <el-button type="primary" @click="confirmSelection">确定</el-button>
</div> </div>
</template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { addReturn, updateReturn } from '@/api/material/return.js'; import { addReturn, updateReturn } from '@/api/material/return.js'
import { listApply } from '@/api/material/apply.js'; import { listApply } from '@/api/material/apply.js'
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus'
export default { export default {
data() { data() {
...@@ -151,7 +250,15 @@ export default { ...@@ -151,7 +250,15 @@ export default {
returner: '', returner: '',
department: '', department: '',
items: [ items: [
{ item: '', itemType: '', itemName: '', unit: '', pendingReturn: 0, returnQuantity: 0, remainingReturn: 0 } {
item: '',
itemType: '',
itemName: '',
unit: '',
pendingReturn: 0,
returnQuantity: 0,
remainingReturn: 0
}
], ],
approvalResult: '通过', approvalResult: '通过',
approvalReason: '' approvalReason: ''
...@@ -177,7 +284,39 @@ export default { ...@@ -177,7 +284,39 @@ export default {
{ required: true, message: '请选择审批结果', trigger: 'change' } { required: true, message: '请选择审批结果', trigger: 'change' }
] ]
} }
}; }
},
computed: {
filteredItems() {
return this.itemsList.filter(
item =>
item.applicant.includes(this.searchQuery) ||
item.itemName.includes(this.searchQuery) ||
item.itemType.includes(this.searchQuery) ||
item.itemUnit.includes(this.searchQuery)
)
}
},
watch: {
'form.items': {
handler(newItems) {
newItems.forEach((item, index) => {
this.updateRemaining(index)
})
},
deep: true
}
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialReturnDraft')
if (draft) {
this.form = JSON.parse(draft)
this.$message.info('已加载草稿')
}
// 调用 listApply 接口获取领用申请数据
this.fetchItems()
}, },
methods: { methods: {
addItem() { addItem() {
...@@ -189,11 +328,11 @@ export default { ...@@ -189,11 +328,11 @@ export default {
pendingReturn: 0, pendingReturn: 0,
returnQuantity: 0, returnQuantity: 0,
remainingReturn: 0 remainingReturn: 0
}); })
}, },
pasteItem() { pasteItem() {
// 实现粘贴新增逻辑 // 实现粘贴新增逻辑
this.showPasteDialog = true; this.showPasteDialog = true
}, },
submitForm() { submitForm() {
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
...@@ -201,57 +340,61 @@ export default { ...@@ -201,57 +340,61 @@ export default {
const data = { const data = {
...this.form, ...this.form,
items: JSON.stringify(this.form.items) items: JSON.stringify(this.form.items)
}; }
if (this.editingId) { if (this.editingId) {
// 更新现有归还申请 // 更新现有归还申请
updateReturn(data).then(response => { updateReturn(data)
.then(response => {
ElMessageBox.alert('归还申请更新成功', '提示', { ElMessageBox.alert('归还申请更新成功', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
this.$message.success('归还申请更新成功'); this.$message.success('归还申请更新成功')
this.resetForm(); this.resetForm()
} }
}); })
}).catch(error => { })
.catch(error => {
ElMessageBox.alert('归还申请更新失败', '提示', { ElMessageBox.alert('归还申请更新失败', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
this.$message.error('归还申请更新失败: ' + error.message); this.$message.error('归还申请更新失败: ' + error.message)
} }
}); })
}); })
} else { } else {
// 新增归还申请 // 新增归还申请
addReturn(data).then(response => { addReturn(data)
.then(response => {
ElMessageBox.alert('归还申请提交成功', '提示', { ElMessageBox.alert('归还申请提交成功', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
this.$message.success('归还申请提交成功'); this.$message.success('归还申请提交成功')
this.resetForm(); this.resetForm()
} }
}); })
}).catch(error => { })
.catch(error => {
ElMessageBox.alert('归还申请提交失败', '提示', { ElMessageBox.alert('归还申请提交失败', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
this.$message.error('归还申请提交失败: ' + error.message); this.$message.error('归还申请提交失败: ' + error.message)
} }
}); })
}); })
} }
} else { } else {
this.$message.error('请检查表单填写是否正确'); this.$message.error('请检查表单填写是否正确')
} }
}); })
}, },
saveDraft() { saveDraft() {
// 保存草稿到本地存储 // 保存草稿到本地存储
localStorage.setItem('materialReturnDraft', JSON.stringify(this.form)); localStorage.setItem('materialReturnDraft', JSON.stringify(this.form))
this.$message.info('草稿已保存'); this.$message.info('草稿已保存')
}, },
updateRemaining(index) { updateRemaining(index) {
const item = this.form.items[index]; const item = this.form.items[index]
item.remainingReturn = item.pendingReturn - item.returnQuantity; item.remainingReturn = item.pendingReturn - item.returnQuantity
}, },
resetForm() { resetForm() {
this.form = { this.form = {
...@@ -259,56 +402,66 @@ export default { ...@@ -259,56 +402,66 @@ export default {
returner: '', returner: '',
department: '', department: '',
items: [ items: [
{ item: '', itemType: '', itemName: '', unit: '', pendingReturn: 0, returnQuantity: 0, remainingReturn: 0 } {
item: '',
itemType: '',
itemName: '',
unit: '',
pendingReturn: 0,
returnQuantity: 0,
remainingReturn: 0
}
], ],
approvalResult: '通过', approvalResult: '通过',
approvalReason: '' approvalReason: ''
}; }
this.editingId = null; this.editingId = null
this.$refs.form.resetFields(); this.$refs.form.resetFields()
}, },
openItemSelectDialog(index) { openItemSelectDialog(index) {
this.selectedRowIndex = index; this.selectedRowIndex = index
// 调用 listApply 接口获取领用申请数据 // 调用 listApply 接口获取领用申请数据
this.fetchItems(); this.fetchItems()
this.showItemSelectDialog = true; this.showItemSelectDialog = true
}, },
fetchItems() { fetchItems() {
listApply().then(response => { listApply()
.then(response => {
if (response.code === 200) { if (response.code === 200) {
// 解析 items 字段 // 解析 items 字段
this.itemsList = response.rows.flatMap(row => { this.itemsList = response.rows.flatMap(row => {
try { try {
const items = JSON.parse(row.items); const items = JSON.parse(row.items)
return items.map(item => ({ return items.map(item => ({
applicant: row.applicant, applicant: row.applicant,
itemName: item.itemName, itemName: item.itemName,
itemType: item.itemType, itemType: item.itemType,
itemUnit: item.unit, itemUnit: item.unit,
applyQuantity: item.applyQuantity // 假设 applyRemaining 是待归还数量 applyQuantity: item.applyQuantity // 假设 applyRemaining 是待归还数量
})); }))
} catch (error) { } catch (error) {
console.error('解析 items 字段失败:', error); console.error('解析 items 字段失败:', error)
return []; return []
} }
}); })
} else { } else {
this.$message.error('获取领用申请数据失败: ' + response.msg); this.$message.error('获取领用申请数据失败: ' + response.msg)
} }
}).catch(error => { })
this.$message.error('获取领用申请数据失败: ' + error.message); .catch(error => {
}); this.$message.error('获取领用申请数据失败: ' + error.message)
})
}, },
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.selectedItems = selection; this.selectedItems = selection
}, },
onCloseSelectDialog() { onCloseSelectDialog() {
this.showItemSelectDialog = false; this.showItemSelectDialog = false
}, },
confirmSelection() { confirmSelection() {
if (this.selectedItems.length === 0) { if (this.selectedItems.length === 0) {
this.$message.warning('请选择要添加的数据'); this.$message.warning('请选择要添加的数据')
return; return
} }
// 将选中的数据填充到主页面的表格中 // 将选中的数据填充到主页面的表格中
...@@ -321,44 +474,13 @@ export default { ...@@ -321,44 +474,13 @@ export default {
pendingReturn: selectedItem.applyQuantity, pendingReturn: selectedItem.applyQuantity,
returnQuantity: 0, returnQuantity: 0,
remainingReturn: selectedItem.applyQuantity remainingReturn: selectedItem.applyQuantity
};
});
this.onCloseSelectDialog();
}
},
created() {
// 加载草稿
const draft = localStorage.getItem('materialReturnDraft');
if (draft) {
this.form = JSON.parse(draft);
this.$message.info('已加载草稿');
} }
})
// 调用 listApply 接口获取领用申请数据 this.onCloseSelectDialog()
this.fetchItems();
},
watch: {
'form.items': {
handler(newItems) {
newItems.forEach((item, index) => {
this.updateRemaining(index);
});
},
deep: true
}
},
computed: {
filteredItems() {
return this.itemsList.filter(item =>
item.applicant.includes(this.searchQuery) ||
item.itemName.includes(this.searchQuery) ||
item.itemType.includes(this.searchQuery) ||
item.itemUnit.includes(this.searchQuery)
);
} }
} }
}; }
</script> </script>
<style scoped> <style scoped>
...@@ -388,7 +510,7 @@ export default { ...@@ -388,7 +510,7 @@ export default {
border-bottom: 4px solid; border-bottom: 4px solid;
border-color: rgb(0, 137, 127); border-color: rgb(0, 137, 127);
height: 2px; height: 2px;
opacity: .2; opacity: 0.2;
margin-top: 6px; /* 调整此值以适应布局 */ margin-top: 6px; /* 调整此值以适应布局 */
} }
......
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