UNION_HUTB/target/classes/static/components/plugins/FghSelect.vue

<template>

  <div>

    <vi-title2 title="分段设置&emsp;&emsp;提示：如分工会人数在0-20人的，分配5个名额；21-50人，分配10个名额">
      <template #func>
        <el-button size="small" type="primary" @click="unionLimitQuickSetting">
          应用分段设置
        </el-button>
      </template>
    </vi-title2>

    <el-row v-for="(item,index) in unionUserNumCalc" :gutter="20" class="mb5">
      <el-col :span="7">
        <el-input-number v-model="item.startNum" :precision="0" :step="1" :min="1" placeholder="请输入最小人数"
                         style="width: 100%"></el-input-number>
      </el-col>
      <el-col :span="7">
        <el-input-number v-model="item.endNum" :precision="0" :step="1" :min="1" placeholder="请输入最大人数"
                         style="width: 100%"></el-input-number>
      </el-col>
      <el-col :span="6">
        <el-input-number v-model="item.resultNum" :precision="0" :step="1" :min="1" placeholder="请输入限制人数"
                         style="width: 100%"></el-input-number>
      </el-col>
      <el-col :span="4" class="text-right">
        <el-button icon="el-icon-plus" @click="unionUserNumCalc.push({})"></el-button>
        <el-button icon="el-icon-minus" @click="unionUserNumCalc.splice(index,1)"
                   :disabled="unionUserNumCalc.length===1"></el-button>
      </el-col>
    </el-row>
    <el-row class="mt10">
      <div v-for="(item,index) in unionUserNumCalcTips" class="text-danger">
        <span class="mr10">({{index+1}}).</span> {{item}}
      </div>
    </el-row>

    <vi-title2 title="比例设置" class="mt20">
      <template #func>
        一键比例：
        <el-input-number v-model="unionUserNumOneKeyRatio" :precision="0" :step="1" :min="0"
                         placeholder="请输入一键比例"
                         size="small"
                         :max="100"></el-input-number>
        <el-button size="small" type="primary" @click="applyScaleSettings" class="ml5">应用比例设置</el-button>
      </template>
    </vi-title2>

    <el-table :data="union_limit" max-height="500px">
      <el-table-column prop="unionname" label="分工会"></el-table-column>
      <el-table-column prop="teacherCount" label="人数"></el-table-column>
      <el-table-column prop="ratio" label="比例(%)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.ratio" @change="(val) => ratioChange(val, scope.$index)" :precision="0" :step="1" :min="0" :max="100"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="limitCount" label="分配人数">
        <template scope="{row}">
          <el-input-number v-model="row.limitCount" :precision="0" :step="1" :min="0"
                           :max="row.teacherCount" @change="calSummaryCount"></el-input-number>
        </template>
      </el-table-column>
    </el-table>

    <el-row class="mt20" justify="end" type="flex">
      <div class="text-danger" style="width: 100%;font-size: 18px;display: flex;align-items: center;font-weight: bold">分配总人数：{{summaryCount}}人</div>
      <el-button @click="clearUnionLimit" type="danger">清空当前已分配</el-button>
    </el-row>

  </div>

</template>

<script>
module.exports = {
  props: {
    union_limit: {
      type: Object, default: []
    },
    user_scope: {
      type: String, default: ''
    }
  },
  model: {

  },
  data() {
    return {
      unionUserNumCalc: [{}],
      summaryCount: 0,
      unionUserNumOneKeyRatio: null,
    }
  },
  watch: {
    union_limit: {
      deep: true,
      handler: function (value) {
        this.$emit("update:union_limit", value)
      }
    }
  },
  methods: {
    async clearUnionLimit() {
      const confirm = await this.$confirm('确定要清空分工会人数限制吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if ('confirm' === confirm) {
        this.union_limit = []
        this.summaryCount = 0
        this.unionUserNumOneKeyRatio = null
        this.unionUserNumCalc = [{}]
        await this.initData()
      }
    },
    unionLimitQuickSetting() {
      this.unionUserNumCalc.forEach((v, i) => {
        const startNum = v.startNum
        const endNum = v.endNum
        const resultNum = v.resultNum
        if (startNum > endNum) {
          this.$message.warning('第' + (i + 1) + '行设置错误')
        } else {
          this.union_limit.forEach(x => {
            if (x.teacherCount >= startNum && x.teacherCount <= endNum) {
              x.limitCount = resultNum
            }
          })
          this.calSummaryCount()
        }
      })
    },
    calSummaryCount() {
      const array = this.union_limit
      if (array && array.length > 0) {
        this.summaryCount = array.reduce((prev, curr) => {
          const union_limit = Number(curr.limitCount);
          if (!isNaN(union_limit)) {
            return prev + curr.limitCount;
          } else {
            return prev;
          }
        }, 0)
      }
    },
    //应用比例设置
    applyScaleSettings() {
      this.union_limit.forEach(v => {
        v.ratio = this.unionUserNumOneKeyRatio
        if (v.ratio) {
          v.limitCount = parseFloat((v.teacherCount * v.ratio / 100).toFixed(0))
        }
      })
      this.calSummaryCount()
    },
    ratioChange(val, index) {
      const v = this.union_limit[index]
      v.limitCount = parseFloat((v.teacherCount * v.ratio / 100).toFixed(0))
      this.calSummaryCount()
    },
    async initData() {
      if (!this.union_limit || this.union_limit.length === 0) {
        const resp = await $.get('/platform/vi/common/getUnionLimit', {activityScopeId: this.user_scope})
        if (resp.code === 0) {
          this.$set(this, 'union_limit', resp.data)
        }
      }
      this.calSummaryCount()
    }
  },
  computed: {
    unionUserNumCalcTips() {
      return this.unionUserNumCalc.map(v => {
        return (v.startNum ? v.startNum : '?') + '-' + (v.endNum ? v.endNum : '?') + '人的分工会，限报' + (v.resultNum ? v.resultNum : '?') + '人'
      })
    },
  },

  created() {
    this.initData()
  }
}
</script>

<style scoped>

</style>