cz-hjjc-oa/src/views/attendance/WorkOvertime.vue

<template>
  <div>
    <card-container>
      <vxe-toolbar print custom export>
        <template #buttons>
          <el-date-picker
            :value="(select.start_date && select.end_date) ? [select.start_date,select.end_date] : []"
            type="daterange"
            size="small"
            value-format="yyyy-MM-dd"
            style="width: 260px;"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @input="e => (e && e.length === 2) ? (select.start_date = e[0],select.end_date = e[1]) : (select.start_date = '',select.end_date = '')">
          </el-date-picker>
          <el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 6px;" @click="getList">搜索</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="table"
        stripe
        style="margin-top: 10px;"
        :loading="loading"
        keep-source
        show-overflow
        :max-height="1400"
        :min-height="400"
        :export-config="{}"
        :print-config="{}"
        :column-config="{ resizable: true }"
        :scroll-y="{ enabled: true, gt: 100 }"
        :expand-config="{
          visibleMethod: () => false,
          trigger: 'manual'
        }"
        :data="tableData"
      >
        <vxe-column type="expand" title="关联调休" align="center" width="80">
          <template #default="{ row }">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-zoom-in"
                       @click="toggleExpand(row)">{{ row.qingqiujia instanceof Array ? row.qingqiujia.length : 0 }}</el-button>
          </template>
          <template #content="{ row }">
            <div>
              <h4 style="text-indent: 24px;"><i class="el-icon-alarm-clock"></i> 请休假</h4>
              <vxe-table style="width: calc(100% - 80px);" :max-height="400" align="center" show-overflow :data="row.qingqiujia">
                <vxe-column type="seq" width="58" align="center" />
                <vxe-column title="请假类别" width="100" field="qingjialeibie"></vxe-column>
                <vxe-column title="开始时间" width="180" field="kaishishijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
                <vxe-column title="结束时间" width="180" field="jieshushijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
                <vxe-column title="请假时间（时）" width="120" field="qingjiashijian"></vxe-column>
                <vxe-column title="请假天数" width="120" field="day"></vxe-column>
                <vxe-column title="实际开始时间" width="180" field="shijikaishishijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
                <vxe-column title="实际结束时间" width="180" field="shijijieshushijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
                <vxe-column title="实际请假时间（时）" width="160" field="shijiqingjiashichang"></vxe-column>
                <vxe-column title="实际请假天数" width="120" field="shijiqingjiatianshu"></vxe-column>
                <vxe-column
                  min-width="80"
                  align="center"
                  field="operate"
                  title="操作"
                  fixed="right"
                >
                  <template #default="{ row }">
                    <el-button plain type="success" size="mini" @click="detail(row)"
                    >查看</el-button>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </template>
        </vxe-column>
        <vxe-column type="seq" width="58" align="center" />
        <vxe-column
          min-width="180"
          header-align="center"
          field="jiabanleixing"
          title="加班类型"
        ></vxe-column>
        <vxe-column width="190" align="center" title="开始时间" field="kaishiriqi" />
        <vxe-column width="190" align="center" title="结束时间" field="jieshushijian" />
        <vxe-column min-width="140" align="center" title="原因说明" field="yuanyinshuoming" />
<!--        <vxe-column-->
<!--          width="80"-->
<!--          align="center"-->
<!--          field="status"-->
<!--          title="当前状态"-->
<!--          :formatter="({ cellValue }) => myStatus.get(cellValue)"-->
<!--          :export-method="-->
<!--                ({ row, column, options }) => myStatus.get(row['status'])-->
<!--              "-->
<!--        >-->
<!--          <template #default="{ row }">-->
<!--            <el-tag-->
<!--              size="mini"-->
<!--              :type="statusColor.get(row.status)"-->
<!--              effect="dark"-->
<!--            >{{ myStatus.get(row.status) }}</el-tag-->
<!--            >-->
<!--          </template>-->
<!--        </vxe-column>-->
        <vxe-column
          width="200"
          align="center"
          field="created_at"
          title="发起日期"
          :formatter="
                ({ cellValue }) =>
                  $moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
              "
          :export-method="
                ({ row, column, options }) =>
                  $moment(row['created_at']).format('YYYY-MM-DD HH:mm:ss')
              "
        ></vxe-column>
        <vxe-column
          min-width="80"
          align="center"
          field="operate"
          title="操作"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button plain type="success" size="mini" @click="detail(row)"
            >查看</el-button>
          </template>
        </vxe-column>
      </vxe-table>

      <el-pagination
        style="margin-top: 10px"
        @size-change="
              (e) => {
                select.page_size = e;
                select.page = 1;
                getList();
              }
            "
        @current-change="
              (e) => {
                select.page = e;
                getList();
              }
            "
        :current-page.sync="select.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size.sync="select.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </card-container>
  </div>
</template>

<script>
import { getOvertimeHoliday } from "@/api/flow"
export default {
  data() {
    return {
      myStatus: new Map([
        [-1, "已退回"],
        [0, "办理中"],
        [1, "已完成"],
      ]),
      statusColor: new Map([
        [-1, "warning"],
        [0, ""],
        [1, "success"],
      ]),
      loading: false,
      tableData: [],
      select: {
        page: 1,
        page_size: 10,
        start_date: this.$moment().subtract(1, 'months').format('YYYY-MM-DD'),
        end_date: this.$moment().add(1, 'months').format('YYYY-MM-DD')
      },
      total: 0,
    }
  },
  methods: {
    toggleExpand (row) {
      const $table = this.$refs.table
      if ($table) {
        $table.toggleRowExpand(row)
      }
    },

    detail(row) {
      this.$router.push(
        `/flow/detail?module_id=${row.custom_model_id||68}&flow_id=${row.belongs_id}`
      );
    },
    async getList() {
      this.loading = true;
      try {
        const res = await getOvertimeHoliday(this.select, false);
        console.log(res);
        this.tableData = res?.flows?.data || [];
        this.total = res?.flows?.total ?? 0;
        this.loading = false;
      } catch (err) {
        console.error(err);
        this.loading = false;
      }
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["table"] && this.$refs["toolbar"]) {
        this.$refs["table"].connect(this.$refs["toolbar"]);
      }
    });
  },
}
</script>

<style scoped lang="scss">
</style>