Skip to content

薪
薪瑞通-前端
Commit cf089dbd authored by 谢子梦's avatar 谢子梦
Browse files
Options

名称-合同新增修改

parent 1aa6c479
Show whitespace changes
Inline Side-by-side
Showing with 1928 additions and 399 deletions
.env.development
View file @ cf089dbd
# 页面标题 # 页面标题
VUE_APP_TITLE = NewStyle VUE_APP_TITLE = '薪瑞通'
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'
# NewStyle/开发环境 # 薪瑞通/开发环境
VUE_APP_BASE_API = 'http://localhost:8080/xrt' VUE_APP_BASE_API = 'http://192.168.31.195:8080/xrt'
# 请求、响应数据加密 # 请求、响应数据加密
VUE_APP_AES_ENCRYPT_ENABLED = 'false' VUE_APP_AES_ENCRYPT_ENABLED = 'false'
# 请求数据加密秘钥串 # 请求数据加密秘钥串
......
.env.production
View file @ cf089dbd
# 页面标题 # 页面标题
VUE_APP_TITLE = NewStyle VUE_APP_TITLE = '薪瑞通'
# 生产环境配置 # 生产环境配置
ENV = 'production' ENV = 'production'
# NewStyle/生产环境 # 薪瑞通/生产环境
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API = '/prod-api'
# 请求、响应数据加密 # 请求、响应数据加密
VUE_APP_AES_ENCRYPT_ENABLED = 'false' VUE_APP_AES_ENCRYPT_ENABLED = 'false'
......
.env.staging
View file @ cf089dbd
# 页面标题 # 页面标题
VUE_APP_TITLE = NewStyle VUE_APP_TITLE = '薪瑞通'
NODE_ENV = production NODE_ENV = production
# 测试环境配置 # 测试环境配置
ENV = 'staging' ENV = 'staging'
# NewStyle/测试环境 # 薪瑞通/测试环境
VUE_APP_BASE_API = '/stage-api' VUE_APP_BASE_API = '/stage-api'
# 请求、响应数据加密 # 请求、响应数据加密
VUE_APP_AES_ENCRYPT_ENABLED = 'true' VUE_APP_AES_ENCRYPT_ENABLED = 'true'
......
package.json
View file @ cf089dbd
{ {
"name": "ruoyi-vue-web", "name": "ruoyi-vue-web",
"version": "3.8.3", "version": "3.8.3",
"description": "NewStyle", "description": "薪瑞通",
"author": "Tellsea", "author": "Tellsea",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
......
src/layout/components/Sidebar/Logo.vue
View file @ cf089dbd
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div class="sidebar-logo-container" :class="{ 'collapse': collapse }"
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 v-else class="sidebar-title"
:style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{
title }} </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 class="sidebar-title"
:style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{
title }} </h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
...@@ -35,7 +40,7 @@ export default { ...@@ -35,7 +40,7 @@ export default {
}, },
data() { data() {
return { return {
title: 'NewStyle', title: '薪瑞通',
logo: logoImg logo: logoImg
} }
} }
......
src/views/business/component/paidUsers.vue 0 → 100644
View file @ cf089dbd
<template>
<!-- 新增发薪用户表单 -->
<div class="app-container">
<!-- 表单 -->
<el-form :model="formData" ref="formRef" :rules="formRules" class="formData" label-width="80px"
label-position="left">
<!-- 基本信息部分 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span class="cardHeartTitle">基本信息</span>
</div>
<div class="cardMain">
<el-row :gutter="56">
<el-col :span="8">
<el-form-item label="所属合同" prop="contractName">
<el-input v-model="formData.contractName" :disabled="true"
placeholder="请输入所属合同"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="人员名称" prop="userName">
<el-input v-model="formData.userName" placeholder="请输入人员名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="人员性别" prop="gender">
<!-- <el-input v-model="formData.gender" placeholder="请选择人员性别"></el-input> -->
<el-select v-model="formData.gender" placeholder="请选择人员性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="身份证号" prop="userCode">
<el-input v-model="formData.userCode" placeholder="请输入身份证号"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="收款账号" prop="payeeAccNo">
<el-input v-model="formData.payeeAccNo" placeholder="请输入收款账号"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="岗位名称" prop="postName">
<el-input v-model="formData.postName" placeholder="请输入岗位名称"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="岗位工资" prop="postWage">
<el-input v-model="formData.postWage" placeholder="请输入岗位工资"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="应发工资" prop="salaryPayable">
<el-input v-model="formData.salaryPayable" placeholder="请输入应发工资"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="实发金额" prop="actualPayable">
<el-input v-model="formData.actualPayable" placeholder="请输入实发金额"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="管理费" prop="operationCost">
<el-input v-model="formData.operationCost" placeholder="请输入管理费"></el-input>
</el-form-item>
</el-col> -->
<!-- <el-col :span="8">
<el-form-item label="所属部门" prop="deptId">
<el-input v-model="formData.deptId" placeholder="请输入所属部门"></el-input>
</el-form-item>
</el-col> -->
</el-row>
</div>
</el-card>
<!-- 缴纳基数 -->
<el-card class="box-card" style="margin-top: 22px;">
<div slot="header" class="clearfix">
<span class="cardHeartTitle">参数信息</span>
</div>
<div class="cardMain">
<el-row :gutter="56">
<el-col :span="8">
<div class="parameterFirst">缴费基数(元)</div>
</el-col>
<el-col :span="5">
<div class="parameterConter">单位保险占比(%)</div>
</el-col>
<el-col :span="3">
<div class="parameterConter">单位保险金额(元)</div>
</el-col>
<el-col :span="5">
<div class="parameterConter">个人保险占比(%)</div>
</el-col>
<el-col :span="3">
<div class="parameterConter">个人保险金额(元)</div>
</el-col>
</el-row>
<!-- 养老部分 -->
<el-row :gutter="56" style="margin-top: 22px;">
<el-col :span="2">
<div class="projectTitle">养老保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="ylbxBase">
<el-input-number @change="ylbxBaseChange" v-model="formData.ylbxBase"
placeholder="请输入养老保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ylbxCompanyRate">
<el-input-number @change="ylbxCompanyRateChange" v-model="formData.ylbxCompanyRate"
placeholder="请输入养老保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ylbxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ylbxPersonalRate">
<el-input-number @change="ylbxPersonalRateChange" v-model="formData.ylbxPersonalRate"
placeholder="请输入养老保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ylbxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 工伤保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">工伤保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="gsbxBase">
<el-input-number @change="gsbxBaseChange" v-model="formData.gsbxBase"
placeholder="请输入工伤保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="gsbxCompanyRate">
<el-input-number @change="gsbxCompanyRateChange" v-model="formData.gsbxCompanyRate"
placeholder="请输入工伤保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ gsbxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="gsbxPersonalRate">
<el-input-number @change="gsbxPersonalRateChange" v-model="formData.gsbxPersonalRate"
placeholder="请输入工伤保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ gsbxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 医疗保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">医疗保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="ysbxBase">
<el-input-number @change="ysbxBaseChange" v-model="formData.ysbxBase"
placeholder="请输入医疗保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ysbxCompanyRate">
<el-input-number @change="ysbxCompanyRateChange" v-model="formData.ysbxCompanyRate"
placeholder="请输入医疗保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ysbxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ysbxPersonalRate">
<el-input-number @change="ysbxPersonalRateChange" v-model="formData.ysbxPersonalRate"
placeholder="请输入医疗保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ysbxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 失业保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">失业保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="sybxBase">
<el-input-number @change="sybxBaseChange" v-model="formData.sybxBase"
placeholder="请输入失业保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="sybxCompanyRate">
<el-input-number @change="sybxCompanyRateChange" v-model="formData.sybxCompanyRate"
placeholder="请输入失业保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ sybxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="sybxPersonalRate">
<el-input-number @change="sybxPersonalRateChange" v-model="formData.sybxPersonalRate"
placeholder="请输入失业保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ sybxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 生育保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">生育保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="syubxBase">
<el-input-number @change="syubxBaseChange" v-model="formData.syubxBase"
placeholder="请输入生育保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="syubxCompanyRate">
<el-input-number @change="syubxCompanyRateChange" v-model="formData.syubxCompanyRate"
placeholder="请输入生育保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ syubxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="syubxPersonalRate">
<el-input-number @change="syubxPersonalRateChange" v-model="formData.syubxPersonalRate"
placeholder="请输入生育保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ syubxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 公积金 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">公积金</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="providentFundBase">
<el-input-number @change="providentFundBaseChange" v-model="formData.providentFundBase"
placeholder="请输入公积金基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="providentFundCompanyRate">
<el-input-number @change="providentFundCompanyRateChange"
v-model="formData.providentFundCompanyRate" placeholder="请输入公积金单位占比" :precision="2"
:step="1" :min="0" :max="100" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ providentFundCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="providentFundPersonalRate">
<el-input-number @change="providentFundPersonalRateChange"
v-model="formData.providentFundPersonalRate" placeholder="请输入公积金个人占比" :precision="2"
:step="1" :min="0" :max="100" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ providentFundPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 合计金额 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">合计金额</div>
</el-col>
<el-col :span="3" :offset="11">
<div class="amountMain">{{ companyTotalAmount }}</div>
</el-col>
<el-col :span="3" :offset="5">
<div class="amountMain">{{ personTotalAmount }}</div>
</el-col>
</el-row>
<!-- 承担方式部分 -->
<el-row :gutter="56" style="margin-top: 28px;">
<el-col :span="2">
<div class="projectTitle">承担方式</div>
</el-col>
<el-col :span="5">
<el-radio-group v-model="formData.bearType">
<el-radio :label="1">各自承担</el-radio>
<el-radio :label="2">个人全部承担</el-radio>
</el-radio-group>
</el-col>
</el-row>
<!-- 计算方式 -->
<el-row :gutter="56" style="margin-top: 28px;">
<el-col :span="2">
<div class="projectTitle">计算方式</div>
</el-col>
<el-col :span="5">
<el-radio-group v-model="formData.calculaType">
<el-radio :label="1">正推</el-radio>
<el-radio :label="2">倒推</el-radio>
</el-radio-group>
</el-col>
</el-row>
</div>
</el-card>
<!-- 薪资组成 -->
<el-card class="box-card" style="margin-top: 22px;" v-if="formData.id">
<el-row :gutter="64" style="margin-top: 12px;">
<el-col :span="6">
<span>岗位工资：</span>{{ formData.postWage || '--' }}
</el-col>
<el-col :span="6">
<span>应发工资：</span>{{ formData.salaryPayable || '--' }}
</el-col>
<el-col :span="6">
<span>管理费：</span>{{ formData.operationCost || '--' }}
</el-col>
<el-col :span="6">
<span>实发工资：</span>{{ formData.actualPayable || '--' }}
</el-col>
</el-row>
</el-card>
</el-form>
<div class="fixdBottom">
<div class="fixdBottomMain">
<el-button type="info" style="width:100px;font-size:14px;" @click="goBackFN">返 回</el-button>
<el-button type="primary" style="width:100px;font-size:14px;" @click="submitFN">确 认</el-button>
</div>
</div>
</div>
</template>
<script>
import { getOutPersonal, addOutPersonal, updateOutPersonal } from "@/api/business/outPersonal";
export default {
name: "PaidUsers",
data() {
return {
formData: {
contractId: null,
userName: null,
userCode: null,
payeeAccType: null,
payeeAccNo: null,
postName: null,
postWage: null,
salaryPayable: null,
actualPayable: null,
bearType: 1,
sybxBase: null,
sybxCompanyRate: null,
sybxPersonalRate: null,
ylbxBase: null,
ylbxCompanyRate: null,
ylbxPersonalRate: null,
gsbxBase: null,
gsbxCompanyRate: null,
gsbxPersonalRate: null,
ysbxBase: null,
ysbxCompanyRate: null,
ysbxPersonalRate: null,
syubxBase: null,
syubxCompanyRate: null,
syubxPersonalRate: null,
providentFundBase: null,
providentFundCompanyRate: null,
providentFundPersonalRate: null,
operationCost: null,
deptId: null,
gender: null,
calculaType: 1,
},
formRules: {
contractId: [
{ required: true, message: "所属合同不能为空", trigger: "blur" }
],
userName: [
{ required: true, message: "人员名称不能为空", trigger: "blur" }
],
userCode: [
{ required: true, message: "身份证号不能为空", trigger: "blur" }
],
payeeAccType: [
{ required: true, message: "收款账号类型;1-银行卡;2-支付宝不能为空", trigger: "change" }
],
payeeAccNo: [
{ required: true, message: "收款账号不能为空", trigger: "blur" }
],
postName: [
{ required: true, message: "岗位名称不能为空", trigger: "blur" }
],
postWage: [
{ required: true, message: "岗位工资不能为空", trigger: "blur" }
],
salaryPayable: [
{ required: true, message: "应发工资不能为空", trigger: "blur" }
],
actualPayable: [
{ required: true, message: "实发金额不能为空", trigger: "blur" }
],
bearType: [
{ required: true, message: "五险一金承担方式:1、各自承担;2、个人承担不能为空", trigger: "change" }
],
sybxBase: [
{ required: true, message: "失业保险缴费基数不能为空", trigger: "blur" }
],
sybxCompanyRate: [
{ required: true, message: "失业保险公司承担比例不能为空", trigger: "blur" }
],
sybxPersonalRate: [
{ required: true, message: "失业保险个人承担比例不能为空", trigger: "blur" }
],
ylbxBase: [
{ required: true, message: "养老保险缴费基数不能为空", trigger: "blur" }
],
ylbxCompanyRate: [
{ required: true, message: "养老保险公司承担比例不能为空", trigger: "blur" }
],
ylbxPersonalRate: [
{ required: true, message: "养老保险个人承担比例不能为空", trigger: "blur" }
],
gsbxBase: [
{ required: true, message: "工伤保险缴费基数不能为空", trigger: "blur" }
],
gsbxCompanyRate: [
{ required: true, message: "工伤保险公司承担比例不能为空", trigger: "blur" }
],
gsbxPersonalRate: [
{ required: true, message: "工伤保险个人承担比例不能为空", trigger: "blur" }
],
ysbxBase: [
{ required: true, message: "医疗保险缴费基数(可包含生育险)不能为空", trigger: "blur" }
],
ysbxCompanyRate: [
{ required: true, message: "医疗保险公司承担比例不能为空", trigger: "blur" }
],
ysbxPersonalRate: [
{ required: true, message: "医疗保险个人承担比例不能为空", trigger: "blur" }
],
syubxBase: [
{ required: true, message: "生育保险缴费基数不能为空", trigger: "blur" }
],
syubxCompanyRate: [
{ required: true, message: "生育保险公司承担比例不能为空", trigger: "blur" }
],
syubxPersonalRate: [
{ required: true, message: "生育保险个人承担比例不能为空", trigger: "blur" }
],
providentFundBase: [
{ required: true, message: "公积金缴费基数不能为空", trigger: "blur" }
],
providentFundCompanyRate: [
{ required: true, message: "公积金企业承担比例不能为空", trigger: "blur" }
],
providentFundPersonalRate: [
{ required: true, message: "公积金个人承担比例不能为空", trigger: "blur" }
],
operationCost: [
{ required: true, message: "管理费不能为空", trigger: "blur" }
],
deptId: [
{ required: true, message: "所属部门不能为空", trigger: "blur" }
],
gender: [
{ required: true, message: "性别不能为空", trigger: "change" }
]
},
radio: 1,
ylbxCompanyRateAmount: '--',//养老保险单位金额
ylbxPersonalRateAmount: '--',//养老保险个人金额
gsbxCompanyRateAmount: '--',//工伤保险单位金额
gsbxPersonalRateAmount: '--',//工伤保险个人金额
ysbxCompanyRateAmount: '--',//医疗保险单位金额
ysbxPersonalRateAmount: '--',//医疗保险个人金额
sybxCompanyRateAmount: '--',//失业保险单位金额
sybxPersonalRateAmount: '--',//个人保险个人金额
syubxCompanyRateAmount: '--',//生育保险单位金额
syubxPersonalRateAmount: '--',//生育保险个人金额
providentFundCompanyRateAmount: '--',//公积金单位金额
providentFundPersonalRateAmount: '--',//公积金个人金额
companyTotalAmount: '--',//单位总金额
personTotalAmount: '--',//个人总金额
}
},
created() { },
mounted() {
this.reset()
if (this.$route.query.contractId) {
this.formData.contractId = this.$route.query.contractId
}
if (this.$route.query.contractName) {
this.formData.contractName = this.$route.query.contractName
}
},
methods: {
// 计算占比总金额方法
TotalAmountFN() {
// 单位总金额计算
this.companyTotalAmount = 0
if (this.ylbxCompanyRateAmount != '--') {
this.companyTotalAmount += Number(this.ylbxCompanyRateAmount)
}
if (this.gsbxCompanyRateAmount != '--') {
this.companyTotalAmount += Number(this.gsbxCompanyRateAmount)
}
if (this.ysbxCompanyRateAmount != '--') {
this.companyTotalAmount += Number(this.ysbxCompanyRateAmount)
}
if (this.sybxCompanyRateAmount != '--') {
this.companyTotalAmount += Number(this.sybxCompanyRateAmount)
}
if (this.syubxCompanyRateAmount != '--') {
this.companyTotalAmount += Number(this.syubxCompanyRateAmount)
}
if (this.providentFundCompanyRateAmount != '--') {
this.companyTotalAmount += Number(this.providentFundCompanyRateAmount)
}
if (this.companyTotalAmount == 0) {
this.companyTotalAmount = '--'
}
// 个人总金额方法
this.personTotalAmount = 0
if (this.ylbxPersonalRateAmount != '--') {
this.personTotalAmount += Number(this.ylbxPersonalRateAmount)
}
if (this.gsbxPersonalRateAmount != '--') {
this.personTotalAmount += Number(this.gsbxPersonalRateAmount)
}
if (this.ysbxPersonalRateAmount != '--') {
this.personTotalAmount += Number(this.ysbxPersonalRateAmount)
}
if (this.sybxPersonalRateAmount != '--') {
this.personTotalAmount += Number(this.sybxPersonalRateAmount)
}
if (this.syubxPersonalRateAmount != '--') {
this.personTotalAmount += Number(this.syubxPersonalRateAmount)
}
if (this.providentFundPersonalRateAmount != '--') {
this.personTotalAmount += Number(this.providentFundPersonalRateAmount)
}
if (this.personTotalAmount == 0) {
this.personTotalAmount = '--'
}
},
// 获取人员详情方法
getOutPersonalFN(id) {
getOutPersonal(id).then(res => {
})
},
// 确定按钮方法
submitFN() {
this.$refs["formRef"].validate(valid => {
if (valid) {
if (this.formData.id != null) {
updateOutPersonal(this.formData).then(response => {
this.$modal.msgSuccess("修改成功");
this.$router.push({ path: "/business/payOutPersonal" })
});
} else {
addOutPersonal(this.formData).then(response => {
this.$modal.msgSuccess("新增成功");
this.$router.push({ path: "/business/payOutPersonal" })
});
}
} else {
this.$modal.msgWarning("请检查表单数据是否填写完整");
}
});
},
// 表单重置
reset() {
this.form = {
contractId: null,
userName: null,
userCode: null,
payeeAccType: null,
payeeAccNo: null,
postName: null,
postWage: null,
salaryPayable: null,
actualPayable: null,
bearType: 1,
sybxBase: null,
sybxCompanyRate: null,
sybxPersonalRate: null,
ylbxBase: null,
ylbxCompanyRate: null,
ylbxPersonalRate: null,
gsbxBase: null,
gsbxCompanyRate: null,
gsbxPersonalRate: null,
ysbxBase: null,
ysbxCompanyRate: null,
ysbxPersonalRate: null,
syubxBase: null,
syubxCompanyRate: null,
syubxPersonalRate: null,
providentFundBase: null,
providentFundCompanyRate: null,
providentFundPersonalRate: null,
operationCost: null,
deptId: null,
gender: null,
calculaType: 1,
};
this.resetForm("formRef");
},
// 返回功能
goBackFN() {
this.reset()
this.$router.push({ path: "/business/payOutPersonal" })
},
// 公积金个人比例变化执行
providentFundPersonalRateChange(e) {
if (this.formData.providentFundBase > 0 && e > 0) {
this.providentFundPersonalRateAmount = (this.formData.providentFundBase * e / 100).toFixed(2)
} else {
this.providentFundPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 公积金单位比例变化执行
providentFundCompanyRateChange(e) {
if (this.formData.providentFundBase > 0 && e > 0) {
this.providentFundCompanyRateAmount = (this.formData.providentFundBase * e / 100).toFixed(2)
} else {
this.providentFundCompanyRateAmount = '--'
}
this.TotalAmountFN()
},
// 公积金基数变化执行
providentFundBaseChange(e) {
if (this.formData.providentFundCompanyRate > 0 && this.formData.providentFundBase > 0) {
this.providentFundCompanyRateAmount = (this.formData.providentFundBase * this.formData.providentFundCompanyRate / 100).toFixed(2)
} else {
this.providentFundCompanyRateAmount = '--'
}
if (this.formData.providentFundPersonalRate > 0 && this.formData.providentFundBase > 0) {
this.providentFundPersonalRateAmount = (this.formData.providentFundBase * this.formData.providentFundPersonalRate / 100).toFixed(2)
} else {
this.providentFundPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 生育保险个人比例变化执行
syubxPersonalRateChange(e) {
if (this.formData.syubxBase > 0 && e > 0) {
this.syubxPersonalRateAmount = (this.formData.syubxBase * e / 100).toFixed(2)
} else {
this.syubxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 生育保险单位比例变化执行
syubxCompanyRateChange(e) {
if (this.formData.syubxBase > 0 && e > 0) {
this.syubxCompanyRateAmount = (this.formData.syubxBase * e / 100).toFixed(2)
} else {
this.syubxCompanyRateAmount = '--'
}
this.TotalAmountFN()
},
// 生育保险基数变化执行
syubxBaseChange(e) {
if (this.formData.syubxCompanyRate > 0 && this.formData.syubxBase > 0) {
this.syubxCompanyRateAmount = (this.formData.syubxBase * this.formData.syubxCompanyRate / 100).toFixed(2)
} else {
this.syubxCompanyRateAmount = '--'
}
if (this.formData.syubxPersonalRate > 0 && this.formData.syubxBase > 0) {
this.syubxPersonalRateAmount = (this.formData.syubxBase * this.formData.syubxPersonalRate / 100).toFixed(2)
} else {
this.syubxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 失业保险个人比例变化执行
sybxPersonalRateChange(e) {
if (this.formData.sybxBase > 0 && e > 0) {
this.sybxPersonalRateAmount = (this.formData.sybxBase * e / 100).toFixed(2)
} else {
this.sybxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 失业保险单位比例变化执行
sybxCompanyRateChange(e) {
if (this.formData.sybxBase > 0 && e > 0) {
this.sybxCompanyRateAmount = (this.formData.sybxBase * e / 100).toFixed(2)
} else {
this.sybxCompanyRateAmount = '--'
}
this.TotalAmountFN()
},
// 失业保险基数金额变化执行
sybxBaseChange(e) {
if (this.formData.sybxCompanyRate > 0 && this.formData.sybxBase > 0) {
this.sybxCompanyRateAmount = (this.formData.sybxBase * this.formData.sybxCompanyRate / 100).toFixed(2)
} else {
this.sybxCompanyRateAmount = '--'
}
if (this.formData.sybxPersonalRate > 0 && this.formData.sybxBase > 0) {
this.sybxPersonalRateAmount = (this.formData.sybxBase * this.formData.sybxPersonalRate / 100).toFixed(2)
} else {
this.sybxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 医疗保险个人比例变化
ysbxPersonalRateChange(e) {
if (this.formData.ysbxBase > 0 && e > 0) {
this.ysbxPersonalRateAmount = (this.formData.ysbxBase * e / 100).toFixed(2)
} else {
this.ysbxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 医疗保险单位比例变化
ysbxCompanyRateChange(e) {
if (this.formData.ysbxBase > 0 && e > 0) {
this.ysbxCompanyRateAmount = (this.formData.ysbxBase * e / 100).toFixed(2)
} else {
this.ysbxCompanyRateAmount = '--'
}
this.TotalAmountFN()
},
// 医疗保险基数变化执行
ysbxBaseChange(e) {
if (this.formData.ysbxCompanyRate > 0 && this.formData.ysbxBase > 0) {
this.ysbxCompanyRateAmount = (this.formData.ysbxBase * this.formData.ysbxCompanyRate / 100).toFixed(2)
} else {
this.ysbxCompanyRateAmount = '--'
}
if (this.formData.ysbxPersonalRate > 0 && this.formData.ysbxBase > 0) {
this.ysbxPersonalRateAmount = (this.formData.ysbxBase * this.formData.ysbxPersonalRate / 100).toFixed(2)
} else {
this.ysbxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 工伤保险个人比例变化执行
gsbxPersonalRateChange(e) {
if (this.formData.gsbxBase > 0 && e > 0) {
this.gsbxPersonalRateAmount = (this.formData.gsbxBase * e / 100).toFixed(2)
} else {
this.gsbxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 工伤保险单位比例变化执行
gsbxCompanyRateChange(e) {
if (this.formData.gsbxBase > 0 && e > 0) {
this.gsbxCompanyRateAmount = (this.formData.gsbxBase * e / 100).toFixed(2)
} else {
this.gsbxCompanyRateAmount = '--'
}
this.TotalAmountFN()
},
// 工伤保险基数变化
gsbxBaseChange(e) {
if (this.formData.ylbxCompanyRate > 0 && this.formData.gsbxBase > 0) {
this.gsbxCompanyRateAmount = (this.formData.gsbxBase * this.formData.gsbxCompanyRate / 100).toFixed(2)
} else {
this.gsbxCompanyRateAmount = '--'
}
if (this.formData.gsbxPersonalRate > 0 && this.formData.gsbxBase > 0) {
this.gsbxPersonalRateAmount = (this.formData.gsbxBase * this.formData.gsbxPersonalRate / 100).toFixed(2)
} else {
this.gsbxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 个人养老保险百分比变化
ylbxPersonalRateChange(e) {
if (this.formData.ylbxBase > 0 && e > 0) {
this.ylbxPersonalRateAmount = (this.formData.ylbxBase * e / 100).toFixed(2)
} else {
this.ylbxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
// 单位养老保险百分比变化
ylbxCompanyRateChange(e) {
if (this.formData.ylbxBase > 0 && e > 0) {
this.ylbxCompanyRateAmount = (this.formData.ylbxBase * e / 100).toFixed(2)
} else {
this.ylbxCompanyRateAmount = '--'
}
this.TotalAmountFN()
},
// 养老保险基数变化
ylbxBaseChange(e) {
if (this.formData.ylbxCompanyRate > 0 && this.formData.ylbxBase > 0) {
this.ylbxCompanyRateAmount = (this.formData.ylbxBase * this.formData.ylbxCompanyRate / 100).toFixed(2)
} else {
this.ylbxCompanyRateAmount = '--'
}
if (this.formData.ylbxPersonalRate > 0 && this.formData.ylbxBase > 0) {
this.ylbxPersonalRateAmount = (this.formData.ylbxBase * this.formData.ylbxPersonalRate / 100).toFixed(2)
} else {
this.ylbxPersonalRateAmount = '--'
}
this.TotalAmountFN()
},
},
}
</script>
<style scoped lang="scss">
.app-container ::v-deep {
// 表单部分样式
.formData {
.box-card {
// 卡片头部样式
.clearfix {
.cardHeartTitle {
font-size: 22px;
font-weight: 600;
}
}
// 控制头部的底部分割线
.el-card__header {
border-bottom: none;
}
// 表单主题部分样式
.cardMain {
// 表单label样式
.el-form-item__label {
color: #000;
font-size: 14px;
font-weight: 530;
}
// 参数信息-首个参数
.parameterFirst {
width: 100%;
padding-left: 25%;
text-align: center;
color: #000;
font-size: 14px;
font-weight: 530;
}
// 参数信息-剩余标题
.parameterConter {
width: 100%;
text-align: center;
color: #000;
font-size: 14px;
font-weight: 530;
}
// 金额盒子样式
.amountMain {
width: 100%;
text-align: center;
}
.el-input-number--small {
width: 100% !important;
}
.projectTitle {
color: #000;
font-size: 14px;
font-weight: 530;
}
}
}
}
// 底部操作按钮部分
.fixdBottom {
margin-top: 22px;
display: flex;
align-items: center;
justify-content: center;
.fixdBottomMain {
width: 270px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
</style>
\ No newline at end of file
src/views/business/component/staffForm.vue 0 → 100644
View file @ cf089dbd
<template>
<!-- 新增发薪合同表单 -->
<div class="app-container">
<!-- 表单 -->
<el-form :model="formData" ref="formRef" :rules="formRules" class="formData" label-width="80px"
label-position="left">
<!-- 基本信息部分 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span class="cardHeartTitle">基本信息</span>
</div>
<div class="cardMain">
<el-row :gutter="56">
<el-col :span="8">
<el-form-item label="合同名称" prop="contractName">
<el-input v-model="formData.contractName" placeholder="请输入合同名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="formData.contractCode" placeholder="请输入合同编号"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所在单位" prop="groupName">
<el-input v-model="formData.groupName" placeholder="请输入所在单位"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="管理费" prop="operationCost">
<el-input v-model="formData.operationCost" placeholder="请输入管理费"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="所属部门" prop="deptId">
<el-input v-model="formData.deptId" placeholder="请输入所属部门"></el-input>
</el-form-item>
</el-col> -->
<el-col :span="10">
<el-form-item label-width="180px" label="单位编码(社会信用代码)" prop="groupCode">
<el-input v-model="formData.groupCode" placeholder="请输入单位编码(社会信用代码)"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-card>
<!-- 缴纳基数 -->
<el-card class="box-card" style="margin-top: 22px;">
<div slot="header" class="clearfix">
<span class="cardHeartTitle">参数信息</span>
</div>
<div class="cardMain">
<el-row :gutter="56">
<el-col :span="8">
<div class="parameterFirst">缴费基数(元)</div>
</el-col>
<el-col :span="5">
<div class="parameterConter">单位保险占比(%)</div>
</el-col>
<el-col :span="3">
<div class="parameterConter">单位保险金额(元)</div>
</el-col>
<el-col :span="5">
<div class="parameterConter">个人保险占比(%)</div>
</el-col>
<el-col :span="3">
<div class="parameterConter">个人保险金额(元)</div>
</el-col>
</el-row>
<!-- 养老部分 -->
<el-row :gutter="56" style="margin-top: 22px;">
<el-col :span="2">
<div class="projectTitle">养老保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="ylbxBase">
<el-input-number @change="ylbxBaseChange" v-model="formData.ylbxBase"
placeholder="请输入养老保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ylbxCompanyRate">
<el-input-number @change="ylbxCompanyRateChange" v-model="formData.ylbxCompanyRate"
placeholder="请输入养老保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ylbxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ylbxPersonalRate">
<el-input-number @change="ylbxPersonalRateChange" v-model="formData.ylbxPersonalRate"
placeholder="请输入养老保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ylbxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 工伤保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">工伤保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="gsbxBase">
<el-input-number @change="gsbxBaseChange" v-model="formData.gsbxBase"
placeholder="请输入工伤保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="gsbxCompanyRate">
<el-input-number @change="gsbxCompanyRateChange" v-model="formData.gsbxCompanyRate"
placeholder="请输入工伤保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ gsbxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="gsbxPersonalRate">
<el-input-number @change="gsbxPersonalRateChange" v-model="formData.gsbxPersonalRate"
placeholder="请输入工伤保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ gsbxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 医疗保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">医疗保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="ysbxBase">
<el-input-number @change="ysbxBaseChange" v-model="formData.ysbxBase"
placeholder="请输入医疗保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ysbxCompanyRate">
<el-input-number @change="ysbxCompanyRateChange" v-model="formData.ysbxCompanyRate"
placeholder="请输入医疗保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ysbxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="ysbxPersonalRate">
<el-input-number @change="ysbxPersonalRateChange" v-model="formData.ysbxPersonalRate"
placeholder="请输入医疗保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ ysbxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 失业保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">失业保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="sybxBase">
<el-input-number @change="sybxBaseChange" v-model="formData.sybxBase"
placeholder="请输入失业保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="sybxCompanyRate">
<el-input-number @change="sybxCompanyRateChange" v-model="formData.sybxCompanyRate"
placeholder="请输入失业保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ sybxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="sybxPersonalRate">
<el-input-number @change="sybxPersonalRateChange" v-model="formData.sybxPersonalRate"
placeholder="请输入失业保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ sybxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 生育保险 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">生育保险</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="syubxBase">
<el-input-number @change="syubxBaseChange" v-model="formData.syubxBase"
placeholder="请输入生育保险基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="syubxCompanyRate">
<el-input-number @change="syubxCompanyRateChange" v-model="formData.syubxCompanyRate"
placeholder="请输入生育保险单位占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ syubxCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="syubxPersonalRate">
<el-input-number @change="syubxPersonalRateChange" v-model="formData.syubxPersonalRate"
placeholder="请输入生育保险个人占比" :precision="2" :step="1" :min="0" :max="100"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ syubxPersonalRateAmount }}</div>
</el-col>
</el-row>
<!-- 公积金 -->
<el-row :gutter="56" style="margin-top: 12px;">
<el-col :span="2">
<div class="projectTitle">公积金</div>
</el-col>
<el-col :span="6">
<el-form-item label-width="0px" prop="providentFundBase">
<el-input-number @change="providentFundBaseChange" v-model="formData.providentFundBase"
placeholder="请输入公积金基数" :precision="2" :step="1" :min="0"
controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="providentFundCompanyRate">
<el-input-number @change="providentFundCompanyRateChange"
v-model="formData.providentFundCompanyRate" placeholder="请输入公积金单位占比" :precision="2"
:step="1" :min="0" :max="100" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ providentFundCompanyRateAmount }}</div>
</el-col>
<el-col :span="5">
<el-form-item label-width="0px" prop="providentFundPersonalRate">
<el-input-number @change="providentFundPersonalRateChange"
v-model="formData.providentFundPersonalRate" placeholder="请输入公积金个人占比" :precision="2"
:step="1" :min="0" :max="100" controls-position="right"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="3">
<div class="amountMain">{{ providentFundPersonalRateAmount }}</div>
</el-col>
</el-row>
</div>
</el-card>
</el-form>
<div class="fixdBottom">
<div class="fixdBottomMain">
<el-button type="info" style="width:100px;font-size:14px;" @click="goBackFN">返 回</el-button>
<el-button type="primary" style="width:100px;font-size:14px;" @click="submitFN">确 认</el-button>
</div>
</div>
</div>
</template>
<script>
import { getOutContract, addOutContract, updateOutContract } from "@/api/business/outContract";
export default {
name: "StaffForm",
data() {
return {
formData: {
contractName: null,
contractCode: null,
groupName: null,
groupCode: null,
sybxBase: 0,
sybxCompanyRate: 0,
sybxPersonalRate: 0,
ylbxBase: 0,
ylbxCompanyRate: 0,
ylbxPersonalRate: 0,
gsbxBase: 0,
gsbxCompanyRate: 0,
gsbxPersonalRate: 0,
ysbxBase: 0,
ysbxCompanyRate: 0,
ysbxPersonalRate: 0,
syubxBase: 0,
syubxCompanyRate: 0,
syubxPersonalRate: 0,
providentFundBase: 0,
providentFundCompanyRate: 0,
providentFundPersonalRate: 0,
operationCost: null,
deptId: null,
},
formRules: {
contractName: [
{ required: true, message: "合同名称不能为空", trigger: "blur" }
],
contractCode: [
{ required: true, message: "合同编号不能为空", trigger: "blur" }
],
groupName: [
{ required: true, message: "单位名称不能为空", trigger: "blur" }
],
groupCode: [
{ required: true, message: "单位编码(社会信用代码)不能为空", trigger: "blur" }
],
sybxBase: [
{ required: true, message: "失业保险缴费基数不能为空", trigger: "blur" }
],
sybxCompanyRate: [
{ required: true, message: "失业保险公司承担比例不能为空", trigger: "blur" }
],
sybxPersonalRate: [
{ required: true, message: "失业保险个人承担比例不能为空", trigger: "blur" }
],
ylbxBase: [
{ required: true, message: "养老保险缴费基数不能为空", trigger: "blur" }
],
ylbxCompanyRate: [
{ required: true, message: "养老保险公司承担比例不能为空", trigger: "blur" }
],
ylbxPersonalRate: [
{ required: true, message: "养老保险个人承担比例不能为空", trigger: "blur" }
],
gsbxBase: [
{ required: true, message: "工伤保险缴费基数不能为空", trigger: "blur" }
],
gsbxCompanyRate: [
{ required: true, message: "工伤保险公司承担比例不能为空", trigger: "blur" }
],
gsbxPersonalRate: [
{ required: true, message: "工伤保险个人承担比例不能为空", trigger: "blur" }
],
ysbxBase: [
{ required: true, message: "医疗保险缴费基数(可包含生育险)不能为空", trigger: "blur" }
],
ysbxCompanyRate: [
{ required: true, message: "医疗保险公司承担比例不能为空", trigger: "blur" }
],
ysbxPersonalRate: [
{ required: true, message: "医疗保险个人承担比例不能为空", trigger: "blur" }
],
syubxBase: [
{ required: true, message: "生育保险缴费基数不能为空", trigger: "blur" }
],
syubxCompanyRate: [
{ required: true, message: "生育保险公司承担比例不能为空", trigger: "blur" }
],
syubxPersonalRate: [
{ required: true, message: "生育保险个人承担比例不能为空", trigger: "blur" }
],
providentFundBase: [
{ required: true, message: "公积金缴费基数不能为空", trigger: "blur" }
],
providentFundCompanyRate: [
{ required: true, message: "公积金企业承担比例不能为空", trigger: "blur" }
],
providentFundPersonalRate: [
{ required: true, message: "公积金个人承担比例不能为空", trigger: "blur" }
],
operationCost: [
{ required: true, message: "管理费不能为空", trigger: "blur" }
],
deptId: [
{ required: true, message: "所属部门不能为空", trigger: "blur" }
],
},
ylbxCompanyRateAmount: '--',//养老保险单位金额
ylbxPersonalRateAmount: '--',//养老保险个人金额
gsbxCompanyRateAmount: '--',//工伤保险单位金额
gsbxPersonalRateAmount: '--',//工伤保险个人金额
ysbxCompanyRateAmount: '--',//医疗保险单位金额
ysbxPersonalRateAmount: '--',//医疗保险个人金额
sybxCompanyRateAmount: '--',//失业保险单位金额
sybxPersonalRateAmount: '--',//个人保险个人金额
syubxCompanyRateAmount: '--',//生育保险单位金额
syubxPersonalRateAmount: '--',//生育保险个人金额
providentFundCompanyRateAmount: '--',//公积金单位金额
providentFundPersonalRateAmount: '--',//公积金个人金额
}
},
created() {
},
mounted() {
this.reset()
if (this.$route.query.id) {
this.getOutContractFN(this.$route.query.id)
}
},
methods: {
// 公积金个人比例变化执行
providentFundPersonalRateChange(e) {
if (this.formData.providentFundBase > 0 && e > 0) {
this.providentFundPersonalRateAmount = (this.formData.providentFundBase * e / 100).toFixed(2)
} else {
this.providentFundPersonalRateAmount = '--'
}
},
// 公积金单位比例变化执行
providentFundCompanyRateChange(e) {
if (this.formData.providentFundBase > 0 && e > 0) {
this.providentFundCompanyRateAmount = (this.formData.providentFundBase * e / 100).toFixed(2)
} else {
this.providentFundCompanyRateAmount = '--'
}
},
// 公积金基数变化执行
providentFundBaseChange(e) {
if (this.formData.providentFundCompanyRate > 0 && this.formData.providentFundBase > 0) {
this.providentFundCompanyRateAmount = (this.formData.providentFundBase * this.formData.providentFundCompanyRate / 100).toFixed(2)
} else {
this.providentFundCompanyRateAmount = '--'
}
if (this.formData.providentFundPersonalRate > 0 && this.formData.providentFundBase > 0) {
this.providentFundPersonalRateAmount = (this.formData.providentFundBase * this.formData.providentFundPersonalRate / 100).toFixed(2)
} else {
this.providentFundPersonalRateAmount = '--'
}
},
// 生育保险个人比例变化执行
syubxPersonalRateChange(e) {
if (this.formData.syubxBase > 0 && e > 0) {
this.syubxPersonalRateAmount = (this.formData.syubxBase * e / 100).toFixed(2)
} else {
this.syubxPersonalRateAmount = '--'
}
},
// 生育保险单位比例变化执行
syubxCompanyRateChange(e) {
if (this.formData.syubxBase > 0 && e > 0) {
this.syubxCompanyRateAmount = (this.formData.syubxBase * e / 100).toFixed(2)
} else {
this.syubxCompanyRateAmount = '--'
}
},
// 生育保险基数变化执行
syubxBaseChange(e) {
if (this.formData.syubxCompanyRate > 0 && this.formData.syubxBase > 0) {
this.syubxCompanyRateAmount = (this.formData.syubxBase * this.formData.syubxCompanyRate / 100).toFixed(2)
} else {
this.syubxCompanyRateAmount = '--'
}
if (this.formData.syubxPersonalRate > 0 && this.formData.syubxBase > 0) {
this.syubxPersonalRateAmount = (this.formData.syubxBase * this.formData.syubxPersonalRate / 100).toFixed(2)
} else {
this.syubxPersonalRateAmount = '--'
}
},
// 失业保险个人比例变化执行
sybxPersonalRateChange(e) {
if (this.formData.sybxBase > 0 && e > 0) {
this.sybxPersonalRateAmount = (this.formData.sybxBase * e / 100).toFixed(2)
} else {
this.sybxPersonalRateAmount = '--'
}
},
// 失业保险单位比例变化执行
sybxCompanyRateChange(e) {
if (this.formData.sybxBase > 0 && e > 0) {
this.sybxCompanyRateAmount = (this.formData.sybxBase * e / 100).toFixed(2)
} else {
this.sybxCompanyRateAmount = '--'
}
},
// 失业保险基数金额变化执行
sybxBaseChange(e) {
if (this.formData.sybxCompanyRate > 0 && this.formData.sybxBase > 0) {
this.sybxCompanyRateAmount = (this.formData.sybxBase * this.formData.sybxCompanyRate / 100).toFixed(2)
} else {
this.sybxCompanyRateAmount = '--'
}
if (this.formData.sybxPersonalRate > 0 && this.formData.sybxBase > 0) {
this.sybxPersonalRateAmount = (this.formData.sybxBase * this.formData.sybxPersonalRate / 100).toFixed(2)
} else {
this.sybxPersonalRateAmount = '--'
}
},
// 医疗保险个人比例变化
ysbxPersonalRateChange(e) {
if (this.formData.ysbxBase > 0 && e > 0) {
this.ysbxPersonalRateAmount = (this.formData.ysbxBase * e / 100).toFixed(2)
} else {
this.ysbxPersonalRateAmount = '--'
}
},
// 医疗保险单位比例变化
ysbxCompanyRateChange(e) {
if (this.formData.ysbxBase > 0 && e > 0) {
this.ysbxCompanyRateAmount = (this.formData.ysbxBase * e / 100).toFixed(2)
} else {
this.ysbxCompanyRateAmount = '--'
}
},
// 医疗保险基数变化执行
ysbxBaseChange(e) {
if (this.formData.ysbxCompanyRate > 0 && this.formData.ysbxBase > 0) {
this.ysbxCompanyRateAmount = (this.formData.ysbxBase * this.formData.ysbxCompanyRate / 100).toFixed(2)
} else {
this.ysbxCompanyRateAmount = '--'
}
if (this.formData.ysbxPersonalRate > 0 && this.formData.ysbxBase > 0) {
this.ysbxPersonalRateAmount = (this.formData.ysbxBase * this.formData.ysbxPersonalRate / 100).toFixed(2)
} else {
this.ysbxPersonalRateAmount = '--'
}
},
// 工伤保险个人比例变化执行
gsbxPersonalRateChange(e) {
if (this.formData.gsbxBase > 0 && e > 0) {
this.gsbxPersonalRateAmount = (this.formData.gsbxBase * e / 100).toFixed(2)
} else {
this.gsbxPersonalRateAmount = '--'
}
},
// 工伤保险单位比例变化执行
gsbxCompanyRateChange(e) {
if (this.formData.gsbxBase > 0 && e > 0) {
this.gsbxCompanyRateAmount = (this.formData.gsbxBase * e / 100).toFixed(2)
} else {
this.gsbxCompanyRateAmount = '--'
}
},
// 工伤保险基数变化
gsbxBaseChange(e) {
if (this.formData.ylbxCompanyRate > 0 && this.formData.gsbxBase > 0) {
this.gsbxCompanyRateAmount = (this.formData.gsbxBase * this.formData.gsbxCompanyRate / 100).toFixed(2)
} else {
this.gsbxCompanyRateAmount = '--'
}
if (this.formData.gsbxPersonalRate > 0 && this.formData.gsbxBase > 0) {
this.gsbxPersonalRateAmount = (this.formData.gsbxBase * this.formData.gsbxPersonalRate / 100).toFixed(2)
} else {
this.gsbxPersonalRateAmount = '--'
}
},
// 个人养老保险百分比变化
ylbxPersonalRateChange(e) {
if (this.formData.ylbxBase > 0 && e > 0) {
this.ylbxPersonalRateAmount = (this.formData.ylbxBase * e / 100).toFixed(2)
} else {
this.ylbxPersonalRateAmount = '--'
}
},
// 单位养老保险百分比变化
ylbxCompanyRateChange(e) {
if (this.formData.ylbxBase > 0 && e > 0) {
this.ylbxCompanyRateAmount = (this.formData.ylbxBase * e / 100).toFixed(2)
} else {
this.ylbxCompanyRateAmount = '--'
}
},
// 养老保险基数变化
ylbxBaseChange(e) {
if (this.formData.ylbxCompanyRate > 0 && this.formData.ylbxBase > 0) {
this.ylbxCompanyRateAmount = (this.formData.ylbxBase * this.formData.ylbxCompanyRate / 100).toFixed(2)
} else {
this.ylbxCompanyRateAmount = '--'
}
if (this.formData.ylbxPersonalRate > 0 && this.formData.ylbxBase > 0) {
this.ylbxPersonalRateAmount = (this.formData.ylbxBase * this.formData.ylbxPersonalRate / 100).toFixed(2)
} else {
this.ylbxPersonalRateAmount = '--'
}
},
// 获取订单的详情
getOutContractFN(id) {
getOutContract(id).then(res => {
// console.log('获取的详情数据', res);
if (res.code == 200) {
this.formData = res.data
this.ylbxBaseChange()
this.gsbxBaseChange()
this.ysbxBaseChange()
this.sybxBaseChange()
this.syubxBaseChange()
this.providentFundBaseChange()
}
})
},
// 确定功能方法
submitFN() {
this.$refs["formRef"].validate(valid => {
if (valid) {
this.formData.bxMoneyTemplate = {}
if (this.ylbxCompanyRateAmount == '--') {
this.formData.bxMoneyTemplate.ylbxCompanyRateAmount = 0
} else {
this.formData.bxMoneyTemplate.ylbxCompanyRateAmount = Number(this.ylbxCompanyRateAmount)
}
if (this.ylbxPersonalRateAmount == '--') {
this.formData.bxMoneyTemplate.ylbxPersonalRateAmount = '--'
} else {
this.formData.bxMoneyTemplate.ylbxPersonalRateAmount = Number(this.ylbxPersonalRateAmount)
}
if (this.gsbxCompanyRateAmount == '--') {
this.formData.bxMoneyTemplate.gsbxCompanyRateAmount = 0
} else {
this.formData.bxMoneyTemplate.gsbxCompanyRateAmount = Number(this.gsbxCompanyRateAmount)
}
if (this.gsbxPersonalRateAmount == '--') {
this.formData.bxMoneyTemplate.gsbxPersonalRateAmount = 0
} else {
this.formData.bxMoneyTemplate.gsbxPersonalRateAmount = Number(this.gsbxPersonalRateAmount)
}
if (this.ysbxCompanyRateAmount == '--') {
this.formData.bxMoneyTemplate.ysbxCompanyRateAmount = 0
} else {
this.formData.bxMoneyTemplate.ysbxCompanyRateAmount = Number(this.ysbxCompanyRateAmount)
}
if (this.ysbxPersonalRateAmount == '--') {
this.formData.bxMoneyTemplate.ysbxPersonalRateAmount = 0
} else {
this.formData.bxMoneyTemplate.ysbxPersonalRateAmount = Number(this.ysbxPersonalRateAmount)
}
if (this.sybxCompanyRateAmount == '--') {
this.formData.bxMoneyTemplate.sybxCompanyRateAmount = 0
} else {
this.formData.bxMoneyTemplate.sybxCompanyRateAmount = Number(this.sybxCompanyRateAmount)
}
if (this.sybxPersonalRateAmount == '--') {
this.formData.bxMoneyTemplate.sybxPersonalRateAmount = 0
} else {
this.formData.bxMoneyTemplate.sybxPersonalRateAmount = Number(this.sybxPersonalRateAmount)
}
if (this.syubxCompanyRateAmount == '--') {
this.formData.bxMoneyTemplate.syubxCompanyRateAmount = 0
} else {
this.formData.bxMoneyTemplate.syubxCompanyRateAmount = Number(this.syubxCompanyRateAmount)
}
if (this.syubxPersonalRateAmount == '--') {
this.formData.bxMoneyTemplate.syubxPersonalRateAmount = 0
} else {
this.formData.bxMoneyTemplate.syubxPersonalRateAmount = Number(this.syubxPersonalRateAmount)
}
if (this.providentFundCompanyRateAmount == '--') {
this.formData.bxMoneyTemplate.providentFundCompanyRateAmount = 0
} else {
this.formData.bxMoneyTemplate.providentFundCompanyRateAmount = Number(this.providentFundCompanyRateAmount)
}
if (this.providentFundPersonalRateAmount == '--') {
this.formData.bxMoneyTemplate.providentFundPersonalRateAmount = 0
} else {
this.formData.bxMoneyTemplate.providentFundPersonalRateAmount = Number(this.providentFundPersonalRateAmount)
}
if (this.formData.id != null) {
updateOutContract(this.formData).then(response => {
this.$modal.msgSuccess("修改成功");
this.$router.push({ path: "/business/contract" })
});
} else {
addOutContract(this.formData).then(response => {
this.$modal.msgSuccess("新增成功");
this.$router.push({ path: "/business/contract" })
});
}
} else {
this.$modal.msgWarning("请检查表单数据是否填写完整");
}
})
},
// 返回功能
goBackFN() {
this.reset()
this.$router.push({ path: "/business/contract" })
},
// 表单重置方法
reset() {
this.formData = {
contractName: null,
contractCode: null,
groupName: null,
groupCode: null,
sybxBase: 0,
sybxCompanyRate: 0,
sybxPersonalRate: 0,
ylbxBase: 0,
ylbxCompanyRate: 0,
ylbxPersonalRate: 0,
gsbxBase: 0,
gsbxCompanyRate: 0,
gsbxPersonalRate: 0,
ysbxBase: 0,
ysbxCompanyRate: 0,
ysbxPersonalRate: 0,
syubxBase: 0,
syubxCompanyRate: 0,
syubxPersonalRate: 0,
providentFundBase: 0,
providentFundCompanyRate: 0,
providentFundPersonalRate: 0,
operationCost: null,
deptId: null,
}
this.resetForm("formRef");
},
},
}
</script>
<style scoped lang="scss">
.app-container ::v-deep {
// 表单部分样式
.formData {
.box-card {
// 卡片头部样式
.clearfix {
.cardHeartTitle {
font-size: 22px;
font-weight: 600;
}
}
// 控制头部的底部分割线
.el-card__header {
border-bottom: none;
}
// 表单主题部分样式
.cardMain {
// 表单label样式
.el-form-item__label {
color: #000;
font-size: 14px;
font-weight: 530;
}
// 参数信息-首个参数
.parameterFirst {
width: 100%;
padding-left: 25%;
text-align: center;
color: #000;
font-size: 14px;
font-weight: 530;
}
// 参数信息-剩余标题
.parameterConter {
width: 100%;
text-align: center;
color: #000;
font-size: 14px;
font-weight: 530;
}
// 金额盒子样式
.amountMain {
width: 100%;
text-align: center;
}
.el-input-number--small {
width: 100% !important;
}
.projectTitle {
color: #000;
font-size: 14px;
font-weight: 530;
}
}
}
}
// 底部操作按钮部分
.fixdBottom {
margin-top: 22px;
display: flex;
align-items: center;
justify-content: center;
.fixdBottomMain {
width: 270px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
</style>
\ No newline at end of file
src/views/business/outContract/index.vue
View file @ cf089dbd
...@@ -2,37 +2,24 @@ ...@@ -2,37 +2,24 @@
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="合同名称" prop="contractName"> <el-form-item label="合同名称" prop="contractName">
<el-input <el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable
v-model="queryParams.contractName" @keyup.enter.native="handleQuery" />
placeholder="请输入合同名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="合同编号" prop="contractCode"> <el-form-item label="合同编号" prop="contractCode">
<el-input <el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable
v-model="queryParams.contractCode" @keyup.enter.native="handleQuery" />
placeholder="请输入合同编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="单位名称" prop="groupName"> <el-form-item label="单位名称" prop="groupName">
<el-input <el-input v-model="queryParams.groupName" placeholder="请输入单位名称" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.groupName"
placeholder="请输入单位名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<!-- <el-form-item label="单位编码(社会信用代码)" prop="groupCode">--> <!-- <el-form-item label="单位编码(社会信用代码)" prop="groupCode">-->
<!-- <el-input--> <!-- <el-input-->
<!-- v-model="queryParams.groupCode"--> <!-- v-model="queryParams.groupCode"-->
<!-- placeholder="请输入单位编码(社会信用代码)"--> <!-- placeholder="请输入单位编码(社会信用代码)"-->
<!-- clearable--> <!-- clearable-->
<!-- @keyup.enter.native="handleQuery"--> <!-- @keyup.enter.native="handleQuery"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
...@@ -41,42 +28,20 @@ ...@@ -41,42 +28,20 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
type="primary" v-hasPermi="['business:outContract:add']">新增</el-button>
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['business:outContract:add']"
>新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
type="success" v-hasPermi="['business:outContract:edit']">修改</el-button>
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['business:outContract:edit']"
>修改</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
type="danger" v-hasPermi="['business:outContract:remove']">删除</el-button>
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['business:outContract:remove']"
>删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
type="warning" v-hasPermi="['business:outContract:export']">导出</el-button>
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['business:outContract:export']"
>导出</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
...@@ -87,7 +52,7 @@ ...@@ -87,7 +52,7 @@
<el-table-column label="合同编号" align="center" prop="contractCode" fixed /> <el-table-column label="合同编号" align="center" prop="contractCode" fixed />
<el-table-column label="单位名称" align="center" prop="groupName" fixed /> <el-table-column label="单位名称" align="center" prop="groupName" fixed />
<el-table-column label="单位信用代码" align="center" prop="groupCode" /> <el-table-column label="单位信用代码" align="center" prop="groupCode" />
<el-table-column label="五险一金承担方式" align="center" prop="bearType" > <el-table-column label="五险一金承担方式" align="center" prop="bearType">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.bearType && 1 == scope.row.bearType">各自承担</el-tag> <el-tag v-if="scope.row.bearType && 1 == scope.row.bearType">各自承担</el-tag>
<el-tag type="success" v-if="scope.row.bearType && 2 == scope.row.bearType">个人承担全部</el-tag> <el-tag type="success" v-if="scope.row.bearType && 2 == scope.row.bearType">个人承担全部</el-tag>
...@@ -118,33 +83,20 @@ ...@@ -118,33 +83,20 @@
<el-table-column label="公积金个人承担比例" align="center" prop="providentFundPersonalRate" /> <el-table-column label="公积金个人承担比例" align="center" prop="providentFundPersonalRate" />
</el-table-column> </el-table-column>
<el-table-column label="管理费" align="center" prop="operationCost" /> <el-table-column label="管理费" align="center" prop="operationCost" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" width="120px" class-name="small-padding fixed-width" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
size="mini" v-hasPermi="['business:outContract:edit']">修改</el-button>
type="text" <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
icon="el-icon-edit" v-hasPermi="['business:outContract:remove']">删除</el-button>
@click="handleUpdate(scope.row)" <el-button size="mini" type="text" icon="el-icon-user" @click="staffManage(scope.row)"
v-hasPermi="['business:outContract:edit']" v-hasPermi="['business:outContract:manage']">员工管理</el-button>
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['business:outContract:remove']"
>删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
v-show="total>0" @pagination="getList" />
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改发薪合同对话框 --> <!-- 添加或修改发薪合同对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
...@@ -373,9 +325,18 @@ export default { ...@@ -373,9 +325,18 @@ export default {
}; };
}, },
created() { created() {
},
mounted() {
this.getList(); this.getList();
}, },
methods: { methods: {
/** 员工管理 */
staffManage(row) {
// console.log('表格数据', row);
this.$router.push({ path: "/business/payOutPersonal", query: { id: row.id, name: row.contractName } });
},
/** 查询发薪合同列表 */ /** 查询发薪合同列表 */
getList() { getList() {
this.loading = true; this.loading = true;
...@@ -435,24 +396,23 @@ export default { ...@@ -435,24 +396,23 @@ export default {
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.id) this.ids = selection.map(item => item.id)
this.single = selection.length!==1 this.single = selection.length !== 1
this.multiple = !selection.length this.multiple = !selection.length
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
//新方法
this.$router.push({ path: "/business/staffForm" });
return
// 原方法
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加发薪合同"; this.title = "添加发薪合同";
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); let id = row.id || this.ids
const id = row.id || this.ids this.$router.push({ path: "/business/staffForm", query: { id: id } });
getOutContract(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改发薪合同";
});
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
...@@ -477,12 +437,12 @@ export default { ...@@ -477,12 +437,12 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除发薪合同编号为"' + ids + '"的数据项？').then(function() { this.$modal.confirm('是否确认删除发薪合同编号为"' + ids + '"的数据项？').then(function () {
return delOutContract(ids); return delOutContract(ids);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {}); }).catch(() => { });
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
......
src/views/business/outPersonal/index.vue
View file @ cf089dbd
...@@ -2,228 +2,110 @@ ...@@ -2,228 +2,110 @@
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="所属合同" prop="contractId"> <el-form-item label="所属合同" prop="contractId">
<el-input <el-input v-model="queryParams.contractName" placeholder="请输入所属合同" clearable @keyup.enter.native="handleQuery"
v-model="queryParams.contractId" :disabled="true" />
placeholder="请输入所属合同"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="人员名称" prop="userName"> <el-form-item label="人员名称" prop="userName">
<el-input <el-input v-model="queryParams.userName" placeholder="请输入人员名称" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.userName"
placeholder="请输入人员名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="身份证号" prop="userCode"> <el-form-item label="身份证号" prop="userCode">
<el-input <el-input v-model="queryParams.userCode" placeholder="请输入身份证号" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.userCode"
placeholder="请输入身份证号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="收款账号" prop="payeeAccNo"> <el-form-item label="收款账号" prop="payeeAccNo">
<el-input <el-input v-model="queryParams.payeeAccNo" placeholder="请输入收款账号" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.payeeAccNo"
placeholder="请输入收款账号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="岗位名称" prop="postName"> <el-form-item label="岗位名称" prop="postName">
<el-input <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.postName"
placeholder="请输入岗位名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="岗位工资" prop="postWage"> <el-form-item label="岗位工资" prop="postWage">
<el-input <el-input v-model="queryParams.postWage" placeholder="请输入岗位工资" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.postWage"
placeholder="请输入岗位工资"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="应发工资" prop="salaryPayable"> <el-form-item label="应发工资" prop="salaryPayable">
<el-input <el-input v-model="queryParams.salaryPayable" placeholder="请输入应发工资" clearable
v-model="queryParams.salaryPayable" @keyup.enter.native="handleQuery" />
placeholder="请输入应发工资"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="实发金额" prop="actualPayable"> <el-form-item label="实发金额" prop="actualPayable">
<el-input <el-input v-model="queryParams.actualPayable" placeholder="请输入实发金额" clearable
v-model="queryParams.actualPayable" @keyup.enter.native="handleQuery" />
placeholder="请输入实发金额"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="失业保险缴费基数" prop="sybxBase"> <!-- <el-form-item label="失业保险缴费基数" prop="sybxBase">
<el-input <el-input v-model="queryParams.sybxBase" placeholder="请输入失业保险缴费基数" clearable
v-model="queryParams.sybxBase" @keyup.enter.native="handleQuery" />
placeholder="请输入失业保险缴费基数"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="失业保险公司承担比例" prop="sybxCompanyRate"> <el-form-item label="失业保险公司承担比例" prop="sybxCompanyRate">
<el-input <el-input v-model="queryParams.sybxCompanyRate" placeholder="请输入失业保险公司承担比例" clearable
v-model="queryParams.sybxCompanyRate" @keyup.enter.native="handleQuery" />
placeholder="请输入失业保险公司承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="失业保险个人承担比例" prop="sybxPersonalRate"> <el-form-item label="失业保险个人承担比例" prop="sybxPersonalRate">
<el-input <el-input v-model="queryParams.sybxPersonalRate" placeholder="请输入失业保险个人承担比例" clearable
v-model="queryParams.sybxPersonalRate" @keyup.enter.native="handleQuery" />
placeholder="请输入失业保险个人承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="养老保险缴费基数" prop="ylbxBase"> <el-form-item label="养老保险缴费基数" prop="ylbxBase">
<el-input <el-input v-model="queryParams.ylbxBase" placeholder="请输入养老保险缴费基数" clearable
v-model="queryParams.ylbxBase" @keyup.enter.native="handleQuery" />
placeholder="请输入养老保险缴费基数"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="养老保险公司承担比例" prop="ylbxCompanyRate"> <el-form-item label="养老保险公司承担比例" prop="ylbxCompanyRate">
<el-input <el-input v-model="queryParams.ylbxCompanyRate" placeholder="请输入养老保险公司承担比例" clearable
v-model="queryParams.ylbxCompanyRate" @keyup.enter.native="handleQuery" />
placeholder="请输入养老保险公司承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="养老保险个人承担比例" prop="ylbxPersonalRate"> <el-form-item label="养老保险个人承担比例" prop="ylbxPersonalRate">
<el-input <el-input v-model="queryParams.ylbxPersonalRate" placeholder="请输入养老保险个人承担比例" clearable
v-model="queryParams.ylbxPersonalRate" @keyup.enter.native="handleQuery" />
placeholder="请输入养老保险个人承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="工伤保险缴费基数" prop="gsbxBase"> <el-form-item label="工伤保险缴费基数" prop="gsbxBase">
<el-input <el-input v-model="queryParams.gsbxBase" placeholder="请输入工伤保险缴费基数" clearable
v-model="queryParams.gsbxBase" @keyup.enter.native="handleQuery" />
placeholder="请输入工伤保险缴费基数"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="工伤保险公司承担比例" prop="gsbxCompanyRate"> <el-form-item label="工伤保险公司承担比例" prop="gsbxCompanyRate">
<el-input <el-input v-model="queryParams.gsbxCompanyRate" placeholder="请输入工伤保险公司承担比例" clearable
v-model="queryParams.gsbxCompanyRate" @keyup.enter.native="handleQuery" />
placeholder="请输入工伤保险公司承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="工伤保险个人承担比例" prop="gsbxPersonalRate"> <el-form-item label="工伤保险个人承担比例" prop="gsbxPersonalRate">
<el-input <el-input v-model="queryParams.gsbxPersonalRate" placeholder="请输入工伤保险个人承担比例" clearable
v-model="queryParams.gsbxPersonalRate" @keyup.enter.native="handleQuery" />
placeholder="请输入工伤保险个人承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="医疗保险缴费基数(可包含生育险)" prop="ysbxBase"> <el-form-item label="医疗保险缴费基数(可包含生育险)" prop="ysbxBase">
<el-input <el-input v-model="queryParams.ysbxBase" placeholder="请输入医疗保险缴费基数(可包含生育险)" clearable
v-model="queryParams.ysbxBase" @keyup.enter.native="handleQuery" />
placeholder="请输入医疗保险缴费基数(可包含生育险)"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="医疗保险公司承担比例" prop="ysbxCompanyRate"> <el-form-item label="医疗保险公司承担比例" prop="ysbxCompanyRate">
<el-input <el-input v-model="queryParams.ysbxCompanyRate" placeholder="请输入医疗保险公司承担比例" clearable
v-model="queryParams.ysbxCompanyRate" @keyup.enter.native="handleQuery" />
placeholder="请输入医疗保险公司承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="医疗保险个人承担比例" prop="ysbxPersonalRate"> <el-form-item label="医疗保险个人承担比例" prop="ysbxPersonalRate">
<el-input <el-input v-model="queryParams.ysbxPersonalRate" placeholder="请输入医疗保险个人承担比例" clearable
v-model="queryParams.ysbxPersonalRate" @keyup.enter.native="handleQuery" />
placeholder="请输入医疗保险个人承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="生育保险缴费基数" prop="syubxBase"> <el-form-item label="生育保险缴费基数" prop="syubxBase">
<el-input <el-input v-model="queryParams.syubxBase" placeholder="请输入生育保险缴费基数" clearable
v-model="queryParams.syubxBase" @keyup.enter.native="handleQuery" />
placeholder="请输入生育保险缴费基数"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="生育保险公司承担比例" prop="syubxCompanyRate"> <el-form-item label="生育保险公司承担比例" prop="syubxCompanyRate">
<el-input <el-input v-model="queryParams.syubxCompanyRate" placeholder="请输入生育保险公司承担比例" clearable
v-model="queryParams.syubxCompanyRate" @keyup.enter.native="handleQuery" />
placeholder="请输入生育保险公司承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="生育保险个人承担比例" prop="syubxPersonalRate"> <el-form-item label="生育保险个人承担比例" prop="syubxPersonalRate">
<el-input <el-input v-model="queryParams.syubxPersonalRate" placeholder="请输入生育保险个人承担比例" clearable
v-model="queryParams.syubxPersonalRate" @keyup.enter.native="handleQuery" />
placeholder="请输入生育保险个人承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="公积金缴费基数" prop="providentFundBase"> <el-form-item label="公积金缴费基数" prop="providentFundBase">
<el-input <el-input v-model="queryParams.providentFundBase" placeholder="请输入公积金缴费基数" clearable
v-model="queryParams.providentFundBase" @keyup.enter.native="handleQuery" />
placeholder="请输入公积金缴费基数"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="公积金企业承担比例" prop="providentFundCompanyRate"> <el-form-item label="公积金企业承担比例" prop="providentFundCompanyRate">
<el-input <el-input v-model="queryParams.providentFundCompanyRate" placeholder="请输入公积金企业承担比例" clearable
v-model="queryParams.providentFundCompanyRate" @keyup.enter.native="handleQuery" />
placeholder="请输入公积金企业承担比例"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="公积金个人承担比例" prop="providentFundPersonalRate"> <el-form-item label="公积金个人承担比例" prop="providentFundPersonalRate">
<el-input <el-input v-model="queryParams.providentFundPersonalRate" placeholder="请输入公积金个人承担比例" clearable
v-model="queryParams.providentFundPersonalRate" @keyup.enter.native="handleQuery" />
placeholder="请输入公积金个人承担比例" </el-form-item> -->
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="管理费" prop="operationCost"> <el-form-item label="管理费" prop="operationCost">
<el-input <el-input v-model="queryParams.operationCost" placeholder="请输入管理费" clearable
v-model="queryParams.operationCost" @keyup.enter.native="handleQuery" />
placeholder="请输入管理费"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="所属部门" prop="deptId"> <el-form-item label="所属部门" prop="deptId">
<el-input <el-input v-model="queryParams.deptId" placeholder="请输入所属部门" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.deptId"
placeholder="请输入所属部门"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
...@@ -233,49 +115,27 @@ ...@@ -233,49 +115,27 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
type="primary" v-hasPermi="['business:outPersonal:add']">新增</el-button>
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['business:outPersonal:add']"
>新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
type="success" v-hasPermi="['business:outPersonal:edit']">修改</el-button>
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['business:outPersonal:edit']"
>修改</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
type="danger" v-hasPermi="['business:outPersonal:remove']">删除</el-button>
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['business:outPersonal:remove']"
>删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
type="warning" v-hasPermi="['business:outPersonal:export']">导出</el-button>
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['business:outPersonal:export']"
>导出</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="outPersonalList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="outPersonalList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="${comment}" align="center" prop="id" /> <!-- <el-table-column label="${comment}" align="center" prop="id" /> -->
<el-table-column label="所属合同" align="center" prop="contractId" /> <el-table-column label="所属合同" align="center" prop="contractId" />
<el-table-column label="人员名称" align="center" prop="userName" /> <el-table-column label="人员名称" align="center" prop="userName" />
<el-table-column label="身份证号" align="center" prop="userCode" /> <el-table-column label="身份证号" align="center" prop="userCode" />
...@@ -308,31 +168,16 @@ ...@@ -308,31 +168,16 @@
<el-table-column label="所属部门" align="center" prop="deptId" /> <el-table-column label="所属部门" align="center" prop="deptId" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
size="mini" v-hasPermi="['business:outPersonal:edit']">修改</el-button>
type="text" <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
icon="el-icon-edit" v-hasPermi="['business:outPersonal:remove']">删除</el-button>
@click="handleUpdate(scope.row)"
v-hasPermi="['business:outPersonal:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['business:outPersonal:remove']"
>删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
v-show="total>0" @pagination="getList" />
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改收薪人员信息对话框 --> <!-- 添加或修改收薪人员信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
...@@ -593,6 +438,11 @@ export default { ...@@ -593,6 +438,11 @@ export default {
}; };
}, },
created() { created() {
},
mounted() {
this.queryParams.contractId = this.$route.query.id
this.queryParams.contractName = this.$route.query.name
this.getList(); this.getList();
}, },
methods: { methods: {
...@@ -655,24 +505,30 @@ export default { ...@@ -655,24 +505,30 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.queryParams.contractId = this.$route.query.id
this.queryParams.contractName = this.$route.query.name
this.handleQuery(); this.handleQuery();
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.id) this.ids = selection.map(item => item.id)
this.single = selection.length!==1 this.single = selection.length !== 1
this.multiple = !selection.length this.multiple = !selection.length
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.$router.push({ path: "/business/paidUsers", query: { contractId: this.queryParams.contractId, contractName: this.queryParams.contractName } });
return
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加收薪人员信息"; this.title = "添加收薪人员信息";
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); // this.reset();
const id = row.id || this.ids const id = row.id || this.ids
this.$router.push({ path: "/business/paidUsers", query: { id: id } });
return
getOutPersonal(id).then(response => { getOutPersonal(id).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
...@@ -702,12 +558,12 @@ export default { ...@@ -702,12 +558,12 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除收薪人员信息编号为"' + ids + '"的数据项？').then(function() { this.$modal.confirm('是否确认删除收薪人员信息编号为"' + ids + '"的数据项？').then(function () {
return delOutPersonal(ids); return delOutPersonal(ids);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {}); }).catch(() => { });
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
......
src/views/login.vue
View file @ cf089dbd
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">NewStyle</h3> <h3 class="title">薪瑞通</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
v-model="loginForm.password" @keyup.enter.native="handleLogin">
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled">
<el-input <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
v-model="loginForm.code" @keyup.enter.native="handleLogin">
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
:loading="loading" @click.native.prevent="handleLogin">
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
...@@ -97,7 +77,7 @@ export default { ...@@ -97,7 +77,7 @@ export default {
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
this.redirect = route.query && route.query.redirect; this.redirect = route.query && route.query.redirect;
}, },
immediate: true immediate: true
...@@ -141,7 +121,7 @@ export default { ...@@ -141,7 +121,7 @@ export default {
Cookies.remove('rememberMe'); Cookies.remove('rememberMe');
} }
this.$store.dispatch("Login", this.loginForm).then(() => { this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); this.$router.push({ path: this.redirect || "/" }).catch(() => { });
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
if (this.captchaEnabled) { if (this.captchaEnabled) {
...@@ -164,6 +144,7 @@ export default { ...@@ -164,6 +144,7 @@ export default {
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
...@@ -175,32 +156,39 @@ export default { ...@@ -175,32 +156,39 @@ export default {
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
height: 38px; height: 38px;
} }
} }
.input-icon { .input-icon {
height: 39px; height: 39px;
width: 14px; width: 14px;
margin-left: 2px; margin-left: 2px;
} }
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
height: 38px; height: 38px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-login-footer { .el-login-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -213,6 +201,7 @@ export default { ...@@ -213,6 +201,7 @@ export default {
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.login-code-img { .login-code-img {
height: 38px; height: 38px;
} }
......
src/views/register.vue
View file @ cf089dbd
<template> <template>
<div class="register"> <div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">NewStyle</h3> <h3 class="title">薪瑞通</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="密码"
v-model="registerForm.password" @keyup.enter.native="handleRegister">
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="confirmPassword"> <el-form-item prop="confirmPassword">
<el-input <el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码"
v-model="registerForm.confirmPassword" @keyup.enter.native="handleRegister">
type="password"
auto-complete="off"
placeholder="确认密码"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled">
<el-input <el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
v-model="registerForm.code" @keyup.enter.native="handleRegister">
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="register-code"> <div class="register-code">
<img :src="codeUrl" @click="getCode" class="register-code-img"/> <img :src="codeUrl" @click="getCode" class="register-code-img" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
:loading="loading" @click.native.prevent="handleRegister">
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleRegister"
>
<span v-if="!loading">注 册</span> <span v-if="!loading">注 册</span>
<span v-else>注 册 中...</span> <span v-else>注 册 中...</span>
</el-button> </el-button>
...@@ -131,7 +111,7 @@ export default { ...@@ -131,7 +111,7 @@ export default {
type: 'success' type: 'success'
}).then(() => { }).then(() => {
this.$router.push("/login"); this.$router.push("/login");
}).catch(() => {}); }).catch(() => { });
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
if (this.captchaEnabled) { if (this.captchaEnabled) {
...@@ -154,6 +134,7 @@ export default { ...@@ -154,6 +134,7 @@ export default {
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login-background.jpg");
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
...@@ -165,32 +146,39 @@ export default { ...@@ -165,32 +146,39 @@ export default {
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
height: 38px; height: 38px;
} }
} }
.input-icon { .input-icon {
height: 39px; height: 39px;
width: 14px; width: 14px;
margin-left: 2px; margin-left: 2px;
} }
} }
.register-tip { .register-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.register-code { .register-code {
width: 33%; width: 33%;
height: 38px; height: 38px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-register-footer { .el-register-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -203,6 +191,7 @@ export default { ...@@ -203,6 +191,7 @@ export default {
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.register-code-img { .register-code-img {
height: 38px; height: 38px;
} }
......
vue.config.js
View file @ cf089dbd
...@@ -7,7 +7,7 @@ function resolve(dir) { ...@@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin') const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || 'NewStyle' // 网页标题 const name = process.env.VUE_APP_TITLE || '薪瑞通' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口 const port = process.env.port || process.env.npm_config_port || 80 // 端口
...@@ -35,7 +35,8 @@ module.exports = { ...@@ -35,7 +35,8 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`, // target: `http://localhost:8080`,
target: `http://192.168.31.195:8080`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment