94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<template>
|
|
<el-table :data="groupedItems" height="500px" row-key="itemName" :expand-row-keys="defaultExpandedRows">
|
|
<!-- 展开行内容 -->
|
|
<el-table-column type="expand">
|
|
<template slot-scope="scope">
|
|
<el-table :data="scope.row.languages" border size="mini" style="width: 100%; margin-top: 10px;">
|
|
<el-table-column label="语言编码" align="center" prop="langCode" width="120" />
|
|
<el-table-column label="正文" align="center" prop="content" show-overflow-tooltip />
|
|
<el-table-column label="是否启用" align="center" prop="isEnabled" width="100" />
|
|
<el-table-column label="操作" align="center" width="140">
|
|
<template slot-scope="langScope">
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(langScope.row)">修改</el-button>
|
|
<el-button size="mini" type="text" icon="el-icon-delete"
|
|
@click="handleDelete(langScope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
<el-table-column label="多语言键" align="center" prop="itemName" />
|
|
<el-table-column label="描述" align="center" prop="description" />
|
|
<el-table-column label="排序" align="center" prop="sortOrder" width="80" />
|
|
<el-table-column label="备注" align="center" prop="remark" />
|
|
<el-table-column label="语言数量" align="center" width="100">
|
|
<template slot-scope="scope">{{ scope.row.languages.length }}</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="操作" align="center" width="160">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAddLanguage(scope.row)">添加语言</el-button>
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditMain(scope.row)">编辑主信息</el-button>
|
|
</template>
|
|
</el-table-column> -->
|
|
</el-table>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "GroupedItemTable",
|
|
props: {
|
|
itemList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
// 可设置默认展开的行
|
|
defaultExpanded: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
computed: {
|
|
// 按多语言键分组数据
|
|
groupedItems () {
|
|
const groups = {};
|
|
|
|
// 遍历原始数据进行分组
|
|
this.itemList.forEach(item => {
|
|
if (!groups[item.itemName]) {
|
|
// 初始化分组，提取共同属性
|
|
groups[item.itemName] = {
|
|
itemName: item.itemName,
|
|
description: item.description,
|
|
sortOrder: item.sortOrder,
|
|
remark: item.remark,
|
|
languages: []
|
|
};
|
|
}
|
|
|
|
// 将当前语言项添加到对应分组
|
|
groups[item.itemName].languages.push({
|
|
...item
|
|
});
|
|
});
|
|
|
|
return Object.values(groups);
|
|
},
|
|
// 默认展开的行
|
|
defaultExpandedRows () {
|
|
return this.defaultExpanded;
|
|
}
|
|
},
|
|
methods: {
|
|
// 修改语言项
|
|
handleUpdate (row) {
|
|
this.$emit("update", row);
|
|
},
|
|
// 删除语言项
|
|
handleDelete (row) {
|
|
this.$emit("delete", row);
|
|
},
|
|
}
|
|
}
|
|
</script> |