cz-hjjc-oa/src/views/flow/list.vue

<template>
  <div style="padding: 20px">
    <el-card shadow="always">
      <template #header>
        <p>{{ title }}</p>
        <vxe-toolbar ref="toolbar" custom print>
          <template #buttons>
            <div class="selects">
              <el-select
                style="width: 180px"
                filterable
                clearable
                size="small"
                v-model="select.custom_model_id"
              >
                <el-option
                  v-for="item in models"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
              <el-select
                style="width: 100px"
                size="small"
                v-model="select.date_type"
              >
                <el-option
                  v-for="item in dataTypes"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
              <el-date-picker
                style="width: 240px"
                value-format="yyyy-MM-dd"
                size="small"
                :value="select.date_range ? select.date_range.split('~') : ''"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @input="
                  ([start, end]) => (select.date_range = `${start}~${end}`)
                "
              >
              </el-date-picker>
              <el-input
                clearable
                v-model="select.keyword"
                style="width: 160px"
                placeholder="请输入关键词"
                size="small"
              ></el-input>
              <el-button
                icon="el-icon-search"
                type="primary"
                size="small"
                @click="getList"
                >搜索</el-button
              >
            </div>
          </template>
        </vxe-toolbar>
      </template>

      <template #default>
        <div>
          <vxe-table
            ref="table"
            stripe
            style="margin-top: 10px"
            :loading="loading"
            keep-source
            show-overflow
            :column-config="{ resizable: true }"
            :print-config="{}"
            :custom-config="{ mode: 'popup' }"
            :data="list"
          >
            <vxe-column field="title" title="工作名称"></vxe-column>
            <vxe-column width="80" align="center" field="id" title="流水号"></vxe-column>
            <vxe-column field="custom_model.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')"></vxe-column>
            <vxe-column width="100" align="center" field="status" title="当前状态"></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="select.page"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="select.page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import { flowList } from "@/api/flow";
import moment from "moment/moment";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "一年前",
            onClick(picker) {
              picker.$emit("pick", [
                moment().subtract(1, "years").toDate(),
                new Date(),
              ]);
            },
          },
          {
            text: "一月前",
            onClick(picker) {
              picker.$emit("pick", [
                moment().subtract(1, "months").toDate(),
                new Date(),
              ]);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              picker.$emit("pick", [
                moment().subtract(1, "weeks").toDate(),
                new Date(),
              ]);
            },
          },
          {
            text: "一周后",
            onClick(picker) {
              picker.$emit("pick", [
                new Date(),
                moment().add(1, "weeks").toDate(),
              ]);
            },
          },
          {
            text: "一月后",
            onClick(picker) {
              picker.$emit("pick", [
                new Date(),
                moment().add(1, "months").toDate(),
              ]);
            },
          },
          {
            text: "一年后",
            onClick(picker) {
              picker.$emit("pick", [
                new Date(),
                moment().add(1, "years").toDate(),
              ]);
            },
          },
        ],
      },
      select: {
        page: 1,
        page_size: 20,
        sort_name: "",
        sort_type: "",
        keyword: "",
        department_id: "",
        is_fav: "",
        custom_model_id: "",
        date_range: "",
        date_type: "create_date",
      },
      loading: false,
      list: [],
      total: 0,

      title: "",
      models: [],
      dataTypes: [
        {
          value: "create_date",
          label: "录入时间",
        },
        {
          value: "happened_date",
          label: "经办时间",
        },
      ],
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const res = await flowList(this.$route.meta.type, this.select, false);
        console.log(res);
        this.list = res?.data?.data || [];
        this.total = res?.data?.total ?? 0;
        this.models = res.customModels;
        this.title = res.pageTitle;
        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">
.selects > * + * {
  margin: 2px 0 2px 6px;
}
</style>