Skip to content

J
jilinzhongdianrenqun-web
Commit 78fbc068 by zhangtw
Options

申领页面调整

parent c4f1f9f2
正在显示 包含 211 行增加 和 12 行删除
src/api/key-dm-inventory.js
......@@ -18,6 +18,15 @@ export const getPendingBorrowList = (param) => {
})
}
// 获取历史列表
export const getHistoryBorrowList = (param) => {
return axios.request({
url: '/api/keyDmBorrow/selectHistoryList',
method: 'post',
data: param
})
}
// 保存申请（含明细）
export const saveBorrowApplication = (param) => {
return axios.request({
......
src/view/key-person/key_dm_inventory/index.vue
......@@ -4,12 +4,44 @@
<TabPane label="办公用品申领" name="apply">
<div class="search-div">
<Row type="flex" :gutter="16">
<Col span="10">
<Input v-model="filters.apply.applicant_name" placeholder="姓名/工号" style="width:60%" />
<Button type="primary" class="mr10" @click="handleSearch('apply')">搜索</Button>
<Button @click="handleReset('apply')">重置</Button>
<Col span="20">
<div class="search-form">
<Form :inline="true" :model="filters.apply" class="form-inline">
<FormItem label="申请单号：" class="form-item">
<Input
v-model="filters.apply.application_no"
placeholder="请输入申请单号"
class="form-input"
/>
</FormItem>
<FormItem label="申请人：" class="form-item">
<Input
v-model="filters.apply.applicant_name"
placeholder="请输入申请人"
class="form-input"
/>
</FormItem>
<FormItem label="审批状态：" class="form-item">
<Select
v-model="filters.apply.approval_status"
placeholder="请选择审批状态"
class="form-input"
>
<Option :value= "0">待提交</Option>
<Option :value= "1">审核中</Option>
<Option :value= "9">审核通过</Option>
<Option :value= "-1">驳回</Option>
</Select>
</FormItem>
<FormItem class="form-item-actions">
<Button type="primary" @click="handleSearch('apply')">搜索</Button>
<Button @click="handleReset('apply')" style="margin-left: 8px;">重置</Button>
</FormItem>
</Form>
</div>
</Col>
<Col span="14" class="text-right">
<!-- 右侧操作按钮区：固定居右 -->
<Col span="4" class="action-col">
<Button type="success" @click="openApplyModal">申请</Button>
</Col>
</Row>
......@@ -40,6 +72,47 @@
</TabPane>
<TabPane label="办公用品审核历史查询" name="history">
<div class="search-div">
<Row type="flex" :gutter="16">
<Col span="24">
<div class="search-form">
<Form :inline="true" :model="filters.history" class="form-inline">
<FormItem label="申请单号：" class="form-item">
<Input
v-model="filters.history.application_no"
placeholder="请输入申请单号"
class="form-input"
/>
</FormItem>
<FormItem label="申请人：" class="form-item">
<Input
v-model="filters.history.applicant_name"
placeholder="请输入申请人"
class="form-input"
/>
</FormItem>
<FormItem label="审批状态：" class="form-item">
<Select
v-model="filters.history.approval_status"
placeholder="请选择审批状态"
class="form-input"
>
<Option :value= "0">待提交</Option>
<Option :value= "1">审核中</Option>
<Option :value= "9">审核通过</Option>
<Option :value= "-1">驳回</Option>
</Select>
</FormItem>
<FormItem class="form-item-actions">
<Button type="primary" @click="handleSearch('history')">搜索</Button>
<Button @click="handleReset('history')" style="margin-left: 8px;">重置</Button>
</FormItem>
</Form>
</div>
</Col>
</Row>
</div>
<Table :data="tables.history" :loading="loading.history" :columns="historyColumns" border>
<template slot="action" slot-scope="{ row }">
<Button size="small" @click="openDetail(row)">详细</Button>
......@@ -63,7 +136,13 @@
<Input v-model="applyModal.form.borrow_purpose" />
</FormItem>
<FormItem label="预计归还日期">
<DatePicker v-model="applyModal.form.expected_return_date" type="date" />
<DatePicker
v-model="applyModal.form.expected_return_date"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="请选择预计归还日期"
/>
</FormItem>
<h4>申请明细</h4>
......@@ -107,6 +186,7 @@
<div v-else>
<Row :gutter="16"><Col span="12"><p><strong>申请人：</strong>{{ detailModal.data.applicant_name }}</p></Col><Col span="12"><p><strong>部门：</strong>{{ detailModal.data.department_name }}</p></Col></Row>
<Row class="mt8"><Col span="24"><p><strong>领用用途：</strong>{{ detailModal.data.borrow_purpose }}</p></Col></Row>
<Row class="mt8"><Col span="24"><p><strong>预计归还日期：</strong>{{ formatDate(detailModal.data.expected_return_date) }}</p></Col></Row>
<Row class="mt8"><Col span="24"><h4>明细</h4></Col></Row>
<Table :data="detailModal.details" :columns="detailDetailColumns" size="small" border />
<Row class="mt8"><Col span="24"><h4>审批记录</h4></Col></Row>
......@@ -135,8 +215,13 @@ export default {
components: { MaterialSelector },
data () {
return {
// 审批状态映射字典
approvalStatusMap: { '0': '待提交', '1': '审核中', '9': '审核通过', '-1': '驳回' },
activeTab: 'apply',
filters: { apply: { applicant_name: '' } },
filters: {
apply: { application_no: '', applicant_name: '', approval_status: null },
history: { application_no: '', applicant_name: '', approval_status: null }
},
tables: { apply: [], pending: [], history: [] },
pagers: { apply: { pageNo: 1, pageSize: 10, totalRecord: 0 }, pending: { pageNo: 1, pageSize: 10, totalRecord: 0 }, history: { pageNo: 1, pageSize: 10, totalRecord: 0 } },
loading: { apply: false, pending: false, history: false },
......@@ -145,10 +230,17 @@ export default {
{ title: '申请单号', key: 'application_no', align: 'center' },
{ title: '申请人', key: 'applicant_name', align: 'center' },
{ title: '部门', key: 'department_name', align: 'center' },
{ title: '请假类型', key: 'borrow_purpose', align: 'center' },
{ title: '审评用途', key: 'borrow_purpose', align: 'center' },
{ title: '起止时间', key: 'start_time', align: 'center' },
{ title: '时长', key: 'duration', align: 'center' },
{ title: '状态', key: 'approval_status', align: 'center' },
{
title: '状态',
key: 'approval_status',
align: 'center',
render: (h, { row }) => {
return h('span', this.approvalStatusMap[row.approval_status + ''] || row.approval_status || '-')
}
},
{ title: '操作', slot: 'action', align: 'center', width: 320 }
],
pendingColumns: [
......@@ -163,7 +255,14 @@ export default {
{ type: 'index', title: '序号', width: 60, align: 'center' },
{ title: '申请单号', key: 'application_no', align: 'center' },
{ title: '申请人', key: 'applicant_name', align: 'center' },
{ title: '状态', key: 'approval_status', align: 'center' },
{
title: '状态',
key: 'approval_status',
align: 'center',
render: (h, { row }) => {
return h('span', this.approvalStatusMap[row.approval_status + ''] || row.approval_status || '-')
}
},
{ title: '审批完成时间', key: 'approval_complete_time', align: 'center' },
{ title: '操作', slot: 'action', width: 100, align: 'center' }
],
......@@ -205,6 +304,12 @@ export default {
},
created () { this.fetchList('apply') },
methods: {
// 转换时间戳为yyyy-MM-dd
formatDate (timestamp) {
if (!timestamp || isNaN(Number(timestamp))) return '未设置'
const d = new Date(Number(timestamp))
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
},
handleTabChange (name) {
this.activeTab = name
if (name === 'pending') this.fetchList('pending')
......@@ -214,7 +319,19 @@ export default {
const apiMap = { apply: getBorrowList, pending: getPendingBorrowList, history: getBorrowList }
const api = apiMap[tab]; if (!api) return
this.loading[tab] = true
const payload = Object.assign({}, this.pagers[tab] || {}, { params: this.filters[tab] || {} })
// 清理空值，防止参数传递问题
const cleanParams = (obj) => {
const cleaned = {}
for (let key in obj) {
const value = obj[key]
if (value !== null && value !== undefined && value !== '') {
cleaned[key] = value
}
}
return cleaned
}
const payload = Object.assign({}, this.pagers[tab] || {}, { params: cleanParams(this.filters[tab] || {}) })
console.log(payload)
api(payload).then(ret => {
if (ret.data && ret.data.errcode === 0) {
const data = ret.data.data || {}
......@@ -223,7 +340,10 @@ export default {
} else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
}).finally(() => { this.loading[tab] = false })
},
handleSearch (tab) { (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab) },
handleSearch (tab) {
(this.pagers[tab] || {}).pageNo = 1
this.fetchList(tab)
},
handleReset (tab) { this.filters[tab] = {}; (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab) },
pageChange (tab, pageNo) { (this.pagers[tab] || {}).pageNo = pageNo; this.fetchList(tab) },
sizeChange (tab, size) { (this.pagers[tab] || {}).pageSize = size; (this.pagers[tab] || {}).pageNo = 1; this.fetchList(tab) },
......@@ -235,8 +355,16 @@ export default {
this.applyModal.visible = true
},
openEdit (row) {
console.log(row)
this.applyModal.isEdit = true
this.applyModal.form = Object.assign({}, row)
// 关键：时间戳转 yyyy-MM-dd 字符串
if (this.applyModal.form.expected_return_date) {
this.applyModal.form.expected_return_date = this.formatDate(this.applyModal.form.expected_return_date)
} else {
// 空值兜底
this.applyModal.form.expected_return_date = ''
}
// load details from backend when open (simplified)
getBorrowById({ id: row.id }).then(ret => {
if (ret.data && ret.data.errcode === 0) {
......@@ -346,4 +474,66 @@ export default {
.text-right { text-align: right; }
.page_style { margin-top: 12px; text-align: right; }
.mt8 { margin-top: 8px; }
/* 搜索区域外层盒：统一间距+背景 */
.search-container {
padding: 16px;
background: #fff;
border-radius: 4px;
margin-bottom: 16px;
}
/* 行容器：垂直居中+间距 */
.search-row {
margin: 0 !important;
}
/* 内联表单：消除默认间距 */
.form-inline {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
}
/* 表单项：统一间距+对齐 */
.form-item {
margin: 0 8px 0 0 !important;
display: flex;
align-items: center;
}
/* 输入框/下拉框：统一宽度 */
.form-input {
width: 180px !important;
}
/* 按钮组：单独样式 */
.form-item-actions {
margin-left: 16px !important;
}
/* 右侧操作列：居右+内边距 */
.action-col {
text-align: right;
padding-right: 16px;
}
/* 响应式适配：小屏幕自动换行 */
@media (max-width: 768px) {
.form-inline {
flex-direction: column;
align-items: flex-start;
}
.form-item {
margin: 8px 0 !important;
width: 100%;
}
.form-input {
width: 100% !important;
}
.action-col {
text-align: left;
padding: 16px 0 0 0;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论