From ae171447815106e720d44a10b807cf4a484988bd Mon Sep 17 00:00:00 2001
From: yanfeiyong <2060201549@qq.com>
Date: Tue, 15 Apr 2025 17:29:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/manageApitwo/index.js                 |  45 ++-
 src/views/compilation/onecailiao/index.vue    |   4 +-
 .../ProjectDetails/Projectpicture.vue         |  13 +-
 .../components/ProjectDetails/spanmanage.vue  | 278 +++++++++++++++++-
 src/views/orientedtwo/bqspan/index.vue        |   1 -
 5 files changed, 311 insertions(+), 30 deletions(-)

diff --git a/src/api/manageApitwo/index.js b/src/api/manageApitwo/index.js
index e7662d7..b1b74b5 100644
--- a/src/api/manageApitwo/index.js
+++ b/src/api/manageApitwo/index.js
@@ -1,11 +1,38 @@
 // src/api/ManageApi/index.js
-import request from '@/utils/request';
+import request from "@/utils/request";
 
-//项目详情-标签管理
-export function getBasicInformationPage(params) {
-  return request({
-    url:'/gysl/basicInformation/page',
-    method: 'get',
-    params
-  })
-}
\ No newline at end of file
+// 根据项目ID分页查询所有标签管理
+export function getallspan(params) {
+  return request({
+    url: "/gysl/bqgl/searchId",
+    method: "get",
+    params,
+  });
+}
+//新增数据
+export function addspan(data) {
+  return request({
+    url: "/gysl/bqgl/add",
+    method: "post",
+    data,
+  });
+}
+// 修改信息
+export function updatspan(data) {
+  return request({
+    url: "/gysl/bqgl/edit",
+    method: "post",
+    data,
+  });
+}
+
+// 删除信息
+export function deletespan(idList) {
+  return request({
+    url: "/gysl/bqgl/delete",
+    method: "delete",
+    params: {
+      idList: idList.join(","), // 将数组转换为逗号分隔的字符串
+    },
+  });
+}
diff --git a/src/views/compilation/onecailiao/index.vue b/src/views/compilation/onecailiao/index.vue
index d08ed17..3170964 100644
--- a/src/views/compilation/onecailiao/index.vue
+++ b/src/views/compilation/onecailiao/index.vue
@@ -186,10 +186,8 @@ export default {
 }
 
 .previewbox {
-  width: 90%;
+  width: 100%;
   height: 92rem;
-  margin-left: 5%;
-  margin-top: .3rem;
   display: flex;
   flex-direction: column;
   padding: 1rem;
diff --git a/src/views/components/ProjectDetails/Projectpicture.vue b/src/views/components/ProjectDetails/Projectpicture.vue
index f4a3269..931fc3e 100644
--- a/src/views/components/ProjectDetails/Projectpicture.vue
+++ b/src/views/components/ProjectDetails/Projectpicture.vue
@@ -41,16 +41,7 @@
                 </div>
             </div>
             <div class="descriptionsdivtwo">
-                <div class="tablehead">
-                    <img src="@/assets/images/标签管理.png" alt="">
-                    <span style="margin-top: -0.3rem;">标签管理：</span>
-                    <!-- <span style="margin-top: .3rem;"></span> -->
-                </div>
-                <div class="tablebody">
-                    <div>
-                        <spanmanage :xmId=this.id></spanmanage>
-                    </div>
-                </div>
+                <spanmanage :xmId=this.id></spanmanage>
             </div>
         </div>
     </div>
@@ -299,7 +290,7 @@ export default {
 }
 
 .descriptionsdivtwo {
-    width: 20rem;
+    width: 24rem;
     margin-left: 3rem;
     height: 25.31rem;
 }
diff --git a/src/views/components/ProjectDetails/spanmanage.vue b/src/views/components/ProjectDetails/spanmanage.vue
index 962061c..5c6949d 100644
--- a/src/views/components/ProjectDetails/spanmanage.vue
+++ b/src/views/components/ProjectDetails/spanmanage.vue
@@ -1,19 +1,285 @@
 <template>
-    <div>
-        1234
+    <div class="descriptionsdivtwo">
+        <div class="tablehead">
+            <div class="headleft">
+                <img style="width: 1.2rem;height: 1.13rem;" src="@/assets/images/标签管理.png" alt="">
+                <span style="margin-top: -0.1rem;">标签管理：</span>
+            </div>
+            <div class="headright" @click="showAddTagModal">
+                添加标签
+            </div>
+        </div>
+        
+        <!-- 按照type分组显示 -->
+        <div class="type-group" v-for="group in groupedTags" :key="group.type">
+            <div class="group-title"> 
+                <!-- 下拉展示 -->
+                <i class="el-icon-arrow-down"></i>
+                <!-- 上拉收起 -->
+                 <i class="el-icon-arrow-up"></i>
+                类型 {{ group.type }}</div>
+            <div class="tablebody">
+                <el-table :data="group.list" style="width: 100%" v-loading="loading">
+                    <el-table-column prop="name" label="标签名称" width="220"></el-table-column>
+                    <el-table-column label="操作" width="160">
+                        <template slot-scope="scope">
+                            <el-button size="mini" @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>
+        </div>
+
+        <!-- 添加/编辑标签弹窗 -->
+        <el-dialog :title="isEdit ? '编辑标签' : '添加标签'" :visible.sync="tagModalVisible" width="30%"
+            :close-on-click-modal="false" @closed="resetForm">
+            <el-form :model="tagForm" :rules="rules" ref="tagForm" label-width="100px">
+                <el-form-item label="标签类型" prop="type">
+                    <el-select v-model="tagForm.type" placeholder="请选择标签类型" style="width: 27.2rem;">
+                        <el-option v-for="dict in dict.type.bqlx" :key="dict.value" :label="dict.label"
+                            :value="dict.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="标签名称" prop="name">
+                    <el-input v-model="tagForm.name" placeholder="请输入标签名称"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="tagModalVisible = false">取 消</el-button>
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import { getallspan, addspan, updatspan, deletespan } from '@/api/manageApitwo/index';
+
 export default {
+    dicts: ['bqlx'],
     props: {
         xmId: {
             type: Number,
-            default: 0
+            required: true
+        }
+    },
+    data() {
+        return {
+            loading: false,
+            groupedTags: [], // 改为存储分组后的标签数据
+            tagModalVisible: false,
+            isEdit: false,
+            currentTagId: null,
+            tagForm: {
+                type: '',
+                name: '',
+                xmId: this.xmId,
+                createBy: '',
+                createTime: '',
+                createId: 0,
+                id: 0,
+                updateBy: '',
+                updateTime: '',
+                updateId: 0
+            },
+            rules: {
+                type: [{ required: true, message: '请选择标签类型', trigger: 'change' }],
+                name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
+            }
+        }
+    },
+    computed: {
+        // 将分组数据扁平化，用于编辑/删除操作
+        tagList() {
+            return this.groupedTags.flatMap(group => group.list);
+        }
+    },
+    watch: {
+        xmId: {
+            immediate: true,
+            handler(newVal) {
+                if (newVal) {
+                    this.fetchTags();
+                }
+            }
         }
     },
-    mounted() {
-        // console.log("span里接收到的" + this.xmId);
+    methods: {
+        // 获取标签列表
+        async fetchTags() {
+            this.loading = true;
+            try {
+                const res = await getallspan({ xmId: this.xmId });
+                // 直接使用后端返回的分组数据
+                this.groupedTags = res.data || [];
+                console.log('分组标签数据:', this.groupedTags);
+            } catch (error) {
+                console.error('获取标签列表失败:', error);
+                this.$message.error('获取标签列表失败');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // 其他方法保持不变...
+        showAddTagModal() {
+            this.isEdit = false;
+            this.currentTagId = null;
+            this.tagModalVisible = true;
+            this.$nextTick(() => {
+                this.$refs.tagForm && this.$refs.tagForm.clearValidate();
+            });
+        },
+
+        handleEdit(row) {
+            this.isEdit = true;
+            this.currentTagId = row.id;
+            this.tagForm = {
+                type: row.type,
+                name: row.name,
+                xmId: this.xmId,
+                createBy: row.createBy || '',
+                createTime: row.createTime || '',
+                createId: row.createId || 0,
+                id: row.id || 0,
+                updateBy: row.updateBy || '',
+                updateTime: row.updateTime || '',
+                updateId: row.updateId || 0
+            };
+            this.tagModalVisible = true;
+            this.$nextTick(() => {
+                this.$refs.tagForm && this.$refs.tagForm.clearValidate();
+            });
+        },
+
+        submitForm() {
+            this.$refs.tagForm.validate(async (valid) => {
+                if (!valid) return;
+
+                try {
+                    const now = new Date();
+                    const formattedTime = now.toISOString().replace('T', ' ').substring(0, 19);
+                    
+                    const submitData = {
+                        ...this.tagForm,
+                        createTime: this.isEdit ? this.tagForm.createTime : formattedTime,
+                        updateTime: formattedTime,
+                        createBy: this.isEdit ? this.tagForm.createBy : this.$store.state.user.name || '',
+                        updateBy: this.$store.state.user.name || '',
+                        createId: this.isEdit ? this.tagForm.createId : this.$store.state.user.id || 0,
+                        updateId: this.$store.state.user.id || 0
+                    };
+
+                    console.log('准备提交的完整数据:', JSON.stringify(submitData, null, 2));
+
+                    if (this.isEdit) {
+                        await updatspan(submitData);
+                        this.$message.success('标签更新成功');
+                    } else {
+                        await addspan(submitData);
+                        this.$message.success('标签添加成功');
+                    }
+                    
+                    this.tagModalVisible = false;
+                    this.fetchTags();
+                } catch (error) {
+                    console.error('操作失败:', error);
+                    this.$message.error(this.isEdit ? '标签更新失败' : '标签添加失败');
+                }
+            });
+        },
+
+        handleDelete(row) {
+            this.$confirm('确定要删除该标签吗?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                try {
+                    await deletespan([row.id]);
+                    this.$message.success('删除成功');
+                    this.fetchTags();
+                } catch (error) {
+                    console.error('删除失败:', error);
+                    this.$message.error('删除失败');
+                }
+            }).catch(() => {
+                this.$message.info('已取消删除');
+            });
+        },
+
+        resetForm() {
+            this.tagForm = {
+                type: '',
+                name: '',
+                xmId: this.xmId,
+                createBy: '',
+                createTime: '',
+                createId: 0,
+                id: 0,
+                updateBy: '',
+                updateTime: '',
+                updateId: 0
+            };
+            this.$refs.tagForm && this.$refs.tagForm.clearValidate();
+        }
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.descriptionsdivtwo {
+    width: 24rem;
+    margin-left: 3rem;
+    height: auto; /* 改为自动高度 */
+    min-height: 25.31rem;
+}
+
+.tablehead {
+    width: 100%;
+    height: 2.38rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: .3rem;
+}
+
+.headleft {
+    display: flex;
+    align-items: center;
+    gap: .2rem;
+}
+
+.tablehead img {
+    width: 1.13rem;
+    height: 1.13rem;
+}
+
+.headright {
+    margin-top: -0.3rem;
+    font-size: .8rem;
+    color: #0052D9;
+    cursor: pointer;
+}
+
+.headright:hover {
+    text-decoration: underline;
+}
+
+.type-group {
+    margin-bottom: 1.5rem;
+}
+
+.group-title {
+    font-weight: bold;
+    margin: 1rem 0 0.5rem 0;
+    font-size: 1rem;
+    color: #333;
+}
+
+.tablebody {
+    margin-top: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/orientedtwo/bqspan/index.vue b/src/views/orientedtwo/bqspan/index.vue
index 828ac69..dc45ac3 100644
--- a/src/views/orientedtwo/bqspan/index.vue
+++ b/src/views/orientedtwo/bqspan/index.vue
@@ -45,7 +45,6 @@
         <!-- 表格内容区 -->
         <div class="tablebox">
             <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe>
-                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                 <el-table-column label="序号" align="center">
                     <template slot-scope="scope">
                         {{ (scope.$index + 1) + (queryParams.current - 1) * queryParams.size }}