From e958f37fb87fd7b6bf6bc32e7ec65adc2894b029 Mon Sep 17 00:00:00 2001
From: chaorenluo <1243357953@qq.com>
Date: Wed, 30 Oct 2024 10:03:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=86=85=E5=AE=B9=E8=BF=87=E5=A4=9A=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98,=E4=BB=A5=E5=8F=8A=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=97=A0=E6=B3=95=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/modules/survey/utils/index.ts      |  16 +-
 .../pages/edit/components/Picker/index.vue    | 468 ++++++++++++++++++
 .../edit/components/Picker/pickerHeader.vue   |  83 ++++
 .../edit/components/Picker/pickerList.vue     | 251 ++++++++++
 .../pages/edit/components/Picker/utils.ts     |  16 +
 .../MultilevelModule/BaseMultilevel/index.vue |  14 +-
 .../widgets/MultilevelModule/Picker/event.ts  |  24 -
 .../widgets/MultilevelModule/Picker/index.vue | 155 ------
 .../widgets/MultilevelModule/Picker/list.ts   | 128 -----
 web/src/render/main.js                        |   1 -
 10 files changed, 835 insertions(+), 321 deletions(-)
 create mode 100644 web/src/management/pages/edit/components/Picker/index.vue
 create mode 100644 web/src/management/pages/edit/components/Picker/pickerHeader.vue
 create mode 100644 web/src/management/pages/edit/components/Picker/pickerList.vue
 create mode 100644 web/src/management/pages/edit/components/Picker/utils.ts
 delete mode 100644 web/src/materials/questions/widgets/MultilevelModule/Picker/event.ts
 delete mode 100644 web/src/materials/questions/widgets/MultilevelModule/Picker/index.vue
 delete mode 100644 web/src/materials/questions/widgets/MultilevelModule/Picker/list.ts

diff --git a/server/src/modules/survey/utils/index.ts b/server/src/modules/survey/utils/index.ts
index 85b39453..dee07eee 100644
--- a/server/src/modules/survey/utils/index.ts
+++ b/server/src/modules/survey/utils/index.ts
@@ -184,13 +184,15 @@ export function handleAggretionData({ dataMap, item }) {
       type: dataMap[item.field].type,
       data: {
         ...item.data,
-        aggregation: aggregation.map((item) => {
-          return {
-            id: item.id,
-            text: item.text,
-            count: aggregationMap[item.id]?.count || 0,
-          };
-        }),
+        aggregation: aggregation
+          .map((item) => {
+            return {
+              id: item.id,
+              text: item.text,
+              count: aggregationMap[item.id]?.count || 0,
+            };
+          })
+          .filter((v) => v.count > 0),
       },
     };
   } else {
diff --git a/web/src/management/pages/edit/components/Picker/index.vue b/web/src/management/pages/edit/components/Picker/index.vue
new file mode 100644
index 00000000..2c69dab2
--- /dev/null
+++ b/web/src/management/pages/edit/components/Picker/index.vue
@@ -0,0 +1,468 @@
+<template>
+  <Transition name="fade">
+    <div class="pickerbox" v-show="props.visible" @click="clickMask">
+      <Transition name="toup">
+        <div class="vue-picker" ref="picker" v-show="props.visible">
+          <PickerHeader v-if="showToolbar" :cancelText="props.cancelText" :confirmText="props.confirmText" :title="props.title" @cancel="cancel"
+            @confirm="confirm" />
+          <div class="content" :style="{ height: boxHeight + 'px' }">
+            <div class="colums">
+              <PickerList :column="state.column1" :boxHeight="boxHeight" :itemHeight="props.itemHeight" :defaultIndex="state.dIndex1"
+                :rowNumber="getRowNumber" @change="change1" />
+              <PickerList v-if="state.column2.length > 0" :column="state.column2" :boxHeight="boxHeight" :itemHeight="props.itemHeight"
+                :defaultIndex="state.dIndex2" :rowNumber="getRowNumber" @change="change2" />
+              <PickerList v-if="state.column3.length > 0" :column="state.column3" :boxHeight="boxHeight" :itemHeight="props.itemHeight"
+                :defaultIndex="state.dIndex3" :rowNumber="getRowNumber" @change="change3" />
+              <PickerList v-if="state.column4.length > 0" :column="state.column4" :boxHeight="boxHeight" :itemHeight="props.itemHeight"
+                :defaultIndex="state.dIndex4" :rowNumber="getRowNumber" @change="change4" />
+            </div>
+            <div class="mask" :style="maskStyle"></div>
+            <div class="hairline"></div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { reactive, computed, nextTick, ref, watch,onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
+import PickerHeader from './pickerHeader.vue'
+import PickerList from './pickerList.vue'
+import { DEFTAULT_ITEM_HEIGHT } from './utils'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  layer: {
+    type: Number,
+    default: 0
+  },
+  itemHeight: {
+    type: [Number, String],
+    default: DEFTAULT_ITEM_HEIGHT
+  },
+  defaultIndex: {
+    type: [Number, Array],
+    default: 0
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  confirmText: {
+    type: String,
+    default: '确认'
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  showToolbar: {
+    type: Boolean,
+    default: false
+  },
+  maskClick: {
+    type: Boolean,
+    default: false
+  },
+  rowNumber: {
+    type: Number,
+    default: 5
+  },
+  appendToBody: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'confirm', 'change'])
+
+const state = reactive({
+  column1: [],
+  column2: [],
+  column3: [],
+  column4: [],
+  dIndex1: 0,
+  dIndex2: 0,
+  dIndex3: 0,
+  dIndex4: 0,
+  indexArr: [],
+  result: [],
+  prevBodyCss: ''
+})
+const picker = ref(null)
+
+const getRowNumber = computed(() => {
+  if (props.rowNumber < 3) {
+    return 3
+  }
+  return props.rowNumber % 2 === 0 ? props.rowNumber + 1 : props.rowNumber
+})
+
+const boxHeight = computed(() => {
+  let itemHeight = parseInt(props.itemHeight)
+  itemHeight = itemHeight ? itemHeight : DEFTAULT_ITEM_HEIGHT
+  return itemHeight * getRowNumber.value
+})
+
+
+const maskStyle = computed(() => {
+  let style = { backgroundSize: '100% 88px' }
+  if (getRowNumber.value === 3) {
+    style = { backgroundSize: '100% 44px' }
+  }
+  return style
+})
+
+const clickMask = () => {
+  if (props.maskClick) {
+    looseBody()
+    emit('update:visible', false)
+  }
+}
+
+const formateData = () => {
+  if (props.layer > 1) {
+    setLinkColumn()
+  } else {
+    state.column1 = props.data[0] || []
+    state.column2 = props.data[1] || []
+    state.column3 = props.data[2] || []
+    state.column4 = props.data[3] || []
+    setNormalIndex()
+  }
+}
+
+const setLinkColumn = () => {
+  if (props.layer === 2) {
+    setLinkLayer2()
+  } else if (props.layer === 3) {
+    setLinkLayer2()
+    setLinkLayer3()
+  } else if (props.layer === 4) {
+    setLinkLayer2()
+    setLinkLayer3()
+    setLinkLayer4()
+  }
+}
+
+const setLinkLayer2 = () => {
+  const { defaultIndex } = props
+  state.column1 = props.data || []
+  if (typeof defaultIndex === 'number') {
+    state.dIndex1 = defaultIndex
+    state.dIndex2 = 0
+    if (props.data.length > 1 && props.data[0].children) {
+      state.column2 = props.data[0].children || []
+    }
+  } else if (Array.isArray(defaultIndex) && defaultIndex.length > 0) {
+    state.dIndex1 = defaultIndex[0] || 0
+    state.column2 = props.data[state.dIndex1].children || []
+    nextTick(() => {
+      if (state.column2.length - 1 < defaultIndex[1]) {
+        state.dIndex2 = state.column2.length - 1
+      } else {
+        state.dIndex2 = defaultIndex[1] || 0
+      }
+    })
+  }
+}
+
+const setLinkLayer3 = () => {
+  const { defaultIndex } = props
+  if (typeof defaultIndex === 'number') {
+    state.dIndex3 = 0
+    if (state.column2.length > 1 && state.column2[0].children) {
+      state.column3 = state.column2[0].children || []
+    }
+  } else if (Array.isArray(defaultIndex) && defaultIndex.length > 1) {
+    nextTick(() => {
+      state.column3 = state.column2[state.dIndex2].children || []
+      nextTick(() => {
+        if (state.column3.length - 1 < defaultIndex[2]) {
+          state.dIndex3 = state.column3.length - 1
+        } else {
+          state.dIndex3 = defaultIndex[2] || 0
+        }
+      })
+    })
+  }
+}
+
+const setLinkLayer4 = () => {
+  const { defaultIndex } = props
+  if (typeof defaultIndex === 'number') {
+    state.dIndex4 = 0
+    if (state.column3.length > 1 && state.column3[0].children) {
+      state.column4 = state.column3[0].children || []
+    }
+  } else if (Array.isArray(defaultIndex) && defaultIndex.length > 2) {
+    setTimeout(() => {
+      state.column4 = state.column3[state.dIndex3].children || []
+      nextTick(() => {
+        if (state.column4.length - 1 < defaultIndex[3]) {
+          state.dIndex4 = state.column4.length - 1
+        } else {
+          state.dIndex4 = defaultIndex[3] || 0
+        }
+      })
+    })
+  }
+}
+
+const setNormalIndex = () => {
+  nextTick(() => {
+    const { defaultIndex } = props
+    if (Array.isArray(defaultIndex)) {
+      setDefaultIndex()
+    } else {
+      state.dIndex1 = Number(defaultIndex) || 0
+    }
+  })
+}
+
+const setDefaultIndex = () => {
+  const { indexArr } = state
+  function next() {
+    let promise = Promise.resolve()
+    let index = 0
+    while (index < props.data.length) {
+      promise = promise.then(indexArr[index])
+      index++
+    }
+  }
+  next()
+}
+
+const change = (index, res) => {
+  state.result[index] = res
+  emit('change', state.result)
+}
+
+const change1 = (res) => {
+  if (res) {
+    change(0, res)
+    if (props.layer > 1) {
+      state.dIndex2 = 0
+      changeLink('column2', res)
+    }
+  }
+}
+const change2 = (res) => {
+  if (res) {
+    change(1, res)
+    if (props.layer > 2) {
+      state.dIndex3 = 0
+      changeLink('column3', res)
+    }
+  }
+}
+
+const change3 = (res) => {
+  if (res) {
+    change(2, res)
+    if (props.layer > 3) {
+      state.dIndex4 = 0
+      changeLink('column4', res)
+    }
+  }
+}
+
+const change4 = (res) => {
+  if (res) {
+    change(3, res)
+  }
+}
+
+const changeLink = (key, res) => {
+  if (props.layer) {
+    setTimeout(() => {
+      state[key] = res.children || []
+    }, 1000 / 60)
+  }
+}
+
+const cancel = () => {
+  looseBody()
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+const confirm = () => {
+  looseBody()
+  emit('confirm', state.result)
+  emit('update:visible', false)
+}
+
+const stopPropagation = (e) => {
+  e.stopPropagation()
+}
+
+const fixedBody = () => {
+  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+  state.prevBodyCss = document.body.style.cssText
+  document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
+}
+
+const looseBody = () => {
+  const body = document.body
+  const top = body.style.top
+  body.style.cssText = state.prevBodyCss
+  body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
+  body.style.top = ''
+}
+
+
+
+const init = () => {
+  state.result = []
+  state.indexArr = [
+    () => state.dIndex1 = props.defaultIndex[0] || 0,
+    () => state.dIndex2 = props.defaultIndex[1] || 0,
+    () => state.dIndex3 = props.defaultIndex[2] || 0,
+    () => state.dIndex4 = props.defaultIndex[3] || 0
+  ]
+  formateData()
+}
+
+onBeforeMount(() => {
+  init()
+})
+
+onBeforeUnmount(() => {
+  picker.value.removeEventListener('click', stopPropagation)
+})
+
+
+onMounted(() => {
+  picker.value.addEventListener('click', stopPropagation)
+  if (props.appendToBody) {
+    // document.body.appendChild(this.$el)
+  }
+})
+
+watch(() => props.visible, (v) => {
+  if (v) {
+    fixedBody()
+  }
+})
+
+watch(() => props.defaultIndex, () => {
+  init()
+})
+
+watch(() => props.data, () => {
+  init()
+})
+
+
+</script>
+<style lang="scss" scoped>
+.pickerbox {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.toup-enter-active,
+.toup-leave-active {
+  transition: transform .3s;
+}
+
+.toup-enter,
+.toup-leave-to {
+  transform: translate3d(0, 100px, 0);
+}
+
+// ----
+.vue-picker {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #fff;
+  user-select: none;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+}
+
+.content {
+  overflow: hidden;
+  height: 220px;
+  position: relative;
+  display: flex;
+}
+
+.colums {
+  display: flex;
+  overflow: hidden;
+  font-size: 16px;
+  text-align: center;
+  flex: 1;
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+  background-repeat: no-repeat;
+  background-position: top, bottom;
+  backface-visibility: hidden;
+  pointer-events: none;
+  background-size: 100% 88px;
+}
+
+.hairline {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 3;
+  width: 100%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  height: 44px;
+
+  &::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    top: -50%;
+    right: -50%;
+    bottom: -50%;
+    left: -50%;
+    border: 0 solid #E3E4E8;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    border-width: 1.5px 0;
+    margin:0 34px
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/management/pages/edit/components/Picker/pickerHeader.vue b/web/src/management/pages/edit/components/Picker/pickerHeader.vue
new file mode 100644
index 00000000..ad4ca08e
--- /dev/null
+++ b/web/src/management/pages/edit/components/Picker/pickerHeader.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="header">
+    <div class="left">
+      <span class="btn cancel" @click="cancel">{{ props.cancelText }}</span>
+    </div>
+    <div class="title">{{ props.title }}</div>
+    <div class="right">
+      <span class="btn confirm" @click="confirm">{{ props.confirmText }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  cancelText: {
+    type: String
+  },
+  confirmText: {
+    type: String
+  },
+  title: {
+    type: String
+  }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+const cancel = () => {
+  emit('cancel')
+}
+
+const confirm = () => {
+  emit('confirm')
+}
+
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: 44px;
+  line-height: 44px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    top: -50%;
+    right: -50%;
+    bottom: -50%;
+    left: -50%;
+    border: 0 solid #ebedf0;
+    transform: scale(0.5);
+    border-width: 1px 0;
+  }
+}
+
+.title {
+  max-width: 50%;
+  font-weight: 500;
+  font-size: 16px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.btn {
+  padding: 0 16px;
+  font-size: 14px;
+  background-color: transparent;
+  &.cancel{
+    color: #6E707C;
+  }
+  &.confirm{
+    color:$primary-color;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/management/pages/edit/components/Picker/pickerList.vue b/web/src/management/pages/edit/components/Picker/pickerList.vue
new file mode 100644
index 00000000..ae7e7e0a
--- /dev/null
+++ b/web/src/management/pages/edit/components/Picker/pickerList.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="list" ref="list">
+    <ul :style="state.ulStyle">
+      <li v-for="(item, index) in props.column" :key="'item' + index" @click="setTop(index)">{{ item.text }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted, ref, watch, onBeforeUnmount } from 'vue'
+import { getClient, START_EVENT, MOVE_EVENT, END_EVENT } from './utils'
+import { isMobile as isInMobile } from '@/render/utils/index'
+
+const DEFAULT_DURATION = 200
+const LIMIT_TIME = 300
+const LIMIT_DISTANCE = 15
+const IS_Mobile = isInMobile()
+
+
+const props = defineProps({
+  defaultIndex: {
+    type: Number,
+    default: 0
+  },
+  column: {
+    type: Array,
+    default: () => ([])
+  },
+  boxHeight: Number,
+  itemHeight: Number,
+  rowNumber: Number
+})
+
+const  emit = defineEmits(['change'])
+
+const state = reactive({
+  ulStyle: {
+    transform: `translate3d(0px, 0px, 0px)`,
+    transitionDuration: `0ms`,
+    transitionProperty: `none`,
+    lineHeight: `${props.itemHeight}px`
+  },
+  bottom: 0,
+  top: 0,
+  startTop: 0,
+  selectIndex: 0,
+  touchStartTime: 0,
+  startY: 0,
+  momentumTop: 0,
+  disY: 0,
+})
+
+let wheelTimer = null;
+
+const list = ref(null)
+
+const count = computed(() => {
+  return props.column.length
+})
+
+const getRoNumber = computed(() => {
+  return Math.floor(props.rowNumber / 2)
+})
+
+const init = () => {
+  setTop(props.defaultIndex)
+  const halfBox = (props.boxHeight - props.itemHeight) / 2
+  state.bottom = halfBox + props.itemHeight
+  state.top = halfBox - count.value * props.itemHeight
+}
+
+const setTop = (index = 0) => {
+  const { boxHeight, itemHeight } = props;
+  state.startTop = ((boxHeight - itemHeight) / 2) - (index * itemHeight)
+  state.ulStyle.transform = `translate3d(0px, ${state.startTop}px, 0px)`
+  state.selectIndex = index
+  change()
+}
+
+const handleStart = (e) => {
+  state.touchStartTime = Date.now()
+  // ----
+  state.startY = getClient(e).y
+  state.momentumTop = state.startTop
+
+  state.ulStyle.transitionDuration = `0ms`
+  state.ulStyle.transitionProperty = `none`
+  if (!IS_Mobile) {
+    document.addEventListener(MOVE_EVENT, handleMove, false)
+    document.addEventListener(END_EVENT, handleEnd, false)
+  }
+}
+
+
+const handleMove = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+  state.disY = getClient(e).y - state.startY
+  state.startY = getClient(e).y
+  if (state.startTop >= state.bottom) {
+    state.startTop = state.bottom
+  } else if (state.startTop <= state.top) {
+    state.startTop = state.top
+  } else {
+    state.startTop += state.disY
+  }
+  state.ulStyle.transform = `translate3d(0px, ${state.startTop}px, 0px)`
+  const now = Date.now()
+
+  if (now - state.touchStartTime > LIMIT_TIME) {
+    state.touchStartTime = now
+    state.momentumTop = state.startTop
+  }
+}
+
+const handleEnd = () => {
+  if (!IS_Mobile) {
+    document.removeEventListener(MOVE_EVENT, handleMove, false)
+    document.removeEventListener(END_EVENT, handleEnd, false)
+  }
+  const distance = state.startTop - state.momentumTop
+  const duration = Date.now() - state.touchStartTime
+  const allowMomentum = duration < LIMIT_TIME && Math.abs(distance) > LIMIT_DISTANCE
+  if (allowMomentum) {
+    toMove(distance, duration)
+  } else {
+    setTranfromTop()
+  }
+}
+
+const setTranfromTop = () => {
+  state.ulStyle.transitionProperty = `all`
+  state.ulStyle.transitionDuration = `${DEFAULT_DURATION}ms`
+  if (state.startTop >= state.bottom - props.itemHeight) {
+    setTop()
+  } else if (state.startTop <= state.top + props.itemHeight) {
+    setTop(count.value - 1)
+  } else {
+    let index = Math.round((state.startTop) / props.itemHeight)
+    state.startTop = index * props.itemHeight
+    if (state.startTop > state.bottom) {
+      state.startTop = state.bottom - props.itemHeight
+      index = -getRoNumber.value
+    } else if (state.startTop < state.top) {
+      state.startTop = state.top + props.itemHeight
+      index = count.value + 1
+    }
+    state.ulStyle.transform = `translate3d(0px, ${state.startTop}px, 0px)`
+    index = getRoNumber.value - index
+    if (state.selectIndex !== index) {
+      state.selectIndex = index
+      change()
+    }
+  }
+}
+
+const toMove = (distance, duration) => {
+  const speed = Math.abs(distance / duration)
+  distance = state.startTop + (speed / 0.002) * (distance < 0 ? -1 : 1)
+  state.ulStyle.transitionProperty = `all`
+  state.ulStyle.transitionDuration = `1000ms`
+  setTop(Math.min(Math.max(Math.round(-distance / props.itemHeight), 0), count.value - 1))
+}
+
+const change = () => {
+  emit('change', props.column[state.selectIndex])
+}
+
+const mousewheel = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+  state.ulStyle.transitionDuration = `0ms`
+  state.ulStyle.transitionProperty = `none`
+  const { deltaX, deltaY } = e
+  if (Math.abs(deltaX) < Math.abs(deltaY)) {
+    state.startTop = state.startTop - deltaY
+    let b = state.bottom - props.itemHeight
+    let t = state.top + props.itemHeight
+    let shouldMove = true
+    if (state.startTop > b) {
+      state.startTop = b
+      shouldMove = false
+    } else if (state.startTop < t) {
+      state.startTop = t
+      shouldMove = false
+    }
+    state.ulStyle.transform = `translate3d(0px, ${state.startTop}px, 0px)`
+    if (shouldMove) {
+      clearInterval(wheelTimer)
+      wheelTimer = setTimeout(setTranfromTop, 100)
+    }
+  }
+}
+
+onMounted(() => {
+  init();
+  list.value.addEventListener(START_EVENT, handleStart, false)
+  if (!IS_Mobile) {
+    list.value.addEventListener('wheel', mousewheel, false)
+  } else {
+    list.value.addEventListener(MOVE_EVENT, handleMove, false)
+    list.value.addEventListener(END_EVENT, handleEnd, false)
+  }
+})
+
+onBeforeUnmount(() => {
+  list.value.removeEventListener(START_EVENT, handleStart, false)
+  if (!IS_Mobile) {
+    list.value.removeEventListener('wheel', mousewheel, false)
+    list.value.removeEventListener(MOVE_EVENT, handleMove, false)
+    list.value.removeEventListener(END_EVENT, handleEnd, false)
+  }
+})
+
+watch(() => props.column, () => {
+  init()
+})
+
+watch(() => props.defaultIndex, () => {
+  setTop(props.defaultIndex)
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.list {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+    line-height: 44px;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: #000;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/management/pages/edit/components/Picker/utils.ts b/web/src/management/pages/edit/components/Picker/utils.ts
new file mode 100644
index 00000000..c6bad545
--- /dev/null
+++ b/web/src/management/pages/edit/components/Picker/utils.ts
@@ -0,0 +1,16 @@
+export const DEFTAULT_ITEM_HEIGHT = 44
+
+// 兼容pc 移动端
+export const HAS_TOUCH = 'ontouchstart' in window
+export const START_EVENT = HAS_TOUCH ? 'touchstart' : 'mousedown'
+export const MOVE_EVENT = HAS_TOUCH ? 'touchmove' : 'mousemove'
+export const END_EVENT = HAS_TOUCH ? 'touchend' : 'mouseup'
+
+export const getClient = (e:any) => {
+  const clientX = HAS_TOUCH ? e.changedTouches[0].clientX : e.clientX
+  const clientY = HAS_TOUCH ? e.changedTouches[0].clientY : e.clientY
+  return {
+    x: clientX,
+    y: clientY
+  }
+}
diff --git a/web/src/materials/questions/widgets/MultilevelModule/BaseMultilevel/index.vue b/web/src/materials/questions/widgets/MultilevelModule/BaseMultilevel/index.vue
index 9858305f..7fbfdd3f 100644
--- a/web/src/materials/questions/widgets/MultilevelModule/BaseMultilevel/index.vue
+++ b/web/src/materials/questions/widgets/MultilevelModule/BaseMultilevel/index.vue
@@ -23,7 +23,8 @@
           </div>
         </template>
       </div>
-      <Picker v-model="pickPop" :list="listPop" @confirm="onConfirm" @cancel="onCancel" />
+      <Picker :data="listPop"
+      :showToolbar="true"  v-model:visible="pickPop" @confirm="onConfirm" @cancel="onCancel" />
     </div>
     <div v-else class="multilevel-wrapper-pc">
       <div v-for="(v, i) in valList" :key="v+i" class="multilevel-select-item">
@@ -50,7 +51,7 @@
 </template>
 <script setup>
 import { ref, nextTick, onMounted, computed } from 'vue'
-import Picker from '../Picker/index.vue'
+import Picker from '@/management/pages/edit/components/Picker/index.vue'
 import { isMobile as isInMobile } from '@/render/utils/index'
 const props = defineProps({
   multilevelData: {
@@ -78,6 +79,7 @@ const placeholderList = computed(() => {
   return props.multilevelData.placeholder
 })
 
+
 const resetValList = (index) => {
   for (let i = valList.value.length-1; index < i; i--) {
       valList.value[i] = null;
@@ -103,17 +105,17 @@ const handleChange = async(val,i) => {
 }
 
 const onConfirm = (val) => {
-  valList.value[pickIndex.value] = val;
-  handleChange(val, pickIndex.value);
+  valList.value[pickIndex.value] = val[0];
+  handleChange(val[0], pickIndex.value);
   pickIndex.value=-1
 }
 const onCancel = () => {
   pickIndex.value=-1
 }
 
-const showPickPop = (list,index) => {
+const showPickPop = (list, index) => {
   pickPop.value = true;
-  listPop.value = list
+  listPop.value = [list];
   pickIndex.value = index
 }
 
diff --git a/web/src/materials/questions/widgets/MultilevelModule/Picker/event.ts b/web/src/materials/questions/widgets/MultilevelModule/Picker/event.ts
deleted file mode 100644
index 403886ae..00000000
--- a/web/src/materials/questions/widgets/MultilevelModule/Picker/event.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-
-interface IEvent {
-  handleConfirm: () => void,
-  handleCancel: () => void
-}
-
-const useEvent = ({ emit, ctx }: any): IEvent => {
-  const handleConfirm = () => {
-    emit('confirm', ctx.list[ctx.index])
-    emit('update:modelValue', false)
-  }
-
-  const handleCancel = () => {
-    emit('update:modelValue', false)
-    emit('cancel', false)
-  }
-
-  return {
-    handleConfirm,
-    handleCancel
-  }
-}
-
-export default useEvent
\ No newline at end of file
diff --git a/web/src/materials/questions/widgets/MultilevelModule/Picker/index.vue b/web/src/materials/questions/widgets/MultilevelModule/Picker/index.vue
deleted file mode 100644
index 76b3dd6b..00000000
--- a/web/src/materials/questions/widgets/MultilevelModule/Picker/index.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div class="picker-wrapper" @click.stop>
-    <div class="picker-mask" v-show="modelValue" @click.stop="handleCancel"></div>
-    <transition name="slide-picker">
-      <div class="x-picker" v-show="modelValue">
-        <div class="x-picker__header">
-          <p class="x-picker__header-left" @click.stop="handleCancel">取消</p>
-          <p class="x-picker__header-right" @click.stop="handleConfirm">确定</p>
-        </div>
-        <div class="x-picker__content">
-          <div class="x-picker__content-wrapper"></div>
-          <ul class="x-picker__content-box" ref="box" :style="getOffsetY" @touchstart="handleStart"
-            @touchend="handleEnd" @touchmove="handleMove">
-            <li class="x-picker__content-item" v-for="(item, idx) in list" @click="goItem(idx)" :key="idx" :style="getStyle(Number(idx))">{{
-              item?.text }}</li>
-          </ul>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import { defineComponent, getCurrentInstance,watch } from 'vue'
-import useList from './list'
-import useEvent from './event'
-
-export default defineComponent({
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    },
-    modelValue: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, { emit }) {
-    const { ctx } = getCurrentInstance()
-    const $useList = useList(props)
-    const $useEvent = useEvent({ emit, ctx })
-
-
-    watch(()=>props.list,()=>{
-      $useList.resetData(0)
-      $useList.list.value = props.list  
-    })
-
-    return {
-      ...$useList,
-      ...$useEvent
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.x-picker {
-  width: 100%;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  background-color: #fff;
-  z-index: 99;
-}
-.picker-mask {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0,0,0,0.50);
-  z-index: 98;
-}
-
-.x-picker__header {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 24px;
-}
-
-.x-picker__header>p {
-  margin: 0;
-}
-
-.x-picker__header-left {
-  font-size: 14px;
-  color: #6E707C;
-}
-
-.x-picker__header-center {
-  color: gray;
-}
-
-.x-picker__header-right {
-  font-size: 14px;
-  color:  $primary-color;
-}
-
-.x-picker__content {
-  height: 230px;
-  padding: 15px 0;
-  margin: 0 24px;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-
-.x-picker__content-box {
-  flex: 1;
-  width: 100%;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transition: all .2s;
-  font-size: 20px;
-  transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
-  transform: translate(-50%, -20px);
-}
-
-.x-picker__content-wrapper {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-18px);
-  width: 100%;
-  height: 40px;
-  border-top: 1px solid #E3E4E8;
-  border-bottom: 1px solid #E3E4E8;
-}
-
-.x-picker__content-item {
-  height: 40px;
-  line-height:  40px;
-  transition: color .5s;
-  text-align: center
-}
-
-.slide-picker-enter-active,
-.slide-picker-leave-active {
-  transition: all .5s;
-}
-
-.slide-picker-enter-from,
-.slide-picker-leave-to {
-  transform: translateY(100%);
-}
-</style>
\ No newline at end of file
diff --git a/web/src/materials/questions/widgets/MultilevelModule/Picker/list.ts b/web/src/materials/questions/widgets/MultilevelModule/Picker/list.ts
deleted file mode 100644
index 4a22b3b6..00000000
--- a/web/src/materials/questions/widgets/MultilevelModule/Picker/list.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { ref, computed } from 'vue'
-import type { Ref } from 'vue'
-
-interface IList {
-  box: Ref,
-  list: Ref<Array<any>>,
-  getOffsetY: any,
-  getStyle: any,
-  handleMove: (e: TouchEvent) => void,
-  handleStart: (e: TouchEvent) => void,
-  handleEnd: (e: TouchEvent) => void,
-  goItem: (idx: number) => void,
-  resetData: () => void,
-  index: Ref<number>
-}
-
-const useList = (props: any): IList => { 
-  const colors = ['gray', '#ccc', '#ddd', '#eee']
-  const scales = [.96, .9, .88, .84]
-  let startY: number, activeIndex = 0
-  const box = ref()
-  const offY = ref()
-  const index = ref(0)
-  const list = ref(props.list)
-
-  const getStyle = (idx: number) => {
-    let color = '#000', scale = 1
-    const len = colors.length - 1
-    if (idx > activeIndex) {
-      const _idx = idx - activeIndex > len ? len : idx - activeIndex - 1
-      color = colors[_idx]
-      scale = scales[_idx]
-    } else if (idx < activeIndex) {
-      const _idx = activeIndex - idx > len ? len : activeIndex - idx - 1
-      color = colors[_idx]
-      scale = scales[_idx]
-    }
-    return { color, transform: `scale(${scale})` }
-  }
-
-  // 节流
-  const throttle = function (callback: any, delay = 20) {
-    let timer: any = null
-    return function (args: any) {
-      if (timer) {
-        return 
-      }
-      timer = setTimeout(() => {
-        callback(args)
-        timer = null
-      }, delay)
-    }
-  }
-
-  // 移动的实现
-  const move = throttle((e: any) => {
-    offY.value = e.touches[0].clientY - startY
-    if (offY.value > 40) {
-      offY.value = 40
-    } else if (offY.value < -box.value.offsetHeight - 40) {
-      offY.value = -box.value.offsetHeight - 40
-    }
-    // 计算当前位置的就近下标
-    index.value = Math.abs(Math.ceil(offY.value / 40))
-    // 判断顶部和底部的一个界限，然后做一个位置的重置
-    if (index.value <= 0 || offY.value > 0) {
-      index.value = 0
-    } else if (index.value > list.value.length - 1 || offY.value < -box.value.offsetHeight - 18) {
-      index.value = list.value.length - 1
-    }
-    activeIndex = index.value
-  })
-
-  const goItem = (idx: number) => { 
-    index.value = idx;
-    activeIndex = idx;
-  }
-
-  const resetData = () => {
-    startY = 0;
-    activeIndex = 0
-    index.value = 0
-    box.value = null;
-    offY.value = null;
-  }
-
-  const handleStart = (e: TouchEvent) => {
-    const transform = box.value.style.transform
-    transform.match(/,(.*)px/)
-    startY = e.touches[0].clientY - Number(RegExp.$1)
-  }
-
-  const handleMove = (e: TouchEvent) => move(e)
-
-  const handleEnd = () => {
-    // 重置当前位置，加setTimeout避免出现Bug
-    setTimeout(() => {
-      offY.value = -index.value * 40 - 18
-    }, 100)
-  }
-
-  const getOffsetY = computed(() => {
-    if (typeof offY.value === 'number') {
-      return {
-        transform: `translate(-50%, ${offY.value}px)`
-      }
-    } else {
-      return {
-        transform: 'translate(-50%, -18px)'
-      }
-    }
-  })
-  
-  return {
-    box,
-    list,
-    getOffsetY,
-    getStyle,
-    handleMove,
-    handleStart,
-    handleEnd,
-    goItem,
-    resetData,
-    index
-  }
-}
-
-export default useList
\ No newline at end of file
diff --git a/web/src/render/main.js b/web/src/render/main.js
index e097d4ca..ca68f229 100644
--- a/web/src/render/main.js
+++ b/web/src/render/main.js
@@ -3,7 +3,6 @@ import App from './App.vue'
 import EventBus from './utils/eventbus'
 import router from './router'
 import { createPinia } from 'pinia'
-import 'default-passive-events'
 
 const app = createApp(App)
 const pinia = createPinia()