From e72ea5c4043cc79ae7eaf875242a03e3fe1421d9 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期日, 23 二月 2025 12:44:52 +0800
Subject: [PATCH] tag标签可修改

---
 src/views/projectEngineering/projectLibrary/component/BasicInfo.vue |   51 +++++++++++++++++++------
 src/views/projectEngineering/projectLibrary/component/TagList.vue   |   69 ++++++++++++++++++++++------------
 2 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/src/views/projectEngineering/projectLibrary/component/BasicInfo.vue b/src/views/projectEngineering/projectLibrary/component/BasicInfo.vue
index fffc0a2..c2fbee5 100644
--- a/src/views/projectEngineering/projectLibrary/component/BasicInfo.vue
+++ b/src/views/projectEngineering/projectLibrary/component/BasicInfo.vue
@@ -16,19 +16,23 @@
                           placeholder="璇疯緭鍏�"/>
               </el-form-item>
             </el-col>
-            <el-col :span="12" style="position: relative">
-              <div style="width: 100%; height: 100%; position: absolute;">
+            <el-col :span="5">
                 <el-form-item class="item" label="璧嬬爜" label-width="50px" prop="coding">
-                  <template slot-scope="scope">
-                    <!--                <div class="yellow-dot" v-if="scope.row.coding === 'yellow'"></div>-->
-                    <!--                <div class="green-dot" v-if="scope.row.coding === 'green'"></div>-->
-                    <!--                <div class="red-dot" v-if="scope.row.coding === 'red'"></div>-->
-                    <div class="red-dot"></div>
-                    <tag-list></tag-list>
-                  </template>
-                </el-form-item>
-                <!--            <img alt="" src="../../../../assets/images/s.png"/>-->
-              </div>
+                    <template slot-scope="scope">
+                      <!--                <div class="yellow-dot" v-if="scope.row.coding === 'yellow'"></div>-->
+                      <!--                <div class="green-dot" v-if="scope.row.coding === 'green'"></div>-->
+                      <!--                <div class="red-dot" v-if="scope.row.coding === 'red'"></div>-->
+                      <div class="red-dot"></div>
+                    </template>
+
+                  </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="鏍囩" label-width="50px" prop="tag">
+                <template slot-scope="scope">
+                  <tag-list :tag-list="tagList" ref="tagList" @getTags="getTagList"></tag-list>
+                </template>
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row :gutter="20">
@@ -374,7 +378,7 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="7">
               <el-form-item label="骞村害鎶曡祫閲戦" label-width="100px" prop="company" style="width: 100%; min-width: 260px">
                 <el-input v-model.trim="yearPlan.yearTotalMoney" clearable maxlength="255" placeholder="璇疯緭鍏�"
                           style="width: 90%" type="number"/>
@@ -477,6 +481,7 @@
   },
   data() {
     return {
+      tagList: [],
       projectSubTypeList: [], // 椤圭洰瀛愮被鍨�
       projectForm: {
         id: '',
@@ -603,11 +608,25 @@
       }
       // this.handleLoadMore(1);
     }
+    console.log(this.projectForm, "鍘熷鍊�")
+    this.$nextTick(() => {
+      console.log("璁剧疆浜�")
+      this.tagList = this.projectForm.tag ? this.projectForm.tag.split(",") : []
+      console.log(this.tagList)
+    })
   },
   beforeDestroy() {
     localStorage.setItem("projectForm", JSON.stringify(this.projectForm));
   },
   methods: {
+    getTagList(list) {
+      console.log("鎷垮埌浜�")
+      if (!list || list.length < 1) {
+        this.projectForm.tag = ''
+      } else {
+        this.projectForm.tag = list.join(",");
+      }
+    },
     getChildSelect(select) {
       this.projectForm.projectSubType = ''
       if (select) {
@@ -710,6 +729,12 @@
           })
         }
         this.$emit('updateIsShow', true);
+        console.log(this.projectForm, "鍘熷鍊�")
+        this.$nextTick(() => {
+          console.log("璁剧疆浜�")
+          this.tagList = this.projectForm.tag ? this.projectForm.tag.split(",") : []
+          console.log(this.tagList)
+        })
       });
     },
     getApprovalList() {
diff --git a/src/views/projectEngineering/projectLibrary/component/TagList.vue b/src/views/projectEngineering/projectLibrary/component/TagList.vue
index 04ca707..9d4e077 100644
--- a/src/views/projectEngineering/projectLibrary/component/TagList.vue
+++ b/src/views/projectEngineering/projectLibrary/component/TagList.vue
@@ -1,41 +1,61 @@
 <template>
   <div>
-    <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput">+ 鏍囩</el-button>
-    <el-input
-      v-else
-      class="input-new-tag"
-      v-model="inputValue"
-      ref="saveTagInput"
-      size="small"
-      @keyup.enter.native="handleInputConfirm"
-      @blur="handleInputConfirm"
-    >
-    </el-input>
-    <div class="tags-container">
-      <el-tag
-        v-for="tag in dynamicTags"
-        :key="tag"
-        closable
-        :disable-transitions="false"
-        @close="handleClose(tag)">
-        {{tag}}
-      </el-tag>
+    <div>
+      <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput">+ 鏍囩</el-button>
     </div>
+    <div>
+      <el-input
+        v-if="inputVisible"
+        class="input-new-tag"
+        v-model="inputValue"
+        ref="saveTagInput"
+        size="small"
+        @keyup.enter.native="handleInputConfirm"
+        @blur="handleInputConfirm"
+      >
+      </el-input>
+      <div class="tags-container">
+        <el-tag
+          v-for="(tag, index) in tags"
+          :key="tag + index"
+          closable
+          @close="handleClose(index)">
+          {{tag}}
+        </el-tag>
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    tagList: {
+      required: true,
+      type: Array
+    }
+  },
+  watch: {
+    tagList(newV, oldV) {
+      this.tags = newV
+    }
+  },
   data() {
     return {
-      dynamicTags: ['閲嶇偣鏍囪', '鍙戞敼鍏虫敞', '骞村害椤圭洰'],
+      tags: [],
       inputVisible: false,
       inputValue: ''
     };
   },
   methods: {
-    handleClose(tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    setTags(list) {
+      this.tags = list;
+    },
+    handleClose(index) {
+      console.log("鐐逛簡")
+      this.tags.splice(index, 1);
+      this.$emit("getTags", this.tags)
     },
 
     showInput() {
@@ -48,7 +68,8 @@
     handleInputConfirm() {
       let inputValue = this.inputValue;
       if (inputValue) {
-        this.dynamicTags.push(inputValue);
+        this.tags.push(inputValue);
+        this.$emit("getTags", this.tags)
       }
       this.inputVisible = false;
       this.inputValue = '';

--
Gitblit v1.8.0