|
@@ -0,0 +1,133 @@
|
|
|
+<template>
|
|
|
+ <ion-button style="color: #02a6f1;font-size: 15px;" fill="clear" @click="openPicker()">选择</ion-button>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import {ref, watch, defineComponent} from 'vue';
|
|
|
+import {pickerController} from '@ionic/vue';
|
|
|
+import {PickerButton, PickerColumnOption, PickerColumn, PickerOptions} from '@ionic/core';
|
|
|
+import {getProfessionLevelList} from "@/api/recommendmgt";
|
|
|
+
|
|
|
+interface PickerColumnOptions extends PickerColumnOption {
|
|
|
+ parent?: any;
|
|
|
+}
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'picker',
|
|
|
+ props: {
|
|
|
+ ProfessionID: {type: String, default: ''},
|
|
|
+ },
|
|
|
+ setup(props,context) {
|
|
|
+ const proList = ref();
|
|
|
+ const pickerOptions = ref<PickerOptions>();
|
|
|
+ const pickerColumns = ref<PickerColumn[]>([]);
|
|
|
+ const pickerButtons = ref<PickerButton[]>([]);
|
|
|
+ const oneColumnOptions = ref<PickerColumnOptions[]>([]);
|
|
|
+ const twoColumnOptions = ref<PickerColumnOptions[]>([]);
|
|
|
+ const threeColumnOptions = ref<PickerColumnOptions[]>([]);
|
|
|
+ const oldColumnProfessionID1 = ref(props.ProfessionID);
|
|
|
+ const oldColumnProfessionID2 = ref();
|
|
|
+ getProfessionLevelList().then(data => {
|
|
|
+ proList.value = data;
|
|
|
+
|
|
|
+ oneColumnOptions.value = proList.value.filter((x: any) => x.professionLevel == "1").map((m: any) => ({
|
|
|
+ text: m.professionName,
|
|
|
+ value: m.professionID,
|
|
|
+ parent: m.parentProfessionID,
|
|
|
+ selected: false
|
|
|
+ }));
|
|
|
+ oneColumnOptions.value[0].selected=true;
|
|
|
+ oldColumnProfessionID1.value = pickerColumns.value[0]?.options[0].value;
|
|
|
+
|
|
|
+ twoColumnOptions.value = proList.value.filter((x: any) => x.professionLevel == "2").map((m: any) => ({
|
|
|
+ text: m.professionName,
|
|
|
+ value: m.professionID,
|
|
|
+ parent: m.parentProfessionID,
|
|
|
+ selected: false
|
|
|
+ }))
|
|
|
+ twoColumnOptions.value[0].selected=true;
|
|
|
+ oldColumnProfessionID2.value = pickerColumns.value[1]?.options[0].value;
|
|
|
+
|
|
|
+ threeColumnOptions.value = proList.value.filter((x: any) => x.professionLevel == "3").map((m: any) => ({
|
|
|
+ text: m.professionName,
|
|
|
+ value: m.professionID,
|
|
|
+ parent: m.parentProfessionID,
|
|
|
+ selected: false
|
|
|
+ }));
|
|
|
+
|
|
|
+ pickerColumns.value = [
|
|
|
+ {name: 'one', selectedIndex: 0, options: oneColumnOptions.value},
|
|
|
+ {name: 'two', selectedIndex: 1, options: twoColumnOptions.value},
|
|
|
+ {name: 'three', selectedIndex: 2, options: threeColumnOptions.value}
|
|
|
+ ]
|
|
|
+ pickerButtons.value = [
|
|
|
+ {text: '取消', role: 'cancel',},
|
|
|
+ {
|
|
|
+ text: '确定',
|
|
|
+ handler: (value) => {
|
|
|
+ context.emit("SetProfessionID",value.three);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ const picker = ref();
|
|
|
+ const openPicker = async () => {
|
|
|
+ picker.value = await pickerController.create({
|
|
|
+ columns: pickerColumns.value,
|
|
|
+ buttons: pickerButtons.value
|
|
|
+ });
|
|
|
+
|
|
|
+ watch(pickerColumns.value.filter(f=>f.name=="one")[0].options.filter(f=>f.selected==true)[0], () => {
|
|
|
+ const newVal = pickerColumns.value.filter(f=>f.name=="one")[0].options.filter(f=>f.selected==true)[0]
|
|
|
+ if (oldColumnProfessionID1.value != newVal?.value) {
|
|
|
+ pickerColumns.value.map(x => {
|
|
|
+ if (x.name == "two") {
|
|
|
+ x.options = twoColumnOptions.value.filter(x => x.parent==newVal?.value);
|
|
|
+ if(x.options.length>0){
|
|
|
+ oldColumnProfessionID2.value = x.options[0].value;
|
|
|
+ x.options[0].selected=true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ pickerColumns.value.map(x => {
|
|
|
+ if (x.name == "three") {
|
|
|
+ x.options = threeColumnOptions.value.filter(f => f.parent == oldColumnProfessionID2.value);
|
|
|
+ if(x.options.length>0) {
|
|
|
+ x.options[0].selected = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ pickerController.dismiss().then((e) => {console.log(e)})
|
|
|
+ openPicker()
|
|
|
+ oldColumnProfessionID1.value = newVal?.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ watch(pickerColumns.value.filter(f=>f.name=="two")[0].options.filter(f=>f.selected==true)[0], () => {
|
|
|
+ const newVal = pickerColumns.value.filter(f=>f.name=="two")[0].options.filter(f=>f.selected==true)[0]
|
|
|
+
|
|
|
+ if (oldColumnProfessionID2.value != newVal.value) {
|
|
|
+ pickerColumns.value.map(x => {
|
|
|
+ if (x.name == "three") {
|
|
|
+ x.options = threeColumnOptions.value.filter(f => f.parent == newVal.value);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ pickerController.dismiss().then((e) => {console.log(e)})
|
|
|
+ openPicker()
|
|
|
+ oldColumnProfessionID2.value = newVal.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ await picker.value.present();
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ openPicker,
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|