问题:
<template>
<div class="goods-list-table-wrapper">
<GoodsLayout>
<template v-slot:header-left>
<button @click="indextest">+++</button>
<ProjectSelect></ProjectSelect>
</template>
<template v-slot:header-right>
<div class="toolbar">
<PresetColumn v-on="presetColumnEvent()"></PresetColumn>
<GoodsListPage v-on="pageEvent()" :page="page"></GoodsListPage>
<GoBackModuleChoiceBtn></GoBackModuleChoiceBtn>
</div>
</template>
<template v-slot:body-right>
<div class="goods-list-table">
<el-table :data="goodsList" :cell-style="cellStyle" :cell-class-name="cellClassName" :row-key="rowKey" border>
<el-table-column type="selection" width="35" align="center" fixed="left"></el-table-column>
<el-table-column :filters="filters(column.name,index)" height="50" :filter-multiple="true" :filter-method="index ==3 || index == 5 || index == 7 || index ==22 || index == 24 ?filterTag:undefined" v-for="(column,index) in tableColumnList" align="center" :prop="column.name" :label="column.displayName" :key="column.name" resizable>
<template v-slot="scope">
<component :is="createComponent(column)" :cell="scope.row[column.name]"></component>
</template>
</el-table-column>
</el-table>
</div>
</template>
</GoodsLayout>
</div>
</template>
<script>
import PresetColumn, { PresetColumnEvent } from "@/vsystem/goods-list/goods-list-table/preset-column/component/preset-column.vue";
import { fetchGoodsListTableData, fetchGoodsListUnreadGoodsTaskMessage } from "./goods-list-table.js";
import { isStringWithColor, createComponent,deWeightTableFilters } from "@/vsystem/goods-list/goods-list-table/goods-list-table/config/goods-list-table.js";
import { mapRouteQuery } from "@/utils/router/route-util.js";
import GoodsListPage, { PageEvent } from "@/vsystem/goods-list/goods-list-page/component/goods-list-page.vue";
import GoodsLayout from "@/vsystem/layout/goods-layout/component/goods-layout.vue";
import ProjectSelect from "@/vsystem/project/component/project-select/component/project-select.vue";
import { GoBackModuleChoiceBtn } from "@/vsystem/module-choice/component/go-back-module-choice-btn.js";
import { AdditionalColumn } from "@/vsystem/goods-list/goods-list-table/table-column/config/table-column.js";
export default {
name: 'goods-list-table',
components: { GoodsLayout, ProjectSelect, PresetColumn, GoodsListPage, GoBackModuleChoiceBtn, },
async created() {
await this.fillTableData({ pageNum: this.page.pageNum });
},
computed: {
...mapRouteQuery({ projectUuid: 'project', status: 'status' }),
filterConditionList() {
const conditionList = [];
if (this.status) {
conditionList.push({ columnName: 'status', filterValues: [this.status] });
}
return conditionList;
},
},
data() {
return {
page: { pageSize: 20, pageNum: 1, totalCount: 0, totalPages: 0 },
goodsList: [],
tableColumnList: []
};
},
// 数据监听
watch:{
tableColumnList(newvalue,oldvalue){
console.log('tableColumnList:',newvalue);
},
goodsList(newvalue,oldvalue){
console.log('goodsList:',newvalue);
}
},
methods: {
createComponent,
cellClassName({ row, column, rowIndex, columnIndex }) {
return 'goods-cell';
},
cellStyle({ row, column, rowIndex, columnIndex }) {
const cell = row[column.property];
if (cell && isStringWithColor(cell)) {
return { 'background-color': cell.get('color') };
}
},
rowKey(goods) {
return goods.uuid;
},
async fillTableData({ pageNum }) {
const result = await fetchGoodsListTableData({
projectUuid: this.projectUuid,
filterConditions: this.filterConditionList,
pageNum, pageSize: this.page.pageSize
});
if (!result.ok) {
return this.$message.error(`获取数据失败:${result.networkErrMsg}`);
}
this.page = ['pageNum', 'pageSize', 'totalPages', 'totalCount'].reduce((prev, curr) => { prev[curr] = result[curr]; return prev; }, {});
this.goodsList = result.goodsList;
this.fillUnreadGoodsTaskMessage();
},
async fillUnreadGoodsTaskMessage() {
const goodsUuidList = this.goodsList.map(goods => goods.uuid);
const result = await fetchGoodsListUnreadGoodsTaskMessage({ projectUuid: this.projectUuid, goodsUuidList });
if (!result.ok) {
this.$message.error(result.networkErrMsg);
}
const unreadGroup = result.goodsUnreadGroup;
for (const goods of this.goodsList) {
const value = unreadGroup[goods.uuid];
goods[AdditionalColumn.GoodsTaskMessageUnread.name].set({
value: value == undefined ? '--' : value
});
}
},
pageEvent() {
return {
[PageEvent.Prev]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
[PageEvent.Next]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
[PageEvent.PageNumChange]: ({ pageNum }) => { this.fillTableData({ pageNum }); }
};
},
presetColumnEvent() {
return {
[PresetColumnEvent.Apply]: ({ columnList }) => {
this.tableColumnList = columnList;
}
};
},
// 可选择的项
filters(itemname,index){
// 3 5 7 22 24
if(index == 3 || index == 5 || index == 7 ){
const Optional = this.goodsList.map((item)=>{
return {text:item[itemname].value.displayValue ? item[itemname].value.displayValue:'--', value:item[itemname].value.displayValue? item[itemname].value.displayValue: '--'};
})
// console.log(this.deWeight(Optional));
return this.deWeight(Optional)
}else if(index == 22 || index == 24){
const Optional = this.goodsList.map((item)=>{
let a =item[itemname].value.displayValue
// console.log(`${a}`);
return {text:a ?a:'--', value:a? a: '--'}; /* 未加 */
})
// console.log(this.deWeight(Optional));
return this.deteleObject(Optional)
}
},
// 数组对象去重
deWeight(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i].text == arr[j].text) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
},
// 多维数组去重
deteleObject(obj) {
var uniques = [];
var stringify = {};
for (var i = 0; i < obj.length; i++) {
var keys = Object.keys(obj[i]);
keys.sort(function (a, b) {
return Number(a) - Number(b);
});
var str = "";
for (var j = 0; j < keys.length; j++) {
str += JSON.stringify(keys[j]);
str += JSON.stringify(obj[i][keys[j]]);
}
if (!stringify.hasOwnProperty(str)) {
uniques.push(obj[i]);
stringify[str] = true;
}
}
uniques = uniques;
return uniques;
},
//返回符合条件的数据
// 参数分别是:选中的条件 、当前行 、当前列
filterTag(value, row, column) {
console.log('选中的:',value);
const property = column['property'];
// console.log(`${row[property].value.displayValue}`);
return row[property].value.displayValue === value; /* 未加 */
},
indextest(){
let dates =[]
this.tableColumnList.forEach((item,index)=>{
if(index == 2 || index ==5 || index == 7 || index ==24){
dates.push(item.name)
}
})
console.log(dates);
}
}
}
</script>
<style lang="less" scoped>
@import "@/vsystem/global/assets/css/global-variable-goods.less";
.goods-list-table-wrapper {
width: 100%;
height: calc(100vh - @globalDefaultAccountHeight);
padding: 10px;
.toolbar {
width: 100%;
height: 100%;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.goods-list-table {
:deep(.goods-cell) {
padding: 0px;
width: 100%;
height: 100%;
.cell {
padding: 0px;
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
</style>
效果:
解决:
<template>
<div class="goods-list-table-wrapper">
<GoodsLayout>
<template v-slot:header-left>
<button @click="indextest">+++</button>
<ProjectSelect></ProjectSelect>
</template>
<template v-slot:header-right>
<div class="toolbar">
<PresetColumn v-on="presetColumnEvent()"></PresetColumn>
<GoodsListPage v-on="pageEvent()" :page="page"></GoodsListPage>
<GoBackModuleChoiceBtn></GoBackModuleChoiceBtn>
</div>
</template>
<template v-slot:body-right>
<div class="goods-list-table">
<el-table :data="goodsList" :cell-style="cellStyle" :cell-class-name="cellClassName" :row-key="rowKey" border>
<el-table-column type="selection" width="35" align="center" fixed="left"></el-table-column>
<el-table-column :filters="filters(column.name,index)" height="50" :filter-multiple="true" :filter-method="index ==3 || index == 5 || index == 7 || index ==22 || index == 24 ?filterTag:undefined" v-for="(column,index) in tableColumnList" align="center" :prop="column.name" :label="column.displayName" :key="column.name" resizable>
<template v-slot="scope">
<component :is="createComponent(column)" :cell="scope.row[column.name]"></component>
</template>
</el-table-column>
</el-table>
</div>
</template>
</GoodsLayout>
</div>
</template>
<script>
import PresetColumn, { PresetColumnEvent } from "@/vsystem/goods-list/goods-list-table/preset-column/component/preset-column.vue";
import { fetchGoodsListTableData, fetchGoodsListUnreadGoodsTaskMessage } from "./goods-list-table.js";
import { isStringWithColor, createComponent,deWeightTableFilters } from "@/vsystem/goods-list/goods-list-table/goods-list-table/config/goods-list-table.js";
import { mapRouteQuery } from "@/utils/router/route-util.js";
import GoodsListPage, { PageEvent } from "@/vsystem/goods-list/goods-list-page/component/goods-list-page.vue";
import GoodsLayout from "@/vsystem/layout/goods-layout/component/goods-layout.vue";
import ProjectSelect from "@/vsystem/project/component/project-select/component/project-select.vue";
import { GoBackModuleChoiceBtn } from "@/vsystem/module-choice/component/go-back-module-choice-btn.js";
import { AdditionalColumn } from "@/vsystem/goods-list/goods-list-table/table-column/config/table-column.js";
export default {
name: 'goods-list-table',
components: { GoodsLayout, ProjectSelect, PresetColumn, GoodsListPage, GoBackModuleChoiceBtn, },
async created() {
await this.fillTableData({ pageNum: this.page.pageNum });
},
computed: {
...mapRouteQuery({ projectUuid: 'project', status: 'status' }),
filterConditionList() {
const conditionList = [];
if (this.status) {
conditionList.push({ columnName: 'status', filterValues: [this.status] });
}
return conditionList;
},
},
data() {
return {
page: { pageSize: 20, pageNum: 1, totalCount: 0, totalPages: 0 },
goodsList: [],
tableColumnList: []
};
},
// 数据监听
watch:{
tableColumnList(newvalue,oldvalue){
console.log('tableColumnList:',newvalue);
},
goodsList(newvalue,oldvalue){
console.log('goodsList:',newvalue);
}
},
methods: {
createComponent,
cellClassName({ row, column, rowIndex, columnIndex }) {
return 'goods-cell';
},
cellStyle({ row, column, rowIndex, columnIndex }) {
const cell = row[column.property];
if (cell && isStringWithColor(cell)) {
return { 'background-color': cell.get('color') };
}
},
rowKey(goods) {
return goods.uuid;
},
async fillTableData({ pageNum }) {
const result = await fetchGoodsListTableData({
projectUuid: this.projectUuid,
filterConditions: this.filterConditionList,
pageNum, pageSize: this.page.pageSize
});
if (!result.ok) {
return this.$message.error(`获取数据失败:${result.networkErrMsg}`);
}
this.page = ['pageNum', 'pageSize', 'totalPages', 'totalCount'].reduce((prev, curr) => { prev[curr] = result[curr]; return prev; }, {});
this.goodsList = result.goodsList;
this.fillUnreadGoodsTaskMessage();
},
async fillUnreadGoodsTaskMessage() {
const goodsUuidList = this.goodsList.map(goods => goods.uuid);
const result = await fetchGoodsListUnreadGoodsTaskMessage({ projectUuid: this.projectUuid, goodsUuidList });
if (!result.ok) {
this.$message.error(result.networkErrMsg);
}
const unreadGroup = result.goodsUnreadGroup;
for (const goods of this.goodsList) {
const value = unreadGroup[goods.uuid];
goods[AdditionalColumn.GoodsTaskMessageUnread.name].set({
value: value == undefined ? '--' : value
});
}
},
pageEvent() {
return {
[PageEvent.Prev]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
[PageEvent.Next]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
[PageEvent.PageNumChange]: ({ pageNum }) => { this.fillTableData({ pageNum }); }
};
},
presetColumnEvent() {
return {
[PresetColumnEvent.Apply]: ({ columnList }) => {
this.tableColumnList = columnList;
}
};
},
// 可选择的项
filters(itemname,index){
// 3 5 7 22 24
if(index == 3 || index == 5 || index == 7 ){
const Optional = this.goodsList.map((item)=>{
return {text:item[itemname].value.displayValue ? item[itemname].value.displayValue:'--', value:item[itemname].value.displayValue? item[itemname].value.displayValue: '--'};
})
// console.log(this.deWeight(Optional));
return this.deWeight(Optional)
}else if(index == 22 || index == 24){
const Optional = this.goodsList.map((item)=>{
let a =item[itemname].value.displayValue
// console.log(`${a}`);
return {text:a=='' ?'--': `${a}`, value:a? `${a}`: '--'};
})
// console.log(this.deWeight(Optional));
return this.deteleObject(Optional)
}
},
// 数组对象去重
deWeight(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i].text == arr[j].text) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
},
// 多维数组去重
deteleObject(obj) {
var uniques = [];
var stringify = {};
for (var i = 0; i < obj.length; i++) {
var keys = Object.keys(obj[i]);
keys.sort(function (a, b) {
return Number(a) - Number(b);
});
var str = "";
for (var j = 0; j < keys.length; j++) {
str += JSON.stringify(keys[j]);
str += JSON.stringify(obj[i][keys[j]]);
}
if (!stringify.hasOwnProperty(str)) {
uniques.push(obj[i]);
stringify[str] = true;
}
}
uniques = uniques;
return uniques;
},
//返回符合条件的数据
// 参数分别是:选中的条件 、当前行 、当前列
filterTag(value, row, column) {
console.log('选中的:',value);
const property = column['property'];
// console.log(`${row[property].value.displayValue}`);
return `${row[property].value.displayValue}` === value;
},
indextest(){
let dates =[]
this.tableColumnList.forEach((item,index)=>{
if(index == 2 || index ==5 || index == 7 || index ==24){
dates.push(item.name)
}
})
console.log(dates);
}
}
}
</script>
<style lang="less" scoped>
@import "@/vsystem/global/assets/css/global-variable-goods.less";
.goods-list-table-wrapper {
width: 100%;
height: calc(100vh - @globalDefaultAccountHeight);
padding: 10px;
.toolbar {
width: 100%;
height: 100%;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.goods-list-table {
:deep(.goods-cell) {
padding: 0px;
width: 100%;
height: 100%;
.cell {
padding: 0px;
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
</style>
效果: