index.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <script>
  2. export default {
  3. name: "SuperTable",
  4. props: {
  5. value: {
  6. type: [Array],
  7. require: true,
  8. },
  9. dict: {
  10. type: [Object],
  11. require: true,
  12. },
  13. columns: {
  14. type: [Array],
  15. require: true,
  16. },
  17. stroage: {
  18. type: Boolean,
  19. default: false,
  20. },
  21. hideOperationColumns: {
  22. type: Boolean,
  23. default: false,
  24. },
  25. },
  26. components: {
  27. ElDictTag: () => import("@/components/DictTag/index.vue"),
  28. ElDraggable: () => import("@/components/draggable/index.vue"),
  29. ElFilePreview: () => import("@/components/file-preview/index.vue"),
  30. ElComputedInput: () => import("@/components/computed-input/index.vue"),
  31. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  32. ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
  33. },
  34. data() {
  35. const { columns, stroage } = this.$props;
  36. const stroageKey = (
  37. this.$parent.$parent.$options.name + "_table"
  38. ).toUpperCase();
  39. const loaclColumns = JSON.parse(localStorage.getItem(stroageKey));
  40. const innerColumns = stroage && !!loaclColumns ? loaclColumns : columns;
  41. return {
  42. drawer: false,
  43. visible: false,
  44. top: 0,
  45. left: 0,
  46. stroageKey: stroageKey,
  47. innerColumns: innerColumns,
  48. currentData: {},
  49. };
  50. },
  51. computed: {
  52. innerValue: {
  53. get() {
  54. return this.value;
  55. },
  56. set(value) {
  57. this.$emit("input", value);
  58. },
  59. },
  60. showColumns: {
  61. get() {
  62. const { stroage, hideOperationColumns } = this.$props;
  63. return stroage && hideOperationColumns
  64. ? this.innerColumns.filter(({ item }) => item.hidden)
  65. : this.innerColumns;
  66. },
  67. },
  68. },
  69. watch: {
  70. visible(value) {
  71. if (value) {
  72. document.body.addEventListener("click", this.hideContextmenu);
  73. document.body.addEventListener("keydown", this.hideContextmenu);
  74. } else {
  75. document.body.removeEventListener("click", this.hideContextmenu);
  76. document.body.removeEventListener("keydown", this.hideContextmenu);
  77. }
  78. },
  79. },
  80. methods: {
  81. setColumns() {
  82. const { stroageKey, innerColumns } = this;
  83. this.$nextTick(() => {
  84. this.$refs.superTable.doLayout();
  85. localStorage.setItem(stroageKey, JSON.stringify(innerColumns));
  86. });
  87. },
  88. resetColumns() {
  89. const { stroageKey, innerColumns } = this;
  90. this.innerColumns = innerColumns.map(({ item, attr }) => ({
  91. attr,
  92. item: { ...item, hidden: true, fixed: false },
  93. }));
  94. this.$nextTick(() => {
  95. this.$refs.superTable.doLayout();
  96. localStorage.removeItem(stroageKey);
  97. });
  98. },
  99. openContextmenu(row, column, event) {
  100. this.visible = true;
  101. this.currentData = { row, column };
  102. this.$nextTick(() => {
  103. // 鼠标坐标
  104. const { x, y } = event;
  105. // 侧边栏宽度
  106. const [{ clientWidth: sideWidth }] =
  107. document.getElementsByClassName("sidebar-container");
  108. // 导航栏宽度
  109. const { clientHeight: navHeight } =
  110. document.getElementsByClassName("main-container")[0].firstChild;
  111. // 菜单宽度
  112. const [{ clientWidth: contextmenuWidth }] =
  113. document.getElementsByClassName("el-super-table_contextmenu");
  114. // 最大Y轴偏差
  115. const maxLeft = this.$el.offsetWidth - contextmenuWidth;
  116. if (x > maxLeft) {
  117. this.left = maxLeft + 10;
  118. } else {
  119. this.left = x - sideWidth;
  120. }
  121. this.top = y - navHeight;
  122. });
  123. },
  124. hideContextmenu(event) {
  125. const { type } = event;
  126. if (type === "click") {
  127. this.visible = false;
  128. }
  129. if (type === "keydown") {
  130. const { keyCode } = event;
  131. if (keyCode === 27) this.visible = false;
  132. }
  133. },
  134. },
  135. created() {},
  136. mounted() {},
  137. destroyed() {},
  138. };
  139. </script>
  140. <template>
  141. <div class="el-super-table" @contextmenu.prevent.stop>
  142. <el-table
  143. v-bind="$attrs"
  144. v-on="$listeners"
  145. :data="innerValue"
  146. border
  147. ref="superTable"
  148. @row-contextmenu="openContextmenu"
  149. >
  150. <slot></slot>
  151. <el-table-column
  152. v-for="({ item, attr }, index) in showColumns"
  153. :key="index"
  154. :prop="item.key"
  155. :label="item.title"
  156. :fixed="item.fixed"
  157. :width="item.width || 250"
  158. show-overflow-tooltip
  159. >
  160. <template slot-scope="scope">
  161. <slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
  162. <template v-if="attr.is">
  163. <component
  164. v-if="attr.is === 'el-dict-tag'"
  165. v-bind="attr"
  166. :size="$attrs.size"
  167. :value="scope.row[item.key]"
  168. :options="dict.type[attr.dictName]"
  169. ></component>
  170. <component
  171. v-else-if="attr.is === 'el-popover-select-v2'"
  172. v-bind="attr"
  173. v-model="scope.row[item.key]"
  174. :size="$attrs.size"
  175. :source.sync="scope.row"
  176. >
  177. </component>
  178. <component
  179. v-else-if="attr.is === 'el-select'"
  180. v-bind="attr"
  181. v-model="scope.row[item.key]"
  182. :size="$attrs.size"
  183. >
  184. <template>
  185. <el-option
  186. v-for="item in dict.type[attr.dictName]"
  187. :key="item.value"
  188. :label="item.label"
  189. :value="item.value"
  190. >
  191. </el-option>
  192. </template>
  193. </component>
  194. <component
  195. v-else
  196. v-bind="attr"
  197. v-model="scope.row[item.key]"
  198. :size="$attrs.size"
  199. >
  200. </component
  201. ></template>
  202. <template v-else>
  203. <component v-if="attr.formatter" is="span">{{
  204. attr.formatter(scope.row)
  205. }}</component>
  206. <component v-else is="span">{{
  207. scope.row[item.key] || "--"
  208. }}</component>
  209. </template>
  210. </slot>
  211. </template>
  212. </el-table-column>
  213. </el-table>
  214. <el-drawer :visible.sync="drawer" size="25%" title="操作列" append-to-body>
  215. <el-row :gutter="20" style="margin: 0">
  216. <el-draggable
  217. v-model="innerColumns"
  218. :group="{ item: 'key' }"
  219. @change="setColumns"
  220. >
  221. <el-col
  222. v-for="({ item }, index) in innerColumns"
  223. :key="index"
  224. :span="24"
  225. style="
  226. display: flex;
  227. justify-content: space-between;
  228. padding: 15px 20px;
  229. "
  230. >
  231. <span style="cursor: move">
  232. <i class="el-icon-rank"></i>
  233. {{ item.title }}
  234. </span>
  235. <div>
  236. <el-radio-group
  237. v-model="item.hidden"
  238. :size="$attrs.size"
  239. style="margin: 0 15px 0 0"
  240. @change="setColumns"
  241. >
  242. <el-radio-button :label="true">显</el-radio-button>
  243. <el-radio-button :label="false">隐</el-radio-button>
  244. </el-radio-group>
  245. <el-radio-group
  246. v-model="item.fixed"
  247. :size="$attrs.size"
  248. @change="setColumns"
  249. >
  250. <el-radio-button :label="false">不</el-radio-button>
  251. <el-radio-button label="left">左</el-radio-button>
  252. <el-radio-button label="right">右</el-radio-button>
  253. </el-radio-group>
  254. </div>
  255. </el-col>
  256. </el-draggable>
  257. </el-row>
  258. </el-drawer>
  259. <transition name="el-fade-in-linear">
  260. <ul
  261. v-show="visible"
  262. :style="{ left: left + 'px', top: top + 'px' }"
  263. class="el-super-table_contextmenu"
  264. >
  265. <li v-if="hideOperationColumns" @click="drawer = true">
  266. <i class="el-icon-setting"></i>
  267. <span>设置布局</span>
  268. </li>
  269. <li v-if="hideOperationColumns" @click="resetColumns">
  270. <i class="el-icon-refresh"></i>
  271. <span>重置布局</span>
  272. </li>
  273. <slot name="contextmenu" v-bind="currentData"> </slot>
  274. </ul>
  275. </transition>
  276. </div>
  277. </template>
  278. <style lang="scss">
  279. .el-super-table .el-table {
  280. overflow: hidden;
  281. border-radius: 5px;
  282. }
  283. .el-super-table_contextmenu {
  284. margin: 0;
  285. background: #fff;
  286. z-index: 3000;
  287. position: absolute;
  288. list-style-type: none;
  289. padding: 5px 0;
  290. border-radius: 4px;
  291. font-size: 12px;
  292. font-weight: 400;
  293. color: #333;
  294. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  295. li {
  296. margin: 0;
  297. padding: 7px 16px;
  298. cursor: pointer;
  299. &:hover {
  300. background: #ddd;
  301. }
  302. span {
  303. margin: 0 0 0 5px;
  304. }
  305. }
  306. }
  307. </style>