qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/components/linkFormList.vue

@@ -1,821 +1,821 @@
-<template>
-  <!-- 组件说明：关联表单 -->
-  <div>
-    <el-dialog
-      :title="'关联表单'"
-      :visible.sync="orgVisible"
-      width="70%"
-      append-to-body
-      @opened='opened'
-      :before-close="cancel"
-      :close-on-click-modal="false"
-      destroy-on-close
-    >
-      <el-row>
-        <el-form
-          ref="form"
-          :inline="true"
-          class="h-search-form"
-          :model="form"
-          label-width="100px"
-        >
-          <el-form-item label="数据标题：">
-            <el-input
-              v-model="title"
-              placeholder="请输入数据标题"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="申请单位：">
-            <el-select
-              v-model="form.companyNo"
-              placeholder="请选择申请单位"
-              @change="handleOrgChange"
-            >
-              <el-option
-                v-for="item in orgOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="申请部门：">
-            <el-cascader
-              :show-all-levels="false"
-              placeholder="请选择申请部门"
-              :disabled="!form.companyNo"
-              :options="depOptions"
-              v-model="form.departmentNo"
-              :props="cascaderProps"
-              @change="handleChange"
-              :key="count"
-            ></el-cascader>
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              @click="getList"
-            >查询</el-button>
-            <el-button
-              plain
-              @click="title='';form.companyNo='';form.departmentNo=''"
-            >重置</el-button>
-          </el-form-item>
-          <!-- <el-form-item label="经办人：">
-        <el-input placeholder="请输入经办人" v-model="form.operator" maxlength="30"></el-input>
-      </el-form-item> -->
-        </el-form>
-      </el-row>
-
-      <el-table
-        :data="tableData"
-        style="width: 100%;border:1px solid #ebeef5;"
-        highlight-current-row
-        @cell-click="currentListChange"
-        :header-cell-style="$TableCell.setHeaderCellStyle"
-        :cell-style="$TableCell.setCellStyle"
-        border
-        ref="singleTable"
-        v-bind="$attrs"
-      >
-        <template slot="empty">
-          <base-empty-data />
-        </template>
-
-        <el-table-column
-          label="序号"
-          align="center"
-          type="index"
-          width="50"
-        >
-        </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>{{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>
-                  <div>{{getStr(scope.row._id,item.key,scope.row) || scope.row.content[item.key]}}</div>
-                </template>
-              </el-table-column>
-            </template>
-
-          </template>
-        </template>
-        <template v-else>
-          <el-table-column
-            label=""
-            prop=""
-            align="center"
-          >无</el-table-column>
-        </template>
-      </el-table>
-      <div style="text-align:right;margin-top:15px">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pageNum"
-          :page-sizes="[15, 30, 50]"
-          :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
-      <span
-        slot="footer"
-        class="dialog-footer"
-      >
-        <el-button @click="cancel">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="confirm"
-        >确 认</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import moment from "moment";
-import api from "@/api/apiMemberSelection";
-import apiSystem from "@/api/apiSystem";
-import {
-  queryList,
-  deleteFormDataById,
-  queryFormByMenu,
-  queryListdesign
-} from "@/api/apiFormBuilder/menu.js";
-import { findIndex } from "lodash-es";
-export default {
-  name: "LinkFormList",
-  components: {},
-  props: {
-    menuId: {
-      type: Array,
-      default: []
-    },
-    type: {
-      type: Number,
-      default: 0
-    },
-    orgVisible: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    defaultArr1: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {
-      count: 1,
-      currentIndex: 0,
-      title: "",
-      currentTitle: "",
-      cascaderProps: {
-        checkStrictly: true,
-        value: "id",
-        label: "name",
-        children: "children"
-      },
-      form: {
-        companyNo: "",
-        departmentNo: "",
-        staffNo: "",
-        operator: ""
-      },
-      tableCustomArr: [],
-      formDesc: {},
-      formData: {},
-      isLoading: false,
-      tableData: [],
-      tableConfig: [],
-      formDesign: {},
-      currentRow: {},
-      total: 0,
-      pageNum: 1,
-      pageSize: 15,
-      isSearching: false,
-      currentSelectedAll: false,
-      searchValue: null,
-      loading: false,
-      orgData: null,
-      orgDataT: null,
-      selectedList: [],
-      defaultCheck: [],
-      defaultProps: {
-        children: "children",
-        label: "name"
-      },
-      orgOptions: [],
-      depOptions: [],
-      staffs: []
-    };
-  },
-  computed: {
-    depHandle() {
-      const { orgData, type } = this;
-      return { orgData, type };
-    },
-    user() {
-      return this.$store.state.user;
-    }
-  },
-  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);
-        });
-      }
-    },
-    currentLevelList: {
-      handler(val) {
-        this.generateSelectedList();
-        this.generateCurrentSelectedAll();
-      },
-      deep: true
-    },
-    // depHandle: {
-    //   handler(nv, ov) {
-    //     if (nv.type == 3) {
-    //       debugger;
-    //       this.handleDepData(nv.orgData);
-    //     }
-    //   }
-    // },
-    searchValue: {
-      handler(val) {
-        this.$refs.tree.filter(val);
-      }
-    }
-  },
-  async created() {
-    this.init();
-    // this.getOrgData();
-  },
-  methods: {
-    currentListChange(row, column, cell, event) {
-      const vm = this;
-      const index = _.findIndex(vm.tableData, function(o) {
-        return o == row;
-      });
-      vm.tableConfig.forEach((e, i) => {
-        if (e.label == "数据标题") {
-          vm.currentTitle = vm.getTitle(e.key.split(","), index, row);
-        }
-      });
-      vm.currentIndex = index;
-    },
-    handleOrgChange(val) {
-      this.form.departmentNo = "";
-      this.depOptions = [];
-      this.form.staffNo = "";
-      this.staffs = [];
-      this.form.companyNo = val;
-      this.depList(val);
-    },
-    async depList(data) {
-      this.count++;
-      const res = await apiSystem.deplist(data);
-      if (res.data.code == 200) {
-        this.depOptions = res.data.data;
-      }
-    },
-    handleChange(val) {
-      this.form.staffNo = "";
-      this.staffs = [];
-      this.form.departmentNo = val[val.length - 1];
-      this.getStaffsList(this.form.departmentNo);
-    },
-    async getStaffsList(id) {
-      const res = await apiSystem.getUserByParentId(id);
-      if (res.data.code == 200) {
-        this.staffs = res.data.data;
-      }
-    },
-    async companyList(data) {
-      const res = await apiSystem.companylist(data);
-      this.orgOptions = res.data.data;
-    },
-    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;
-    },
-    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 "";
-      }
-    },
-    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;
-    },
-    async companyList(data) {
-      const res = await apiSystem.companylist(data);
-      this.orgOptions = res.data.data;
-    },
-    async getList() {
-      const _this = this;
-      const query = {};
-      const data = {};
-      Object.keys(data).forEach(item => {
-        const type = _this.setType(_this.formDesc[item].type);
-        const value = data[item] ? data[item] : "";
-        query[item] = { value: value, type: type };
-      });
-      Object.keys(_this.form).forEach(item => {
-        const type = item == "operator" ? "like" : "eque";
-        query[item] = { value: _this.form[item], type: type };
-      });
-      //   query = Object.assign(query, { title: "5" })
-      const parse = JSON.stringify(query);
-      const res = await queryList({
-        menuId: this.menuId[this.menuId.length - 1],
-        companyNo: this.user.cno,
-        userNo: this.user.no,
-        formId: this.formId,
-        pageNum: this.pageNum,
-        pageSize: this.pageSize,
-        title: this.title,
-        data: parse
-      });
-      if (res.data.state == "ok") {
-        this.tableData = res.data.data.formDatas.list;
-        this.total = res.data.data.formDatas.totalRow;
-      } else {
-        this.$message.error(
-          res.data.msg ? res.data.msg : "请求失败，请刷新重试"
-        );
-      }
-    },
-    init() {
-      //   this.menuId = "6010e348f80f8b5f9b7e34fd";
-      //   this.menuId = this.$route.params.id;
-      this.formDesc = {};
-      this.tableConfig = [];
-      this.tableData = [];
-      this.total = 0;
-      this.companyList();
-      if (this.$route.path !== "/") {
-
-      }
-      this.getFormId();
-    },
-    // 获取formId
-    async getFormId() {
-      const vm = this;
-      if (vm.menuId) {
-        const { data } = await queryFormByMenu({
-          menuId: vm.menuId[vm.menuId.length - 1],
-          companyNo: vm.user.cno
-        });
-        if (data.state == "ok") {
-          vm.formId = data.data.id;
-          const formDesc = data.data.content ? data.data.content.formDesc : {};
-          Object.keys(formDesc).forEach(item => {
-            if (formDesc[item].type.indexOf("columns") > -1) {
-              Object.assign(
-                formDesc,
-                _.keyBy(formDesc[item].attrs.columns, "field")
-              );
-            }
-          });
-          vm.formDesign = formDesc;
-          vm.getList();
-          vm.getConfig();
-        }
-      }
-    },
-    formatterConfig(columns) {
-      const _this = this;
-
-      const config = columns.map(item => {
-        // if (item.label !== "数据标题") {
-        const type =
-          item.label !== "数据标题" ? _this.formDesign[item.key].type : "input";
-        let options = [];
-        if (type != "custom-table") {
-          options =
-            (_this.formDesign[item.key] &&
-              _this.formDesign[item.key].options) ||
-            [];
-        } else {
-          item.children.forEach((v, i) => {
-            const obj = _this.findKeyInDesign(item, v);
-            const childType = obj.content.type
-              ? obj.content.type.replace("ele-form-", "")
-              : "";
-            const childOption = obj.content.options || [];
-            item.children[i] = { ...v, type: childType, options: childOption };
-          });
-        }
-        return { ...item, type: type, options: options };
-        // }
-      });
-      return config;
-    },
-    // 获取列表配置
-    async getConfig() {
-      const vm = this;
-      const parse = {
-        companyNo: this.user.cno,
-        menuId: this.menuId[vm.menuId.length - 1],
-        formId: this.formDesId
-      };
-      const res = await queryListdesign(parse);
-      if (res.data.state == "ok" && res.data.data.content) {
-        const content = res.data.data.content;
-        this.formDesc = content.formDesc;
-        const tableConfig = [];
-        content.tableConfig.forEach(item => {
-          if (vm.formDesign[item.prop] || item.label == "数据标题") {
-            tableConfig.push({
-              label: item.label,
-              key: item.prop,
-              children: item.children
-            });
-          }
-        });
-        this.tableConfig = this.formatterConfig(tableConfig);
-        console.log(
-          "🚀 ~ file: designListPage.vue ~ line 377 ~ getConfig ~ this.tableConfig",
-          this.tableConfig
-        );
-      }
-    },
-    setCurrent(row) {
-      this.$refs.singleTable.setCurrentRow(row);
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      this.currentRow = val;
-      console.log(`当前页: ${val}`);
-    },
-    opened() {
-      const vm = this;
-      vm.init();
-    },
-    handleDepData(data, c) {
-      const vm = this;
-      for (let i = 0; i < data.length; i++) {
-        const e = data[i];
-        if (e.children) {
-          //   const arr =  _.filter(e.children, (e, i) => {
-          //     // return e.type
-          //   })
-          //   e.children = arr;
-          vm.handleDepData(e.children, data);
-        } else {
-          return;
-        }
-      }
-
-      //   const data2 = _.cloneDeep(data);
-    },
-
-    // 取消
-    cancel() {
-      this.$emit("close");
-    },
-    // 确认
-    confirm() {
-      // if (this.selectedList.length === 0) {
-      //   this.$message.warning(this.title);
-      //   return false;
-      // }
-
-      const vm = this;
-      if (!vm.currentTitle) {
-        vm.$message({
-          message: "请选择要关联的表单",
-          type: "warning"
-        });
-        return;
-      }
-      vm.$emit("getcurrentTitle", {
-        title: vm.currentTitle,
-        data: vm.tableData,
-        index: vm.currentIndex
-      });
-      vm.$emit("close");
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-.opt {
-  display: flex;
-  align-items: center;
-  //height: 30px;
-  justify-content: flex-start;
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-.opt-avatar {
-  margin-left: 10px;
-  flex-shrink: 0;
-}
-.avatar-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background-color: #0286df;
-  color: #fff;
-  border-radius: 100%;
-}
-.opt-name {
-  width: 100%;
-  flex-shrink: 1;
-  padding-left: 10px;
-}
-.next-level-btn {
-  flex-shrink: 0;
-  margin: 0;
-  padding: 0;
-}
-.el-icon-circle-close {
-  cursor: pointer;
-}
-</style>
+<template>
+  <!-- 组件说明：关联表单 -->
+  <div>
+    <el-dialog
+      :title="'关联表单'"
+      :visible.sync="orgVisible"
+      width="70%"
+      append-to-body
+      @opened='opened'
+      :before-close="cancel"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-row>
+        <el-form
+          ref="form"
+          :inline="true"
+          class="h-search-form"
+          :model="form"
+          label-width="100px"
+        >
+          <el-form-item label="数据标题：">
+            <el-input
+              v-model="title"
+              placeholder="请输入数据标题"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="申请单位：">
+            <el-select
+              v-model="form.companyNo"
+              placeholder="请选择申请单位"
+              @change="handleOrgChange"
+            >
+              <el-option
+                v-for="item in orgOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="申请部门：">
+            <el-cascader
+              :show-all-levels="false"
+              placeholder="请选择申请部门"
+              :disabled="!form.companyNo"
+              :options="depOptions"
+              v-model="form.departmentNo"
+              :props="cascaderProps"
+              @change="handleChange"
+              :key="count"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              @click="getList"
+            >查询</el-button>
+            <el-button
+              plain
+              @click="title='';form.companyNo='';form.departmentNo=''"
+            >重置</el-button>
+          </el-form-item>
+          <!-- <el-form-item label="经办人：">
+        <el-input placeholder="请输入经办人" v-model="form.operator" maxlength="30"></el-input>
+      </el-form-item> -->
+        </el-form>
+      </el-row>
+
+      <el-table
+        :data="tableData"
+        style="width: 100%;border:1px solid #ebeef5;"
+        highlight-current-row
+        @cell-click="currentListChange"
+        :header-cell-style="$TableCell.setHeaderCellStyle"
+        :cell-style="$TableCell.setCellStyle"
+        border
+        ref="singleTable"
+        v-bind="$attrs"
+      >
+        <template slot="empty">
+          <base-empty-data />
+        </template>
+
+        <el-table-column
+          label="序号"
+          align="center"
+          type="index"
+          width="50"
+        >
+        </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>{{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>
+                  <div>{{getStr(scope.row._id,item.key,scope.row) || scope.row.content[item.key]}}</div>
+                </template>
+              </el-table-column>
+            </template>
+
+          </template>
+        </template>
+        <template v-else>
+          <el-table-column
+            label=""
+            prop=""
+            align="center"
+          >无</el-table-column>
+        </template>
+      </el-table>
+      <div style="text-align:right;margin-top:15px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-sizes="[15, 30, 50]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="cancel">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="confirm"
+        >确 认</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+import api from "@/api/apiMemberSelection";
+import apiSystem from "@/api/apiSystem";
+import {
+  queryList,
+  deleteFormDataById,
+  queryFormByMenu,
+  queryListdesign
+} from "@/api/apiFormBuilder/menu.js";
+import { findIndex } from "lodash-es";
+export default {
+  name: "LinkFormList",
+  components: {},
+  props: {
+    menuId: {
+      type: Array,
+      default: []
+    },
+    type: {
+      type: Number,
+      default: 0
+    },
+    orgVisible: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    defaultArr1: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      count: 1,
+      currentIndex: 0,
+      title: "",
+      currentTitle: "",
+      cascaderProps: {
+        checkStrictly: true,
+        value: "id",
+        label: "name",
+        children: "children"
+      },
+      form: {
+        companyNo: "",
+        departmentNo: "",
+        staffNo: "",
+        operator: ""
+      },
+      tableCustomArr: [],
+      formDesc: {},
+      formData: {},
+      isLoading: false,
+      tableData: [],
+      tableConfig: [],
+      formDesign: {},
+      currentRow: {},
+      total: 0,
+      pageNum: 1,
+      pageSize: 15,
+      isSearching: false,
+      currentSelectedAll: false,
+      searchValue: null,
+      loading: false,
+      orgData: null,
+      orgDataT: null,
+      selectedList: [],
+      defaultCheck: [],
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      orgOptions: [],
+      depOptions: [],
+      staffs: []
+    };
+  },
+  computed: {
+    depHandle() {
+      const { orgData, type } = this;
+      return { orgData, type };
+    },
+    user() {
+      return this.$store.state.user;
+    }
+  },
+  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);
+        });
+      }
+    },
+    currentLevelList: {
+      handler(val) {
+        this.generateSelectedList();
+        this.generateCurrentSelectedAll();
+      },
+      deep: true
+    },
+    // depHandle: {
+    //   handler(nv, ov) {
+    //     if (nv.type == 3) {
+    //       debugger;
+    //       this.handleDepData(nv.orgData);
+    //     }
+    //   }
+    // },
+    searchValue: {
+      handler(val) {
+        this.$refs.tree.filter(val);
+      }
+    }
+  },
+  async created() {
+    this.init();
+    // this.getOrgData();
+  },
+  methods: {
+    currentListChange(row, column, cell, event) {
+      const vm = this;
+      const index = _.findIndex(vm.tableData, function(o) {
+        return o == row;
+      });
+      vm.tableConfig.forEach((e, i) => {
+        if (e.label == "数据标题") {
+          vm.currentTitle = vm.getTitle(e.key.split(","), index, row);
+        }
+      });
+      vm.currentIndex = index;
+    },
+    handleOrgChange(val) {
+      this.form.departmentNo = "";
+      this.depOptions = [];
+      this.form.staffNo = "";
+      this.staffs = [];
+      this.form.companyNo = val;
+      this.depList(val);
+    },
+    async depList(data) {
+      this.count++;
+      const res = await apiSystem.deplist(data);
+      if (res.data.code == 200) {
+        this.depOptions = res.data.data;
+      }
+    },
+    handleChange(val) {
+      this.form.staffNo = "";
+      this.staffs = [];
+      this.form.departmentNo = val[val.length - 1];
+      this.getStaffsList(this.form.departmentNo);
+    },
+    async getStaffsList(id) {
+      const res = await apiSystem.getUserByParentId(id);
+      if (res.data.code == 200) {
+        this.staffs = res.data.data;
+      }
+    },
+    async companyList(data) {
+      const res = await apiSystem.companylist(data);
+      this.orgOptions = res.data.data;
+    },
+    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;
+    },
+    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 "";
+      }
+    },
+    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;
+    },
+    async companyList(data) {
+      const res = await apiSystem.companylist(data);
+      this.orgOptions = res.data.data;
+    },
+    async getList() {
+      const _this = this;
+      const query = {};
+      const data = {};
+      Object.keys(data).forEach(item => {
+        const type = _this.setType(_this.formDesc[item].type);
+        const value = data[item] ? data[item] : "";
+        query[item] = { value: value, type: type };
+      });
+      Object.keys(_this.form).forEach(item => {
+        const type = item == "operator" ? "like" : "eque";
+        query[item] = { value: _this.form[item], type: type };
+      });
+      //   query = Object.assign(query, { title: "5" })
+      const parse = JSON.stringify(query);
+      const res = await queryList({
+        menuId: this.menuId[this.menuId.length - 1],
+        companyNo: this.user.cno,
+        userNo: this.user.no,
+        formId: this.formId,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        title: this.title,
+        data: parse
+      });
+      if (res.data.state == "ok") {
+        this.tableData = res.data.data.formDatas.list;
+        this.total = res.data.data.formDatas.totalRow;
+      } else {
+        this.$message.error(
+          res.data.msg ? res.data.msg : "请求失败，请刷新重试"
+        );
+      }
+    },
+    init() {
+      //   this.menuId = "6010e348f80f8b5f9b7e34fd";
+      //   this.menuId = this.$route.params.id;
+      this.formDesc = {};
+      this.tableConfig = [];
+      this.tableData = [];
+      this.total = 0;
+      this.companyList();
+      if (this.$route.path !== "/") {
+
+      }
+      this.getFormId();
+    },
+    // 获取formId
+    async getFormId() {
+      const vm = this;
+      if (vm.menuId) {
+        const { data } = await queryFormByMenu({
+          menuId: vm.menuId[vm.menuId.length - 1],
+          companyNo: vm.user.cno
+        });
+        if (data.state == "ok") {
+          vm.formId = data.data.id;
+          const formDesc = data.data.content ? data.data.content.formDesc : {};
+          Object.keys(formDesc).forEach(item => {
+            if (formDesc[item].type.indexOf("columns") > -1) {
+              Object.assign(
+                formDesc,
+                _.keyBy(formDesc[item].attrs.columns, "field")
+              );
+            }
+          });
+          vm.formDesign = formDesc;
+          vm.getList();
+          vm.getConfig();
+        }
+      }
+    },
+    formatterConfig(columns) {
+      const _this = this;
+
+      const config = columns.map(item => {
+        // if (item.label !== "数据标题") {
+        const type =
+          item.label !== "数据标题" ? _this.formDesign[item.key].type : "input";
+        let options = [];
+        if (type != "custom-table") {
+          options =
+            (_this.formDesign[item.key] &&
+              _this.formDesign[item.key].options) ||
+            [];
+        } else {
+          item.children.forEach((v, i) => {
+            const obj = _this.findKeyInDesign(item, v);
+            const childType = obj.content.type
+              ? obj.content.type.replace("ele-form-", "")
+              : "";
+            const childOption = obj.content.options || [];
+            item.children[i] = { ...v, type: childType, options: childOption };
+          });
+        }
+        return { ...item, type: type, options: options };
+        // }
+      });
+      return config;
+    },
+    // 获取列表配置
+    async getConfig() {
+      const vm = this;
+      const parse = {
+        companyNo: this.user.cno,
+        menuId: this.menuId[vm.menuId.length - 1],
+        formId: this.formDesId
+      };
+      const res = await queryListdesign(parse);
+      if (res.data.state == "ok" && res.data.data.content) {
+        const content = res.data.data.content;
+        this.formDesc = content.formDesc;
+        const tableConfig = [];
+        content.tableConfig.forEach(item => {
+          if (vm.formDesign[item.prop] || item.label == "数据标题") {
+            tableConfig.push({
+              label: item.label,
+              key: item.prop,
+              children: item.children
+            });
+          }
+        });
+        this.tableConfig = this.formatterConfig(tableConfig);
+        console.log(
+          "🚀 ~ file: designListPage.vue ~ line 377 ~ getConfig ~ this.tableConfig",
+          this.tableConfig
+        );
+      }
+    },
+    setCurrent(row) {
+      this.$refs.singleTable.setCurrentRow(row);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.currentRow = val;
+      console.log(`当前页: ${val}`);
+    },
+    opened() {
+      const vm = this;
+      vm.init();
+    },
+    handleDepData(data, c) {
+      const vm = this;
+      for (let i = 0; i < data.length; i++) {
+        const e = data[i];
+        if (e.children) {
+          //   const arr =  _.filter(e.children, (e, i) => {
+          //     // return e.type
+          //   })
+          //   e.children = arr;
+          vm.handleDepData(e.children, data);
+        } else {
+          return;
+        }
+      }
+
+      //   const data2 = _.cloneDeep(data);
+    },
+
+    // 取消
+    cancel() {
+      this.$emit("close");
+    },
+    // 确认
+    confirm() {
+      // if (this.selectedList.length === 0) {
+      //   this.$message.warning(this.title);
+      //   return false;
+      // }
+
+      const vm = this;
+      if (!vm.currentTitle) {
+        vm.$message({
+          message: "请选择要关联的表单",
+          type: "warning"
+        });
+        return;
+      }
+      vm.$emit("getcurrentTitle", {
+        title: vm.currentTitle,
+        data: vm.tableData,
+        index: vm.currentIndex
+      });
+      vm.$emit("close");
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.opt {
+  display: flex;
+  align-items: center;
+  //height: 30px;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+.opt-avatar {
+  margin-left: 10px;
+  flex-shrink: 0;
+}
+.avatar-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background-color: #0286df;
+  color: #fff;
+  border-radius: 100%;
+}
+.opt-name {
+  width: 100%;
+  flex-shrink: 1;
+  padding-left: 10px;
+}
+.next-level-btn {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+}
+.el-icon-circle-close {
+  cursor: pointer;
+}
+</style>