wt_project_web_bak/src/views/task/component/wt-label.vue

<template>
  <div class="flex flex-wrap flex-center">
    <div v-if="tags.length >= 2" class="flex flex-center flex-justify-start">
      <div class="tag flex flex-center" v-for="i in tags" :key="i.id">
        {{ i.dictValue }}
        <el-icon class="ml-10" @click="remove(i)" v-if="!disabled">
          <CircleCloseFilled />
        </el-icon>
      </div>
    </div>
    <el-icon
      size="30"
      class="padding-left padding-right"
      color="#A3773D"
      @click="show = true"
      v-if="!disabled"
    >
      <CirclePlusFilled />
    </el-icon>

    <el-dialog v-model="show" width="500" title="选择标签">
      <div class="flex flex-center">
        <el-select v-model="form.tag1" class="mr-10" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          />
        </el-select>
        <el-select v-model="form.tag2" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          />
        </el-select>
      </div>
      <div class="full-width flex flex-center flex-justify-end mt-20">
        <el-button type="primary" plain @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 初始化id
    ids: {
      type: Array,
      default: () => {
        return null
      }
    },
    // 是否可以编辑
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      tags: [],
      form: {
        tag1: '',
        tag2: ''
      },
      options: [],
      options1: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$api.common.dicList({ code: 'edit_task_type' }).then(res => {
        if (res.code === 200) {
          this.options = res.data.map(ele => {
            ele.type = 'tags'
            return ele
          })
          if (this.ids.length > 0) {
            const tmp = this.options.find(ele => ele.id === this.ids[0])
            if (tmp) {
              this.tags.push(tmp)
            }
          }
        }
      })
      this.$api.common.dicList({ code: 'edit_task' }).then(res => {
        if (res.code === 200) {
          this.options1 = res.data.map(ele => {
            ele.type = 'category'
            return ele
          })
          if (this.ids.length > 1) {
            const tmp = this.options1.find(ele => ele.id === this.ids[1])
            this.tags.push(tmp)
          }
        }
      })
    },
    submit() {
      this.tags = [
        this.options.find(ele => ele.dictKey === this.form.tag1),
        this.options1.find(ele => ele.dictKey === this.form.tag2)
      ]
      this.show = false
      this.form = {}
      console.log(this.tags)
      this.$emit('submit', this.tags)
    },
    remove(res) {
      this.tags = this.tags.filter(ele => ele.id !== res.id)
      const tmps = this.tags.map(ele => ele.id).join(',')
      this.$emit('submit', tmps)
    }
  }
}
</script>

<style lang="scss" scoped>
.tag {
  min-width: 60px;
  height: 20px;
  border-radius: 20px;
  background-color: #a3773d;
  padding: 2px 10px;
  margin: 0 5px;
  color: white;
}
</style>