qtsk-vue3 0.0.18 → 0.0.19

package/package/components/Area/index.vue

@@ -4,35 +4,36 @@
         placeholder="请选择省市区"
         size="default"
         :options="regionData"
-        v-model="area"
+        v-model="modelValue"
+        clearable
+        @change="handleChange"
       >
       </el-cascader>
     </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
 import { ElCascader } from 'element-plus'
 import { regionData } from 'element-china-area-data'
+import { treeToArray } from '../../utils/common'
+const regionFlatData = treeToArray(regionData)
 defineOptions({
   name: 'Area',
 })
 const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: () => ([])
-  }
+  idx: Number
 })
-const emits = defineEmits(['update:modelValue'])
-const area = computed({
-  get(){
-    return props.modelValue
-  },
-  set(val){
-    console.log('val', val)
-    emits('update:modelValue', Object.values(val))
-  }
+
+const emits = defineEmits(['update:modelValue', 'change'])
+const modelValue = defineModel('modelValue')
+
+const handleChange = (value) => {
+  emits('change', {index: props.idx, value})
+}
+defineExpose({
+  regionFlatData
 })
+
 </script>
 
 <style lang="less" scoped>

package/package/components/DatePicker/index.vue

@@ -48,7 +48,7 @@ const props = defineProps({
   }
 })
 
-const modelValue = defineModel('modelValue', { type: String })
+const modelValue = defineModel('modelValue', { type: [String, Array] })
 </script>
 
 <style lang="less" scoped>

package/package/components/FormItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-form-item :label="label" :prop="propName">
+    <el-form-item :label="label" :prop="propName" :key="label">
       <slot/>
     </el-form-item>
 </template>

package/package/components/Input/index.vue

@@ -37,9 +37,10 @@ const props = defineProps({
         type: [String, Number],
         default: ''
     },
-    disabled: Boolean
+    disabled: Boolean,
+    idx: Number
 })
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'change'])
 const formData = defineModel('formData')
 const inputValue = computed({
     get () {
@@ -50,6 +51,7 @@ const inputValue = computed({
             value = value.trim()
         }
         if (formData.value?.loc) formData.value.loc = ''
+        emits('change', {index: props.idx || 0, keyWord: value})
         emits('update:modelValue', value)
     }
 })

package/package/index.backup.js

@@ -19,5 +19,4 @@ const install = makeInstaller(Components)
 
 export { Message, MessageBox, install, install as default }
 
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
-
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package/index.js

@@ -20,3 +20,5 @@ const install = makeInstaller(Components)
 export { Message, MessageBox, install, install as default }
 
 console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
+
+

package/package/utils/common.js

@@ -52,4 +52,30 @@ export const dateFormat = (time, format) => {
     } else {
         return ''
     }
-}
+}
+
+// 将树形结构数组对象转换为二维数组
+export const treeToArray = (treeArray) => {
+    const result = []
+  
+    function flatten (node, level) {
+      result.push({
+        id: node.value,
+        name: node.label,
+        level: level
+      })
+  
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          flatten(child, level + 1)
+        })
+      }
+    }
+  
+    treeArray.forEach(node => {
+      flatten(node, 0)
+    })
+  
+    return result
+  }
+  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qtsk-vue3",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "vue3版组件库",
   "main": "./package/index.js",
   "scripts": {