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