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"
            clearable
            style="width: 260px;"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </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="800"
        :export-config="{}"
        :print-config="{}"
        :column-config="{resizable: true}"
        :scroll-y="{enabled: true, gt: 100}"
        :data="tableData"
      >
        <vxe-column type="seq" width="58" align="center" />
        <vxe-column
          min-width="180"
          header-align="center"
          field="title"
          title="工作名称"
        ></vxe-column>
        <vxe-column
          align="center"
          width="140"
          field="current_node.name"
          title="当前节点"
        ></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
          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
          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>
    </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: 9999,
        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: {
    detail(row) {
      this.$router.push(
        `/flow/detail?module_id=${row.custom_model_id}&flow_id=${row.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>