crm-app-vue3/components/custom-tab-select/index.vue

<template>
  <view class="tab-radio-container" :style="{ gridTemplateColumns: `repeat(${colNum}, 1fr)` }">
    <view 
      class="tab-item"
      :class="{ 
        'tab-item--active': isMultiple ? activeValues.includes(item[valueKey]) : activeValue === item[valueKey],
        'tab-item--multiple': isMultiple
      }"
      v-for="(item, index) in tabList"
      :key="index"
      @click="handleTabClick(item)"
    >
      <text class="tab-item__text">{{ item[labelKey] }}</text>
      <!-- <view v-if="isMultiple" class="tab-item__checkbox" :class="{ 'tab-item__checkbox--checked': activeValues.includes(item.value) }">
        <view v-if="activeValues.includes(item.value)" class="tab-item__checkbox-inner"></view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: "TabRadio",
  props: {
    tabList: {
      type: Array,
      required: true,
      default: () => []
    },
    defaultActive: {
      type: [String, Number, Array],
      default: ""
    },
    colNum: {
      type: Number,
      default: 4
    },
    mode: {
      type: String,
      default: "single",
      validator: (value) => ["single", "multiple"].includes(value)
    },
    echoInfo: {
      type: [String, Number, Array],
      default: ""
    },
    isClear: {
      type: Boolean,
      default: false
    },
    valueKey: {
      type: String,
      default: "value"
    },
    labelKey: {
      type: String,
      default: "name"
    }
  },
  computed: {
    isMultiple() {
      return this.mode === "multiple";
    }
  },
  data() {
    // 优先使用 echoInfo，如果 echoInfo 不为空则使用它，否则使用 defaultActive
    const initialValue = this.echoInfo || this.defaultActive;
    return {
      activeValue: this.isMultiple ? '' : initialValue,
      activeValues: this.isMultiple ? (Array.isArray(initialValue) ? initialValue : []) : []
    };
  },
  watch: {
    defaultActive: {
      handler(val) {
        // 只有当 echoInfo 为空时，才使用 defaultActive
        if (!this.echoInfo) {
          if (this.isMultiple) {
            this.activeValues = Array.isArray(val) ? val : [];
          } else {
            this.activeValue = val;
          }
        }
      },
      immediate: true
    },
    echoInfo: {
      handler(val) {
        if (val !== undefined && val !== null) {
          if (this.isMultiple) {
            this.activeValues = Array.isArray(val) ? val : [];
          } else {
            this.activeValue = val;
          }
        }
      },
      immediate: true
    },
    mode: {
      handler(newMode) {
        // 当 mode 变化时，重新初始化选中值
        const initialValue = this.echoInfo || this.defaultActive;
        if (newMode === 'multiple') {
          this.activeValues = Array.isArray(initialValue) ? initialValue : [];
          this.activeValue = '';
        } else {
          this.activeValue = initialValue;
          this.activeValues = [];
        }
      },
      immediate: true
    },
    isClear: {
      handler(val) {
        if (val) {
          this.activeValue = '';
          this.activeValues = [];
        }
      },
      immediate: true
    }
  },
  methods: {
    handleTabClick(item) {
      if (this.isMultiple) {
        this.handleMultipleSelect(item);
      } else {
        this.handleSingleSelect(item);
      }
    },
    handleSingleSelect(item) {
      this.activeValue = item[this.valueKey];
      this.$emit("tabChange", item[this.valueKey]);
    },
    handleMultipleSelect(item) {
      const index = this.activeValues.indexOf(item[this.valueKey]);
      if (index > -1) {
        this.activeValues.splice(index, 1);
      } else {
        this.activeValues.push(item[this.valueKey]);
      }
      this.$emit("tabChange", [...this.activeValues]);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>