thoth-frontend-test/src/views/projectManage/publishTask/components/multipleSelect.vue

<template>
  <div class="taskSelect" :style="styles">
    <el-select
      v-if="isedit"
      v-model="value"
      class="maxWidth"
      :size="size"
      multiple
      filterable
      remote
      reserve-keyword
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="clearHandle"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :value="item.id"
      >
        <p class="content" style="margin: 0">
          <span>
            <span class="taskId">TASK-{{ item.id }}</span>
            <span class="ml20">{{ item.name }}</span>
          </span>
          <!-- <i v-if="isedit" class="el-icon-circle-close didi-hover" @click="$emit('delate', item.id)" /> -->
        </p>
      </el-option>
    </el-select>
    <div class="maxWidth">
      <p v-for="item in data" :key="item.id" class="content">
        <span>
          <span class="taskId">TASK-{{ item.id }}</span>
          <span class="ml20 title" @click="goto(item.id)">{{ item.name }}</span>
        </span>
        <i v-if="isedit" class="el-icon-circle-close didi-hover" @click="$emit('change', item, 'del')" />
      </p>
    </div>
  </div>
</template>
<script>
import { taskList } from '@/api/taskIndex'
import { EncryptId } from '@/utils/crypto-js.js'
export default {
  name: 'MultipleSelect',
  props: {
    styles: {
      type: Object,
      required: false,
      default: () => {
        return { maxWidth: '690px' }
      }
    },
    size: {
      type: String,
      required: false,
      default: 'medium'
    },
    placeholder: {
      type: String,
      required: false,
      default: '请输入'
    },
    isedit: {
      type: Boolean,
      required: false,
      default: false
    },
    data: {
      type: Array,
      required: false,
      default: () => []
    },
    taskId: {
      type: Number,
      required: false,
      default: null
    }
  },
  data() {
    return {
      options: [],
      value: [],
      loading: false
    }
  },
  methods: {
    async remoteMethod(query) {
      this.query = query
      if (query !== '') {
        this.loading = true
        const res = await taskList({ taskId: this.taskId, name: query })
        this.options = res.data
        this.loading = false
      } else {
        this.options = []
      }
    },
    clearHandle(val) {
      let item = null
      this.options.forEach(t => {
        if (t.id === val[0]) {
          item = t
        }
      })
      this.$emit('change', item, 'add')
      this.query = ''
      this.value = null
    },
    goto(id) {
      const { bizId = null } = this.$store.state.global || {}
      const bizId_id = EncryptId(`${bizId}_${id}`)
      const newTab = this.$router.resolve({ name: '任务详情', query: { bizId_id: bizId_id }})
      window.open(newTab.href, '_blank')
    }
  }
}
</script>
<style scoped lang="scss">
.taskSelect {
  .maxWidth {
    width: 100%;
  }
  .ml20 {
    margin-left: 20px;
  }
}
.content {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  .taskId {
    display: inline-block;
    width: 120px;
  }
  .title {
    cursor: pointer;
    &:hover {
      color: #007aff;
    }
  }
}
</style>