|
|
@@ -0,0 +1,218 @@
|
|
|
+<template>
|
|
|
+ <div class="reply" ref = "replyModal">
|
|
|
+ <a-modal
|
|
|
+ :title="formState.type=='0'?'福利现金':'年终奖'"
|
|
|
+ width="85%"
|
|
|
+ :visible="visible"
|
|
|
+ :confirmLoading="loading"
|
|
|
+ :getContainer ='()=>$refs.replyModal'
|
|
|
+ @cancel="handleCancel"
|
|
|
+ destroyOnClose
|
|
|
+ >
|
|
|
+ <template #footer>
|
|
|
+ <a-button @click="handleCancel" style="margin-left: 8px;">取消</a-button>
|
|
|
+ </template>
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form-model layout="inline" ref="form" :model="formState" >
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-model-item label="姓名" >
|
|
|
+ <j-search-select-tag v-model="formState.name" placeholder="请选择名称"
|
|
|
+ dict="sys_user,realname,realname" allowClear/>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
+ <a-form-item label="部门">
|
|
|
+ <j-search-select-tag v-model="formState.sysOrgCode" placeholder="请选择部门"
|
|
|
+ dict="sys_depart,depart_name,depart_name,org_type='3' or org_code='TBD' order by org_code"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col> -->
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-model-item label="" >
|
|
|
+ <a-button type="primary" icon="search" @click="searchSonList">查询</a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
+ <a-table
|
|
|
+ ref="tableRef"
|
|
|
+ bordered
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="dataSource"
|
|
|
+ :loading="loading"
|
|
|
+ :scroll="{x: 1000 ,y:400}"
|
|
|
+ :pagination="false"
|
|
|
+ :footer="showTotal"
|
|
|
+ >
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+
|
|
|
+ import moment from 'moment'
|
|
|
+ import pick from 'lodash.pick'
|
|
|
+ import { FormTypes } from '@/utils/JEditableTableUtil'
|
|
|
+ import { putAction,getAction } from '@/api/manage'
|
|
|
+ import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
|
|
|
+ import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
+ export default {
|
|
|
+ name: 'YearEndBonusPayroll',
|
|
|
+ components: {
|
|
|
+ moment,
|
|
|
+ JEllipsis,
|
|
|
+ JSearchSelectTag
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ let ellipsis = (v, l) => <j-ellipsis value={v} length={l} />
|
|
|
+ return {
|
|
|
+ formState:{},
|
|
|
+ dataSource: [{}],
|
|
|
+ visible:false,
|
|
|
+ loading:false,
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ align:"center",
|
|
|
+ width:'5%',
|
|
|
+ dataIndex: 'index',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '姓名',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'name',
|
|
|
+ customRender: (t) => ellipsis(t,17),
|
|
|
+ width:'10%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '税前金额',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'beforeTaxAmount',
|
|
|
+ ellipsis: true,
|
|
|
+ width:'10%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '个税',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'personalTax',
|
|
|
+ ellipsis: true,
|
|
|
+ width:'10%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '税后金额',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: 'afterTaxAmount',
|
|
|
+ ellipsis: true,
|
|
|
+ width:'10%',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ dataSource(){
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
|
|
|
+ dom.addEventListener(
|
|
|
+ 'scroll',
|
|
|
+ () => {
|
|
|
+ this.$refs.tableInfo.$el.querySelectorAll(
|
|
|
+ '.ant-table-body'
|
|
|
+ )[0].scrollLeft = dom.scrollLeft
|
|
|
+ },
|
|
|
+ true
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 合计展示
|
|
|
+ totalDataSource(){
|
|
|
+ var item = {
|
|
|
+ "name":"合计"
|
|
|
+ };
|
|
|
+ var allBeforeTaxAmount = 0
|
|
|
+ var allPersonalTax = 0
|
|
|
+ var allAfterTaxAmount = 0
|
|
|
+ for (let row of this.dataSource){
|
|
|
+ allBeforeTaxAmount += row.beforeTaxAmount*1;
|
|
|
+ allPersonalTax+=row.personalTax*1;
|
|
|
+ allAfterTaxAmount+=row.afterTaxAmount*1;
|
|
|
+ }
|
|
|
+
|
|
|
+ item.beforeTaxAmount= parseFloat(allBeforeTaxAmount.toFixed(2));
|
|
|
+ item.personalTax= parseFloat(allPersonalTax.toFixed(2));
|
|
|
+ item.afterTaxAmount = parseFloat(allAfterTaxAmount.toFixed(2));
|
|
|
+ return [item];
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCancel(){
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ detail(id,typeR){
|
|
|
+ this.formState = {}
|
|
|
+ this.formState.id = id
|
|
|
+ this.formState.type = typeR=='福利现金'?'0':'1'
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+ getTableList(){
|
|
|
+ this.loading = true
|
|
|
+ getAction('/salary/salaryManagement/querySalaryManagementExtraListByMainId',this.formState).then(res=>{
|
|
|
+ this.loading = false
|
|
|
+ if(res.success){
|
|
|
+ this.dataSource =res.result
|
|
|
+ }else{
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchSonList(){
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+ showTotal(data) {
|
|
|
+ return (
|
|
|
+ <a-table
|
|
|
+ ref="tableInfo"
|
|
|
+ pagination={false}
|
|
|
+ columns={this.columns}
|
|
|
+ dataSource={this.totalDataSource || []}
|
|
|
+ showHeader={false}
|
|
|
+ scroll={{x:1000 ,y:400}}
|
|
|
+ ></a-table>
|
|
|
+ )
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped lang="less">
|
|
|
+ /deep/ .nresume .ant-input{
|
|
|
+ height: 150px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .ant-select{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .form-table-heard:before {
|
|
|
+ content: '*';
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ /deep/ .ant-calendar-picker{
|
|
|
+ width: 113px !important;
|
|
|
+ }
|
|
|
+ /deep/ .ant-table-footer .ant-table-body {
|
|
|
+ overflow-x: hidden !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-table-footer{
|
|
|
+ padding:0 !important;
|
|
|
+ overflow: hidden !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-table-fixed-left .ant-table-body-inner {
|
|
|
+ margin-right: -28px !important;
|
|
|
+ padding-right: 20px !important;
|
|
|
+ }
|
|
|
+ </style>
|
jingbb