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%"> type="selection" :reserve-selection="true" width="55"> :prop="col.prop" :key="col.prop" :label="col.label" :min-width="col.minWidth"> :prop="col.prop" :key="col.prop" :label="col.label" :min-width="col.minWidth"> - :prop="col.prop" :key="col.prop" :label="col.label" :min-width="col.minWidth"> {{scope.row[col.prop] | formatDate('yyyy-MM-dd')}} - HEAD :prop="col.prop" :key="col.prop" :label="col.label" :min-width="col.minWidth"> {{col.map[scope.row[col.prop]].value || col.map[scope.row[col.prop]]}} - prop="oprate" :min-width="col.minWidth" :key="col.prop" label="操作">
size="small" :key="index" class="btn-text mrl10" @click="onClick(scope.row, item.methods)">{{item.label}} :prop="col.prop" :key="col.prop" :label="col.label" :width="col.Width" :min-width="col.minWidth"> {{scope.row[col.prop]}} {{scope.row[col.prop]}}
layout="total, prev, pager, next, sizes, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="size" :total="total">
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)
})
}
}
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
}