加班模块

vue-project/hn-kq/src/components/overtime/OverTime.vue

@@ -0,0 +1,435 @@
<template>
  <div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col">
      <header class="ipu-toolbar">
        <h1 class="ipu-toolbar-title">{{isUpdate?'加班申请修改':'加班申请'}}</h1>
        <a class="ipu-fn-left common-page-back" href="javascript:;" @click="back"></a>
      </header>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto gray-backgroud">
      <div class="distance">
        <div
          class="ipu-flex ipu-flex-justify-space from-content border-content"
          @click="showStartDateTimePicker"
        >
          <div class="content-title">开始时间</div>
          <div class="ipu-flex content-value">
            <div>{{startTimeText}}</div>
            <div class="arrow-drop-right"></div>
          </div>
        </div>
        <div class="ipu-flex ipu-flex-justify-space from-content" @click="showEndDateTimePicker">
          <div class="content-title">结束时间</div>
          <div class="ipu-flex content-value">
            <div>{{endTimeText}}</div>
            <div class="arrow-drop-right"></div>
          </div>
        </div>
      </div>
      <!-- <div class="ipu-flex ipu-flex-justify-space from-content distance">
        <div class="content-title">加班时间</div>
        <div class="content-value day-value">{{day}}</div>
      </div> -->
      <div class="distance">
        <div class="content-title border-content from-content">备注</div>
        <div>
          <cube-textarea class="remark-content" placeholder="请输入" v-model="value"></cube-textarea>
        </div>
      </div>
      <div>
        <div class="from-content border-content content-title">图片</div>
        <div class="pic-content">
          <div class="ipu-flex remark-upload">
             <div class="ipu-flex attendance-detail-imgs">
               <div v-for="(img, index) in imgs" :key="index">
                 <img :src="img" alt=""  @click="showImagePreview(index)">
                 <i class="cubeic-wrong" @click="deleteImg(index)"></i>
               </div>
            </div>
            <i class="cubeic-add" v-if="imgs.length<3" @click="showCameraPhoto"></i>
          </div>
        </div>
      </div>
      <div class="gray-backgroud submit-container">
        <cube-button @click="submitOutWork">{{isUpdate?'提交修改':'提交申请'}}</cube-button>
      </div>
    </div>
  </div>
</template>
<script>
import TypeUtil from "../../util/TypeUtil"
export default {
  name: "ClockSuccess",
  props: {
    msg: String
  },
  data() {
    return {
      type: "请选择",
      leaveType: "",
      startTime: "",
      endTime: "",
      startTimeText: "",
      endTimeText: "",
      day: "",
      value: "",
      files: [],
      imgs:[],
      max: 3,
      startDate: null,
      column: [
        { text: "事假", value: "事假" },
        { text: "病假", value: "病假" },
        { text: "调休", value: "调休" },
        { text: "其他", value: "其他" }
      ],
      isUpdate: false
    };
  },
  mounted(){
    if(this.$route.query.id){
      this.isUpdate = true
      var params = {}
      params.overtimeInstId = this.$route.query.id
       this.$http
        .post("/userapro/getOvertimeDetail", params)
        .then(response => {
          if (response.respCode == "0000") {
            this.startTimeText = response.userovertimeRecordVo.overtimeBeginTime 
            this.endTimeText = response.userovertimeRecordVo.overtimeEndTime
            this.startTime = response.userovertimeRecordVo.overtimeBeginTime 
            this.startDate = new Date(response.userovertimeRecordVo.overtimeBeginTime.replace(/-/g, '/'))
            this.endDate = new Date(response.userovertimeRecordVo.overtimeEndTime.replace(/-/g, '/'))
            this.endTime = response.userovertimeRecordVo.overtimeEndTime
            if(response.userovertimeRecordVo.overtimePic1){
              this.imgs.push(response.userovertimeRecordVo.overtimePic1)
              this.files.push(response.userovertimeRecordVo.overtimePic1)
            }
            if(response.userovertimeRecordVo.overtimePic2){
              this.imgs.push(response.userovertimeRecordVo.overtimePic2)
              this.files.push(response.userovertimeRecordVo.overtimePic2)
            }
            if(response.userovertimeRecordVo.overtimePic3){
              this.imgs.push(response.userovertimeRecordVo.overtimePic3)
              this.files.push(response.userovertimeRecordVo.overtimePic3)
            }
            this.value = response.userovertimeRecordVo.overtimeDesc
          }
        }).catch(error => {
          console.log(error);
        })
    }
  },
  methods: {
     showCameraPhoto(){
      this.$createActionSheet({
         title: '选择照片类型',
         data: [
          {
            content: '拍照'
          },
          {
            content: '相册'
          }
        ],
        onSelect: (item, index) => {
          if(index==0){
            WadeMobile.getPhoto(path=>{
              this.submittedHandler('data:image/jpeg;base64,'+path)
            },0)
          }else if(index ==1){
             WadeMobile.getPicture(path=>{
              this.submittedHandler('data:image/jpeg;base64,'+path)
            },0)
          }
        },
        onCancel: () => {
         
        }
      }).show()
    },
    deleteImg(index){
      this.imgs.splice(index,1)
      this.files.splice(index,1)
    },
    dataURLtoFile(dataurl) {
      var filename = new Date().getTime()
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],  
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);  
      while(n--){  
          u8arr[n] = bstr.charCodeAt(n);  
      }  
      return new File([u8arr], filename, {type:mime});
    },
    showImagePreview(index) {
        this.$createImagePreview({
          initialIndex: index,
          imgs: this.imgs
        }).show()
      },
    submitOutWork() {
      var params = {};
      console.log(this.leaveType);
      if (!(this.startTimeText && this.endTimeText)) {
        const toast = this.$createToast({
          type: "txt",
          txt: "请选择时间",
          time: 2000
        });
        toast.show();
        return;
      }
      params.overTimeBeginTime = this.startTimeText;
      params.overTimeEndTime = this.endTimeText;
      params.overTimeDesc = this.value;
      this.files.forEach((e,index)=>{
        params['overTimePic'+(index+1)] = e
      })
      console.log(params)
      if(this.$route.query.id){
        params.overtimeInstId = this.$route.query.id
        this.$http
          .post("/userapro/updateErrandDetail", params)
          .then(response => {
            if (response.respCode == "0000") {
              console.log(response);
              var param = {}
              param.title = '修改申请成功'
              param.content = '将来的你一定会感谢现在的自己'
              param.className = 'flag-blue-pass'
              this.$router.push({ path: "/reissueClockSuccess",query:param  });
            }
          })
          .catch(error => {
            console.log(error);
        });
      }else{
      this.$http
        .post("/useratd/addOverTime", params)
        .then(response => {
          if (response.respCode == "0000") {
            console.log(response);
            var param = {}
            param.title = '申请成功'
            param.content = '将来的你一定会感谢现在的自己'
            param.className = 'flag-blue-pass'
            this.$router.push({ path: "/reissueClockSuccess",query:param  });
          }
        })
        .catch(error => {
          console.log(error);
        });
        }
    },
    back() {
      this.$router.back(-1);
    },
    selectPickerHandle(selectedVal, selectedIndex, selectedText) {
      console.log(selectedVal);
      this.leaveType = selectedVal[0];
      this.type = selectedText.join(" ");
    },
    removedHandler(file) {
      console.log(file)
    },
    submittedHandler(base64) {
      if(this.files.length>=3){
        const toast = this.$createToast({
          type: "txt",
          txt: "最多上传3张图片",
          time: 2000
        });
        toast.show();
        return;
      }
      var params = new FormData();
      params.append("file", this.dataURLtoFile(base64));
      this.$http
        .post("/uploadFile", params)
        .then(response => {
          if (response.respCode == "0000") {
            this.imgs.push(base64)
            this.files.push(response.respMsg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    showStartDateTimePicker() {
      if (!this.startDateSegmentPicker) {
        var year = new Date().getFullYear();
        this.startDateSegmentPicker = this.$createDatePicker({
              is: 'cube-date-picker',
              title: '选择日期',
              min: new Date(year-1, 1, 1, 0, 0),
              max: new Date(year+5, 12, 31, 23, 59),
              value: new Date(),
              columnCount: 5,
              format: { year: "YYYY年", month: "MM月", date: " D 日" ,hour: 'hh时', minute: 'mm分'},
              onSelect: (date, selectedVal, selectedText) => {
              this.startDate = date;
              this.startTimeText =
                selectedVal[0] +
                "-" +
                (selectedVal[1]<10?"0"+selectedVal[1]:selectedVal[1]) +
                "-" +
                (selectedVal[2] < 10 ? "0" + selectedVal[2] : selectedVal[2])+" "+(selectedVal[3] < 10 ? "0" + selectedVal[3] : selectedVal[3])+":"+(selectedVal[4] < 10 ? "0" + selectedVal[4] : selectedVal[4]);
            },
            onCancel: () =>{}
            }
          )
      }
      this.startDateSegmentPicker.show()
    },
    showEndDateTimePicker() {
      if (!this.startDate||this.startDate == "") {
        const toast = this.$createToast({
          type: "txt",
          txt: "请先选择开始时间",
          time: 2000
        });
        toast.show();
        return;
      }
      // if (!this.endDateSegmentPicker) {
        var year = new Date().getFullYear();
        this.endDateSegmentPicker = this.$createDatePicker({
              is: 'cube-date-picker',
              title: '选择日期',
              min: this.startDate,
              max: new Date(year+5, 12, 31, 23, 59),
              value: new Date(),
              columnCount: 5,
              format: { year: "YYYY年", month: "MM月", date: " D 日" ,hour: 'hh时', minute: 'mm分'},
              onSelect: (date, selectedVal, selectedText) => {
              this.endDate = date;
              this.endTimeText =
                selectedVal[0] +
                "-" +
                (selectedVal[1]<10?"0"+selectedVal[1]:selectedVal[1]) +
                "-" +
                (selectedVal[2] < 10 ? "0" + selectedVal[2] : selectedVal[2])+" "+(selectedVal[3] < 10 ? "0" + selectedVal[3] : selectedVal[3])+":"+(selectedVal[4] < 10 ? "0" + selectedVal[4] : selectedVal[4]);
            },
            onCancel: () =>{}
            }
          )
      // }
      this.endDateSegmentPicker.show();
    },
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../style/variable.styl';
.attendance-detail-imgs{
  >div{
    position: relative;
  }
  img{
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #eee;
  }
  .cubeic-wrong {
    position: absolute;
    z-index: 2;
    top: -1px;
    right: -1px;
    color: rgba(0,0,0,0.8);
    font-size: 20px;
    background-color: #fff;
    border-radius: 50%;
  }
  .cubeic-wrong::before{
    display: inline-block;
    -webkit-transform: scale(1.625);
    transform: scale(1.625);
    -webkit-transform-origin: center;
    transform-origin: center;
  }
}
.gray-backgroud {
  background-color: #eee;
}
.from-content {
  height: 44px;
  font-size: 16px;
  line-height: 44px;
  padding: 0 15px;
  background-color: #fff;
  .arrow-drop-right {
    background-image: url('../../assets/arrow-drop-right.png');
    background-size: 100% 100%;
    height: 12px;
    width: 8px;
    margin: 15px 0 0 14px;
  }
  .content-title {
    color: rgba(0, 0, 0, 0.85);
  }
  .content-value {
    color: rgba(0, 0, 0, 0.45);
  }
  input{
    text-align: right;
    color: rgba(0, 0, 0, 0.45);
  }
  .day-value {
    padding-right: 21px;
  }
  .remark-content {
    height: 100px;
  }
  .pic-content {
    background-color: #fff;
    .remark-upload {
      padding: 10px 15px;
      flex-wrap: wrap;
    }
  }
}
.distance {
  margin-bottom: 10px;
  .border-content {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09); /* no */
  }
}
// .cube-textarea-wrapper::after {
//   border: none;
// }
.cube-upload-file {
  margin-right: 10px;
  margin-bottom: 15px;
}
.file-content .cube-upload-file-def {
  width: 75px;
  height: 75px;
}
.cube-upload-btn {
  line-height: 70px;
}
.submit-container {
  padding: 30px 15px 30px 15px;
}
.submit-container button {
  background-color: $c-primary;
  font-size: 18px;
}
</style>

vue-project/hn-kq/src/components/overtime/OverTimeApplyList.vue

@@ -0,0 +1,433 @@
<template>
  <div class="ipu-flex-content pages-leaveapply-list"
       :class="{'pages-leaveapply-list-manager': !auditManager }">
    <div class="ipu-flex-row ipu-flex-vertical">
      <div class="ipu-flex-col">
        <header class="ipu-toolbar">
          <a class="ipu-fn-left common-page-back" href="javascript:;" @click="pageBack"></a>
          <h1 class="ipu-toolbar-title">加班审批记录</h1>
        </header>
      </div>
      <div class="ipu-flex-col">
        <div class="ipu-tab ipu-tab-fixed ipu-tab-button">
          <div class="ipu-tab-head">
            <ul>
              <li v-for="statusItem in statusTypes"
                  :class="{'ipu-current' : queryData.overtimeAdminStatus==statusItem.status}"
                  @click="changeApplyType(statusItem.status)">{{statusItem.name}}
              </li>
            </ul>
            <div class="ipu-flex leaveapply-list-filter" v-show="filterType==0">
              <div class="ipu-flex-grow-1 leaveapply-list-filter-type  ipu-flex ipu-flex-justify-center"
                   @click="toSearchFilter">
                <div class="leaveapply-list-filter-search">搜索</div>
              </div>
              <div class="ipu-flex-grow-1 leaveapply-list-filter-type  ipu-flex ipu-flex-justify-center"
                   @click="toDateFilter">
                <div class="leaveapply-list-filter-date">筛选</div>
              </div>
              <div class="ipu-flex-grow-1 leaveapply-list-filter-type  ipu-flex ipu-flex-justify-center"
                   v-show="queryData.overtimeAdminStatus=='W'" @click="toAuditMange">
                <div class="leaveapply-list-filter-manage">管理</div>
              </div>
            </div>
            <div class="leaveapply-filter-search-query" v-show="filterType==1">
              <input type="search" placeholder="请输入姓名关键字" v-model="searchKey" @keyup.enter="toQuery"/>
            </div>
            <div class="leaveapply-filter-date-query" v-show="filterType==2">
              <div class="leaveapply-filter-date-block">
                <div class="leaveapply-filter-date-title">
                  快速筛选
                </div>
                <div class="ipu-flex leaveapply-filter-date-content">
                  <a href="javascript:;" class="leaveapply-filter-date-range" @click="sltDateRange('lastWeek')">近一周</a>
                  <a href="javascript:;" class="leaveapply-filter-date-range" @click="sltDateRange('lastMonth')">近一月</a>
                  <a href="javascript:;" class="leaveapply-filter-date-range"
                     @click="sltDateRange('last3Month')">近三月</a>
                </div>
              </div>
              <div class="leaveapply-filter-date-block">
                <div class="leaveapply-filter-date-title">
                  时间
                </div>
                <div class="leaveapply-filter-date-content">
                  <div class="ipu-flex leaveapply-filter-date-input-wrap">
                    <input class="ipu-flex-grow-0 leaveapply-filter-date-input" type="text" placeholder="请选择日期" readonly
                           @click="showBeginDate" v-model="beginDate"/>
                    <div class="ipu-flex-grow-1 leaveapply-filter-date-split"></div>
                    <input class="ipu-flex-grow-0 leaveapply-filter-date-input" type="text" placeholder="请选择日期" readonly
                           @click="showEndDate" v-model="endDate"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="leaveapply-list-select-all">
              <label class="ipu-flex-grow-0 ipu-checkbox" @click="checkAllClick">
                <input type="checkbox" v-model="isCheckAll">全选
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="ipu-flex-content scroll-list-wrap" v-show="filterType == 0 && isQuery">
          <cube-scroll ref="scroll" :data="items"
                       :options="options"
                       @pulling-down="onPullingDown"
                       @pulling-up="onPullingUp">
            <div class="leaveapply-list">
              <div v-for="applyItem in items"
                   class="ipu-flex ipu-flex-align-center leaveapply-list-item-wrap">
                <label class="ipu-flex-grow-0 ipu-checkbox">
                  <input type="checkbox" :value="applyItem.overtimeInstId" v-model="sltItems">
                </label>
                <div class="ipu-flex-grow-1 leaveapply-list-item" @click="toDetail(applyItem)">
                  <div class="ipu-flex leavaapply-list-item-head">
                    <div class="ipu-flex-grow-1 leavaapply-list-item-title">
                      {{applyItem.atdObjName}}
                    </div>
                    <!-- leavaapply-list-item-type-illness  leavaapply-list-item-type-affair 事假颜色和其它不一样 -->
                   <div class="ipu-flwx-grow-0 leavaapply-list-item-type ">加班
                    </div>
                  </div>
                  <div class="leaveapply-list-item-body">
                    <div class="leaveapply-list-item-note">
                      {{applyItem.overtimeDesc}}
                    </div>
                    <div class="leaveapply-list-item-date">
                      {{applyItem.overtimeAskTime}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-empty-flag" v-show="items.length==0 && isQuery">
              暂无数据
            </div>
            <div class="no-more-data" v-show="items.length!=0  && !nextPage && isQuery">
              没有更多数据
            </div>
          </cube-scroll>
        </div>
      </div>
      <div class="ipu-flex-col" v-show="filterType!=0">
        <div class="filter-query-btn-wrap">
          <button class="ipu-btn common-btn common-btn-primary filter-query-btn" @click="toQuery">查询</button>
        </div>
      </div>
      <div class="ipu-flex-col" v-show="auditManager">
        <div class="ipu-flex audit-btns list-audit-btns">
          <button class="ipu-btn common-btn common-btn-asset" @click="auditApply('N')">
            审核不通过
          </button>
          <button class="ipu-btn common-btn common-btn-primary" @click="auditApply('A')">
            审核通过
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import List from "../common/List"
  import DateUtil from "../../util/DateUtil"
  import TypeUtil from "../../util/TypeUtil"
  import EventBus from "../common/EventBus.js"
  export default {
    props: {},
    data: function () {
      return {
        statusTypes: [{name: '待审批', status: 'W'}, {name: '审批通过', status: 'A'}, {name: '审批未通过', status: 'N'}],
        queryData: {
          atdObjName: '',     // 申请人姓名，模糊匹配
          pageSize: 10,
          pageNumber: 1,
          overtimeAdminStatus: 'W',     // 默认W审批未通过，N审批通过，A审批未通过
          overtimeBeginTime: '',
          overtimeEndTime: ''
        },
        isQuery: false,     // 是否查询过
        filterType: 0,        // 0默认，1搜索，2筛选
        auditManager: false,      // 是否管理状态
        isCheckAll: false,   // 是否全选
        searchKey: '',        // 搜索关键字
        beginDate: '',
        endDate: '',
        sltItems: [],         // 选中项
        items: [],            // 数据列表
        nextPage: false,       // 是否下一页
        queryCount: 0,           // 查询计数器
        dateRanges: null,        // 近一周，一月，三月信息
        beginPicker: null,
        endPicker: null,
        defaultMin: null,
        defaultMax: null
      }
    },
    computed: {
      options: function () {
        return {
          pullDownRefresh: !this.auditManager && {
            txt: '刷新成功'
          },
          pullUpLoad: !this.auditManager && this.nextPage && { // ，加上后不再显示不能加载更多
            txt: {
              more: '向上加载更多...',
              noMore: '没有更多数据'
            }
          }
        }
      }
    },
    methods: {
      onPullingDown(){ // 模拟刷新数据
        this.getApplyList(2)
      },
      onPullingUp(){ // 加载新数据
        if (this.nextPage) {
          this.getApplyList(1)
        } else {
          this.$refs.scroll.forceUpdate()
        }
      },
      checkAllClick(){
        this.isCheckAll = !this.isCheckAll
        if (this.isCheckAll) {
          let newSltItem = this.items.map(function (item) { // 将数组中的数组全部放入
            return item.overtimeInstId
          });
          this.sltItems = newSltItem
        } else {
          this.sltItems = []
        }
      },
      leaveTypeText: TypeUtil.leaveTypeText,
      toAuditMange(){
        this.auditManager = !this.auditManager
      },
      toSearchFilter(){
        this.auditManager = false
        this.searchKey = this.queryData.atdObjName
        this.filterType = 1
      },
      toDateFilter(){
        this.auditManager = false
        this.beginDate = this.queryData.overtimeBeginTime
        this.endDate = this.queryData.overtimeEndTime
        this.filterType = 2
      },
      changeApplyType(type){  // 切换不同状态审批列表时，清空原来的查询条件
        if (this.queryData.overtimeAdminStatus != type) {
          this.queryData.overtimeAdminStatus = type
          this.queryData.overtimeBeginTime = ''
          this.queryData.overtimeEndTime = ''
          this.queryData.atdObjName = ''
          this.filterType = 0 // 默认展示列表页面
          this.auditManager = false
          this.isCheckAll = false
          this.getApplyList(0)
        }
      },
      toQuery(){
        let currentFileType = this.filterType
        if (currentFileType == 1) {  // 关键字搜索
          this.queryData.atdObjName = this.searchKey
          this.queryData.overtimeBeginTime = ''
          this.queryData.overtimeEndTime = ''
        } else if (currentFileType == 2) { // 时间搜索，设置相关查询条件
          this.queryData.overtimeBeginTime = this.beginDate
          this.queryData.overtimeEndTime = this.endDate
          this.queryData.atdObjName = ''
        }
        this.filterType = 0
        this.getApplyList(0)
      },
      pageBack(){
        if (this.auditManager) {
          this.auditManager = false
        } else if (this.filterType != 0) {
          this.filterType = 0
        } else {
          this.$router.back()
        }
      },
      auditApply(status){
        if (this.sltItems.length) {
          let _this = this
          let toast = this.$createToast({
            time: 0,
            txt: '提交中',
            mask: true
          })
          toast.show()
          this.$http.post('/userapro/updateOvertimeStatusForList', {
            adminStatus: status,
            overtimeInstIdList: this.sltItems
          }).then(function (data) {
            _this.$createDialog({type: 'alert', title: '提示', content: data.respMsg || '操作成功'}).show()
            _this.auditManager = false  // 重新触发查询，以便更新数据
          }).finally(function () {
            toast.hide()
            _this.sltItems = []
            _this.getApplyList(2)
          })
        } else {
          this.$createToast({
            type: 'text',
            txt: '请最少选择一个审批项',
            time: 2000
          }).show()
        }
      },
      initDatePicker(){
        let _this = this
        this.beginPicker = this.$createDatePicker({
          title: '开始日期',
          value: new Date(),
          format: { year: 'YYYY年', month: 'M月', date: 'D日' },
          onSelect: function (date) {
            _this.beginDate = DateUtil.formatDate(date)
          }
        })
        this.endPicker = this.$createDatePicker({
          title: '结束日期',
          value: new Date(),
          format: { year: 'YYYY年', month: 'M月', date: 'D日' },
          onSelect: function (date) {
            _this.endDate = DateUtil.formatDate(date)
          }
        })
        // 根据日期组件保存默认的最大最小值
        this.defaultMin = this.endPicker.min
        this.defaultMax = this.beginPicker.max
        // 监听两个数据的变化，设置最大值与最小值
        this.$watch("beginDate", function (newValue, oldValue) {
          _this.endPicker.$updateProps({
            min: _this.strToDate(newValue) || this.defaultMin
          })
        })
        this.$watch("endDate", function (newValue, oldValue) {
          _this.beginPicker.$updateProps({
            max: _this.strToDate(newValue) || this.defaultMax
          })
        })
      },
      showBeginDate(){
        this.beginPicker.show()
      },
      showEndDate(){
        this.endPicker.show()
      },
      sltDateRange(index){ // 0：近一周，1：近一月，2：近三月
        let dateRange = this.dateRanges[index]
        this.beginDate = dateRange[0]
        this.endDate = dateRange[1]
      },
      strToDate(str){
        if (!str) {
          return null
        }
        let items = str.split("-")
        return new Date(items[0], items[1] - 1, items[2])
      },
      createDateRange(){
        let today = new Date()
        let computeDay = new Date(today.getTime())
        let lastWeekDay = new Date(computeDay.setDate(computeDay.getDate() - 7));  // 最近一周起始时间
        computeDay = new Date(today.getTime())
        let lastMonthDay = new Date(computeDay.setMonth(computeDay.getMonth() - 1));  // 最近一月起始时间
        computeDay = new Date(today.getTime())
        let last3MonthDay = new Date(computeDay.setMonth(computeDay.getMonth() - 3));  // 最近三月起始时间
        let todayStr = DateUtil.formatDate(today)
        this.dateRanges = {
          lastWeek: [DateUtil.formatDate(lastWeekDay), todayStr],
          lastMonth: [DateUtil.formatDate(lastMonthDay), todayStr],
          last3Month: [DateUtil.formatDate(last3MonthDay), todayStr]
        }
      },
      getApplyList(type){  // type 0:首次加载，1:加载更多 ，2：刷新加载
        let _this = this
        let toast = null
        this.queryCount++
        let localCount = this.queryCount
        if (type == 0) {
          this.items = []   // 重置数据，否则查询出错时，会显示历史数据
          toast = this.$createToast({
            time: 0,
            txt: '加载中',
            mask: true
          })
          toast.show()
        }
        if (type != 1) {
          this.queryData.pageNumber = 1
        }
        this.$http.post("/userapro/getOvertimeList", this.queryData).then(function (data) {
          if (localCount != _this.queryCount) {
            return
          }
          let item = data.userOvertimeRecordVoList || []
          if (type == 0 || type == 2) { // 刷新或切换审核状态
            _this.items = item
          } else if (type == 1) {
            _this.items = _this.items.concat(item)
          }
          _this.nextPage = item.length == _this.queryData.pageSize
          if (_this.nextPage) {
            _this.queryData.pageNumber = _this.queryData.pageNumber + 1
          }
        }).finally(function () {
          _this.isQuery = true
          if (toast) {
            toast.hide()
          }
          _this.$refs.scroll.forceUpdate()
        })
      },
      toDetail(applyItem){  // 未审核的进入审核页面，审核的进入详情页面
        if (applyItem.adminStatus == 'W') {
          this.$router.push({name: 'OverTimeAudit', query: {id: applyItem.overtimeInstId}})
        } else {
          this.$router.push({name: 'OverTimeDetail', query: {id: applyItem.overtimeInstId}})
        }
      }
    },
    mounted: function () {
      let _this = this
      EventBus.$on(TypeUtil.eventName.overTimeApplyList, function () {
        _this.getApplyList(0)
      })
    },
    created: function () {
      this.initDatePicker()
      this.createDateRange()
      this.getApplyList(0)
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>

vue-project/hn-kq/src/components/overtime/OverTimeAudit.vue

@@ -0,0 +1,181 @@
<template>
  <div class="ipu-flex-content pages-laeveapply-audit">
    <div class="ipu-flex-row ipu-flex-vertical">
      <div class="ipu-flex-col">
        <header class="ipu-toolbar">
          <a class="ipu-fn-left common-page-back" href="javascript:;" @click="pageBack"></a>
          <h1 class="ipu-toolbar-title">加班审批</h1>
        </header>
      </div>
      <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="page-content">
          <div class="ipu-list ipu-list-high ipu-list-form">
            <ul>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    申请人
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.atdObjName}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    申请时间
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.overtimeAskTime}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    申请周期
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.overtimeBeginTime}} ~ {{applyInfo.overtimeEndTime}}
                  </div>
                </div>
              </li>
              <!-- <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    请假类型
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{getLeaveTypeDesc(applyInfo.leaveType)}}
                  </div>
                </div>
              </li> -->
              <li class="ipu-list-item ipu-flex-vertical list-item-img list-item-note">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    事由描述
                  </div>
                  <div class="ipu-list-item-input-wrap">
                  </div>
                </div>
                <div class="attendance-note ipu-fn-bd-t">
                  {{applyInfo.overtimeDesc}}
                </div>
                <div class="attendance-detail-imgs">
                  <img v-for="img, index in imgs" :src="img" alt="" @click="showImagePreview(index)">
                </div>
              </li>
            </ul>
          </div>
          <div class="common-split-block"></div>
          <div class="audit-block" v-show="applyInfo.adminStatus=='W'">
            <div class="audit-title ipu-fn-bd-b">
              审批意见
            </div>
            <textarea class="audit-note-input" placeholder="请输入审批意见" v-model="auditNote">
            </textarea>
            <div class="ipu-flex audit-btns">
              <button class="ipu-btn common-btn common-btn-asset" @click="auditApply('N')">
                审核不通过
              </button>
              <button class="ipu-btn common-btn common-btn-primary" @click="auditApply('A')">
                审核通过
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import TypeUtil from "../../util/TypeUtil"
  import EventBus from "../common/EventBus.js"
  export default {
    props: {},
    data: function () {
      return {
        applyInfo: {},
        auditNote: '',
        imgs: []
      }
    },
    methods: {
      pageBack (){
        this.$router.back()
      },
      getLeaveTypeDesc: TypeUtil.leaveTypeText,
      getLeaveStatusDesc: TypeUtil.leaveApplyStatusText,
      getImgs(item){
        if (item.picUrl1) {
          this.imgs.push(item.picUrl1)
        }
        if (item.picUrl2) {
          this.imgs.push(item.picUrl2)
        }
        if (item.picUrl3) {
          this.imgs.push(item.picUrl3)
        }
      },
      getLeaveApply(){
        let _this = this
        this.$http.post('/userapro/getOvertimeDetail', {overtimeInstId: this.$route.query.id}).then(function (data) {
          _this.applyInfo = data.userovertimeRecordVo
          _this.getImgs(_this.applyInfo)
          if (_this.applyInfo.adminStatus != 'W') {  // 检查审核状态是否未审核
            _this.$createDialog({type: 'alert', title: '提示', content: '请假申请已经审核过了'}).show()
          }
        })
      },
      auditApply(status){
        let _this = this
        let toast = this.$createToast({
          time: 0,
          txt: '提交中',
          mask: true
        })
        toast.show()
        this.$http.post("/userapro/updateOvertimeStatus", {
          adminDesc: this.auditNote,
          overtimeInstId: this.applyInfo.overtimeInstId,
          adminStatus: status
        }).then(function (data) {
          let result = 0  // 表示审核失败
          if (data.respCode == '0000') {
            result = status == 'A' ? 1 : 2
          }
          // 应该是替换当前地址，除了失败？
          _this.$router.replace({name: 'AuditResult', query: {result: result}})
        }).finally(function () {
          EventBus.$emit(TypeUtil.eventName.leaveApplyList, null) // 通知列表页面刷新
          toast.hide()
        })
      },
      showImagePreview(index) {
        this.$createImagePreview({
          initialIndex: index,
          imgs: this.imgs
        }).show()
      }
    },
    created(){
      this.getLeaveApply()
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus" scoped>
</style>

vue-project/hn-kq/src/components/overtime/OverTimeDetail.vue

@@ -0,0 +1,200 @@
<template>
  <div class="ipu-flex-content pages-outattendance-detail">
    <div class="ipu-flex-row ipu-flex-vertical">
      <div class="ipu-flex-col">
        <header class="ipu-toolbar">
          <a class="ipu-fn-left common-page-back" href="javascript:;" @click="pageBack"></a>
          <h1 class="ipu-toolbar-title">加班详情</h1>
        </header>
      </div>
      <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="page-content">
          <div class="ipu-list ipu-list-high ipu-list-form">
            <ul>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    申请人
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.atdObjName}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    申请时间
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.overtimeAskTime}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    开始时间
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.overtimeBeginTime}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    结束时间
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.overtimeEndTime}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    加班事由
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.overtimeDesc}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    审批时间
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.updateTime=='null'?'':applyInfo.updateTime}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    审批人
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.rePunchAdminName}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    审批备注
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{applyInfo.adminDesc}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    审批结果
                  </div>
                  <div class="ipu-list-item-input-wrap">
                    {{leaveApplyStatusText(applyInfo.adminStatus)}}
                  </div>
                </div>
              </li>
              <li class="ipu-list-item ipu-flex-vertical list-item-img">
                <div class="ipu-list-item-inner">
                  <div class="ipu-list-item-label">
                    图片
                  </div>
                </div>
                <div class="attendance-detail-imgs">
                  <img v-for="img, index in imgs" :src="img" alt="" @click="showImagePreview(index)">
                </div>
              </li>
            </ul>
            <div class="ipu-flex submit-container" v-if="applyInfo.adminStatus=='A'&&applyInfo.reviseFlag!='A'">
              <cube-button style="margin:10px" @click="todelete">撤销</cube-button> 
              <cube-button style="margin:10px" @click="toupdate">修改</cube-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import TypeUtil from "../../util/TypeUtil"
  import {Toast, Dialog} from 'cube-ui'
  export default {
    props: {},
    data: function () {
      return {
        imgs: [],
        applyInfo: {}
      }
    },
    methods: {
      todelete(){
         Dialog.$create({type: 'confirm', title: '提示', content: '是否确认撤销加班申请！',onConfirm: () => {
            this.$http
          .post("/useratd/deleteErrAnd", {errAndId:this.$route.query.id})
          .then((response) => {
            if (response.respCode == "0000") {
              console.log(response);
              var param = {}
              param.title = '撤销成功'
              param.content = '将来的你一定会感谢现在的自己'
              param.className = 'flag-pass'
              this.$router.push({ path: "/reissueClockSuccess",query:param });
            }
          })
          .catch((error) => {
            console.log(error);
          });
        }}).show()
      },
      toupdate() {
        this.$router.push({
          name: "OverTime",
          query: { id: this.$route.query.id }
        });
      },
      pageBack (){
        this.$router.back()
      },
      leaveTypeText: TypeUtil.leaveTypeText,
      leaveApplyStatusText: TypeUtil.leaveApplyStatusText,
      getApplyInfo(){
        let _this = this
        this.$http.post('/userapro/getOvertimeDetail', {overtimeInstId: this.$route.query.id})
            .then(data => {
              this.applyInfo = data.userovertimeRecordVo
              _this.getImgs(_this.applyInfo)
            })
      },
      getImgs(item){
        if (item.overtimePic1) {
          this.imgs.push(item.overtimePic1)
        }
        if (item.overtimePic2) {
          this.imgs.push(item.overtimePic2)
        }
        if (item.overtimePic3) {
          this.imgs.push(item.overtimePic3)
        }
      },
      showImagePreview(index) {
        this.$createImagePreview({
          initialIndex: index,
          imgs: this.imgs
        }).show()
      }
    },
    created(){
      this.getApplyInfo()
    }
  }
</script>