You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
356 lines
9.8 KiB
356 lines
9.8 KiB
5 years ago
|
<template>
|
||
|
|
<div class="table">
|
||
|
|
<el-table id="out-table"
|
||
|
|
ref="table"
|
||
|
|
:height="table.height"
|
||
|
|
:header-cell-style="{color:'#000'}"
|
||
|
|
:data="tableData"
|
||
|
|
:style="{width: '100%'}"
|
||
|
|
border
|
||
|
|
v-loading="loading"
|
||
|
|
element-loading-text="正在加载中"
|
||
|
|
element-loading-spinner="el-icon-loading"
|
||
|
|
element-loading-background="rgba(255, 255， 255, 0.8)"
|
||
|
|
@select="handleSelect"
|
||
|
|
@select-all="handleSelectAll"
|
||
|
|
@cell-click="handleCellClick"
|
||
|
|
@row-click="handleRowClick">
|
||
|
|
<!--设置index索引-->
|
||
|
|
<div v-if="columnType==='index'">
|
||
|
|
<el-table-column :type="columnType"></el-table-column>
|
||
|
|
</div>
|
||
|
|
<!--设置checkbox-->
|
||
|
|
<div v-if="columnType==='selection'">
|
||
|
|
<el-table-column :type="columnType"></el-table-column>
|
||
|
|
</div>
|
||
|
|
<div v-if="columnType==='radio'">
|
||
|
|
<el-table-column label=""
|
||
|
|
width="35"
|
||
|
|
center>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-radio :label="scope.row.id"
|
||
|
|
v-model="templateRadio"
|
||
|
|
@change.native="getRadioRow(scope.$index,scope.row)"> </el-radio>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<template v-for="col in tableColumn">
|
||
|
|
<!--渲染列-->
|
||
|
|
<el-table-column v-if="col.render"
|
||
|
|
:key="col.key"
|
||
|
|
:label="col.title"
|
||
|
|
:min-width="col.width"
|
||
|
|
:fixed="col.isFrozen"
|
||
|
|
show-overflow-tooltip
|
||
|
|
:align="columnAlign"
|
||
|
|
:header-align="headerAlign">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-html="col.render(scope.row[col.key])"></span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<!--普通列-->
|
||
|
|
<el-table-column v-else
|
||
|
|
:key="col.key"
|
||
|
|
:label="col.title"
|
||
|
|
:min-width="col.width"
|
||
|
|
:fixed="col.isFrozen"
|
||
|
|
show-overflow-tooltip
|
||
|
|
:align="columnAlign"
|
||
|
|
:header-align="headerAlign"
|
||
|
|
:formatter="col.formatter"></el-table-column>
|
||
|
|
</template>
|
||
|
|
<!--操作列-->
|
||
|
|
<el-table-column v-if="operations.length && operations.length > 0"
|
||
|
|
label="操作"
|
||
|
|
:width="operationWidth"
|
||
|
|
fixed="right"
|
||
|
|
header-align="center"
|
||
|
|
class="operate">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!--传入的操作按钮属性 lyx 20190411 -->
|
||
|
|
<el-button v-for="item in operations"
|
||
|
|
:key="item.lable"
|
||
|
|
:style=item.style
|
||
|
|
:type=item.type
|
||
|
|
:size=item.size
|
||
|
|
:plain=item.plain
|
||
|
|
@click.stop="handleMethod(scope.$index, scope.row,item.methodName)">{{item.lable}}</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<!--分页-->
|
||
|
|
<el-row class="page "
|
||
|
|
v-if="pageVisible">
|
||
|
|
<el-col :span="8"
|
||
|
|
style="text-align: leftline-height: 32px">
|
||
|
|
<slot style="text-align: left"></slot>
|
||
|
|
<span></span>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="16">
|
||
|
|
<el-pagination @size-change="handleSizeChange"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
@prev-click="handlePrevClick"
|
||
|
|
@next-click="handleNextClick"
|
||
|
|
:current-page="page + 1"
|
||
|
|
:page-sizes="tablePageSizes"
|
||
|
|
:page-size="table.params.size"
|
||
|
|
layout="jumper, prev, pager, next,sizes, total"
|
||
|
|
:total="total"></el-pagination>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import CDialog from './CDialog'
|
||
|
|
import { mapGetters } from 'vuex'
|
||
|
|
export default {
|
||
|
|
components: { CDialog },
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
tableData: [],
|
||
|
|
tableColumn: app.service.getColumns(this.keyword, 'table'),
|
||
|
|
loading: false,
|
||
|
|
table: {
|
||
|
|
height: this.tableHeight,
|
||
|
|
params: {
|
||
|
|
size: this.size,//当前页数显示记录数
|
||
|
|
page: this.page //当前页数
|
||
|
|
}
|
||
|
|
},
|
||
|
|
total: 0,
|
||
|
|
selected: false,
|
||
|
|
visiblePopover: false,// 删除弹出层开关
|
||
|
|
templateRadio: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
tableHeight (height) {
|
||
|
|
this.table.height = height
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
|
||
|
|
keyword: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
columnType: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
columnAlign: {
|
||
|
|
type: String,
|
||
|
|
default: 'left'
|
||
|
|
},
|
||
|
|
headerAlign: {
|
||
|
|
type: String,
|
||
|
|
default: 'center'
|
||
|
|
},
|
||
|
|
url: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
params: {
|
||
|
|
type: Object,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
operations: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
page: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: Number,
|
||
|
|
default: 10
|
||
|
|
},
|
||
|
|
tableHeight: {
|
||
|
|
type: Number
|
||
|
|
},
|
||
|
|
pageVisible: Boolean //是否显示page分页 lyx 20190411
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
//操作列宽度
|
||
|
|
operationWidth: function () {
|
||
|
|
// return this.operations.includes('add')
|
||
|
|
// ? (this.operations.length - 1) * 80
|
||
|
|
// : this.operations.length * 80
|
||
|
|
if (this.operations.includes('add')) {
|
||
|
|
return (this.operations.length - 1) * 80 //操作列包含add类型按钮时返回
|
||
|
|
}
|
||
|
|
else if (this.operations.includes('analyze')) {
|
||
|
|
return (this.operations.length + 0.5) * 80 //操作列包含analyze类型按钮时返回
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return this.operations.length * 80
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tableSize () {
|
||
|
|
|
||
|
|
if (this.resolution === 'small') {
|
||
|
|
return 10
|
||
|
|
} else {
|
||
|
|
return 20
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tablePageSizes () {
|
||
|
|
if (this.resolution === 'small') {
|
||
|
|
return [10, 20, 50]
|
||
|
|
} else {
|
||
|
|
return [20, 30, 50]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
...mapGetters(['resolution'])
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
render () {
|
||
|
|
this.loadData()
|
||
|
|
},
|
||
|
|
loadData () { debugger
|
||
|
|
this.loading = true
|
||
|
|
Object.keys(this.params).forEach(key => {
|
||
|
|
if (this.params[key] instanceof Array) {
|
||
|
|
this.params[key] = this.params[key].join(',')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
Object.assign(this.table.params, this.params)
|
||
|
|
|
||
|
|
// 获取数据
|
||
|
|
app.ajax.get(
|
||
|
|
this.url,
|
||
|
|
this.table.params,
|
||
|
|
(data, rspMsg) => {
|
||
|
|
if (data) {
|
||
|
|
|
||
|
|
//debugger
|
||
|
|
this.tableData = data.content
|
||
|
|
this.total = data.totalElements
|
||
|
|
}
|
||
|
|
this.loading = false
|
||
|
|
},
|
||
|
|
(rspMsg, data) => {
|
||
|
|
this.$message.error(rspMsg)
|
||
|
|
|
||
|
|
this.loading = false
|
||
|
|
}
|
||
|
|
)
|
||
|
|
},
|
||
|
|
handleClearSelection () {
|
||
|
|
// 清空选择
|
||
|
|
this.$refs['table'].clearSelection()
|
||
|
|
},
|
||
|
|
//选中复选框
|
||
|
|
handleSelect (selection, row) {
|
||
|
|
this.$emit('select', selection)
|
||
|
|
//console.log(selection, row)
|
||
|
|
},
|
||
|
|
//全选复选框
|
||
|
|
handleSelectAll (selection) {
|
||
|
|
this.$emit('selectAll', selection)
|
||
|
|
},
|
||
|
|
handleCellClick (row, column, cell, event) { },
|
||
|
|
handleRowClick (row) {
|
||
|
|
// 切换该列的勾选状态
|
||
|
|
this.selected = !this.selected
|
||
|
|
this.$refs['table'].toggleRowSelection(row, this.selected)
|
||
|
|
},
|
||
|
|
|
||
|
|
handleEdit (index, row) {
|
||
|
|
// 因为操作列与数据列属于同一行，编辑某一列后会继续触发table的row-click事件，所以在按钮上添加stop修饰符阻止事件的继续传播
|
||
|
|
this.handleClearSelection()
|
||
|
|
this.$refs['table'].toggleRowSelection(row)
|
||
|
|
this.$emit('update', row)
|
||
|
|
},
|
||
|
|
handleAnalyze (index, row) {
|
||
|
|
this.handleClearSelection() // 清空选择
|
||
|
|
this.$refs['table'].toggleRowSelection(row, true)
|
||
|
|
this.$emit('analyze', row)
|
||
|
|
},
|
||
|
|
handleDelete (index, row) {
|
||
|
|
this.handleClearSelection() // 删除选择
|
||
|
|
this.$refs['table'].toggleRowSelection(row, true)
|
||
|
|
this.$emit('delete', row)
|
||
|
|
},
|
||
|
|
handleDeleteCancel (scope) {
|
||
|
|
// 关闭popover弹出层
|
||
|
|
scope._self.$refs[`popover-${scope.$index}`].doClose()
|
||
|
|
},
|
||
|
|
handleSizeChange (size) {
|
||
|
|
this.table.params.size = size
|
||
|
|
this.table.params.page = 0
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.loadData()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//改变当前页
|
||
|
|
handleCurrentChange (page) {
|
||
|
|
debugger
|
||
|
|
this.table.params.page = page - 1
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.loadData()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//点击上一页
|
||
|
|
handlePrevClick (page) {
|
||
|
|
|
||
|
|
},
|
||
|
|
//点击下一页
|
||
|
|
handleNextClick (page) {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
//单选选中
|
||
|
|
getRadioRow (index, row) { //获取选中数据
|
||
|
|
|
||
|
|
this.$emit('selectRadioRow', row)
|
||
|
|
},
|
||
|
|
//导出表格
|
||
|
|
handleOutTable (name) {
|
||
|
|
app.util.exportExcel(name, '#out-table')
|
||
|
|
},
|
||
|
|
exportExcel (tHeader, filterVal) {
|
||
|
|
require.ensure([], () => {
|
||
|
|
const { export_json_to_excel } = require('@js/excel/Export2Excel')
|
||
|
|
|
||
|
|
const list = this.tableData
|
||
|
|
const data = this.formatJson(filterVal, list)
|
||
|
|
export_json_to_excel(tHeader, data, '列表excel')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
formatJson (filterVal, jsonData) {
|
||
|
|
return jsonData.map(v => filterVal.map(j => v[j]))
|
||
|
|
},
|
||
|
|
//操作列点击实现方法 lyx 20190411
|
||
|
|
handleMethod (index, row, methodName) {
|
||
|
|
this.handleClearSelection()
|
||
|
|
this.$refs['table'].toggleRowSelection(row, true)
|
||
|
|
this.$emit(methodName, row)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.el-table td {
|
||
|
|
padding: 6px 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page {
|
||
|
|
padding: 20px 6px 0;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.operate {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|