获取薪资类型的接口联调，字段调试+保存薪资类型的接口联调和数据处理

haoxuan

2024-04-24 0e8aa7db6379af20392793295eee2ff3e173af1c

 src/views/employeeSalary/salaryPlan/components/addDialog.vue

@@ -1,104 +1,420 @@
<template>
  <div class="add_wordshop">
    <el-dialog :title="form.title + '薪资方案'" :visible.sync="islook" width="30%"
      :before-close="handleClose">
      <el-form label-width="120px" style="width: 100%;" :model="form" :rules="rules"
        ref="form">
        <el-form-item label="方案名称" style="width: 100%;" prop="groupNumber">
          <el-input v-model="form.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-form-item label="工种：" prop="workTypes">
          <el-select 
             v-model="form.workshop" value-key="name" placeholder="请选择车间">
            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="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="workshop"  label="薪资类型" style="width: 100%;" >
        <el-form-item prop="salaryType" label="薪资类型">
          <el-select 
            v-model="form.groupNumber" value-key="name" placeholder="请选择车间">
            v-model="form.salaryType"
            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.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="workshop"  label="计费公式定义" style="width: 100%;" >
        <el-form-item prop="salaryFormula" label="计费公式定义">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            :autosize="{ minRows: 4, maxRows: 6}"
            disabled
            placeholder="请输入内容"
            v-model="form.workshop">
            v-model="form.salaryFormula"
          >
          </el-input>
        </el-form-item>
        <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>
                </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>
                </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 @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="commitForm('form')">确 定</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
    <BomDialog
      ref="editDialog"
      @handleConfirmSave="handleConfirmSave"
      :workList="unitList"
      title="计量单位"
    ></BomDialog>
  </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";
export default {
  components: { BomDialog },
  props: {
    editRow: {
      type: Object,
    }
    },
  },
  data() {
    return {
      form: {},
      workshopList: [],
      rules: {
        workshopNumber: [
          { required: true, message: '请选择车间', trigger: 'change' }
        ],
        groupNumber: [
          { required: true, message: '请填写组别', trigger: 'change' }
        ]
      islook: true,
      form: {
        name: "",
        workTypes: [],
        salaryType: "",
        salaryFormula: "",
      },
      activeName: 1,
      formulaName:[
        {
          name:'日产丝量',
        },
        {
          name:'野纤数量',
          type:1,
        },
        {
          name:'生丝单价',
        },
        {
          name:'野纤单价',
        },
        {
          name:'桶数(日)',
        },
        {
          name:'出勤天数',
        },
        {
          name:'同组挡车工月平均工资',
          width:2
        },
        {
          name:'同组车头工工资',
          width:2
        }
      ],
      formulaNameTwo:[
        {
          name:'工作日加班时长',
        },
        {
          name:'满勤奖',
          type:1,
        },
        {
          name:'休息日加班时长',
        },
        {
          name:'请假天数',
        },
        {
          name:'带徒天数',
        },
        {
          name:'工龄',
        },
        {
          name:'出勤天数',
        },
      ],
      formulaSymbol:[
        {
          name:'+',
        },
        {
          name:'-',
        },
        {
          name:'/',
        },
        {
          name:'*',
        },
        {
          name:'(',
        },
        {
          name:')',
        },
        {
          name:'常量数字',
          type:1,
          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: [],
    };
  },
  computed: {
  },
  computed: {},
  created() {
    this.handleGetBomKindDictList();
    this.getSelectDataList();
  },
  mounted() {

  },
  mounted() {},
  watch: {

    islook(newVal) {
      if (newVal) {
        this.formInfo();
      }
    },
    editRow() {
      this.formInfo();
    },
  },
  methods: {
    
    async commitForm(formName) {
    tabClickBottom(activeName) {
      this.activeName = activeName;
    },
    // 单位
    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: "",
        };
        this.$nextTick(() => {
          this.$refs["form"].resetFields();
          if (this.editRow.id) {
            this.form = JSON.parse(JSON.stringify(this.editRow));
            this.form.groupNumber = this.form.groupNumber
              ? this.form.groupNumber
              : null;
            this.getGroupNumber(true);
          }
        });
      }
    },
    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("校验通过")
          let form = JSON.parse(JSON.stringify(this.form));
          saveSalaryPlan(form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "保存成功！",
                type: "success",
              });
              this.cancelMethod(true);
            }
          });
        } else {
          console.log('error submit!!');
          console.log("error submit!!");
          return false;
        }
      });


    }
    },
  },
};
</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;
      .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;
      }
    }
    
  }
}

::v-deep {