项目：标签

src/api/common.js

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import { envWebUrl } from '@/apiConfig/api'
+import { envWebUrl, projectManagementUrl } from '@/apiConfig/api'
 
 export function feedback(data) {
   return request({
@@ -17,3 +17,12 @@ export function uploadImage(data) {
     data
   })
 }
+
+// 标签
+export function taskGetTag(data) {
+  return request({
+    url: projectManagementUrl + '/task/getTag',
+    method: 'post',
+    data
+  })
+}

src/components/Tag/TagSearch.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-select
+    ref="select"
+    v-model="tagSelectValue"
+    style="width: 100%"
+    multiple
+    remote
+    size="small"
+    filterable
+    default-first-option
+    :placeholder="placeholder"
+    :remote-method="remoteMethod"
+    @change="change"
+  >
+    <el-option
+      v-for="(item, itemIndex) in options"
+      :key="itemIndex"
+      :label="item"
+      :value="item"
+    >
+      {{ item }}
+    </el-option>
+  </el-select>
+</template>
+<script>
+import { taskGetTag } from '@/api/common'
+
+export default {
+  name: 'TagSearch',
+  props: {
+    value: {
+      required: false,
+      type: Array,
+      default: () => []
+    },
+    type: {
+      required: false,
+      type: String,
+      default: () => ''
+    },
+    placeholder: {
+      required: false,
+      type: String,
+      default: () => '请选择标签'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      isAddTag: true,
+      options: [],
+      tagSelectValue: [],
+      tagValue: []
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.remoteMethod()
+    }, 700)
+  },
+  methods: {
+    change() {
+      this.tagSelectValue = Array.from(new Set(this.tagSelectValue))
+      this.options = Array.from(new Set([...this.options, ...this.tagSelectValue]))
+      this.$emit('input', this.tagSelectValue)
+      this.$emit('change', this.tagSelectValue)
+    },
+    remoteMethod(searchTag = '') {
+      const bizId_id = window.localStorage.getItem('bizId')
+      // const bizId_id = desDecryptId(this.$route.query.bizId_id).replace(/_.*/, '')
+      taskGetTag({
+        type: this.type,
+        searchTag,
+        bizId: bizId_id
+      }).then(res => {
+        if (res.code === 200) {
+          this.options = res.data.map(elm => elm.tag)
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+</style>

src/components/Tag/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="tips-wrapper">
+    <span>
+      <el-tag
+        v-for="item in value"
+        :key="item"
+        closable
+        size="small"
+        type="info"
+        @close="() => tabClose(item)">
+          {{ item }}
+        </el-tag>
+    </span>
+    <span class="add-tag" @click="addTag">添加</span>
+
+    <Modal title="添加标签" :visible="visible" :bg="false">
+      <el-select
+        ref="select"
+        v-model="tagSelectValue"
+        style="width: 100%"
+        multiple
+        remote
+        filterable
+        allow-create
+        default-first-option
+        :placeholder="placeholder"
+        :remote-method="remoteMethod"
+        @click.stop
+        @change="change"
+      >
+        <el-option
+          v-for="(item, itemIndex) in options"
+          :key="itemIndex"
+          :label="item"
+          :value="item"
+        >
+          {{ item }}
+        </el-option>
+      </el-select>
+      <template slot="footer">
+        <el-button @click="close">取消</el-button>
+        <el-button @click="ok">添加</el-button>
+      </template>
+    </Modal>
+  </div>
+</template>
+<script>
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+import { desDecryptId } from '@/utils/crypto-js'
+import { taskGetTag } from '@/api/common'
+import Modal from '@/components/modal'
+
+export default {
+  name: 'Tag',
+  components: { Modal },
+  directives: { Clickoutside },
+  props: {
+    value: {
+      required: false,
+      type: Array,
+      default: () => []
+    },
+    type: {
+      required: false,
+      type: String,
+      default: () => ''
+    },
+    placeholder: {
+      required: false,
+      type: String,
+      default: () => '请选择标签'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      isAddTag: true,
+      options: [],
+      tagSelectValue: [],
+      tagValue: []
+    }
+  },
+  methods: {
+    change() {
+      this.tagSelectValue = Array.from(new Set(this.tagSelectValue))
+      this.options = Array.from(new Set([...this.options, ...this.tagSelectValue]))
+    },
+    close() {
+      this.visible = false
+    },
+    tabClose(item) {
+      const newTagValue = [...this.value].filter(elm => elm !== item)
+      this.$emit('input', newTagValue)
+      this.$emit('change', newTagValue)
+    },
+    ok() {
+      this.$emit('input', this.tagSelectValue)
+      this.$emit('change', this.tagSelectValue)
+
+      this.close()
+    },
+    addTag() {
+      this.remoteMethod()
+      this.tagSelectValue = Array.from(new Set(this.value))
+      this.options = Array.from(new Set([...this.options, ...this.value]))
+      this.visible = true
+    },
+    remoteMethod(searchTag = '') {
+      const bizId_id = desDecryptId(this.$route.query.bizId_id).replace(/_.*/, '')
+      console.log(bizId_id)
+      taskGetTag({
+        type: this.type,
+        searchTag,
+        bizId: bizId_id
+      }).then(res => {
+        if (res.code === 200) {
+          this.options = res.data.map(elm => elm.tag)
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.tips-wrapper {
+  display: inline-block;
+}
+
+/deep/ .el-select__tags {
+  max-width: calc(100% - 100px) !important;
+}
+
+.el-tag {
+  margin-left: 5px;
+  user-select: none;
+}
+
+.add-tag {
+  color: #00a0ff;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+/deep/ .el-select {
+  /deep/ .el-input__inner {
+    border: 1px solid rgba(220, 223, 230) !important;
+  }
+}
+</style>

src/views/projectManage/projectList/projectIndex.vue

@@ -45,6 +45,10 @@
                 <el-option v-for="item in arr_priority" :key="item.value" :label="item.name" :value="item.value" />
               </el-select>
             </div>
+            <div class="Layout">
+              <div class="queryName marginLeft">标签</div>
+              <TagSearch v-model="form_all.tags" type="PROEJCT" placeholder="请选择" @change="query_project(form_all)" />
+            </div>
           </el-form>
         </div>
         <div class="screen" @click="showSelect">{{ goodName }}</div>
@@ -329,6 +333,7 @@ import {
   projectCreate
 } from '@/api/projectIndex'
 import '@/views/projectManage/publicCss/index.css'
+import TagSearch from '@/components/Tag/TagSearch'
 
 export default {
   data() {
@@ -390,6 +395,9 @@ export default {
       immediate: true
     }
   },
+  components: {
+    TagSearch
+  },
   created() {
     this.$store.state.data.status = true
   },

src/views/projectManage/projectList/projectViewDetails.vue

@@ -90,6 +90,9 @@
                   <el-option v-for="item in arr_priority" :key="item.value" :label="item.name" :value="item.value" />
                 </el-select>
               </el-form-item>
+              <el-form-item label="标签：" class="tag-from" style="width: 67%">
+                <Tag v-model="form_query.tags" type="PROEJCT" @change="changeArea" />
+              </el-form-item>
             </el-form>
           </div>
         </section>
@@ -232,6 +235,8 @@ import '@/views/projectManage/projectList/css/index.css'
 import drawer from '@/views/projectManage/Drawer'
 import image_url from '@/assets/home_images/home_u.png'
 import bugTableDialog from '@/views/projectManage/bugList/details/bugTableDialog' // 缺陷表格
+import Tag from '@/components/Tag'
+
 export default {
   components: {
     record,
@@ -247,7 +252,8 @@ export default {
     needsList,
     modifyProject,
     bugTableDialog,
-    commentsAndChanges
+    commentsAndChanges,
+    Tag
   },
   filters: {
     ellipsis(value, num) {
@@ -497,4 +503,7 @@ export default {
 /deep/.el-input--small {
   font-size: 14px;
 }
+.el-form-item__content{
+  width: calc(100% - 100px);
+}
 </style>