{"remainingRequest":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\artfess-module\\src\\components\\HtTable.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\artfess-module\\src\\components\\HtTable.vue","mtime":1675232038590},{"path":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\artfess-module\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport utils from \"@/utils.js\";\r\nimport _ from \"lodash\";\r\n\r\nexport default {\r\n  name: \"ht-table\",\r\n  props: {\r\n    showAdvancedSearchText: {\r\n      type: String,\r\n      default: \"基础搜索\"\r\n    },\r\n    hideAdvancedSearchText: {\r\n      type: String,\r\n      default: \"高级搜索\"\r\n    },\r\n    searchBtnStyle: {\r\n      type: String\r\n    },\r\n    justShowSearch: {\r\n      //为true时只显示高级搜索中的查询条件\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    paginationJustify: {\r\n      type: String,\r\n      default: \"end\",\r\n      validator: function(value) {\r\n        return (\r\n          [\"start\", \"end\", \"center\", \"space-around\", \"space-between\"].indexOf(\r\n            value\r\n          ) !== -1\r\n        );\r\n      }\r\n    },\r\n    data: Array,\r\n    showHeader: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    pageResult: {\r\n      type: Object,\r\n      default: () => {\r\n        return { page: 1, pageSize: 50, total: 0 };\r\n      }\r\n    },\r\n    pageSizes: {\r\n      type: Array,\r\n      default: () => {\r\n        return [10, 20, 50, 100, 200, 300, 500];\r\n      }\r\n    },\r\n    pagerCount: {\r\n      type: Number,\r\n      default: 11\r\n    },\r\n    nopagination: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    highlightCurrentRow: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    selectable: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    quickSearchProps: [String, Array],\r\n    headerRowClassName: [String, Function],\r\n    debounce: {\r\n      type: Number,\r\n      default: 1500\r\n    },\r\n    showExport: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    showCustomColumn: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    defaultQuerys: {\r\n      type: Array,\r\n      default() {\r\n        return [];\r\n      }\r\n    },\r\n    defaultSorter: {\r\n      type: Array,\r\n      default() {\r\n        return [];\r\n      }\r\n    },\r\n    filterSelectable: {\r\n      type: Function\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      querys: [],\r\n      sorter: null,\r\n      quickSearchWord: null,\r\n      quickSearchPlaceholder: \"请输入搜索内容\",\r\n      quickSearchConfig: null,\r\n      hasSearchPanel: false,\r\n      filters: {},\r\n      pagination: { ...this.pageResult },\r\n      tableMaxHeight: 400,\r\n      showAdvancedSearch: false,\r\n      loading: false,\r\n      columns: [],\r\n      customColumns: [],\r\n      customColumnsHashCode: null,\r\n      currentCustomColumns: null,\r\n      customColumnDialogVisible: false,\r\n      selection: []\r\n    };\r\n  },\r\n  created() {\r\n    // 从插槽中获取到当前表格的所有列\r\n    this.$slots.default.forEach(n => {\r\n      if (n && n.componentOptions) {\r\n        const pd = n.componentOptions.propsData;\r\n        // 将当前表格的列放入一个数组\r\n        this.columns.push(pd);\r\n        // 将当前有有prop和label的列放入自定义列表项的数组中\r\n        if (pd.prop && pd.label) {\r\n          this.customColumns.push({\r\n            key: pd.prop,\r\n            value: pd.label,\r\n            checked: !(pd.hidden === true || pd.hidden === \"\")\r\n          });\r\n        }\r\n      }\r\n    });\r\n    // 获取当前自定义列表项的hashCode\r\n    this.customColumnsHashCode = utils.hashCode(\r\n      JSON.stringify(this.customColumns)\r\n    );\r\n    this.quickSearchProps && this.generateQuickSearchConfig();\r\n    this.$on(\"advance-search\", data => this.advanceSearch(data));\r\n  },\r\n  computed: {\r\n    calDefaultQuerys: function() {\r\n      let calQuerys = [];\r\n      let query = {\r\n        group: \"defaultQueryGroup\",\r\n        operation: \"EQUAL\",\r\n        relation: \"AND\"\r\n      };\r\n      this.defaultQuerys.forEach(c => {\r\n        calQuerys.push({ ...query, ...c });\r\n      });\r\n      return calQuerys;\r\n    }\r\n  },\r\n  watch: {\r\n    justShowSearch: {\r\n      handler(val) {\r\n        if (val) {\r\n          this.showAdvancedSearch = true;\r\n        }\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  mounted() {\r\n    this.debounceQuickSearch = _.debounce(() => {\r\n      this.quickSearch();\r\n    }, this.debounce);\r\n    // 判断是否有高级搜索面板\r\n    this.hasSearchPanel = !!this.$scopedSlots.search;\r\n    this.load();\r\n    this.calcTableHeight();\r\n    this.$watch(\"showAdvancedSearch\", (n, o) => {\r\n      if (n !== o) {\r\n        if (n) {\r\n          this.quickSearchWord = null;\r\n        }\r\n        // 显示或收起搜索面板时，重新计算表格高度\r\n        this.calcTableHeight(500);\r\n      }\r\n    });\r\n    this.$watch(\"pageResult\", (n, o) => {\r\n      if (n !== o) {\r\n        this.pagination = { ...n };\r\n      }\r\n    });\r\n    /**\r\n     * 统一使用回车查询\r\n    this.$watch(\"quickSearchWord\", (n, o) => {\r\n      if (n !== o) {\r\n        this.debounceQuickSearch();\r\n      }\r\n    });\r\n     */\r\n    this.$root.$on(\"resize\", () => {\r\n      this.calcTableHeight(500);\r\n    });\r\n    this.initialCustomColumn();\r\n  },\r\n  methods: {\r\n    quickSearch() {\r\n      // 先删除快速查询的查询条件\r\n      this.clearQueryByGroupName(\"quick\");\r\n      this.clearQueryByGroupName(\"advance\");\r\n      this.quickSearchWord &&\r\n        this.quickSearchConfig.forEach(c => {\r\n          let query = {\r\n            property: c.prop,\r\n            value: c.numType\r\n              ? parseInt(this.quickSearchWord.trim())\r\n              : this.quickSearchWord.trim(),\r\n            group: \"quick\",\r\n            relation: \"OR\",\r\n            operation: c.operation ? c.operation : \"LIKE\"\r\n          };\r\n          this.querys.push(query);\r\n        });\r\n      this.load();\r\n    },\r\n    advanceSearch(data) {\r\n      if (this.loading || !this.showAdvancedSearch) {\r\n        return;\r\n      }\r\n      this.clearQueryByGroupName(\"quick\");\r\n      this.clearQueryByGroupName(\"advance\");\r\n      data &&\r\n        data.forEach(d => {\r\n          let query = {\r\n            property: d.prop,\r\n            value: d.value,\r\n            group: \"advance\",\r\n            relation: d.relation,\r\n            operation: d.operation\r\n          };\r\n          query.value && this.querys.push(query);\r\n        });\r\n      this.load();\r\n    },\r\n    // 加载数据\r\n    load(doNotResetPage) {\r\n      this.loading = true;\r\n      // 默认重置页码为第一页\r\n      if (!doNotResetPage) {\r\n        this.pagination.page = 1;\r\n      }\r\n      let param = {\r\n        pageBean: this.pagination\r\n      };\r\n\r\n      if (this.sorter && this.sorter.length > 0) {\r\n        param.sorter = this.sorter;\r\n      }\r\n      // 处理排序字段\r\n      if (this.defaultSorter.length > 0) {\r\n        if (!param.sorter) {\r\n          param.sorter = [];\r\n        }\r\n        this.defaultSorter.forEach(item => {\r\n          param.sorter.remove(item);\r\n        });\r\n        param.sorter = param.sorter.concat(this.defaultSorter);\r\n      }\r\n      // 处理过滤条件\r\n      this.handleFilters();\r\n\r\n      if (this.querys && this.querys.length > 0) {\r\n        param.querys = this.querys;\r\n      }\r\n\r\n      // 处理查询条件\r\n      if (this.calDefaultQuerys.length > 0) {\r\n        if (!param.querys) {\r\n          param.querys = [];\r\n        }\r\n        this.calDefaultQuerys.forEach(item => {\r\n          param.querys.remove(item);\r\n        });\r\n        param.querys = param.querys.concat(this.calDefaultQuerys);\r\n      }\r\n\r\n      const me = this;\r\n      // 防止外部没有回调，设置10秒后自动取消加载中的状态\r\n      const finalTickCB = setTimeout(function() {\r\n        me.loading = false;\r\n      }, 10000);\r\n\r\n      if (this.nopagination) {\r\n        param.pageBean = {};\r\n      }\r\n      this.$emit(\"load\", { ...param }, () => {\r\n        // 外部已经回调的情况下，取消倒计时\r\n        clearTimeout(finalTickCB);\r\n        me.loading = false;\r\n        setTimeout(() => {\r\n          me.$refs.quickSearch &&\r\n            me.$refs.quickSearch.$children[0].$el.children[0].focus();\r\n        });\r\n      });\r\n    },\r\n    // 通过列属性获取列标签\r\n    getColumnLabelByProp(prop) {\r\n      let label = null;\r\n      if (!prop) {\r\n        return label;\r\n      }\r\n      this.columns.forEach(c => {\r\n        if (c.prop && c.prop === prop) {\r\n          label = c.label;\r\n        }\r\n      });\r\n      return label;\r\n    },\r\n    // 构建快速搜索配置项\r\n    generateQuickSearchConfig() {\r\n      let labelAry = [];\r\n      if (typeof this.quickSearchProps == \"string\") {\r\n        const props = utils.stringSplit(this.quickSearchProps, \",\");\r\n        this.quickSearchConfig = [];\r\n        props.forEach(prop => {\r\n          const label = this.getColumnLabelByProp(prop);\r\n          if (label) {\r\n            labelAry.push(label);\r\n            this.quickSearchConfig.push({ prop, label });\r\n          }\r\n        });\r\n      }\r\n      if (typeof this.quickSearchProps == \"object\") {\r\n        this.quickSearchProps.forEach(prop => {\r\n          if (prop && prop.label) {\r\n            labelAry.push(prop.label);\r\n          }\r\n        });\r\n        this.quickSearchConfig = [...this.quickSearchProps];\r\n      }\r\n      this.quickSearchPlaceholder = `请输入${labelAry.join(\",\")}来搜索`;\r\n    },\r\n    // 通过分组名称清除对应查询条件\r\n    clearQueryByGroupName(groupName) {\r\n      // 待删除的查询条件\r\n      let toDelete = [];\r\n      this.querys &&\r\n        this.querys.forEach(query => {\r\n          if (query.group == groupName) {\r\n            toDelete.push(query);\r\n          }\r\n        });\r\n      toDelete.forEach(d => {\r\n        this.querys.remove(d);\r\n      });\r\n    },\r\n    handleFilters() {\r\n      this.clearQueryByGroupName(\"filter\");\r\n      // 将过滤条件添加查询参数数组中\r\n      if (this.filters && Object.keys(this.filters).length > 0) {\r\n        Object.keys(this.filters).forEach(k => {\r\n          const filter = this.filters[k];\r\n          let query = {\r\n            property: k,\r\n            value: filter[0],\r\n            group: \"filter\",\r\n            relation: \"AND\"\r\n          };\r\n          if (filter.length == 1) {\r\n            query.operation = \"EQUAL\";\r\n            this.querys.push(query);\r\n          } else if (filter.length > 1) {\r\n            query.operation = \"IN\";\r\n            query.value = filter;\r\n            this.querys.push(query);\r\n          }\r\n        });\r\n      }\r\n    },\r\n    handleSizeChange(pageSize) {\r\n      this.pagination = { ...this.pagination, pageSize };\r\n      this.load();\r\n    },\r\n    handleCurrentChange(page) {\r\n      this.pagination = { ...this.pagination, page };\r\n      // 翻页时不重置页码\r\n      this.load(true);\r\n    },\r\n    handleRowClick(row, column, event) {\r\n      this.$emit(\"row-click\", row, column, event);\r\n    },\r\n    handleRowDBClick(row, column, event) {\r\n      this.$emit(\"row-dblclick\", row, column, event);\r\n    },\r\n    handleTableSelect(selection, row) {\r\n      this.selection = selection;\r\n      if (row) {\r\n        this.$emit(\"select\", selection, row);\r\n      } else {\r\n        this.$emit(\"select-all\", selection);\r\n      }\r\n    },\r\n    handleSortChange(column) {\r\n      if (!column.order) {\r\n        this.sorter = null;\r\n      } else {\r\n        this.sorter = [\r\n          {\r\n            property: column.prop,\r\n            direction: column.order == \"ascending\" ? \"ASC\" : \"DESC\"\r\n          }\r\n        ];\r\n      }\r\n      this.load();\r\n      this.$emit(\"sort-change\", column);\r\n    },\r\n    handleFilterChange(m) {\r\n      this.filters = { ...this.filters, ...m };\r\n      Object.keys(this.filters).forEach(k => {\r\n        if (!this.filters[k] || this.filters[k].length == 0) {\r\n          delete this.filters[k];\r\n        }\r\n      });\r\n      this.load();\r\n      this.$emit(\"filter-change\", m);\r\n    },\r\n    // 初始化自定义列表项\r\n    initialCustomColumn() {\r\n      // 优先获取localStorage中的设置\r\n      if (this.customColumnsHashCode) {\r\n        this.currentCustomColumns = this.getLocalStorage(\r\n          this.customColumnsHashCode\r\n        );\r\n      }\r\n      // 没有localStorage时，根据表格列是否初始化隐藏来获取\r\n      if (!this.currentCustomColumns) {\r\n        let ccols = [];\r\n        this.customColumns.forEach(cs => {\r\n          cs.checked && ccols.push(cs.key);\r\n        });\r\n        this.currentCustomColumns = ccols.join(\",\");\r\n      }\r\n      this.applyCustomColumn();\r\n    },\r\n    // 将自定义列表项应用到当前表格、自定义列表项数组中\r\n    applyCustomColumn() {\r\n      const currentCustomColumnsAry = this.currentCustomColumns.split(\",\");\r\n      // 同步选中状态到自定义列表数组中\r\n      this.customColumns.forEach(cs => {\r\n        cs.checked = currentCustomColumnsAry.some(cca => cca == cs.key);\r\n      });\r\n      // 同步选中状态到当前表格\r\n      this.$slots.default.forEach(v => {\r\n        if (\r\n          v &&\r\n          v.componentInstance &&\r\n          v.componentInstance.prop &&\r\n          v.componentInstance.label\r\n        ) {\r\n          v.componentInstance.hiddenCol = !currentCustomColumnsAry.some(\r\n            cca => cca == v.componentInstance.prop\r\n          );\r\n        }\r\n      });\r\n      this.$nextTick(() => {\r\n        this.$refs.htTable.doLayout();\r\n      });\r\n    },\r\n    // 自定义列表项确定按钮\r\n    customColumnDialogSure() {\r\n      this.applyCustomColumn();\r\n      // 同步选中状态到localStorage中\r\n      if (this.customColumnsHashCode) {\r\n        this.setLocalStorage(\r\n          this.customColumnsHashCode,\r\n          this.currentCustomColumns\r\n        );\r\n      }\r\n      this.customColumnDialogVisible = false;\r\n    },\r\n    // 自定义列表项取消按钮\r\n    customColumnDialogCancel() {\r\n      // 取消对话框时，可能用户已经勾选或去掉了一些选项，这里需要还原这些勾选操作\r\n      let currentCustomColumnAry = [];\r\n      this.customColumns.forEach(cc => {\r\n        cc.checked && currentCustomColumnAry.push(cc.key);\r\n      });\r\n      this.currentCustomColumns = currentCustomColumnAry.join(\",\");\r\n      this.customColumnDialogVisible = false;\r\n    },\r\n    // 从localStorage中获取用于存放自定义列表项的对象\r\n    getObjectFromLocalStorage() {\r\n      if (localStorage) {\r\n        let customColumnSetting = localStorage.getItem(\"customColumnSetting\");\r\n        if (!customColumnSetting) {\r\n          customColumnSetting = \"{}\";\r\n        }\r\n        try {\r\n          customColumnSetting = JSON.parse(customColumnSetting);\r\n        } catch (e) {}\r\n        if (!customColumnSetting || typeof customColumnSetting != \"object\") {\r\n          customColumnSetting = {};\r\n        }\r\n        return customColumnSetting;\r\n      }\r\n      return null;\r\n    },\r\n    setLocalStorage(key, value) {\r\n      let customColumnSetting = this.getObjectFromLocalStorage();\r\n      if (customColumnSetting) {\r\n        customColumnSetting[key] = value;\r\n        localStorage.setItem(\r\n          \"customColumnSetting\",\r\n          JSON.stringify(customColumnSetting)\r\n        );\r\n      }\r\n    },\r\n    getLocalStorage(key) {\r\n      let customColumnSetting = this.getObjectFromLocalStorage();\r\n      if (customColumnSetting) {\r\n        return customColumnSetting[key];\r\n      }\r\n      return null;\r\n    },\r\n    calcTableHeight(delay) {\r\n      // 动态计算表格的高度，自适应当前容器\r\n      setTimeout(() => {\r\n        if (!this.$refs.tablePanel) {\r\n          return;\r\n        }\r\n        const tablePanelHeight = this.$refs.tablePanel.$el.clientHeight;\r\n        const toolbarPanelHeight = this.$refs.toolbarPanel.clientHeight || 0;\r\n        const searchPanelHeight =\r\n          this.$refs.searchPanel && this.$refs.searchPanel.clientHeight\r\n            ? this.$refs.searchPanel.clientHeight\r\n            : 0;\r\n        const paginationPanelHeight =\r\n          (this.$refs.paginationPanel &&\r\n            this.$refs.paginationPanel.clientHeight) ||\r\n          0;\r\n        this.tableMaxHeight =\r\n          tablePanelHeight -\r\n          (searchPanelHeight > 0 ? 20 : 5) -\r\n          toolbarPanelHeight -\r\n          searchPanelHeight -\r\n          (paginationPanelHeight > 0 ? 0 : 10) -\r\n          paginationPanelHeight;\r\n      }, delay || 0);\r\n    }\r\n  }\r\n};\r\n",null]}