index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. <script>
  2. export default {
  3. name: "SuperTable",
  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. },
  60. components: {
  61. ElDictTag: () => import("@/components/DictTag/index.vue"),
  62. ElDraggable: () => import("@/components/draggable/index.vue"),
  63. ElFilePreview: () => import("@/components/file-preview/index.vue"),
  64. ElComputedInput: () => import("@/components/computed-input/index.vue"),
  65. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  66. ElPopoverMultipleSelectV2: () =>
  67. import("@/components/popover-select-v2/multiple.vue"),
  68. ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
  69. ElPopoverTreeSelect: () =>
  70. import("@/components/popover-tree-select/index.vue"),
  71. ButtonHide: () => import("./hide.vue"),
  72. ButtonFreeze: () => import("./freeze.vue"),
  73. IconHide: () => import("./once/hide.vue"),
  74. IconSort: () => import("./once/sort.vue"),
  75. IconFreeze: () => import("./once/freeze.vue"),
  76. IconFilter: () => import("./once/filters.vue"),
  77. },
  78. data() {
  79. const { columns, storageKey } = this.$props;
  80. const localColumns = localStorage.getItem(storageKey);
  81. const innerColumns =
  82. storageKey && localColumns
  83. ? JSON.parse(localColumns)
  84. : columns.map(({ item, attr }) => ({
  85. attr,
  86. item: { hidden: true, ...item },
  87. }));
  88. return {
  89. innerColumns: innerColumns,
  90. rowKey: "id",
  91. // 选择
  92. selectData: [],
  93. selectState: false,
  94. // 过滤
  95. filterData: [],
  96. filterState: false,
  97. };
  98. },
  99. computed: {
  100. innerValue: {
  101. get() {
  102. if (this.filterState) {
  103. return this.filterData;
  104. } else if (this.selectState) {
  105. return this.selectData;
  106. } else {
  107. return this.$props.value;
  108. }
  109. },
  110. set(value) {
  111. this.$emit("input", value);
  112. },
  113. },
  114. showColumns: {
  115. get() {
  116. return this.innerColumns.filter(({ item }) => item.hidden);
  117. },
  118. set() {},
  119. },
  120. filterRules: {
  121. get() {
  122. return Object.fromEntries(
  123. this.innerColumns
  124. .filter(({ item }) => item.filter && !!item.filter.length)
  125. .map(({ item }) => [item.key, item.filter])
  126. );
  127. },
  128. set() {},
  129. },
  130. },
  131. watch: {
  132. filterRules: {
  133. handler: function (newValue) {
  134. function multiFilter(array, filters) {
  135. const filterKeys = Object.keys(filters);
  136. // filters all elements passing the criteria
  137. return array.filter((item) => {
  138. // dynamically validate all filter criteria
  139. return filterKeys.every((key) => {
  140. //ignore when the filter is empty Anne
  141. if (!filters[key].length) return true;
  142. return !!~filters[key].indexOf(item[key]);
  143. });
  144. });
  145. }
  146. this.filterState = JSON.stringify(newValue) !== "{}";
  147. this.filterData = multiFilter(this.$props.value, newValue);
  148. },
  149. },
  150. },
  151. methods: {
  152. //
  153. onSelectionChange(value) {
  154. this.selectData = value;
  155. this.$emit("row-select", this.selectData);
  156. },
  157. //
  158. onRowClick(row, column, event) {
  159. const { radio, checkbox } = this.$props;
  160. // 单选
  161. if (radio) {
  162. this.$emit("row-select", [row]);
  163. }
  164. // 多选
  165. if (checkbox) {
  166. this.$refs.superTable.toggleRowSelection(
  167. this.innerValue.find((item) => item.id === row.id)
  168. );
  169. }
  170. },
  171. // 宽度
  172. onWidth(newProp, oldProp, column) {
  173. this.innerColumns = this.innerColumns.map(({ item, attr }) => ({
  174. attr,
  175. item: {
  176. ...item,
  177. width: item.key === column.property ? newProp : item.width,
  178. },
  179. }));
  180. if (this.$props.storageKey) {
  181. localStorage.setItem(
  182. this.$props.storageKey,
  183. JSON.stringify(this.innerColumns)
  184. );
  185. }
  186. },
  187. // 冻结
  188. onHide(prop) {
  189. this.$nextTick(() => {
  190. this.$refs.superTable.doLayout();
  191. if (this.$props.storageKey) {
  192. localStorage.setItem(
  193. this.$props.storageKey,
  194. JSON.stringify(this.innerColumns)
  195. );
  196. }
  197. });
  198. },
  199. // 排序
  200. onSort(prop) {
  201. const { key, sort } = prop;
  202. this.$nextTick(() => {
  203. this.$refs.superTable.sort(key, sort);
  204. this.$refs.superTable.doLayout();
  205. if (this.$props.storageKey) {
  206. localStorage.setItem(
  207. this.$props.storageKey,
  208. JSON.stringify(this.innerColumns)
  209. );
  210. }
  211. });
  212. },
  213. // 冻结
  214. onFreeze() {
  215. this.$nextTick(() => {
  216. this.$refs.superTable.doLayout();
  217. if (this.$props.storageKey) {
  218. localStorage.setItem(
  219. this.$props.storageKey,
  220. JSON.stringify(this.innerColumns)
  221. );
  222. }
  223. });
  224. },
  225. // 过滤
  226. onFilter() {
  227. this.$nextTick(() => {
  228. this.$refs.superTable.doLayout();
  229. if (this.$props.storageKey) {
  230. localStorage.setItem(
  231. this.$props.storageKey,
  232. JSON.stringify(this.innerColumns)
  233. );
  234. }
  235. });
  236. },
  237. onFilters(value) {
  238. const {
  239. item: { key },
  240. attr: { dictName },
  241. } = value;
  242. let dataList = [];
  243. const dict = this.dict.type[dictName];
  244. dataList = Array.from(
  245. new Set(this.innerValue.map((item) => item[key]).filter((item) => item))
  246. ).map((item) => ({
  247. text: dictName
  248. ? (dict.find((dictItem) => dictItem.value == item) || {}).label
  249. : item,
  250. value: item,
  251. }));
  252. return dataList;
  253. },
  254. // 继承el-table的Method
  255. extendMethod() {
  256. const refMethod = Object.entries(this.$refs["superTable"]);
  257. for (const [key, value] of refMethod) {
  258. if (!(key.includes("$") || key.includes("_"))) {
  259. this[key] = value;
  260. }
  261. }
  262. },
  263. },
  264. created() {},
  265. mounted() {
  266. this.extendMethod();
  267. },
  268. destroyed() {},
  269. };
  270. </script>
  271. <template>
  272. <div class="el-super-table">
  273. <el-table
  274. ref="superTable"
  275. border
  276. height="auto"
  277. :row-key="rowKey"
  278. :data="innerValue"
  279. :highlight-current-row="radio"
  280. @row-click="onRowClick"
  281. @selection-change="onSelectionChange"
  282. @header-dragend="onWidth"
  283. v-bind="$attrs"
  284. v-on="$listeners"
  285. style="flex: 1"
  286. >
  287. <!-- 多选 -->
  288. <el-table-column
  289. v-if="checkbox"
  290. :column-key="rowKey"
  291. fixed
  292. width="50"
  293. align="center"
  294. type="selection"
  295. reserve-selection
  296. >
  297. </el-table-column>
  298. <!-- 序号 -->
  299. <el-table-column
  300. v-if="index"
  301. :resizable="false"
  302. fixed
  303. width="50"
  304. label="序号"
  305. align="center"
  306. class="is-index"
  307. >
  308. <template slot-scope="scope">
  309. {{ scope.$index + 1 }}
  310. </template>
  311. </el-table-column>
  312. <el-table-column
  313. v-for="({ item, attr }, index) in showColumns"
  314. :key="item.key + index"
  315. :prop="item.key"
  316. :label="item.title"
  317. :fixed="item.fixed"
  318. :width="item.width || 200"
  319. show-overflow-tooltip
  320. >
  321. <template slot="header" slot-scope="scope">
  322. <template>
  323. <span v-if="item.require" style="color: #ff4949">*</span>
  324. <span
  325. :style="{
  326. color:
  327. item.sort ||
  328. item.fixed ||
  329. (item.filter && !!item.filter.length)
  330. ? '#1890ff'
  331. : '',
  332. }"
  333. >
  334. {{ item.title }}
  335. </span>
  336. <template>
  337. <icon-sort
  338. v-if="item.sortabled"
  339. v-model="item.sort"
  340. @sort="onSort(item)"
  341. ></icon-sort>
  342. <icon-freeze
  343. v-if="item.fixedabled"
  344. v-model="item.fixed"
  345. @freeze="onFreeze"
  346. ></icon-freeze>
  347. <icon-filter
  348. v-if="item.filterabled"
  349. v-model="item.filter"
  350. :filters="onFilters({ item, attr })"
  351. @filter="onFilter"
  352. ></icon-filter>
  353. <icon-hide
  354. v-if="item.hiddenabled"
  355. v-model="item.hidden"
  356. @hide="onHide"
  357. ></icon-hide>
  358. </template>
  359. </template>
  360. </template>
  361. <template slot-scope="scope">
  362. <slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
  363. <template v-if="attr.is">
  364. <component
  365. v-if="attr.is === 'el-dict-tag'"
  366. v-bind="attr"
  367. :size="$attrs.size"
  368. :value="scope.row[item.key]"
  369. :options="dict.type[attr.dictName]"
  370. ></component>
  371. <component
  372. v-else-if="attr.is === 'el-popover-select-v2'"
  373. v-bind="attr"
  374. v-model="scope.row[item.key]"
  375. :size="$attrs.size"
  376. :source.sync="scope.row"
  377. >
  378. </component>
  379. <component
  380. v-else-if="attr.is === 'el-popover-multiple-select-v2'"
  381. v-bind="attr"
  382. v-model="scope.row[item.key]"
  383. :size="$attrs.size"
  384. :source.sync="scope.row"
  385. >
  386. </component>
  387. <component
  388. v-else-if="attr.is === 'el-select'"
  389. v-bind="attr"
  390. v-model="scope.row[item.key]"
  391. :size="$attrs.size"
  392. >
  393. <template>
  394. <el-option
  395. v-for="item in dict.type[attr.dictName]"
  396. :key="item.value"
  397. :label="item.label"
  398. :value="item.value"
  399. >
  400. </el-option>
  401. </template>
  402. </component>
  403. <component
  404. v-else
  405. v-bind="attr"
  406. v-model="scope.row[item.key]"
  407. :size="$attrs.size"
  408. style="width: 100%"
  409. >
  410. </component
  411. ></template>
  412. <template v-else>
  413. <component v-if="attr.formatter" is="span">{{
  414. attr.formatter(scope.row)
  415. }}</component>
  416. <component v-else is="span">{{
  417. scope.row[item.key] || "--"
  418. }}</component>
  419. </template>
  420. </slot>
  421. </template>
  422. </el-table-column>
  423. <slot></slot>
  424. </el-table>
  425. <div
  426. style="
  427. height: 50px;
  428. display: flex;
  429. justify-content: space-between;
  430. align-items: center;
  431. "
  432. :style="{
  433. height: checkbox || pagination ? '50px' : '0px',
  434. }"
  435. >
  436. <div class="mr-4">
  437. <template v-if="checkbox">
  438. <el-button
  439. v-if="selectState"
  440. size="mini"
  441. @click="selectState = !selectState"
  442. >
  443. 所有列
  444. </el-button>
  445. <el-button
  446. v-else
  447. :disabled="!selectData.length"
  448. size="mini"
  449. @click="selectState = !selectState"
  450. >
  451. 选择列
  452. {{ selectData.length ? ` :${selectData.length}` : "" }}
  453. </el-button>
  454. </template>
  455. <template v-if="convenitentOperation">
  456. <button-hide v-model="innerColumns" @change="onHide"></button-hide>
  457. </template>
  458. </div>
  459. <pagination
  460. v-if="pagination"
  461. v-show="!selectState"
  462. :total="page.total"
  463. :page.sync="page.pageNum"
  464. :limit.sync="page.pageSize"
  465. @pagination="$emit('pagination', { ...$event })"
  466. style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
  467. />
  468. </div>
  469. </div>
  470. </template>
  471. <style lang="scss" scoped>
  472. .el-super-table {
  473. position: relative;
  474. flex: 1;
  475. display: flex;
  476. flex-direction: column;
  477. overflow: auto;
  478. }
  479. ::v-deep.el-super-table .el-table__header .cell {
  480. word-break: keep-all;
  481. white-space: nowrap;
  482. .icon-sort {
  483. display: none;
  484. }
  485. &:hover .icon-sort {
  486. display: inline-block;
  487. }
  488. .icon-freeze {
  489. display: none;
  490. }
  491. &:hover .icon-freeze {
  492. display: inline-block;
  493. }
  494. .icon-filter {
  495. display: none;
  496. }
  497. &:hover .icon-filter {
  498. display: inline-block;
  499. }
  500. .icon-hide {
  501. display: none;
  502. }
  503. &:hover .icon-hide {
  504. display: inline-block;
  505. }
  506. }
  507. </style>