qtsk-vue3 0.0.18 → 0.0.20

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/components/Loading/index.js

@@ -0,0 +1,3 @@
+import { ElLoading } from 'element-plus'
+
+export const Loading = ElLoading

package/package/components/Select/index.vue

@@ -5,7 +5,7 @@
         v-bind="$attrs" 
         :teleported="false" 
         :no-data-text="'暂无数据项'"
-        clearable
+        :clearable="clearable"
     >
         <el-option v-for="item in options" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]">
             <div v-if="item.icon" style="display: flex;align-items: center;justify-content: space-between;">
@@ -39,6 +39,10 @@ defineProps({
     valueName: {
         type: String,
         default: 'value'
+    },
+    clearable: {
+        type: Boolean,
+        default: true
     }
 })
 const selectValue = defineModel('modelValue', { default: '', type: [Number, String, Array] })

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

@@ -1,22 +1,23 @@
-import Components from './component'
-import { Message, MessageBox } from './components/Message'
-
-const makeInstaller = (components = [], directives = []) => {
-    const apps = []
-    const install = (app, opts) => {
-        const option = opts
-        if (apps.includes(app)) return
-        apps.push(app)
-        components.forEach((c) => {
-            app.component(c.name, c)
-        })
-        app.config.globalProperties.$ELEMENT = option
-    }
-    return install
-}
-
-const install = makeInstaller(Components)
-
-export { Message, MessageBox, install, install as default }
-
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
+import Components from './component'
+import { Message, MessageBox } from './components/Message'
+import { Loading } from './components/Loading'
+
+const makeInstaller = (components = [], directives = []) => {
+    const apps = []
+    const install = (app, opts) => {
+        const option = opts
+        if (apps.includes(app)) return
+        apps.push(app)
+        components.forEach((c) => {
+            app.component(c.name, c)
+        })
+        app.config.globalProperties.$ELEMENT = option
+    }
+    return install
+}
+
+const install = makeInstaller(Components)
+
+export { Message, MessageBox, Loading, 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.20",
   "description": "vue3版组件库",
   "main": "./package/index.js",
   "scripts": {