dpzvc3-ui 3.0.0

package/src/components/picker/area-picker/area-picker.vue

@@ -0,0 +1,230 @@
+<template>
+  <div :class="classes">
+    <div class="header">
+      <div
+        class="left"
+        @click="cancle"
+      >
+        取消
+      </div>
+      <div class="title">
+        请选择区域
+      </div>
+      <div
+        class="right"
+        @click="sure"
+      >
+        确定
+      </div>
+    </div>
+
+    <div class="main">
+      <PickerSlot
+        :list="provinces"
+        :init-item="province.code"
+        target="province"
+        @change="change"
+      />
+      <PickerSlot
+        :list="citys"
+        :init-item="city.code"
+        target="city"
+        @change="change"
+      />
+      <PickerSlot
+        :list="districts"
+        :init-item="district.code"
+        target="district"
+        @change="change"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, inject } from 'vue'
+import CHINA_AREA from 'china-area-data'
+import PickerSlot from '../picker-slot'
+import props from './props'
+
+const prefixCls = 'dpzvc3-picker'
+const rootCode = '86'
+
+export default defineComponent({
+  name: 'AreaPicker',
+  components: { PickerSlot },
+  props: {
+    ...props,
+    addressValue: String,
+    valueSeparator: {
+      type: String,
+      default: '-'
+    }
+  },
+  setup (props, { emit }) {
+    const { pickerOnOk, pickeronFail } = inject('DpzVc3Picker')
+    const currentValue = ref(props.addressValue || '')
+
+    const province = ref({
+      value: '北京市',
+      code: '110000',
+      target: 'province',
+      index: 0
+    })
+
+    const city = ref({
+      value: '市辖区',
+      code: '110100',
+      target: 'city',
+      index: 0
+    })
+
+    const district = ref({
+      value: '东城区',
+      code: '110101',
+      target: 'district',
+      index: 0
+    })
+
+    const classes = computed(() => [prefixCls])
+
+    // 计算省、市、区列表
+    const provinces = computed(() => filter('province'))
+    const citys = computed(() => filter('city', province.value))
+    const districts = computed(() => filter('district', city.value))
+
+    watch(
+      () => props.addressValue,
+      (val) => {
+        currentValue.value = val
+        initVal()
+      },
+      { immediate: true }
+    )
+
+    function initVal () {
+      if (!currentValue.value) return
+      const [provinceName, cityName, districtName] = currentValue.value.split(
+        props.valueSeparator
+      )
+
+      // 省份
+      const provincesData = CHINA_AREA[rootCode]
+      if (provincesData) {
+        Object.keys(provincesData).forEach((item) => {
+          if (provinceName === item || provinceName === provincesData[item]) {
+            province.value.value = provincesData[item]
+            province.value.code = item
+          }
+        })
+      }
+
+      // 城市
+      const cityData = CHINA_AREA[province.value.code]
+      if (cityData) {
+        Object.keys(cityData).forEach((item) => {
+          if (cityName === item || cityName === cityData[item]) {
+            city.value.value = cityData[item]
+            city.value.code = item
+          }
+        })
+      }
+
+      // 区县
+      const districtData = CHINA_AREA[city.value.code]
+      if (districtData) {
+        Object.keys(districtData).forEach((item) => {
+          if (districtName === item || districtName === districtData[item]) {
+            district.value.value = districtData[item]
+            district.value.code = item
+          }
+        })
+      }
+    }
+
+    function filter (target, val = {}) {
+      switch (target) {
+      case 'province': {
+        const data = CHINA_AREA[rootCode]
+        if (!data) return []
+        return Object.keys(data).map((item, index) => ({
+          code: item,
+          value: data[item],
+          target,
+          index
+        }))
+      }
+      case 'city':
+      case 'district': {
+        const listData = CHINA_AREA[val.code]
+        if (!listData) {
+          if (target) {
+            if (target === 'city') city.value = { value: '', code: '', target, index: 0 }
+            if (target === 'district') district.value = { value: '', code: '', target, index: 0 }
+          }
+          return []
+        }
+        return Object.keys(listData).map((item, index) => ({
+          code: item,
+          value: listData[item],
+          target,
+          index
+        }))
+      }
+      }
+    }
+
+    function change (target, current) {
+      if (target === 'province') province.value = { ...province.value, ...current }
+      if (target === 'city') city.value = { ...city.value, ...current }
+      if (target === 'district') district.value = { ...district.value, ...current }
+
+      emit('update:addressValue', [
+        province.value.value,
+        city.value.value,
+        district.value.value
+      ].filter(Boolean).join(props.valueSeparator))
+
+      emit('change', {
+        province: { code: province.value.code, name: province.value.value },
+        city: { code: city.value.code, name: city.value.value },
+        district: { code: district.value.code, name: district.value.value }
+      })
+    }
+
+    function sure () {
+      // emit('sure', {
+      //   province: { code: province.value.code, name: province.value.value },
+      //   city: { code: city.value.code, name: city.value.value },
+      //   district: { code: district.value.code, name: district.value.value },
+      //   formArea: [province.value.value, city.value.value, district.value.value].filter(Boolean).join(props.valueSeparator)
+      // })
+      pickerOnOk({
+        province: { code: province.value.code, name: province.value.value },
+        city: { code: city.value.code, name: city.value.value },
+        district: { code: district.value.code, name: district.value.value },
+        formArea: [province.value.value, city.value.value, district.value.value].filter(Boolean).join(props.valueSeparator)
+      })
+    }
+
+    function cancle () {
+      // emit('cancle')
+      pickeronFail()
+    }
+
+    return {
+      classes,
+      province,
+      city,
+      district,
+      provinces,
+      citys,
+      districts,
+      currentValue,
+      change,
+      sure,
+      cancle
+    }
+  }
+})
+</script>

package/src/components/picker/area-picker/props.js

@@ -0,0 +1,17 @@
+/**
+ * Created by admin on 2025/10/13.
+ */
+export default {
+  props: {
+    addressValue: String,
+    styles: {
+      type: Object,
+      default: () => {
+      }
+    },
+    valueSeparator: {
+      type: String,
+      default: '/'
+    }
+  }
+}

package/src/components/picker/date-picker/date-picker.vue

@@ -0,0 +1,191 @@
+<template>
+  <div :class="classes">
+    <div class="header">
+      <div
+        class="left"
+        @click="cancle"
+      >
+        取消
+      </div>
+      <div
+        class="right"
+        @click="sure"
+      >
+        确定
+      </div>
+    </div>
+
+    <div class="main">
+      <PickerSlot
+        v-if="year"
+        :list="yearList"
+        :init-item="date.year.code"
+        target="year"
+        @change="change"
+      />
+      <PickerSlot
+        v-if="month"
+        :list="monthList"
+        :init-item="date.month.code"
+        target="month"
+        @change="change"
+      />
+      <PickerSlot
+        v-if="day"
+        :list="dayList"
+        :init-item="date.day.code"
+        target="day"
+        @change="change"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, inject } from 'vue'
+import PickerSlot from '../picker-slot.vue'
+import props from './props'
+
+const DAYS = {
+  30: [4, 6, 9, 11],
+  31: [1, 3, 5, 7, 8, 10, 12]
+}
+const prefixCls = 'dpzvc3-date-picker'
+
+export default defineComponent({
+  name: 'DatePicker',
+  components: { PickerSlot },
+  props: {
+    ...props,
+    dateValue: String,
+    year: [Boolean, Array],
+    month: [Boolean, Array],
+    day: [Boolean, Array],
+    valueSeparator: { type: String, default: '-' }
+  },
+  setup (props, { emit }) {
+    const { pickerOnOk, pickeronFail } = inject('DpzVc3Picker')
+    const currentValue = ref(props.dateValue || '')
+
+    const date = ref({
+      year: { code: new Date().getFullYear(), value: String(new Date().getFullYear()), target: 'year', index: 0 },
+      month: { code: new Date().getMonth() + 1, value: String(new Date().getMonth() + 1), target: 'month', index: 0 },
+      day: { code: new Date().getDate(), value: String(new Date().getDate()), target: 'day', index: 0 },
+      formatDate: ''
+    })
+
+    const classes = computed(() => [prefixCls])
+
+    const yearList = computed(() => {
+      if (!props.year) return []
+      let from = 1900
+      let to = new Date().getFullYear()
+      if (Array.isArray(props.year)) {
+        from = props.year[0] ?? from
+        to = props.year[1] ?? to
+      }
+      const list = []
+      for (let i = from, index = 0; i <= to; i++, index++) {
+        list.push({ code: i, value: String(i), target: 'year', index })
+      }
+      return list
+    })
+
+    const monthList = computed(() => {
+      if (!props.month) return []
+      let from = 1
+      let to = 12
+      if (Array.isArray(props.month)) {
+        from = props.month[0] ?? from
+        to = props.month[1] ?? to
+      }
+      const list = []
+      for (let i = from, index = 0; i <= to; i++, index++) {
+        list.push({ code: i, value: String(i), target: 'month', index })
+      }
+      return list
+    })
+
+    const dayList = computed(() => {
+      if (!props.day) return []
+      let from = 1
+      let to = 31
+
+      const month = Number(date.value.month.value)
+      const year = Number(date.value.year.code)
+
+      if (DAYS[30].includes(month)) to = 30
+      else if (DAYS[31].includes(month)) to = 31
+      else {
+        // 二月
+        if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) to = 29
+        else to = 28
+      }
+
+      if (Array.isArray(props.day)) {
+        from = props.day[0] ?? from
+        to = props.day[1] ?? to
+      }
+
+      const list = []
+      for (let i = from, index = 0; i <= to; i++, index++) {
+        list.push({ code: i, value: String(i), target: 'day', index })
+      }
+      return list
+    })
+
+    watch(() => props.dateValue, (val) => {
+      currentValue.value = val
+      initVal()
+    }, { immediate: true })
+
+    function initVal () {
+      if (!currentValue.value) return
+      const [y = '', m = '', d = ''] = currentValue.value.split(props.valueSeparator)
+      if (props.year) date.value.year = { ...date.value.year, code: Number(y), value: y }
+      if (props.month) date.value.month = { ...date.value.month, code: Number(m), value: m }
+      if (props.day) date.value.day = { ...date.value.day, code: Number(d), value: d }
+    }
+
+    function cancle () {
+      // emit('cancle')
+      pickeronFail()
+    }
+
+    function sure () {
+      date.value.formatDate = [date.value.year.value, date.value.month.value, date.value.day.value]
+        .filter(Boolean)
+        .join(props.valueSeparator)
+      // emit('sure', date.value)
+      pickerOnOk(date.value)
+    }
+
+    function change (target, current) {
+      if (target === 'year') date.value.year = { ...date.value.year, ...current }
+      if (target === 'month') date.value.month = { ...date.value.month, ...current }
+      if (target === 'day') date.value.day = { ...date.value.day, ...current }
+
+      date.value.formatDate = [date.value.year.value, date.value.month.value, date.value.day.value]
+        .filter(Boolean)
+        .join(props.valueSeparator)
+
+      emit('change', target, current)
+    }
+
+    return {
+      classes,
+      date,
+      yearList,
+      monthList,
+      dayList,
+      cancle,
+      sure,
+      change
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

package/src/components/picker/date-picker/props.js

@@ -0,0 +1,24 @@
+/**
+ * Created by yishide on 2025/9/13.
+ */
+export default {
+  props: {
+    dateValue: String,
+    year: {
+      type: [Boolean, Array],
+      default: true
+    },
+    month: {
+      type: [Boolean, Array],
+      default: true
+    },
+    day: {
+      type: [Boolean, Array],
+      default: true
+    },
+    valueSeparator: {
+      type: String,
+      default: '/'
+    }
+  }
+}

package/src/components/picker/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/11/19.
+ */
+import Picker from './picker'
+export default Picker

package/src/components/picker/normal-picker/normal-picker.vue

@@ -0,0 +1,120 @@
+<template>
+  <div :class="classes">
+    <div class="header">
+      <div
+        class="left"
+        @click="cancle"
+      >
+        取消
+      </div>
+      <div
+        class="right"
+        @click="sure"
+      >
+        确定
+      </div>
+    </div>
+    <div class="main">
+      <PickerSlot
+        v-for="(item, key) in shadowList"
+        :key="item.target"
+        :target="item.target"
+        :init-item="initItems[key]"
+        :list="item.list"
+        @change="change"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, inject } from 'vue'
+import PickerSlot from '../picker-slot.vue'
+
+const prefixCls = 'dpzvc3-normal-picker'
+
+export default defineComponent({
+  name: 'NormalPicker',
+  components: { PickerSlot },
+  props: {
+    list: { type: Array, default: () => [] },
+    initArr: { type: Array, default: () => [] }
+  },
+  setup (props, { emit }) {
+    const { pickerOnOk, pickeronFail } = inject('DpzVc3Picker')
+
+    /** 初始化选中项 */
+    const initItems = ref(
+      props.initArr.length
+        ? [...props.initArr]
+        : props.list.map(item => item.list?.[0]?.code ?? '')
+    )
+
+    const normal = ref({})
+
+    /**
+     * ⚠️ 关键修复点：
+     * - 不修改 props.list
+     * - 返回全新对象
+     */
+    const shadowList = computed(() => {
+      return props.list.map(item => {
+        const list = (item.list || []).map((child, index) => ({
+          code: child.code ?? child.value,
+          value: child.value,
+          target: child.target ?? item.target,
+          index
+        }))
+
+        return {
+          ...item,
+          list
+        }
+      })
+    })
+
+    const classes = computed(() => [prefixCls])
+
+    watch(
+      () => props.initArr,
+      val => {
+        initItems.value =
+          val.length > 0
+            ? [...val]
+            : props.list.map(item => item.list?.[0]?.code ?? '')
+      }
+    )
+
+    function cancle () {
+      pickeronFail()
+    }
+
+    function sure () {
+      pickerOnOk(normal.value)
+    }
+
+    function change (target, current) {
+      const index = shadowList.value.findIndex(i => i.target === target)
+      if (index !== -1) {
+        initItems.value[index] = current.code
+      }
+
+      normal.value = {
+        ...normal.value,
+        [target]: current
+      }
+
+      emit('scroll', current)
+    }
+
+    return {
+      classes,
+      shadowList,
+      initItems,
+      cancle,
+      sure,
+      change
+    }
+  }
+})
+</script>

package/src/components/picker/normal-picker/props.js

@@ -0,0 +1,20 @@
+/**
+ * Created by admin on 2025/11/14.
+ */
+export default {
+  props: {
+    list: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    initArr: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+
+  }
+}