qgb-process 0.2.3 → 0.2.7

package/src/formBuilder/components/app-main/components/components/tableList.vue

@@ -1,561 +1,561 @@
-<template>
-  <el-table
-    :data="tableData"
-    style="width: 100%;border:1px solid #ebeef5;"
-    :header-cell-style="$TableCell.setHeaderCellStyle"
-    :cell-style="$TableCell.setCellStyle"
-    border
-    @selection-change="handleTableSelect"
-    v-bind="$attrs"
-  >
-    <template slot="empty">
-      <base-empty-data />
-    </template>
-    <el-table-column
-      v-if="checkBox"
-      type="selection"
-      width="55"
-      :selectable="selectable"
-      align="center"
-    >
-    </el-table-column>
-    <el-table-column
-      label="序号"
-      align="center"
-      type="index"
-      width="50"
-      v-if="showIndex"
-    >
-    </el-table-column>
-    <template v-if="tableConfig.length > 0">
-      <template v-for='(item,index) in tableConfig'>
-        <template v-if="item.type=='conunt'">
-          <el-table-column
-            show-overflow-tooltip
-            :label="item.label"
-            :prop='item.prop ? item.prop : `content.${item.key}`'
-            :width='item.width'
-            :key="index+'con'"
-            align="center"
-            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
-          >
-
-            　<template slot-scope="scope">
-
-              <!-- <div v-else-if="$route.name=='designListPage'">{{scope.row._id}}</div> -->
-
-              <div
-                v-for="(e,i) in tableCustomArr"
-                v-if="scope.$index == i"
-                :key='i'
-              >
-                <div
-                  v-for="(children,i1) in e"
-                  :key='i1'
-                >
-                  <!-- 这里进行规格属性遍历 -->
-                  <span> {{children.property}}:{{children.value}}</span>
-                </div>
-
-              </div>
-
-            </template>
-          </el-table-column>
-        </template>
-        <template v-else-if="item.type=='postman'">
-          <el-table-column
-            show-overflow-tooltip
-            :label="item.label"
-            :prop='item.prop ? item.prop : `content.${item.key}`'
-            :width='item.width'
-            :key="index+'con'"
-            align="center"
-            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
-          >
-
-            　<template
-              slot-scope="scope"
-            >
-            {{user.realName}}
-            </template>
-          </el-table-column>
-
-        </template>
-          <template v-else-if=" item.type=='handleCode' ">
-          <el-table-column
-            show-overflow-tooltip
-            :label="item.label"
-            :prop='item.prop ? item.prop : `content.${item.key}`'
-            :width='item.width'
-            :key="index+'con'"
-            align="center"
-            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
-          >
-
-            　<template
-              slot-scope="scope"
-            >
-            {{formId}}
-            </template>
-          </el-table-column>
-
-        </template>
-        <template v-else-if="item.type=='datetime'">
-          <el-table-column
-            show-overflow-tooltip
-            :label="item.label"
-            :prop='item.prop ? item.prop : `content.${item.key}`'
-            :width='item.width'
-            :key="index+'con'"
-            align="center"
-            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
-          >
-
-            　<template slot-scope="scope">
-
-              <!-- <div v-else-if="$route.name=='designListPage'">{{scope.row._id}}</div> -->
-
-              <span>
-                {{scope.row[item.key] | formatDate}}
-              </span>
-            </template>
-          </el-table-column>
-        </template>
-
-        <template v-else-if="item.children && item.children.length > 0">
-          <el-table-column
-            :label="item.label"
-            :key="index+'par'"
-          >
-            <el-table-column
-              v-for="(i,ind) in item.children"
-              :label="i.label"
-              :prop='item.prop ? item.prop : `content.${item.key}`'
-              class-name="cell-pre"
-              :width='i.width'
-              :show-overflow-tooltip='true'
-              :key="ind+'sub'"
-              align="center"
-              :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item,i)"
-            ></el-table-column>
-          </el-table-column>
-        </template>
-        <template v-else>
-          <el-table-column
-            show-overflow-tooltip
-            :label="item.label"
-            :prop='item.prop ? item.prop : `content.${item.key}`'
-            :width='item.width'
-            :key="index+'con'"
-            align="center"
-            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
-          >
-
-            　<template slot-scope="scope">
-              <div
-                v-if='item.label=="数据标题" && $route.name=="designListPage"'
-                style="cursor:pointer;color:#409EFF"
-              >
-
-                <span @click="goFormData(scope.row)">{{getTitle(item.key.split(","),scope.$index,scope.row) }}</span>
-
-              </div>
-              <!-- <div v-else-if="$route.name=='designListPage'">{{scope.row._id}}</div> -->
-              <div v-else-if="$route.name=='designListPage'">{{getStr(scope.row._id,item.key,scope.row) || scope.row.content[item.key]}}</div>
-              <div v-else-if="$route.name=='formDataDetail'">{{getStr(scope.row._id,item.prop,scope.row) ||scope.row[item.prop]}}</div>
-
-            </template>
-          </el-table-column>
-        </template>
-
-      </template>
-    </template>
-    <template v-else>
-      <el-table-column
-        label=""
-        prop=""
-        align="center"
-      >无</el-table-column>
-    </template>
-    <el-table-column
-      align="center"
-      label="操作"
-      v-if="buttons && buttons.length > 0"
-      width="120px"
-      fixed="right"
-    >
-      <template slot-scope="scope">
-        <template v-for="(item,index) in buttons">
-          <el-button
-            type="text"
-            @click="$emit(item.event,{'row':scope.row, 'func':item.func})"
-            :key="index+'btn'"
-            style="margin:0px 5px;"
-            :style="item.name=='删除'?'color:':''"
-          >{{item.name}}</el-button>
-        </template>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import moment from "moment";
-import dataTypeList from "@/formBuilder/config/datetime.js";
-import dataTimeRangeTypeList from "@/formBuilder/config/datetimerange.js";
-export default {
-  props: {
-    // 表格数据
-    tableData: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    // 表格头字段及对应字段 {label:'表头显示字段'，prop:'',width: '',children: [{label:'表头显示字段'，prop:''}]}
-    tableConfig: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    // 操作按钮
-    buttons: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    // 是否显示多选框
-    checkBox: {
-      type: Boolean,
-      default: false
-    },
-    // 是否显示序号
-    showIndex: {
-      type: Boolean,
-      default: false
-    },
-    formDesign: {},
-    formId: {
-      type: String
-    },
-    title: {
-      type: String
-    }
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    }
-  },
-  data() {
-    return {
-      tableCustomArr: []
-    };
-  },
-  mounted() {
-    const _this = this;
-    _this.menuId = _this.$route.params.id;
-    // _this.tableCustomArr  = _.cloneDeep(_this.tableData)
-  },
-
-  watch: {
-    tableConfig: {
-      deep: true,
-      immediate: true,
-      handler: function(newVal, oldVal) {
-        const _this = this;
-        _.find(_this.tableData, function(o, i) {
-          const obj = {};
-          for (const key in o) {
-            // if (o.hasOwnProperty.call(o, key)) {
-            if (key.includes("-Str")) {
-              obj[key] = o[key];
-              if (
-                !_.find(_this.tableConfig, function(o) {
-                  return o.type == "conunt";
-                })
-              ) {
-                _this.tableConfig.splice(1, 0, {
-                  label: "规格属性",
-                  prop: "key_conunt",
-                  type: "conunt"
-                });
-                // _this.tableConfig.push({
-                //   label: "规格属性",
-                //   prop: "key_conunt",
-                //   type: "conunt"
-                // });
-              }
-            }
-            // }
-          }
-          _this.$set(_this.tableCustomArr, i, obj);
-        });
-      }
-    }
-  },
-  methods: {
-    goFormData(obj) {
-      const vm = this;
-      vm.$router.push({
-        name: "formDataDetail",
-        params: { id: this.menuId },
-        query: { auditId: obj.content.auditId, title: this.title }
-      });
-    },
-    getStrRes(arr, opt, row, key) {
-      var str = [];
-      var id = row._id;
-      var vm = this;
-      if (Array.isArray(arr)) {
-        for (let i = 0; i < opt.length; i++) {
-          const e = opt[i];
-          for (let i2 = 0; i2 < arr.length; i2++) {
-            const e2 = arr[i2];
-            if (e2 == e.value) {
-              str.push(e.text);
-              str.join(",");
-            }
-          }
-        }
-        return str.join(",");
-      } else if (typeof arr == "number") {
-        for (let i = 0; i < opt.length; i++) {
-          const e = opt[i];
-          const e2 = arr;
-          if (e2 == e.value) {
-            str.push(e.text);
-            str.join(",");
-          }
-        }
-        return str.join(",");
-      } else {
-        return "";
-      }
-    },
-    getStr(id, key, row) {
-      var str = "";
-      var vm = this;
-      vm.tableData.map((e2, i2) => {
-        if (e2._id == id) {
-          vm.tableConfig.map((e, i) => {
-            // if (e.key.includes(",")) {
-            //   e.key.split(",").map((e3, i) => {
-            //     if (e3 == key) {
-
-            //       var dataArr = e2.content[key];
-            //       var dataOptions = e.options;
-
-            //       if (
-            //         e.type == "checkbox" ||
-            //         e.type == "radio" ||
-            //         e.type == "select"
-            //       ) {
-            //         str = vm.getStrRes(dataArr, dataOptions, row, key);
-            //       } else {
-            //         str = dataArr;
-            //       }
-            //     }
-            //   });
-            // }
-            if (key == e.key) {
-              const dataArr = e2.content[key];
-              const dataOptions = e.options;
-              if (!dataArr) return "无";
-              if (
-                e.type == "checkbox" ||
-                e.type == "radio" ||
-                e.type == "select"
-              ) {
-                str = vm.getStrRes(dataArr, dataOptions, row, key);
-              } else if (e.type == "datetime") {
-                var typeArr = dataTypeList.attrs.type.options.filter(function(
-                  item
-                ) {
-                  return item.value == vm.formDesign[e.key].attrs.type;
-                });
-                str = moment(dataArr * 1000).format(typeArr[0].format);
-              } else if (e.type == "datetimerange") {
-                var typeList = dataTimeRangeTypeList.attrs.type.options.filter(
-                  function(item) {
-                    return item.value == vm.formDesign[e.key].attrs.type;
-                  }
-                );
-                str =
-                  moment(dataArr[0] * 1000).format(typeList[0].format) +
-                  " 至 " +
-                  moment(dataArr[1] * 1000).format(typeList[0].format);
-              } else {
-                str = dataArr;
-              }
-            } else if (!key && !e.key) {
-              for (const key in row) {
-                // if (Object.hasOwnProperty.call(row, key)) {
-                const e = row[key];
-                // }
-              }
-            } else {
-              // 详情子表级联
-              if (e.prop == key) {
-                let title = "";
-                if (e.type == "cascader") {
-                  const arr = this.getOptionArr(e.options);
-                  row[e.prop].map(one => {
-                    arr.map(item => {
-                      if (item.value == one) {
-                        title = title + item.label + "/";
-                      }
-                    });
-                  });
-                  title = title.substring(0, title.length - 1);
-                  str = title;
-                }
-              }
-            }
-          });
-        }
-      });
-
-      return str;
-    },
-    // 扁平化数组
-    getOptionArr(arr) {
-      let result = [];
-      arr.map(item => {
-        var res = JSON.parse(JSON.stringify(item));
-        delete res["children"];
-        result.push(res);
-        if (item.children instanceof Array && item.children.length > 0) {
-          result = result.concat(this.getOptionArr(item.children));
-        }
-      });
-      return result;
-    },
-    getTitle(arr, index, row) {
-      var str = "";
-      var vm = this;
-
-      arr.forEach((e, i) => {
-        if (vm.tableData[index].content[e]) {
-          //   str += vm.tableData[index].content[e];
-          str += vm.getStr(vm.tableData[index]._id, e, row);
-        }
-      });
-      return str;
-    },
-    handleTableSelect(val) {
-      this.$emit("handleTableSelect", val);
-    },
-    formatter(row, column, cellValue, index, item, subItem) {
-      if (item.children) {
-        const arr = [];
-        if (Array.isArray(cellValue)) {
-          cellValue.forEach(cell => {
-            if (subItem.options && typeof subItem.options == "string") {
-              arr.push(cell[subItem.prop + "Str"]);
-            } else {
-              const data = this.setCellValue(
-                row,
-                column,
-                cell[subItem.prop],
-                index,
-                subItem
-              );
-              arr.push(data);
-            }
-          });
-        }
-        return arr.join("\r\n");
-      } else {
-        if (!cellValue) {
-          return "";
-        } else {
-          return this.setCellValue(row, column, cellValue, index, item);
-        }
-      }
-    },
-    setCellValue(row, column, cellValue, index, item) {
-      let str = "";
-
-      if (item.options && typeof item.options == "string") {
-        return cellValue;
-      }
-      switch (item.type) {
-        case "input":
-          str = cellValue;
-          break;
-        case "time":
-          str = cellValue;
-          break;
-        case "textarea":
-          str = cellValue;
-          break;
-        case "date":
-          str = moment(cellValue * 1000).format("YYYY-MM-DD");
-          break;
-        case "daterange":
-          str = cellValue
-            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
-            .join(" -- ");
-          break;
-        case "datetimerange":
-          str = cellValue
-            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
-            .join(" -- ");
-          break;
-        case "datetime":
-          str = moment(cellValue * 1000).format("YYYY-MM-DD");
-          break;
-        case "timerange":
-          str = cellValue
-            .map(item => moment(item * 1000).format("HH:mm:ss"))
-            .join(" -- ");
-          break;
-        case "select":
-          const arr = item.options.filter
-            ? item.options.filter(item => item.value == cellValue)
-            : [];
-          str = arr.length > 0 ? arr[0].text : "";
-          break;
-        case "switch":
-          str = cellValue == true ? "是" : cellValue == false ? "否" : "";
-          break;
-        case "number":
-          str = cellValue;
-          break;
-        case "radio":
-          const radioName = item.options.filter
-            ? item.options.filter(item => item.value == cellValue)
-            : [];
-          str = radioName.length > 0 ? radioName[0].text : "";
-          break;
-        case "checkbox":
-          const checkbox = item.options.filter
-            ? item.options
-              .filter(item => cellValue.indexOf(item.value) > -1)
-              .map(i => i.text)
-            : [];
-          str = checkbox.length > 0 ? checkbox.join(",") : "";
-          break;
-        case "text":
-          str = cellValue;
-          break;
-      }
-      return str;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-/deep/.cell-pre .cell {
-  white-space: pre;
-}
-</style>
-<style>
-.el-tooltip__popper {
-  white-space: pre;
-}
-</style>
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%;border:1px solid #ebeef5;"
+    :header-cell-style="$TableCell.setHeaderCellStyle"
+    :cell-style="$TableCell.setCellStyle"
+    border
+    @selection-change="handleTableSelect"
+    v-bind="$attrs"
+  >
+    <template slot="empty">
+      <base-empty-data />
+    </template>
+    <el-table-column
+      v-if="checkBox"
+      type="selection"
+      width="55"
+      :selectable="selectable"
+      align="center"
+    >
+    </el-table-column>
+    <el-table-column
+      label="序号"
+      align="center"
+      type="index"
+      width="50"
+      v-if="showIndex"
+    >
+    </el-table-column>
+    <template v-if="tableConfig.length > 0">
+      <template v-for='(item,index) in tableConfig'>
+        <template v-if="item.type=='conunt'">
+          <el-table-column
+            show-overflow-tooltip
+            :label="item.label"
+            :prop='item.prop ? item.prop : `content.${item.key}`'
+            :width='item.width'
+            :key="index+'con'"
+            align="center"
+            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
+          >
+
+            　<template slot-scope="scope">
+
+              <!-- <div v-else-if="$route.name=='designListPage'">{{scope.row._id}}</div> -->
+
+              <div
+                v-for="(e,i) in tableCustomArr"
+                v-if="scope.$index == i"
+                :key='i'
+              >
+                <div
+                  v-for="(children,i1) in e"
+                  :key='i1'
+                >
+                  <!-- 这里进行规格属性遍历 -->
+                  <span> {{children.property}}:{{children.value}}</span>
+                </div>
+
+              </div>
+
+            </template>
+          </el-table-column>
+        </template>
+        <template v-else-if="item.type=='postman'">
+          <el-table-column
+            show-overflow-tooltip
+            :label="item.label"
+            :prop='item.prop ? item.prop : `content.${item.key}`'
+            :width='item.width'
+            :key="index+'con'"
+            align="center"
+            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
+          >
+
+            　<template
+              slot-scope="scope"
+            >
+            {{user.realName}}
+            </template>
+          </el-table-column>
+
+        </template>
+          <template v-else-if=" item.type=='handleCode' ">
+          <el-table-column
+            show-overflow-tooltip
+            :label="item.label"
+            :prop='item.prop ? item.prop : `content.${item.key}`'
+            :width='item.width'
+            :key="index+'con'"
+            align="center"
+            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
+          >
+
+            　<template
+              slot-scope="scope"
+            >
+            {{formId}}
+            </template>
+          </el-table-column>
+
+        </template>
+        <template v-else-if="item.type=='datetime'">
+          <el-table-column
+            show-overflow-tooltip
+            :label="item.label"
+            :prop='item.prop ? item.prop : `content.${item.key}`'
+            :width='item.width'
+            :key="index+'con'"
+            align="center"
+            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
+          >
+
+            　<template slot-scope="scope">
+
+              <!-- <div v-else-if="$route.name=='designListPage'">{{scope.row._id}}</div> -->
+
+              <span>
+                {{scope.row[item.key] | formatDate}}
+              </span>
+            </template>
+          </el-table-column>
+        </template>
+
+        <template v-else-if="item.children && item.children.length > 0">
+          <el-table-column
+            :label="item.label"
+            :key="index+'par'"
+          >
+            <el-table-column
+              v-for="(i,ind) in item.children"
+              :label="i.label"
+              :prop='item.prop ? item.prop : `content.${item.key}`'
+              class-name="cell-pre"
+              :width='i.width'
+              :show-overflow-tooltip='true'
+              :key="ind+'sub'"
+              align="center"
+              :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item,i)"
+            ></el-table-column>
+          </el-table-column>
+        </template>
+        <template v-else>
+          <el-table-column
+            show-overflow-tooltip
+            :label="item.label"
+            :prop='item.prop ? item.prop : `content.${item.key}`'
+            :width='item.width'
+            :key="index+'con'"
+            align="center"
+            :formatter="(row, column, cellValue, indexs)=>formatter(row, column, cellValue, indexs,item)"
+          >
+
+            　<template slot-scope="scope">
+              <div
+                v-if='item.label=="数据标题" && $route.name=="designListPage"'
+                style="cursor:pointer;color:#409EFF"
+              >
+
+                <span @click="goFormData(scope.row)">{{getTitle(item.key.split(","),scope.$index,scope.row) }}</span>
+
+              </div>
+              <!-- <div v-else-if="$route.name=='designListPage'">{{scope.row._id}}</div> -->
+              <div v-else-if="$route.name=='designListPage'">{{getStr(scope.row._id,item.key,scope.row) || scope.row.content[item.key]}}</div>
+              <div v-else-if="$route.name=='formDataDetail'">{{getStr(scope.row._id,item.prop,scope.row) ||scope.row[item.prop]}}</div>
+
+            </template>
+          </el-table-column>
+        </template>
+
+      </template>
+    </template>
+    <template v-else>
+      <el-table-column
+        label=""
+        prop=""
+        align="center"
+      >无</el-table-column>
+    </template>
+    <el-table-column
+      align="center"
+      label="操作"
+      v-if="buttons && buttons.length > 0"
+      width="120px"
+      fixed="right"
+    >
+      <template slot-scope="scope">
+        <template v-for="(item,index) in buttons">
+          <el-button
+            type="text"
+            @click="$emit(item.event,{'row':scope.row, 'func':item.func})"
+            :key="index+'btn'"
+            style="margin:0px 5px;"
+            :style="item.name=='删除'?'color:':''"
+          >{{item.name}}</el-button>
+        </template>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import moment from "moment";
+import dataTypeList from "@/formBuilder/config/datetime.js";
+import dataTimeRangeTypeList from "@/formBuilder/config/datetimerange.js";
+export default {
+  props: {
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    // 表格头字段及对应字段 {label:'表头显示字段'，prop:'',width: '',children: [{label:'表头显示字段'，prop:''}]}
+    tableConfig: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    // 操作按钮
+    buttons: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    // 是否显示多选框
+    checkBox: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示序号
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    formDesign: {},
+    formId: {
+      type: String
+    },
+    title: {
+      type: String
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    }
+  },
+  data() {
+    return {
+      tableCustomArr: []
+    };
+  },
+  mounted() {
+    const _this = this;
+    _this.menuId = _this.$route.params.id;
+    // _this.tableCustomArr  = _.cloneDeep(_this.tableData)
+  },
+
+  watch: {
+    tableConfig: {
+      deep: true,
+      immediate: true,
+      handler: function(newVal, oldVal) {
+        const _this = this;
+        _.find(_this.tableData, function(o, i) {
+          const obj = {};
+          for (const key in o) {
+            // if (o.hasOwnProperty.call(o, key)) {
+            if (key.includes("-Str")) {
+              obj[key] = o[key];
+              if (
+                !_.find(_this.tableConfig, function(o) {
+                  return o.type == "conunt";
+                })
+              ) {
+                _this.tableConfig.splice(1, 0, {
+                  label: "规格属性",
+                  prop: "key_conunt",
+                  type: "conunt"
+                });
+                // _this.tableConfig.push({
+                //   label: "规格属性",
+                //   prop: "key_conunt",
+                //   type: "conunt"
+                // });
+              }
+            }
+            // }
+          }
+          _this.$set(_this.tableCustomArr, i, obj);
+        });
+      }
+    }
+  },
+  methods: {
+    goFormData(obj) {
+      const vm = this;
+      vm.$router.push({
+        name: "formDataDetail",
+        params: { id: this.menuId },
+        query: { auditId: obj.content.auditId, title: this.title }
+      });
+    },
+    getStrRes(arr, opt, row, key) {
+      var str = [];
+      var id = row._id;
+      var vm = this;
+      if (Array.isArray(arr)) {
+        for (let i = 0; i < opt.length; i++) {
+          const e = opt[i];
+          for (let i2 = 0; i2 < arr.length; i2++) {
+            const e2 = arr[i2];
+            if (e2 == e.value) {
+              str.push(e.text);
+              str.join(",");
+            }
+          }
+        }
+        return str.join(",");
+      } else if (typeof arr == "number") {
+        for (let i = 0; i < opt.length; i++) {
+          const e = opt[i];
+          const e2 = arr;
+          if (e2 == e.value) {
+            str.push(e.text);
+            str.join(",");
+          }
+        }
+        return str.join(",");
+      } else {
+        return "";
+      }
+    },
+    getStr(id, key, row) {
+      var str = "";
+      var vm = this;
+      vm.tableData.map((e2, i2) => {
+        if (e2._id == id) {
+          vm.tableConfig.map((e, i) => {
+            // if (e.key.includes(",")) {
+            //   e.key.split(",").map((e3, i) => {
+            //     if (e3 == key) {
+
+            //       var dataArr = e2.content[key];
+            //       var dataOptions = e.options;
+
+            //       if (
+            //         e.type == "checkbox" ||
+            //         e.type == "radio" ||
+            //         e.type == "select"
+            //       ) {
+            //         str = vm.getStrRes(dataArr, dataOptions, row, key);
+            //       } else {
+            //         str = dataArr;
+            //       }
+            //     }
+            //   });
+            // }
+            if (key == e.key) {
+              const dataArr = e2.content[key];
+              const dataOptions = e.options;
+              if (!dataArr) return "无";
+              if (
+                e.type == "checkbox" ||
+                e.type == "radio" ||
+                e.type == "select"
+              ) {
+                str = vm.getStrRes(dataArr, dataOptions, row, key);
+              } else if (e.type == "datetime") {
+                var typeArr = dataTypeList.attrs.type.options.filter(function(
+                  item
+                ) {
+                  return item.value == vm.formDesign[e.key].attrs.type;
+                });
+                str = moment(dataArr * 1000).format(typeArr[0].format);
+              } else if (e.type == "datetimerange") {
+                var typeList = dataTimeRangeTypeList.attrs.type.options.filter(
+                  function(item) {
+                    return item.value == vm.formDesign[e.key].attrs.type;
+                  }
+                );
+                str =
+                  moment(dataArr[0] * 1000).format(typeList[0].format) +
+                  " 至 " +
+                  moment(dataArr[1] * 1000).format(typeList[0].format);
+              } else {
+                str = dataArr;
+              }
+            } else if (!key && !e.key) {
+              for (const key in row) {
+                // if (Object.hasOwnProperty.call(row, key)) {
+                const e = row[key];
+                // }
+              }
+            } else {
+              // 详情子表级联
+              if (e.prop == key) {
+                let title = "";
+                if (e.type == "cascader") {
+                  const arr = this.getOptionArr(e.options);
+                  row[e.prop].map(one => {
+                    arr.map(item => {
+                      if (item.value == one) {
+                        title = title + item.label + "/";
+                      }
+                    });
+                  });
+                  title = title.substring(0, title.length - 1);
+                  str = title;
+                }
+              }
+            }
+          });
+        }
+      });
+
+      return str;
+    },
+    // 扁平化数组
+    getOptionArr(arr) {
+      let result = [];
+      arr.map(item => {
+        var res = JSON.parse(JSON.stringify(item));
+        delete res["children"];
+        result.push(res);
+        if (item.children instanceof Array && item.children.length > 0) {
+          result = result.concat(this.getOptionArr(item.children));
+        }
+      });
+      return result;
+    },
+    getTitle(arr, index, row) {
+      var str = "";
+      var vm = this;
+
+      arr.forEach((e, i) => {
+        if (vm.tableData[index].content[e]) {
+          //   str += vm.tableData[index].content[e];
+          str += vm.getStr(vm.tableData[index]._id, e, row);
+        }
+      });
+      return str;
+    },
+    handleTableSelect(val) {
+      this.$emit("handleTableSelect", val);
+    },
+    formatter(row, column, cellValue, index, item, subItem) {
+      if (item.children) {
+        const arr = [];
+        if (Array.isArray(cellValue)) {
+          cellValue.forEach(cell => {
+            if (subItem.options && typeof subItem.options == "string") {
+              arr.push(cell[subItem.prop + "Str"]);
+            } else {
+              const data = this.setCellValue(
+                row,
+                column,
+                cell[subItem.prop],
+                index,
+                subItem
+              );
+              arr.push(data);
+            }
+          });
+        }
+        return arr.join("\r\n");
+      } else {
+        if (!cellValue) {
+          return "";
+        } else {
+          return this.setCellValue(row, column, cellValue, index, item);
+        }
+      }
+    },
+    setCellValue(row, column, cellValue, index, item) {
+      let str = "";
+
+      if (item.options && typeof item.options == "string") {
+        return cellValue;
+      }
+      switch (item.type) {
+        case "input":
+          str = cellValue;
+          break;
+        case "time":
+          str = cellValue;
+          break;
+        case "textarea":
+          str = cellValue;
+          break;
+        case "date":
+          str = moment(cellValue * 1000).format("YYYY-MM-DD");
+          break;
+        case "daterange":
+          str = cellValue
+            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
+            .join(" -- ");
+          break;
+        case "datetimerange":
+          str = cellValue
+            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
+            .join(" -- ");
+          break;
+        case "datetime":
+          str = moment(cellValue * 1000).format("YYYY-MM-DD");
+          break;
+        case "timerange":
+          str = cellValue
+            .map(item => moment(item * 1000).format("HH:mm:ss"))
+            .join(" -- ");
+          break;
+        case "select":
+          const arr = item.options.filter
+            ? item.options.filter(item => item.value == cellValue)
+            : [];
+          str = arr.length > 0 ? arr[0].text : "";
+          break;
+        case "switch":
+          str = cellValue == true ? "是" : cellValue == false ? "否" : "";
+          break;
+        case "number":
+          str = cellValue;
+          break;
+        case "radio":
+          const radioName = item.options.filter
+            ? item.options.filter(item => item.value == cellValue)
+            : [];
+          str = radioName.length > 0 ? radioName[0].text : "";
+          break;
+        case "checkbox":
+          const checkbox = item.options.filter
+            ? item.options
+              .filter(item => cellValue.indexOf(item.value) > -1)
+              .map(i => i.text)
+            : [];
+          str = checkbox.length > 0 ? checkbox.join(",") : "";
+          break;
+        case "text":
+          str = cellValue;
+          break;
+      }
+      return str;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.cell-pre .cell {
+  white-space: pre;
+}
+</style>
+<style>
+.el-tooltip__popper {
+  white-space: pre;
+}
+</style>