yos_web/src/HDrpManagement/salerpriceData/components/salesTemplate.vue

<template>
  <div>
    <div style="display: flex;align-items: center;align-content: center;justify-content: space-between;">
      <div class="title">{{$t(`业务员营销费用TOP10`)}}</div>
      <div class="div-inline" style="float: right">
        <div class="inline-16 mt-10">
          <departmentSalesperson ref="departmentSalesperson" @depSelect="depSelect" @personSelect="personSelect" :isFull="isFull"></departmentSalesperson>
        </div>
        <div class="mt-10 inline-16">
          <p class="search__label">{{$t('状态')}}:</p>
          <el-select v-model="param.content.where.isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="listData('状态')" >
            <el-option :label="$t('在职')" value="1"></el-option>
            <el-option :label="$t('离职')" value="2"></el-option>
          </el-select>
        </div>
        <el-button-group >
          <el-button size="small" :type="dateType === '本年'?'primary':''" @click="onChangeType('本年')">{{$t(`本年`)}}</el-button>
          <el-button size="small" :type="dateType === '本季'?'primary':''" @click="onChangeType('本季')">{{$t(`本季`)}}</el-button>
          <el-button size="small" :type="dateType === '本月'?'primary':''" @click="onChangeType('本月')">{{$t(`本月`)}}</el-button>
        </el-button-group>
        <el-date-picker
            v-model="monthDate"
            type="monthrange"
            @change="changMonth"
            :clearable="false"
            style="margin-left:10px;margin-right: 10px;margin-bottom: 10px"
            format="yyyy-MM"
            value-format="yyyy-MM"
            size="small"
            :range-separator="$t('至')"
            :start-placeholder="$t('开始月份')"
            :end-placeholder="$t('结束月份')">
        </el-date-picker>
        <div class="inline-16 mt-10">
          <allSalesTemplate :tablecols="tablecols" :dataid="dataid" :monthDate="monthDate" :dateType="dateType" :type="type" :button-title="buttonTitle" :param="param"></allSalesTemplate>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px;margin-bottom: 10px">
      <tableTemplate ref="table" :layout="tablecols" :data="list" :opwidth="200" :custom="true" height="356px">
        <template v-slot:customcol="scope">
          <p v-if="scope.column.columnname === 'amount'" >
            <span class="highlight-color"> ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
          </p>
          <p v-else-if="scope.column.columnname === 'rowindex'">
            <span style="font-weight: bold">{{$t(scope.column.data[scope.column.columnname])}}</span>
          </p>
          <p v-else-if="scope.column.columnname != 'operation'">{{scope.column.data[scope.column.columnname]?$t(scope.column.data[scope.column.columnname]):'--'}}</p>
          <div v-else>
            <balanceDetail :hrid="scope.column.data.hrid" :selectData="param"></balanceDetail>
          </div>
        </template>
      </tableTemplate>
    </div>
  </div>

</template>

<script>
import tableTemplate from './table';
import allSalesTemplate from "./allSalesTemplate";
import departmentSalesperson from "./departmentSalesperson";
import balanceDetail from "./balanceDetail";
export default {
  name: "salesTemplate",
  props:['tablecols','dataid','type','param','buttonTitle'],
  components:{tableTemplate,allSalesTemplate,departmentSalesperson,balanceDetail},
  data(){
    return {
      title:'订单',
      tableHeight:'',
      dateType:'本年',
      monthDate:[new Date().getFullYear() + '-1',new Date().getFullYear() + '-12'],
      list:[],
      isFull:false
    }
  },
  methods:{
    onChangeType(val){
      this.param.content.where.begdate = ''
      this.param.content.where.enddate = ''
      if (val === '本年'){
        this.monthDate = [new Date().getFullYear() + '-1',new Date().getFullYear() + '-12']
      }else if(val === '本季'){
        let currentMonth = new Date().getMonth() + 1
        let begMonth = Math.ceil(currentMonth / 3) * 3 - 2
        let endMonth = begMonth + 2
        this.monthDate = [new Date().getFullYear() + '-' + begMonth,new Date().getFullYear() + '-' + endMonth]
      }else {
        this.monthDate[0] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
        this.monthDate[1] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
        this.monthDate = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1),new Date().getFullYear() + '-' + (new Date().getMonth() + 1)]
      }
      this.dateType = val
      this.listData()
    },
    changMonth(){
      this.dateType = ''
      let begdate = new Date(this.monthDate[0])
      let enddate = new Date(this.monthDate[1])
      this.param.content.where.begdate = this.monthDate[0]
      this.param.content.where.enddate = this.monthDate[1]
      this.listData()
    },
    async listData(val){
      if (val == '状态'){
        this.$refs.departmentSalesperson.person = ''
        this.param.content.dataid = this.param.content.type == 0 ? -1 : this.param.content.dataid
        this.personData()
      }
      this.param.content.dateType = this.dateType
      const res = await this.$api.requested(this.param)
      this.list = res.data
    },
    /*选择部门*/
    depSelect(val){
      this.param.content.type = 1
      this.param.content.dataid = val
      this.listData()
    },
    /*选择业务员*/
    personSelect(val){
      this.param.content.type = 0
      this.param.content.dataid = val
      this.listData()
    },
    /*获取新的业务员列表*/
    async personData(){
      let param = {
        id: 20230620102004,
        content: {
          isleave:this.param.content.where.isleave
        },
      }
      const res = await this.$api.requested(param)
      this.$refs.departmentSalesperson.personnelList = res.data.hr
    },
  },
  mounted() {

  }
}
</script>

<style scoped>
  .div-inline{
    display: inline-block;
    vertical-align: middle;
  }
  .title-font{
    color: #515151;
    font-size: 15px;
    display: inline-block !important;
    margin-right: 5px;
  }
  .highlight-color{
    color:#4F7BFD
  }
  .title {
    min-width: 220px;
  }
  .title::before {
    content:'';
    border-left: 4px #3874f6 solid;
    padding-right: 10px;
  }
</style>