spfm-market-front/src/pages/main/performance/reply.vue

<template>
    <div>
        <div class="simple-container">
            <simple-form
                :form="table_form"
                @search="handleSearch"
            ></simple-form>
            <simple-table
                :list="table_list"
                :config="table_config"
                :loading="table_loading"
                :handle-row="table_handle_row"
            ></simple-table>
            <simple-pagination
                :page="page"
                :total="total"
                @change="handleChange"
            ></simple-pagination>
        </div>
    </div>
</template>

<script>
import simpleForm from "./components/form.vue";
import simpleTable from "./components/table.vue";
import simplePagination from "./components/pagination.vue";
export default {
    components: {
        simpleTable,
        simpleForm,
        simplePagination,
    },
    data() {
        return {
            page: 1,
            rows: 10,
            total: 0,
            table_loading: false,
            table_search: {},
            table_form: [
                {
                    label: "统计月份",
                    props: "date",
                    type: "month",
                },
                {
                    label: "绩效类型",
                    props: "performance_type",
                    type: "select",
                    dictionary: [
                        {
                            label: "部门绩效",
                            value: "部门绩效",
                        },
                        {
                            label: "员工绩效",
                            value: "员工绩效",
                        },
                    ],
                },
                {
                    label: "绩效分类",
                    props: "performance_class",
                    type: "select",
                    dictionary: [
                        {
                            label: "GS",
                            value: "GS",
                        },
                        {
                            label: "KPI",
                            value: "KPI",
                        },
                    ],
                },
            ],
            table_list: [],
            table_handle_row: [],
            table_config: [
                {
                    label: "科室名称",
                    props: "department_name",
                },
                {
                    label: "科室经理",
                    props: "department_manager",
                },
                {
                    label: "代办接收数",
                    props: "received_umber",
                },
                {
                    label: "完成回复率",
                    props: "response_rate",
                },
                {
                    label: "超期率",
                    props: "overdue_rate",
                },
                {
                    label: "累计超期时间",
                    props: "cumulative_overtime",
                },
            ],
        };
    },
    methods: {
        async handleInit() {
            this.table_loading = true;
            const data = [];
            let index = 0;
            while (index < 10) {
                data.push({
                    department_name: `科室${index}`,
                    department_manager: `经理${index}`,
                    received_umber: `${index}`,
                    response_rate: `${index + 1}0`,
                    overdue_rate: `50%`,
                    cumulative_overtime: `3`,
                });
                index = index + 1;
            }
            this.total = index;
            this.table_list = data;
            this.table_loading = false;
        },
        handleSearch({ template_name }) {
            this.table_search = { template_name };
            this.handleReset();
            this.handleInit();
        },
        handleChange(page) {
            this.page = page;
            this.handleInit();
        },
        handleReset() {
            this.page = 1;
        },
    },
    mounted() {
        this.handleInit();
    },
};
</script>

<style></style>