myAchievement.vue

<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item :label="$t('关键字')" prop="key">
        <el-input v-model="queryParams.key" :placeholder="$t('请输入关键字查找')" clearable/>
      </el-form-item>
      <el-form-item :label="$t('运输方式')" prop="transportType">
        <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportType" formatter="number" clearable/>
      </el-form-item>
      <el-form-item :label="$t('唛头')" prop="marks">
        <el-input v-model="queryParams.marks" :placeholder="$t('请输入关键字查找')" clearable />
      </el-form-item>
      <el-form-item :label="$t('资源类型')" prop="customerType">
        <!-- <el-select clearable  v-model="queryParams.customerType" :placeholder="$t('请选择资源类型')" clearable size="small">
         <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_ESOURCE_TYPE)"
                :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select> -->
        <dict-selector :type="DICT_TYPE.CUSTOMER_ESOURCE_TYPE" v-model="queryParams.customerType" :placeholder="$t('请选择资源类型')" clearable ></dict-selector>
      </el-form-item>
<!--      <el-form-item :label="$t('客户经理')" prop="customerService">
        <el-select clearable  v-model="queryParams.customerService" :placeholder="$t('请选择客户经理')" clearable size="small">
          <el-option v-for="dict in customerServiceList"
                     :key="dict.id" :label="dict.nickname" :value="dict.id"/>
        </el-select>
      </el-form-item> -->
 <!--     <el-form-item prop="customerService">
        <el-select clearable  v-model="queryParams.customerService"  clearable size="small">
          <el-option :label="$t('下单时间')" value="createTime"/>
          <el-option :label="$t('装柜时间')" value="ldBoxTime"/>
        </el-select>
      </el-form-item> -->
      <el-form-item prop="dateFilter">
        <el-date-picker v-model="dateFilter"  type="datetimerange" range-separator="-"  :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
<!--        <el-date-picker v-model="queryParams.beginStartTime" :placeholder="$t('请选择开始时间')" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
      </el-form-item>
<!--      <el-form-item :label="$t('结束时间')" prop="endStartTime">-->
<!--        <el-date-picker v-model="queryParams.endStartTime" :placeholder="$t('请选择结束时间')" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button>
        <el-button type="primary" icon="el-icon-search" @click="resetQuery">{{$t('重置')}}</el-button>
<!--        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
                  >{{$t('导出')}}</el-button> -->
      </el-form-item>
    </el-form>
    <div class="total_num">
      <span>{{ $t('开发客户：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.developNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.developVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.developWeight}}KG </span>
      <span>{{ $t('公司客户：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.companyNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.companyVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.companyWeight}}KG </span>
      <span>{{ $t('汇总：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.sumNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.sumVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.sumWeight}}KG </span>
    </div>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list"  @selection-change="handleSelectionChange">
      <!-- <el-table-column :label="$t('序号')" align="center" type="index"></el-table-column> -->
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
         <el-table-column :label="$t('资源类型')" align="center">
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.CUSTOMER_ESOURCE_TYPE" :value="scope.row.customerType"/>
            </template>
          </el-table-column>
      <el-table-column :label="$t('业绩类型')" align="center" prop="achieveType"/>
      <el-table-column :label="$t('报价单号')" align="center" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.number}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column :label="$t('报价结果')" align="center">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.ECW_OFFER_STATUS" :value="scope.row.offerStatus"/>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('订单号')" align="center" prop="orderNo"/>
      <el-table-column :label="$t('客户名称')" align="center" prop="name"/>
      <el-table-column :label="$t('联系方式')" align="center" prop="phoneNew"/>
      <el-table-column :label="$t('唛头')" align="center" prop="marks"/>
      <el-table-column :label="$t('订单状态')" align="center">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column :label="$t('是否控货')" align="center" prop="isCargoControl">
        <template slot-scope="scope">
          {{scope.row.isCargoControl?$t('是'):$t('否')}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('重量')" align="center" prop="completeWeight"/>
      <el-table-column :label="$t('方数')" align="center" prop="completeVolume"/>
      <el-table-column :label="$t('下单时间')" align="center" prop="createTime"/>
      <el-table-column :label="$t('装柜时间')" align="center" prop="ldBoxTime"/>
      <el-table-column :label="$t('客户经理')" align="center" prop="userId" :formatter="customerServiceFn">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
    import {
        createDeptTarget,
        updateDeptTarget,
        deleteDeptTarget,
        getDeptTarget,
        getDeptTargetPage,
        exportDeptTargetExcel,
        getCreateInitData,
        getPersonTargetPage,
        myAchievementByPage
    } from "@/api/ecw/deptTarget";
    import {listSimpleDepts} from "@/api/system/dept";
    import {getChannelList} from '@/api/ecw/channel';
    import dayjs from "dayjs";
    import {listServiceUser} from "@/api/system/user";

    export default {
        name: "EcwDepttargetMyachievement",
        components: {},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                tableTotal: 0,
                // 部门业绩目标设置列表
                list: [],
                tableList: [],
                // 弹出层标题
                title: "",
              dateFilter:[],
                detail: {
                    deptName: null,
                    targetType: null,
                    cubeNum: null,
                    shippingChannel: null,
                    transportType: null,
                },
                // 是否显示弹出层
                open: false,
                tableOpen: false,
                dateRangeCreateTime: [],
                dateRangeStartTime: [],
                dateRangeEndTime: [],
                deptData: [],
                deptArr: [],
                channelList: [],
                monthList: [],
                quarterList: [],
                yearList: [],
                targetPeriod: [],
                // 查询参数
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                  beginStartTime:null,
                    transportType: null,
                    shippingChannel: null,
                  endStartTime: null,
                },
                tableQueryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    id: null,
                },
                // 表单参数
                form: {},
                 customerServiceList:[],
                // 表单校验
                rules: {
                    deptId: [{required: true, message: this.$t("部门ID不能为空"), trigger: "blur"}],
                    targetType: [{required: true, message: this.$t("目标类型不能为空"), trigger: "change"}],
                    cubeNum: [{required: true, message: this.$t("立方数不能为空"), trigger: "blur"}],
                },
                totalData:{
                    companyWeight:0,
                    companyVolume:0,
                    companyNum:0,
                    developWeight:0,
                    developVolume:0,
                    developNum:0,
                    sumWeight:0,
                    sumVolume:0,
                    sumNum:0,
                },
                myAchievementData:{}
            };
        },
        computed: {
            getShipChannelName() {
                return shippingChannelId => {
                    for (let index in this.channelList) {
                        let channelItem = this.channelList[index];
                        if (channelItem.channelId == shippingChannelId) {
                            return this.$l(channelItem, 'name');
                        }
                    }
                    return '/'
                }
            }
        },
      activated() {
        this.getChannelList();
        this.getList();
      },
      created() {
            this.getChannelList();
            this.getList();
            listServiceUser().then(r=>{
              this.customerServiceList = r.data;
            })
        },
        methods: {
            getChannelList() {
                getChannelList().then(res => this.channelList = res.data)
            },
            dateFormat(val) {
                return dayjs(val).format("YYYY-MM-DD");
            },
            changeList(val) {
                if (val === 1) {
                    this.form.targetPeriodName = undefined;
                    this.targetPeriod = this.monthList;
                } else if (val === 2) {
                    this.form.targetPeriodName = undefined;
                    this.targetPeriod = this.quarterList;
                } else {
                    this.form.targetPeriodName = undefined;
                    this.targetPeriod = this.yearList;
                }
            },
            setTime(item) {
                this.targetPeriod.forEach((i, index) => {
                    if (i.name === item) {
                        this.form.startTime = i.startDate;
                        this.form.endTime = i.endDate;
                    }
                })
            },
            customerServiceFn(val){
              if(this.customerServiceList.length > 0){
                let index =this.customerServiceList.findIndex(item => item.id === val.userId);
                return index !== -1  ? this.customerServiceList[index]?.nickname :''
              }else {
                return ''
              }
            },
            /** 查询列表 */
            getList() {
                this.loading = true;
                // 执行查询
              myAchievementByPage(this.queryParams).then(response => {
                    this.list = response.data.myAchievementDtos.list;
                    this.total = response.data.myAchievementDtos.total;
                    this.myAchievementData = response.data
                    this.totalData.sumWeight =this.myAchievementData.totalWeight
                    this.totalData.sumVolume =this.myAchievementData.totalVolume
                    this.totalData.sumNum =this.myAchievementData.totalNum
                    this.totalData.companyWeight =this.myAchievementData.companyTotalWeight
                    this.totalData.companyVolume =this.myAchievementData.companyTotalVolume
                    this.totalData.companyNum =this.myAchievementData.companyTotalNum
                    this.totalData.developWeight =this.myAchievementData.devTotalWeight
                    this.totalData.developVolume =this.myAchievementData.devTotalVolume
                    this.totalData.developNum =this.myAchievementData.devTotalNum
                    this.loading = false;
                });
            },
            /** 取消按钮 */
            cancel() {
                this.open = false;
                this.reset();
            },
            /** 表单重置 */
            reset() {
                this.form = {
                    id: undefined,
                    deptId: undefined,
                    targetType: undefined,
                    targetPeriodName: undefined,
                    startTime: undefined,
                    endTime: undefined,
                    transportType: undefined,
                    shippingChannel: undefined,
                    cubeNum: undefined,
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNo = 1;
                this.queryParams.beginStartTime=this.dateFilter[0];
                this.queryParams.endStartTime=this.dateFilter[1];

                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateFilter = []
                this.dateRangeCreateTime = [];
                this.dateRangeStartTime = [];
                this.dateRangeEndTime = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.targetPeriod = this.monthList;
                this.reset();
                this.open = true;
                this.title = this.$t("添加部门业绩目标设置");
            },
            /** 查看人员目标情况 */
            handleView(row) {
                this.detail = row;
                this.tableQueryParams.id = row.id;
                this.getTableList();
                this.tableOpen = true;
            },
            getTableList() {
                getPersonTargetPage(this.tableQueryParams).then(res => {
                    this.tableList = res.data.list;
                    this.tableTotal = res.data.total;
                });
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id;
                getDeptTarget(id).then(response => {
                    this.form = response.data;
                    if (response.data.targetType === 1) {
                        this.targetPeriod = this.monthList;
                    } else if (response.data.targetType === 2) {
                        this.targetPeriod = this.quarterList;
                    } else {
                        this.targetPeriod = this.yearList;
                    }
                    this.open = true;
                    this.title = this.$t("修改部门业绩目标设置");
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (!valid) {
                        return;
                    }
                    // 修改的提交
                    if (this.form.id != null) {
                        updateDeptTarget(this.form).then(response => {
                            this.$modal.msgSuccess(this.$t("修改成功"));
                            this.open = false;
                            this.getList();
                        });
                        return;
                    }
                    // 添加的提交
                    createDeptTarget(this.form).then(response => {
                        this.$modal.msgSuccess(this.$t("新增成功"));
                        this.open = false;
                        this.getList();
                    });
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const id = row.id;
                this.$modal.confirm(this.$t('是否确认删除部门业绩目标设置编号为{id}的数据项?', {id})).then(function () {
                    return deleteDeptTarget(id);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess(this.$t("删除成功"));
                }).catch(() => {
                });
            },
            handleSelectionChange(val){
              if(val&&val.length>0){
                var data={
                    companyWeight:0,
                    companyVolume:0,
                    companyNum:0,
                    developWeight:0,
                    developVolume:0,
                    developNum:0,
                    sumWeight:0,
                    sumVolume:0,
                    sumNum:0,
                }
                val.forEach(item=>{
                  if(item.customerType==1){
                    data.developWeight += item.completeWeight
                    data.developVolume += item.completeVolume
                    data.developNum += item.sumNum
                  }else{
                      data.companyWeight += item.completeWeight
                      data.companyVolume += item.completeVolume
                      data.companyNum += item.sumNum
                  }
                  data.sumWeight += item.completeWeight
                  data.sumVolume += item.completeVolume
                  data.sumNum += item.sumNum
                })
                  data.developVolume = data.developVolume.toFixed(2);
                  data.companyVolume = data.companyVolume.toFixed(2);
                  data.sumVolume = data.sumVolume.toFixed(2);
                this.$set(this,'totalData',data)
              }else{
                    this.totalData.sumWeight =this.myAchievementData.totalWeight
                    this.totalData.sumVolume =this.myAchievementData.totalVolume
                    this.totalData.sumNum =this.myAchievementData.totalNum
                    this.totalData.companyWeight =this.myAchievementData.companyTotalWeight
                    this.totalData.companyVolume =this.myAchievementData.companyTotalVolume
                    this.totalData.companyNum =this.myAchievementData.companyTotalNum
                    this.totalData.developWeight =this.myAchievementData.devTotalWeight
                    this.totalData.developVolume =this.myAchievementData.devTotalVolume
                    this.totalData.developNum =this.myAchievementData.devTotalNum
              }
            },
            /** 导出按钮操作 */
            handleExport() {
                // 处理查询参数
                let params = {...this.queryParams};
                params.pageNo = undefined;
                params.pageSize = undefined;
                this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
                this.addBeginAndEndTime(params, this.dateRangeStartTime, 'startTime');
                this.addBeginAndEndTime(params, this.dateRangeEndTime, 'endTime');
                // 执行导出
                this.$modal.confirm(this.$t('是否确认导出所有部门业绩目标设置数据项?')).then(() => {
                    this.exportLoading = true;
                    return exportDeptTargetExcel(params);
                }).then(response => {
                    this.$download.excel(response, `${this.$t('我的业绩')}.xls`);

                    this.exportLoading = false;
                }).catch(() => {
                });
            }
        }
    };
</script>


<style scoped >
  .total_num{
    display:flex;
    align-items: center;
    justify-content: center;
    margin:20px 0;
    font-size:15px;
  }
  .total_num span{
    margin: 0 8px;
  }
</style>