cd-work-flow-web/src/views/oa/salary_management/personnelSalary/modules/ChangeBasicSalary.vue

<template>
    <div class="reply" ref = "replyModal">
      <a-modal
        title="薪资调整"
        width="25%"
        :visible="visible"
        :confirmLoading="loading"
        :getContainer ='()=>$refs.replyModal'
        @cancel="handleCancel"
        :closable="!loading"
        :maskClosable="!loading"
        destroyOnClose
       >
            <template #footer>
                <a-button  @click="handleCancel" style="margin-left: 8px;" :loading = "loading">取消</a-button>
                <a-button  @click="handleOk" type="primary" style="margin-left: 8px;" :loading = "loading">确认</a-button>
            </template>
            <div class="table-page-search-wrapper" >
                <a-form-model layout="inline" ref="form" :model="formState" :rules="validatorRules">
                    <a-row :gutter="24">
                        <a-col :md="24" >
                            <a-form-model-item label="姓名"  :labelCol="{offset: 2}">
                                <a-input placeholder="请输入" v-model="formState.name" disabled/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" >
                            <a-form-model-item label="组织"  prop="name" :labelCol="{offset: 2}">
                                <a-input  v-model="formState.orgName" disabled/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" >
                            <a-form-model-item label="部门"  prop="name" :labelCol="{offset: 2}">
                                <a-input  v-model="formState.sysOrgCode" disabled/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" >
                            <a-form-model-item label="当前薪资"  prop="totalNum" >
                                <a-input placeholder="" v-model="formState.beforeAdjustment" disabled/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24">
                            <a-form-model-item label="加薪" :labelCol="{offset: 1}" prop="salaryIncrease">
                                <a-input placeholder="请输入" v-model="formState.salaryIncrease"  @change="changeSalaryIncrease" :disabled="formState.salaryReduction!==''&&formState.salaryReduction"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24">
                            <a-form-model-item label="减薪" :labelCol="{offset: 1}" prop="salaryReduction">
                                <a-input placeholder="请输入" v-model="formState.salaryReduction" @change="changeSalaryReduction" :disabled="formState.salaryIncrease!==''&&formState.salaryIncrease"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24">
                            <a-form-model-item label="调后薪资">
                                <a-input placeholder="请输入" v-model="formState.afterAdjustment"  disabled/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" > 
                            <a-form-model-item label="调整说明"  class="nresume" style="height:100px !important">
                                <a-input type="textarea" placeholder="请输入" v-model="formState.remarks" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
      </a-modal>
    </div>
</template>
<script>
    
      import moment from 'moment'
      import pick from 'lodash.pick'
      import { FormTypes } from '@/utils/JEditableTableUtil'
      import { putAction,getAction,postAction } from '@/api/manage'
      export default {
        name: 'ChangeBasicSalary',
        components: {
            moment,
        },
        data() {
          return {
              formState:{},
              visible:false,
              loading:false,
              validatorRules: {
                salaryIncrease: [{required: true,message: '请输入!'}],
                salaryReduction: [{required: true,message: '请输入!'}],
              },
          }
        },
        created(){
        },
        watch: {
        },
        methods: {
            handleCancel(){
                this.visible = false
                this.formState = {}
                this.validatorRules.salaryReduction[0].required = true
                this.validatorRules.salaryIncrease[0].required = true
                this.RlabelCol={offset: 1 }
                this.IlabelCol={offset: 1 }
            },
            handleOk(){
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true
                        postAction('/salary/salaryChangeRecord/saveSalaryChangeRecord', this.formState).then((res) => {
                            if (res.success) {
                                this.$message.success('添加成功！');
                                this.handleCancel()
                                this.$emit('ok')
                            } else {
                                this.$message.error(res.message);
                            }
                        }).finally(() => {
                            this.loading = false
                        })
                    }
                })
                    
            },
            getData(record){
                this.formState={
                    userId :record.userId,
                    name:record.name,
                    orgName:record.orgName,
                    sysOrgCode:record.sysOrgCode,
                    beforeAdjustment:record.beforeAdjustment,
                    salaryIncrease:record.salaryIncrease,
                    salaryReduction:record.salaryReduction,
                    afterAdjustment:record.afterAdjustment,
                    remarks:record.remarks,
                    code:record.code,
                    cardNo:record.cardNo,
                }
            },
            changeSalaryIncrease(data){
                this.formState.afterAdjustment=Number(this.formState.beforeAdjustment)+Number(this.formState.salaryIncrease)
                if(!this.formState.salaryIncrease||this.formState.salaryIncrease==''){
                    this.validatorRules.salaryReduction[0].required = true
                }else{
                    this.validatorRules.salaryReduction[0].required = false
                }
                this.validatorRules.salaryIncrease[0].required = true
                this.$refs.form.clearValidate();
            },
            changeSalaryReduction(){
                this.formState.afterAdjustment=Number(this.formState.beforeAdjustment)-Number(this.formState.salaryReduction)
                if(!this.formState.salaryReduction||this.formState.salaryReduction==''){
                    this.validatorRules.salaryIncrease[0].required = true
                }else{
                    this.validatorRules.salaryIncrease[0].required = false
                }
                this.validatorRules.salaryReduction[0].required = true
                this.$refs.form.clearValidate();
            }
        }
    }
    </script>
    
    <style scoped lang="less">
    /deep/ .nresume .ant-input{
      height: 100px !important;
    }

    /deep/ .ant-select{
      width: 100%;
    }
    .form-table-heard:before {
          content: '*';
          color: red;
    }
    /deep/ .ant-calendar-picker{
      width: 113px !important;
    }
    /deep/.ant-modal-root>.ant-modal-wrap>.ant-modal {
      min-width: 0 !important;
    }
    /deep/.table-page-search-wrapper .ant-form-inline .ant-form-item>.ant-form-item-label{
        padding-right:0 !important
    }
    </style>