EmploymentSite/h5app/src/components/ocCategorySelection.vue

<style>
ion-modal {
  --height: 50%;
  --border-radius: 16px;
  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

ion-modal::part(backdrop) {
  background: rgba(209, 213, 219);
  opacity: 1;
}

ion-modal ion-toolbar {
  --background: white;
  --color: white;
}

ion-toolbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  --padding-start: 0;
  --padding-end: 0;
}

ion-toolbar ion-item:first-child {
  --inner-border-width: 0 0 0 0;
  text-align: center;
}

ion-toolbar ion-item:last-child {
  --padding-start: 0;
  --inner-padding-end: 0;
}

ion-segment {
  width: 100%;
  --background: #ffffff;
}

ion-segment-button {
  --indicator-color: rgba(254, 255, 255, 0.97);
  --color: #000000;
  --color-checked: #1a65eb;
  --background-hover: rgba(47, 107, 215, 0.98);
  --border-width: 0 0 0 0;
  --indicator-box-shadow: 0 0 0 0;
}

/*!* Material Design styles *!*/
/*ion-segment-button.md {*/
/*  --color: #000;*/
/*  --color-checked: #1a65eb;*/
/*  --border-radius: 0px;*/
/*  --border-width: 0 0 0 0;*/
/*}*/

/*!* iOS styles *!*/
/*ion-segment-button.ios {*/
/*  --color: #000;*/
/*  --color-checked: #1a65eb;*/
/*  --border-radius: 0px;*/
/*  --border-width: 0 0 0 0;*/
/*}*/

.custom-scroll {
  overflow-y: auto; /* 显示垂直滚动条 */
  max-height: 200px; /* 设置最大高度，超出部分会出现滚动条 */
}

/* 可以根据需要自定义滚动条的样式 */
.custom-scroll::-webkit-scrollbar {
  width: 8px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

</style>

<template>
  <ion-button id="open-modal" style="color: #02a6f1;font-size: 15px;" fill="clear" @click="loadOccupationalID">选择
  </ion-button>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-modal trigger="open-modal" :backdrop-dismiss="false" :is-open="isOpen" :initial-breakpoint="1"
                 :breakpoints="[0, 1]">
        <ion-toolbar>
          <ion-item>
            <ion-buttons slot="start">
              <ion-button fill="clear" @click="onCancel">取消</ion-button>
            </ion-buttons>
            <ion-label style="font-size: 12px;white-space: pre-wrap; word-wrap: break-word;">
              {{ selectOccupationInfo.text }}
            </ion-label>
            <ion-buttons slot="end">
              <ion-button fill="clear" :disabled="selectOccupationInfo.value==''" @click="onConfirm">确定</ion-button>
            </ion-buttons>
          </ion-item>
          <ion-item>
            <ion-segment value="0">
              <ion-segment-button v-for="(item,key) in selectModelList" :key="key" @click="onSelectType(item.index)"
                                  :disabled="item.disabled" :value="item.index">
                <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}">{{ item.name }}</ion-label>
              </ion-segment-button>
            </ion-segment>
          </ion-item>
        </ion-toolbar>
        <div class="bw-vue-list">
          <div class="list-content">
            <ion-list class="custom-scroll" v-show="selectModelList[selectType.one].isSelect">
              <ion-item v-for="(item, index) in selectModelList[selectType.one].occupationList" :key="index">
                <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
                           @click="onSelect(item,selectType.one)">
                  {{ item.occupationalName }}
                </ion-label>
              </ion-item>
            </ion-list>
            <ion-list class="custom-scroll" v-show="selectModelList[selectType.two].isSelect">
              <ion-item v-for="(item, index) in selectModelList[selectType.two].occupationList" :key="index">
                <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
                           @click="onSelect(item,selectType.two)">
                  {{ item.occupationalName }}
                </ion-label>
              </ion-item>
            </ion-list>
          </div>
        </div>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue';
import {getOccupationCategoryList} from "@/api/recommendmgt";

export default defineComponent({
  name: "ocCategorySelection",
  props: {
    OccupationalID: {type: String, default: ''},
  },
  setup(props, context) {
    const selectType = {
      one: 0,
      two: 1,
    }
    const isOpen = ref(false);
    const selectModelList = reactive([
      {
        index: 0,
        name: '资格类别',
        isSelect: false,
        disabled: true,
        occupationalName: '',
        occupationalID: '',
        occupationList: [] as any
      },
      {
        index: 1,
        name: '资格名称',
        isSelect: false,
        disabled: true,
        occupationalName: '',
        occupationalID: '',
        occupationList: [] as any
      }]);
    const selectOccupationInfo = reactive({value: '', text: ''})
    const occupationalCategoryList = ref();

    const loadOccupationalID = () => {
      getOccupationCategoryList().then(data => {
        occupationalCategoryList.value = data;
        if (!props.OccupationalID) {
          selectModelList[selectType.one].isSelect = true;
          selectModelList[selectType.one].disabled = false;
          selectModelList[selectType.one].occupationalName = '';
          selectModelList[selectType.one].occupationalID = '';
          selectModelList[selectType.one].occupationList = occupationalCategoryList.value.filter((x: any) => x.occupationalLevel == "1")
              .map((x: any) => ({
                ...x,
                isSelect: false
              }));
        }
        else {
          const twoInfo = occupationalCategoryList.value.find((x: any) => x.occupationalLevel == "2" && x.occupationalID == props.OccupationalID);
          const oneInfo = occupationalCategoryList.value.find((x: any) => x.occupationalLevel == "1" && x.occupationalID == twoInfo.parentOccupationalID);

          selectModelList[selectType.one].isSelect = false;
          selectModelList[selectType.one].disabled = false;
          selectModelList[selectType.one].occupationalName = oneInfo.occupationalName;
          selectModelList[selectType.one].occupationalID = oneInfo.occupationalID;
          selectModelList[selectType.one].occupationList = occupationalCategoryList.value.filter((x: any) => x.occupationalLevel == "1")
              .map((x: any) => ({
                ...x,
                isSelect: false
              }));
          selectModelList[selectType.one].occupationList.find((x: any) => x.occupationalID == oneInfo.occupationalID).isSelect = true;

          selectModelList[selectType.two].isSelect = true;
          selectModelList[selectType.two].disabled = false;
          selectModelList[selectType.two].occupationalName = twoInfo.occupationalName;
          selectModelList[selectType.two].occupationalID = twoInfo.occupationalID;
          selectModelList[selectType.two].occupationList = occupationalCategoryList.value.filter((x: any) => x.occupationalLevel == "2"
              && x.parentOccupationalID == oneInfo.occupationalID).map((x: any) => ({
            ...x,
            isSelect: false
          }));
          selectModelList[selectType.two].occupationList.find((x: any) => x.occupationalID == twoInfo.occupationalID).isSelect = true;

          getSelectOccupation();
        }
      });
      isOpen.value = true;
    }

    const onSelectType = (type: number) => {
      if (selectType.one == type) {
        selectModelList.map(x => {
          x.isSelect = false,
          x.disabled = true,
          x.occupationalName = '',
          x.occupationalID = '',
          x.occupationList = []
        });

        selectModelList[selectType.one].isSelect = true;
        selectModelList[selectType.one].disabled = false;
        selectModelList[selectType.one].occupationList = occupationalCategoryList.value.filter((x: any) => x.occupationalLevel == "1")
            .map((x: any) => ({
              ...x,
              isSelect: false
            }));
      }


      if (selectType.two == type) {
        selectModelList[selectType.one].isSelect = false;

        selectModelList[selectType.two].isSelect = true;
        selectModelList[selectType.two].disabled = false;
        selectModelList[selectType.two].occupationalName = '';
        selectModelList[selectType.two].occupationalID = '';
        selectModelList[selectType.two].occupationList = occupationalCategoryList.value.filter((x: any) => x.occupationalLevel == "2"
            && x.parentOccupationalID == selectModelList[selectType.one].occupationalID).map((x: any) => ({
          ...x,
          isSelect: false
        }));

      }

      getSelectOccupation();
    }

    const onSelect = (item: any, type: any) => {

      selectModelList[type].occupationList.forEach((x: any) => {
        x.isSelect = x.occupationalID == item.occupationalID;
      });
      selectModelList[type].occupationalName = item.occupationalName;
      selectModelList[type].occupationalID = item.occupationalID;

      if (type == selectType.one) {
        onSelectType(selectType.two);
      }

      getSelectOccupation();
    }

    const getSelectOccupation = () => {
      selectOccupationInfo.text = selectModelList.filter(x => x.occupationalName != '').map(x => x.occupationalName).join("-");
      selectOccupationInfo.value = selectModelList[selectType.two].occupationalID;
    }

    const onCancel = () => {
      isOpen.value = false;
    }

    const onConfirm = () => {
      isOpen.value = false;
      context.emit("SetOccupationalID", selectOccupationInfo);
    }
    return {
      isOpen,
      selectType,
      selectModelList,
      selectOccupationInfo,
      loadOccupationalID,
      onSelectType,
      onSelect,
      onCancel,
      onConfirm,
    };
  }
})
</script>