基本伪代码的目录结构
系统中有三种角色
- 薪酬管理员对应薪资信息
- 社保管理员对应社保信息
- 企业年金管理员对应企业年金信息
<!--
* @Author: wangxuan
* @Date: 2025/2/26
* @LastEditors: wangxuan
* @Description: desc
-->
<template>
<div class="ers-transfer-sameCompany sameCompany-apply cmcc-bg-grey">
<FixLoading :is-show="fixLoading.isShow" :message="fixLoading.message"></FixLoading>
<FlowOpBtns
ref="flowOp"
:buttons="buttons"
@ajaxBegin="flowAjaxBeginHandle"
@ajaxEnd="flowAjaxEndHandle"
@save="onSave"
@submit="onSubmit"
>
</FlowOpBtns>
<panel-container class="mt-2" title="申请详情">
<table-layout>
<template slot="tools">
<div class="clearfix">
<div class="btn-group-right float-right _fs-0">
<t-button type="outline-primary" @click="downTemplate" class="mr-16">
<span class="iconfont cmccui-hr-xiazai"></span>
下载模板
</t-button>
<t-button type="outline-primary" @click="importExcel" class="mr-16">
<span class="iconfont cmccui-hr-daoru"></span>导入
</t-button>
<t-button type="outline-primary" @click="exportExcel" class="mr-16">
<span class="iconfont cmccui-hr-daochu"></span>导出
</t-button>
<t-button type="outline-primary" @click="exportExcel" class="mr-16">
<span class="iconfont cmccui-hr-daochu"></span>查看导出任务
</t-button>
</div>
<t-tabs class="fix_tabs" v-model="currTab">
<t-tab-panel
label="基本信息"
name="1"
>
<BasicInformation
:tableData="tableData"
@showUserDetail="showUserDetail"
@updateDataDetail="updateDataDetail"
/>
</t-tab-panel>
<t-tab-panel
v-if="isPayrollAdministrator"
label="薪酬信息"
name="2"
>
<SalaryInformation
:tableData="tableData"
@showUserDetail="showUserDetail"
@updateDataDetail="updateDataDetail"
/>
</t-tab-panel>
<t-tab-panel
v-if="isSocialSecurityAdministrator"
label="社保信息"
name="3"
>
<SocialSecurityInformation
:tableData="tableData"
@showUserDetail="showUserDetail"
@updateDataDetail="updateDataDetail"
/>
</t-tab-panel>
<t-tab-panel
v-if="isCorporateAnnuityAdministrator"
label="企业年金信息"
name="4"
>
<EnterpriseAnnuityInformation
:tableData="tableData"
@showUserDetail="showUserDetail"
@updateDataDetail="updateDataDetail"
/>
</t-tab-panel>
</t-tabs>
</div>
</template>
</table-layout>
</panel-container>
<!-- <panel-container v-if="$route.query.processInstID" class="mt-2" title="流程进度">-->
<!-- <template v-slot:title>-->
<!-- <span>流程进度</span>-->
<!-- <span class="ml-1" style="font-size: 13px">流程ID：{{ $route.query.processInstID }}</span>-->
<!-- </template>-->
<!-- <flow-records :flow-id="$route.query.processInstID" @getTitle="getTitle"></flow-records>-->
<!-- </panel-container>-->
<!-- 用户信息展示弹窗 -->
<EmployeeInfo
:isShow="showUserDetailModal"
:employeeId="userDetailId"
@closeModal="closeUserDetailModal"
>
</EmployeeInfo>
<!-- 修改数据弹窗 -->
<DataChangeModal
title="编辑"
:isShow.sync="showDataDetailModal"
/>
</div>
</template>
<script>
// 基本信息
import BasicInformation from '@/pages/ers/transferSalaryLinkage/entryLinkage/components/BasicInformation.vue'
// 薪酬信息
import SalaryInformation from '@/pages/ers/transferSalaryLinkage/entryLinkage/components/SalaryInformation.vue'
// 社保信息
import SocialSecurityInformation
from '@/pages/ers/transferSalaryLinkage/entryLinkage/components/SocialSecurityInformation.vue'
// 企业年金信息
import EnterpriseAnnuityInformation
from '@/pages/ers/transferSalaryLinkage/entryLinkage/components/EnterpriseAnnuityInformation.vue'
import EmployeeInfo from '@/component/ers/employee-info/EmployeeInfo.vue'
// 数据编辑框
import DataChangeModal from '@/pages/ers/transferSalaryLinkage/entryLinkage/components/DataChangeModal/index.vue'
import { ERROR_MSG } from '@/pages/ers/transferSalaryLinkage/entryLinkage/components/utils'
import {
isPayrollAdministrator,
isSocialSecurityAdministrator,
isCorporateAnnuityAdministrator
} from '@/pages/ers/transferSalaryLinkage/utils'
export default {
components: {
EmployeeInfo,
BasicInformation,
SalaryInformation,
SocialSecurityInformation,
EnterpriseAnnuityInformation,
DataChangeModal
},
data() {
return {
fixLoading: {
isShow: false,
message: ''
},
buttons: ['save', 'submit'],
currTab: '1',
tableData: [],
userDetailId: null,
showUserDetailModal: false,
showDataDetailModal: false
}
},
computed: {
isPayrollAdministrator,
isSocialSecurityAdministrator,
isCorporateAnnuityAdministrator,
},
mounted() {
this.init()
},
methods: {
async init() {
this.tableData = await this.getTableData()
},
getTableData() {
return new Promise((resolve, reject) => {
resolve([
{ phraseId: Math.random() },
{ phraseId: Math.random() },
{ phraseId: Math.random() },
{ phraseId: Math.random() },
{ phraseId: Math.random() },
])
})
},
flowAjaxBeginHandle(message) {
this.fixLoading = { isShow: true, message }
},
flowAjaxEndHandle() {
this.fixLoading = { isShow: false }
},
onSave() {
const isValid = this.validate()
if (!isValid) {
this.noticeErrorMsg()
return
}
},
onSubmit() {
const isValid = this.validate()
if (!isValid) {
this.noticeErrorMsg()
return
}
},
downTemplate() {
},
importExcel() {
},
exportExcel() {
},
showUserDetail(userId) {
this.userDetailId = userId
this.openUserDetailModal()
},
openUserDetailModal() {
this.showUserDetailModal = true
},
closeUserDetailModal() {
this.showUserDetailModal = false
},
updateDataDetail(row) {
this.openDataDetailModal()
},
openDataDetailModal() {
this.showDataDetailModal = true
},
/**
* 校验数据有效性
* @return {boolean}
*/
validate() {
return this.tableData.every(this.validateRow)
},
/**
* 校验单行数据有效性
* @return {boolean}
*/
validateRow(row) {
return Object.keys(ERROR_MSG).every((prop) => {
return Boolean(row[prop])
})
},
/**
* 展示错误信息
* @return {void}
*/
noticeErrorMsg() {
this.tableData.some((row, index) => {
const errorMsg = this.getErrorMsg(row)
if (errorMsg) {
this.$Message.warning(`第${index+1}行${errorMsg}`, 3)
return true
}
return false
})
},
/**
* 获取错误信息
* @param {object} row
* @return {string}
*/
getErrorMsg(row) {
const prop = Object.keys(ERROR_MSG).find((prop) => {
return!row[prop]
})
if (!prop) {
return ''
}
return ERROR_MSG[prop]
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .text-primary-disabled {
color: #ccc !important;
}
.atta-list-wrap {
list-style: none;
li {
line-height: 40px;
}
}
</style>
大体思想就是组合思想 划分责任 让每个组件尽量精、简
