hz_crm_web/src/views/contract_manage/components/allocationNumber.vue

<template>
  <div class="container-allocation-number-rai">
    <el-dialog title="派点" width="1300px" :visible.sync="allocationVisible" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
      <div class="top-content">
        <div>
          <h5>总点数：{{ TotalPointsContent }}</h5>
          <el-button style="margin-top: 20px" type="primary" size="mini" @click="averageaAllocation">平均分配</el-button>
        </div>

        <div>
          <p v-for="(item, index) in textualList" :key="item.text">{{ index + 1 }}{{ item.text }}</p>
        </div>
      </div>
      <div class="content-box">
        <div v-for="item in listArr" :key="item.ChartPermissionName">
          <div :class="['industry-ul', item.ChartPermissionName.includes('研选') && 'ul-yanxuan']">
            <span :class="['industry-name', item.ChartPermissionName.includes('研选') && 'name-yanxuan']">{{ item.ChartPermissionName }}</span>
            <template>
              <el-input :min="-100" :max="100" type="number" v-model="item.Proportion" size="small" @input="restrictInput(item)" style="width: 80px; margin: 0 5px 0 8px">
                <div class="per_cent_" slot="suffix">%</div>
              </el-input>
              <p style="width: 38px">{{ roundedResult(item) }}</p>
            </template>
          </div>
          <div v-for="study in item.List" :key="study.RealName" :class="['industry-ul', item.ChartPermissionName.includes('研选') && 'ul-yanxuan']">
            <span :class="['study-name', item.ChartPermissionName.includes('研选') && 'name-yanxuan']">{{ study.RealName }}</span>
            <template>
              <el-input :min="-100" :max="100" type="number" v-model="study.Proportion" size="small" style="width: 76px; margin: 0 5px 0 8px">
                <div class="per_cent_" slot="suffix">%</div>
              </el-input>
              <p style="width: 38px">{{ roundedResult(study) }}</p>
            </template>
          </div>
          <div class="all-item">
            <span> {{ allPerCentHandler(item) == 0 ? "" : `总占比：` }}</span>
            <span> {{ allPerCentHandler(item) == 0 ? "" : `${allPerCentHandler(item)}` }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addAllocationHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { contractInterface } from "@/api/api.js";

export default {
  name: "",
  components: {},
  props: {
    allocationVisible: {
      default: false,
      type: Boolean,
    },
    allocationForm: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      listArr: [],
      allNum: 0,
      TotalPointsContent: "",
      isXClass: false,
    };
  },
  computed: {
    textualList() {
      let items = [
        {
          text: "）单行业套餐只能在对应行业内部分配研究员贡献百分比",
        },
        {
          text: "）多行业套餐先在行业间分配百分比（最低不低于平均值的一半），再分配到个人",
        },
        {
          text: "）允许总额20%以内的负分",
        },
        {
          text: "）转正后一个季度内可以提交和修改",
        },
      ];
      if (this.isXClass) {
        return items.filter((item, index) => index == 0 || index == 3);
      } else {
        return items;
      }
    },
  },
  watch: {
    allocationVisible: {
      handler(newVal) {
        newVal && this.getList();
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 取消弹框
    handleClose() {
      this.listArr = [];
      this.$emit("update:allocationForm", {});
      this.$emit("update:allocationVisible", false);
    },
    // 提交弹框
    async addAllocationHandler() {
      this.listArr.forEach((item) => {
        item.Money = Number(item.Money) || 0;
        item.Proportion = Number(item.Proportion) || 0;
        item.List.forEach((_) => {
          _.Money = Number(_.Money) || 0;
          _.Proportion = Number(_.Proportion) || 0;
        });
      });
      let arrList = this.listArr;
      const res = await contractInterface.getAllocationDetailUpdate({
        CompanyContractId: this.allocationForm.CompanyContractId,
        List: arrList,
      });
      if (res.Ret === 200) {
        this.$message.success("操作成功");
        this.$parent.getTableData();
        this.handleClose();
      }
    },
    // 处理百分比
    roundedResult(row) {
      let num = row.Proportion >= 0 ? (row.Proportion * 100) / 100 / 100 : row.Proportion / 100;
      row.Money = row.Proportion ? (this.allNum * num).toFixed(2) : "";
      return row.Money;
    },
    // 输入框的限制
    restrictInput(item) {
      if (item.Proportion > 100) return (item.Proportion = 100);
      if (item.Proportion < -100) return (item.Proportion = -100);
    },
    // 数量的总和
    allPerCentHandler(item) {
      let num = 0;
      item && item.List.forEach((key) => (num = num + +key.Proportion));
      return num.toFixed(2);
    },
    // 获取数据
    async getList() {
      const res = await contractInterface.getAllocationDetail({
        CompanyContractId: this.allocationForm.CompanyContractId,
      });
      if (res.Ret === 200) {
        this.allNum = res.Data.Money;
        this.listArr = res.Data.List;
        this.isXClass = res.Data.IsXClass;
        this.TotalPointsContent = res.Data.TotalPointsContent;
      }
    },
    // 平均分配
    averageaAllocation() {
      let num = (100 / this.listArr.length).toFixed(2);
      console.log(num);
      this.listArr.forEach((item) => {
        item.Proportion = num;
        let childrenNum = (num / item.List.length).toFixed(2);
        item.List.forEach((key) => {
          key.Proportion = childrenNum;
        });
      });
    },
  },
};
</script>
<style lang="scss">
.container-allocation-number-rai {
  overflow: hidden;
  .top-content {
    display: flex;
    justify-content: space-between;
  }
  .content-box {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    display: flex;
    .industry-ul {
      display: flex;
      align-items: center;
      margin: 30px 0;
      width: 188px;
      color: #333;
      margin-right: 25px;
      .per_cent_ {
        line-height: 32px;
      }
      .industry-name {
        width: 58px;
        flex-shrink: 0;
        font-weight: 800;
        font-size: 16px;
        line-height: 22px;
      }
      .study-name {
        width: 58px;
        flex-shrink: 0;
        font-size: 14px;
        line-height: 22px;
      }
      p {
        color: #9999;
        font-size: 14px;
      }
    }
  }
  .all-item {
    display: flex;
    padding-right: 15px;
    align-items: center;
    // justify-content: center;
    color: #999;
    font-size: 14px;
    span {
      display: inline-block;
      width: 80px;
    }
  }
  .name-yanxuan {
    width: 70px !important;
  }
  .points-name {
    width: 80px !important;
  }
  .ul-yanxuan {
    width: 220px !important;
  }
  /* 取消[type='number']的input的上下箭头 */
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>