整合前端

ruoyi-ui/src/views/site/panels/ItemGroupTable/index.vue

@@ -0,0 +1,94 @@
+<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>

ruoyi-ui/src/views/site/panels/ItemTable/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-table :data="itemList" height="500px">
+    <!-- <el-table-column type="selection" width="55" align="center" /> -->
+    <!-- <el-table-column label="所属分类" align="center" prop="categoryId" :formatter="categoryDescFormatter" /> -->
+    <el-table-column label="语言编码" align="center" prop="langCode" />
+    <el-table-column label="多语言键" align="center" prop="itemName" />
+    <el-table-column label="描述" align="center" prop="description" />
+    <el-table-column label="正文" align="center" prop="content" show-overflow-tooltip />
+    <!-- <el-table-column label="外链 URL" align="center" prop="linkUrl" /> -->
+    <!-- <el-table-column label="附件" align="center" prop="accessory"> -->
+    <!-- <template slot-scope="scope">
+          <div v-if="scope.row.accessory">
+            <div v-for="(url, idx) in $options.methods.parseAccessory(scope.row.accessory)" :key="idx"
+              style="display:inline-block;margin-right:12px;vertical-align:middle;">
+              <template v-if="$options.methods.isImage(url)">
+                <i class="el-icon-picture-outline" style="color:#409EFF;margin-right:4px;vertical-align:middle;"></i>
+                <el-image :src="url" :preview-src-list="[url]"
+                  style="width:40px;height:40px;object-fit:cover;vertical-align:middle;border-radius:4px;border:1px solid #eee;"
+                  fit="cover" />
+              </template>
+<template v-else>
+                <i class="el-icon-link" style="color:#409EFF;margin-right:4px;vertical-align:middle;"></i>
+                <a :href="url" target="_blank"
+                  style="color:#409EFF;text-decoration:underline;vertical-align:middle;">附件{{ idx + 1 }}</a>
+              </template>
+</div>
+</div>
+</template>
+</el-table-column> -->
+    <el-table-column label="排序" align="center" prop="sortOrder" />
+    <el-table-column label="是否启用" align="center" prop="isEnabled" />
+    <el-table-column label="备注" align="center" prop="remark" />
+    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <template slot-scope="scope">
+        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "ItemTable",
+  props: {
+    itemList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    handleUpdate (row) {
+      this.$emit("update", row);
+    },
+    handleDelete (row) {
+      this.$emit("delete", row);
+    },
+  }
+}
+</script>