EmploymentSite/h5app/src/components/ocCategorySelection.vue

<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 class="cascade-model" 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>