岗位选择

h5app/src/components/postSelection.vue

@@ -0,0 +1,329 @@
+<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;*/
+/*}*/
+</style>
+
+<template>
+  <ion-button id="open-modal" style="color: #02a6f1;font-size: 15px;" fill="clear" @click="loadProfessionInfo">选择
+  </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;">
+              {{ selectProfessionInfo.text }}
+            </ion-label>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" :disabled="selectProfessionInfo.value==''" @click="onConfirm">确定</ion-button>
+            </ion-buttons>
+          </ion-item>
+          <ion-item>
+            <ion-segment value="0">
+              <ion-segment-button v-for="(item) in selectModelList" @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 v-show="selectModelList[selectType.one].isSelect">
+              <ion-item v-for="(item, index) in selectModelList[selectType.one].professionList" :key="index">
+                <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
+                           @click="onSelect(item,selectType.one)">
+                  {{ item.professionName }}
+                </ion-label>
+              </ion-item>
+            </ion-list>
+            <ion-list v-show="selectModelList[selectType.two].isSelect">
+              <ion-item v-for="(item, index) in selectModelList[selectType.two].professionList" :key="index">
+                <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
+                           @click="onSelect(item,selectType.two)">
+                  {{ item.professionName }}
+                </ion-label>
+              </ion-item>
+            </ion-list>
+            <ion-list v-show="selectModelList[selectType.three].isSelect">
+              <ion-item v-for="(item, index) in selectModelList[selectType.three].professionList" :key="index">
+                <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
+                           @click="onSelect(item,selectType.three)">
+                  {{ item.professionName }}
+                </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 {getProfessionLevelList} from "@/api/recommendmgt";
+
+export default defineComponent({
+  name: "postSelection",
+  props: {
+    ProfessionID: {type: String, default: ''},
+  },
+  setup(props, context) {
+    const selectType = {
+      one: 0,
+      two: 1,
+      three: 2
+    }
+    const isOpen = ref(false);
+    const selectModelList = reactive([
+      {
+        index: 0,
+        name: '分类一',
+        isSelect: false,
+        disabled: true,
+        professionName: '',
+        professionID: '',
+        professionList: [] as any
+      },
+      {
+        index: 1,
+        name: '分类二',
+        isSelect: false,
+        disabled: true,
+        professionName: '',
+        professionID: '',
+        professionList: [] as any
+      },
+      {
+        index: 2,
+        name: '岗位',
+        isSelect: false,
+        disabled: true,
+        professionName: '',
+        professionID: '',
+        professionList: [] as any
+      }]);
+    const selectProfessionInfo = reactive({value: '', text: ''})
+    const professionLevelList = ref();
+
+    const loadProfessionInfo = () => {
+      getProfessionLevelList().then(data => {
+        professionLevelList.value = data;
+
+        if (!props.ProfessionID) {
+          selectModelList[selectType.one].isSelect = true;
+          selectModelList[selectType.one].disabled = false;
+          selectModelList[selectType.one].professionName = ''
+          selectModelList[selectType.one].professionID = ''
+          selectModelList[selectType.one].professionList = professionLevelList.value.filter((x: any) => x.professionLevel == "1")
+              .map((x: any) => ({
+                ...x,
+                isSelect: false
+              }));
+        } else {
+
+          const threeInfo = professionLevelList.value.find((x: any) => x.professionLevel == "3" && x.professionID == props.ProfessionID);
+          const twoInfo = professionLevelList.value.find((x: any) => x.professionLevel == "2" && x.professionID == threeInfo.parentProfessionID);
+          const oneInfo = professionLevelList.value.find((x: any) => x.professionLevel == "1" && x.professionID == twoInfo.parentProfessionID);
+
+          selectModelList[selectType.one].disabled = false;
+          selectModelList[selectType.one].professionName = oneInfo.professionName;
+          selectModelList[selectType.one].professionID = oneInfo.professionID;
+          selectModelList[selectType.one].professionList = professionLevelList.value.filter((x: any) => x.professionLevel == "1")
+              .map((x: any) => ({
+                ...x,
+                isSelect: false
+              }));
+          selectModelList[selectType.one].professionList.find((x: any) => x.professionID == oneInfo.professionID).isSelect = true;
+
+          selectModelList[selectType.two].disabled = false;
+          selectModelList[selectType.two].professionName = twoInfo.professionName;
+          selectModelList[selectType.two].professionID = twoInfo.professionID;
+          selectModelList[selectType.two].professionList = professionLevelList.value.filter((x: any) => x.professionLevel == "2"
+              && x.parentProfessionID == oneInfo.professionID).map((x: any) => ({
+            ...x,
+            isSelect: false
+          }));
+          selectModelList[selectType.two].professionList.find((x: any) => x.professionID == twoInfo.professionID).isSelect = true;
+
+          selectModelList[selectType.three].isSelect = true;
+          selectModelList[selectType.three].disabled = false;
+          selectModelList[selectType.three].professionName = threeInfo.professionName;
+          selectModelList[selectType.three].professionID = threeInfo.professionID;
+          selectModelList[selectType.three].professionList = professionLevelList.value.filter((x: any) => x.professionLevel == "3"
+              && x.parentProfessionID == twoInfo.professionID).map((x: any) => ({
+            ...x,
+            isSelect: false
+          }));
+          selectModelList[selectType.three].professionList.find((x: any) => x.professionID == threeInfo.professionID).isSelect = true;
+
+          getSelectProsession();
+        }
+      });
+      isOpen.value = true;
+    }
+
+    const onSelectType = (type: number) => {
+      if (selectType.one == type) {
+        selectModelList.map(x => {
+          x.isSelect = false
+          x.disabled = true
+          x.professionName = ''
+          x.professionID = ''
+          x.professionList = []
+        });
+
+        selectModelList[selectType.one].isSelect = true;
+        selectModelList[selectType.one].disabled = false;
+        selectModelList[selectType.one].professionList = professionLevelList.value.filter((x: any) => x.professionLevel == "1")
+            .map((x: any) => ({
+              ...x,
+              isSelect: false
+            }));
+      }
+
+      if (selectType.two == type) {
+        selectModelList[selectType.one].isSelect = false;
+        selectModelList[selectType.three].isSelect = false;
+        selectModelList[selectType.three].professionName = '';
+        selectModelList[selectType.three].professionID = '';
+        selectModelList[selectType.three].professionList = [];
+
+        selectModelList[selectType.two].isSelect = true;
+        selectModelList[selectType.two].disabled = false;
+        selectModelList[selectType.two].professionName = '';
+        selectModelList[selectType.two].professionID = '';
+        selectModelList[selectType.two].professionList = professionLevelList.value.filter((x: any) => x.professionLevel == "2"
+            && x.parentProfessionID == selectModelList[selectType.one].professionID).map((x: any) => ({
+          ...x,
+          isSelect: false
+        }));
+      }
+
+      if (selectType.three == type) {
+        selectModelList[selectType.one].isSelect = false;
+        selectModelList[selectType.two].isSelect = false;
+
+        selectModelList[selectType.three].isSelect = true;
+        selectModelList[selectType.three].disabled = false;
+        selectModelList[selectType.three].professionName = '';
+        selectModelList[selectType.three].professionID = '';
+        selectModelList[selectType.three].professionList = professionLevelList.value.filter((x: any) => x.professionLevel == "3"
+            && x.parentProfessionID == selectModelList[selectType.two].professionID).map((x: any) => ({
+          ...x,
+          isSelect: false
+        }));
+      }
+
+      getSelectProsession();
+    }
+
+    const onSelect = (item: any, type: any) => {
+      selectModelList[type].professionList.forEach((x: any) => {
+        x.isSelect = x.professionID == item.professionID
+      });
+      selectModelList[type].professionName = item.professionName;
+      selectModelList[type].professionID = item.professionID;
+
+      if (type == selectType.one) {
+        onSelectType(selectType.two);
+      }
+      if (type == selectType.two) {
+        onSelectType(selectType.three);
+      }
+
+      getSelectProsession();
+    }
+
+    const getSelectProsession = () => {
+      selectProfessionInfo.text = selectModelList.filter(x => x.professionName != '').map(x => x.professionName).join("-");
+      selectProfessionInfo.value = selectModelList[selectType.three].professionID;
+    }
+
+    const onCancel = () => {
+      isOpen.value = false;
+    }
+
+    const onConfirm = () => {
+      isOpen.value = false;
+      context.emit("SetProfessionID", selectProfessionInfo);
+    }
+    return {
+      isOpen,
+      selectType,
+      selectModelList,
+      selectProfessionInfo,
+      loadProfessionInfo,
+      onSelectType,
+      onSelect,
+      onCancel,
+      onConfirm,
+    };
+  }
+})
+</script>

h5app/src/views/pages/post/edit.vue

@@ -31,9 +31,10 @@
             <ion-label>岗位名称<span class="danger">*</span></ion-label>
             <ion-item :class="[v$.dataModel.professionName.$error?'ion-invalid':'ion-valid']">
               <ion-input placeholder="请选择岗位" label-placement="stacked" :clear-input="true"
-                        v-model="dataModel.professionName" class="custom">
+                         v-model="dataModel.professionName" class="custom">
               </ion-input>
-              <picker :ProfessionID="dataModel.professionID" aria-disabled="false"  @SetProfessionID="onSetProfessionID"></picker>
+<!--              <picker :ProfessionID="dataModel.professionID" aria-disabled="false"  @SetProfessionID="onSetProfessionID"></picker>-->
+              <post-selection :ProfessionID="dataModel.professionID" @SetProfessionID="onSetProfessionID"></post-selection>
               <ion-note slot="error">请选择岗位</ion-note>
             </ion-item>
           </div>
@@ -200,10 +201,12 @@ import {getCompanyBySiteID} from "@/api/company";
 import {useUserStore} from '@/store/modules/user';
 import dayjs from "dayjs";
 import Picker from "@/components/picker.vue";
+import PostSelection from "@/components/postSelection.vue";
 
 export default defineComponent({
   name: 'PostEdit',
   components:{
+    PostSelection,
     Picker
   },
   setup() {