index.vue 2.64 KB
/**
* @Description:补充符号-粗糙度
* @author wx
* @date 2022/12/06
*/
<template>
  <div class="flags-elementIcon">
    <div v-for="(item,index) in showOptions" :key="index" class="element-item" :class="[selectedDatas.find(r=>r.value === item.value) ?'selected':'']" @click="selectSymbol(item)">
      <svg-icon v-if="item.src" :icon-class="item.src" class="f22" />
      <span v-else>{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
import config from './config'
export default {
  name: 'FlagsElementIcon',
  components: {},
  mixins: [config],
  props: {
    options: {
      type: String,
      default: () => ''
    },
    form: {
      type: Object,
      default: null
    }
  },
  componentName: '公差符号-补充符号',
  data() {
    return {
      activeEl: {},
      selectedDatas: []
    }
  },

  computed: {
    showOptions() {
      if (this.options) {
        return JSON.parse(this.options)
      } else {
        return []
      }
    }
  },
  mounted() {},
  methods: {
    selectSymbol(item) {
      this.activeEl = item
      const findItemIndex = this.selectedDatas.findIndex(r => r.value === item.value)
      if (findItemIndex > -1) {
        this.selectedDatas.splice(findItemIndex, 1)
      } else {
        this.selectedDatas.push(item)
      }
      const datas = JSON.parse(JSON.stringify(this.form)).dynamicAttrs
      const supplyType = this.selectedDatas// flag补充
      const symbolPos = this.form.symbolPosition// 符号位置 1上 -1下

      if (supplyType && supplyType.length > 0) {
        const flag3Item = supplyType.filter(x => x.value === 'flag3')
        if (flag3Item && flag3Item.length > 0) {
          datas.upFlag3 = true
        } else {
          datas.upFlag3 = false
        }
      } else {
        if (!this.form.flag3) {
          symbolPos === '1' ? this.$set(datas, 'upFlag3', false) : this.$set(datas, 'downFlag3', false)
        }
      }
      this.showOptions.forEach(x => {
        const findItem = supplyType.find(r => r.value === x.value)
        this.$set(datas, x.value, !!findItem)
      })
      this.$emit('input', datas)
    }
  }
}

</script>
<style lang='scss'>
.flags-elementIcon{
    padding: 4px;
    border: 1px solid #e9e9eb;
    display: flex;
    flex-wrap: wrap;
    .element-item{
        cursor: pointer;
        display: inline-block;
        width: 45px;
        height: 45px;
        line-height: 45px;
        padding: 2px;
        margin: 0 4px 4px 0;
        border: 1px solid #ebebe9;
        &:hover{
            background: #ebebe9
        }
    }
    .selected{
        color: #409EFF;
        border-color: #409EFF;
        box-shadow: 2px 2px 1px 0 #409eff;
    }
}

</style>