GEKE_VIEW/src/views/system/schedulingInformation/BdClockinMonthList.vue

<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8">
            <a-form-item label="人员">
              <a-input placeholder="请输入人员" v-model="queryParam.personName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="工号">
              <a-input placeholder="请输入工号" v-model="queryParam.personId"></a-input>
            </a-form-item>
          </a-col>
          
          <a-col :md="6" :sm="8">
            <a-form-item label="是否同步">
               <a-select v-model="queryParam.syU8" placeholder="请选择是否同步">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">是</a-select-option>
                    <a-select-option value="0">否</a-select-option>
               </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          
            </span>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="同步日期">
              <a-month-picker valueFormat="YYYY-MM"  @change="onChange" placeholder="请输入日期" v-model="queryParam.monthTime"></a-month-picker>
            </a-form-item>
          </a-col>
         
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="monthReport" icon="reload" style="margin-left: 8px">生成考勤月报</a-button>
              <a-button type="primary" @click="syMonthReport" icon="reload" style="margin-left: 8px">同步至U8</a-button>
              <a-button type="primary" icon="download" style="margin-left: 8px" @click="handleExportXls('考勤月报')">导出</a-button>
            </span>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-button type="danger" @click="showModal">
              关账
            </a-button>
           </a-col>
        </a-row>

      </a-form>
    </div>


    <!-- table区域-begin -->
    <div>

      <a-table class="j-table-force-nowrap" ref="table" size="middle" bordered rowKey="username" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange" :scroll="{ x: 1200, y: 700 }">

        <span slot="syU8" slot-scope="text, record, index">
          <a v-if="record.syU8 == 1 ">是</a>
          <a v-if="record.syU8 == 0 ">否</a>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <!-- <ViewClockIn-modal ref="modalForm" @ok="modalFormOk"></ViewClockIn-modal> -->
    <a-modal v-model="visible" title="系统关账后无法取消,请谨慎操作" @ok="handleOk">
        已关账日期:
          {{oldCloseDate}}
        <a-form-item label="关账日期">
          <a-month-picker valueFormat="YYYY-MM" placeholder="请输入关账日期" v-model="closeDate"></a-month-picker>
        </a-form-item>
       
    </a-modal>
    
  </a-card>
</template>

<script>
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import {getAction, postAction, deleteAction,putAction} from '@/api/manage'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import moment from 'moment';
  import 'moment/locale/zh-cn';
  import {monthReport} from '@/api/api';
  
  export default {
    name: 'ViewClockInList',
    mixins: [JeecgListMixin],
    components: {
      JDictSelectTag
    },
    data() {
      return {
        visible: false,
        moment,
        oldCloseDate:'',//原始关账日期
        closeDate:'',//关账日期
        monthTime:'',
        description: '考勤月报',
        // 表头
        columns: [
          {
            title: '日期',
            align: 'center',
            dataIndex: 'monthdate'
          },
          {
            title: '人员姓名',
            align: 'center',
            dataIndex: 'realname'
          },
          {
            title: '工号',
            align: 'center',
            dataIndex: 'username'
          },
          {
            title: '考勤天数',
            align: 'center',
            dataIndex: 'workDay'
          },
          {
            title: '实际考勤天数',
            align: 'center',
            dataIndex: 'workDayReal'
          },
          {
            title: '旷工天数',
            align: 'center',
            dataIndex: 'missingNum'
          },
          {
            title: '加班时长（时）',
            align: 'center',
            dataIndex: 'duration'
          },
          {
            title: '事假时长（天）',
            align: 'center',
            dataIndex: 'holidayTimeSj'
          },
          {
            title: '病假时长（天）',
            align: 'center',
            dataIndex: 'holidayTimeBj'
          },
          {
            title: '是否同步U8',
            align: 'center',scopedSlots: {
              customRender: 'syU8'
            }
          }
        ],
        url: {
          exportXlsUrl: '/viewClockIn/bdClockinMonth/exportXls',
          getCloseDate:'/viewClockIn/bdClockinMonth/getCloseDate',
          closeDateUrl:'/viewClockIn/bdClockinMonth/closeDate',
          list: '/viewClockIn/bdClockinMonth/list',
          syMonthReport: '/viewClockIn/viewClockIn/syMonthReport'
        },
      }
    }, 
    created() {　　　　//实例被创建时候执行
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        // let dd = new Date().getDate();
        this.monthTime = yy+"-"+mm;
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      },
    },
    methods: {
      
      monthReport() {
        
        let ids = "";
        var conText = ";"
        let sqp1 = this.getQueryParams();
        if(sqp1['monthTime'] == 'undefined' || sqp1['monthTime'] == null || sqp1['monthTime'] == ''){
          this.$message.warning('请选择生成月报日期！');
          return false;
        }
        let nowDate = moment(sqp1['monthTime']).format('YYYY-MM');
        let that = this;
        
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        if(ids == ""){
          conText = "是否生成所有员工" + nowDate + "月报？";
        }else{
          conText = "是否生成所选员工" + nowDate + "月报？ 所选数量：" + this.selectedRowKeys.length;
        }
        // console.log(ids);
        that.$confirm({
           title: "确认操作",
           content: conText,
           onOk: function () {
             monthReport({nowDate:nowDate,userIds:ids}).then((res) => {
               if (res.success) {
                 that.$message.success("已成功生成"+nowDate+"考勤月报");
                 // that.$message.success("已成功生成"+nowDate+"考勤月报");
                 that.loadData();
               } else {
                 that.$message.warning(res.message);
               }
             });
           }
        });
      
      
      },
      
      showModal() {
        let that = this;
        getAction(this.url.getCloseDate, {}).then((res) => {
          that.oldCloseDate = res;
        }).finally(() => {
              
        })
        this.visible = true;
      },
      handleOk(e) {
        if(this.closeDate == '' || this.closeDate == null){
          this.$message.warning("请选择关账日期");
          return;
        }
        let that = this;
        this.visible = false;
        putAction(that.url.closeDateUrl, {closeDate:this.closeDate}).then((res) => {
          if (res.success) {
            that.$message.success("关账成功");
            that.loadData();
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
            that.closeDate = '';
        })
        
      },
      onChange(date, dateString) {
            console.log(date, dateString);
            // this.value = "2021-01-01"
      },
      syMonthReport() {
        let ids = "";
        var conText = "";
        let sqp1 = this.getQueryParams();
        if(sqp1['monthTime'] == 'undefined' || sqp1['monthTime'] == null || sqp1['monthTime'] == ''){
          this.$message.warning('请选择同步月份！');
          return false;
        }
        let nowDate = moment(sqp1['monthTime']).format('YYYY-MM');
        let that = this;
        
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        if(ids == ""){
          conText = "是否同步所有员工" + nowDate + "月报？";
        }else{
          conText = "是否同步所选员工" + nowDate + "月报？ 所选数量：" + this.selectedRowKeys.length;
        }
        
        that.$confirm({
           title: conText,
           content: "同步后不可修改，请确认操作！",
           onOk: function () {
             putAction(that.url.syMonthReport, {viewDate:nowDate,ids:ids}).then((res) => {
               if (res.success) {
                 that.$message.success("同步成功");
                 that.loadData();
               }else{
                 that.$message.warning(res.message);
               }
             }).finally(() => {
                   
             })
           }
        });
       
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>