|
|
@@ -0,0 +1,747 @@
|
|
|
+<template>
|
|
|
+ <div class="container-component">
|
|
|
+ <div ref="ibpsCrud" class="ibps-container-crud">
|
|
|
+ <!-- 工具栏 -->
|
|
|
+ <!-- 标题栏-->
|
|
|
+ <div class="jbd-title-cont"> 人员权限一览列表 </div>
|
|
|
+ <div ref="ibpsCrudHeader" class="ibps-container-crud__header">
|
|
|
+ <div
|
|
|
+ class="header"
|
|
|
+ style="
|
|
|
+ overflow: scroll;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f9ffff;
|
|
|
+ border-bottom: 0px;
|
|
|
+ border-top: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- 换了位置 -->
|
|
|
+ <div
|
|
|
+ ref="toolbarBox"
|
|
|
+ class="toolbar-box clear"
|
|
|
+ style="padding: 0px; border: 0px"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ :model="formInline"
|
|
|
+ size="mini"
|
|
|
+ class="demo-form-inline"
|
|
|
+ tabindex="0"
|
|
|
+ @keyup.enter.native="onSubmit"
|
|
|
+ >
|
|
|
+ <el-form-item label="用户名称：">
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.roleName"
|
|
|
+ clearable
|
|
|
+ placeholder="输入用户名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="页面名称：">
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.pageName"
|
|
|
+ clearable
|
|
|
+ placeholder="输入页面资源名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
+ <el-button type="primary" @click="exportData">导出</el-button>
|
|
|
+ <!-- <el-button v-show="editFalg" type="primary" @click="tableSave" -->
|
|
|
+ <!-- >保存</el-button -->
|
|
|
+ <!-- > -->
|
|
|
+ <!-- <el-button v-show="!editFalg" type="primary" @click="tableEdit" -->
|
|
|
+ <!-- >编辑</el-button -->
|
|
|
+ <!-- > -->
|
|
|
+ <!-- <el-button v-show="editFalg" @click="tableCacel" -->
|
|
|
+ <!-- >取消</el-button -->
|
|
|
+ <!-- > -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--列表--><!-- @header-dragend="handleHeaderDragend" 拖拽事件取消 -->
|
|
|
+ <el-table
|
|
|
+ v-if="!loading"
|
|
|
+ ref="elTable"
|
|
|
+ border
|
|
|
+ :data="ibpsData"
|
|
|
+ :height="tableHeight"
|
|
|
+ :header-cell-style="{
|
|
|
+ color: '#000',
|
|
|
+ 'font-size': '14px',
|
|
|
+ padding: '6px 6px'
|
|
|
+ }"
|
|
|
+ :stripe="false"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @select="handleSelect"
|
|
|
+ @select-all="handleSelectAll"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ @sort-change="handleSortChange"
|
|
|
+ @cell-mouse-enter="handleCellMouseEnter"
|
|
|
+ @cell-mouse-leave="handleCellMouseLeave"
|
|
|
+ @cell-click="handleCellClick"
|
|
|
+ @cell-dblclick="handleCellDblclick"
|
|
|
+ @row-click="handleRowClick"
|
|
|
+ @row-contextmenu="handleRowContextmenu"
|
|
|
+ @row-dblclick="handleRowDblclick"
|
|
|
+ @header-click="handleHeaderClick"
|
|
|
+ @header-dragend="handleHeaderDragend"
|
|
|
+ @header-contextmenu="handleHeaderContextmenu"
|
|
|
+ >
|
|
|
+ <template slot="empty">
|
|
|
+ <slot v-if="$slots.empty" name="empty" />
|
|
|
+ <ibps-empty v-else />
|
|
|
+ </template>
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ min-width="280"
|
|
|
+ prop="pageName"
|
|
|
+ label="功能页面名称/用户名称"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in columns"
|
|
|
+ :key="item"
|
|
|
+ :prop="item"
|
|
|
+ :label="item"
|
|
|
+ align="center"
|
|
|
+ :width="calcColumnWidth(item)"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row, column, $index }">
|
|
|
+ <span v-if="!editFalg">{{
|
|
|
+ row.rolePermissions[item] ? '✔' : ''
|
|
|
+ }}</span>
|
|
|
+ <el-checkbox
|
|
|
+ v-else
|
|
|
+ v-model="row.rolePermissions[item]"
|
|
|
+ @change="rowChange(row)"
|
|
|
+ />
|
|
|
+ <!-- <span>{{ row.rolePermissions[item] }}</span> -->
|
|
|
+ </template>
|
|
|
+ <!-- <span>{{ row }} -{{ column }}-{{ $index }}</span> -->
|
|
|
+ </el-table-column>
|
|
|
+ <!--操作列end-->
|
|
|
+ </el-table>
|
|
|
+ <div
|
|
|
+ v-if="loading"
|
|
|
+ v-loading="loading"
|
|
|
+ :style="{ height: tableHeight + 'px' }"
|
|
|
+ />
|
|
|
+ <!--分页 或底部 自定义底部-->
|
|
|
+ <div
|
|
|
+ v-if="isShowPagination"
|
|
|
+ ref="ibpsCrudFooter"
|
|
|
+ class="ibps-container-crud__footer"
|
|
|
+ >
|
|
|
+ <template v-if="$slots.footer">
|
|
|
+ <slot name="footer" />
|
|
|
+ </template>
|
|
|
+ <el-pagination
|
|
|
+ v-else
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="pagination.totalCount"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ layout="prev, pager, next,sizes, jumper, ->, total"
|
|
|
+ @size-change="handlePaginationSizeChange"
|
|
|
+ @current-change="handlePaginationCurrentChange"
|
|
|
+ @prev-click="handlePaginationPrevClick"
|
|
|
+ @next-click="handlePaginationNextClick"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span class="el-pagination__total">{{ pageInfo }}</span>
|
|
|
+ </template>
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { debounce } from 'lodash'
|
|
|
+import { searchPeoplePermission, savePagePermission, getFilePermission } from '@/api/permission/page'
|
|
|
+// import height from '@/mixins/height'
|
|
|
+export default {
|
|
|
+ name: 'board-list',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formInline: {
|
|
|
+ roleName: '',
|
|
|
+ pageName: '',
|
|
|
+ type: 1
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ pageNo: 1,
|
|
|
+ limit: 20,
|
|
|
+ totalCount: 0,
|
|
|
+ totalPages: 1
|
|
|
+ },
|
|
|
+ columns: [],
|
|
|
+ isShowPagination: true,
|
|
|
+ /**
|
|
|
+ * @description 搜索框是否显示
|
|
|
+ */
|
|
|
+ showToolbar: true,
|
|
|
+ /**
|
|
|
+ * @description 表格的高度
|
|
|
+ */
|
|
|
+ tableHeight: null,
|
|
|
+ /**
|
|
|
+ * @description 工具栏的高度
|
|
|
+ */
|
|
|
+ toolbarBoxHeight: 0,
|
|
|
+ /**
|
|
|
+ * @description 选中的列
|
|
|
+ */
|
|
|
+ $selections: null,
|
|
|
+ /**
|
|
|
+ * @description 选中的选项
|
|
|
+ */
|
|
|
+ selectionRadio: '',
|
|
|
+ sortable: null,
|
|
|
+ // 编辑开关
|
|
|
+ editFalg: false,
|
|
|
+ ibpsData: [],
|
|
|
+ loading: false,
|
|
|
+ changeRows: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ currentPage() {
|
|
|
+ return this.pagination.pageNo || 1
|
|
|
+ },
|
|
|
+ pageSize() {
|
|
|
+ return this.pagination.limit || 20
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 分页信息
|
|
|
+ */
|
|
|
+ pageInfo() {
|
|
|
+ if (!this.showPagination) return ''
|
|
|
+ const total = this.pagination.totalCount
|
|
|
+ if (total && total > 0) {
|
|
|
+ const start = (this.currentPage - 1) * this.pageSize + 1
|
|
|
+ let end = this.currentPage * this.pageSize
|
|
|
+ if (total <= end) {
|
|
|
+ end = total
|
|
|
+ }
|
|
|
+ // `第${start}到第${end}条 共${total}条`
|
|
|
+ return this.$t('components.crud.pagination.pageInfo', {
|
|
|
+ start: start,
|
|
|
+ end: end,
|
|
|
+ total: total
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return !total ? this.$t('components.crud.pagination.noData') : '' // '暂无数据'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.search().then(() => {
|
|
|
+ this.handleTableHeight()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search() {
|
|
|
+ this.loading = true
|
|
|
+ console.log('this.pagination==>', this.pagination)
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ try {
|
|
|
+ searchPeoplePermission({
|
|
|
+ requestPage: {
|
|
|
+ limit: this.pagination.limit,
|
|
|
+ pageNo: this.pagination.pageNo
|
|
|
+ },
|
|
|
+ customs: this.formInline
|
|
|
+ }).then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ if (res.state === 200 && res.data) {
|
|
|
+ const { data, pageResult } = res.data || {
|
|
|
+ data: {},
|
|
|
+ pageResult: {}
|
|
|
+ }
|
|
|
+ this.pagination = pageResult
|
|
|
+ this.pagination.pageNo = pageResult.page
|
|
|
+ this.columns = data.roles
|
|
|
+ // console.log('permissions===>', data.permissions)
|
|
|
+ const newData = data.permissions.map((t) => {
|
|
|
+ const row = this.changeRows.find((it) => it.pageId === t.pageId)
|
|
|
+ return row || t
|
|
|
+ })
|
|
|
+ this.ibpsData = newData
|
|
|
+ } else {
|
|
|
+ this.pagination = {
|
|
|
+ pageNo: 1,
|
|
|
+ limit: this.pagination.limit,
|
|
|
+ totalCount: 0,
|
|
|
+ totalPages: 1
|
|
|
+ }
|
|
|
+ this.ibpsData = []
|
|
|
+ }
|
|
|
+ resolve()
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rowChange(row) {
|
|
|
+ const index = this.changeRows.findIndex((t) => t.pageId === row.pageId)
|
|
|
+ if (index === -1) {
|
|
|
+ this.changeRows.push(row)
|
|
|
+ } else {
|
|
|
+ this.changeRows.splice(index, 1, row)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 计算列宽：根据文字长度，加一些边距
|
|
|
+ calcColumnWidth(label) {
|
|
|
+ let width = 0
|
|
|
+ for (let i = 0; i < label.length; i++) {
|
|
|
+ // 汉字占 16px，英文/数字占 8px（可调整）
|
|
|
+ const char = label.charAt(i)
|
|
|
+ width += /[^\x00-\xff]/.test(char) ? 16 : 12
|
|
|
+ }
|
|
|
+ if (width + 24 < 60) {
|
|
|
+ return 60
|
|
|
+ }
|
|
|
+ return width + 24 // 加 20px 边距，避免文字贴边
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ console.log('submit!')
|
|
|
+ this.search()
|
|
|
+ },
|
|
|
+ exportData() {
|
|
|
+ getFilePermission({
|
|
|
+ requestPage: {
|
|
|
+ "limit": 999,
|
|
|
+ "pageNo": 1
|
|
|
+ },
|
|
|
+ customs: this.formInline
|
|
|
+ }).then(res => {
|
|
|
+ console.log('res', res)
|
|
|
+ let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
|
|
|
+ const downloadElement = document.createElement('a');
|
|
|
+ let href = window.URL.createObjectURL(blob);
|
|
|
+ downloadElement.href = href;
|
|
|
+ downloadElement.download = "人员权限一览列表.xlsx"; // 文件名字
|
|
|
+ document.body.appendChild(downloadElement);
|
|
|
+ downloadElement.click();
|
|
|
+ document.body.removeChild(downloadElement); // 下载完成移除元素
|
|
|
+ window.URL.revokeObjectURL(href); // 释放掉blob对象
|
|
|
+ this.$message.success('导出成功');
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('导出失败:', error);
|
|
|
+ this.$message.error('导出失败，请重试');
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tableEdit() {
|
|
|
+ if (!this.ibpsData || this.ibpsData.length === 0) {
|
|
|
+ this.$message.warning('列表无数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.editFalg = true
|
|
|
+ },
|
|
|
+ tableSave() {
|
|
|
+ if (this.changeRows.length === 0) {
|
|
|
+ this.$message.warning('列表无数据变更')
|
|
|
+ this.editFalg = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ savePagePermission({
|
|
|
+ permissions: this.changeRows
|
|
|
+ }).then((res) => {
|
|
|
+ this.changeRows = []
|
|
|
+ this.editFalg = false
|
|
|
+ this.search()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tableCacel() {
|
|
|
+ this.editFalg = false
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 每页条数改变
|
|
|
+ */
|
|
|
+ handlePaginationSizeChange(pageSize) {
|
|
|
+ this.handlePaginationChange({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: pageSize
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 当前页码改变
|
|
|
+ */
|
|
|
+ handlePaginationCurrentChange(currentPage) {
|
|
|
+ this.handlePaginationChange({
|
|
|
+ currentPage: currentPage,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 上一页
|
|
|
+ */
|
|
|
+ handlePaginationPrevClick(currentPage) {
|
|
|
+ this.handlePaginationChange({
|
|
|
+ currentPage: currentPage,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 下一页
|
|
|
+ */
|
|
|
+ handlePaginationNextClick(currentPage) {
|
|
|
+ this.handlePaginationChange({
|
|
|
+ currentPage: currentPage,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handlePaginationChange({ pageSize, currentPage }) {
|
|
|
+ this.pagination.limit = pageSize || this.pageSize
|
|
|
+ this.pagination.pageNo = currentPage || this.currentPage
|
|
|
+ this.search()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 排序状态
|
|
|
+ */
|
|
|
+ handleSortChange(params) {
|
|
|
+ const { column, prop, order } = params
|
|
|
+ const sortBy = column ? column.sortBy : null
|
|
|
+ },
|
|
|
+ indexMethod(index) {
|
|
|
+ if (this.pagination) {
|
|
|
+ return (this.currentPage - 1) * this.pageSize + index + 1
|
|
|
+ } else {
|
|
|
+ return index + 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleResize() {
|
|
|
+ this.handleTableHeight()
|
|
|
+ },
|
|
|
+ doLayout() {
|
|
|
+ if (this.$refs.elTable) {
|
|
|
+ this.$refs.elTable.doLayout()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleTableHeight(showToolbar) {
|
|
|
+ if (this.tableHeight) {
|
|
|
+ return
|
|
|
+ } else if (this.$refs.ibpsCrud) {
|
|
|
+ this.tableHeight = this.$refs.ibpsCrud.clientHeight
|
|
|
+ }
|
|
|
+ if (this.$refs.ibpsCrudHeader) {
|
|
|
+ this.tableHeight -= this.$refs.ibpsCrudHeader.clientHeight
|
|
|
+ }
|
|
|
+ if (this.$refs.ibpsCrudFooter) {
|
|
|
+ this.tableHeight -= this.$refs.ibpsCrudFooter.clientHeight
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.tableHeight || this.tableHeight <= 0) {
|
|
|
+ // 页面加载完成后设置高度
|
|
|
+ debounce(this.handleTableHeight, 100)()
|
|
|
+ }
|
|
|
+ if (this.$refs.elTable) {
|
|
|
+ this.$refs.elTable.doLayout()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 表格換颜色*/
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if (rowIndex % 2 === 1) return 'warning-row'
|
|
|
+ return 'success-row'
|
|
|
+ },
|
|
|
+ setSelectionRadio(row) {
|
|
|
+ const radio = row ? this.getPkValue(row) : ''
|
|
|
+ if (radio !== this.selectionRadio) {
|
|
|
+ this.$set(this, 'selectionRadio', radio)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearSelection() {
|
|
|
+ if (this.selectionType === 'radio') {
|
|
|
+ this.setSelectionRadio()
|
|
|
+ } else {
|
|
|
+ this.$refs.elTable.clearSelection()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggleRowSelection(row, selected) {
|
|
|
+ if (this.selectionType !== 'radio') {
|
|
|
+ this.$refs.elTable.toggleRowSelection(row, selected)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggleAllSelection() {
|
|
|
+ this.$refs.elTable.toggleAllSelection()
|
|
|
+ },
|
|
|
+ toggleSelectionRow(row, selected) {
|
|
|
+ const pkValue = this.getPkValue(row)
|
|
|
+ for (var i = 0; i < this.ibpsData.length; i++) {
|
|
|
+ const data = this.ibpsData[i]
|
|
|
+
|
|
|
+ if (this.getPkValue(data) === pkValue) {
|
|
|
+ this.$refs.elTable.toggleRowSelection(data, selected)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 处理工具栏收缩/展开
|
|
|
+ */
|
|
|
+ handleCollapseExpandToolbar() {
|
|
|
+ this.showToolbar = !this.showToolbar
|
|
|
+ this.handleTableHeight(true)
|
|
|
+ this.$emit('collapse-expand-toolbar', this.showToolbar)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 行选中状态
|
|
|
+ */
|
|
|
+ handleCurrentChange(currentRow, oldCurrentRow) {
|
|
|
+ this.$emit('current-change', currentRow, oldCurrentRow)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 勾选数据时触发的事件
|
|
|
+ */
|
|
|
+ handleSelect(selection, row) {
|
|
|
+ this.$emit('select', selection, row)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 勾选全选时触发的事件
|
|
|
+ */
|
|
|
+ handleSelectAll(selection) {
|
|
|
+ this.$emit('select-all', selection)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 复选框选择项发生变化时触发的事件
|
|
|
+ */
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.$selections = selection
|
|
|
+ this.$emit('selection-change', selection)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 单元格 hover 进入时触发的事件
|
|
|
+ */
|
|
|
+ handleCellMouseEnter(row, column, cell, event) {
|
|
|
+ this.$emit('cell-mouse-enter', row, column, cell, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 单元格 hover 退出时触发的事件
|
|
|
+ */
|
|
|
+ handleCellMouseLeave(row, column, cell, event) {
|
|
|
+ this.$emit('cell-mouse-leave', row, column, cell, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 单元格点击时触发的事件
|
|
|
+ */
|
|
|
+ handleCellClick(row, column, cell, event) {
|
|
|
+ this.$emit('cell-click', row, column, cell, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 单元格双击时触发的事件
|
|
|
+ */
|
|
|
+ handleCellDblclick(row, column, cell, event) {
|
|
|
+ this.$emit('cell-dblclick', row, column, cell, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 行点击时触发的事件
|
|
|
+ */
|
|
|
+ handleRowClick(row, event, column) {
|
|
|
+ if (this.selectionType === 'radio') {
|
|
|
+ this.setSelectionRadio(row)
|
|
|
+ this.$emit('selection-change', row)
|
|
|
+ } else {
|
|
|
+ this.$refs.elTable.toggleRowSelection(row)
|
|
|
+ }
|
|
|
+ this.$emit('row-click', row, event, column)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 行右键点击时触发的事件
|
|
|
+ */
|
|
|
+ handleRowContextmenu(row, event) {
|
|
|
+ this.$emit('row-contextmenu', row, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 行双击时触发的事件
|
|
|
+ */
|
|
|
+ handleRowDblclick(row, event) {
|
|
|
+ this.$emit('row-dblclick', row, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 表头点击时触发的事件
|
|
|
+ */
|
|
|
+ handleHeaderClick(column, event) {
|
|
|
+ this.$emit('header-click', column, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 当拖动表头改变了列的宽度的时候会触发该事件
|
|
|
+ */
|
|
|
+ handleHeaderDragend(newWidth, oldWidth, column, event) {
|
|
|
+ debounce(this.handleTableHeight, 100)()
|
|
|
+ this.$emit('header-dragend', newWidth, oldWidth, column, event)
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @description 表头右键点击时触发的事件
|
|
|
+ */
|
|
|
+ handleHeaderContextmenu(column, event) {
|
|
|
+ this.$emit('header-contextmenu', column, event)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 处理按钮的事件 【包含增删改查】
|
|
|
+ * @param {*} button
|
|
|
+ * @param {*} position
|
|
|
+ * @param {*} data
|
|
|
+ */
|
|
|
+ handleActionEvent(action, position, data, index) {
|
|
|
+ if (position === 'toolbar') {
|
|
|
+ data = this.$selections
|
|
|
+ }
|
|
|
+ if (action.emit) {
|
|
|
+ this.$emit(action.emit, {
|
|
|
+ key: action.key,
|
|
|
+ index: index,
|
|
|
+ row: data,
|
|
|
+ position: position,
|
|
|
+ action: action
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const buttonKey = action.key
|
|
|
+ let selection = null // 选中数据
|
|
|
+ if (position === 'toolbar') {
|
|
|
+ // 工具栏
|
|
|
+ if (
|
|
|
+ this.$utils.isArray(this.selectionAll) &&
|
|
|
+ this.selectionAll.length
|
|
|
+ ) {
|
|
|
+ selection = this.selectionAll.map((i) => i.id_) // 默认给所有已选择的数据id
|
|
|
+ } else {
|
|
|
+ selection = this.getSelectedIds()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 管理列
|
|
|
+ selection = data ? this.getPkValue(data) : null
|
|
|
+ }
|
|
|
+ // this.$emit('action-event', buttonKey, position, selection, data, index, action)
|
|
|
+ if (this.$utils.isArray(data) && this.selectionAll !== null) {
|
|
|
+ this.$emit(
|
|
|
+ 'action-event',
|
|
|
+ buttonKey,
|
|
|
+ position,
|
|
|
+ selection,
|
|
|
+ this.selectionAll,
|
|
|
+ index,
|
|
|
+ action
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.$emit(
|
|
|
+ 'action-event',
|
|
|
+ buttonKey,
|
|
|
+ position,
|
|
|
+ selection,
|
|
|
+ data,
|
|
|
+ index,
|
|
|
+ action
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 根据key获取对象的值
|
|
|
+ * 用于解决key值大小写不同的问题
|
|
|
+ * @param {Object} data 需要从中获取值的对象
|
|
|
+ */
|
|
|
+ getPkValue(data, defaultValue = '') {
|
|
|
+ const pkKey = this.pkKey || 'id'
|
|
|
+ // 创建一个忽略大小写的正则对象
|
|
|
+ const regx = new RegExp(`^${pkKey}$`, 'gi')
|
|
|
+ // 循环正则匹配
|
|
|
+ for (const key in data) {
|
|
|
+ // 匹配成功返回值
|
|
|
+ if (regx.test(key)) {
|
|
|
+ return data[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return defaultValue
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 获取选中的值
|
|
|
+ */
|
|
|
+ getSelectedIds() {
|
|
|
+ if (this.selectionType === 'radio') {
|
|
|
+ if (this.selectionRadio === null || this.selectionRadio === undefined) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ return this.selectionRadio
|
|
|
+ } else {
|
|
|
+ if (this.$selections === null || this.$selections === undefined) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const ids = []
|
|
|
+ this.$selections.map((item) => {
|
|
|
+ ids.push(this.getPkValue(item))
|
|
|
+ })
|
|
|
+ return ids
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.demo-form-inline {
|
|
|
+ padding: 0 14px;
|
|
|
+}
|
|
|
+.el-table th {
|
|
|
+ background-color: #84d5cf !important;
|
|
|
+ font-size: 12px !important;
|
|
|
+ color: #000000;
|
|
|
+ border: 0px;
|
|
|
+}
|
|
|
+.jbd-title-cont {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: rgb(249, 255, 255);
|
|
|
+ width: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ padding-top: 6px;
|
|
|
+}
|
|
|
+.el-table .caret-wrapper {
|
|
|
+ top: -5px;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+.el-table .sort-caret.ascending {
|
|
|
+ border-bottom-color: #909399;
|
|
|
+}
|
|
|
+.el-table .sort-caret.descending {
|
|
|
+ border-top-color: #909399;
|
|
|
+}
|
|
|
+.el-table td {
|
|
|
+ padding: 4px 0 !important;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 12px !important;
|
|
|
+}
|
|
|
+.el-table .warning-row {
|
|
|
+ background: #e0f0ee;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .success-row {
|
|
|
+ background: #f9ffff;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.el-table .el-table-column--selection {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.el-table .vertical-top {
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+.el-table .vertical-middle {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.el-table .vertical-bottom {
|
|
|
+ vertical-align: bottom;
|
|
|
+}
|
|
|
+.ibps-crud-search-form {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+/* 表单组件渲染时计算表单高度受转换元素影响（附件、人员、部门等） */
|
|
|
+.elTable .el-table__body-wrapper {
|
|
|
+ height: v-bind(tableHeight);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+</style>
|
