增加用户名的显示和退出登录的操作

haoxuan

2024-04-25 ce58040e3959fc8b23fce4289b170a6dbc2e71a4

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

@@ -1,132 +1,525 @@
<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="item"
            >
            </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="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-input
        <el-form-item prop="salaryFormula" 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.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 @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" @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 {} 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: [],
        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: {
  },
  computed: {},
  created() {
    this.handleGetBomKindDictList();
    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),
    // 点击生产数据和考勤及补贴数据 赋值计费公式定义
    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>"
      }
      return params
      this.form.salaryFormula= this.form.salaryFormula+string;
      this.$forceUpdate()
    },
    async commitForm(formName) {
    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) {
          console.log("校验通过")
          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 {
          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% - 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 {