cnhis-design-vue 2.1.56 → 2.1.57

package/packages/form-table/src/FormTable.vue

@@ -1,1110 +1,1110 @@
-<template>
-  <div
-    class="formTable-page"
-    :class="{ 'formTable-page-disabled--detail': isDetail }"
-    :style="{ height: tableHeight + 'px', minHeight, maxHeight }"
-  >
-    <c-grid
-      :ref="`formTableGrid-${formTableItem.html_type}-${formTableItem.val_key}`"
-      :style="{ height: '100%' }"
-      border
-      show-header-overflow
-      highlight-hover-row
-      highlight-current-row
-      show-footer-overflow="title"
-      height="auto"
-      resizable
-      auto-resize
-      :row-id="handleRowId"
-      :row-key="true"
-      :checkbox-config="{
-        trigger: 'cell',
-        reserve: true,
-        highlight: true
-      }"
-      @cell-click="handlerClickRow"
-    >
-      <template v-slot:empty>
-        <div v-if="isShowEmpty">
-          暂无数据
-        </div>
-      </template>
-    </c-grid>
-  </div>
-</template>
-<script>
-import registerCom from "./components/table-component/register-com.js";
-import configData from "./components/table-component/config-data/index.js";
-import validate from "./components/table-item/validate-rules.js";
-import { Tooltip, Icon } from 'ant-design-vue';
-import Grid from '~/grid';
-import create from '@/core/create';
-import vexutils from '@/utils/vexutils';
-export default create({
-  name: "form-table",
-  components: {
-    [Grid.name]: Grid,
-    [Tooltip.name]: Tooltip,
-    [Icon.name]: Icon
-  },
-  mixins: [registerCom, validate],
-  provide() {
-    // form item 组件中用
-    return {
-      formTable: this
-    };
-  },
-  props: {
-    data: Array,
-    columnConfig: Object,
-    emptyItems: {
-      type: Object,
-      default: () => {
-        return {
-          noDataImg: "nodata",
-          noDataTip: ""
-        };
-      }
-    },
-    isOnlyDisplay: Boolean,
-    userInfo: {
-      type: Object,
-      default: () => ({})
-    },
-    styleSetting: {
-      type: Object,
-      default: () => ({})
-    },
-    defaultValue: {
-      type: Array,
-      default: () => []
-    },
-    dbParams: {
-      type: Object
-    },
-    cacheUniqueKey: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    formType: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    formConfig: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    formTableItem: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    isDetail: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      isShowEmpty: false,
-      tableList: [],
-      fullTableList: [], // 软删除使用 需要全量数据
-      multipleSelected: {},
-      columns: [],
-      columnsLevel: 1
-    };
-  },
-
-  computed: {
-    handleRowId() {
-      return this.columnConfig?.primaryKey || "field";
-    },
-    handleComponent() {
-      return function(name, item) {
-        let tag = this.cmps[name];
-        return tag ? <tag item={item}></tag> : null;
-      };
-    },
-    formTableGridRef() {
-      return `formTableGrid-${this.formTableItem.html_type}-${this.formTableItem.val_key}`;
-    },
-    editField() {
-      return this.formTableItem?.wordbook?.idField;
-    },
-    delFlagField() {
-      return this.formTableItem?.wordbook?.delFlagField || "deleteKey";
-    },
-    rowH() {
-      if (this.isDetail || !this.tableList?.length) return 50;
-      let hasTextarea = this.columns
-        .map(item => {
-          if (item.html_type == "TEXTAREA") return item.initialize_high ? +item.initialize_high : 3;
-          return null;
-        })
-        .filter(Boolean);
-      let MaxH = 50;
-      if (hasTextarea.length) {
-        // line-height * rows + 10(固定) + 4(margin) + 18(padding)
-        MaxH = Math.max(...hasTextarea) * 20 + 10 + 4 + 18;
-      }
-      return MaxH;
-    },
-    minHeight() {
-      // columns 可能合并了头部
-      return this.rowH + this.columnsLevel * 40 + 10 + "px";
-    },
-    maxHeight() {
-      return this.rowH * 6 + this.columnsLevel * 40 + 10 + "px";
-    },
-    tableHeight() {
-      let len = this.tableList?.length || 1;
-      return len * this.rowH + this.columnsLevel * 40 + 10;
-    },
-    banClick() {
-      return this.isDetail || this.columnConfig?.hideCheck
-    }
-  },
-  watch: {
-    columnConfig(config) {
-      if (!config || !Object.keys(config).length) return;
-      this.loadColumn(config);
-    },
-    data(value) {
-      if (!value || !value.length) {
-        this.isShowEmpty = true;
-      }
-      this.loadData(value);
-    }
-  },
-  // 生命周期
-  created() {},
-  mounted() {
-    if (!this.isOnlyDisplay) return;
-    this.loadColumn(this.columnConfig);
-    this.loadData(this.data);
-  },
-
-  // 方法
-  methods: {
-    loadColumn(config) {
-      let columns = this.formatColumns(config);
-      columns = this.handleGroupColums(columns);
-      this.columns = columns;
-      const table = this.$refs[this.formTableGridRef];
-      if (!table) return;
-      table && table.reloadColumn(columns);
-    },
-    formatColumns(config) {
-      let fieldList = config.columns;
-      if (!fieldList || !fieldList.length) return;
-      const columns = [
-        {
-          type: "seq",
-          align: "center",
-          resizable: true,
-          width: "52",
-          showOverflow: true,
-          title: "序号"
-        }
-      ];
-      if (!this.banClick) {
-        columns.push({
-          type: "checkbox",
-          align: "center",
-          resizable: false,
-          width: "40",
-          showOverflow: true
-        });
-      }
-      // let currentColumns = JSON.parse(JSON.stringify(fieldList));
-      let currentColumns = fieldList;
-      currentColumns.forEach(item => {
-        this.handleColumns(item);
-      });
-      columns.push(...currentColumns);
-      return columns;
-    },
-    // 分组表头处理
-    handleGroupColums(columns) {
-      let { rowGroupSetting } = this.formTableItem?.wordbook || {};
-      if (!rowGroupSetting || !Object.keys(rowGroupSetting).length) return columns;
-      let { firstRowGroup, secondRowGroup } = rowGroupSetting;
-      if (!firstRowGroup || !firstRowGroup.length) return columns;
-      this.handleRowColumns(firstRowGroup, columns, "val_key");
-      this.columnsLevel = 2;
-      if (!secondRowGroup || !secondRowGroup.length) return columns;
-      this.handleRowColumns(secondRowGroup, columns, "title");
-      this.columnsLevel = 3;
-      return columns;
-    },
-    // 处理分组columns
-    handleRowColumns(rowColumns, columns, key) {
-      rowColumns.map(item => {
-        let children = [];
-        let spliceIndex = -1;
-        let indexArr = [];
-        item.list?.length &&
-          item.list.forEach(v => {
-            let matchItem = columns.find(column => column[key] === v);
-            if (matchItem) {
-              let matchIndex = columns.findIndex(column => column[key] === v);
-              indexArr.push(matchIndex);
-              delete matchItem.fixed;
-              children.push(matchItem);
-              columns.splice(matchIndex, 1);
-            }
-          });
-        let obj = {
-          title: this.$t(item.titleI18n || item.title),
-          visible: true,
-          children
-        };
-        spliceIndex = Math.min.apply(Math, indexArr);
-        spliceIndex > -1 && columns.splice(spliceIndex, 0, obj);
-      });
-    },
-    dateWidth(item) {
-      const { isMonthPicker_com, isDate_com, isTimePicker_com } = configData;
-      if (isDate_com(item.html_type)) {
-        if (isMonthPicker_com(item)) return item.colWidth;
-        if (isTimePicker_com(item)) return item.colWidth;
-        return 200;
-      }
-      return item.colWidth;
-    },
-    handleColumns(item) {
-      let colWidth = this.dateWidth(item);
-      Object.assign(item, {
-        visible: item.is_show == 1,
-        minWidth: colWidth || 200,
-        headerClassName: "mycolumn", // 文本溢出处理('tooltip' vxe-table当前版本存在bug)
-        align: "center",
-        sortable: this.isOnlyDisplay ? true : false,
-        com_name: this.getComName(item),
-        resizable: true,
-        slots: {
-          default: params => {
-            return this.formatter(params, item);
-          },
-          header: this.toolTipTitle(item)
-        }
-      });
-    },
-    getDefaultValue(rowIndex) {
-      if (!this.defaultValue) return {};
-      if (Array.isArray(this.defaultValue)) {
-        if (!this.defaultValue?.length) return {};
-        let index = rowIndex ? rowIndex : 0;
-        return this.defaultValue[index] || {};
-      }
-      return this.defaultValue;
-    },
-    formatter({ row, column, rowIndex }, col) {
-      row["_rowIndex_"] = rowIndex;
-      let own = column?._own || column?.own || col;
-      column["_own"] = column["own"] = own;
-      let Tag = this.cmps[own.com_name];
-      
-      let item = row.__fieldObj__[own.val_key];
-      let is_show = item?.is_show == 1;
-      if (!is_show) return "";
-      let defaultValue = this.getDefaultValue(rowIndex);
-
-      return [
-        <Tag
-          userInfo={this.userInfo}
-          styleSetting={this.styleSetting}
-          defaultValue={defaultValue}
-          dbParams={this.dbParams}
-          row={row}
-          item={item}
-          defaultFieldList={this.columnConfig?.columns}
-          cacheUniqueKey={this.cacheUniqueKey}
-          formType={this.formType}
-          onValueOnChange={this.getValueChange}
-          onTableBlur={this.tableBlur}
-          mainForm={this.formConfig}
-          isDetail={this.isDetail}
-          class={[item.html_type + "-container", "form-table-item"]}
-          handleFormTableValue={this.handleFormatSubmit}
-        ></Tag>
-        // <component
-        //   is={own.com_name}
-        //   class={own.html_type}
-        //   item={own}
-        //   onValueOnChange={this.getValueChange}
-        // />
-      ];
-    },
-    async loadData(list) {
-      if (!list || !list.length) {
-        this.$refs[this.formTableGridRef]?.loadData([]);
-        return
-      }
-      this.tableList = vexutils.clone(list, true);
-      this.fullTableList = vexutils.clone(list, true);
-      this.handlerFieldToggleList(this.tableList);
-      const table = this.$refs[this.formTableGridRef];
-      if (!table) return;
-      await table.loadData(this.tableList);
-      this.handleMultipleSelected(list);
-    },
-    hideColumn(hideArr = [], visible) {
-      let columns = this.columns || [];
-      for (let i = 0; i < hideArr.length; i++) {
-        let v = hideArr[i];
-        // 根据val_key 从树结构中查找匹配第一条数据的键、值、路径
-        let match = vexutils.findTree(columns, item => item.val_key === v, {
-          children: "children"
-        });
-        // item items parent nodes
-        if (match) {
-          let { item, nodes } = match;
-          // 没有合并表头
-          if (nodes.length === 1) {
-            item.is_show = visible;
-            item.visible = visible == 1 ? true : false;
-            !visible && this.resetTableListRowField(item);
-            continue;
-          }
-          this.setTreeNodeVisible(nodes, visible);
-        }
-      }
-      const table = this.$refs[this.formTableGridRef];
-      table && table.loadColumn(columns);
-    },
-    /**
-     * 合并的表头 根据路径 隐藏
-     */
-    setTreeNodeVisible(nodes, visible) {
-      let nodeLen = nodes.length;
-      let i = 0;
-      while (i < nodeLen) {
-        let item = nodes[i];
-        if (item?.children?.length === 1) {
-          item.visible = visible == 1 ? true : false;
-        }
-        i++;
-      }
-      let curItem = nodes[nodeLen - 1];
-      curItem.is_show = visible;
-      curItem.visible = visible == 1 ? true : false;
-      !visible && this.resetTableListRowField(curItem);
-    },
-    /**
-     * 隐藏的数据需要恢复默认值&校验的错误也去掉
-     */
-    resetTableListRowField(matchItem) {
-      this.tableList.forEach(item => {
-        let fieldObj = item.__fieldObj__;
-        let errKey = this.handleGetErrKey(fieldObj[matchItem.val_key]);
-        let defObj = fieldObj[matchItem.val_key]?.__defObj__ || {};
-        console.log(errKey);
-        item[matchItem.val_key] = defObj.defVal;
-        fieldObj[matchItem.val_key] && (fieldObj[matchItem.val_key][errKey] = undefined);
-      });
-    },
-    /**
-     * 新增一条
-     */
-    async addOne(row) {
-      const table = this.$refs[this.formTableGridRef];
-      if (!row || !table) {
-        let len = this.tableList.length;
-        this.$emit("AddComplete", len);
-        return;
-      }
-      try {
-        this.tableList.unshift(row);
-        let copyRow = vexutils.clone(row, true);
-        this.fullTableList.unshift(copyRow);
-        this.handlerFieldToggleRow(row);
-        await table.loadData(this.tableList);
-        this.handleMultipleSelected([row], true);
-      } catch (err) {
-        console.log(err);
-      }
-      let len = this.tableList.length;
-      this.$emit("AddComplete", len);
-    },
-    getCheckedList() {
-      return new Promise((resolve, reject) => {
-        const table = this.$refs[this.formTableGridRef];
-        if (!table) {
-          reject();
-        }
-        let checkedList = table.getCheckboxRecords(true);
-        let len = this.tableList.length;
-        this.$emit("DeleteComplete", len);
-        resolve(checkedList);
-      });
-    },
-    /**
-     * 删除数据
-     */
-    async removeData(delFlagField, checkedList) {
-      const table = this.$refs[this.formTableGridRef];
-      let len = this.tableList.length;
-      if (!table) {
-        this.$emit("DeleteComplete", len);
-        return;
-      }
-      checkedList.forEach(item => {
-        let matchIndex = this.tableList.findIndex(v => v.field === item.field);
-        let fullMatchIndex = this.fullTableList.findIndex(v => v.field === item.field);
-        if (matchIndex > -1) {
-          if (item[this.editField] && fullMatchIndex > -1) {
-            // 编辑是 可能修改了未保存 将软删除的数据替换
-            let spliceItem = vexutils.clone(this.tableList[matchIndex], true);
-            this.fullTableList.splice(fullMatchIndex, 1, spliceItem);
-          }
-          this.tableList.splice(matchIndex, 1);
-        }
-
-        if (fullMatchIndex > -1) {
-          if (item[this.editField]) {
-            // 编辑数据如果被删除 软删除 更改delFlagField状态
-            this.fullTableList[fullMatchIndex][delFlagField] = "1";
-          } else {
-            // 代表是当前新增的数据 没有id
-            this.fullTableList.splice(matchIndex, 1);
-          }
-        }
-      });
-
-      await table.remove(checkedList);
-
-      this.$emit("DeleteComplete", this.tableList.length);
-    },
-    /**
-     * 多选框
-     */
-    handleMultipleSelected(list, isAdd) {
-      let multipleSelected = {};
-      let fieldList = this.columnConfig.columns;
-      list.forEach((item, i) => {
-        let field = item.field;
-        multipleSelected[field] = {};
-        for (let key in item) {
-          if (!this.ignoreKey(key)) {
-            let isSearchMore = fieldList.find(v => v.val_key === key);
-            if (isSearchMore?.html_type === "SEARCH_MORE") {
-              multipleSelected[field][key] = [];
-            }
-          }
-        }
-      });
-      if (isAdd) {
-        Object.assign(this.multipleSelected, { ...multipleSelected });
-      } else {
-        this.multipleSelected = multipleSelected;
-      }
-    },
-    ignoreKey(key) {
-      return (key.startsWith("_") && key.endsWith("_")) || key == "field";
-    },
-    /**
-     * 单击行
-     */
-    handlerClickRow({ row, $event = {}, $rowIndex, triggerCheckbox, triggerTreeNode }) {
-      if (this.banClick) return;
-      let { className } = $event.target || {};
-      $event.preventDefault();
-      $event.stopPropagation();
-      // 触发checkbox 不执行下面逻辑
-      if (className?.includes("vxe-checkbox--icon")) return;
-
-      let table = this.$refs[this.formTableGridRef];
-      let isChecked = table.isCheckedByCheckboxRow(row);
-      let checkedLen = table.getCheckboxRecords()?.length;
-
-      // 单独处理checkbox cell
-      let isCheckCell =
-        !triggerCheckbox &&
-        (className.includes("col--checkbox") ||
-          $event.target?.lastChild?.className?.includes("vxe-cell--checkbox"));
-
-      if (isCheckCell) return;
-
-      table.setAllCheckboxRow(false);
-
-      // 无选中行 -> 点击某一行 -> 选中该行
-      if (!checkedLen && !isChecked) {
-        table.setCheckboxRow([row], true);
-        return;
-      }
-      // 只有一条选中 -> 点击选中行 -> 取消选中行
-      if (checkedLen == 1 && isChecked) {
-        table.setCheckboxRow([row], false);
-        return;
-      }
-
-      // 已选中多行 -> 点击某一行 -> 选中该行
-      table.setCheckboxRow(row, true);
-    },
-    /**
-     * 多选selectList
-     */
-    getValueChange(val, item, row) {
-      console.log(val, item, row);
-      let cacheKey = item.val_key;
-      let field = row.field;
-      this.$set(this.multipleSelected[field], cacheKey, val);
-    },
-    /**
-     * 组件blur后触发 隐藏&显示条件需要
-     */
-    tableBlur(item, row, config) {
-      // console.log(item, row);
-      this.handlerFieldToggleRow(row);
-      this.$emit("formTableBlur", config);
-    },
-    toolTipTitle(item) {
-      let required = item.is_null == "0";
-      let remark = item.remark;
-      return () => {
-        return [
-          // <TextOverTooltip
-          //   refName={"item-" + item[this.handleRowId]}
-          //   content={name}
-          //   isAlias={isAlias}
-          // >
-          <span>
-            {required && <span class="span-required">*</span>}
-            <span domPropsInnerHTML={this.getItemTitle(item)}></span>
-            {remark && (
-              <a-tooltip title={remark}>
-                <a-icon class="span-remark-icon" type="question-circle" />
-              </a-tooltip>
-            )}
-          </span>
-          // </TextOverTooltip>
-        ];
-      };
-    },
-    handleTheSpace(v) {
-      if (typeof v === "string") {
-        return v.trim();
-      }
-      return v;
-    },
-    getItemTitle(item) {
-      let title = this.handleTheSpace(item.editor_title) || item.alias || item.name;
-      if (this.handleIsFormBoldOpen(item)) {
-        title += "<span class='required-text'> (必填) </span >";
-      }
-      return title;
-    },
-    handleIsFormBoldOpen(item) {
-      let res = item.is_null == "0" && this.styleSetting?.formBoldOpen;
-      return res;
-    },
-    validateFormMethod(isValidate) {
-      if (!this.fullTableList.length) return Promise.resolve();
-      // let arr = vexutils.clone(this.tableList, true);
-      let arr = this.tableList;
-
-      let fieldList = this.columnConfig.columns || [];
-      if (!fieldList.length) return Promise.resolve();
-      let deleteKey = this.delFlagField;
-      let delArr = this.fullTableList.filter(item => item[deleteKey] == 1);
-      if (!this.tableList.length) {
-        isValidate = false;
-      }
-      return new Promise((resolve, reject) => {
-        // 是否校验
-        if (isValidate) {
-          arr.forEach(item => {
-            Object.keys(item).forEach(key => {
-              // console.log(item.field);
-              let fieldObj = item.__fieldObj__;
-              let matchFieldList = fieldObj[key];
-              if (matchFieldList) {
-                let value = item[key];
-                // console.log(value);
-                let { validate, errorMsg } = this.handleGetRules(value, matchFieldList, true);
-                // console.log(validate, errorMsg);
-                let errKey = this.handleGetErrKey(matchFieldList);
-                if (!validate) {
-                  matchFieldList[errKey] = errorMsg;
-                  return reject(errorMsg);
-                } else {
-                  matchFieldList[errKey] = undefined;
-                }
-              }
-            });
-          });
-        }
-        let fullArr = [...arr, ...delArr];
-        let resultArr = vexutils.clone(fullArr, true).map((item, i) => {
-          return this.handleFormatSubmit(item, i);
-        });
-        resolve(resultArr);
-      });
-    },
-
-    handleFormatSubmit(formdata, i, isDelete = false) {
-      for (let key in formdata) {
-        // 表单组件内部获取值时 不需要删除
-        if (!isDelete && key.startsWith("_") && key.endsWith("_")) {
-          delete formdata[key];
-        }
-        switch (this.formType[key] && this.formType[key].html_type) {
-          case "INPUT":
-          case "TEXTAREA":
-            if (this.formType[key] && this.formType[key].delete_before_after_spaces == 1) {
-              formdata[key] = vexutils.handleClearStrBlank(formdata[key]);
-            }
-            break;
-          case "SELECT":
-            // 如果是多选模式
-            if (String(this.formType[key].multi_select) === "0") {
-              formdata[key] = Array.isArray(formdata[key])
-                ? formdata[key].join(",")
-                : formdata[key];
-            }
-            break;
-          case "DIGITAL":
-          case "RADIO":
-          case "RADIO_BLOCK":
-            break;
-          case "SEARCH":
-            if ("tree" != this.formType[key]?.show_type) {
-              formdata[key] =
-                typeof formdata[key] === "string"
-                  ? formdata[key].split(">>>")[0]
-                  : formdata[key] && formdata[key].label && formdata[key].label.trim();
-            }
-            break;
-          case "SEARCH_MORE":
-            formdata[key] = this.handleGetSearMoreSubmit(key, formdata, i);
-            break;
-          case "CHECKBOX":
-          case "CHECKBOX_BLOCK":
-            formdata[key] = Array.isArray(formdata[key]) ? formdata[key].join(",") : formdata[key];
-            break;
-          case "DATETIME-INPUT":
-          case "DATE-INPUT":
-          case "TIME-INPUT":
-          case "DATE":
-            if (typeof formdata[key] == "string") {
-              formdata[key] = formdata[key] || null;
-            } else {
-              formdata[key] = formdata[key]
-                ? formdata[key].format(this.handlerGetDateType(this.formType[key]))
-                : null;
-            }
-            break;
-          default:
-            break;
-        }
-      }
-      delete formdata.field;
-      return formdata;
-    },
-    // 变量解析
-    handleSysParams(str, index) {
-      // let sysData = this.userInfo.map.sysParams;
-      let defaultValue = this.getDefaultValue(index);
-      let p = {
-        form: { ...defaultValue },
-        sys: this?.userInfo?.map?.sysParams || {},
-        db: { ...(this.dbParams || {}) }
-      };
-      str = vexutils.handleSysParams(str, p, index);
-      if ((!str && str != 0) || ["undefined", "null"].includes(str)) {
-        str = "";
-      }
-      return str;
-    },
-    getObjs(str) {
-      /**
-       * 处理：{type: "jsonb", value: ""}
-       *  */
-      let resObj = null;
-      if (vexutils.isJSON(str)) {
-        resObj = JSON.parse(str);
-        if (resObj.type === "jsonb") {
-          resObj = resObj.value;
-          if (resObj.includes("jsonb")) {
-            resObj = this.getObjs(resObj);
-          }
-          return resObj;
-        } else {
-          return str;
-        }
-      } else {
-        return str;
-      }
-    },
-    handleGetSearMoreSubmit(item, formdata, index) {
-      const { formType } = this;
-      const curItem = formType[item];
-      const defaultVal = JSON.stringify({ objs: [], objStr: "" });
-      var valueList = [];
-      var showList = [];
-      var keyName = curItem.val_key;
-      if (!curItem.wordbook) return defaultVal;
-      var value_key = curItem.wordbook.value_key;
-      var render_key = curItem.wordbook.render_key || [];
-      let defaultValue = this.getDefaultValue(index);
-      let defVal = defaultValue[keyName] || curItem.default_val;
-      // 修改时没有改变值，直接提交回填的值；
-      if (curItem.isOnchange !== "00" && defVal) {
-        defVal = curItem.filtration_val || this.handleSysParams(defVal, index);
-        defVal = this.getObjs(defVal);
-        return defVal || defaultVal;
-      }
-      let field = formdata.field;
-      let multipleSelected = this.multipleSelected[field];
-      const targetList = JSON.parse(JSON.stringify(multipleSelected[keyName] || []));
-      if (Array.isArray(formdata[item]) && formdata[item].length) {
-        formdata[item].forEach(ele => {
-          targetList.forEach(v => {
-            let [curValue_key] = typeof ele.key === "string" ? ele.key.split("-") : [""];
-            if (`${v[value_key]}-${v["myUniqueKey"]}` == ele.key || curValue_key == v[value_key]) {
-              // 删除 前端添加的关联信息
-              delete v.setting;
-              delete v.showLabel;
-              // v.myUniqueLabel != "theUniqueKey"
-
-              if (v["myUniqueKey"] && v.myUniqueLabel) {
-                var item = {
-                  [v.myUniqueLabel]: v["myUniqueKey"],
-                  [value_key]: v[value_key]
-                };
-                render_key.forEach(k => {
-                  item[k] = v[k];
-                });
-                valueList.push(item);
-              } else {
-                let { myUniqueKey, myUniqueLabel, ...rest } = v;
-                valueList.push(rest);
-              }
-              showList.push(v[value_key]);
-            }
-          });
-        });
-      }
-      return JSON.stringify({
-        objs: valueList,
-        objStr: showList.join(",")
-      });
-    },
-    // 获取日期格式
-    handlerGetDateType(data) {
-      let dateType;
-      switch (data.html_type) {
-        case "DATETIME-INPUT":
-          dateType = "YYYY-MM-DD HH:mm:ss";
-          break;
-        case "DATE-INPUT":
-          dateType = "YYYY-MM-DD";
-          break;
-        case "TIME-INPUT":
-          dateType = "HH:mm:ss";
-          break;
-        case "DATE":
-          data.date_format = data.date_format && data.date_format.replace(/yyyy/gi, "YYYY");
-          dateType = (data.date_format || "YYYY-MM-DD")
-            .replace(/yyyy-MM-dd/gi, "YYYY-MM-DD")
-            .replace(/hh:mm:ss/gi, "HH:mm:ss")
-            .replace(/hh:mm/gi, "HH:mm");
-          break;
-        default:
-          dateType = data.date_format || "YYYY-MM-DD";
-          break;
-      }
-      return dateType;
-    },
-    handlerFieldToggleList(list) {
-      if (!list.length) return;
-      let { fieldToggleSetting } = this.formConfig || {};
-      if (!fieldToggleSetting || !Object.keys(fieldToggleSetting).length) return;
-      list.forEach(row => {
-        this.handlerFieldToggle(fieldToggleSetting, row);
-      });
-    },
-    handlerFieldToggleRow(row) {
-      if (!row || !Object.keys(row).length) return;
-      let { fieldToggleSetting } = this.formConfig || {};
-      if (!fieldToggleSetting || !Object.keys(fieldToggleSetting).length) return;
-      this.handlerFieldToggle(fieldToggleSetting, row);
-    },
-    // 显示/隐藏/必填/非必填/可编辑/不可编辑
-    handlerFieldToggle(fieldToggleSetting, formData = {}) {
-      const configList = [
-        { key: "is_show", value: true },
-        { key: "is_show", value: false },
-        { key: "is_null", value: false },
-        { key: "is_null", value: true },
-        { key: "is_edit", value: true },
-        { key: "is_edit", value: false }
-      ];
-      const checkList = list =>
-        list.forEach(l => {
-          if (!l) {
-            l = [];
-          }
-        });
-
-      let resetObj = {}; // 缓存需要重置的字段。
-      let resetType = {};
-      let fieldObj = formData.__fieldObj__ || {};
-
-      const { handleGetItem, handleSetItem, handleGetFlagRes } = this;
-      //  分组处理
-      fieldToggleSetting.forEach(item => {
-        // 检测所有条件
-        let FlagList = handleGetFlagRes(item.conObj, formData);
-        let {
-          showField = [],
-          hideField = [],
-          requiredField = [],
-          notRequiredField = [],
-          enabledField = [],
-          disabledField = [],
-          isRestoreDefault = true
-        } = item;
-        // is_null = 0 必填
-        let fieldLists = [
-          [],
-          hideField,
-          requiredField,
-          notRequiredField,
-          enabledField,
-          disabledField
-        ];
-        const checkArr = [fieldLists];
-        checkArr.forEach(c => {
-          checkList(c);
-        });
-        let falg = false;
-        falg = FlagList.every(f => f);
-        if (falg) {
-          // 字段处理
-          showField.forEach(el => {
-            let findItem = handleGetItem(fieldObj, el);
-            handleSetItem(findItem, configList[0]);
-            resetObj[el] = false;
-          });
-          fieldLists.forEach((f, j) => {
-            f.forEach(el => {
-              let findItem = handleGetItem(fieldObj, el);
-              if (findItem) {
-                let { key, value } = configList[j];
-                // 表单项隐藏时, 重置状态
-                if (key === "is_show" && value === false) {
-                  // val_key != el && this.form.resetFields([el]);
-                  resetObj[el] = isRestoreDefault !== undefined && !isRestoreDefault ? false : true;
-                  // isRestoreDefault显示隐藏字段恢复默认值，存在且为false不恢复默认值，true反之
-                  resetType[el] = findItem.html_type;
-                }
-                handleSetItem(findItem, configList[j]);
-              }
-            });
-          });
-        }
-
-        this.resetFields(resetObj, resetType, formData);
-      });
-    },
-    resetFields(resetObj, resetType, formData) {
-      let fieldObj = formData.__fieldObj__ || {};
-      // 遍历处理完再处理重置表单值，某字段被多次处理，取最后一次的结果。
-      Object.keys(resetObj || {}).forEach(v => {
-        if (resetObj[v]) {
-          let defObj = fieldObj[v].__defObj__ || {};
-          if (resetType[v] != "SEARCH") {
-            let errKey = this.handleGetErrKey(fieldObj[v]);
-            formData[v] = defObj.defVal;
-            fieldObj[v][errKey] = undefined;
-          } else {
-            if (formData[v] != defObj.defVal && resetType[v] == "SEARCH") {
-              /** 特殊处理
-               * search 回复默认值
-               */
-              if (!formData[v] && !defObj.defVal) return;
-              let errKey = this.handleGetErrKey(fieldObj[v]);
-              formData[v] = defObj.defVal;
-              fieldObj[v][errKey] = undefined;
-            }
-          }
-        }
-      });
-    },
-    handleGetErrKey(field = {}) {
-      return `__${field.val_key}-errorMsg__`;
-    },
-    handleGetItem(fieldObj, el) {
-      return fieldObj[el];
-    },
-    handleSetItem(findItem, config) {
-      if (!(findItem?.val_key || "")) return;
-      const { key, value } = config;
-      let flagVal = value ? 1 : 0;
-      findItem && (findItem[key] = flagVal);
-    },
-    handleGetFlagRes(list, formData = {}) {
-      let FlagList = [];
-
-      if (!Array.isArray(list)) return FlagList;
-
-      const { handleCheckFlag } = this;
-      list.forEach(ele => {
-        if (!handleCheckFlag(ele, formData)) {
-          FlagList.push(false);
-        } else {
-          FlagList.push(true);
-        }
-      });
-      return FlagList;
-    },
-    /* 条件检测 */
-    handleCheckFlag(data = {}, formData = {}) {
-      // EQ 等于 NEQ 不等于
-      //           NULL       为空
-      // NOT_NULL     不为空
-      // CL      包含
-      // NC      不包含
-      // BIG大于、LESS    小于、BIGEQ    大于等于、LESSEQ    小于等于 仅用于 number
-      const is_number = val => !(parseFloat(Number(val)).toString() == "NaN");
-      const all_number = (a, b) => is_number(a) && is_number(b);
-
-      let obj = {
-        table: {
-          ...formData
-        },
-        form: {
-          ...formData
-        },
-        sys: this?.userInfo?.map?.sysParams || {},
-        db: this.dbParams || {}
-      };
-
-      const field_key = data.field_key;
-
-      let field_val =
-        typeof field_key === "string" && /\${(.*?)\}/g.test(field_key)
-          ? vexutils.handleSysParams(field_key, obj)
-          : formData[field_key];
-      let data_value =
-        typeof data.value === "string" ? vexutils.handleSysParams(data.value, obj) : data.value;
-      if (data.con == "EQ") {
-        return field_val == data_value;
-      } else if (data.con == "NEQ") {
-        return field_val != data_value;
-      } else if (data.con == "NULL") {
-        return !field_val && String(field_val) !== "0";
-      } else if (data.con == "NOT_NULL") {
-        return !!field_val || String(field_val) === "0";
-      } else if (data.con == "CL") {
-        return field_val && field_val.includes(data_value);
-      } else if (data.con == "NC") {
-        return !field_val || (field_val && !field_val.includes(data_value));
-      } else if (data.con == "BIG") {
-        if (all_number(field_val, data_value)) {
-          return +field_val > +data_value;
-        }
-      } else if (data.con == "BIGEQ") {
-        if (all_number(field_val, data_value)) {
-          return +field_val >= +data_value;
-        }
-      } else if (data.con == "LESS") {
-        if (all_number(field_val, data_value)) {
-          return +field_val < +data_value;
-        }
-      } else if (data.con == "LESSEQ") {
-        if (all_number(field_val, data_value)) {
-          return +field_val <= +data_value;
-        }
-      }
-    }
-  }
-});
-</script>
-<style lang="less" scoped>
-@import "./disabledDetail.less";
-.formTable-page {
-  width: 100%;
-  min-height: 100px;
-  max-height: 350px;
-  /deep/ .vxe-table {
-    &.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
-    &.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
-    &.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
-      padding: 0;
-    }
-    .vxe-table--body-wrapper::-webkit-scrollbar {
-      width: 10px;
-      height: 10px;
-    }
-    .vxe-table--empty-content {
-      height: 100%;
-      max-height: 100%;
-      > div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        max-height: 100%;
-      }
-    }
-    .vxe-cell {
-      width: 100%;
-      padding: 9px 10px;
-      max-height: unset;
-      line-height: unset;
-      height: unset;
-      min-height: 32px;
-      justify-content: center;
-      text-overflow: inherit !important;
-      .tableItem-select {
-        width: 100%;
-      }
-      textarea {
-        line-height: 20px;
-        height: 100%;
-        resize: none;
-      }
-      .select-content {
-        width: 100%;
-      }
-
-      .table-form-age {
-        display: flex;
-        width: 100%;
-        line-height: unset;
-        .table-age-input {
-          flex: 1;
-        }
-        .table-age-select {
-          .ant-select-selection__placeholder {
-            font-size: 12px;
-          }
-        }
-      }
-      .span-required {
-        color: red;
-      }
-    }
-    .vxe-body--column.col--ellipsis,
-    .vxe-editable .vxe-body--column,
-    .vxe-footer--column.col--ellipsis,
-    .vxe-header--column.col--ellipsis {
-      height: 40px;
-    }
-    .span-remark-icon {
-      color: #337ab7;
-      margin-left: 6px;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    class="formTable-page"
+    :class="{ 'formTable-page-disabled--detail': isDetail }"
+    :style="{ height: tableHeight + 'px', minHeight, maxHeight }"
+  >
+    <c-grid
+      :ref="`formTableGrid-${formTableItem.html_type}-${formTableItem.val_key}`"
+      :style="{ height: '100%' }"
+      border
+      show-header-overflow
+      highlight-hover-row
+      highlight-current-row
+      show-footer-overflow="title"
+      height="auto"
+      resizable
+      auto-resize
+      :row-id="handleRowId"
+      :row-key="true"
+      :checkbox-config="{
+        trigger: 'cell',
+        reserve: true,
+        highlight: true
+      }"
+      @cell-click="handlerClickRow"
+    >
+      <template v-slot:empty>
+        <div v-if="isShowEmpty">
+          暂无数据
+        </div>
+      </template>
+    </c-grid>
+  </div>
+</template>
+<script>
+import registerCom from "./components/table-component/register-com.js";
+import configData from "./components/table-component/config-data/index.js";
+import validate from "./components/table-item/validate-rules.js";
+import { Tooltip, Icon } from 'ant-design-vue';
+import Grid from '~/grid';
+import create from '@/core/create';
+import vexutils from '@/utils/vexutils';
+export default create({
+  name: "form-table",
+  components: {
+    [Grid.name]: Grid,
+    [Tooltip.name]: Tooltip,
+    [Icon.name]: Icon
+  },
+  mixins: [registerCom, validate],
+  provide() {
+    // form item 组件中用
+    return {
+      formTable: this
+    };
+  },
+  props: {
+    data: Array,
+    columnConfig: Object,
+    emptyItems: {
+      type: Object,
+      default: () => {
+        return {
+          noDataImg: "nodata",
+          noDataTip: ""
+        };
+      }
+    },
+    isOnlyDisplay: Boolean,
+    userInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    styleSetting: {
+      type: Object,
+      default: () => ({})
+    },
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    dbParams: {
+      type: Object
+    },
+    cacheUniqueKey: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    formType: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    formConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    formTableItem: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    isDetail: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isShowEmpty: false,
+      tableList: [],
+      fullTableList: [], // 软删除使用 需要全量数据
+      multipleSelected: {},
+      columns: [],
+      columnsLevel: 1
+    };
+  },
+
+  computed: {
+    handleRowId() {
+      return this.columnConfig?.primaryKey || "field";
+    },
+    handleComponent() {
+      return function(name, item) {
+        let tag = this.cmps[name];
+        return tag ? <tag item={item}></tag> : null;
+      };
+    },
+    formTableGridRef() {
+      return `formTableGrid-${this.formTableItem.html_type}-${this.formTableItem.val_key}`;
+    },
+    editField() {
+      return this.formTableItem?.wordbook?.idField;
+    },
+    delFlagField() {
+      return this.formTableItem?.wordbook?.delFlagField || "deleteKey";
+    },
+    rowH() {
+      if (this.isDetail || !this.tableList?.length) return 50;
+      let hasTextarea = this.columns
+        .map(item => {
+          if (item.html_type == "TEXTAREA") return item.initialize_high ? +item.initialize_high : 3;
+          return null;
+        })
+        .filter(Boolean);
+      let MaxH = 50;
+      if (hasTextarea.length) {
+        // line-height * rows + 10(固定) + 4(margin) + 18(padding)
+        MaxH = Math.max(...hasTextarea) * 20 + 10 + 4 + 18;
+      }
+      return MaxH;
+    },
+    minHeight() {
+      // columns 可能合并了头部
+      return this.rowH + this.columnsLevel * 40 + 10 + "px";
+    },
+    maxHeight() {
+      return this.rowH * 6 + this.columnsLevel * 40 + 10 + "px";
+    },
+    tableHeight() {
+      let len = this.tableList?.length || 1;
+      return len * this.rowH + this.columnsLevel * 40 + 10;
+    },
+    banClick() {
+      return this.isDetail || this.columnConfig?.hideCheck
+    }
+  },
+  watch: {
+    columnConfig(config) {
+      if (!config || !Object.keys(config).length) return;
+      this.loadColumn(config);
+    },
+    data(value) {
+      if (!value || !value.length) {
+        this.isShowEmpty = true;
+      }
+      this.loadData(value);
+    }
+  },
+  // 生命周期
+  created() {},
+  mounted() {
+    if (!this.isOnlyDisplay) return;
+    this.loadColumn(this.columnConfig);
+    this.loadData(this.data);
+  },
+
+  // 方法
+  methods: {
+    loadColumn(config) {
+      let columns = this.formatColumns(config);
+      columns = this.handleGroupColums(columns);
+      this.columns = columns;
+      const table = this.$refs[this.formTableGridRef];
+      if (!table) return;
+      table && table.reloadColumn(columns);
+    },
+    formatColumns(config) {
+      let fieldList = config.columns;
+      if (!fieldList || !fieldList.length) return;
+      const columns = [
+        {
+          type: "seq",
+          align: "center",
+          resizable: true,
+          width: "52",
+          showOverflow: true,
+          title: "序号"
+        }
+      ];
+      if (!this.banClick) {
+        columns.push({
+          type: "checkbox",
+          align: "center",
+          resizable: false,
+          width: "40",
+          showOverflow: true
+        });
+      }
+      // let currentColumns = JSON.parse(JSON.stringify(fieldList));
+      let currentColumns = fieldList;
+      currentColumns.forEach(item => {
+        this.handleColumns(item);
+      });
+      columns.push(...currentColumns);
+      return columns;
+    },
+    // 分组表头处理
+    handleGroupColums(columns) {
+      let { rowGroupSetting } = this.formTableItem?.wordbook || {};
+      if (!rowGroupSetting || !Object.keys(rowGroupSetting).length) return columns;
+      let { firstRowGroup, secondRowGroup } = rowGroupSetting;
+      if (!firstRowGroup || !firstRowGroup.length) return columns;
+      this.handleRowColumns(firstRowGroup, columns, "val_key");
+      this.columnsLevel = 2;
+      if (!secondRowGroup || !secondRowGroup.length) return columns;
+      this.handleRowColumns(secondRowGroup, columns, "title");
+      this.columnsLevel = 3;
+      return columns;
+    },
+    // 处理分组columns
+    handleRowColumns(rowColumns, columns, key) {
+      rowColumns.map(item => {
+        let children = [];
+        let spliceIndex = -1;
+        let indexArr = [];
+        item.list?.length &&
+          item.list.forEach(v => {
+            let matchItem = columns.find(column => column[key] === v);
+            if (matchItem) {
+              let matchIndex = columns.findIndex(column => column[key] === v);
+              indexArr.push(matchIndex);
+              delete matchItem.fixed;
+              children.push(matchItem);
+              columns.splice(matchIndex, 1);
+            }
+          });
+        let obj = {
+          title: this.$t(item.titleI18n || item.title),
+          visible: true,
+          children
+        };
+        spliceIndex = Math.min.apply(Math, indexArr);
+        spliceIndex > -1 && columns.splice(spliceIndex, 0, obj);
+      });
+    },
+    dateWidth(item) {
+      const { isMonthPicker_com, isDate_com, isTimePicker_com } = configData;
+      if (isDate_com(item.html_type)) {
+        if (isMonthPicker_com(item)) return item.colWidth;
+        if (isTimePicker_com(item)) return item.colWidth;
+        return 200;
+      }
+      return item.colWidth;
+    },
+    handleColumns(item) {
+      let colWidth = this.dateWidth(item);
+      Object.assign(item, {
+        visible: item.is_show == 1,
+        minWidth: colWidth || 200,
+        headerClassName: "mycolumn", // 文本溢出处理('tooltip' vxe-table当前版本存在bug)
+        align: "center",
+        sortable: this.isOnlyDisplay ? true : false,
+        com_name: this.getComName(item),
+        resizable: true,
+        slots: {
+          default: params => {
+            return this.formatter(params, item);
+          },
+          header: this.toolTipTitle(item)
+        }
+      });
+    },
+    getDefaultValue(rowIndex) {
+      if (!this.defaultValue) return {};
+      if (Array.isArray(this.defaultValue)) {
+        if (!this.defaultValue?.length) return {};
+        let index = rowIndex ? rowIndex : 0;
+        return this.defaultValue[index] || {};
+      }
+      return this.defaultValue;
+    },
+    formatter({ row, column, rowIndex }, col) {
+      row["_rowIndex_"] = rowIndex;
+      let own = column?._own || column?.own || col;
+      column["_own"] = column["own"] = own;
+      let Tag = this.cmps[own.com_name];
+      
+      let item = row.__fieldObj__[own.val_key];
+      let is_show = item?.is_show == 1;
+      if (!is_show) return "";
+      let defaultValue = this.getDefaultValue(rowIndex);
+
+      return [
+        <Tag
+          userInfo={this.userInfo}
+          styleSetting={this.styleSetting}
+          defaultValue={defaultValue}
+          dbParams={this.dbParams}
+          row={row}
+          item={item}
+          defaultFieldList={this.columnConfig?.columns}
+          cacheUniqueKey={this.cacheUniqueKey}
+          formType={this.formType}
+          onValueOnChange={this.getValueChange}
+          onTableBlur={this.tableBlur}
+          mainForm={this.formConfig}
+          isDetail={this.isDetail}
+          class={[item.html_type + "-container", "form-table-item"]}
+          handleFormTableValue={this.handleFormatSubmit}
+        ></Tag>
+        // <component
+        //   is={own.com_name}
+        //   class={own.html_type}
+        //   item={own}
+        //   onValueOnChange={this.getValueChange}
+        // />
+      ];
+    },
+    async loadData(list) {
+      if (!list || !list.length) {
+        this.$refs[this.formTableGridRef]?.loadData([]);
+        return
+      }
+      this.tableList = vexutils.clone(list, true);
+      this.fullTableList = vexutils.clone(list, true);
+      this.handlerFieldToggleList(this.tableList);
+      const table = this.$refs[this.formTableGridRef];
+      if (!table) return;
+      await table.loadData(this.tableList);
+      this.handleMultipleSelected(list);
+    },
+    hideColumn(hideArr = [], visible) {
+      let columns = this.columns || [];
+      for (let i = 0; i < hideArr.length; i++) {
+        let v = hideArr[i];
+        // 根据val_key 从树结构中查找匹配第一条数据的键、值、路径
+        let match = vexutils.findTree(columns, item => item.val_key === v, {
+          children: "children"
+        });
+        // item items parent nodes
+        if (match) {
+          let { item, nodes } = match;
+          // 没有合并表头
+          if (nodes.length === 1) {
+            item.is_show = visible;
+            item.visible = visible == 1 ? true : false;
+            !visible && this.resetTableListRowField(item);
+            continue;
+          }
+          this.setTreeNodeVisible(nodes, visible);
+        }
+      }
+      const table = this.$refs[this.formTableGridRef];
+      table && table.loadColumn(columns);
+    },
+    /**
+     * 合并的表头 根据路径 隐藏
+     */
+    setTreeNodeVisible(nodes, visible) {
+      let nodeLen = nodes.length;
+      let i = 0;
+      while (i < nodeLen) {
+        let item = nodes[i];
+        if (item?.children?.length === 1) {
+          item.visible = visible == 1 ? true : false;
+        }
+        i++;
+      }
+      let curItem = nodes[nodeLen - 1];
+      curItem.is_show = visible;
+      curItem.visible = visible == 1 ? true : false;
+      !visible && this.resetTableListRowField(curItem);
+    },
+    /**
+     * 隐藏的数据需要恢复默认值&校验的错误也去掉
+     */
+    resetTableListRowField(matchItem) {
+      this.tableList.forEach(item => {
+        let fieldObj = item.__fieldObj__;
+        let errKey = this.handleGetErrKey(fieldObj[matchItem.val_key]);
+        let defObj = fieldObj[matchItem.val_key]?.__defObj__ || {};
+        console.log(errKey);
+        item[matchItem.val_key] = defObj.defVal;
+        fieldObj[matchItem.val_key] && (fieldObj[matchItem.val_key][errKey] = undefined);
+      });
+    },
+    /**
+     * 新增一条
+     */
+    async addOne(row) {
+      const table = this.$refs[this.formTableGridRef];
+      if (!row || !table) {
+        let len = this.tableList.length;
+        this.$emit("AddComplete", len);
+        return;
+      }
+      try {
+        this.tableList.unshift(row);
+        let copyRow = vexutils.clone(row, true);
+        this.fullTableList.unshift(copyRow);
+        this.handlerFieldToggleRow(row);
+        await table.loadData(this.tableList);
+        this.handleMultipleSelected([row], true);
+      } catch (err) {
+        console.log(err);
+      }
+      let len = this.tableList.length;
+      this.$emit("AddComplete", len);
+    },
+    getCheckedList() {
+      return new Promise((resolve, reject) => {
+        const table = this.$refs[this.formTableGridRef];
+        if (!table) {
+          reject();
+        }
+        let checkedList = table.getCheckboxRecords(true);
+        let len = this.tableList.length;
+        this.$emit("DeleteComplete", len);
+        resolve(checkedList);
+      });
+    },
+    /**
+     * 删除数据
+     */
+    async removeData(delFlagField, checkedList) {
+      const table = this.$refs[this.formTableGridRef];
+      let len = this.tableList.length;
+      if (!table) {
+        this.$emit("DeleteComplete", len);
+        return;
+      }
+      checkedList.forEach(item => {
+        let matchIndex = this.tableList.findIndex(v => v.field === item.field);
+        let fullMatchIndex = this.fullTableList.findIndex(v => v.field === item.field);
+        if (matchIndex > -1) {
+          if (item[this.editField] && fullMatchIndex > -1) {
+            // 编辑是 可能修改了未保存 将软删除的数据替换
+            let spliceItem = vexutils.clone(this.tableList[matchIndex], true);
+            this.fullTableList.splice(fullMatchIndex, 1, spliceItem);
+          }
+          this.tableList.splice(matchIndex, 1);
+        }
+
+        if (fullMatchIndex > -1) {
+          if (item[this.editField]) {
+            // 编辑数据如果被删除 软删除 更改delFlagField状态
+            this.fullTableList[fullMatchIndex][delFlagField] = "1";
+          } else {
+            // 代表是当前新增的数据 没有id
+            this.fullTableList.splice(matchIndex, 1);
+          }
+        }
+      });
+
+      await table.remove(checkedList);
+
+      this.$emit("DeleteComplete", this.tableList.length);
+    },
+    /**
+     * 多选框
+     */
+    handleMultipleSelected(list, isAdd) {
+      let multipleSelected = {};
+      let fieldList = this.columnConfig.columns;
+      list.forEach((item, i) => {
+        let field = item.field;
+        multipleSelected[field] = {};
+        for (let key in item) {
+          if (!this.ignoreKey(key)) {
+            let isSearchMore = fieldList.find(v => v.val_key === key);
+            if (isSearchMore?.html_type === "SEARCH_MORE") {
+              multipleSelected[field][key] = [];
+            }
+          }
+        }
+      });
+      if (isAdd) {
+        Object.assign(this.multipleSelected, { ...multipleSelected });
+      } else {
+        this.multipleSelected = multipleSelected;
+      }
+    },
+    ignoreKey(key) {
+      return (key.startsWith("_") && key.endsWith("_")) || key == "field";
+    },
+    /**
+     * 单击行
+     */
+    handlerClickRow({ row, $event = {}, $rowIndex, triggerCheckbox, triggerTreeNode }) {
+      if (this.banClick) return;
+      let { className } = $event.target || {};
+      $event.preventDefault();
+      $event.stopPropagation();
+      // 触发checkbox 不执行下面逻辑
+      if (className?.includes("vxe-checkbox--icon")) return;
+
+      let table = this.$refs[this.formTableGridRef];
+      let isChecked = table.isCheckedByCheckboxRow(row);
+      let checkedLen = table.getCheckboxRecords()?.length;
+
+      // 单独处理checkbox cell
+      let isCheckCell =
+        !triggerCheckbox &&
+        (className.includes("col--checkbox") ||
+          $event.target?.lastChild?.className?.includes("vxe-cell--checkbox"));
+
+      if (isCheckCell) return;
+
+      table.setAllCheckboxRow(false);
+
+      // 无选中行 -> 点击某一行 -> 选中该行
+      if (!checkedLen && !isChecked) {
+        table.setCheckboxRow([row], true);
+        return;
+      }
+      // 只有一条选中 -> 点击选中行 -> 取消选中行
+      if (checkedLen == 1 && isChecked) {
+        table.setCheckboxRow([row], false);
+        return;
+      }
+
+      // 已选中多行 -> 点击某一行 -> 选中该行
+      table.setCheckboxRow(row, true);
+    },
+    /**
+     * 多选selectList
+     */
+    getValueChange(val, item, row) {
+      console.log(val, item, row);
+      let cacheKey = item.val_key;
+      let field = row.field;
+      this.$set(this.multipleSelected[field], cacheKey, val);
+    },
+    /**
+     * 组件blur后触发 隐藏&显示条件需要
+     */
+    tableBlur(item, row, config) {
+      // console.log(item, row);
+      this.handlerFieldToggleRow(row);
+      this.$emit("formTableBlur", config);
+    },
+    toolTipTitle(item) {
+      let required = item.is_null == "0";
+      let remark = item.remark;
+      return () => {
+        return [
+          // <TextOverTooltip
+          //   refName={"item-" + item[this.handleRowId]}
+          //   content={name}
+          //   isAlias={isAlias}
+          // >
+          <span>
+            {required && <span class="span-required">*</span>}
+            <span domPropsInnerHTML={this.getItemTitle(item)}></span>
+            {remark && (
+              <a-tooltip title={remark}>
+                <a-icon class="span-remark-icon" type="question-circle" />
+              </a-tooltip>
+            )}
+          </span>
+          // </TextOverTooltip>
+        ];
+      };
+    },
+    handleTheSpace(v) {
+      if (typeof v === "string") {
+        return v.trim();
+      }
+      return v;
+    },
+    getItemTitle(item) {
+      let title = this.handleTheSpace(item.editor_title) || item.alias || item.name;
+      if (this.handleIsFormBoldOpen(item)) {
+        title += "<span class='required-text'> (必填) </span >";
+      }
+      return title;
+    },
+    handleIsFormBoldOpen(item) {
+      let res = item.is_null == "0" && this.styleSetting?.formBoldOpen;
+      return res;
+    },
+    validateFormMethod(isValidate) {
+      if (!this.fullTableList.length) return Promise.resolve();
+      // let arr = vexutils.clone(this.tableList, true);
+      let arr = this.tableList;
+
+      let fieldList = this.columnConfig.columns || [];
+      if (!fieldList.length) return Promise.resolve();
+      let deleteKey = this.delFlagField;
+      let delArr = this.fullTableList.filter(item => item[deleteKey] == 1);
+      if (!this.tableList.length) {
+        isValidate = false;
+      }
+      return new Promise((resolve, reject) => {
+        // 是否校验
+        if (isValidate) {
+          arr.forEach(item => {
+            Object.keys(item).forEach(key => {
+              // console.log(item.field);
+              let fieldObj = item.__fieldObj__;
+              let matchFieldList = fieldObj[key];
+              if (matchFieldList) {
+                let value = item[key];
+                // console.log(value);
+                let { validate, errorMsg } = this.handleGetRules(value, matchFieldList, true);
+                // console.log(validate, errorMsg);
+                let errKey = this.handleGetErrKey(matchFieldList);
+                if (!validate) {
+                  matchFieldList[errKey] = errorMsg;
+                  return reject(errorMsg);
+                } else {
+                  matchFieldList[errKey] = undefined;
+                }
+              }
+            });
+          });
+        }
+        let fullArr = [...arr, ...delArr];
+        let resultArr = vexutils.clone(fullArr, true).map((item, i) => {
+          return this.handleFormatSubmit(item, i);
+        });
+        resolve(resultArr);
+      });
+    },
+
+    handleFormatSubmit(formdata, i, isDelete = false) {
+      for (let key in formdata) {
+        // 表单组件内部获取值时 不需要删除
+        if (!isDelete && key.startsWith("_") && key.endsWith("_")) {
+          delete formdata[key];
+        }
+        switch (this.formType[key] && this.formType[key].html_type) {
+          case "INPUT":
+          case "TEXTAREA":
+            if (this.formType[key] && this.formType[key].delete_before_after_spaces == 1) {
+              formdata[key] = vexutils.handleClearStrBlank(formdata[key]);
+            }
+            break;
+          case "SELECT":
+            // 如果是多选模式
+            if (String(this.formType[key].multi_select) === "0") {
+              formdata[key] = Array.isArray(formdata[key])
+                ? formdata[key].join(",")
+                : formdata[key];
+            }
+            break;
+          case "DIGITAL":
+          case "RADIO":
+          case "RADIO_BLOCK":
+            break;
+          case "SEARCH":
+            if ("tree" != this.formType[key]?.show_type) {
+              formdata[key] =
+                typeof formdata[key] === "string"
+                  ? formdata[key].split(">>>")[0]
+                  : formdata[key] && formdata[key].label && formdata[key].label.trim();
+            }
+            break;
+          case "SEARCH_MORE":
+            formdata[key] = this.handleGetSearMoreSubmit(key, formdata, i);
+            break;
+          case "CHECKBOX":
+          case "CHECKBOX_BLOCK":
+            formdata[key] = Array.isArray(formdata[key]) ? formdata[key].join(",") : formdata[key];
+            break;
+          case "DATETIME-INPUT":
+          case "DATE-INPUT":
+          case "TIME-INPUT":
+          case "DATE":
+            if (typeof formdata[key] == "string") {
+              formdata[key] = formdata[key] || null;
+            } else {
+              formdata[key] = formdata[key]
+                ? formdata[key].format(this.handlerGetDateType(this.formType[key]))
+                : null;
+            }
+            break;
+          default:
+            break;
+        }
+      }
+      delete formdata.field;
+      return formdata;
+    },
+    // 变量解析
+    handleSysParams(str, index) {
+      // let sysData = this.userInfo.map.sysParams;
+      let defaultValue = this.getDefaultValue(index);
+      let p = {
+        form: { ...defaultValue },
+        sys: this?.userInfo?.map?.sysParams || {},
+        db: { ...(this.dbParams || {}) }
+      };
+      str = vexutils.handleSysParams(str, p, index);
+      if ((!str && str != 0) || ["undefined", "null"].includes(str)) {
+        str = "";
+      }
+      return str;
+    },
+    getObjs(str) {
+      /**
+       * 处理：{type: "jsonb", value: ""}
+       *  */
+      let resObj = null;
+      if (vexutils.isJSON(str)) {
+        resObj = JSON.parse(str);
+        if (resObj.type === "jsonb") {
+          resObj = resObj.value;
+          if (resObj.includes("jsonb")) {
+            resObj = this.getObjs(resObj);
+          }
+          return resObj;
+        } else {
+          return str;
+        }
+      } else {
+        return str;
+      }
+    },
+    handleGetSearMoreSubmit(item, formdata, index) {
+      const { formType } = this;
+      const curItem = formType[item];
+      const defaultVal = JSON.stringify({ objs: [], objStr: "" });
+      var valueList = [];
+      var showList = [];
+      var keyName = curItem.val_key;
+      if (!curItem.wordbook) return defaultVal;
+      var value_key = curItem.wordbook.value_key;
+      var render_key = curItem.wordbook.render_key || [];
+      let defaultValue = this.getDefaultValue(index);
+      let defVal = defaultValue[keyName] || curItem.default_val;
+      // 修改时没有改变值，直接提交回填的值；
+      if (curItem.isOnchange !== "00" && defVal) {
+        defVal = curItem.filtration_val || this.handleSysParams(defVal, index);
+        defVal = this.getObjs(defVal);
+        return defVal || defaultVal;
+      }
+      let field = formdata.field;
+      let multipleSelected = this.multipleSelected[field];
+      const targetList = JSON.parse(JSON.stringify(multipleSelected[keyName] || []));
+      if (Array.isArray(formdata[item]) && formdata[item].length) {
+        formdata[item].forEach(ele => {
+          targetList.forEach(v => {
+            let [curValue_key] = typeof ele.key === "string" ? ele.key.split("-") : [""];
+            if (`${v[value_key]}-${v["myUniqueKey"]}` == ele.key || curValue_key == v[value_key]) {
+              // 删除 前端添加的关联信息
+              delete v.setting;
+              delete v.showLabel;
+              // v.myUniqueLabel != "theUniqueKey"
+
+              if (v["myUniqueKey"] && v.myUniqueLabel) {
+                var item = {
+                  [v.myUniqueLabel]: v["myUniqueKey"],
+                  [value_key]: v[value_key]
+                };
+                render_key.forEach(k => {
+                  item[k] = v[k];
+                });
+                valueList.push(item);
+              } else {
+                let { myUniqueKey, myUniqueLabel, ...rest } = v;
+                valueList.push(rest);
+              }
+              showList.push(v[value_key]);
+            }
+          });
+        });
+      }
+      return JSON.stringify({
+        objs: valueList,
+        objStr: showList.join(",")
+      });
+    },
+    // 获取日期格式
+    handlerGetDateType(data) {
+      let dateType;
+      switch (data.html_type) {
+        case "DATETIME-INPUT":
+          dateType = "YYYY-MM-DD HH:mm:ss";
+          break;
+        case "DATE-INPUT":
+          dateType = "YYYY-MM-DD";
+          break;
+        case "TIME-INPUT":
+          dateType = "HH:mm:ss";
+          break;
+        case "DATE":
+          data.date_format = data.date_format && data.date_format.replace(/yyyy/gi, "YYYY");
+          dateType = (data.date_format || "YYYY-MM-DD")
+            .replace(/yyyy-MM-dd/gi, "YYYY-MM-DD")
+            .replace(/hh:mm:ss/gi, "HH:mm:ss")
+            .replace(/hh:mm/gi, "HH:mm");
+          break;
+        default:
+          dateType = data.date_format || "YYYY-MM-DD";
+          break;
+      }
+      return dateType;
+    },
+    handlerFieldToggleList(list) {
+      if (!list.length) return;
+      let { fieldToggleSetting } = this.formConfig || {};
+      if (!fieldToggleSetting || !Object.keys(fieldToggleSetting).length) return;
+      list.forEach(row => {
+        this.handlerFieldToggle(fieldToggleSetting, row);
+      });
+    },
+    handlerFieldToggleRow(row) {
+      if (!row || !Object.keys(row).length) return;
+      let { fieldToggleSetting } = this.formConfig || {};
+      if (!fieldToggleSetting || !Object.keys(fieldToggleSetting).length) return;
+      this.handlerFieldToggle(fieldToggleSetting, row);
+    },
+    // 显示/隐藏/必填/非必填/可编辑/不可编辑
+    handlerFieldToggle(fieldToggleSetting, formData = {}) {
+      const configList = [
+        { key: "is_show", value: true },
+        { key: "is_show", value: false },
+        { key: "is_null", value: false },
+        { key: "is_null", value: true },
+        { key: "is_edit", value: true },
+        { key: "is_edit", value: false }
+      ];
+      const checkList = list =>
+        list.forEach(l => {
+          if (!l) {
+            l = [];
+          }
+        });
+
+      let resetObj = {}; // 缓存需要重置的字段。
+      let resetType = {};
+      let fieldObj = formData.__fieldObj__ || {};
+
+      const { handleGetItem, handleSetItem, handleGetFlagRes } = this;
+      //  分组处理
+      fieldToggleSetting.forEach(item => {
+        // 检测所有条件
+        let FlagList = handleGetFlagRes(item.conObj, formData);
+        let {
+          showField = [],
+          hideField = [],
+          requiredField = [],
+          notRequiredField = [],
+          enabledField = [],
+          disabledField = [],
+          isRestoreDefault = true
+        } = item;
+        // is_null = 0 必填
+        let fieldLists = [
+          [],
+          hideField,
+          requiredField,
+          notRequiredField,
+          enabledField,
+          disabledField
+        ];
+        const checkArr = [fieldLists];
+        checkArr.forEach(c => {
+          checkList(c);
+        });
+        let falg = false;
+        falg = FlagList.every(f => f);
+        if (falg) {
+          // 字段处理
+          showField.forEach(el => {
+            let findItem = handleGetItem(fieldObj, el);
+            handleSetItem(findItem, configList[0]);
+            resetObj[el] = false;
+          });
+          fieldLists.forEach((f, j) => {
+            f.forEach(el => {
+              let findItem = handleGetItem(fieldObj, el);
+              if (findItem) {
+                let { key, value } = configList[j];
+                // 表单项隐藏时, 重置状态
+                if (key === "is_show" && value === false) {
+                  // val_key != el && this.form.resetFields([el]);
+                  resetObj[el] = isRestoreDefault !== undefined && !isRestoreDefault ? false : true;
+                  // isRestoreDefault显示隐藏字段恢复默认值，存在且为false不恢复默认值，true反之
+                  resetType[el] = findItem.html_type;
+                }
+                handleSetItem(findItem, configList[j]);
+              }
+            });
+          });
+        }
+
+        this.resetFields(resetObj, resetType, formData);
+      });
+    },
+    resetFields(resetObj, resetType, formData) {
+      let fieldObj = formData.__fieldObj__ || {};
+      // 遍历处理完再处理重置表单值，某字段被多次处理，取最后一次的结果。
+      Object.keys(resetObj || {}).forEach(v => {
+        if (resetObj[v]) {
+          let defObj = fieldObj[v].__defObj__ || {};
+          if (resetType[v] != "SEARCH") {
+            let errKey = this.handleGetErrKey(fieldObj[v]);
+            formData[v] = defObj.defVal;
+            fieldObj[v][errKey] = undefined;
+          } else {
+            if (formData[v] != defObj.defVal && resetType[v] == "SEARCH") {
+              /** 特殊处理
+               * search 回复默认值
+               */
+              if (!formData[v] && !defObj.defVal) return;
+              let errKey = this.handleGetErrKey(fieldObj[v]);
+              formData[v] = defObj.defVal;
+              fieldObj[v][errKey] = undefined;
+            }
+          }
+        }
+      });
+    },
+    handleGetErrKey(field = {}) {
+      return `__${field.val_key}-errorMsg__`;
+    },
+    handleGetItem(fieldObj, el) {
+      return fieldObj[el];
+    },
+    handleSetItem(findItem, config) {
+      if (!(findItem?.val_key || "")) return;
+      const { key, value } = config;
+      let flagVal = value ? 1 : 0;
+      findItem && (findItem[key] = flagVal);
+    },
+    handleGetFlagRes(list, formData = {}) {
+      let FlagList = [];
+
+      if (!Array.isArray(list)) return FlagList;
+
+      const { handleCheckFlag } = this;
+      list.forEach(ele => {
+        if (!handleCheckFlag(ele, formData)) {
+          FlagList.push(false);
+        } else {
+          FlagList.push(true);
+        }
+      });
+      return FlagList;
+    },
+    /* 条件检测 */
+    handleCheckFlag(data = {}, formData = {}) {
+      // EQ 等于 NEQ 不等于
+      //           NULL       为空
+      // NOT_NULL     不为空
+      // CL      包含
+      // NC      不包含
+      // BIG大于、LESS    小于、BIGEQ    大于等于、LESSEQ    小于等于 仅用于 number
+      const is_number = val => !(parseFloat(Number(val)).toString() == "NaN");
+      const all_number = (a, b) => is_number(a) && is_number(b);
+
+      let obj = {
+        table: {
+          ...formData
+        },
+        form: {
+          ...formData
+        },
+        sys: this?.userInfo?.map?.sysParams || {},
+        db: this.dbParams || {}
+      };
+
+      const field_key = data.field_key;
+
+      let field_val =
+        typeof field_key === "string" && /\${(.*?)\}/g.test(field_key)
+          ? vexutils.handleSysParams(field_key, obj)
+          : formData[field_key];
+      let data_value =
+        typeof data.value === "string" ? vexutils.handleSysParams(data.value, obj) : data.value;
+      if (data.con == "EQ") {
+        return field_val == data_value;
+      } else if (data.con == "NEQ") {
+        return field_val != data_value;
+      } else if (data.con == "NULL") {
+        return !field_val && String(field_val) !== "0";
+      } else if (data.con == "NOT_NULL") {
+        return !!field_val || String(field_val) === "0";
+      } else if (data.con == "CL") {
+        return field_val && field_val.includes(data_value);
+      } else if (data.con == "NC") {
+        return !field_val || (field_val && !field_val.includes(data_value));
+      } else if (data.con == "BIG") {
+        if (all_number(field_val, data_value)) {
+          return +field_val > +data_value;
+        }
+      } else if (data.con == "BIGEQ") {
+        if (all_number(field_val, data_value)) {
+          return +field_val >= +data_value;
+        }
+      } else if (data.con == "LESS") {
+        if (all_number(field_val, data_value)) {
+          return +field_val < +data_value;
+        }
+      } else if (data.con == "LESSEQ") {
+        if (all_number(field_val, data_value)) {
+          return +field_val <= +data_value;
+        }
+      }
+    }
+  }
+});
+</script>
+<style lang="less" scoped>
+@import "./disabledDetail.less";
+.formTable-page {
+  width: 100%;
+  min-height: 100px;
+  max-height: 350px;
+  /deep/ .vxe-table {
+    &.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
+    &.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
+    &.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
+      padding: 0;
+    }
+    .vxe-table--body-wrapper::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    .vxe-table--empty-content {
+      height: 100%;
+      max-height: 100%;
+      > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        max-height: 100%;
+      }
+    }
+    .vxe-cell {
+      width: 100%;
+      padding: 9px 10px;
+      max-height: unset;
+      line-height: unset;
+      height: unset;
+      min-height: 32px;
+      justify-content: center;
+      text-overflow: inherit !important;
+      .tableItem-select {
+        width: 100%;
+      }
+      textarea {
+        line-height: 20px;
+        height: 100%;
+        resize: none;
+      }
+      .select-content {
+        width: 100%;
+      }
+
+      .table-form-age {
+        display: flex;
+        width: 100%;
+        line-height: unset;
+        .table-age-input {
+          flex: 1;
+        }
+        .table-age-select {
+          .ant-select-selection__placeholder {
+            font-size: 12px;
+          }
+        }
+      }
+      .span-required {
+        color: red;
+      }
+    }
+    .vxe-body--column.col--ellipsis,
+    .vxe-editable .vxe-body--column,
+    .vxe-footer--column.col--ellipsis,
+    .vxe-header--column.col--ellipsis {
+      height: 40px;
+    }
+    .span-remark-icon {
+      color: #337ab7;
+      margin-left: 6px;
+    }
+  }
+}
+</style>