DataOps-web/src/components/Comparison/index.vue

<template>
  <m-card noTitle class="py-5">
    <center class="pb-3">
      <div class="text">请选择{{ label }}进行比较: </div>
      <v-autocomplete
        v-model="candidate"
        class="select my-3 input-width-xl"
        :label="`候选${label}`"
        :placeholder="`候选${label}`"
        :items="candidateItems"
        hide-details
        clearable
        outlined
        dense
        :item-value="r => r"
      />
      <span>VS</span>
      <v-autocomplete
        v-model="comparison"
        class="select my-3 input-width-xl"
        :label="`候选${label}`"
        :placeholder="`候选${label}`"
        :items="comparisonItems"
        hide-details
        clearable
        outlined
        dense
        :item-value="r => r"
      />
      <v-btn color="primary" class="mt-5 buttons" elevation="5" rounded @click="submit">执行比较</v-btn>
    </center>
  </m-card>
</template>

<script>
// 对比
import MCard from '@/components/MCard'
import { coreGraph } from '@/api'
import { organizationList } from '@/api/panoramic.js'
export default {
  name: 'comparison-page',
  components: { MCard },
  props: {
    category: {
      type: String,
      default: '支行'
    },
    label: {
      type: String,
      default: '机构'
    },
    // 员工对比
    isEmp: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      candidate: {},
      comparison: {},
      items: []
    }
  },
  computed: {
    candidateItems () {
      return this.items.filter(e => e.value !== this.comparison.value)
    },
    comparisonItems () {
      return this.items.filter(e => e.value !== this.candidate.value)
    }
  },
  created () {
    this.isEmp ? this.initEmp() : this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await organizationList(
          {
            page: { current: 1, size: 999 },
            entity: { organizationCategory: this.category }
          }
        )
        this.items = data.records.map(e => {
          return { text: e.entity.organizationName, value: e.entity.organizationNo }
        })
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async initEmp () {
      const query = {
        metaDataCombinationEngName: 'employee_list',
        history: 1,
        pageState: 0
      }
      try {
        const { data } = await coreGraph(query)
        this.items = data.map(item => {
          return { text: item.employee_name, value: item.personnel_code }
        })
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    submit () {
      if (!this.candidate.value || !this.comparison.value) {
        this.$snackbar.warning(`请选择对比的${this.label}`)
        return
      }
      this.$emit('vsClick', `${this.candidate.value},${this.comparison.value}`, `${this.candidate.text},${this.comparison.text}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.select {
  width: 30%;
}
</style>