manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/costReportExport.vue

<template>
  <el-dialog title="报表导出" :visible.sync="value" top="7.8vh" customClass="customWidth" width="500px"
    :before-close="handleClose">
    <el-form ref="exportFormRef" :model="exportParam">
      <!-- 头部 -->
      <div style="text-align: center;margin-bottom: 20px">
        <el-radio-group size="medium" v-model="exportParam.reportType">
          <el-radio-button :label="0">常规报表</el-radio-button>
          <el-radio-button :label="1">月度报表</el-radio-button>
        </el-radio-group>
      </div>
      <!-- 常规报表 -->
      <template v-if="exportParam.reportType == 0">

        <el-form-item prop="projectCategoryId" :label="$t('projectclassification')"
          v-if="singleChoiceType == $t('projectclassification') || singleChoiceType == $t('other.project')">
          <el-select v-model="exportParam.projectCategoryId" :placeholder="$t('classificationitems')" clearable
            style="width:350px;" filterable="true" @change="filterCategory">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="projectId" :label="'选择项目'" v-if="!['人员', '项目分类', '部门', '主项目'].includes(singleChoiceType)">
          <select-project v-model="exportParam.projectId" :size="'medium'" :placeholder="'全部项目'" width="350px"
            clearable></select-project>
        </el-form-item>

        <el-form-item prop="exportContent" :label="$t('daoChuNeiRon')"
          v-if="permissions.countCost && permissions.countHours && (['项目', '项目分类'].includes(singleChoiceType))">
          <el-select v-model="exportParam.exportContent" style="width:350px;" filterable="true"
            popper-class="projectSelectPopperClass">
            <el-option :label="$t('gongShiHeChengBen')" value="hoursAndCost"></el-option>
            <el-option :label="$t('jingGongShi')" value="hours"></el-option>
            <el-option :label="$t('jingChenBen')" value="cost"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('departmentchoice')" v-if="singleChoiceType == $t('other.project')">
          <el-cascader v-if="user.userNameNeedTranslate != 1" v-model="exportParam.deptId" :options="departmentList"
            :placeholder="$t('defaultText.pleaseChoose')" :props="{ checkStrictly: true, expandTrigger: 'hover' }"
            clearable filterable style="width:350px;"></el-cascader>

          <vueCascader :size="'medium'" :widthStr="'350'" :clearable="true" :subject="departmentList" :radios="true"
            :distinction="'1'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>
        </el-form-item>

        <el-form-item prop="userIds" :label="$t('screening.selectPeople')" v-if="singleChoiceType == $t('ren-yuan')">
          <el-select v-if="user.userNameNeedTranslate != '1'" v-model="exportParam.userIds"
            :placeholder="$t('lable.allStaff')" multiple="true" clearable style="width:350px;" filterable="true">
            <el-option v-for="item in hasReportUserList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'350'" :filterable="true"
            :subject="hasReportUserList" :clearable="true" :multiSelect="true" @selectCal="selectCal"
            :distinction="'1'"></selectCat>
        </el-form-item>

        <el-form-item prop="userIds" :label="$t('screening.selectPeople')"
          v-if="['项目', '项目分类'].includes(singleChoiceType)">
          <el-select v-if="user.userNameNeedTranslate != '1'" v-model="exportParam.userIds"
            :placeholder="$t('lable.allStaff')" multiple="true" clearable style="width:350px;" filterable="true">
            <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :widthStr="'350'" :filterable="true"
            :subject="users" :clearable="true" :multiSelect="true" @selectCal="selectCal" :distinction="'1'">
          </selectCat>
        </el-form-item>

        <el-form-item prop="projectId"
          :label="user.timeType.fixMonthcost == 0 ? $t('time.dateRange') : $t('Selectmonth')">
          <el-date-picker v-show="user.timeType.fixMonthcost == 0" v-model="exportParam.dateRange" :editable="false"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" :clearable="false" :range-separator="$t('other.to')"
            type="daterange" :start-placeholder="$t('time.startDate')"
            :end-placeholder="$t('time.endDate')"></el-date-picker>


          <el-date-picker v-show="user.timeType.fixMonthcost == 1" v-model="dateRange" :editable="false"
            format="yyyy-MM" value-format="yyyy-MM" @change="getEchart" :clearable="true" type="month"></el-date-picker>
        </el-form-item>

        <el-form-item :label="$t('screening.selectPeople')" v-if="false">
          <el-select v-if="user.userNameNeedTranslate != '1'" v-model="exportParam.userId"
            :placeholder="$t('lable.allStaff')" style="width: 350px" filterable="true" clearable="true">
            <span v-for="(item, index) in users" :key="index">
              <el-option :label="item.name" :value="item.id"></el-option>
            </span>
          </el-select>

          <selectCat v-if="user.userNameNeedTranslate == '1'" :size="'medium'" :distinction="'4'" :widthStr="'350'"
            :subject="users" :clearable="true" @selectCal="selectCal"></selectCat>
        </el-form-item>

        <el-form-item prop="type" :label="$t('choosethestyle')" v-if="['项目', '项目分类'].includes(singleChoiceType)">
          <el-select v-model="exportParam.type" :placeholder="$t('choosethestyle')" style="width:350px;">
            <el-option
              :label="singleChoiceType == $t('projectclassification') ? $t('classifiedontheline') : $t('Itemontheline')"
              value="0"></el-option>
            <el-option
              :label="singleChoiceType == $t('projectclassification') ? $t('classifiedcolumns') : $t('itemisonthecolumn')"
              value="1"></el-option>
          </el-select>
          <div class="prompt">
            <el-popover placement="top" width="1200" trigger="hover">
              <img src="../../assets/image/hanglie.png" alt="" width="100%"
                v-if="this.singleChoiceType != $t('projectclassification')">
              <img src="../../assets/image/hanglie_corp.png" alt="" width="100%" v-else>
              <i class="el-icon-question" slot="reference" />
            </el-popover>
          </div>
        </el-form-item>

        <el-form-item
          v-if="exportParam.type == 1 && permissions.countHours && (singleChoiceType == $t('other.project'))">
          <el-checkbox v-model="exportParam.withPercent">{{ $t('gongHhiZhanbiXmu') }}</el-checkbox>
        </el-form-item>

        <el-form-item v-if="['项目', '项目分类', '主项目'].includes(singleChoiceType) && exportParam.type == '0'">
          <el-checkbox v-model="exportParam.projectSum">{{ $t('individualprojectdata') }}</el-checkbox>
        </el-form-item>

        <el-form-item v-if="singleChoiceType == $t('ren-yuan') && user.timeType.mainProjectState == 1">
          <el-checkbox v-model="exportParam.mainProjectColumn">{{ $t('hanZhuXiangMu') }}</el-checkbox>
        </el-form-item>
      </template>
      <!-- 月度报表 -->
      <template v-if="exportParam.reportType == 1">
        <el-form-item prop="date" :label="this.$t('Selectmonth')">
          <el-date-picker size="small" v-model="exportParam.date" :editable="false" format="yyyy-MM"
            value-format="yyyy-MM" :clearable="false" type="month" :placeholder="$t('Selectmonth')"
            style="margin-right: 20px"></el-date-picker>
        </el-form-item>
      </template>
    </el-form>

    <!-- 导出按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="exportParam.reportType == 0 ? exportProjectData() : exportMonthlyProjectData()"
        style="width:100%;" :loading="exporting">{{ $t('export.export') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import selectProject from "../../components/selectProject.vue";
import selectCat from "@/components/select.vue"
import vueCascader from "@/components/cascader.vue"
export default {
  components: {
    selectProject,
    selectCat,
    vueCascader
  },
  props: {
    value: { // 双向数据绑定
      type: [String, Number, Array],
      required: true
    },
    singleChoiceType: {
      type: String,
      default: '项目'
    },
    hasReportUserList: {
      type: Array,
      default: []
    },
    chartDate: {
      type: Array,
      default: []
    },
    theCustomListId: {
      type: [String, Number],
      default: ''
    },
    theCustomListPlant: {
      type: [String, Number],
      default: ''
    },
  },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
      categoryList: [],
      departmentList: [],
      dateRange: [],
      projectList: [],
      newProjectList: [],
      exporting: false,
      exportParam: {
        reportType: 0,
        projectId: null,
        dateRange: [],
        userId: null,
        type: '0',
        withPercent: false,
        date: null,
        exportContent: 'hoursAndCost'
      }
    }
  },
  methods: {
    exportMonthlyProjectData() {
      var url = '/project/exportTimeByProjectAndEmployee';
      var fileName = this.exportParam.date + '月度工时统计表.xlsx';
      this.exporting = true;
      this.postData(url, this.exportParam).then((res) => {
        const aTag = document.createElement('a');
        aTag.download = fileName;
        aTag.href = res.data;
        aTag.click()
      }).finally(() => {
        this.exporting = false
        this.updateValue()
      })
    },
    exportProjectData() {
      let param = { stateKey: 1 }
      if (this.exportParam.dateRange != null) {
        param = {
          startDate: this.exportParam.dateRange[0],
          endDate: this.exportParam.dateRange[1],
          stateKey: 1
        };
      }
      var url = "/project/exportTimeCost";
      var fileName = this.$t('projectmanhourcoststatistics') + '.xlsx';
      if (this.singleChoiceType == this.$t('zhu-xiang-mu')) {
        param.withMainProject = 1;
      }
      if (this.singleChoiceType == this.$t('other.project')) {
        if (this.exportParam.userIds != null && this.exportParam.userIds.length > 0) {
          var ids = '';
          this.exportParam.userIds.forEach(u => {
            ids += u + ',';
          })
          param.userIds = ids.substring(0, ids.length - 1);
        }
        if (this.exportParam.projectCategoryId) {
          param.projectCategoryId = this.exportParam.projectCategoryId
        }
        //是否含工时占比显示
        if (this.exportParam.withPercent) {
          param.withPercent = 1;
        }
      }
      if (this.singleChoiceType == this.$t('ren-yuan')) {
        //  console.log(this.exportParam.userIds);
        fileName = this.$t('labortimecoststatistics') + '.xlsx';
        url = '/department/exportUserStatistic';
        if (this.exportParam.userIds != null && this.exportParam.userIds.length > 0) {
          var ids = '';
          this.exportParam.userIds.forEach(u => {
            ids += u + ',';
          })
          param.userIds = ids.substring(0, ids.length - 1);
        }
        param.mainProjectColumn = this.exportParam.mainProjectColumn;
      }
      if (this.singleChoiceType == this.$t('projectclassification')) {
        fileName = this.$t('projectclassificationlaborosttatistics') + '.xlsx';
        url = '/project/exportTimeCostByCategory'
        if (this.exportParam.projectCategoryId) {
          param.projectCategoryId = this.exportParam.projectCategoryId
        }
        if (this.exportParam.userIds != null && this.exportParam.userIds.length > 0) {
          var ids = '';
          this.exportParam.userIds.forEach(u => {
            ids += u + ',';
          })
          param.userIds = ids.substring(0, ids.length - 1);
        }
      }
      if (this.singleChoiceType == this.$t('lable.department')) {
        fileName = this.$t('departmenthourscoststatistics') + '.xlsx'
        url = '/department/exportDeptStatistic'
      }

      if (this.exportParam.projectId && this.singleChoiceType != this.$t('ren-yuan') && this.singleChoiceType != this.$t('projectclassification')) {
        param.projectId = this.exportParam.projectId;
      }
      if (this.exportParam.userId) {
        if (this.singleChoiceType == this.$t('lable.department') || this.singleChoiceType == this.$t('ren-yuan')) {
          param.userId = this.exportParam.userId;
        }
      }
      if (this.exportParam.type == 1) {
        this.exportParam.projectSum = null
      }
      if (this.exportParam.projectSum != null) {
        if (this.singleChoiceType == this.$t('other.project') || this.singleChoiceType == this.$t('lable.department') || this.singleChoiceType == this.$t('projectclassification') || this.singleChoiceType == this.$t('zhu-xiang-mu')) {
          param.projectSum = this.exportParam.projectSum;
        }
      }
      if (!this.theCustomListFlg) {
        param.type = this.exportParam.type * 1
      }
      console.log(this.singleChoiceType)

      if (this.theCustomListFlg) {
        url = '/project/exportTimeCostByUserCustom'
        fileName = this.singleChoiceType + this.$t('statistical') + '.xlsx'
        param.customId = this.theCustomListId
        param.fieldName = this.theCustomListPlant
      }
      if (this.exportParam.deptId) {
        if (this.exportParam.deptId.length > 0) {
          param.deptId = this.exportParam.deptId[this.exportParam.deptId.length - 1]
        }
      }
      if (this.permissions.countCost && this.permissions.countHours && (this.singleChoiceType == this.$t('other.project') || this.singleChoiceType == this.$t('projectclassification'))) {
        param.exportContent = this.exportParam.exportContent
      }

      if (this.singleChoiceType == this.namess) {
        url = '/project/exportDegreeCost'
        param = {
          startDate: this.exportParam.dateRange[0],
          endDate: this.exportParam.dateRange[1],
          projectId: this.exportParam.projectId,
        }
        fileName = this.singleChoiceType + this.$t('chenBenTongJi') + '.xlsx'
      }
      this.exporting = true;
      this.postData(url, param).then((res) => {
        this.exporting = false;
        const aTag = document.createElement('a');
        aTag.download = fileName;
        aTag.href = res.data;
        aTag.click();
      }).finally(() => {
        this.exportDialog = false;
        this.updateValue()
      })
    },
    resetForm() {
      if (this.$refs['exportFormRef']) {
        this.$refs['exportFormRef'].resetFields();
      }
      this.exportParam = {
        reportType: 0,
        projectId: null,
        dateRange: this.chartDate,
        userId: null,
        type: '0',
        withPercent: false,
        date: this.dayjs().format('YYYY-MM'),
        exportContent: 'hoursAndCost'
      }
    },
    getUsers() {
      this.postData(`/user/getSimpleActiveUserList`, {}).then((res) => {
        this.users = res.data;
      })
    },
    getMyProjectList() {
      this.postData(`/project/getProjectList`, {
        category: this.exportParam.projectCategoryId || ''
      }).then((res) => {
        this.projectList = res.data;
        this.newProjectList = res.data
      })
    },
    getCategoryList() {
      this.postData(`/project-category/list`, {}).then((res) => {
        this.categoryList = res.data
      })
    },
    getDepartmentList() {
      this.postData(this.port.manage.depList, {}).then((res) => {
        let dptlist = JSON.parse(JSON.stringify(res.data));
        this.departmentList = this.changeArr(dptlist);
      })
    },
    changeArr(arr) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].id != -1 && arr[i].id != 0) {
          if (arr[i].children != null && arr[i].children.length > 0) {
            arr[i].children = this.changeArr(arr[i].children);
          }
          arr[i].id && (arr[i].value = arr[i].id);
          delete arr[i].id;
        }
      }
      for (var i in arr) {
        if (arr[i].id == -1 || arr[i].id == 0) {
          arr.splice(i, 1)
        }
      }
      return arr;
    },
    filterCategory() {
      this.exportParam.projectId = ''
      const id = this.exportParam.projectCategoryId
      if (!id) {
        this.projectList = JSON.parse(JSON.stringify(this.newProjectList))
        return
      }
      const list = JSON.parse(JSON.stringify(this.newProjectList))
      this.projectList = list.filter(item => item.category == id)
    },
    // 自定义事件
    selectCal(obj) {
      if (obj.distinction == 1) {
        let arr = []
        for (var i in obj.arrUserList) {
          arr.push(obj.arrUserList[i].id)
        }
        this.exportParam.userIds = arr
      } else if (obj.distinction == 2) {
        this.personnelValue = obj.name
        this.personnel()
      } else if (obj.distinction == 4) {
        this.exportParam.userId = obj.id
      }
    },
    vueCasader(obj) {
      if (obj.distinction == 1) {
        let arr = []
        arr.push(obj.id)
        this.exportParam.deptId = arr
      }
    },
    handleClose(done) {
      this.updateValue(false)
      done()
    },
    updateValue(value) { // 更新数据
      this.resetForm()
      this.$emit('input', value);
      this.$emit('change', value);
    },
    // 单独封装请求
    async postData(urls, param) {
      return new Promise((resolve, reject) => {
        this.http.post(urls, { ...param },
          res => {
            if (res.code == 'ok') {
              resolve(res)
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
              reject(res)
            }
            resolve(res)
          },
          error => {
            this.$message({
              message: error,
              type: "error"
            });
            reject(error)
          }
        )
      });
    },
  },
  mounted() {
    this.exportParam.dateRange = this.chartDate
    this.exportParam.date = this.dayjs().format('YYYY-MM')
    this.exportParam.exportContent = 'hoursAndCost'
    this.getUsers()
    this.getCategoryList()
    this.getDepartmentList()
    this.getMyProjectList()
  },
}
</script>
<style lang="scss" scoped>
.prompt {
  position: absolute;
  right: 10px;
  top: 0;
}
</style>