commit
This commit is contained in:
+130
-40
@@ -18,9 +18,9 @@ layout("/layouts/platform.html"){
|
||||
value-format="yyyy">
|
||||
</el-date-picker>
|
||||
</search-item>
|
||||
<search-item label="所属季度">
|
||||
<search-item label="分配项目">
|
||||
<dict-select clearable code="OUTLAY_QUARTERLY"
|
||||
placeholder="请选择所属季度"
|
||||
placeholder="请选择分配项目"
|
||||
v-model="pageForm.quarterly"></dict-select>
|
||||
</search-item>
|
||||
<search-item label="所属工会">
|
||||
@@ -42,10 +42,13 @@ layout("/layouts/platform.html"){
|
||||
<table-tool label="预算分配">
|
||||
<el-button @click="showBatchAllocateDialog" size="small" type="primary" :loading="formLoading">一键分配
|
||||
</el-button>
|
||||
<el-button @click="doAllocateRecord" size="small" type="primary" :loading="formLoading">季度记录生成
|
||||
<el-button @click="showAwardAllocateDialog" size="small" type="primary" :loading="formLoading">
|
||||
新增评优奖励
|
||||
</el-button>
|
||||
<el-button @click="doAllocateRecord" size="small" type="primary" :loading="formLoading">分配记录生成
|
||||
</el-button>
|
||||
|
||||
<el-button @click="deleteAllocateRecord" size="small" type="danger" :loading="formLoading">重置季度记录
|
||||
<el-button @click="deleteAllocateRecord" size="small" type="danger" :loading="formLoading">重置分配记录
|
||||
</el-button>
|
||||
</table-tool>
|
||||
<el-table :data="tableData" style="width: 100%" row-key="id"
|
||||
@@ -118,17 +121,15 @@ layout("/layouts/platform.html"){
|
||||
</el-form-item>
|
||||
<el-form-item label="上传文件">
|
||||
<el-upload
|
||||
name="file"
|
||||
class="upload-demo"
|
||||
ref="importUploadRef"
|
||||
:limit="1"
|
||||
action="/platform/outlay/outlayManage/unionAllocate/readImportExcel"
|
||||
:on-success="onImportSuccess"
|
||||
:on-remove="onImportRemove"
|
||||
:before-upload="beforeImportUpload"
|
||||
:file-list="importFileList"
|
||||
drag>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
|
||||
:file-list="importFileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="导入预览" v-if="batchAllocateForm.importPreviewList.length > 0">
|
||||
@@ -152,6 +153,41 @@ layout("/layouts/platform.html"){
|
||||
<el-button type="primary" @click="doBatchAllocate" :loading="formLoading">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="新增评优奖励" :visible.sync="awardAllocateDialogVisible" width="520px">
|
||||
<el-form :model="awardAllocateForm" label-width="120px">
|
||||
<el-form-item label="年度">
|
||||
<el-date-picker
|
||||
placeholder="选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="awardAllocateForm.year"
|
||||
:clearable="false"
|
||||
value-format="yyyy">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属工会">
|
||||
<el-select placeholder="请选择所属工会" v-model="awardAllocateForm.unionId"
|
||||
style="width: 100%;"
|
||||
clearable
|
||||
filterable>
|
||||
<el-option v-for="item in unionList"
|
||||
:label="item.name"
|
||||
:key="item.id"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="评优奖励金额">
|
||||
<el-input-number v-model="awardAllocateForm.allocateMoney" :min="0" :precision="2"
|
||||
style="width: 100%" placeholder="请输入评优奖励金额">
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeAwardAllocateDialog">取 消</el-button>
|
||||
<el-button type="primary" @click="doAddAwardAllocate" :loading="formLoading">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</guava>
|
||||
</div>
|
||||
@@ -170,48 +206,62 @@ layout("/layouts/platform.html"){
|
||||
unionList: [],
|
||||
tableColumns: [
|
||||
{prop: 'year', label: '年度'},
|
||||
{prop: 'quarterly', label: '季度'},
|
||||
{prop: 'quarterly', label: '分配项目'},
|
||||
{prop: 'unionName', label: '工会名称'},
|
||||
{prop: 'allocateHeadMoney', label: '分配前额度'},
|
||||
{prop: 'allocateMoney', label: '分配额度'},
|
||||
],
|
||||
quarterlyList: [],
|
||||
periodList: [],
|
||||
batchAllocateDialogVisible: false,
|
||||
batchAllocateForm: {
|
||||
allocateMode: "uniform",
|
||||
allocateMoney: 0,
|
||||
importPreviewList: []
|
||||
},
|
||||
importFileList: []
|
||||
importFileList: [],
|
||||
awardAllocateDialogVisible: false,
|
||||
awardAllocateForm: {
|
||||
year: this.$moment().format("YYYY"),
|
||||
unionId: "",
|
||||
allocateMoney: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 确认提示文案优先展示页面当前筛选季度。
|
||||
* 未选择季度时再回退到系统当前自然季度，避免提示文案与用户当前查看条件不一致。
|
||||
* 确认提示文案优先展示页面当前筛选的分配项目名称。
|
||||
* 未选择分配项目时再回退到当前会费项目，避免提示文案与用户当前查看条件不一致。
|
||||
*/
|
||||
getPromptQuarter() {
|
||||
return this.pageForm.quarterly || this.$moment().quarter()
|
||||
getPromptProjectName() {
|
||||
return this.getProjectName(this.pageForm.quarterly || this.getCurrentFeeProject())
|
||||
},
|
||||
/**
|
||||
* 季度记录生成、重置记录都要按页面当前筛选的年度和季度执行。
|
||||
* 这里统一封装请求参数，避免前后端再次出现“提示季度”和“实际执行季度”不一致的问题。
|
||||
* 分配记录生成、重置记录都要按页面当前筛选的年度和分配项目执行。
|
||||
* quarterly 参数承载 OUTLAY_QUARTERLY 字典编码，例如 1-4月会费、5-8月会费、9-12月会费、评优奖励。
|
||||
*/
|
||||
getCurrentQuarterParams() {
|
||||
getCurrentProjectParams() {
|
||||
return {
|
||||
quarterly: this.pageForm.quarterly || this.$moment().quarter(),
|
||||
quarterly: this.pageForm.quarterly || this.getCurrentFeeProject(),
|
||||
year: this.pageForm.year
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 生成、重置、一键分配都只允许操作当前自然季度。
|
||||
* 这里统一做前端入口校验，避免同类判断分散在多个按钮方法里难维护。
|
||||
* 生成、重置、一键分配都只允许操作当前会费项目。
|
||||
* 当前会费项目按月份划分：1-4月会费、5-8月会费、9-12月会费。
|
||||
*/
|
||||
validateCurrentQuarterAction(actionName) {
|
||||
const currentQuarter = this.$moment().quarter()
|
||||
const selectedQuarter = Number(this.getCurrentQuarterParams().quarterly)
|
||||
if (selectedQuarter !== currentQuarter) {
|
||||
this.$message.warning('当前仅允许操作第' + currentQuarter + '季度' + actionName + '，请切换后再操作')
|
||||
getCurrentFeeProject() {
|
||||
return Math.floor(this.$moment().month() / 4) + 1
|
||||
},
|
||||
getProjectName(code) {
|
||||
const options = this.dict.type.OUTLAY_QUARTERLY || []
|
||||
const project = options.find((item) => String(item.code || item.value || item.dictValue) === String(code))
|
||||
return project ? (project.label || project.name || project.dictLabel || code) : code
|
||||
},
|
||||
validateCurrentProjectAction(actionName) {
|
||||
const currentProject = this.getCurrentFeeProject()
|
||||
const selectedProject = Number(this.getCurrentProjectParams().quarterly)
|
||||
if (selectedProject !== currentProject) {
|
||||
this.$message.warning('当前仅允许操作【' + this.getProjectName(currentProject) + '】' + actionName + '，请切换后再操作')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
@@ -237,7 +287,7 @@ layout("/layouts/platform.html"){
|
||||
})
|
||||
},
|
||||
deleteAllocateRecord() {
|
||||
if (!this.validateCurrentQuarterAction('记录重置')) {
|
||||
if (!this.validateCurrentProjectAction('记录重置')) {
|
||||
return
|
||||
}
|
||||
// 重置动作以当前列表是否已有记录为前置条件，避免用户在空列表场景下误操作。
|
||||
@@ -245,13 +295,13 @@ layout("/layouts/platform.html"){
|
||||
this.$message.warning('当前列表无可重置记录')
|
||||
return
|
||||
}
|
||||
this.$confirm('确定要重置【第' + this.getPromptQuarter() + '季度】的预算记录吗？', '提示', {
|
||||
this.$confirm('确定要重置【' + this.getPromptProjectName() + '】的预算记录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.formLoading = true
|
||||
this.$axios.post("/platform/outlay/outlayManage/unionAllocate/deleteAllocateRecord", this.getCurrentQuarterParams()).then((resp) => {
|
||||
this.$axios.post("/platform/outlay/outlayManage/unionAllocate/deleteAllocateRecord", this.getCurrentProjectParams()).then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg)
|
||||
this.doSearch()
|
||||
@@ -262,16 +312,16 @@ layout("/layouts/platform.html"){
|
||||
})
|
||||
},
|
||||
doAllocateRecord() {
|
||||
if (!this.validateCurrentQuarterAction('记录生成')) {
|
||||
if (!this.validateCurrentProjectAction('记录生成')) {
|
||||
return
|
||||
}
|
||||
this.$confirm('确定要生成【第' + this.getPromptQuarter() + '季度】的预算记录吗？', '提示', {
|
||||
this.$confirm('确定要生成【' + this.getPromptProjectName() + '】的预算记录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.formLoading = true
|
||||
this.$axios.post("/platform/outlay/outlayManage/unionAllocate/doAllocateRecord", this.getCurrentQuarterParams()).then((resp) => {
|
||||
this.$axios.post("/platform/outlay/outlayManage/unionAllocate/doAllocateRecord", this.getCurrentProjectParams()).then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg)
|
||||
this.doSearch()
|
||||
@@ -282,14 +332,14 @@ layout("/layouts/platform.html"){
|
||||
})
|
||||
},
|
||||
showBatchAllocateDialog() {
|
||||
if (!this.validateCurrentQuarterAction('一键分配')) {
|
||||
if (!this.validateCurrentProjectAction('一键分配')) {
|
||||
return
|
||||
}
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message.warning('当前没有可分配的工会记录，请先生成季度记录')
|
||||
this.$message.warning('当前没有可分配的工会记录，请先生成分配记录')
|
||||
return
|
||||
}
|
||||
const currentParams = this.getCurrentQuarterParams()
|
||||
const currentParams = this.getCurrentProjectParams()
|
||||
const openDialog = () => {
|
||||
this.resetBatchAllocateForm()
|
||||
this.batchAllocateDialogVisible = true
|
||||
@@ -302,7 +352,7 @@ layout("/layouts/platform.html"){
|
||||
return
|
||||
}
|
||||
if (resp.data) {
|
||||
this.$confirm('温馨提示：当前季度已分配过额度，再次分配将覆盖本季度原有分配结果，是否继续？', '温馨提示', {
|
||||
this.$confirm('温馨提示：当前分配项目已分配过额度，再次分配将覆盖本项目原有分配结果，是否继续？', '温馨提示', {
|
||||
confirmButtonText: '继续',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
@@ -323,6 +373,46 @@ layout("/layouts/platform.html"){
|
||||
}
|
||||
this.importFileList = []
|
||||
},
|
||||
showAwardAllocateDialog() {
|
||||
this.$set(this.awardAllocateForm, "year", this.pageForm.year)
|
||||
this.$set(this.awardAllocateForm, "unionId", this.pageForm.unionId || "")
|
||||
this.$set(this.awardAllocateForm, "allocateMoney", 0)
|
||||
this.$set(this, "awardAllocateDialogVisible", true)
|
||||
},
|
||||
closeAwardAllocateDialog() {
|
||||
this.$set(this, "awardAllocateDialogVisible", false)
|
||||
},
|
||||
doAddAwardAllocate() {
|
||||
if (!this.awardAllocateForm.year) {
|
||||
this.$message.warning("请选择年度")
|
||||
return
|
||||
}
|
||||
if (!this.awardAllocateForm.unionId) {
|
||||
this.$message.warning("请选择所属工会")
|
||||
return
|
||||
}
|
||||
if (!this.awardAllocateForm.allocateMoney || this.awardAllocateForm.allocateMoney <= 0) {
|
||||
this.$message.warning("请输入有效的评优奖励金额")
|
||||
return
|
||||
}
|
||||
this.formLoading = true
|
||||
this.$axios.post("/platform/outlay/outlayManage/unionAllocate/doAddAwardAllocate", {
|
||||
year: this.awardAllocateForm.year,
|
||||
unionId: this.awardAllocateForm.unionId,
|
||||
allocateMoney: this.awardAllocateForm.allocateMoney
|
||||
}).then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg)
|
||||
this.closeAwardAllocateDialog()
|
||||
this.$set(this.pageForm, "year", this.awardAllocateForm.year)
|
||||
this.$set(this.pageForm, "quarterly", "4")
|
||||
this.$set(this.pageForm, "unionId", this.awardAllocateForm.unionId)
|
||||
this.doSearch()
|
||||
}
|
||||
}).finally(() => {
|
||||
this.formLoading = false
|
||||
})
|
||||
},
|
||||
downloadImportTemplate() {
|
||||
this.$downLoad("/platform/outlay/outlayManage/unionAllocate/downloadImportTemplate")
|
||||
},
|
||||
@@ -349,7 +439,7 @@ layout("/layouts/platform.html"){
|
||||
this.$set(this.batchAllocateForm, "importPreviewList", [])
|
||||
},
|
||||
doBatchAllocate() {
|
||||
const currentParams = this.getCurrentQuarterParams()
|
||||
const currentParams = this.getCurrentProjectParams()
|
||||
if (this.batchAllocateForm.allocateMode === "uniform") {
|
||||
if (!this.batchAllocateForm.allocateMoney || this.batchAllocateForm.allocateMoney <= 0) {
|
||||
this.$message.warning('请输入有效的分配额度')
|
||||
@@ -401,8 +491,8 @@ layout("/layouts/platform.html"){
|
||||
this.unionList = data
|
||||
})
|
||||
this.$businessTool.getDictOptions("OUTLAY_QUARTERLY").then((data) => {
|
||||
let quarter = this.$moment().quarter();
|
||||
this.$set(this.pageForm, "quarterly", data[quarter - 1].code)
|
||||
let project = this.getCurrentFeeProject();
|
||||
this.$set(this.pageForm, "quarterly", data[project - 1].code)
|
||||
this.pageData()
|
||||
})
|
||||
|
||||
|
||||
+163
@@ -0,0 +1,163 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
|
||||
<div class="platform" id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="年度">
|
||||
<el-date-picker
|
||||
@change="doSearch"
|
||||
placeholder="选择年度"
|
||||
style="width: 100%" type="year"
|
||||
v-model="pageForm.year"
|
||||
:clearable="false"
|
||||
value-format="yyyy">
|
||||
</el-date-picker>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属工会" v-if="$auth.hasRoleOr(['SYSADMIN', 'SCHOOL_UNION_ADMIN'])">
|
||||
<el-select placeholder="请选择所属工会" v-model="pageForm.unionId"
|
||||
style="width: 100%;"
|
||||
clearable
|
||||
@change="doSearch"
|
||||
filterable>
|
||||
<el-option v-for="item in unions"
|
||||
:label="item.name"
|
||||
:key="item.id"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
</search>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt10">
|
||||
<table-tool label="经费收支使用情况表">
|
||||
<el-button size="mini" type="primary" @click="doExport">导出</el-button>
|
||||
</table-tool>
|
||||
<el-table :data="tableData" style="width: 100%" row-key="unionId"
|
||||
v-loading="tableLoading" :size="tableSize" class="vi-table"
|
||||
border>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="单位"
|
||||
prop="unionName"
|
||||
min-width="140"></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="年初数"
|
||||
prop="beginMoney"
|
||||
min-width="120">
|
||||
<template v-slot="{row}">
|
||||
{{formatMoney(row.beginMoney)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" :label="pageForm.year + '年会费收入'">
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="1-4月会费"
|
||||
prop="feeJanApr"
|
||||
min-width="120">
|
||||
<template v-slot="{row}">
|
||||
{{formatMoney(row.feeJanApr)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="5-8月会费"
|
||||
prop="feeMayAug"
|
||||
min-width="120">
|
||||
<template v-slot="{row}">
|
||||
{{formatMoney(row.feeMayAug)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="9-12月会费"
|
||||
prop="feeSepDec"
|
||||
min-width="120">
|
||||
<template v-slot="{row}">
|
||||
{{formatMoney(row.feeSepDec)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="评优奖励"
|
||||
prop="awardMoney"
|
||||
min-width="120">
|
||||
<template v-slot="{row}">
|
||||
{{formatMoney(row.awardMoney)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="1-12月支出"
|
||||
prop="usedMoney"
|
||||
min-width="120">
|
||||
<template v-slot="{row}">
|
||||
{{formatMoney(row.usedMoney)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="经费余额"
|
||||
prop="remainMoney"
|
||||
min-width="120">
|
||||
<template v-slot="{row}">
|
||||
{{formatMoney(row.remainMoney)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</template>
|
||||
</guava>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
store,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
year: this.$moment().format("YYYY"),
|
||||
unionId: ""
|
||||
},
|
||||
unions: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatMoney(value) {
|
||||
return Number(value || 0).toFixed(2)
|
||||
},
|
||||
doExport() {
|
||||
const unionId = this.pageForm.unionId || ""
|
||||
window.open(loc() + "/doExport?year=" + this.pageForm.year + "&unionId=" + unionId)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$businessTool.listUnion().then((data) => {
|
||||
this.unions = data
|
||||
})
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+2
-2
@@ -4,10 +4,10 @@ let OUTLAY_MANAGE_UNION_QUARTERLY_ALLOCATE = {
|
||||
`
|
||||
<div>
|
||||
<template>
|
||||
<table-tool label="季度分配记录"></table-tool>
|
||||
<table-tool label="分配记录"></table-tool>
|
||||
<el-table :data="tableData" style="width: 100%" row-key="id" class="vi-table">
|
||||
<el-table-column type="index" label="序号" width="80px"></el-table-column>
|
||||
<el-table-column label="季度" prop="quarterly">
|
||||
<el-table-column label="分配项目" prop="quarterly">
|
||||
<template v-slot="{row}">
|
||||
<dict-tag :options="dict.type.OUTLAY_QUARTERLY"
|
||||
:value="row.quarterly"></dict-tag>
|
||||
|
||||
+767
-473
File diff suppressed because it is too large
Load Diff
+2
-2
@@ -47,7 +47,7 @@ layout("/layouts/platform.html"){
|
||||
<el-card shadow="never">
|
||||
<table-tool label="申请列表">
|
||||
<el-button type="primary" size="small" @click="exportSkr">导出收款人名册</el-button>
|
||||
<!-- <el-button @click="onExport" icon="el-icon-s-promotion" type="primary" size="small">导出</el-button>-->
|
||||
<el-button @click="onExport" icon="el-icon-s-promotion" type="primary" size="small">导出表格</el-button>
|
||||
</table-tool>
|
||||
<el-table :data="tableData" @sort-change="pageOrder" style="width: 100%">
|
||||
<el-table-column type="index" width="50px" label="序号" :index="indexMethod"></el-table-column>
|
||||
@@ -89,7 +89,7 @@ layout("/layouts/platform.html"){
|
||||
<el-table-column label="操作" fixed="right" width="350px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button @click="onView(row)" size="mini" type="primary">查看</el-button>
|
||||
<el-button v-if="isAdmin" @click="openEdit(row)" size="mini" type="primary">实际金额</el-button>
|
||||
<el-button v-if="isAdmin && row.stateId == 3" @click="openEdit(row)" size="mini" type="primary">实际金额</el-button>
|
||||
<el-button v-if="row.stateId == 3" @click="doPrint(row)" size="mini" type="primary">打印</el-button>
|
||||
<el-button v-if="$auth.hasRole('SYSADMIN')" @click="onDelete(row.id)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
|
||||
@@ -8,25 +8,19 @@ const unionReimburseInfo = {
|
||||
|
||||
<el-tabs v-model="activeTabName" style="margin-top: 10px;">
|
||||
<el-tab-pane label="申请基本信息" name="basic">
|
||||
<el-descriptions :column="2" border class="flow-task-form">
|
||||
<el-descriptions-item label="经费来源" :span="2">
|
||||
<el-descriptions :column="3" border class="flow-task-form">
|
||||
<el-descriptions-item label="经费来源" :span="3">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_FUND_SOURCE"
|
||||
:value="viewData.reimburseFundSource">
|
||||
</dict-tag>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="报销项目" :span="2">
|
||||
<el-descriptions-item label="报销项目" :span="3">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_PROJECT"
|
||||
:value="viewData.reimburseProject">
|
||||
</dict-tag>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="支付方式">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_PAYMENT_WAY"
|
||||
:value="viewData.paymentWay">
|
||||
</dict-tag>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="工号">{{viewData.loginName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="经办人">{{viewData.userName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="单位">{{viewData.unitName}}</el-descriptions-item>
|
||||
@@ -44,20 +38,45 @@ const unionReimburseInfo = {
|
||||
<span>{{ viewData.mobile }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="付款人" v-if="viewData.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">
|
||||
<span>{{ viewData.payerName }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="户名" v-if="viewData.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">
|
||||
<span>{{ viewData.bankUserName }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="开户行" v-if="viewData.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">
|
||||
<span>{{ viewData.bankOfDeposit }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="银行卡号" v-if="viewData.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">
|
||||
<span>{{ viewData.bankCardNumber }}</span>
|
||||
<el-descriptions-item label="支付信息" :span="3">
|
||||
<el-table :data="paymentInfoRows" border empty-text="暂无支付信息" style="width: 100%">
|
||||
<el-table-column label="支付方式" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_PAYMENT_WAY"
|
||||
:value="scope.row.paymentWay">
|
||||
</dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="金额" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ formatMoney(scope.row.money) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="付款人" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">{{ scope.row.payerName }}</span>
|
||||
<span v-else>无需填写</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="户名" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">{{ scope.row.bankUserName }}</span>
|
||||
<span v-else>无需填写</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开户行" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">{{ scope.row.bankOfDeposit }}</span>
|
||||
<span v-else>无需填写</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="银行卡号" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">{{ scope.row.bankCardNumber }}</span>
|
||||
<span v-else>无需填写</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="慰问对象" v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
@@ -159,20 +178,20 @@ const unionReimburseInfo = {
|
||||
<span>{{ viewData.condolenceRelationship }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="参加随行人员" :span="2"
|
||||
<el-descriptions-item label="参加随行人员" :span="3"
|
||||
v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<span>{{ viewData.participants }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="报销事由" :span="2" v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<el-descriptions-item label="报销事由" :span="3" v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<span>{{ viewData.paymentNotes }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="备注" :span="2" v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<el-descriptions-item label="备注" :span="3" v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<span>{{ viewData.notes }}</span>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="附件" :span="2">
|
||||
<el-descriptions-item label="附件" :span="3">
|
||||
<file-preview v-if="viewData.files && viewData.files.length > 0"
|
||||
:files="viewData.files"
|
||||
complete_result></file-preview>
|
||||
@@ -285,7 +304,8 @@ const unionReimburseInfo = {
|
||||
visible: false,
|
||||
viewData: {
|
||||
files: [],
|
||||
invoiceDetails: []
|
||||
invoiceDetails: [],
|
||||
paymentDetails: []
|
||||
},
|
||||
typeName: '',
|
||||
row: null
|
||||
@@ -294,6 +314,9 @@ const unionReimburseInfo = {
|
||||
computed: {
|
||||
showInvoiceTab() {
|
||||
return !!this.viewData.reimburseProject
|
||||
},
|
||||
paymentInfoRows() {
|
||||
return this.viewData.paymentDetails || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -317,7 +340,8 @@ const unionReimburseInfo = {
|
||||
buildViewData(data) {
|
||||
const viewData = Object.assign({
|
||||
files: [],
|
||||
invoiceDetails: []
|
||||
invoiceDetails: [],
|
||||
paymentDetails: []
|
||||
}, data || {})
|
||||
if (!Array.isArray(viewData.files)) {
|
||||
viewData.files = []
|
||||
@@ -325,8 +349,32 @@ const unionReimburseInfo = {
|
||||
if (!Array.isArray(viewData.invoiceDetails)) {
|
||||
viewData.invoiceDetails = []
|
||||
}
|
||||
const hasLegacyPayment = viewData.paymentWay || viewData.payer || viewData.bankUserName || viewData.bankCardNumber || viewData.bankOfDeposit
|
||||
if (Array.isArray(viewData.paymentDetails) && viewData.paymentDetails.length > 0) {
|
||||
viewData.paymentDetails = viewData.paymentDetails.map(item => this.buildPaymentDetail(item))
|
||||
} else {
|
||||
viewData.paymentDetails = hasLegacyPayment ? [this.buildPaymentDetail({
|
||||
paymentWay: viewData.paymentWay,
|
||||
money: viewData.money,
|
||||
payerName: viewData.payerName,
|
||||
bankUserName: viewData.bankUserName,
|
||||
bankOfDeposit: viewData.bankOfDeposit,
|
||||
bankCardNumber: viewData.bankCardNumber
|
||||
})] : []
|
||||
}
|
||||
return viewData
|
||||
},
|
||||
buildPaymentDetail(detail) {
|
||||
const currentDetail = detail || {}
|
||||
return {
|
||||
paymentWay: currentDetail.paymentWay || "",
|
||||
money: currentDetail.money || "",
|
||||
payerName: currentDetail.payerName || "",
|
||||
bankUserName: currentDetail.bankUserName || "",
|
||||
bankOfDeposit: currentDetail.bankOfDeposit || "",
|
||||
bankCardNumber: currentDetail.bankCardNumber || ""
|
||||
}
|
||||
},
|
||||
// 查看页金额统一保留两位小数，和申请页展示口径保持一致。
|
||||
formatMoney(value) {
|
||||
if (value === null || value === undefined || value === "") {
|
||||
|
||||
+734
-115
File diff suppressed because it is too large
Load Diff
@@ -2,118 +2,263 @@ const UNION_REIMBURSE_INFO = {
|
||||
template:
|
||||
/*language=HTML*/
|
||||
`
|
||||
<van-action-sheet v-model="visible" title="查看详情">
|
||||
<van-action-sheet v-model="visible" class="union-reimburse-info-sheet">
|
||||
<div class="union-info-header">
|
||||
<div class="union-info-header-title">查看详情</div>
|
||||
<div class="union-info-close" @click="onClose">
|
||||
<van-icon name="cross"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-container">
|
||||
<van-cell-group title="报销申请">
|
||||
<van-cell title="工号">{{ viewData.loginName }}</van-cell>
|
||||
<van-cell title="经办人">{{ viewData.userName }}</van-cell>
|
||||
<van-cell title="联系方式">{{ viewData.mobile }}</van-cell>
|
||||
<van-cell title="经费来源">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_FUND_SOURCE"
|
||||
:value="viewData.reimburseFundSource">
|
||||
</dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="报销项目">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_PROJECT"
|
||||
:value="viewData.reimburseProject">
|
||||
</dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="支付方式">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_PAYMENT_WAY"
|
||||
:value="viewData.paymentWay">
|
||||
</dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="所属协会" v-if="viewData.reimburseFundSource === 'UNION_REIMBURSE_FUND_SOURCE_3'">
|
||||
{{ viewData.clubName }}
|
||||
</van-cell>
|
||||
<van-cell title="余额" v-if="viewData.reimburseFundSource">{{ formatMoney(viewData.fundBalance) }}</van-cell>
|
||||
<div class="union-info-scroll">
|
||||
<div class="union-info-section">
|
||||
<div class="union-info-section-title">报销申请</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">工号</div>
|
||||
<div class="union-info-value">{{ viewData.loginName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">经办人</div>
|
||||
<div class="union-info-value union-info-link">{{ viewData.userName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">联系方式</div>
|
||||
<div class="union-info-value">{{ viewData.mobile }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">经费来源</div>
|
||||
<div class="union-info-value">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_FUND_SOURCE" :value="viewData.reimburseFundSource"></dict-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">报销项目</div>
|
||||
<div class="union-info-value">
|
||||
<dict-tag :options="dict.type.UNION_REIMBURSE_PROJECT" :value="viewData.reimburseProject"></dict-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="union-info-row" v-if="viewData.reimburseFundSource === 'UNION_REIMBURSE_FUND_SOURCE_3'">
|
||||
<div class="union-info-label">所属协会</div>
|
||||
<div class="union-info-value">{{ viewData.clubName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row" v-if="viewData.reimburseFundSource">
|
||||
<div class="union-info-label">余额</div>
|
||||
<div class="union-info-value">{{ formatMoney(viewData.fundBalance) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="viewData.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">
|
||||
<van-cell title="付款人">{{ viewData.payerName }}</van-cell>
|
||||
<van-cell title="户名">{{ viewData.bankUserName }}</van-cell>
|
||||
<van-cell title="开户行">{{ viewData.bankOfDeposit }}</van-cell>
|
||||
<van-cell title="银行卡号">{{ viewData.bankCardNumber }}</van-cell>
|
||||
</template>
|
||||
<div class="union-info-section">
|
||||
<div class="union-info-section-title">支付信息</div>
|
||||
<template v-if="paymentInfoRows.length">
|
||||
<div class="union-payment-tabs">
|
||||
<div class="union-payment-tab"
|
||||
:class="{active: index === currentPaymentIndex}"
|
||||
v-for="(item, index) in paymentInfoRows"
|
||||
:key="index"
|
||||
@click="swipeToPayment(index)">支付信息{{ index + 1 }}</div>
|
||||
</div>
|
||||
<van-swipe ref="paymentInfoSwipe" :loop="false" :show-indicators="false" @change="handlePaymentSwipeChange">
|
||||
<van-swipe-item v-for="(item, index) in paymentInfoRows" :key="index">
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">支付方式</div>
|
||||
<div class="union-info-value">{{ getPaymentWayText(item.paymentWay) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">金额</div>
|
||||
<div class="union-info-value">{{ formatMoney(item.money) }}</div>
|
||||
</div>
|
||||
<template v-if="item.paymentWay === 'UNION_REIMBURSE_PAYMENT_WAY_2'">
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">付款人</div>
|
||||
<div class="union-info-value">{{ item.payerName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">户名</div>
|
||||
<div class="union-info-value">{{ item.bankUserName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">开户行</div>
|
||||
<div class="union-info-value">{{ item.bankOfDeposit }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">银行卡号</div>
|
||||
<div class="union-info-value">{{ item.bankCardNumber }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</template>
|
||||
<div class="union-empty-text" v-else>暂无支付信息</div>
|
||||
</div>
|
||||
|
||||
<template v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<van-cell title="慰问对象">{{ viewData.condolenceUserName }}</van-cell>
|
||||
<van-cell title="性别">{{ viewData.condolenceSex }}</van-cell>
|
||||
<van-cell title="生日">{{ formatDateText(viewData.condolenceBirthday) }}</van-cell>
|
||||
<van-cell title="身份证号">{{ viewData.condolenceIdCard }}</van-cell>
|
||||
<van-cell title="联系方式">{{ viewData.condolenceMobile }}</van-cell>
|
||||
<van-cell title="慰问类型">{{ viewData.typeName || viewData.condolenceTypeName }}</van-cell>
|
||||
<van-cell title="慰问方式">{{ viewData.way }}</van-cell>
|
||||
<van-cell title="慰问金额">{{ formatMoney(viewData.condolenceMoney) }}</van-cell>
|
||||
<van-cell title="慰问时间">{{ formatDateText(viewData.condolenceTime) }}</van-cell>
|
||||
<van-cell title="结婚时间" v-if="isCondolenceType('cf4ce7af322d464f8f86d818fcc00203')">
|
||||
{{ formatDateText(viewData.marryTime) }}
|
||||
</van-cell>
|
||||
<van-cell title="生育时间" v-if="isCondolenceType('c90cb10dce6542e99ae271bee6fe8cc0')">
|
||||
{{ formatDateText(viewData.fertilityTime) }}
|
||||
</van-cell>
|
||||
<div class="union-info-section" v-if="viewData.reimburseProject === 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<div class="union-info-section-title">慰问信息</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">慰问对象</div>
|
||||
<div class="union-info-value">{{ viewData.condolenceUserName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">性别</div>
|
||||
<div class="union-info-value">{{ viewData.condolenceSex }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">生日</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.condolenceBirthday) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">身份证号</div>
|
||||
<div class="union-info-value">{{ viewData.condolenceIdCard }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">联系方式</div>
|
||||
<div class="union-info-value">{{ viewData.condolenceMobile }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">慰问类型</div>
|
||||
<div class="union-info-value">{{ viewData.typeName || viewData.condolenceTypeName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">慰问方式</div>
|
||||
<div class="union-info-value">{{ viewData.way }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">慰问金额</div>
|
||||
<div class="union-info-value">{{ formatMoney(viewData.condolenceMoney) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">慰问时间</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.condolenceTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row" v-if="isCondolenceType('cf4ce7af322d464f8f86d818fcc00203')">
|
||||
<div class="union-info-label">结婚时间</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.marryTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row" v-if="isCondolenceType('c90cb10dce6542e99ae271bee6fe8cc0')">
|
||||
<div class="union-info-label">生育时间</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.fertilityTime) }}</div>
|
||||
</div>
|
||||
<template v-if="isCondolenceType('4e316737e71047e0b01aea78524c1416')">
|
||||
<van-cell title="住院病由">{{ viewData.hospitalCausation }}</van-cell>
|
||||
<van-cell title="住院开始时间">{{ formatDateText(viewData.hospitalizationStartTime) }}</van-cell>
|
||||
<van-cell title="住院结束时间">{{ formatDateText(viewData.hospitalizationEndTime) }}</van-cell>
|
||||
<van-cell title="入住医院">{{ viewData.hospital }}</van-cell>
|
||||
<van-cell title="当年次数">{{ viewData.hospitalCount }}</van-cell>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">住院病由</div>
|
||||
<div class="union-info-value">{{ viewData.hospitalCausation }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">住院开始时间</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.hospitalizationStartTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">住院结束时间</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.hospitalizationEndTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">入住医院</div>
|
||||
<div class="union-info-value">{{ viewData.hospital }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">当年次数</div>
|
||||
<div class="union-info-value">{{ viewData.hospitalCount }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="isCondolenceType('60f03a87b62b4823855814afdbf5672a')">
|
||||
<van-cell title="去逝时间">{{ formatDateText(viewData.deathTime) }}</van-cell>
|
||||
<van-cell title="与被慰问人关系">{{ viewData.condolenceRelationship }}</van-cell>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">去逝时间</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.deathTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">与被慰问人关系</div>
|
||||
<div class="union-info-value">{{ viewData.condolenceRelationship }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<van-cell title="参加随行人员">
|
||||
<div style="white-space: pre-line">{{ viewData.participants }}</div>
|
||||
</van-cell>
|
||||
<van-cell title="报销事由">
|
||||
<div style="white-space: pre-line">{{ viewData.paymentNotes }}</div>
|
||||
</van-cell>
|
||||
<van-cell title="备注">
|
||||
<div style="white-space: pre-line">{{ viewData.notes }}</div>
|
||||
</van-cell>
|
||||
</template>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">参加随行人员</div>
|
||||
<div class="union-info-value">{{ viewData.participants }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">报销事由</div>
|
||||
<div class="union-info-value">{{ viewData.paymentNotes }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">备注</div>
|
||||
<div class="union-info-value">{{ viewData.notes }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="viewData.reimburseProject && viewData.reimburseProject !== 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<van-cell title="活动名称">{{ viewData.activityName }}</van-cell>
|
||||
<van-cell title="活动人数">{{ viewData.activityNumber }}</van-cell>
|
||||
<van-cell title="活动地点">{{ viewData.activityPlace }}</van-cell>
|
||||
<van-cell title="活动时间">{{ formatDateText(viewData.activityTime) }}</van-cell>
|
||||
<van-cell title="支付内容">
|
||||
<div style="white-space: pre-line">{{ viewData.paymentNotes }}</div>
|
||||
</van-cell>
|
||||
</template>
|
||||
<div class="union-info-section" v-if="viewData.reimburseProject && viewData.reimburseProject !== 'UNION_REIMBURSE_PROJECT_1'">
|
||||
<div class="union-info-section-title">活动信息</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">活动名称</div>
|
||||
<div class="union-info-value union-info-link">{{ viewData.activityName }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">活动人数</div>
|
||||
<div class="union-info-value">{{ viewData.activityNumber }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">活动地点</div>
|
||||
<div class="union-info-value">{{ viewData.activityPlace }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">活动时间</div>
|
||||
<div class="union-info-value">{{ formatDateText(viewData.activityTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">支付内容</div>
|
||||
<div class="union-info-value">{{ viewData.paymentNotes }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-cell title="附件">
|
||||
<template #label>
|
||||
<file-preview :files="viewData.files" complete_result
|
||||
v-if="viewData.files && viewData.files.length > 0"></file-preview>
|
||||
<span v-else>暂无附件</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<div class="union-info-section">
|
||||
<div class="union-info-section-title">附件</div>
|
||||
<div class="union-file-preview" v-if="viewData.files && viewData.files.length > 0">
|
||||
<file-preview :files="viewData.files" complete_result></file-preview>
|
||||
</div>
|
||||
<div class="union-empty-text" v-else>暂无附件</div>
|
||||
</div>
|
||||
|
||||
<van-cell-group title="电子发票" v-if="viewData.reimburseProject">
|
||||
<van-cell title="报销金额">{{ formatMoney(viewData.money) }}</van-cell>
|
||||
<van-cell title="发票张数">{{ viewData.invoiceNumber }}</van-cell>
|
||||
<van-cell title="发票明细列表">
|
||||
<template #label>
|
||||
<template v-if="viewData.invoiceDetails && viewData.invoiceDetails.length > 0">
|
||||
<div style="margin-top: 8px; padding: 10px 12px; border: 1px solid #ebedf0; border-radius: 6px; background: #fafafa;" v-for="(item, index) in viewData.invoiceDetails" :key="index">
|
||||
<div style="margin-top: 4px; color: #323233;">第{{ index + 1 }}张发票</div>
|
||||
<div style="margin-top: 4px;">发票号码：{{ item.invoiceNo || '未填写' }}</div>
|
||||
<div style="margin-top: 4px;">发票金额：{{ formatMoney(item.invoiceAmount) }}</div>
|
||||
<div style="margin-top: 4px;">销售方信息名称：{{ item.sellerName || '未填写' }}</div>
|
||||
<div style="margin-top: 4px;">项目名称：{{ item.itemName || '未填写' }}</div>
|
||||
<div style="margin-top: 4px;" v-if="item.remark">备注：{{ item.remark }}</div>
|
||||
<file-preview :files="item.invoiceFiles" complete_result
|
||||
v-if="item.invoiceFiles && item.invoiceFiles.length > 0"></file-preview>
|
||||
<div style="margin-top: 4px;" v-else>文件：未上传</div>
|
||||
<div class="union-info-section" v-if="viewData.reimburseProject">
|
||||
<div class="union-info-section-title">电子发票</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">报销金额</div>
|
||||
<div class="union-info-value">{{ formatMoney(viewData.money) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">发票张数</div>
|
||||
<div class="union-info-value">{{ viewData.invoiceNumber }}</div>
|
||||
</div>
|
||||
<div class="union-invoice-subtitle">发票明细表</div>
|
||||
<div class="union-invoice-card-list" v-if="viewData.invoiceDetails && viewData.invoiceDetails.length > 0">
|
||||
<div class="union-invoice-card" v-for="(item, index) in viewData.invoiceDetails" :key="index">
|
||||
<div class="union-invoice-card-title">第{{ index + 1 }}张发票</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">发票号码</div>
|
||||
<div class="union-info-value">{{ item.invoiceNo || '未填写' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<van-empty description="暂无发票明细" v-else></van-empty>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">发票金额</div>
|
||||
<div class="union-info-value">{{ formatMoney(item.invoiceAmount) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">销售方名称</div>
|
||||
<div class="union-info-value">{{ item.sellerName || '未填写' }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">项目名称</div>
|
||||
<div class="union-info-value">{{ item.itemName || '未填写' }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">备注</div>
|
||||
<div class="union-info-value">{{ item.remark || '未填写' }}</div>
|
||||
</div>
|
||||
<template v-if="item.invoiceFiles && item.invoiceFiles.length > 0">
|
||||
<div class="union-file-preview union-invoice-file-preview">
|
||||
<file-preview :files="item.invoiceFiles" complete_result></file-preview>
|
||||
</div>
|
||||
</template>
|
||||
<div class="union-empty-text" v-else>文件：未上传</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-empty description="暂无发票明细" v-else></van-empty>
|
||||
</div>
|
||||
|
||||
<!-- <van-cell-group title="电子签名">-->
|
||||
<!-- <van-cell title="签字">-->
|
||||
@@ -126,47 +271,54 @@ const UNION_REIMBURSE_INFO = {
|
||||
<!-- </van-cell>-->
|
||||
<!-- </van-cell-group>-->
|
||||
|
||||
<template v-for="(task,index) in doneTasks">
|
||||
<div class="process-title">
|
||||
{{ task.displayName }}
|
||||
</div>
|
||||
<van-cell-group v-if="task.ext.isFirstTaskNode">
|
||||
<van-cell title="申请用户">
|
||||
{{ task.ext.initiatorName}}({{task.ext.initiatorAccount}})
|
||||
</van-cell>
|
||||
<van-cell title="申请时间">
|
||||
{{ formatCreateTime(task.finishTime) }}
|
||||
</van-cell>
|
||||
<van-cell title="办理结果">
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="task.ext.submitType"></dict-tag>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<van-cell-group v-else>
|
||||
<van-cell title="办理用户">
|
||||
{{ task.taskFormData.userName}}({{task.taskFormData.loginName}})
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">
|
||||
{{ formatCreateTime(task.finishTime) }}
|
||||
</van-cell>
|
||||
<van-cell title="办理结果">
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="task.ext.submitType"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="办理意见" v-if="!task.ext.isFirstTaskNode">
|
||||
<template #label>
|
||||
{{
|
||||
task.taskFormData.opinion
|
||||
}}
|
||||
<template v-for="(task,index) in doneTasks">
|
||||
<div class="union-info-section">
|
||||
<div class="process-title">{{ task.displayName }}</div>
|
||||
<template v-if="task.ext.isFirstTaskNode">
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">申请用户</div>
|
||||
<div class="union-info-value">{{ task.ext.initiatorName}}({{task.ext.initiatorAccount}})</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">申请时间</div>
|
||||
<div class="union-info-value">{{ formatCreateTime(task.finishTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">办理结果</div>
|
||||
<div class="union-info-value">
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE" :value="task.ext.submitType"></dict-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="签字" v-if="!task.ext.isFirstTaskNode">
|
||||
<van-image :src="task.ext.tf_userSign"
|
||||
v-if="task.ext.tf_userSign"
|
||||
class="signature-image"></van-image>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">办理用户</div>
|
||||
<div class="union-info-value">{{ task.taskFormData.userName}}({{task.taskFormData.loginName}})</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">办理时间</div>
|
||||
<div class="union-info-value">{{ formatCreateTime(task.finishTime) }}</div>
|
||||
</div>
|
||||
<div class="union-info-row">
|
||||
<div class="union-info-label">办理结果</div>
|
||||
<div class="union-info-value">
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE" :value="task.ext.submitType"></dict-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="union-info-row" v-if="!task.ext.isFirstTaskNode">
|
||||
<div class="union-info-label">办理意见</div>
|
||||
<div class="union-info-value">{{ task.taskFormData.opinion }}</div>
|
||||
</div>
|
||||
<div class="union-info-row" v-if="!task.ext.isFirstTaskNode && task.ext.tf_userSign">
|
||||
<div class="union-info-label">签字</div>
|
||||
<div class="union-info-value">
|
||||
<van-image :src="task.ext.tf_userSign" class="signature-image"></van-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<slot></slot>
|
||||
@@ -178,13 +330,35 @@ const UNION_REIMBURSE_INFO = {
|
||||
visible: false,
|
||||
viewData: {},
|
||||
doneTasks: [],
|
||||
row: null
|
||||
row: null,
|
||||
currentPaymentIndex: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paymentInfoRows() {
|
||||
return this.viewData.paymentDetails || []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.injectInfoStyle()
|
||||
},
|
||||
methods: {
|
||||
injectInfoStyle() {
|
||||
// 当前组件是普通 JS 对象注册，Vue 不会自动注入 style 字段，这里只为本详情弹窗注入一次样式。
|
||||
const styleId = "union-reimburse-info-style"
|
||||
if (document.getElementById(styleId) || !this.$options.style) {
|
||||
return
|
||||
}
|
||||
const styleNode = document.createElement("style")
|
||||
styleNode.id = styleId
|
||||
styleNode.type = "text/css"
|
||||
styleNode.appendChild(document.createTextNode(this.$options.style))
|
||||
document.head.appendChild(styleNode)
|
||||
},
|
||||
onOpen(row) {
|
||||
this.row = row
|
||||
this.visible = true
|
||||
this.currentPaymentIndex = 0
|
||||
this.getInfo()
|
||||
this.getDoneTasks()
|
||||
},
|
||||
@@ -208,11 +382,82 @@ const UNION_REIMBURSE_INFO = {
|
||||
isCondolenceType(typeId) {
|
||||
return this.viewData.condolenceTypeId === typeId || this.viewData.condolenceType === typeId
|
||||
},
|
||||
getPaymentWayText(paymentWay) {
|
||||
const matchedPaymentWay = this.dict.type.UNION_REIMBURSE_PAYMENT_WAY.find(item => item.code === paymentWay)
|
||||
return matchedPaymentWay ? matchedPaymentWay.name : ""
|
||||
},
|
||||
buildViewData(data) {
|
||||
const viewData = Object.assign({
|
||||
files: [],
|
||||
invoiceDetails: [],
|
||||
paymentDetails: []
|
||||
}, data || {})
|
||||
if (!Array.isArray(viewData.files)) {
|
||||
viewData.files = []
|
||||
}
|
||||
if (!Array.isArray(viewData.invoiceDetails)) {
|
||||
viewData.invoiceDetails = []
|
||||
}
|
||||
const hasLegacyPayment = viewData.paymentWay || viewData.payer || viewData.bankUserName || viewData.bankCardNumber || viewData.bankOfDeposit
|
||||
if (Array.isArray(viewData.paymentDetails) && viewData.paymentDetails.length > 0) {
|
||||
viewData.paymentDetails = viewData.paymentDetails.map(item => this.buildPaymentDetail(item))
|
||||
} else {
|
||||
viewData.paymentDetails = hasLegacyPayment ? [this.buildPaymentDetail({
|
||||
paymentWay: viewData.paymentWay,
|
||||
money: viewData.money,
|
||||
payerName: viewData.payerName,
|
||||
bankUserName: viewData.bankUserName,
|
||||
bankOfDeposit: viewData.bankOfDeposit,
|
||||
bankCardNumber: viewData.bankCardNumber
|
||||
})] : []
|
||||
}
|
||||
return viewData
|
||||
},
|
||||
buildPaymentDetail(detail) {
|
||||
const currentDetail = detail || {}
|
||||
return {
|
||||
paymentWay: currentDetail.paymentWay || "",
|
||||
money: currentDetail.money || "",
|
||||
payerName: currentDetail.payerName || "",
|
||||
bankUserName: currentDetail.bankUserName || "",
|
||||
bankOfDeposit: currentDetail.bankOfDeposit || "",
|
||||
bankCardNumber: currentDetail.bankCardNumber || ""
|
||||
}
|
||||
},
|
||||
handlePaymentSwipeChange(index) {
|
||||
this.currentPaymentIndex = index
|
||||
},
|
||||
swipeToPayment(index) {
|
||||
if (!this.paymentInfoRows.length) {
|
||||
this.currentPaymentIndex = 0
|
||||
return
|
||||
}
|
||||
const targetIndex = Math.max(0, Math.min(index, this.paymentInfoRows.length - 1))
|
||||
this.currentPaymentIndex = targetIndex
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.paymentInfoSwipe && this.$refs.paymentInfoSwipe.swipeTo) {
|
||||
this.$refs.paymentInfoSwipe.swipeTo(targetIndex)
|
||||
}
|
||||
})
|
||||
},
|
||||
showPrevPayment() {
|
||||
if (this.currentPaymentIndex <= 0) {
|
||||
return
|
||||
}
|
||||
this.swipeToPayment(this.currentPaymentIndex - 1)
|
||||
},
|
||||
showNextPayment() {
|
||||
if (this.currentPaymentIndex >= this.paymentInfoRows.length - 1) {
|
||||
return
|
||||
}
|
||||
this.swipeToPayment(this.currentPaymentIndex + 1)
|
||||
},
|
||||
// 获取申请信息
|
||||
getInfo() {
|
||||
this.$axios.post("/platform/unionReimburse/apply/info", { id: this.row.id }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.viewData = res.data
|
||||
this.viewData = this.buildViewData(res.data)
|
||||
this.currentPaymentIndex = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -230,6 +475,209 @@ const UNION_REIMBURSE_INFO = {
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.union-reimburse-info-sheet {
|
||||
height: 92vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.union-reimburse-info-sheet .van-action-sheet__content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.union-info-header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-top: 4px solid #1677ff;
|
||||
border-bottom: 1px solid #e7ebf0;
|
||||
}
|
||||
|
||||
.union-info-header-title {
|
||||
color: #111827;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.union-info-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #8b95a3;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f2f4f7;
|
||||
}
|
||||
|
||||
.union-info-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.union-info-section {
|
||||
background: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.union-info-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: #f5f7fa;
|
||||
border-bottom: 1px solid #e7ebf0;
|
||||
}
|
||||
|
||||
.union-info-section-title::before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.union-info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
min-height: 44px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #edf0f4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.union-info-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.union-info-label {
|
||||
flex: 0 0 96px;
|
||||
color: #8a94a6;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.union-info-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.union-info-link {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.union-payment-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px 20px 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.union-payment-tab {
|
||||
height: 30px;
|
||||
padding: 0 13px;
|
||||
border-radius: 999px;
|
||||
color: #8a94a6;
|
||||
background: #f0f2f5;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.union-payment-tab.active {
|
||||
color: #fff;
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.union-empty-text {
|
||||
padding: 14px 20px;
|
||||
color: #9aa3af;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.union-file-preview {
|
||||
padding: 12px 20px 16px;
|
||||
}
|
||||
|
||||
.union-invoice-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
background: #f5f7fa;
|
||||
border-top: 1px solid #edf0f4;
|
||||
border-bottom: 1px solid #edf0f4;
|
||||
}
|
||||
|
||||
.union-invoice-card-list {
|
||||
padding: 12px 16px 4px;
|
||||
}
|
||||
|
||||
.union-invoice-card {
|
||||
margin-bottom: 12px;
|
||||
padding: 14px 14px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e6ebf2;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(31, 35, 41, 0.05);
|
||||
}
|
||||
|
||||
.union-invoice-card-title {
|
||||
margin-bottom: 8px;
|
||||
color: #1677ff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.union-invoice-file-preview {
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.process-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.signature-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user