/** * 新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm * 高级查询按钮调用 superQuery方法 高级查询组件ref定义为superQueryModal * data中url定义 list为查询列表 delete为删除单条记录 deleteBatch为批量删除 */ import { filterObj } from '@/utils/util' import { getAction, postAction } from '@/api/manage' import { mapGetters } from 'vuex' export const SimpleListMixin = { data () { return { /* 查询条件-请不要在queryParam中声明非字符串值的属性 */ queryParam: {}, /* 数据源 */ dataSource: [], /* 分页参数 */ ipagination: { current: 1, pageSize: 10, pageSizeOptions: ['10', '20', '30'], showTotal: (total, range) => { return range[0] + '-' + range[1] + ' 共' + total + '条' }, showQuickJumper: true, showSizeChanger: true, total: 0 }, /* 排序参数 */ isorter: { column: 'createTime', order: 'desc' }, /* 筛选参数 */ filters: {}, /* table加载状态 */ loading: false, /* table选中keys */ selectedRowKeys: [], /* table选中records */ selectionRows: [], /* 查询折叠 */ toggleSearchStatus: false, /* 高级查询条件生效状态 */ superQueryFlag: false, /* 高级查询条件 */ superQueryParams: '', /** 高级查询拼接方式 */ superQueryMatchType: 'and', isBackTitle: false // 是否是详情页有返回的标题 } }, computed: { ...mapGetters(['defaultHeight']), yScrollHeight () { /** * 前几个使用变量是为了配合iframe嵌套,算出页面显示范围的高度 * 48px:分页器的高度 * 48px:a-card的padding(上24+下24) * 54px:表头行的高度 */ return `calc(100vh - ${this.defaultHeight['user-info-height']} - ${this.defaultHeight['breadcrumb-height']} - ${this.defaultHeight.oneLineSearchHeight} - ${this.defaultHeight.oneLineOperationHeight} - 48px - 48px - 54px - ${this.isBackTitle ? '56px' : '0px'})` } }, created () { if (!this.disableMixinCreated) { this.loadData() // 初始化字典配置 在自己页面定义 this.initDictConfig() } }, methods: { loadData (arg) { if (!this.url.list) { this.$message.warning('请设置url.list属性!') return } // 加载数据 若传入参数1则加载第一页的内容 if (arg === 1) { this.ipagination.current = 1 } const params = this.getQueryParams()// 查询条件 this.loading = true getAction(this.url.list, params).then((res) => { if (res.success) { // update-begin---author:zhangyafei Date:20201118 for:适配不分页的数据列表------------ this.dataSource = res.result.records || res.result if (res.result.total) { this.ipagination.total = res.result.total } else { this.ipagination.total = 0 } // update-end---author:zhangyafei Date:20201118 for:适配不分页的数据列表------------ } else { this.$message.warning(res.message) } }).finally(() => { this.loading = false }) }, initDictConfig () { }, handleSuperQuery (params, matchType) { // 高级查询方法 if (!params) { this.superQueryParams = '' this.superQueryFlag = false } else { this.superQueryFlag = true this.superQueryParams = JSON.stringify(params) this.superQueryMatchType = matchType } this.loadData(1) }, getQueryParams () { // 获取查询条件 const sqp = {} if (this.superQueryParams) { sqp.superQueryParams = encodeURI(this.superQueryParams) sqp.superQueryMatchType = this.superQueryMatchType } const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters) param.field = this.getQueryField() param.pageNo = this.ipagination.current param.pageSize = this.ipagination.pageSize return filterObj(param) }, getQueryField () { // TODO 字段权限控制 let str = 'id,' this.columns.forEach(function (value) { str += ',' + value.dataIndex }) return str }, onSelectChange (selectedRowKeys, selectionRows) { this.selectedRowKeys = selectedRowKeys this.selectionRows = selectionRows }, onClearSelected () { this.selectedRowKeys = [] this.selectionRows = [] }, searchQuery () { this.loadData(1) // 点击查询清空列表选中行 this.selectedRowKeys = [] this.selectionRows = [] }, superQuery () { this.$refs.superQueryModal.show() }, searchReset () { this.queryParam = {} this.loadData(1) }, batchDel () { if (!this.url.deleteBatch) { this.$message.warning('请设置url.deleteBatch属性!') return } if (this.selectedRowKeys.length <= 0) { this.$message.warning('请选择一条记录!') return } const ids = this.selectedRowKeys.join() const that = this this.$confirm({ title: '确认删除', content: '是否删除选中数据?', onOk: function () { that.loading = true postAction(that.url.deleteBatch, { ids: ids }).then((res) => { if (res.success) { // 重新计算分页问题 that.reCalculatePage(that.selectedRowKeys.length) that.$message.success(res.message) that.loadData() that.onClearSelected() } else { that.$message.warning(res.message) } }).finally(() => { that.loading = false }) } }) }, handleDelete: function (id) { if (!this.url.delete) { this.$message.warning('请设置url.delete属性!') return } const that = this this.$confirm({ title: '确认删除', content: '确定要删除此条数据吗?', onOk: function () { postAction(that.url.delete, { id: id }).then((res) => { if (res.success) { that.$message.success(res.message) // 判断当前删除的数据是否是最后一页的最后一条数据,如果是的话页码减一 if (that.ipagination.current > 1 && ((that.ipagination.current - 1) * that.ipagination.pageSize) + 1 === that.ipagination.total) { that.ipagination.current -= 1 } that.loadData() } else { that.$message.warning(res.message) } }) } }) }, reCalculatePage (count) { // 总数量-count const total = this.ipagination.total - count // 获取删除后的分页数 const currentIndex = Math.ceil(total / this.ipagination.pageSize) // 删除后的分页数<所在当前页 if (currentIndex < this.ipagination.current) { this.ipagination.current = currentIndex } console.log('currentIndex', currentIndex) }, handleEdit: function (record) { this.$refs.modalForm.edit(record) this.$refs.modalForm.title = this.$t('edit') this.$refs.modalForm.disableSubmit = false }, handleAdd: function () { this.$refs.modalForm.add() this.$refs.modalForm.title = this.$t('newlyAdded') this.$refs.modalForm.disableSubmit = false }, handleTableChange (pagination, filters, sorter) { // 分页、排序、筛选变化时触发 if (Object.keys(sorter).length > 0) { this.isorter.column = sorter.field this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc' } this.ipagination = pagination this.loadData() }, handleToggleSearch () { this.toggleSearchStatus = !this.toggleSearchStatus }, modalFormOk () { // 新增/修改 成功时,重载列表 this.loadData() // 清空列表选中 this.onClearSelected() }, handleDetail: function (record) { this.$refs.modalForm.edit(record) this.$refs.modalForm.title = '详情' this.$refs.modalForm.disableSubmit = true } } }