element 表格二次封装
<template>
<div class="mrt20 table-wrap">
<el-table :data="tableData"
ref="multipleTable"
v-loading="loading"
@row-click="onRowClick"
@row-dblclick="onRowDblclick"
@sort-change="onSortChange"
:row-key="getRowKeys"
@select="select"
@select-all="selectAll"
:header-cell-style="{background:'#F8F8F8', color:'rgba(0,0,0,0.85)'}"
@selection-change="handleSelectionChange"
:height="height"
style="width: 100%">
<el-table-column v-if="!excludeComponent.includes(componentName)"
type="selection"
:reserve-selection="true"
width="55">
</el-table-column>
<template v-for="col in column">
<el-table-column v-if="col.type === 'img'"
:prop="col.prop"
:key="col.prop"
:label="col.label"
:min-width="col.minWidth">
<template slot-scope="scope">
<span @click="onClick(scope.row, 'onImg')"><img src="~@/assets/images/1.png"></span>
</template>
</el-table-column>
<el-table-column v-if="col.type === 'link'"
:prop="col.prop"
:key="col.prop"
:label="col.label"
:min-width="col.minWidth">
<template slot-scope="scope">
<span v-if="scope.row[col.prop]" @click="onClick(scope.row, 'onLink')" class="a-link"><a>{{scope.row[col.prop]}}</a></span>
<span v-if="!scope.row[col.prop]">-</span>
</template>
</el-table-column>
<el-table-column v-if="col.type === 'date'"
:prop="col.prop"
:key="col.prop"
:label="col.label"
:min-width="col.minWidth">
<template slot-scope="scope">
<span v-if="scope.row[col.prop]" >{{scope.row[col.prop] | formatDate('yyyy-MM-dd')}}</span>
<span v-if="!scope.row[col.prop]">-</span>
</template>
</el-table-column>
<el-table-column v-if="col.type === 'map'"
HEAD
:prop="col.prop"
:key="col.prop"
:label="col.label"
:min-width="col.minWidth">
<template slot-scope="scope">
<span v-if="scope.row[col.prop] && col.map[scope.row[col.prop]]" :class="col.map[scope.row[col.prop]].color">{{col.map[scope.row[col.prop]].value || col.map[scope.row[col.prop]]}}</span>
<span v-if="!scope.row[col.prop] || !col.map[scope.row[col.prop]]">-</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column v-if="col.type === 'button'"
prop="oprate"
:min-width="col.minWidth"
:key="col.prop"
label="操作">
<template slot-scope="scope">
<span v-for="(item, index) in col.buttonList"
size="small"
:key="index"
class="btn-text mrl10"
@click="onClick(scope.row, item.methods)">{{item.label}}</span>
</template>
</el-table-column>
<el-table-column v-if="!['img', 'button', 'map', 'link', 'date'].includes(col.type)"
:prop="col.prop"
:key="col.prop"
:label="col.label"
:width="col.Width"
:min-width="col.minWidth">
<template slot-scope="scope">
<span v-if="scope.row[col.prop]" :class="col.color">{{scope.row[col.prop]}}</span>
<span v-if="!scope.row[col.prop]" :class="col.color">{{scope.row[col.prop]}}</span>
</template>
</el-table-column>
</template>
</el-table>
<div class="pagination mrb10">
<div class="footer flex-end">
<el-pagination background
layout="total, prev, pager, next, sizes, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="size"
:total="total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import { RESOURCE_COLUMN, UPLOADAPPROVE_COLUMN, THEME_UPLOAD_COLUMN, WALLPAPER_UPLOAD_COLUMN, DESIGNER_MANAGE_COLUMN } from './column';
import { ThemeService } from '@/service'
export default {
name: 'theme-table',
components: {
},
props: ['componentName', 'height', 'filterfield'],
data () {
return {
excludeComponent: ['uploadTheme', 'uploadWallpaper', 'designerManage', 'resourceList'], // 不需要多选框的组件名
advancedshow: false,
column: RESOURCE_COLUMN, // 列
columnMap: {
'uploadApprove': { column: UPLOADAPPROVE_COLUMN, methods: 'getApproveList' }, // 审批列表
'resourceList': { column: RESOURCE_COLUMN, methods: 'getSourceList' }, // 资源列表
'uploadTheme': { column: THEME_UPLOAD_COLUMN, methods: 'getList' }, // 主题上传列表
'uploadWallpaper': { column: WALLPAPER_UPLOAD_COLUMN, methods: 'getList' }, // 壁纸上传列表
'designerManage': { column: DESIGNER_MANAGE_COLUMN, methods: 'getDesignerDatail' }, // 设计师列表
},
total: 0,
page: 1,
size: 10,
tableData: [], // 表格数据
loading: false
}
},
watch: {
filterfield: {
handler (val, oldVal) {
console.log("b.c: " + val, oldVal);
},
deep: true //true 深度监听
}
},
methods: {
getRowKeys(row) {
return row.id;
},
// 查看
onClick (row, methods) {
this.$emit('onClick', row, methods)
console.log(row, methods)
},
// 多选
handleSelectionChange (val) {
console.log(val, 987)
this.$emit('handleSelectionChange', val)
},
// 点击行
onRowClick(val){
this.$emit('row-click', val)
},
// 双击行
onRowDblclick(val){
this.$emit('row-dblclick', val)
},
// 勾选触发
select(val){
this.$emit('select', val)
},
// 全选
selectAll(val){
this.$emit('select-all', val)
},
// 排序字段
onSortChange(val){
this.$emit('sort-change', val)
},
// 分页
getpage (list, page, size) {
return list.slice(page * size - size, page * size);
},
getData () {
this.loading = true
ThemeService[this.columnMap[this.componentName].methods]().then(res => {
console.log('查询', this.filterfield)
this.loading = false;
this.total = res.length;
this.tableData = this.getpage(res, this.page, this.size);
this.$emit('getTableData', this.tableData);
})
},
// 获取表格书
getTableData(){
return this.tableData;
},
// 切换每页条数
handleSizeChange (val) {
this.size = val;
this.getData();
},
// 点击页码
handleCurrentChange (val) {
this.page = val;
this.$emit('handleCurrentChange', val);
this.getData(this.page, this.size);
},
// 例的样式回调
cellStyle (row) {
if (row.columnIndex === 5 && row.row.checkResult === '失败' && row.column.label === '校验结果') {
return 'color:red'
}
},
// 清空多选
clearSelection(){
this.$refs.multipleTable && this.$refs.multipleTable.clearSelection();
},
// 用于多选表格，切换某一行的选中状态
toggleRowSelection(row, selected){
console.log(row, selected, 'row, selected')
this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(row, selected);
}
},
mounted () {
this.$nextTick(() => {
this.column = this.columnMap[this.componentName].column;
this.getData();
var aa = top.sessionStorage.getItem('datInfo');//获取缓存数据
console.log(aa, this.filterfield, 98777)
})
}
}
</script>
<style lang="less" scoped>
</style>
import { TAST_STATUS, AREAFLAG, FEE_STATUS, THEME_CHECK_RESULT} from '@/model';
// 备注： 1. 列type img 为图片类型 map 枚举类, 对于的值和颜色可定义在map对象中 button 操作按钮类 link 日期时间戳date，自动应用过滤器转换 可扩展自定义类型 select radio 类等
// 2. 其他无类型默认为 text 类型 可配置color 属性
// 资源列表
const RESOURCE_COLUMN = [
{
prop: 'originPackageUrl',
label: '多彩的云',
minWidth: '100',
type: 'img'
},
{
prop: 'resName',
label: '资源名称',
minWidth: '180'
},
{
prop: 'resId',
label: '资源唯一ID',
minWidth: '180'
},
{
prop: 'resVersion',
label: '资源版本',
minWidth: '180'
},
{
prop: 'feeStatus',
label: '收费状态',
minWidth: '180',
type: 'map',
map: FEE_STATUS
},
{
prop: 'areaFlag',
label: '分发区域',
minWidth: '180',
type: 'map',
map: AREAFLAG
},
{
prop: 'status',
label: '资源状态',
minWidth: '180',
type: 'map',
map: TAST_STATUS
},
{
prop: 'oprate',
label: '操作',
minWidth: '180',
type: 'button',
buttonList : [
{'methods': 'onView', 'label': '查看'},
{'methods': 'onHide', 'label': '隐藏'},
{'methods': 'onDown', 'label': '下架'}
]
}
]
// 上架审核
const UPLOADAPPROVE_COLUMN = [
{
prop: 'originPackageUrl',
label: '预览图',
minWidth: '100',
type: 'img'
},
{
prop: 'resName',
label: '资源名称',
minWidth: '180'
},
{
prop: 'resId',
label: '资源唯一ID',
minWidth: '180'
},
{
prop: 'resVersion',
label: '资源版本',
minWidth: '180'
},
{
prop: 'uploader',
label: '设计师名称',
minWidth: '180'
},
{
prop: 'feeStatus',
label: '收费状态',
minWidth: '180',
type: 'map',
map: FEE_STATUS
},
{
prop: 'areaFlag',
label: '分发区域',
minWidth: '180',
type: 'map',
map: AREAFLAG
},
{
prop: 'status',
label: '待审核状态',
minWidth: '180',
type: 'map',
map: TAST_STATUS
},
{
prop: 'oprate',
label: '操作',
minWidth: '80',
type: 'button',
buttonList : [
{'methods': 'onProve', 'label': '审核'},
]
}
]
// 主题上传
const THEME_UPLOAD_COLUMN = [
{
prop: 'resName',
label: '资源名称',
minWidth: '100',
type: 'text'
},
{
prop: 'resVersion',
label: '资源版本号',
minWidth: '180'
},
{
prop: 'endTime',
label: '系统校验时间',
minWidth: '180',
type: 'date'
},
{
prop: 'uploader',
label: '设计师名称',
minWidth: '180'
},
{
prop: 'reason',
label: '校验结果',
minWidth: '180'
},
{
prop: 'remark',
label: '备注',
minWidth: '180'
}
]
// 壁纸上传
const WALLPAPER_UPLOAD_COLUMN = [
{
prop: 'resName',
label: '壁纸文件名',
minWidth: '180',
},
{
prop: 'resName1',
label: '壁纸名称',
minWidth: '180'
},
{
prop: 'resVersion',
label: '壁纸版本号',
minWidth: '180'
},
{
prop: 'uploader',
label: '设计师名称',
minWidth: '180'
},
{
prop: 'endTime',
label: '系统校验时间',
minWidth: '180',
},
{
prop: 'checkResult',
label: '校验结果',
minWidth: '180',
type: 'map',
map: THEME_CHECK_RESULT
},
{
prop: 'remarks',
label: '备注',
minWidth: '180',
}
]
// 设计师管理
const DESIGNER_MANAGE_COLUMN = [
{
prop: 'desChineseName',
label: '设计师中文名称',
Width: '560'
},
{
prop: 'desEnglishName',
label: '设计师英文名称',
Width: '560'
},
{
prop: 'desNumId',
label: '设计师ID',
Width: '560'
},
{
prop: 'creatData',
label: '账号创建日期',
Width: '150'
}
]
export {
RESOURCE_COLUMN,
UPLOADAPPROVE_COLUMN,
THEME_UPLOAD_COLUMN,
WALLPAPER_UPLOAD_COLUMN,
DESIGNER_MANAGE_COLUMN
}
