index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. <script>
  2. export default {
  3. name: "SuperUxTable",
  4. props: {
  5. // 数据
  6. value: {
  7. type: [Array],
  8. require: true,
  9. },
  10. // 字典
  11. dict: {
  12. type: [Object],
  13. require: true,
  14. },
  15. // 分页
  16. page: {
  17. type: [Object],
  18. require: false,
  19. },
  20. // 模板
  21. columns: {
  22. type: [Array],
  23. require: true,
  24. },
  25. // 是否显示序号
  26. index: {
  27. type: Boolean,
  28. default: false,
  29. },
  30. // 是否显示单选
  31. radio: {
  32. type: Boolean,
  33. default: false,
  34. },
  35. // 是否显示多选
  36. checkbox: {
  37. type: Boolean,
  38. default: false,
  39. },
  40. // 是否显示分页
  41. pagination: {
  42. type: Boolean,
  43. default: false,
  44. },
  45. // 是否列操作
  46. convenitentOperation: {
  47. type: Boolean,
  48. default: false,
  49. },
  50. // 是否禁止选择
  51. selectable: {
  52. type: Function,
  53. default: () => {},
  54. },
  55. //
  56. storageKey: {
  57. type: String,
  58. },
  59. showSummary: {
  60. type: Boolean,
  61. default: false,
  62. },
  63. height: {
  64. type: [String, Number],
  65. require: false,
  66. },
  67. firstSummary: {
  68. type: Boolean,
  69. default: false,
  70. },
  71. },
  72. components: {
  73. ElDictTag: () => import("@/components/DictTag/index.vue"),
  74. ElDraggable: () => import("@/components/draggable/index.vue"),
  75. ElFilePreview: () => import("@/components/file-preview/index.vue"),
  76. ElComputedInput: () => import("@/components/computed-input/index.vue"),
  77. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  78. ElPopoverMultipleSelectV2: () =>
  79. import("@/components/popover-select-v2/multiple.vue"),
  80. ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
  81. ElPopoverTreeSelect: () =>
  82. import("@/components/popover-tree-select/index.vue"),
  83. ButtonHide: () => import("./hide.vue"),
  84. ButtonFreeze: () => import("./freeze.vue"),
  85. IconHide: () => import("./once/hide.vue"),
  86. IconSort: () => import("./once/sort.vue"),
  87. IconFreeze: () => import("./once/freeze.vue"),
  88. IconFilter: () => import("./once/filters.vue"),
  89. },
  90. data() {
  91. const { columns, storageKey } = this.$props;
  92. const localColumns = localStorage.getItem(storageKey);
  93. const innerColumns =
  94. storageKey && localColumns
  95. ? JSON.parse(localColumns)
  96. : columns.map(({ item, attr }) => ({
  97. attr,
  98. item: { hidden: true, ...item },
  99. }));
  100. return {
  101. innerColumns: innerColumns,
  102. rowKey: "id",
  103. // 选择
  104. selectData: [],
  105. selectState: false,
  106. // 过滤
  107. filterData: [],
  108. filterState: false,
  109. count: 0,
  110. scrollTop: 0,
  111. resizeHeight: 0,
  112. };
  113. },
  114. computed: {
  115. innerValue: {
  116. get() {
  117. if (this.filterState) {
  118. return this.filterData;
  119. } else if (this.selectState) {
  120. return this.selectData;
  121. } else {
  122. return this.$props.value;
  123. }
  124. },
  125. set(value) {
  126. this.$emit("input", value);
  127. },
  128. },
  129. showColumns: {
  130. get() {
  131. return this.innerColumns.filter(({ item }) => item.hidden);
  132. },
  133. set() {},
  134. },
  135. filterRules: {
  136. get() {
  137. return Object.fromEntries(
  138. this.innerColumns
  139. .filter(({ item }) => item.filter && !!item.filter.length)
  140. .map(({ item }) => [item.key, item.filter])
  141. );
  142. },
  143. set() {},
  144. },
  145. tableHeight: {
  146. get() {
  147. let { height } = this.$props;
  148. return height ? height : this.resizeHeight;
  149. },
  150. set() {},
  151. },
  152. },
  153. watch: {
  154. filterRules: {
  155. handler: function (newValue) {
  156. function multiFilter(array, filters) {
  157. const filterKeys = Object.keys(filters);
  158. // filters all elements passing the criteria
  159. return array.filter((item) => {
  160. // dynamically validate all filter criteria
  161. return filterKeys.every((key) => {
  162. //ignore when the filter is empty Anne
  163. if (!filters[key].length) return true;
  164. return !!~filters[key].indexOf(item[key]);
  165. });
  166. });
  167. }
  168. this.filterState = JSON.stringify(newValue) !== "{}";
  169. this.filterData = multiFilter(this.$props.value, newValue);
  170. },
  171. },
  172. value: {
  173. handler: function (newValue) {
  174. if (this.value.length > 0) {
  175. this.$refs.superUxTable && this.$refs.superUxTable.clearSelection();
  176. }
  177. },
  178. immediate: true,
  179. deep: true,
  180. },
  181. },
  182. directives: {
  183. // 使用局部注册指令的方式
  184. resize: {
  185. // 指令的名称
  186. bind(el, binding) {
  187. // el为绑定的元素,binding为绑定给指令的对象
  188. let width = "",
  189. height = "";
  190. function isReize() {
  191. const style = document.defaultView.getComputedStyle(el);
  192. if (width !== style.width || height !== style.height) {
  193. binding.value(); // 关键
  194. }
  195. width = style.width;
  196. height = style.height;
  197. }
  198. el.__vueSetInterval__ = setInterval(isReize, 300);
  199. },
  200. unbind(el) {
  201. clearInterval(el.__vueSetInterval__);
  202. },
  203. },
  204. },
  205. methods: {
  206. resize() {
  207. this.resizeHeight =
  208. document.getElementsByClassName("el-super-ux-table")[0].offsetHeight -
  209. 55;
  210. },
  211. //
  212. onSelectionChange(value) {
  213. this.selectData = value;
  214. this.$emit("row-select", this.selectData);
  215. },
  216. //
  217. onRowClick(row, column, event) {
  218. const { radio, checkbox } = this.$props;
  219. // 单选
  220. if (radio) {
  221. this.$emit("row-select", [row]);
  222. }
  223. // 多选
  224. if (checkbox) {
  225. this.$refs.superUxTable.toggleRowSelection([
  226. this.innerValue.find((item) => item.id === row.id),
  227. ]);
  228. }
  229. },
  230. // 宽度
  231. onWidth({ column }) {
  232. this.innerColumns = this.innerColumns.map(({ item, attr }) => ({
  233. attr,
  234. item: {
  235. ...item,
  236. width: item.key === column.property ? column.resizeWidth : item.width,
  237. },
  238. }));
  239. if (this.$props.storageKey) {
  240. localStorage.setItem(
  241. this.$props.storageKey,
  242. JSON.stringify(this.innerColumns)
  243. );
  244. }
  245. },
  246. // 隐藏
  247. onHide(prop) {
  248. this.$nextTick(() => {
  249. this.$refs.superUxTable.doLayout();
  250. if (this.$props.storageKey) {
  251. localStorage.setItem(
  252. this.$props.storageKey,
  253. JSON.stringify(this.innerColumns)
  254. );
  255. }
  256. });
  257. },
  258. // 排序
  259. onSort(prop) {
  260. const { key, sort } = prop;
  261. this.$nextTick(() => {
  262. this.$refs.superUxTable.sort(key, sort);
  263. this.$refs.superUxTable.doLayout();
  264. if (this.$props.storageKey) {
  265. localStorage.setItem(
  266. this.$props.storageKey,
  267. JSON.stringify(this.innerColumns)
  268. );
  269. }
  270. });
  271. },
  272. // 冻结
  273. onFreeze() {
  274. this.$nextTick(() => {
  275. this.$refs.superUxTable.doLayout();
  276. if (this.$props.storageKey) {
  277. localStorage.setItem(
  278. this.$props.storageKey,
  279. JSON.stringify(this.innerColumns)
  280. );
  281. }
  282. this.count++;
  283. });
  284. },
  285. // 过滤
  286. onFilter() {
  287. this.$nextTick(() => {
  288. this.$refs.superUxTable.doLayout();
  289. if (this.$props.storageKey) {
  290. localStorage.setItem(
  291. this.$props.storageKey,
  292. JSON.stringify(this.innerColumns)
  293. );
  294. }
  295. });
  296. },
  297. onFilters(value) {
  298. const {
  299. item: { key },
  300. attr: { dictName },
  301. } = value;
  302. let dataList = [];
  303. const dict = this.dict.type[dictName];
  304. dataList = Array.from(
  305. new Set(this.innerValue.map((item) => item[key]).filter((item) => item))
  306. ).map((item) => ({
  307. text: dictName
  308. ? (dict.find((dictItem) => dictItem.value == item) || {}).label
  309. : item,
  310. value: item,
  311. }));
  312. return dataList;
  313. },
  314. // 继承el-table的Method
  315. extendMethod() {
  316. const refMethod = Object.entries(this.$refs["superUxTable"]);
  317. for (const [key, value] of refMethod) {
  318. if (!(key.includes("$") || key.includes("_"))) {
  319. this[key] = value;
  320. }
  321. }
  322. },
  323. getSummaries({ columns, data }) {
  324. const means = []; // 合计
  325. let { firstSummary } = this.$props;
  326. columns.forEach((column, columnIndex) => {
  327. if (!firstSummary && columnIndex === 0) {
  328. means.push("合计");
  329. } else {
  330. const values = data.map((item) => Number(item[column.property]));
  331. let sumColumn = this.showColumns.filter(
  332. ({ item, attr }) => attr.isSummary && item.key === column.property
  333. );
  334. // 合计
  335. // if (!values.every(value => isNaN(value))) {
  336. if (sumColumn.length) {
  337. means[columnIndex] = values.reduce((prev, curr) => {
  338. const value = Number(curr);
  339. if (!isNaN(value)) {
  340. return prev + curr;
  341. } else {
  342. return prev;
  343. }
  344. }, 0);
  345. means[columnIndex] = means[columnIndex].toFixed(2);
  346. } else {
  347. means[columnIndex] = "";
  348. }
  349. }
  350. });
  351. // sums[index] = sums[index] && sums[index].toFixed(2); // 保留2位小数,解决小数合计列
  352. return [means];
  353. },
  354. },
  355. created() {},
  356. mounted() {
  357. this.extendMethod();
  358. },
  359. updated() {
  360. this.$nextTick(() => {
  361. this.$refs.superUxTable.doLayout();
  362. });
  363. },
  364. destroyed() {},
  365. };
  366. </script>
  367. <template>
  368. <div class="el-super-ux-table" :key="count" v-resize="resize">
  369. <ux-grid
  370. border
  371. row-key
  372. use-virtual
  373. keep-source
  374. show-overflow
  375. beautify-table
  376. ref="superUxTable"
  377. v-bind="$attrs"
  378. :height="tableHeight"
  379. v-on="$listeners"
  380. :data="innerValue"
  381. :show-summary="showSummary"
  382. :summary-method="getSummaries"
  383. @row-click="onRowClick"
  384. @header-dragend="onWidth"
  385. @selection-change="onSelectionChange"
  386. :header-row-style="{
  387. color: '#515a6e',
  388. }"
  389. style="flex: 1"
  390. >
  391. <!-- 多选 -->
  392. <ux-table-column
  393. v-if="checkbox"
  394. fixed="left"
  395. width="50"
  396. align="center"
  397. type="checkbox"
  398. resizable
  399. reserve-selection
  400. :column-key="rowKey"
  401. ></ux-table-column>
  402. <!-- 序号 -->
  403. <ux-table-column
  404. v-if="index"
  405. fixed="left"
  406. width="50"
  407. title="序号"
  408. type="index"
  409. align="center"
  410. class="is-index"
  411. resizable
  412. ></ux-table-column>
  413. <ux-table-column
  414. v-for="({ item, attr }, index) in showColumns"
  415. :key="item.key + index"
  416. :field="item.key"
  417. :title="item.title"
  418. :fixed="item.fixed ? 'left' : undefined"
  419. :width="item.width || 180"
  420. resizable
  421. show-overflow
  422. >
  423. <template slot="header" slot-scope="scope">
  424. <template>
  425. <span v-if="item.require" style="color: #ff4949">*</span>
  426. <span
  427. :style="{
  428. color:
  429. item.sort ||
  430. item.fixed ||
  431. (item.filter && !!item.filter.length)
  432. ? '#1890ff'
  433. : '',
  434. }"
  435. >
  436. {{ item.title }}
  437. </span>
  438. <template>
  439. <icon-sort
  440. v-if="item.sortabled"
  441. v-model="item.sort"
  442. @sort="onSort(item)"
  443. ></icon-sort>
  444. <icon-freeze
  445. v-if="item.fixedabled"
  446. v-model="item.fixed"
  447. @freeze="onFreeze"
  448. ></icon-freeze>
  449. <icon-filter
  450. v-if="item.filterabled"
  451. v-model="item.filter"
  452. :filters="onFilters({ item, attr })"
  453. @filter="onFilter"
  454. ></icon-filter>
  455. <icon-hide
  456. v-if="item.hiddenabled"
  457. v-model="item.hidden"
  458. @hide="onHide"
  459. ></icon-hide>
  460. </template>
  461. </template>
  462. </template>
  463. <template slot-scope="scope">
  464. <slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
  465. <template v-if="attr.is">
  466. <component
  467. v-if="attr.is === 'el-dict-tag'"
  468. v-bind="attr"
  469. :size="$attrs.size"
  470. :value="scope.row[item.key]"
  471. :options="dict.type[attr.dictName]"
  472. ></component>
  473. <component
  474. v-else-if="attr.is === 'el-popover-select-v2'"
  475. v-bind="attr"
  476. v-model="scope.row[item.key]"
  477. :title="item.title"
  478. :size="$attrs.size"
  479. :source.sync="scope.row"
  480. >
  481. </component>
  482. <component
  483. v-else-if="attr.is === 'el-popover-multiple-select-v2'"
  484. v-bind="attr"
  485. v-model="scope.row[item.key]"
  486. :title="item.title"
  487. :size="$attrs.size"
  488. :source.sync="scope.row"
  489. >
  490. </component>
  491. <component
  492. v-else-if="attr.is === 'el-select'"
  493. v-bind="attr"
  494. v-model="scope.row[item.key]"
  495. :size="$attrs.size"
  496. >
  497. <template>
  498. <el-option
  499. v-for="item in dict.type[attr.dictName]"
  500. :key="item.value"
  501. :label="item.label"
  502. :value="item.value"
  503. >
  504. </el-option>
  505. </template>
  506. </component>
  507. <component
  508. v-else
  509. v-bind="attr"
  510. v-model="scope.row[item.key]"
  511. :size="$attrs.size"
  512. style="width: 100%"
  513. >
  514. </component
  515. ></template>
  516. <template v-else>
  517. <component v-if="attr.formatter" is="span">{{
  518. attr.formatter(scope.row)
  519. }}</component>
  520. <component v-else is="span">{{
  521. scope.row[item.key] || "--"
  522. }}</component>
  523. </template>
  524. </slot>
  525. </template>
  526. </ux-table-column>
  527. <slot></slot>
  528. <!-- </el-table> -->
  529. </ux-grid>
  530. <div
  531. style="
  532. height: 50px;
  533. display: flex;
  534. justify-content: space-between;
  535. align-items: center;
  536. "
  537. :style="{
  538. height: checkbox || pagination ? '50px' : '0px',
  539. }"
  540. >
  541. <div class="mr-4">
  542. <template v-if="convenitentOperation">
  543. <button-hide v-model="innerColumns" @change="onHide"></button-hide>
  544. </template>
  545. </div>
  546. <pagination
  547. v-if="pagination"
  548. v-show="!selectState"
  549. :total="page.total"
  550. :page.sync="page.pageNum"
  551. :limit.sync="page.pageSize"
  552. @pagination="$emit('pagination', { ...$event })"
  553. style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
  554. />
  555. </div>
  556. </div>
  557. </template>
  558. <style lang="scss" scoped>
  559. .el-super-ux-table {
  560. position: relative;
  561. display: flex;
  562. flex: 1;
  563. flex-direction: column;
  564. overflow: auto;
  565. }
  566. ::v-deep.el-super-ux-table .elx-cell {
  567. word-break: keep-all;
  568. white-space: nowrap;
  569. .icon-sort {
  570. display: none;
  571. }
  572. &:hover .icon-sort {
  573. display: inline-block;
  574. }
  575. .icon-freeze {
  576. display: none;
  577. }
  578. &:hover .icon-freeze {
  579. display: inline-block;
  580. }
  581. .icon-filter {
  582. display: none;
  583. }
  584. &:hover .icon-filter {
  585. display: inline-block;
  586. }
  587. .icon-hide {
  588. display: none;
  589. }
  590. &:hover .icon-hide {
  591. display: inline-block;
  592. }
  593. }
  594. ::v-deep.uxbeautifyTableClass
  595. .elx-header--column
  596. .elx-resizable.is--line:before {
  597. height: 100%;
  598. background-color: #dfe6ec;
  599. }
  600. </style>