qtsk-vue3 0.0.10 → 0.0.12

package/package/components/DatePicker/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-config-provider :locale="zhCn">
-    <el-date-picker style="width: 100%;" v-model="modelValue" type="date" :placeholder="placeholder" :format="format" :value-format="format"/>
+    <el-date-picker style="width: 100%;" v-model="modelValue" :type="type" :placeholder="placeholder" :format="format" :value-format="format"/>
   </el-config-provider>
 </template>
 
@@ -21,6 +21,10 @@ const props = defineProps({
     type: String,
     default: '请选择'
   },
+  type: {
+    type: String,
+    default: 'date'
+  }
 })
 
 const modelValue = defineModel('modelValue', { type: String })

package/package/components/Input/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs">
+    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs" clearable>
         <template #prepend v-if="$slots.prepend">
             <!-- 前缀 -->
             <slot name="prepend" />

package/package/components/Menu/index.vue

@@ -2,10 +2,10 @@
     <div class="menu">
         <el-menu class="el-menu-vertical-demo" router :collapse="isCollapse" :default-active="activeMenu"
             @open="handleOpen" @close="handleClose">
-            <el-menu-item :index="menu.path" v-for="(menu, index) in menus" :key="index">
+            <el-menu-item :index="menu.url" v-for="(menu, index) in menus" :key="index">
                 <Icons :type="menu.icon"></Icons>
                 <template #title>
-                    <span>{{ menu.name }}</span>
+                    <span>{{ menu.menuName }}</span>
                 </template>
             </el-menu-item>
         </el-menu>
@@ -33,10 +33,10 @@ defineProps({
 })
 const isCollapse = ref(false)
 const handleOpen = (key, keyPath) => {
-    console.log(key, keyPath)
+    // console.log(key, keyPath)
 }
 const handleClose = (key, keyPath) => {
-    console.log(key, keyPath)
+    // console.log(key, keyPath)
 }
 
 </script>

package/package/components/Message/index.js

@@ -3,25 +3,26 @@
 */
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-export const Message = {
-    error: (message) => {
-        ElMessage.error(message)
-    },
-    success: (message) => {
-        ElMessage({
-            message,
-            type: 'success',
-        })
-    },
-    warning: (message) => {
-        ElMessage({
-            message,
-            type: 'warning',
-          })
-    },
-    info:  (message) => {
-        ElMessage(message)
+// 重置message，防止重复点击重复弹出message弹框
+let messageInstance = null;
+// 判断是否已经存在信息实例
+const hasMessageInstance = (type, message) => {
+    if (messageInstance) {
+        messageInstance.close();
     }
+    messageInstance = ElMessage[type]({
+        message,
+        type,
+    })
 }
 
-export const MessageBox = ElMessageBox
+export let Message = {};
+
+['error', 'success', 'info', 'warning'].forEach((type) => {
+	Message[type] =(message) => {
+        hasMessageInstance(type, message)
+    };
+})
+
+
+export const MessageBox = ElMessageBox

package/package/components/Pagination/index.vue

@@ -21,13 +21,16 @@ defineProps({
     default: 0
   }
 })
+const emits = defineEmits(['handleChangePage'])
 // 条目个数改变
 const handleSizeChange = (val) => {
   console.log(`${val} items per page`)
+  emits('handleChangePage', 'size', val)
 }
 // 当前页码改变
 const handleCurrentChange = (val) => {
   console.log(`current page: ${val}`)
+  emits('handleChangePage', 'current', val)
 }
 </script>
 

package/package/components/Select/index.vue

@@ -6,7 +6,12 @@
         :teleported="false" 
         clearable
     >
-        <el-option v-for="item in options" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]" />
+        <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;">
+                <Icons :type="item.icon"/>
+                <span>{{ item.icon }}</span>
+            </div>
+        </el-option>
     </el-select>
 </template>
 
@@ -35,14 +40,14 @@ defineProps({
         default: 'value'
     }
 })
-const selectValue = defineModel('modelValue', { default: '', type: [Number, String] })
+const selectValue = defineModel('modelValue', { default: '', type: [Number, String, Array] })
 </script>
 
 <style lang="less" scoped>
 :deep(.el-select__wrapper.is-focused){
-    box-shadow: 0 0 0 1px var(--qt-main-color) inset;
+    box-shadow: 0 0 0 1px var(--main-color) inset;
 }
 :deep(.el-select-dropdown__item.is-selected){
-    color: var(--qt-main-color);
+    color: var(--main-color);
 }
 </style>

package/package/components/Table/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-table :data="data" style="width: 100%" :header-cell-style="{background:'#f2f4f7', color:'#606266',height: '60px'}" border>
+    <el-table :data="data" style="width: 100%" :height="height" :header-cell-style="{background:'#f2f4f7', color:'#606266',height: '60px'}" border>
       <el-table-column 
         v-for="(column, index) in columns" 
         :label="column.label"
@@ -36,6 +36,10 @@ defineProps({
     type: Object,
     default: () => ([])
   },
+  height: {
+    type: Number,
+    default: 400
+  },
   columns: {
     type: Array,
     default: () => ([])

package/package/components/Tree/index.vue

@@ -8,9 +8,20 @@
     default-expand-all
     :node-key="nodeKey"
     :expand-on-click-node="false"
+    :default-checked-keys="checkedKeys"
     @node-click="handleNodeClick"
     @check-change="checkChange"
-  />
+  >
+    <template #default="{ node, data }" v-if="editable">
+        <span class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <span>
+            <Icons type="Delete" style="margin-right: 10px;" @click.stop="handleOperations(data,'delete')"/>
+            <Icons type="Edit" @click.stop="handleOperations(data, 'edit')"/>
+          </span>
+        </span>
+    </template>
+  </el-tree>
 </template>
 
 <script setup>
@@ -24,7 +35,7 @@ defineOptions({
   name: 'Tree',
 })
 
-defineProps({
+const props = defineProps({
   data: {
     type: Array,
     default: () => ([])
@@ -36,22 +47,36 @@ defineProps({
   nodeKey: {
     type: String,
     default: 'id'
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  checkedKeys: {
+    type: Array,
+    default: () => ([])
+  },
+  labelName: {
+    type: String,
+    default: 'name'
   }
 })
 
+const emits = defineEmits(['handleTree', 'handleNode'])
 // 点击节点
 const handleNodeClick = (data) => {
-  console.log('tree-data', data)
+  console.log('data', data)
+  emits('handleNode', data)
 }
 
 const defaultProps = {
   children: 'children',
-  label: 'label',
+  label: props.labelName
 }
 
 // 获取选中的节点
 const getCheckedKeys = () => {
-  console.log(treeRef.value.getCheckedKeys(false))
+  return treeRef.value.getCheckedKeys(false)
 }
 
 //当复选框被点击的时候触发, 用于获取所有的选中数据
@@ -59,9 +84,24 @@ const checkChange = () => {
   modelValue.value = treeRef.value.getCheckedKeys(false)
 }
 
+const handleOperations = (data, type) => {
+  emits('handleTree', data, type)
+}
 defineExpose({
   getCheckedKeys
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+.el-tree .is-current {
+  background: pink;
+}
+</style>

package/package.json

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