增加描述组管理页面

src/api/descriptionGroup.js

+import axios from 'axios'
+
+// 获取所有描述组
+export function getDescriptionGroupList() {
+  return axios.get(process.env.PUTIN_API + '/description-groups')
+    .then(response => {
+      return response.data
+    })
+}
+
+// 获取单个描述组
+export function getDescriptionGroupById(id) {
+  return axios.get(`${process.env.PUTIN_API}/description-groups/${id}`)
+    .then(response => {
+      return response.data
+    })
+}
+
+// 创建描述组
+export function createDescriptionGroup(data) {
+  return axios.post(`${process.env.PUTIN_API}/description-groups`, data)
+    .then(response => {
+      return response.data
+    })
+}
+
+// 更新描述组
+export function updateDescriptionGroup(id, data) {
+  return axios.put(`${process.env.PUTIN_API}/description-groups/${id}`, data)
+    .then(response => {
+      return response.data
+    })
+}
+
+// 删除描述组
+export function deleteDescriptionGroup(id) {
+  return axios.delete(`${process.env.PUTIN_API}/description-groups/${id}`)
+    .then(response => {
+      return response.data
+    })
+}

src/router/index.js

@@ -144,6 +144,12 @@ export const constantRouterMap = [
         component: () => import('@/views/titleGroup/TitleGroupManage'),
         meta: { title: '标题组管理' }
       },
+      {
+        path: '/assetManagement/description-group',
+        name: 'assetManagement.description-group',
+        component: () => import('@/views/descriptionGroup/DescriptionGroupManage'),
+        meta: { title: '描述组管理' }
+      },
       
     ]
   },

src/views/descriptionGroup/DescriptionGroupManage.vue

+<template>
+  <div class="description-group-container">
+    <!-- 表格头部操作 -->
+    <div class="header-actions">
+      <el-button type="primary" @click="showAddDialog">新增描述组</el-button>
+      <div class="header-right">
+        <el-button icon="el-icon-refresh" @click="fetchData">刷新</el-button>
+      </div>
+    </div>
+
+    <!-- 主表格 -->
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%;"
+      v-loading="loading">
+      <el-table-column prop="id" label="ID" width="80"></el-table-column>
+      <el-table-column prop="name" label="名称" width="250"></el-table-column>
+      <el-table-column label="描述" min-width="300">
+        <template slot-scope="scope">
+          <div v-for="(description, index) in scope.row.descriptions" :key="index" class="description-item">
+            {{ description }}
+          </div>
+          <div v-if="!scope.row.descriptions || scope.row.descriptions.length === 0" class="no-descriptions">
+            暂无描述
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next, sizes">
+      </el-pagination>
+    </div>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
+      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
+        <el-form-item label="描述组名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+
+        <el-form-item label="选择描述" prop="descriptions">
+          <div class="description-selector-container">
+            <div class="selected-descriptions" v-if="form.descriptions && form.descriptions.length > 0">
+              <div class="selected-description-header">
+                <span>已选择 {{ form.descriptions.length }} 个描述</span>
+                <el-button type="text" @click="form.descriptions = []">清空</el-button>
+              </div>
+              <el-tag
+                v-for="(description, index) in form.descriptions"
+                :key="index"
+                closable
+                @close="removeDescription(index)"
+                class="description-tag">
+                {{ description }}
+              </el-tag>
+            </div>
+            <el-button type="primary" size="small" @click="showDescriptionSelectorDialog">添加描述</el-button>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" v-model="form.remark" :rows="3"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 描述选择器对话框 -->
+    <el-dialog
+      title="选择描述"
+      :visible.sync="descriptionSelectorDialogVisible"
+      width="80%"
+      append-to-body>
+      <text-table-selecter
+        @change="handleDescriptionSelectionChange"
+        type="2">
+      </text-table-selecter>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="descriptionSelectorDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmDescriptionSelection">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import TextTableSelecter from '@/components/TextTableSelecter'
+import { getDescriptionGroupList, createDescriptionGroup, updateDescriptionGroup, deleteDescriptionGroup } from '@/api/descriptionGroup'
+
+export default {
+  name: 'DescriptionGroupManage',
+  components: {
+    TextTableSelecter
+  },
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      dialogVisible: false,
+      dialogTitle: '',
+      descriptionSelectorDialogVisible: false,
+      selectedDescriptions: [], // 用于TextTableSelecter组件的选中项
+      form: {
+        id: null,
+        name: '',
+        descriptions: [],
+        remark: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入描述组名称', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取描述组列表
+    fetchData() {
+      this.loading = true
+      getDescriptionGroupList()
+        .then(response => {
+          this.loading = false
+          if (response.status === 200) {
+            this.tableData = response.result.data || []
+            this.total = this.tableData.length
+          } else {
+            this.$message.error('获取描述组列表失败')
+          }
+        })
+        .catch(error => {
+          this.loading = false
+          console.error('获取描述组列表失败:', error)
+          this.$message.error('获取描述组列表失败: ' + error.message)
+        })
+    },
+
+    // 格式化日期
+    formatDate(date) {
+      if (!date) return ''
+      const d = new Date(date)
+      return d.toLocaleString()
+    },
+
+    // 分页处理
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.fetchData()
+    },
+
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.fetchData()
+    },
+
+    // 显示新增对话框
+    showAddDialog() {
+      this.dialogTitle = '新增描述组'
+      this.form = {
+        id: null,
+        name: '',
+        descriptions: [],
+        remark: ''
+      }
+      this.dialogVisible = true
+      // 重置表单验证
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+    },
+
+    // 处理编辑
+    handleEdit(row) {
+      this.dialogTitle = '编辑描述组'
+      // 深拷贝避免直接修改表格数据
+      this.form = JSON.parse(JSON.stringify(row))
+      this.dialogVisible = true
+      // 重置表单验证
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.clearValidate()
+        }
+      })
+    },
+
+    handleDescriptionSelectionChange(data) {
+      this.selectedDescriptions = data
+    },
+
+    // 处理删除
+    handleDelete(row) {
+      this.$confirm('此操作将永久删除该描述组, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteDescriptionGroup(row.id)
+          .then(response => {
+            if (response.status === 200) {
+              this.$message.success('删除成功')
+              this.fetchData()
+            } else {
+              this.$message.error('删除失败')
+            }
+          })
+          .catch(error => {
+            console.error('删除描述组失败:', error)
+            this.$message.error('删除描述组失败: ' + error.message)
+          })
+      }).catch(() => {
+      })
+    },
+
+    // 提交表单
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          const isEdit = !!this.form.id
+          const formData = { ...this.form }
+          
+          const apiCall = isEdit 
+            ? updateDescriptionGroup(formData.id, formData)
+            : createDescriptionGroup(formData)
+
+          apiCall
+            .then(response => {
+              if (response.status === 200) {
+                this.$message.success(isEdit ? '更新成功' : '创建成功')
+                this.dialogVisible = false
+                this.fetchData()
+              } else {
+                this.$message.error(isEdit ? '更新失败' : '创建失败')
+              }
+            })
+            .catch(error => {
+              console.error(isEdit ? '更新描述组失败:' : '创建描述组失败:', error)
+              this.$message.error((isEdit ? '更新' : '创建') + '描述组失败: ' + error.message)
+            })
+        } else {
+          return false
+        }
+      })
+    },
+
+    // 显示描述选择器对话框
+    showDescriptionSelectorDialog() {
+      this.selectedDescriptions = []
+      this.descriptionSelectorDialogVisible = true
+    },
+
+    // 确认描述选择
+    confirmDescriptionSelection() {
+      // 提取文本内容并添加到描述列表
+      const newDescriptions = this.selectedDescriptions.map(item => item.text)
+      
+      // 合并去重
+      const uniqueDescriptions = [...new Set([...this.form.descriptions, ...newDescriptions])]
+      this.form.descriptions = uniqueDescriptions
+      
+      this.descriptionSelectorDialogVisible = false
+    },
+
+    // 移除描述
+    removeDescription(index) {
+      this.form.descriptions.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.description-group-container {
+  padding: 20px;
+}
+
+.header-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.header-right {
+  margin-left: auto;
+}
+
+.description-item {
+  margin-bottom: 5px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.no-descriptions {
+  color: #999;
+  font-style: italic;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.description-selector-container {
+  margin-bottom: 10px;
+}
+
+.selected-descriptions {
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.selected-description-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #eee;
+}
+
+.description-tag {
+  margin-right: 5px;
+  margin-bottom: 5px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/views/layout/Layout.vue

@@ -31,7 +31,7 @@
           <el-menu-item index="/assetManagement/location-group">地域组管理</el-menu-item>
           <el-menu-item index="/assetManagement/createDelivery">素材组</el-menu-item>
           <el-menu-item index="/assetManagement/title-group">标题组管理</el-menu-item>
-          <el-menu-item index="/assetManagement/createDelivery">描述组</el-menu-item>
+          <el-menu-item index="/assetManagement/description-group">描述组管理</el-menu-item>
         </el-submenu>
 
         <el-submenu index="3">