jhprjv2/ruoyi-ui/src/views/project/unitpay/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="项目名称" prop="projectId">
        <el-select v-model="queryParams.projectId" filterable placeholder="请选择项目" @change="doQuerySub">
          <el-option v-for="(item, index) in projectOptions" :key="index" :label="item.projectName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="总包单位" prop="subDeptId">
        <el-select v-model="queryParams.subDeptId" filterable placeholder="请选择总包单位" clearable>
          <el-option v-for="(item, index) in depts" :key="index" :label="item.deptName" :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="subDeptId" v-if="activeName == 'day'">
        <el-date-picker v-model="queryParams.attendanceDay" style="margin:0px 10px;" type="date" placeholder="选择日期"
          @change="handleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="月份" prop="subDeptId" v-if="activeName == 'month'">
        <el-date-picker v-model="queryParams.attendanceMonth" style="margin:0px 10px;" type="month" placeholder="请选择月份"
          @change="handleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="success" v-if="total>0" @click="doExport">导出</el-button>
      </el-form-item>
    </el-form>

    <el-tabs type="card" v-model="activeName" @tab-click="doTabClick">
      <el-tab-pane label="日工资列表" name="day">
        <DayPay ref="day" @update="dataChange" :getPrjInfo="getPrjInfo" type="index" v-if="activeName == 'day'"></DayPay>
      </el-tab-pane>
      <el-tab-pane label="月工资列表" name="month">
        <MonthPay ref="month" @update="dataChange" :getPrjInfo="getPrjInfo" type="index" v-if="activeName == 'month'"></MonthPay>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DayPay from './dayPay.vue'
import MonthPay from './monthPay.vue'
export default {
  components:{
    DayPay,MonthPay
  },
  name: "Unitpay",
  data() {
    return {
      // 遮罩层
      loading: true,
      activeName: 'day',
      // 查询参数
      queryParams: {
        projectId: null,
        subDeptId: null,
        attendanceDay:new Date(),
        attendanceMonth:new Date(),
      },
      // 表单校验
      projectOptions: [],
      depts: [],
      total:0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    dataChange(total){
      this.total=total;
    },
    getPrjInfo(){
      return {
        projectId:this.queryParams.projectId,
        deptId:this.queryParams.subDeptId,
        attendanceTime:this.activeName=="day"?this.queryParams.attendanceDay:this.queryParams.attendanceMonth
      }
    },
    doQuerySub() {
      let prjId = this.queryParams.projectId;
      let tmps = this.prjDept2 && this.prjDept2[prjId] ? this.prjDept2[prjId] || [] : [];
      if (tmps.length > 0 || !prjId) {
        this.depts = tmps;
        if (tmps.length == 1) {
          this.queryParams.subDeptId = tmps[0].deptId;
        } else {
          this.queryParams.subDeptId = '';
        }
        return;
      }
      this.$api.publics.queryUnitList({
        projectId: prjId,
        unitTypes: "2".split(","),
      }).then((d) => {
        let objs = d.rows || [];
        if (!this.prjDept2) {
          this.prjDept2 = {};
        }
        this.prjDept2[prjId] = objs;
        this.depts = objs;
        if (objs.length == 1) {
          this.queryParams.subDeptId = objs[0].deptId;
        } else {
          this.queryParams.subDeptId = '';
        }
      });
    },
    init() {
      if (this.projectOptions && this.projectOptions.length > 0) {
        return;
      }
      this.$api.publics.getMyProjectList({}).then((response) => {
        this.projectOptions = response.rows || [];
        if (this.projectOptions.length > 0) {
          this.queryParams.projectId = this.projectOptions[0].id;
          this.doQuerySub();
        }
      });
    },
    handleQuery() {
      if(this.activeName=='day'){
        this.$refs.day.doQuery();
      }else{
        this.$refs.month.doQuery();
      }
    },
    doTabClick(){
      setTimeout(this.handleQuery,1000);
    },
    doExport(){
      let postData=this.getPrjInfo();
      let tmps=this.projectOptions.filter(d=>d.id==this.queryParams.projectId);
      let name=tmps.length>0?tmps[0].projectName:"";
      if(this.queryParams.subDeptId){
        tmps=this.depts.filter(d=>d.deptId==this.queryParams.subDeptId);
        if(tmps.length>0){
          name+="_"+tmps[0].deptName;
        }
      }
      name+="_"+this.$dt(postData.attendanceTime).format(this.activeName=="day"?"YYYY年MM月DD日":"YYYY年MM月");
      name+=`_[${new Date().getTime()}].xlsx`
      postData.attendanceTime=this.$dt(postData.attendanceTime).format("YYYY-MM-DD");
      let url=this.activeName=="day"?"project/unitpay/exportDay":"project/unitpay/exportMonth";
      this.download(
        url,
        {
          ...postData,
        },
        name
      );
    }
  }
};
</script>