Browse Source

添加对枚举类型和布尔类型数据的格式化处理

zhangyu 4 years ago
parent
commit
871e2fef48
1 changed files with 46 additions and 16 deletions
  1. 46 16
      src/components/public/adm-multi-table.vue

+ 46 - 16
src/components/public/adm-multi-table.vue

@@ -19,7 +19,7 @@
                 <el-table-column
                     v-for="(child, index) in item.data"
                     :key="index"
-                    :label="child.unit ? child.name + ' (' + child.unit + ')': child.name"
+                    :label="child.unit ? child.name + ' (' + child.unit + ')' : child.name"
                     :prop="child.path"
                     :formatter="formatContent"
                     align="center"
@@ -32,8 +32,6 @@
 </template>
 
 <script lang="ts">
-
-
 import { ElTable } from "element-ui/types/table";
 import { Component, Emit, Prop, Ref, Vue, Watch } from "vue-property-decorator";
 @Component({
@@ -44,39 +42,71 @@ export default class extends Vue {
     // 表格数据
     @Prop({ default: Array }) tableData?: [];
     // 表头数据
-    @Prop({ default: Object }) headersStage?: {};
+    @Prop({ default: Object }) headersStage?: any;
     // 当前页头文字
     @Prop({ default: "" }) currentHeader?: string;
 
-    @Emit('handleCurrentEdit')
+    @Emit("handleCurrentEdit")
     handleEdit(index, row) {
-        return row
+        return row;
     }
 
-    private formatContent(row, column, cellValue, index) {
-        return cellValue
-        // console.log(this.headersStage);
-        // debugger
+    get haderInfoMap() {
+        if (this.headersStage?.dictStages?.data?.length) {
+            const haderInfoMap: any = {};
+            this.headersStage.dictStages.data.forEach((item: any) => {
+                haderInfoMap[item.path] = item;
+            });
+            console.log(haderInfoMap);
+            return haderInfoMap;
+        } else {
+            return {};
+        }
     }
 
-
-    created() {
+    /**
+     * 表格特殊内容格式化处理
+     */
+    private formatContent(row: any, column: any, cellValue: any) {
+        const info = this.haderInfoMap[column.property];
+        if (info && cellValue) { //有值且获取到表头信息
+            const dataSource = info?.dataSource ? info.dataSource : [];
+            if (info.dataType === "ENUM" || info.dataType === "BOOLEAN") { //内容为单选枚举和布尔类型 
+                const text = dataSource.find((item: any) => {
+                    return item.code === cellValue;
+                })?.name;
+                return text;
+            } else if (info.dataType === "MENUM" && cellValue instanceof Array && cellValue.length) { //内容为多选枚举且值为数组
+                const textList = dataSource.map((item: any) => {
+                    if (
+                        cellValue.find((value: string) => {
+                            return item?.code === value;
+                        })
+                    ) {
+                        return item?.name;
+                    }
+                }).filter((item: any) => item).join(",");
+                return textList;
+            } else {
+                return cellValue;
+            }
+        }
+        return cellValue;
     }
 
     @Watch("headersStage", { immediate: true, deep: true })
     onCurrentHeaderChange() {
         this.$nextTick(() => {
-            if (this.tableDom?.doLayout)
-                this.tableDom.doLayout();
+            if (this.tableDom?.doLayout) this.tableDom.doLayout();
         });
     }
 
     @Watch("tableData", { immediate: true, deep: true })
     handleTableData(o, n) {
         this.$nextTick(() => {
-            console.log(o, n)
+            console.log(o, n);
             // this.tableData = this.tableData
-        })
+        });
     }
 }
 </script>