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

haoxuan

2024-04-24 0e8aa7db6379af20392793295eee2ff3e173af1c

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

 src/api/employeeSalary/salaryPlan.js

@@ -19,7 +19,7 @@
//获取薪资类型
export function getSalaryTypeList(data) {
  return request({
    url: "/api-jl/v1/salary/getSalaryTypeList/"+data.number,
    url: "/api-jl/v1/salary/getSalaryTypeList/"+data.type,
    method: "get",
    data
  })

 src/assets/style/index.scss

@@ -165,7 +165,24 @@
.border_radius_12{
  border-radius: 12px;
}

// 列表下的页签的样式
.table-bottom-tabs {
  height: 34px;
  line-height: 34px;
  display: flex;
  font-size: 14px;
  .tab-pane {
    min-width: 60px;
    width:auto;
    padding:0 20px;
    margin-right: 20px;
    text-align: center;
    background: #2a78fb;
    cursor: pointer;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;

 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-select 
             v-model="form.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="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="workshop"  label="薪资类型" style="width: 100%;" >
          <el-select 
            v-model="form.groupNumber" value-key="name" placeholder="请选择车间">
        <el-form-item prop="salaryType" label="薪资类型">
          <el-select
            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 {

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

New file
@@ -0,0 +1,287 @@
<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="editDialogVisible"
    width="33rem"
    class="add-event-dialog"
    @close="shutdown"
    append-to-body
  >
    <div slot="title" class="tac drawerHeader">
      <!-- {{ title }}组件 -->
      编辑下拉框>薪资类型
    </div>
    <div class="drawerContent">
      <el-table
        v-if="isTableShow"
        :header-cell-style="{ background: '#f1f3f8',  color: '#000009' }"
        ref="unitTable"
        :data="BomTableData"
        tooltip-effect="dark"
        height="440"
      >
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="是否编辑">
          <template slot-scope="scope">
            <el-switch
              @change="switchChange( scope , scope.row.isDefault)"
              v-model="scope.row.isDefault"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <i
              class="el-icon-delete cursor_pointer"
              id="iconStyle"
              @click="handleDelete(scope.row.id, scope)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        @click="handleAdd()"
        type="text"
        class="margin_top_15px margin_left_20px"
        >新增下拉框</el-button
      >
    </div>
    <div slot="footer" class="dialog-footer tac">
      <el-button @click="shutdown">取消</el-button>
      <el-button
        type="primary"
        @click="handleConfirmSave()"
        style="margin-left: 16px; color: #fff; background-color: #2a78fb"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "bomDialog",
  props: {
    title: {
      type: String,
    },
    workList: {
      type: Array,
    },
  },
  data() {
    return {
      editDialogVisible: false,
      isTableShow: true,
      form: {},
      BomTableData: [],
    };
  },
  watch: {
    editDialogVisible(newVal) {
      if (newVal) {
        this.BomTableData = this.workList;
      }
    },
    workList() {
      this.BomTableData = this.workList;
    },
  },
  mounted() {},
  methods: {
    handleAdd() {
      this.BomTableData.push({ name: "", isDefault: false });
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.unitTable.bodyWrapper.scrollTop =
            this.$refs.unitTable.bodyWrapper.scrollHeight;
        }, 500);
      });
    },
    handleDelete(id, scope) {
      if (this.BomTableData.length === 1) {
        this.$message.warning("至少保留一条数据");
        return;
      }
      this.BomTableData.splice(scope.$index, 1);
    },
    switchChange(scope, val) {
      for (let i in this.BomTableData) {
        this.BomTableData[i].isDefault = false;
      }
      scope.row.isDefault = val;
    },
    handleConfirmSave() {
      let arr = [];
      for (let i in this.BomTableData) {
        if (this.BomTableData[i].isDefault) {
          arr.push(i);
        }
      }
      if (arr.length > 1) {
        this.$message({
          message: "只能设一个为默认",
          type: "warning",
        });
      } else {
        this.$emit("handleConfirmSave", this.BomTableData);
      }
    },
    shutdown() {
      this.editDialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer {
  z-index: 99;
  border: 2px solid #ccc;
  border-radius: 20px;
  background: #fff;
  width: 25vw !important;
  height: 600px;

  #iconStyle {
    font-size: 20px !important;
  }

  .drawerContent {
    position: relative;
    overflow-y: auto;
    padding: 12px 10px 0 10px;
    padding-top: 12px;
    margin: auto;
    width: 25vw;
    overflow-x: hidden;
    height: 480px;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    ::v-deep .el-tabs__nav-scroll {
      padding-left: 25px;
    }

    .baseTitle {
      margin: 50px 0 20px;
      font-weight: bold;
    }

    .baseInfo {
      display: flex;
    }
  }

  .drawerContent::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}

.drawerFooter {
  margin-top: 16px;
  margin-right: 20px;
  text-align: right;

  .el-button {
    width: 80px;
    height: 38px;
    border-color: rgba(0, 0, 0, 0.1);
    font-family: PingFangSC-Medium, sans-serif;
    color: #000;
  }
}

::v-deep .el-form {
  width: 389px;

  .input-box .input-content input {
    margin: 0;
    margin-right: 3px;
  }

  .el-input__inner,
  .el-textarea__inner {
    line-height: 18px;
    font-family: PingFangSC;
  }
}

::v-deep .el-tabs__header {
  border: none;

  .el-tabs__nav {
    border: none;
  }
}

::v-deep .el-form-item__content {
  width: 263px;

  .input-box {
    width: 263px;
  }
}

::v-deep .el-form-item__label {
  font-size: 13px !important;
  color: #000;
  font-family: PingFangSC;
  text-align: center !important;
  width: 60px;
}

::v-deep .input-box .input-content input {
  width: 23px;
  height: 26px;
  border-color: rgba(0, 0, 0, 0.1);
  font-family: PingFangSC;
}

::v-deep .el-icon-minus {
  width: 13px !important;
  height: 26px !important;
  line-height: 38px !important;
  color: #e5e5e5;
  font-size: 13px;
}

::v-deep .el-input__inner {
  font-size: 13px !important;
  color: rgba(0, 0, 0, 0.9);
}

::v-deep .el-input__inner::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

::v-deep .el-form-item__error {
  font-family: PingFangSC;
}

.self {
  ::v-deep .el-input__inner {
  }
}

::v-deep .el-select-dropdown {
  position: absolute !important;
  top: 36px !important;
  left: 0px !important;
}

::v-deep .el-select-dropdown__wrap {
  overflow: auto !important;
}

::v-deep .el-dialog__body {
  padding-bottom: 10px !important;
}
</style>

 src/views/employeeSalary/salaryPlan/index.vue

@@ -50,14 +50,13 @@
      tableList: {},
      showCol: ["方案名称", "工种", "薪资类型", "计费周期", "计费公式定义", "添加时间", "添加人"],
      tableColumn: [
        // { label: "车间", prop: "workshopNumber",iconRight:"el-icon-setting"},
        { label: "方案名称", prop: "workshopNumber",min:110},
        { label: "工种", prop: "groupNumber",min:100 },
        { label: "薪资类型", prop: "startCarNumber",min:110 },
        { label: "计费周期", prop: "endCarNumber",min:110 },
        { label: "计费公式定义", prop: "carFlag",min:140  },
        { label: "添加时间", prop: "notes",min:130 },
        { label: "添加人", prop: "notes",min:110 },
        { label: "方案名称", prop: "name",min:110},
        { label: "工种", prop: "workTypeNames",min:100 },
        { label: "薪资类型", prop: "salaryType",min:110 },
        { label: "计费周期", prop: "cycle",min:110 },
        { label: "计费公式定义", prop: "salaryFormula",min:140  },
        { label: "添加时间", prop: "createTime",min:130 },
        { label: "添加人", prop: "addPeople",min:110 },
      ],
      keyword: '',
      editRow:{},
@@ -111,7 +110,18 @@
        .then((res) => {
          if (res.code === 200) {
            if (res.data) {
              const list = res.data
              const list = res.data.map(item=>{
                let workTypeNames=''
                if(item.workTypes){
                  for(let i in item.workTypes){
                    workTypeNames=workTypeNames+','+item.workTypeNames[i].name
                  }
                }
                return {
                  ...item,
                  workTypeNames:workTypeNames
                }
              })
              this.tableList.tableInfomation = list || []
              this.pagerOptions.totalCount = res.total
            } else {
@@ -130,9 +140,8 @@
    },
    // 新增
    addBtnClick() {
      this.editConfig.infomitton={}
      this.editConfig.dialogTitle="新增"
      this.editConfig.visible=true
      this.editRow = { title:'新建',type:'add' }
      this.$refs.add.islook = true;
    },
    // 搜索
    onFilterSearch(searchText) {
@@ -153,10 +162,6 @@
      this.editRow = { ...config, 
        title:'编辑',
        type:'edit',
        shopNameObj:{
          value:config.shopId,
          label:config.shopName,
        },
        workTypeObj:{
          value:config.workTypeId,
          label:config.workType,