cnhis-design-vue 3.1.0 → 3.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (213) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/env.d.ts +8 -4
  3. package/es/packages/big-table/index.d.ts +2038 -0
  4. package/es/packages/big-table/index.mjs +1 -0
  5. package/es/packages/big-table/index2.mjs +10 -0
  6. package/es/packages/big-table/src/BigTable.mjs +2 -0
  7. package/es/packages/big-table/src/BigTable.vue.d.ts +2052 -0
  8. package/es/packages/big-table/src/BigTable.vue_vue_type_script_setup_true_lang.mjs +2315 -0
  9. package/es/packages/big-table/src/BigTable2.mjs +4 -0
  10. package/es/packages/big-table/src/bigTableEmits.d.ts +2 -0
  11. package/es/packages/big-table/src/bigTableEmits.mjs +1 -0
  12. package/{packages/big-table/src/bigTableEmits.ts → es/packages/big-table/src/bigTableEmits2.mjs} +48 -48
  13. package/es/packages/big-table/src/bigTableProps.d.ts +194 -0
  14. package/es/packages/big-table/src/bigTableProps.mjs +1 -0
  15. package/{packages/big-table/src/bigTableProps.ts → es/packages/big-table/src/bigTableProps2.mjs} +116 -125
  16. package/es/packages/big-table/src/bigTableState.d.ts +55 -0
  17. package/es/packages/big-table/src/bigTableState.mjs +1 -0
  18. package/es/packages/big-table/src/bigTableState2.mjs +51 -0
  19. package/es/packages/big-table/src/components/NoData.mjs +2 -0
  20. package/es/packages/big-table/src/components/NoData.vue.d.ts +51 -0
  21. package/es/packages/big-table/src/components/NoData.vue_vue_type_script_setup_true_lang.mjs +72 -0
  22. package/es/packages/big-table/src/components/NoData2.mjs +4 -0
  23. package/es/packages/big-table/src/components/SvgIcon.mjs +2 -0
  24. package/es/packages/big-table/src/components/SvgIcon.vue.d.ts +43 -0
  25. package/es/packages/big-table/src/components/SvgIcon.vue_vue_type_script_setup_true_lang.mjs +34 -0
  26. package/es/packages/big-table/src/components/SvgIcon2.mjs +4 -0
  27. package/es/packages/big-table/src/components/TextOverTooltip.mjs +2 -0
  28. package/es/packages/big-table/src/components/TextOverTooltip.vue.d.ts +560 -0
  29. package/es/packages/big-table/src/components/TextOverTooltip.vue_vue_type_script_setup_true_lang.mjs +74 -0
  30. package/es/packages/big-table/src/components/TextOverTooltip2.mjs +4 -0
  31. package/es/packages/big-table/src/components/edit-form/edit-date.d.ts +34 -0
  32. package/es/packages/big-table/src/components/edit-form/edit-date.mjs +88 -0
  33. package/es/packages/big-table/src/components/edit-form/edit-input.d.ts +43 -0
  34. package/es/packages/big-table/src/components/edit-form/edit-input.mjs +51 -0
  35. package/es/packages/big-table/src/components/edit-form/edit-select-table.d.ts +35 -0
  36. package/es/packages/big-table/src/components/edit-form/edit-select.d.ts +35 -0
  37. package/es/packages/big-table/src/components/edit-form/edit-select.mjs +89 -0
  38. package/es/packages/big-table/src/hooks/useBatchEditing.d.ts +17 -0
  39. package/es/packages/big-table/src/hooks/useBatchEditing.mjs +1 -0
  40. package/es/packages/big-table/src/hooks/useBatchEditing2.mjs +284 -0
  41. package/es/packages/big-table/src/hooks/useEdit.d.ts +171 -0
  42. package/es/packages/big-table/src/hooks/useEdit.mjs +1 -0
  43. package/es/packages/big-table/src/hooks/useEdit2.mjs +108 -0
  44. package/es/packages/big-table/src/hooks/useFormat.d.ts +29 -0
  45. package/es/packages/big-table/src/hooks/useFormat.mjs +1 -0
  46. package/{packages/big-table/src/hooks/useFormat.ts → es/packages/big-table/src/hooks/useFormat2.mjs} +480 -612
  47. package/es/packages/big-table/src/hooks/useNestTable.d.ts +8 -0
  48. package/es/packages/big-table/src/hooks/useNestTable.mjs +1 -0
  49. package/{packages/big-table/src/hooks/useNestTable.ts → es/packages/big-table/src/hooks/useNestTable2.mjs} +84 -109
  50. package/es/packages/big-table/src/hooks/useTableParse.d.ts +6 -0
  51. package/es/packages/big-table/src/hooks/useTableParse.mjs +1 -0
  52. package/es/packages/big-table/src/hooks/useTableParse2.mjs +135 -0
  53. package/es/packages/big-table/src/utils.d.ts +54 -0
  54. package/es/packages/big-table/src/utils.mjs +1 -0
  55. package/{packages/big-table/src/utils.ts → es/packages/big-table/src/utils2.mjs} +597 -705
  56. package/es/packages/big-table/style/index.css +448 -0
  57. package/{packages/big-table/src/assets/style/table-base.less → es/packages/big-table/style/index.less} +292 -10
  58. package/es/packages/button-print/index.d.ts +7402 -0
  59. package/es/packages/button-print/index.mjs +1 -0
  60. package/es/packages/button-print/index2.mjs +10 -0
  61. package/es/packages/button-print/src/ButtonPrint.mjs +2 -0
  62. package/es/packages/button-print/src/ButtonPrint.vue.d.ts +7401 -0
  63. package/es/packages/button-print/src/ButtonPrint.vue_vue_type_script_setup_true_lang.mjs +462 -0
  64. package/es/packages/button-print/src/ButtonPrint2.mjs +4 -0
  65. package/es/packages/button-print/src/components/IdentityVerification.mjs +2 -0
  66. package/es/packages/button-print/src/components/IdentityVerification.vue.d.ts +4782 -0
  67. package/es/packages/button-print/src/components/IdentityVerification.vue_vue_type_script_setup_true_lang.mjs +126 -0
  68. package/es/packages/button-print/src/components/IdentityVerification2.mjs +4 -0
  69. package/es/packages/button-print/src/interfaces.d.ts +19 -0
  70. package/es/packages/button-print/src/interfaces.mjs +1 -0
  71. package/es/packages/button-print/src/utils/print.es.min.d.ts +2 -0
  72. package/es/packages/button-print/src/utils/print.es.min.mjs +1 -0
  73. package/es/packages/button-print/src/utils/print.es.min2.mjs +2080 -0
  74. package/es/packages/button-print/style/index.css +26 -0
  75. package/es/packages/button-print/style/index.less +32 -0
  76. package/es/packages/drag-layout/index.d.ts +20061 -0
  77. package/es/packages/drag-layout/index.mjs +1 -0
  78. package/es/packages/drag-layout/index2.mjs +10 -0
  79. package/es/packages/drag-layout/src/DragFormLeftItem.mjs +2 -0
  80. package/es/packages/drag-layout/src/DragFormLeftItem.vue.d.ts +7959 -0
  81. package/es/packages/drag-layout/src/DragFormLeftItem.vue_vue_type_script_setup_true_lang.mjs +122 -0
  82. package/es/packages/drag-layout/src/DragFormLeftItem2.mjs +4 -0
  83. package/es/packages/drag-layout/src/DragFormRightItem.mjs +2 -0
  84. package/es/packages/drag-layout/src/DragFormRightItem.vue.d.ts +3213 -0
  85. package/es/packages/drag-layout/src/DragFormRightItem.vue_vue_type_script_setup_true_lang.mjs +267 -0
  86. package/es/packages/drag-layout/src/DragFormRightItem2.mjs +4 -0
  87. package/es/packages/drag-layout/src/DragLayout.mjs +2 -0
  88. package/es/packages/drag-layout/src/DragLayout.vue.d.ts +20069 -0
  89. package/es/packages/drag-layout/src/DragLayout.vue_vue_type_script_setup_true_lang.mjs +657 -0
  90. package/es/packages/drag-layout/src/DragLayout2.mjs +4 -0
  91. package/es/packages/drag-layout/style/index.css +175 -0
  92. package/es/packages/drag-layout/style/index.less +208 -0
  93. package/es/packages/field-set/index.d.ts +2647 -0
  94. package/es/packages/field-set/index.mjs +1 -0
  95. package/es/packages/field-set/index2.mjs +10 -0
  96. package/es/packages/field-set/src/FieldSet.mjs +2 -0
  97. package/es/packages/field-set/src/FieldSet.vue.d.ts +2599 -0
  98. package/es/packages/field-set/src/FieldSet.vue_vue_type_script_setup_true_lang.mjs +330 -0
  99. package/es/packages/field-set/src/FieldSet2.mjs +4 -0
  100. package/es/packages/field-set/style/index.css +162 -0
  101. package/es/packages/field-set/style/index.less +172 -0
  102. package/es/packages/grid/index.d.ts +5 -0
  103. package/es/packages/grid/index.mjs +1 -0
  104. package/es/packages/grid/index2.mjs +13 -0
  105. package/es/packages/grid/src/Grid.d.ts +2 -0
  106. package/es/packages/grid/src/Grid.mjs +28 -0
  107. package/es/packages/grid/src/hooks.d.ts +1 -0
  108. package/es/packages/grid/src/hooks.mjs +1 -0
  109. package/es/packages/grid/src/hooks2.mjs +165 -0
  110. package/es/packages/index.css +1004 -0
  111. package/es/packages/index.d.ts +35651 -0
  112. package/es/packages/index.less +1207 -0
  113. package/es/packages/index.mjs +7 -0
  114. package/es/packages/index2.mjs +37 -0
  115. package/es/packages/select-person/index.d.ts +3500 -0
  116. package/es/packages/select-person/index.mjs +1 -0
  117. package/es/packages/select-person/index2.mjs +10 -0
  118. package/es/packages/select-person/src/SearchTree.mjs +2 -0
  119. package/es/packages/select-person/src/SearchTree.vue.d.ts +344 -0
  120. package/es/packages/select-person/src/SearchTree.vue_vue_type_script_setup_true_lang.mjs +231 -0
  121. package/es/packages/select-person/src/SearchTree2.mjs +4 -0
  122. package/es/packages/select-person/src/SelectPerson.mjs +2 -0
  123. package/es/packages/select-person/src/SelectPerson.vue.d.ts +3501 -0
  124. package/es/packages/select-person/src/SelectPerson.vue_vue_type_script_setup_true_lang.mjs +892 -0
  125. package/es/packages/select-person/src/SelectPerson2.mjs +4 -0
  126. package/es/packages/select-person/src/utils/index.d.ts +12 -0
  127. package/es/packages/select-person/src/utils/index.mjs +1 -0
  128. package/{packages/select-person/src/utils/index.js → es/packages/select-person/src/utils/index2.mjs} +57 -66
  129. package/es/packages/select-person/style/index.css +193 -0
  130. package/es/packages/select-person/style/index.less +231 -0
  131. package/{packages/big-table → es}/src/assets/iconfont/iconfont.ttf +0 -0
  132. package/{packages/big-table → es}/src/assets/img/failure.png +0 -0
  133. package/{packages/big-table → es}/src/assets/img/icon-asc.png +0 -0
  134. package/{packages/big-table → es}/src/assets/img/icon-desc.png +0 -0
  135. package/{packages/big-table → es}/src/assets/img/no-permission.png +0 -0
  136. package/{packages/big-table → es}/src/assets/img/nodata.png +0 -0
  137. package/{packages/big-table → es}/src/assets/img/notfound.png +0 -0
  138. package/{packages/big-table → es}/src/assets/img/qr.png +0 -0
  139. package/{packages/big-table → es}/src/assets/img/video_default_cover.png +0 -0
  140. package/{packages/big-table → es}/src/assets/img/xb_big.png +0 -0
  141. package/{packages/big-table → es}/src/assets/img/xb_small.png +0 -0
  142. package/es/src/core/create.d.ts +1 -0
  143. package/es/src/core/create.mjs +1 -0
  144. package/es/src/core/create2.mjs +8 -0
  145. package/es/src/global/variable.d.ts +2 -0
  146. package/es/src/global/variable.mjs +1 -0
  147. package/es/src/global/variable2.mjs +4 -0
  148. package/es/src/types/index.d.ts +4 -0
  149. package/es/src/types/index.mjs +1 -0
  150. package/es/src/utils/clickoutside.d.ts +18 -0
  151. package/es/src/utils/clickoutside.mjs +1 -0
  152. package/es/src/utils/clickoutside2.mjs +48 -0
  153. package/es/src/utils/crypto.d.ts +7 -0
  154. package/es/src/utils/crypto.mjs +1 -0
  155. package/{src/utils/crypto.js → es/src/utils/crypto2.mjs} +25 -25
  156. package/es/src/utils/vexutils.d.ts +5 -0
  157. package/es/src/utils/vexutils.mjs +3 -0
  158. package/es/src/utils/vexutils2.mjs +729 -0
  159. package/global.d.ts +8 -0
  160. package/package.json +54 -21
  161. package/yarn-error.log +122 -0
  162. package/es/big-table/index.css +0 -587
  163. package/es/big-table/index.js +0 -41682
  164. package/es/button-print/index.css +0 -613
  165. package/es/button-print/index.js +0 -8309
  166. package/es/drag-layout/index.css +0 -846
  167. package/es/drag-layout/index.js +0 -13104
  168. package/es/field-set/index.css +0 -1044
  169. package/es/field-set/index.js +0 -351
  170. package/es/grid/index.css +0 -1045
  171. package/es/grid/index.js +0 -30819
  172. package/es/index.css +0 -1319
  173. package/es/index.js +0 -46863
  174. package/es/select-person/index.css +0 -1319
  175. package/es/select-person/index.js +0 -13191
  176. package/packages/big-table/index.ts +0 -17
  177. package/packages/big-table/src/BigTable.vue +0 -2595
  178. package/packages/big-table/src/assets/iconfont/iconfont.less +0 -22
  179. package/packages/big-table/src/assets/style/table-global.less +0 -171
  180. package/packages/big-table/src/bigTableState.ts +0 -63
  181. package/packages/big-table/src/components/NoData.vue +0 -90
  182. package/packages/big-table/src/components/TextOverTooltip.vue +0 -110
  183. package/packages/big-table/src/components/edit-form/edit-date.vue +0 -75
  184. package/packages/big-table/src/components/edit-form/edit-input.vue +0 -39
  185. package/packages/big-table/src/components/edit-form/edit-select-table.vue +0 -133
  186. package/packages/big-table/src/components/edit-form/edit-select.vue +0 -67
  187. package/packages/big-table/src/hooks/useBatchEditing.ts +0 -574
  188. package/packages/big-table/src/hooks/useEdit.ts +0 -131
  189. package/packages/big-table/src/hooks/useTableParse.ts +0 -169
  190. package/packages/button-print/index.ts +0 -15
  191. package/packages/button-print/src/ButtonPrint.vue +0 -476
  192. package/packages/button-print/src/components/IdentityVerification.vue +0 -120
  193. package/packages/button-print/src/interfaces.ts +0 -19
  194. package/packages/button-print/src/utils/print.es.min.js +0 -1
  195. package/packages/drag-layout/index.ts +0 -15
  196. package/packages/drag-layout/src/DragFormLeftItem.vue +0 -131
  197. package/packages/drag-layout/src/DragFormRightItem.vue +0 -277
  198. package/packages/drag-layout/src/DragLayout.vue +0 -712
  199. package/packages/field-set/index.ts +0 -15
  200. package/packages/field-set/src/FieldSet.vue +0 -471
  201. package/packages/grid/index.ts +0 -20
  202. package/packages/grid/src/Grid.tsx +0 -18
  203. package/packages/grid/src/hooks.ts +0 -167
  204. package/packages/index.ts +0 -41
  205. package/packages/select-person/index.ts +0 -11
  206. package/packages/select-person/src/SelectPerson.vue +0 -1104
  207. package/packages/select-person/src/search-tree.vue +0 -326
  208. package/src/component/svg/index.vue +0 -49
  209. package/src/core/create.js +0 -5
  210. package/src/global/variable.ts +0 -2
  211. package/src/utils/clickoutside.ts +0 -80
  212. package/src/utils/vexutils.js +0 -811
  213. package/tsconfig.node.json +0 -8
@@ -1,2595 +0,0 @@
1
- <template>
2
- <div
3
- class="big-table custom-big-table"
4
- :class="{
5
- mt: state.visibleCheckAllWrap || state.visibleTreeCheck || state.hasRefresh,
6
- 'expand-padding': !props.isNestTable,
7
- }"
8
- :style="{ height: state.tableHeight }"
9
- >
10
- <div v-if="state.hasRefresh && !props.isNestTable" class="check-wrap">
11
- <p class="check-wrap-title">
12
- <span>系统检测到有数据更新,</span>
13
- <span class="check-wrap-btn" @click="refreshTable">点击查看</span>
14
- </p>
15
- </div>
16
- <!-- 全选 选择框 -->
17
- <div
18
- v-show="state.visibleCheckAllWrap && !props.isInlineOperating && !props.isNestTable"
19
- class="check-wrap"
20
- >
21
- <p class="check-wrap-title">
22
- <span>已勾选数据共{{ allSelectedLength }}条</span>
23
- <span v-show="state.visibleCheckAllWrapMore">
24
- (当前页{{ state.currentPageSelectedLength }}条)
25
- </span>
26
- </p>
27
- <template v-if="state.visibleCheckAllWrapMore && !props.asyncCount">
28
- <p v-if="!visibleCancelCheckAllBtn" class="check-wrap-btn" @click="handleCheckAll">
29
- <span v-if="pageVO.total > maxCheckSize">
30
- <!-- {{ `最大勾选“${tableName}” ${maxCheckSize}条数据` }} -->
31
- {{ `勾选全部页 ${maxCheckSize}条数据` }}
32
- </span>
33
- <span v-else>
34
- <!-- {{ $t("1.9.598", { name: tableName, total }) }} -->
35
- {{ `勾选全部页 ${pageVO.total}条数据` }}
36
- </span>
37
- </p>
38
- <p v-else class="check-wrap-btn" @click="handleCancelAllCheck">取消全部勾选</p>
39
- </template>
40
- </div>
41
- <!-- 树状表格已选 -->
42
- <div
43
- v-show="state.visibleTreeCheck && !props.isInlineOperating && !props.isNestTable"
44
- class="check-wrap"
45
- >
46
- <p class="check-wrap-title">
47
- <span>已勾选数据共{{ state.treeTableLength }}条</span>
48
- </p>
49
- </div>
50
-
51
- <CGrid
52
- ref="xGrid"
53
- border
54
- show-overflow
55
- show-header-overflow
56
- highlight-hover-row
57
- highlight-current-row
58
- show-footer-overflow="title"
59
- keep-source
60
- height="auto"
61
- resizable
62
- auto-resize
63
- :seq-config="handleSeqConfig"
64
- :tree-config="treeConfig"
65
- :row-id="handleRowId"
66
- :row-class-name="getRowClassName"
67
- :show-footer="showFooter && !props.isInlineOperating"
68
- :footer-method="footerMethod"
69
- :sort-config="{ trigger: 'cell', remote: true }"
70
- :span-method="colspanMethod"
71
- :footer-span-method="footerRowspanMethod"
72
- :tooltip-config="{ enterable: false }"
73
- :checkbox-config="{
74
- checkField: 'checked',
75
- labelField: 'checked',
76
- checkMethod: checkMethod,
77
- trigger: 'cell',
78
- reserve: true,
79
- highlight: true,
80
- }"
81
- :radio-config="{
82
- checkField: 'checked',
83
- trigger: 'cell',
84
- reserve: true,
85
- highlight: true,
86
- }"
87
- :scroll-x="{ enabled: false }"
88
- :scroll-y="{ gt: 50 }"
89
- :row-style="getRowStyle"
90
- :edit-config="state.editConfig"
91
- :expand-config="{
92
- lazy: true,
93
- accordion: columnConfig && columnConfig.accordion,
94
- loadMethod: loadExpandMethod,
95
- toggleMethod: toggleExpandMethod,
96
- iconOpen: 'iconfont icon-a-xitongtubiaozhediejian',
97
- iconClose: 'iconfont icon-a-xitongtubiaotianjia',
98
- }"
99
- :keyboard-config="columnConfig.keyboardConfig || {}"
100
- @cell-dblclick="rowdblclick"
101
- @cell-click="handlerClickRow"
102
- @checkbox-change="selectionChange"
103
- @checkbox-all="selectionChangeAll"
104
- @radio-change="radioOnChange"
105
- @sort-change="sortChange"
106
- @scroll="handlerScroll"
107
- @cell-mouseenter="handleCellMouseenter"
108
- >
109
- <template #empty>
110
- <div v-if="state.isShowEmpty">
111
- <NoData
112
- :no-data-img="props.emptyItems.noDataImg"
113
- :no-data-tip="props.emptyItems.noDataTip"
114
- :show-img="!props.isNestTable"
115
- ></NoData>
116
- </div>
117
- </template>
118
- <!-- 修复 vxe-table升级3.x版本 原自定义checkbox样式失效 -->
119
- <template #tooltip_checkbox="{ row, checked }">
120
- <n-tooltip v-if="row.forbiddenBatchSelect" trigger="hover" placement="right">
121
- <template #trigger>
122
- <i class="disabled-checked-tips"></i>
123
- </template>
124
- {{ row.forbiddenBatchSelectReason }}
125
- </n-tooltip>
126
- <n-checkbox v-else class="tooltip-checkbox-item" :checked="checked"></n-checkbox>
127
- </template>
128
- <template #tooltip_footer="{ column }">
129
- <!-- 分组统计 -->
130
- <template v-if="groupCountFields && groupCountFields.length">
131
- <span v-html="state.groupText"></span>
132
- </template>
133
- <!-- 一般统计 -->
134
- <n-tooltip v-else trigger="hover">
135
- <template #trigger>
136
- {{ getFooterTitle(column) }}
137
- </template>
138
- <div v-html="getFooterTooltipTitle(column)"></div>
139
- </n-tooltip>
140
- </template>
141
- <!-- 子列表嵌套 -->
142
- <template #nest_table_content="{ row, rowIndex, $rowIndex, column }">
143
- <slot name="content" :data="{ row, rowIndex, $rowIndex, column }"></slot>
144
- </template>
145
- </CGrid>
146
- <!-- `${refreshRow}条更新` -->
147
- <div
148
- v-show="props.refreshRow > 0 && !props.isNestTable"
149
- class="refresh"
150
- @click="hanldeClickRefresh"
151
- >
152
- <NIcon size="14" :component="SyncOutline" />
153
- <p class="refresh-row">{{ refreshRow }}条更新</p>
154
- </div>
155
- </div>
156
- </template>
157
-
158
- <script lang="tsx">
159
- import create from '@/core/create.js';
160
- export default create({
161
- name: "BigTable"
162
- })
163
- </script>
164
-
165
- <script lang="tsx" setup>
166
- import { computed, nextTick, onMounted, reactive, ref, useAttrs, watch, isReactive, shallowReactive, onActivated, onUnmounted } from "vue";
167
- // import { useRoute } from 'vue-router';
168
- import bigTableState from "./bigTableState";
169
- import bigTableProps from "./bigTableProps";
170
- import bigTableEmits from "./bigTableEmits";
171
- import { useFormat } from "./hooks/useFormat";
172
- import { useTableParse } from "./hooks/useTableParse";
173
- import { useBatchEditing } from "./hooks/useBatchEditing";
174
- import { useNestTable } from "./hooks/useNestTable";
175
- import { useEdit, comps } from './hooks/useEdit';
176
- import { SettingsSharp, SyncOutline, CopyOutline, CaretDown, CaretForward } from "@vicons/ionicons5";
177
- import NoData from "./components/NoData.vue";
178
- import TextOverTooltip from "./components/TextOverTooltip.vue";
179
- import SvgIcon from '@/component/svg/index.vue';
180
- import {
181
- NButton,
182
- NCheckbox,
183
- NCheckboxGroup,
184
- NSpin,
185
- NTooltip,
186
- NInputGroup,
187
- NInput,
188
- NSpace,
189
- NIcon,
190
- NProgress,
191
- NSwitch,
192
- NPopover,
193
- NDropdown,
194
- NPopconfirm
195
- } from "naive-ui";
196
- import { useMessage } from 'naive-ui'
197
- import CGrid from '~/grid';
198
- import vexutils from '@/utils/vexutils.js';
199
- import {
200
- getEvaluate,
201
- getMapVal,
202
- getageShowType,
203
- reScrollFilterWrap,
204
- showFilter,
205
- handleGroupColums,
206
- handlerInitSearchItem,
207
- generateEditRender,
208
- getFooterGroup,
209
- checkMethod,
210
- flattenRow,
211
- intersectRow,
212
- removeCheckedDisabledRows,
213
- setFilterStatus,
214
- getRowStyle,
215
- handleTableHeight,
216
- handleName,
217
- handleImgArr,
218
- handleImgSrc,
219
- modalDetailImage,
220
- getCandidateComponents,
221
- handleQrCodeContent,
222
- getInlineEditBtn,
223
- isCopy,
224
- handleTableImageSize,
225
- setDefaultFormData,
226
- hideFilterWrap,
227
- mergeConObjFn,
228
- isLink,
229
- setTableConfig,
230
- setTreeGroupTitle,
231
- setVisibleCheckAllWrap
232
- } from './utils'
233
-
234
- import xb_big from './assets/img/xb_big.png'
235
- import qr from './assets/img/qr.png'
236
- import { PROPERTY_TYPES } from '@babel/types';
237
-
238
- let _hideAllWrap: any = null;
239
- let _beforeSearchConvert: any = [];
240
- let addInlineEditPrimaryKey: any = '';
241
-
242
- const GROUP_TITLE_KEY = "group-show-title";
243
-
244
- // const route = useRoute();
245
-
246
- (window as any).$message = useMessage()
247
-
248
- const xGrid: any = ref(null);
249
-
250
- const state: any = reactive(bigTableState);
251
-
252
- const emit = defineEmits(bigTableEmits);
253
-
254
- const props = defineProps(bigTableProps);
255
-
256
- const { formatData, htmlToText, getBtnStyle }: any = useFormat(state);
257
- const { imgs2imgArr, parseDurationValue, parseCombinationValue, formatFieldText } = useTableParse(formatData);
258
- const {
259
- allSelectedLength,
260
- checkOperateCurrentTable,
261
- setRowStatus,
262
- resetBatchOperationRowStatus,
263
- checkListFormUnionSettingParamsList,
264
- handleClickCancelBtnByInline,
265
- setAllRowInlineStatus,
266
- hideSelectCloumns,
267
- handleEditFormLength,
268
- resetOperationRowStatus,
269
- recordClickBtnInfo,
270
- getInlineOpreateRow
271
- }: any = useBatchEditing(props, state, emit, xGrid);
272
- const { initEditTable, activeMethod, deleteRow, onClickSelectTable, onFormChange, getDefaultValue } = useEdit(props, state, emit, xGrid)
273
-
274
- const {
275
- isAboutNestTable,
276
- isExpandTable,
277
- handleRowId,
278
- toggleExpandMethod,
279
- loadExpandMethod,
280
- nestHandleClickRow
281
- } = useNestTable(props, state, emit);
282
-
283
- const attr = useAttrs();
284
-
285
- /**
286
- * computed
287
- */
288
- const currentCheckedKeys = computed(() => {
289
- return state.checkedRows?.map((row: any) => row[props.primaryKey]) || [];
290
- });
291
- const visibleCancelCheckAllBtn = computed(() => {
292
- let isCurrentPageAllCheck = state.currentPageSelectedLength === state.curAbleCheckedLen;
293
- let isMaxChecked = currentCheckedKeys.value.length === props.maxCheckSize;
294
- let isCheckedTotal = currentCheckedKeys.value.length === props.pageVO.total;
295
-
296
- return isMaxChecked || !isCurrentPageAllCheck || isCheckedTotal;
297
- });
298
- const singleCheckedKey = computed(() => {
299
- const checkedKeys: any = currentCheckedKeys.value || [];
300
- return checkedKeys.length == 1 ? checkedKeys[0] : "";
301
- });
302
- const tableNoSetting = computed(() => {
303
- let { noSetting } = getOtherConfigInit() || {};
304
- return noSetting || props.showSettings?.hideSettingBtn == 1;
305
- });
306
- const isScanMultiTable = computed(() => {
307
- return props.columnConfig?.isScanMultiTable;
308
- });
309
- //来自batchEditing.js
310
- const configuration = computed(() => {
311
- return {
312
- userInfo: props.userInfo || {},
313
- sysImageSize: props.sysImageSize || {},
314
- // switchConfig: this.switchConfig || {},
315
- // hospitalConfigData: this.iconObj || {}
316
- };
317
- });
318
- const handlePrimaryKey = computed(() => {
319
- return state.isTree > 0 ? props.primaryKey || "theUniqueKey" : "theUniqueKey";
320
- });
321
- const handleSeqConfig = computed(() => {
322
- if (props.isNestTable) return { startIndex: 0 };
323
- if (props.isBatchEditing) {
324
- return { startIndex: 0 };
325
- }
326
- let startIndex = (props.pageVO.pageIndex - 1) * props.pageVO.pageSize;
327
- return { startIndex: startIndex < 0 ? 0 : startIndex };
328
- });
329
- const treeConfig = computed(() => {
330
- let result = null;
331
- switch (Number(state.isTree)) {
332
- case 1:
333
- case 3:
334
- result = {
335
- children: "childrenList",
336
- accordion: state.openOnly > 0,
337
- reserve: true,
338
- };
339
- break;
340
- case 2:
341
- result = {
342
- lazy: true,
343
- reserve: true,
344
- children: "childrenList",
345
- hasChild: "hasChildren",
346
- loadMethod: loadChildrenMethod,
347
- accordion: state.openOnly > 0,
348
- };
349
- break;
350
- default:
351
- break;
352
- }
353
- return result;
354
- });
355
-
356
- const hideAllWrap = (e: any) => {
357
- const path = e.path || (e.composedPath && e.composedPath());
358
- const noWrap = (className: string) => {
359
- return !path.some((p: any) => {
360
- return p.className && p.className.includes && p.className.includes(className);
361
- });
362
- };
363
-
364
- let notFilterWrap = noWrap('big-table-filter-wrap');
365
- if (notFilterWrap) {
366
- hideFilterWrap(state, props);
367
- }
368
- }
369
- const bindDocumentClick = () => {
370
- _hideAllWrap = hideAllWrap.bind(this);
371
- window.document.addEventListener('click', _hideAllWrap, true);
372
- }
373
- const unBindDocumentClick = () => {
374
- window.document.removeEventListener('click', _hideAllWrap, true);
375
- }
376
- onMounted(() => {
377
- bindDocumentClick();
378
- state.tableHeight = handleTableHeight(state, props) || 'auto';
379
-
380
- // // 子列表在mounted后初始化 直接watch无法触发
381
- if (!props.isNestTable) return;
382
- loadColumn(props.columnConfig);
383
- loadData(props.data);
384
- });
385
- onUnmounted(() => {
386
- unBindDocumentClick();
387
- })
388
- onActivated(() => {
389
- // 行编辑状态下 切换tab 再切回 需要重置页面样式
390
- removeInsert();
391
- })
392
- const removeInsert = async () => {
393
- if (state.isTree != 0) return false;
394
-
395
- const vxeTable = xGrid.value;
396
- // let { row } = this.getInlineOpreateRow();
397
- let { tableData } = vxeTable.getTableData();
398
- if (tableData && tableData.length) {
399
- tableData.forEach((row: any) => {
400
- if (row?.__isInsertRow) {
401
- vxeTable.remove(row);
402
- }
403
- });
404
- }
405
- if (!state.originFormatList?.length) return;
406
-
407
- await vxeTable.loadData(state.originFormatList);
408
- resetBatchOperationRowStatus();
409
- }
410
- // 加载表格头部
411
- const loadColumn = (config: any) => {
412
- setTableConfig(config, state);
413
- // this.hasOnlyIcon = config.hasOnlyIcon;
414
- let columns = formatColumns(config);
415
- columns = handleGroupColums(columns, props);
416
- xGrid.value && xGrid.value.reloadColumn(columns);
417
-
418
- setGroupTreeExpand();
419
- resetTableInlineEditStatus();
420
- };
421
- // 加载表格内容
422
- const loadData = async (data: any) => {
423
- state.isShowEmpty = !data?.length;
424
-
425
- const list = JSON.parse(JSON.stringify(data));
426
- // console.log("list--------------", list);
427
- let table = xGrid.value;
428
- if (!table) return;
429
- let formatList = setChecklist(list);
430
- state.originFormatList = formatList;
431
-
432
- setGroupTitleToFristColumnFieldData(formatList);
433
- state.curAbleCheckedLen = list.filter((item: any) => checkMethod({ row: item })).length;
434
-
435
- // 非子列表触发
436
- if (!props.isNestTable) {
437
- await handleFormTheUniqueKey();
438
- }
439
-
440
- formatList = formatList.map((v: any) => {
441
- return {
442
- ...v,
443
- selectTableShow: false,
444
- selectTableDisable: false
445
- }
446
- })
447
-
448
- // reloadData 替换 loadData 保存setting之后需要表格重新reload
449
- // loadData 加载数据
450
- // reloadData 加载数据并清除所有状态
451
- // 暂时 不知道是否影响其它????
452
- // 还是用loadData较好,树表展开需要在更新数据后保留上一次的状态
453
- // table.clearSort(); // <-- table.loadData 不会清空sort选项,导致sortChange重复触发
454
- await table.loadData(formatList);
455
- // initEditTable()
456
-
457
-
458
- table.setCurrentRow({});
459
- setCurrentPageRowChecked();
460
-
461
- setGroupTreeExpand();
462
- resetTableInlineEditStatus();
463
- };
464
- const setGroupTitleToFristColumnFieldData = (formatList: any) => {
465
- if (state.isTree != 3) return;
466
- let table = xGrid.value;
467
- let key = table.getTableColumn().tableColumn?.find((column: any) => {
468
- return !!column.property;
469
- }).property;
470
-
471
- setTreeGroupTitle(formatList, key, GROUP_TITLE_KEY);
472
- };
473
- const setCurrentPageRowChecked = () => {
474
- let table = xGrid.value;
475
- if (!table) return;
476
- let currentPageTableData = table.getTableData()?.tableData;
477
- let currentPageSelectedRows = currentPageTableData.filter((row: any) => {
478
- return currentCheckedKeys.value.includes(row[props.primaryKey]);
479
- });
480
- setCurrentCheckedLength();
481
- if (!currentPageSelectedRows || !currentPageSelectedRows.length) {
482
- table.setAllCheckboxRow(false);
483
- return;
484
- }
485
- table.setCheckboxRow(currentPageSelectedRows, true);
486
- };
487
- const setCurrentCheckedLength = () => {
488
- let table = xGrid.value;
489
- let currentPageTableData = table.getTableData().fullData;
490
- let currentPageSelectedRows = currentPageTableData.filter((row: any) => {
491
- return currentCheckedKeys.value.includes(row[props.primaryKey]);
492
- });
493
-
494
- state.currentPageSelectedLength = currentPageSelectedRows.length;
495
- };
496
- // 列数据解析逻辑
497
- const formatColumns = (map: any) => {
498
- /**
499
- * 针对 bigTable 的设置列
500
- * type: 列的类型
501
- * field: 列字段名(注:属性层级越深,渲染性能将直线下降)
502
- * title: 列标题(支持开启国际化)
503
- * width: 列宽度(如果为空则均匀分配剩余宽度,如果全部列固定了,可能会存在宽屏下不会铺满,可以配合 "%" 或者 "min-width" 布局)
504
- * minWidth: 最小列宽度;会自动将剩余空间按比例分配
505
- * resizable: 列是否允许拖动列宽调整大小
506
- * visible: 列是否显示
507
- * fixed: 将列固定在左侧或者右侧(注意:固定列应该放在左右两侧的位置)
508
- * align: 列对齐方式
509
- * headerAlign: 表头列的对齐方式
510
- * footerAlign: 表尾列的对齐方式
511
- * formatter: 格式化显示内容 Function({cellValue, row, column})
512
- * sortable: 是否允许列排序
513
- */
514
- // 配置列表
515
- let { selectType } = getOtherConfigInit() || {};
516
- let { isBatchSelect, fieldList = [], showButtonTop, isScanMultiTable, isEdit = false, editConfig = {} } = map;
517
- if (isEdit) {
518
- state.editConfig = Object.assign(state.editConfig, editConfig, {
519
- // mode: 'cell',
520
- // autoClear: true,
521
- // activeMethod
522
- })
523
- }
524
- if (selectType) {
525
- // 有设置 selectType 强制可选。
526
- isBatchSelect = 1;
527
- }
528
- selectType = selectType || "checkbox";
529
- // 扫码弹框 设置为radio
530
- let { listType } = props.tableOptions;
531
- if (listType == "scanList") {
532
- selectType = "radio";
533
- }
534
- state.selectType = selectType;
535
- let tableHeight = props.styleSetting?.tableHeight || "table-simple";
536
- let checkMinWidth = state.checkWidth[tableHeight] || "30";
537
- const checkboxSlot = {
538
- default: (data: any) => {
539
- return checkMethod(data) ? null : (
540
- <NTooltip placement="right" trigger="hover"
541
- >
542
- {{
543
- default: () => data.row.forbiddenBatchSelectReason,
544
- trigger: () => <i class="disabled-checked-tips"></i>
545
- }}
546
- </NTooltip>
547
- );
548
- }
549
- };
550
- let checkVisible = (isBatchSelect == 1 && !props.isNestTable && !isScanMultiTable) || false;
551
- let columns = [
552
- {
553
- fixed: "left",
554
- align: "center",
555
- visible: isScanMultiTable || false,
556
- width: "60",
557
- slots: {
558
- header: () => "操作",
559
- default: scanMultiOperate,
560
- },
561
- },
562
- {
563
- type: "seq",
564
- fixed: props.isNestTable ? "" : "left",
565
- align: "center",
566
- resizable: true,
567
- width: "34",
568
- showOverflow: true,
569
- slots: {
570
- header: () => {
571
- return [
572
- tableNoSetting.value ? null : <NIcon size="14" color="#777" component={SettingsSharp} onClick={() => showDrawer()} />
573
- ];
574
- },
575
- },
576
- },
577
- {
578
- type: selectType,
579
- fixed: props.isNestTable ? "" : "left",
580
- align: "center",
581
- visible: checkVisible,
582
- resizable: false,
583
- width: checkMinWidth,
584
- slots: selectType === 'checkbox' ? checkboxSlot : null,
585
- // 修复 vxe-table升级3.x版本 原自定义checkbox样式失效
586
- // slots:
587
- // selectType === "checkbox"
588
- // ? {
589
- // checkbox: "tooltip_checkbox",
590
- // }
591
- // : null,
592
- showOverflow: true,
593
- },
594
- ];
595
- // let showOperatorColumn = true;
596
- // if (showButtonTop == 1) {
597
- // showOperatorColumn = hasOnlyIcon;
598
- // }
599
-
600
- const currentColumns = fieldList.map((item: any, index: number) => {
601
- let filterField = item?.fieldSetting?.mapping?.type === "manual" && item.isMerge != 1;
602
- // 是否排序 1 不可排序
603
- let notParticipatingSort = item?.fieldSetting?.notParticipatingSort || "";
604
- // 有子列表fixed会遮盖 所以主表不设置fixed
605
- let fixed = isAboutNestTable.value
606
- ? ""
607
- : item.isFixed
608
- ? item.isFixed == 1
609
- ? "left"
610
- : "right"
611
- : "";
612
- let sortable = props.isNestTable
613
- ? false
614
- : !filterField && item.isSort == 1 && notParticipatingSort != 1 && item.isMerge != 1;
615
- let treeNode = props.isNestTable ? false : state.isTree != 0 ? index === 0 : false;
616
- let type = index === 0 && props.showNestTable ? "expand" : "";
617
-
618
- // 扫码打开的table只展示
619
- if (isScanMultiTable) {
620
- fixed = "";
621
- sortable = false;
622
- treeNode = false;
623
- type = "";
624
- }
625
-
626
- const col = Object.assign(item, {
627
- visible: item.columnName == "operatorColumn" ? showButtonTop == 0 : item.isShow == 1,
628
- field: item.columnName,
629
- title: handleName(item, "title"),
630
- minWidth: item.colWidth,
631
- fixed: fixed,
632
-
633
- sortable: sortable,
634
- // 参数 "column.remote-sort" 已废弃,请使用 "sort-config.remote"
635
- // remoteSort: !filterField && item.isSort == 1 && notParticipatingSort != 1,
636
-
637
- headerClassName: "mycolumn", // 文本溢出处理('tooltip' vxe-table当前版本存在bug)
638
- // showHeaderOverflow: "title",
639
- showOverflow: "title",
640
- treeNode: treeNode,
641
- type: type,
642
- // slots: {
643
- // default: (params: any) => {
644
- // return formatter(params, item);
645
- // },
646
- // },
647
- slots: {
648
- edit: (params: any) => {
649
- if (isEdit && item.isEdit && item.columnName !== 'operatorColumn') {
650
- return formatterEdit(params, item)
651
- } else {
652
- return <span>{params.row[item.columnName]}</span>
653
- }
654
- },
655
- default: (params: any) => {
656
- if(!isEdit || item.columnName === 'operatorColumn' || !item.isEdit) {
657
- return formatter(params, item)
658
- } else {
659
- return <span>{getDefaultValue(params, item)}</span>
660
- }
661
- }
662
- },
663
- editRender: isEdit ? {} : generateEditRender(item)
664
- });
665
-
666
- if (filterField && !props.isNestTable && !isScanMultiTable) {
667
- state.filterFields[item.columnName] = Object.assign(
668
- {},
669
- vexutils.clone(item, true),
670
- {
671
- visible: false,
672
- left: "initial",
673
- right: "initial",
674
- top: "initial",
675
- indeterminate: false,
676
- checkAll: false,
677
- searchFilterText: "",
678
- searchFilterCONVERT: [],
679
- filterSort: "",
680
- }
681
- );
682
- let field = state.filterFields[item.columnName];
683
- handlerInitSearchItem([field]);
684
- col.slots.header = formatterHeader(item);
685
- } else {
686
- col.slots.header = toolTipTitle(item);
687
- }
688
-
689
- if (!isScanMultiTable) {
690
- col.slots.footer = "tooltip_footer";
691
- }
692
-
693
- // 主表设置expand
694
- if (props.showNestTable && state.isTree == 0 && props.curNestColumnConfig?.isTree == 0) {
695
- col.slots.content = "nest_table_content";
696
- }
697
-
698
- return col;
699
- });
700
- columns.push(...currentColumns);
701
- state.columnLen = currentColumns.filter((item: any) => item.visible).length;
702
- return columns;
703
- };
704
- const formatterEdit = (params: any, col: any) => {
705
- let { row, column, $rowIndex, rowIndex } = params
706
- let formType = column.formType || col.formType || ''
707
- let formatMap = column.formatMap || col.formatMap || null
708
- if (!formType) return null
709
- if (formType === 'custom') {
710
- return col.slotFn(params)
711
- }
712
- const Comp = comps[formType] || ''
713
- if (!Comp) return null
714
- const propsData: any = {
715
- col,
716
- row,
717
- index: $rowIndex,
718
- // vModel: [row[col.columnName], formType === 'date' ? 'formattedValue' :'value'],
719
- type: formType,
720
- onFormChange
721
- }
722
- if (formType === 'date') {
723
- propsData.defaultFormattedValue = row[col.columnName]
724
- } else if(formatMap){
725
- propsData.defaultValue = row[formatMap.value]
726
- } else {
727
- propsData.defaultValue = row[col.columnName]
728
- }
729
- if (formType === 'select') {
730
- propsData.onSetOptions = (options: any[]) => (row[`${col.columnName}_options`] = options)
731
- }
732
- return <Comp {...propsData} />
733
- }
734
- const getEditBtn = (row: any, col: any, index: number) => {
735
- return col.tileBtnList?.map((btn: any) => {
736
- if (btn.settingObj[0].trigger_type === 'DELETE') {
737
- return <NPopconfirm
738
- onPositiveClick={() => deleteRow(row, col, index)}
739
- >
740
- {{
741
- trigger: () => <NButton color={btn.settingObj[0].color || '#999'} text>{btn.name}</NButton>,
742
- default: () => '是否确认删除?'
743
- }}
744
- </NPopconfirm>
745
- } else {
746
- return null
747
- }
748
- })
749
- }
750
- // 表格渲染逻辑
751
- const formatter = (params: any, col: any) => {
752
- let { row, column, $rowIndex } = params;
753
- let own = column?._own || column?.own || col;
754
- let attrType = own?.attrType || "";
755
-
756
- // 批量行编辑
757
- let formUnionItem = showEditForm(row, column, $rowIndex);
758
- if (formUnionItem) {
759
- let dynamicProps = initBatchDynamicProps(formUnionItem, row, column, $rowIndex);
760
- if (dynamicProps) {
761
- // console.log(dynamicProps);
762
- // loading 使用
763
- emit("setWaitEditKeys", column.property);
764
- return null
765
- // return [
766
- // <EditForm class={`js-inlineEditForm`} key={row[props.primaryKey] + $rowIndex + column.property} data-key={row[props.primaryKey] + $rowIndex + column.property} {...dynamicProps}></EditForm>
767
- // ];
768
- }
769
- }
770
-
771
- if (vexutils.has(row, GROUP_TITLE_KEY)) {
772
- return row[GROUP_TITLE_KEY];
773
- }
774
- if (attrType == "PICTURE" || attrType == "HEADPORTRAIT") {
775
- return getPicture(row, own, attrType);
776
- }
777
- if (attrType == "COLOR") {
778
- return getColor(row, own);
779
- }
780
- if (attrType == "EVALUATE") {
781
- return getEvaluate(row, own);
782
- }
783
- if (attrType == "MAP") {
784
- return getMapVal(row, own);
785
- }
786
- if (attrType == "DATE" || attrType == "TASKDATE") {
787
- return getDate(row, own);
788
- }
789
- if (attrType == "PERCENTAGE") {
790
- return getPercentage(row, own);
791
- }
792
- if (attrType == "VIDEO") {
793
- return getvideoList(row, own);
794
- }
795
- // 选人组件数据展示解析
796
- if (attrType == "CANDIDATE_COMPONENTS") {
797
- return getCandidateComponents(row, own);
798
- }
799
- if (attrType == "AGE") {
800
- return getageShowType(row, own);
801
- }
802
- if (attrType === "COUNTDOWN") {
803
- return <NTooltip>
804
- {{
805
- trigger: () => <span innerHTML={row[own.columnName + "_countdown"] || ""} />,
806
- default: () => row[own.columnName + "_countdownTip"]
807
- }}
808
- </NTooltip>
809
- }
810
- // 时长
811
- if (attrType === "DURATION") {
812
- const value = row[own.columnName];
813
- const duration = own?.fieldSetting?.duration;
814
- return parseDurationValue(value, duration);
815
- }
816
- // 组合组件
817
- if (attrType === "COMBINATION") {
818
- const value = row[own.columnName];
819
- const params = own.fieldSetting || {};
820
- const data = parseCombinationValue(value, params);
821
- return data ? [<span title={data}>{data}</span>] : "";
822
- }
823
- if (attrType === "PASSWORD") {
824
- const value = row[own.columnName];
825
- return [<password-com value={value} styleSetting={props.styleSetting} />];
826
- }
827
- // 二维码
828
- if (attrType === "QR_CODE") {
829
- return getOrCode(row, own, attrType);
830
- }
831
- if (column.property === "operatorColumn") {
832
- if (props.columnConfig.isEdit && !row.initRow) {
833
- return getEditBtn(row, col, $rowIndex)
834
- }
835
-
836
- if (state.showButtonTop != 0 || props.isBatchEditing) return;
837
- const inlineBtnList = generateInlineBtnList(row, $rowIndex);
838
- const tileBtnList = getTileBtnList(row, $rowIndex);
839
- const foldBtnList = getFoldBtnList(row, $rowIndex);
840
- return [
841
- <span>
842
- {tileBtnList}
843
- {foldBtnList}
844
- {inlineBtnList}
845
- </span>
846
- ];
847
- }
848
-
849
- if (isLink(props, own, row) && !isScanMultiTable.value) {
850
- if (own.btnLinkSwitch) {
851
- let disabled = false;
852
- let curBtn = row.btnList?.find((v: any) => v.name == own.columnName);
853
- if (curBtn && "authorizedMark" in curBtn) {
854
- if (!curBtn.authorizedMark) {
855
- disabled = true;
856
- }
857
- }
858
- return getBtnLinkSwitch(row, own, disabled, $rowIndex);
859
- } else {
860
- return getField(row, own, $rowIndex, true);
861
- }
862
- } else {
863
- return getField(row, own, $rowIndex, false);
864
- }
865
- };
866
- // 表头渲染逻辑
867
- const formatterHeader = (item: any) => {
868
- let field = state.filterFields[item.columnName];
869
- return () => {
870
- return [
871
- <div class="filter-box">
872
- {toolTipTitle(item, "format")}
873
- <i
874
- class={[
875
- "vxe-filter--icon",
876
- "vxe-filter--btn",
877
- "vxe-icon--funnel",
878
- { active: field.visible || field.filterSort },
879
- { checked: field.CONVERT?.length },
880
- ]}
881
- onClick={event => showFilter(field, item.columnName, event, props, state)}
882
- />
883
- {field.visible ? (
884
- <teleport to={props.filterDomPortal}>
885
- <div
886
- class="big-table-filter-wrap"
887
- style={{
888
- left: field.left,
889
- right: field.right,
890
- top: field.top,
891
- width: state.filterWidth + state.distance + "px",
892
- }}
893
- >
894
- <div class="sort-list" style={{ display: field.isSort ? "block" : "none" }}>
895
- <div
896
- class={["sort-item", { active: field.filterSort === "asc" }]}
897
- onClick={() => handlefilterBoxClickSort("asc", field)}
898
- >
899
- <i class="sort-icon sort-icon-asc" />
900
- <span class="sort-text">升序 A to Z</span>
901
- </div>
902
- <div
903
- class={["sort-item", { active: field.filterSort === "desc" }]}
904
- onClick={() => handlefilterBoxClickSort("desc", field)}
905
- >
906
- <i class="sort-icon sort-icon-asc" />
907
- <span class="sort-text">降序 Z to A</span>
908
- </div>
909
- </div>
910
-
911
- <div class="filter-header">
912
- <i class="filter-header-icon vxe-filter--btn vxe-icon--funnel" />
913
- <span class="filter-header-text">筛选</span>
914
- </div>
915
-
916
- {field.setting.showSetting.length > 5 ? (
917
- <div class="checkbox-wrap checkbox-wrap--search">
918
- <div class="check-search-wrap">
919
- <NInputGroup>
920
- <NInput
921
- style={{ width: "50%" }}
922
- placeholder="字段搜索"
923
- class="check-seach-input"
924
- />
925
- <NButton
926
- type="primary"
927
- onClick={(val: any) => {
928
- handleFilterSeach(val, field);
929
- }}
930
- >
931
- 搜索
932
- </NButton>
933
- </NInputGroup>
934
- </div>
935
- </div>
936
- ) : (
937
- ""
938
- )}
939
- <div class="checkbox-box">
940
- <div
941
- class="checkbox-wrap js-checkbox-wrap"
942
- style={{ height: state.filterHeight + state.distance + "px" }}
943
- >
944
- {!field.searchFilterText ? (
945
- <div class="ant-checkbox-group">
946
- <NCheckbox
947
- indeterminate={field.indeterminate}
948
- checked={field.checkAll}
949
- onUpdateChecked={(val: any) => {
950
- handleFilterChangeAll(val, field);
951
- }}
952
- >
953
- 全选
954
- </NCheckbox>
955
- </div>
956
- ) : (
957
- ""
958
- )}
959
-
960
- {!field.searchFilterText ? (
961
- <NCheckboxGroup
962
- value={field.CONVERT}
963
- onUpdateValue={(val: any) => handleFilterChange(val, item.columnName, field)}
964
- >
965
- <NSpace item-style="display: flex;">
966
- {field.setting.showSetting.map((item: any) => {
967
- return <NCheckbox value={item.value} label={item.label} />;
968
- })}
969
- </NSpace>
970
- </NCheckboxGroup>
971
- ) : (
972
- <NCheckboxGroup
973
- value={field.searchFilterCONVERT}
974
- onUpdateValue={(val: any) =>
975
- handleFilterSearchChange(val, item.columnName, field)
976
- }
977
- >
978
- <NSpace item-style="display: flex;">
979
- {field.setting.showSetting
980
- .filter((item: any) => {
981
- if (!field.searchFilterText) return item;
982
- let reg = new RegExp(field.searchFilterText);
983
- return reg.test(item.label);
984
- })
985
- .map((item: any) => {
986
- return <NCheckbox value={item.value} label={item.label} />;
987
- })}
988
- </NSpace>
989
- </NCheckboxGroup>
990
- )}
991
- </div>
992
- </div>
993
-
994
- <div
995
- class="checkbox-btn-wrap"
996
- style={{ justifyContent: field.CONVERT.length ? "space-between" : "flex-end" }}
997
- >
998
- {field.CONVERT.length ? (
999
- <div class="checkbox-btn-status">
1000
- <span>已选择{field.CONVERT.length}项</span>
1001
- <NButton
1002
- class="checkbox-btn checkbox-btn-clear"
1003
- text
1004
- onClick={() => handleFilterClearAll(field)}
1005
- >
1006
- 清空
1007
- </NButton>
1008
- </div>
1009
- ) : null}
1010
- <div>
1011
- <NButton class="checkbox-btn" onClick={() => handleCancelFilter()}>
1012
- 取消
1013
- </NButton>
1014
- <NButton class="checkbox-btn" type="primary" onClick={() => handleFilter(field)}>
1015
- 确定
1016
- </NButton>
1017
- </div>
1018
- </div>
1019
- <div
1020
- class="arrows-icon"
1021
- // onmousedown={(e: any) => {
1022
- // onmousedownFunc(e);
1023
- // }}
1024
- ></div>
1025
- </div>
1026
- </teleport>
1027
- ) : (
1028
- ""
1029
- )}
1030
- </div>,
1031
- ];
1032
- };
1033
- };
1034
- const handlefilterBoxClickSort = (sort: any, field: any) => {
1035
- if (field.filterSort === sort) {
1036
- sort = null;
1037
- } else {
1038
- xGrid.value.clearSort();
1039
- }
1040
-
1041
- field.filterSort = sort;
1042
- emit("sortChange", { prop: field.columnName, order: sort });
1043
- };
1044
- const handleFilterSeach = (val: any, field: any) => {
1045
- field.searchFilterText = val;
1046
-
1047
- if (val === "") {
1048
- field.checkAll = field.CONVERT.length === field.setting.showSetting.length;
1049
- field.indeterminate =
1050
- !!field.CONVERT.length && field.CONVERT.length !== field.setting.showSetting.length;
1051
- return;
1052
- }
1053
-
1054
- field.searchFilterCONVERT = field.setting.showSetting
1055
- .filter((item: any) => {
1056
- return field.searchFilterText === item.label && field.CONVERT.includes(item.value);
1057
- })
1058
- .map((item: any) => item.value);
1059
-
1060
- _beforeSearchConvert = field.searchFilterCONVERT;
1061
- };
1062
- const handleFilterChangeAll = (e: any, field: any) => {
1063
- reScrollFilterWrap();
1064
- let checked = e.target.checked;
1065
- field.indeterminate = false;
1066
- field.checkAll = checked;
1067
-
1068
- state.filterFields[field.columnName].CONVERT = checked
1069
- ? field.setting.showSetting.map((item: any) => {
1070
- return item.value;
1071
- })
1072
- : [];
1073
- };
1074
- const handleFilterChange = (value: any, name: any, field: any) => {
1075
- reScrollFilterWrap();
1076
- state.filterFields[name].CONVERT = value;
1077
-
1078
- field.checkAll = value.length === field.setting.showSetting.length;
1079
- field.indeterminate = !!value.length && value.length !== field.setting.showSetting.length;
1080
- };
1081
- const handleFilterSearchChange = (value: any, columnName: any, field: any) => {
1082
- reScrollFilterWrap();
1083
- /* filter-check-group value更新 触发 主check-group value同步更新 */
1084
- let isAdd = _beforeSearchConvert.length < value.length;
1085
- if (isAdd) {
1086
- let addItems = value.filter((item: any) => {
1087
- return !_beforeSearchConvert.includes(item);
1088
- });
1089
- state.filterFields[columnName].CONVERT.push(...addItems);
1090
- } else {
1091
- let removeItems = _beforeSearchConvert.filter((item: any) => {
1092
- return !value.includes(item);
1093
- });
1094
- state.filterFields[columnName].CONVERT = state.filterFields[columnName].CONVERT.filter(
1095
- (item: any) => {
1096
- return !removeItems.includes(item);
1097
- }
1098
- );
1099
- }
1100
-
1101
- field.searchFilterCONVERT = value;
1102
- _beforeSearchConvert = vexutils.clone(value, true);
1103
- };
1104
- const handleFilterClearAll = (field: any) => {
1105
- field.indeterminate = false;
1106
- field.checkAll = false;
1107
- state.filterFields[field.columnName].CONVERT = [];
1108
- if (field.searchFilterCONVERT) {
1109
- state.filterFields[field.columnName].searchFilterCONVERT = [];
1110
- }
1111
- handleFilter(field);
1112
- };
1113
- const handleCancelFilter = () => {
1114
- hideFilterWrap(state, props);
1115
- };
1116
- const handleFilter = (field: any) => {
1117
- let conObj = mergeConObjFn(state, props);
1118
- emit("onSave", conObj, false, [], [], { isBigTable: true });
1119
- field.visible = false;
1120
- };
1121
- const onmousedownFunc = (e: any) => {
1122
- state.startX = e.screenX;
1123
- maskInsert();
1124
- };
1125
- const maskInsert = () => {
1126
- let mask = state.mask || maskCreate();
1127
- document.body.appendChild(mask);
1128
- };
1129
- const maskCreate = () => {
1130
- if (state.mask) return state.mask;
1131
- const mask: any = document.createElement("div");
1132
- mask.style = "position:fixed;top:0;bottom:0;left:0;right:0;z-index:99999;cursor:nw-resize";
1133
- mask.addEventListener("mousemove", maskMove);
1134
- mask.addEventListener("mouseup", maskUp);
1135
- state.mask = mask;
1136
- return mask;
1137
- };
1138
- const maskMove = (e: any) => {
1139
- state.distance = e.screenX - state.startX;
1140
- };
1141
- const maskUp = (e: any) => {
1142
- state.filterHeight = state.filterHeight + state.distance;
1143
- state.filterWidth = state.filterWidth + state.distance;
1144
- state.distance = 0;
1145
- state.startX = 0;
1146
- const mask = state.mask;
1147
- if (!mask) return;
1148
- mask.parentNode && mask.parentNode.removeChild(mask);
1149
- mask.removeEventListener("mousemove", maskMove);
1150
- mask.removeEventListener("mouseup", maskUp);
1151
- state.mask = null;
1152
- };
1153
- const setGroupTreeExpand = () => {
1154
- let isExpand = state.isTree == 1 && state.isExpand == 1 && state.total < 1001;
1155
- if (state.isTree == 3 || isExpand) {
1156
- let table = xGrid.value;
1157
- nextTick(() => {
1158
- table.setAllTreeExpand(true);
1159
- });
1160
- }
1161
- };
1162
- const resetTableInlineEditStatus = () => {
1163
- if (!checkOperateCurrentTable()) return false;
1164
- handleClickCancelBtnByInline();
1165
- };
1166
- const toolTipTitle = (item: any, type?: any) => {
1167
- // let feildDescribe =
1168
- // (item.fieldSetting && this.$t(item.fieldSetting?.feildDescribeI18n)) ||
1169
- // item.fieldSetting?.feildDescribe ||
1170
- // "";
1171
- let name = item.formTitle || item.alias || item.title;
1172
- // let tooltipTitle = feildDescribe || item.alias;
1173
- let tooltipTitle = item.alias;
1174
- let isAlias = false;
1175
- if (props.tableOptions?.dataSourceType == "guage") {
1176
- tooltipTitle = item.alias || item.title;
1177
- }
1178
- if (name && tooltipTitle && name !== tooltipTitle) {
1179
- isAlias = !!tooltipTitle;
1180
- }
1181
-
1182
- if (type === "format") return <TextOverTooltip tooltipTitle={tooltipTitle} content={name} isAlias={isAlias} />
1183
- return () => {
1184
- return [
1185
- <TextOverTooltip tooltipTitle={tooltipTitle} content={name} isAlias={isAlias}>
1186
- {item.treeNode && state.isTree == 1 ? <NIcon component={state.isExpand && state.total < 1001 ? CaretDown : CaretForward} onClick={(e: any) => triggerExpand(e, state.isExpand)} /> : ''}
1187
- </TextOverTooltip>
1188
- ];
1189
- };
1190
- };
1191
- // 针对非异步加载的树
1192
- const triggerExpand = (e: any, isExpand: any) => {
1193
- e.preventDefault();
1194
- e.stopPropagation();
1195
- let table = xGrid.value;
1196
- if (state.total > 1000) {
1197
- (window as any).$message.warning("当前数据量超过1000条,无法全部展开!");
1198
- } else {
1199
- state.isExpand = !isExpand;
1200
- if (isExpand) {
1201
- table.clearTreeExpand();
1202
- } else {
1203
- emit("triggerSpinning", true);
1204
- setTimeout(() => {
1205
- table.setAllTreeExpand(true).then(() => {
1206
- emit("triggerSpinning", false);
1207
- });
1208
- }, 100);
1209
- }
1210
- }
1211
- };
1212
- const getOtherConfigInit = () => {
1213
- let tableOptions: any = attr?.tableOptions || props.tableOptions || {};
1214
- const config = tableOptions?.config || {};
1215
- return config || undefined;
1216
- };
1217
- //刷新列表
1218
- const refreshTable = () => {
1219
- state.hasRefresh = false;
1220
- emit("refreshTable");
1221
- // this.DELETE_TABLE_REFRESH_CACHE(this.tableParams.tableId);
1222
- };
1223
- /* 全选相关 */
1224
- const handleCheckAll = () => {
1225
- if (props.pageVO.total > props.maxCheckSize) {
1226
- let text = `当前列表共${props.pageVO.total}条数据,为了确保系统安全,只能单次操作${props.maxCheckSize}条,你可以通过高级筛选过滤再次尝试`;
1227
- (window as any).$message.warning(text);
1228
- // return false;
1229
- }
1230
- emit("selectionChangeAll");
1231
- };
1232
- const handleCancelAllCheck = () => {
1233
- emit("selectionChangeAllCancel");
1234
- };
1235
- const getRowClassName = () => {
1236
- return state.selectType === "checkbox"
1237
- ? ({ row }: { row: any }) => {
1238
- const k = singleCheckedKey.value;
1239
- return k && k === row[props.primaryKey] ? "single--checked" : "";
1240
- }
1241
- : () => {};
1242
- };
1243
- // 统计
1244
- const footerMethod = ({ columns, data }: { columns: any; data: any }) => {
1245
- // 原统计逻辑
1246
- if (!props.groupCountFields || !props.groupCountFields.length) {
1247
- return [
1248
- columns.map((column: any, index: number) => {
1249
- if (index === 0) {
1250
- // return that.$root.$t('1.1.8.2.5');
1251
- return null;
1252
- // return demo();
1253
- }
1254
- return null;
1255
- // return demo();
1256
- }),
1257
- ];
1258
- }
1259
- // 分组统计
1260
- let groupText = getFooterGroup(columns, data, props);
1261
- let groupColumns = columns.map((column: any, index: number) => {
1262
- if (index === 0) {
1263
- // return that.$root.$t('1.1.8.2.5');
1264
- // return demo();
1265
- return null;
1266
- } else if (index === 1) {
1267
- return groupText;
1268
- }
1269
- return null;
1270
- // return demo();
1271
- });
1272
- emit("setGroupText", groupText);
1273
- state.groupText = groupText;
1274
- return [groupColumns];
1275
- };
1276
- // 懒加载树子节点
1277
- const loadChildrenMethod = ({ row }: { row: any }) => {
1278
- // vxe-table v2.x 未根据 checkMethod 禁用逻辑 直接根据父级决定子级checked状态
1279
- // 所以先设置 父级 checked false 再 恢复原状 顺便选中子级
1280
- const fixCheckedStatus = (children: any) => {
1281
- const needFix =
1282
- state.selectType == "checkbox" &&
1283
- row.checked &&
1284
- children.findIndex((item: any) => !checkMethod({ row: item })) >= 0;
1285
- if (needFix) {
1286
- needFix && (row.checked = false);
1287
- setTimeout(() => {
1288
- xGrid.value?.setCheckboxRow(row, true);
1289
- }, 0);
1290
- }
1291
- };
1292
- if (state.isTree == 2) {
1293
- const { tableId, page, pageSize, autograph, isTreeOrList } = props.tableParams;
1294
- const params = {
1295
- levelLazyLoadPrimaryKeyValue: row[props.primaryKey],
1296
- tableId,
1297
- page,
1298
- pageSize,
1299
- autograph,
1300
- isTreeOrList,
1301
- };
1302
-
1303
- return getAsyncTableData(params).then(({ data }: any) => {
1304
- if (data.result == "SUCCESS") {
1305
- let cloneRows = JSON.parse(JSON.stringify(data.map.rows));
1306
- let { fieldList, btnList, showButtonTop } = props.columnConfig;
1307
- let rowNodes = formatData({
1308
- tableList: data.map.rows,
1309
- fieldList,
1310
- btnList,
1311
- oldtableData: cloneRows,
1312
- showButtonTop,
1313
- });
1314
- rowNodes = setChecklist(rowNodes);
1315
- emit("refreshOldTableData", cloneRows);
1316
- fixCheckedStatus(rowNodes);
1317
- return rowNodes;
1318
- }
1319
- });
1320
- } else {
1321
- fixCheckedStatus(row.childrenList);
1322
- return Promise.resolve(row.childrenList);
1323
- }
1324
- };
1325
- // 懒加载请求子集
1326
- const getAsyncTableData = (params: any) => {
1327
- return Promise.resolve();
1328
- // return this.axios.post('/tableReader/getTableData', this.$qs.stringify(params));
1329
- };
1330
- const setChecklist = (list: any) => {
1331
- return list.map((i: any) => {
1332
- i["checked"] = i.checked || false;
1333
- if (state.isTree == 2) {
1334
- const treeNodeKey = state.levelLazyLoadSetting.childCountKey;
1335
- const { isTreeOrList = "" } = props.tableParams;
1336
- if (treeNodeKey && Number(i[treeNodeKey]) > 0) {
1337
- // isTreeOrList != 'LIST' && this.$set(i, 'hasChildren', true);
1338
- isTreeOrList != "LIST" && (i["hasChildren"] = true);
1339
- }
1340
- }
1341
- if (i.childrenList && i.childrenList.length) {
1342
- i.childrenList = setChecklist(i.childrenList);
1343
- }
1344
- // 处理富文本字段,转为字符串,判断是否为富文本,中转标志_temp+id,/<[^>]+>/g.test(i[item].replace(/<span (.*?)>(.*?)<\/span>$/g, ""))处理过大文本会卡住,replace的问题,直接判断有没有p元素就行
1345
- Object.keys(i).map(item => {
1346
- if (
1347
- i[item] &&
1348
- typeof i[item] == "string" &&
1349
- i[item].indexOf("<p") !== -1 &&
1350
- item.indexOf("_temp_" + i.id) === -1
1351
- ) {
1352
- i[item + "_temp_" + i.id] = i[item] || "";
1353
- i[item] = htmlToText(i[item]);
1354
- }
1355
- });
1356
- return {
1357
- ...i,
1358
- };
1359
- });
1360
- };
1361
- // 分组列表,合并分组标题单元格
1362
- const colspanMethod = ({ row, column, _rowIndex, _columnIndex }: any) => {
1363
- if (state.isTree != 3) {
1364
- return {
1365
- rowspan: 1,
1366
- colspan: 1,
1367
- };
1368
- }
1369
-
1370
- let xTree = xGrid.value;
1371
- let fristKeyIndex = xTree.getTableColumn().tableColumn.findIndex((column: any) => {
1372
- return !!column.property;
1373
- });
1374
- let colspan = xTree.getTableColumn().tableColumn.length - fristKeyIndex;
1375
- if (row.childrenList && row.childrenList.length && xTree) {
1376
- if (column.treeNode) {
1377
- return {
1378
- rowspan: 1,
1379
- colspan: colspan,
1380
- };
1381
- } else if (!column.property) {
1382
- return {
1383
- rowspan: 1,
1384
- colspan: 1,
1385
- };
1386
- } else {
1387
- return {
1388
- rowspan: 0,
1389
- colspan: 0,
1390
- };
1391
- }
1392
- }
1393
- };
1394
- // 表尾合并
1395
- const footerRowspanMethod = (obj: any) => {
1396
- // 不是分组统计 不需要合并col
1397
- if (!props.groupCountFields || !props.groupCountFields.length) return { rowspan: 1, colspan: 1 };
1398
- let { $rowIndex, _columnIndex, column } = obj;
1399
- let len = state.columnLen || 99;
1400
- let { isBatchSelect } = props.columnConfig;
1401
- if ($rowIndex === 0) {
1402
- // 有 checkbox radio
1403
- if (isBatchSelect == 1) {
1404
- if (_columnIndex === 0) {
1405
- return { rowspan: 1, colspan: 2 };
1406
- } else if (_columnIndex === 1) {
1407
- return { rowspan: 1, colspan: 0 };
1408
- } else if (_columnIndex === 2) {
1409
- return { rowspan: 1, colspan: len };
1410
- }
1411
- return { rowspan: 1, colspan: 0 };
1412
- }
1413
- if (_columnIndex === 0) {
1414
- return { rowspan: 1, colspan: 1 };
1415
- } else if (_columnIndex === 1) {
1416
- return { rowspan: 1, colspan: len };
1417
- }
1418
- return { rowspan: 1, colspan: 0 };
1419
- }
1420
- };
1421
- // 行双击
1422
- const rowdblclick = ({ row, column }: any) => {
1423
- if (isScanMultiTable.value || !!props.isInlineOperating) return false;
1424
- if (vexutils.has(row, GROUP_TITLE_KEY)) return false;
1425
- emit("setNestTableClick", props.isNestTable);
1426
- emit("rowdblclick", row, column, true, true);
1427
- };
1428
- const pubCheckChange = (rows: any[] = []) => {
1429
- state.treeTableLength = rows.filter(item => {
1430
- let isGroupRow = vexutils.has(item, GROUP_TITLE_KEY);
1431
- return !isGroupRow;
1432
- }).length;
1433
- state.visibleTreeCheck = rows.length > 1;
1434
- emit('selectionChange', rows);
1435
- }
1436
- const updateAddCheckedRows = (rows: any, isTree: boolean = false) => {
1437
- let obj = {
1438
- isUpdate: true,
1439
- updateRows: rows,
1440
- isTree
1441
- };
1442
- if (isTree) {
1443
- Object.assign(obj, {
1444
- isTree,
1445
- isCheckedChange: true,
1446
- checkedRows: state.checkedRows
1447
- });
1448
- }
1449
- emit('selectionChangeLocal', obj);
1450
- }
1451
- const removeCheckedRows = (rows: any, isCheckedChange?: any) => {
1452
- removeCheckedDisabledRows(state);
1453
- let checkedRows = state.checkedRows;
1454
- let needRemoveIndexs = [];
1455
-
1456
- for (let i = 0; i < rows.length; i++) {
1457
- let row = rows[i];
1458
- let removeIndex = currentCheckedKeys.value.findIndex((item: any) => {
1459
- return item === row[props.primaryKey];
1460
- });
1461
-
1462
- removeIndex >= 0 && needRemoveIndexs.push(removeIndex);
1463
- }
1464
-
1465
- needRemoveIndexs.sort((a, b) => b - a); // 从后往前删除
1466
-
1467
- emit('selectionChangeLocal', {
1468
- isAdd: false,
1469
- isCheckedChange,
1470
- needRemoveIndexs,
1471
- newCheckedRows: [], // 防止报错
1472
- checkedRows
1473
- });
1474
- }
1475
- const setCheckedMehod = (setChecked: any, row: any) => {
1476
- if (setChecked) {
1477
- updateAddCheckedRows(row);
1478
- return;
1479
- }
1480
- // 跨页时 清空之前
1481
- if (props.pageVO.pageIndex != state.lastPageIndex) {
1482
- updateAddCheckedRows(row);
1483
- return;
1484
- }
1485
- if (currentCheckedKeys.value.includes(row[props.primaryKey])) {
1486
- removeCheckedRows([row]);
1487
- return;
1488
- }
1489
- updateAddCheckedRows(row);
1490
- }
1491
- //行点击
1492
- const handlerClickRow = (data: any) => {
1493
- // console.log("data.", data);
1494
- if (isScanMultiTable.value || props.isInlineOperating) return false;
1495
- if (vexutils.has(data?.row, GROUP_TITLE_KEY)) return false;
1496
- if (state.isTriggerSelectionChange && state.isTree == 0) return false;
1497
- let table = xGrid.value;
1498
-
1499
- // 嵌套表与主表click切换时需要清除上次的选中
1500
- isAboutNestTable.value && emit('resetNestLastClickTable', table);
1501
-
1502
- let { row, $event = {}, $rowIndex } = data;
1503
- // 点击主表格展开行按钮 不需要触发选中行
1504
- let { className } = $event.target || {};
1505
- if (className && vexutils.isString(className) && className.includes('vxe-table--expand-btn')) return;
1506
-
1507
- // 记录上次点击table信息 用于清除
1508
- isAboutNestTable.value && emit('setNestLastClickTable', table, props.isNestTable, row[handleRowId.value], row);
1509
-
1510
- emit('setNestTableClick', false);
1511
-
1512
- // 子列表中点击行 需要特别处理行级按钮
1513
- if (props.isNestTable) {
1514
- table?.setAllCheckboxRow(false);
1515
- nestHandleClickRow(table, data);
1516
- return;
1517
- }
1518
-
1519
- let forbiddenBatchSelect = !checkMethod(data);
1520
- // 如果该行禁止批量多选,则选择/取消单行 并触发单击事件
1521
- if (state.selectType == 'checkbox' && forbiddenBatchSelect) {
1522
- table?.setAllCheckboxRow(false);
1523
- const value = getRowClassName()({ row }) == 'single--checked' ? [] : [row];
1524
- state.checkedRows = value;
1525
- pubCheckChange(value);
1526
- emit('handlerClickRow', row, $rowIndex);
1527
- return;
1528
- }
1529
- state.visibleCheckAllWrap = false;
1530
- state.visibleCheckAllWrapMore = false;
1531
-
1532
- let checked = false;
1533
- if (state.selectType == 'radio') {
1534
- checked = table.isCheckedByRadioRow(row);
1535
- } else {
1536
- checked = table.isCheckedByCheckboxRow(row);
1537
- }
1538
- // 如果是点击 radio 选中的,处理冲突。先执行 radioOnChange 再 handlerClickRow
1539
- if (state.isradioChange) {
1540
- checked = false;
1541
- state.isradioChange = false;
1542
- }
1543
- let checkedRow = table.getCheckboxRecords();
1544
- let rowLen = state.checkedRows.filter((item: any) => !vexutils.has(item, GROUP_TITLE_KEY)).length;
1545
- let newRow: any[] = [];
1546
- if (state.isTree != 0) {
1547
- // 点击树形表格的按钮 不需要触发选中行
1548
- let { className } = $event.target || {};
1549
- if (className && className.includes('vxe-tree--node-btn')) return;
1550
- // 树表格,点击行无需选中复选框
1551
- if (state.selectType === 'checkbox') {
1552
- let rowVal = {};
1553
- if (!state.isTriggerSelectionChange) {
1554
- table.setAllCheckboxRow(false);
1555
- state.checkedRows = [row];
1556
- pubCheckChange([row]);
1557
- rowVal = row;
1558
- } else {
1559
- if (checkedRow.length > 1) return false;
1560
- rowVal = checked || (checkedRow.length === 1 && !checked) ? checkedRow[0] : {};
1561
- state.checkedRows = [rowVal];
1562
- }
1563
- updateAddCheckedRows(rowVal, true);
1564
- // 需要选中行
1565
- emit('handlerClickRow', rowVal);
1566
- return;
1567
- }
1568
- let newTheUniqueKeyArr: any[] = [];
1569
- flattenRow(row, newRow, newTheUniqueKeyArr, handleRowId.value);
1570
- let res = intersectRow(checkedRow, newTheUniqueKeyArr, handleRowId.value);
1571
- if (!res) {
1572
- rowLen = 1;
1573
- } else {
1574
- rowLen = checkedRow.filter((item: any) => !vexutils.has(item, GROUP_TITLE_KEY)).length;
1575
- }
1576
- }
1577
- table.setAllCheckboxRow(false);
1578
- // 全选后/数据大于一条 单击行只剩这一行 取消其他
1579
- // 只有一条选中 单击行 取消选中
1580
- let setChecked = checked;
1581
- if (rowLen > 1) {
1582
- state.selectType != 'radio' && table.setCheckboxRow([row], true);
1583
- state.isTree != 0 && state.selectType != 'radio' && pubCheckChange(newRow);
1584
- state.selectType != 'radio' && emit('handlerClickRow', row, $rowIndex);
1585
- } else {
1586
- setChecked = !setChecked;
1587
- if (!setChecked) {
1588
- table.clearCurrentRow();
1589
- state.selectType == 'radio' && table.clearRadioRow();
1590
- state.isTree != 0 && state.selectType != 'radio' && pubCheckChange([]);
1591
- } else {
1592
- state.selectType == 'radio' && table.setRadioRow(row);
1593
- state.isTree != 0 && state.selectType != 'radio' && pubCheckChange(newRow);
1594
- }
1595
- state.selectType != 'radio' && table.setCheckboxRow([row], setChecked);
1596
- }
1597
- if (state.isTree != 0) {
1598
- setChecked && emit('handlerClickRow', row, $rowIndex);
1599
- return;
1600
- }
1601
-
1602
- setCheckedMehod(setChecked, row);
1603
- if (setChecked || rowLen > 1 || !rowLen) {
1604
- state.checkedRows = [row];
1605
- }
1606
- if (!setChecked && rowLen === 1) {
1607
- state.checkedRows = [];
1608
- }
1609
- setCurrentCheckedLength();
1610
- state.lastPageIndex = props.pageVO.pageIndex;
1611
- setChecked && emit('handlerClickRow', row, $rowIndex);
1612
- };
1613
- const addCheckedRows = (rows: any) => {
1614
- removeCheckedDisabledRows(state);
1615
- let checkedRows = state.checkedRows;
1616
-
1617
- if (currentCheckedKeys.value.length + rows.length > props.maxCheckSize) {
1618
- (window as any).$message.warning(`为了保证系统安全,单次操作数据量限额为${props.maxCheckSize}条,你可以通过高级筛选过滤后再次尝试`);
1619
- return false;
1620
- }
1621
-
1622
- let newCheckedRows = rows.filter((row: any) => {
1623
- return !currentCheckedKeys.value.includes(row[props.primaryKey]);
1624
- });
1625
- checkedRows.push(...newCheckedRows);
1626
-
1627
- emit('selectionChangeLocal', {
1628
- isAdd: true,
1629
- isCheckedChange: true,
1630
- newCheckedRows,
1631
- checkedRows
1632
- });
1633
- }
1634
- const treeTableSelectionChange = (records: any) => {
1635
- if (state.isTree == 0) {
1636
- return false;
1637
- }
1638
-
1639
- pubCheckChange(records);
1640
- return true;
1641
- }
1642
- const selectionChange = ({ checked, row, records }: any) => {
1643
- // HACK: 防止点击多选框时,触发cell-click(行选中)事件
1644
- // $event.stopPropagation、$event.preventDefault,点击多选框列的空白处触发多选事件,无法阻止事件冒泡触发cell-click事件
1645
- let table = xGrid.value;
1646
- table.clearCurrentRow();
1647
- state.isTriggerSelectionChange = true;
1648
- setTimeout(() => {
1649
- state.isTriggerSelectionChange = false;
1650
- }, 0);
1651
-
1652
- if (treeTableSelectionChange(records)) return;
1653
-
1654
- if (checked) {
1655
- addCheckedRows([row]);
1656
- } else {
1657
- removeCheckedRows([row], true);
1658
- }
1659
-
1660
- setCurrentCheckedLength();
1661
- };
1662
- const selectionChangeAll = ({ checked, records }: any) => {
1663
- if (treeTableSelectionChange(records)) return;
1664
- if (checked) {
1665
- addCheckedRows(records);
1666
- } else {
1667
- removeCheckedRows(props.data);
1668
- }
1669
- setCurrentCheckedLength();
1670
- };
1671
- // 单选
1672
- const radioOnChange = (rowData: any = {}) => {
1673
- let { data, row, $rowIndex } = rowData;
1674
- emit("selectionChange", [{ ...row }]);
1675
- // this.isradioChange = true;
1676
- };
1677
- // 排序
1678
- const sortChange = ({ property, order }: any) => {
1679
- if (props.isInlineOperating) return false;
1680
- // 重置自定义表头排序
1681
- Object.values(state.filterFields).forEach((item: any) => (item.filterSort = null));
1682
-
1683
- emit("sortChange", { prop: property, order });
1684
- };
1685
- const showDrawer = () => {
1686
- const theads =
1687
- xGrid.value.$el.childNodes[0].childNodes[1].childNodes[0].getElementsByClassName("mycolumn");
1688
- emit("setNestTableClickSetting", props.isNestTable);
1689
- emit("showDrawer", theads);
1690
- };
1691
- let scrollEvent = (params: any) => {
1692
- emit('scroll', params)
1693
- }
1694
- const initScroll = () => {
1695
- const { throttle = false, throttleTime = 800, throttleOptions = {} } = props.columnConfig?.scrollConfig || {}
1696
- if (throttle) {
1697
- scrollEvent = vexutils.throttle(scrollEvent, throttleTime, throttleOptions)
1698
- }
1699
- }
1700
- initScroll()
1701
- const handlerScroll = (params: any) => {
1702
- if (params.isX) {
1703
- hideFilterWrap(state, props);
1704
- }
1705
- scrollEvent(params)
1706
- };
1707
- const handleCellMouseenter = ({ column, $event }: any) => {
1708
- // vxe-table@2.10+ 触发tooltip给vxe-cell父节点设置了title 导致显示有误
1709
- if (column.showOverflow === 'title') {
1710
- const target = $event?.currentTarget;
1711
- const cls = target?.className;
1712
- const bodyCls = ' vxe-body--column ';
1713
- if (cls && ` ${cls} `.includes(bodyCls) && target && target.hasAttribute('title')) {
1714
- const cellElem = target.querySelector('.vxe-cell');
1715
- if (cellElem && cellElem.hasAttribute('title')) {
1716
- cellElem.removeAttribute('title');
1717
- }
1718
- // 行编辑时 去掉tooltip title
1719
- if (props.isInlineOperating) {
1720
- if (target && target.hasAttribute('title')) {
1721
- target.removeAttribute('title');
1722
- }
1723
- }
1724
- }
1725
- }
1726
- };
1727
- const getFooterTooltipTitle = (column: any) => {
1728
- let t = "";
1729
-
1730
- if (vexutils.has(props.sumData, column.property)) {
1731
- t += `<p class="table-footer-tooltip-label-wrap">
1732
- <span class="table-footer-tooltip-label">求和:</span>
1733
- ${vexutils.round(Number(props.sumData[column.property]), 4)}
1734
- </p>`;
1735
- }
1736
- if (vexutils.has(props.avgData, column.property)) {
1737
- t += `<p class="table-footer-tooltip-label-wrap">
1738
- <span class="table-footer-tooltip-label">平均值:</span>
1739
- ${vexutils.round(Number(props.avgData[column.property]), 4)}</p>`;
1740
- }
1741
-
1742
- return t;
1743
- };
1744
- const getFooterTitle = (column: any) => {
1745
- if (vexutils.has(props.sumData, column.property)) {
1746
- return vexutils.round(Number(props.sumData[column.property]), 2);
1747
- }
1748
- if (vexutils.has(props.avgData, column.property)) {
1749
- return vexutils.round(Number(props.avgData[column.property]), 2);
1750
- }
1751
- // return demo();
1752
- };
1753
- const hanldeClickRefresh = () => {
1754
- emit("pubTableRefresh");
1755
- };
1756
- /**
1757
- * 删除选中scan数据
1758
- */
1759
- const confirmScanMulti = (params: any) => {
1760
- let{row, $rowIndex} = params || {}
1761
- if(!row) return;
1762
- emit("scanMultiRemove", $rowIndex, params)
1763
- let vxeTable = xGrid.value;
1764
- vxeTable.remove(row);
1765
- }
1766
- const scanMultiOperate = (params: any) => {
1767
- return <NPopconfirm
1768
- onPositiveClick={() =>confirmScanMulti(params)}>
1769
- {{
1770
- trigger: () => <SvgIcon class="scan-multi-delete" iconClass="shanchu" />,
1771
- default: () => '是否确认删除?'
1772
- }}
1773
- </NPopconfirm>
1774
- };
1775
- /**
1776
- * 判断是否渲染EditForm
1777
- * @param {*} row
1778
- * @param {*} column
1779
- * @returns
1780
- */
1781
- const showEditForm = (row: any, column: any, $rowIndex: any) => {
1782
- if (!props.isMatchComponent || props.isNestTable || isScanMultiTable.value) return false;
1783
- if (props.isBatchEditing || props.isInlineEditing || props.isInlineAdding) {
1784
- let matchObj = state.editColumnMap[column.property];
1785
- if (!matchObj || !matchObj.matchItem || !matchObj.fieldItem) return false;
1786
- // 批量编辑 未选择全部行编辑
1787
- if (props.isBatchEditing && !props.isEditAllRow) {
1788
- let matchIndex = state.checkedRows.findIndex(
1789
- (v: any) => v[props.primaryKey] == row[props.primaryKey]
1790
- );
1791
- if (matchIndex < 0) return false;
1792
- }
1793
- if (props.isInlineEditing || props.isInlineAdding) {
1794
- if ($rowIndex !== 0) return false;
1795
- }
1796
- return matchObj.matchItem;
1797
- }
1798
- return false;
1799
- };
1800
- /**
1801
- * 初始化props
1802
- * @param {*} unionItem
1803
- * @param {*} row
1804
- * @param {*} column
1805
- * @param {*} $rowIndex
1806
- * @returns
1807
- */
1808
- const initBatchDynamicProps = (unionItem: any, row: any, column: any, $rowIndex: any) => {
1809
- let id = row[props.primaryKey];
1810
- let dynamicPropsCache = props.batchDynamicPropsCache[id];
1811
- if (dynamicPropsCache && dynamicPropsCache[unionItem.tableField]) {
1812
- return dynamicPropsCache[unionItem.tableField];
1813
- }
1814
- let matchObj = state.editColumnMap[column.property];
1815
- let { fieldItem = {} } = matchObj || {};
1816
- let defaultCombinationForm = {};
1817
- if (!props.isInlineAdding) {
1818
- let originalRow = props.pageIndexOldtableData.find(
1819
- (item: any) => item[props.primaryKey] == row[props.primaryKey]
1820
- );
1821
- defaultCombinationForm = setDefaultFormData(column.property, fieldItem, originalRow);
1822
- }
1823
- let tempFieldItem = JSON.parse(JSON.stringify(fieldItem));
1824
- let defaultForm = {
1825
- fieldList: [tempFieldItem],
1826
- defaultCombinationForm,
1827
- };
1828
- let dynamicProps = {
1829
- props: {
1830
- formPrimaryKey: id,
1831
- defaultForm,
1832
- banRequest: true,
1833
- propsFormBtn: true,
1834
- propsDelSetting: true,
1835
- parentConfig: {
1836
- is_edit: "1",
1837
- },
1838
- configuration: configuration.value,
1839
- isPure: true,
1840
- isOpenShortcut: false,
1841
- cacheUniqueKey: state.cacheUniqueKey,
1842
- styleSetting: {},
1843
- },
1844
- on: {
1845
- handleSubmit: handleSubmitEditForm,
1846
- banSubmit: banSubmit,
1847
- },
1848
- };
1849
- emit("setBatchDynamicPropsCache", {
1850
- primaryKey: row[props.primaryKey],
1851
- tableField: unionItem.tableField,
1852
- dynamicProps,
1853
- });
1854
- return dynamicProps;
1855
- };
1856
- /**
1857
- * 单个form提交成功数据
1858
- * @param {*} obj formData
1859
- */
1860
- const handleSubmitEditForm = (obj: any = {}) => {
1861
- // 单行编辑
1862
- if (props.isInlineEditing || props.isInlineAdding) {
1863
- emit("submitEditFormSuccess", obj);
1864
- return;
1865
- }
1866
-
1867
- // 批量编辑
1868
- if (props.isBatchEditing) {
1869
- emit("submitEditFormSuccessBatch", obj);
1870
- return;
1871
- }
1872
- };
1873
- /**
1874
- * 单个form提交失败
1875
- * @param {*} obj
1876
- */
1877
- const banSubmit = (obj: any) => {
1878
- // 单行编辑
1879
- if (props.isInlineEditing || props.isInlineAdding) {
1880
- emit("submitEditFormError");
1881
- return;
1882
- }
1883
- // 批量编辑
1884
- if (props.isBatchEditing) {
1885
- emit("submitEditFormErrorBatch", obj);
1886
- return;
1887
- }
1888
- };
1889
- /**
1890
- * 避免每次点击都查询
1891
- * 初始化查一次 行编辑 表单search用
1892
- */
1893
- // 避免每次点击都查询
1894
- const handleFormTheUniqueKey = async () => {
1895
- emit("initInlineEditFormConfig", {
1896
- listFormUnionSetting: props.listFormUnionSetting,
1897
- inlineEditFormConfig: props.inlineEditFormConfig,
1898
- });
1899
- let hasEditRow = props.btnList?.find((item: any) => {
1900
- let trigger_type = item.settingObj && item.settingObj[0]?.trigger_type;
1901
- if (item.isShow == 1 && trigger_type == "EDIT_ROW") return true;
1902
- return false;
1903
- });
1904
- if (!hasEditRow) return;
1905
- // await this.handleFieldTheUniqueKey();
1906
- };
1907
- const handlePreView = (data: any, i: any, e: any) => {
1908
- e.preventDefault();
1909
- e.stopPropagation();
1910
- if (!data) data = xb_big;
1911
- emit("handlePreView", data, i);
1912
- };
1913
- /**
1914
- * tsx渲染表格
1915
- */
1916
- // 图片jsx:当图片类型为头像时,显示的是圆形
1917
- const getPicture = (row: any, item: any, type: any) => {
1918
- return [
1919
- <div class={["img-wrap", type === "HEADPORTRAIT" ? "img-circle" : ""]}>
1920
- {handleImgArr(row[item.columnName], type, imgs2imgArr).map((v: any, i: any) => (
1921
- <img
1922
- key={i}
1923
- src={handleImgSrc(v, props.sysImageSize, "LIST_FIELD_SMALL")}
1924
- style={modalDetailImage(props.sysImageSize, "LIST_FIELD_SMALL", "36px")}
1925
- onClick={(e: any) => handlePreView(row[item.columnName], i, e)}
1926
- />
1927
- ))}
1928
- </div>,
1929
- ];
1930
- };
1931
- // 字段颜色jsx
1932
- const getColor = (row: any, item: any) => {
1933
- let color = row[item.columnName];
1934
- // color = row.color;
1935
- if (color?.includes("-")) {
1936
- let colorName = color.split("-")[1];
1937
- color = vexutils.oldColorMap(colorName);
1938
- }
1939
- return [
1940
- <div class="color-wrap" style="height: 100%; padding: 4px;">
1941
- <div style={{ background: color, height: "100%" }} />
1942
- </div>,
1943
- ];
1944
- };
1945
- // 日期显示格式化
1946
- const getDate = (row: any, item: any) => {
1947
- let obj: any = row[item.columnName] || "";
1948
- if (!vexutils.isEmpty(obj)) {
1949
- if (vexutils.isObject(obj) && "tooltip" in obj) {
1950
- return [
1951
- <n-tooltip>
1952
- {{
1953
- trigger: () => <span>{(obj as any).value}</span>
1954
- }}
1955
- <span innerHTML={(obj as any).tooltip} />
1956
- </n-tooltip>
1957
- ];
1958
- }
1959
- }
1960
- return [<span innerHTML={obj}></span>];
1961
- };
1962
- // 百分数格式化
1963
- const getPercentage = (row: any, item: any) => {
1964
- let value = row[item.columnName];
1965
- if (!value && value !== 0) return;
1966
- let percentValue = value;
1967
-
1968
- let SPANTAG_REGEXP = /<\/?span.*?>/g;
1969
- if (SPANTAG_REGEXP.test(value)) {
1970
- let d = document.createElement("span");
1971
- d.innerHTML = value;
1972
- value = d.textContent;
1973
- percentValue = value;
1974
- }
1975
-
1976
- if (value && vexutils.isString(value) && value.includes("%")) {
1977
- percentValue = Number(value.replace("%", ""));
1978
- }
1979
- let strokeColor = "#52c41a";
1980
- if (percentValue < 15) {
1981
- strokeColor = "#ff5500";
1982
- } else if (percentValue < 50) {
1983
- strokeColor = "#ff8b01";
1984
- } else if (percentValue < 90) {
1985
- strokeColor = "#1890ff";
1986
- }
1987
- if (percentValue > 100) {
1988
- percentValue = 100;
1989
- } else if (percentValue < 0) {
1990
- percentValue = 0;
1991
- }
1992
- return [
1993
- <div class="percent-wrap">
1994
- <span class="percent-value">{percentValue}%</span>
1995
- <NProgress percentage={percentValue} showIndicator={false} color={strokeColor} />
1996
- </div>,
1997
- ];
1998
- };
1999
- const getvideoList = (row: any, item: any) => {
2000
- let res = row[item.columnName];
2001
- if (Array.isArray(res)) {
2002
- res = JSON.stringify(res);
2003
- }
2004
- /** string */
2005
- return null;
2006
- // return [<video-list columnName={item.columnName} stlist={res} />];
2007
- };
2008
- const getOrCode = (row: any, item: any, type: any) => {
2009
- let src = qr;
2010
- return [
2011
- <span class="bigTable-qr-span" onClick={(e: any) => qrCodeEvent(e, row, item)}>
2012
- <img class="bigTable-qr-img" src={src} />
2013
- <span>
2014
- <SvgIcon iconClass="fangda" />
2015
- </span>
2016
- </span>,
2017
- ];
2018
- };
2019
- const qrCodeEvent = (e: any, row: any, item: any) => {
2020
- e.preventDefault();
2021
- e.stopPropagation();
2022
- let data = handleQrCodeContent(row, item);
2023
- emit("qrCodeEvent", data);
2024
- };
2025
- // 行内编辑对应生成的(保存、取消)按钮
2026
- const generateInlineBtnList = (row: any, index: any) => {
2027
- if (props.isNestTable) return;
2028
- /*
2029
- 操作列,存在行内编辑的情况
2030
- 前端插入【保存、取消】按钮
2031
- */
2032
- let inlineEditBtnList = [];
2033
- inlineEditBtnList.push(...getInlineEditBtn(row, "tileBtnList"));
2034
- inlineEditBtnList.push(...getInlineEditBtn(row, "foldBtnList"));
2035
- if (!inlineEditBtnList?.length) return;
2036
-
2037
- return [
2038
- <span>
2039
- <NButton
2040
- style={{ display: row.__isInlineEditing ? "inline-block" : "none" }}
2041
- onClick={(e: any) => {
2042
- e.stopPropagation();
2043
- emit("SET_SAVE_ROW_STATUS", true);
2044
- // this.SET_SAVE_ROW_STATUS(true);
2045
- }}
2046
- class="btn-custom-class row-btn"
2047
- size="small"
2048
- text
2049
- >
2050
- {{default: () => '保存'}}
2051
- </NButton>
2052
- <NButton
2053
- style={{ display: row.__isInlineEditing ? "inline-block" : "none" }}
2054
- onClick={(e: any) => {
2055
- e.stopPropagation();
2056
- emit("SET_CANCEL_ROW_STATUS", true);
2057
- // this.SET_CANCEL_ROW_STATUS(true);
2058
- }}
2059
- class="btn-custom-class row-btn"
2060
- size="small"
2061
- text
2062
- >
2063
- {{default: () => '取消'}}
2064
- </NButton>
2065
- </span>,
2066
- ];
2067
- };
2068
- // 按钮 jsx
2069
- const getTileBtnList = (row: any, index: number) => {
2070
- return [
2071
- (row.tileBtnList?.length &&
2072
- row.tileBtnList.map((btn: any, j: any) => {
2073
- return (
2074
- btn.isShow == "1" &&
2075
- btn.type != "LINK" && (
2076
- <NButton
2077
- key={btn.sid}
2078
- onClick={(e: any) => clickBtn(row, btn, index, e, j)}
2079
- class="btn-custom-class row-btn"
2080
- style={{
2081
- ...getBtnStyle(btn),
2082
- ...{
2083
- display: !row.__isInlineEditing ? "inline-block" : "none",
2084
- },
2085
- }}
2086
- disabled={row.__isDisableInlineEdit}
2087
- // type={
2088
- // btn.showStyle == "none_bg" || btn.showStyle === "only_icon" ? "link" : "primary"
2089
- // }
2090
- ghost={btn.showStyle == "white_bg"}
2091
- size="small"
2092
- // title={handleName(btn)}
2093
- // {getBtnIcon(btn)}
2094
- // {btn.showStyle === "only_icon" ? "" : handleName(btn)}
2095
- >
2096
- {{default: () => [getBtnIcon(btn), btn.showStyle === 'only_icon' ? '' : handleName(btn)]}}
2097
- </NButton>
2098
- )
2099
- );
2100
- })) ||
2101
- "",
2102
- ];
2103
- };
2104
- // 按钮事件
2105
- const clickBtn = (row: any, btn: any, index: number, e: any, j: any) => {
2106
- e.preventDefault();
2107
- e.stopPropagation();
2108
- recordClickBtnInfo(row, index);
2109
- emit("setNestTableClick", props.isNestTable);
2110
- emit("setCurRowIndex", index);
2111
- emit("clickBtn", row, btn, row[handlePrimaryKey.value], index);
2112
- // this.handleTopBtnTracher(btn, j);
2113
- };
2114
- // 按钮 jsx
2115
- const getBtnIcon = (btn: any, mr = "8px") => {
2116
- let icon;
2117
- if (btn.icon) {
2118
- if (state.btnIcons[btn.icon]) {
2119
- icon = <a-icon type={state.btnIcons[btn.icon]} />;
2120
- } else {
2121
- icon = (
2122
- <NTooltip
2123
- >
2124
- {{
2125
- trigger: () => <SvgIcon iconClass={btn.icon} style={{ marginRight: mr}} />,
2126
- default: () => handleName(btn)
2127
- }}
2128
- </NTooltip>
2129
- );
2130
- }
2131
- } else if (btn.iconSetting) {
2132
- icon = (
2133
- <SvgIcon
2134
- iconClass={JSON.parse(btn.iconSetting).icon}
2135
- style={{
2136
- marginRight: mr,
2137
- }}
2138
- />
2139
- );
2140
- }
2141
- return [icon];
2142
- };
2143
- // 按钮 jsx
2144
- const getFoldBtnList = (row: any, index: number) => {
2145
- const getOptions = () => {
2146
- return row.foldBtnList.map((b: any, j: any) => {
2147
- return {
2148
- label: `${handleName(b)}${getBtnIcon(b, "0")}`,
2149
- key: b.sid,
2150
- props: {
2151
- onClick: (e: any) => {
2152
- clickBtn(row, b, index, e.domEvent, j)
2153
- }
2154
- }
2155
- }
2156
- })
2157
- }
2158
- return [
2159
- (row.foldBtnList?.length && (
2160
- <NDropdown
2161
- style={{ display: !row.__isInlineEditing ? "inline-block" : "none" }}
2162
- disabled={props.isInlineOperating}
2163
- options={getOptions()}
2164
- >
2165
- <NButton size="small" style="margin-left: 8px">
2166
- {{default: () => '更多 ...'}}
2167
- </NButton>
2168
- </NDropdown>
2169
- )) ||
2170
- "",
2171
- ];
2172
- };
2173
- const switchBtnOnChange = (e: any, r: any, i: any, index: any) => {
2174
- emit('switchBtnOnChange', e, r, i, index);
2175
- }
2176
- const getBtnLinkSwitch = (row: any, item: any, disabled: any, index: any) => {
2177
- // 树表不能用索引取值,注意:row 是解析后的值。
2178
- let cur = state.isTree !== 0 ? row : props.oldtableData[index];
2179
- let key = cur[item.columnName];
2180
- if (typeof key === "string") {
2181
- if (key && key.startsWith("###{")) {
2182
- let temp = JSON.parse(key.replace("###", ""));
2183
- key = temp.tooltip || temp.value; // temp.tooltip 日期的处理
2184
- }
2185
- }
2186
- return [<NSwitch value={key == item.btnLinkSwitchDefVal} disabled={disabled} onUpdateValue={(e: boolean) => switchBtnOnChange(e, row, item, index)} />];
2187
- };
2188
- // 字段显示 jsx
2189
- const getField = (row: any, item: any, index: any, isLink: boolean) => {
2190
- const html = formatFieldText(row, item, props.columnConfig.fieldList, props.fieldListOriginal);
2191
-
2192
- const content = [
2193
- isLink && html ? (
2194
- <a onClick={(e: any) => linkDetail(row, item, index, e)} innerHTML={html} />
2195
- ) : (
2196
- <span class="domPropsInnerHTML-span" innerHTML={html} />
2197
- ),
2198
- ];
2199
-
2200
- if (isCopy(item, row)) {
2201
- return [
2202
- <NPopover
2203
- placement="right"
2204
- trigger="hover"
2205
- arrowPointToCenter
2206
- >
2207
- {{
2208
- trigger: () => content
2209
- }}
2210
- <NIcon component={CopyOutline} onClick={(e: any) => hanldeCopyContent(e, row[item.columnName])} />
2211
- </NPopover>,
2212
- ];
2213
- } else {
2214
- return [content];
2215
- }
2216
- };
2217
- // 链接按钮详情
2218
- const linkDetail = (row: any, col: any, index: any, e: any) => {
2219
- if (props.isInlineOperating) return false;
2220
- let vxeTable = xGrid.value;
2221
- e.preventDefault();
2222
- // e.stopPropagation();
2223
- // 方晶晶验收2.5.12需求, 要求link字段第一次可选中checkbox, 第二次点击不取消选中
2224
- let isCheckedByCheckboxRow = vxeTable.isCheckedByCheckboxRow(row);
2225
- if (isCheckedByCheckboxRow) {
2226
- e.stopPropagation();
2227
- }
2228
- vxeTable.setCurrentRow(row);
2229
- emit("setNestTableClick", props.isNestTable);
2230
- emit("setCurRowIndex", index);
2231
- emit("linkDetail", row, col, row[handlePrimaryKey.value], null, false, index);
2232
- };
2233
- const hanldeCopyContent = (e: any, value: any) => {
2234
- e.preventDefault();
2235
- e.stopPropagation();
2236
- emit("hanldeCopyContent", e, value);
2237
- };
2238
- // 获取checkbox已选行
2239
- const getCheckboxRecords = () => {
2240
- let res = [];
2241
- if (xGrid.value) {
2242
- res = xGrid.value.getCheckboxRecords();
2243
- }
2244
- return res;
2245
- }
2246
- const handleClickEditBtnByInline = async () => {
2247
- if (!checkListFormUnionSettingParamsList()) {
2248
- handleClickCancelBtnByInline();
2249
- return false;
2250
- }
2251
-
2252
- let vxeTable = xGrid.value;
2253
-
2254
- let { row, rowIndex } = getInlineOpreateRow();
2255
- recordClickBtnInfo(row, rowIndex);
2256
-
2257
- // HACK: 重置非当前表单的行内编辑状态(多列表场景)
2258
-
2259
- await (props as any).resetInlineEdit();
2260
- await vxeTable.loadData([row]);
2261
- emit('handleClickBtnByInline', {
2262
- type: 'EDIT',
2263
- listFormUnionSetting: props.listFormUnionSetting,
2264
- inlineEditFormConfig: props.inlineEditFormConfig,
2265
- inlineEditOriginalTableRow: props.oldtableData[rowIndex]
2266
- });
2267
- // vxeTable.setActiveRow(row);
2268
- setAllRowInlineStatus(true);
2269
- row['__isInlineEditing'] = true;
2270
-
2271
- setRowStatus(vxeTable.$el, 0, '66');
2272
- }
2273
- /* 多选相关 */
2274
- const setAllCheckedRows = (rows: any) => {
2275
- if (props.isNestTable) return;
2276
- if (rows && rows.length) {
2277
- const copy = vexutils.handleBigArrayCopy(rows);
2278
- state.checkedRows = Object.freeze(copy);
2279
-
2280
- let table = xGrid.value;
2281
- table.setAllCheckboxRow(true);
2282
- }
2283
- }
2284
- const setTalbeScrollTo = () => {
2285
- let table = xGrid.value;
2286
- if (!table) return;
2287
- table.scrollTo(table.getScroll().scrollLeft, 0);
2288
- }
2289
- const submitInlineForm = () => {
2290
- let error = props.inlineError;
2291
- if (error) {
2292
- (props as any).resetEditRowStatus();
2293
- emit('triggerSpinning', false);
2294
- return false;
2295
- }
2296
-
2297
- let { formId } = props.listFormUnionSetting;
2298
- let { id } = props.inlineOriginalTableRow;
2299
- if (!formId) {
2300
- console.log('缺少formId');
2301
- emit('triggerSpinning', false);
2302
- return;
2303
- }
2304
- if (state.isSaveForm) return false;
2305
- state.isSaveForm = true;
2306
-
2307
- let params = Object.assign({}, props.inlineFormData, {
2308
- formId,
2309
- id,
2310
- editMode: 'row'
2311
- });
2312
- params = JSON.parse(JSON.stringify(params));
2313
-
2314
- let noChangePrimaryKey = params[handleRowId.value] === addInlineEditPrimaryKey;
2315
- if (props.isInlineAdding && noChangePrimaryKey) {
2316
- delete params[handleRowId.value];
2317
- }
2318
-
2319
- (props as any).submitForm(params)
2320
- .then(async ({ data }: any) => {
2321
- emit('triggerSpinning', false);
2322
- if (data.result !== 'SUCCESS') {
2323
- state.isSaveForm = false;
2324
- (window as any).$message.error(data.resultMsg);
2325
- (props as any).resetEditRowStatus();
2326
- return false;
2327
- }
2328
-
2329
- await (props as any).resetInlineEdit();
2330
- resetOperationRowStatus();
2331
- emit('pubTableReload');
2332
- })
2333
- .finally(() => {
2334
- state.isSaveForm = false;
2335
- emit('triggerSpinning', false);
2336
- (props as any).resetEditRowStatus();
2337
- });
2338
- }
2339
- const handleClickAddBtnByInline = async () => {
2340
- if (!checkListFormUnionSettingParamsList()) {
2341
- handleClickCancelBtnByInline();
2342
- return false;
2343
- }
2344
- // 去掉更新后台时间
2345
- // let userInfo = await this.GetRealtimeSysParams();
2346
- // userInfo &&
2347
- // Object.assign(this.configuration, {
2348
- // userInfo
2349
- // });
2350
-
2351
- await (props as any).resetInlineEdit();
2352
- emit('handleClickBtnByInline', {
2353
- type: 'ADD',
2354
- listFormUnionSetting: props.listFormUnionSetting,
2355
- inlineEditFormConfig: props.inlineEditFormConfig
2356
- });
2357
-
2358
- addInlineEditPrimaryKey = Date.now();
2359
- let formData = {
2360
- [handleRowId.value]: addInlineEditPrimaryKey,
2361
- __isInsertRow: true
2362
- };
2363
- let { paramsList } = props.listFormUnionSetting;
2364
- paramsList.forEach((item: any) => {
2365
- formData[item.tableField] = undefined;
2366
- });
2367
-
2368
- let vxeTable = xGrid.value;
2369
- await vxeTable.insert(formData);
2370
- await vxeTable.loadData([formData]);
2371
- setAllRowInlineStatus(true);
2372
- setRowStatus(vxeTable.$el, 0, '66');
2373
- }
2374
- const handleClickSaveBtnByInline = () => {
2375
- if (props.spinning) return false;
2376
- emit('handleClickBtnByInline', { type: 'SAVE' });
2377
-
2378
- let formDom: any = document.querySelectorAll('.js-inlineEditForm');
2379
- let sliceLen = handleEditFormLength();
2380
- // HACK: vxeTable行内编辑时复制的DOM节点,无需触发提交
2381
- formDom = [...formDom].slice(0, sliceLen);
2382
- formDom.forEach((item: any) => {
2383
- item.__vue__.handleSubmitForm();
2384
- });
2385
- }
2386
- const removeInlineAddRow = () => {
2387
- if (!props.isInlineAdding) return false;
2388
-
2389
- const vxeTable = xGrid.value;
2390
- let { tableData } = vxeTable.getTableData();
2391
- vxeTable.remove(tableData[0]);
2392
- }
2393
-
2394
- /**
2395
- * wacth
2396
- */
2397
- watch(
2398
- () => props.columnConfig,
2399
- (config: any) => {
2400
- nextTick(() => {
2401
- if (!config || !Object.keys(config).length) return;
2402
- loadColumn(config);
2403
- });
2404
- },
2405
- { immediate: true }
2406
- );
2407
- watch(
2408
- () => props.data,
2409
- value => {
2410
- nextTick(() => {
2411
- loadData(value);
2412
- });
2413
- },
2414
- { immediate: true }
2415
- );
2416
- watch(
2417
- () => currentCheckedKeys,
2418
- val => {
2419
- setVisibleCheckAllWrap(state, props, currentCheckedKeys.value);
2420
- }
2421
- )
2422
- watch(
2423
- () => props.quickSearchConfig,
2424
- val => {
2425
- setFilterStatus(state, props);
2426
- },
2427
- { deep: true }
2428
- )
2429
- watch(
2430
- () => props.tableDataCache,
2431
- val => {
2432
- setAllCheckedRows(val);
2433
- },
2434
- { deep: true }
2435
- )
2436
- watch(
2437
- () => props.pageVO.pageSize,
2438
- val => {
2439
- if (props.isNestTable) return;
2440
- setVisibleCheckAllWrap(state, props, currentCheckedKeys.value);
2441
- resetTableInlineEditStatus();
2442
- }
2443
- )
2444
- watch(
2445
- () => props.pageVO.pageIndex,
2446
- val => {
2447
- if (props.isNestTable) return;
2448
- setTalbeScrollTo();
2449
- resetTableInlineEditStatus();
2450
- }
2451
- )
2452
- watch(
2453
- () => props.styleSetting.tableHeight,
2454
- val => {
2455
- if (props.isNestTable) return;
2456
- if (Object.keys(props.columnConfig).length > 0) {
2457
- loadColumn(props.columnConfig);
2458
- loadData(props.data);
2459
- setTalbeScrollTo();
2460
- }
2461
- }
2462
- )
2463
- watch(
2464
- () => props.sysImageSize,
2465
- val => {
2466
- const v = props.styleSetting?.tableHeight === 'table-simple' ? '26' : '22';
2467
- nextTick(() => {
2468
- handleTableImageSize(val, 'LIST_FIELD_SMALL', v + 'px');
2469
- });
2470
- },
2471
- { deep: true, immediate: true }
2472
- )
2473
- // 监听行内编辑表单,是否已校验并组装数据完毕
2474
- watch(
2475
- () => props.inlineEditFormSubmitDone,
2476
- val => {
2477
- if (!val || props.isNestTable) return;
2478
- if (state.isTree != 0 || !props.isMatchComponent) return false;
2479
- if (!checkOperateCurrentTable()) return false;
2480
- submitInlineForm()
2481
- }
2482
- )
2483
- // 监听行内编辑按钮的触发状态
2484
- watch(
2485
- () => props.isInlineEditing,
2486
- val => {
2487
- if (!val || props.isNestTable) return;
2488
- if (state.isTree != 0 || !props.isMatchComponent) return false;
2489
- if (!checkOperateCurrentTable()) return false;
2490
- submitInlineForm()
2491
- }
2492
- )
2493
- // 监听行内新增按钮的触发状态
2494
- watch(
2495
- () => props.isInlineAdding,
2496
- val => {
2497
- if (!val || props.isNestTable) return false;
2498
- if (state.isTree != 0 || !props.isMatchComponent) return false;
2499
- if (!checkOperateCurrentTable()) {
2500
- resetOperationRowStatus();
2501
- return false;
2502
- }
2503
-
2504
- hideSelectCloumns();
2505
- handleClickAddBtnByInline();
2506
- }
2507
- )
2508
- watch(
2509
- () => props.isInlineSave,
2510
- val => {
2511
- if (!val || props.isNestTable) return false;
2512
- if (state.isTree != 0 || !props.isMatchComponent) return false;
2513
- if (!checkOperateCurrentTable()) return false;
2514
- handleClickSaveBtnByInline();
2515
- }
2516
- )
2517
- watch(
2518
- () => props.isInlineCancel,
2519
- val => {
2520
- if (!val || props.isNestTable) return false;
2521
- if (state.isTree != 0 || !props.isMatchComponent) return false;
2522
- if (!checkOperateCurrentTable()) return false;
2523
-
2524
- removeInlineAddRow();
2525
- handleClickCancelBtnByInline();
2526
- }
2527
- )
2528
- // watch(
2529
- // () => route,
2530
- // val => {
2531
- // resetTableInlineEditStatus();
2532
- // }
2533
- // )
2534
- watch(
2535
- () => props.tableRefreshCache,
2536
- (val, oldVal) => {
2537
- if (props.isNestTable) return;
2538
- const { orgId } = props?.userInfo?.map?.sysParams || {};
2539
- // 增加判断老旧数据是否相同,判断orgId是否相等
2540
- if (val != oldVal && props.tableParams && val[props.tableParams.tableId] && orgId == val[props.tableParams.tableId]) {
2541
- state.hasRefresh = true;
2542
- }
2543
- },
2544
- { immediate: true, deep: true }
2545
- )
2546
- watch(
2547
- () => props.tableParams.tableId,
2548
- val => {
2549
- nextTick(() => {
2550
- if (val && props.tableRefreshCache[val]) {
2551
- state.hasRefresh = true;
2552
- }
2553
- });
2554
- }
2555
- )
2556
-
2557
- // defineExpose
2558
- const setCurrentRow = (row:any) => {
2559
- xGrid.value.setCurrentRow(row);
2560
- }
2561
- // loadColumnAndData
2562
- const loadColumnAndData = (data: any, config: any) => {
2563
- setTableConfig(config, state);
2564
- let columns = formatColumns(config);
2565
- columns = handleGroupColums(columns, props);
2566
- const list = setChecklist(data);
2567
- state.curAbleCheckedLen = list.filter((item: any) => checkMethod({ row: item })).length;
2568
-
2569
- if (!xGrid.value) return;
2570
-
2571
- Promise.all([xGrid.value.loadData(list), xGrid.value.reloadColumn(columns)]).then(() => {
2572
- console.log('列表加载完成');
2573
- setGroupTitleToFristColumnFieldData(list);
2574
- setGroupTreeExpand();
2575
- });
2576
- }
2577
- // 清除多选
2578
- const clearChecked = () => {
2579
- state.checkedRows = [];
2580
- xGrid.value.clearCheckboxReserve();
2581
- xGrid.value.clearCheckboxRow();
2582
- xGrid.value.clearRadioReserve();
2583
- xGrid.value.clearRadioRow();
2584
- state.visibleTreeCheck = false;
2585
- state.treeTableLength = 0;
2586
- }
2587
- defineExpose({
2588
- formatData,
2589
- xGrid
2590
- })
2591
-
2592
- </script>
2593
- <style lang="less" src="./assets/style/table-base.less"></style>
2594
- <style lang="less" src="./assets/style/table-global.less">
2595
- </style>