修改编辑交互

src/assets/simple.scss

@@ -29,6 +29,9 @@
             &-col {
                 padding-bottom: 20px;
             }
+            &-textarea__inner {
+                min-height: 100px !important;
+            }
         }
     }
     &-title {
@@ -43,6 +46,9 @@
         &-click {
             color: #409eff;
         }
+        &-break {
+            white-space: break-spaces;
+        }
     }
     &-pagination {
         padding-top: 20px;

src/pages/main/performance/analysis.vue

@@ -2,7 +2,7 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-12-03 15:18:11
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-06 17:12:48
+ * @LastEditTime : 2021-12-06 20:12:34
  * @FilePath     : \spfm-market-front\src\pages\main\performance\analysis.vue
 -->
 <template>
@@ -12,6 +12,7 @@
             :config="table_config"
             :loading="table_loading"
             @delete="handleDelete"
+            @modify="handleModify"
             @check="handleCheck"
             @edit="handleEdit"
         ></simple-table>
@@ -21,6 +22,12 @@
 <script>
 import simpleTable from "./components/table.vue";
 export default {
+    props: {
+        edit: {
+            type: Boolean,
+            default: false,
+        },
+    },
     components: {
         simpleTable,
     },
@@ -41,6 +48,7 @@ export default {
                 {
                     label: "来源",
                     props: "origin",
+                    width: 100,
                 },
                 {
                     label: "主要内容",
@@ -58,6 +66,7 @@ export default {
                 },
                 {
                     label: "分值",
+                    width: 50,
                     props: "score",
                 },
                 {
@@ -66,49 +75,76 @@ export default {
                 },
                 {
                     label: "本月绩效自评",
-                    props: "",
+                    props: "personal_month",
                     width: 300,
                     children: [
                         {
                             label: "本月工作内容",
-                            props: "",
+                            props: "personal_month_content",
                         },
                         {
                             label: "本月完成情况",
-                            props: "",
+                            props: "personal_month_status",
                         },
                         {
                             label: "本月完成情况自评",
-                            props: "",
+                            props: "personal_month_self",
                         },
                     ],
                 },
                 {
                     label: "下月计划",
-                    props: "",
+                    props: "next_month",
                     children: [
                         {
                             label: "工作内容",
-                            props: "",
+                            props: "next_month_content",
                         },
                         {
                             label: "下月工作内容计分方法",
-                            props: "",
+                            props: "next_month_method",
                         },
                     ],
                 },
             ],
         };
     },
+    watch: {
+        edit() {
+            this.handleInit();
+        },
+    },
     methods: {
         handleInit() {
             this.table_list = JSON.parse(
                 sessionStorage.global_data
             )[0].template_excel;
+            this.table_config.forEach((element) => {
+                if (["personal_month", "next_month"].includes(element.props)) {
+                    element.children.forEach((element) => {
+                        element.type = this.edit ? "edit" : "";
+                    });
+                }
+            });
         },
         handleEdit() {},
         handleCheck() {},
         handleDelete() {},
+        handleModify(params) {
+            const object = JSON.parse(sessionStorage.global_data)[0];
+            sessionStorage.setItem(
+                "global_data",
+                JSON.stringify([
+                    {
+                        ...object,
+                        template_excel: params,
+                    },
+                ])
+            );
+            // this.table_list = JSON.parse(
+            //     sessionStorage.global_data
+            // )[0].template_excel;
+        },
     },
     mounted() {
         this.handleInit();

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

@@ -2,7 +2,7 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-11-01 18:02:58
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-06 17:32:53
+ * @LastEditTime : 2021-12-06 19:51:14
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
 -->
 <template>
@@ -20,25 +20,18 @@
             <template #default="scope">
                 <div v-if="type === 'edit'">
                     <el-input
-                        v-if="scope.row[`${props}_${type}`]"
+                        v-if="scope.row[`edit`]"
                         v-model="scope.row[props]"
                         autosize
                         type="textarea"
+                        @change="handleModify"
                     />
-
-                    <el-button
-                        size="mini"
-                        class="margin-top-10"
-                        @click="handleEdit({ scope, type, props })"
-                    >
-                        {{ !scope.row[`${props}_${type}`] ? "编辑" : "完成" }}
-                    </el-button>
                 </div>
                 <div v-else-if="type === 'textarea'">
-                    <pre>{{ scope.row[props] }}</pre>
+                    <pre class="simple-table-break">{{ scope.row[props] }}</pre>
                 </div>
                 <div v-else-if="type === 'date'">
-                    <div>{{  $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
+                    <div>{{ $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
                 </div>
                 <div v-else-if="type === 'click'">
                     <div
@@ -52,7 +45,9 @@
             </template>
             <template v-if="children">
                 <el-table-column
-                    v-for="({ props, label, width, align }, index) in children"
+                    v-for="(
+                        { props, label, width, align, type }, index
+                    ) in children"
                     :key="index"
                     :prop="props"
                     :width="width"
@@ -60,23 +55,15 @@
                     :align="align || 'center'"
                 >
                     <template #default="scope">
-                        <div>{{ scope.row[props] }}</div>
-                    </template>
-                    <template v-if="children">
-                        <el-table-column
-                            v-for="(
-                                { props, label, width, align }, index
-                            ) in children"
-                            :key="index"
-                            :prop="props"
-                            :width="width"
-                            :label="label"
-                            :align="align || 'center'"
-                        >
-                            <template #default="scope">
-                                <div>{{ scope.row[props] }}</div>
-                            </template>
-                        </el-table-column>
+                        <div v-if="type === 'edit'">
+                            <el-input
+                                v-model="scope.row[props]"
+                                @change="handleModify"
+                                autosize
+                                type="textarea"
+                            />
+                        </div>
+                        <div v-else>{{ scope.row[props] }}</div>
                     </template>
                 </el-table-column>
             </template>
@@ -142,15 +129,8 @@ export 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,
             }));
         },
     },
@@ -170,9 +150,8 @@ export default {
         handleClick(props, row) {
             this.$emit(props, row);
         },
-        handleEdit({ scope, type, props }) {
-            scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
-            this.$emit(props, scope.row);
+        handleModify() {
+            this.$emit("modify", this.computed_list);
         },
     },
 };

src/pages/main/performance/department.vue

@@ -44,6 +44,12 @@
                             >
                             <el-button
                                 type="primary"
+                                v-if="edit_form.department_status === '待处理'"
+                                @click="handleSubmit"
+                                >提交</el-button
+                            >
+                            <el-button
+                                type="primary"
                                 v-if="edit_form.department_status === '待审批'"
                                 @click="handleApprove"
                                 >审批</el-button
@@ -63,7 +69,11 @@
                     </div>
                 </div>
                 <!-- 主体部分 -->
-                <analysis />
+                <analysis
+                    :edit="
+                        edit_form.department_status === '待处理' && edit_visible
+                    "
+                />
             </template>
             <template v-slot:footer><div></div></template>
         </simple-dialog>
@@ -416,6 +426,9 @@ export default {
             this.handleCancel("visible");
             this.handleCancel("approve_visible");
         },
+        handleSubmit() {
+            this.$message.success("提交成功");
+        },
     },
 };
 </script>