<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="{ value: item.ID, label: item.workName }"
|
>
|
</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="salaryFormulaHtml" label="计费公式定义">
|
<!-- <el-input
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 6}"
|
disabled
|
placeholder="请输入内容"
|
v-model="form.salaryFormulaHtml"
|
>
|
</el-input> -->
|
<div class="formula-input" v-html="form.salaryFormulaHtml"></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" class="color_blue">
|
无错误，可放心使用 !
|
</span>
|
<span v-if="form.error == 2" class="color_red">
|
公式有错误，请检查 !
|
</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: "",
|
salaryFormulaHtml: "",
|
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"] },
|
],
|
salaryFormulaHtml: [
|
{ 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 + name + "，";
|
this.form.salaryFormulaHtml = this.form.salaryFormulaHtml + string;
|
this.$forceUpdate();
|
},
|
checkFormula() {
|
if (this.form.salaryFormula) {
|
let string = true;
|
let isString = '+-*/';
|
let arr = this.form.salaryFormula.split("，");
|
arr=arr.splice(0,arr.length-1)
|
for (let i=0;i<arr.length;i++) {
|
if (arr[i] != "") {
|
// 除数不能为0, 符号那边需要有值
|
if (isString.indexOf(arr[i]) != -1 || arr[i] == "(") {
|
if (i != 0) {
|
if (isString.indexOf(arr[i - 1]) != -1) {
|
string = false;
|
break;
|
}
|
}
|
if (i == arr.length - 1) {
|
string = false;
|
break;
|
}
|
if (i < arr.length - 1) {
|
if (isString.indexOf(arr[i + 1]) != -1) {
|
string = false;
|
break;
|
} else if (arr[i] == "/" && arr[i + 1] == 0) {
|
string = false;
|
break;
|
}
|
}
|
} else if (arr[i] == ")") {
|
if (i < arr.length - 1) {
|
if (isString.indexOf(arr[i+1]) == -1) {
|
string = false;
|
break;
|
}
|
}
|
} else {
|
if (i != 0) {
|
if (isString.indexOf(arr[i - 1]) == -1 && arr[i - 1] != "(") {
|
string = false;
|
break;
|
}
|
}
|
if (i < arr.length - 1) {
|
if (isString.indexOf(arr[i + 1]) == -1 && arr[i + 1] != ")") {
|
string = false;
|
break;
|
}
|
}
|
}
|
}
|
}
|
|
if (!string) {
|
this.form.error = 2;
|
} else {
|
this.form.error = 1;
|
}
|
}
|
},
|
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: "",
|
salaryFormulaHtml: "",
|
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));
|
let arr = form.salaryFormula.split("，");
|
arr=arr.splice(0,arr.length-1)
|
form.salaryFormula=arr.join("，")
|
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: calc(100% - 110px);
|
line-height: 28px;
|
font-size: 14px;
|
margin-left: 110px;
|
margin-bottom: 10px;
|
}
|
}
|
|
::v-deep {
|
.el-form {
|
.el-input__inner {
|
text-align: left;
|
}
|
}
|
|
.el-select {
|
width: 100%;
|
}
|
}
|
</style>
|
