gdy_qywx_pc/src/views/attendance/attendance_overtime_rule.vue

<template>
  <div style=" background-color: #fff; padding:15px;">
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <el-button
        class="first-element-btn"
        v-if="profile.manager_type > 1"
        :disabled="multipleSelection.length < 1"
        @click="confirmMultipleDelete"
        type="primary"
        plain
      >批量删除
      </el-button>


      <el-button
        @click="toDetailPage(0, $event)"

        type="primary"
        plain
      >创建加班规则
      </el-button>

      <el-button
        @click="ShowRuleDetailBaseDialogVisible"

        type="primary"
        plain
      >基础设置
      </el-button>






      <div class="gap-right-8" style="display:inline-block; width:220px;">
        <el-input
          placeholder="输入关键词查找"
          ref="search-bar"
          v-model="filter.keywords"
          class="input-with-select"
          @keyup.enter.native="onFilterChanged"
        >
          <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
        </el-input>
      </div>

    </div>
    <el-table
      @selection-change="handleSelectionChange"
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      :border="false"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="42"
        v-if="profile.manager_type > 1"

      ></el-table-column>

      <el-table-column prop="name" label="名称" :filterMultiple="false"></el-table-column>


      <el-table-column label="规则">
        <template slot-scope="scope">
          <div style="display: table;">
            <div style="display: table-cell;">工作日：</div>
            <div style="display: table-cell;" v-if="scope.row.config.workday.enabled == 'true'">
              <div v-if="scope.row.config.workday.type=='review'">按审批时长计算</div>
              <div v-if="scope.row.config.workday.type=='review_and_checkin'">在审批的时段内，按打卡时长计算</div>
              <div v-if="scope.row.config.workday.type=='normal'">无需审批，按打卡时长计算</div>
            </div>
            <div style="display: table-cell;" v-if="scope.row.config.workday.enabled == 'false'">不允许加班</div>
          </div>

          <div style="display: table;">
            <div style="display: table-cell;">休息日：</div>
            <div style="display: table-cell;" v-if="scope.row.config.offday.enabled == 'true'">
              <div v-if="scope.row.config.offday.type=='review'">按审批时长计算</div>
              <div v-if="scope.row.config.offday.type=='review_and_checkin'">在审批的时段内，按打卡时长计算</div>
              <div v-if="scope.row.config.offday.type=='normal'">无需审批，按打卡时长计算</div>
            </div>
            <div style="display: table-cell;" v-if="scope.row.config.offday.enabled == 'false'">不允许加班</div>
          </div>

          <div style="display: table;">
            <div style="display: table-cell;">节假日：</div>
            <div style="display: table-cell;" v-if="scope.row.config.holiday.enabled == 'true'">
              <div v-if="scope.row.config.holiday.type=='review'">按审批时长计算</div>
              <div v-if="scope.row.config.holiday.type=='review_and_checkin'">在审批的时段内，按打卡时长计算</div>
              <div v-if="scope.row.config.holiday.type=='normal'">无需审批，按打卡时长计算</div>
            </div>
            <div style="display: table-cell;" v-if="scope.row.config.holiday.enabled == 'false'">不允许加班</div>
          </div>

        </template>
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button
            type="text"
            @click="toDetailPage(scope.row.id, $event)"
          >修改
          </el-button>
          <el-button

            type="text"
            @click="confirmDelete(scope.row.id)"
          >删除
          </el-button>


        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next"
      :page-size="pageLimit"
      :page-sizes="[10, 20, 50, 100]"
      :total="totalCount"
      @size-change="handleSizeChange"
      :current-page.sync="currentPage"
      @current-change="changePage"
    ></el-pagination>

    <el-dialog
      class="attendance_group"
      :title="dialog_title"
      @close="formReset"
      :visible.sync="RuleDetailDialogVisible"
      width="800px"
      top="50px"
    >
      <el-scrollbar
        wrap-class="column-wrapper scrollable-items-container check-item-box dept_tree"
        :native="false"
        style="height: 450px;"
      >

        <div style="padding:0 80px;">
          <el-form ref="formdata" :model="formdata" label-width="150px">
            <el-form-item label="规则名称">
              <el-input style="width:350px;" v-model="formdata.name"></el-input>
            </el-form-item>


            <el-form-item label="">
              <el-radio-group v-model="activeName2" style="margin-bottom: 30px;">
                <el-radio-button label="first">工作日加班</el-radio-button>
                <el-radio-button label="right">休息日加班</el-radio-button>
                <el-radio-button label="bottom">节假日加班</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <transition name="slide-fade">
            <el-form-item label="允许加班" v-if="activeName2=='first'">
              <el-switch
                v-model="formdata.config.workday.enabled"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="计算方式" v-if="activeName2=='first' && formdata.config.workday.enabled">
              <div><el-radio v-model="formdata.config.workday.type" label="review" name="stype">按审批时长计算</el-radio></div>
              <div><el-radio v-model="formdata.config.workday.type" label="review_and_checkin" name="stype">在审批的时段内，按打卡时长计算</el-radio></div>
              <div><el-radio v-model="formdata.config.workday.type" label="normal" name="stype">无需审批，按打卡时长计算</el-radio></div>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="扣除休息时间" v-if="activeName2=='first'">
              <el-switch
                v-model="formdata.config.workday.dislodge_break"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="" v-if="activeName2=='first' && formdata.config.workday.dislodge_break">
              <div style="margin-bottom:15px;"><el-radio v-model="formdata.config.workday.dislodge_break_type" label="0" name="dislodge_break_type">设置休息时段</el-radio>



                <div v-for="(item,index) in formdata.config.workday.dislodge_break0" style="margin-bottom:10px;">
                  <el-time-picker
                  value-format="HH:mm"
                  selectableRange="00:00:00-23:59:59"
                  format="HH:mm"
                  v-model="item.starttime"
                  placeholder="选择时间" style="width:120px; margin-left:25px;">
                </el-time-picker>
-
                  <el-time-picker
                    value-format="HH:mm"
                    selectableRange="00:00:00-23:59:59"
                    format="HH:mm"
                    v-model="item.endtime"
                    placeholder="选择时间" style="width:120px;">
                  </el-time-picker>
                  <el-button v-if="formdata.config.workday.dislodge_break0.length > 1" @click="del_time_list('workday', index)">-</el-button>
                  <el-button @click="add_time_list('workday')" style="margin-left:0;">+</el-button>
                </div>


              </div>
              <div><el-radio v-model="formdata.config.workday.dislodge_break_type" label="1" name="dislodge_break_type">按加班时长扣除</el-radio></div>


              <div v-for="(item,index) in formdata.config.workday.dislodge_break1" style="margin-left:25px; margin-bottom:10px;">每天满

              <el-input type="number" v-model="item.starttime" style="width:70px;"></el-input>
              小时，扣除

                <el-input type="number" v-model="item.endtime" style="width:70px;"></el-input>
                小时


                <el-button v-if="formdata.config.workday.dislodge_break1.length > 1" @click="del_time_list1('workday', index)">-</el-button>
                <el-button @click="add_time_list1('workday')" style="margin-left:0;">+</el-button>
              </div>



            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="计为调休或加班费" v-if="activeName2=='first'">
              <el-switch
                v-model="formdata.config.workday.result_convert"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="" v-if="activeName2=='first' && formdata.config.workday.result_convert">
              <div><el-radio v-model="formdata.config.workday.result_type" label="0" name="result_type">

                按1:
                <el-input type="number" :disabled="formdata.config.workday.result_type != '0'" v-model="formdata.config.workday.result_convert_config" style="width:60px;"></el-input>
                计为
                <el-select style="width:80px;" :disabled="formdata.config.workday.result_type != '0'" v-model="formdata.config.workday.result_convert_type" placeholder="请选择">
                  <el-option label="年假" value="0"></el-option>
                  <el-option label="事假" value="1"></el-option>
                  <el-option label="病假" value="2"></el-option>
                  <el-option label="调休" value="3"></el-option>
                  <el-option label="产假" value="4"></el-option>
                  <el-option label="婚假" value="5"></el-option>
                  <el-option label="例假" value="6"></el-option>
                  <el-option label="丧假" value="7"></el-option>
                  <el-option label="陪产假" value="8"></el-option>
                </el-select>
                时长
              </el-radio></div>
              <div><el-radio v-model="formdata.config.workday.result_type" label="1" name="result_type">计为加班费</el-radio></div>
              <div v-if="false"><el-radio v-model="formdata.config.workday.result_type" label="2" name="result_type">员工申请加班时可选择，计为加班费<br/>
              <div style="display: inline; margin-left:25px;">或者按1:
                <el-input type="number" :disabled="formdata.config.workday.result_type != '2'" v-model="formdata.config.workday.result_convert_config" style="width:60px;"></el-input>
                计为
                <el-select style="width:80px;" :disabled="formdata.config.workday.result_type != '2'" v-model="formdata.config.workday.result_convert_type" placeholder="请选择">
                  <el-option label="年假" value="0"></el-option>
                  <el-option label="事假" value="1"></el-option>
                  <el-option label="病假" value="2"></el-option>
                  <el-option label="调休" value="3"></el-option>
                  <el-option label="产假" value="4"></el-option>
                  <el-option label="婚假" value="5"></el-option>
                  <el-option label="例假" value="6"></el-option>
                  <el-option label="丧假" value="7"></el-option>
                  <el-option label="陪产假" value="8"></el-option>
                </el-select>
                时长</div>
              </el-radio></div>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="允许加班" v-if="activeName2=='right'">
              <el-switch
                v-model="formdata.config.offday.enabled"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item></transition>
            <transition name="slide-fade">
            <el-form-item label="计算方式" v-if="activeName2=='right' && formdata.config.offday.enabled">
              <div><el-radio v-model="formdata.config.offday.type" label="review" name="stype">按审批时长计算</el-radio></div>
              <div><el-radio v-model="formdata.config.offday.type" label="review_and_checkin" name="stype">在审批的时段内，按打卡时长计算</el-radio></div>
              <div><el-radio v-model="formdata.config.offday.type" label="normal" name="stype">无需审批，按打卡时长计算</el-radio></div>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="扣除休息时间" v-if="activeName2=='right'">
              <el-switch
                v-model="formdata.config.offday.dislodge_break"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="" v-if="activeName2=='right' && formdata.config.offday.dislodge_break">
              <div style="margin-bottom:15px;"><el-radio v-model="formdata.config.offday.dislodge_break_type" label="0" name="dislodge_break_type">设置休息时段</el-radio>



                <div v-for="(item,index) in formdata.config.offday.dislodge_break0" style="margin-bottom:10px;">
                  <el-time-picker
                    value-format="HH:mm"
                    selectableRange="00:00:00-23:59:59"
                    format="HH:mm"
                    v-model="item.starttime"
                    placeholder="选择时间" style="width:120px; margin-left:25px;">
                  </el-time-picker>
                  -
                  <el-time-picker
                    value-format="HH:mm"
                    selectableRange="00:00:00-23:59:59"
                    format="HH:mm"
                    v-model="item.endtime"
                    placeholder="选择时间" style="width:120px;">
                  </el-time-picker>
                  <el-button v-if="formdata.config.offday.dislodge_break0.length > 1" @click="del_time_list('offday', index)">-</el-button>
                  <el-button @click="add_time_list('offday')" style="margin-left:0;">+</el-button>
                </div>


              </div>
              <div><el-radio v-model="formdata.config.offday.dislodge_break_type" label="1" name="dislodge_break_type">按加班时长扣除</el-radio></div>


              <div v-for="(item,index) in formdata.config.offday.dislodge_break1" style="margin-left:25px; margin-bottom:10px;">每天满

                <el-input type="number" v-model="item.starttime" style="width:70px;"></el-input>
                小时，扣除

                <el-input type="number" v-model="item.endtime" style="width:70px;"></el-input>
                小时


                <el-button v-if="formdata.config.offday.dislodge_break1.length > 1" @click="del_time_list1('offday', index)">-</el-button>
                <el-button @click="add_time_list1('offday')" style="margin-left:0;">+</el-button>
              </div>



            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="计为调休或加班费" v-if="activeName2=='right'">
              <el-switch
                v-model="formdata.config.offday.result_convert"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="" v-if="activeName2=='right' && formdata.config.offday.result_convert">
              <div><el-radio v-model="formdata.config.offday.result_type" label="0" name="result_type">

                按1:
                <el-input type="number" :disabled="formdata.config.offday.result_type != '0'" v-model="formdata.config.offday.result_convert_config" style="width:60px;"></el-input>
                计为
                <el-select style="width:80px;" :disabled="formdata.config.offday.result_type != '0'" v-model="formdata.config.offday.result_convert_type" placeholder="请选择">
                  <el-option label="年假" value="0"></el-option>
                  <el-option label="事假" value="1"></el-option>
                  <el-option label="病假" value="2"></el-option>
                  <el-option label="调休" value="3"></el-option>
                  <el-option label="产假" value="4"></el-option>
                  <el-option label="婚假" value="5"></el-option>
                  <el-option label="例假" value="6"></el-option>
                  <el-option label="丧假" value="7"></el-option>
                  <el-option label="陪产假" value="8"></el-option>
                </el-select>
                时长
              </el-radio></div>
              <div><el-radio v-model="formdata.config.offday.result_type" label="1" name="result_type">计为加班费</el-radio></div>
              <div v-if="false" style="margin-top:10px;"><el-radio v-model="formdata.config.offday.result_type" label="2" name="result_type">员工申请加班时可选择，计为加班费<br/>
                <div style="display: inline; margin-left:25px;">或者按1:
                  <el-input type="number" :disabled="formdata.config.offday.result_type != '2'" v-model="formdata.config.offday.result_convert_config" style="width:60px;"></el-input>
                  计为
                  <el-select style="width:80px;" :disabled="formdata.config.offday.result_type != '2'" v-model="formdata.config.offday.result_convert_type" placeholder="请选择">
                    <el-option label="年假" value="0"></el-option>
                    <el-option label="事假" value="1"></el-option>
                    <el-option label="病假" value="2"></el-option>
                    <el-option label="调休" value="3"></el-option>
                    <el-option label="产假" value="4"></el-option>
                    <el-option label="婚假" value="5"></el-option>
                    <el-option label="例假" value="6"></el-option>
                    <el-option label="丧假" value="7"></el-option>
                    <el-option label="陪产假" value="8"></el-option>
                  </el-select>
                  时长</div>
              </el-radio></div>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="允许加班" v-if="activeName2=='bottom'">
              <el-switch
                v-model="formdata.config.holiday.enabled"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item></transition>
            <transition name="slide-fade">
            <el-form-item label="计算方式" v-if="activeName2=='bottom' && formdata.config.holiday.enabled">
              <div><el-radio v-model="formdata.config.holiday.type" label="review" name="stype">按审批时长计算</el-radio></div>
              <div><el-radio v-model="formdata.config.holiday.type" label="review_and_checkin" name="stype">在审批的时段内，按打卡时长计算</el-radio></div>
              <div><el-radio v-model="formdata.config.holiday.type" label="normal" name="stype">无需审批，按打卡时长计算</el-radio></div>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="扣除休息时间" v-if="activeName2=='bottom'">
              <el-switch
                v-model="formdata.config.holiday.dislodge_break"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="" v-if="activeName2=='bottom' && formdata.config.holiday.dislodge_break">
              <div style="margin-bottom:15px;"><el-radio v-model="formdata.config.holiday.dislodge_break_type" label="0" name="dislodge_break_type">设置休息时段</el-radio>



                <div v-for="(item,index) in formdata.config.holiday.dislodge_break0" style="margin-bottom:10px;">
                  <el-time-picker
                    value-format="HH:mm"
                    selectableRange="00:00:00-23:59:59"
                    format="HH:mm"
                    v-model="item.starttime"
                    placeholder="选择时间" style="width:120px; margin-left:25px;">
                  </el-time-picker>
                  -
                  <el-time-picker
                    value-format="HH:mm"
                    selectableRange="00:00:00-23:59:59"
                    format="HH:mm"
                    v-model="item.endtime"
                    placeholder="选择时间" style="width:120px;">
                  </el-time-picker>
                  <el-button v-if="formdata.config.holiday.dislodge_break0.length > 1" @click="del_time_list('holiday', index)">-</el-button>
                  <el-button @click="add_time_list('holiday')" style="margin-left:0;">+</el-button>
                </div>


              </div>
              <div><el-radio v-model="formdata.config.holiday.dislodge_break_type" label="1" name="dislodge_break_type">按加班时长扣除</el-radio></div>


              <div v-for="(item,index) in formdata.config.holiday.dislodge_break1" style="margin-left:25px; margin-bottom:10px;">每天满

                <el-input type="number" v-model="item.starttime" style="width:70px;"></el-input>
                小时，扣除

                <el-input type="number" v-model="item.endtime" style="width:70px;"></el-input>
                小时


                <el-button v-if="formdata.config.holiday.dislodge_break1.length > 1" @click="del_time_list1('holiday', index)">-</el-button>
                <el-button @click="add_time_list1('holiday')" style="margin-left:0;">+</el-button>
              </div>



            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="计为调休或加班费" v-if="activeName2=='bottom'">
              <el-switch
                v-model="formdata.config.holiday.result_convert"
                active-text=""
                inactive-text="">
              </el-switch>
            </el-form-item>
            </transition>
            <transition name="slide-fade">
            <el-form-item label="" v-if="activeName2=='bottom' && formdata.config.holiday.result_convert">
              <div><el-radio v-model="formdata.config.holiday.result_type" label="0" name="result_type">

                按1:
                <el-input type="number" :disabled="formdata.config.holiday.result_type != '0'" v-model="formdata.config.holiday.result_convert_config" style="width:60px;"></el-input>
                计为
                <el-select style="width:80px;" :disabled="formdata.config.holiday.result_type != '0'" v-model="formdata.config.holiday.result_convert_type" placeholder="请选择">
                  <el-option label="年假" value="0"></el-option>
                  <el-option label="事假" value="1"></el-option>
                  <el-option label="病假" value="2"></el-option>
                  <el-option label="调休" value="3"></el-option>
                  <el-option label="产假" value="4"></el-option>
                  <el-option label="婚假" value="5"></el-option>
                  <el-option label="例假" value="6"></el-option>
                  <el-option label="丧假" value="7"></el-option>
                  <el-option label="陪产假" value="8"></el-option>
                </el-select>
                时长
              </el-radio></div>
              <div><el-radio v-model="formdata.config.holiday.result_type" label="1" name="result_type">计为加班费</el-radio></div>
              <div v-if="false"><el-radio v-model="formdata.config.holiday.result_type" label="2" name="result_type">员工申请加班时可选择，计为加班费<br/>
                <div style="display: inline; margin-left:25px;">或者按1:
                  <el-input type="number" :disabled="formdata.config.holiday.result_type != '2'" v-model="formdata.config.holiday.result_convert_config" style="width:60px;"></el-input>
                  计为
                  <el-select style="width:80px;" :disabled="formdata.config.holiday.result_type != '2'" v-model="formdata.config.holiday.result_convert_type" placeholder="请选择">
                    <el-option label="年假" value="0"></el-option>
                    <el-option label="事假" value="1"></el-option>
                    <el-option label="病假" value="2"></el-option>
                    <el-option label="调休" value="3"></el-option>
                    <el-option label="产假" value="4"></el-option>
                    <el-option label="婚假" value="5"></el-option>
                    <el-option label="例假" value="6"></el-option>
                    <el-option label="丧假" value="7"></el-option>
                    <el-option label="陪产假" value="8"></el-option>
                  </el-select>
                  时长</div>
              </el-radio></div>
            </el-form-item>
            </transition>
          </el-form>
        </div>


      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
    <el-button @click="RuleDetailDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveFormData" :loading="save_loading">保 存</el-button>
  </span>
    </el-dialog>





    <el-dialog
      class="attendance_group"
      title="加班规则基础设置"
      :visible.sync="RuleDetailBaseDialogVisible"
      width="500px"
      top="50px"
    >

      <el-form ref="baseformdata" :model="baseformdata" label-width="150px">
        <el-form-item label="最小加班单位">


          <el-select v-model="baseformdata.time_min" placeholder="请选择">
            <el-option label="按分钟" :value="0"></el-option>
            <el-option label="按半小时" :value="1"></el-option>
            <el-option label="按小时" :value="2"></el-option>
            <el-option label="按半天" :value="3"></el-option>
            <el-option label="按一天" :value="4"></el-option>
          </el-select>


        </el-form-item>


        <el-form-item label="时间折合">


          <el-input type="number" v-model="baseformdata.time_convert" style="width:80px;"></el-input> 小时=1天


        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveFormDataBase" :loading="save_loading">保 存</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
  import qs from 'qs'
  import moment from 'moment'

  export default {

    data() {
      const validateName = (rule, value, callback) => {
        var validValue = value
          ? value.replace(/\s/g, '').replace(/&nbsp;/gi, '')
          : value
        if (!validValue) {
          return callback(new Error('请填写积分分类名称'))
        } else {
          callback()
        }
      }
      const config = {
        enabled: true, //是否允许加班
        type: 'review',//review,review_and_checkin,normal,
        dislodge_break: false, //去除休息时间
        dislodge_break_type: '0', //0按时段，按时长1
        dislodge_break0: [
          {
            starttime: '8:00',
            endtime: '9:00'
          }
        ],
        dislodge_break1: [
          {
            starttime: '5',
            endtime: '1'
          }
        ],

        result_convert: false,
        result_type: '0', //0调休,1加班费,2员工可选择
        result_convert_config: 1, //1代表1:1转换为调休时长,2代表1:2
        result_convert_type: '0' //1代表1:1转换为调休时长,2代表1:2
      }
      return {
        baseformdata:{
          time_min:0, //按分钟，按半小时，按小时，按半天，按一天
          time_convert:8
        },
        RuleDetailBaseDialogVisible:false,
        activeName2: 'first',
        save_loading: false,
        dialog_title: "创建加班规则",
        formdata: {
          name: '',
          config: {
            workday: JSON.parse(JSON.stringify(config)),
            offday: JSON.parse(JSON.stringify(config)),
            holiday: JSON.parse(JSON.stringify(config))
          }
        },
        multipleSelection: [],
        RuleDetailDialogVisible: false,
        pageLimit: 10,

        profile: this.$store.getters.user_info,
        filter: {
          status: 1,
          keywords: '',
        },
        form_api: '/integral.php/attendance_overtime_rule/add',
        loading: false,
        totalCount: 0,
        currentPage: 1,
        tableData: null,
      }
    },
    methods: {
      load_base_setting() {
        this.loading = true
        const self = this
        this.$http('get','/integral.php/attendance_config/get_config',{
            name:'overtime_base_config'
          }).then(
          ret => {
            self.loading = false
            if (ret.status == '200') {
              const data = ret.data.data
              self.baseformdata = JSON.parse(data)
            }
          }
        )
      },
      saveFormDataBase(){
        let self = this
        let send_data = []
        self.save_loading = true
        send_data.push({name:'overtime_base_config', value:JSON.stringify(self.baseformdata)})
        this.$http('post','/integral.php/attendance_config/save.html',qs.stringify({data:send_data}),
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded'
          // }
        ).then((res) => {
          if(res.status == 200){
            if(res.data.code == 1){
              self.RuleDetailBaseDialogVisible = false
              self.$message.success(res.data.msg)
            }else{
              self.$message.error(res.data.msg)
            }
          }
          self.save_loading = false
        }).catch((e) => {
          // console.log('已取消删除');
        })
      },
      ShowRuleDetailBaseDialogVisible(){
        this.load_base_setting()
        this.RuleDetailBaseDialogVisible = true
      },
      add_time_list(name){
        this.formdata.config[name].dislodge_break0.push({starttime:'00:00', endtime: '00:00'})
      },

      del_time_list(name, index){
        if(this.formdata.config[name].dislodge_break0.length == 1){
          return false
        }
        this.formdata.config[name].dislodge_break0.splice(index,1)
      },

      add_time_list1(name){
        this.formdata.config[name].dislodge_break1.push({starttime:5, endtime: 1})
      },

      del_time_list1(name, index){
        if(this.formdata.config[name].dislodge_break1.length == 1){
          return false
        }
        this.formdata.config[name].dislodge_break1.splice(index,1)
      },


      handleSelectionChange: function (val) {
        this.multipleSelection = val
      },

      confirmMultipleDelete() {
        if (this.multipleSelection.length < 1) {
          return false
        }
        this.$confirm('确定要删除选中的加班规则吗?', '批量删除加班规则', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            const targetArr = []
            for (const index in this.multipleSelection) {
              targetArr.push(this.multipleSelection[index].id)
            }
            const targetIds = targetArr.join(',')
            this.deleteRule(targetIds, true)
          })
          .catch(() => {
            // console.log('已取消删除');
          })
      },


      handleSizeChange(val) {
        this.pageLimit = val
        this.onFilterChanged()
      },

      formReset() {
        const _this = this


      },

      onFilterChanged: function () {
        this.currentPage = 1
        this.loadRuleList()
      },


      // 获取规则列表
      loadRuleList: function () {
        var self = this
        self.loading = true
        var params = {
          site_id: this.profile.site_id,
          page: this.currentPage,
          interval: this.pageLimit,
          keywords: self.filter.keywords
        }

        this.$http('get','/integral.php/attendance_overtime_rule/get_list',params)
          .then(function (response) {
            if (response.status == 200) {
              self.loading = false
              var jsonData = response.data
              try {
                self.totalCount = jsonData.data.total
                self.tableData = jsonData.data.data
              } catch (err) {
                console.log(err)
              }
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      changePage: function (current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadRuleList()
      },
      saveFormData: function () {
        this.save_loading = true
        var self = this
        let send_data = JSON.parse(JSON.stringify(this.formdata))
        this.$http('post',this.form_api,qs.stringify({data:send_data}),
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded'
          // }
        )
          .then(function (response) {
            self.save_loading = false
            if (response.status == 200) {
              if (response.data.code == 1) {
                self.RuleDetailDialogVisible = false
                self.onFilterChanged()
                self.$message.success(response.data.msg)
              } else {
                self.$message.error(response.data.msg)
              }

            } else {
              self.$message.error('网络错误')
            }
          })
          .catch(function (error) {
            self.$message.error('网络错误')
          })
      },

      confirmDelete: function (ruleId) {
        this.$confirm(
          '确定要删除此考勤组吗？',
          '删除积分规则',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.deleteRule(ruleId)
          })
          .catch(() => {
            // console.log('已取消删除');
          })
      },
      deleteRule: function (ruleId) {
        if (!ruleId) {
          return false
        }
        const params = {
          id: ruleId
        }
        var self = this
        this.$http('get','/integral.php/attendance_overtime_rule/delete',params)
          .then(function (response) {

            if (response.status == 200 && response.data.code == 1) {
              self.$message.success(response.data.msg)
              self.loadRuleList()
            } else {
              self.$message.error('网络错误')
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },

      toDetailPage: function (id, event) {
        const self = this

        /*self.formdata = {
          name: '',
          time_list: [
            {id: 0, checkin_time: '8:00', start_time: '8:30', end_time: '18:00'},
          ],
          break_time: ['12:00', '13:00'],
          is_break_time: false,
          is_card: false,
          allowed_late_time: 30,
          serious_late_time: 30,
          absenteeism_late_time: 30,
        }*/
        const config = {
          enabled: true, //是否允许加班
          type: 'review',//review,review_and_checkin,normal,
          dislodge_break: false, //去除休息时间
          dislodge_break_type: '0', //0按时段，按时长1
          dislodge_break0: [
            {
              starttime: '8:00',
              endtime: '9:00'
            }
          ],
          dislodge_break1: [
            {
              starttime: '5',
              endtime: '1'
            }
          ],

          result_convert: false,
          result_type: '0', //0调休,1加班费,2员工可选择
          result_convert_config: 1, //1代表1:1转换为调休时长,2代表1:2
          result_convert_type: '0' //1代表1:1转换为调休时长,2代表1:2
        }
        self.formdata = {
          name: '',
          config: {
            workday: JSON.parse(JSON.stringify(config)),
            offday: JSON.parse(JSON.stringify(config)),
            holiday: JSON.parse(JSON.stringify(config))
          }
        }


        if (id > 0) {
          this.form_api = '/integral.php/attendance_overtime_rule/update'
          this.dialog_title = '修改加班规则'
          //获取一条记录，用于复原修改界面
          this.$http('get','/integral.php/attendance_overtime_rule/get_info',{id: id}).then((res) => {
            if (res.status == 200) {
              self.formdata = res.data.data
              for(let i in self.formdata.config){
                self.formdata.config[i].enabled = self.formdata.config[i].enabled == 'true'
                self.formdata.config[i].dislodge_break = self.formdata.config[i].dislodge_break == 'true'
                self.formdata.config[i].result_convert = self.formdata.config[i].result_convert == 'true'
              }
              self.RuleDetailDialogVisible = true
            } else {
              self.$message.error('网络错误')
            }
          })
        } else {
          this.RuleDetailDialogVisible = true
          this.form_api = '/integral.php/attendance_overtime_rule/add'
          this.dialog_title = '创建加班规则'
        }

      },

    },
    created() {
      this.loadRuleList()
      this.load_base_setting()
    }
  }
</script>
<style>

  .date_tag .el-tag + .el-tag {
    margin: 5px;
  }

  .attendance_group .el-card__body {
    padding: 15px;
  }

  .attendance_group .el-tag + .el-tag {
    margin-left: 10px;
  }

  .attendance_group .el-tag + .el-button {
    margin-left: 10px;
  }

  .setMapBaidu .map {
    width: 100%;
    height: 300px;
  }
  .slide-fade-enter-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>