renli-pc/src/pages/eashier/coursetorec/components/staffratio.vue

<template>
  <el-dialog :close-on-click-model="false" v-dialogDrag :title="staffTitle" :visible.sync="dialogVisible" width="500px"
    append-to-body :before-close="handleClose">
    <el-button size="mini" type="primary" @click="add()">添加</el-button>
    <el-button size="mini" type="primary" @click="del()">删除</el-button>
    <div class="flex">
      <el-table :data="list" max-height="600">
        <el-table-column align="center" :label="staffTitle">
          <el-table-column min-width="140" align="center" label="员工">
            <template slot-scope="scope">
              <el-select filterable default-first-option v-model="scope.row.label" placeholder="请选择"
                @click="editclick($event, scope.$index)" @change="editChange($event, scope.$index)">
                <el-option v-for="item in openList" :key="item.id" :label="item.label" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center" label="占比">
            <template slot-scope="scope">
              <el-input v-focus type="number" @blur="endEdit(scope.row, scope.$index)" :disabled="scope.$index == 0"
                size="samll" v-model="scope.row.ratio"></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirms()">确 定
      </el-button>
    </span>
  </el-dialog>
</template>
 
<script>
import { selectList, selectListType, QuerCompetent } from "@/api/eashier.js";
export default {
  data() {
    return {
      dialogVisible: false, //弹窗开关
      staffList: [],
      list: [], //主数组
      form: {}, //主对象
      openList: [],
      staffText: "",
      staffTexts: "",
      staffTitle: "",
      staffTitles: "",
      staffListCopy: [],
      lists: [],
      len: 0
    };
  },
  methods: {
    handleClose() {
    
      let forms = {
        // text: this.staffTexts,
        list: this.lists
      };
    
      this.$emit("staffratioData", forms);
      this.dialogVisible = false;

    },
    add() {
      this.list.push({ label: "", ratio: 0 });
      this.changeStaff();
    },
    endEdit(row, index) {
    console.log("🚀 ~ file: staffratio.vue ~ line 71 ~ endEdit ~ row", row)
    
      if (row.ratio * 1 > 100) {
        this.$alert("输入值不能大于100", "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: (action) => { },
        });
        row.ratio = 0;
      } else if (row.ratio * 1 < 0) {
        this.$alert("输入值不能小于0", "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: (action) => { },
        });
        row.ratio = 0;
      }
      else {
        row.ratio = row.ratio * 1;
      }
      let number = 0;
      this.list.forEach((item, index) => {
        if (index != 0) {
          number += item.ratio * 1;
        }
      });
      this.list[0].ratio = 100 - number;
      if (this.list[0].ratio < 0) {
        this.$alert("第一个人员占比过低", "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: (action) => { },
        });
        this.list[0].ratio = this.list[0].ratio + row.ratio
        row.ratio = 0;

      }
      this.changeStaff();
    },
    editChange(e, index) {
      let number = 0;
      let row = this.list[index];
      if (this.list.length == 1) {
        row.ratio = 100;
      } else {
        row.ratio = 0
        this.list.forEach((item, index) => {
          if (index != 0) {
            number += item.ratio * 1;
          }
          this.list[0].ratio = 100 - number;
        })
     
      }
      let form = {};
      this.openList.forEach((item) => {
        if (e == item.id) {
          form = { ...item };
        }
      })
      form.ratio = row.ratio;
      this.list.splice(index, 1, form);
  
      this.changeStaff();
    },
    editclick(index) {
       let row = this.list[index];
       row.ratio=0
      let number = 0;
      this.list.forEach((item, index) => {
        if (index != 0) {
          number += item.ratio * 1;
        }
        this.list[0].ratio = 100 - number;
      })
     
    },
    del() {
      let index = this.list.length - 1;
      this.list[0].ratio += this.list[index].ratio;
      this.list.splice(index, 1);
      this.changeStaff();
    },
    showdetele() {
      setTimeout(() => {
        this.$nextTick(() => {
          let row = JSON.parse(localStorage.getItem('row'));
          this.lists = JSON.parse(JSON.stringify([]))
          this.lists = row;
          this.len = this.lists.length
          this.lists.forEach((item) => {
            if (item.id) {
              item.label = item.brandNumber + "-" + item.staffName;
            }
          });
          this.dialogVisible = true;
          this.getData();
          this.changeStaff();
          let number = 0;
          this.lists.forEach((item, index) => {
            if (index != 0) {
              number += item.sale_ratio * 1;
            }
          });
          if (this.lists.length > 0) {
            this.lists[0].sale_ratio = (100 - number).toFixed(2) * 1;
          }
        });
      }, 300);

    },
    show(form) {
      setTimeout(() => {
        this.$nextTick(() => {
          this.list = JSON.parse(JSON.stringify([]));
          this.form = { ...form };
          this.list = form;
          this.list.forEach((item) => {
            if (item.id) {
              item.label = item.brandNumber + "-" + item.staffName;
            }
          });
          this.dialogVisible = true;
          this.getData();
          this.changeStaff();
          let number = 0;
          this.list.forEach((item, index) => {
            if (index != 0) {
              number += item.sale_ratio* 1;
            }
          });
          if (this.list.length > 0) {
            this.list[0].sale_ratio = (100 - number).toFixed(2) * 1;
          }
          this.list.push({ label: "", ratio: 0 });
        });
      }, 300);
    },
    changeStaff() {
      var that = this;
      let arr = [];
      // var list = that.list.concat(that.staffListCopy).filter(function (v) {
      //   return (
      //     that.list.indexOf(v) === -1 || that.staffListCopy.indexOf(v) === -1
      //   );
      // });
      // list.forEach((item) => {
      //   if (item.id) {
      //     arr.push(item);
      //   }
      // });
      // this.openList = arr;
    },
    //获取数据
    async getData() {
      
        let form = { id: "" };
        if (this.staffName) {
          form.staffName = this.staffName;
        }
        selectList(form).then((res) => {
          if (res.code == "000000") {
            res.rows.forEach((item) => {
              item.label = item.brandNumber + "-" + item.staffName;
              item.ratio = 0;
            });
            this.openList = res.rows;
            this.staffListCopy = res.rows;
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => { },
            });
          }
        });
      
    },
    isRepeat(arr, key) {
      var obj = {};
      for (let i = 0; i < arr.length; i++) {
        if (obj[arr[i][key]]) {
          return false; // 存在
        } else {
          obj[arr[i][key]] = arr[i];
        }
      }
      return true;
    },
    confirms() {
      let flag = this.isRepeat(this.list, "brandNumber");
    
      
      this.list.forEach((item,index)=>{
           if(item.staffName==""){
            this.list.splice(index,1)
           }
      })
      let form = {
        // text: this.staffText,
        list: this.list,
      };
     
      if (flag) {
        console.log("🚀 ~ file: staffratio.vue ~ line 284 ~ confirms ~ form", form)
        this.$emit("staffratioData", form);
         
          
        this.dialogVisible = false;
      } else {
        this.$alert("选择员工存在重复", "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: (action) => { },
        });
      }
    },
  },
};
</script>
 
<style>
</style>