<template>
|
<div class="add_wordshop">
|
<el-dialog
|
:visible.sync="islook"
|
width="44rem"
|
:before-close="cancelMethod"
|
>
|
<div slot="title" class="tac drawerHeader">
|
{{ editRow.title }}薪资方案
|
</div>
|
<el-form
|
label-width="110px"
|
class="form-box"
|
:model="form"
|
:rules="rules"
|
ref="form"
|
>
|
<el-form-item label="方案名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="工种：" prop="workTypes">
|
<el-select
|
v-model="form.workTypes"
|
multiple
|
collapse-tags
|
placeholder="请选择"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in workTypeList"
|
:key="item.ID"
|
:label="item.workName"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="salaryType" label="薪资类型">
|
<el-select
|
v-model="form.salaryType"
|
style="width: calc(100% - 40px)"
|
placeholder="请选择车间"
|
>
|
<el-option
|
v-for="item in unitList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
<i
|
class="el-icon-setting margin_left_10px cursor_pointer"
|
style="font-size: 20px; color: gray"
|
@click="handleUnitShow"
|
></i>
|
</el-form-item>
|
<el-form-item prop="salaryFormula" label="计费公式定义">
|
<!-- <el-input
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 6}"
|
disabled
|
placeholder="请输入内容"
|
v-model="form.salaryFormula"
|
>
|
</el-input> -->
|
<div class="formula-input" v-html="form.salaryFormula"></div>
|
<el-button class='formula-btn' type="text" @click="checkFormula()">检查公式</el-button>
|
</el-form-item>
|
<div class="formula-error" >
|
<span v-if="form.error==1"> 无错误，可放心使用 ! </span>
|
<span v-if="form.error==2"> 公式有错误，请检查 ! </span>
|
</div>
|
<div class="formula-box">
|
<div class="table-bottom-tabs">
|
<div
|
class="tab-pane"
|
@click="tabClickBottom(1)"
|
:style="{
|
background: activeName == 1 ? '#2a78fb' : '#F1F3F8',
|
color: activeName == 1 ? '#fff' : '#666',
|
}"
|
>
|
生产数据
|
</div>
|
<div
|
class="tab-pane"
|
@click="tabClickBottom(2)"
|
:style="{
|
background: activeName == 2 ? '#2a78fb' : '#F1F3F8',
|
color: activeName == 2 ? '#fff' : '#666',
|
}"
|
>
|
考勤及补贴数据
|
</div>
|
</div>
|
<div class="formula-bottom-box">
|
<div class="formula-l">
|
<div class="formula-p">可选数据</div>
|
<div class="formula-bottom" v-if="activeName==1">
|
<div :class="item.width==2?'formula-item-100':'formula-item'" v-for='item in formulaName' :key="item.name">
|
<span @click="formulaClick(item)"> {{ item.name }}</span>
|
<i
|
v-if="item.type==1"
|
class="el-icon-setting margin_left_5px cursor_pointer"
|
style="font-size: 18px; color: gray"
|
@click="handleSlikSetShow"
|
></i>
|
</div>
|
</div>
|
<div class="formula-bottom" v-if="activeName==2">
|
<div :class="item.width==2?'formula-item-100':'formula-item'" v-for='item in formulaNameTwo' :key="item.name">
|
<span @click="formulaClick(item)"> {{ item.name }}</span>
|
<i
|
v-if="item.type==2"
|
class="el-icon-setting margin_left_5px cursor_pointer"
|
style="font-size: 18px; color: gray"
|
@click="handleConstSetShow(2)"
|
></i>
|
</div>
|
</div>
|
</div>
|
<div class="formula-r">
|
<div class="formula-p">常用符号/产量</div>
|
<div class="formula-bottom">
|
<div :class="item.width==2?'formula-item-100':'formula-item'" v-for='item in formulaSymbol' :key="item.name">
|
<span v-if="item.type==3" @click="handleConstSetShow(3)"> {{ item.name }}</span>
|
<span v-else @click="formulaClick(item)"> {{ item.name }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="cancel" @click="cancelMethod()">取消</el-button>
|
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
|
</span>
|
</el-dialog>
|
<BomDialog
|
ref="editDialog"
|
@handleConfirmSave="handleConfirmSave"
|
:workList="unitList"
|
title="计量单位"
|
></BomDialog>
|
<SilkSetDialog
|
ref="silkSetDialog"
|
@confirmValueSave="confirmValueSave"
|
:editRow="form"
|
title="配置"
|
></SilkSetDialog>
|
<ConstantSetDialog
|
ref="constantSetDialog"
|
@confirmValueSave="confirmValueSave"
|
:constType="constType"
|
:editRow="form"
|
:title="constType==2?'配置':'输入'"
|
></ConstantSetDialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
saveSalaryPlan,
|
getSalaryTypeList,
|
saveSalaryType,
|
} from "@/api/employeeSalary/salaryPlan.js";
|
import { getWorkTypeList } from "@/api/employeeManage/employeeInfo.js";
|
import BomDialog from "@/views/employeeSalary/salaryPlan/components/bomDialog.vue";
|
import SilkSetDialog from "@/views/employeeSalary/salaryPlan/components/SilkSetDialog.vue";
|
import ConstantSetDialog from "@/views/employeeSalary/salaryPlan/components/ConstantSetDialog.vue";
|
export default {
|
components: {
|
BomDialog,
|
SilkSetDialog,
|
ConstantSetDialog
|
},
|
props: {
|
editRow: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
islook: false,
|
form: {
|
name: "",
|
workTypes: [],
|
salaryType: "",
|
salaryFormula: "",
|
error:'',
|
purchaseTypeList:[1],
|
cycle:1,
|
},
|
activeName: 1,
|
formulaName:[
|
{
|
name:'日产丝量',
|
},
|
{
|
name:'野纤数量',
|
type:1,
|
},
|
{
|
name:'生丝单价',
|
},
|
{
|
name:'野纤单价',
|
},
|
{
|
name:'桶数(日)',
|
},
|
{
|
name:'出勤天数',
|
},
|
{
|
name:'同组挡车工月平均工资',
|
width:2
|
},
|
{
|
name:'同组车头工工资',
|
width:2
|
}
|
],
|
formulaNameTwo:[
|
{
|
name:'工作日加班时长',
|
},
|
{
|
name:'满勤奖',
|
type:2,
|
},
|
{
|
name:'休息日加班时长',
|
},
|
{
|
name:'请假天数',
|
},
|
{
|
name:'带徒天数',
|
},
|
{
|
name:'工龄',
|
},
|
{
|
name:'出勤天数',
|
},
|
],
|
formulaSymbol:[
|
{
|
name:'+',
|
background:'background_red',
|
},
|
{
|
name:'-',
|
background:'background_red',
|
},
|
{
|
name:'/',
|
background:'background_red',
|
},
|
{
|
name:'*',
|
background:'background_red',
|
},
|
{
|
name:'(',
|
},
|
{
|
name:')',
|
},
|
{
|
name:'常量数字',
|
type:3,
|
width:2
|
},
|
],
|
workTypeList: [], //工种
|
rules: {
|
name: [
|
{ required: true, message: "请填写", trigger: ["blur", "change"] },
|
],
|
workTypes: [
|
{
|
required: true,
|
message: "请选择",
|
trigger: ["blur", "change"],
|
},
|
],
|
salaryType: [
|
{ required: true, message: "请选择", trigger: ["blur", "change"] },
|
],
|
salaryFormula: [
|
{ required: true, message: "请选择", trigger: ["blur", "change"] },
|
],
|
},
|
unitList: [],
|
constType:'',
|
};
|
},
|
computed: {},
|
created() {
|
this.handleGetBomKindDictList();
|
this.getSelectDataList();
|
},
|
mounted() {},
|
watch: {
|
islook(newVal) {
|
if (newVal) {
|
this.formInfo();
|
}
|
},
|
editRow() {
|
this.formInfo();
|
},
|
},
|
methods: {
|
tabClickBottom(activeName) {
|
this.activeName = activeName;
|
},
|
// 点击生产数据和考勤及补贴数据 赋值计费公式定义
|
formulaClick(item,value){
|
let string=''
|
let name=(item.type==3&&item.name=='常量数字')?value:item.name
|
if(item.background){
|
string="<span class='formula-input-item background_red color_fff'>"+ name +"</span>"
|
}else{
|
string="<span class='formula-input-item background_e3e3e3'>"+ name +"</span>"
|
}
|
this.form.salaryFormula= this.form.salaryFormula+string;
|
this.$forceUpdate()
|
},
|
checkFormula(){
|
|
},
|
confirmValueSave(form,type){
|
if(type==1){
|
this.form.purchaseTypeList=form.purchaseTypeList;
|
}else if(type==2){
|
this.form.cycle=form.cycle
|
}else if(type==3){
|
this.formulaClick({
|
name:'常量数字',
|
type:3,
|
width:2
|
},form.number)
|
}
|
},
|
// 野纤数量
|
handleSlikSetShow(){
|
this.$refs.silkSetDialog.islook = true;
|
},
|
// 满勤奖
|
handleConstSetShow(val){
|
this.constType=val;
|
this.$refs.constantSetDialog.islook = true;
|
},
|
// 单位
|
handleUnitShow() {
|
this.handleGetBomKindDictList();
|
this.$refs.editDialog.editDialogVisible = true;
|
},
|
handleConfirmSave(dataList) {
|
saveSalaryType({
|
type: 8,
|
values: dataList,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.$message({
|
message: "操作成功！",
|
type: "success",
|
});
|
this.$refs.editDialog.editDialogVisible = false;
|
this.handleGetBomKindDictList();
|
}
|
});
|
},
|
handleGetBomKindDictList() {
|
getSalaryTypeList({ type: 8 }).then((res) => {
|
this.unitList = res.data;
|
});
|
},
|
formInfo() {
|
if (this.islook) {
|
this.form = {
|
name: "",
|
workTypes: [],
|
salaryType: "",
|
salaryFormula: "",
|
error:'',
|
purchaseTypeList:[1],
|
cycle:1,
|
};
|
this.$nextTick(() => {
|
this.$refs["form"].resetFields();
|
if (this.editRow.id) {
|
this.form = JSON.parse(JSON.stringify(this.editRow));
|
}
|
});
|
}
|
},
|
getSelectDataList() {
|
getWorkTypeList({
|
page: 0,
|
pageSize: 0,
|
keyWord: "",
|
}).then((res) => {
|
if (res.code == 200) {
|
this.workTypeList = res.data || [];
|
}
|
});
|
},
|
cancelMethod(val) {
|
this.$refs["form"].resetFields();
|
this.islook = false;
|
if (val) {
|
this.$emit("refresh");
|
}
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let form = JSON.parse(JSON.stringify(this.form));
|
if(form.purchaseTypeList.length==0){
|
this.$message.error('请点击野纤数量配置生丝标准！')
|
return true;
|
}
|
saveSalaryPlan(form).then((res) => {
|
if (res.code == 200) {
|
this.$message({
|
message: "保存成功！",
|
type: "success",
|
});
|
this.cancelMethod(true);
|
}
|
});
|
} else {
|
return false;
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.form-box {
|
width: 90%;
|
margin-bottom: 40px;
|
margin: 0 auto;
|
.formula-box{
|
height:auto;
|
width:calc(100% - 110px);
|
font-size:14px;
|
line-height:25px;
|
padding-left:110px;
|
.formula-bottom-box{
|
width:100%;
|
height:auto;
|
overflow:hidden;
|
margin-bottom:30px;
|
.formula-p{
|
line-height:40px;
|
}
|
.formula-l,.formula-r{
|
height:auto;
|
float:left;
|
}
|
.formula-l{
|
width:calc(75% - 10px);
|
margin-right:20px;
|
}
|
.formula-r{
|
width:calc(25% - 10px);
|
}
|
.formula-item-100{
|
width:100%;
|
margin-bottom:10px;
|
span{
|
cursor: pointer;
|
padding:5px 10px;
|
}
|
}
|
.formula-item{
|
width:calc(50% - 5px);
|
margin-bottom:10px;
|
float:left;
|
&:nth-of-type(odd) {
|
margin-right: 10px;
|
}
|
span{
|
cursor: pointer;
|
padding:5px 10px;
|
}
|
}
|
.formula-bottom{
|
padding:15px 10px;
|
background:#f3f3f3;
|
overflow:hidden;
|
}
|
}
|
}
|
.formula-input{
|
width:calc(100% - 100px);
|
height:100px;
|
padding:10px 10px;
|
overflow-y:auto;
|
background:#F5F7FA;
|
border:1px solid #E4E7ED;
|
cursor:not-allowed;
|
float:left;
|
margin-right:20px;
|
}
|
.formula-btn{
|
float:left;
|
margin-top:80px;
|
}
|
.formula-error{
|
width:100%;
|
line-height:28px;
|
font-size:12px;
|
}
|
}
|
|
::v-deep {
|
.el-form {
|
.el-input__inner {
|
text-align: left;
|
}
|
}
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
</style>
|
