添加回复统计页面

src/pages/main/performance/reply.vue

@@ -1,9 +1,146 @@
 <template>
-    <div>Reply</div>
+    <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>
-export default {};
+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>