BoundLink-Plate-UI/src/components/BsUi/OrgUserSelector/index.vue

<template>
  <div class="selector">
    <div class="selector-field">
      <a-select
        :value="selVal"
        :mode="multiple === SELECT_MULTIPLE.MORE ? 'multiple' : undefined"
        style="width: 100%"
        placeholder="请选择"
        :open="false"
        :allow-clear="true"
        @change="handleChange"
        :disabled="disabled"
        :options="options"
        :max-tag-count="10"
        :showArrow="false"
      >
        <template #tagRender="{ value: val, label, closable, onClose, option }">
          <a-tag :closable="closable" style="margin-right: 3px" @close="closeTags(onClose, val, option, label)">
            {{ label }}
          </a-tag>
        </template>
      </a-select>
      <a-button @click="handleClkSelector">
        <template #icon>
          <UserOutlined />
        </template>
      </a-button>
      {{ selectedData }}
    </div>
    <modal-selector
      ref="modalSelectorRef"
      :multiple="multiple"
      :selectedOldData="oldSelectedData"
      :id-key="idKey"
      :label-key="labelKey"
      @change="selectChange"
      @ok="confirm"
      :selected-data="selectedData"
    />
  </div>
</template>

<script setup>
  import { SELECT_MULTIPLE } from '/@/components/BsUi/constant.js';
  import ModalSelector from '/@/components/BsUi/OrgUserSelector/components/ModalSelector.vue';
  import { onMounted, ref, watch } from 'vue';
  import { isArray, isEmpty } from 'lodash';
  import { UserOutlined } from '@ant-design/icons-vue';

  const oldSelectedData = ref([]);
  const selVal = ref([]);
  const options = ref([]);

  const props = defineProps({
    selectedData: {
      required: true,
      default: undefined,
    },
    multiple: {
      required: false,
      default: SELECT_MULTIPLE.ONE,
    },
    disabled: {
      required: false,
      default: false,
    },
    idKey: {
      required: false,
      default: 'id',
    },
    labelKey: {
      required: false,
      default: 'name',
    },
  });
  const emit = defineEmits(['update:selectedData']);

  const modalSelectorRef = ref(null);

  const selectChange = (value) => {};

  const setOptions = (valObj) => {
    if (isArray(valObj)) {
      options.value = valObj.map((v) => ({
        label: v[props.labelKey],
        value: v[props.idKey],
      }));
    } else {
      options.value = [
        {
          label: valObj[props.labelKey],
          value: valObj[props.idKey],
        },
      ];
    }
  };

  const closeTags = (onClose, val, option, label) => {
    if (isArray(selVal.value)) {
      selVal.value = selVal.value.filter((v) => v !== val);
    } else {
      selVal.value = undefined;
    }
    const valObj = oldSelectedData.value.filter((v) => v[props.idKey] !== val);
    setOptions(valObj);
    emit('update:selectedData', valObj);
  };

  const handleChange = (value) => {
    if (isEmpty(value)) {
      selVal.value = undefined;
      emit('update:selectedData', []);
    }
  };

  const handleClkSelector = () => {
    if (props.disabled) {
      return;
    }
    modalSelectorRef.value.showModal();
  };

  const confirm = ({ selectedKeys, selectedData }) => {
    setOptions(selectedData);
    if (props.multiple === SELECT_MULTIPLE.ONE && selectedData.length === 1) {
      selVal.value = selectedKeys[0];
      emit('update:selectedData', selectedData[0]);
    } else {
      selVal.value = selectedKeys;
      emit('update:selectedData', selectedData);
    }
  };

  watch(
    () => props.selectedData,
    (val) => {
      setOptions(val);
      if (isEmpty(val)) {
        oldSelectedData.value = [];
        selVal.value = [];
      } else {
        oldSelectedData.value = isArray(val) ? val : [val];
        selVal.value = isArray(val) ? val.map((v) => v[props.idKey]) : val[props.idKey];
      }
    },
    { immediate: true }
  );
</script>

<style lang="scss" scoped>
  .selector {
    width: 100%;

    .selector-field {
      width: 100%;
      display: flex;
    }
  }
</style>