index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
  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. value:{
  151. handler: function (newValue) {
  152. if(this.value.length > 0){
  153. this.$refs.superTable.clearSelection();
  154. }
  155. },
  156. immediate: true,
  157. deep:true
  158. }
  159. },
  160. methods: {
  161. //
  162. onSelectionChange(value) {
  163. this.selectData = value;
  164. this.$emit("row-select", this.selectData);
  165. },
  166. //
  167. onRowClick(row, column, event) {
  168. const { radio, checkbox } = this.$props;
  169. // 单选
  170. if (radio) {
  171. this.$emit("row-select", [row]);
  172. }
  173. // 多选
  174. if (checkbox) {
  175. this.$refs.superTable.toggleRowSelection(
  176. this.innerValue.find((item) => item.id === row.id)
  177. );
  178. }
  179. },
  180. // 宽度
  181. onWidth(newProp, oldProp, column) {
  182. this.innerColumns = this.innerColumns.map(({ item, attr }) => ({
  183. attr,
  184. item: {
  185. ...item,
  186. width: item.key === column.property ? newProp : item.width,
  187. },
  188. }));
  189. if (this.$props.storageKey) {
  190. localStorage.setItem(
  191. this.$props.storageKey,
  192. JSON.stringify(this.innerColumns)
  193. );
  194. }
  195. },
  196. // 冻结
  197. onHide(prop) {
  198. this.$nextTick(() => {
  199. this.$refs.superTable.doLayout();
  200. if (this.$props.storageKey) {
  201. localStorage.setItem(
  202. this.$props.storageKey,
  203. JSON.stringify(this.innerColumns)
  204. );
  205. }
  206. });
  207. },
  208. // 排序
  209. onSort(prop) {
  210. const { key, sort } = prop;
  211. this.$nextTick(() => {
  212. this.$refs.superTable.sort(key, sort);
  213. this.$refs.superTable.doLayout();
  214. if (this.$props.storageKey) {
  215. localStorage.setItem(
  216. this.$props.storageKey,
  217. JSON.stringify(this.innerColumns)
  218. );
  219. }
  220. });
  221. },
  222. // 冻结
  223. onFreeze() {
  224. this.$nextTick(() => {
  225. this.$refs.superTable.doLayout();
  226. if (this.$props.storageKey) {
  227. localStorage.setItem(
  228. this.$props.storageKey,
  229. JSON.stringify(this.innerColumns)
  230. );
  231. }
  232. });
  233. },
  234. // 过滤
  235. onFilter() {
  236. this.$nextTick(() => {
  237. this.$refs.superTable.doLayout();
  238. if (this.$props.storageKey) {
  239. localStorage.setItem(
  240. this.$props.storageKey,
  241. JSON.stringify(this.innerColumns)
  242. );
  243. }
  244. });
  245. },
  246. onFilters(value) {
  247. const {
  248. item: { key },
  249. attr: { dictName },
  250. } = value;
  251. let dataList = [];
  252. const dict = this.dict.type[dictName];
  253. dataList = Array.from(
  254. new Set(this.innerValue.map((item) => item[key]).filter((item) => item))
  255. ).map((item) => ({
  256. text: dictName
  257. ? (dict.find((dictItem) => dictItem.value == item) || {}).label
  258. : item,
  259. value: item,
  260. }));
  261. return dataList;
  262. },
  263. // 继承el-table的Method
  264. extendMethod() {
  265. const refMethod = Object.entries(this.$refs["superTable"]);
  266. for (const [key, value] of refMethod) {
  267. if (!(key.includes("$") || key.includes("_"))) {
  268. this[key] = value;
  269. }
  270. }
  271. },
  272. },
  273. created() {},
  274. mounted() {
  275. this.extendMethod();
  276. },
  277. destroyed() {},
  278. };
  279. </script>
  280. <template>
  281. <div class="el-super-table">
  282. <el-table
  283. ref="superTable"
  284. border
  285. height="auto"
  286. :row-key="rowKey"
  287. :data="innerValue"
  288. :highlight-current-row="radio"
  289. @row-click="onRowClick"
  290. @selection-change="onSelectionChange"
  291. @header-dragend="onWidth"
  292. v-bind="$attrs"
  293. v-on="$listeners"
  294. style="flex: 1"
  295. >
  296. <!-- 多选 -->
  297. <el-table-column
  298. v-if="checkbox"
  299. :column-key="rowKey"
  300. fixed
  301. width="50"
  302. align="center"
  303. type="selection"
  304. reserve-selection
  305. >
  306. </el-table-column>
  307. <!-- 序号 -->
  308. <el-table-column
  309. v-if="index"
  310. :resizable="false"
  311. fixed
  312. width="50"
  313. label="序号"
  314. align="center"
  315. class="is-index"
  316. >
  317. <template slot-scope="scope">
  318. {{ scope.$index + 1 }}
  319. </template>
  320. </el-table-column>
  321. <el-table-column
  322. v-for="({ item, attr }, index) in showColumns"
  323. :key="item.key + index"
  324. :prop="item.key"
  325. :label="item.title"
  326. :fixed="item.fixed"
  327. :width="item.width || 200"
  328. show-overflow-tooltip
  329. >
  330. <template slot="header" slot-scope="scope">
  331. <template>
  332. <span v-if="item.require" style="color: #ff4949">*</span>
  333. <span
  334. :style="{
  335. color:
  336. item.sort ||
  337. item.fixed ||
  338. (item.filter && !!item.filter.length)
  339. ? '#1890ff'
  340. : '',
  341. }"
  342. >
  343. {{ item.title }}
  344. </span>
  345. <template>
  346. <icon-sort
  347. v-if="item.sortabled"
  348. v-model="item.sort"
  349. @sort="onSort(item)"
  350. ></icon-sort>
  351. <icon-freeze
  352. v-if="item.fixedabled"
  353. v-model="item.fixed"
  354. @freeze="onFreeze"
  355. ></icon-freeze>
  356. <icon-filter
  357. v-if="item.filterabled"
  358. v-model="item.filter"
  359. :filters="onFilters({ item, attr })"
  360. @filter="onFilter"
  361. ></icon-filter>
  362. <icon-hide
  363. v-if="item.hiddenabled"
  364. v-model="item.hidden"
  365. @hide="onHide"
  366. ></icon-hide>
  367. </template>
  368. </template>
  369. </template>
  370. <template slot-scope="scope">
  371. <slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
  372. <template v-if="attr.is">
  373. <component
  374. v-if="attr.is === 'el-dict-tag'"
  375. v-bind="attr"
  376. :size="$attrs.size"
  377. :value="scope.row[item.key]"
  378. :options="dict.type[attr.dictName]"
  379. ></component>
  380. <component
  381. v-else-if="attr.is === 'el-popover-select-v2'"
  382. v-bind="attr"
  383. v-model="scope.row[item.key]"
  384. :title="item.title"
  385. :size="$attrs.size"
  386. :source.sync="scope.row"
  387. >
  388. </component>
  389. <component
  390. v-else-if="attr.is === 'el-popover-multiple-select-v2'"
  391. v-bind="attr"
  392. v-model="scope.row[item.key]"
  393. :title="item.title"
  394. :size="$attrs.size"
  395. :source.sync="scope.row"
  396. >
  397. </component>
  398. <component
  399. v-else-if="attr.is === 'el-select'"
  400. v-bind="attr"
  401. v-model="scope.row[item.key]"
  402. :size="$attrs.size"
  403. >
  404. <template>
  405. <el-option
  406. v-for="item in dict.type[attr.dictName]"
  407. :key="item.value"
  408. :label="item.label"
  409. :value="item.value"
  410. >
  411. </el-option>
  412. </template>
  413. </component>
  414. <component
  415. v-else
  416. v-bind="attr"
  417. v-model="scope.row[item.key]"
  418. :size="$attrs.size"
  419. style="width: 100%"
  420. >
  421. </component
  422. ></template>
  423. <template v-else>
  424. <component v-if="attr.formatter" is="span">{{
  425. attr.formatter(scope.row)
  426. }}</component>
  427. <component v-else is="span">{{
  428. scope.row[item.key] || "--"
  429. }}</component>
  430. </template>
  431. </slot>
  432. </template>
  433. </el-table-column>
  434. <slot></slot>
  435. </el-table>
  436. <div
  437. style="
  438. height: 50px;
  439. display: flex;
  440. justify-content: space-between;
  441. align-items: center;
  442. "
  443. :style="{
  444. height: checkbox || pagination ? '50px' : '0px',
  445. }"
  446. >
  447. <div class="mr-4">
  448. <!-- <template v-if="checkbox">
  449. <el-button
  450. v-if="selectState"
  451. size="mini"
  452. @click="selectState = !selectState"
  453. >
  454. 所有列
  455. </el-button>
  456. <el-button
  457. v-else
  458. :disabled="!selectData.length"
  459. size="mini"
  460. @click="selectState = !selectState"
  461. >
  462. 选择列
  463. {{ selectData.length ? ` :${selectData.length}` : "" }}
  464. </el-button>
  465. </template> -->
  466. <template v-if="convenitentOperation">
  467. <button-hide v-model="innerColumns" @change="onHide"></button-hide>
  468. </template>
  469. </div>
  470. <pagination
  471. v-if="pagination"
  472. v-show="!selectState"
  473. :total="page.total"
  474. :page.sync="page.pageNum"
  475. :limit.sync="page.pageSize"
  476. @pagination="$emit('pagination', { ...$event })"
  477. style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
  478. />
  479. </div>
  480. </div>
  481. </template>
  482. <style lang="scss" scoped>
  483. .el-super-table {
  484. position: relative;
  485. flex: 1;
  486. display: flex;
  487. flex-direction: column;
  488. overflow: auto;
  489. }
  490. ::v-deep.el-super-table .el-table__header .cell {
  491. word-break: keep-all;
  492. white-space: nowrap;
  493. .icon-sort {
  494. display: none;
  495. }
  496. &:hover .icon-sort {
  497. display: inline-block;
  498. }
  499. .icon-freeze {
  500. display: none;
  501. }
  502. &:hover .icon-freeze {
  503. display: inline-block;
  504. }
  505. .icon-filter {
  506. display: none;
  507. }
  508. &:hover .icon-filter {
  509. display: inline-block;
  510. }
  511. .icon-hide {
  512. display: none;
  513. }
  514. &:hover .icon-hide {
  515. display: inline-block;
  516. }
  517. }
  518. </style>