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

<template>
  <div>
    <card-container>
      <vxe-toolbar print custom export>
        <template #buttons>
          <el-button icon="el-icon-search" type="primary" plain size="small" @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 { flowList } 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,
        sort_name: "",
        sort_type: "",
        keyword: "",
        department_id: "",
        is_fav: "",
        custom_model_id: "69",
        date_range: "",
        date_type: "create_date",
      },
    }
  },
  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 flowList('my', this.select, false);
        console.log(res);
        this.tableData = res?.data?.data || [];
        this.total = res?.data?.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>