haoxuan
2024-04-29 caeb71b06d19a8ffd854c19e5e4b58f7180cdce8
src/views/employeeSalary/salaryPlan/components/addDialog.vue
@@ -1,132 +1,753 @@
<template>
  <div class="add_wordshop">
    <el-dialog :title="editConfig.dialogTitle + '车间管理'" :visible.sync="editConfig.visible" width="30%"
      :before-close="handleClose">
      <el-form :inline="true" label-width="20%" style="width: 100%;" :model="editConfig.infomitton" :rules="rules"
        ref="ruleForm">
        <el-form-item label="方案名称" style="width: 100%;" prop="groupNumber">
          <el-input v-model="editConfig.infomitton.workshop" placeholder="请输入内容"></el-input>
    <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 prop="workshop"  label="工种" style="width: 100%;" >
          <el-select
            :disabled="this.editConfig.dialogTitle==='查看'" v-model="editConfig.infomitton.workshop" value-key="name" placeholder="请选择车间">
        <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 workshopList"
              v-for="item in workTypeList"
              :key="item.ID"
              :label="item.name"
              :value="item">
              :label="item.workName"
              :value="{ value: item.ID, label: item.workName }"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="workshop"  label="薪资类型" style="width: 100%;" >
          <el-select
            :disabled="this.editConfig.dialogTitle==='查看'" v-model="editConfig.infomitton.groupNumber" value-key="name" placeholder="请选择车间">
        <el-form-item prop="salaryTypeId" label="薪资类型">
          <el-select
            v-model="form.salaryTypeId"
            style="width: calc(100% - 40px)"
            placeholder="请选择车间"
          >
            <el-option
              v-for="item in workshopList"
              :key="item.ID"
              v-for="item in unitList"
              :key="item.id"
              :label="item.name"
              :value="item">
              :value="item.id"
            >
            </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="workshop"  label="计费公式定义" style="width: 100%;" >
          <el-input
        <el-form-item prop="salaryFormulaHtml" label="计费公式定义">
          <!-- <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            :autosize="{ minRows: 4, maxRows: 6}"
            disabled
            placeholder="请输入内容"
            v-model="editConfig.infomitton.workshop">
          </el-input>
            v-model="form.salaryFormulaHtml"
          >
          </el-input> -->
          <div class="formula-input" v-html="form.salaryFormulaHtml"></div>
          <div class="formula-btn-right">
            <el-button
              class="formula-btn-t"
              type="text"
              :disabled="form.salaryFormulaHtml.length > 0 ? false : true"
              @click="deleteFormula()"
              >清除</el-button
            >
            <el-button
              class="formula-btn"
              :disabled="form.salaryFormulaHtml.length > 0 ? false : true"
              type="text"
              @click="checkFormula()"
              >检查公式</el-button
            >
          </div>
        </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(10)"
                  ></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 @click="editConfig.visible = false">取 消</el-button>
        <el-button type="primary" @click="commitForm('ruleForm')">确 定</el-button>
        <el-button type="cancel" @click="cancelMethod()">取消</el-button>
        <el-button type="primary" :loading="isAddloading" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
    <BomDialog
      ref="editDialog"
      @handleConfirmSave="handleConfirmSave"
      :workList="unitList"
      title="计量单位"
    ></BomDialog>
    <SilkSetDialog
      ref="silkSetDialog"
      @confirmValueSave="confirmValueSave"
      :editRow="{wildSilkList:wildSilkList}"
      title="配置"
    ></SilkSetDialog>
    <ConstantSetDialog
      ref="constantSetDialog"
      @confirmValueSave="confirmValueSave"
      :constType="constType"
      :editRow="constType == 10?{absenteeism:absenteeism}:form"
      :title="constType == 10 ? '配置' : '输入'"
    ></ConstantSetDialog>
  </div>
</template>
<script>
// import {} from "@/api/systemSetting/workshopManage"
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: {
    editDiaConfig: {
    editRow: {
      type: Object,
      default: () => {
        return {
          visible: false,
          dialogTitle: "添加",
          isReadonly: true,
          infomitton: {
          },
        }
      }
    }
    },
  },
  data() {
    return {
      editConfig: this.editDiaConfig,
      workshopList: [],
      carFlagList: [
      ],
      rules: {
        workshopNumber: [
          { required: true, message: '请选择车间', trigger: 'change' }
        ],
        groupNumber: [
          { required: true, message: '请填写组别', trigger: 'change' }
        ]
      islook: false,
      form: {
        name: "",
        workTypes: [],
        salaryTypeId: null,
        salaryFormula: "",
        salaryFormulaHtml: "",
        error: "",
      },
      // 满勤奖设置
      absenteeism:{value:1,id:null},
      // 设置野纤的生丝标准
      wildSilkList: {value:'野纤',id:null},
      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"],
          },
        ],
        salaryTypeId: [
          { required: true, message: "请选择", trigger: ["blur", "change"] },
        ],
        salaryFormulaHtml: [
          { required: true, message: "请选择", trigger: ["blur", "change"] },
        ],
      },
      unitList: [],
      constType: "",
      isAddloading: false,
    };
  },
  computed: {
  },
  computed: {},
  created() {
    this.handleGetBomKindDictList();
    this.handleGetBomKindDictList(9);
    this.handleGetBomKindDictList(10);
    this.getSelectDataList();
  },
  mounted() {
  },
  mounted() {},
  watch: {
    islook(newVal) {
      if (newVal) {
        this.formInfo();
      }
    },
    editRow() {
      this.formInfo();
    },
  },
  methods: {
    handleClose(done) {
      done();
    tabClickBottom(activeName) {
      this.activeName = activeName;
    },
    setParams() {
      let params = {
        workshopNumber: this.editConfig.infomitton.workshopNumber + '',
        groupNumber: Number(this.editConfig.infomitton.groupNumber),
        startCarNumber: Number(this.editConfig.infomitton.startCarNumber),
        endCarNumber: Number(this.editConfig.infomitton.endCarNumber),
        carFlag: Number(this.editConfig.infomitton.carFlag),
        notes: this.editConfig.infomitton.notes,
        // id:Number(this.editConfig.infomitton.workshopId),
    formInfo() {
      if (this.islook) {
        this.form = {
          name: "",
          workTypes: [],
          salaryTypeId: null,
          salaryFormula: "",
          salaryFormulaHtml: "",
          error: "",
        };
        this.$nextTick(() => {
          this.$refs["form"].resetFields();
          if (this.editRow.id) {
            this.form = JSON.parse(JSON.stringify(this.editRow));
            let salaryFormula = this.form.salaryFormula
              ? this.form.salaryFormula
              : "";
            this.form.salaryFormulaHtml = "";
            this.form.salaryFormula = "";
            let arr = salaryFormula ? salaryFormula.split(",") : [];
            this.getSalaryFormulaHtml(arr);
          }
        });
      }
      return params
    },
    async commitForm(formName) {
    getSalaryFormulaHtml(arr) {
      let formulaNameArr = this.formulaName
        .concat(this.formulaNameTwo)
        .concat(this.formulaSymbol);
      if (arr.length > 0) {
        for (let i in arr) {
          for (let j in formulaNameArr) {
            let reg2 =
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (reg2.test(arr[i])) {
              this.formulaClick(
                { name: "常量数字", type: 3, width: 2 },
                arr[i]
              );
            } else if (formulaNameArr[j].name == arr[i]) {
              this.formulaClick(formulaNameArr[j]);
            }
          }
        }
      }
    },
    // 点击生产数据和考勤及补贴数据 赋值计费公式定义
    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();
    },
    deleteFormula() {
      let salaryFormula = this.form.salaryFormula
              ? this.form.salaryFormula
              : "";
      let arr = salaryFormula.split(",");
      arr = arr.splice(0, arr.length - 1);
      arr = arr.splice(0, arr.length - 1);
      this.form.salaryFormulaHtml = "";
      this.form.salaryFormula = "";
      this.getSalaryFormulaHtml(arr);
    },
    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.$set(this.form, "error", 2);
        } else {
          this.$set(this.form, "error", 1);
        }
      }
    },
    confirmValueSave(form, type) {
      if (type == 9) {
        let wildSilkList = form.wildSilkList;
        this.handleConfirmSave([
          {
            name:wildSilkList.join(','),
            id:this.wildSilkList.id
          }
        ],type)
      } else if (type == 10) {
        let absenteeism = form.absenteeism + "";
        this.handleConfirmSave([
          {
            name:absenteeism,
            id:this.absenteeism.id
          }
        ],type)
      } else if (type == 3) {
        this.formulaClick(
          {
            name: "常量数字",
            type: 3,
            width: 2,
          },
          form.number
        );
      }
    },
    // 野纤数量
    handleSlikSetShow() {
      this.handleGetBomKindDictList(9);
      this.$refs.silkSetDialog.islook = true;
    },
    // 满勤奖
    handleConstSetShow(val) {
      this.constType = val;
      if(val==10){
        this.handleGetBomKindDictList(10);
      }
      this.$refs.constantSetDialog.islook = true;
    },
    // 单位
    handleUnitShow() {
      this.handleGetBomKindDictList();
      this.$refs.editDialog.editDialogVisible = true;
    },
    handleConfirmSave(dataList,val) {
      let params={}
      if(val==9||val==10){
        params={
          type: val,
          values: dataList,
        }
      }else{
        params={
          type: 8,
          values: dataList,
        }
      }
      this.isAddloading = true;
      saveSalaryType(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功!",
            type: "success",
          });
          if(val==9){
            this.$refs.silkSetDialog.islook = false;
          }else  if(val==10){
            this.$refs.constantSetDialog.islook = false;
          }else{
            this.$refs.editDialog.editDialogVisible = false;
          }
          this.handleGetBomKindDictList(val?val:'');
        }
        this.isAddloading = false;
      }).catch(() => {
                setTimeout(() => {
                  this.isAddloading = false;
                }, 3000);
      });
    },
    handleGetBomKindDictList(val) {
      getSalaryTypeList({ type: val?val:8 }).then((res) => {
        if(val==9){
          // 野纤的生丝标准配置
          this.wildSilkList=(res.data&&res.data.length>0)?{
            ...res.data[0],
            value:res.data[0].name.split(',')||[]
          }:{
            id:null,
            value:['野纤']
          }
        }else if(val==10){
          // 考勤配置
          this.absenteeism=(res.data&&res.data.length>0)?{
            ...res.data[0],
            value:res.data[0].name||1
          }:{
            id:null,
            value:1
          }
        }else{
          this.unitList = res.data;
        }
      });
    },
    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) {
          console.log("校验通过")
          this.checkFormula();
          if (this.form.error == 2) {
            this.$message.error("请检查计费公式定义!");
            return true;
          }
          let form = JSON.parse(JSON.stringify(this.form));
          let arr = form.salaryFormula.split(",");
          arr = arr.splice(0, arr.length - 1);
          form.salaryFormula = arr.join(",");
          let workTypes = [];
          if (form.workTypes && form.workTypes.length > 0) {
            for (let i in form.workTypes) {
              workTypes.push({
                workName: form.workTypes[i].label,
                id: form.workTypes[i].value,
              });
            }
          }
          form.workTypes = workTypes;
          saveSalaryPlan(form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "保存成功!",
                type: "success",
              });
              this.cancelMethod(true);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  components: {
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-form-item__content {
  width: 70% !important;
.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% - 90px);
    height: 100px;
    padding: 10px 10px;
    overflow-y: auto;
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    cursor: not-allowed;
    float: left;
  }
  .formula-btn-right {
    width: 60px;
    float: left;
    position: relative;
    .formula-btn-t {
      margin-left: 10px;
    }
    .formula-btn {
      margin-top: 40px;
    }
  }
  .formula-error {
    width: calc(100% - 110px);
    line-height: 28px;
    font-size: 14px;
    margin-left: 110px;
    margin-bottom: 10px;
  }
}
::v-deep {