adweb3-web/src/components/Adweb/selectSite.vue

<template>
  <a-form-item :label="props.label" name="siteCode">
    <a-select
      showSearch
      :allowClear="props.allowClear"
      :filter-option="filterOption"
      v-model:value="siteCode"
      @change="changeUser"
      :style="'width:' + selectWidth"
      :options="siteInfo"
      :field-names="{ label: 'name', value: 'code' }"
      placeholder="请选择站点"
    />
  </a-form-item>
</template>

<script lang="ts" setup name="SelectSite">
  import { getAction } from '/@/api/manage/manage';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue';

  const { createMessage } = useMessage();

  const emit = defineEmits(['setSiteInfo']);

  const props = defineProps({
    label: {
      type: String,
      default: '',
    },
    allowClear: {
      type: Boolean,
      default: false,
    },
    siteListUrl: {
      type: String,
      default: '/adweb/adwebSite/getSiteListByUid',
    },
    selectWidth: {
      type: String,
      default: '100%',
    },
  });

  //站点搜索
  const filterOption = (input: string, option: any) => {
    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  let siteInfo = reactive([{ code: '', id: '', name: '' }]);
  let selectSiteInfo = reactive({ code: '', id: '', name: '' });
  let siteCode = ref();

  onBeforeMount(() => {
    getSiteInfo();
  });

  // 只要检测到该组件站点发生变化，就触发任何使用此组件的监听方法
  watch(
    () => siteCode,
    (newValue, oldValue) => {
      emit('setSiteInfo', selectSiteInfo); // 触发父方法
    },
    { immediate: true, deep: true }
  );

  //进入获取站点code
  function getSiteInfo() {
    getAction(props.siteListUrl, null).then(function (res) {
      if (res.code === 200) {
        siteInfo = res.result;

        let isInSite = false;
        for (let i in res.result) {
          if (localStorage.getItem('siteCode') !== null && res.result[i].code === localStorage.getItem('siteCode')) {
            isInSite = true;
            selectSiteInfo = res.result[i];
            siteCode.value = localStorage.getItem('siteCode');
          }
        }

        if (!isInSite) {
          siteCode.value = res.result[0].code;
          selectSiteInfo = res.result[0];
          localStorage.setItem('siteCode', res.result[0].code);
          localStorage.setItem('siteID', res.result[0].id);
        }
      } else {
        createMessage.error('站点获取失败，请刷新重试');
      }
    });
  }

  //改变站点
  function changeUser(value, e) {
    if (value !== undefined) {
      siteCode.value = value;
      localStorage.setItem('siteCode', value);
      localStorage.setItem('siteID', e.id);

      // 更改选中的站点对象
      for (let i in siteInfo) {
        if (siteInfo[i].code === value) {
          selectSiteInfo = siteInfo[i];
        }
      }
    } else {
      selectSiteInfo = reactive({ code: '', id: '', name: '' });
    }
  }
</script>

<style lang="less">
  .wp-tips {
    .ant-modal-header {
      padding: 10px;
    }

    .ant-modal-body {
      padding: 24px;

      p {
        margin-bottom: 10px;
      }
    }
  }
</style>