table组件调整

src/pages/main/performance/analysis.vue

@@ -0,0 +1,123 @@
+<!--
+ * @Author       : yuanrunwei
+ * @Date         : 2021-12-03 15:18:11
+ * @LastEditors  : yuanrunwei
+ * @LastEditTime : 2021-12-03 18:19:38
+ * @FilePath     : \spfm-market-front\src\pages\main\performance\analysis.vue
+-->
+<template>
+    <div>
+        <simple-table
+            :list="table_list"
+            :config="table_config"
+            :loading="table_loading"
+            @delete="handleDelete"
+            @check="handleCheck"
+            @edit="handleEdit"
+        ></simple-table>
+    </div>
+</template>
+
+<script>
+import simpleTable from "./components/table.vue";
+export default {
+    components: {
+        simpleTable,
+    },
+    data() {
+        return {
+            table_list: [
+                {
+                    index: 1,
+                    subject: "政企能力攻坚工程",
+                    origin: "八大工程",
+                    content:
+                        "1、推进项目支撑能力升级，优化智慧中台运营能<br/>2、推进风险防控质量升级，打造风险防控体系<br/>3、推进集团价值能力提升，打造业务运营监控体系<br/>",
+                    mark: "1、推进项目支撑能力升级：<br/>1.1、4月完成资金管理、响应交付功能上线；<br/>1.2、6月完成政企沙盘、行业库、标杆项目库功能上线；<br/>1.3、12月完成商机管理、角色管理、欠费管理、ESOP迁移、六项重点产品甩单支撑能力建设、ICT项目支撑能力升级。",
+                    score: "1",
+                    leader: "邱钰",
+                },
+            ],
+            table_loading: false,
+            table_config: [
+                {
+                    label: "序号",
+                    props: "index",
+                    width: 50,
+                },
+                {
+                    label: "重点工作",
+                    props: "subject",
+                },
+                {
+                    label: "来源",
+                    props: "origin",
+                },
+                {
+                    label: "主要内容",
+                    props: "content",
+                    width: 300,
+                    type: "edit",
+                    align: "left",
+                },
+                {
+                    label: "完成标志及计分方法（需体现出完成时间）",
+                    props: "mark",
+                    width: 500,
+                    type: "edit",
+                    align: "left",
+                },
+                {
+                    label: "分值",
+                    props: "score",
+                },
+                {
+                    label: "负责人",
+                    props: "leader",
+                },
+                {
+                    label: "本月绩效自评",
+                    props: "",
+                    width: 300,
+                    children: [
+                        {
+                            label: "本月工作内容",
+                            props: "",
+                        },
+                        {
+                            label: "本月完成情况",
+                            props: "",
+                        },
+                        {
+                            label: "本月完成情况自评",
+                            props: "",
+                        },
+                    ],
+                },
+                {
+                    label: "下月计划",
+                    props: "",
+                    children: [
+                        {
+                            label: "工作内容",
+                            props: "",
+                        },
+                        {
+                            label: "下月工作内容计分方法",
+                            props: "",
+                        },
+                    ],
+                },
+            ],
+        };
+    },
+    methods: {
+        handleInit() {},
+        handleEdit() {},
+        handleCheck() {},
+        handleDelete() {},
+    },
+};
+</script>
+
+<style></style>

src/pages/main/performance/components/table.vue

@@ -2,28 +2,53 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-11-01 18:02:58
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-03 16:30:48
+ * @LastEditTime : 2021-12-03 18:26:56
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
 -->
 <template>
-    <el-table class="simple-table" :data="list" v-loading="loading">
+    <el-table class="simple-table" :data="computed_list" v-loading="loading">
         <el-table-column
-            v-for="({ props, label, width, children }, index) in config"
+            v-for="(
+                { props, label, type, width, align, children }, index
+            ) in config"
             :key="index"
             :prop="props"
             :width="width"
             :label="label"
-            align="center"
+            :align="align || 'center'"
         >
+            <template #default="scope">
+                <div v-if="type === 'edit'">
+                    <el-input
+                        v-if="scope.row[`${props}_${type}`]"
+                        v-model="scope.row[props]"
+                        autosize
+                        type="textarea"
+                    />
+                    <div v-else v-html="scope.row[props]"></div>
+                    <el-button
+                        size="mini"
+                        class="margin-top-10"
+                        @click="handleEdit({ scope, type, props })"
+                    >
+                        {{ !scope.row[`${props}_${type}`] ? "编辑" : "完成" }}
+                    </el-button>
+                </div>
+                <div v-else>{{ scope.row[props] }}</div>
+            </template>
             <template v-if="children">
                 <el-table-column
-                    v-for="({ props, label, width }, index) in children"
+                    v-for="({ props, label, width, align }, index) in children"
                     :key="index"
                     :prop="props"
                     :width="width"
                     :label="label"
-                    align="center"
-                />
+                    :align="align || 'center'"
+                >
+                    <template #default="scope">
+                        <div>{{ scope.row[props] }}</div>
+                    </template>
+                </el-table-column>
             </template>
         </el-table-column>
         <el-table-column
@@ -64,10 +89,28 @@ export default {
             default: () => [],
         },
     },
+    computed: {
+        computed_list() {
+            const object = {};
+            this.config
+                .filter(({ type }) => type === "edit")
+                .forEach(({ props, type }) => {
+                    object[`${props}_${type}`] = false;
+                });
+            return this.list.map((element) => ({
+                ...element,
+                ...object,
+            }));
+        },
+    },
     methods: {
         handleClick(props, row) {
             this.$emit(props, row);
         },
+        handleEdit({ scope, type, props }) {
+            scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
+            this.$emit(props, scope.row);
+        },
     },
 };
 </script>

src/pages/main/performance/index.vue

@@ -1,132 +1,73 @@
-<!--
- * @Author       : yuanrunwei
- * @Date         : 2021-12-03 15:18:11
- * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-03 16:30:37
- * @FilePath     : \spfm-market-front\src\pages\main\performance\index.vue
--->
 <template>
-    <div>
-        <simple-table
-            :list="table_list"
-            :config="table_config"
-            :loading="table_loading"
-            @delete="handleDelete"
-            @check="handleCheck"
-            @edit="handleEdit"
-        ></simple-table>
-        <simple-pagination
-            :page="page"
-            :total="total"
-            @change="handleChange"
-        ></simple-pagination>
+    <div class="container flex-justify-start">
+        <div>
+            <el-tabs tab-position="left" v-model="name">
+                <el-tab-pane
+                    v-for="({ label, name }, index) in routes"
+                    :key="index"
+                    :name="name"
+                    :label="label"
+                ></el-tab-pane>
+            </el-tabs>
+        </div>
+        <div class="container-viewport flex-1 padding-left-20">
+            <div class="font-size-30 padding-bottom-20">
+                {{ handleLabel(name) }}
+            </div>
+            <div :is="`${name}`"></div>
+        </div>
     </div>
 </template>
-
 <script>
-import simpleTable from "./components/table.vue";
-import simplePagination from "./components/pagination.vue";
+import department from "./department.vue";
+import mould from "./mould.vue";
+import issue from "./issue.vue";
+import reply from "./reply.vue";
 export default {
     components: {
-        simpleTable,
-        simplePagination,
+        department,
+        mould,
+        issue,
+        reply,
     },
     data() {
         return {
-            page: 1,
-            total: 0,
-            table_list: [],
-            table_loading: false,
-            table_handle_row: [
+            name: "department",
+            routes: [
                 {
-                    label: "查看",
-                    props: "check",
+                    label: "部门绩效",
+                    name: "department",
                 },
                 {
-                    label: "修改",
-                    props: "edit",
+                    label: "模板管理",
+                    name: "mould",
                 },
                 {
-                    label: "删除",
-                    props: "delete",
-                },
-            ],
-            table_config: [
-                {
-                    label: "序号",
-                    props: "preCata1",
-                },
-                {
-                    label: "重点工作",
-                    props: "preCata2",
-                },
-                {
-                    label: "来源",
-                    props: "preCata3",
-                },
-                {
-                    label: "主要内容",
-                    props: "preCata4",
-                },
-                {
-                    label: "完成标志及计分方法（需体现出完成时间）",
-                    props: "preCata5",
-                },
-                {
-                    label: "分支",
-                    props: "preCata6",
-                },
-                {
-                    label: "负责人",
-                    props: "preCata7",
-                },
-                {
-                    label: "本月绩效自评",
-                    props: "dealType",
-                    width: 300,
-                    children: [
-                        {
-                            label: "本月工作内容",
-                            props: "preCata7",
-                        },
-                        {
-                            label: "本月完成情况",
-                            props: "preCata7",
-                        },
-                        {
-                            label: "本月完成情况自评",
-                            props: "preCata7",
-                        },
-                    ],
+                    label: "下发管理",
+                    name: "issue",
                 },
                 {
-                    label: "下月计划",
-                    props: "wordCode",
-                    children: [
-                        {
-                            label: "工作内容",
-                            props: "preCata7",
-                        },
-                        {
-                            label: "下月工作内容计分方法",
-                            props: "preCata7",
-                        },
-                    ],
+                    label: "回复统计",
+                    name: "reply",
                 },
             ],
         };
     },
     methods: {
-        handleInit() {},
-        handleChange(page) {
-            this.page = page;
-            this.handleInit();
+        handleLabel(name) {
+            const array = this.routes.filter(
+                (element) => element.name === name
+            );
+            return array[0].label;
         },
-        handleEdit() {},
-        handleCheck() {},
-        handleDelete() {},
     },
 };
 </script>
-
-<style></style>
+<style lang="scss" scoped>
+.container {
+    padding: 20px;
+    &-viewport {
+      overflow: auto;
+    }
+}
+</style>

src/pages/main/performance/issue.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Issue</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/pages/main/performance/mould.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <analysis />
+    </div>
+</template>
+
+<script>
+import analysis from "./analysis.vue";
+export default {
+    components: {
+        analysis,
+    },
+    data() {
+        return {};
+    },
+};
+</script>
+
+<style></style>

src/pages/main/performance/reply.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>Reply</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>