renli-pc/src/components/staffList/staff/index.vue

<template>
  <div style="width: 300px;overflow: hidden;" class="border-radius-10 border  margin-right-xs  bg-white ">
    <el-table :data="staffLists" max-height="300" class="margin-xs" style="width:280px">
      <el-table-column align="left" prop="brandNumber" label="水牌号--员工名字" min-width="180">
        <template slot-scope="scope">
          <el-select style="width:180px" v-model="scope.row.staffNames" clearable @clear="clear" no-match-text="重新选择员工" placeholder="请选择" @change="ratioChange($event,scope.$index)" filterable default-first-option>
            <el-option v-for="(item,index) in staffList" :key="index" :label="item.brandNumber+'--'+ item.staffName" :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ratio" label="占比(%)" width="80">
        <template slot-scope="scope">
          <div class="form-input-width" v-if="editIndex!=scope.$index" @click="openStaffRatio(scope.$index, scope.row)">
            {{ scope.row.ratio }}
            <i class="el-icon-edit text-cyan" v-if="scope.$index!=0"></i>
          </div>
          <el-input v-focus class="form-input-width-xs" size="samll" type="number" oninput="this.value=this.value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3')" pattern="[0-9]*\.?[0-9]{0,2}" v-else v-model="scope.row.ratio" @blur="endStaffRatio(scope.row, scope.$index)"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 150px;margin:10px auto;" class="flex justify-between align-center">
      <el-button size="mini" type="info" :disabled="staffLists.length == 0" @click="delsalesman">撤销</el-button>
      <el-button size="mini" type="primary" plain @click="(staffLists.push({brandNumber:'',staffName:'',ratio:0}))">增加</el-button>
    </div>
  </div>
</template>

<script>
import { selectList } from "@/api/eashier.js";
export default {
  data() {
    return {
      staffList: [], //选择员工数组
      staffLists: [{ ratio: 100 }], //员工占比初始化 //主员工数组
      editIndex: -1, //员工占比修改下标
      staffListCopy: [], //复制选择员工数组
      storeId: null, //当前门店id
    };
  },
  methods: {
    //下拉选择方法
    ratioChange(v, index) {
      this.staffList.forEach((item) => {
        if (item.id == v) {
          item.ratio = this.staffLists[index].ratio;
          item.staffNames = item.brandNumber + "--" + item.staffName;
          this.staffLists.splice(index, 1, item);
        }
      });
      this.changeStaff();
      this.confirm();
    },
    //删除当前选择
    clear() {
      this.staffLists = [{ ratio: 100 }];
      this.changeStaff();
      this.confirm();
    },
    //打开员工修改输入框
    openStaffRatio(index, row) {
      if (index != 0 || row.ratio * 1 != 100) {
        let form = { ...row };
        this.editIndex = index;
        this.staffLists.splice(index, 1, form);
      }
    },
    //关闭员工修改输入框
    endStaffRatio(row, index) {
      let num = 0;
      if (index != 0) {
        this.staffLists.forEach((item, i) => {
          if (i != 0) {
            num += item.ratio * 1;
          }
        });
        this.staffLists[0].ratio = 100 - num;
        if (this.staffLists[0].ratio < 1) {
          this.$message.error({
            message: "第一位员工占比过低",
          });
        } else {
          if (!row.ratio) {
            row.ratio = 0;
          } else {
            row.ratio = row.ratio * 1;
          }
          let form = this.staffLists[index];
          this.editIndex = -1;
          this.staffLists.splice(index, 1, form);
        }
      }
      this.changeStaff();
      this.confirm();
    },
    //撤销增加员工
    delsalesman() {
      let index = this.staffLists.length - 1;
      if (index == 0) {
        this.$message.warning({ message: "第一行员工只能修改" });
      } else {
        let ratio = this.staffLists[index].ratio;
        this.staffLists[0].ratio += ratio;
        this.staffLists.splice(index, 1);
      }
      this.changeStaff();
      this.confirm();
    },
    //组件传值
    show(list, storeId) {
      console.log(list);
      this.staffLists = [...list];
      if (storeId) {
        this.storeId = storeId;
      }
      this.getData();
    },
    //确定返回方法
    confirm() {
      let list = [];
      this.staffLists.forEach((item) => {
        let items = {
          id: item.id,
          ratio: item.ratio,
          brandNumber: item.brandNumber,
          staffName: item.staffName,
          identityCard: item.identityCard,
          storeId: item.storeId,
          storeName: item.storeName,
          staffNames: item.brandNumber + "--" + item.staffName,
          staffType: 2,
        };
        list.push(items);
      });
      this.$emit("staffslesData", list);
    },
    //改变员工 去除未选择员工列表中的员工
    changeStaff() {
      var that = this;
      var list = that.staffLists
        .concat(that.staffListCopy)
        .filter(function (v) {
          return (
            that.staffLists.indexOf(v) === -1 ||
            that.staffListCopy.indexOf(v) === -1
          );
        });
      this.staffList = list;
    },
    //获取员工数据
    //获取数据
    async getData() {
      let form = { id: "" };
      if (this.storeId) {
        form.storeId = this.storeId;
      }
      selectList(form).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            item.editStaffRatioShow = false;
          });
          this.staffList = res.rows;
          this.staffListCopy = res.rows;
        } else {
          this.$alert(res.message, "加载员工提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
};
</script>

<style>
</style>